From 7aecb689fd11aeba6fa5a90ebf02fa5a31478174 Mon Sep 17 00:00:00 2001 From: Annie Hu Date: Tue, 15 Mar 2022 17:32:52 -0700 Subject: [PATCH] chore: publish to lib/tokens BREAKING CHANGE: removes color-font tokens --- .eslintrc | 2 +- .gitignore | 4 +- .stylelintrc | 5 +- lib/tokens/css/variables.css | 104 +++++++ lib/tokens/json/css-variables-nested.json | 150 +++++++++++ lib/tokens/json/variables-nested.json | 150 +++++++++++ lib/tokens/json/variables.json | 104 +++++++ lib/tokens/scss/_variables.scss | 254 ++++++++++++++++++ lib/tokens/ts/colors.ts | 75 ++++++ package.json | 2 +- src/tokens/color/font.json | 16 -- src/tokens/{color/base.json => colors.json} | 0 .../{size/font.json => typography.json} | 0 style-dictionary.config.js | 12 +- 14 files changed, 848 insertions(+), 30 deletions(-) create mode 100644 lib/tokens/css/variables.css create mode 100644 lib/tokens/json/css-variables-nested.json create mode 100644 lib/tokens/json/variables-nested.json create mode 100644 lib/tokens/json/variables.json create mode 100644 lib/tokens/scss/_variables.scss create mode 100644 lib/tokens/ts/colors.ts delete mode 100644 src/tokens/color/font.json rename src/tokens/{color/base.json => colors.json} (100%) rename src/tokens/{size/font.json => typography.json} (100%) diff --git a/.eslintrc b/.eslintrc index a1bc738f4..1a7d1b8a4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -73,7 +73,7 @@ } }, { - "files": ["packages/components/src/**/*.stories.{ts,tsx}"], + "files": ["src/components/src/**/*.stories.{ts,tsx}"], "rules": { "no-restricted-imports": [ "error", { diff --git a/.gitignore b/.gitignore index 2b694948c..30b604964 100644 --- a/.gitignore +++ b/.gitignore @@ -73,8 +73,8 @@ typings/ .vsls.json # lib folders (allowing built tokens) -packages/*/lib/ -!packages/tokens/lib/ +lib/* +!lib/tokens/ storybook-static/ # Yarn 2 files diff --git a/.stylelintrc b/.stylelintrc index 770c8ab77..c922ec16e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -21,8 +21,5 @@ "selector-nested-pattern": "^(&(:[\\w-]+|\\.state(Hover|Focus|FocusWithin|Active)),?\\s*)+$", "max-nesting-depth": 1, "selector-class-pattern": null - }, - "ignoreFiles": [ - "packages/tokens/lib/**" - ] + } } diff --git a/lib/tokens/css/variables.css b/lib/tokens/css/variables.css new file mode 100644 index 000000000..17177af49 --- /dev/null +++ b/lib/tokens/css/variables.css @@ -0,0 +1,104 @@ +:root { + --eds-color-neutral-100: #f3f3f3; + --eds-color-neutral-200: #e8e8e9; + --eds-color-neutral-300: #cad1d8; + --eds-color-neutral-400: #838c95; + --eds-color-neutral-500: #58636f; + --eds-color-neutral-600: #3c444c; + --eds-color-neutral-700: #21272d; + --eds-color-white: #fff; + --eds-color-black: #21272d; + --eds-color-alert-100: #ffebf0; + --eds-color-alert-200: #ffccd8; + --eds-color-alert-300: #fb90b0; + --eds-color-alert-400: #f76c96; + --eds-color-alert-500: #f1497c; + --eds-color-alert-600: #d41e52; + --eds-color-alert-700: #bd0044; + --eds-color-alert-800: #8f0134; + --eds-color-success-100: #ecfff5; + --eds-color-success-200: #b7e9ce; + --eds-color-success-300: #8fdcb3; + --eds-color-success-400: #59c88c; + --eds-color-success-500: #00a66a; + --eds-color-success-600: #008756; + --eds-color-success-700: #007349; + --eds-color-success-800: #005939; + --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-color-warning-100: #fff1e9; + --eds-color-warning-200: #ffcba6; + --eds-color-warning-300: #ffb077; + --eds-color-warning-400: #f6924a; + --eds-color-warning-500: #e06c00; + --eds-color-warning-600: #c64600; + --eds-color-warning-700: #ac3400; + --eds-color-warning-800: #852800; + --eds-color-brand-100: #f7f1ff; + --eds-color-brand-200: #c3c0fe; + --eds-color-brand-300: #a7a2fe; + --eds-color-brand-400: #928cff; + --eds-color-brand-500: #766ffd; + --eds-color-brand-600: #574eff; + --eds-color-brand-700: #433bde; + --eds-color-brand-800: #312b9e; + --eds-color-yellow-100: #fdf1d0; + --eds-color-yellow-500: #f79d2d; + --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-size-font-h1: 3rem; /* Font size for Heading 1 sized text */ + --eds-size-font-h2: 2.5rem; /* Font size for Heading 2 sized text */ + --eds-size-font-h3: 2rem; /* Font size for Heading 3 sized text */ + --eds-size-font-h4: 1.5rem; /* Font size for Heading 4 sized text */ + --eds-size-font-h5: 1.125rem; /* Font size for Heading 5 sized text */ + --eds-size-font-base: 16px; /* Base font size for design system in px */ + --eds-size-font-body: 1rem; /* Default font size for body text */ + --eds-size-font-sm: 0.875rem; /* Font size for small body text */ + --eds-size-font-xs: 0.75rem; /* Font size for xsmall body text */ + --eds-size-line-height-h1: 4rem; /* Line height for Heading 1 sized text */ + --eds-size-line-height-h2: 3.5rem; /* Line height for Heading 2 sized text */ + --eds-size-line-height-h3: 2.5rem; /* Line height for Heading 3 sized text */ + --eds-size-line-height-h4: 2rem; /* Line height for Heading 4 sized text */ + --eds-size-line-height-h5: 1.5rem; /* Font size for Heading 5 sized text */ + --eds-size-line-height-body: 1.5rem; /* Default line height for body text */ + --eds-size-line-height-sm: 1.25rem; /* Line height for small body text */ + --eds-size-line-height-xs: 1rem; /* Line height for xsmall body text */ + --legacy-color-gray-50: #f8f9fc; + --legacy-color-gray-100: #ebebec; + --legacy-color-gray-200: #d8d8d9; + --legacy-color-gray-300: #c5c5c6; + --legacy-color-gray-500: #9f9fa0; + --legacy-color-gray-700: #78797a; + --legacy-color-gray-1000: #3f4041; + --legacy-color-black: #2c2d2e; + --legacy-color-red-100: #f7dddd; + --legacy-color-red-200: #f25252; + --legacy-color-green-100: #e1f0e7; + --legacy-color-green-200: #6cc188; + --legacy-color-green-300: #457b57; + --legacy-color-yellow-200: #ffc55b; + --legacy-color-yellow-300: #a46900; + --legacy-color-yellow-400: #644c1f; + --legacy-color-purple-200: #7686d3; + --legacy-color-purple-300: #5761ba; + --legacy-color-purple-400: #32417c; + --legacy-size-font-h1: 1.5rem; /* Font size for Heading 1 sized text */ + --legacy-size-font-h2: 1.125rem; /* Font size for Heading 2 sized text */ + --legacy-size-font-base: 16px; /* Base font size for design system in px */ + --legacy-size-font-body: 1rem; /* Default font size for body text */ + --legacy-size-font-sm: 0.875rem; /* Font size for small body text */ + --legacy-size-font-xs: 0.75rem; /* Font size for xsmall body text */ + --legacy-size-line-height-h1: 2rem; /* Line height for Heading 1 sized text */ + --legacy-size-line-height-body: 1.5rem; /* Default line height for body text */ + --legacy-size-line-height-sm: 1.25rem; /* Line height for small body text */ + --legacy-size-line-height-xs: 1rem; /* Line height for xsmall body text */ +} diff --git a/lib/tokens/json/css-variables-nested.json b/lib/tokens/json/css-variables-nested.json new file mode 100644 index 000000000..de884a2e9 --- /dev/null +++ b/lib/tokens/json/css-variables-nested.json @@ -0,0 +1,150 @@ +{ + "eds": { + "color": { + "neutral": { + "100": "var(--eds-color-neutral-100)", + "200": "var(--eds-color-neutral-200)", + "300": "var(--eds-color-neutral-300)", + "400": "var(--eds-color-neutral-400)", + "500": "var(--eds-color-neutral-500)", + "600": "var(--eds-color-neutral-600)", + "700": "var(--eds-color-neutral-700)" + }, + "white": "var(--eds-color-white)", + "black": "var(--eds-color-black)", + "alert": { + "100": "var(--eds-color-alert-100)", + "200": "var(--eds-color-alert-200)", + "300": "var(--eds-color-alert-300)", + "400": "var(--eds-color-alert-400)", + "500": "var(--eds-color-alert-500)", + "600": "var(--eds-color-alert-600)", + "700": "var(--eds-color-alert-700)", + "800": "var(--eds-color-alert-800)" + }, + "success": { + "100": "var(--eds-color-success-100)", + "200": "var(--eds-color-success-200)", + "300": "var(--eds-color-success-300)", + "400": "var(--eds-color-success-400)", + "500": "var(--eds-color-success-500)", + "600": "var(--eds-color-success-600)", + "700": "var(--eds-color-success-700)", + "800": "var(--eds-color-success-800)" + }, + "info": { + "100": "var(--eds-color-info-100)", + "200": "var(--eds-color-info-200)", + "300": "var(--eds-color-info-300)", + "400": "var(--eds-color-info-400)", + "500": "var(--eds-color-info-500)", + "600": "var(--eds-color-info-600)", + "700": "var(--eds-color-info-700)" + }, + "warning": { + "100": "var(--eds-color-warning-100)", + "200": "var(--eds-color-warning-200)", + "300": "var(--eds-color-warning-300)", + "400": "var(--eds-color-warning-400)", + "500": "var(--eds-color-warning-500)", + "600": "var(--eds-color-warning-600)", + "700": "var(--eds-color-warning-700)", + "800": "var(--eds-color-warning-800)" + }, + "brand": { + "100": "var(--eds-color-brand-100)", + "200": "var(--eds-color-brand-200)", + "300": "var(--eds-color-brand-300)", + "400": "var(--eds-color-brand-400)", + "500": "var(--eds-color-brand-500)", + "600": "var(--eds-color-brand-600)", + "700": "var(--eds-color-brand-700)", + "800": "var(--eds-color-brand-800)" + }, + "yellow": { + "100": "var(--eds-color-yellow-100)", + "500": "var(--eds-color-yellow-500)" + }, + "highlight": { + "100": "var(--eds-color-highlight-100)", + "200": "var(--eds-color-highlight-200)", + "300": "var(--eds-color-highlight-300)", + "400": "var(--eds-color-highlight-400)", + "500": "var(--eds-color-highlight-500)", + "600": "var(--eds-color-highlight-600)" + } + }, + "size": { + "font": { + "h1": "var(--eds-size-font-h1)", + "h2": "var(--eds-size-font-h2)", + "h3": "var(--eds-size-font-h3)", + "h4": "var(--eds-size-font-h4)", + "h5": "var(--eds-size-font-h5)", + "base": "var(--eds-size-font-base)", + "body": "var(--eds-size-font-body)", + "sm": "var(--eds-size-font-sm)", + "xs": "var(--eds-size-font-xs)" + }, + "line-height": { + "h1": "var(--eds-size-line-height-h1)", + "h2": "var(--eds-size-line-height-h2)", + "h3": "var(--eds-size-line-height-h3)", + "h4": "var(--eds-size-line-height-h4)", + "h5": "var(--eds-size-line-height-h5)", + "body": "var(--eds-size-line-height-body)", + "sm": "var(--eds-size-line-height-sm)", + "xs": "var(--eds-size-line-height-xs)" + } + } + }, + "legacy": { + "color": { + "gray": { + "50": "var(--legacy-color-gray-50)", + "100": "var(--legacy-color-gray-100)", + "200": "var(--legacy-color-gray-200)", + "300": "var(--legacy-color-gray-300)", + "500": "var(--legacy-color-gray-500)", + "700": "var(--legacy-color-gray-700)", + "1000": "var(--legacy-color-gray-1000)" + }, + "black": "var(--legacy-color-black)", + "red": { + "100": "var(--legacy-color-red-100)", + "200": "var(--legacy-color-red-200)" + }, + "green": { + "100": "var(--legacy-color-green-100)", + "200": "var(--legacy-color-green-200)", + "300": "var(--legacy-color-green-300)" + }, + "yellow": { + "200": "var(--legacy-color-yellow-200)", + "300": "var(--legacy-color-yellow-300)", + "400": "var(--legacy-color-yellow-400)" + }, + "purple": { + "200": "var(--legacy-color-purple-200)", + "300": "var(--legacy-color-purple-300)", + "400": "var(--legacy-color-purple-400)" + } + }, + "size": { + "font": { + "h1": "var(--legacy-size-font-h1)", + "h2": "var(--legacy-size-font-h2)", + "base": "var(--legacy-size-font-base)", + "body": "var(--legacy-size-font-body)", + "sm": "var(--legacy-size-font-sm)", + "xs": "var(--legacy-size-font-xs)" + }, + "line-height": { + "h1": "var(--legacy-size-line-height-h1)", + "body": "var(--legacy-size-line-height-body)", + "sm": "var(--legacy-size-line-height-sm)", + "xs": "var(--legacy-size-line-height-xs)" + } + } + } +} \ No newline at end of file diff --git a/lib/tokens/json/variables-nested.json b/lib/tokens/json/variables-nested.json new file mode 100644 index 000000000..615b6ef20 --- /dev/null +++ b/lib/tokens/json/variables-nested.json @@ -0,0 +1,150 @@ +{ + "eds": { + "color": { + "neutral": { + "100": "#F3F3F3", + "200": "#E8E8E9", + "300": "#CAD1D8", + "400": "#838C95", + "500": "#58636F", + "600": "#3C444C", + "700": "#21272D" + }, + "white": "#FFFFFF", + "black": "#21272D", + "alert": { + "100": "#FFEBF0", + "200": "#FFCCD8", + "300": "#FB90B0", + "400": "#F76C96", + "500": "#F1497C", + "600": "#D41E52", + "700": "#BD0044", + "800": "#8F0134" + }, + "success": { + "100": "#ECFFF5", + "200": "#B7E9CE", + "300": "#8FDCB3", + "400": "#59C88C", + "500": "#00A66A", + "600": "#008756", + "700": "#007349", + "800": "#005939" + }, + "info": { + "100": "#F1F9FF", + "200": "#B0D5FF", + "300": "#7FB9FD", + "400": "#5CA7FF", + "500": "#328EFB", + "600": "#1977CD", + "700": "#0563B8" + }, + "warning": { + "100": "#FFF1E9", + "200": "#FFCBA6", + "300": "#FFB077", + "400": "#F6924A", + "500": "#E06C00", + "600": "#C64600", + "700": "#AC3400", + "800": "#852800" + }, + "brand": { + "100": "#F7F1FF", + "200": "#C3C0FE", + "300": "#A7A2FE", + "400": "#928CFF", + "500": "#766FFD", + "600": "#574EFF", + "700": "#433BDE", + "800": "#312B9E" + }, + "yellow": { + "100": "#FDF1D0", + "500": "#F79D2D" + }, + "highlight": { + "100": "#FF9FEC", + "200": "#FFBEAA", + "300": "#FCFF00", + "400": "#9DFFA4", + "500": "#00F1FF", + "600": "#CFC9FF" + } + }, + "size": { + "font": { + "h1": "3rem", + "h2": "2.5rem", + "h3": "2rem", + "h4": "1.5rem", + "h5": "1.125rem", + "base": "16px", + "body": "1rem", + "sm": "0.875rem", + "xs": "0.75rem" + }, + "line-height": { + "h1": "4rem", + "h2": "3.5rem", + "h3": "2.5rem", + "h4": "2rem", + "h5": "1.5rem", + "body": "1.5rem", + "sm": "1.25rem", + "xs": "1rem" + } + } + }, + "legacy": { + "color": { + "gray": { + "50": "#F8F9FC", + "100": "#EBEBEC", + "200": "#D8D8D9", + "300": "#C5C5C6", + "500": "#9F9FA0", + "700": "#78797A", + "1000": "#3F4041" + }, + "black": "#2C2D2E", + "red": { + "100": "#F7DDDD", + "200": "#F25252" + }, + "green": { + "100": "#E1F0E7", + "200": "#6CC188", + "300": "#457B57" + }, + "yellow": { + "200": "#FFC55B", + "300": "#A46900", + "400": "#644C1F" + }, + "purple": { + "200": "#7686D3", + "300": "#5761BA", + "400": "#32417C" + } + }, + "size": { + "font": { + "h1": "1.5rem", + "h2": "1.125rem", + "base": "16px", + "body": "1rem", + "sm": "0.875rem", + "xs": "0.75rem" + }, + "line-height": { + "h1": "2rem", + "body": "1.5rem", + "sm": "1.25rem", + "xs": "1rem" + } + } + } +} \ No newline at end of file diff --git a/lib/tokens/json/variables.json b/lib/tokens/json/variables.json new file mode 100644 index 000000000..512673d97 --- /dev/null +++ b/lib/tokens/json/variables.json @@ -0,0 +1,104 @@ +{ + "EdsColorNeutral100": "#F3F3F3", + "EdsColorNeutral200": "#E8E8E9", + "EdsColorNeutral300": "#CAD1D8", + "EdsColorNeutral400": "#838C95", + "EdsColorNeutral500": "#58636F", + "EdsColorNeutral600": "#3C444C", + "EdsColorNeutral700": "#21272D", + "EdsColorWhite": "#FFFFFF", + "EdsColorBlack": "#21272D", + "EdsColorAlert100": "#FFEBF0", + "EdsColorAlert200": "#FFCCD8", + "EdsColorAlert300": "#FB90B0", + "EdsColorAlert400": "#F76C96", + "EdsColorAlert500": "#F1497C", + "EdsColorAlert600": "#D41E52", + "EdsColorAlert700": "#BD0044", + "EdsColorAlert800": "#8F0134", + "EdsColorSuccess100": "#ECFFF5", + "EdsColorSuccess200": "#B7E9CE", + "EdsColorSuccess300": "#8FDCB3", + "EdsColorSuccess400": "#59C88C", + "EdsColorSuccess500": "#00A66A", + "EdsColorSuccess600": "#008756", + "EdsColorSuccess700": "#007349", + "EdsColorSuccess800": "#005939", + "EdsColorInfo100": "#F1F9FF", + "EdsColorInfo200": "#B0D5FF", + "EdsColorInfo300": "#7FB9FD", + "EdsColorInfo400": "#5CA7FF", + "EdsColorInfo500": "#328EFB", + "EdsColorInfo600": "#1977CD", + "EdsColorInfo700": "#0563B8", + "EdsColorWarning100": "#FFF1E9", + "EdsColorWarning200": "#FFCBA6", + "EdsColorWarning300": "#FFB077", + "EdsColorWarning400": "#F6924A", + "EdsColorWarning500": "#E06C00", + "EdsColorWarning600": "#C64600", + "EdsColorWarning700": "#AC3400", + "EdsColorWarning800": "#852800", + "EdsColorBrand100": "#F7F1FF", + "EdsColorBrand200": "#C3C0FE", + "EdsColorBrand300": "#A7A2FE", + "EdsColorBrand400": "#928CFF", + "EdsColorBrand500": "#766FFD", + "EdsColorBrand600": "#574EFF", + "EdsColorBrand700": "#433BDE", + "EdsColorBrand800": "#312B9E", + "EdsColorYellow100": "#FDF1D0", + "EdsColorYellow500": "#F79D2D", + "EdsColorHighlight100": "#FF9FEC", + "EdsColorHighlight200": "#FFBEAA", + "EdsColorHighlight300": "#FCFF00", + "EdsColorHighlight400": "#9DFFA4", + "EdsColorHighlight500": "#00F1FF", + "EdsColorHighlight600": "#CFC9FF", + "EdsSizeFontH1": "3rem", + "EdsSizeFontH2": "2.5rem", + "EdsSizeFontH3": "2rem", + "EdsSizeFontH4": "1.5rem", + "EdsSizeFontH5": "1.125rem", + "EdsSizeFontBase": "16px", + "EdsSizeFontBody": "1rem", + "EdsSizeFontSm": "0.875rem", + "EdsSizeFontXs": "0.75rem", + "EdsSizeLineHeightH1": "4rem", + "EdsSizeLineHeightH2": "3.5rem", + "EdsSizeLineHeightH3": "2.5rem", + "EdsSizeLineHeightH4": "2rem", + "EdsSizeLineHeightH5": "1.5rem", + "EdsSizeLineHeightBody": "1.5rem", + "EdsSizeLineHeightSm": "1.25rem", + "EdsSizeLineHeightXs": "1rem", + "LegacyColorGray50": "#F8F9FC", + "LegacyColorGray100": "#EBEBEC", + "LegacyColorGray200": "#D8D8D9", + "LegacyColorGray300": "#C5C5C6", + "LegacyColorGray500": "#9F9FA0", + "LegacyColorGray700": "#78797A", + "LegacyColorGray1000": "#3F4041", + "LegacyColorBlack": "#2C2D2E", + "LegacyColorRed100": "#F7DDDD", + "LegacyColorRed200": "#F25252", + "LegacyColorGreen100": "#E1F0E7", + "LegacyColorGreen200": "#6CC188", + "LegacyColorGreen300": "#457B57", + "LegacyColorYellow200": "#FFC55B", + "LegacyColorYellow300": "#A46900", + "LegacyColorYellow400": "#644C1F", + "LegacyColorPurple200": "#7686D3", + "LegacyColorPurple300": "#5761BA", + "LegacyColorPurple400": "#32417C", + "LegacySizeFontH1": "1.5rem", + "LegacySizeFontH2": "1.125rem", + "LegacySizeFontBase": "16px", + "LegacySizeFontBody": "1rem", + "LegacySizeFontSm": "0.875rem", + "LegacySizeFontXs": "0.75rem", + "LegacySizeLineHeightH1": "2rem", + "LegacySizeLineHeightBody": "1.5rem", + "LegacySizeLineHeightSm": "1.25rem", + "LegacySizeLineHeightXs": "1rem" +} \ No newline at end of file diff --git a/lib/tokens/scss/_variables.scss b/lib/tokens/scss/_variables.scss new file mode 100644 index 000000000..d19b6e9dc --- /dev/null +++ b/lib/tokens/scss/_variables.scss @@ -0,0 +1,254 @@ + +$eds-color-neutral-100: #F3F3F3 !default; +$eds-color-neutral-200: #E8E8E9 !default; +$eds-color-neutral-300: #CAD1D8 !default; +$eds-color-neutral-400: #838C95 !default; +$eds-color-neutral-500: #58636F !default; +$eds-color-neutral-600: #3C444C !default; +$eds-color-neutral-700: #21272D !default; +$eds-color-white: #FFFFFF !default; +$eds-color-black: #21272D !default; +$eds-color-alert-100: #FFEBF0 !default; +$eds-color-alert-200: #FFCCD8 !default; +$eds-color-alert-300: #FB90B0 !default; +$eds-color-alert-400: #F76C96 !default; +$eds-color-alert-500: #F1497C !default; +$eds-color-alert-600: #D41E52 !default; +$eds-color-alert-700: #BD0044 !default; +$eds-color-alert-800: #8F0134 !default; +$eds-color-success-100: #ECFFF5 !default; +$eds-color-success-200: #B7E9CE !default; +$eds-color-success-300: #8FDCB3 !default; +$eds-color-success-400: #59C88C !default; +$eds-color-success-500: #00A66A !default; +$eds-color-success-600: #008756 !default; +$eds-color-success-700: #007349 !default; +$eds-color-success-800: #005939 !default; +$eds-color-info-100: #F1F9FF !default; +$eds-color-info-200: #B0D5FF !default; +$eds-color-info-300: #7FB9FD !default; +$eds-color-info-400: #5CA7FF !default; +$eds-color-info-500: #328EFB !default; +$eds-color-info-600: #1977CD !default; +$eds-color-info-700: #0563B8 !default; +$eds-color-warning-100: #FFF1E9 !default; +$eds-color-warning-200: #FFCBA6 !default; +$eds-color-warning-300: #FFB077 !default; +$eds-color-warning-400: #F6924A !default; +$eds-color-warning-500: #E06C00 !default; +$eds-color-warning-600: #C64600 !default; +$eds-color-warning-700: #AC3400 !default; +$eds-color-warning-800: #852800 !default; +$eds-color-brand-100: #F7F1FF !default; +$eds-color-brand-200: #C3C0FE !default; +$eds-color-brand-300: #A7A2FE !default; +$eds-color-brand-400: #928CFF !default; +$eds-color-brand-500: #766FFD !default; +$eds-color-brand-600: #574EFF !default; +$eds-color-brand-700: #433BDE !default; +$eds-color-brand-800: #312B9E !default; +$eds-color-yellow-100: #FDF1D0 !default; +$eds-color-yellow-500: #F79D2D !default; +$eds-color-highlight-100: #FF9FEC !default; +$eds-color-highlight-200: #FFBEAA !default; +$eds-color-highlight-300: #FCFF00 !default; +$eds-color-highlight-400: #9DFFA4 !default; +$eds-color-highlight-500: #00F1FF !default; +$eds-color-highlight-600: #CFC9FF !default; +$eds-size-font-h1: 3rem !default; // Font size for Heading 1 sized text +$eds-size-font-h2: 2.5rem !default; // Font size for Heading 2 sized text +$eds-size-font-h3: 2rem !default; // Font size for Heading 3 sized text +$eds-size-font-h4: 1.5rem !default; // Font size for Heading 4 sized text +$eds-size-font-h5: 1.125rem !default; // Font size for Heading 5 sized text +$eds-size-font-base: 16px !default; // Base font size for design system in px +$eds-size-font-body: 1rem !default; // Default font size for body text +$eds-size-font-sm: 0.875rem !default; // Font size for small body text +$eds-size-font-xs: 0.75rem !default; // Font size for xsmall body text +$eds-size-line-height-h1: 4rem !default; // Line height for Heading 1 sized text +$eds-size-line-height-h2: 3.5rem !default; // Line height for Heading 2 sized text +$eds-size-line-height-h3: 2.5rem !default; // Line height for Heading 3 sized text +$eds-size-line-height-h4: 2rem !default; // Line height for Heading 4 sized text +$eds-size-line-height-h5: 1.5rem !default; // Font size for Heading 5 sized text +$eds-size-line-height-body: 1.5rem !default; // Default line height for body text +$eds-size-line-height-sm: 1.25rem !default; // Line height for small body text +$eds-size-line-height-xs: 1rem !default; // Line height for xsmall body text +$legacy-color-gray-50: #F8F9FC !default; +$legacy-color-gray-100: #EBEBEC !default; +$legacy-color-gray-200: #D8D8D9 !default; +$legacy-color-gray-300: #C5C5C6 !default; +$legacy-color-gray-500: #9F9FA0 !default; +$legacy-color-gray-700: #78797A !default; +$legacy-color-gray-1000: #3F4041 !default; +$legacy-color-black: #2C2D2E !default; +$legacy-color-red-100: #F7DDDD !default; +$legacy-color-red-200: #F25252 !default; +$legacy-color-green-100: #E1F0E7 !default; +$legacy-color-green-200: #6CC188 !default; +$legacy-color-green-300: #457B57 !default; +$legacy-color-yellow-200: #FFC55B !default; +$legacy-color-yellow-300: #A46900 !default; +$legacy-color-yellow-400: #644C1F !default; +$legacy-color-purple-200: #7686D3 !default; +$legacy-color-purple-300: #5761BA !default; +$legacy-color-purple-400: #32417C !default; +$legacy-size-font-h1: 1.5rem !default; // Font size for Heading 1 sized text +$legacy-size-font-h2: 1.125rem !default; // Font size for Heading 2 sized text +$legacy-size-font-base: 16px !default; // Base font size for design system in px +$legacy-size-font-body: 1rem !default; // Default font size for body text +$legacy-size-font-sm: 0.875rem !default; // Font size for small body text +$legacy-size-font-xs: 0.75rem !default; // Font size for xsmall body text +$legacy-size-line-height-h1: 2rem !default; // Line height for Heading 1 sized text +$legacy-size-line-height-body: 1.5rem !default; // Default line height for body text +$legacy-size-line-height-sm: 1.25rem !default; // Line height for small body text +$legacy-size-line-height-xs: 1rem !default; // Line height for xsmall body text + +$tokens: ( + 'eds': ( + 'color': ( + 'neutral': ( + '100': $eds-color-neutral-100, + '200': $eds-color-neutral-200, + '300': $eds-color-neutral-300, + '400': $eds-color-neutral-400, + '500': $eds-color-neutral-500, + '600': $eds-color-neutral-600, + '700': $eds-color-neutral-700 + ), + 'white': $eds-color-white, + 'black': $eds-color-black, + 'alert': ( + '100': $eds-color-alert-100, + '200': $eds-color-alert-200, + '300': $eds-color-alert-300, + '400': $eds-color-alert-400, + '500': $eds-color-alert-500, + '600': $eds-color-alert-600, + '700': $eds-color-alert-700, + '800': $eds-color-alert-800 + ), + 'success': ( + '100': $eds-color-success-100, + '200': $eds-color-success-200, + '300': $eds-color-success-300, + '400': $eds-color-success-400, + '500': $eds-color-success-500, + '600': $eds-color-success-600, + '700': $eds-color-success-700, + '800': $eds-color-success-800 + ), + 'info': ( + '100': $eds-color-info-100, + '200': $eds-color-info-200, + '300': $eds-color-info-300, + '400': $eds-color-info-400, + '500': $eds-color-info-500, + '600': $eds-color-info-600, + '700': $eds-color-info-700 + ), + 'warning': ( + '100': $eds-color-warning-100, + '200': $eds-color-warning-200, + '300': $eds-color-warning-300, + '400': $eds-color-warning-400, + '500': $eds-color-warning-500, + '600': $eds-color-warning-600, + '700': $eds-color-warning-700, + '800': $eds-color-warning-800 + ), + 'brand': ( + '100': $eds-color-brand-100, + '200': $eds-color-brand-200, + '300': $eds-color-brand-300, + '400': $eds-color-brand-400, + '500': $eds-color-brand-500, + '600': $eds-color-brand-600, + '700': $eds-color-brand-700, + '800': $eds-color-brand-800 + ), + 'yellow': ( + '100': $eds-color-yellow-100, + '500': $eds-color-yellow-500 + ), + 'highlight': ( + '100': $eds-color-highlight-100, + '200': $eds-color-highlight-200, + '300': $eds-color-highlight-300, + '400': $eds-color-highlight-400, + '500': $eds-color-highlight-500, + '600': $eds-color-highlight-600 + ) + ), + 'size': ( + 'font': ( + 'h1': $eds-size-font-h1, + 'h2': $eds-size-font-h2, + 'h3': $eds-size-font-h3, + 'h4': $eds-size-font-h4, + 'h5': $eds-size-font-h5, + 'base': $eds-size-font-base, + 'body': $eds-size-font-body, + 'sm': $eds-size-font-sm, + 'xs': $eds-size-font-xs + ), + 'line-height': ( + 'h1': $eds-size-line-height-h1, + 'h2': $eds-size-line-height-h2, + 'h3': $eds-size-line-height-h3, + 'h4': $eds-size-line-height-h4, + 'h5': $eds-size-line-height-h5, + 'body': $eds-size-line-height-body, + 'sm': $eds-size-line-height-sm, + 'xs': $eds-size-line-height-xs + ) + ) + ), + 'legacy': ( + 'color': ( + 'gray': ( + '50': $legacy-color-gray-50, + '100': $legacy-color-gray-100, + '200': $legacy-color-gray-200, + '300': $legacy-color-gray-300, + '500': $legacy-color-gray-500, + '700': $legacy-color-gray-700, + '1000': $legacy-color-gray-1000 + ), + 'black': $legacy-color-black, + 'red': ( + '100': $legacy-color-red-100, + '200': $legacy-color-red-200 + ), + 'green': ( + '100': $legacy-color-green-100, + '200': $legacy-color-green-200, + '300': $legacy-color-green-300 + ), + 'yellow': ( + '200': $legacy-color-yellow-200, + '300': $legacy-color-yellow-300, + '400': $legacy-color-yellow-400 + ), + 'purple': ( + '200': $legacy-color-purple-200, + '300': $legacy-color-purple-300, + '400': $legacy-color-purple-400 + ) + ), + 'size': ( + 'font': ( + 'h1': $legacy-size-font-h1, + 'h2': $legacy-size-font-h2, + 'base': $legacy-size-font-base, + 'body': $legacy-size-font-body, + 'sm': $legacy-size-font-sm, + 'xs': $legacy-size-font-xs + ), + 'line-height': ( + 'h1': $legacy-size-line-height-h1, + 'body': $legacy-size-line-height-body, + 'sm': $legacy-size-line-height-sm, + 'xs': $legacy-size-line-height-xs + ) + ) + ) +); diff --git a/lib/tokens/ts/colors.ts b/lib/tokens/ts/colors.ts new file mode 100644 index 000000000..b804bf87c --- /dev/null +++ b/lib/tokens/ts/colors.ts @@ -0,0 +1,75 @@ +export const EdsColorNeutral100 = "#F3F3F3"; +export const EdsColorNeutral200 = "#E8E8E9"; +export const EdsColorNeutral300 = "#CAD1D8"; +export const EdsColorNeutral400 = "#838C95"; +export const EdsColorNeutral500 = "#58636F"; +export const EdsColorNeutral600 = "#3C444C"; +export const EdsColorNeutral700 = "#21272D"; +export const EdsColorWhite = "#FFFFFF"; +export const EdsColorBlack = "#21272D"; +export const EdsColorAlert100 = "#FFEBF0"; +export const EdsColorAlert200 = "#FFCCD8"; +export const EdsColorAlert300 = "#FB90B0"; +export const EdsColorAlert400 = "#F76C96"; +export const EdsColorAlert500 = "#F1497C"; +export const EdsColorAlert600 = "#D41E52"; +export const EdsColorAlert700 = "#BD0044"; +export const EdsColorAlert800 = "#8F0134"; +export const EdsColorSuccess100 = "#ECFFF5"; +export const EdsColorSuccess200 = "#B7E9CE"; +export const EdsColorSuccess300 = "#8FDCB3"; +export const EdsColorSuccess400 = "#59C88C"; +export const EdsColorSuccess500 = "#00A66A"; +export const EdsColorSuccess600 = "#008756"; +export const EdsColorSuccess700 = "#007349"; +export const EdsColorSuccess800 = "#005939"; +export const EdsColorInfo100 = "#F1F9FF"; +export const EdsColorInfo200 = "#B0D5FF"; +export const EdsColorInfo300 = "#7FB9FD"; +export const EdsColorInfo400 = "#5CA7FF"; +export const EdsColorInfo500 = "#328EFB"; +export const EdsColorInfo600 = "#1977CD"; +export const EdsColorInfo700 = "#0563B8"; +export const EdsColorWarning100 = "#FFF1E9"; +export const EdsColorWarning200 = "#FFCBA6"; +export const EdsColorWarning300 = "#FFB077"; +export const EdsColorWarning400 = "#F6924A"; +export const EdsColorWarning500 = "#E06C00"; +export const EdsColorWarning600 = "#C64600"; +export const EdsColorWarning700 = "#AC3400"; +export const EdsColorWarning800 = "#852800"; +export const EdsColorBrand100 = "#F7F1FF"; +export const EdsColorBrand200 = "#C3C0FE"; +export const EdsColorBrand300 = "#A7A2FE"; +export const EdsColorBrand400 = "#928CFF"; +export const EdsColorBrand500 = "#766FFD"; +export const EdsColorBrand600 = "#574EFF"; +export const EdsColorBrand700 = "#433BDE"; +export const EdsColorBrand800 = "#312B9E"; +export const EdsColorYellow100 = "#FDF1D0"; +export const EdsColorYellow500 = "#F79D2D"; +export const EdsColorHighlight100 = "#FF9FEC"; +export const EdsColorHighlight200 = "#FFBEAA"; +export const EdsColorHighlight300 = "#FCFF00"; +export const EdsColorHighlight400 = "#9DFFA4"; +export const EdsColorHighlight500 = "#00F1FF"; +export const EdsColorHighlight600 = "#CFC9FF"; +export const LegacyColorGray50 = "#F8F9FC"; +export const LegacyColorGray100 = "#EBEBEC"; +export const LegacyColorGray200 = "#D8D8D9"; +export const LegacyColorGray300 = "#C5C5C6"; +export const LegacyColorGray500 = "#9F9FA0"; +export const LegacyColorGray700 = "#78797A"; +export const LegacyColorGray1000 = "#3F4041"; +export const LegacyColorBlack = "#2C2D2E"; +export const LegacyColorRed100 = "#F7DDDD"; +export const LegacyColorRed200 = "#F25252"; +export const LegacyColorGreen100 = "#E1F0E7"; +export const LegacyColorGreen200 = "#6CC188"; +export const LegacyColorGreen300 = "#457B57"; +export const LegacyColorYellow200 = "#FFC55B"; +export const LegacyColorYellow300 = "#A46900"; +export const LegacyColorYellow400 = "#644C1F"; +export const LegacyColorPurple200 = "#7686D3"; +export const LegacyColorPurple300 = "#5761BA"; +export const LegacyColorPurple400 = "#32417C"; diff --git a/package.json b/package.json index a318667b8..745ef3ceb 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "generateFlowTypes": "./packages/components/generateFlowTypes.sh", "lint": "yarn run lint:styles && yarn run lint:scripts", "lint:fix": "yarn run lint:styles:fix && yarn run lint:scripts:fix", - "lint:styles": "stylelint --ignore-path .gitignore packages/**/*.css", + "lint:styles": "stylelint --ignore-path .gitignore src/**/*.css", "lint:styles:fix": "yarn run lint:styles --fix", "lint:scripts": "eslint --ignore-path .gitignore --ext=js,jsx,ts,tsx .", "lint:scripts:fix": "yarn run lint:scripts --fix", diff --git a/src/tokens/color/font.json b/src/tokens/color/font.json deleted file mode 100644 index 6afa3a719..000000000 --- a/src/tokens/color/font.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "eds": { - "color": { - "font": { - "base": { - "value": "{eds.color.black.value}", - "comment": "Color for all standard typography in a light background" - }, - "link": { - "value": "{eds.color.brand.700.value}", - "comment": "Color for all standard links" - } - } - } - } -} diff --git a/src/tokens/color/base.json b/src/tokens/colors.json similarity index 100% rename from src/tokens/color/base.json rename to src/tokens/colors.json diff --git a/src/tokens/size/font.json b/src/tokens/typography.json similarity index 100% rename from src/tokens/size/font.json rename to src/tokens/typography.json diff --git a/style-dictionary.config.js b/style-dictionary.config.js index 35ecd6eb9..69afb3fee 100644 --- a/style-dictionary.config.js +++ b/style-dictionary.config.js @@ -1,10 +1,10 @@ const StyleDictionary = require("style-dictionary"); const EDSStyleDictionary = StyleDictionary.extend({ - source: ["properties/**/*.json"], + source: ["src/tokens/**/*.json"], platforms: { scss: { transforms: [...StyleDictionary.transformGroup.scss, "name/cti/kebab"], - buildPath: "lib/", + buildPath: "lib/tokens/", files: [ { format: "scss/map-deep", @@ -17,7 +17,7 @@ const EDSStyleDictionary = StyleDictionary.extend({ }, css: { transforms: [...StyleDictionary.transformGroup.css, "name/cti/kebab"], - buildPath: "lib/", + buildPath: "lib/tokens/", files: [ { format: "css/variables", @@ -37,7 +37,7 @@ const EDSStyleDictionary = StyleDictionary.extend({ }, js: { transformGroup: "js", - buildPath: "lib/", + buildPath: "lib/tokens/", files: [ { format: "javascript/es6", @@ -55,7 +55,7 @@ const EDSStyleDictionary = StyleDictionary.extend({ }, json: { transformGroup: "js", - buildPath: "lib/", + buildPath: "lib/tokens/", files: [ { format: "json/flat", @@ -76,7 +76,7 @@ const EDSStyleDictionary = StyleDictionary.extend({ }, }); -// copied from https://github.com/amzn/style-dictionary/blob/v3.0.0-rc.1/lib/common/formats.js#L96 +// copied from https://github.com/amzn/style-dictionary/blob/v3.0.0-rc.1/lib/tokens/common/formats.js#L96 function minifyCSSVarDictionary(obj) { if (typeof obj !== "object" || Array.isArray(obj)) { return obj;