diff --git a/bin/_util.js b/bin/_util.js new file mode 100644 index 0000000000..9fd0987458 --- /dev/null +++ b/bin/_util.js @@ -0,0 +1,23 @@ +module.exports = { + /** + * Fetch the EDS config from the project using the lilconfig hierarchy. + * This can be from package.json, or from various separate non-YAML files. + * + * @see https://github.com/antonk52/lilconfig#usage + * @returns nullable config object returned from lilconfig + */ + getConfig: async function () { + const { lilconfig } = require('lilconfig'); + + // read in the config from config file, package json "eds", etc. + const { config } = await lilconfig('eds').search(); + + // If no config exists, exit. + if (!config) { + // TODO: point to documentation (linked either to the repo or confluence) + console.error('Please add EDS config to your project before continuing.'); + } + + return config; + }, +}; diff --git a/bin/eds-apply-theme.js b/bin/eds-apply-theme.js new file mode 100755 index 0000000000..c42bafc820 --- /dev/null +++ b/bin/eds-apply-theme.js @@ -0,0 +1,106 @@ +#!/usr/bin/env node +(async function () { + /** + * Documentation: + * - Token change log published when EDS changed, and errors link to changelog + * + * Possible Usages: + * - Checks for reference to the token to link to change log entry(ies) + * - Integrate with husky so that PRs always include updated theme values (pre-push) + * + * TODO: + * - remove the config, and generated files from this PR before merging + * - update the local app-theme.json with any new values from the base theme + * + * Questions: + * - should this preserve the tier 1 tokens used by tier 2 and 3 files? + * - (in wireframe kit, the only updates happen to colors/fonts) + * - (in along, colors/fonts/border-* & drop shadows need overriding) + * - should we use token references in the output instead of the hex codes? + * - should we remove the listing of the tier-1 values in the theme base file? + * - should we use the wireframe theme as the values used in the theme base? + * - should all the grade-based tokens be filtered out (they might not apply to point solutions)? + */ + const StyleDictionary = require('style-dictionary'); + const path = require('path'); + const fs = require('fs'); + const { getConfig } = require('./_util'); + + // Compare local to base theme file for differences. flag and quit when theme has + // undefined tokens being overridden + let packageRootPath; + try { + packageRootPath = + path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/'; + } catch (e) { + console.error('EDS package not installed. Using local path...'); + packageRootPath = + path.dirname(require.main.path) + '/src/tokens-dist/json/'; + } + + const config = await getConfig(); + + // read and parse JSON files on disk + const localTheme = JSON.parse( + fs.readFileSync(`${config.json}app-theme.json`, 'utf8'), + ); + const baseTheme = JSON.parse( + fs.readFileSync(`${packageRootPath}theme-base.json`, 'utf8'), + ); + + // Keys in theme must be a strict subset of those in base + try { + isStrictSubset(baseTheme, localTheme); + } catch (error) { + // TODO: if theme has things not in base, error showing where the conflict + console.error('Theme error:', error.message); + return; + } + + StyleDictionary.registerFileHeader({ + name: 'cssOverrideHeader', + fileHeader: (defaultMessage) => [ + ...defaultMessage, + 'To update, edit app-theme.json, then run `npx eds-update-theme`', + ], + }); + + const EDSStyleDictionary = StyleDictionary.extend({ + source: [config.json + 'app-theme.json'], + platforms: { + css: { + transforms: [...StyleDictionary.transformGroup.css, 'name/cti/kebab'], + buildPath: config.css, + files: [ + { + format: 'css/variables', + destination: 'app-theme.css', + options: { + fileHeader: 'cssOverrideHeader', + }, + filter: function (token) { + // don't allow theming on legacy tokens + return token.attributes.category !== 'legacy'; + }, + }, + ], + }, + }, + }); + EDSStyleDictionary.buildAllPlatforms(); + + function isStrictSubset(base, theme, path = []) { + for (const name in theme) { + if (typeof theme[name] === 'object') { + if (base[name] === undefined) { + throw new Error( + `Local themeable value does not exist in base theme: ${path.join( + '.', + )}.${name}"`, + ); + } + isStrictSubset(base[name], theme[name], path.concat(name)); + } + } + } +})(); diff --git a/bin/eds-init.js b/bin/eds-init.js new file mode 100755 index 0000000000..fa78aa6f25 --- /dev/null +++ b/bin/eds-init.js @@ -0,0 +1,36 @@ +#!/usr/bin/env node +(async function () { + const fs = require('fs'); + const path = require('path'); + const { getConfig } = require('./_util'); + + let packageRootPath; + try { + packageRootPath = + path.dirname(require.resolve('@chanzuckerberg/eds')) + '/tokens/'; + } catch (e) { + console.error('EDS package not installed. Using local path...'); + packageRootPath = path.dirname(require.main.path) + '/src/tokens-dist/'; + } + + // read in the config from config file, package json "eds", etc. + const config = await getConfig(); + + // take the packaged var file and place a copy in the project's 'json' directory + if (config) { + try { + fs.copyFileSync( + packageRootPath + 'json/theme-base.json', + `${config.json}app-theme.json`, + fs.constants.COPYFILE_EXCL, + ); + } catch (error) { + console.error('The local theme file already exists. Exiting.'); + return; + } + + console.log( + 'File copy completed! Please use `npx eds-update-theme` to generate theme override CSS.', + ); + } +})(); diff --git a/package.json b/package.json index f07cd3ea89..7d3727063e 100644 --- a/package.json +++ b/package.json @@ -30,9 +30,14 @@ "url": "https://github.com/chanzuckerberg/edu-design-system/issues" }, "files": [ + "/bin", "/lib", "tailwind.config.*" ], + "bin": { + "eds-apply-theme": "bin/eds-apply-theme.js", + "eds-init": "bin/eds-init.js" + }, "scripts": { "build": "yarn build:clean && yarn build:tokens && yarn build:declarations && yarn build:js && yarn copy-fonts-to-lib", "build:clean": "rm -rf lib/", @@ -91,12 +96,16 @@ "@tippyjs/react": "^4.2.6", "@types/lodash": "^4.14.195", "clsx": "^1.2.1", + "lilconfig": "^2.0.6", "lodash": "^4.17.21", "react-beautiful-dnd": "^13.1.1", "react-children-by-type": "^1.1.0", "react-focus-lock": "^2.9.5", "react-popper": "^2.3.0", - "react-portal": "^4.2.2" + "react-portal": "^4.2.2", + "react-uid": "^2.3.2", + "style-dictionary": "^3.7.0", + "svg4everybody": "^2.1.9" }, "devDependencies": { "@chanzuckerberg/axe-storybook-testing": "^6.3.1", @@ -183,5 +192,9 @@ "stylelint --fix" ] }, + "eds": { + "json": "src/components/", + "css": "src/components/" + }, "packageManager": "yarn@3.6.1" } diff --git a/src/components/app-theme.css b/src/components/app-theme.css new file mode 100644 index 0000000000..64dbb7943a --- /dev/null +++ b/src/components/app-theme.css @@ -0,0 +1,375 @@ +/** + * Do not edit directly + * Generated on Fri, 28 Oct 2022 20:16:05 GMT + * To update, edit app-theme.json, then run `npx eds-update-theme` + */ + +:root { + --eds-anim-fade-quick: 0.15s; + --eds-anim-fade-long: 0.4s; + --eds-anim-move-quick: 0.15s; + --eds-anim-move-medium: 0.3s; + --eds-anim-move-long: 0.4s; + --eds-anim-ease: ease; + --eds-border-width-sm: 1px; + --eds-border-width-md: 2px; + --eds-border-width-lg: 4px; + --eds-border-width-xl: 8px; + --eds-border-radius-md: 4px; + --eds-border-radius-lg: 8px; + --eds-border-radius-xl: 20px; + --eds-border-radius-round: 50%; + --eds-border-radius-full: 9999px; + --eds-color-brand-grape-100: #f0f0fc; + --eds-color-brand-grape-200: #e0e0f9; + --eds-color-brand-grape-300: #c4c1f3; + --eds-color-brand-grape-400: #a6a3ee; + --eds-color-brand-grape-500: #8984e8; + --eds-color-brand-grape-600: #6b65e2; + --eds-color-brand-grape-700: #5751d2; + --eds-color-brand-grape-800: #3e42b1; + --eds-color-neutral-100: #f4f6f8; + --eds-color-neutral-200: #e7e8ea; + --eds-color-neutral-300: #c0c4c8; + --eds-color-neutral-400: #999ea3; + --eds-color-neutral-500: #878c90; + --eds-color-neutral-600: #5d6369; + --eds-color-neutral-700: #383c43; + --eds-color-neutral-800: #21272d; + --eds-color-neutral-white: #ffffff; + --eds-color-neutral-black: #161b1f; + --eds-color-other-mint-100: #ecfff5; + --eds-color-other-mint-200: #b7e9ce; + --eds-color-other-mint-300: #8fdcb3; + --eds-color-other-mint-400: #59c88c; + --eds-color-other-mint-500: #00a56a; + --eds-color-other-mint-600: #008656; + --eds-color-other-mint-700: #007249; + --eds-color-other-mint-800: #005939; + --eds-color-other-yellow-100: #fdf1d0; + --eds-color-other-yellow-200: #ffebb3; + --eds-color-other-yellow-300: #ffdd80; + --eds-color-other-yellow-400: #f7be2d; + --eds-color-other-yellow-500: #d18400; + --eds-color-other-yellow-600: #bf7300; + --eds-color-other-yellow-700: #9e5b03; + --eds-color-other-yellow-800: #854c03; + --eds-color-other-lemon: #f5ff8f; + --eds-color-other-eraser: #f3dce2; + --eds-color-other-orange-100: #fff1e9; + --eds-color-other-orange-200: #ffcba5; + --eds-color-other-orange-300: #ffaf76; + --eds-color-other-orange-400: #f6924a; + --eds-color-other-orange-500: #e06b00; + --eds-color-other-orange-600: #c64600; + --eds-color-other-orange-700: #ac3400; + --eds-color-other-orange-800: #842800; + --eds-color-other-ruby-100: #fff0f4; + --eds-color-other-ruby-200: #ffcbd7; + --eds-color-other-ruby-300: #fb90b0; + --eds-color-other-ruby-400: #f76c96; + --eds-color-other-ruby-500: #f1497b; + --eds-color-other-ruby-600: #d41e52; + --eds-color-other-ruby-700: #bd0044; + --eds-color-other-ruby-800: #8f0134; + --eds-color-highlight-100: #ff9fec; + --eds-color-highlight-200: #ffbeaa; + --eds-color-highlight-300: #fcff00; + --eds-color-highlight-400: #9dffa4; + --eds-color-highlight-500: #00f1ff; + --eds-color-highlight-600: #cfc9ff; + --eds-color-info-100: #f1f9ff; + --eds-color-info-200: #b0d5ff; + --eds-color-info-300: #7fb9fd; + --eds-color-info-400: #5ca7ff; + --eds-color-info-500: #328efb; + --eds-color-info-600: #1977cd; + --eds-color-info-700: #0563b8; + --eds-l-max-width: 71.25rem; + --eds-l-sidebar-width: 13.5rem; + --eds-l-linelength-width: 36rem; + --eds-box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.25), + 0px 2px 1px rgba(0, 0, 0, 0.05); + --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), + 0px 2px 8px rgba(0, 0, 0, 0.08); + --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16); + --eds-box-shadow-xl: 0px 6px 20px rgba(0, 0, 0, 0.2); + --eds-size-1: 0.5rem; + --eds-size-2: 1rem; + --eds-size-3: 1.5rem; + --eds-size-4: 2rem; + --eds-size-5: 2.5rem; + --eds-size-6: 3rem; + --eds-size-7: 3.5rem; + --eds-size-8: 4rem; + --eds-size-9: 4.5rem; + --eds-size-10: 5rem; + --eds-size-12: 6rem; + --eds-size-base-unit: 0.5rem; + --eds-size-half: 0.25rem; + --eds-size-quarter: 0.125rem; + --eds-size-1-and-half: 0.75rem; + --eds-size-2-and-half: 1.25rem; + --eds-font-family-primary: 'Graphik', sans-serif; + --eds-font-family-secondary: 'Open Sans', sans-serif; + --eds-font-size-11: 0.688rem; + --eds-font-size-12: 0.75rem; + --eds-font-size-14: 0.875rem; + --eds-font-size-16: 1rem; + --eds-font-size-18: 1.125rem; + --eds-font-size-24: 1.5rem; + --eds-font-size-28: 1.75rem; + --eds-font-size-32: 2rem; + --eds-font-size-40: 2.5rem; + --eds-font-size-base: 16px; + --eds-font-weight-light: 400; + --eds-font-weight-medium: 500; + --eds-font-weight-bold: 600; + --eds-letter-spacing-sm: 0.5px; + --eds-z-index-0: 0; + --eds-z-index-100: 100; + --eds-z-index-200: 200; + --eds-z-index-300: 300; + --eds-z-index-400: 400; + --eds-z-index-500: 500; + --eds-z-index-top: 99999; + --eds-z-index-bottom: -100; + --eds-theme-border-width: 1px; + --eds-theme-color-background-neutral-default: #ffffff; + --eds-theme-color-background-neutral-default-hover: #f4f6f8; + --eds-theme-color-background-neutral-subtle: #f4f6f8; + --eds-theme-color-background-neutral-subtle-hover: #e7e8ea; + --eds-theme-color-background-neutral-medium: #e7e8ea; + --eds-theme-color-background-neutral-medium-hover: #c0c4c8; + --eds-theme-color-background-brand-primary-default: #f0f0fc; + --eds-theme-color-background-brand-primary-strong: #6b65e2; + --eds-theme-color-background-brand-primary-strong-hover: #3e42b1; + --eds-theme-color-background-utility-success: #ecfff5; + --eds-theme-color-background-utility-warning: #fff1e9; + --eds-theme-color-background-utility-error: #fff0f4; + --eds-theme-color-background-grade-complete-default: #008656; + --eds-theme-color-background-grade-complete-subtle: #ecfff5; + --eds-theme-color-background-grade-revise-default: #f7be2d; + --eds-theme-color-background-grade-revise-subtle: #fdf1d0; + --eds-theme-color-background-grade-stop-default: #d41e52; + --eds-theme-color-background-grade-stop-subtle: #fff0f4; + --eds-theme-color-background-disabled: #c0c4c8; + --eds-theme-color-border-link-neutral: #21272d; + --eds-theme-color-border-link-brand: #5751d2; + --eds-theme-color-border-neutral-subtle: #e7e8ea; + --eds-theme-color-border-neutral-subtle-hover: #c0c4c8; + --eds-theme-color-border-neutral-default: #c0c4c8; + --eds-theme-color-border-neutral-default-hover: #999ea3; + --eds-theme-color-border-neutral-strong: #999ea3; + --eds-theme-color-border-neutral-strong-hover: #878c90; + --eds-theme-color-border-brand-primary-subtle: #e0e0f9; + --eds-theme-color-border-brand-primary: #c4c1f3; + --eds-theme-color-border-brand-primary-strong: #a6a3ee; + --eds-theme-color-border-utility-success-subtle: #b7e9ce; + --eds-theme-color-border-utility-success-default: #8fdcb3; + --eds-theme-color-border-utility-success-strong: #59c88c; + --eds-theme-color-border-utility-warning-subtle: #ffcba5; + --eds-theme-color-border-utility-warning-default: #ffaf76; + --eds-theme-color-border-utility-warning-strong: #f6924a; + --eds-theme-color-border-utility-error-subtle: #ffcbd7; + --eds-theme-color-border-utility-error-default: #fb90b0; + --eds-theme-color-border-utility-error-strong: #f76c96; + --eds-theme-color-border-grade-complete: #8fdcb3; + --eds-theme-color-border-grade-revise-subtle: #ffebb3; + --eds-theme-color-border-grade-revise-default: #ffdd80; + --eds-theme-color-border-grade-revise-strong: #f7be2d; + --eds-theme-color-border-grade-stop: #fb90b0; + --eds-theme-color-border-disabled: #c0c4c8; + --eds-theme-color-icon-neutral-default: #5d6369; + --eds-theme-color-icon-neutral-default-inverse: #ffffff; + --eds-theme-color-icon-neutral-default-hover: #383c43; + --eds-theme-color-icon-neutral-strong: #383c43; + --eds-theme-color-icon-neutral-strong-hover: #21272d; + --eds-theme-color-icon-neutral-subtle: #878c90; + --eds-theme-color-icon-neutral-subtle-hover: #5d6369; + --eds-theme-color-icon-link-default: #8984e8; + --eds-theme-color-icon-link-default-hover: #6b65e2; + --eds-theme-color-icon-brand-primary: #8984e8; + --eds-theme-color-icon-brand-primary-hover: #6b65e2; + --eds-theme-color-icon-utility-success: #00a56a; + --eds-theme-color-icon-utility-success-hover: #008656; + --eds-theme-color-icon-utility-warning: #e06b00; + --eds-theme-color-icon-utility-warning-hover: #c64600; + --eds-theme-color-icon-utility-error: #f1497b; + --eds-theme-color-icon-utility-error-hover: #d41e52; + --eds-theme-color-icon-grade-complete: #00a56a; + --eds-theme-color-icon-grade-complete-hover: #00a56a; + --eds-theme-color-icon-grade-revise: #21272d; + --eds-theme-color-icon-grade-revise-hover: #161b1f; + --eds-theme-color-icon-grade-stop: #f1497b; + --eds-theme-color-icon-grade-stop-hover: #d41e52; + --eds-theme-color-icon-disabled: #c0c4c8; + --eds-theme-color-text-neutral-default: #383c43; + --eds-theme-color-text-neutral-default-inverse: #ffffff; + --eds-theme-color-text-neutral-strong: #21272d; + --eds-theme-color-text-neutral-subtle: #5d6369; + --eds-theme-color-text-link-neutral: #21272d; + --eds-theme-color-text-link-brand: #5751d2; + --eds-theme-color-text-utility-success: #007249; + --eds-theme-color-text-utility-warning: #ac3400; + --eds-theme-color-text-utility-error: #bd0044; + --eds-theme-color-text-grade-complete: #007249; + --eds-theme-color-text-grade-revise: #21272d; + --eds-theme-color-text-grade-stop: #bd0044; + --eds-theme-color-text-disabled: #c0c4c8; + --eds-theme-color-text-brand-primary: #5751d2; + --eds-theme-color-transparent-black-0: rgba(0, 0, 0, 0); + --eds-theme-color-transparent-black-30: rgba(0, 0, 0, 0.3); + --eds-theme-color-transparent-white-0: rgba(255, 255, 255, 0); + --eds-theme-color-body-background: #f4f6f8; + --eds-theme-color-body-background-inverted: #383c43; + --eds-theme-color-button-primary-brand-background: #6b65e2; + --eds-theme-color-button-primary-brand-background-hover: #5751d2; + --eds-theme-color-button-primary-brand-background-active: #3e42b1; + --eds-theme-color-button-primary-brand-border: #6b65e2; + --eds-theme-color-button-primary-brand-border-hover: #5751d2; + --eds-theme-color-button-primary-brand-border-active: #3e42b1; + --eds-theme-color-button-primary-brand-text: #ffffff; + --eds-theme-color-button-primary-brand-text-hover: #ffffff; + --eds-theme-color-button-primary-brand-text-active: #ffffff; + --eds-theme-color-button-primary-error-background: #d41e52; + --eds-theme-color-button-primary-error-background-hover: #bd0044; + --eds-theme-color-button-primary-error-background-active: #8f0134; + --eds-theme-color-button-primary-error-border: #d41e52; + --eds-theme-color-button-primary-error-border-hover: #bd0044; + --eds-theme-color-button-primary-error-border-active: #8f0134; + --eds-theme-color-button-primary-error-text: #ffffff; + --eds-theme-color-button-primary-error-text-hover: #ffffff; + --eds-theme-color-button-primary-error-text-active: #ffffff; + --eds-theme-color-button-secondary-brand-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-secondary-brand-background-hover: #5751d2; + --eds-theme-color-button-secondary-brand-background-active: #3e42b1; + --eds-theme-color-button-secondary-brand-border: #6b65e2; + --eds-theme-color-button-secondary-brand-border-hover: #5751d2; + --eds-theme-color-button-secondary-brand-border-active: #3e42b1; + --eds-theme-color-button-secondary-brand-text: #5751d2; + --eds-theme-color-button-secondary-brand-text-hover: #ffffff; + --eds-theme-color-button-secondary-brand-text-active: #ffffff; + --eds-theme-color-button-secondary-brand-icon: #6b65e2; + --eds-theme-color-button-secondary-brand-icon-hover: #ffffff; + --eds-theme-color-button-secondary-brand-icon-active: #ffffff; + --eds-theme-color-button-secondary-neutral-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-secondary-neutral-background-hover: #e7e8ea; + --eds-theme-color-button-secondary-neutral-background-active: #383c43; + --eds-theme-color-button-secondary-neutral-border: #5d6369; + --eds-theme-color-button-secondary-neutral-border-hover: #5d6369; + --eds-theme-color-button-secondary-neutral-border-active: #383c43; + --eds-theme-color-button-secondary-neutral-text: #5d6369; + --eds-theme-color-button-secondary-neutral-text-hover: #5d6369; + --eds-theme-color-button-secondary-neutral-text-active: #ffffff; + --eds-theme-color-button-secondary-neutral-icon: #999ea3; + --eds-theme-color-button-secondary-neutral-icon-hover: #999ea3; + --eds-theme-color-button-secondary-neutral-icon-active: #ffffff; + --eds-theme-color-button-secondary-success-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-secondary-success-background-hover: #007249; + --eds-theme-color-button-secondary-success-background-active: #005939; + --eds-theme-color-button-secondary-success-border: #008656; + --eds-theme-color-button-secondary-success-border-hover: #007249; + --eds-theme-color-button-secondary-success-border-active: #005939; + --eds-theme-color-button-secondary-success-text: #007249; + --eds-theme-color-button-secondary-success-text-hover: #ffffff; + --eds-theme-color-button-secondary-success-text-active: #ffffff; + --eds-theme-color-button-secondary-success-icon: #008656; + --eds-theme-color-button-secondary-success-icon-hover: #ffffff; + --eds-theme-color-button-secondary-success-icon-active: #ffffff; + --eds-theme-color-button-secondary-warning-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-secondary-warning-background-hover: #ac3400; + --eds-theme-color-button-secondary-warning-background-active: #842800; + --eds-theme-color-button-secondary-warning-border: #c64600; + --eds-theme-color-button-secondary-warning-border-hover: #ac3400; + --eds-theme-color-button-secondary-warning-border-active: #842800; + --eds-theme-color-button-secondary-warning-text: #ac3400; + --eds-theme-color-button-secondary-warning-text-hover: #ffffff; + --eds-theme-color-button-secondary-warning-text-active: #ffffff; + --eds-theme-color-button-secondary-warning-icon: #c64600; + --eds-theme-color-button-secondary-warning-icon-hover: #ffffff; + --eds-theme-color-button-secondary-warning-icon-active: #ffffff; + --eds-theme-color-button-secondary-error-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-secondary-error-background-hover: #bd0044; + --eds-theme-color-button-secondary-error-background-active: #8f0134; + --eds-theme-color-button-secondary-error-border: #d41e52; + --eds-theme-color-button-secondary-error-border-hover: #bd0044; + --eds-theme-color-button-secondary-error-border-active: #8f0134; + --eds-theme-color-button-secondary-error-text: #bd0044; + --eds-theme-color-button-secondary-error-text-hover: #ffffff; + --eds-theme-color-button-secondary-error-text-active: #ffffff; + --eds-theme-color-button-secondary-error-icon: #d41e52; + --eds-theme-color-button-secondary-error-icon-hover: #ffffff; + --eds-theme-color-button-secondary-error-icon-active: #ffffff; + --eds-theme-color-button-icon-brand: #6b65e2; + --eds-theme-color-button-icon-brand-hover: #6b65e2; + --eds-theme-color-button-icon-brand-active: #ffffff; + --eds-theme-color-button-icon-brand-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-brand-background-hover: #e0e0f9; + --eds-theme-color-button-icon-brand-background-active: #5751d2; + --eds-theme-color-button-icon-brand-border: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-brand-border-hover: #e0e0f9; + --eds-theme-color-button-icon-brand-border-active: #5751d2; + --eds-theme-color-button-icon-brand-text: #5751d2; + --eds-theme-color-button-icon-brand-text-hover: #5751d2; + --eds-theme-color-button-icon-brand-text-active: #ffffff; + --eds-theme-color-button-icon-neutral: #5d6369; + --eds-theme-color-button-icon-neutral-hover: #5d6369; + --eds-theme-color-button-icon-neutral-active: #ffffff; + --eds-theme-color-button-icon-neutral-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-neutral-background-hover: #e7e8ea; + --eds-theme-color-button-icon-neutral-background-active: #5d6369; + --eds-theme-color-button-icon-neutral-border: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-neutral-border-hover: #e7e8ea; + --eds-theme-color-button-icon-neutral-border-active: #5d6369; + --eds-theme-color-button-icon-neutral-text: #5d6369; + --eds-theme-color-button-icon-neutral-text-hover: #5d6369; + --eds-theme-color-button-icon-neutral-text-active: #ffffff; + --eds-theme-color-button-icon-success: #008656; + --eds-theme-color-button-icon-success-hover: #008656; + --eds-theme-color-button-icon-success-active: #ffffff; + --eds-theme-color-button-icon-success-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-success-background-hover: #b7e9ce; + --eds-theme-color-button-icon-success-background-active: #007249; + --eds-theme-color-button-icon-success-border: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-success-border-hover: #b7e9ce; + --eds-theme-color-button-icon-success-border-active: #007249; + --eds-theme-color-button-icon-success-text: #007249; + --eds-theme-color-button-icon-success-text-hover: #007249; + --eds-theme-color-button-icon-success-text-active: #ffffff; + --eds-theme-color-button-icon-warning: #c64600; + --eds-theme-color-button-icon-warning-hover: #c64600; + --eds-theme-color-button-icon-warning-active: #ffffff; + --eds-theme-color-button-icon-warning-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-warning-background-hover: #fff1e9; + --eds-theme-color-button-icon-warning-background-active: #ac3400; + --eds-theme-color-button-icon-warning-border: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-warning-border-hover: #fff1e9; + --eds-theme-color-button-icon-warning-border-active: #ac3400; + --eds-theme-color-button-icon-warning-text: #ac3400; + --eds-theme-color-button-icon-warning-text-hover: #ac3400; + --eds-theme-color-button-icon-warning-text-active: #ffffff; + --eds-theme-color-button-icon-error: #d41e52; + --eds-theme-color-button-icon-error-hover: #d41e52; + --eds-theme-color-button-icon-error-active: #ffffff; + --eds-theme-color-button-icon-error-background: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-error-background-hover: #ffcbd7; + --eds-theme-color-button-icon-error-background-active: #bd0044; + --eds-theme-color-button-icon-error-border: rgba(0, 0, 0, 0); + --eds-theme-color-button-icon-error-border-hover: #ffcbd7; + --eds-theme-color-button-icon-error-border-active: #bd0044; + --eds-theme-color-button-icon-error-text: #bd0044; + --eds-theme-color-button-icon-error-text-hover: #bd0044; + --eds-theme-color-button-icon-error-text-active: #ffffff; + --eds-theme-color-focus-ring: #6b65e2; + --eds-theme-color-focus-ring-inverted: #ffffff; + --eds-theme-color-form-border: #878c90; + --eds-theme-color-form-border-hover: #21272d; + --eds-theme-color-form-background: #ffffff; + --eds-theme-color-form-background-hover: #f4f6f8; + --eds-theme-color-form-label: #383c43; + --eds-theme-color-text-highlight-foreground: #21272d; + --eds-theme-color-text-highlight-background: #f5ff8f; + --eds-theme-form-border-width: 1px; + --eds-theme-form-border-radius: 4px; +} diff --git a/src/components/app-theme.json b/src/components/app-theme.json new file mode 100644 index 0000000000..38994e182d --- /dev/null +++ b/src/components/app-theme.json @@ -0,0 +1,1395 @@ +{ + "eds": { + "anim": { + "fade": { + "quick": { + "value": "0.15s" + }, + "long": { + "value": "0.4s" + } + }, + "move": { + "quick": { + "value": "0.15s" + }, + "medium": { + "value": "0.3s" + }, + "long": { + "value": "0.4s" + } + }, + "ease": { + "value": "ease" + } + }, + "border": { + "width": { + "sm": { + "value": "1px" + }, + "md": { + "value": "2px" + }, + "lg": { + "value": "4px" + }, + "xl": { + "value": "8px" + } + }, + "radius": { + "md": { + "value": "4px" + }, + "lg": { + "value": "8px" + }, + "xl": { + "value": "20px" + }, + "round": { + "value": "50%" + }, + "full": { + "value": "9999px" + } + } + }, + "color": { + "brand": { + "grape": { + "100": { + "value": "#F0F0FC" + }, + "200": { + "value": "#E0E0F9" + }, + "300": { + "value": "#C4C1F3" + }, + "400": { + "value": "#A6A3EE" + }, + "500": { + "value": "#8984E8" + }, + "600": { + "value": "#6B65E2" + }, + "700": { + "value": "#5751D2" + }, + "800": { + "value": "#3E42B1" + } + } + }, + "neutral": { + "100": { + "value": "#F4F6F8" + }, + "200": { + "value": "#E7E8EA" + }, + "300": { + "value": "#C0C4C8" + }, + "400": { + "value": "#999EA3" + }, + "500": { + "value": "#878C90" + }, + "600": { + "value": "#5D6369" + }, + "700": { + "value": "#383C43" + }, + "800": { + "value": "#21272D" + }, + "white": { + "value": "#FFFFFF" + }, + "black": { + "value": "#161B1F" + } + }, + "other": { + "mint": { + "100": { + "value": "#ECFFF5" + }, + "200": { + "value": "#B7E9CE" + }, + "300": { + "value": "#8FDCB3" + }, + "400": { + "value": "#59C88C" + }, + "500": { + "value": "#00A56A" + }, + "600": { + "value": "#008656" + }, + "700": { + "value": "#007249" + }, + "800": { + "value": "#005939" + } + }, + "yellow": { + "100": { + "value": "#FDF1D0" + }, + "200": { + "value": "#FFEBB3" + }, + "300": { + "value": "#FFDD80" + }, + "400": { + "value": "#F7BE2D" + }, + "500": { + "value": "#D18400" + }, + "600": { + "value": "#BF7300" + }, + "700": { + "value": "#9E5B03" + }, + "800": { + "value": "#854C03" + } + }, + "lemon": { + "value": "#F5FF8F" + }, + "eraser": { + "value": "#F3DCE2" + }, + "orange": { + "100": { + "value": "#FFF1E9" + }, + "200": { + "value": "#FFCBA5" + }, + "300": { + "value": "#FFAF76" + }, + "400": { + "value": "#F6924A" + }, + "500": { + "value": "#E06B00" + }, + "600": { + "value": "#C64600" + }, + "700": { + "value": "#AC3400" + }, + "800": { + "value": "#842800" + } + }, + "ruby": { + "100": { + "value": "#FFF0F4" + }, + "200": { + "value": "#FFCBD7" + }, + "300": { + "value": "#FB90B0" + }, + "400": { + "value": "#F76C96" + }, + "500": { + "value": "#F1497B" + }, + "600": { + "value": "#D41E52" + }, + "700": { + "value": "#BD0044" + }, + "800": { + "value": "#8F0134" + } + } + }, + "highlight": { + "100": { + "value": "#FF9FEC" + }, + "200": { + "value": "#FFBEAA" + }, + "300": { + "value": "#FCFF00" + }, + "400": { + "value": "#9DFFA4" + }, + "500": { + "value": "#00F1FF" + }, + "600": { + "value": "#CFC9FF" + } + }, + "info": { + "100": { + "value": "#F1F9FF" + }, + "200": { + "value": "#B0D5FF" + }, + "300": { + "value": "#7FB9FD" + }, + "400": { + "value": "#5CA7FF" + }, + "500": { + "value": "#328EFB" + }, + "600": { + "value": "#1977CD" + }, + "700": { + "value": "#0563B8" + } + } + }, + "l": { + "max-width": { + "value": "71.25rem" + }, + "sidebar-width": { + "value": "13.5rem" + }, + "linelength-width": { + "value": "36rem" + } + }, + "box-shadow": { + "sm": { + "value": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)" + }, + "md": { + "value": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)" + }, + "lg": { + "value": "0px 4px 12px rgba(0, 0, 0, 0.16)" + }, + "xl": { + "value": "0px 6px 20px rgba(0, 0, 0, 0.2)" + } + }, + "size": { + "1": { + "value": "0.5rem" + }, + "2": { + "value": "1rem" + }, + "3": { + "value": "1.5rem" + }, + "4": { + "value": "2rem" + }, + "5": { + "value": "2.5rem" + }, + "6": { + "value": "3rem" + }, + "7": { + "value": "3.5rem" + }, + "8": { + "value": "4rem" + }, + "9": { + "value": "4.5rem" + }, + "10": { + "value": "5rem" + }, + "12": { + "value": "6rem" + }, + "base-unit": { + "value": "0.5rem" + }, + "half": { + "value": "0.25rem" + }, + "quarter": { + "value": "0.125rem" + }, + "1-and-half": { + "value": "0.75rem" + }, + "2-and-half": { + "value": "1.25rem" + } + }, + "font-family": { + "primary": { + "value": "'Graphik', sans-serif" + }, + "secondary": { + "value": "'Open Sans', sans-serif" + } + }, + "font-size": { + "11": { + "value": "0.688rem" + }, + "12": { + "value": "0.75rem" + }, + "14": { + "value": "0.875rem" + }, + "16": { + "value": "1rem" + }, + "18": { + "value": "1.125rem" + }, + "24": { + "value": "1.5rem" + }, + "28": { + "value": "1.75rem" + }, + "32": { + "value": "2rem" + }, + "40": { + "value": "2.5rem" + }, + "base": { + "value": "16px" + } + }, + "font-weight": { + "light": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "bold": { + "value": "600" + } + }, + "letter-spacing": { + "sm": { + "value": "0.5px" + } + }, + "z-index": { + "0": { + "value": "0" + }, + "100": { + "value": "100" + }, + "200": { + "value": "200" + }, + "300": { + "value": "300" + }, + "400": { + "value": "400" + }, + "500": { + "value": "500" + }, + "top": { + "value": "99999" + }, + "bottom": { + "value": "-100" + } + }, + "theme": { + "border": { + "width": { + "value": "1px" + } + }, + "color": { + "background": { + "neutral": { + "default": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#F4F6F8" + } + }, + "subtle": { + "@": { + "value": "#F4F6F8" + }, + "hover": { + "value": "#E7E8EA" + } + }, + "medium": { + "@": { + "value": "#E7E8EA" + }, + "hover": { + "value": "#C0C4C8" + } + } + }, + "brand": { + "primary": { + "default": { + "value": "#F0F0FC" + }, + "strong": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#3E42B1" + } + } + } + }, + "utility": { + "success": { + "value": "#ECFFF5" + }, + "warning": { + "value": "#FFF1E9" + }, + "error": { + "value": "#FFF0F4" + } + }, + "grade": { + "complete": { + "default": { + "value": "#008656" + }, + "subtle": { + "value": "#ECFFF5" + } + }, + "revise": { + "default": { + "value": "#F7BE2D" + }, + "subtle": { + "value": "#FDF1D0" + } + }, + "stop": { + "default": { + "value": "#D41E52" + }, + "subtle": { + "value": "#FFF0F4" + } + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "border": { + "link": { + "neutral": { + "value": "#21272D" + }, + "brand": { + "value": "#5751D2" + } + }, + "neutral": { + "subtle": { + "@": { + "value": "#E7E8EA" + }, + "hover": { + "value": "#C0C4C8" + } + }, + "default": { + "@": { + "value": "#C0C4C8" + }, + "hover": { + "value": "#999EA3" + } + }, + "strong": { + "@": { + "value": "#999EA3" + }, + "hover": { + "value": "#878C90" + } + } + }, + "brand": { + "primary": { + "subtle": { + "value": "#E0E0F9" + }, + "@": { + "value": "#C4C1F3" + }, + "strong": { + "value": "#A6A3EE" + } + } + }, + "utility": { + "success": { + "subtle": { + "value": "#B7E9CE" + }, + "default": { + "value": "#8FDCB3" + }, + "strong": { + "value": "#59C88C" + } + }, + "warning": { + "subtle": { + "value": "#FFCBA5" + }, + "default": { + "value": "#FFAF76" + }, + "strong": { + "value": "#F6924A" + } + }, + "error": { + "subtle": { + "value": "#FFCBD7" + }, + "default": { + "value": "#FB90B0" + }, + "strong": { + "value": "#F76C96" + } + } + }, + "grade": { + "complete": { + "value": "#8FDCB3" + }, + "revise": { + "subtle": { + "value": "#FFEBB3" + }, + "default": { + "value": "#FFDD80" + }, + "strong": { + "value": "#F7BE2D" + } + }, + "stop": { + "value": "#FB90B0" + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "icon": { + "neutral": { + "default": { + "@": { + "value": "#5D6369" + }, + "inverse": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#383C43" + } + }, + "strong": { + "@": { + "value": "#383C43" + }, + "hover": { + "value": "#21272D" + } + }, + "subtle": { + "@": { + "value": "#878C90" + }, + "hover": { + "value": "#5D6369" + } + } + }, + "link": { + "default": { + "@": { + "value": "#8984E8" + }, + "hover": { + "value": "#6B65E2" + } + } + }, + "brand": { + "primary": { + "@": { + "value": "#8984E8" + }, + "hover": { + "value": "#6B65E2" + } + } + }, + "utility": { + "success": { + "@": { + "value": "#00A56A" + }, + "hover": { + "value": "#008656" + } + }, + "warning": { + "@": { + "value": "#E06B00" + }, + "hover": { + "value": "#C64600" + } + }, + "error": { + "@": { + "value": "#F1497B" + }, + "hover": { + "value": "#D41E52" + } + } + }, + "grade": { + "complete": { + "@": { + "value": "#00A56A" + }, + "hover": { + "value": "#00A56A" + } + }, + "revise": { + "@": { + "value": "#21272D" + }, + "hover": { + "value": "#161B1F" + } + }, + "stop": { + "@": { + "value": "#F1497B" + }, + "hover": { + "value": "#D41E52" + } + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "text": { + "neutral": { + "default": { + "@": { + "value": "#383C43" + }, + "inverse": { + "value": "#FFFFFF" + } + }, + "strong": { + "value": "#21272D" + }, + "subtle": { + "value": "#5D6369" + } + }, + "link": { + "neutral": { + "value": "#21272D" + }, + "brand": { + "value": "#5751D2" + } + }, + "utility": { + "success": { + "value": "#007249" + }, + "warning": { + "value": "#AC3400" + }, + "error": { + "value": "#BD0044" + } + }, + "grade": { + "complete": { + "value": "#007249" + }, + "revise": { + "value": "#21272D" + }, + "stop": { + "value": "#BD0044" + } + }, + "disabled": { + "value": "#C0C4C8" + }, + "brand": { + "primary": { + "value": "#5751D2" + } + } + }, + "transparent": { + "black": { + "0": { + "value": "rgba(0, 0, 0, 0)" + }, + "30": { + "value": "rgba(0, 0, 0, .3)" + } + }, + "white": { + "0": { + "value": "rgba(255, 255, 255, 0)" + } + } + }, + "body": { + "background": { + "@": { + "value": "#F4F6F8" + }, + "inverted": { + "value": "#383C43" + } + } + }, + "button": { + "primary": { + "brand": { + "background": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "border": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "text": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "background": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "border": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "text": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + } + }, + "secondary": { + "brand": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "border": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "text": { + "@": { + "value": "#5751D2" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "neutral": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#383C43" + } + }, + "border": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#383C43" + } + }, + "text": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#999EA3" + }, + "hover": { + "value": "#999EA3" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "success": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#005939" + } + }, + "border": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#005939" + } + }, + "text": { + "@": { + "value": "#007249" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "warning": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#842800" + } + }, + "border": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#842800" + } + }, + "text": { + "@": { + "value": "#AC3400" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "border": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "text": { + "@": { + "value": "#BD0044" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + } + }, + "icon": { + "brand": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#6B65E2" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E0E0F9" + }, + "active": { + "value": "#5751D2" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E0E0F9" + }, + "active": { + "value": "#5751D2" + } + }, + "text": { + "@": { + "value": "#5751D2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "neutral": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#5D6369" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#5D6369" + } + }, + "text": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "success": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#008656" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#B7E9CE" + }, + "active": { + "value": "#007249" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#B7E9CE" + }, + "active": { + "value": "#007249" + } + }, + "text": { + "@": { + "value": "#007249" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "warning": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#C64600" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFF1E9" + }, + "active": { + "value": "#AC3400" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFF1E9" + }, + "active": { + "value": "#AC3400" + } + }, + "text": { + "@": { + "value": "#AC3400" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#D41E52" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFCBD7" + }, + "active": { + "value": "#BD0044" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFCBD7" + }, + "active": { + "value": "#BD0044" + } + }, + "text": { + "@": { + "value": "#BD0044" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#FFFFFF" + } + } + } + } + }, + "focus-ring": { + "@": { + "value": "#6B65E2" + }, + "inverted": { + "value": "#FFFFFF" + } + }, + "form": { + "border": { + "@": { + "value": "#878C90" + }, + "hover": { + "value": "#21272D" + } + }, + "background": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#F4F6F8" + } + }, + "label": { + "value": "#383C43" + } + }, + "text-highlight": { + "foreground": { + "value": "#21272D" + }, + "background": { + "value": "#F5FF8F" + } + } + }, + "form": { + "border": { + "width": { + "value": "1px" + }, + "radius": { + "value": "4px" + } + } + } + } + } +} diff --git a/src/tokens-dist/json/theme-base.json b/src/tokens-dist/json/theme-base.json new file mode 100644 index 0000000000..38994e182d --- /dev/null +++ b/src/tokens-dist/json/theme-base.json @@ -0,0 +1,1395 @@ +{ + "eds": { + "anim": { + "fade": { + "quick": { + "value": "0.15s" + }, + "long": { + "value": "0.4s" + } + }, + "move": { + "quick": { + "value": "0.15s" + }, + "medium": { + "value": "0.3s" + }, + "long": { + "value": "0.4s" + } + }, + "ease": { + "value": "ease" + } + }, + "border": { + "width": { + "sm": { + "value": "1px" + }, + "md": { + "value": "2px" + }, + "lg": { + "value": "4px" + }, + "xl": { + "value": "8px" + } + }, + "radius": { + "md": { + "value": "4px" + }, + "lg": { + "value": "8px" + }, + "xl": { + "value": "20px" + }, + "round": { + "value": "50%" + }, + "full": { + "value": "9999px" + } + } + }, + "color": { + "brand": { + "grape": { + "100": { + "value": "#F0F0FC" + }, + "200": { + "value": "#E0E0F9" + }, + "300": { + "value": "#C4C1F3" + }, + "400": { + "value": "#A6A3EE" + }, + "500": { + "value": "#8984E8" + }, + "600": { + "value": "#6B65E2" + }, + "700": { + "value": "#5751D2" + }, + "800": { + "value": "#3E42B1" + } + } + }, + "neutral": { + "100": { + "value": "#F4F6F8" + }, + "200": { + "value": "#E7E8EA" + }, + "300": { + "value": "#C0C4C8" + }, + "400": { + "value": "#999EA3" + }, + "500": { + "value": "#878C90" + }, + "600": { + "value": "#5D6369" + }, + "700": { + "value": "#383C43" + }, + "800": { + "value": "#21272D" + }, + "white": { + "value": "#FFFFFF" + }, + "black": { + "value": "#161B1F" + } + }, + "other": { + "mint": { + "100": { + "value": "#ECFFF5" + }, + "200": { + "value": "#B7E9CE" + }, + "300": { + "value": "#8FDCB3" + }, + "400": { + "value": "#59C88C" + }, + "500": { + "value": "#00A56A" + }, + "600": { + "value": "#008656" + }, + "700": { + "value": "#007249" + }, + "800": { + "value": "#005939" + } + }, + "yellow": { + "100": { + "value": "#FDF1D0" + }, + "200": { + "value": "#FFEBB3" + }, + "300": { + "value": "#FFDD80" + }, + "400": { + "value": "#F7BE2D" + }, + "500": { + "value": "#D18400" + }, + "600": { + "value": "#BF7300" + }, + "700": { + "value": "#9E5B03" + }, + "800": { + "value": "#854C03" + } + }, + "lemon": { + "value": "#F5FF8F" + }, + "eraser": { + "value": "#F3DCE2" + }, + "orange": { + "100": { + "value": "#FFF1E9" + }, + "200": { + "value": "#FFCBA5" + }, + "300": { + "value": "#FFAF76" + }, + "400": { + "value": "#F6924A" + }, + "500": { + "value": "#E06B00" + }, + "600": { + "value": "#C64600" + }, + "700": { + "value": "#AC3400" + }, + "800": { + "value": "#842800" + } + }, + "ruby": { + "100": { + "value": "#FFF0F4" + }, + "200": { + "value": "#FFCBD7" + }, + "300": { + "value": "#FB90B0" + }, + "400": { + "value": "#F76C96" + }, + "500": { + "value": "#F1497B" + }, + "600": { + "value": "#D41E52" + }, + "700": { + "value": "#BD0044" + }, + "800": { + "value": "#8F0134" + } + } + }, + "highlight": { + "100": { + "value": "#FF9FEC" + }, + "200": { + "value": "#FFBEAA" + }, + "300": { + "value": "#FCFF00" + }, + "400": { + "value": "#9DFFA4" + }, + "500": { + "value": "#00F1FF" + }, + "600": { + "value": "#CFC9FF" + } + }, + "info": { + "100": { + "value": "#F1F9FF" + }, + "200": { + "value": "#B0D5FF" + }, + "300": { + "value": "#7FB9FD" + }, + "400": { + "value": "#5CA7FF" + }, + "500": { + "value": "#328EFB" + }, + "600": { + "value": "#1977CD" + }, + "700": { + "value": "#0563B8" + } + } + }, + "l": { + "max-width": { + "value": "71.25rem" + }, + "sidebar-width": { + "value": "13.5rem" + }, + "linelength-width": { + "value": "36rem" + } + }, + "box-shadow": { + "sm": { + "value": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)" + }, + "md": { + "value": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)" + }, + "lg": { + "value": "0px 4px 12px rgba(0, 0, 0, 0.16)" + }, + "xl": { + "value": "0px 6px 20px rgba(0, 0, 0, 0.2)" + } + }, + "size": { + "1": { + "value": "0.5rem" + }, + "2": { + "value": "1rem" + }, + "3": { + "value": "1.5rem" + }, + "4": { + "value": "2rem" + }, + "5": { + "value": "2.5rem" + }, + "6": { + "value": "3rem" + }, + "7": { + "value": "3.5rem" + }, + "8": { + "value": "4rem" + }, + "9": { + "value": "4.5rem" + }, + "10": { + "value": "5rem" + }, + "12": { + "value": "6rem" + }, + "base-unit": { + "value": "0.5rem" + }, + "half": { + "value": "0.25rem" + }, + "quarter": { + "value": "0.125rem" + }, + "1-and-half": { + "value": "0.75rem" + }, + "2-and-half": { + "value": "1.25rem" + } + }, + "font-family": { + "primary": { + "value": "'Graphik', sans-serif" + }, + "secondary": { + "value": "'Open Sans', sans-serif" + } + }, + "font-size": { + "11": { + "value": "0.688rem" + }, + "12": { + "value": "0.75rem" + }, + "14": { + "value": "0.875rem" + }, + "16": { + "value": "1rem" + }, + "18": { + "value": "1.125rem" + }, + "24": { + "value": "1.5rem" + }, + "28": { + "value": "1.75rem" + }, + "32": { + "value": "2rem" + }, + "40": { + "value": "2.5rem" + }, + "base": { + "value": "16px" + } + }, + "font-weight": { + "light": { + "value": "400" + }, + "medium": { + "value": "500" + }, + "bold": { + "value": "600" + } + }, + "letter-spacing": { + "sm": { + "value": "0.5px" + } + }, + "z-index": { + "0": { + "value": "0" + }, + "100": { + "value": "100" + }, + "200": { + "value": "200" + }, + "300": { + "value": "300" + }, + "400": { + "value": "400" + }, + "500": { + "value": "500" + }, + "top": { + "value": "99999" + }, + "bottom": { + "value": "-100" + } + }, + "theme": { + "border": { + "width": { + "value": "1px" + } + }, + "color": { + "background": { + "neutral": { + "default": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#F4F6F8" + } + }, + "subtle": { + "@": { + "value": "#F4F6F8" + }, + "hover": { + "value": "#E7E8EA" + } + }, + "medium": { + "@": { + "value": "#E7E8EA" + }, + "hover": { + "value": "#C0C4C8" + } + } + }, + "brand": { + "primary": { + "default": { + "value": "#F0F0FC" + }, + "strong": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#3E42B1" + } + } + } + }, + "utility": { + "success": { + "value": "#ECFFF5" + }, + "warning": { + "value": "#FFF1E9" + }, + "error": { + "value": "#FFF0F4" + } + }, + "grade": { + "complete": { + "default": { + "value": "#008656" + }, + "subtle": { + "value": "#ECFFF5" + } + }, + "revise": { + "default": { + "value": "#F7BE2D" + }, + "subtle": { + "value": "#FDF1D0" + } + }, + "stop": { + "default": { + "value": "#D41E52" + }, + "subtle": { + "value": "#FFF0F4" + } + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "border": { + "link": { + "neutral": { + "value": "#21272D" + }, + "brand": { + "value": "#5751D2" + } + }, + "neutral": { + "subtle": { + "@": { + "value": "#E7E8EA" + }, + "hover": { + "value": "#C0C4C8" + } + }, + "default": { + "@": { + "value": "#C0C4C8" + }, + "hover": { + "value": "#999EA3" + } + }, + "strong": { + "@": { + "value": "#999EA3" + }, + "hover": { + "value": "#878C90" + } + } + }, + "brand": { + "primary": { + "subtle": { + "value": "#E0E0F9" + }, + "@": { + "value": "#C4C1F3" + }, + "strong": { + "value": "#A6A3EE" + } + } + }, + "utility": { + "success": { + "subtle": { + "value": "#B7E9CE" + }, + "default": { + "value": "#8FDCB3" + }, + "strong": { + "value": "#59C88C" + } + }, + "warning": { + "subtle": { + "value": "#FFCBA5" + }, + "default": { + "value": "#FFAF76" + }, + "strong": { + "value": "#F6924A" + } + }, + "error": { + "subtle": { + "value": "#FFCBD7" + }, + "default": { + "value": "#FB90B0" + }, + "strong": { + "value": "#F76C96" + } + } + }, + "grade": { + "complete": { + "value": "#8FDCB3" + }, + "revise": { + "subtle": { + "value": "#FFEBB3" + }, + "default": { + "value": "#FFDD80" + }, + "strong": { + "value": "#F7BE2D" + } + }, + "stop": { + "value": "#FB90B0" + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "icon": { + "neutral": { + "default": { + "@": { + "value": "#5D6369" + }, + "inverse": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#383C43" + } + }, + "strong": { + "@": { + "value": "#383C43" + }, + "hover": { + "value": "#21272D" + } + }, + "subtle": { + "@": { + "value": "#878C90" + }, + "hover": { + "value": "#5D6369" + } + } + }, + "link": { + "default": { + "@": { + "value": "#8984E8" + }, + "hover": { + "value": "#6B65E2" + } + } + }, + "brand": { + "primary": { + "@": { + "value": "#8984E8" + }, + "hover": { + "value": "#6B65E2" + } + } + }, + "utility": { + "success": { + "@": { + "value": "#00A56A" + }, + "hover": { + "value": "#008656" + } + }, + "warning": { + "@": { + "value": "#E06B00" + }, + "hover": { + "value": "#C64600" + } + }, + "error": { + "@": { + "value": "#F1497B" + }, + "hover": { + "value": "#D41E52" + } + } + }, + "grade": { + "complete": { + "@": { + "value": "#00A56A" + }, + "hover": { + "value": "#00A56A" + } + }, + "revise": { + "@": { + "value": "#21272D" + }, + "hover": { + "value": "#161B1F" + } + }, + "stop": { + "@": { + "value": "#F1497B" + }, + "hover": { + "value": "#D41E52" + } + } + }, + "disabled": { + "value": "#C0C4C8" + } + }, + "text": { + "neutral": { + "default": { + "@": { + "value": "#383C43" + }, + "inverse": { + "value": "#FFFFFF" + } + }, + "strong": { + "value": "#21272D" + }, + "subtle": { + "value": "#5D6369" + } + }, + "link": { + "neutral": { + "value": "#21272D" + }, + "brand": { + "value": "#5751D2" + } + }, + "utility": { + "success": { + "value": "#007249" + }, + "warning": { + "value": "#AC3400" + }, + "error": { + "value": "#BD0044" + } + }, + "grade": { + "complete": { + "value": "#007249" + }, + "revise": { + "value": "#21272D" + }, + "stop": { + "value": "#BD0044" + } + }, + "disabled": { + "value": "#C0C4C8" + }, + "brand": { + "primary": { + "value": "#5751D2" + } + } + }, + "transparent": { + "black": { + "0": { + "value": "rgba(0, 0, 0, 0)" + }, + "30": { + "value": "rgba(0, 0, 0, .3)" + } + }, + "white": { + "0": { + "value": "rgba(255, 255, 255, 0)" + } + } + }, + "body": { + "background": { + "@": { + "value": "#F4F6F8" + }, + "inverted": { + "value": "#383C43" + } + } + }, + "button": { + "primary": { + "brand": { + "background": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "border": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "text": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "background": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "border": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "text": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + } + }, + "secondary": { + "brand": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "border": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#3E42B1" + } + }, + "text": { + "@": { + "value": "#5751D2" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "neutral": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#383C43" + } + }, + "border": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#383C43" + } + }, + "text": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#999EA3" + }, + "hover": { + "value": "#999EA3" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "success": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#005939" + } + }, + "border": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#005939" + } + }, + "text": { + "@": { + "value": "#007249" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "warning": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#842800" + } + }, + "border": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#842800" + } + }, + "text": { + "@": { + "value": "#AC3400" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "border": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#8F0134" + } + }, + "text": { + "@": { + "value": "#BD0044" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + }, + "icon": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#FFFFFF" + }, + "active": { + "value": "#FFFFFF" + } + } + } + }, + "icon": { + "brand": { + "@": { + "value": "#6B65E2" + }, + "hover": { + "value": "#6B65E2" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E0E0F9" + }, + "active": { + "value": "#5751D2" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E0E0F9" + }, + "active": { + "value": "#5751D2" + } + }, + "text": { + "@": { + "value": "#5751D2" + }, + "hover": { + "value": "#5751D2" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "neutral": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#5D6369" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#E7E8EA" + }, + "active": { + "value": "#5D6369" + } + }, + "text": { + "@": { + "value": "#5D6369" + }, + "hover": { + "value": "#5D6369" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "success": { + "@": { + "value": "#008656" + }, + "hover": { + "value": "#008656" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#B7E9CE" + }, + "active": { + "value": "#007249" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#B7E9CE" + }, + "active": { + "value": "#007249" + } + }, + "text": { + "@": { + "value": "#007249" + }, + "hover": { + "value": "#007249" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "warning": { + "@": { + "value": "#C64600" + }, + "hover": { + "value": "#C64600" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFF1E9" + }, + "active": { + "value": "#AC3400" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFF1E9" + }, + "active": { + "value": "#AC3400" + } + }, + "text": { + "@": { + "value": "#AC3400" + }, + "hover": { + "value": "#AC3400" + }, + "active": { + "value": "#FFFFFF" + } + } + }, + "error": { + "@": { + "value": "#D41E52" + }, + "hover": { + "value": "#D41E52" + }, + "active": { + "value": "#FFFFFF" + }, + "background": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFCBD7" + }, + "active": { + "value": "#BD0044" + } + }, + "border": { + "@": { + "value": "rgba(0, 0, 0, 0)" + }, + "hover": { + "value": "#FFCBD7" + }, + "active": { + "value": "#BD0044" + } + }, + "text": { + "@": { + "value": "#BD0044" + }, + "hover": { + "value": "#BD0044" + }, + "active": { + "value": "#FFFFFF" + } + } + } + } + }, + "focus-ring": { + "@": { + "value": "#6B65E2" + }, + "inverted": { + "value": "#FFFFFF" + } + }, + "form": { + "border": { + "@": { + "value": "#878C90" + }, + "hover": { + "value": "#21272D" + } + }, + "background": { + "@": { + "value": "#FFFFFF" + }, + "hover": { + "value": "#F4F6F8" + } + }, + "label": { + "value": "#383C43" + } + }, + "text-highlight": { + "foreground": { + "value": "#21272D" + }, + "background": { + "value": "#F5FF8F" + } + } + }, + "form": { + "border": { + "width": { + "value": "1px" + }, + "radius": { + "value": "4px" + } + } + } + } + } +} diff --git a/style-dictionary.config.js b/style-dictionary.config.js index 90b82b85ee..c290329d52 100644 --- a/style-dictionary.config.js +++ b/style-dictionary.config.js @@ -14,10 +14,11 @@ const EDSStyleDictionary = StyleDictionary.extend({ }, css: { transforms: [...StyleDictionary.transformGroup.css, 'name/cti/kebab'], + buildPath: 'src/tokens-dist/', files: [ { format: 'css/variables', - destination: 'src/tokens-dist/css/variables.css', + destination: 'css/variables.css', options: { showFileHeader: false, }, @@ -25,7 +26,7 @@ const EDSStyleDictionary = StyleDictionary.extend({ { format: 'json/nested-css-variables', // useful for tailwind configs in consuming apps - destination: 'lib/tokens/json/css-variables-nested.json', + destination: 'json/css-variables-nested.json', }, ], }, @@ -52,89 +53,91 @@ const EDSStyleDictionary = StyleDictionary.extend({ // useful for tailwind configs in consuming apps destination: 'json/variables-nested.json', }, + { + format: 'json/value', + // sets up the base theme for use in overrides + /** + * TODO: + * - use filter to only include the theme-able things, not everything? + * - - https://amzn.github.io/style-dictionary/#/formats?id=filtering-tokens + */ + destination: 'json/theme-base.json', + filter: function (token) { + // don't allow theming on legacy tokens + return token.attributes.category !== 'legacy'; + }, + }, + ], + }, + scss: { + transforms: [...StyleDictionary.transformGroup.scss, 'name/cti/kebab'], + buildPath: 'src/tokens-dist/', + files: [ + { + format: 'scss/map-deep', + destination: 'scss/_variables.scss', + options: { + showFileHeader: false, + }, + }, ], }, }, }); -// copied from https://github.com/amzn/style-dictionary/blob/v3.0.0-rc.1/src/common/formats.js#L96 -function minifyCSSVarDictionary(obj) { +// copied from https://github.com/amzn/style-dictionary/blob/main/lib/common/formatHelpers/minifyDictionary.js#L29 +// replace the value object with a string representing the CSS variable reference +function minifyDictionaryUsingFormat(obj, formatFunc) { if (typeof obj !== 'object' || Array.isArray(obj)) { return obj; } const toRet = {}; - if (obj.value) { - return `var(--${obj.name})`; + if (obj.hasOwnProperty('value')) { + return formatFunc(obj); } else { for (const name in obj) { - toRet[name] = minifyCSSVarDictionary(obj[name]); + toRet[name] = minifyDictionaryUsingFormat(obj[name], formatFunc); } } return toRet; } +EDSStyleDictionary.registerFormat({ + name: 'json/nested-css-variables', + formatter: function (dictionary) { + return JSON.stringify( + minifyDictionaryUsingFormat( + dictionary.properties, + (obj) => `var(--${obj.name})`, + ), + null, + 2, + ); + }, +}); + /** - * Tokens with key '@' are the base value of the parent, e.g. - * {background: {neutral: {@: 'value' }}} is compiled to `background-neutral-default-@: 'value'`, - * but we want this to look like `background-neutral: 'value'`. - * - * This function moves the '@' token out to be a sibling of the parent with the '@' part of - * the name removed. - * - * Example: - * "neutral": { - * "default": { - * "@": "var(--eds-theme-color-border-neutral-default)", - * "hover": "var(--eds-theme-color-border-neutral-default-hover)" - * }, - * }, + * Replace the leaf objects in the parsed style with a value object + * mimicking the input file structure. Essentially, this formatter + * is for concatenating the input JSON files (because the built-in + * formatter outputs all the metadata) * - * will be changed to - * - * "neutral": { - * "default": { - * "hover": "var(--eds-theme-color-border-neutral-default-hover)" - * }, - * }, - * "neutral-default": "var(--eds-theme-color-border-neutral-default)", - * - * This helper function makes this happen by - * 1) Scanning great grandchildren for the key '@' - * 2) If such key exists, child and grandchild names are combined to make the new child key and value of the great grandchild '@' key is assigned to the new child key - * 2.1) The great grandchild '@' key/value pair is deleted for housekeeping. - * 2.2) If objects are now empty, deletes them to prevent potential token name clashing which could cause Tailwind bugs. - * 3) If such key does not exist, but grand child is an object, recurses with the child to repeat this process. + * Needed because the current `json` formatter outputs too much :( + * - https://github.com/amzn/style-dictionary/issues/887 */ -function formatEdsTokens(obj) { - for (const name in obj) { - if (typeof obj[name] === 'object') { - for (const nestedName in obj[name]) { - if (obj[name][nestedName]['@']) { - obj[name + '-' + nestedName] = obj[name][nestedName]['@']; - delete obj[name][nestedName]['@']; - if (Object.keys(obj[name][nestedName]).length === 0) { - delete obj[name][nestedName]; - } - if (Object.keys(obj[name]).length === 0) { - delete obj[name]; - } - } else if (typeof obj[name][nestedName] === 'object') { - formatEdsTokens(obj[name]); - } - } - } - } -} - EDSStyleDictionary.registerFormat({ - name: 'json/nested-css-variables', + name: 'json/value', formatter: function (dictionary) { - const minifiedCssDictionary = minifyCSSVarDictionary(dictionary.properties); - formatEdsTokens(minifiedCssDictionary); - return JSON.stringify(minifiedCssDictionary, null, 2); + return JSON.stringify( + minifyDictionaryUsingFormat(dictionary.properties, (obj) => ({ + value: obj.value, + })), + null, + 2, + ); }, }); -EDSStyleDictionary.buildAllPlatforms(); +EDSStyleDictionary.buildAllPlatforms(); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 91d3cb7880..1e4f5770c3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1706,6 +1706,7 @@ __metadata: jest: ^29.6.1 jest-environment-jsdom: ^29.6.1 jest-preset-stylelint: ^6.1.0 + lilconfig: ^2.0.6 lint-staged: ^13.2.3 lodash: ^4.17.21 pascal-case: ^3.1.2 @@ -1724,6 +1725,7 @@ __metadata: react-focus-lock: ^2.9.5 react-popper: ^2.3.0 react-portal: ^4.2.2 + react-uid: ^2.3.2 rollup: ^3.26.2 rollup-plugin-postcss: ^4.0.2 size-limit: ^8.2.6 @@ -1733,12 +1735,16 @@ __metadata: style-dictionary: ^3.8.0 stylelint: ^15.10.1 stylelint-config-recommended: ^10.0.1 + svg4everybody: ^2.1.9 tailwindcss: ^3.3.3 ts-jest: ^29.1.1 typescript: ^4.9.5 peerDependencies: react: ">= 17" react-dom: ">= 17" + bin: + eds-apply-theme: bin/eds-apply-theme.js + eds-init: bin/eds-init.js languageName: unknown linkType: soft @@ -14502,7 +14508,7 @@ __metadata: languageName: node linkType: hard -"lilconfig@npm:2.1.0, lilconfig@npm:^2.0.3, lilconfig@npm:^2.1.0": +"lilconfig@npm:2.1.0, lilconfig@npm:^2.0.3, lilconfig@npm:^2.0.6, lilconfig@npm:^2.1.0": version: 2.1.0 resolution: "lilconfig@npm:2.1.0" checksum: 8549bb352b8192375fed4a74694cd61ad293904eee33f9d4866c2192865c44c4eb35d10782966242634e0cbc1e91fe62b1247f148dc5514918e3a966da7ea117 @@ -18483,6 +18489,21 @@ __metadata: languageName: node linkType: hard +"react-uid@npm:^2.3.2": + version: 2.3.3 + resolution: "react-uid@npm:2.3.3" + dependencies: + tslib: ^2.0.0 + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: d8f1a90043800d0d4854445534bdb997b71335eaca40017240a49aedadf1ea7f6c1b3fce150188d8ea726650e1cb4c7d7991c699d9713d16244bf4abb7fff12c + languageName: node + linkType: hard + "react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -20683,6 +20704,13 @@ __metadata: languageName: node linkType: hard +"svg4everybody@npm:^2.1.9": + version: 2.1.9 + resolution: "svg4everybody@npm:2.1.9" + checksum: 11c4445517676d28fa46c3df63ee728575eb2261db1c1f36b04fcc8fb33b7f497bb0dcb37ed2a119820fb2f04f929b76f4b3a192a0ca197f08905dea31a13b06 + languageName: node + linkType: hard + "svgo@npm:^2.7.0": version: 2.8.0 resolution: "svgo@npm:2.8.0"