studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(react) add sass generator to react

Browse Source 
We need to use sass variable in order to use breakpoints in media
queries. Using native CSS vars in media queries is not possible.
This commit is contained in:
Nathan Vasse
2023-12-08 12:14:12 +01:00
committed by NathanVss
parent 5e3deb2399
commit 7b0686dede
6 changed files with 359 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/package.json
View File

@@ -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",

6
packages/react/src/cunningham-tokens.css
View File

@@ -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;

2
packages/react/src/cunningham-tokens.js
View File

File diff suppressed because one or more lines are too long

349
packages/react/src/cunningham-tokens.scss Normal file
View File

@@ -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;

2
packages/react/src/cunningham-tokens.ts
View File

File diff suppressed because one or more lines are too long

2
packages/react/src/index.scss
View File

@@ -1,7 +1,7 @@
@forward "./utils";
@use "cunningham-tokens";
@use "cunningham-tokens.css";
@use "@openfun/cunningham-tokens/default-tokens";
@use "utils/accessibility";