From 378a390385494a651d0776f038a880feb16cb944 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 18 Sep 2024 02:14:48 +0000 Subject: [PATCH 1/6] chore(deps-dev): bump vite from 4.5.3 to 4.5.5 in /react (#759) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.3 to 4.5.5. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.5.5/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.5.5/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- react/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react/package-lock.json b/react/package-lock.json index 78713715..8bd9fdb5 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -17386,9 +17386,9 @@ } }, "node_modules/vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -30522,9 +30522,9 @@ } }, "vite": { - "version": "4.5.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz", - "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", + "version": "4.5.5", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.5.tgz", + "integrity": "sha512-ifW3Lb2sMdX+WU91s3R0FyQlAyLxOzCSCP37ujw0+r5POeHPwe6udWVIElKQq8gk3t7b8rkmvqC6IHBpCff4GQ==", "dev": true, "requires": { "esbuild": "^0.18.10", From b95107b48ff34482b06976f9ed68bc43bc0d267d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 26 Sep 2024 18:49:11 +0000 Subject: [PATCH 2/6] fix(deps): bump rollup from 3.29.4 to 3.29.5 in /react (#764) Bumps [rollup](https://github.com/rollup/rollup) from 3.29.4 to 3.29.5. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v3.29.4...v3.29.5) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- react/package-lock.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/react/package-lock.json b/react/package-lock.json index 8bd9fdb5..c20ea7e5 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -15737,9 +15737,9 @@ } }, "node_modules/rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "bin": { "rollup": "dist/bin/rollup" @@ -29298,9 +29298,9 @@ } }, "rollup": { - "version": "3.29.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz", - "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==", + "version": "3.29.5", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz", + "integrity": "sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==", "dev": true, "requires": { "fsevents": "~2.3.2" From 15e912177fe31707ccaaa06c888d766d811f1ece Mon Sep 17 00:00:00 2001 From: christabelneo Date: Tue, 8 Oct 2024 13:43:54 +0800 Subject: [PATCH 3/6] feat: add Armoury theme (#768) --- token-gen/themes/Armoury/colors.ts | 282 +++++++++++++++++++++++++ token-gen/themes/Armoury/shadows.ts | 9 + token-gen/themes/Armoury/spacing.ts | 21 ++ token-gen/themes/Armoury/textStyles.ts | 223 +++++++++++++++++++ token-gen/themes/Armoury/typography.ts | 65 ++++++ 5 files changed, 600 insertions(+) create mode 100644 token-gen/themes/Armoury/colors.ts create mode 100644 token-gen/themes/Armoury/shadows.ts create mode 100644 token-gen/themes/Armoury/spacing.ts create mode 100644 token-gen/themes/Armoury/textStyles.ts create mode 100644 token-gen/themes/Armoury/typography.ts diff --git a/token-gen/themes/Armoury/colors.ts b/token-gen/themes/Armoury/colors.ts new file mode 100644 index 00000000..b503b1f8 --- /dev/null +++ b/token-gen/themes/Armoury/colors.ts @@ -0,0 +1,282 @@ +/** + * Do not edit directly + * Generated on Thu, 26 Sep 2024 07:58:06 GMT + */ + +export const colors = { + base: { + canvas: { + default: '#ffffff', + alt: '#f8f9f9', + backdrop: '#ededed', + 'brand-subtle': '#f7fafe', + inverse: '#3a3e46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2c2e34', + medium: '#666c7a', + brand: '#0071eb', + inverse: '#ffffff', + }, + divider: { + subtle: '#f8f9f9', + medium: '#ededed', + strong: '#bfc2c8', + inverse: '#ffffff', + brand: '#0071eb', + }, + }, + interaction: { + support: { + disabled: '#ededed', + 'disabled-content': '#a0a4ad', + placeholder: '#838894', + unselected: '#a0a4ad', + selected: '#666c7a', + 'unselected-strong': '#666c7a', + }, + links: { + default: '#0071eb', + hover: '#0651e2', + 'neutral-default': '#454953', + 'neutral-hover': '#2c2e34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#ededed', + }, + main: { + default: '#0071eb', + hover: '#0651e2', + active: '#0040dd', + }, + 'main-subtle': { + default: '#e7f2fc', + hover: '#bbd6ff', + active: '#409cff', + }, + sub: { + default: '#5d6785', + hover: '#465173', + active: '#3c4764', + }, + 'sub-subtle': { + default: '#e9eaee', + hover: '#babecb', + active: '#9aa0b3', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#fbe9e9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#ffda68', + hover: '#ffc409', + active: '#ffad0d', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#ffda68', + active: '#ffc409', + }, + success: { + default: '#00774e', + hover: '#005f3e', + active: '#005336', + }, + 'success-subtle': { + default: '#d6f0e7', + hover: '#7ccfb3', + active: '#33b488', + }, + neutral: { + default: '#666c7a', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#f8f9f9', + hover: '#ededed', + active: '#bfc2c8', + }, + muted: { + main: { + hover: '#f7fafe', + active: '#e7f2fc', + }, + sub: { + hover: '#f8f9fa', + active: '#e9eaee', + }, + neutral: { + hover: '#f8f9f9', + active: '#ededed', + }, + critical: { + hover: '#fff0f0', + active: '#fbe4e4', + }, + }, + tinted: { + main: { + hover: 'rgba(0, 113, 235, 0.04)', + active: 'rgba(231, 242, 252, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + sub: { + hover: 'rgba(93, 103, 133, 0.04)', + active: 'rgba(93, 103, 133, 0.12)', + }, + }, + }, + utility: { + 'focus-default': '#0071eb', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + feedback: { + info: '#0071eb', + 'info-subtle': '#f7fafe', + warning: '#ffda68', + 'warning-subtle': '#fffae1', + success: '#00774e', + 'success-subtle': '#e6f7f1', + critical: '#c03434', + 'critical-subtle': '#fff0f0', + }, + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + brand: { + primary: { + '50': '#f7fafe', + '100': '#e7f2fc', + '200': '#bbd6ff', + '300': '#409cff', + '400': '#0a84ff', + '500': '#0071eb', + '600': '#0651e2', + '700': '#0040dd', + '800': '#093890', + '900': '#072a69', + }, + secondary: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#f7fafe', + '100': '#e7f2fc', + '200': '#bbd6ff', + '300': '#409cff', + '400': '#0a84ff', + '500': '#0071eb', + '600': '#0651e2', + '700': '#0040dd', + '800': '#00359c', + '900': '#072a69', + }, + red: { + '50': '#fff0f0', + '100': '#fbe4e4', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#e6f7f1', + '100': '#d6f0e7', + '200': '#7ccfb3', + '300': '#33b488', + '400': '#009762', + '500': '#00774e', + '600': '#005f3e', + '700': '#005336', + '800': '#00462e', + '900': '#003523', + }, + yellow: { + '50': '#fffae1', + '100': '#ffda68', + '200': '#ffc409', + '300': '#ffad0d', + '400': '#e39807', + '500': '#8b6005', + '600': '#704c00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#f8f9f9', + '100': '#ededed', + '200': '#bfc2c8', + '300': '#a0a4ad', + '400': '#838894', + '500': '#666c7a', + '600': '#505660', + '700': '#454953', + '800': '#3a3e46', + '900': '#2c2e34', + }, + skin: { + '1base': '#ffcaa4', + '1shadow': '#f5b896', + '2base': '#eba687', + '2shadow': '#e29b7b', + '3base': '#d98f6f', + '3shadow': '#ce8361', + '4base': '#bf7657', + '4shadow': '#af6d53', + '5base': '#9f634f', + '5shadow': '#8b5544', + '6base': '#764738', + '6shadow': '#633d32', + }, +} diff --git a/token-gen/themes/Armoury/shadows.ts b/token-gen/themes/Armoury/shadows.ts new file mode 100644 index 00000000..8222db8c --- /dev/null +++ b/token-gen/themes/Armoury/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Thu, 26 Sep 2024 07:58:06 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/token-gen/themes/Armoury/spacing.ts b/token-gen/themes/Armoury/spacing.ts new file mode 100644 index 00000000..8994ad42 --- /dev/null +++ b/token-gen/themes/Armoury/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Thu, 26 Sep 2024 07:58:06 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/token-gen/themes/Armoury/textStyles.ts b/token-gen/themes/Armoury/textStyles.ts new file mode 100644 index 00000000..71d13b99 --- /dev/null +++ b/token-gen/themes/Armoury/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Thu, 26 Sep 2024 07:58:06 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/token-gen/themes/Armoury/typography.ts b/token-gen/themes/Armoury/typography.ts new file mode 100644 index 00000000..cc47e59e --- /dev/null +++ b/token-gen/themes/Armoury/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Thu, 26 Sep 2024 07:58:06 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} From 46fa4ef13efd52eda3eaca7434b192537622d5a1 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 8 Oct 2024 16:25:01 +0800 Subject: [PATCH 4/6] feat: add script to copy generated themes to storybook theme folder (#769) * feat: add script to copy generated themes to storybook theme folder * feat: regen themes * feat: run generate theme script * feat: update script to also regenerate colorTheme for storybook * lint: remove unused imports * fix: imports are necessary after all --- .../.storybook/colorThemes/Armoury/colors.ts | 282 +++++++++++++ .../.storybook/colorThemes/Armoury/shadows.ts | 9 + .../.storybook/colorThemes/Armoury/spacing.ts | 21 + .../colorThemes/Armoury/textStyles.ts | 223 ++++++++++ react/.storybook/colorThemes/Armoury/theme.ts | 19 + .../colorThemes/Armoury/typography.ts | 65 +++ react/.storybook/colorThemes/AskGov/colors.ts | 2 +- .../.storybook/colorThemes/AskGov/shadows.ts | 2 +- .../.storybook/colorThemes/AskGov/spacing.ts | 2 +- .../colorThemes/AskGov/textStyles.ts | 2 +- .../colorThemes/AskGov/typography.ts | 2 +- .../colorThemes/BETA dark/colors.ts | 2 +- .../colorThemes/BETA dark/shadows.ts | 2 +- .../colorThemes/BETA dark/spacing.ts | 2 +- .../colorThemes/BETA dark/textStyles.ts | 2 +- .../colorThemes/BETA dark/typography.ts | 2 +- react/.storybook/colorThemes/BbBear/colors.ts | 2 +- .../.storybook/colorThemes/BbBear/shadows.ts | 2 +- .../.storybook/colorThemes/BbBear/spacing.ts | 2 +- .../colorThemes/BbBear/textStyles.ts | 2 +- .../colorThemes/BbBear/typography.ts | 2 +- react/.storybook/colorThemes/CalSG/colors.ts | 2 +- react/.storybook/colorThemes/CalSG/shadows.ts | 2 +- react/.storybook/colorThemes/CalSG/spacing.ts | 2 +- .../colorThemes/CalSG/textStyles.ts | 2 +- .../colorThemes/CalSG/typography.ts | 2 +- .../.storybook/colorThemes/Care360/colors.ts | 2 +- .../.storybook/colorThemes/Care360/shadows.ts | 2 +- .../.storybook/colorThemes/Care360/spacing.ts | 2 +- .../colorThemes/Care360/textStyles.ts | 2 +- .../colorThemes/Care360/typography.ts | 2 +- .../.storybook/colorThemes/Careers/colors.ts | 282 +++++++++++++ .../.storybook/colorThemes/Careers/shadows.ts | 9 + .../.storybook/colorThemes/Careers/spacing.ts | 21 + .../colorThemes/Careers/textStyles.ts | 223 ++++++++++ react/.storybook/colorThemes/Careers/theme.ts | 19 + .../colorThemes/Careers/typography.ts | 65 +++ .../colorThemes/Distribute/colors.ts | 2 +- .../colorThemes/Distribute/shadows.ts | 2 +- .../colorThemes/Distribute/spacing.ts | 2 +- .../colorThemes/Distribute/textStyles.ts | 2 +- .../colorThemes/Distribute/typography.ts | 2 +- react/.storybook/colorThemes/ERPX/colors.ts | 226 ++++++++++ react/.storybook/colorThemes/ERPX/shadows.ts | 9 + react/.storybook/colorThemes/ERPX/spacing.ts | 21 + .../.storybook/colorThemes/ERPX/textStyles.ts | 167 ++++++++ react/.storybook/colorThemes/ERPX/theme.ts | 19 + .../.storybook/colorThemes/ERPX/typography.ts | 65 +++ react/.storybook/colorThemes/Engage/colors.ts | 2 +- .../.storybook/colorThemes/Engage/shadows.ts | 2 +- .../.storybook/colorThemes/Engage/spacing.ts | 2 +- .../colorThemes/Engage/textStyles.ts | 2 +- react/.storybook/colorThemes/Engage/theme.ts | 19 + .../colorThemes/Engage/typography.ts | 2 +- react/.storybook/colorThemes/Form/colors.ts | 2 +- react/.storybook/colorThemes/Form/shadows.ts | 2 +- react/.storybook/colorThemes/Form/spacing.ts | 2 +- .../.storybook/colorThemes/Form/textStyles.ts | 2 +- .../.storybook/colorThemes/Form/typography.ts | 2 +- react/.storybook/colorThemes/Govsg/colors.ts | 2 +- react/.storybook/colorThemes/Govsg/shadows.ts | 2 +- react/.storybook/colorThemes/Govsg/spacing.ts | 2 +- .../colorThemes/Govsg/textStyles.ts | 2 +- react/.storybook/colorThemes/Govsg/theme.ts | 19 + .../colorThemes/Govsg/typography.ts | 2 +- react/.storybook/colorThemes/Isomer/colors.ts | 2 +- .../.storybook/colorThemes/Isomer/shadows.ts | 2 +- .../.storybook/colorThemes/Isomer/spacing.ts | 2 +- .../colorThemes/Isomer/textStyles.ts | 2 +- .../colorThemes/Isomer/typography.ts | 2 +- .../.storybook/colorThemes/Message/colors.ts | 2 +- .../.storybook/colorThemes/Message/shadows.ts | 2 +- .../.storybook/colorThemes/Message/spacing.ts | 2 +- .../colorThemes/Message/textStyles.ts | 2 +- react/.storybook/colorThemes/Message/theme.ts | 19 + .../colorThemes/Message/typography.ts | 2 +- react/.storybook/colorThemes/Pair/colors.ts | 2 +- react/.storybook/colorThemes/Pair/shadows.ts | 2 +- react/.storybook/colorThemes/Pair/spacing.ts | 2 +- .../.storybook/colorThemes/Pair/textStyles.ts | 2 +- .../.storybook/colorThemes/Pair/typography.ts | 2 +- react/.storybook/colorThemes/PaySG/colors.ts | 2 +- .../colorThemes/Phonebook/colors.ts | 42 +- .../colorThemes/Phonebook/shadows.ts | 2 +- .../colorThemes/Phonebook/spacing.ts | 2 +- .../colorThemes/Phonebook/textStyles.ts | 2 +- .../.storybook/colorThemes/Phonebook/theme.ts | 19 + .../colorThemes/Phonebook/typography.ts | 2 +- .../.storybook/colorThemes/PinPoint/colors.ts | 2 +- .../colorThemes/PinPoint/shadows.ts | 2 +- .../colorThemes/PinPoint/spacing.ts | 2 +- .../colorThemes/PinPoint/textStyles.ts | 2 +- .../colorThemes/PinPoint/typography.ts | 2 +- .../.storybook/colorThemes/Postman/colors.ts | 2 +- .../.storybook/colorThemes/Postman/shadows.ts | 2 +- .../.storybook/colorThemes/Postman/spacing.ts | 2 +- .../colorThemes/Postman/textStyles.ts | 2 +- .../colorThemes/Postman/typography.ts | 2 +- react/.storybook/colorThemes/Redeem/colors.ts | 390 +++++++++--------- .../.storybook/colorThemes/Redeem/shadows.ts | 2 +- .../.storybook/colorThemes/Redeem/spacing.ts | 2 +- .../colorThemes/Redeem/textStyles.ts | 2 +- .../colorThemes/Redeem/typography.ts | 2 +- .../colorThemes/ScamShield/colors.ts | 2 +- .../colorThemes/ScamShield/shadows.ts | 2 +- .../colorThemes/ScamShield/spacing.ts | 2 +- .../colorThemes/ScamShield/textStyles.ts | 2 +- .../colorThemes/ScamShield/typography.ts | 2 +- react/.storybook/colorThemes/TEALS/colors.ts | 294 +++++++++++++ react/.storybook/colorThemes/TEALS/shadows.ts | 9 + react/.storybook/colorThemes/TEALS/spacing.ts | 21 + .../colorThemes/TEALS/textStyles.ts | 223 ++++++++++ react/.storybook/colorThemes/TEALS/theme.ts | 19 + .../colorThemes/TEALS/typography.ts | 65 +++ react/.storybook/colorThemes/Vault/colors.ts | 132 ++++-- react/.storybook/colorThemes/Vault/shadows.ts | 2 +- react/.storybook/colorThemes/Vault/spacing.ts | 2 +- .../colorThemes/Vault/textStyles.ts | 2 +- .../colorThemes/Vault/typography.ts | 2 +- .../.storybook/colorThemes/activesg/colors.ts | 188 ++++----- .../colorThemes/activesg/shadows.ts | 2 +- .../colorThemes/activesg/spacing.ts | 2 +- .../colorThemes/activesg/textStyles.ts | 2 +- .../.storybook/colorThemes/activesg/theme.ts | 19 + .../colorThemes/activesg/typography.ts | 2 +- react/.storybook/colorThemes/byos/colors.ts | 2 +- react/.storybook/colorThemes/byos/shadows.ts | 2 +- react/.storybook/colorThemes/byos/spacing.ts | 2 +- .../.storybook/colorThemes/byos/textStyles.ts | 2 +- .../.storybook/colorThemes/byos/typography.ts | 2 +- .../.storybook/colorThemes/default/colors.ts | 2 +- .../.storybook/colorThemes/default/shadows.ts | 2 +- .../.storybook/colorThemes/default/spacing.ts | 2 +- .../colorThemes/default/textStyles.ts | 2 +- .../colorThemes/default/typography.ts | 2 +- react/.storybook/colorThemes/folk/colors.ts | 2 +- react/.storybook/colorThemes/folk/shadows.ts | 2 +- react/.storybook/colorThemes/folk/spacing.ts | 2 +- .../.storybook/colorThemes/folk/textStyles.ts | 2 +- .../.storybook/colorThemes/folk/typography.ts | 2 +- react/.storybook/colorThemes/forest/colors.ts | 2 +- .../.storybook/colorThemes/forest/shadows.ts | 2 +- .../.storybook/colorThemes/forest/spacing.ts | 2 +- .../colorThemes/forest/textStyles.ts | 2 +- .../colorThemes/forest/typography.ts | 2 +- react/.storybook/colorThemes/fynder/colors.ts | 294 +++++++++++++ .../.storybook/colorThemes/fynder/shadows.ts | 9 + .../.storybook/colorThemes/fynder/spacing.ts | 21 + .../colorThemes/fynder/textStyles.ts | 223 ++++++++++ react/.storybook/colorThemes/fynder/theme.ts | 19 + .../colorThemes/fynder/typography.ts | 65 +++ react/.storybook/colorThemes/hichew/colors.ts | 2 +- .../.storybook/colorThemes/hichew/shadows.ts | 2 +- .../.storybook/colorThemes/hichew/spacing.ts | 2 +- .../colorThemes/hichew/textStyles.ts | 2 +- .../colorThemes/hichew/typography.ts | 2 +- react/.storybook/colorThemes/index.ts | 90 ++-- react/.storybook/colorThemes/jujube/colors.ts | 2 +- .../.storybook/colorThemes/jujube/shadows.ts | 2 +- .../.storybook/colorThemes/jujube/spacing.ts | 2 +- .../colorThemes/jujube/textStyles.ts | 2 +- .../colorThemes/jujube/typography.ts | 2 +- .../.storybook/colorThemes/lettersg/colors.ts | 2 +- .../colorThemes/lettersg/shadows.ts | 2 +- .../colorThemes/lettersg/spacing.ts | 2 +- .../colorThemes/lettersg/textStyles.ts | 2 +- .../.storybook/colorThemes/lettersg/theme.ts | 19 + .../colorThemes/lettersg/typography.ts | 2 +- react/.storybook/colorThemes/psl/colors.ts | 2 +- react/.storybook/colorThemes/psl/shadows.ts | 2 +- react/.storybook/colorThemes/psl/spacing.ts | 2 +- .../.storybook/colorThemes/psl/textStyles.ts | 2 +- .../.storybook/colorThemes/psl/typography.ts | 2 +- .../colorThemes/sgid-singpass/colors.ts | 2 +- .../colorThemes/sgid-singpass/shadows.ts | 2 +- .../colorThemes/sgid-singpass/spacing.ts | 2 +- .../colorThemes/sgid-singpass/textStyles.ts | 2 +- .../colorThemes/sgid-singpass/theme.ts | 19 + .../colorThemes/sgid-singpass/typography.ts | 2 +- react/.storybook/colorThemes/whale/colors.ts | 2 +- react/.storybook/colorThemes/whale/shadows.ts | 2 +- react/.storybook/colorThemes/whale/spacing.ts | 2 +- .../colorThemes/whale/textStyles.ts | 2 +- .../colorThemes/whale/typography.ts | 2 +- react/src/Menu/Menu.tsx | 10 +- token-gen/scripts/move-to-storybook.js | 73 ++++ token-gen/themes/Armoury/colors.ts | 2 +- token-gen/themes/Armoury/shadows.ts | 2 +- token-gen/themes/Armoury/spacing.ts | 2 +- token-gen/themes/Armoury/textStyles.ts | 2 +- token-gen/themes/Armoury/typography.ts | 2 +- token-gen/themes/AskGov/colors.ts | 2 +- token-gen/themes/AskGov/shadows.ts | 2 +- token-gen/themes/AskGov/spacing.ts | 2 +- token-gen/themes/AskGov/textStyles.ts | 2 +- token-gen/themes/AskGov/typography.ts | 2 +- token-gen/themes/BETA dark/colors.ts | 2 +- token-gen/themes/BETA dark/shadows.ts | 2 +- token-gen/themes/BETA dark/spacing.ts | 2 +- token-gen/themes/BETA dark/textStyles.ts | 2 +- token-gen/themes/BETA dark/typography.ts | 2 +- token-gen/themes/BbBear/colors.ts | 2 +- token-gen/themes/BbBear/shadows.ts | 2 +- token-gen/themes/BbBear/spacing.ts | 2 +- token-gen/themes/BbBear/textStyles.ts | 2 +- token-gen/themes/BbBear/typography.ts | 2 +- token-gen/themes/CalSG/colors.ts | 2 +- token-gen/themes/CalSG/shadows.ts | 2 +- token-gen/themes/CalSG/spacing.ts | 2 +- token-gen/themes/CalSG/textStyles.ts | 2 +- token-gen/themes/CalSG/typography.ts | 2 +- token-gen/themes/Care360/colors.ts | 2 +- token-gen/themes/Care360/shadows.ts | 2 +- token-gen/themes/Care360/spacing.ts | 2 +- token-gen/themes/Care360/textStyles.ts | 2 +- token-gen/themes/Care360/typography.ts | 2 +- token-gen/themes/Careers/colors.ts | 282 +++++++++++++ token-gen/themes/Careers/shadows.ts | 9 + token-gen/themes/Careers/spacing.ts | 21 + token-gen/themes/Careers/textStyles.ts | 223 ++++++++++ token-gen/themes/Careers/typography.ts | 65 +++ token-gen/themes/Distribute/colors.ts | 2 +- token-gen/themes/Distribute/shadows.ts | 2 +- token-gen/themes/Distribute/spacing.ts | 2 +- token-gen/themes/Distribute/textStyles.ts | 2 +- token-gen/themes/Distribute/typography.ts | 2 +- token-gen/themes/ERPX/colors.ts | 226 ++++++++++ token-gen/themes/ERPX/shadows.ts | 9 + token-gen/themes/ERPX/spacing.ts | 21 + token-gen/themes/ERPX/textStyles.ts | 167 ++++++++ token-gen/themes/ERPX/typography.ts | 65 +++ token-gen/themes/Engage/colors.ts | 2 +- token-gen/themes/Engage/shadows.ts | 2 +- token-gen/themes/Engage/spacing.ts | 2 +- token-gen/themes/Engage/textStyles.ts | 2 +- token-gen/themes/Engage/typography.ts | 2 +- token-gen/themes/Form/colors.ts | 2 +- token-gen/themes/Form/shadows.ts | 2 +- token-gen/themes/Form/spacing.ts | 2 +- token-gen/themes/Form/textStyles.ts | 2 +- token-gen/themes/Form/typography.ts | 2 +- token-gen/themes/Govsg/colors.ts | 2 +- token-gen/themes/Govsg/shadows.ts | 2 +- token-gen/themes/Govsg/spacing.ts | 2 +- token-gen/themes/Govsg/textStyles.ts | 2 +- token-gen/themes/Govsg/typography.ts | 2 +- token-gen/themes/Isomer/colors.ts | 2 +- token-gen/themes/Isomer/shadows.ts | 2 +- token-gen/themes/Isomer/spacing.ts | 2 +- token-gen/themes/Isomer/textStyles.ts | 2 +- token-gen/themes/Isomer/typography.ts | 2 +- token-gen/themes/Message/colors.ts | 2 +- token-gen/themes/Message/shadows.ts | 2 +- token-gen/themes/Message/spacing.ts | 2 +- token-gen/themes/Message/textStyles.ts | 2 +- token-gen/themes/Message/typography.ts | 2 +- token-gen/themes/Pair/colors.ts | 2 +- token-gen/themes/Pair/shadows.ts | 2 +- token-gen/themes/Pair/spacing.ts | 2 +- token-gen/themes/Pair/textStyles.ts | 2 +- token-gen/themes/Pair/typography.ts | 2 +- token-gen/themes/PaySG/colors.ts | 2 +- token-gen/themes/Phonebook/colors.ts | 42 +- token-gen/themes/Phonebook/shadows.ts | 2 +- token-gen/themes/Phonebook/spacing.ts | 2 +- token-gen/themes/Phonebook/textStyles.ts | 2 +- token-gen/themes/Phonebook/typography.ts | 2 +- token-gen/themes/PinPoint/colors.ts | 2 +- token-gen/themes/PinPoint/shadows.ts | 2 +- token-gen/themes/PinPoint/spacing.ts | 2 +- token-gen/themes/PinPoint/textStyles.ts | 2 +- token-gen/themes/PinPoint/typography.ts | 2 +- token-gen/themes/Postman/colors.ts | 2 +- token-gen/themes/Postman/shadows.ts | 2 +- token-gen/themes/Postman/spacing.ts | 2 +- token-gen/themes/Postman/textStyles.ts | 2 +- token-gen/themes/Postman/typography.ts | 2 +- token-gen/themes/Redeem/colors.ts | 390 +++++++++--------- token-gen/themes/Redeem/shadows.ts | 2 +- token-gen/themes/Redeem/spacing.ts | 2 +- token-gen/themes/Redeem/textStyles.ts | 2 +- token-gen/themes/Redeem/typography.ts | 2 +- token-gen/themes/ScamShield/colors.ts | 2 +- token-gen/themes/ScamShield/shadows.ts | 2 +- token-gen/themes/ScamShield/spacing.ts | 2 +- token-gen/themes/ScamShield/textStyles.ts | 2 +- token-gen/themes/ScamShield/typography.ts | 2 +- token-gen/themes/TEALS/colors.ts | 294 +++++++++++++ token-gen/themes/TEALS/shadows.ts | 9 + token-gen/themes/TEALS/spacing.ts | 21 + token-gen/themes/TEALS/textStyles.ts | 223 ++++++++++ token-gen/themes/TEALS/typography.ts | 65 +++ token-gen/themes/Vault/colors.ts | 132 ++++-- token-gen/themes/Vault/shadows.ts | 2 +- token-gen/themes/Vault/spacing.ts | 2 +- token-gen/themes/Vault/textStyles.ts | 2 +- token-gen/themes/Vault/typography.ts | 2 +- token-gen/themes/activesg/colors.ts | 188 ++++----- token-gen/themes/activesg/shadows.ts | 2 +- token-gen/themes/activesg/spacing.ts | 2 +- token-gen/themes/activesg/textStyles.ts | 2 +- token-gen/themes/activesg/typography.ts | 2 +- token-gen/themes/byos/colors.ts | 2 +- token-gen/themes/byos/shadows.ts | 2 +- token-gen/themes/byos/spacing.ts | 2 +- token-gen/themes/byos/textStyles.ts | 2 +- token-gen/themes/byos/typography.ts | 2 +- token-gen/themes/default/colors.ts | 2 +- token-gen/themes/default/shadows.ts | 2 +- token-gen/themes/default/spacing.ts | 2 +- token-gen/themes/default/textStyles.ts | 2 +- token-gen/themes/default/typography.ts | 2 +- token-gen/themes/folk/colors.ts | 2 +- token-gen/themes/folk/shadows.ts | 2 +- token-gen/themes/folk/spacing.ts | 2 +- token-gen/themes/folk/textStyles.ts | 2 +- token-gen/themes/folk/typography.ts | 2 +- token-gen/themes/forest/colors.ts | 2 +- token-gen/themes/forest/shadows.ts | 2 +- token-gen/themes/forest/spacing.ts | 2 +- token-gen/themes/forest/textStyles.ts | 2 +- token-gen/themes/forest/typography.ts | 2 +- token-gen/themes/fynder/colors.ts | 294 +++++++++++++ token-gen/themes/fynder/shadows.ts | 9 + token-gen/themes/fynder/spacing.ts | 21 + token-gen/themes/fynder/textStyles.ts | 223 ++++++++++ token-gen/themes/fynder/typography.ts | 65 +++ token-gen/themes/hichew/colors.ts | 2 +- token-gen/themes/hichew/shadows.ts | 2 +- token-gen/themes/hichew/spacing.ts | 2 +- token-gen/themes/hichew/textStyles.ts | 2 +- token-gen/themes/hichew/typography.ts | 2 +- token-gen/themes/jujube/colors.ts | 2 +- token-gen/themes/jujube/shadows.ts | 2 +- token-gen/themes/jujube/spacing.ts | 2 +- token-gen/themes/jujube/textStyles.ts | 2 +- token-gen/themes/jujube/typography.ts | 2 +- token-gen/themes/lettersg/colors.ts | 2 +- token-gen/themes/lettersg/shadows.ts | 2 +- token-gen/themes/lettersg/spacing.ts | 2 +- token-gen/themes/lettersg/textStyles.ts | 2 +- token-gen/themes/lettersg/typography.ts | 2 +- token-gen/themes/psl/colors.ts | 2 +- token-gen/themes/psl/shadows.ts | 2 +- token-gen/themes/psl/spacing.ts | 2 +- token-gen/themes/psl/textStyles.ts | 2 +- token-gen/themes/psl/typography.ts | 2 +- token-gen/themes/sgid-singpass/colors.ts | 2 +- token-gen/themes/sgid-singpass/shadows.ts | 2 +- token-gen/themes/sgid-singpass/spacing.ts | 2 +- token-gen/themes/sgid-singpass/textStyles.ts | 2 +- token-gen/themes/sgid-singpass/typography.ts | 2 +- token-gen/themes/whale/colors.ts | 2 +- token-gen/themes/whale/shadows.ts | 2 +- token-gen/themes/whale/spacing.ts | 2 +- token-gen/themes/whale/textStyles.ts | 2 +- token-gen/themes/whale/typography.ts | 2 +- token-gen/tokens | 2 +- 358 files changed, 6717 insertions(+), 992 deletions(-) create mode 100644 react/.storybook/colorThemes/Armoury/colors.ts create mode 100644 react/.storybook/colorThemes/Armoury/shadows.ts create mode 100644 react/.storybook/colorThemes/Armoury/spacing.ts create mode 100644 react/.storybook/colorThemes/Armoury/textStyles.ts create mode 100644 react/.storybook/colorThemes/Armoury/theme.ts create mode 100644 react/.storybook/colorThemes/Armoury/typography.ts create mode 100644 react/.storybook/colorThemes/Careers/colors.ts create mode 100644 react/.storybook/colorThemes/Careers/shadows.ts create mode 100644 react/.storybook/colorThemes/Careers/spacing.ts create mode 100644 react/.storybook/colorThemes/Careers/textStyles.ts create mode 100644 react/.storybook/colorThemes/Careers/theme.ts create mode 100644 react/.storybook/colorThemes/Careers/typography.ts create mode 100644 react/.storybook/colorThemes/ERPX/colors.ts create mode 100644 react/.storybook/colorThemes/ERPX/shadows.ts create mode 100644 react/.storybook/colorThemes/ERPX/spacing.ts create mode 100644 react/.storybook/colorThemes/ERPX/textStyles.ts create mode 100644 react/.storybook/colorThemes/ERPX/theme.ts create mode 100644 react/.storybook/colorThemes/ERPX/typography.ts create mode 100644 react/.storybook/colorThemes/Engage/theme.ts create mode 100644 react/.storybook/colorThemes/Govsg/theme.ts create mode 100644 react/.storybook/colorThemes/Message/theme.ts create mode 100644 react/.storybook/colorThemes/Phonebook/theme.ts create mode 100644 react/.storybook/colorThemes/TEALS/colors.ts create mode 100644 react/.storybook/colorThemes/TEALS/shadows.ts create mode 100644 react/.storybook/colorThemes/TEALS/spacing.ts create mode 100644 react/.storybook/colorThemes/TEALS/textStyles.ts create mode 100644 react/.storybook/colorThemes/TEALS/theme.ts create mode 100644 react/.storybook/colorThemes/TEALS/typography.ts create mode 100644 react/.storybook/colorThemes/activesg/theme.ts create mode 100644 react/.storybook/colorThemes/fynder/colors.ts create mode 100644 react/.storybook/colorThemes/fynder/shadows.ts create mode 100644 react/.storybook/colorThemes/fynder/spacing.ts create mode 100644 react/.storybook/colorThemes/fynder/textStyles.ts create mode 100644 react/.storybook/colorThemes/fynder/theme.ts create mode 100644 react/.storybook/colorThemes/fynder/typography.ts create mode 100644 react/.storybook/colorThemes/lettersg/theme.ts create mode 100644 react/.storybook/colorThemes/sgid-singpass/theme.ts create mode 100644 token-gen/scripts/move-to-storybook.js create mode 100644 token-gen/themes/Careers/colors.ts create mode 100644 token-gen/themes/Careers/shadows.ts create mode 100644 token-gen/themes/Careers/spacing.ts create mode 100644 token-gen/themes/Careers/textStyles.ts create mode 100644 token-gen/themes/Careers/typography.ts create mode 100644 token-gen/themes/ERPX/colors.ts create mode 100644 token-gen/themes/ERPX/shadows.ts create mode 100644 token-gen/themes/ERPX/spacing.ts create mode 100644 token-gen/themes/ERPX/textStyles.ts create mode 100644 token-gen/themes/ERPX/typography.ts create mode 100644 token-gen/themes/TEALS/colors.ts create mode 100644 token-gen/themes/TEALS/shadows.ts create mode 100644 token-gen/themes/TEALS/spacing.ts create mode 100644 token-gen/themes/TEALS/textStyles.ts create mode 100644 token-gen/themes/TEALS/typography.ts create mode 100644 token-gen/themes/fynder/colors.ts create mode 100644 token-gen/themes/fynder/shadows.ts create mode 100644 token-gen/themes/fynder/spacing.ts create mode 100644 token-gen/themes/fynder/textStyles.ts create mode 100644 token-gen/themes/fynder/typography.ts diff --git a/react/.storybook/colorThemes/Armoury/colors.ts b/react/.storybook/colorThemes/Armoury/colors.ts new file mode 100644 index 00000000..cf69a5cc --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/colors.ts @@ -0,0 +1,282 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + base: { + canvas: { + default: '#ffffff', + alt: '#f8f9f9', + backdrop: '#ededed', + 'brand-subtle': '#f7fafe', + inverse: '#3a3e46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2c2e34', + medium: '#666c7a', + brand: '#0071eb', + inverse: '#ffffff', + }, + divider: { + subtle: '#f8f9f9', + medium: '#ededed', + strong: '#bfc2c8', + inverse: '#ffffff', + brand: '#0071eb', + }, + }, + interaction: { + support: { + disabled: '#ededed', + 'disabled-content': '#a0a4ad', + placeholder: '#838894', + unselected: '#a0a4ad', + selected: '#666c7a', + 'unselected-strong': '#666c7a', + }, + links: { + default: '#0071eb', + hover: '#0651e2', + 'neutral-default': '#454953', + 'neutral-hover': '#2c2e34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#ededed', + }, + main: { + default: '#0071eb', + hover: '#0651e2', + active: '#0040dd', + }, + 'main-subtle': { + default: '#e7f2fc', + hover: '#bbd6ff', + active: '#409cff', + }, + sub: { + default: '#5d6785', + hover: '#465173', + active: '#3c4764', + }, + 'sub-subtle': { + default: '#e9eaee', + hover: '#babecb', + active: '#9aa0b3', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#fbe9e9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#ffda68', + hover: '#ffc409', + active: '#ffad0d', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#ffda68', + active: '#ffc409', + }, + success: { + default: '#00774e', + hover: '#005f3e', + active: '#005336', + }, + 'success-subtle': { + default: '#d6f0e7', + hover: '#7ccfb3', + active: '#33b488', + }, + neutral: { + default: '#666c7a', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#f8f9f9', + hover: '#ededed', + active: '#bfc2c8', + }, + muted: { + main: { + hover: '#f7fafe', + active: '#e7f2fc', + }, + sub: { + hover: '#f8f9fa', + active: '#e9eaee', + }, + neutral: { + hover: '#f8f9f9', + active: '#ededed', + }, + critical: { + hover: '#fff0f0', + active: '#fbe4e4', + }, + }, + tinted: { + main: { + hover: 'rgba(0, 113, 235, 0.04)', + active: 'rgba(231, 242, 252, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + sub: { + hover: 'rgba(93, 103, 133, 0.04)', + active: 'rgba(93, 103, 133, 0.12)', + }, + }, + }, + utility: { + 'focus-default': '#0071eb', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + feedback: { + info: '#0071eb', + 'info-subtle': '#f7fafe', + warning: '#ffda68', + 'warning-subtle': '#fffae1', + success: '#00774e', + 'success-subtle': '#e6f7f1', + critical: '#c03434', + 'critical-subtle': '#fff0f0', + }, + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + brand: { + primary: { + '50': '#f7fafe', + '100': '#e7f2fc', + '200': '#bbd6ff', + '300': '#409cff', + '400': '#0a84ff', + '500': '#0071eb', + '600': '#0651e2', + '700': '#0040dd', + '800': '#093890', + '900': '#072a69', + }, + secondary: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#f7fafe', + '100': '#e7f2fc', + '200': '#bbd6ff', + '300': '#409cff', + '400': '#0a84ff', + '500': '#0071eb', + '600': '#0651e2', + '700': '#0040dd', + '800': '#00359c', + '900': '#072a69', + }, + red: { + '50': '#fff0f0', + '100': '#fbe4e4', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#e6f7f1', + '100': '#d6f0e7', + '200': '#7ccfb3', + '300': '#33b488', + '400': '#009762', + '500': '#00774e', + '600': '#005f3e', + '700': '#005336', + '800': '#00462e', + '900': '#003523', + }, + yellow: { + '50': '#fffae1', + '100': '#ffda68', + '200': '#ffc409', + '300': '#ffad0d', + '400': '#e39807', + '500': '#8b6005', + '600': '#704c00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#f8f9f9', + '100': '#ededed', + '200': '#bfc2c8', + '300': '#a0a4ad', + '400': '#838894', + '500': '#666c7a', + '600': '#505660', + '700': '#454953', + '800': '#3a3e46', + '900': '#2c2e34', + }, + skin: { + '1base': '#ffcaa4', + '1shadow': '#f5b896', + '2base': '#eba687', + '2shadow': '#e29b7b', + '3base': '#d98f6f', + '3shadow': '#ce8361', + '4base': '#bf7657', + '4shadow': '#af6d53', + '5base': '#9f634f', + '5shadow': '#8b5544', + '6base': '#764738', + '6shadow': '#633d32', + }, +} diff --git a/react/.storybook/colorThemes/Armoury/shadows.ts b/react/.storybook/colorThemes/Armoury/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/react/.storybook/colorThemes/Armoury/spacing.ts b/react/.storybook/colorThemes/Armoury/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/react/.storybook/colorThemes/Armoury/textStyles.ts b/react/.storybook/colorThemes/Armoury/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/react/.storybook/colorThemes/Armoury/theme.ts b/react/.storybook/colorThemes/Armoury/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Armoury/typography.ts b/react/.storybook/colorThemes/Armoury/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/react/.storybook/colorThemes/Armoury/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/react/.storybook/colorThemes/AskGov/colors.ts b/react/.storybook/colorThemes/AskGov/colors.ts index dd4635ab..46d431f4 100644 --- a/react/.storybook/colorThemes/AskGov/colors.ts +++ b/react/.storybook/colorThemes/AskGov/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/AskGov/shadows.ts b/react/.storybook/colorThemes/AskGov/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/AskGov/shadows.ts +++ b/react/.storybook/colorThemes/AskGov/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/AskGov/spacing.ts b/react/.storybook/colorThemes/AskGov/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/AskGov/spacing.ts +++ b/react/.storybook/colorThemes/AskGov/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/AskGov/textStyles.ts b/react/.storybook/colorThemes/AskGov/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/AskGov/textStyles.ts +++ b/react/.storybook/colorThemes/AskGov/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/AskGov/typography.ts b/react/.storybook/colorThemes/AskGov/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/AskGov/typography.ts +++ b/react/.storybook/colorThemes/AskGov/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/BETA dark/colors.ts b/react/.storybook/colorThemes/BETA dark/colors.ts index 960c0e86..0111ed49 100644 --- a/react/.storybook/colorThemes/BETA dark/colors.ts +++ b/react/.storybook/colorThemes/BETA dark/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/BETA dark/shadows.ts b/react/.storybook/colorThemes/BETA dark/shadows.ts index 3993838f..a00528fb 100644 --- a/react/.storybook/colorThemes/BETA dark/shadows.ts +++ b/react/.storybook/colorThemes/BETA dark/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/BETA dark/spacing.ts b/react/.storybook/colorThemes/BETA dark/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/BETA dark/spacing.ts +++ b/react/.storybook/colorThemes/BETA dark/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/BETA dark/textStyles.ts b/react/.storybook/colorThemes/BETA dark/textStyles.ts index fb9ea718..400b3e45 100644 --- a/react/.storybook/colorThemes/BETA dark/textStyles.ts +++ b/react/.storybook/colorThemes/BETA dark/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/BETA dark/typography.ts b/react/.storybook/colorThemes/BETA dark/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/BETA dark/typography.ts +++ b/react/.storybook/colorThemes/BETA dark/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/BbBear/colors.ts b/react/.storybook/colorThemes/BbBear/colors.ts index 9faa3e8b..87266a61 100644 --- a/react/.storybook/colorThemes/BbBear/colors.ts +++ b/react/.storybook/colorThemes/BbBear/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/BbBear/shadows.ts b/react/.storybook/colorThemes/BbBear/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/BbBear/shadows.ts +++ b/react/.storybook/colorThemes/BbBear/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/BbBear/spacing.ts b/react/.storybook/colorThemes/BbBear/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/BbBear/spacing.ts +++ b/react/.storybook/colorThemes/BbBear/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/BbBear/textStyles.ts b/react/.storybook/colorThemes/BbBear/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/BbBear/textStyles.ts +++ b/react/.storybook/colorThemes/BbBear/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/BbBear/typography.ts b/react/.storybook/colorThemes/BbBear/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/BbBear/typography.ts +++ b/react/.storybook/colorThemes/BbBear/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/CalSG/colors.ts b/react/.storybook/colorThemes/CalSG/colors.ts index 59c0f4ad..dbbbe118 100644 --- a/react/.storybook/colorThemes/CalSG/colors.ts +++ b/react/.storybook/colorThemes/CalSG/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/CalSG/shadows.ts b/react/.storybook/colorThemes/CalSG/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/CalSG/shadows.ts +++ b/react/.storybook/colorThemes/CalSG/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/CalSG/spacing.ts b/react/.storybook/colorThemes/CalSG/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/CalSG/spacing.ts +++ b/react/.storybook/colorThemes/CalSG/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/CalSG/textStyles.ts b/react/.storybook/colorThemes/CalSG/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/CalSG/textStyles.ts +++ b/react/.storybook/colorThemes/CalSG/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/CalSG/typography.ts b/react/.storybook/colorThemes/CalSG/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/CalSG/typography.ts +++ b/react/.storybook/colorThemes/CalSG/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Care360/colors.ts b/react/.storybook/colorThemes/Care360/colors.ts index 56dfc87c..59b23097 100644 --- a/react/.storybook/colorThemes/Care360/colors.ts +++ b/react/.storybook/colorThemes/Care360/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Care360/shadows.ts b/react/.storybook/colorThemes/Care360/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Care360/shadows.ts +++ b/react/.storybook/colorThemes/Care360/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Care360/spacing.ts b/react/.storybook/colorThemes/Care360/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Care360/spacing.ts +++ b/react/.storybook/colorThemes/Care360/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Care360/textStyles.ts b/react/.storybook/colorThemes/Care360/textStyles.ts index d9f15f4c..a5a922ca 100644 --- a/react/.storybook/colorThemes/Care360/textStyles.ts +++ b/react/.storybook/colorThemes/Care360/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Care360/typography.ts b/react/.storybook/colorThemes/Care360/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Care360/typography.ts +++ b/react/.storybook/colorThemes/Care360/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Careers/colors.ts b/react/.storybook/colorThemes/Careers/colors.ts new file mode 100644 index 00000000..cfc8afcd --- /dev/null +++ b/react/.storybook/colorThemes/Careers/colors.ts @@ -0,0 +1,282 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + green: { + '50': '#F6FBFB', + '100': '#EAF6F6', + '200': '#80CBCB', + '300': '#3EB0B0', + '400': '#069999', + '500': '#057474', + '600': '#045C5C', + '700': '#035050', + '800': '#034545', + '900': '#023434', + }, + blue: { + '50': '#F7F9FC', + '100': '#EAEEF7', + '200': '#AFBEE2', + '300': '#8AA0D4', + '400': '#6582C7', + '500': '#4064BA', + '600': '#224CAE', + '700': '#1640A0', + '800': '#133689', + '900': '#0F2968', + }, + brand: { + primary: { + '50': '#F6FBFB', + '100': '#EAF6F6', + '200': '#80CBCB', + '300': '#3EB0B0', + '400': '#069999', + '500': '#057474', + '600': '#045C5C', + '700': '#035050', + '800': '#034545', + '900': '#023434', + }, + secondary: { + '50': '#F7F9FC', + '100': '#EAEEF7', + '200': '#AFBEE2', + '300': '#8AA0D4', + '400': '#6582C7', + '500': '#4064BA', + '600': '#224CAE', + '700': '#1640A0', + '800': '#133689', + '900': '#0F2968', + }, + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#F6FBFB', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#057474', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#057474', + }, + }, + interaction: { + main: { + default: '#057474', + hover: '#045C5C', + active: '#035050', + }, + 'main-subtle': { + default: '#EAF6F6', + hover: '#80CBCB', + active: '#3EB0B0', + }, + sub: { + default: '#4064BA', + hover: '#224CAE', + active: '#1640A0', + }, + 'sub-subtle': { + default: '#EAEEF7', + hover: '#AFBEE2', + active: '#8AA0D4', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#057474', + hover: '#045C5C', + active: '#035050', + }, + 'success-subtle': { + default: '#EAF6F6', + hover: '#80CBCB', + active: '#3EB0B0', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#F6FBFB', + active: '#EAF6F6', + }, + sub: { + hover: '#F7F9FC', + active: '#EAEEF7', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(5, 116, 116, 0.04)', + active: 'rgba(5, 116, 116, 0.12)', + }, + sub: { + hover: 'rgba(64, 100, 186, 0.04)', + active: 'rgba(64, 100, 186, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#057474', + hover: '#045C5C', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#4064BA', + 'info-subtle': '#F7F9FC', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#057474', + 'success-subtle': '#F6FBFB', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#4064BA', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/react/.storybook/colorThemes/Careers/shadows.ts b/react/.storybook/colorThemes/Careers/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/react/.storybook/colorThemes/Careers/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/react/.storybook/colorThemes/Careers/spacing.ts b/react/.storybook/colorThemes/Careers/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/react/.storybook/colorThemes/Careers/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/react/.storybook/colorThemes/Careers/textStyles.ts b/react/.storybook/colorThemes/Careers/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/react/.storybook/colorThemes/Careers/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/react/.storybook/colorThemes/Careers/theme.ts b/react/.storybook/colorThemes/Careers/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Careers/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Careers/typography.ts b/react/.storybook/colorThemes/Careers/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/react/.storybook/colorThemes/Careers/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/react/.storybook/colorThemes/Distribute/colors.ts b/react/.storybook/colorThemes/Distribute/colors.ts index 130bf9ed..4de8b8d9 100644 --- a/react/.storybook/colorThemes/Distribute/colors.ts +++ b/react/.storybook/colorThemes/Distribute/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Distribute/shadows.ts b/react/.storybook/colorThemes/Distribute/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Distribute/shadows.ts +++ b/react/.storybook/colorThemes/Distribute/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Distribute/spacing.ts b/react/.storybook/colorThemes/Distribute/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Distribute/spacing.ts +++ b/react/.storybook/colorThemes/Distribute/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Distribute/textStyles.ts b/react/.storybook/colorThemes/Distribute/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Distribute/textStyles.ts +++ b/react/.storybook/colorThemes/Distribute/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Distribute/typography.ts b/react/.storybook/colorThemes/Distribute/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Distribute/typography.ts +++ b/react/.storybook/colorThemes/Distribute/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/ERPX/colors.ts b/react/.storybook/colorThemes/ERPX/colors.ts new file mode 100644 index 00000000..7ea57024 --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/colors.ts @@ -0,0 +1,226 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + blue: { + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F9F9F9', + backdrop: '#E9EAEE', + 'brand-subtle': '#F9F9FC', + overlay: 'rgba(61, 61, 61, 0.8)', + }, + content: { + brand: '#6253E8', + inverse: '#ffffff', + }, + divider: { + subtle: '#F9F9F9', + medium: '#E9EAEE', + strong: '#BFBFBF', + inverse: '#ffffff', + brand: '#6253E8', + }, + }, + interaction: { + 'main-subtle': { + default: '#E4e1fb', + hover: '#c7c1f7', + active: '#A89FF2', + }, + 'sub-subtle': { + default: '#E9EAEE', + hover: '#BFBFBF', + active: '#A0A0A0', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#686868', + hover: '#535353', + active: '#474747', + }, + 'neutral-subtle': { + default: '#E9EAEE', + hover: '#BFBFBF', + active: '#A0A0A0', + }, + muted: { + main: { + hover: '#F9F9FC', + active: '#E4e1fb', + }, + sub: { + hover: '#F9F9F9', + active: '#E9EAEE', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F9F9F9', + active: '#E9EAEE', + }, + }, + tinted: { + main: { + hover: 'rgba(98, 83, 232, 0.04)', + active: 'rgba(98, 83, 232, 0.12)', + }, + sub: { + hover: 'rgba(104, 104, 104, 0.04)', + active: 'rgba(104, 104, 104, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A0A0', + selected: '#686868', + 'unselected-strong': '#686868', + disabled: '#E9EAEE', + 'disabled-content': '#A0A0A0', + }, + links: { + default: '#6253E8', + hover: '#4E49A8', + 'neutral-default': '#474747', + 'neutral-hover': '#2E2E2E', + 'inverse-default': '#ffffff', + 'inverse-hover': '#E9EAEE', + }, + }, + utility: { + feedback: { + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/react/.storybook/colorThemes/ERPX/shadows.ts b/react/.storybook/colorThemes/ERPX/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/react/.storybook/colorThemes/ERPX/spacing.ts b/react/.storybook/colorThemes/ERPX/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/react/.storybook/colorThemes/ERPX/textStyles.ts b/react/.storybook/colorThemes/ERPX/textStyles.ts new file mode 100644 index 00000000..83032a5a --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/textStyles.ts @@ -0,0 +1,167 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/react/.storybook/colorThemes/ERPX/theme.ts b/react/.storybook/colorThemes/ERPX/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/ERPX/typography.ts b/react/.storybook/colorThemes/ERPX/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/react/.storybook/colorThemes/ERPX/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/react/.storybook/colorThemes/Engage/colors.ts b/react/.storybook/colorThemes/Engage/colors.ts index d65fb64d..add33bae 100644 --- a/react/.storybook/colorThemes/Engage/colors.ts +++ b/react/.storybook/colorThemes/Engage/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Engage/shadows.ts b/react/.storybook/colorThemes/Engage/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Engage/shadows.ts +++ b/react/.storybook/colorThemes/Engage/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Engage/spacing.ts b/react/.storybook/colorThemes/Engage/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Engage/spacing.ts +++ b/react/.storybook/colorThemes/Engage/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Engage/textStyles.ts b/react/.storybook/colorThemes/Engage/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Engage/textStyles.ts +++ b/react/.storybook/colorThemes/Engage/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Engage/theme.ts b/react/.storybook/colorThemes/Engage/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Engage/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Engage/typography.ts b/react/.storybook/colorThemes/Engage/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Engage/typography.ts +++ b/react/.storybook/colorThemes/Engage/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Form/colors.ts b/react/.storybook/colorThemes/Form/colors.ts index 7968bad0..a08402a0 100644 --- a/react/.storybook/colorThemes/Form/colors.ts +++ b/react/.storybook/colorThemes/Form/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Form/shadows.ts b/react/.storybook/colorThemes/Form/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Form/shadows.ts +++ b/react/.storybook/colorThemes/Form/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Form/spacing.ts b/react/.storybook/colorThemes/Form/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Form/spacing.ts +++ b/react/.storybook/colorThemes/Form/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Form/textStyles.ts b/react/.storybook/colorThemes/Form/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Form/textStyles.ts +++ b/react/.storybook/colorThemes/Form/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Form/typography.ts b/react/.storybook/colorThemes/Form/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Form/typography.ts +++ b/react/.storybook/colorThemes/Form/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Govsg/colors.ts b/react/.storybook/colorThemes/Govsg/colors.ts index 4345d2f3..fc9d1001 100644 --- a/react/.storybook/colorThemes/Govsg/colors.ts +++ b/react/.storybook/colorThemes/Govsg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Govsg/shadows.ts b/react/.storybook/colorThemes/Govsg/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Govsg/shadows.ts +++ b/react/.storybook/colorThemes/Govsg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Govsg/spacing.ts b/react/.storybook/colorThemes/Govsg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Govsg/spacing.ts +++ b/react/.storybook/colorThemes/Govsg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Govsg/textStyles.ts b/react/.storybook/colorThemes/Govsg/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Govsg/textStyles.ts +++ b/react/.storybook/colorThemes/Govsg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Govsg/theme.ts b/react/.storybook/colorThemes/Govsg/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Govsg/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Govsg/typography.ts b/react/.storybook/colorThemes/Govsg/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Govsg/typography.ts +++ b/react/.storybook/colorThemes/Govsg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Isomer/colors.ts b/react/.storybook/colorThemes/Isomer/colors.ts index 9dc6be7b..e0c8d958 100644 --- a/react/.storybook/colorThemes/Isomer/colors.ts +++ b/react/.storybook/colorThemes/Isomer/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Isomer/shadows.ts b/react/.storybook/colorThemes/Isomer/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Isomer/shadows.ts +++ b/react/.storybook/colorThemes/Isomer/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Isomer/spacing.ts b/react/.storybook/colorThemes/Isomer/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Isomer/spacing.ts +++ b/react/.storybook/colorThemes/Isomer/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Isomer/textStyles.ts b/react/.storybook/colorThemes/Isomer/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Isomer/textStyles.ts +++ b/react/.storybook/colorThemes/Isomer/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Isomer/typography.ts b/react/.storybook/colorThemes/Isomer/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Isomer/typography.ts +++ b/react/.storybook/colorThemes/Isomer/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Message/colors.ts b/react/.storybook/colorThemes/Message/colors.ts index d53b7487..24f740ad 100644 --- a/react/.storybook/colorThemes/Message/colors.ts +++ b/react/.storybook/colorThemes/Message/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Message/shadows.ts b/react/.storybook/colorThemes/Message/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Message/shadows.ts +++ b/react/.storybook/colorThemes/Message/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Message/spacing.ts b/react/.storybook/colorThemes/Message/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Message/spacing.ts +++ b/react/.storybook/colorThemes/Message/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Message/textStyles.ts b/react/.storybook/colorThemes/Message/textStyles.ts index 56b59c47..863729c7 100644 --- a/react/.storybook/colorThemes/Message/textStyles.ts +++ b/react/.storybook/colorThemes/Message/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Message/theme.ts b/react/.storybook/colorThemes/Message/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Message/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Message/typography.ts b/react/.storybook/colorThemes/Message/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Message/typography.ts +++ b/react/.storybook/colorThemes/Message/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Pair/colors.ts b/react/.storybook/colorThemes/Pair/colors.ts index 75f2a412..dbe7f3dd 100644 --- a/react/.storybook/colorThemes/Pair/colors.ts +++ b/react/.storybook/colorThemes/Pair/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Pair/shadows.ts b/react/.storybook/colorThemes/Pair/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Pair/shadows.ts +++ b/react/.storybook/colorThemes/Pair/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Pair/spacing.ts b/react/.storybook/colorThemes/Pair/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Pair/spacing.ts +++ b/react/.storybook/colorThemes/Pair/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Pair/textStyles.ts b/react/.storybook/colorThemes/Pair/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Pair/textStyles.ts +++ b/react/.storybook/colorThemes/Pair/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Pair/typography.ts b/react/.storybook/colorThemes/Pair/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Pair/typography.ts +++ b/react/.storybook/colorThemes/Pair/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/PaySG/colors.ts b/react/.storybook/colorThemes/PaySG/colors.ts index caeeb10c..eed0b159 100644 --- a/react/.storybook/colorThemes/PaySG/colors.ts +++ b/react/.storybook/colorThemes/PaySG/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Phonebook/colors.ts b/react/.storybook/colorThemes/Phonebook/colors.ts index e3c9a1be..418edeac 100644 --- a/react/.storybook/colorThemes/Phonebook/colors.ts +++ b/react/.storybook/colorThemes/Phonebook/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -42,16 +42,16 @@ export const colors = { '900': '#193234', }, secondary: { - '50': '#F7FBF7', - '100': '#E3F1DF', - '200': '#B7C2B4', - '300': '#9AA397', - '400': '#7E867C', - '500': '#636A62', - '600': '#50544E', - '700': '#454944', - '800': '#3B3E3A', - '900': '#2C2F2B', + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', }, }, utility: { @@ -185,14 +185,14 @@ export const colors = { active: '#64ABB4', }, sub: { - default: '#636A62', - hover: '#50544E', - active: '#454944', + default: '#1361F0', + hover: '#0D4FCA', + active: '#0B44AC', }, 'sub-subtle': { - default: '#E3F1DF', - hover: '#B7C2B4', - active: '#9AA397', + default: '#E7EFFC', + hover: '#ACC7FA', + active: '#82ABF7', }, critical: { default: '#c03434', @@ -240,8 +240,8 @@ export const colors = { active: '#DCECEE', }, sub: { - hover: '#F7FBF7', - active: '#E3F1DF', + hover: '#F7F9FE', + active: '#E7EFFC', }, critical: { hover: '#fef7f7', @@ -258,8 +258,8 @@ export const colors = { active: 'rgba(58, 112, 118, 0.12)', }, sub: { - hover: 'rgba(99, 106, 98, 0.04)', - active: 'rgba(99, 106, 98, 0.12)', + hover: 'rgba(19, 97, 240, 0.04)', + active: 'rgba(19, 97, 240, 0.12)', }, critical: { hover: 'rgba(192, 52, 52, 0.04)', diff --git a/react/.storybook/colorThemes/Phonebook/shadows.ts b/react/.storybook/colorThemes/Phonebook/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Phonebook/shadows.ts +++ b/react/.storybook/colorThemes/Phonebook/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Phonebook/spacing.ts b/react/.storybook/colorThemes/Phonebook/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Phonebook/spacing.ts +++ b/react/.storybook/colorThemes/Phonebook/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Phonebook/textStyles.ts b/react/.storybook/colorThemes/Phonebook/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Phonebook/textStyles.ts +++ b/react/.storybook/colorThemes/Phonebook/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Phonebook/theme.ts b/react/.storybook/colorThemes/Phonebook/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/Phonebook/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/Phonebook/typography.ts b/react/.storybook/colorThemes/Phonebook/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Phonebook/typography.ts +++ b/react/.storybook/colorThemes/Phonebook/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/PinPoint/colors.ts b/react/.storybook/colorThemes/PinPoint/colors.ts index f2a6f984..0fe01c24 100644 --- a/react/.storybook/colorThemes/PinPoint/colors.ts +++ b/react/.storybook/colorThemes/PinPoint/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/PinPoint/shadows.ts b/react/.storybook/colorThemes/PinPoint/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/PinPoint/shadows.ts +++ b/react/.storybook/colorThemes/PinPoint/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/PinPoint/spacing.ts b/react/.storybook/colorThemes/PinPoint/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/PinPoint/spacing.ts +++ b/react/.storybook/colorThemes/PinPoint/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/PinPoint/textStyles.ts b/react/.storybook/colorThemes/PinPoint/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/PinPoint/textStyles.ts +++ b/react/.storybook/colorThemes/PinPoint/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/PinPoint/typography.ts b/react/.storybook/colorThemes/PinPoint/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/PinPoint/typography.ts +++ b/react/.storybook/colorThemes/PinPoint/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Postman/colors.ts b/react/.storybook/colorThemes/Postman/colors.ts index a3c8da19..e2007005 100644 --- a/react/.storybook/colorThemes/Postman/colors.ts +++ b/react/.storybook/colorThemes/Postman/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/Postman/shadows.ts b/react/.storybook/colorThemes/Postman/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Postman/shadows.ts +++ b/react/.storybook/colorThemes/Postman/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Postman/spacing.ts b/react/.storybook/colorThemes/Postman/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Postman/spacing.ts +++ b/react/.storybook/colorThemes/Postman/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Postman/textStyles.ts b/react/.storybook/colorThemes/Postman/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Postman/textStyles.ts +++ b/react/.storybook/colorThemes/Postman/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Postman/typography.ts b/react/.storybook/colorThemes/Postman/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Postman/typography.ts +++ b/react/.storybook/colorThemes/Postman/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/Redeem/colors.ts b/react/.storybook/colorThemes/Redeem/colors.ts index ae8e11e3..d5d06699 100644 --- a/react/.storybook/colorThemes/Redeem/colors.ts +++ b/react/.storybook/colorThemes/Redeem/colors.ts @@ -1,171 +1,43 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { - purple: { - '50': '#F9F9FC', - '100': '#E8E9F3', - '200': '#BABDDB', - '300': '#999EC9', - '400': '#7A80B9', - '500': '#5B62A8', - '600': '#484E89', - '700': '#3E4477', - '800': '#353A66', - '900': '#282C4C', - }, - brand: { - primary: { - '50': '#F9F9FC', - '100': '#E8E9F3', - '200': '#BABDDB', - '300': '#999EC9', - '400': '#7A80B9', - '500': '#5B62A8', - '600': '#484E89', - '700': '#3E4477', - '800': '#353A66', - '900': '#282C4C', - }, - secondary: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', - }, - }, - blue: { - '50': '#F7F9FE', - '100': '#E7EFFC', - '200': '#ACC7FA', - '300': '#82ABF7', - '400': '#568DF4', - '500': '#1361F0', - '600': '#0D4FCA', - '700': '#0B44AC', - '800': '#093890', - '900': '#072A69', - }, - red: { - '50': '#fef7f7', - '100': '#FBE9E9', - '200': '#f4acac', - '300': '#ee8080', - '400': '#e74f4f', - '500': '#c03434', - '600': '#992a2a', - '700': '#852424', - '800': '#721f1f', - '900': '#571717', - }, - green: { - '50': '#F5FAFA', - '100': '#E2EEED', - '200': '#98CCC7', - '300': '#63B1AA', - '400': '#2D978C', - '500': '#0F796F', - '600': '#0C5F57', - '700': '#0A524B', - '800': '#09463F', - '900': '#073430', - }, - yellow: { - '50': '#fffae1', - '100': '#FFDA68', - '200': '#E2B73E', - '300': '#C4992A', - '400': '#A77C18', - '500': '#8B6005', - '600': '#704C00', - '700': '#624200', - '800': '#533800', - '900': '#3f2b00', - }, - slate: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', - }, - grey: { - '50': '#F8F9F9', - '100': '#EDEDED', - '200': '#BFC2C8', - '300': '#A0A4AD', - '400': '#838894', - '500': '#666C7A', - '600': '#505660', - '700': '#454953', - '800': '#3A3E46', - '900': '#2C2E34', - }, - standard: { - white: '#ffffff', - black: '#000000', - }, - skin: { - '1base': '#FFCAA4', - '1shadow': '#F5B896', - '2base': '#EBA687', - '2shadow': '#E29B7B', - '3base': '#D98F6F', - '3shadow': '#CE8361', - '4base': '#BF7657', - '4shadow': '#AF6D53', - '5base': '#9F634F', - '5shadow': '#8B5544', - '6base': '#764738', - '6shadow': '#633D32', - }, base: { canvas: { default: '#ffffff', - alt: '#F8F9F9', - backdrop: '#EDEDED', - 'brand-subtle': '#F9F9FC', - inverse: '#3A3E46', + alt: '#f6f7fb', + backdrop: '#ededed', + 'brand-subtle': '#f4f5fb', + inverse: '#333c56', overlay: 'rgba(58, 62, 70, 0.8)', }, content: { - default: '#454953', - strong: '#2C2E34', - medium: '#666C7A', - brand: '#5B62A8', + default: '#5d6785', + strong: '#333c56', + medium: '#7b849c', + brand: '#6469d8', inverse: '#ffffff', }, divider: { - subtle: '#F8F9F9', - medium: '#EDEDED', - strong: '#BFC2C8', + subtle: '#f8f9f9', + medium: '#ededed', + strong: '#babecb', inverse: '#ffffff', - brand: '#5B62A8', + brand: '#6469d8', }, }, interaction: { main: { - default: '#5B62A8', - hover: '#484E89', - active: '#3E4477', + default: '#6469d8', + hover: '#4b50be', + active: '#464bb4', }, 'main-subtle': { - default: '#E8E9F3', - hover: '#BABDDB', - active: '#999EC9', + default: '#e8e9f3', + hover: '#b6bae0', + active: '#a0a3e2', }, sub: { default: '#5d6785', @@ -173,7 +45,7 @@ export const colors = { active: '#3c4764', }, 'sub-subtle': { - default: '#e9eaee', + default: '#eaeef1', hover: '#babecb', active: '#9aa0b3', }, @@ -183,66 +55,66 @@ export const colors = { active: '#852424', }, 'critical-subtle': { - default: '#FBE9E9', + default: '#fef7f7', hover: '#f4acac', active: '#ee8080', }, warning: { - default: '#FFDA68', - hover: '#E2B73E', - active: '#C4992A', + default: '#ffda68', + hover: '#e2b73e', + active: '#c4992a', }, 'warning-subtle': { default: '#fffae1', - hover: '#FFDA68', - active: '#E2B73E', + hover: '#ffda68', + active: '#e2b73e', }, success: { - default: '#0F796F', - hover: '#0C5F57', - active: '#0A524B', + default: '#0a857d', + hover: '#0c5f57', + active: '#0a524b', }, 'success-subtle': { - default: '#E2EEED', - hover: '#98CCC7', - active: '#63B1AA', + default: '#d2f8ef', + hover: '#98ccc7', + active: '#63b1aa', }, neutral: { - default: '#666C7A', - hover: '#505660', - active: '#454953', + default: '#465173', + hover: '#3c4764', + active: '#333c56', }, 'neutral-subtle': { - default: '#EDEDED', - hover: '#BFC2C8', - active: '#A0A4AD', + default: '#eaeef1', + hover: '#babecb', + active: '#9aa0b3', }, muted: { main: { - hover: '#F9F9FC', - active: '#E8E9F3', + hover: '#f4f5fb', + active: '#e8e9f3', }, sub: { hover: '#f8f9fa', - active: '#e9eaee', + active: '#f4f5fb', }, critical: { hover: '#fef7f7', - active: '#FBE9E9', + active: '#fbe9e9', }, neutral: { - hover: '#F8F9F9', - active: '#EDEDED', + hover: '#f8f9f9', + active: '#ededed', }, }, tinted: { main: { - hover: 'rgba(91, 98, 168, 0.04)', - active: 'rgba(91, 98, 168, 0.12)', + hover: 'rgba(70, 75, 180, 0.04)', + active: 'rgba(55, 57, 109, 0.12)', }, sub: { - hover: 'rgba(93, 103, 133, 0.04)', - active: 'rgba(93, 103, 133, 0.12)', + hover: 'rgba(60, 71, 100, 0.04)', + active: 'rgba(51, 60, 86, 0.12)', }, critical: { hover: 'rgba(192, 52, 52, 0.04)', @@ -258,37 +130,165 @@ export const colors = { }, }, support: { - unselected: '#A0A4AD', - selected: '#666C7A', - 'unselected-strong': '#666C7A', - disabled: '#EDEDED', - 'disabled-content': '#A0A4AD', + unselected: '#a0a4ad', + selected: '#666c7a', + 'unselected-strong': '#505660', + disabled: '#ededed', + 'disabled-content': '#a0a4ad', placeholder: '#838894', }, links: { - default: '#5B62A8', - hover: '#484E89', + default: '#6469d8', + hover: '#4b50be', 'neutral-default': '#454953', - 'neutral-hover': '#2C2E34', + 'neutral-hover': '#2c2e34', 'inverse-default': '#ffffff', - 'inverse-hover': '#EDEDED', + 'inverse-hover': '#ededed', }, }, utility: { + 'focus-default': '#6469d8', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', feedback: { - info: '#1361F0', - 'info-subtle': '#F7F9FE', - warning: '#FFDA68', + info: '#1361f0', + 'info-subtle': '#f7f9fe', + warning: '#ffda68', 'warning-subtle': '#fffae1', - success: '#0F796F', - 'success-subtle': '#F5FAFA', + success: '#0f796f', + 'success-subtle': '#f5fafa', critical: '#c03434', 'critical-subtle': '#fef7f7', }, - 'focus-default': '#1361F0', - 'focus-inverse': '#ffffff', - 'input-prefilled': '#fffae1', - ui: '#ffffff', - 'ui-clear': 'rgba(255, 255, 255, 0)', + }, + purple: { + '50': '#f4f5fb', + '100': '#e8e9f3', + '200': '#b6bae0', + '300': '#a0a3e2', + '400': '#767be2', + '500': '#6469d8', + '600': '#4b50be', + '700': '#464bb4', + '800': '#37396d', + '900': '#2a2c55', + }, + brand: { + primary: { + '50': '#f9f9fc', + '100': '#e8e9f3', + '200': '#b6bae0', + '300': '#a0a3e2', + '400': '#767be2', + '500': '#6469d8', + '600': '#4b50be', + '700': '#464bb4', + '800': '#37396d', + '900': '#2a2c55', + }, + secondary: { + '50': '#f6f7fb', + '100': '#eaeef1', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#f7f9fe', + '100': '#e7effc', + '200': '#acc7fa', + '300': '#82abf7', + '400': '#568df4', + '500': '#1361f0', + '600': '#0d4fca', + '700': '#0b44ac', + '800': '#093890', + '900': '#072a69', + }, + red: { + '50': '#fef7f7', + '100': '#fbe9e9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#f5fafa', + '100': '#d2f8ef', + '200': '#98ccc7', + '300': '#63b1aa', + '400': '#2d978c', + '500': '#0a857d', + '600': '#0c5f57', + '700': '#0a524b', + '800': '#09463f', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#ffda68', + '200': '#e2b73e', + '300': '#c4992a', + '400': '#a77c18', + '500': '#8b6005', + '600': '#704c00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f6f7fb', + '100': '#eaeef1', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#f8f9f9', + '100': '#ededed', + '200': '#bfc2c8', + '300': '#a0a4ad', + '400': '#838894', + '500': '#666c7a', + '600': '#505660', + '700': '#454953', + '800': '#3a3e46', + '900': '#2c2e34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#ffcaa4', + '1shadow': '#f5b896', + '2base': '#eba687', + '2shadow': '#e29b7b', + '3base': '#d98f6f', + '3shadow': '#ce8361', + '4base': '#bf7657', + '4shadow': '#af6d53', + '5base': '#9f634f', + '5shadow': '#8b5544', + '6base': '#764738', + '6shadow': '#633d32', }, } diff --git a/react/.storybook/colorThemes/Redeem/shadows.ts b/react/.storybook/colorThemes/Redeem/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Redeem/shadows.ts +++ b/react/.storybook/colorThemes/Redeem/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Redeem/spacing.ts b/react/.storybook/colorThemes/Redeem/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Redeem/spacing.ts +++ b/react/.storybook/colorThemes/Redeem/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Redeem/textStyles.ts b/react/.storybook/colorThemes/Redeem/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/Redeem/textStyles.ts +++ b/react/.storybook/colorThemes/Redeem/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Redeem/typography.ts b/react/.storybook/colorThemes/Redeem/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Redeem/typography.ts +++ b/react/.storybook/colorThemes/Redeem/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/ScamShield/colors.ts b/react/.storybook/colorThemes/ScamShield/colors.ts index 30155329..30696ae0 100644 --- a/react/.storybook/colorThemes/ScamShield/colors.ts +++ b/react/.storybook/colorThemes/ScamShield/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/ScamShield/shadows.ts b/react/.storybook/colorThemes/ScamShield/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/ScamShield/shadows.ts +++ b/react/.storybook/colorThemes/ScamShield/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/ScamShield/spacing.ts b/react/.storybook/colorThemes/ScamShield/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/ScamShield/spacing.ts +++ b/react/.storybook/colorThemes/ScamShield/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/ScamShield/textStyles.ts b/react/.storybook/colorThemes/ScamShield/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/ScamShield/textStyles.ts +++ b/react/.storybook/colorThemes/ScamShield/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/ScamShield/typography.ts b/react/.storybook/colorThemes/ScamShield/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/ScamShield/typography.ts +++ b/react/.storybook/colorThemes/ScamShield/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/TEALS/colors.ts b/react/.storybook/colorThemes/TEALS/colors.ts new file mode 100644 index 00000000..b1fc2030 --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/colors.ts @@ -0,0 +1,294 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + teal: { + '50': '#F5FBFC', + '100': '#DDF2F3', + '200': '#79CCD1', + '300': '#30B0B8', + '400': '#1B92A3', + '500': '#157383', + '600': '#115C6B', + '700': '#0F505E', + '800': '#0C4552', + '900': '#093440', + }, + blue: { + '50': '#F8F9FD', + '100': '#EDEFFB', + '200': '#B1BDEC', + '300': '#8C9DE4', + '400': '#687EDB', + '500': '#435ED1', + '600': '#354BA7', + '700': '#2E4191', + '800': '#28387C', + '900': '#1E2A5E', + }, + brand: { + primary: { + '50': '#F8F9FD', + '100': '#EDEFFB', + '200': '#B1BDEC', + '300': '#8C9DE4', + '400': '#8C9DE4', + '500': '#435ED1', + '600': '#354BA7', + '700': '#2E4191', + '800': '#28387C', + '900': '#1E2A5E', + }, + secondary: { + '50': '#F5FBFC', + '100': '#DDF2F3', + '200': '#79CCD1', + '300': '#30B0B8', + '400': '#1B92A3', + '500': '#157383', + '600': '#115C6B', + '700': '#0F505E', + '800': '#0C4552', + '900': '#093440', + }, + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#F8F9FD', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#435ED1', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#435ED1', + }, + }, + interaction: { + main: { + default: '#435ED1', + hover: '#354BA7', + active: '#2E4191', + }, + 'main-subtle': { + default: '#EDEFFB', + hover: '#B1BDEC', + active: '#8C9DE4', + }, + sub: { + default: '#157383', + hover: '#115C6B', + active: '#0F505E', + }, + 'sub-subtle': { + default: '#DDF2F3', + hover: '#79CCD1', + active: '#30B0B8', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#F8F9FD', + active: '#EDEFFB', + }, + sub: { + hover: '#F5FBFC', + active: '#DDF2F3', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(67, 94, 209, 0.04)', + active: 'rgba(67, 94, 209, 0.12)', + }, + sub: { + hover: 'rgba(21, 115, 131, 0.04)', + active: 'rgba(21, 115, 131, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#435ED1', + hover: '#354BA7', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#435ED1', + 'info-subtle': '#F8F9FD', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#435ED1', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/react/.storybook/colorThemes/TEALS/shadows.ts b/react/.storybook/colorThemes/TEALS/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/react/.storybook/colorThemes/TEALS/spacing.ts b/react/.storybook/colorThemes/TEALS/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/react/.storybook/colorThemes/TEALS/textStyles.ts b/react/.storybook/colorThemes/TEALS/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/react/.storybook/colorThemes/TEALS/theme.ts b/react/.storybook/colorThemes/TEALS/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/TEALS/typography.ts b/react/.storybook/colorThemes/TEALS/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/react/.storybook/colorThemes/TEALS/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/react/.storybook/colorThemes/Vault/colors.ts b/react/.storybook/colorThemes/Vault/colors.ts index a77fe89f..3553f262 100644 --- a/react/.storybook/colorThemes/Vault/colors.ts +++ b/react/.storybook/colorThemes/Vault/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -11,10 +11,10 @@ export const colors = { '300': '#A89FF2', '400': '#877cee', '500': '#6253E8', - '600': '#4D3DD8', - '700': '#4335BD', - '800': '#3B2eA4', - '900': '#2B227A', + '600': '#4E49A8', + '700': '#44418B', + '800': '#2E2F55', + '900': '#151523', }, brand: { primary: { @@ -24,10 +24,10 @@ export const colors = { '300': '#A89FF2', '400': '#877cee', '500': '#6253E8', - '600': '#4D3DD8', - '700': '#4335BD', - '800': '#3B2eA4', - '900': '#2B227A', + '600': '#4E49A8', + '700': '#44418B', + '800': '#2E2F55', + '900': '#151523', }, secondary: { '50': '#F9F9F9', @@ -54,23 +54,16 @@ export const colors = { '800': '#3D3D3D', '900': '#2E2E2E', }, - chart: { - sky: '#61B8F6', - bumblebee: '#EFC200', - pink: '#DA627D', - pandan: '#00CB2D', - violet: '#7731BE', - }, interaction: { main: { - active: '#4D3DD8', + active: '#4E49A8', default: '#6253E8', - hover: '#4D3DD8', + hover: '#4E49A8', }, sub: { - default: '#2E2E2E', - hover: '#000000', - active: '#000000', + default: '#151523', + hover: '#2E2F55', + active: '#44418B', }, support: { placeholder: '#848484', @@ -172,7 +165,7 @@ export const colors = { }, links: { default: '#6253E8', - hover: '#4D3DD8', + hover: '#4E49A8', 'neutral-default': '#474747', 'neutral-hover': '#2E2E2E', 'inverse-default': '#ffffff', @@ -181,7 +174,7 @@ export const colors = { }, base: { canvas: { - inverse: '#2E2E2E', + inverse: '#151523', default: '#ffffff', alt: '#F9F9F9', backdrop: '#E9EAEE', @@ -222,6 +215,99 @@ export const colors = { ui: '#ffffff', 'ui-clear': 'rgba(255, 255, 255, 0)', }, + visualisation: { + green: { + '100': '#E4F1DA', + '300': '#83B35D', + '500': '#5A7B40', + '700': '#364926', + }, + teal: { + '100': '#EBF6F5', + '300': '#5EB3AD', + '500': '#247F79', + '700': '#154B48', + }, + turqoise: { + '100': '#E5F6FA', + '300': '#34B3D1', + '500': '#247C91', + '700': '#154956', + }, + blue: { + '100': '#ECF4FF', + '300': '#65A7FF', + '500': '#3072C9', + '700': '#1C4477', + }, + azure: { + '100': '#F1F3FF', + '300': '#8CA0FD', + '500': '#566BCD', + '700': '#333F79', + }, + violet: { + '100': '#F8F2FB', + '300': '#C493DB', + '500': '#9E50C5', + '700': '#622A7E', + }, + pink: { + '100': '#FEF1F8', + '300': '#F47EBD', + '500': '#CD3284', + '700': '#7B1E4F', + }, + crimson: { + '100': '#FCF0F0', + '300': '#E78C8C', + '500': '#D43636', + '700': '#7F2020', + }, + orange: { + '100': '#FFF2DC', + '300': '#E79300', + '500': '#A06600', + '700': '#5F3C00', + }, + sequential: { + '100': '#ecda9a', + '200': '#efc47e', + '300': '#f3ad6a', + '400': '#f7945d', + '500': '#f97b57', + '600': '#f66356', + '700': '#ee4d5a', + }, + diverging: { + '100': '#fadaec', + '200': '#d75da2', + '300': '#bb1f78', + '400': '#eaf5dc', + '500': '#cceaa8', + '600': '#5e9f2c', + '700': '#276419', + }, + qualitative: { + teal: '#66c4cc', + yellow: '#f6d071', + orange: '#f89c74', + lightpurple: '#dcaff1', + green: '#86c55e', + blue: '#9eb9f3', + pink: '#fd88b1', + lime: '#c9db74', + mint: '#8ce0a4', + purple: '#b497e6', + brown: '#d3b484', + grey: '#b3b3b3', + }, + }, + gradient: { + purple: 'linear-gradient(180deg, #f8f2fb 0%, #f8f2fb00 100%)', + darkpurple: 'linear-gradient(180deg, #f7e6ff 0%, #f8f2fb00 100%)', + red: 'linear-gradient(180deg, #ffe7e7 0%, #fcf0f000 100%)', + }, blue: { '50': '#F7F9FE', '100': '#E7EFFC', diff --git a/react/.storybook/colorThemes/Vault/shadows.ts b/react/.storybook/colorThemes/Vault/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/Vault/shadows.ts +++ b/react/.storybook/colorThemes/Vault/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/Vault/spacing.ts b/react/.storybook/colorThemes/Vault/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/Vault/spacing.ts +++ b/react/.storybook/colorThemes/Vault/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/Vault/textStyles.ts b/react/.storybook/colorThemes/Vault/textStyles.ts index 1aef574a..efdff6ba 100644 --- a/react/.storybook/colorThemes/Vault/textStyles.ts +++ b/react/.storybook/colorThemes/Vault/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/Vault/typography.ts b/react/.storybook/colorThemes/Vault/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/Vault/typography.ts +++ b/react/.storybook/colorThemes/Vault/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/activesg/colors.ts b/react/.storybook/colorThemes/activesg/colors.ts index 156f7b85..caeb73d2 100644 --- a/react/.storybook/colorThemes/activesg/colors.ts +++ b/react/.storybook/colorThemes/activesg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -30,16 +30,16 @@ export const colors = { '900': '#580D0F', }, secondary: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', + '50': '#FAFAFA', + '100': '#E5E5E5', + '200': '#D4D4D4', + '300': '#B0B0B0', + '400': '#737373', + '500': '#525252', + '600': '#404040', + '700': '#262626', + '800': '#171717', + '900': '#0a0a0a', }, }, pink: { @@ -47,14 +47,14 @@ export const colors = { }, interaction: { main: { - default: 'linear-gradient (45 deg, #CB0935 0%, #FF383E 100%)', - hover: 'linear-gradient (45deg, #A4092B 0%, #CC2D32 100%)', - active: 'linear-gradient (45 deg, #7A0620 0%, #992226 100%)', + default: '#CB0935', + hover: '#AC0B2F', + active: '#880D27', }, sub: { - default: '#272d41', - hover: '#333c56', - active: '#3c4764', + default: '#171717', + hover: '#0a0a0a', + active: '#0a0a0a', }, 'main-subtle': { default: '#FBE9E9', @@ -62,9 +62,9 @@ export const colors = { active: '#EA8181', }, 'sub-subtle': { - default: '#e9eaee', - hover: '#babecb', - active: '#9aa0b3', + default: '#E5E5E5', + hover: '#D4D4D4', + active: '#B0B0B0', }, critical: { default: '#CB0935', @@ -97,14 +97,14 @@ export const colors = { active: '#63B1AA', }, neutral: { - default: '#666C7A', - hover: '#505660', - active: '#454953', + default: '#525252', + hover: '#404040', + active: '#262626', }, 'neutral-subtle': { - default: '#EDEDED', - hover: '#BFC2C8', - active: '#A0A4AD', + default: '#E5E5E5', + hover: '#D4D4D4', + active: '#B0B0B0', }, muted: { main: { @@ -112,16 +112,16 @@ export const colors = { active: '#FBE9E9', }, sub: { - hover: '#f8f9fa', - active: '#e9eaee', + hover: '#FAFAFA', + active: '#E5E5E5', }, critical: { hover: '#FEF7F7', active: '#FBE9E9', }, neutral: { - hover: '#F8F9F9', - active: '#EDEDED', + hover: '#FAFAFA', + active: '#E5E5E5', }, }, tinted: { @@ -130,8 +130,8 @@ export const colors = { active: 'rgba(203, 9, 53, 0.12)', }, sub: { - hover: 'rgba(93, 103, 133, 0.04)', - active: 'rgba(93, 103, 133, 0.12)', + hover: 'rgba(82, 82, 82, 0.04)', + active: 'rgba(82, 82, 82, 0.12)', }, critical: { hover: 'rgba(203, 9, 53, 0.04)', @@ -147,22 +147,75 @@ export const colors = { }, }, support: { - unselected: '#A0A4AD', - selected: '#666C7A', - 'unselected-strong': '#666C7A', - disabled: '#EDEDED', - 'disabled-content': '#A0A4AD', - placeholder: '#838894', + unselected: '#B0B0B0', + selected: '#525252', + 'unselected-strong': '#525252', + disabled: '#E5E5E5', + 'disabled-content': '#B0B0B0', + placeholder: '#737373', }, links: { default: '#CB0935', hover: '#AC0B2F', - 'neutral-default': '#454953', - 'neutral-hover': '#2C2E34', + 'neutral-default': '#262626', + 'neutral-hover': '#0a0a0a', 'inverse-default': '#ffffff', - 'inverse-hover': '#EDEDED', + 'inverse-hover': '#E5E5E5', + }, + }, + grey: { + '50': '#FAFAFA', + '100': '#E5E5E5', + '200': '#D4D4D4', + '300': '#B0B0B0', + '400': '#737373', + '500': '#525252', + '600': '#404040', + '700': '#262626', + '800': '#171717', + '900': '#0a0a0a', + }, + base: { + divider: { + subtle: '#FAFAFA', + medium: '#E5E5E5', + strong: '#B0B0B0', + inverse: '#ffffff', + brand: '#CB0935', + }, + content: { + default: '#525252', + strong: '#262626', + medium: '#737373', + brand: '#CB0935', + inverse: '#ffffff', + }, + canvas: { + default: '#ffffff', + alt: '#FAFAFA', + backdrop: '#E5E5E5', + 'brand-subtle': '#FEF7F7', + inverse: '#171717', + overlay: 'rgba(23, 23, 23, 0.8)', }, }, + utility: { + feedback: { + info: '#171717', + 'info-subtle': '#FAFAFA', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#CB0935', + 'critical-subtle': '#FEF7F7', + }, + 'focus-default': '#171717', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, blue: { '50': '#F7F9FE', '100': '#E7EFFC', @@ -211,18 +264,6 @@ export const colors = { '800': '#333c56', '900': '#272d41', }, - grey: { - '50': '#F8F9F9', - '100': '#EDEDED', - '200': '#BFC2C8', - '300': '#A0A4AD', - '400': '#838894', - '500': '#666C7A', - '600': '#505660', - '700': '#454953', - '800': '#3A3E46', - '900': '#2C2E34', - }, standard: { white: '#ffffff', black: '#000000', @@ -241,45 +282,4 @@ export const colors = { '6base': '#764738', '6shadow': '#633D32', }, - base: { - canvas: { - default: '#ffffff', - alt: '#F8F9F9', - backdrop: '#EDEDED', - 'brand-subtle': '#FEF7F7', - inverse: '#3A3E46', - overlay: 'rgba(58, 62, 70, 0.8)', - }, - content: { - default: '#454953', - strong: '#2C2E34', - medium: '#666C7A', - brand: '#CB0935', - inverse: '#ffffff', - }, - divider: { - subtle: '#F8F9F9', - medium: '#EDEDED', - strong: '#BFC2C8', - inverse: '#ffffff', - brand: '#CB0935', - }, - }, - utility: { - feedback: { - info: '#1361F0', - 'info-subtle': '#F7F9FE', - warning: '#FFDA68', - 'warning-subtle': '#fffae1', - success: '#0F796F', - 'success-subtle': '#F5FAFA', - critical: '#CB0935', - 'critical-subtle': '#FEF7F7', - }, - 'focus-default': '#1361F0', - 'focus-inverse': '#ffffff', - 'input-prefilled': '#fffae1', - ui: '#ffffff', - 'ui-clear': 'rgba(255, 255, 255, 0)', - }, } diff --git a/react/.storybook/colorThemes/activesg/shadows.ts b/react/.storybook/colorThemes/activesg/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/activesg/shadows.ts +++ b/react/.storybook/colorThemes/activesg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/activesg/spacing.ts b/react/.storybook/colorThemes/activesg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/activesg/spacing.ts +++ b/react/.storybook/colorThemes/activesg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/activesg/textStyles.ts b/react/.storybook/colorThemes/activesg/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/activesg/textStyles.ts +++ b/react/.storybook/colorThemes/activesg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/activesg/theme.ts b/react/.storybook/colorThemes/activesg/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/activesg/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/activesg/typography.ts b/react/.storybook/colorThemes/activesg/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/activesg/typography.ts +++ b/react/.storybook/colorThemes/activesg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/byos/colors.ts b/react/.storybook/colorThemes/byos/colors.ts index ecb98bfd..e0db2926 100644 --- a/react/.storybook/colorThemes/byos/colors.ts +++ b/react/.storybook/colorThemes/byos/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/byos/shadows.ts b/react/.storybook/colorThemes/byos/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/byos/shadows.ts +++ b/react/.storybook/colorThemes/byos/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/byos/spacing.ts b/react/.storybook/colorThemes/byos/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/byos/spacing.ts +++ b/react/.storybook/colorThemes/byos/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/byos/textStyles.ts b/react/.storybook/colorThemes/byos/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/byos/textStyles.ts +++ b/react/.storybook/colorThemes/byos/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/byos/typography.ts b/react/.storybook/colorThemes/byos/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/byos/typography.ts +++ b/react/.storybook/colorThemes/byos/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/default/colors.ts b/react/.storybook/colorThemes/default/colors.ts index 5517b00a..c5ce68b4 100644 --- a/react/.storybook/colorThemes/default/colors.ts +++ b/react/.storybook/colorThemes/default/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/default/shadows.ts b/react/.storybook/colorThemes/default/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/default/shadows.ts +++ b/react/.storybook/colorThemes/default/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/default/spacing.ts b/react/.storybook/colorThemes/default/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/default/spacing.ts +++ b/react/.storybook/colorThemes/default/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/default/textStyles.ts b/react/.storybook/colorThemes/default/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/default/textStyles.ts +++ b/react/.storybook/colorThemes/default/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/default/typography.ts b/react/.storybook/colorThemes/default/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/default/typography.ts +++ b/react/.storybook/colorThemes/default/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/folk/colors.ts b/react/.storybook/colorThemes/folk/colors.ts index 91111bd1..d1fd4836 100644 --- a/react/.storybook/colorThemes/folk/colors.ts +++ b/react/.storybook/colorThemes/folk/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/folk/shadows.ts b/react/.storybook/colorThemes/folk/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/folk/shadows.ts +++ b/react/.storybook/colorThemes/folk/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/folk/spacing.ts b/react/.storybook/colorThemes/folk/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/folk/spacing.ts +++ b/react/.storybook/colorThemes/folk/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/folk/textStyles.ts b/react/.storybook/colorThemes/folk/textStyles.ts index 4dda5222..3311256f 100644 --- a/react/.storybook/colorThemes/folk/textStyles.ts +++ b/react/.storybook/colorThemes/folk/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/folk/typography.ts b/react/.storybook/colorThemes/folk/typography.ts index 5ad4c188..13ea1691 100644 --- a/react/.storybook/colorThemes/folk/typography.ts +++ b/react/.storybook/colorThemes/folk/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/forest/colors.ts b/react/.storybook/colorThemes/forest/colors.ts index 6d36124d..c4442286 100644 --- a/react/.storybook/colorThemes/forest/colors.ts +++ b/react/.storybook/colorThemes/forest/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/forest/shadows.ts b/react/.storybook/colorThemes/forest/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/forest/shadows.ts +++ b/react/.storybook/colorThemes/forest/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/forest/spacing.ts b/react/.storybook/colorThemes/forest/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/forest/spacing.ts +++ b/react/.storybook/colorThemes/forest/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/forest/textStyles.ts b/react/.storybook/colorThemes/forest/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/forest/textStyles.ts +++ b/react/.storybook/colorThemes/forest/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/forest/typography.ts b/react/.storybook/colorThemes/forest/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/forest/typography.ts +++ b/react/.storybook/colorThemes/forest/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/fynder/colors.ts b/react/.storybook/colorThemes/fynder/colors.ts new file mode 100644 index 00000000..e02c2747 --- /dev/null +++ b/react/.storybook/colorThemes/fynder/colors.ts @@ -0,0 +1,294 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + purple: { + '50': '#FEFEFF', + '100': '#F4F2FF', + '200': '#C2C1FD', + '300': '#8F94FD', + '400': '#6461FB', + '500': '#5B4DFA', + '600': '#533BEA', + '700': '#4A33D9', + '800': '#412CC3', + '900': '#33229A', + }, + brand: { + primary: { + '50': '#FEFEFF', + '100': '#F4F2FF', + '200': '#C2C1FD', + '300': '#8F94FD', + '400': '#6461FB', + '500': '#5B4DFA', + '600': '#533BEA', + '700': '#4A33D9', + '800': '#412CC3', + '900': '#33229A', + }, + secondary: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#FEFEFF', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#5B4DFA', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#5B4DFA', + }, + }, + interaction: { + main: { + default: '#5B4DFA', + hover: '#533BEA', + active: '#4A33D9', + }, + 'main-subtle': { + default: '#F4F2FF', + hover: '#C2C1FD', + active: '#8F94FD', + }, + sub: { + default: '#5d6785', + hover: '#465173', + active: '#3c4764', + }, + 'sub-subtle': { + default: '#e9eaee', + hover: '#babecb', + active: '#9aa0b3', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#FEFEFF', + active: '#F4F2FF', + }, + sub: { + hover: '#f8f9fa', + active: '#e9eaee', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(91, 77, 250, 0.04)', + active: 'rgba(91, 77, 250, 0.12)', + }, + sub: { + hover: 'rgba(93, 103, 133, 0.04)', + active: 'rgba(93, 103, 133, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#5B4DFA', + hover: '#533BEA', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#1361F0', + 'info-subtle': '#F7F9FE', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#1361F0', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/react/.storybook/colorThemes/fynder/shadows.ts b/react/.storybook/colorThemes/fynder/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/react/.storybook/colorThemes/fynder/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/react/.storybook/colorThemes/fynder/spacing.ts b/react/.storybook/colorThemes/fynder/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/react/.storybook/colorThemes/fynder/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/react/.storybook/colorThemes/fynder/textStyles.ts b/react/.storybook/colorThemes/fynder/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/react/.storybook/colorThemes/fynder/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/react/.storybook/colorThemes/fynder/theme.ts b/react/.storybook/colorThemes/fynder/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/fynder/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/fynder/typography.ts b/react/.storybook/colorThemes/fynder/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/react/.storybook/colorThemes/fynder/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/react/.storybook/colorThemes/hichew/colors.ts b/react/.storybook/colorThemes/hichew/colors.ts index 6705de44..229a1514 100644 --- a/react/.storybook/colorThemes/hichew/colors.ts +++ b/react/.storybook/colorThemes/hichew/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/hichew/shadows.ts b/react/.storybook/colorThemes/hichew/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/hichew/shadows.ts +++ b/react/.storybook/colorThemes/hichew/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/hichew/spacing.ts b/react/.storybook/colorThemes/hichew/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/hichew/spacing.ts +++ b/react/.storybook/colorThemes/hichew/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/hichew/textStyles.ts b/react/.storybook/colorThemes/hichew/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/hichew/textStyles.ts +++ b/react/.storybook/colorThemes/hichew/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/hichew/typography.ts b/react/.storybook/colorThemes/hichew/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/hichew/typography.ts +++ b/react/.storybook/colorThemes/hichew/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/index.ts b/react/.storybook/colorThemes/index.ts index 71519f9d..b375907c 100644 --- a/react/.storybook/colorThemes/index.ts +++ b/react/.storybook/colorThemes/index.ts @@ -1,47 +1,73 @@ -import { theme as AskGovTheme } from './AskGov/theme' -import { theme as BbBearTheme } from './BbBear/theme' -import { theme as Care360Theme } from './Care360/theme' +import { theme as armouryTheme } from './Armoury/theme' +import { theme as askGovTheme } from './AskGov/theme' +import { theme as betaDarkTheme } from './BETA dark/theme' +import { theme as bbBearTheme } from './BbBear/theme' +import { theme as calSgTheme } from './CalSG/theme' +import { theme as care360Theme } from './Care360/theme' +import { theme as careersTheme } from './Careers/theme' +import { theme as distributeTheme } from './Distribute/theme' +import { theme as erpxTheme } from './ERPX/theme' +import { theme as engageTheme } from './Engage/theme' +import { theme as formTheme } from './Form/theme' +import { theme as govsgTheme } from './Govsg/theme' +import { theme as isomerTheme } from './Isomer/theme' +import { theme as messageTheme } from './Message/theme' +import { theme as pairTheme } from './Pair/theme' +import { theme as paySgTheme } from './PaySG/theme' +import { theme as phonebookTheme } from './Phonebook/theme' +import { theme as pinPointTheme } from './PinPoint/theme' +import { theme as postmanTheme } from './Postman/theme' +import { theme as redeemTheme } from './Redeem/theme' +import { theme as scamShieldTheme } from './ScamShield/theme' +import { theme as tealsTheme } from './TEALS/theme' +import { theme as vaultTheme } from './Vault/theme' +import { theme as activesgTheme } from './activesg/theme' +import { theme as byosTheme } from './byos/theme' import { theme as defaultTheme } from './default/theme' +import { theme as folkTheme } from './folk/theme' import { theme as forestTheme } from './forest/theme' -import { theme as FormTheme } from './Form/theme' +import { theme as fynderTheme } from './fynder/theme' import { theme as hichewTheme } from './hichew/theme' -import { theme as IsomerTheme } from './Isomer/theme' import { theme as jujubeTheme } from './jujube/theme' -import { theme as PostmanTheme } from './Postman/theme' +import { theme as lettersgTheme } from './lettersg/theme' import { theme as pslTheme } from './psl/theme' -import { theme as RedeemTheme } from './Redeem/theme' -import { theme as ScamShieldTheme } from './ScamShield/theme' -import { theme as VaultTheme } from './Vault/theme' +import { theme as sgidSingpassTheme } from './sgid-singpass/theme' import { theme as whaleTheme } from './whale/theme' -import { theme as byosTheme } from './byos/theme' -import { theme as calSgTheme } from './CalSG/theme' -import { theme as distributeTheme } from './Distribute/theme' -import { theme as folkTheme } from './folk/theme' -import { theme as pairTheme } from './Pair/theme' -import { theme as paySgTheme } from './PaySG/theme' -import { theme as pinPointTheme } from './PinPoint/theme' export const THEME_MAP: Record = { - default: defaultTheme, - AskGov: AskGovTheme, + armoury: armouryTheme, + askGov: askGovTheme, + betaDark: betaDarkTheme, + bbBear: bbBearTheme, + calSg: calSgTheme, + care360: care360Theme, + careers: careersTheme, + distribute: distributeTheme, + erpx: erpxTheme, + engage: engageTheme, + form: formTheme, + govsg: govsgTheme, + isomer: isomerTheme, + message: messageTheme, + pair: pairTheme, + paySg: paySgTheme, + phonebook: phonebookTheme, + pinPoint: pinPointTheme, + postman: postmanTheme, + redeem: redeemTheme, + scamShield: scamShieldTheme, + teals: tealsTheme, + vault: vaultTheme, + activesg: activesgTheme, byos: byosTheme, - CalSG: calSgTheme, - Care360: Care360Theme, - Distribute: distributeTheme, + default: defaultTheme, folk: folkTheme, - Form: FormTheme, - Isomer: IsomerTheme, - Pair: pairTheme, - PinPoint: pinPointTheme, - PaySG: paySgTheme, - Redeem: RedeemTheme, - Postman: PostmanTheme, - ScamShield: ScamShieldTheme, - Vault: VaultTheme, forest: forestTheme, - BbBear: BbBearTheme, - whale: whaleTheme, + fynder: fynderTheme, hichew: hichewTheme, jujube: jujubeTheme, + lettersg: lettersgTheme, psl: pslTheme, + sgidSingpass: sgidSingpassTheme, + whale: whaleTheme, } diff --git a/react/.storybook/colorThemes/jujube/colors.ts b/react/.storybook/colorThemes/jujube/colors.ts index 7f908c1c..d8898cf9 100644 --- a/react/.storybook/colorThemes/jujube/colors.ts +++ b/react/.storybook/colorThemes/jujube/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/jujube/shadows.ts b/react/.storybook/colorThemes/jujube/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/jujube/shadows.ts +++ b/react/.storybook/colorThemes/jujube/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/jujube/spacing.ts b/react/.storybook/colorThemes/jujube/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/jujube/spacing.ts +++ b/react/.storybook/colorThemes/jujube/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/jujube/textStyles.ts b/react/.storybook/colorThemes/jujube/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/jujube/textStyles.ts +++ b/react/.storybook/colorThemes/jujube/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/jujube/typography.ts b/react/.storybook/colorThemes/jujube/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/jujube/typography.ts +++ b/react/.storybook/colorThemes/jujube/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/lettersg/colors.ts b/react/.storybook/colorThemes/lettersg/colors.ts index 1660f464..def5b0ff 100644 --- a/react/.storybook/colorThemes/lettersg/colors.ts +++ b/react/.storybook/colorThemes/lettersg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/lettersg/shadows.ts b/react/.storybook/colorThemes/lettersg/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/lettersg/shadows.ts +++ b/react/.storybook/colorThemes/lettersg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/lettersg/spacing.ts b/react/.storybook/colorThemes/lettersg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/lettersg/spacing.ts +++ b/react/.storybook/colorThemes/lettersg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/lettersg/textStyles.ts b/react/.storybook/colorThemes/lettersg/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/lettersg/textStyles.ts +++ b/react/.storybook/colorThemes/lettersg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/lettersg/theme.ts b/react/.storybook/colorThemes/lettersg/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/lettersg/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/lettersg/typography.ts b/react/.storybook/colorThemes/lettersg/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/lettersg/typography.ts +++ b/react/.storybook/colorThemes/lettersg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/psl/colors.ts b/react/.storybook/colorThemes/psl/colors.ts index f48683b1..0ec0a809 100644 --- a/react/.storybook/colorThemes/psl/colors.ts +++ b/react/.storybook/colorThemes/psl/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/psl/shadows.ts b/react/.storybook/colorThemes/psl/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/psl/shadows.ts +++ b/react/.storybook/colorThemes/psl/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/psl/spacing.ts b/react/.storybook/colorThemes/psl/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/psl/spacing.ts +++ b/react/.storybook/colorThemes/psl/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/psl/textStyles.ts b/react/.storybook/colorThemes/psl/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/psl/textStyles.ts +++ b/react/.storybook/colorThemes/psl/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/psl/typography.ts b/react/.storybook/colorThemes/psl/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/psl/typography.ts +++ b/react/.storybook/colorThemes/psl/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/sgid-singpass/colors.ts b/react/.storybook/colorThemes/sgid-singpass/colors.ts index d775eb95..e9ae4a9f 100644 --- a/react/.storybook/colorThemes/sgid-singpass/colors.ts +++ b/react/.storybook/colorThemes/sgid-singpass/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/sgid-singpass/shadows.ts b/react/.storybook/colorThemes/sgid-singpass/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/sgid-singpass/shadows.ts +++ b/react/.storybook/colorThemes/sgid-singpass/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/sgid-singpass/spacing.ts b/react/.storybook/colorThemes/sgid-singpass/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/sgid-singpass/spacing.ts +++ b/react/.storybook/colorThemes/sgid-singpass/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/sgid-singpass/textStyles.ts b/react/.storybook/colorThemes/sgid-singpass/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/sgid-singpass/textStyles.ts +++ b/react/.storybook/colorThemes/sgid-singpass/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/sgid-singpass/theme.ts b/react/.storybook/colorThemes/sgid-singpass/theme.ts new file mode 100644 index 00000000..9247777a --- /dev/null +++ b/react/.storybook/colorThemes/sgid-singpass/theme.ts @@ -0,0 +1,19 @@ +import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) diff --git a/react/.storybook/colorThemes/sgid-singpass/typography.ts b/react/.storybook/colorThemes/sgid-singpass/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/sgid-singpass/typography.ts +++ b/react/.storybook/colorThemes/sgid-singpass/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/.storybook/colorThemes/whale/colors.ts b/react/.storybook/colorThemes/whale/colors.ts index ae66b5f2..dc50d61b 100644 --- a/react/.storybook/colorThemes/whale/colors.ts +++ b/react/.storybook/colorThemes/whale/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/react/.storybook/colorThemes/whale/shadows.ts b/react/.storybook/colorThemes/whale/shadows.ts index 631416f9..5116a4f4 100644 --- a/react/.storybook/colorThemes/whale/shadows.ts +++ b/react/.storybook/colorThemes/whale/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/react/.storybook/colorThemes/whale/spacing.ts b/react/.storybook/colorThemes/whale/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/react/.storybook/colorThemes/whale/spacing.ts +++ b/react/.storybook/colorThemes/whale/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/react/.storybook/colorThemes/whale/textStyles.ts b/react/.storybook/colorThemes/whale/textStyles.ts index 40488581..09201498 100644 --- a/react/.storybook/colorThemes/whale/textStyles.ts +++ b/react/.storybook/colorThemes/whale/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/react/.storybook/colorThemes/whale/typography.ts b/react/.storybook/colorThemes/whale/typography.ts index 854af73a..8d76d754 100644 --- a/react/.storybook/colorThemes/whale/typography.ts +++ b/react/.storybook/colorThemes/whale/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/react/src/Menu/Menu.tsx b/react/src/Menu/Menu.tsx index 8dd48f6c..3b575663 100644 --- a/react/src/Menu/Menu.tsx +++ b/react/src/Menu/Menu.tsx @@ -1,15 +1,17 @@ import { FC, useMemo } from 'react' import { - ComponentWithAs as _, + ComponentWithAs as _ComponentWithAs, Icon, Menu as ChakraMenu, MenuButton as ChakraMenuButton, MenuDivider as ChakraMenuDivider, - MenuDividerProps, + // Importing due to type error + // The inferred type of 'Menu' cannot be named without a reference to '../../node_modules/@chakra-ui/menu/dist/menu-divider'. This is likely not portable. A type annotation is necessary. + MenuDividerProps as _MenuDividerProps, MenuItem as ChakraMenuItem, - MenuItemProps, + MenuItemProps as _MenuItemProps, MenuList as ChakraMenuList, - MenuListProps, + MenuListProps as _MenuListProps, MenuProps as ChakraMenuProps, ThemingProps, useMultiStyleConfig, diff --git a/token-gen/scripts/move-to-storybook.js b/token-gen/scripts/move-to-storybook.js new file mode 100644 index 00000000..2186d1d3 --- /dev/null +++ b/token-gen/scripts/move-to-storybook.js @@ -0,0 +1,73 @@ +// Script to move theme files to design system's storybook +// Usage: node scripts/move-to-storybook.js + +const fs = require('fs') +const path = require('path') +const { execSync } = require('child_process') +const { camelCase } = require('lodash') + +// src: token-gen/themes/ +// dest: react/.storybook/colorThemes/ + +const src = path.join(__dirname, '../themes') +const dest = path.join(__dirname, '../../react/.storybook/colorThemes') + +const products = fs.readdirSync(src) + +products.forEach((product) => { + const productSrc = path.join(src, product) + const productDest = path.join(dest, product) + if (!fs.existsSync(productDest)) { + fs.mkdirSync(productDest) + } + + const files = fs.readdirSync(productSrc) + files.forEach((file) => { + // read file content + const srcFile = path.join(productSrc, file) + const destFile = path.join(productDest, file) + // Copy file to destFile + fs.cpSync(srcFile, destFile) + }) + + // Create theme file if does not exist + const themeFile = path.join(productDest, 'theme.ts') + const content = `import { extendTheme } from '@chakra-ui/react' +import { colors } from './colors' +import { shadows } from './shadows' +import { spacing } from './spacing' +import { textStyles } from './textStyles' +import { typography } from './typography' + +import { theme as baseTheme } from '~/theme/theme' + +export const theme = extendTheme(baseTheme, { + colors, + shadows, + space: spacing, + fontSizes: typography.fontSize, + fontWeights: typography.fontWeights, + lineHeights: typography.lineHeights, + letterSpacings: typography.letterSpacing, + textStyles, +}) +` + if (!fs.existsSync(themeFile)) { + fs.writeFileSync(themeFile, content) + } +}) + + +// react/.storybook/colorThemes/index.ts +const storybookColorThemeDest = path.join(__dirname, '../../react/.storybook/colorThemes/index.ts') +let storybookColorThemeIndex = `` +// Create index theme file for Storybook +products.forEach(product => { + storybookColorThemeIndex += `import { theme as ${camelCase(product)}Theme } from './${product}/theme'\n` +}) +storybookColorThemeIndex += `\nexport const THEME_MAP: Record = {` +products.forEach(product => { + storybookColorThemeIndex += `\n ${camelCase(product)}: ${camelCase(product)}Theme,` +}) +storybookColorThemeIndex += `\n}\n` +fs.writeFileSync(storybookColorThemeDest, storybookColorThemeIndex) diff --git a/token-gen/themes/Armoury/colors.ts b/token-gen/themes/Armoury/colors.ts index b503b1f8..cf69a5cc 100644 --- a/token-gen/themes/Armoury/colors.ts +++ b/token-gen/themes/Armoury/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 26 Sep 2024 07:58:06 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Armoury/shadows.ts b/token-gen/themes/Armoury/shadows.ts index 8222db8c..5116a4f4 100644 --- a/token-gen/themes/Armoury/shadows.ts +++ b/token-gen/themes/Armoury/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 26 Sep 2024 07:58:06 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Armoury/spacing.ts b/token-gen/themes/Armoury/spacing.ts index 8994ad42..5d0bdc2c 100644 --- a/token-gen/themes/Armoury/spacing.ts +++ b/token-gen/themes/Armoury/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 26 Sep 2024 07:58:06 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Armoury/textStyles.ts b/token-gen/themes/Armoury/textStyles.ts index 71d13b99..09201498 100644 --- a/token-gen/themes/Armoury/textStyles.ts +++ b/token-gen/themes/Armoury/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 26 Sep 2024 07:58:06 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Armoury/typography.ts b/token-gen/themes/Armoury/typography.ts index cc47e59e..8d76d754 100644 --- a/token-gen/themes/Armoury/typography.ts +++ b/token-gen/themes/Armoury/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Thu, 26 Sep 2024 07:58:06 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/AskGov/colors.ts b/token-gen/themes/AskGov/colors.ts index dd4635ab..46d431f4 100644 --- a/token-gen/themes/AskGov/colors.ts +++ b/token-gen/themes/AskGov/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/AskGov/shadows.ts b/token-gen/themes/AskGov/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/AskGov/shadows.ts +++ b/token-gen/themes/AskGov/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/AskGov/spacing.ts b/token-gen/themes/AskGov/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/AskGov/spacing.ts +++ b/token-gen/themes/AskGov/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/AskGov/textStyles.ts b/token-gen/themes/AskGov/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/AskGov/textStyles.ts +++ b/token-gen/themes/AskGov/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/AskGov/typography.ts b/token-gen/themes/AskGov/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/AskGov/typography.ts +++ b/token-gen/themes/AskGov/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/BETA dark/colors.ts b/token-gen/themes/BETA dark/colors.ts index 960c0e86..0111ed49 100644 --- a/token-gen/themes/BETA dark/colors.ts +++ b/token-gen/themes/BETA dark/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/BETA dark/shadows.ts b/token-gen/themes/BETA dark/shadows.ts index 3993838f..a00528fb 100644 --- a/token-gen/themes/BETA dark/shadows.ts +++ b/token-gen/themes/BETA dark/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/BETA dark/spacing.ts b/token-gen/themes/BETA dark/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/BETA dark/spacing.ts +++ b/token-gen/themes/BETA dark/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/BETA dark/textStyles.ts b/token-gen/themes/BETA dark/textStyles.ts index fb9ea718..400b3e45 100644 --- a/token-gen/themes/BETA dark/textStyles.ts +++ b/token-gen/themes/BETA dark/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/BETA dark/typography.ts b/token-gen/themes/BETA dark/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/BETA dark/typography.ts +++ b/token-gen/themes/BETA dark/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/BbBear/colors.ts b/token-gen/themes/BbBear/colors.ts index 9faa3e8b..87266a61 100644 --- a/token-gen/themes/BbBear/colors.ts +++ b/token-gen/themes/BbBear/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/BbBear/shadows.ts b/token-gen/themes/BbBear/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/BbBear/shadows.ts +++ b/token-gen/themes/BbBear/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/BbBear/spacing.ts b/token-gen/themes/BbBear/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/BbBear/spacing.ts +++ b/token-gen/themes/BbBear/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/BbBear/textStyles.ts b/token-gen/themes/BbBear/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/BbBear/textStyles.ts +++ b/token-gen/themes/BbBear/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/BbBear/typography.ts b/token-gen/themes/BbBear/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/BbBear/typography.ts +++ b/token-gen/themes/BbBear/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/CalSG/colors.ts b/token-gen/themes/CalSG/colors.ts index 59c0f4ad..dbbbe118 100644 --- a/token-gen/themes/CalSG/colors.ts +++ b/token-gen/themes/CalSG/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/CalSG/shadows.ts b/token-gen/themes/CalSG/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/CalSG/shadows.ts +++ b/token-gen/themes/CalSG/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/CalSG/spacing.ts b/token-gen/themes/CalSG/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/CalSG/spacing.ts +++ b/token-gen/themes/CalSG/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/CalSG/textStyles.ts b/token-gen/themes/CalSG/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/CalSG/textStyles.ts +++ b/token-gen/themes/CalSG/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/CalSG/typography.ts b/token-gen/themes/CalSG/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/CalSG/typography.ts +++ b/token-gen/themes/CalSG/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Care360/colors.ts b/token-gen/themes/Care360/colors.ts index 56dfc87c..59b23097 100644 --- a/token-gen/themes/Care360/colors.ts +++ b/token-gen/themes/Care360/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Care360/shadows.ts b/token-gen/themes/Care360/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Care360/shadows.ts +++ b/token-gen/themes/Care360/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Care360/spacing.ts b/token-gen/themes/Care360/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Care360/spacing.ts +++ b/token-gen/themes/Care360/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Care360/textStyles.ts b/token-gen/themes/Care360/textStyles.ts index d9f15f4c..a5a922ca 100644 --- a/token-gen/themes/Care360/textStyles.ts +++ b/token-gen/themes/Care360/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Care360/typography.ts b/token-gen/themes/Care360/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Care360/typography.ts +++ b/token-gen/themes/Care360/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Careers/colors.ts b/token-gen/themes/Careers/colors.ts new file mode 100644 index 00000000..cfc8afcd --- /dev/null +++ b/token-gen/themes/Careers/colors.ts @@ -0,0 +1,282 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + green: { + '50': '#F6FBFB', + '100': '#EAF6F6', + '200': '#80CBCB', + '300': '#3EB0B0', + '400': '#069999', + '500': '#057474', + '600': '#045C5C', + '700': '#035050', + '800': '#034545', + '900': '#023434', + }, + blue: { + '50': '#F7F9FC', + '100': '#EAEEF7', + '200': '#AFBEE2', + '300': '#8AA0D4', + '400': '#6582C7', + '500': '#4064BA', + '600': '#224CAE', + '700': '#1640A0', + '800': '#133689', + '900': '#0F2968', + }, + brand: { + primary: { + '50': '#F6FBFB', + '100': '#EAF6F6', + '200': '#80CBCB', + '300': '#3EB0B0', + '400': '#069999', + '500': '#057474', + '600': '#045C5C', + '700': '#035050', + '800': '#034545', + '900': '#023434', + }, + secondary: { + '50': '#F7F9FC', + '100': '#EAEEF7', + '200': '#AFBEE2', + '300': '#8AA0D4', + '400': '#6582C7', + '500': '#4064BA', + '600': '#224CAE', + '700': '#1640A0', + '800': '#133689', + '900': '#0F2968', + }, + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#F6FBFB', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#057474', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#057474', + }, + }, + interaction: { + main: { + default: '#057474', + hover: '#045C5C', + active: '#035050', + }, + 'main-subtle': { + default: '#EAF6F6', + hover: '#80CBCB', + active: '#3EB0B0', + }, + sub: { + default: '#4064BA', + hover: '#224CAE', + active: '#1640A0', + }, + 'sub-subtle': { + default: '#EAEEF7', + hover: '#AFBEE2', + active: '#8AA0D4', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#057474', + hover: '#045C5C', + active: '#035050', + }, + 'success-subtle': { + default: '#EAF6F6', + hover: '#80CBCB', + active: '#3EB0B0', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#F6FBFB', + active: '#EAF6F6', + }, + sub: { + hover: '#F7F9FC', + active: '#EAEEF7', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(5, 116, 116, 0.04)', + active: 'rgba(5, 116, 116, 0.12)', + }, + sub: { + hover: 'rgba(64, 100, 186, 0.04)', + active: 'rgba(64, 100, 186, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#057474', + hover: '#045C5C', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#4064BA', + 'info-subtle': '#F7F9FC', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#057474', + 'success-subtle': '#F6FBFB', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#4064BA', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/token-gen/themes/Careers/shadows.ts b/token-gen/themes/Careers/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/token-gen/themes/Careers/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/token-gen/themes/Careers/spacing.ts b/token-gen/themes/Careers/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/token-gen/themes/Careers/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/token-gen/themes/Careers/textStyles.ts b/token-gen/themes/Careers/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/token-gen/themes/Careers/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/token-gen/themes/Careers/typography.ts b/token-gen/themes/Careers/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/token-gen/themes/Careers/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/token-gen/themes/Distribute/colors.ts b/token-gen/themes/Distribute/colors.ts index 130bf9ed..4de8b8d9 100644 --- a/token-gen/themes/Distribute/colors.ts +++ b/token-gen/themes/Distribute/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Distribute/shadows.ts b/token-gen/themes/Distribute/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Distribute/shadows.ts +++ b/token-gen/themes/Distribute/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Distribute/spacing.ts b/token-gen/themes/Distribute/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Distribute/spacing.ts +++ b/token-gen/themes/Distribute/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Distribute/textStyles.ts b/token-gen/themes/Distribute/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Distribute/textStyles.ts +++ b/token-gen/themes/Distribute/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Distribute/typography.ts b/token-gen/themes/Distribute/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Distribute/typography.ts +++ b/token-gen/themes/Distribute/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/ERPX/colors.ts b/token-gen/themes/ERPX/colors.ts new file mode 100644 index 00000000..7ea57024 --- /dev/null +++ b/token-gen/themes/ERPX/colors.ts @@ -0,0 +1,226 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + blue: { + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F9F9F9', + backdrop: '#E9EAEE', + 'brand-subtle': '#F9F9FC', + overlay: 'rgba(61, 61, 61, 0.8)', + }, + content: { + brand: '#6253E8', + inverse: '#ffffff', + }, + divider: { + subtle: '#F9F9F9', + medium: '#E9EAEE', + strong: '#BFBFBF', + inverse: '#ffffff', + brand: '#6253E8', + }, + }, + interaction: { + 'main-subtle': { + default: '#E4e1fb', + hover: '#c7c1f7', + active: '#A89FF2', + }, + 'sub-subtle': { + default: '#E9EAEE', + hover: '#BFBFBF', + active: '#A0A0A0', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#686868', + hover: '#535353', + active: '#474747', + }, + 'neutral-subtle': { + default: '#E9EAEE', + hover: '#BFBFBF', + active: '#A0A0A0', + }, + muted: { + main: { + hover: '#F9F9FC', + active: '#E4e1fb', + }, + sub: { + hover: '#F9F9F9', + active: '#E9EAEE', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F9F9F9', + active: '#E9EAEE', + }, + }, + tinted: { + main: { + hover: 'rgba(98, 83, 232, 0.04)', + active: 'rgba(98, 83, 232, 0.12)', + }, + sub: { + hover: 'rgba(104, 104, 104, 0.04)', + active: 'rgba(104, 104, 104, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A0A0', + selected: '#686868', + 'unselected-strong': '#686868', + disabled: '#E9EAEE', + 'disabled-content': '#A0A0A0', + }, + links: { + default: '#6253E8', + hover: '#4E49A8', + 'neutral-default': '#474747', + 'neutral-hover': '#2E2E2E', + 'inverse-default': '#ffffff', + 'inverse-hover': '#E9EAEE', + }, + }, + utility: { + feedback: { + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/token-gen/themes/ERPX/shadows.ts b/token-gen/themes/ERPX/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/token-gen/themes/ERPX/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/token-gen/themes/ERPX/spacing.ts b/token-gen/themes/ERPX/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/token-gen/themes/ERPX/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/token-gen/themes/ERPX/textStyles.ts b/token-gen/themes/ERPX/textStyles.ts new file mode 100644 index 00000000..83032a5a --- /dev/null +++ b/token-gen/themes/ERPX/textStyles.ts @@ -0,0 +1,167 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/token-gen/themes/ERPX/typography.ts b/token-gen/themes/ERPX/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/token-gen/themes/ERPX/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/token-gen/themes/Engage/colors.ts b/token-gen/themes/Engage/colors.ts index d65fb64d..add33bae 100644 --- a/token-gen/themes/Engage/colors.ts +++ b/token-gen/themes/Engage/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Engage/shadows.ts b/token-gen/themes/Engage/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Engage/shadows.ts +++ b/token-gen/themes/Engage/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Engage/spacing.ts b/token-gen/themes/Engage/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Engage/spacing.ts +++ b/token-gen/themes/Engage/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Engage/textStyles.ts b/token-gen/themes/Engage/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Engage/textStyles.ts +++ b/token-gen/themes/Engage/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Engage/typography.ts b/token-gen/themes/Engage/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Engage/typography.ts +++ b/token-gen/themes/Engage/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Form/colors.ts b/token-gen/themes/Form/colors.ts index 7968bad0..a08402a0 100644 --- a/token-gen/themes/Form/colors.ts +++ b/token-gen/themes/Form/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Form/shadows.ts b/token-gen/themes/Form/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Form/shadows.ts +++ b/token-gen/themes/Form/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Form/spacing.ts b/token-gen/themes/Form/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Form/spacing.ts +++ b/token-gen/themes/Form/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Form/textStyles.ts b/token-gen/themes/Form/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Form/textStyles.ts +++ b/token-gen/themes/Form/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Form/typography.ts b/token-gen/themes/Form/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Form/typography.ts +++ b/token-gen/themes/Form/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Govsg/colors.ts b/token-gen/themes/Govsg/colors.ts index 4345d2f3..fc9d1001 100644 --- a/token-gen/themes/Govsg/colors.ts +++ b/token-gen/themes/Govsg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Govsg/shadows.ts b/token-gen/themes/Govsg/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Govsg/shadows.ts +++ b/token-gen/themes/Govsg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Govsg/spacing.ts b/token-gen/themes/Govsg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Govsg/spacing.ts +++ b/token-gen/themes/Govsg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Govsg/textStyles.ts b/token-gen/themes/Govsg/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Govsg/textStyles.ts +++ b/token-gen/themes/Govsg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Govsg/typography.ts b/token-gen/themes/Govsg/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Govsg/typography.ts +++ b/token-gen/themes/Govsg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Isomer/colors.ts b/token-gen/themes/Isomer/colors.ts index 9dc6be7b..e0c8d958 100644 --- a/token-gen/themes/Isomer/colors.ts +++ b/token-gen/themes/Isomer/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Isomer/shadows.ts b/token-gen/themes/Isomer/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Isomer/shadows.ts +++ b/token-gen/themes/Isomer/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Isomer/spacing.ts b/token-gen/themes/Isomer/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Isomer/spacing.ts +++ b/token-gen/themes/Isomer/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Isomer/textStyles.ts b/token-gen/themes/Isomer/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Isomer/textStyles.ts +++ b/token-gen/themes/Isomer/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Isomer/typography.ts b/token-gen/themes/Isomer/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Isomer/typography.ts +++ b/token-gen/themes/Isomer/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Message/colors.ts b/token-gen/themes/Message/colors.ts index d53b7487..24f740ad 100644 --- a/token-gen/themes/Message/colors.ts +++ b/token-gen/themes/Message/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Message/shadows.ts b/token-gen/themes/Message/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Message/shadows.ts +++ b/token-gen/themes/Message/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Message/spacing.ts b/token-gen/themes/Message/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Message/spacing.ts +++ b/token-gen/themes/Message/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Message/textStyles.ts b/token-gen/themes/Message/textStyles.ts index 56b59c47..863729c7 100644 --- a/token-gen/themes/Message/textStyles.ts +++ b/token-gen/themes/Message/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Message/typography.ts b/token-gen/themes/Message/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Message/typography.ts +++ b/token-gen/themes/Message/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Pair/colors.ts b/token-gen/themes/Pair/colors.ts index 75f2a412..dbe7f3dd 100644 --- a/token-gen/themes/Pair/colors.ts +++ b/token-gen/themes/Pair/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Pair/shadows.ts b/token-gen/themes/Pair/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Pair/shadows.ts +++ b/token-gen/themes/Pair/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Pair/spacing.ts b/token-gen/themes/Pair/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Pair/spacing.ts +++ b/token-gen/themes/Pair/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Pair/textStyles.ts b/token-gen/themes/Pair/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Pair/textStyles.ts +++ b/token-gen/themes/Pair/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Pair/typography.ts b/token-gen/themes/Pair/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Pair/typography.ts +++ b/token-gen/themes/Pair/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/PaySG/colors.ts b/token-gen/themes/PaySG/colors.ts index caeeb10c..eed0b159 100644 --- a/token-gen/themes/PaySG/colors.ts +++ b/token-gen/themes/PaySG/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Phonebook/colors.ts b/token-gen/themes/Phonebook/colors.ts index e3c9a1be..418edeac 100644 --- a/token-gen/themes/Phonebook/colors.ts +++ b/token-gen/themes/Phonebook/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -42,16 +42,16 @@ export const colors = { '900': '#193234', }, secondary: { - '50': '#F7FBF7', - '100': '#E3F1DF', - '200': '#B7C2B4', - '300': '#9AA397', - '400': '#7E867C', - '500': '#636A62', - '600': '#50544E', - '700': '#454944', - '800': '#3B3E3A', - '900': '#2C2F2B', + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', }, }, utility: { @@ -185,14 +185,14 @@ export const colors = { active: '#64ABB4', }, sub: { - default: '#636A62', - hover: '#50544E', - active: '#454944', + default: '#1361F0', + hover: '#0D4FCA', + active: '#0B44AC', }, 'sub-subtle': { - default: '#E3F1DF', - hover: '#B7C2B4', - active: '#9AA397', + default: '#E7EFFC', + hover: '#ACC7FA', + active: '#82ABF7', }, critical: { default: '#c03434', @@ -240,8 +240,8 @@ export const colors = { active: '#DCECEE', }, sub: { - hover: '#F7FBF7', - active: '#E3F1DF', + hover: '#F7F9FE', + active: '#E7EFFC', }, critical: { hover: '#fef7f7', @@ -258,8 +258,8 @@ export const colors = { active: 'rgba(58, 112, 118, 0.12)', }, sub: { - hover: 'rgba(99, 106, 98, 0.04)', - active: 'rgba(99, 106, 98, 0.12)', + hover: 'rgba(19, 97, 240, 0.04)', + active: 'rgba(19, 97, 240, 0.12)', }, critical: { hover: 'rgba(192, 52, 52, 0.04)', diff --git a/token-gen/themes/Phonebook/shadows.ts b/token-gen/themes/Phonebook/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Phonebook/shadows.ts +++ b/token-gen/themes/Phonebook/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Phonebook/spacing.ts b/token-gen/themes/Phonebook/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Phonebook/spacing.ts +++ b/token-gen/themes/Phonebook/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Phonebook/textStyles.ts b/token-gen/themes/Phonebook/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Phonebook/textStyles.ts +++ b/token-gen/themes/Phonebook/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Phonebook/typography.ts b/token-gen/themes/Phonebook/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Phonebook/typography.ts +++ b/token-gen/themes/Phonebook/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/PinPoint/colors.ts b/token-gen/themes/PinPoint/colors.ts index f2a6f984..0fe01c24 100644 --- a/token-gen/themes/PinPoint/colors.ts +++ b/token-gen/themes/PinPoint/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/PinPoint/shadows.ts b/token-gen/themes/PinPoint/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/PinPoint/shadows.ts +++ b/token-gen/themes/PinPoint/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/PinPoint/spacing.ts b/token-gen/themes/PinPoint/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/PinPoint/spacing.ts +++ b/token-gen/themes/PinPoint/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/PinPoint/textStyles.ts b/token-gen/themes/PinPoint/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/PinPoint/textStyles.ts +++ b/token-gen/themes/PinPoint/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/PinPoint/typography.ts b/token-gen/themes/PinPoint/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/PinPoint/typography.ts +++ b/token-gen/themes/PinPoint/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Postman/colors.ts b/token-gen/themes/Postman/colors.ts index a3c8da19..e2007005 100644 --- a/token-gen/themes/Postman/colors.ts +++ b/token-gen/themes/Postman/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/Postman/shadows.ts b/token-gen/themes/Postman/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Postman/shadows.ts +++ b/token-gen/themes/Postman/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Postman/spacing.ts b/token-gen/themes/Postman/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Postman/spacing.ts +++ b/token-gen/themes/Postman/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Postman/textStyles.ts b/token-gen/themes/Postman/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Postman/textStyles.ts +++ b/token-gen/themes/Postman/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Postman/typography.ts b/token-gen/themes/Postman/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Postman/typography.ts +++ b/token-gen/themes/Postman/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/Redeem/colors.ts b/token-gen/themes/Redeem/colors.ts index ae8e11e3..d5d06699 100644 --- a/token-gen/themes/Redeem/colors.ts +++ b/token-gen/themes/Redeem/colors.ts @@ -1,171 +1,43 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { - purple: { - '50': '#F9F9FC', - '100': '#E8E9F3', - '200': '#BABDDB', - '300': '#999EC9', - '400': '#7A80B9', - '500': '#5B62A8', - '600': '#484E89', - '700': '#3E4477', - '800': '#353A66', - '900': '#282C4C', - }, - brand: { - primary: { - '50': '#F9F9FC', - '100': '#E8E9F3', - '200': '#BABDDB', - '300': '#999EC9', - '400': '#7A80B9', - '500': '#5B62A8', - '600': '#484E89', - '700': '#3E4477', - '800': '#353A66', - '900': '#282C4C', - }, - secondary: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', - }, - }, - blue: { - '50': '#F7F9FE', - '100': '#E7EFFC', - '200': '#ACC7FA', - '300': '#82ABF7', - '400': '#568DF4', - '500': '#1361F0', - '600': '#0D4FCA', - '700': '#0B44AC', - '800': '#093890', - '900': '#072A69', - }, - red: { - '50': '#fef7f7', - '100': '#FBE9E9', - '200': '#f4acac', - '300': '#ee8080', - '400': '#e74f4f', - '500': '#c03434', - '600': '#992a2a', - '700': '#852424', - '800': '#721f1f', - '900': '#571717', - }, - green: { - '50': '#F5FAFA', - '100': '#E2EEED', - '200': '#98CCC7', - '300': '#63B1AA', - '400': '#2D978C', - '500': '#0F796F', - '600': '#0C5F57', - '700': '#0A524B', - '800': '#09463F', - '900': '#073430', - }, - yellow: { - '50': '#fffae1', - '100': '#FFDA68', - '200': '#E2B73E', - '300': '#C4992A', - '400': '#A77C18', - '500': '#8B6005', - '600': '#704C00', - '700': '#624200', - '800': '#533800', - '900': '#3f2b00', - }, - slate: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', - }, - grey: { - '50': '#F8F9F9', - '100': '#EDEDED', - '200': '#BFC2C8', - '300': '#A0A4AD', - '400': '#838894', - '500': '#666C7A', - '600': '#505660', - '700': '#454953', - '800': '#3A3E46', - '900': '#2C2E34', - }, - standard: { - white: '#ffffff', - black: '#000000', - }, - skin: { - '1base': '#FFCAA4', - '1shadow': '#F5B896', - '2base': '#EBA687', - '2shadow': '#E29B7B', - '3base': '#D98F6F', - '3shadow': '#CE8361', - '4base': '#BF7657', - '4shadow': '#AF6D53', - '5base': '#9F634F', - '5shadow': '#8B5544', - '6base': '#764738', - '6shadow': '#633D32', - }, base: { canvas: { default: '#ffffff', - alt: '#F8F9F9', - backdrop: '#EDEDED', - 'brand-subtle': '#F9F9FC', - inverse: '#3A3E46', + alt: '#f6f7fb', + backdrop: '#ededed', + 'brand-subtle': '#f4f5fb', + inverse: '#333c56', overlay: 'rgba(58, 62, 70, 0.8)', }, content: { - default: '#454953', - strong: '#2C2E34', - medium: '#666C7A', - brand: '#5B62A8', + default: '#5d6785', + strong: '#333c56', + medium: '#7b849c', + brand: '#6469d8', inverse: '#ffffff', }, divider: { - subtle: '#F8F9F9', - medium: '#EDEDED', - strong: '#BFC2C8', + subtle: '#f8f9f9', + medium: '#ededed', + strong: '#babecb', inverse: '#ffffff', - brand: '#5B62A8', + brand: '#6469d8', }, }, interaction: { main: { - default: '#5B62A8', - hover: '#484E89', - active: '#3E4477', + default: '#6469d8', + hover: '#4b50be', + active: '#464bb4', }, 'main-subtle': { - default: '#E8E9F3', - hover: '#BABDDB', - active: '#999EC9', + default: '#e8e9f3', + hover: '#b6bae0', + active: '#a0a3e2', }, sub: { default: '#5d6785', @@ -173,7 +45,7 @@ export const colors = { active: '#3c4764', }, 'sub-subtle': { - default: '#e9eaee', + default: '#eaeef1', hover: '#babecb', active: '#9aa0b3', }, @@ -183,66 +55,66 @@ export const colors = { active: '#852424', }, 'critical-subtle': { - default: '#FBE9E9', + default: '#fef7f7', hover: '#f4acac', active: '#ee8080', }, warning: { - default: '#FFDA68', - hover: '#E2B73E', - active: '#C4992A', + default: '#ffda68', + hover: '#e2b73e', + active: '#c4992a', }, 'warning-subtle': { default: '#fffae1', - hover: '#FFDA68', - active: '#E2B73E', + hover: '#ffda68', + active: '#e2b73e', }, success: { - default: '#0F796F', - hover: '#0C5F57', - active: '#0A524B', + default: '#0a857d', + hover: '#0c5f57', + active: '#0a524b', }, 'success-subtle': { - default: '#E2EEED', - hover: '#98CCC7', - active: '#63B1AA', + default: '#d2f8ef', + hover: '#98ccc7', + active: '#63b1aa', }, neutral: { - default: '#666C7A', - hover: '#505660', - active: '#454953', + default: '#465173', + hover: '#3c4764', + active: '#333c56', }, 'neutral-subtle': { - default: '#EDEDED', - hover: '#BFC2C8', - active: '#A0A4AD', + default: '#eaeef1', + hover: '#babecb', + active: '#9aa0b3', }, muted: { main: { - hover: '#F9F9FC', - active: '#E8E9F3', + hover: '#f4f5fb', + active: '#e8e9f3', }, sub: { hover: '#f8f9fa', - active: '#e9eaee', + active: '#f4f5fb', }, critical: { hover: '#fef7f7', - active: '#FBE9E9', + active: '#fbe9e9', }, neutral: { - hover: '#F8F9F9', - active: '#EDEDED', + hover: '#f8f9f9', + active: '#ededed', }, }, tinted: { main: { - hover: 'rgba(91, 98, 168, 0.04)', - active: 'rgba(91, 98, 168, 0.12)', + hover: 'rgba(70, 75, 180, 0.04)', + active: 'rgba(55, 57, 109, 0.12)', }, sub: { - hover: 'rgba(93, 103, 133, 0.04)', - active: 'rgba(93, 103, 133, 0.12)', + hover: 'rgba(60, 71, 100, 0.04)', + active: 'rgba(51, 60, 86, 0.12)', }, critical: { hover: 'rgba(192, 52, 52, 0.04)', @@ -258,37 +130,165 @@ export const colors = { }, }, support: { - unselected: '#A0A4AD', - selected: '#666C7A', - 'unselected-strong': '#666C7A', - disabled: '#EDEDED', - 'disabled-content': '#A0A4AD', + unselected: '#a0a4ad', + selected: '#666c7a', + 'unselected-strong': '#505660', + disabled: '#ededed', + 'disabled-content': '#a0a4ad', placeholder: '#838894', }, links: { - default: '#5B62A8', - hover: '#484E89', + default: '#6469d8', + hover: '#4b50be', 'neutral-default': '#454953', - 'neutral-hover': '#2C2E34', + 'neutral-hover': '#2c2e34', 'inverse-default': '#ffffff', - 'inverse-hover': '#EDEDED', + 'inverse-hover': '#ededed', }, }, utility: { + 'focus-default': '#6469d8', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', feedback: { - info: '#1361F0', - 'info-subtle': '#F7F9FE', - warning: '#FFDA68', + info: '#1361f0', + 'info-subtle': '#f7f9fe', + warning: '#ffda68', 'warning-subtle': '#fffae1', - success: '#0F796F', - 'success-subtle': '#F5FAFA', + success: '#0f796f', + 'success-subtle': '#f5fafa', critical: '#c03434', 'critical-subtle': '#fef7f7', }, - 'focus-default': '#1361F0', - 'focus-inverse': '#ffffff', - 'input-prefilled': '#fffae1', - ui: '#ffffff', - 'ui-clear': 'rgba(255, 255, 255, 0)', + }, + purple: { + '50': '#f4f5fb', + '100': '#e8e9f3', + '200': '#b6bae0', + '300': '#a0a3e2', + '400': '#767be2', + '500': '#6469d8', + '600': '#4b50be', + '700': '#464bb4', + '800': '#37396d', + '900': '#2a2c55', + }, + brand: { + primary: { + '50': '#f9f9fc', + '100': '#e8e9f3', + '200': '#b6bae0', + '300': '#a0a3e2', + '400': '#767be2', + '500': '#6469d8', + '600': '#4b50be', + '700': '#464bb4', + '800': '#37396d', + '900': '#2a2c55', + }, + secondary: { + '50': '#f6f7fb', + '100': '#eaeef1', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#f7f9fe', + '100': '#e7effc', + '200': '#acc7fa', + '300': '#82abf7', + '400': '#568df4', + '500': '#1361f0', + '600': '#0d4fca', + '700': '#0b44ac', + '800': '#093890', + '900': '#072a69', + }, + red: { + '50': '#fef7f7', + '100': '#fbe9e9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#f5fafa', + '100': '#d2f8ef', + '200': '#98ccc7', + '300': '#63b1aa', + '400': '#2d978c', + '500': '#0a857d', + '600': '#0c5f57', + '700': '#0a524b', + '800': '#09463f', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#ffda68', + '200': '#e2b73e', + '300': '#c4992a', + '400': '#a77c18', + '500': '#8b6005', + '600': '#704c00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f6f7fb', + '100': '#eaeef1', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#f8f9f9', + '100': '#ededed', + '200': '#bfc2c8', + '300': '#a0a4ad', + '400': '#838894', + '500': '#666c7a', + '600': '#505660', + '700': '#454953', + '800': '#3a3e46', + '900': '#2c2e34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#ffcaa4', + '1shadow': '#f5b896', + '2base': '#eba687', + '2shadow': '#e29b7b', + '3base': '#d98f6f', + '3shadow': '#ce8361', + '4base': '#bf7657', + '4shadow': '#af6d53', + '5base': '#9f634f', + '5shadow': '#8b5544', + '6base': '#764738', + '6shadow': '#633d32', }, } diff --git a/token-gen/themes/Redeem/shadows.ts b/token-gen/themes/Redeem/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Redeem/shadows.ts +++ b/token-gen/themes/Redeem/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Redeem/spacing.ts b/token-gen/themes/Redeem/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Redeem/spacing.ts +++ b/token-gen/themes/Redeem/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Redeem/textStyles.ts b/token-gen/themes/Redeem/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/Redeem/textStyles.ts +++ b/token-gen/themes/Redeem/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Redeem/typography.ts b/token-gen/themes/Redeem/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Redeem/typography.ts +++ b/token-gen/themes/Redeem/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/ScamShield/colors.ts b/token-gen/themes/ScamShield/colors.ts index 30155329..30696ae0 100644 --- a/token-gen/themes/ScamShield/colors.ts +++ b/token-gen/themes/ScamShield/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/ScamShield/shadows.ts b/token-gen/themes/ScamShield/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/ScamShield/shadows.ts +++ b/token-gen/themes/ScamShield/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/ScamShield/spacing.ts b/token-gen/themes/ScamShield/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/ScamShield/spacing.ts +++ b/token-gen/themes/ScamShield/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/ScamShield/textStyles.ts b/token-gen/themes/ScamShield/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/ScamShield/textStyles.ts +++ b/token-gen/themes/ScamShield/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/ScamShield/typography.ts b/token-gen/themes/ScamShield/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/ScamShield/typography.ts +++ b/token-gen/themes/ScamShield/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/TEALS/colors.ts b/token-gen/themes/TEALS/colors.ts new file mode 100644 index 00000000..b1fc2030 --- /dev/null +++ b/token-gen/themes/TEALS/colors.ts @@ -0,0 +1,294 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + teal: { + '50': '#F5FBFC', + '100': '#DDF2F3', + '200': '#79CCD1', + '300': '#30B0B8', + '400': '#1B92A3', + '500': '#157383', + '600': '#115C6B', + '700': '#0F505E', + '800': '#0C4552', + '900': '#093440', + }, + blue: { + '50': '#F8F9FD', + '100': '#EDEFFB', + '200': '#B1BDEC', + '300': '#8C9DE4', + '400': '#687EDB', + '500': '#435ED1', + '600': '#354BA7', + '700': '#2E4191', + '800': '#28387C', + '900': '#1E2A5E', + }, + brand: { + primary: { + '50': '#F8F9FD', + '100': '#EDEFFB', + '200': '#B1BDEC', + '300': '#8C9DE4', + '400': '#8C9DE4', + '500': '#435ED1', + '600': '#354BA7', + '700': '#2E4191', + '800': '#28387C', + '900': '#1E2A5E', + }, + secondary: { + '50': '#F5FBFC', + '100': '#DDF2F3', + '200': '#79CCD1', + '300': '#30B0B8', + '400': '#1B92A3', + '500': '#157383', + '600': '#115C6B', + '700': '#0F505E', + '800': '#0C4552', + '900': '#093440', + }, + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#F8F9FD', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#435ED1', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#435ED1', + }, + }, + interaction: { + main: { + default: '#435ED1', + hover: '#354BA7', + active: '#2E4191', + }, + 'main-subtle': { + default: '#EDEFFB', + hover: '#B1BDEC', + active: '#8C9DE4', + }, + sub: { + default: '#157383', + hover: '#115C6B', + active: '#0F505E', + }, + 'sub-subtle': { + default: '#DDF2F3', + hover: '#79CCD1', + active: '#30B0B8', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#F8F9FD', + active: '#EDEFFB', + }, + sub: { + hover: '#F5FBFC', + active: '#DDF2F3', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(67, 94, 209, 0.04)', + active: 'rgba(67, 94, 209, 0.12)', + }, + sub: { + hover: 'rgba(21, 115, 131, 0.04)', + active: 'rgba(21, 115, 131, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#435ED1', + hover: '#354BA7', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#435ED1', + 'info-subtle': '#F8F9FD', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#435ED1', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/token-gen/themes/TEALS/shadows.ts b/token-gen/themes/TEALS/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/token-gen/themes/TEALS/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/token-gen/themes/TEALS/spacing.ts b/token-gen/themes/TEALS/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/token-gen/themes/TEALS/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/token-gen/themes/TEALS/textStyles.ts b/token-gen/themes/TEALS/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/token-gen/themes/TEALS/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/token-gen/themes/TEALS/typography.ts b/token-gen/themes/TEALS/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/token-gen/themes/TEALS/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/token-gen/themes/Vault/colors.ts b/token-gen/themes/Vault/colors.ts index a77fe89f..3553f262 100644 --- a/token-gen/themes/Vault/colors.ts +++ b/token-gen/themes/Vault/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -11,10 +11,10 @@ export const colors = { '300': '#A89FF2', '400': '#877cee', '500': '#6253E8', - '600': '#4D3DD8', - '700': '#4335BD', - '800': '#3B2eA4', - '900': '#2B227A', + '600': '#4E49A8', + '700': '#44418B', + '800': '#2E2F55', + '900': '#151523', }, brand: { primary: { @@ -24,10 +24,10 @@ export const colors = { '300': '#A89FF2', '400': '#877cee', '500': '#6253E8', - '600': '#4D3DD8', - '700': '#4335BD', - '800': '#3B2eA4', - '900': '#2B227A', + '600': '#4E49A8', + '700': '#44418B', + '800': '#2E2F55', + '900': '#151523', }, secondary: { '50': '#F9F9F9', @@ -54,23 +54,16 @@ export const colors = { '800': '#3D3D3D', '900': '#2E2E2E', }, - chart: { - sky: '#61B8F6', - bumblebee: '#EFC200', - pink: '#DA627D', - pandan: '#00CB2D', - violet: '#7731BE', - }, interaction: { main: { - active: '#4D3DD8', + active: '#4E49A8', default: '#6253E8', - hover: '#4D3DD8', + hover: '#4E49A8', }, sub: { - default: '#2E2E2E', - hover: '#000000', - active: '#000000', + default: '#151523', + hover: '#2E2F55', + active: '#44418B', }, support: { placeholder: '#848484', @@ -172,7 +165,7 @@ export const colors = { }, links: { default: '#6253E8', - hover: '#4D3DD8', + hover: '#4E49A8', 'neutral-default': '#474747', 'neutral-hover': '#2E2E2E', 'inverse-default': '#ffffff', @@ -181,7 +174,7 @@ export const colors = { }, base: { canvas: { - inverse: '#2E2E2E', + inverse: '#151523', default: '#ffffff', alt: '#F9F9F9', backdrop: '#E9EAEE', @@ -222,6 +215,99 @@ export const colors = { ui: '#ffffff', 'ui-clear': 'rgba(255, 255, 255, 0)', }, + visualisation: { + green: { + '100': '#E4F1DA', + '300': '#83B35D', + '500': '#5A7B40', + '700': '#364926', + }, + teal: { + '100': '#EBF6F5', + '300': '#5EB3AD', + '500': '#247F79', + '700': '#154B48', + }, + turqoise: { + '100': '#E5F6FA', + '300': '#34B3D1', + '500': '#247C91', + '700': '#154956', + }, + blue: { + '100': '#ECF4FF', + '300': '#65A7FF', + '500': '#3072C9', + '700': '#1C4477', + }, + azure: { + '100': '#F1F3FF', + '300': '#8CA0FD', + '500': '#566BCD', + '700': '#333F79', + }, + violet: { + '100': '#F8F2FB', + '300': '#C493DB', + '500': '#9E50C5', + '700': '#622A7E', + }, + pink: { + '100': '#FEF1F8', + '300': '#F47EBD', + '500': '#CD3284', + '700': '#7B1E4F', + }, + crimson: { + '100': '#FCF0F0', + '300': '#E78C8C', + '500': '#D43636', + '700': '#7F2020', + }, + orange: { + '100': '#FFF2DC', + '300': '#E79300', + '500': '#A06600', + '700': '#5F3C00', + }, + sequential: { + '100': '#ecda9a', + '200': '#efc47e', + '300': '#f3ad6a', + '400': '#f7945d', + '500': '#f97b57', + '600': '#f66356', + '700': '#ee4d5a', + }, + diverging: { + '100': '#fadaec', + '200': '#d75da2', + '300': '#bb1f78', + '400': '#eaf5dc', + '500': '#cceaa8', + '600': '#5e9f2c', + '700': '#276419', + }, + qualitative: { + teal: '#66c4cc', + yellow: '#f6d071', + orange: '#f89c74', + lightpurple: '#dcaff1', + green: '#86c55e', + blue: '#9eb9f3', + pink: '#fd88b1', + lime: '#c9db74', + mint: '#8ce0a4', + purple: '#b497e6', + brown: '#d3b484', + grey: '#b3b3b3', + }, + }, + gradient: { + purple: 'linear-gradient(180deg, #f8f2fb 0%, #f8f2fb00 100%)', + darkpurple: 'linear-gradient(180deg, #f7e6ff 0%, #f8f2fb00 100%)', + red: 'linear-gradient(180deg, #ffe7e7 0%, #fcf0f000 100%)', + }, blue: { '50': '#F7F9FE', '100': '#E7EFFC', diff --git a/token-gen/themes/Vault/shadows.ts b/token-gen/themes/Vault/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/Vault/shadows.ts +++ b/token-gen/themes/Vault/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/Vault/spacing.ts b/token-gen/themes/Vault/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/Vault/spacing.ts +++ b/token-gen/themes/Vault/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/Vault/textStyles.ts b/token-gen/themes/Vault/textStyles.ts index 1aef574a..efdff6ba 100644 --- a/token-gen/themes/Vault/textStyles.ts +++ b/token-gen/themes/Vault/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/Vault/typography.ts b/token-gen/themes/Vault/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/Vault/typography.ts +++ b/token-gen/themes/Vault/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/activesg/colors.ts b/token-gen/themes/activesg/colors.ts index 156f7b85..caeb73d2 100644 --- a/token-gen/themes/activesg/colors.ts +++ b/token-gen/themes/activesg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { @@ -30,16 +30,16 @@ export const colors = { '900': '#580D0F', }, secondary: { - '50': '#f8f9fa', - '100': '#e9eaee', - '200': '#babecb', - '300': '#9aa0b3', - '400': '#7b849c', - '500': '#5d6785', - '600': '#465173', - '700': '#3c4764', - '800': '#333c56', - '900': '#272d41', + '50': '#FAFAFA', + '100': '#E5E5E5', + '200': '#D4D4D4', + '300': '#B0B0B0', + '400': '#737373', + '500': '#525252', + '600': '#404040', + '700': '#262626', + '800': '#171717', + '900': '#0a0a0a', }, }, pink: { @@ -47,14 +47,14 @@ export const colors = { }, interaction: { main: { - default: 'linear-gradient (45 deg, #CB0935 0%, #FF383E 100%)', - hover: 'linear-gradient (45deg, #A4092B 0%, #CC2D32 100%)', - active: 'linear-gradient (45 deg, #7A0620 0%, #992226 100%)', + default: '#CB0935', + hover: '#AC0B2F', + active: '#880D27', }, sub: { - default: '#272d41', - hover: '#333c56', - active: '#3c4764', + default: '#171717', + hover: '#0a0a0a', + active: '#0a0a0a', }, 'main-subtle': { default: '#FBE9E9', @@ -62,9 +62,9 @@ export const colors = { active: '#EA8181', }, 'sub-subtle': { - default: '#e9eaee', - hover: '#babecb', - active: '#9aa0b3', + default: '#E5E5E5', + hover: '#D4D4D4', + active: '#B0B0B0', }, critical: { default: '#CB0935', @@ -97,14 +97,14 @@ export const colors = { active: '#63B1AA', }, neutral: { - default: '#666C7A', - hover: '#505660', - active: '#454953', + default: '#525252', + hover: '#404040', + active: '#262626', }, 'neutral-subtle': { - default: '#EDEDED', - hover: '#BFC2C8', - active: '#A0A4AD', + default: '#E5E5E5', + hover: '#D4D4D4', + active: '#B0B0B0', }, muted: { main: { @@ -112,16 +112,16 @@ export const colors = { active: '#FBE9E9', }, sub: { - hover: '#f8f9fa', - active: '#e9eaee', + hover: '#FAFAFA', + active: '#E5E5E5', }, critical: { hover: '#FEF7F7', active: '#FBE9E9', }, neutral: { - hover: '#F8F9F9', - active: '#EDEDED', + hover: '#FAFAFA', + active: '#E5E5E5', }, }, tinted: { @@ -130,8 +130,8 @@ export const colors = { active: 'rgba(203, 9, 53, 0.12)', }, sub: { - hover: 'rgba(93, 103, 133, 0.04)', - active: 'rgba(93, 103, 133, 0.12)', + hover: 'rgba(82, 82, 82, 0.04)', + active: 'rgba(82, 82, 82, 0.12)', }, critical: { hover: 'rgba(203, 9, 53, 0.04)', @@ -147,22 +147,75 @@ export const colors = { }, }, support: { - unselected: '#A0A4AD', - selected: '#666C7A', - 'unselected-strong': '#666C7A', - disabled: '#EDEDED', - 'disabled-content': '#A0A4AD', - placeholder: '#838894', + unselected: '#B0B0B0', + selected: '#525252', + 'unselected-strong': '#525252', + disabled: '#E5E5E5', + 'disabled-content': '#B0B0B0', + placeholder: '#737373', }, links: { default: '#CB0935', hover: '#AC0B2F', - 'neutral-default': '#454953', - 'neutral-hover': '#2C2E34', + 'neutral-default': '#262626', + 'neutral-hover': '#0a0a0a', 'inverse-default': '#ffffff', - 'inverse-hover': '#EDEDED', + 'inverse-hover': '#E5E5E5', + }, + }, + grey: { + '50': '#FAFAFA', + '100': '#E5E5E5', + '200': '#D4D4D4', + '300': '#B0B0B0', + '400': '#737373', + '500': '#525252', + '600': '#404040', + '700': '#262626', + '800': '#171717', + '900': '#0a0a0a', + }, + base: { + divider: { + subtle: '#FAFAFA', + medium: '#E5E5E5', + strong: '#B0B0B0', + inverse: '#ffffff', + brand: '#CB0935', + }, + content: { + default: '#525252', + strong: '#262626', + medium: '#737373', + brand: '#CB0935', + inverse: '#ffffff', + }, + canvas: { + default: '#ffffff', + alt: '#FAFAFA', + backdrop: '#E5E5E5', + 'brand-subtle': '#FEF7F7', + inverse: '#171717', + overlay: 'rgba(23, 23, 23, 0.8)', }, }, + utility: { + feedback: { + info: '#171717', + 'info-subtle': '#FAFAFA', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#CB0935', + 'critical-subtle': '#FEF7F7', + }, + 'focus-default': '#171717', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, blue: { '50': '#F7F9FE', '100': '#E7EFFC', @@ -211,18 +264,6 @@ export const colors = { '800': '#333c56', '900': '#272d41', }, - grey: { - '50': '#F8F9F9', - '100': '#EDEDED', - '200': '#BFC2C8', - '300': '#A0A4AD', - '400': '#838894', - '500': '#666C7A', - '600': '#505660', - '700': '#454953', - '800': '#3A3E46', - '900': '#2C2E34', - }, standard: { white: '#ffffff', black: '#000000', @@ -241,45 +282,4 @@ export const colors = { '6base': '#764738', '6shadow': '#633D32', }, - base: { - canvas: { - default: '#ffffff', - alt: '#F8F9F9', - backdrop: '#EDEDED', - 'brand-subtle': '#FEF7F7', - inverse: '#3A3E46', - overlay: 'rgba(58, 62, 70, 0.8)', - }, - content: { - default: '#454953', - strong: '#2C2E34', - medium: '#666C7A', - brand: '#CB0935', - inverse: '#ffffff', - }, - divider: { - subtle: '#F8F9F9', - medium: '#EDEDED', - strong: '#BFC2C8', - inverse: '#ffffff', - brand: '#CB0935', - }, - }, - utility: { - feedback: { - info: '#1361F0', - 'info-subtle': '#F7F9FE', - warning: '#FFDA68', - 'warning-subtle': '#fffae1', - success: '#0F796F', - 'success-subtle': '#F5FAFA', - critical: '#CB0935', - 'critical-subtle': '#FEF7F7', - }, - 'focus-default': '#1361F0', - 'focus-inverse': '#ffffff', - 'input-prefilled': '#fffae1', - ui: '#ffffff', - 'ui-clear': 'rgba(255, 255, 255, 0)', - }, } diff --git a/token-gen/themes/activesg/shadows.ts b/token-gen/themes/activesg/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/activesg/shadows.ts +++ b/token-gen/themes/activesg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/activesg/spacing.ts b/token-gen/themes/activesg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/activesg/spacing.ts +++ b/token-gen/themes/activesg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/activesg/textStyles.ts b/token-gen/themes/activesg/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/activesg/textStyles.ts +++ b/token-gen/themes/activesg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/activesg/typography.ts b/token-gen/themes/activesg/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/activesg/typography.ts +++ b/token-gen/themes/activesg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/byos/colors.ts b/token-gen/themes/byos/colors.ts index ecb98bfd..e0db2926 100644 --- a/token-gen/themes/byos/colors.ts +++ b/token-gen/themes/byos/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/byos/shadows.ts b/token-gen/themes/byos/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/byos/shadows.ts +++ b/token-gen/themes/byos/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/byos/spacing.ts b/token-gen/themes/byos/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/byos/spacing.ts +++ b/token-gen/themes/byos/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/byos/textStyles.ts b/token-gen/themes/byos/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/byos/textStyles.ts +++ b/token-gen/themes/byos/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/byos/typography.ts b/token-gen/themes/byos/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/byos/typography.ts +++ b/token-gen/themes/byos/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/default/colors.ts b/token-gen/themes/default/colors.ts index 5517b00a..c5ce68b4 100644 --- a/token-gen/themes/default/colors.ts +++ b/token-gen/themes/default/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/default/shadows.ts b/token-gen/themes/default/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/default/shadows.ts +++ b/token-gen/themes/default/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/default/spacing.ts b/token-gen/themes/default/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/default/spacing.ts +++ b/token-gen/themes/default/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/default/textStyles.ts b/token-gen/themes/default/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/default/textStyles.ts +++ b/token-gen/themes/default/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/default/typography.ts b/token-gen/themes/default/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/default/typography.ts +++ b/token-gen/themes/default/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/folk/colors.ts b/token-gen/themes/folk/colors.ts index 91111bd1..d1fd4836 100644 --- a/token-gen/themes/folk/colors.ts +++ b/token-gen/themes/folk/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/folk/shadows.ts b/token-gen/themes/folk/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/folk/shadows.ts +++ b/token-gen/themes/folk/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/folk/spacing.ts b/token-gen/themes/folk/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/folk/spacing.ts +++ b/token-gen/themes/folk/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/folk/textStyles.ts b/token-gen/themes/folk/textStyles.ts index 4dda5222..3311256f 100644 --- a/token-gen/themes/folk/textStyles.ts +++ b/token-gen/themes/folk/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/folk/typography.ts b/token-gen/themes/folk/typography.ts index 5ad4c188..13ea1691 100644 --- a/token-gen/themes/folk/typography.ts +++ b/token-gen/themes/folk/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/forest/colors.ts b/token-gen/themes/forest/colors.ts index 6d36124d..c4442286 100644 --- a/token-gen/themes/forest/colors.ts +++ b/token-gen/themes/forest/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/forest/shadows.ts b/token-gen/themes/forest/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/forest/shadows.ts +++ b/token-gen/themes/forest/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/forest/spacing.ts b/token-gen/themes/forest/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/forest/spacing.ts +++ b/token-gen/themes/forest/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/forest/textStyles.ts b/token-gen/themes/forest/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/forest/textStyles.ts +++ b/token-gen/themes/forest/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/forest/typography.ts b/token-gen/themes/forest/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/forest/typography.ts +++ b/token-gen/themes/forest/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/fynder/colors.ts b/token-gen/themes/fynder/colors.ts new file mode 100644 index 00000000..e02c2747 --- /dev/null +++ b/token-gen/themes/fynder/colors.ts @@ -0,0 +1,294 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const colors = { + purple: { + '50': '#FEFEFF', + '100': '#F4F2FF', + '200': '#C2C1FD', + '300': '#8F94FD', + '400': '#6461FB', + '500': '#5B4DFA', + '600': '#533BEA', + '700': '#4A33D9', + '800': '#412CC3', + '900': '#33229A', + }, + brand: { + primary: { + '50': '#FEFEFF', + '100': '#F4F2FF', + '200': '#C2C1FD', + '300': '#8F94FD', + '400': '#6461FB', + '500': '#5B4DFA', + '600': '#533BEA', + '700': '#4A33D9', + '800': '#412CC3', + '900': '#33229A', + }, + secondary: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + }, + blue: { + '50': '#F7F9FE', + '100': '#E7EFFC', + '200': '#ACC7FA', + '300': '#82ABF7', + '400': '#568DF4', + '500': '#1361F0', + '600': '#0D4FCA', + '700': '#0B44AC', + '800': '#093890', + '900': '#072A69', + }, + red: { + '50': '#fef7f7', + '100': '#FBE9E9', + '200': '#f4acac', + '300': '#ee8080', + '400': '#e74f4f', + '500': '#c03434', + '600': '#992a2a', + '700': '#852424', + '800': '#721f1f', + '900': '#571717', + }, + green: { + '50': '#F5FAFA', + '100': '#E2EEED', + '200': '#98CCC7', + '300': '#63B1AA', + '400': '#2D978C', + '500': '#0F796F', + '600': '#0C5F57', + '700': '#0A524B', + '800': '#09463F', + '900': '#073430', + }, + yellow: { + '50': '#fffae1', + '100': '#FFDA68', + '200': '#E2B73E', + '300': '#C4992A', + '400': '#A77C18', + '500': '#8B6005', + '600': '#704C00', + '700': '#624200', + '800': '#533800', + '900': '#3f2b00', + }, + slate: { + '50': '#f8f9fa', + '100': '#e9eaee', + '200': '#babecb', + '300': '#9aa0b3', + '400': '#7b849c', + '500': '#5d6785', + '600': '#465173', + '700': '#3c4764', + '800': '#333c56', + '900': '#272d41', + }, + grey: { + '50': '#F8F9F9', + '100': '#EDEDED', + '200': '#BFC2C8', + '300': '#A0A4AD', + '400': '#838894', + '500': '#666C7A', + '600': '#505660', + '700': '#454953', + '800': '#3A3E46', + '900': '#2C2E34', + }, + standard: { + white: '#ffffff', + black: '#000000', + }, + skin: { + '1base': '#FFCAA4', + '1shadow': '#F5B896', + '2base': '#EBA687', + '2shadow': '#E29B7B', + '3base': '#D98F6F', + '3shadow': '#CE8361', + '4base': '#BF7657', + '4shadow': '#AF6D53', + '5base': '#9F634F', + '5shadow': '#8B5544', + '6base': '#764738', + '6shadow': '#633D32', + }, + base: { + canvas: { + default: '#ffffff', + alt: '#F8F9F9', + backdrop: '#EDEDED', + 'brand-subtle': '#FEFEFF', + inverse: '#3A3E46', + overlay: 'rgba(58, 62, 70, 0.8)', + }, + content: { + default: '#454953', + strong: '#2C2E34', + medium: '#666C7A', + brand: '#5B4DFA', + inverse: '#ffffff', + }, + divider: { + subtle: '#F8F9F9', + medium: '#EDEDED', + strong: '#BFC2C8', + inverse: '#ffffff', + brand: '#5B4DFA', + }, + }, + interaction: { + main: { + default: '#5B4DFA', + hover: '#533BEA', + active: '#4A33D9', + }, + 'main-subtle': { + default: '#F4F2FF', + hover: '#C2C1FD', + active: '#8F94FD', + }, + sub: { + default: '#5d6785', + hover: '#465173', + active: '#3c4764', + }, + 'sub-subtle': { + default: '#e9eaee', + hover: '#babecb', + active: '#9aa0b3', + }, + critical: { + default: '#c03434', + hover: '#992a2a', + active: '#852424', + }, + 'critical-subtle': { + default: '#FBE9E9', + hover: '#f4acac', + active: '#ee8080', + }, + warning: { + default: '#FFDA68', + hover: '#E2B73E', + active: '#C4992A', + }, + 'warning-subtle': { + default: '#fffae1', + hover: '#FFDA68', + active: '#E2B73E', + }, + success: { + default: '#0F796F', + hover: '#0C5F57', + active: '#0A524B', + }, + 'success-subtle': { + default: '#E2EEED', + hover: '#98CCC7', + active: '#63B1AA', + }, + neutral: { + default: '#666C7A', + hover: '#505660', + active: '#454953', + }, + 'neutral-subtle': { + default: '#EDEDED', + hover: '#BFC2C8', + active: '#A0A4AD', + }, + muted: { + main: { + hover: '#FEFEFF', + active: '#F4F2FF', + }, + sub: { + hover: '#f8f9fa', + active: '#e9eaee', + }, + critical: { + hover: '#fef7f7', + active: '#FBE9E9', + }, + neutral: { + hover: '#F8F9F9', + active: '#EDEDED', + }, + }, + tinted: { + main: { + hover: 'rgba(91, 77, 250, 0.04)', + active: 'rgba(91, 77, 250, 0.12)', + }, + sub: { + hover: 'rgba(93, 103, 133, 0.04)', + active: 'rgba(93, 103, 133, 0.12)', + }, + critical: { + hover: 'rgba(192, 52, 52, 0.04)', + active: 'rgba(192, 52, 52, 0.12)', + }, + neutral: { + hover: 'rgba(0, 0, 0, 0.1)', + active: 'rgba(0, 0, 0, 0.2)', + }, + inverse: { + hover: 'rgba(255, 255, 255, 0.1)', + active: 'rgba(255, 255, 255, 0.2)', + }, + }, + support: { + unselected: '#A0A4AD', + selected: '#666C7A', + 'unselected-strong': '#666C7A', + disabled: '#EDEDED', + 'disabled-content': '#A0A4AD', + placeholder: '#838894', + }, + links: { + default: '#5B4DFA', + hover: '#533BEA', + 'neutral-default': '#454953', + 'neutral-hover': '#2C2E34', + 'inverse-default': '#ffffff', + 'inverse-hover': '#EDEDED', + }, + }, + utility: { + feedback: { + info: '#1361F0', + 'info-subtle': '#F7F9FE', + warning: '#FFDA68', + 'warning-subtle': '#fffae1', + success: '#0F796F', + 'success-subtle': '#F5FAFA', + critical: '#c03434', + 'critical-subtle': '#fef7f7', + }, + 'focus-default': '#1361F0', + 'focus-inverse': '#ffffff', + 'input-prefilled': '#fffae1', + ui: '#ffffff', + 'ui-clear': 'rgba(255, 255, 255, 0)', + }, +} diff --git a/token-gen/themes/fynder/shadows.ts b/token-gen/themes/fynder/shadows.ts new file mode 100644 index 00000000..5116a4f4 --- /dev/null +++ b/token-gen/themes/fynder/shadows.ts @@ -0,0 +1,9 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const shadows = { + sm: '0px 0px 10px 0px rgba(191, 191, 191, 0.5)', + md: '0px 0px 20px 0px rgba(104, 104, 104, 0.3)', +} diff --git a/token-gen/themes/fynder/spacing.ts b/token-gen/themes/fynder/spacing.ts new file mode 100644 index 00000000..5d0bdc2c --- /dev/null +++ b/token-gen/themes/fynder/spacing.ts @@ -0,0 +1,21 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const spacing = { + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.5rem', + '14': '4rem', +} diff --git a/token-gen/themes/fynder/textStyles.ts b/token-gen/themes/fynder/textStyles.ts new file mode 100644 index 00000000..09201498 --- /dev/null +++ b/token-gen/themes/fynder/textStyles.ts @@ -0,0 +1,223 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const textStyles = { + 'responsive-display': { + 'heavy-1280': { + fontWeight: 700, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 700, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '4.5rem', + fontSize: '4rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '4rem', + fontSize: '3.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + 'responsive-heading': { + 'heavy-1280': { + fontWeight: 600, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'heavy-480': { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + heavy: { + fontWeight: 600, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-1280': { + fontWeight: 300, + lineHeight: '3.5rem', + fontSize: '3rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + 'light-480': { + fontWeight: 300, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + light: { + fontWeight: 300, + lineHeight: '2.5rem', + fontSize: '2rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + }, + h1: { + fontWeight: 600, + lineHeight: '3rem', + fontSize: '2.5rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h2: { + fontWeight: 600, + lineHeight: '2.75rem', + fontSize: '2.25rem', + letterSpacing: '-0.022em', + fontFamily: 'body', + }, + h3: { + fontWeight: 700, + lineHeight: '2.25rem', + fontSize: '1.75rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h4: { + fontWeight: 600, + lineHeight: '2rem', + fontSize: '1.5rem', + letterSpacing: '-0.019em', + fontFamily: 'body', + }, + h5: { + fontWeight: 600, + lineHeight: '1.75rem', + fontSize: '1.25rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + h6: { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1.125rem', + letterSpacing: '-0.014em', + fontFamily: 'body', + }, + 'subhead-1': { + fontWeight: 500, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'subhead-2': { + fontWeight: 500, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'subhead-3': { + fontWeight: 600, + lineHeight: '1.5rem', + fontSize: '0.875rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'body-1': { + fontWeight: 400, + lineHeight: '1.5rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'body-2': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'body-3': { + fontWeight: 400, + lineHeight: '1.75rem', + fontSize: '1rem', + letterSpacing: '-0.006em', + fontFamily: 'body', + }, + 'caption-1': { + fontWeight: 500, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'body', + }, + 'caption-3': { + fontWeight: 500, + fontSize: '0.625rem', + lineHeight: '1rem', + letterSpacing: '0.080em', + fontFamily: 'body', + textTransform: 'uppercase', + }, + 'code-1': { + fontWeight: 400, + lineHeight: '1.25rem', + fontSize: '0.875rem', + letterSpacing: 0, + fontFamily: 'code', + }, + 'code-2': { + fontWeight: 400, + lineHeight: '1rem', + fontSize: '0.75rem', + letterSpacing: 0, + fontFamily: 'code', + }, + legal: { + fontWeight: 400, + lineHeight: '0.75rem', + fontSize: '0.625rem', + letterSpacing: 0, + fontFamily: 'body', + }, +} diff --git a/token-gen/themes/fynder/typography.ts b/token-gen/themes/fynder/typography.ts new file mode 100644 index 00000000..8d76d754 --- /dev/null +++ b/token-gen/themes/fynder/typography.ts @@ -0,0 +1,65 @@ +/** + * Do not edit directly + * Generated on Tue, 08 Oct 2024 07:57:33 GMT + */ + +export const typography = { + fontFamilies: { + inter: 'Inter', + ibmplexmono: 'IBM Plex Mono', + }, + lineHeights: { + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '7': '1.75rem', + '8': '2rem', + '9': '2.25rem', + '10': '2.5rem', + '11': '2.75rem', + '12': '3rem', + '13': '3.25rem', + '14': '3.5rem', + '15': '3.75rem', + '16': '4rem', + '17': '4.25rem', + '18': '4.5rem', + }, + fontWeights: { + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + }, + fontSize: { + '2xs': '0.625rem', + xs: '0.75rem', + sm: '0.875rem', + md: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem', + '3xl': '1.75rem', + '4xl': '2rem', + '5xl': '2.25rem', + '6xl': '2.5rem', + '7xl': '2.75rem', + '8xl': '3rem', + '9xl': '3.5rem', + '10xl': '4rem', + '11xl': '4.5rem', + }, + letterSpacing: { + '1': '-0.006em', + '2': '-0.014em', + '3': '-0.019em', + '4': '-0.022em', + wide: '0.080em', + normal: 0, + }, + paragraphSpacing: { + '0': 0, + }, +} diff --git a/token-gen/themes/hichew/colors.ts b/token-gen/themes/hichew/colors.ts index 6705de44..229a1514 100644 --- a/token-gen/themes/hichew/colors.ts +++ b/token-gen/themes/hichew/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/hichew/shadows.ts b/token-gen/themes/hichew/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/hichew/shadows.ts +++ b/token-gen/themes/hichew/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/hichew/spacing.ts b/token-gen/themes/hichew/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/hichew/spacing.ts +++ b/token-gen/themes/hichew/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/hichew/textStyles.ts b/token-gen/themes/hichew/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/hichew/textStyles.ts +++ b/token-gen/themes/hichew/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/hichew/typography.ts b/token-gen/themes/hichew/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/hichew/typography.ts +++ b/token-gen/themes/hichew/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/jujube/colors.ts b/token-gen/themes/jujube/colors.ts index 7f908c1c..d8898cf9 100644 --- a/token-gen/themes/jujube/colors.ts +++ b/token-gen/themes/jujube/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/jujube/shadows.ts b/token-gen/themes/jujube/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/jujube/shadows.ts +++ b/token-gen/themes/jujube/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/jujube/spacing.ts b/token-gen/themes/jujube/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/jujube/spacing.ts +++ b/token-gen/themes/jujube/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/jujube/textStyles.ts b/token-gen/themes/jujube/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/jujube/textStyles.ts +++ b/token-gen/themes/jujube/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/jujube/typography.ts b/token-gen/themes/jujube/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/jujube/typography.ts +++ b/token-gen/themes/jujube/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/lettersg/colors.ts b/token-gen/themes/lettersg/colors.ts index 1660f464..def5b0ff 100644 --- a/token-gen/themes/lettersg/colors.ts +++ b/token-gen/themes/lettersg/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/lettersg/shadows.ts b/token-gen/themes/lettersg/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/lettersg/shadows.ts +++ b/token-gen/themes/lettersg/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/lettersg/spacing.ts b/token-gen/themes/lettersg/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/lettersg/spacing.ts +++ b/token-gen/themes/lettersg/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/lettersg/textStyles.ts b/token-gen/themes/lettersg/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/lettersg/textStyles.ts +++ b/token-gen/themes/lettersg/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/lettersg/typography.ts b/token-gen/themes/lettersg/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/lettersg/typography.ts +++ b/token-gen/themes/lettersg/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/psl/colors.ts b/token-gen/themes/psl/colors.ts index f48683b1..0ec0a809 100644 --- a/token-gen/themes/psl/colors.ts +++ b/token-gen/themes/psl/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/psl/shadows.ts b/token-gen/themes/psl/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/psl/shadows.ts +++ b/token-gen/themes/psl/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/psl/spacing.ts b/token-gen/themes/psl/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/psl/spacing.ts +++ b/token-gen/themes/psl/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/psl/textStyles.ts b/token-gen/themes/psl/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/psl/textStyles.ts +++ b/token-gen/themes/psl/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/psl/typography.ts b/token-gen/themes/psl/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/psl/typography.ts +++ b/token-gen/themes/psl/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/sgid-singpass/colors.ts b/token-gen/themes/sgid-singpass/colors.ts index d775eb95..e9ae4a9f 100644 --- a/token-gen/themes/sgid-singpass/colors.ts +++ b/token-gen/themes/sgid-singpass/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/sgid-singpass/shadows.ts b/token-gen/themes/sgid-singpass/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/sgid-singpass/shadows.ts +++ b/token-gen/themes/sgid-singpass/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/sgid-singpass/spacing.ts b/token-gen/themes/sgid-singpass/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/sgid-singpass/spacing.ts +++ b/token-gen/themes/sgid-singpass/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/sgid-singpass/textStyles.ts b/token-gen/themes/sgid-singpass/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/sgid-singpass/textStyles.ts +++ b/token-gen/themes/sgid-singpass/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/sgid-singpass/typography.ts b/token-gen/themes/sgid-singpass/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/sgid-singpass/typography.ts +++ b/token-gen/themes/sgid-singpass/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/themes/whale/colors.ts b/token-gen/themes/whale/colors.ts index ae66b5f2..dc50d61b 100644 --- a/token-gen/themes/whale/colors.ts +++ b/token-gen/themes/whale/colors.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const colors = { diff --git a/token-gen/themes/whale/shadows.ts b/token-gen/themes/whale/shadows.ts index 631416f9..5116a4f4 100644 --- a/token-gen/themes/whale/shadows.ts +++ b/token-gen/themes/whale/shadows.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const shadows = { diff --git a/token-gen/themes/whale/spacing.ts b/token-gen/themes/whale/spacing.ts index 969b4d4b..5d0bdc2c 100644 --- a/token-gen/themes/whale/spacing.ts +++ b/token-gen/themes/whale/spacing.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const spacing = { diff --git a/token-gen/themes/whale/textStyles.ts b/token-gen/themes/whale/textStyles.ts index 40488581..09201498 100644 --- a/token-gen/themes/whale/textStyles.ts +++ b/token-gen/themes/whale/textStyles.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const textStyles = { diff --git a/token-gen/themes/whale/typography.ts b/token-gen/themes/whale/typography.ts index 854af73a..8d76d754 100644 --- a/token-gen/themes/whale/typography.ts +++ b/token-gen/themes/whale/typography.ts @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Tue, 12 Mar 2024 09:54:33 GMT + * Generated on Tue, 08 Oct 2024 07:57:33 GMT */ export const typography = { diff --git a/token-gen/tokens b/token-gen/tokens index 09eeb37e..629de776 160000 --- a/token-gen/tokens +++ b/token-gen/tokens @@ -1 +1 @@ -Subproject commit 09eeb37eaca44f0cb56e64d992cdee75b34e7661 +Subproject commit 629de776b0fbceb482092b7f3d9b4f70c88c8107 From 24495ebf14a56cf540479dc926dbeb27204acdf4 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Wed, 9 Oct 2024 18:38:10 +0800 Subject: [PATCH 5/6] feat: use @chakra-ui/react imports over specialised imports (#770) breaks some esm imports in the latest chakra version it seems --- .../introduction/Principles/Principles.tsx | 2 +- react/package-lock.json | 306 +++++++++--------- react/package.json | 1 + react/src/Spinner/SpinnerIcon.tsx | 8 +- react/src/Switch/Switch.tsx | 15 +- 5 files changed, 170 insertions(+), 162 deletions(-) diff --git a/react/.storybook/introduction/Principles/Principles.tsx b/react/.storybook/introduction/Principles/Principles.tsx index 90210208..21d3c0df 100644 --- a/react/.storybook/introduction/Principles/Principles.tsx +++ b/react/.storybook/introduction/Principles/Principles.tsx @@ -1,4 +1,4 @@ -import { Box, Heading, Text } from '@chakra-ui/layout' +import { Box, Heading, Text } from '@chakra-ui/react' export const Principles = (): JSX.Element => { return ( diff --git a/react/package-lock.json b/react/package-lock.json index b2450671..d37d2845 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -10,6 +10,7 @@ "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@chakra-ui/utils": "^2.0.14", + "@emotion/react": "^11.13.3", "@floating-ui/react": "^0.26.1", "@fontsource/ibm-plex-mono": "^5.0.3", "country-flag-icons": "^1.4.19", @@ -3771,16 +3772,16 @@ } }, "node_modules/@emotion/babel-plugin": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", - "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", - "peer": true, + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", + "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==", + "license": "MIT", "dependencies": { "@babel/helper-module-imports": "^7.16.7", "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/serialize": "^1.1.2", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.2.0", "babel-plugin-macros": "^3.1.0", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", @@ -3789,24 +3790,36 @@ "stylis": "4.2.0" } }, + "node_modules/@emotion/babel-plugin/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, "node_modules/@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "peer": true, - "dependencies": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } }, + "node_modules/@emotion/cache/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, "node_modules/@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==", - "peer": true + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==", + "license": "MIT" }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.2", @@ -3824,18 +3837,18 @@ "peer": true }, "node_modules/@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", - "peer": true, + "version": "11.13.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", + "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.11.0", - "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "hoist-non-react-statics": "^3.3.1" }, "peerDependencies": { @@ -3848,23 +3861,29 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", - "peer": true, - "dependencies": { - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/unitless": "^0.8.1", - "@emotion/utils": "^1.2.1", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", + "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "license": "MIT", + "dependencies": { + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.1", "csstype": "^3.0.2" } }, + "node_modules/@emotion/serialize/node_modules/@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==", + "license": "MIT" + }, "node_modules/@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==", - "peer": true + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==", + "license": "MIT" }, "node_modules/@emotion/styled": { "version": "11.11.5", @@ -3890,30 +3909,31 @@ } }, "node_modules/@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", - "peer": true + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==", + "license": "MIT" }, "node_modules/@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", + "license": "MIT", "peerDependencies": { "react": ">=16.8.0" } }, "node_modules/@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==", - "peer": true + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", + "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==", + "license": "MIT" }, "node_modules/@emotion/weak-memoize": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", - "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==", - "peer": true + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==", + "license": "MIT" }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.1", @@ -6699,8 +6719,7 @@ "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", - "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", - "peer": true + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, "node_modules/@types/pretty-hrtime": { "version": "1.0.3", @@ -8005,7 +8024,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -8884,8 +8902,7 @@ "node_modules/convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "peer": true + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "node_modules/cookie": { "version": "0.6.0", @@ -8948,7 +8965,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", - "peer": true, "dependencies": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", @@ -10642,8 +10658,7 @@ "node_modules/find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "peer": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "node_modules/find-up": { "version": "5.0.0", @@ -11323,7 +11338,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "peer": true, "dependencies": { "react-is": "^16.7.0" } @@ -11331,8 +11345,7 @@ "node_modules/hoist-non-react-statics/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/hosted-git-info": { "version": "2.8.9", @@ -16105,7 +16118,6 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -16403,8 +16415,7 @@ "node_modules/stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", - "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", - "peer": true + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" }, "node_modules/supports-color": { "version": "5.5.0", @@ -18057,7 +18068,6 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "peer": true, "engines": { "node": ">= 6" } @@ -20670,42 +20680,53 @@ "dev": true }, "@emotion/babel-plugin": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz", - "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==", - "peer": true, + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz", + "integrity": "sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==", "requires": { "@babel/helper-module-imports": "^7.16.7", "@babel/runtime": "^7.18.3", - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/serialize": "^1.1.2", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/serialize": "^1.2.0", "babel-plugin-macros": "^3.1.0", "convert-source-map": "^1.5.0", "escape-string-regexp": "^4.0.0", "find-root": "^1.1.0", "source-map": "^0.5.7", "stylis": "4.2.0" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + } } }, "@emotion/cache": { - "version": "11.11.0", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz", - "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==", - "peer": true, - "requires": { - "@emotion/memoize": "^0.8.1", - "@emotion/sheet": "^1.2.2", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", + "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "requires": { + "@emotion/memoize": "^0.9.0", + "@emotion/sheet": "^1.4.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + } } }, "@emotion/hash": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", - "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==", - "peer": true + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz", + "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==" }, "@emotion/is-prop-valid": { "version": "1.2.2", @@ -20723,39 +20744,43 @@ "peer": true }, "@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", - "peer": true, + "version": "11.13.3", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz", + "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==", "requires": { "@babel/runtime": "^7.18.3", - "@emotion/babel-plugin": "^11.11.0", - "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", - "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", - "@emotion/utils": "^1.2.1", - "@emotion/weak-memoize": "^0.3.1", + "@emotion/babel-plugin": "^11.12.0", + "@emotion/cache": "^11.13.0", + "@emotion/serialize": "^1.3.1", + "@emotion/use-insertion-effect-with-fallbacks": "^1.1.0", + "@emotion/utils": "^1.4.0", + "@emotion/weak-memoize": "^0.4.0", "hoist-non-react-statics": "^3.3.1" } }, "@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", - "peer": true, + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", + "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", "requires": { - "@emotion/hash": "^0.9.1", - "@emotion/memoize": "^0.8.1", - "@emotion/unitless": "^0.8.1", - "@emotion/utils": "^1.2.1", + "@emotion/hash": "^0.9.2", + "@emotion/memoize": "^0.9.0", + "@emotion/unitless": "^0.10.0", + "@emotion/utils": "^1.4.1", "csstype": "^3.0.2" + }, + "dependencies": { + "@emotion/memoize": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz", + "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==" + } } }, "@emotion/sheet": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", - "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==", - "peer": true + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz", + "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==" }, "@emotion/styled": { "version": "11.11.5", @@ -20772,28 +20797,25 @@ } }, "@emotion/unitless": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", - "peer": true + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz", + "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==" }, "@emotion/use-insertion-effect-with-fallbacks": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", - "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz", + "integrity": "sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==", "requires": {} }, "@emotion/utils": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz", - "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==", - "peer": true + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", + "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==" }, "@emotion/weak-memoize": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz", - "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==", - "peer": true + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", + "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" }, "@esbuild/aix-ppc64": { "version": "0.20.1", @@ -22769,8 +22791,7 @@ "@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", - "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", - "peer": true + "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" }, "@types/pretty-hrtime": { "version": "1.0.3", @@ -23699,7 +23720,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==", - "peer": true, "requires": { "@babel/runtime": "^7.12.5", "cosmiconfig": "^7.0.0", @@ -24357,8 +24377,7 @@ "convert-source-map": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "peer": true + "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==" }, "cookie": { "version": "0.6.0", @@ -24411,7 +24430,6 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz", "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==", - "peer": true, "requires": { "@types/parse-json": "^4.0.0", "import-fresh": "^3.2.1", @@ -25739,8 +25757,7 @@ "find-root": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz", - "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==", - "peer": true + "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==" }, "find-up": { "version": "5.0.0", @@ -26221,7 +26238,6 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", - "peer": true, "requires": { "react-is": "^16.7.0" }, @@ -26229,8 +26245,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } } }, @@ -29580,8 +29595,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==", - "peer": true + "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==" }, "source-map-js": { "version": "1.0.2", @@ -29804,8 +29818,7 @@ "stylis": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz", - "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==", - "peer": true + "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==" }, "supports-color": { "version": "5.5.0", @@ -30894,8 +30907,7 @@ "yaml": { "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "peer": true + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" }, "yocto-queue": { "version": "0.1.0", diff --git a/react/package.json b/react/package.json index 89fc4d9f..fa0e8a3c 100644 --- a/react/package.json +++ b/react/package.json @@ -36,6 +36,7 @@ }, "dependencies": { "@chakra-ui/utils": "^2.0.14", + "@emotion/react": "^11.13.3", "@floating-ui/react": "^0.26.1", "@fontsource/ibm-plex-mono": "^5.0.3", "country-flag-icons": "^1.4.19", diff --git a/react/src/Spinner/SpinnerIcon.tsx b/react/src/Spinner/SpinnerIcon.tsx index 6af5e289..6534b840 100644 --- a/react/src/Spinner/SpinnerIcon.tsx +++ b/react/src/Spinner/SpinnerIcon.tsx @@ -1,10 +1,6 @@ import { useMemo } from 'react' -import { - Icon, - IconProps, - keyframes, - usePrefersReducedMotion, -} from '@chakra-ui/react' +import { Icon, IconProps, usePrefersReducedMotion } from '@chakra-ui/react' +import { keyframes } from '@emotion/react' import { BxLoader } from '~/icons' diff --git a/react/src/Switch/Switch.tsx b/react/src/Switch/Switch.tsx index 599d18fa..3d6b7435 100644 --- a/react/src/Switch/Switch.tsx +++ b/react/src/Switch/Switch.tsx @@ -5,24 +5,23 @@ */ import { useMemo } from 'react' -import { useCheckbox, UseCheckboxProps } from '@chakra-ui/checkbox' -import { - ComponentWithAs as _, - Icon, - keyframes, - usePrefersReducedMotion, -} from '@chakra-ui/react' import { chakra, + ComponentWithAs as _, forwardRef, HTMLChakraProps, + Icon, omitThemingProps, SystemProps, SystemStyleObject, ThemingProps, + useCheckbox, + UseCheckboxProps, useMultiStyleConfig, -} from '@chakra-ui/system' + usePrefersReducedMotion, +} from '@chakra-ui/react' import { cx, dataAttr } from '@chakra-ui/utils' +import { keyframes } from '@emotion/react' import { BxCheck, BxLoader, BxLockAlt, BxX } from '~/icons' From 6161c9d4bf3f850f2b4032fb8dbb4eecf88aad9f Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 10 Oct 2024 10:37:24 +0800 Subject: [PATCH 6/6] build: release v1.25.0 --- react/CHANGELOG.md | 13 +++++++++++++ react/package-lock.json | 4 ++-- react/package.json | 2 +- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/react/CHANGELOG.md b/react/CHANGELOG.md index c49c3655..e655d8a4 100644 --- a/react/CHANGELOG.md +++ b/react/CHANGELOG.md @@ -4,11 +4,24 @@ All notable changes to this project will be documented in this file. Dates are d Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). +#### [v1.25.0](https://github.com/opengovsg/design-system/compare/v1.24.0...v1.25.0) + +- feat: use @chakra-ui/react imports over specialised imports [`#770`](https://github.com/opengovsg/design-system/pull/770) +- feat: add script to copy generated themes to storybook theme folder [`#769`](https://github.com/opengovsg/design-system/pull/769) +- feat: add Armoury theme [`#768`](https://github.com/opengovsg/design-system/pull/768) +- chore: merge release v1.24.0 back to main [`#756`](https://github.com/opengovsg/design-system/pull/756) +- fix(deps): bump rollup from 3.29.4 to 3.29.5 in /react [`#764`](https://github.com/opengovsg/design-system/pull/764) +- chore(deps-dev): bump vite from 4.5.3 to 4.5.5 in /react [`#759`](https://github.com/opengovsg/design-system/pull/759) +- build: release v1.24.0 [`#755`](https://github.com/opengovsg/design-system/pull/755) + #### [v1.24.0](https://github.com/opengovsg/design-system/compare/v1.23.0...v1.24.0) +> 16 September 2024 + - feat: fix Input prefill style regression, add `isPrefilled` prop to Datepicker and Select [`#754`](https://github.com/opengovsg/design-system/pull/754) - chore: merge v1.23.0 back to main [`#747`](https://github.com/opengovsg/design-system/pull/747) - build: release v1.23.0 [`#746`](https://github.com/opengovsg/design-system/pull/746) +- build: release v1.24.0 [`06e23c9`](https://github.com/opengovsg/design-system/commit/06e23c916f9ccf47da599034fce4b96a315535e1) #### [v1.23.0](https://github.com/opengovsg/design-system/compare/v1.22.0...v1.23.0) diff --git a/react/package-lock.json b/react/package-lock.json index d37d2845..6d1ccec0 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -1,12 +1,12 @@ { "name": "@opengovsg/design-system-react", - "version": "1.24.0", + "version": "1.25.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@opengovsg/design-system-react", - "version": "1.24.0", + "version": "1.25.0", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@chakra-ui/utils": "^2.0.14", diff --git a/react/package.json b/react/package.json index fa0e8a3c..007400e1 100644 --- a/react/package.json +++ b/react/package.json @@ -1,6 +1,6 @@ { "name": "@opengovsg/design-system-react", - "version": "1.24.0", + "version": "1.25.0", "description": "React components", "homepage": "https://github.com/opengovsg/design-system/react#readme", "bugs": "https://github.com/opengovsg/design-system/issues",