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

🎨(react) update theme tokens and structure

Browse Source 
This commit introduces a comprehensive update to the theme tokens in the
Cunningham package. The previous color definitions have been replaced
with a new structure that includes global color tokens for branding and
contextual elements. Additionally, the SCSS and JS files have been
refactored to align with this new token architecture, enhancing
maintainability and ensuring a cohesive design system across the
application. The TypeScript configuration has also been updated to
support JSX syntax.
This commit is contained in:
Nathan Panchout
2025-08-22 10:10:17 +02:00
committed by NathanVss
parent afb313fee0
commit bccdebd770
12 changed files with 2304 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1194
apps/demo/src/cunningham-tokens.css
View File

File diff suppressed because it is too large Load Diff

2
packages/react/package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "@openfun/cunningham-react", "name": "@openfun/cunningham-react",
"private": false, "private": false,
"version": "3.2.3", "version": "4.0.0",
"publishConfig": { "publishConfig": {
"access": "public" "access": "public"
}, },

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

@@ -597,10 +597,10 @@
--c--components--toast--font-weight: var(--c--globals--font--weights--regular); --c--components--toast--font-weight: var(--c--globals--font--weights--regular);
--c--components--toast--icon-size: 19px; --c--components--toast--icon-size: 19px;
--c--components--toast--progress-bar-height: 3px; --c--components--toast--progress-bar-height: 3px;
--c--components--modal--background-color: var(--c--theme--colors--greyscale-000); --c--components--modal--background-color: var(--c--contextuals--background--surface--secondary);
--c--components--modal--backdrop-color: #0C1A2B99; --c--components--modal--backdrop-color: #00000099;
--c--components--modal--border-radius: 4px; --c--components--modal--border-radius: 4px;
--c--components--modal--border-color: var(--c--theme--colors--greyscale-300); --c--components--modal--border-color: var(--c--contextuals--border--surface--primary);
--c--components--modal--box-shadow: 0px 1px 2px 0px #0C1A2B4D; --c--components--modal--box-shadow: 0px 1px 2px 0px #0C1A2B4D;
--c--components--modal--color: var(--c--contextuals--content--semantic--neutral--primary); --c--components--modal--color: var(--c--contextuals--content--semantic--neutral--primary);
--c--components--modal--title-font-weight: var(--c--globals--font--weights--bold); --c--components--modal--title-font-weight: var(--c--globals--font--weights--bold);
@@ -611,8 +611,8 @@
--c--components--modal--width-medium: 600px; --c--components--modal--width-medium: 600px;
--c--components--modal--width-large: 800px; --c--components--modal--width-large: 800px;
--c--components--modal--width-extra-large: 75%; --c--components--modal--width-extra-large: 75%;
--c--components--forms-textarea--font-weight: var(--c--theme--font--weights--regular); --c--components--forms-textarea--font-weight: var(--c--globals--font--weights--regular);
--c--components--forms-textarea--font-size: var(--c--theme--font--sizes--l); --c--components--forms-textarea--font-size: var(--c--globals--font--sizes--md);
--c--components--forms-textarea--border-radius: 8px; --c--components--forms-textarea--border-radius: 8px;
--c--components--forms-textarea--border-radius--hover: 2px; --c--components--forms-textarea--border-radius--hover: 2px;
--c--components--forms-textarea--border-radius--focus: 2px; --c--components--forms-textarea--border-radius--focus: 2px;
@@ -668,8 +668,8 @@
--c--components--forms-input--font-weight: var(--c--globals--font--weights--regular); --c--components--forms-input--font-weight: var(--c--globals--font--weights--regular);
--c--components--forms-input--font-size: var(--c--globals--font--sizes--md); --c--components--forms-input--font-size: var(--c--globals--font--sizes--md);
--c--components--forms-input--border-radius: 8px; --c--components--forms-input--border-radius: 8px;
--c--components--forms-input--border-radius--hover: 2px; --c--components--forms-input--border-radius--hover: 4px;
--c--components--forms-input--border-radius--focus: 2px; --c--components--forms-input--border-radius--focus: 4px;
--c--components--forms-input--border-width: 1px; --c--components--forms-input--border-width: 1px;
--c--components--forms-input--border-width--hover: 1px; --c--components--forms-input--border-width--hover: 1px;
--c--components--forms-input--border-width--focus: 1px; --c--components--forms-input--border-width--focus: 1px;
@@ -702,7 +702,7 @@
--c--components--forms-fileuploader--file-border-color: var(--c--contextuals--border--semantic--neutral--tertiary); --c--components--forms-fileuploader--file-border-color: var(--c--contextuals--border--semantic--neutral--tertiary);
--c--components--forms-fileuploader--file-border-width: 1px; --c--components--forms-fileuploader--file-border-width: 1px;
--c--components--forms-fileuploader--file-border-radius: 0.5rem; --c--components--forms-fileuploader--file-border-radius: 0.5rem;
--c--components--forms-fileuploader--file-background-color: var(--c--theme--colors--greyscale-000); --c--components--forms-fileuploader--file-background-color: var(--c--contextuals--background--surface--primary);
--c--components--forms-fileuploader--file-specs-size: 0.6875rem; --c--components--forms-fileuploader--file-specs-size: 0.6875rem;
--c--components--forms-fileuploader--file-specs-color: var(--c--contextuals--content--semantic--neutral--tertiary); --c--components--forms-fileuploader--file-specs-color: var(--c--contextuals--content--semantic--neutral--tertiary);
--c--components--forms-field--width: 292px; --c--components--forms-field--width: 292px;
@@ -750,12 +750,12 @@
--c--components--forms-checkbox--border-color--disabled: var(--c--contextuals--content--semantic--disabled--primary); --c--components--forms-checkbox--border-color--disabled: var(--c--contextuals--content--semantic--disabled--primary);
--c--components--button--border-radius: 8px; --c--components--button--border-radius: 8px;
--c--components--button--border-radius--active: 2px; --c--components--button--border-radius--active: 2px;
--c--components--button--border-radius--focus: 8px; --c--components--button--border-radius--focus: 4px;
--c--components--button--medium-text-height: 36px; --c--components--button--medium-text-height: 36px;
--c--components--button--medium-height: 48px; --c--components--button--medium-height: 48px;
--c--components--button--small-height: 32px; --c--components--button--small-height: 32px;
--c--components--button--nano-height: 24px; --c--components--button--nano-height: 24px;
--c--components--button--medium-font-size: var(--c--theme--font--sizes--l); --c--components--button--medium-font-size: var(--c--globals--font--sizes--md);
--c--components--button--medium-icon-font-size: 1.5rem; --c--components--button--medium-icon-font-size: 1.5rem;
--c--components--button--small-font-size: var(--c--globals--font--sizes--sm); --c--components--button--small-font-size: var(--c--globals--font--sizes--sm);
--c--components--button--small-icon-font-size: var(--c--globals--font--sizes--md); --c--components--button--small-icon-font-size: var(--c--globals--font--sizes--md);

662
packages/react/src/cunningham-tokens.scss
View File

@@ -1,89 +1,367 @@
$themes: ( $themes: (
'default': ( 'default': (
'theme': ( 'globals': (
'colors': ( 'colors': (
'secondary-text': #555F6B, 'logo-1': #377FDB,
'secondary-100': #F2F7FC, 'logo-2': #377FDB,
'secondary-200': #EBF3FA, 'logo-1-dark': #95ABFF,
'secondary-300': #E2EEF8, 'logo-2-dark': #95ABFF,
'secondary-400': #DDEAF7, 'brand-050': #EAF1FB,
'secondary-500': #D4E5F5, 'brand-100': #D5E4F7,
'secondary-600': #C1D0DF, 'brand-150': #C0D6F4,
'secondary-700': #97A3AE, 'brand-200': #ABC9F0,
'secondary-800': #757E87, 'brand-250': #96BCEC,
'secondary-900': #596067, 'brand-300': #80AEE8,
'info-text': #FFFFFF, 'brand-350': #6CA0E4,
'info-100': #EBF2FC, 'brand-400': #5693E0,
'info-200': #8CB5EA, 'brand-450': #4085DC,
'info-300': #5894E1, 'brand-500': #2976D8,
'info-400': #377FDB, 'brand-550': #1167D4,
'info-500': #055FD2, 'brand-600': #0659C5,
'info-600': #0556BF, 'brand-650': #1A509F,
'info-700': #044395, 'brand-700': #20467F,
'info-800': #033474, 'brand-750': #203C63,
'info-900': #022858, 'brand-800': #1D314C,
'greyscale-100': #FAFAFB, 'brand-850': #1A2638,
'greyscale-200': #F3F4F4, 'brand-900': #141C28,
'greyscale-300': #E7E8EA, 'brand-950': #0C1117,
'greyscale-400': #C2C6CA, 'gray-000': #FFFFFF,
'greyscale-500': #9EA3AA, 'gray-025': #F7F8F8,
'greyscale-600': #79818A, 'gray-050': #F0F1F2,
'greyscale-700': #555F6B, 'gray-100': #E1E2E5,
'greyscale-800': #303C4B, 'gray-150': #D2D4D8,
'greyscale-900': #0C1A2B, 'gray-200': #C4C7CB,
'greyscale-000': #FFFFFF, 'gray-250': #B5B9BE,
'primary-100': #EBF2FC, 'gray-300': #A7ACB2,
'primary-200': #8CB5EA, 'gray-350': #999EA5,
'primary-300': #5894E1, 'gray-400': #8D9197,
'primary-400': #377FDB, 'gray-450': #80848A,
'primary-500': #055FD2, 'gray-500': #74777C,
'primary-600': #0556BF, 'gray-550': #686B6F,
'primary-700': #044395, 'gray-600': #5C5F63,
'primary-800': #033474, 'gray-650': #505356,
'primary-900': #022858, 'gray-700': #45474A,
'success-100': #EFFCD3, 'gray-750': #3A3B3E,
'success-200': #DBFAA9, 'gray-800': #2F3033,
'success-300': #BEF27C, 'gray-850': #252627,
'success-400': #A0E659, 'gray-900': #1B1C1D,
'success-500': #76D628, 'gray-950': #101112,
'success-600': #5AB81D, 'gray-1000': #000000,
'success-700': #419A14, 'info-050': #EAF1FB,
'success-800': #2C7C0C, 'info-100': #D5E4F7,
'success-900': #1D6607, 'info-150': #C0D6F4,
'warning-100': #FFF8CD, 'info-200': #ABC9F0,
'warning-200': #FFEF9B, 'info-250': #96BCEC,
'warning-300': #FFE469, 'info-300': #80AEE8,
'warning-400': #FFDA43, 'info-350': #6CA0E4,
'warning-500': #FFC805, 'info-400': #5693E0,
'warning-600': #DBA603, 'info-450': #4085DC,
'warning-700': #B78702, 'info-500': #2976D8,
'warning-800': #936901, 'info-550': #1167D4,
'warning-900': #7A5400, 'info-600': #0659C5,
'danger-100': #F4B0B0, 'info-650': #1A509F,
'danger-200': #EE8A8A, 'info-700': #20467F,
'danger-300': #E65454, 'info-750': #203C63,
'danger-400': #E13333, 'info-800': #1D314C,
'danger-500': #DA0000, 'info-850': #1A2638,
'danger-600': #C60000, 'info-900': #141C28,
'danger-700': #9B0000, 'info-950': #0C1117,
'danger-800': #780000, 'success-050': #E4F7D4,
'danger-900': #5C0000, 'success-100': #C8EEA8,
'primary-text': #FFFFFF, 'success-150': #AAE579,
'success-text': #FFFFFF, 'success-200': #89DC45,
'warning-text': #FFFFFF, 'success-250': #72CF27,
'danger-text': #FFFFFF 'success-300': #6AC024,
'success-350': #61B121,
'success-400': #59A21E,
'success-450': #51941C,
'success-500': #4B851A,
'success-550': #427816,
'success-600': #3A6A14,
'success-650': #385C1F,
'success-700': #344D24,
'success-750': #2E4022,
'success-800': #27341F,
'success-850': #20281A,
'success-900': #181D15,
'success-950': #10120E,
'warning-050': #FFF1BD,
'warning-100': #FFE176,
'warning-150': #FFCF25,
'warning-200': #F4BF06,
'warning-250': #E3B205,
'warning-300': #D3A504,
'warning-350': #C29805,
'warning-400': #B28C03,
'warning-450': #A27F03,
'warning-500': #937303,
'warning-550': #836703,
'warning-600': #745B03,
'warning-650': #625019,
'warning-700': #524620,
'warning-750': #443B20,
'warning-800': #36301D,
'warning-850': #2A2619,
'warning-900': #1E1C13,
'warning-950': #12110C,
'error-050': #FCEDED,
'error-100': #FADBDB,
'error-150': #F7C9C9,
'error-200': #F5B7B7,
'error-250': #F2A4A4,
'error-300': #EF9191,
'error-350': #EC7D7D,
'error-400': #E96868,
'error-450': #E55050,
'error-500': #E13131,
'error-550': #D80000,
'error-600': #C00101,
'error-650': #9E2219,
'error-700': #802820,
'error-750': #662820,
'error-800': #4F231E,
'error-850': #3B1D19,
'error-900': #2A1614,
'error-950': #1A0E0C,
'red-050': #FDEDED,
'red-100': #FADBDB,
'red-150': #F8C9C9,
'red-200': #F5B7B6,
'red-250': #F3A4A3,
'red-300': #F09190,
'red-350': #EE7C7B,
'red-400': #EB6665,
'red-450': #E74E4D,
'red-500': #D83F3D,
'red-550': #C23837,
'red-600': #AC3231,
'red-650': #8D3531,
'red-700': #73332F,
'red-750': #5B2F2B,
'red-800': #472826,
'red-850': #35211F,
'red-900': #251817,
'red-950': #160F0E,
'orange-050': #FDEEE2,
'orange-100': #FCDDC5,
'orange-150': #FACBA8,
'orange-200': #F8B98B,
'orange-250': #F6A76A,
'orange-300': #F4934B,
'orange-350': #F27E27,
'orange-400': #E76E12,
'orange-450': #D26411,
'orange-500': #BE5B0F,
'orange-550': #AA510E,
'orange-600': #97480C,
'orange-650': #7E431D,
'orange-700': #673C22,
'orange-750': #533422,
'orange-800': #412C1F,
'orange-850': #31231B,
'orange-900': #221A14,
'orange-950': #15100C,
'brown-050': #F3F0EF,
'brown-100': #E7E1DF,
'brown-150': #DCD2CF,
'brown-200': #D0C4BF,
'brown-250': #C5B6B0,
'brown-300': #BAA7A1,
'brown-350': #AF9992,
'brown-400': #A48B83,
'brown-450': #997E74,
'brown-500': #8F7065,
'brown-550': #846357,
'brown-600': #7A5649,
'brown-650': #684C42,
'brown-700': #57423C,
'brown-750': #463833,
'brown-800': #382E2A,
'brown-850': #2B2422,
'brown-900': #1F1B19,
'brown-950': #121010,
'yellow-050': #FAF0D3,
'yellow-100': #F5E2A4,
'yellow-150': #F0D275,
'yellow-200': #EBC242,
'yellow-250': #E4B213,
'yellow-300': #D4A511,
'yellow-350': #C39810,
'yellow-400': #B38B0F,
'yellow-450': #A37F0D,
'yellow-500': #93730C,
'yellow-550': #84670B,
'yellow-600': #755B0A,
'yellow-650': #63501C,
'yellow-700': #534521,
'yellow-750': #443A21,
'yellow-800': #36301F,
'yellow-850': #29261A,
'yellow-900': #1D1C14,
'yellow-950': #12110C,
'green-050': #E2F6E5,
'green-100': #C5ECCA,
'green-150': #A7E3AF,
'green-200': #89D894,
'green-250': #67CE75,
'green-300': #4DC25D,
'green-350': #48B257,
'green-400': #41A44F,
'green-450': #3B9548,
'green-500': #368741,
'green-550': #30793A,
'green-600': #2B6B33,
'green-650': #2F5C34,
'green-700': #2E4E31,
'green-750': #2A412C,
'green-800': #253426,
'green-850': #1E281F,
'green-900': #171D17,
'green-950': #0F120F,
'blue-1-050': #EBF1FF,
'blue-1-100': #D6E3FE,
'blue-1-150': #C2D5FE,
'blue-1-200': #ADC7FE,
'blue-1-250': #99B8FD,
'blue-1-300': #84AAFD,
'blue-1-350': #6F9BFD,
'blue-1-400': #5A8DFB,
'blue-1-450': #437DFC,
'blue-1-500': #3D71E4,
'blue-1-550': #3665CC,
'blue-1-600': #305AB5,
'blue-1-650': #315093,
'blue-1-700': #2E4675,
'blue-1-750': #293B5E,
'blue-1-800': #243048,
'blue-1-850': #1E2635,
'blue-1-900': #171C25,
'blue-1-950': #0E1116,
'blue-2-050': #E2F4F9,
'blue-2-100': #C5E9F3,
'blue-2-150': #A7DDED,
'blue-2-200': #88D1E6,
'blue-2-250': #68C5E0,
'blue-2-300': #48B8D9,
'blue-2-350': #3BAACA,
'blue-2-400': #359CB9,
'blue-2-450': #318EA9,
'blue-2-500': #2C8199,
'blue-2-550': #277389,
'blue-2-600': #236679,
'blue-2-650': #2A5866,
'blue-2-700': #2A4B55,
'blue-2-750': #283F47,
'blue-2-800': #233337,
'blue-2-850': #1D272A,
'blue-2-900': #161C1E,
'blue-2-950': #0E1112,
'purple-050': #F6EEFF,
'purple-100': #ECDCFF,
'purple-150': #E3CBFE,
'purple-200': #DAB9FE,
'purple-250': #D0A7FE,
'purple-300': #C795FE,
'purple-350': #BD83FD,
'purple-400': #B36FFD,
'purple-450': #A85BFD,
'purple-500': #9B4BF3,
'purple-550': #8B43DA,
'purple-600': #7B3CC1,
'purple-650': #673C9B,
'purple-700': #56387D,
'purple-750': #463162,
'purple-800': #382A4A,
'purple-850': #2A2237,
'purple-900': #1E1926,
'purple-950': #121017,
'pink-050': #FCEDF5,
'pink-100': #F9DAEA,
'pink-150': #F7C7E0,
'pink-200': #F4B4D5,
'pink-250': #F1A1CA,
'pink-300': #EE8CBF,
'pink-350': #EA77B3,
'pink-400': #E760A6,
'pink-450': #E24797,
'pink-500': #CD4089,
'pink-550': #B8397B,
'pink-600': #A3336D,
'pink-650': #86355E,
'pink-700': #6E334F,
'pink-750': #582E42,
'pink-800': #442834,
'pink-850': #332028,
'pink-900': #24181D,
'pink-950': #160F12,
'black-000': #00000000,
'black-050': #0000000D,
'black-100': #0000001A,
'black-150': #00000026,
'black-200': #00000033,
'black-250': #00000040,
'black-300': #0000004D,
'black-350': #00000059,
'black-400': #00000066,
'black-450': #00000073,
'black-500': #00000080,
'black-550': #0000008C,
'black-600': #00000099,
'black-650': #000000A6,
'black-700': #000000B3,
'black-750': #000000BF,
'black-800': #000000CC,
'black-850': #000000D9,
'black-900': #000000E6,
'black-950': #000000F2,
'white-000': #FFFFFF,
'white-050': #FFFFFF0D,
'white-100': #FFFFFF1A,
'white-150': #FFFFFF26,
'white-200': #FFFFFF33,
'white-250': #FFFFFF40,
'white-300': #FFFFFF4D,
'white-350': #FFFFFF59,
'white-400': #FFFFFF66,
'white-450': #FFFFFF73,
'white-500': #FFFFFF80,
'white-550': #FFFFFF8C,
'white-600': #FFFFFF99,
'white-650': #FFFFFFA6,
'white-700': #FFFFFFB3,
'white-750': #FFFFFFBF,
'white-800': #FFFFFFCC,
'white-850': #FFFFFFD9,
'white-900': #FFFFFFE6,
'white-950': #FFFFFFF2
),
'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
), ),
'font': ( 'font': (
'sizes': ( 'sizes': (
'h1': 1.75rem, 'xs': 0.75rem,
'h2': 1.375rem, 'sm': 0.875rem,
'h3': 1.125rem, 'md': 1rem,
'h4': 0.8125rem, 'lg': 1.125rem,
'h5': 0.625rem, 'ml': 0.938rem,
'h6': 0.5rem, 'xl': 1.25rem,
'l': 1rem, 't': 0.6875rem,
'm': 0.8125rem, 's': 0.75rem,
's': 0.6875rem 'h1': 2rem,
'h2': 1.75rem,
'h3': 1.5rem,
'h4': 1.375rem,
'h5': 1.25rem,
'h6': 1.125rem,
'xl-alt': 5rem,
'lg-alt': 4.5rem,
'md-alt': 4rem,
'sm-alt': 3.5rem,
'xs-alt': 3rem
), ),
'weights': ( 'weights': (
'thin': 200, 'thin': 200,
@@ -97,32 +375,30 @@ $themes: (
'families': ( 'families': (
'base': #{\Roboto Flex Variable\, sans-serif}, 'base': #{\Roboto Flex Variable\, sans-serif},
'accent': #{\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': ( 'spacings': (
'xl': 4rem,
'l': 3rem, 'l': 3rem,
'b': 1.625rem, 'b': 1.625rem,
'm': 0.8125rem,
's': 1rem, 's': 1rem,
't': 0.5rem, 't': 0.5rem,
'st': 0.25rem 'st': 0.25rem,
), '4xs': 0.125rem,
'transitions': ( 'xxxs': 0.25rem,
'ease-in': #{cubic-bezier(0.32, 0, 0.67, 0)}, 'xxs': 0.375rem,
'ease-out': #{cubic-bezier(0.33, 1, 0.68, 1)}, 'xs': 0.5rem,
'ease-in-out': #{cubic-bezier(0.65, 0, 0.35, 1)}, 'sm': 0.75rem,
'duration': 250ms 'base': 1rem,
'md': 1.5rem,
'lg': 2rem,
'xl': 2.5rem,
'xxl': 3rem,
'xxxl': 3.5rem,
'4xl': 4rem,
'5xl': 4.5rem,
'6xl': 6rem,
'7xl': 7.5rem
), ),
'breakpoints': ( 'breakpoints': (
'xs': 0, 'xs': 0,
@@ -469,32 +745,33 @@ $themes: (
'components': ( 'components': (
'tooltip': ( 'tooltip': (
'border-radius': 0.5rem, 'border-radius': 0.5rem,
'background-color': #0C1A2B, 'background-color': #E1E2E5,
'color': #FFFFFF, 'border-color': #D2D4D8,
'font-size': 0.6875rem, 'color': #5C5F63,
'font-size': 0.75rem,
'padding': 1rem, 'padding': 1rem,
'max-width': 150px 'max-width': 150px
), ),
'toast': ( 'toast': (
'slide-in-duration': 1000ms, 'slide-in-duration': 1000ms,
'slide-out-duration': 300ms, 'slide-out-duration': 300ms,
'background-color': #FAFAFB, 'background-color': #F0F1F2,
'color': #0C1A2B, 'color': #252627,
'font-weight': 400, 'font-weight': 400,
'icon-size': 19px, 'icon-size': 19px,
'progress-bar-height': 3px 'progress-bar-height': 3px
), ),
'modal': ( 'modal': (
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'backdrop-color': #0C1A2B99, 'backdrop-color': #00000099,
'border-radius': 4px, 'border-radius': 4px,
'border-color': #E7E8EA, 'border-color': #E1E2E5,
'box-shadow': 0px 1px 2px 0px #0C1A2B4D, 'box-shadow': 0px 1px 2px 0px #0C1A2B4D,
'color': #0C1A2B, 'color': #252627,
'title-font-weight': 600, 'title-font-weight': 600,
'content-font-size': 0.8125rem, 'content-font-size': 0.875rem,
'content-font-weight': 400, 'content-font-weight': 400,
'content-color': #303C4B, 'content-color': #252627,
'width-small': 300px, 'width-small': 300px,
'width-medium': 600px, 'width-medium': 600px,
'width-large': 800px, 'width-large': 800px,
@@ -507,172 +784,189 @@ $themes: (
'border-radius--hover': 2px, 'border-radius--hover': 2px,
'border-radius--focus': 2px, 'border-radius--focus': 2px,
'border-width': 1px, 'border-width': 1px,
'border-color': #E7E8EA, 'border-color': #D2D4D8,
'border-color--hover': #9EA3AA, 'border-color--hover': #A7ACB2,
'border-color--focus': #0556BF, 'border-color--focus': #1167D4,
'border-color--disabled': #E1E2E5,
'border-style': solid, 'border-style': solid,
'label-color--focus': #0556BF, 'label-color--focus': #1167D4,
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'value-color': #0C1A2B, 'value-color': #252627,
'value-color--disabled': #303C4B 'value-color--disabled': #5C5F63
), ),
'forms-switch': ( 'forms-switch': (
'accent-color': #419A14, 'accent-color': #2976D8,
'rail-background-color': #9EA3AA, 'rail-background-color': #74777C,
'rail-background-color--disabled': #C2C6CA, 'rail-background-color--disabled': #A7ACB2,
'rail-border-radius': 50vw, 'rail-border-radius': 50vw,
'handle-background-color': white, 'handle-background-color': #FFFFFFF2,
'handle-background-color--disabled': #F3F4F4, 'handle-background-color--disabled': #FFFFFF80,
'handle-border-radius': 50% 'handle-border-radius': 50%
), ),
'forms-select': ( 'forms-select': (
'border-color': #E7E8EA, 'border-color': #D2D4D8,
'border-color--focus': #0556BF, 'border-color--focus': #1167D4,
'border-color--hover': #9EA3AA, 'border-color--hover': #A7ACB2,
'border-radius': 8px, 'border-radius': 8px,
'border-radius--focus': 2px, 'border-radius--focus': 2px,
'border-radius--hover': 2px, 'border-radius--hover': 2px,
'border-style': solid, 'border-style': solid,
'border-width': 1px, 'border-width': 1px,
'value-color': #0C1A2B, 'value-color': #252627,
'value-color--disabled': #303C4B, 'value-color--disabled': #A7ACB2,
'font-size': 1rem, 'font-size': 1rem,
'height': 3.5rem, 'height': 3.5rem,
'item-background-color--hover': #F3F4F4, 'item-background-color--hover': #E1E2E5,
'item-background-color--selected': #EBF2FC, 'item-background-color--selected': #D5E4F7,
'item-color': #303C4B, 'item-color': #252627,
'item-color--disabled': #9EA3AA, 'item-color--disabled': #FFFFFF80,
'item-font-size': 1rem, 'item-font-size': 1rem,
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'menu-background-color': #FFFFFF, 'menu-background-color': #FFFFFF,
'label-color--focus': #0556BF, 'label-color--focus': #1167D4,
'multi-pill-background-color': #F3F4F4, 'multi-pill-background-color': #F0F1F2,
'multi-pill-border-radius': 2px, 'multi-pill-border-radius': 2px,
'multi-pill-max-width': 68%, 'multi-pill-max-width': 68%,
'multi-pill-font-size': 0.8125rem 'multi-pill-font-size': 1rem
), ),
'forms-radio': ( 'forms-radio': (
'border-color': #E7E8EA, 'border-color': #D2D4D8,
'accent-color': #5AB81D, 'border-color--disabled': #D2D4D8,
'accent-color': #2976D8,
'background-color': #FFFFFF 'background-color': #FFFFFF
), ),
'forms-labelledbox': ( 'forms-labelledbox': (
'label-color--small': #79818A, 'label-color--small': #74777C,
'label-color--big': #0C1A2B, 'label-color--big': #252627,
'label-color--small--disabled': #79818A, 'label-color--small--disabled': #5C5F63,
'label-color--big--disabled': #79818A 'label-color--big--disabled': #5C5F63
), ),
'forms-input': ( 'forms-input': (
'font-weight': 400, 'font-weight': 400,
'font-size': 1rem, 'font-size': 1rem,
'border-radius': 8px, 'border-radius': 8px,
'border-radius--hover': 2px, 'border-radius--hover': 4px,
'border-radius--focus': 2px, 'border-radius--focus': 4px,
'border-width': 1px, 'border-width': 1px,
'border-color': #E7E8EA, 'border-width--hover': 1px,
'border-color--hover': #9EA3AA, 'border-width--focus': 1px,
'border-color--focus': #0556BF, 'border-color': #D2D4D8,
'border-color--hover': #D2D4D8,
'border-color--focus': #1167D4,
'border-style': solid, 'border-style': solid,
'label-color--focus': #0556BF, 'placeholder-color': #74777C,
'label-color': #74777C,
'label-color--focus': #20467F,
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'value-color': #0C1A2B, 'value-color': #252627,
'value-color--disabled': #303C4B 'value-color--disabled': #A7ACB2
), ),
'forms-fileuploader': ( 'forms-fileuploader': (
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'border-color': #E7E8EA, 'border-color': #D2D4D8,
'border-radius': 0.5rem, 'border-radius': 0.5rem,
'border-width': 2px, 'border-width': 2px,
'border-style': dotted, 'border-style': dotted,
'background-color--active': #EBF2FC, 'background-color--active': #EAF1FB,
'color': #0C1A2B, 'color': #252627,
'color--success': #4B851A,
'color--error': #E13131,
'padding': 1rem, 'padding': 1rem,
'accent-color': #0556BF, 'accent-color': #1167D4,
'text-color': #79818A, 'text-color': #74777C,
'text-size': 0.6875rem, 'text-size': 0.6875rem,
'file-text-size': 0.8125rem, 'file-text-size': 0.8125rem,
'file-text-color': #0C1A2B, 'file-text-color': #252627,
'file-text-weight': 300, 'file-text-weight': 300,
'file-border-color': #E7E8EA, 'file-border-color': #D2D4D8,
'file-border-width': 1px, 'file-border-width': 1px,
'file-border-radius': 0.5rem, 'file-border-radius': 0.5rem,
'file-background-color': #FFFFFF, 'file-background-color': #FFFFFF,
'file-specs-size': 0.6875rem, 'file-specs-size': 0.6875rem,
'file-specs-color': #79818A 'file-specs-color': #74777C
), ),
'forms-field': ( 'forms-field': (
'width': 292px, 'width': 292px,
'font-size': 0.6875rem, 'font-size': 0.75rem,
'color': #79818A 'color': #5C5F63,
'color--error': #C00101,
'color--success': #3A6A14,
'color--disabled': #A7ACB2
), ),
'forms-datepicker': ( 'forms-datepicker': (
'border-color': #E7E8EA, 'border-color': #D2D4D8,
'border-color--disabled': #F3F4F4, 'border-color--disabled': #E1E2E5,
'border-color--focus': #0556BF, 'border-color--focus': #1167D4,
'border-color--hover': #9EA3AA, 'border-color--hover': #A7ACB2,
'border-radius': 8px, 'border-radius': 8px,
'border-radius--focus': 2px, 'border-radius--focus': 2px,
'border-radius--hover': 2px, 'border-radius--hover': 2px,
'border-style': solid, 'border-style': solid,
'border-width': 1px, 'border-width': 1px,
'value-color': #0C1A2B, 'value-color': #74777C,
'value-color--disabled': #303C4B, 'value-color--disabled': #A7ACB2,
'font-size': 1rem, 'font-size': 1.125rem,
'height': 3.5rem, 'height': 3.5rem,
'item-background-color--hover': #F3F4F4, 'item-background-color--hover': #E1E2E5,
'item-background-color--selected': #EBF2FC, 'item-background-color--selected': #EAF1FB,
'item-color': #303C4B, 'item-color': #252627,
'item-font-size': 1rem, 'item-font-size': 1rem,
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'menu-background-color': #FFFFFF, 'menu-background-color': #FFFFFF,
'range-selection-background-color': #EBF2FC, 'range-selection-background-color': #EAF1FB,
'range-selection-background-color--disabled': #FAFAFB, 'range-selection-background-color--disabled': #F0F1F2,
'grid-cell--border-color--today': #0556BF, 'grid-cell--border-color--today': #1167D4,
'grid-cell--color--today': #0556BF, 'grid-cell--color--today': #20467F,
'label-color--focus': #0556BF 'label-color--focus': #80AEE8
), ),
'forms-checkbox': ( 'forms-checkbox': (
'background-color--hover': #F3F4F4, 'background-color--hover': #E1E2E5,
'background-color': #FFFFFF, 'background-color': #FFFFFF,
'font-size': 0.8125rem, 'font-size': 0.75rem,
'font-weight': 500, 'font-weight': 500,
'color': #0C1A2B, 'color': #252627,
'border-color': #E7E8EA, 'border-color': #74777C,
'border-radius': 2px, 'border-radius': 2px,
'accent-color': #5AB81D, 'accent-color': #FFFFFFF2,
'size': 1.5rem 'size': 1.5rem,
'background-color--checked': #2976D8,
'background-color--indeterminate': #2976D8,
'background-color--disabled': #A7ACB2,
'border-color--disabled': #A7ACB2
), ),
'button': ( 'button': (
'border-radius': 8px, 'border-radius': 8px,
'border-radius--active': 2px, 'border-radius--active': 2px,
'border-radius--focus': 8px, 'border-radius--focus': 4px,
'medium-text-height': 36px, 'medium-text-height': 36px,
'medium-height': 48px, 'medium-height': 48px,
'small-height': 32px, 'small-height': 32px,
'nano-height': 24px, 'nano-height': 24px,
'medium-font-size': 1rem, 'medium-font-size': 1rem,
'medium-icon-font-size': 1.5rem, 'medium-icon-font-size': 1.5rem,
'small-font-size': 0.8125rem, 'small-font-size': 0.875rem,
'small-icon-font-size': 1rem, 'small-icon-font-size': 1rem,
'nano-font-size': 0.8125rem, 'nano-font-size': 0.875rem,
'nano-icon-font-size': 1rem, 'nano-icon-font-size': 1rem,
'font-weight': 400, 'font-weight': 400,
'font-family': #{\Roboto Flex Variable\, sans-serif}, 'font-family': #{\Roboto Flex Variable\, sans-serif},
'text-font-weight': 500 'text-font-weight': 500
), ),
'alert': ( 'alert': (
'background-color': #FAFAFB, 'background-color': #F0F1F2,
'border-radius': 4px, 'border-radius': 4px,
'border-color': #686B6F,
'border-left-color': #686B6F,
'font-weight': 500, 'font-weight': 500,
'color': #0C1A2B, 'color': #252627,
'icon-size': 19px, 'icon-size': 19px,
'additional-font-weight': 400, 'additional-font-weight': 400,
'additional-color': #555F6B 'additional-color': #252627
) )
) )
), ),
'dark': ( 'dark': (
'theme': ( 'globals': (
'colors': ( 'colors': (
'logo-1': #377FDB, 'logo-1': #377FDB,
'logo-2': #377FDB, 'logo-2': #377FDB,

2
packages/react/src/docs/spacings.stories.tsx
View File

@@ -13,7 +13,7 @@ export const Default: Story = {
render: () => { render: () => {
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: "10px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
{Object.entries(tokens.themes.default.theme.spacings).map( {Object.entries(tokens.themes.default.globals.spacings).map(
([key, value]) => { ([key, value]) => {
return ( return (
<div <div

12
packages/react/src/docs/typo.stories.tsx
View File

@@ -13,8 +13,8 @@ export const Sizes: Story = {
render: () => { render: () => {
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.sizes).map((key) => ( {Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
<div key={key} className={"clr-greyscale-800 fs-" + key}> <div key={key} className={"clr-gray-800 fs-" + key}>
Using the <code>fs-{key}</code> class Using the <code>fs-{key}</code> class
</div> </div>
))} ))}
@@ -27,8 +27,8 @@ export const Weights: Story = {
render: () => { render: () => {
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.weights).map((key) => ( {Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
<div key={key} className={"clr-greyscale-800 fs-l fw-" + key}> <div key={key} className={"clr-gray-800 fs-l fw-" + key}>
Using the <code>fw-{key}</code> class Using the <code>fw-{key}</code> class
</div> </div>
))} ))}
@@ -41,8 +41,8 @@ export const Families: Story = {
render: () => { render: () => {
return ( return (
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}> <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
{Object.keys(tokens.themes.default.theme.font.families).map((key) => ( {Object.keys(tokens.themes.default.globals.font.families).map((key) => (
<div key={key} className={"clr-greyscale-800 f-" + key}> <div key={key} className={"clr-gray-800 f-" + key}>
Using the <code>f-{key}</code> class Using the <code>f-{key}</code> class
</div> </div>
))} ))}

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

@@ -1,4 +1,3 @@
@forward "./utils"; @forward "./utils";
@use "cunningham-tokens.css"; @use "cunningham-tokens.css";
@@ -12,7 +11,7 @@
@use "./components/Forms/Field"; @use "./components/Forms/Field";
@use "./components/Forms/FileUploader"; @use "./components/Forms/FileUploader";
@use "./components/Forms/Radio"; @use "./components/Forms/Radio";
@use './components/Forms/TextArea'; @use "./components/Forms/TextArea";
@use "./components/Forms/Input"; @use "./components/Forms/Input";
@use "./components/Forms/LabelledBox"; @use "./components/Forms/LabelledBox";
@use "./components/Forms/Select"; @use "./components/Forms/Select";
@@ -26,5 +25,5 @@
@use "./components/Tooltip"; @use "./components/Tooltip";
body { body {
font-family: var(--c--theme--font--families--base); font-family: var(--c--globals--font--families--base);
} }

2
packages/react/src/utils/_responsive.scss
View File

@@ -2,7 +2,7 @@
@use "../cunningham-tokens" as *; @use "../cunningham-tokens" as *;
@function breakpoint($name, $tokens: $themes) { @function breakpoint($name, $tokens: $themes) {
@return map.get($tokens, 'default', 'theme', 'breakpoints', $name); @return map.get($tokens, 'default', 'globals', 'breakpoints', $name);
} }
@mixin container($name, $tokens: $themes) { @mixin container($name, $tokens: $themes) {

1
packages/react/tsconfig.json
View File

@@ -1,6 +1,7 @@
{ {
"extends": "@openfun/typescript-configs/react.json", "extends": "@openfun/typescript-configs/react.json",
"compilerOptions": { "compilerOptions": {
"jsx": "react",
"noEmit": true, "noEmit": true,
"paths": { "paths": {
":/*": ["./src/*"] ":/*": ["./src/*"]

239
packages/tokens/src/bin/Generators/CssGenerator.ts
View File

@@ -20,6 +20,7 @@ export const cssGenerator: Generator = async (tokens, opts) => {
const { default: defaultTheme, ...otherThemes } = tokens.themes; const { default: defaultTheme, ...otherThemes } = tokens.themes;
const flatTokens = flatify(defaultTheme, Config.sass.varSeparator); const flatTokens = flatify(defaultTheme, Config.sass.varSeparator);
const cssVars = Object.keys(flatTokens).reduce((acc, token) => { const cssVars = Object.keys(flatTokens).reduce((acc, token) => {
return ( return (
acc + acc +
@@ -71,62 +72,74 @@ function generateColorClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateBgClasses(tokens: Tokens) { function generateBgClasses(tokens: Tokens) {
return [ const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
...Object.keys(tokens.themes.default.globals.colors).map(
(key) => return Object.keys(flatTokens)
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`, .filter((key) => {
), // Only include keys that are related to colors (globals.colors or contextuals.background)
...Object.keys(tokens.themes.default.contextuals.background).flatMap( return (
(type) => { key.startsWith("globals--colors--") ||
const values = key.startsWith("contextuals--background--")
tokens.themes.default.contextuals.background[ );
type as keyof typeof tokens.themes.default.contextuals.background })
]; .map((key) => {
// For each subkey (e.g., primary, secondary, etc.), generate a class // Convert the flat key to CSS class name
return Object.keys(values).map( let className = key;
(subkey) =>
`.bg-${type}-${subkey} { background-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`, // Handle globals.colors
); if (key.startsWith("globals--colors--")) {
}, className = key.replace("globals--colors--", "");
), }
]; // Handle contextuals.background
else if (key.startsWith("contextuals--background--")) {
className = key.replace("contextuals--background--", "");
}
// Convert separators to hyphens for CSS class names
className = className.replace(
new RegExp(Config.sass.varSeparator, "g"),
"-",
);
const a = `.bg-${className} { background-color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`;
// console.log(a);
return a;
});
} }
function generateBorderClasses(tokens: Tokens) { function generateBorderClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.contextuals.border).flatMap( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(type) => {
const values = return Object.keys(flatTokens)
tokens.themes.default.contextuals.border[ .filter((key) => {
type as keyof typeof tokens.themes.default.contextuals.border // Only include keys that are related to borders (contextuals.border)
]; return key.startsWith("contextuals--border--");
// For each subkey (e.g., primary, secondary, etc.), generate a class })
return Object.keys(values).flatMap((subkey) => [ .flatMap((key) => {
`.border-clr-${type}-${subkey} { border-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`, // Convert the flat key to CSS class name
`.border-thin-${type}-${subkey} { border: 1px solid var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`, const className = key.replace("contextuals--border--", "");
]);
}, return [
); `.border-clr-${className} { border-color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.border-thin-${className} { border: 1px solid var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
];
});
} }
function generateContentClasses(tokens: Tokens) { function generateContentClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.contextuals.content).flatMap( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(type) => {
if (type === "logo1" || type === "logo2") {
return [
`.clr-content-${type} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}); }`,
];
}
const values = return Object.keys(flatTokens)
tokens.themes.default.contextuals.content[ .filter((key) => {
type as keyof typeof tokens.themes.default.contextuals.content // Only include keys that are related to content (contextuals.content)
]; return key.startsWith("contextuals--content--");
// For each subkey (e.g., primary, secondary, etc.), generate a class })
return Object.keys(values).flatMap((subkey) => [ .map((key) => {
`.clr-content-${type}-${subkey} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}--${subkey}); }`, // Convert the flat key to CSS class name
]); const className = key.replace("contextuals--content--", "");
},
); return `.clr-content-${className} { color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`;
});
} }
/** /**
@@ -136,10 +149,19 @@ function generateContentClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateClrClasses(tokens: Tokens) { function generateClrClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.colors).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.clr-${key} { color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`, return Object.keys(flatTokens)
); .filter((key) => {
// Only include keys that are related to colors (globals.colors)
return key.startsWith("globals--colors--");
})
.map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--colors--", "");
return `.clr-${className} { color: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`;
});
} }
function generateFontClasses(tokens: Tokens) { function generateFontClasses(tokens: Tokens) {
@@ -157,10 +179,19 @@ function generateFontClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateFwClasses(tokens: Tokens) { function generateFwClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.font.weights).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}globals--font--weights--${key}); }`, return Object.keys(flatTokens)
); .filter((key) => {
// Only include keys that are related to font weights (globals.font.weights)
return key.startsWith("globals--font--weights--");
})
.map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--font--weights--", "");
return `.fw-${className} { font-weight: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`;
});
} }
/** /**
@@ -170,13 +201,22 @@ function generateFwClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateFsClasses(tokens: Tokens) { function generateFsClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.font.sizes).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.fs-${key} { return Object.keys(flatTokens)
font-size: var(--${Config.sass.varPrefix}globals--font--sizes--${key}); .filter((key) => {
letter-spacing: var(--${Config.sass.varPrefix}globals--font--letterspacings--${key}); // Only include keys that are related to font sizes (globals.font.sizes)
}`, return key.startsWith("globals--font--sizes--");
); })
.map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--font--sizes--", "");
return `.fs-${className} {
font-size: var(--${Config.sass.varPrefix}${key.toLowerCase()});
letter-spacing: var(--${Config.sass.varPrefix}${key.replace("sizes", "letterspacings").toLowerCase()});
}`;
});
} }
/** /**
@@ -186,10 +226,19 @@ function generateFsClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateFClasses(tokens: Tokens) { function generateFClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.font.families).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.f-${key} { font-family: var(--${Config.sass.varPrefix}globals--font--families--${key}); }`, return Object.keys(flatTokens)
); .filter((key) => {
// Only include keys that are related to font families (globals.font.families)
return key.startsWith("globals--font--families--");
})
.map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--font--families--", "");
return `.f-${className} { font-family: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`;
});
} }
function generateSpacingClasses(tokens: Tokens) { function generateSpacingClasses(tokens: Tokens) {
@@ -203,14 +252,25 @@ function generateSpacingClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generateMarginClasses(tokens: Tokens) { function generateMarginClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.spacings).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.m-${key} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + return Object.keys(flatTokens)
`.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + .filter((key) => {
`.mt-${key} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + // Only include keys that are related to spacings (globals.spacings)
`.ml-${key} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + return key.startsWith("globals--spacings--");
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`, })
); .map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--spacings--", "");
return [
`.m-${className} { margin: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.mb-${className} { margin-bottom: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.mt-${className} { margin-top: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.ml-${className} { margin-left: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.mr-${className} { margin-right: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
].join("");
});
} }
/** /**
@@ -220,12 +280,23 @@ function generateMarginClasses(tokens: Tokens) {
* @param tokens * @param tokens
*/ */
function generatePaddingClasses(tokens: Tokens) { function generatePaddingClasses(tokens: Tokens) {
return Object.keys(tokens.themes.default.globals.spacings).map( const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
(key) =>
`.p-${key} { padding: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + return Object.keys(flatTokens)
`.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + .filter((key) => {
`.pt-${key} { padding-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + // Only include keys that are related to spacings (globals.spacings)
`.pl-${key} { padding-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` + return key.startsWith("globals--spacings--");
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`, })
); .map((key) => {
// Convert the flat key to CSS class name
const className = key.replace("globals--spacings--", "");
return [
`.p-${className} { padding: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.pb-${className} { padding-bottom: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.pt-${className} { padding-top: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.pl-${className} { padding-left: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
`.pr-${className} { padding-right: var(--${Config.sass.varPrefix}${key.toLowerCase()}); }`,
].join("");
});
} }

981
packages/tokens/src/bin/cunningham.ts
View File

File diff suppressed because it is too large Load Diff

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

File diff suppressed because one or more lines are too long