diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e2cdb0cf6..20269e174e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -23,6 +23,7 @@ The types of changes are: ### Developer Experience - Added Carbon Icons to FidesUI [#5416](https://github.com/ethyca/fides/pull/5416) +- Apply new color palette as scss module [#5453](https://github.com/ethyca/fides/pull/5453) ## [2.48.2](https://github.com/ethyca/fidesplus/compare/2.48.1...2.48.2) diff --git a/clients/admin-ui/next-env.d.ts b/clients/admin-ui/next-env.d.ts index fd36f9494e..725dd6f245 100644 --- a/clients/admin-ui/next-env.d.ts +++ b/clients/admin-ui/next-env.d.ts @@ -3,4 +3,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/clients/admin-ui/package.json b/clients/admin-ui/package.json index 5f8a201c7a..5b98d7cddf 100644 --- a/clients/admin-ui/package.json +++ b/clients/admin-ui/package.json @@ -107,6 +107,7 @@ "openapi-typescript-codegen": "^0.23.0", "postcss": "^8.4.41", "prettier": "^3.3.3", + "sass": "^1.80.6", "tailwindcss": "^3.4.10", "typescript": "4.9.5", "whatwg-fetch": "^3.6.2" diff --git a/clients/admin-ui/src/features/common/SearchBar.tsx b/clients/admin-ui/src/features/common/SearchBar.tsx index 752dd8269a..973ca254ed 100644 --- a/clients/admin-ui/src/features/common/SearchBar.tsx +++ b/clients/admin-ui/src/features/common/SearchBar.tsx @@ -31,17 +31,9 @@ const SearchBar = ({ onChange={handleSearchChange} placeholder={placeholder || "Search..."} prefix={withIcon ? : undefined} - className="border-neutral-2" {...props} /> - {onClear ? ( - - ) : null} + {onClear ? : null} ); }; diff --git a/clients/admin-ui/src/pages/_app.tsx b/clients/admin-ui/src/pages/_app.tsx index a725ac9b59..1dd3eb6826 100644 --- a/clients/admin-ui/src/pages/_app.tsx +++ b/clients/admin-ui/src/pages/_app.tsx @@ -3,6 +3,7 @@ import "@fontsource/inter/500.css"; import "@fontsource/inter/600.css"; import "@fontsource/inter/700.css"; import "../theme/tailwind.css"; +import "../theme/global.scss"; import { FidesUIProvider, Flex } from "fidesui"; import type { AppProps } from "next/app"; diff --git a/clients/admin-ui/src/theme/ant.ts b/clients/admin-ui/src/theme/ant.ts index 1d1ee1eb0a..9647c2b611 100644 --- a/clients/admin-ui/src/theme/ant.ts +++ b/clients/admin-ui/src/theme/ant.ts @@ -1,49 +1,65 @@ import { AntThemeConfig } from "fidesui"; +import palette from "fidesui/src/palette/palette.module.scss"; + +/** + * Order of priority for styling + * 1. Ant Design default theme + * 2. FidesUI palette colors + * 3. Ant Design custom theme (this file, which also includes some custom override colors not found in the palette) + * 4. global CSS variables (as a last resort when styling Ant components, should rely on the palette vars) + * 5. tailwindcss (for layout and spacing only) + * 6. SCSS modules (for custom-component-specific styles) + */ export const antTheme: AntThemeConfig = { + cssVar: true, token: { - colorPrimary: "#2b2e35", - colorInfo: "#2b2e35", - colorSuccess: "#5a9a68", - colorWarning: "#e59d47", - colorError: "#d9534f", - colorLink: "#2272ce", - colorBgBase: "#ffffff", + colorPrimary: palette.FIDESUI_MINOS, + colorInfo: palette.FIDESUI_MINOS, + colorSuccess: palette.FIDESUI_SUCCESS, + colorWarning: palette.FIDESUI_WARNING, + colorError: palette.FIDESUI_ERROR, + colorLink: palette.LINK, + colorBgBase: palette.FIDESUI_FULL_WHITE, borderRadius: 4, wireframe: true, - colorTextBase: "#2b2e35", - colorErrorBg: "#ffdcd6", - colorErrorBorder: "#f2aca5", - colorWarningBg: "#ffecc9", - colorWarningBorder: "#ffdba1", - colorSuccessBorder: "#5a9a68", - colorPrimaryBg: "#e3e0d9", - colorBorder: "#e6e6e8", + colorTextBase: palette.FIDESUI_MINOS, + colorErrorBg: "#ffdcd6", // custom override + colorErrorBorder: "#f2aca5", // custom override + colorWarningBg: "#ffecc9", // custom override + colorWarningBorder: "#ffdba1", // custom override + colorSuccessBorder: palette.FIDESUI_SUCCESS, + colorPrimaryBg: palette.FIDESUI_SANDSTONE, + colorBorder: palette.FIDESUI_NEUTRAL_100, + zIndexPopupBase: 1500, // supersede Chakra's modal z-index }, components: { + Alert: { + colorInfoBg: palette.FIDESUI_FULL_WHITE, + colorInfo: palette.FIDESUI_NEUTRAL_500, + }, Button: { - primaryShadow: "", - defaultShadow: "", - dangerShadow: "", - defaultBg: "#ffffff", + primaryShadow: undefined, + defaultShadow: undefined, + dangerShadow: undefined, + defaultBg: palette.FIDESUI_FULL_WHITE, + }, + Input: { + colorBgContainer: palette.FIDESUI_FULL_WHITE, }, Layout: { - bodyBg: "rgb(250,250,250)", + bodyBg: palette.FIDESUI_NEUTRAL_50, }, - Alert: { - colorInfoBg: "rgb(255,255,255)", - colorInfo: "rgb(147,150,154)", + Select: { + optionActiveBg: palette.FIDESUI_SANDSTONE, }, Tooltip: { - colorBgSpotlight: "rgb(43,46,53)", - colorText: "rgb(250,250,250)", - colorTextLightSolid: "rgb(250,250,250)", + colorBgSpotlight: palette.FIDESUI_MINOS, + colorText: palette.FIDESUI_NEUTRAL_50, + colorTextLightSolid: palette.FIDESUI_NEUTRAL_50, }, Transfer: { - controlItemBgActiveHover: "rgb(206,202,194)", - }, - Input: { - colorBgContainer: "#ffffff", + controlItemBgActiveHover: palette.FIDESUI_SANDSTONE, }, }, }; diff --git a/clients/admin-ui/src/theme/global.scss b/clients/admin-ui/src/theme/global.scss new file mode 100644 index 0000000000..5c7aa053e1 --- /dev/null +++ b/clients/admin-ui/src/theme/global.scss @@ -0,0 +1,24 @@ +@import "fidesui/src/palette/palette.module.scss"; + +/** + * Adds the color variables from the palette to the root element + */ +:root { + @each $color, $value in $colors { + #{getPrefixedColor("--fidesui-", unquote($color))}: $value; + } +} + +/** + * Styles for Ant components where tokens are not available + */ +.ant-input-compact-item.ant-input-css-var { + --ant-color-border: var(--fidesui-neutral-200); + --ant-input-hover-border-color: var(--fidesui-neutral-200); +} +.ant-btn-compact-item.ant-btn-variant-outlined { + --ant-button-default-border-color: var(--fidesui-neutral-200); + --ant-button-default-hover-border-color: var(--fidesui-neutral-200); + --ant-button-default-hover-bg: var(--fidesui-neutral-200); + --ant-button-default-bg: var(--fidesui-neutral-50); +} diff --git a/clients/admin-ui/src/theme/tailwind.css b/clients/admin-ui/src/theme/tailwind.css index b5c61c9567..65dd5f63a7 100644 --- a/clients/admin-ui/src/theme/tailwind.css +++ b/clients/admin-ui/src/theme/tailwind.css @@ -1,3 +1 @@ -@tailwind base; -@tailwind components; @tailwind utilities; diff --git a/clients/fidesui/package.json b/clients/fidesui/package.json index 2c844c4fc7..dd78554546 100644 --- a/clients/fidesui/package.json +++ b/clients/fidesui/package.json @@ -25,7 +25,8 @@ }, "peerDevDependencies": { "@types/react": "^18.3.1", - "@types/react-dom": "^18.3.1" + "@types/react-dom": "^18.3.1", + "sass": "^1.80.6" }, "devDependencies": { "@types/react": "^18.3.2", diff --git a/clients/fidesui/src/palette/palette.module.scss b/clients/fidesui/src/palette/palette.module.scss new file mode 100644 index 0000000000..3652e3f462 --- /dev/null +++ b/clients/fidesui/src/palette/palette.module.scss @@ -0,0 +1,85 @@ +$colors: ( + "full-black": #000000, + "full-white": #ffffff, + + // Neutral // + "neutral-50": #fafafa, + "neutral-75": #f5f5f5, + "neutral-100": #e6e6e8, + "neutral-200": #d1d2d4, + "neutral-300": #bcbec1, + "neutral-400": #a8aaad, + "neutral-500": #93969a, + "neutral-600": #7e8185, + "neutral-700": #696c71, + "neutral-800": #53575c, + "neutral-900": #2b2e35, + + // Brand // + "corinth": #fafafa, + "bg-corinth": #fafafa, + "limestone": #f1efee, + "minos": #2b2e35, + "bg-minos": #4f525b, + "terracotta": #b9704b, + "bg-terracotta": #f1b193, + "olive": #999b83, + "bg-olive": #d4d5c8, + "marble": #cdd2d3, + "bg-marble": #e1e5e6, + "sandstone": #cecac2, + "bg-sandstone": #e3e0d9, + "nectar": #f0ebc1, + "bg-nectar": #f5f2d7, + + // Functional // + "error": #d9534f, + "bg-error": #f7c2c2, + "warning": #e59d47, + "bg-warning": #fbddb5, + "bg-caution": #f6e3a4, + "success": #5a9a68, + "bg-success": #c3e6b2, + "info": #4a90e2, + "bg-info": #a5d6f3, + "alert": #7b4ea9, + "bg-alert": #d9b0d7, + + // Type // + "error-text": #d32f2f, + "success-text": #388e3c, + "link": #2272ce, +); + +@function getPrefixedColor($prefix, $name) { + @return $prefix + $name; +} + +@function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + + str-replace( + str-slice($string, $index + str-length($search)), + $search, + $replace + ); + } + + @return $string; +} + +/** + * exports a typescript object with the colors + * @example + * ```tsx + * import { palette } from 'fidesui/src/palette/palette.module.scss'; + * console.log(palette.FIDESUI_MINOS); + * ``` + */ +:export { + @each $color, $value in $colors { + #{to-upper-case(getPrefixedColor("FIDESUI_", str-replace(unquote($color), '-', '_')))}: $value; + } +} diff --git a/clients/fidesui/src/types.d.ts b/clients/fidesui/src/types.d.ts new file mode 100644 index 0000000000..e3ebdb3b50 --- /dev/null +++ b/clients/fidesui/src/types.d.ts @@ -0,0 +1,4 @@ +declare module "*.module.scss" { + const palette: { readonly [key: string]: string }; + export default palette; +} diff --git a/clients/package-lock.json b/clients/package-lock.json index 4579089a0d..a10004a861 100644 --- a/clients/package-lock.json +++ b/clients/package-lock.json @@ -94,6 +94,7 @@ "openapi-typescript-codegen": "^0.23.0", "postcss": "^8.4.41", "prettier": "^3.3.3", + "sass": "^1.80.6", "tailwindcss": "^3.4.10", "typescript": "4.9.5", "whatwg-fetch": "^3.6.2" @@ -1047,7 +1048,8 @@ }, "peerDependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "sass": "^1.80.6" } }, "fidesui/node_modules/chakra-react-select": { @@ -5196,6 +5198,293 @@ "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-1.0.3.tgz", "integrity": "sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==" }, + "node_modules/@parcel/watcher": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", + "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^1.0.3", + "is-glob": "^4.0.3", + "micromatch": "^4.0.5", + "node-addon-api": "^7.0.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.4.1", + "@parcel/watcher-darwin-arm64": "2.4.1", + "@parcel/watcher-darwin-x64": "2.4.1", + "@parcel/watcher-freebsd-x64": "2.4.1", + "@parcel/watcher-linux-arm-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-glibc": "2.4.1", + "@parcel/watcher-linux-arm64-musl": "2.4.1", + "@parcel/watcher-linux-x64-glibc": "2.4.1", + "@parcel/watcher-linux-x64-musl": "2.4.1", + "@parcel/watcher-win32-arm64": "2.4.1", + "@parcel/watcher-win32-ia32": "2.4.1", + "@parcel/watcher-win32-x64": "2.4.1" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", + "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", + "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", + "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", + "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", + "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", + "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", + "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", + "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", + "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", + "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-ia32": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", + "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", + "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "license": "Apache-2.0", + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, "node_modules/@pkgjs/parseargs": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", @@ -18582,6 +18871,13 @@ "resolved": "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz", "integrity": "sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==" }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "license": "MIT", + "optional": true + }, "node_modules/node-domexception": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", @@ -22761,12 +23057,12 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "node_modules/sass": { - "version": "1.77.6", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.6.tgz", - "integrity": "sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==", - "devOptional": true, + "version": "1.80.6", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", + "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", + "license": "MIT", "dependencies": { - "chokidar": ">=3.0.0 <4.0.0", + "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" }, @@ -22775,13 +23071,43 @@ }, "engines": { "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz", + "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==", + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" } }, "node_modules/sass/node_modules/immutable": { "version": "4.3.6", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz", - "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==", - "devOptional": true + "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ==" + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz", + "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==", + "license": "MIT", + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } }, "node_modules/sax": { "version": "1.4.1", @@ -26180,6 +26506,7 @@ "node-mocks-http": "^1.15.0", "openapi-typescript-codegen": "^0.23.0", "prettier": "^3.3.3", + "sass": "^1.80.6", "typescript": "4.9.5", "whatwg-fetch": "^3.6.2" } diff --git a/clients/privacy-center/next-env.d.ts b/clients/privacy-center/next-env.d.ts index fd36f9494e..725dd6f245 100644 --- a/clients/privacy-center/next-env.d.ts +++ b/clients/privacy-center/next-env.d.ts @@ -3,4 +3,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/clients/privacy-center/package.json b/clients/privacy-center/package.json index 4bbdf25c43..709a6c34b1 100644 --- a/clients/privacy-center/package.json +++ b/clients/privacy-center/package.json @@ -86,6 +86,7 @@ "node-mocks-http": "^1.15.0", "openapi-typescript-codegen": "^0.23.0", "prettier": "^3.3.3", + "sass": "^1.80.6", "typescript": "4.9.5", "whatwg-fetch": "^3.6.2" }, diff --git a/clients/privacy-center/pages/_app.tsx b/clients/privacy-center/pages/_app.tsx index 03a92d9c88..916c143f9a 100644 --- a/clients/privacy-center/pages/_app.tsx +++ b/clients/privacy-center/pages/_app.tsx @@ -2,6 +2,7 @@ import "@fontsource/inter/400.css"; import "@fontsource/inter/500.css"; import "@fontsource/inter/600.css"; import "@fontsource/inter/700.css"; +import "../theme/global.scss"; import { FidesUIProvider } from "fidesui"; import App, { AppContext, AppInitialProps, AppProps } from "next/app"; diff --git a/clients/privacy-center/theme/global.scss b/clients/privacy-center/theme/global.scss new file mode 100644 index 0000000000..01de75d8e9 --- /dev/null +++ b/clients/privacy-center/theme/global.scss @@ -0,0 +1,10 @@ +@import "fidesui/src/palette/palette.module.scss"; + +/** + * Adds the color variables from the palette to the root element + */ +:root { + @each $color, $value in $colors { + #{getPrefixedColor("--fidesui-", unquote($color))}: $value; + } +}