From 7b0686dede292aae81975be3378320f929eae835 Mon Sep 17 00:00:00 2001 From: Nathan Vasse Date: Fri, 8 Dec 2023 12:14:12 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20sass=20generator=20to?= =?UTF-8?q?=20react?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit We need to use sass variable in order to use breakpoints in media queries. Using native CSS vars in media queries is not possible. --- packages/react/package.json | 2 +- packages/react/src/cunningham-tokens.css | 6 + packages/react/src/cunningham-tokens.js | 2 +- packages/react/src/cunningham-tokens.scss | 349 ++++++++++++++++++++++ packages/react/src/cunningham-tokens.ts | 2 +- packages/react/src/index.scss | 2 +- 6 files changed, 359 insertions(+), 4 deletions(-) create mode 100644 packages/react/src/cunningham-tokens.scss diff --git a/packages/react/package.json b/packages/react/package.json index 23fcd12..757256a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -32,7 +32,7 @@ "build:watch-polling": "yarn build && vite build --mode watch-polling", "build-fonts": "vite build -c vite.fonts.config.ts && rm -rf dist/fonts.js && make-dir dist/sass && cp src/fonts.scss dist/sass/", "build-icons": "vite build -c vite.icons.config.ts && rm -rf dist/icons.js && make-dir dist/sass && cp src/icons.scss dist/sass/", - "build-theme": "cunningham -o src -g css,ts,js", + "build-theme": "cunningham -o src -g css,ts,js,scss", "preview": "vite preview", "test": "cross-env FORCE_COLOR=1 vitest run", "test-ci": "cross-env VITEST_MIN_THREADS=1 cross-env VITEST_MAX_THREADS=3 cross-env FORCE_COLOR=1 vitest run --shard $(($CIRCLE_NODE_INDEX + 1))/$CIRCLE_NODE_TOTAL", diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index 67c74e2..1e4095a 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -106,6 +106,12 @@ --c--theme--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); --c--theme--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --c--theme--transitions--duration: 250ms; + --c--theme--breakpoints--xs: 0; + --c--theme--breakpoints--sm: 576px; + --c--theme--breakpoints--md: 768px; + --c--theme--breakpoints--lg: 992px; + --c--theme--breakpoints--xl: 1200px; + --c--theme--breakpoints--xxl: 1400px; --c--components--forms-textarea--font-weight: var(--c--theme--font--weights--regular); --c--components--forms-textarea--font-size: var(--c--theme--font--sizes--l); --c--components--forms-textarea--border-radius: 8px; diff --git a/packages/react/src/cunningham-tokens.js b/packages/react/src/cunningham-tokens.js index 8d43d5e..efa7c52 100644 --- a/packages/react/src/cunningham-tokens.js +++ b/packages/react/src/cunningham-tokens.js @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; +export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss new file mode 100644 index 0000000..d5f45fd --- /dev/null +++ b/packages/react/src/cunningham-tokens.scss @@ -0,0 +1,349 @@ +$themes: ( + 'default': ( + 'theme': ( + 'colors': ( + 'secondary-text': #555F6B, + 'secondary-100': #F2F7FC, + 'secondary-200': #EBF3FA, + 'secondary-300': #E2EEF8, + 'secondary-400': #DDEAF7, + 'secondary-500': #D4E5F5, + 'secondary-600': #C1D0DF, + 'secondary-700': #97A3AE, + 'secondary-800': #757E87, + 'secondary-900': #596067, + 'info-text': #FFFFFF, + 'info-100': #EBF2FC, + 'info-200': #8CB5EA, + 'info-300': #5894E1, + 'info-400': #377FDB, + 'info-500': #055FD2, + 'info-600': #0556BF, + 'info-700': #044395, + 'info-800': #033474, + 'info-900': #022858, + 'greyscale-100': #FAFAFB, + 'greyscale-200': #F3F4F4, + 'greyscale-300': #E7E8EA, + 'greyscale-400': #C2C6CA, + 'greyscale-500': #9EA3AA, + 'greyscale-600': #79818A, + 'greyscale-700': #555F6B, + 'greyscale-800': #303C4B, + 'greyscale-900': #0C1A2B, + 'greyscale-000': #FFFFFF, + 'primary-100': #EBF2FC, + 'primary-200': #8CB5EA, + 'primary-300': #5894E1, + 'primary-400': #377FDB, + 'primary-500': #055FD2, + 'primary-600': #0556BF, + 'primary-700': #044395, + 'primary-800': #033474, + 'primary-900': #022858, + 'success-100': #EFFCD3, + 'success-200': #DBFAA9, + 'success-300': #BEF27C, + 'success-400': #A0E659, + 'success-500': #76D628, + 'success-600': #5AB81D, + 'success-700': #419A14, + 'success-800': #2C7C0C, + 'success-900': #1D6607, + 'warning-100': #FFF8CD, + 'warning-200': #FFEF9B, + 'warning-300': #FFE469, + 'warning-400': #FFDA43, + 'warning-500': #FFC805, + 'warning-600': #DBA603, + 'warning-700': #B78702, + 'warning-800': #936901, + 'warning-900': #7A5400, + 'danger-100': #F4B0B0, + 'danger-200': #EE8A8A, + 'danger-300': #E65454, + 'danger-400': #E13333, + 'danger-500': #DA0000, + 'danger-600': #C60000, + 'danger-700': #9B0000, + 'danger-800': #780000, + 'danger-900': #5C0000, + 'primary-text': #FFFFFF, + 'success-text': #FFFFFF, + 'warning-text': #FFFFFF, + 'danger-text': #FFFFFF + ), + 'font': ( + 'sizes': ( + 'h1': 1.75rem, + 'h2': 1.375rem, + 'h3': 1.125rem, + 'h4': 0.8125rem, + 'h5': 0.625rem, + 'h6': 0.5rem, + 'l': 1rem, + 'm': 0.8125rem, + 's': 0.6875rem + ), + 'weights': ( + 'thin': 200, + 'light': 300, + 'regular': 400, + 'medium': 500, + 'bold': 600, + 'extrabold': 700, + 'black': 800 + ), + 'families': ( + 'base': \Roboto Flex Variable\, sans-serif, + 'accent': \Roboto Flex Variable\, sans-serif + ), + 'letterSpacings': ( + 'h1': normal, + 'h2': normal, + 'h3': normal, + 'h4': normal, + 'h5': 1px, + 'h6': normal, + 'l': normal, + 'm': normal, + 's': normal + ) + ), + 'spacings': ( + 'xl': 4rem, + 'l': 3rem, + 'b': 1.625rem, + 's': 1rem, + 't': 0.5rem, + 'st': 0.25rem + ), + 'transitions': ( + 'ease-in': cubic-bezier(0.32, 0, 0.67, 0), + 'ease-out': cubic-bezier(0.33, 1, 0.68, 1), + 'ease-in-out': cubic-bezier(0.65, 0, 0.35, 1), + 'duration': 250ms + ), + 'breakpoints': ( + 'xs': 0, + 'sm': 576px, + 'md': 768px, + 'lg': 992px, + 'xl': 1200px, + 'xxl': 1400px + ) + ), + 'components': ( + 'forms-textarea': ( + 'font-weight': 400, + 'font-size': 1rem, + 'border-radius': 8px, + 'border-radius--hover': 2px, + 'border-radius--focus': 2px, + 'border-width': 1px, + 'border-color': #E7E8EA, + 'border-color--hover': #9EA3AA, + 'border-color--focus': #0556BF, + 'border-style': solid, + 'label-color--focus': #0556BF, + 'background-color': #FFFFFF, + 'value-color': #0C1A2B, + 'value-color--disabled': #303C4B + ), + 'forms-switch': ( + 'accent-color': #419A14, + 'rail-background-color': #9EA3AA, + 'rail-background-color--disabled': #C2C6CA, + 'rail-border-radius': 50vw, + 'handle-background-color': white, + 'handle-background-color--disabled': #F3F4F4, + 'handle-border-radius': 50% + ), + 'forms-select': ( + 'border-color': #E7E8EA, + 'border-color--focus': #0556BF, + 'border-color--hover': #9EA3AA, + 'border-radius': 8px, + 'border-radius--focus': 2px, + 'border-radius--hover': 2px, + 'border-style': solid, + 'border-width': 1px, + 'value-color': #0C1A2B, + 'value-color--disabled': #303C4B, + 'font-size': 1rem, + 'height': 3.5rem, + 'item-background-color--hover': #F3F4F4, + 'item-background-color--selected': #EBF2FC, + 'item-color': #303C4B, + 'item-color--disabled': #9EA3AA, + 'item-font-size': 1rem, + 'background-color': #FFFFFF, + 'menu-background-color': #FFFFFF, + 'label-color--focus': #0556BF, + 'multi-pill-background-color': #F3F4F4, + 'multi-pill-border-radius': 2px, + 'multi-pill-max-width': 68%, + 'multi-pill-font-size': 0.8125rem + ), + 'forms-radio': ( + 'border-color': #E7E8EA, + 'accent-color': #5AB81D, + 'background-color': #FFFFFF + ), + 'forms-labelledbox': ( + 'label-color--small': #79818A, + 'label-color--big': #0C1A2B, + 'label-color--small--disabled': #79818A, + 'label-color--big--disabled': #79818A + ), + 'forms-input': ( + 'font-weight': 400, + 'font-size': 1rem, + 'border-radius': 8px, + 'border-radius--hover': 2px, + 'border-radius--focus': 2px, + 'border-width': 1px, + 'border-color': #E7E8EA, + 'border-color--hover': #9EA3AA, + 'border-color--focus': #0556BF, + 'border-style': solid, + 'label-color--focus': #0556BF, + 'background-color': #FFFFFF, + 'value-color': #0C1A2B, + 'value-color--disabled': #303C4B + ), + 'forms-fileuploader': ( + 'background-color': #FFFFFF, + 'border-color': #E7E8EA, + 'border-radius': 0.5rem, + 'border-width': 2px, + 'border-style': dotted, + 'background-color--active': #EBF2FC, + 'color': #0C1A2B, + 'padding': 1rem, + 'accent-color': #0556BF, + 'text-color': #79818A, + 'text-size': 0.6875rem, + 'file-text-size': 0.8125rem, + 'file-text-color': #0C1A2B, + 'file-text-weight': 300, + 'file-border-color': #E7E8EA, + 'file-border-width': 1px, + 'file-border-radius': 0.5rem, + 'file-background-color': #FFFFFF, + 'file-specs-size': 0.6875rem, + 'file-specs-color': #79818A + ), + 'forms-field': ( + 'width': 292px, + 'font-size': 0.6875rem, + 'color': #79818A + ), + 'forms-datepicker': ( + 'border-color': #E7E8EA, + 'border-color--disabled': #F3F4F4, + 'border-color--focus': #0556BF, + 'border-color--hover': #9EA3AA, + 'border-radius': 8px, + 'border-radius--focus': 2px, + 'border-radius--hover': 2px, + 'border-style': solid, + 'border-width': 1px, + 'value-color': #0C1A2B, + 'value-color--disabled': #303C4B, + 'font-size': 1rem, + 'height': 3.5rem, + 'item-background-color--hover': #F3F4F4, + 'item-background-color--selected': #EBF2FC, + 'item-color': #303C4B, + 'item-font-size': 1rem, + 'background-color': #FFFFFF, + 'menu-background-color': #FFFFFF, + 'range-selection-background-color': #EBF2FC, + 'range-selection-background-color--disabled': #FAFAFB, + 'grid-cell--border-color--today': #0556BF, + 'grid-cell--color--today': #0556BF, + 'label-color--focus': #0556BF + ), + 'forms-checkbox': ( + 'background-color--hover': #F3F4F4, + 'background-color': #FFFFFF, + 'font-size': 0.8125rem, + 'font-weight': 500, + 'color': #0C1A2B, + 'border-color': #E7E8EA, + 'border-radius': 2px, + 'accent-color': #5AB81D, + 'size': 1.5rem + ), + 'button': ( + 'border-radius': 8px, + 'border-radius--active': 2px, + 'border-radius--focus': 8px, + 'medium-height': 48px, + 'small-height': 32px, + 'nano-height': 24px, + 'medium-font-size': 1rem, + 'medium-icon-font-size': 1.5rem, + 'small-font-size': 0.8125rem, + 'small-icon-font-size': 1rem, + 'nano-font-size': 0.8125rem, + 'nano-icon-font-size': 1rem, + 'font-weight': 400, + 'font-family': \Roboto Flex Variable\, sans-serif + ) + ) + ), + 'dark': ( + 'theme': ( + 'colors': ( + 'greyscale-100': #182536, + 'greyscale-200': #303C4B, + 'greyscale-300': #555F6B, + 'greyscale-400': #79818A, + 'greyscale-500': #9EA3AA, + 'greyscale-600': #C2C6CA, + 'greyscale-700': #E7E8EA, + 'greyscale-800': #F3F4F4, + 'greyscale-900': #FAFAFB, + 'greyscale-000': #0C1A2B, + 'primary-100': #3B4C62, + 'primary-200': #4D6481, + 'primary-300': #6381A6, + 'primary-400': #7FA5D5, + 'primary-500': #8CB5EA, + 'primary-600': #A3C4EE, + 'primary-700': #C3D8F4, + 'primary-800': #DDE9F8, + 'primary-900': #F4F8FD, + 'success-100': #EEF8D7, + 'success-200': #D9F1B2, + 'success-300': #BDE985, + 'success-400': #A0E25D, + 'success-500': #76D628, + 'success-600': #5BB520, + 'success-700': #43941A, + 'success-800': #307414, + 'success-900': #225D10, + 'warning-100': #F7F3D5, + 'warning-200': #F0E5AA, + 'warning-300': #E8D680, + 'warning-400': #E3C95F, + 'warning-500': #D9B32B, + 'warning-600': #BD9721, + 'warning-700': #9D7B1C, + 'warning-800': #7E6016, + 'warning-900': #684D12, + 'danger-100': #F8D0D0, + 'danger-200': #F09898, + 'danger-300': #F09898, + 'danger-400': #ED8585, + 'danger-500': #E96666, + 'danger-600': #DD6666, + 'danger-700': #C36666, + 'danger-800': #AE6666, + 'danger-900': #9D6666 + ) + ) + ) +) !default; diff --git a/packages/react/src/cunningham-tokens.ts b/packages/react/src/cunningham-tokens.ts index 8d43d5e..efa7c52 100644 --- a/packages/react/src/cunningham-tokens.ts +++ b/packages/react/src/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; +export const tokens = {"themes":{"default":{"theme":{"colors":{"secondary-text":"#555F6B","secondary-100":"#F2F7FC","secondary-200":"#EBF3FA","secondary-300":"#E2EEF8","secondary-400":"#DDEAF7","secondary-500":"#D4E5F5","secondary-600":"#C1D0DF","secondary-700":"#97A3AE","secondary-800":"#757E87","secondary-900":"#596067","info-text":"#FFFFFF","info-100":"#EBF2FC","info-200":"#8CB5EA","info-300":"#5894E1","info-400":"#377FDB","info-500":"#055FD2","info-600":"#0556BF","info-700":"#044395","info-800":"#033474","info-900":"#022858","greyscale-100":"#FAFAFB","greyscale-200":"#F3F4F4","greyscale-300":"#E7E8EA","greyscale-400":"#C2C6CA","greyscale-500":"#9EA3AA","greyscale-600":"#79818A","greyscale-700":"#555F6B","greyscale-800":"#303C4B","greyscale-900":"#0C1A2B","greyscale-000":"#FFFFFF","primary-100":"#EBF2FC","primary-200":"#8CB5EA","primary-300":"#5894E1","primary-400":"#377FDB","primary-500":"#055FD2","primary-600":"#0556BF","primary-700":"#044395","primary-800":"#033474","primary-900":"#022858","success-100":"#EFFCD3","success-200":"#DBFAA9","success-300":"#BEF27C","success-400":"#A0E659","success-500":"#76D628","success-600":"#5AB81D","success-700":"#419A14","success-800":"#2C7C0C","success-900":"#1D6607","warning-100":"#FFF8CD","warning-200":"#FFEF9B","warning-300":"#FFE469","warning-400":"#FFDA43","warning-500":"#FFC805","warning-600":"#DBA603","warning-700":"#B78702","warning-800":"#936901","warning-900":"#7A5400","danger-100":"#F4B0B0","danger-200":"#EE8A8A","danger-300":"#E65454","danger-400":"#E13333","danger-500":"#DA0000","danger-600":"#C60000","danger-700":"#9B0000","danger-800":"#780000","danger-900":"#5C0000","primary-text":"#FFFFFF","success-text":"#FFFFFF","warning-text":"#FFFFFF","danger-text":"#FFFFFF"},"font":{"sizes":{"h1":"1.75rem","h2":"1.375rem","h3":"1.125rem","h4":"0.8125rem","h5":"0.625rem","h6":"0.5rem","l":"1rem","m":"0.8125rem","s":"0.6875rem"},"weights":{"thin":200,"light":300,"regular":400,"medium":500,"bold":600,"extrabold":700,"black":800},"families":{"base":"\"Roboto Flex Variable\", sans-serif","accent":"\"Roboto Flex Variable\", sans-serif"},"letterSpacings":{"h1":"normal","h2":"normal","h3":"normal","h4":"normal","h5":"1px","h6":"normal","l":"normal","m":"normal","s":"normal"}},"spacings":{"xl":"4rem","l":"3rem","b":"1.625rem","s":"1rem","t":"0.5rem","st":"0.25rem"},"transitions":{"ease-in":"cubic-bezier(0.32, 0, 0.67, 0)","ease-out":"cubic-bezier(0.33, 1, 0.68, 1)","ease-in-out":"cubic-bezier(0.65, 0, 0.35, 1)","duration":"250ms"},"breakpoints":{"xs":0,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"components":{"forms-textarea":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-switch":{"accent-color":"#419A14","rail-background-color":"#9EA3AA","rail-background-color--disabled":"#C2C6CA","rail-border-radius":"50vw","handle-background-color":"white","handle-background-color--disabled":"#F3F4F4","handle-border-radius":"50%"},"forms-select":{"border-color":"#E7E8EA","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-color--disabled":"#9EA3AA","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","label-color--focus":"#0556BF","multi-pill-background-color":"#F3F4F4","multi-pill-border-radius":"2px","multi-pill-max-width":"68%","multi-pill-font-size":"0.8125rem"},"forms-radio":{"border-color":"#E7E8EA","accent-color":"#5AB81D","background-color":"#FFFFFF"},"forms-labelledbox":{"label-color--small":"#79818A","label-color--big":"#0C1A2B","label-color--small--disabled":"#79818A","label-color--big--disabled":"#79818A"},"forms-input":{"font-weight":400,"font-size":"1rem","border-radius":"8px","border-radius--hover":"2px","border-radius--focus":"2px","border-width":"1px","border-color":"#E7E8EA","border-color--hover":"#9EA3AA","border-color--focus":"#0556BF","border-style":"solid","label-color--focus":"#0556BF","background-color":"#FFFFFF","value-color":"#0C1A2B","value-color--disabled":"#303C4B"},"forms-fileuploader":{"background-color":"#FFFFFF","border-color":"#E7E8EA","border-radius":"0.5rem","border-width":"2px","border-style":"dotted","background-color--active":"#EBF2FC","color":"#0C1A2B","padding":"1rem","accent-color":"#0556BF","text-color":"#79818A","text-size":"0.6875rem","file-text-size":"0.8125rem","file-text-color":"#0C1A2B","file-text-weight":300,"file-border-color":"#E7E8EA","file-border-width":"1px","file-border-radius":"0.5rem","file-background-color":"#FFFFFF","file-specs-size":"0.6875rem","file-specs-color":"#79818A"},"forms-field":{"width":"292px","font-size":"0.6875rem","color":"#79818A"},"forms-datepicker":{"border-color":"#E7E8EA","border-color--disabled":"#F3F4F4","border-color--focus":"#0556BF","border-color--hover":"#9EA3AA","border-radius":"8px","border-radius--focus":"2px","border-radius--hover":"2px","border-style":"solid","border-width":"1px","value-color":"#0C1A2B","value-color--disabled":"#303C4B","font-size":"1rem","height":"3.5rem","item-background-color--hover":"#F3F4F4","item-background-color--selected":"#EBF2FC","item-color":"#303C4B","item-font-size":"1rem","background-color":"#FFFFFF","menu-background-color":"#FFFFFF","range-selection-background-color":"#EBF2FC","range-selection-background-color--disabled":"#FAFAFB","grid-cell--border-color--today":"#0556BF","grid-cell--color--today":"#0556BF","label-color--focus":"#0556BF"},"forms-checkbox":{"background-color--hover":"#F3F4F4","background-color":"#FFFFFF","font-size":"0.8125rem","font-weight":500,"color":"#0C1A2B","border-color":"#E7E8EA","border-radius":"2px","accent-color":"#5AB81D","size":"1.5rem"},"button":{"border-radius":"8px","border-radius--active":"2px","border-radius--focus":"8px","medium-height":"48px","small-height":"32px","nano-height":"24px","medium-font-size":"1rem","medium-icon-font-size":"1.5rem","small-font-size":"0.8125rem","small-icon-font-size":"1rem","nano-font-size":"0.8125rem","nano-icon-font-size":"1rem","font-weight":400,"font-family":"\"Roboto Flex Variable\", sans-serif"}}},"dark":{"theme":{"colors":{"greyscale-100":"#182536","greyscale-200":"#303C4B","greyscale-300":"#555F6B","greyscale-400":"#79818A","greyscale-500":"#9EA3AA","greyscale-600":"#C2C6CA","greyscale-700":"#E7E8EA","greyscale-800":"#F3F4F4","greyscale-900":"#FAFAFB","greyscale-000":"#0C1A2B","primary-100":"#3B4C62","primary-200":"#4D6481","primary-300":"#6381A6","primary-400":"#7FA5D5","primary-500":"#8CB5EA","primary-600":"#A3C4EE","primary-700":"#C3D8F4","primary-800":"#DDE9F8","primary-900":"#F4F8FD","success-100":"#EEF8D7","success-200":"#D9F1B2","success-300":"#BDE985","success-400":"#A0E25D","success-500":"#76D628","success-600":"#5BB520","success-700":"#43941A","success-800":"#307414","success-900":"#225D10","warning-100":"#F7F3D5","warning-200":"#F0E5AA","warning-300":"#E8D680","warning-400":"#E3C95F","warning-500":"#D9B32B","warning-600":"#BD9721","warning-700":"#9D7B1C","warning-800":"#7E6016","warning-900":"#684D12","danger-100":"#F8D0D0","danger-200":"#F09898","danger-300":"#F09898","danger-400":"#ED8585","danger-500":"#E96666","danger-600":"#DD6666","danger-700":"#C36666","danger-800":"#AE6666","danger-900":"#9D6666"}}}}}; diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss index 155cefc..956780e 100644 --- a/packages/react/src/index.scss +++ b/packages/react/src/index.scss @@ -1,7 +1,7 @@ @forward "./utils"; -@use "cunningham-tokens"; +@use "cunningham-tokens.css"; @use "@openfun/cunningham-tokens/default-tokens"; @use "utils/accessibility";