🎨(react) update theme tokens and structure
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
committed by
NathanVss
NathanVss
parent
afb313fee0
commit
bccdebd770
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@openfun/cunningham-react",
|
||||
"private": false,
|
||||
"version": "3.2.3",
|
||||
"version": "4.0.0",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
|
||||
@@ -597,10 +597,10 @@
|
||||
--c--components--toast--font-weight: var(--c--globals--font--weights--regular);
|
||||
--c--components--toast--icon-size: 19px;
|
||||
--c--components--toast--progress-bar-height: 3px;
|
||||
--c--components--modal--background-color: var(--c--theme--colors--greyscale-000);
|
||||
--c--components--modal--backdrop-color: #0C1A2B99;
|
||||
--c--components--modal--background-color: var(--c--contextuals--background--surface--secondary);
|
||||
--c--components--modal--backdrop-color: #00000099;
|
||||
--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--color: var(--c--contextuals--content--semantic--neutral--primary);
|
||||
--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-large: 800px;
|
||||
--c--components--modal--width-extra-large: 75%;
|
||||
--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--font-weight: var(--c--globals--font--weights--regular);
|
||||
--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--hover: 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-size: var(--c--globals--font--sizes--md);
|
||||
--c--components--forms-input--border-radius: 8px;
|
||||
--c--components--forms-input--border-radius--hover: 2px;
|
||||
--c--components--forms-input--border-radius--focus: 2px;
|
||||
--c--components--forms-input--border-radius--hover: 4px;
|
||||
--c--components--forms-input--border-radius--focus: 4px;
|
||||
--c--components--forms-input--border-width: 1px;
|
||||
--c--components--forms-input--border-width--hover: 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-width: 1px;
|
||||
--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-color: var(--c--contextuals--content--semantic--neutral--tertiary);
|
||||
--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--button--border-radius: 8px;
|
||||
--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-height: 48px;
|
||||
--c--components--button--small-height: 32px;
|
||||
--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--small-font-size: var(--c--globals--font--sizes--sm);
|
||||
--c--components--button--small-icon-font-size: var(--c--globals--font--sizes--md);
|
||||
|
||||
@@ -1,89 +1,367 @@
|
||||
$themes: (
|
||||
'default': (
|
||||
'theme': (
|
||||
'globals': (
|
||||
'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
|
||||
'logo-1': #377FDB,
|
||||
'logo-2': #377FDB,
|
||||
'logo-1-dark': #95ABFF,
|
||||
'logo-2-dark': #95ABFF,
|
||||
'brand-050': #EAF1FB,
|
||||
'brand-100': #D5E4F7,
|
||||
'brand-150': #C0D6F4,
|
||||
'brand-200': #ABC9F0,
|
||||
'brand-250': #96BCEC,
|
||||
'brand-300': #80AEE8,
|
||||
'brand-350': #6CA0E4,
|
||||
'brand-400': #5693E0,
|
||||
'brand-450': #4085DC,
|
||||
'brand-500': #2976D8,
|
||||
'brand-550': #1167D4,
|
||||
'brand-600': #0659C5,
|
||||
'brand-650': #1A509F,
|
||||
'brand-700': #20467F,
|
||||
'brand-750': #203C63,
|
||||
'brand-800': #1D314C,
|
||||
'brand-850': #1A2638,
|
||||
'brand-900': #141C28,
|
||||
'brand-950': #0C1117,
|
||||
'gray-000': #FFFFFF,
|
||||
'gray-025': #F7F8F8,
|
||||
'gray-050': #F0F1F2,
|
||||
'gray-100': #E1E2E5,
|
||||
'gray-150': #D2D4D8,
|
||||
'gray-200': #C4C7CB,
|
||||
'gray-250': #B5B9BE,
|
||||
'gray-300': #A7ACB2,
|
||||
'gray-350': #999EA5,
|
||||
'gray-400': #8D9197,
|
||||
'gray-450': #80848A,
|
||||
'gray-500': #74777C,
|
||||
'gray-550': #686B6F,
|
||||
'gray-600': #5C5F63,
|
||||
'gray-650': #505356,
|
||||
'gray-700': #45474A,
|
||||
'gray-750': #3A3B3E,
|
||||
'gray-800': #2F3033,
|
||||
'gray-850': #252627,
|
||||
'gray-900': #1B1C1D,
|
||||
'gray-950': #101112,
|
||||
'gray-1000': #000000,
|
||||
'info-050': #EAF1FB,
|
||||
'info-100': #D5E4F7,
|
||||
'info-150': #C0D6F4,
|
||||
'info-200': #ABC9F0,
|
||||
'info-250': #96BCEC,
|
||||
'info-300': #80AEE8,
|
||||
'info-350': #6CA0E4,
|
||||
'info-400': #5693E0,
|
||||
'info-450': #4085DC,
|
||||
'info-500': #2976D8,
|
||||
'info-550': #1167D4,
|
||||
'info-600': #0659C5,
|
||||
'info-650': #1A509F,
|
||||
'info-700': #20467F,
|
||||
'info-750': #203C63,
|
||||
'info-800': #1D314C,
|
||||
'info-850': #1A2638,
|
||||
'info-900': #141C28,
|
||||
'info-950': #0C1117,
|
||||
'success-050': #E4F7D4,
|
||||
'success-100': #C8EEA8,
|
||||
'success-150': #AAE579,
|
||||
'success-200': #89DC45,
|
||||
'success-250': #72CF27,
|
||||
'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': (
|
||||
'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
|
||||
'xs': 0.75rem,
|
||||
'sm': 0.875rem,
|
||||
'md': 1rem,
|
||||
'lg': 1.125rem,
|
||||
'ml': 0.938rem,
|
||||
'xl': 1.25rem,
|
||||
't': 0.6875rem,
|
||||
's': 0.75rem,
|
||||
'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': (
|
||||
'thin': 200,
|
||||
@@ -97,32 +375,30 @@ $themes: (
|
||||
'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,
|
||||
'm': 0.8125rem,
|
||||
'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
|
||||
'st': 0.25rem,
|
||||
'4xs': 0.125rem,
|
||||
'xxxs': 0.25rem,
|
||||
'xxs': 0.375rem,
|
||||
'xs': 0.5rem,
|
||||
'sm': 0.75rem,
|
||||
'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': (
|
||||
'xs': 0,
|
||||
@@ -469,32 +745,33 @@ $themes: (
|
||||
'components': (
|
||||
'tooltip': (
|
||||
'border-radius': 0.5rem,
|
||||
'background-color': #0C1A2B,
|
||||
'color': #FFFFFF,
|
||||
'font-size': 0.6875rem,
|
||||
'background-color': #E1E2E5,
|
||||
'border-color': #D2D4D8,
|
||||
'color': #5C5F63,
|
||||
'font-size': 0.75rem,
|
||||
'padding': 1rem,
|
||||
'max-width': 150px
|
||||
),
|
||||
'toast': (
|
||||
'slide-in-duration': 1000ms,
|
||||
'slide-out-duration': 300ms,
|
||||
'background-color': #FAFAFB,
|
||||
'color': #0C1A2B,
|
||||
'background-color': #F0F1F2,
|
||||
'color': #252627,
|
||||
'font-weight': 400,
|
||||
'icon-size': 19px,
|
||||
'progress-bar-height': 3px
|
||||
),
|
||||
'modal': (
|
||||
'background-color': #FFFFFF,
|
||||
'backdrop-color': #0C1A2B99,
|
||||
'backdrop-color': #00000099,
|
||||
'border-radius': 4px,
|
||||
'border-color': #E7E8EA,
|
||||
'border-color': #E1E2E5,
|
||||
'box-shadow': 0px 1px 2px 0px #0C1A2B4D,
|
||||
'color': #0C1A2B,
|
||||
'color': #252627,
|
||||
'title-font-weight': 600,
|
||||
'content-font-size': 0.8125rem,
|
||||
'content-font-size': 0.875rem,
|
||||
'content-font-weight': 400,
|
||||
'content-color': #303C4B,
|
||||
'content-color': #252627,
|
||||
'width-small': 300px,
|
||||
'width-medium': 600px,
|
||||
'width-large': 800px,
|
||||
@@ -507,172 +784,189 @@ $themes: (
|
||||
'border-radius--hover': 2px,
|
||||
'border-radius--focus': 2px,
|
||||
'border-width': 1px,
|
||||
'border-color': #E7E8EA,
|
||||
'border-color--hover': #9EA3AA,
|
||||
'border-color--focus': #0556BF,
|
||||
'border-color': #D2D4D8,
|
||||
'border-color--hover': #A7ACB2,
|
||||
'border-color--focus': #1167D4,
|
||||
'border-color--disabled': #E1E2E5,
|
||||
'border-style': solid,
|
||||
'label-color--focus': #0556BF,
|
||||
'label-color--focus': #1167D4,
|
||||
'background-color': #FFFFFF,
|
||||
'value-color': #0C1A2B,
|
||||
'value-color--disabled': #303C4B
|
||||
'value-color': #252627,
|
||||
'value-color--disabled': #5C5F63
|
||||
),
|
||||
'forms-switch': (
|
||||
'accent-color': #419A14,
|
||||
'rail-background-color': #9EA3AA,
|
||||
'rail-background-color--disabled': #C2C6CA,
|
||||
'accent-color': #2976D8,
|
||||
'rail-background-color': #74777C,
|
||||
'rail-background-color--disabled': #A7ACB2,
|
||||
'rail-border-radius': 50vw,
|
||||
'handle-background-color': white,
|
||||
'handle-background-color--disabled': #F3F4F4,
|
||||
'handle-background-color': #FFFFFFF2,
|
||||
'handle-background-color--disabled': #FFFFFF80,
|
||||
'handle-border-radius': 50%
|
||||
),
|
||||
'forms-select': (
|
||||
'border-color': #E7E8EA,
|
||||
'border-color--focus': #0556BF,
|
||||
'border-color--hover': #9EA3AA,
|
||||
'border-color': #D2D4D8,
|
||||
'border-color--focus': #1167D4,
|
||||
'border-color--hover': #A7ACB2,
|
||||
'border-radius': 8px,
|
||||
'border-radius--focus': 2px,
|
||||
'border-radius--hover': 2px,
|
||||
'border-style': solid,
|
||||
'border-width': 1px,
|
||||
'value-color': #0C1A2B,
|
||||
'value-color--disabled': #303C4B,
|
||||
'value-color': #252627,
|
||||
'value-color--disabled': #A7ACB2,
|
||||
'font-size': 1rem,
|
||||
'height': 3.5rem,
|
||||
'item-background-color--hover': #F3F4F4,
|
||||
'item-background-color--selected': #EBF2FC,
|
||||
'item-color': #303C4B,
|
||||
'item-color--disabled': #9EA3AA,
|
||||
'item-background-color--hover': #E1E2E5,
|
||||
'item-background-color--selected': #D5E4F7,
|
||||
'item-color': #252627,
|
||||
'item-color--disabled': #FFFFFF80,
|
||||
'item-font-size': 1rem,
|
||||
'background-color': #FFFFFF,
|
||||
'menu-background-color': #FFFFFF,
|
||||
'label-color--focus': #0556BF,
|
||||
'multi-pill-background-color': #F3F4F4,
|
||||
'label-color--focus': #1167D4,
|
||||
'multi-pill-background-color': #F0F1F2,
|
||||
'multi-pill-border-radius': 2px,
|
||||
'multi-pill-max-width': 68%,
|
||||
'multi-pill-font-size': 0.8125rem
|
||||
'multi-pill-font-size': 1rem
|
||||
),
|
||||
'forms-radio': (
|
||||
'border-color': #E7E8EA,
|
||||
'accent-color': #5AB81D,
|
||||
'border-color': #D2D4D8,
|
||||
'border-color--disabled': #D2D4D8,
|
||||
'accent-color': #2976D8,
|
||||
'background-color': #FFFFFF
|
||||
),
|
||||
'forms-labelledbox': (
|
||||
'label-color--small': #79818A,
|
||||
'label-color--big': #0C1A2B,
|
||||
'label-color--small--disabled': #79818A,
|
||||
'label-color--big--disabled': #79818A
|
||||
'label-color--small': #74777C,
|
||||
'label-color--big': #252627,
|
||||
'label-color--small--disabled': #5C5F63,
|
||||
'label-color--big--disabled': #5C5F63
|
||||
),
|
||||
'forms-input': (
|
||||
'font-weight': 400,
|
||||
'font-size': 1rem,
|
||||
'border-radius': 8px,
|
||||
'border-radius--hover': 2px,
|
||||
'border-radius--focus': 2px,
|
||||
'border-radius--hover': 4px,
|
||||
'border-radius--focus': 4px,
|
||||
'border-width': 1px,
|
||||
'border-color': #E7E8EA,
|
||||
'border-color--hover': #9EA3AA,
|
||||
'border-color--focus': #0556BF,
|
||||
'border-width--hover': 1px,
|
||||
'border-width--focus': 1px,
|
||||
'border-color': #D2D4D8,
|
||||
'border-color--hover': #D2D4D8,
|
||||
'border-color--focus': #1167D4,
|
||||
'border-style': solid,
|
||||
'label-color--focus': #0556BF,
|
||||
'placeholder-color': #74777C,
|
||||
'label-color': #74777C,
|
||||
'label-color--focus': #20467F,
|
||||
'background-color': #FFFFFF,
|
||||
'value-color': #0C1A2B,
|
||||
'value-color--disabled': #303C4B
|
||||
'value-color': #252627,
|
||||
'value-color--disabled': #A7ACB2
|
||||
),
|
||||
'forms-fileuploader': (
|
||||
'background-color': #FFFFFF,
|
||||
'border-color': #E7E8EA,
|
||||
'border-color': #D2D4D8,
|
||||
'border-radius': 0.5rem,
|
||||
'border-width': 2px,
|
||||
'border-style': dotted,
|
||||
'background-color--active': #EBF2FC,
|
||||
'color': #0C1A2B,
|
||||
'background-color--active': #EAF1FB,
|
||||
'color': #252627,
|
||||
'color--success': #4B851A,
|
||||
'color--error': #E13131,
|
||||
'padding': 1rem,
|
||||
'accent-color': #0556BF,
|
||||
'text-color': #79818A,
|
||||
'accent-color': #1167D4,
|
||||
'text-color': #74777C,
|
||||
'text-size': 0.6875rem,
|
||||
'file-text-size': 0.8125rem,
|
||||
'file-text-color': #0C1A2B,
|
||||
'file-text-color': #252627,
|
||||
'file-text-weight': 300,
|
||||
'file-border-color': #E7E8EA,
|
||||
'file-border-color': #D2D4D8,
|
||||
'file-border-width': 1px,
|
||||
'file-border-radius': 0.5rem,
|
||||
'file-background-color': #FFFFFF,
|
||||
'file-specs-size': 0.6875rem,
|
||||
'file-specs-color': #79818A
|
||||
'file-specs-color': #74777C
|
||||
),
|
||||
'forms-field': (
|
||||
'width': 292px,
|
||||
'font-size': 0.6875rem,
|
||||
'color': #79818A
|
||||
'font-size': 0.75rem,
|
||||
'color': #5C5F63,
|
||||
'color--error': #C00101,
|
||||
'color--success': #3A6A14,
|
||||
'color--disabled': #A7ACB2
|
||||
),
|
||||
'forms-datepicker': (
|
||||
'border-color': #E7E8EA,
|
||||
'border-color--disabled': #F3F4F4,
|
||||
'border-color--focus': #0556BF,
|
||||
'border-color--hover': #9EA3AA,
|
||||
'border-color': #D2D4D8,
|
||||
'border-color--disabled': #E1E2E5,
|
||||
'border-color--focus': #1167D4,
|
||||
'border-color--hover': #A7ACB2,
|
||||
'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,
|
||||
'value-color': #74777C,
|
||||
'value-color--disabled': #A7ACB2,
|
||||
'font-size': 1.125rem,
|
||||
'height': 3.5rem,
|
||||
'item-background-color--hover': #F3F4F4,
|
||||
'item-background-color--selected': #EBF2FC,
|
||||
'item-color': #303C4B,
|
||||
'item-background-color--hover': #E1E2E5,
|
||||
'item-background-color--selected': #EAF1FB,
|
||||
'item-color': #252627,
|
||||
'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
|
||||
'range-selection-background-color': #EAF1FB,
|
||||
'range-selection-background-color--disabled': #F0F1F2,
|
||||
'grid-cell--border-color--today': #1167D4,
|
||||
'grid-cell--color--today': #20467F,
|
||||
'label-color--focus': #80AEE8
|
||||
),
|
||||
'forms-checkbox': (
|
||||
'background-color--hover': #F3F4F4,
|
||||
'background-color--hover': #E1E2E5,
|
||||
'background-color': #FFFFFF,
|
||||
'font-size': 0.8125rem,
|
||||
'font-size': 0.75rem,
|
||||
'font-weight': 500,
|
||||
'color': #0C1A2B,
|
||||
'border-color': #E7E8EA,
|
||||
'color': #252627,
|
||||
'border-color': #74777C,
|
||||
'border-radius': 2px,
|
||||
'accent-color': #5AB81D,
|
||||
'size': 1.5rem
|
||||
'accent-color': #FFFFFFF2,
|
||||
'size': 1.5rem,
|
||||
'background-color--checked': #2976D8,
|
||||
'background-color--indeterminate': #2976D8,
|
||||
'background-color--disabled': #A7ACB2,
|
||||
'border-color--disabled': #A7ACB2
|
||||
),
|
||||
'button': (
|
||||
'border-radius': 8px,
|
||||
'border-radius--active': 2px,
|
||||
'border-radius--focus': 8px,
|
||||
'border-radius--focus': 4px,
|
||||
'medium-text-height': 36px,
|
||||
'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-font-size': 0.875rem,
|
||||
'small-icon-font-size': 1rem,
|
||||
'nano-font-size': 0.8125rem,
|
||||
'nano-font-size': 0.875rem,
|
||||
'nano-icon-font-size': 1rem,
|
||||
'font-weight': 400,
|
||||
'font-family': #{\Roboto Flex Variable\, sans-serif},
|
||||
'text-font-weight': 500
|
||||
),
|
||||
'alert': (
|
||||
'background-color': #FAFAFB,
|
||||
'background-color': #F0F1F2,
|
||||
'border-radius': 4px,
|
||||
'border-color': #686B6F,
|
||||
'border-left-color': #686B6F,
|
||||
'font-weight': 500,
|
||||
'color': #0C1A2B,
|
||||
'color': #252627,
|
||||
'icon-size': 19px,
|
||||
'additional-font-weight': 400,
|
||||
'additional-color': #555F6B
|
||||
'additional-color': #252627
|
||||
)
|
||||
)
|
||||
),
|
||||
'dark': (
|
||||
'theme': (
|
||||
'globals': (
|
||||
'colors': (
|
||||
'logo-1': #377FDB,
|
||||
'logo-2': #377FDB,
|
||||
|
||||
@@ -13,7 +13,7 @@ export const Default: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<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]) => {
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -13,8 +13,8 @@ export const Sizes: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.theme.font.sizes).map((key) => (
|
||||
<div key={key} className={"clr-greyscale-800 fs-" + key}>
|
||||
{Object.keys(tokens.themes.default.globals.font.sizes).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 fs-" + key}>
|
||||
Using the <code>fs-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
@@ -27,8 +27,8 @@ export const Weights: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.theme.font.weights).map((key) => (
|
||||
<div key={key} className={"clr-greyscale-800 fs-l fw-" + key}>
|
||||
{Object.keys(tokens.themes.default.globals.font.weights).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 fs-l fw-" + key}>
|
||||
Using the <code>fw-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
@@ -41,8 +41,8 @@ export const Families: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
|
||||
{Object.keys(tokens.themes.default.theme.font.families).map((key) => (
|
||||
<div key={key} className={"clr-greyscale-800 f-" + key}>
|
||||
{Object.keys(tokens.themes.default.globals.font.families).map((key) => (
|
||||
<div key={key} className={"clr-gray-800 f-" + key}>
|
||||
Using the <code>f-{key}</code> class
|
||||
</div>
|
||||
))}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
@forward "./utils";
|
||||
|
||||
@use "cunningham-tokens.css";
|
||||
@@ -12,7 +11,7 @@
|
||||
@use "./components/Forms/Field";
|
||||
@use "./components/Forms/FileUploader";
|
||||
@use "./components/Forms/Radio";
|
||||
@use './components/Forms/TextArea';
|
||||
@use "./components/Forms/TextArea";
|
||||
@use "./components/Forms/Input";
|
||||
@use "./components/Forms/LabelledBox";
|
||||
@use "./components/Forms/Select";
|
||||
@@ -26,5 +25,5 @@
|
||||
@use "./components/Tooltip";
|
||||
|
||||
body {
|
||||
font-family: var(--c--theme--font--families--base);
|
||||
font-family: var(--c--globals--font--families--base);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@use "../cunningham-tokens" as *;
|
||||
|
||||
@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) {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"extends": "@openfun/typescript-configs/react.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react",
|
||||
"noEmit": true,
|
||||
"paths": {
|
||||
":/*": ["./src/*"]
|
||||
|
||||
@@ -20,6 +20,7 @@ export const cssGenerator: Generator = async (tokens, opts) => {
|
||||
const { default: defaultTheme, ...otherThemes } = tokens.themes;
|
||||
|
||||
const flatTokens = flatify(defaultTheme, Config.sass.varSeparator);
|
||||
|
||||
const cssVars = Object.keys(flatTokens).reduce((acc, token) => {
|
||||
return (
|
||||
acc +
|
||||
@@ -71,62 +72,74 @@ function generateColorClasses(tokens: Tokens) {
|
||||
* @param tokens
|
||||
*/
|
||||
function generateBgClasses(tokens: Tokens) {
|
||||
return [
|
||||
...Object.keys(tokens.themes.default.globals.colors).map(
|
||||
(key) =>
|
||||
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`,
|
||||
),
|
||||
...Object.keys(tokens.themes.default.contextuals.background).flatMap(
|
||||
(type) => {
|
||||
const values =
|
||||
tokens.themes.default.contextuals.background[
|
||||
type as keyof typeof tokens.themes.default.contextuals.background
|
||||
];
|
||||
// For each subkey (e.g., primary, secondary, etc.), generate a class
|
||||
return Object.keys(values).map(
|
||||
(subkey) =>
|
||||
`.bg-${type}-${subkey} { background-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
|
||||
);
|
||||
},
|
||||
),
|
||||
];
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
return Object.keys(flatTokens)
|
||||
.filter((key) => {
|
||||
// Only include keys that are related to colors (globals.colors or contextuals.background)
|
||||
return (
|
||||
key.startsWith("globals--colors--") ||
|
||||
key.startsWith("contextuals--background--")
|
||||
);
|
||||
})
|
||||
.map((key) => {
|
||||
// Convert the flat key to CSS class name
|
||||
let className = key;
|
||||
|
||||
// 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) {
|
||||
return Object.keys(tokens.themes.default.contextuals.border).flatMap(
|
||||
(type) => {
|
||||
const values =
|
||||
tokens.themes.default.contextuals.border[
|
||||
type as keyof typeof tokens.themes.default.contextuals.border
|
||||
];
|
||||
// For each subkey (e.g., primary, secondary, etc.), generate a class
|
||||
return Object.keys(values).flatMap((subkey) => [
|
||||
`.border-clr-${type}-${subkey} { border-color: var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
|
||||
`.border-thin-${type}-${subkey} { border: 1px solid var(--${Config.sass.varPrefix}contextuals--background--${type}--${subkey}); }`,
|
||||
]);
|
||||
},
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
return Object.keys(flatTokens)
|
||||
.filter((key) => {
|
||||
// Only include keys that are related to borders (contextuals.border)
|
||||
return key.startsWith("contextuals--border--");
|
||||
})
|
||||
.flatMap((key) => {
|
||||
// Convert the flat key to CSS class name
|
||||
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) {
|
||||
return Object.keys(tokens.themes.default.contextuals.content).flatMap(
|
||||
(type) => {
|
||||
if (type === "logo1" || type === "logo2") {
|
||||
return [
|
||||
`.clr-content-${type} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}); }`,
|
||||
];
|
||||
}
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
const values =
|
||||
tokens.themes.default.contextuals.content[
|
||||
type as keyof typeof tokens.themes.default.contextuals.content
|
||||
];
|
||||
// For each subkey (e.g., primary, secondary, etc.), generate a class
|
||||
return Object.keys(values).flatMap((subkey) => [
|
||||
`.clr-content-${type}-${subkey} { color: var(--${Config.sass.varPrefix}contextuals--content--${type}--${subkey}); }`,
|
||||
]);
|
||||
},
|
||||
);
|
||||
return Object.keys(flatTokens)
|
||||
.filter((key) => {
|
||||
// Only include keys that are related to content (contextuals.content)
|
||||
return key.startsWith("contextuals--content--");
|
||||
})
|
||||
.map((key) => {
|
||||
// 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
|
||||
*/
|
||||
function generateClrClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.colors).map(
|
||||
(key) =>
|
||||
`.clr-${key} { color: var(--${Config.sass.varPrefix}globals--colors--${key}); }`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
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) {
|
||||
@@ -157,10 +179,19 @@ function generateFontClasses(tokens: Tokens) {
|
||||
* @param tokens
|
||||
*/
|
||||
function generateFwClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.font.weights).map(
|
||||
(key) =>
|
||||
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}globals--font--weights--${key}); }`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
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
|
||||
*/
|
||||
function generateFsClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.font.sizes).map(
|
||||
(key) =>
|
||||
`.fs-${key} {
|
||||
font-size: var(--${Config.sass.varPrefix}globals--font--sizes--${key});
|
||||
letter-spacing: var(--${Config.sass.varPrefix}globals--font--letterspacings--${key});
|
||||
}`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
return Object.keys(flatTokens)
|
||||
.filter((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
|
||||
*/
|
||||
function generateFClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.font.families).map(
|
||||
(key) =>
|
||||
`.f-${key} { font-family: var(--${Config.sass.varPrefix}globals--font--families--${key}); }`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
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) {
|
||||
@@ -203,14 +252,25 @@ function generateSpacingClasses(tokens: Tokens) {
|
||||
* @param tokens
|
||||
*/
|
||||
function generateMarginClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.spacings).map(
|
||||
(key) =>
|
||||
`.m-${key} { margin: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.mt-${key} { margin-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.ml-${key} { margin-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
return Object.keys(flatTokens)
|
||||
.filter((key) => {
|
||||
// Only include keys that are related to spacings (globals.spacings)
|
||||
return key.startsWith("globals--spacings--");
|
||||
})
|
||||
.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
|
||||
*/
|
||||
function generatePaddingClasses(tokens: Tokens) {
|
||||
return Object.keys(tokens.themes.default.globals.spacings).map(
|
||||
(key) =>
|
||||
`.p-${key} { padding: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.pt-${key} { padding-top: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.pl-${key} { padding-left: var(--${Config.sass.varPrefix}globals--spacings--${key}); }` +
|
||||
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}globals--spacings--${key}); }`,
|
||||
);
|
||||
const flatTokens = flatify(tokens.themes.default, Config.sass.varSeparator);
|
||||
|
||||
return Object.keys(flatTokens)
|
||||
.filter((key) => {
|
||||
// Only include keys that are related to spacings (globals.spacings)
|
||||
return key.startsWith("globals--spacings--");
|
||||
})
|
||||
.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("");
|
||||
});
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user