From 65a78274f9884d66e668b1741ea2453af82e37d6 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 16 Jan 2024 12:57:13 -0800 Subject: [PATCH 1/3] feat: adding brand colors object and tests to css in js --- src/js/brandColors/brandColors.test.ts | 410 ++++++++++++++++++++++++ src/js/brandColors/brandColors.ts | 88 +++++ src/js/brandColors/brandColors.types.ts | 16 + src/js/brandColors/index.ts | 1 + src/js/index.ts | 1 + 5 files changed, 516 insertions(+) create mode 100644 src/js/brandColors/brandColors.test.ts create mode 100644 src/js/brandColors/brandColors.ts create mode 100644 src/js/brandColors/brandColors.types.ts create mode 100644 src/js/brandColors/index.ts diff --git a/src/js/brandColors/brandColors.test.ts b/src/js/brandColors/brandColors.test.ts new file mode 100644 index 00000000..c95b196c --- /dev/null +++ b/src/js/brandColors/brandColors.test.ts @@ -0,0 +1,410 @@ +/* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports */ +import { brandColors } from './brandColors'; + +const designTokens = require('../../figma/tokens.json'); + +describe('Brand Color', () => { + describe('White', () => { + it('js tokens for white000 matches figma tokens white000', () => { + expect(brandColors.white.white000).toStrictEqual( + designTokens.global.brandColors.white.white000.value.toLowerCase(), + ); + }); + + it('js tokens for white010 matches figma tokens white010', () => { + expect(brandColors.white.white010).toStrictEqual( + designTokens.global.brandColors.white.white010.value.toLowerCase(), + ); + }); + }); + + describe('Black', () => { + it('js tokens for black000 matches figma tokens black000', () => { + expect(brandColors.black.black000).toStrictEqual( + designTokens.global.brandColors.black.black000.value.toLowerCase(), + ); + }); + }); + + describe('Grey', () => { + it('js tokens for grey030 matches figma tokens grey030', () => { + expect(brandColors.grey.grey030).toStrictEqual( + designTokens.global.brandColors.grey.grey030.value.toLowerCase(), + ); + }); + + it('js tokens for grey040 matches figma tokens grey040', () => { + expect(brandColors.grey.grey040).toStrictEqual( + designTokens.global.brandColors.grey.grey040.value.toLowerCase(), + ); + }); + + it('js tokens for grey100 matches figma tokens grey100', () => { + expect(brandColors.grey.grey100).toStrictEqual( + designTokens.global.brandColors.grey.grey100.value.toLowerCase(), + ); + }); + + it('js tokens for grey200 matches figma tokens grey200', () => { + expect(brandColors.grey.grey200).toStrictEqual( + designTokens.global.brandColors.grey.grey200.value.toLowerCase(), + ); + }); + + it('js tokens for grey300 matches figma tokens grey300', () => { + expect(brandColors.grey.grey300).toStrictEqual( + designTokens.global.brandColors.grey.grey300.value.toLowerCase(), + ); + }); + + it('js tokens for grey400 matches figma tokens grey400', () => { + expect(brandColors.grey.grey400).toStrictEqual( + designTokens.global.brandColors.grey.grey400.value.toLowerCase(), + ); + }); + + it('js tokens for grey500 matches figma tokens grey500', () => { + expect(brandColors.grey.grey500).toStrictEqual( + designTokens.global.brandColors.grey.grey500.value.toLowerCase(), + ); + }); + + it('js tokens for grey600 matches figma tokens grey600', () => { + expect(brandColors.grey.grey600).toStrictEqual( + designTokens.global.brandColors.grey.grey600.value.toLowerCase(), + ); + }); + + it('js tokens for grey700 matches figma tokens grey700', () => { + expect(brandColors.grey.grey700).toStrictEqual( + designTokens.global.brandColors.grey.grey700.value.toLowerCase(), + ); + }); + + it('js tokens for grey750 matches figma tokens grey750', () => { + expect(brandColors.grey.grey750).toStrictEqual( + designTokens.global.brandColors.grey.grey750.value.toLowerCase(), + ); + }); + + it('js tokens for grey800 matches figma tokens grey800', () => { + expect(brandColors.grey.grey800).toStrictEqual( + designTokens.global.brandColors.grey.grey800.value.toLowerCase(), + ); + }); + + it('js tokens for grey900 matches figma tokens grey900', () => { + expect(brandColors.grey.grey900).toStrictEqual( + designTokens.global.brandColors.grey.grey900.value.toLowerCase(), + ); + }); + }); + + describe('Blue', () => { + it('js tokens for blue000 matches figma tokens blue000', () => { + expect(brandColors.blue.blue000).toStrictEqual( + designTokens.global.brandColors.blue.blue000.value.toLowerCase(), + ); + }); + + it('js tokens for blue100 matches figma tokens blue100', () => { + expect(brandColors.blue.blue100).toStrictEqual( + designTokens.global.brandColors.blue.blue100.value.toLowerCase(), + ); + }); + + it('js tokens for blue200 matches figma tokens blue200', () => { + expect(brandColors.blue.blue200).toStrictEqual( + designTokens.global.brandColors.blue.blue200.value.toLowerCase(), + ); + }); + + it('js tokens for blue300 matches figma tokens blue300', () => { + expect(brandColors.blue.blue300).toStrictEqual( + designTokens.global.brandColors.blue.blue300.value.toLowerCase(), + ); + }); + + it('js tokens for blue400 matches figma tokens blue400', () => { + expect(brandColors.blue.blue400).toStrictEqual( + designTokens.global.brandColors.blue.blue400.value.toLowerCase(), + ); + }); + + it('js tokens for blue500 matches figma tokens blue500', () => { + expect(brandColors.blue.blue500).toStrictEqual( + designTokens.global.brandColors.blue.blue500.value.toLowerCase(), + ); + }); + + it('js tokens for blue600 matches figma tokens blue600', () => { + expect(brandColors.blue.blue600).toStrictEqual( + designTokens.global.brandColors.blue.blue600.value.toLowerCase(), + ); + }); + + it('js tokens for blue700 matches figma tokens blue700', () => { + expect(brandColors.blue.blue700).toStrictEqual( + designTokens.global.brandColors.blue.blue700.value.toLowerCase(), + ); + }); + + it('js tokens for blue800 matches figma tokens blue800', () => { + expect(brandColors.blue.blue800).toStrictEqual( + designTokens.global.brandColors.blue.blue800.value.toLowerCase(), + ); + }); + + it('js tokens for blue900 matches figma tokens blue900', () => { + expect(brandColors.blue.blue900).toStrictEqual( + designTokens.global.brandColors.blue.blue900.value.toLowerCase(), + ); + }); + }); + + describe('Orange', () => { + it('js tokens for orange000 matches figma tokens orange000', () => { + expect(brandColors.orange.orange000).toStrictEqual( + designTokens.global.brandColors.orange.orange000.value.toLowerCase(), + ); + }); + + it('js tokens for orange100 matches figma tokens orange100', () => { + expect(brandColors.orange.orange100).toStrictEqual( + designTokens.global.brandColors.orange.orange100.value.toLowerCase(), + ); + }); + + it('js tokens for orange200 matches figma tokens orange200', () => { + expect(brandColors.orange.orange200).toStrictEqual( + designTokens.global.brandColors.orange.orange200.value.toLowerCase(), + ); + }); + + it('js tokens for orange300 matches figma tokens orange300', () => { + expect(brandColors.orange.orange300).toStrictEqual( + designTokens.global.brandColors.orange.orange300.value.toLowerCase(), + ); + }); + + it('js tokens for orange400 matches figma tokens orange400', () => { + expect(brandColors.orange.orange400).toStrictEqual( + designTokens.global.brandColors.orange.orange400.value.toLowerCase(), + ); + }); + + it('js tokens for orange500 matches figma tokens orange500', () => { + expect(brandColors.orange.orange500).toStrictEqual( + designTokens.global.brandColors.orange.orange500.value.toLowerCase(), + ); + }); + + it('js tokens for orange600 matches figma tokens orange600', () => { + expect(brandColors.orange.orange600).toStrictEqual( + designTokens.global.brandColors.orange.orange600.value.toLowerCase(), + ); + }); + + it('js tokens for orange700 matches figma tokens orange700', () => { + expect(brandColors.orange.orange700).toStrictEqual( + designTokens.global.brandColors.orange.orange700.value.toLowerCase(), + ); + }); + + it('js tokens for orange800 matches figma tokens orange800', () => { + expect(brandColors.orange.orange800).toStrictEqual( + designTokens.global.brandColors.orange.orange800.value.toLowerCase(), + ); + }); + + it('js tokens for orange900 matches figma tokens orange900', () => { + expect(brandColors.orange.orange900).toStrictEqual( + designTokens.global.brandColors.orange.orange900.value.toLowerCase(), + ); + }); + }); + + describe('Green', () => { + it('js tokens for green000 matches figma tokens green000', () => { + expect(brandColors.green.green000).toStrictEqual( + designTokens.global.brandColors.green.green000.value.toLowerCase(), + ); + }); + + it('js tokens for green100 matches figma tokens green100', () => { + expect(brandColors.green.green100).toStrictEqual( + designTokens.global.brandColors.green.green100.value.toLowerCase(), + ); + }); + + it('js tokens for green200 matches figma tokens green200', () => { + expect(brandColors.green.green200).toStrictEqual( + designTokens.global.brandColors.green.green200.value.toLowerCase(), + ); + }); + + it('js tokens for green300 matches figma tokens green300', () => { + expect(brandColors.green.green300).toStrictEqual( + designTokens.global.brandColors.green.green300.value.toLowerCase(), + ); + }); + + it('js tokens for green400 matches figma tokens green400', () => { + expect(brandColors.green.green400).toStrictEqual( + designTokens.global.brandColors.green.green400.value.toLowerCase(), + ); + }); + + it('js tokens for green500 matches figma tokens green500', () => { + expect(brandColors.green.green500).toStrictEqual( + designTokens.global.brandColors.green.green500.value.toLowerCase(), + ); + }); + + it('js tokens for green600 matches figma tokens green600', () => { + expect(brandColors.green.green600).toStrictEqual( + designTokens.global.brandColors.green.green600.value.toLowerCase(), + ); + }); + + it('js tokens for green700 matches figma tokens green700', () => { + expect(brandColors.green.green700).toStrictEqual( + designTokens.global.brandColors.green.green700.value.toLowerCase(), + ); + }); + + it('js tokens for green800 matches figma tokens green800', () => { + expect(brandColors.green.green800).toStrictEqual( + designTokens.global.brandColors.green.green800.value.toLowerCase(), + ); + }); + + it('js tokens for green900 matches figma tokens green900', () => { + expect(brandColors.green.green900).toStrictEqual( + designTokens.global.brandColors.green.green900.value.toLowerCase(), + ); + }); + }); + + describe('Red', () => { + it('js tokens for red000 matches figma tokens red000', () => { + expect(brandColors.red.red000).toStrictEqual( + designTokens.global.brandColors.red.red000.value.toLowerCase(), + ); + }); + + it('js tokens for red100 matches figma tokens red100', () => { + expect(brandColors.red.red100).toStrictEqual( + designTokens.global.brandColors.red.red100.value.toLowerCase(), + ); + }); + + it('js tokens for red200 matches figma tokens red200', () => { + expect(brandColors.red.red200).toStrictEqual( + designTokens.global.brandColors.red.red200.value.toLowerCase(), + ); + }); + + it('js tokens for red300 matches figma tokens red300', () => { + expect(brandColors.red.red300).toStrictEqual( + designTokens.global.brandColors.red.red300.value.toLowerCase(), + ); + }); + + it('js tokens for red400 matches figma tokens red400', () => { + expect(brandColors.red.red400).toStrictEqual( + designTokens.global.brandColors.red.red400.value.toLowerCase(), + ); + }); + + it('js tokens for red500 matches figma tokens red500', () => { + expect(brandColors.red.red500).toStrictEqual( + designTokens.global.brandColors.red.red500.value.toLowerCase(), + ); + }); + + it('js tokens for red600 matches figma tokens red600', () => { + expect(brandColors.red.red600).toStrictEqual( + designTokens.global.brandColors.red.red600.value.toLowerCase(), + ); + }); + + it('js tokens for red700 matches figma tokens red700', () => { + expect(brandColors.red.red700).toStrictEqual( + designTokens.global.brandColors.red.red700.value.toLowerCase(), + ); + }); + + it('js tokens for red800 matches figma tokens red800', () => { + expect(brandColors.red.red800).toStrictEqual( + designTokens.global.brandColors.red.red800.value.toLowerCase(), + ); + }); + + it('js tokens for red900 matches figma tokens red900', () => { + expect(brandColors.red.red900).toStrictEqual( + designTokens.global.brandColors.red.red900.value.toLowerCase(), + ); + }); + }); + + describe('Purple', () => { + it('js tokens for purple500 matches figma tokens purple500', () => { + expect(brandColors.purple.purple500).toStrictEqual( + designTokens.global.brandColors.purple.purple500.value.toLowerCase(), + ); + }); + }); + + describe('Violet', () => { + it('js tokens for violet300 matches figma tokens violet300', () => { + expect(brandColors.violet.violet300).toStrictEqual( + designTokens.global.brandColors.violet.violet300.value.toLowerCase(), + ); + }); + }); + + describe('Yellow', () => { + it('js tokens for yellow000 matches figma tokens yellow000', () => { + expect(brandColors.yellow.yellow000).toStrictEqual( + designTokens.global.brandColors.yellow.yellow000.value.toLowerCase(), + ); + }); + + it('js tokens for yellow100 matches figma tokens yellow100', () => { + expect(brandColors.yellow.yellow100).toStrictEqual( + designTokens.global.brandColors.yellow.yellow100.value.toLowerCase(), + ); + }); + + it('js tokens for yellow200 matches figma tokens yellow200', () => { + expect(brandColors.yellow.yellow200).toStrictEqual( + designTokens.global.brandColors.yellow.yellow200.value.toLowerCase(), + ); + }); + + it('js tokens for yellow300 matches figma tokens yellow300', () => { + expect(brandColors.yellow.yellow300).toStrictEqual( + designTokens.global.brandColors.yellow.yellow300.value.toLowerCase(), + ); + }); + + it('js tokens for yellow400 matches figma tokens yellow400', () => { + expect(brandColors.yellow.yellow400).toStrictEqual( + designTokens.global.brandColors.yellow.yellow400.value.toLowerCase(), + ); + }); + + it('js tokens for yellow500 matches figma tokens yellow500', () => { + expect(brandColors.yellow.yellow500).toStrictEqual( + designTokens.global.brandColors.yellow.yellow500.value.toLowerCase(), + ); + }); + + it('js tokens for yellow600 matches figma tokens yellow600', () => { + expect(brandColors.yellow.yellow600).toStrictEqual( + designTokens.global.brandColors.yellow.yellow600.value.toLowerCase(), + ); + }); + }); +}); diff --git a/src/js/brandColors/brandColors.ts b/src/js/brandColors/brandColors.ts new file mode 100644 index 00000000..065588cb --- /dev/null +++ b/src/js/brandColors/brandColors.ts @@ -0,0 +1,88 @@ +import { BrandColors } from './brandColors.types'; + +export const brandColors: BrandColors = { + white: { + white000: '#ffffff', + white010: '#fcfcfc', + }, + black: { + black000: '#000000', + }, + grey: { + grey030: '#fafbfc', + grey040: '#f2f4f6', + grey100: '#d6d9dc', + grey200: '#bbc0c5', + grey300: '#9fa6ae', + grey400: '#848c96', + grey500: '#6a737d', + grey600: '#535a61', + grey700: '#3b4046', + grey750: '#2e3339', + grey800: '#24272a', + grey900: '#141618', + }, + blue: { + blue000: '#eaf6ff', + blue100: '#a7d9fe', + blue200: '#75c4fd', + blue300: '#43aefc', + blue400: '#1098fc', + blue500: '#0376c9', + blue600: '#0260a4', + blue700: '#024272', + blue800: '#01253f', + blue900: '#00080d', + }, + orange: { + orange000: '#fef5ef', + orange100: '#fde2cf', + orange200: '#fbc49d', + orange300: '#faa66c', + orange400: '#f8883b', + orange500: '#f66a0a', + orange600: '#c65507', + orange700: '#954005', + orange800: '#632b04', + orange900: '#321602', + }, + green: { + green000: '#f3fcf5', + green100: '#d6ffdf', + green200: '#afecbd', + green300: '#86e29b', + green400: '#5dd879', + green500: '#28a745', + green600: '#1e7e34', + green700: '#145523', + green800: '#0a2c12', + green900: '#041007', + }, + red: { + red000: '#fcf2f3', + red100: '#f7d5d8', + red200: '#f1b9be', + red300: '#e88f97', + red400: '#e06470', + red500: '#d73847', + red600: '#b92534', + red700: '#8e1d28', + red800: '#64141c', + red900: '#3a0c10', + }, + purple: { + purple500: '#8b45b6', + }, + violet: { + violet300: '#cfb5f0', + }, + yellow: { + yellow000: '#fffdf8', + yellow100: '#fefcde', + yellow200: '#fff2c5', + yellow300: '#ffeaa3', + yellow400: '#ffdf70', + yellow500: '#ffd33d', + yellow600: '#ffc70a', + }, +}; diff --git a/src/js/brandColors/brandColors.types.ts b/src/js/brandColors/brandColors.types.ts new file mode 100644 index 00000000..bc9e2ceb --- /dev/null +++ b/src/js/brandColors/brandColors.types.ts @@ -0,0 +1,16 @@ +export interface Color { + [key: string]: string; +} + +export interface BrandColors { + white: Color; + black: Color; + grey: Color; + blue: Color; + orange: Color; + green: Color; + red: Color; + purple: Color; + violet: Color; + yellow: Color; +} diff --git a/src/js/brandColors/index.ts b/src/js/brandColors/index.ts new file mode 100644 index 00000000..48f25994 --- /dev/null +++ b/src/js/brandColors/index.ts @@ -0,0 +1 @@ +export { brandColors } from './brandColors'; diff --git a/src/js/index.ts b/src/js/index.ts index 5fa681c3..44e41be7 100644 --- a/src/js/index.ts +++ b/src/js/index.ts @@ -1,6 +1,7 @@ export { Theme } from './themes'; export { lightTheme } from './themes'; export { darkTheme } from './themes'; +export { brandColors } from './brandColors'; // DEPRECATED in favor of importing theme objects above export { colors } from './colors'; From a9038d2c9a5eec8b4324fafd82a4de15ee419511 Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Tue, 16 Jan 2024 13:06:49 -0800 Subject: [PATCH 2/3] docs: adding s to brand colors in tests --- src/js/brandColors/brandColors.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/brandColors/brandColors.test.ts b/src/js/brandColors/brandColors.test.ts index c95b196c..411f73e6 100644 --- a/src/js/brandColors/brandColors.test.ts +++ b/src/js/brandColors/brandColors.test.ts @@ -3,7 +3,7 @@ import { brandColors } from './brandColors'; const designTokens = require('../../figma/tokens.json'); -describe('Brand Color', () => { +describe('Brand Colors', () => { describe('White', () => { it('js tokens for white000 matches figma tokens white000', () => { expect(brandColors.white.white000).toStrictEqual( From 5fab2d55d41430c23663f0debc4d9f886700210b Mon Sep 17 00:00:00 2001 From: georgewrmarshall Date: Wed, 17 Jan 2024 13:01:51 -0800 Subject: [PATCH 3/3] refactor: updating brand color key names --- src/js/brandColors/brandColors.test.ts | 128 ++++++++++++------------- src/js/brandColors/brandColors.ts | 128 ++++++++++++------------- 2 files changed, 128 insertions(+), 128 deletions(-) diff --git a/src/js/brandColors/brandColors.test.ts b/src/js/brandColors/brandColors.test.ts index 411f73e6..96790ae3 100644 --- a/src/js/brandColors/brandColors.test.ts +++ b/src/js/brandColors/brandColors.test.ts @@ -6,13 +6,13 @@ const designTokens = require('../../figma/tokens.json'); describe('Brand Colors', () => { describe('White', () => { it('js tokens for white000 matches figma tokens white000', () => { - expect(brandColors.white.white000).toStrictEqual( + expect(brandColors.white['000']).toStrictEqual( designTokens.global.brandColors.white.white000.value.toLowerCase(), ); }); it('js tokens for white010 matches figma tokens white010', () => { - expect(brandColors.white.white010).toStrictEqual( + expect(brandColors.white['010']).toStrictEqual( designTokens.global.brandColors.white.white010.value.toLowerCase(), ); }); @@ -20,7 +20,7 @@ describe('Brand Colors', () => { describe('Black', () => { it('js tokens for black000 matches figma tokens black000', () => { - expect(brandColors.black.black000).toStrictEqual( + expect(brandColors.black['000']).toStrictEqual( designTokens.global.brandColors.black.black000.value.toLowerCase(), ); }); @@ -28,73 +28,73 @@ describe('Brand Colors', () => { describe('Grey', () => { it('js tokens for grey030 matches figma tokens grey030', () => { - expect(brandColors.grey.grey030).toStrictEqual( + expect(brandColors.grey['030']).toStrictEqual( designTokens.global.brandColors.grey.grey030.value.toLowerCase(), ); }); it('js tokens for grey040 matches figma tokens grey040', () => { - expect(brandColors.grey.grey040).toStrictEqual( + expect(brandColors.grey['040']).toStrictEqual( designTokens.global.brandColors.grey.grey040.value.toLowerCase(), ); }); it('js tokens for grey100 matches figma tokens grey100', () => { - expect(brandColors.grey.grey100).toStrictEqual( + expect(brandColors.grey['100']).toStrictEqual( designTokens.global.brandColors.grey.grey100.value.toLowerCase(), ); }); it('js tokens for grey200 matches figma tokens grey200', () => { - expect(brandColors.grey.grey200).toStrictEqual( + expect(brandColors.grey['200']).toStrictEqual( designTokens.global.brandColors.grey.grey200.value.toLowerCase(), ); }); it('js tokens for grey300 matches figma tokens grey300', () => { - expect(brandColors.grey.grey300).toStrictEqual( + expect(brandColors.grey['300']).toStrictEqual( designTokens.global.brandColors.grey.grey300.value.toLowerCase(), ); }); it('js tokens for grey400 matches figma tokens grey400', () => { - expect(brandColors.grey.grey400).toStrictEqual( + expect(brandColors.grey['400']).toStrictEqual( designTokens.global.brandColors.grey.grey400.value.toLowerCase(), ); }); it('js tokens for grey500 matches figma tokens grey500', () => { - expect(brandColors.grey.grey500).toStrictEqual( + expect(brandColors.grey['500']).toStrictEqual( designTokens.global.brandColors.grey.grey500.value.toLowerCase(), ); }); it('js tokens for grey600 matches figma tokens grey600', () => { - expect(brandColors.grey.grey600).toStrictEqual( + expect(brandColors.grey['600']).toStrictEqual( designTokens.global.brandColors.grey.grey600.value.toLowerCase(), ); }); it('js tokens for grey700 matches figma tokens grey700', () => { - expect(brandColors.grey.grey700).toStrictEqual( + expect(brandColors.grey['700']).toStrictEqual( designTokens.global.brandColors.grey.grey700.value.toLowerCase(), ); }); it('js tokens for grey750 matches figma tokens grey750', () => { - expect(brandColors.grey.grey750).toStrictEqual( + expect(brandColors.grey['750']).toStrictEqual( designTokens.global.brandColors.grey.grey750.value.toLowerCase(), ); }); it('js tokens for grey800 matches figma tokens grey800', () => { - expect(brandColors.grey.grey800).toStrictEqual( + expect(brandColors.grey['800']).toStrictEqual( designTokens.global.brandColors.grey.grey800.value.toLowerCase(), ); }); it('js tokens for grey900 matches figma tokens grey900', () => { - expect(brandColors.grey.grey900).toStrictEqual( + expect(brandColors.grey['900']).toStrictEqual( designTokens.global.brandColors.grey.grey900.value.toLowerCase(), ); }); @@ -102,61 +102,61 @@ describe('Brand Colors', () => { describe('Blue', () => { it('js tokens for blue000 matches figma tokens blue000', () => { - expect(brandColors.blue.blue000).toStrictEqual( + expect(brandColors.blue['000']).toStrictEqual( designTokens.global.brandColors.blue.blue000.value.toLowerCase(), ); }); it('js tokens for blue100 matches figma tokens blue100', () => { - expect(brandColors.blue.blue100).toStrictEqual( + expect(brandColors.blue['100']).toStrictEqual( designTokens.global.brandColors.blue.blue100.value.toLowerCase(), ); }); it('js tokens for blue200 matches figma tokens blue200', () => { - expect(brandColors.blue.blue200).toStrictEqual( + expect(brandColors.blue['200']).toStrictEqual( designTokens.global.brandColors.blue.blue200.value.toLowerCase(), ); }); it('js tokens for blue300 matches figma tokens blue300', () => { - expect(brandColors.blue.blue300).toStrictEqual( + expect(brandColors.blue['300']).toStrictEqual( designTokens.global.brandColors.blue.blue300.value.toLowerCase(), ); }); it('js tokens for blue400 matches figma tokens blue400', () => { - expect(brandColors.blue.blue400).toStrictEqual( + expect(brandColors.blue['400']).toStrictEqual( designTokens.global.brandColors.blue.blue400.value.toLowerCase(), ); }); it('js tokens for blue500 matches figma tokens blue500', () => { - expect(brandColors.blue.blue500).toStrictEqual( + expect(brandColors.blue['500']).toStrictEqual( designTokens.global.brandColors.blue.blue500.value.toLowerCase(), ); }); it('js tokens for blue600 matches figma tokens blue600', () => { - expect(brandColors.blue.blue600).toStrictEqual( + expect(brandColors.blue['600']).toStrictEqual( designTokens.global.brandColors.blue.blue600.value.toLowerCase(), ); }); it('js tokens for blue700 matches figma tokens blue700', () => { - expect(brandColors.blue.blue700).toStrictEqual( + expect(brandColors.blue['700']).toStrictEqual( designTokens.global.brandColors.blue.blue700.value.toLowerCase(), ); }); it('js tokens for blue800 matches figma tokens blue800', () => { - expect(brandColors.blue.blue800).toStrictEqual( + expect(brandColors.blue['800']).toStrictEqual( designTokens.global.brandColors.blue.blue800.value.toLowerCase(), ); }); it('js tokens for blue900 matches figma tokens blue900', () => { - expect(brandColors.blue.blue900).toStrictEqual( + expect(brandColors.blue['900']).toStrictEqual( designTokens.global.brandColors.blue.blue900.value.toLowerCase(), ); }); @@ -164,61 +164,61 @@ describe('Brand Colors', () => { describe('Orange', () => { it('js tokens for orange000 matches figma tokens orange000', () => { - expect(brandColors.orange.orange000).toStrictEqual( + expect(brandColors.orange['000']).toStrictEqual( designTokens.global.brandColors.orange.orange000.value.toLowerCase(), ); }); it('js tokens for orange100 matches figma tokens orange100', () => { - expect(brandColors.orange.orange100).toStrictEqual( + expect(brandColors.orange['100']).toStrictEqual( designTokens.global.brandColors.orange.orange100.value.toLowerCase(), ); }); it('js tokens for orange200 matches figma tokens orange200', () => { - expect(brandColors.orange.orange200).toStrictEqual( + expect(brandColors.orange['200']).toStrictEqual( designTokens.global.brandColors.orange.orange200.value.toLowerCase(), ); }); it('js tokens for orange300 matches figma tokens orange300', () => { - expect(brandColors.orange.orange300).toStrictEqual( + expect(brandColors.orange['300']).toStrictEqual( designTokens.global.brandColors.orange.orange300.value.toLowerCase(), ); }); it('js tokens for orange400 matches figma tokens orange400', () => { - expect(brandColors.orange.orange400).toStrictEqual( + expect(brandColors.orange['400']).toStrictEqual( designTokens.global.brandColors.orange.orange400.value.toLowerCase(), ); }); it('js tokens for orange500 matches figma tokens orange500', () => { - expect(brandColors.orange.orange500).toStrictEqual( + expect(brandColors.orange['500']).toStrictEqual( designTokens.global.brandColors.orange.orange500.value.toLowerCase(), ); }); it('js tokens for orange600 matches figma tokens orange600', () => { - expect(brandColors.orange.orange600).toStrictEqual( + expect(brandColors.orange['600']).toStrictEqual( designTokens.global.brandColors.orange.orange600.value.toLowerCase(), ); }); it('js tokens for orange700 matches figma tokens orange700', () => { - expect(brandColors.orange.orange700).toStrictEqual( + expect(brandColors.orange['700']).toStrictEqual( designTokens.global.brandColors.orange.orange700.value.toLowerCase(), ); }); it('js tokens for orange800 matches figma tokens orange800', () => { - expect(brandColors.orange.orange800).toStrictEqual( + expect(brandColors.orange['800']).toStrictEqual( designTokens.global.brandColors.orange.orange800.value.toLowerCase(), ); }); it('js tokens for orange900 matches figma tokens orange900', () => { - expect(brandColors.orange.orange900).toStrictEqual( + expect(brandColors.orange['900']).toStrictEqual( designTokens.global.brandColors.orange.orange900.value.toLowerCase(), ); }); @@ -226,61 +226,61 @@ describe('Brand Colors', () => { describe('Green', () => { it('js tokens for green000 matches figma tokens green000', () => { - expect(brandColors.green.green000).toStrictEqual( + expect(brandColors.green['000']).toStrictEqual( designTokens.global.brandColors.green.green000.value.toLowerCase(), ); }); it('js tokens for green100 matches figma tokens green100', () => { - expect(brandColors.green.green100).toStrictEqual( + expect(brandColors.green['100']).toStrictEqual( designTokens.global.brandColors.green.green100.value.toLowerCase(), ); }); it('js tokens for green200 matches figma tokens green200', () => { - expect(brandColors.green.green200).toStrictEqual( + expect(brandColors.green['200']).toStrictEqual( designTokens.global.brandColors.green.green200.value.toLowerCase(), ); }); it('js tokens for green300 matches figma tokens green300', () => { - expect(brandColors.green.green300).toStrictEqual( + expect(brandColors.green['300']).toStrictEqual( designTokens.global.brandColors.green.green300.value.toLowerCase(), ); }); it('js tokens for green400 matches figma tokens green400', () => { - expect(brandColors.green.green400).toStrictEqual( + expect(brandColors.green['400']).toStrictEqual( designTokens.global.brandColors.green.green400.value.toLowerCase(), ); }); it('js tokens for green500 matches figma tokens green500', () => { - expect(brandColors.green.green500).toStrictEqual( + expect(brandColors.green['500']).toStrictEqual( designTokens.global.brandColors.green.green500.value.toLowerCase(), ); }); it('js tokens for green600 matches figma tokens green600', () => { - expect(brandColors.green.green600).toStrictEqual( + expect(brandColors.green['600']).toStrictEqual( designTokens.global.brandColors.green.green600.value.toLowerCase(), ); }); it('js tokens for green700 matches figma tokens green700', () => { - expect(brandColors.green.green700).toStrictEqual( + expect(brandColors.green['700']).toStrictEqual( designTokens.global.brandColors.green.green700.value.toLowerCase(), ); }); it('js tokens for green800 matches figma tokens green800', () => { - expect(brandColors.green.green800).toStrictEqual( + expect(brandColors.green['800']).toStrictEqual( designTokens.global.brandColors.green.green800.value.toLowerCase(), ); }); it('js tokens for green900 matches figma tokens green900', () => { - expect(brandColors.green.green900).toStrictEqual( + expect(brandColors.green['900']).toStrictEqual( designTokens.global.brandColors.green.green900.value.toLowerCase(), ); }); @@ -288,61 +288,61 @@ describe('Brand Colors', () => { describe('Red', () => { it('js tokens for red000 matches figma tokens red000', () => { - expect(brandColors.red.red000).toStrictEqual( + expect(brandColors.red['000']).toStrictEqual( designTokens.global.brandColors.red.red000.value.toLowerCase(), ); }); it('js tokens for red100 matches figma tokens red100', () => { - expect(brandColors.red.red100).toStrictEqual( + expect(brandColors.red['100']).toStrictEqual( designTokens.global.brandColors.red.red100.value.toLowerCase(), ); }); it('js tokens for red200 matches figma tokens red200', () => { - expect(brandColors.red.red200).toStrictEqual( + expect(brandColors.red['200']).toStrictEqual( designTokens.global.brandColors.red.red200.value.toLowerCase(), ); }); it('js tokens for red300 matches figma tokens red300', () => { - expect(brandColors.red.red300).toStrictEqual( + expect(brandColors.red['300']).toStrictEqual( designTokens.global.brandColors.red.red300.value.toLowerCase(), ); }); it('js tokens for red400 matches figma tokens red400', () => { - expect(brandColors.red.red400).toStrictEqual( + expect(brandColors.red['400']).toStrictEqual( designTokens.global.brandColors.red.red400.value.toLowerCase(), ); }); it('js tokens for red500 matches figma tokens red500', () => { - expect(brandColors.red.red500).toStrictEqual( + expect(brandColors.red['500']).toStrictEqual( designTokens.global.brandColors.red.red500.value.toLowerCase(), ); }); it('js tokens for red600 matches figma tokens red600', () => { - expect(brandColors.red.red600).toStrictEqual( + expect(brandColors.red['600']).toStrictEqual( designTokens.global.brandColors.red.red600.value.toLowerCase(), ); }); it('js tokens for red700 matches figma tokens red700', () => { - expect(brandColors.red.red700).toStrictEqual( + expect(brandColors.red['700']).toStrictEqual( designTokens.global.brandColors.red.red700.value.toLowerCase(), ); }); it('js tokens for red800 matches figma tokens red800', () => { - expect(brandColors.red.red800).toStrictEqual( + expect(brandColors.red['800']).toStrictEqual( designTokens.global.brandColors.red.red800.value.toLowerCase(), ); }); it('js tokens for red900 matches figma tokens red900', () => { - expect(brandColors.red.red900).toStrictEqual( + expect(brandColors.red['900']).toStrictEqual( designTokens.global.brandColors.red.red900.value.toLowerCase(), ); }); @@ -350,7 +350,7 @@ describe('Brand Colors', () => { describe('Purple', () => { it('js tokens for purple500 matches figma tokens purple500', () => { - expect(brandColors.purple.purple500).toStrictEqual( + expect(brandColors.purple['500']).toStrictEqual( designTokens.global.brandColors.purple.purple500.value.toLowerCase(), ); }); @@ -358,7 +358,7 @@ describe('Brand Colors', () => { describe('Violet', () => { it('js tokens for violet300 matches figma tokens violet300', () => { - expect(brandColors.violet.violet300).toStrictEqual( + expect(brandColors.violet['300']).toStrictEqual( designTokens.global.brandColors.violet.violet300.value.toLowerCase(), ); }); @@ -366,43 +366,43 @@ describe('Brand Colors', () => { describe('Yellow', () => { it('js tokens for yellow000 matches figma tokens yellow000', () => { - expect(brandColors.yellow.yellow000).toStrictEqual( + expect(brandColors.yellow['000']).toStrictEqual( designTokens.global.brandColors.yellow.yellow000.value.toLowerCase(), ); }); it('js tokens for yellow100 matches figma tokens yellow100', () => { - expect(brandColors.yellow.yellow100).toStrictEqual( + expect(brandColors.yellow['100']).toStrictEqual( designTokens.global.brandColors.yellow.yellow100.value.toLowerCase(), ); }); it('js tokens for yellow200 matches figma tokens yellow200', () => { - expect(brandColors.yellow.yellow200).toStrictEqual( + expect(brandColors.yellow['200']).toStrictEqual( designTokens.global.brandColors.yellow.yellow200.value.toLowerCase(), ); }); it('js tokens for yellow300 matches figma tokens yellow300', () => { - expect(brandColors.yellow.yellow300).toStrictEqual( + expect(brandColors.yellow['300']).toStrictEqual( designTokens.global.brandColors.yellow.yellow300.value.toLowerCase(), ); }); it('js tokens for yellow400 matches figma tokens yellow400', () => { - expect(brandColors.yellow.yellow400).toStrictEqual( + expect(brandColors.yellow['400']).toStrictEqual( designTokens.global.brandColors.yellow.yellow400.value.toLowerCase(), ); }); it('js tokens for yellow500 matches figma tokens yellow500', () => { - expect(brandColors.yellow.yellow500).toStrictEqual( + expect(brandColors.yellow['500']).toStrictEqual( designTokens.global.brandColors.yellow.yellow500.value.toLowerCase(), ); }); it('js tokens for yellow600 matches figma tokens yellow600', () => { - expect(brandColors.yellow.yellow600).toStrictEqual( + expect(brandColors.yellow['600']).toStrictEqual( designTokens.global.brandColors.yellow.yellow600.value.toLowerCase(), ); }); diff --git a/src/js/brandColors/brandColors.ts b/src/js/brandColors/brandColors.ts index 065588cb..78e34a0c 100644 --- a/src/js/brandColors/brandColors.ts +++ b/src/js/brandColors/brandColors.ts @@ -2,87 +2,87 @@ import { BrandColors } from './brandColors.types'; export const brandColors: BrandColors = { white: { - white000: '#ffffff', - white010: '#fcfcfc', + '000': '#ffffff', + '010': '#fcfcfc', }, black: { - black000: '#000000', + '000': '#000000', }, grey: { - grey030: '#fafbfc', - grey040: '#f2f4f6', - grey100: '#d6d9dc', - grey200: '#bbc0c5', - grey300: '#9fa6ae', - grey400: '#848c96', - grey500: '#6a737d', - grey600: '#535a61', - grey700: '#3b4046', - grey750: '#2e3339', - grey800: '#24272a', - grey900: '#141618', + '030': '#fafbfc', + '040': '#f2f4f6', + '100': '#d6d9dc', + '200': '#bbc0c5', + '300': '#9fa6ae', + '400': '#848c96', + '500': '#6a737d', + '600': '#535a61', + '700': '#3b4046', + '750': '#2e3339', + '800': '#24272a', + '900': '#141618', }, blue: { - blue000: '#eaf6ff', - blue100: '#a7d9fe', - blue200: '#75c4fd', - blue300: '#43aefc', - blue400: '#1098fc', - blue500: '#0376c9', - blue600: '#0260a4', - blue700: '#024272', - blue800: '#01253f', - blue900: '#00080d', + '000': '#eaf6ff', + '100': '#a7d9fe', + '200': '#75c4fd', + '300': '#43aefc', + '400': '#1098fc', + '500': '#0376c9', + '600': '#0260a4', + '700': '#024272', + '800': '#01253f', + '900': '#00080d', }, orange: { - orange000: '#fef5ef', - orange100: '#fde2cf', - orange200: '#fbc49d', - orange300: '#faa66c', - orange400: '#f8883b', - orange500: '#f66a0a', - orange600: '#c65507', - orange700: '#954005', - orange800: '#632b04', - orange900: '#321602', + '000': '#fef5ef', + '100': '#fde2cf', + '200': '#fbc49d', + '300': '#faa66c', + '400': '#f8883b', + '500': '#f66a0a', + '600': '#c65507', + '700': '#954005', + '800': '#632b04', + '900': '#321602', }, green: { - green000: '#f3fcf5', - green100: '#d6ffdf', - green200: '#afecbd', - green300: '#86e29b', - green400: '#5dd879', - green500: '#28a745', - green600: '#1e7e34', - green700: '#145523', - green800: '#0a2c12', - green900: '#041007', + '000': '#f3fcf5', + '100': '#d6ffdf', + '200': '#afecbd', + '300': '#86e29b', + '400': '#5dd879', + '500': '#28a745', + '600': '#1e7e34', + '700': '#145523', + '800': '#0a2c12', + '900': '#041007', }, red: { - red000: '#fcf2f3', - red100: '#f7d5d8', - red200: '#f1b9be', - red300: '#e88f97', - red400: '#e06470', - red500: '#d73847', - red600: '#b92534', - red700: '#8e1d28', - red800: '#64141c', - red900: '#3a0c10', + '000': '#fcf2f3', + '100': '#f7d5d8', + '200': '#f1b9be', + '300': '#e88f97', + '400': '#e06470', + '500': '#d73847', + '600': '#b92534', + '700': '#8e1d28', + '800': '#64141c', + '900': '#3a0c10', }, purple: { - purple500: '#8b45b6', + '500': '#8b45b6', }, violet: { - violet300: '#cfb5f0', + '300': '#cfb5f0', }, yellow: { - yellow000: '#fffdf8', - yellow100: '#fefcde', - yellow200: '#fff2c5', - yellow300: '#ffeaa3', - yellow400: '#ffdf70', - yellow500: '#ffd33d', - yellow600: '#ffc70a', + '000': '#fffdf8', + '100': '#fefcde', + '200': '#fff2c5', + '300': '#ffeaa3', + '400': '#ffdf70', + '500': '#ffd33d', + '600': '#ffc70a', }, };