diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css index 3266751..817507f 100644 --- a/apps/demo/src/cunningham-tokens.css +++ b/apps/demo/src/cunningham-tokens.css @@ -1,165 +1,1041 @@ :root { - --c--theme--colors--secondary-text: var(--c--theme--colors--greyscale-700); - --c--theme--colors--secondary-100: #F2F7FC; - --c--theme--colors--secondary-200: #EBF3FA; - --c--theme--colors--secondary-300: #E2EEF8; - --c--theme--colors--secondary-400: #DDEAF7; - --c--theme--colors--secondary-500: #D4E5F5; - --c--theme--colors--secondary-600: #C1D0DF; - --c--theme--colors--secondary-700: #97A3AE; - --c--theme--colors--secondary-800: #757E87; - --c--theme--colors--secondary-900: #596067; - --c--theme--colors--info-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--info-100: #EBF2FC; - --c--theme--colors--info-200: #8CB5EA; - --c--theme--colors--info-300: #5894E1; - --c--theme--colors--info-400: #377FDB; - --c--theme--colors--info-500: #055FD2; - --c--theme--colors--info-600: #0556BF; - --c--theme--colors--info-700: #044395; - --c--theme--colors--info-800: #033474; - --c--theme--colors--info-900: #022858; - --c--theme--colors--greyscale-100: #FAFAFB; - --c--theme--colors--greyscale-200: #F3F4F4; - --c--theme--colors--greyscale-300: #E7E8EA; - --c--theme--colors--greyscale-400: #C2C6CA; - --c--theme--colors--greyscale-500: #9EA3AA; - --c--theme--colors--greyscale-600: #79818A; - --c--theme--colors--greyscale-700: #555F6B; - --c--theme--colors--greyscale-800: #303C4B; - --c--theme--colors--greyscale-900: #0C1A2B; - --c--theme--colors--greyscale-000: #FFFFFF; - --c--theme--colors--primary-100: #EBF2FC; - --c--theme--colors--primary-200: #8CB5EA; - --c--theme--colors--primary-300: #5894E1; - --c--theme--colors--primary-400: #377FDB; - --c--theme--colors--primary-500: #055FD2; - --c--theme--colors--primary-600: #0556BF; - --c--theme--colors--primary-700: #044395; - --c--theme--colors--primary-800: #033474; - --c--theme--colors--primary-900: #022858; - --c--theme--colors--success-100: #EFFCD3; - --c--theme--colors--success-200: #DBFAA9; - --c--theme--colors--success-300: #BEF27C; - --c--theme--colors--success-400: #A0E659; - --c--theme--colors--success-500: #76D628; - --c--theme--colors--success-600: #5AB81D; - --c--theme--colors--success-700: #419A14; - --c--theme--colors--success-800: #2C7C0C; - --c--theme--colors--success-900: #1D6607; - --c--theme--colors--warning-100: #FFF8CD; - --c--theme--colors--warning-200: #FFEF9B; - --c--theme--colors--warning-300: #FFE469; - --c--theme--colors--warning-400: #FFDA43; - --c--theme--colors--warning-500: #FFC805; - --c--theme--colors--warning-600: #DBA603; - --c--theme--colors--warning-700: #B78702; - --c--theme--colors--warning-800: #936901; - --c--theme--colors--warning-900: #7A5400; - --c--theme--colors--danger-100: #F4B0B0; - --c--theme--colors--danger-200: #EE8A8A; - --c--theme--colors--danger-300: #E65454; - --c--theme--colors--danger-400: #E13333; - --c--theme--colors--danger-500: #DA0000; - --c--theme--colors--danger-600: #C60000; - --c--theme--colors--danger-700: #9B0000; - --c--theme--colors--danger-800: #780000; - --c--theme--colors--danger-900: #5C0000; - --c--theme--colors--primary-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--success-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--warning-text: var(--c--theme--colors--greyscale-000); - --c--theme--colors--danger-text: var(--c--theme--colors--greyscale-000); - --c--theme--font--sizes--h1: 1.75rem; - --c--theme--font--sizes--h2: 1.375rem; - --c--theme--font--sizes--h3: 1.125rem; - --c--theme--font--sizes--h4: 0.8125rem; - --c--theme--font--sizes--h5: 0.625rem; - --c--theme--font--sizes--h6: 0.5rem; - --c--theme--font--sizes--l: 1rem; - --c--theme--font--sizes--m: 0.8125rem; - --c--theme--font--sizes--s: 0.6875rem; - --c--theme--font--weights--thin: 200; - --c--theme--font--weights--light: 300; - --c--theme--font--weights--regular: 400; - --c--theme--font--weights--medium: 500; - --c--theme--font--weights--bold: 600; - --c--theme--font--weights--extrabold: 700; - --c--theme--font--weights--black: 800; - --c--theme--font--families--base: "Roboto Flex Variable", sans-serif; - --c--theme--font--families--accent: "Roboto Flex Variable", sans-serif; - --c--theme--font--letterspacings--h1: normal; - --c--theme--font--letterspacings--h2: normal; - --c--theme--font--letterspacings--h3: normal; - --c--theme--font--letterspacings--h4: normal; - --c--theme--font--letterspacings--h5: 1px; - --c--theme--font--letterspacings--h6: normal; - --c--theme--font--letterspacings--l: normal; - --c--theme--font--letterspacings--m: normal; - --c--theme--font--letterspacings--s: normal; - --c--theme--spacings--xl: 4rem; - --c--theme--spacings--l: 3rem; - --c--theme--spacings--b: 1.625rem; - --c--theme--spacings--s: 1rem; - --c--theme--spacings--t: 0.5rem; - --c--theme--spacings--st: 0.25rem; - --c--theme--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); - --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--globals--colors--logo-1: #377FDB; + --c--globals--colors--logo-2: #377FDB; + --c--globals--colors--logo-1-dark: #95ABFF; + --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--brand-050: #EAF1FB; + --c--globals--colors--brand-100: #D5E4F7; + --c--globals--colors--brand-150: #C0D6F4; + --c--globals--colors--brand-200: #ABC9F0; + --c--globals--colors--brand-250: #96BCEC; + --c--globals--colors--brand-300: #80AEE8; + --c--globals--colors--brand-350: #6CA0E4; + --c--globals--colors--brand-400: #5693E0; + --c--globals--colors--brand-450: #4085DC; + --c--globals--colors--brand-500: #2976D8; + --c--globals--colors--brand-550: #1167D4; + --c--globals--colors--brand-600: #0659C5; + --c--globals--colors--brand-650: #1A509F; + --c--globals--colors--brand-700: #20467F; + --c--globals--colors--brand-750: #203C63; + --c--globals--colors--brand-800: #1D314C; + --c--globals--colors--brand-850: #1A2638; + --c--globals--colors--brand-900: #141C28; + --c--globals--colors--brand-950: #0C1117; + --c--globals--colors--gray-000: #FFFFFF; + --c--globals--colors--gray-025: #F7F8F8; + --c--globals--colors--gray-050: #F0F1F2; + --c--globals--colors--gray-100: #E1E2E5; + --c--globals--colors--gray-150: #D2D4D8; + --c--globals--colors--gray-200: #C4C7CB; + --c--globals--colors--gray-250: #B5B9BE; + --c--globals--colors--gray-300: #A7ACB2; + --c--globals--colors--gray-350: #999EA5; + --c--globals--colors--gray-400: #8D9197; + --c--globals--colors--gray-450: #80848A; + --c--globals--colors--gray-500: #74777C; + --c--globals--colors--gray-550: #686B6F; + --c--globals--colors--gray-600: #5C5F63; + --c--globals--colors--gray-650: #505356; + --c--globals--colors--gray-700: #45474A; + --c--globals--colors--gray-750: #3A3B3E; + --c--globals--colors--gray-800: #2F3033; + --c--globals--colors--gray-850: #252627; + --c--globals--colors--gray-900: #1B1C1D; + --c--globals--colors--gray-950: #101112; + --c--globals--colors--gray-1000: #000000; + --c--globals--colors--info-050: #EAF1FB; + --c--globals--colors--info-100: #D5E4F7; + --c--globals--colors--info-150: #C0D6F4; + --c--globals--colors--info-200: #ABC9F0; + --c--globals--colors--info-250: #96BCEC; + --c--globals--colors--info-300: #80AEE8; + --c--globals--colors--info-350: #6CA0E4; + --c--globals--colors--info-400: #5693E0; + --c--globals--colors--info-450: #4085DC; + --c--globals--colors--info-500: #2976D8; + --c--globals--colors--info-550: #1167D4; + --c--globals--colors--info-600: #0659C5; + --c--globals--colors--info-650: #1A509F; + --c--globals--colors--info-700: #20467F; + --c--globals--colors--info-750: #203C63; + --c--globals--colors--info-800: #1D314C; + --c--globals--colors--info-850: #1A2638; + --c--globals--colors--info-900: #141C28; + --c--globals--colors--info-950: #0C1117; + --c--globals--colors--success-050: #E4F7D4; + --c--globals--colors--success-100: #C8EEA8; + --c--globals--colors--success-150: #AAE579; + --c--globals--colors--success-200: #89DC45; + --c--globals--colors--success-250: #72CF27; + --c--globals--colors--success-300: #6AC024; + --c--globals--colors--success-350: #61B121; + --c--globals--colors--success-400: #59A21E; + --c--globals--colors--success-450: #51941C; + --c--globals--colors--success-500: #4B851A; + --c--globals--colors--success-550: #427816; + --c--globals--colors--success-600: #3A6A14; + --c--globals--colors--success-650: #385C1F; + --c--globals--colors--success-700: #344D24; + --c--globals--colors--success-750: #2E4022; + --c--globals--colors--success-800: #27341F; + --c--globals--colors--success-850: #20281A; + --c--globals--colors--success-900: #181D15; + --c--globals--colors--success-950: #10120E; + --c--globals--colors--warning-050: #FFF1BD; + --c--globals--colors--warning-100: #FFE176; + --c--globals--colors--warning-150: #FFCF25; + --c--globals--colors--warning-200: #F4BF06; + --c--globals--colors--warning-250: #E3B205; + --c--globals--colors--warning-300: #D3A504; + --c--globals--colors--warning-350: #C29805; + --c--globals--colors--warning-400: #B28C03; + --c--globals--colors--warning-450: #A27F03; + --c--globals--colors--warning-500: #937303; + --c--globals--colors--warning-550: #836703; + --c--globals--colors--warning-600: #745B03; + --c--globals--colors--warning-650: #625019; + --c--globals--colors--warning-700: #524620; + --c--globals--colors--warning-750: #443B20; + --c--globals--colors--warning-800: #36301D; + --c--globals--colors--warning-850: #2A2619; + --c--globals--colors--warning-900: #1E1C13; + --c--globals--colors--warning-950: #12110C; + --c--globals--colors--error-050: #FCEDED; + --c--globals--colors--error-100: #FADBDB; + --c--globals--colors--error-150: #F7C9C9; + --c--globals--colors--error-200: #F5B7B7; + --c--globals--colors--error-250: #F2A4A4; + --c--globals--colors--error-300: #EF9191; + --c--globals--colors--error-350: #EC7D7D; + --c--globals--colors--error-400: #E96868; + --c--globals--colors--error-450: #E55050; + --c--globals--colors--error-500: #E13131; + --c--globals--colors--error-550: #D80000; + --c--globals--colors--error-600: #C00101; + --c--globals--colors--error-650: #9E2219; + --c--globals--colors--error-700: #802820; + --c--globals--colors--error-750: #662820; + --c--globals--colors--error-800: #4F231E; + --c--globals--colors--error-850: #3B1D19; + --c--globals--colors--error-900: #2A1614; + --c--globals--colors--error-950: #1A0E0C; + --c--globals--colors--red-050: #FDEDED; + --c--globals--colors--red-100: #FADBDB; + --c--globals--colors--red-150: #F8C9C9; + --c--globals--colors--red-200: #F5B7B6; + --c--globals--colors--red-250: #F3A4A3; + --c--globals--colors--red-300: #F09190; + --c--globals--colors--red-350: #EE7C7B; + --c--globals--colors--red-400: #EB6665; + --c--globals--colors--red-450: #E74E4D; + --c--globals--colors--red-500: #D83F3D; + --c--globals--colors--red-550: #C23837; + --c--globals--colors--red-600: #AC3231; + --c--globals--colors--red-650: #8D3531; + --c--globals--colors--red-700: #73332F; + --c--globals--colors--red-750: #5B2F2B; + --c--globals--colors--red-800: #472826; + --c--globals--colors--red-850: #35211F; + --c--globals--colors--red-900: #251817; + --c--globals--colors--red-950: #160F0E; + --c--globals--colors--orange-050: #FDEEE2; + --c--globals--colors--orange-100: #FCDDC5; + --c--globals--colors--orange-150: #FACBA8; + --c--globals--colors--orange-200: #F8B98B; + --c--globals--colors--orange-250: #F6A76A; + --c--globals--colors--orange-300: #F4934B; + --c--globals--colors--orange-350: #F27E27; + --c--globals--colors--orange-400: #E76E12; + --c--globals--colors--orange-450: #D26411; + --c--globals--colors--orange-500: #BE5B0F; + --c--globals--colors--orange-550: #AA510E; + --c--globals--colors--orange-600: #97480C; + --c--globals--colors--orange-650: #7E431D; + --c--globals--colors--orange-700: #673C22; + --c--globals--colors--orange-750: #533422; + --c--globals--colors--orange-800: #412C1F; + --c--globals--colors--orange-850: #31231B; + --c--globals--colors--orange-900: #221A14; + --c--globals--colors--orange-950: #15100C; + --c--globals--colors--brown-050: #F3F0EF; + --c--globals--colors--brown-100: #E7E1DF; + --c--globals--colors--brown-150: #DCD2CF; + --c--globals--colors--brown-200: #D0C4BF; + --c--globals--colors--brown-250: #C5B6B0; + --c--globals--colors--brown-300: #BAA7A1; + --c--globals--colors--brown-350: #AF9992; + --c--globals--colors--brown-400: #A48B83; + --c--globals--colors--brown-450: #997E74; + --c--globals--colors--brown-500: #8F7065; + --c--globals--colors--brown-550: #846357; + --c--globals--colors--brown-600: #7A5649; + --c--globals--colors--brown-650: #684C42; + --c--globals--colors--brown-700: #57423C; + --c--globals--colors--brown-750: #463833; + --c--globals--colors--brown-800: #382E2A; + --c--globals--colors--brown-850: #2B2422; + --c--globals--colors--brown-900: #1F1B19; + --c--globals--colors--brown-950: #121010; + --c--globals--colors--yellow-050: #FAF0D3; + --c--globals--colors--yellow-100: #F5E2A4; + --c--globals--colors--yellow-150: #F0D275; + --c--globals--colors--yellow-200: #EBC242; + --c--globals--colors--yellow-250: #E4B213; + --c--globals--colors--yellow-300: #D4A511; + --c--globals--colors--yellow-350: #C39810; + --c--globals--colors--yellow-400: #B38B0F; + --c--globals--colors--yellow-450: #A37F0D; + --c--globals--colors--yellow-500: #93730C; + --c--globals--colors--yellow-550: #84670B; + --c--globals--colors--yellow-600: #755B0A; + --c--globals--colors--yellow-650: #63501C; + --c--globals--colors--yellow-700: #534521; + --c--globals--colors--yellow-750: #443A21; + --c--globals--colors--yellow-800: #36301F; + --c--globals--colors--yellow-850: #29261A; + --c--globals--colors--yellow-900: #1D1C14; + --c--globals--colors--yellow-950: #12110C; + --c--globals--colors--green-050: #E2F6E5; + --c--globals--colors--green-100: #C5ECCA; + --c--globals--colors--green-150: #A7E3AF; + --c--globals--colors--green-200: #89D894; + --c--globals--colors--green-250: #67CE75; + --c--globals--colors--green-300: #4DC25D; + --c--globals--colors--green-350: #48B257; + --c--globals--colors--green-400: #41A44F; + --c--globals--colors--green-450: #3B9548; + --c--globals--colors--green-500: #368741; + --c--globals--colors--green-550: #30793A; + --c--globals--colors--green-600: #2B6B33; + --c--globals--colors--green-650: #2F5C34; + --c--globals--colors--green-700: #2E4E31; + --c--globals--colors--green-750: #2A412C; + --c--globals--colors--green-800: #253426; + --c--globals--colors--green-850: #1E281F; + --c--globals--colors--green-900: #171D17; + --c--globals--colors--green-950: #0F120F; + --c--globals--colors--blue-1-050: #EBF1FF; + --c--globals--colors--blue-1-100: #D6E3FE; + --c--globals--colors--blue-1-150: #C2D5FE; + --c--globals--colors--blue-1-200: #ADC7FE; + --c--globals--colors--blue-1-250: #99B8FD; + --c--globals--colors--blue-1-300: #84AAFD; + --c--globals--colors--blue-1-350: #6F9BFD; + --c--globals--colors--blue-1-400: #5A8DFB; + --c--globals--colors--blue-1-450: #437DFC; + --c--globals--colors--blue-1-500: #3D71E4; + --c--globals--colors--blue-1-550: #3665CC; + --c--globals--colors--blue-1-600: #305AB5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2E4675; + --c--globals--colors--blue-1-750: #293B5E; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1E2635; + --c--globals--colors--blue-1-900: #171C25; + --c--globals--colors--blue-1-950: #0E1116; + --c--globals--colors--blue-2-050: #E2F4F9; + --c--globals--colors--blue-2-100: #C5E9F3; + --c--globals--colors--blue-2-150: #A7DDED; + --c--globals--colors--blue-2-200: #88D1E6; + --c--globals--colors--blue-2-250: #68C5E0; + --c--globals--colors--blue-2-300: #48B8D9; + --c--globals--colors--blue-2-350: #3BAACA; + --c--globals--colors--blue-2-400: #359CB9; + --c--globals--colors--blue-2-450: #318EA9; + --c--globals--colors--blue-2-500: #2C8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2A5866; + --c--globals--colors--blue-2-700: #2A4B55; + --c--globals--colors--blue-2-750: #283F47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1D272A; + --c--globals--colors--blue-2-900: #161C1E; + --c--globals--colors--blue-2-950: #0E1112; + --c--globals--colors--purple-050: #F6EEFF; + --c--globals--colors--purple-100: #ECDCFF; + --c--globals--colors--purple-150: #E3CBFE; + --c--globals--colors--purple-200: #DAB9FE; + --c--globals--colors--purple-250: #D0A7FE; + --c--globals--colors--purple-300: #C795FE; + --c--globals--colors--purple-350: #BD83FD; + --c--globals--colors--purple-400: #B36FFD; + --c--globals--colors--purple-450: #A85BFD; + --c--globals--colors--purple-500: #9B4BF3; + --c--globals--colors--purple-550: #8B43DA; + --c--globals--colors--purple-600: #7B3CC1; + --c--globals--colors--purple-650: #673C9B; + --c--globals--colors--purple-700: #56387D; + --c--globals--colors--purple-750: #463162; + --c--globals--colors--purple-800: #382A4A; + --c--globals--colors--purple-850: #2A2237; + --c--globals--colors--purple-900: #1E1926; + --c--globals--colors--purple-950: #121017; + --c--globals--colors--pink-050: #FCEDF5; + --c--globals--colors--pink-100: #F9DAEA; + --c--globals--colors--pink-150: #F7C7E0; + --c--globals--colors--pink-200: #F4B4D5; + --c--globals--colors--pink-250: #F1A1CA; + --c--globals--colors--pink-300: #EE8CBF; + --c--globals--colors--pink-350: #EA77B3; + --c--globals--colors--pink-400: #E760A6; + --c--globals--colors--pink-450: #E24797; + --c--globals--colors--pink-500: #CD4089; + --c--globals--colors--pink-550: #B8397B; + --c--globals--colors--pink-600: #A3336D; + --c--globals--colors--pink-650: #86355E; + --c--globals--colors--pink-700: #6E334F; + --c--globals--colors--pink-750: #582E42; + --c--globals--colors--pink-800: #442834; + --c--globals--colors--pink-850: #332028; + --c--globals--colors--pink-900: #24181D; + --c--globals--colors--pink-950: #160F12; + --c--globals--colors--black-000: #00000000; + --c--globals--colors--black-050: #0000000D; + --c--globals--colors--black-100: #0000001A; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #00000033; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004D; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #00000066; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008C; + --c--globals--colors--black-600: #00000099; + --c--globals--colors--black-650: #000000A6; + --c--globals--colors--black-700: #000000B3; + --c--globals--colors--black-750: #000000BF; + --c--globals--colors--black-800: #000000CC; + --c--globals--colors--black-850: #000000D9; + --c--globals--colors--black-900: #000000E6; + --c--globals--colors--black-950: #000000F2; + --c--globals--colors--white-000: #FFFFFF; + --c--globals--colors--white-050: #FFFFFF0D; + --c--globals--colors--white-100: #FFFFFF1A; + --c--globals--colors--white-150: #FFFFFF26; + --c--globals--colors--white-200: #FFFFFF33; + --c--globals--colors--white-250: #FFFFFF40; + --c--globals--colors--white-300: #FFFFFF4D; + --c--globals--colors--white-350: #FFFFFF59; + --c--globals--colors--white-400: #FFFFFF66; + --c--globals--colors--white-450: #FFFFFF73; + --c--globals--colors--white-500: #FFFFFF80; + --c--globals--colors--white-550: #FFFFFF8C; + --c--globals--colors--white-600: #FFFFFF99; + --c--globals--colors--white-650: #FFFFFFA6; + --c--globals--colors--white-700: #FFFFFFB3; + --c--globals--colors--white-750: #FFFFFFBF; + --c--globals--colors--white-800: #FFFFFFCC; + --c--globals--colors--white-850: #FFFFFFD9; + --c--globals--colors--white-900: #FFFFFFE6; + --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 200; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 700; + --c--globals--font--weights--black: 800; + --c--globals--font--families--base: "Roboto Flex Variable", sans-serif; + --c--globals--font--families--accent: "Roboto Flex Variable", sans-serif; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-000); + --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-000); + --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-025); + --c--contextuals--background--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--background--brand--primary-hover: var(--c--globals--colors--brand-650); + --c--contextuals--background--brand--secondary: var(--c--globals--colors--brand-100); + --c--contextuals--background--brand--secondary-hover: var(--c--globals--colors--brand-150); + --c--contextuals--background--brand--tertiary: var(--c--globals--colors--brand-050); + --c--contextuals--background--brand--tertiary-hover: var(--c--globals--colors--brand-100); + --c--contextuals--background--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--background--neutral--primary-hover: var(--c--globals--colors--gray-650); + --c--contextuals--background--neutral--secondary: var(--c--globals--colors--gray-100); + --c--contextuals--background--neutral--secondary-hover: var(--c--globals--colors--gray-150); + --c--contextuals--background--neutral--tertiary: var(--c--globals--colors--gray-050); + --c--contextuals--background--neutral--tertiary-hover: var(--c--globals--colors--gray-100); + --c--contextuals--background--contextual--primary: var(--c--globals--colors--black-050); + --c--contextuals--background--contextual--primary-hover: var(--c--globals--colors--black-100); + --c--contextuals--background--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--background--info--primary-hover: var(--c--globals--colors--info-650); + --c--contextuals--background--info--secondary: var(--c--globals--colors--info-100); + --c--contextuals--background--info--secondary-hover: var(--c--globals--colors--info-150); + --c--contextuals--background--info--tertiary: var(--c--globals--colors--info-050); + --c--contextuals--background--info--tertiary-hover: var(--c--globals--colors--info-100); + --c--contextuals--background--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--background--success--primary-hover: var(--c--globals--colors--success-650); + --c--contextuals--background--success--secondary: var(--c--globals--colors--success-100); + --c--contextuals--background--success--secondary-hover: var(--c--globals--colors--success-150); + --c--contextuals--background--success--tertiary: var(--c--globals--colors--success-050); + --c--contextuals--background--success--tertiary-hover: var(--c--globals--colors--success-100); + --c--contextuals--background--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--background--warning--primary-hover: var(--c--globals--colors--warning-650); + --c--contextuals--background--warning--secondary: var(--c--globals--colors--warning-100); + --c--contextuals--background--warning--secondary-hover: var(--c--globals--colors--warning-150); + --c--contextuals--background--warning--tertiary: var(--c--globals--colors--warning-050); + --c--contextuals--background--warning--tertiary-hover: var(--c--globals--colors--warning-100); + --c--contextuals--background--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--background--error--primary-hover: var(--c--globals--colors--error-650); + --c--contextuals--background--error--secondary: var(--c--globals--colors--error-100); + --c--contextuals--background--error--secondary-hover: var(--c--globals--colors--error-150); + --c--contextuals--background--error--tertiary: var(--c--globals--colors--error-050); + --c--contextuals--background--error--tertiary-hover: var(--c--globals--colors--error-100); + --c--contextuals--background--color-brand--primary: var(--c--globals--colors--brand-500); + --c--contextuals--background--color-brand--secondary: var(--c--globals--colors--brand-350); + --c--contextuals--background--color-brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--background--red--primary: var(--c--globals--colors--red-500); + --c--contextuals--background--red--secondary: var(--c--globals--colors--red-350); + --c--contextuals--background--red--tertiary: var(--c--globals--colors--red-150); + --c--contextuals--background--orange--primary: var(--c--globals--colors--orange-500); + --c--contextuals--background--orange--secondary: var(--c--globals--colors--orange-350); + --c--contextuals--background--orange--tertiary: var(--c--globals--colors--orange-150); + --c--contextuals--background--brown--primary: var(--c--globals--colors--brown-500); + --c--contextuals--background--brown--secondary: var(--c--globals--colors--brown-350); + --c--contextuals--background--brown--tertiary: var(--c--globals--colors--brown-150); + --c--contextuals--background--yellow--primary: var(--c--globals--colors--yellow-500); + --c--contextuals--background--yellow--secondary: var(--c--globals--colors--yellow-350); + --c--contextuals--background--yellow--tertiary: var(--c--globals--colors--yellow-150); + --c--contextuals--background--green--primary: var(--c--globals--colors--green-500); + --c--contextuals--background--green--secondary: var(--c--globals--colors--green-350); + --c--contextuals--background--green--tertiary: var(--c--globals--colors--green-150); + --c--contextuals--background--blue-1--primary: var(--c--globals--colors--blue-1-500); + --c--contextuals--background--blue-1--secondary: var(--c--globals--colors--blue-1-350); + --c--contextuals--background--blue-1--tertiary: var(--c--globals--colors--blue-1-150); + --c--contextuals--background--blue-2--primary: var(--c--globals--colors--blue-2-500); + --c--contextuals--background--blue-2--secondary: var(--c--globals--colors--blue-2-350); + --c--contextuals--background--blue-2--tertiary: var(--c--globals--colors--blue-2-150); + --c--contextuals--background--purple--primary: var(--c--globals--colors--purple-500); + --c--contextuals--background--purple--secondary: var(--c--globals--colors--purple-350); + --c--contextuals--background--purple--tertiary: var(--c--globals--colors--purple-150); + --c--contextuals--background--pink--primary: var(--c--globals--colors--pink-500); + --c--contextuals--background--pink--secondary: var(--c--globals--colors--pink-350); + --c--contextuals--background--pink--tertiary: var(--c--globals--colors--pink-150); + --c--contextuals--background--gray--primary: var(--c--globals--colors--gray-500); + --c--contextuals--background--gray--secondary: var(--c--globals--colors--gray-350); + --c--contextuals--background--gray--tertiary: var(--c--globals--colors--gray-150); + --c--contextuals--background--disabled--primary: var(--c--globals--colors--gray-100); + --c--contextuals--background--disabled--secondary: var(--c--globals--colors--gray-050); + --c--contextuals--background--text--primary: var(--c--globals--colors--black-050); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2); + --c--contextuals--content--brand--primary: var(--c--globals--colors--brand-700); + --c--contextuals--content--brand--secondary: var(--c--globals--colors--brand-600); + --c--contextuals--content--brand--tertiary: var(--c--globals--colors--brand-500); + --c--contextuals--content--brand--on-brand: var(--c--globals--colors--brand-050); + --c--contextuals--content--neutral--primary: var(--c--globals--colors--gray-850); + --c--contextuals--content--neutral--secondary: var(--c--globals--colors--gray-600); + --c--contextuals--content--neutral--tertiary: var(--c--globals--colors--gray-500); + --c--contextuals--content--neutral--on-neutral: var(--c--globals--colors--gray-050); + --c--contextuals--content--contextual--primary: var(--c--globals--colors--white-950); + --c--contextuals--content--info--primary: var(--c--globals--colors--info-700); + --c--contextuals--content--info--secondary: var(--c--globals--colors--info-600); + --c--contextuals--content--info--tertiary: var(--c--globals--colors--info-500); + --c--contextuals--content--info--on-info: var(--c--globals--colors--info-050); + --c--contextuals--content--success--primary: var(--c--globals--colors--success-700); + --c--contextuals--content--success--secondary: var(--c--globals--colors--success-600); + --c--contextuals--content--success--tertiary: var(--c--globals--colors--success-500); + --c--contextuals--content--success--on-success: var(--c--globals--colors--success-050); + --c--contextuals--content--warning--primary: var(--c--globals--colors--warning-700); + --c--contextuals--content--warning--secondary: var(--c--globals--colors--warning-600); + --c--contextuals--content--warning--tertiary: var(--c--globals--colors--warning-500); + --c--contextuals--content--warning--on-warning: var(--c--globals--colors--warning-050); + --c--contextuals--content--error--primary: var(--c--globals--colors--error-700); + --c--contextuals--content--error--secondary: var(--c--globals--colors--error-600); + --c--contextuals--content--error--tertiary: var(--c--globals--colors--error-500); + --c--contextuals--content--error--on-error: var(--c--globals--colors--error-050); + --c--contextuals--content--disabled--primary: var(--c--globals--colors--gray-300); + --c--contextuals--content--disabled--secondary: var(--c--globals--colors--white-500); + --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-100); + --c--contextuals--border--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--border--brand--secondary: var(--c--globals--colors--brand-300); + --c--contextuals--border--brand--tertiary: var(--c--globals--colors--brand-150); + --c--contextuals--border--contextual--primary: var(--c--globals--colors--white-200); + --c--contextuals--border--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--border--neutral--secondary: var(--c--globals--colors--gray-300); + --c--contextuals--border--neutral--tertiary: var(--c--globals--colors--gray-150); + --c--contextuals--border--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--border--info--secondary: var(--c--globals--colors--info-300); + --c--contextuals--border--info--tertiary: var(--c--globals--colors--info-150); + --c--contextuals--border--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--border--success--secondary: var(--c--globals--colors--success-300); + --c--contextuals--border--success--tertiary: var(--c--globals--colors--success-150); + --c--contextuals--border--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--border--warning--secondary: var(--c--globals--colors--warning-300); + --c--contextuals--border--warning--tertiary: var(--c--globals--colors--warning-150); + --c--contextuals--border--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--border--error--secondary: var(--c--globals--colors--error-300); + --c--contextuals--border--error--tertiary: var(--c--globals--colors--error-150); + --c--contextuals--border--disabled--primary: var(--c--globals--colors--gray-100); } .cunningham-theme--dark{ - --c--theme--colors--greyscale-100: #182536; - --c--theme--colors--greyscale-200: #303C4B; - --c--theme--colors--greyscale-300: #555F6B; - --c--theme--colors--greyscale-400: #79818A; - --c--theme--colors--greyscale-500: #9EA3AA; - --c--theme--colors--greyscale-600: #C2C6CA; - --c--theme--colors--greyscale-700: #E7E8EA; - --c--theme--colors--greyscale-800: #F3F4F4; - --c--theme--colors--greyscale-900: #FAFAFB; - --c--theme--colors--greyscale-000: #0C1A2B; - --c--theme--colors--primary-100: #3B4C62; - --c--theme--colors--primary-200: #4D6481; - --c--theme--colors--primary-300: #6381A6; - --c--theme--colors--primary-400: #7FA5D5; - --c--theme--colors--primary-500: #8CB5EA; - --c--theme--colors--primary-600: #A3C4EE; - --c--theme--colors--primary-700: #C3D8F4; - --c--theme--colors--primary-800: #DDE9F8; - --c--theme--colors--primary-900: #F4F8FD; - --c--theme--colors--success-100: #EEF8D7; - --c--theme--colors--success-200: #D9F1B2; - --c--theme--colors--success-300: #BDE985; - --c--theme--colors--success-400: #A0E25D; - --c--theme--colors--success-500: #76D628; - --c--theme--colors--success-600: #5BB520; - --c--theme--colors--success-700: #43941A; - --c--theme--colors--success-800: #307414; - --c--theme--colors--success-900: #225D10; - --c--theme--colors--warning-100: #F7F3D5; - --c--theme--colors--warning-200: #F0E5AA; - --c--theme--colors--warning-300: #E8D680; - --c--theme--colors--warning-400: #E3C95F; - --c--theme--colors--warning-500: #D9B32B; - --c--theme--colors--warning-600: #BD9721; - --c--theme--colors--warning-700: #9D7B1C; - --c--theme--colors--warning-800: #7E6016; - --c--theme--colors--warning-900: #684D12; - --c--theme--colors--danger-100: #F8D0D0; - --c--theme--colors--danger-200: #F09898; - --c--theme--colors--danger-300: #F09898; - --c--theme--colors--danger-400: #ED8585; - --c--theme--colors--danger-500: #E96666; - --c--theme--colors--danger-600: #DD6666; - --c--theme--colors--danger-700: #C36666; - --c--theme--colors--danger-800: #AE6666; - --c--theme--colors--danger-900: #9D6666; + --c--globals--colors--logo-1: #377FDB; + --c--globals--colors--logo-2: #377FDB; + --c--globals--colors--logo-1-dark: #95ABFF; + --c--globals--colors--logo-2-dark: #95ABFF; + --c--globals--colors--brand-050: #EAF1FB; + --c--globals--colors--brand-100: #D5E4F7; + --c--globals--colors--brand-150: #C0D6F4; + --c--globals--colors--brand-200: #ABC9F0; + --c--globals--colors--brand-250: #96BCEC; + --c--globals--colors--brand-300: #80AEE8; + --c--globals--colors--brand-350: #6CA0E4; + --c--globals--colors--brand-400: #5693E0; + --c--globals--colors--brand-450: #4085DC; + --c--globals--colors--brand-500: #2976D8; + --c--globals--colors--brand-550: #1167D4; + --c--globals--colors--brand-600: #0659C5; + --c--globals--colors--brand-650: #1A509F; + --c--globals--colors--brand-700: #20467F; + --c--globals--colors--brand-750: #203C63; + --c--globals--colors--brand-800: #1D314C; + --c--globals--colors--brand-850: #1A2638; + --c--globals--colors--brand-900: #141C28; + --c--globals--colors--brand-950: #0C1117; + --c--globals--colors--gray-000: #FFFFFF; + --c--globals--colors--gray-025: #F7F8F8; + --c--globals--colors--gray-050: #F0F1F2; + --c--globals--colors--gray-100: #E1E2E5; + --c--globals--colors--gray-150: #D2D4D8; + --c--globals--colors--gray-200: #C4C7CB; + --c--globals--colors--gray-250: #B5B9BE; + --c--globals--colors--gray-300: #A7ACB2; + --c--globals--colors--gray-350: #999EA5; + --c--globals--colors--gray-400: #8D9197; + --c--globals--colors--gray-450: #80848A; + --c--globals--colors--gray-500: #74777C; + --c--globals--colors--gray-550: #686B6F; + --c--globals--colors--gray-600: #5C5F63; + --c--globals--colors--gray-650: #505356; + --c--globals--colors--gray-700: #45474A; + --c--globals--colors--gray-750: #3A3B3E; + --c--globals--colors--gray-800: #2F3033; + --c--globals--colors--gray-850: #252627; + --c--globals--colors--gray-900: #1B1C1D; + --c--globals--colors--gray-950: #101112; + --c--globals--colors--gray-1000: #000000; + --c--globals--colors--info-050: #EAF1FB; + --c--globals--colors--info-100: #D5E4F7; + --c--globals--colors--info-150: #C0D6F4; + --c--globals--colors--info-200: #ABC9F0; + --c--globals--colors--info-250: #96BCEC; + --c--globals--colors--info-300: #80AEE8; + --c--globals--colors--info-350: #6CA0E4; + --c--globals--colors--info-400: #5693E0; + --c--globals--colors--info-450: #4085DC; + --c--globals--colors--info-500: #2976D8; + --c--globals--colors--info-550: #1167D4; + --c--globals--colors--info-600: #0659C5; + --c--globals--colors--info-650: #1A509F; + --c--globals--colors--info-700: #20467F; + --c--globals--colors--info-750: #203C63; + --c--globals--colors--info-800: #1D314C; + --c--globals--colors--info-850: #1A2638; + --c--globals--colors--info-900: #141C28; + --c--globals--colors--info-950: #0C1117; + --c--globals--colors--success-050: #E4F7D4; + --c--globals--colors--success-100: #C8EEA8; + --c--globals--colors--success-150: #AAE579; + --c--globals--colors--success-200: #89DC45; + --c--globals--colors--success-250: #72CF27; + --c--globals--colors--success-300: #6AC024; + --c--globals--colors--success-350: #61B121; + --c--globals--colors--success-400: #59A21E; + --c--globals--colors--success-450: #51941C; + --c--globals--colors--success-500: #4B851A; + --c--globals--colors--success-550: #427816; + --c--globals--colors--success-600: #3A6A14; + --c--globals--colors--success-650: #385C1F; + --c--globals--colors--success-700: #344D24; + --c--globals--colors--success-750: #2E4022; + --c--globals--colors--success-800: #27341F; + --c--globals--colors--success-850: #20281A; + --c--globals--colors--success-900: #181D15; + --c--globals--colors--success-950: #10120E; + --c--globals--colors--warning-050: #FFF1BD; + --c--globals--colors--warning-100: #FFE176; + --c--globals--colors--warning-150: #FFCF25; + --c--globals--colors--warning-200: #F4BF06; + --c--globals--colors--warning-250: #E3B205; + --c--globals--colors--warning-300: #D3A504; + --c--globals--colors--warning-350: #C29805; + --c--globals--colors--warning-400: #B28C03; + --c--globals--colors--warning-450: #A27F03; + --c--globals--colors--warning-500: #937303; + --c--globals--colors--warning-550: #836703; + --c--globals--colors--warning-600: #745B03; + --c--globals--colors--warning-650: #625019; + --c--globals--colors--warning-700: #524620; + --c--globals--colors--warning-750: #443B20; + --c--globals--colors--warning-800: #36301D; + --c--globals--colors--warning-850: #2A2619; + --c--globals--colors--warning-900: #1E1C13; + --c--globals--colors--warning-950: #12110C; + --c--globals--colors--error-050: #FCEDED; + --c--globals--colors--error-100: #FADBDB; + --c--globals--colors--error-150: #F7C9C9; + --c--globals--colors--error-200: #F5B7B7; + --c--globals--colors--error-250: #F2A4A4; + --c--globals--colors--error-300: #EF9191; + --c--globals--colors--error-350: #EC7D7D; + --c--globals--colors--error-400: #E96868; + --c--globals--colors--error-450: #E55050; + --c--globals--colors--error-500: #E13131; + --c--globals--colors--error-550: #D80000; + --c--globals--colors--error-600: #C00101; + --c--globals--colors--error-650: #9E2219; + --c--globals--colors--error-700: #802820; + --c--globals--colors--error-750: #662820; + --c--globals--colors--error-800: #4F231E; + --c--globals--colors--error-850: #3B1D19; + --c--globals--colors--error-900: #2A1614; + --c--globals--colors--error-950: #1A0E0C; + --c--globals--colors--red-050: #FDEDED; + --c--globals--colors--red-100: #FADBDB; + --c--globals--colors--red-150: #F8C9C9; + --c--globals--colors--red-200: #F5B7B6; + --c--globals--colors--red-250: #F3A4A3; + --c--globals--colors--red-300: #F09190; + --c--globals--colors--red-350: #EE7C7B; + --c--globals--colors--red-400: #EB6665; + --c--globals--colors--red-450: #E74E4D; + --c--globals--colors--red-500: #D83F3D; + --c--globals--colors--red-550: #C23837; + --c--globals--colors--red-600: #AC3231; + --c--globals--colors--red-650: #8D3531; + --c--globals--colors--red-700: #73332F; + --c--globals--colors--red-750: #5B2F2B; + --c--globals--colors--red-800: #472826; + --c--globals--colors--red-850: #35211F; + --c--globals--colors--red-900: #251817; + --c--globals--colors--red-950: #160F0E; + --c--globals--colors--orange-050: #FDEEE2; + --c--globals--colors--orange-100: #FCDDC5; + --c--globals--colors--orange-150: #FACBA8; + --c--globals--colors--orange-200: #F8B98B; + --c--globals--colors--orange-250: #F6A76A; + --c--globals--colors--orange-300: #F4934B; + --c--globals--colors--orange-350: #F27E27; + --c--globals--colors--orange-400: #E76E12; + --c--globals--colors--orange-450: #D26411; + --c--globals--colors--orange-500: #BE5B0F; + --c--globals--colors--orange-550: #AA510E; + --c--globals--colors--orange-600: #97480C; + --c--globals--colors--orange-650: #7E431D; + --c--globals--colors--orange-700: #673C22; + --c--globals--colors--orange-750: #533422; + --c--globals--colors--orange-800: #412C1F; + --c--globals--colors--orange-850: #31231B; + --c--globals--colors--orange-900: #221A14; + --c--globals--colors--orange-950: #15100C; + --c--globals--colors--brown-050: #F3F0EF; + --c--globals--colors--brown-100: #E7E1DF; + --c--globals--colors--brown-150: #DCD2CF; + --c--globals--colors--brown-200: #D0C4BF; + --c--globals--colors--brown-250: #C5B6B0; + --c--globals--colors--brown-300: #BAA7A1; + --c--globals--colors--brown-350: #AF9992; + --c--globals--colors--brown-400: #A48B83; + --c--globals--colors--brown-450: #997E74; + --c--globals--colors--brown-500: #8F7065; + --c--globals--colors--brown-550: #846357; + --c--globals--colors--brown-600: #7A5649; + --c--globals--colors--brown-650: #684C42; + --c--globals--colors--brown-700: #57423C; + --c--globals--colors--brown-750: #463833; + --c--globals--colors--brown-800: #382E2A; + --c--globals--colors--brown-850: #2B2422; + --c--globals--colors--brown-900: #1F1B19; + --c--globals--colors--brown-950: #121010; + --c--globals--colors--yellow-050: #FAF0D3; + --c--globals--colors--yellow-100: #F5E2A4; + --c--globals--colors--yellow-150: #F0D275; + --c--globals--colors--yellow-200: #EBC242; + --c--globals--colors--yellow-250: #E4B213; + --c--globals--colors--yellow-300: #D4A511; + --c--globals--colors--yellow-350: #C39810; + --c--globals--colors--yellow-400: #B38B0F; + --c--globals--colors--yellow-450: #A37F0D; + --c--globals--colors--yellow-500: #93730C; + --c--globals--colors--yellow-550: #84670B; + --c--globals--colors--yellow-600: #755B0A; + --c--globals--colors--yellow-650: #63501C; + --c--globals--colors--yellow-700: #534521; + --c--globals--colors--yellow-750: #443A21; + --c--globals--colors--yellow-800: #36301F; + --c--globals--colors--yellow-850: #29261A; + --c--globals--colors--yellow-900: #1D1C14; + --c--globals--colors--yellow-950: #12110C; + --c--globals--colors--green-050: #E2F6E5; + --c--globals--colors--green-100: #C5ECCA; + --c--globals--colors--green-150: #A7E3AF; + --c--globals--colors--green-200: #89D894; + --c--globals--colors--green-250: #67CE75; + --c--globals--colors--green-300: #4DC25D; + --c--globals--colors--green-350: #48B257; + --c--globals--colors--green-400: #41A44F; + --c--globals--colors--green-450: #3B9548; + --c--globals--colors--green-500: #368741; + --c--globals--colors--green-550: #30793A; + --c--globals--colors--green-600: #2B6B33; + --c--globals--colors--green-650: #2F5C34; + --c--globals--colors--green-700: #2E4E31; + --c--globals--colors--green-750: #2A412C; + --c--globals--colors--green-800: #253426; + --c--globals--colors--green-850: #1E281F; + --c--globals--colors--green-900: #171D17; + --c--globals--colors--green-950: #0F120F; + --c--globals--colors--blue-1-050: #EBF1FF; + --c--globals--colors--blue-1-100: #D6E3FE; + --c--globals--colors--blue-1-150: #C2D5FE; + --c--globals--colors--blue-1-200: #ADC7FE; + --c--globals--colors--blue-1-250: #99B8FD; + --c--globals--colors--blue-1-300: #84AAFD; + --c--globals--colors--blue-1-350: #6F9BFD; + --c--globals--colors--blue-1-400: #5A8DFB; + --c--globals--colors--blue-1-450: #437DFC; + --c--globals--colors--blue-1-500: #3D71E4; + --c--globals--colors--blue-1-550: #3665CC; + --c--globals--colors--blue-1-600: #305AB5; + --c--globals--colors--blue-1-650: #315093; + --c--globals--colors--blue-1-700: #2E4675; + --c--globals--colors--blue-1-750: #293B5E; + --c--globals--colors--blue-1-800: #243048; + --c--globals--colors--blue-1-850: #1E2635; + --c--globals--colors--blue-1-900: #171C25; + --c--globals--colors--blue-1-950: #0E1116; + --c--globals--colors--blue-2-050: #E2F4F9; + --c--globals--colors--blue-2-100: #C5E9F3; + --c--globals--colors--blue-2-150: #A7DDED; + --c--globals--colors--blue-2-200: #88D1E6; + --c--globals--colors--blue-2-250: #68C5E0; + --c--globals--colors--blue-2-300: #48B8D9; + --c--globals--colors--blue-2-350: #3BAACA; + --c--globals--colors--blue-2-400: #359CB9; + --c--globals--colors--blue-2-450: #318EA9; + --c--globals--colors--blue-2-500: #2C8199; + --c--globals--colors--blue-2-550: #277389; + --c--globals--colors--blue-2-600: #236679; + --c--globals--colors--blue-2-650: #2A5866; + --c--globals--colors--blue-2-700: #2A4B55; + --c--globals--colors--blue-2-750: #283F47; + --c--globals--colors--blue-2-800: #233337; + --c--globals--colors--blue-2-850: #1D272A; + --c--globals--colors--blue-2-900: #161C1E; + --c--globals--colors--blue-2-950: #0E1112; + --c--globals--colors--purple-050: #F6EEFF; + --c--globals--colors--purple-100: #ECDCFF; + --c--globals--colors--purple-150: #E3CBFE; + --c--globals--colors--purple-200: #DAB9FE; + --c--globals--colors--purple-250: #D0A7FE; + --c--globals--colors--purple-300: #C795FE; + --c--globals--colors--purple-350: #BD83FD; + --c--globals--colors--purple-400: #B36FFD; + --c--globals--colors--purple-450: #A85BFD; + --c--globals--colors--purple-500: #9B4BF3; + --c--globals--colors--purple-550: #8B43DA; + --c--globals--colors--purple-600: #7B3CC1; + --c--globals--colors--purple-650: #673C9B; + --c--globals--colors--purple-700: #56387D; + --c--globals--colors--purple-750: #463162; + --c--globals--colors--purple-800: #382A4A; + --c--globals--colors--purple-850: #2A2237; + --c--globals--colors--purple-900: #1E1926; + --c--globals--colors--purple-950: #121017; + --c--globals--colors--pink-050: #FCEDF5; + --c--globals--colors--pink-100: #F9DAEA; + --c--globals--colors--pink-150: #F7C7E0; + --c--globals--colors--pink-200: #F4B4D5; + --c--globals--colors--pink-250: #F1A1CA; + --c--globals--colors--pink-300: #EE8CBF; + --c--globals--colors--pink-350: #EA77B3; + --c--globals--colors--pink-400: #E760A6; + --c--globals--colors--pink-450: #E24797; + --c--globals--colors--pink-500: #CD4089; + --c--globals--colors--pink-550: #B8397B; + --c--globals--colors--pink-600: #A3336D; + --c--globals--colors--pink-650: #86355E; + --c--globals--colors--pink-700: #6E334F; + --c--globals--colors--pink-750: #582E42; + --c--globals--colors--pink-800: #442834; + --c--globals--colors--pink-850: #332028; + --c--globals--colors--pink-900: #24181D; + --c--globals--colors--pink-950: #160F12; + --c--globals--colors--black-000: #00000000; + --c--globals--colors--black-050: #0000000D; + --c--globals--colors--black-100: #0000001A; + --c--globals--colors--black-150: #00000026; + --c--globals--colors--black-200: #00000033; + --c--globals--colors--black-250: #00000040; + --c--globals--colors--black-300: #0000004D; + --c--globals--colors--black-350: #00000059; + --c--globals--colors--black-400: #00000066; + --c--globals--colors--black-450: #00000073; + --c--globals--colors--black-500: #00000080; + --c--globals--colors--black-550: #0000008C; + --c--globals--colors--black-600: #00000099; + --c--globals--colors--black-650: #000000A6; + --c--globals--colors--black-700: #000000B3; + --c--globals--colors--black-750: #000000BF; + --c--globals--colors--black-800: #000000CC; + --c--globals--colors--black-850: #000000D9; + --c--globals--colors--black-900: #000000E6; + --c--globals--colors--black-950: #000000F2; + --c--globals--colors--white-000: #FFFFFF; + --c--globals--colors--white-050: #FFFFFF0D; + --c--globals--colors--white-100: #FFFFFF1A; + --c--globals--colors--white-150: #FFFFFF26; + --c--globals--colors--white-200: #FFFFFF33; + --c--globals--colors--white-250: #FFFFFF40; + --c--globals--colors--white-300: #FFFFFF4D; + --c--globals--colors--white-350: #FFFFFF59; + --c--globals--colors--white-400: #FFFFFF66; + --c--globals--colors--white-450: #FFFFFF73; + --c--globals--colors--white-500: #FFFFFF80; + --c--globals--colors--white-550: #FFFFFF8C; + --c--globals--colors--white-600: #FFFFFF99; + --c--globals--colors--white-650: #FFFFFFA6; + --c--globals--colors--white-700: #FFFFFFB3; + --c--globals--colors--white-750: #FFFFFFBF; + --c--globals--colors--white-800: #FFFFFFCC; + --c--globals--colors--white-850: #FFFFFFD9; + --c--globals--colors--white-900: #FFFFFFE6; + --c--globals--colors--white-950: #FFFFFFF2; + --c--globals--transitions--ease-in: cubic-bezier(0.32, 0, 0.67, 0); + --c--globals--transitions--ease-out: cubic-bezier(0.33, 1, 0.68, 1); + --c--globals--transitions--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); + --c--globals--transitions--duration: 250ms; + --c--globals--font--sizes--xs: 0.75rem; + --c--globals--font--sizes--sm: 0.875rem; + --c--globals--font--sizes--md: 1rem; + --c--globals--font--sizes--lg: 1.125rem; + --c--globals--font--sizes--ml: 0.938rem; + --c--globals--font--sizes--xl: 1.25rem; + --c--globals--font--sizes--t: 0.6875rem; + --c--globals--font--sizes--s: 0.75rem; + --c--globals--font--sizes--h1: 2rem; + --c--globals--font--sizes--h2: 1.75rem; + --c--globals--font--sizes--h3: 1.5rem; + --c--globals--font--sizes--h4: 1.375rem; + --c--globals--font--sizes--h5: 1.25rem; + --c--globals--font--sizes--h6: 1.125rem; + --c--globals--font--sizes--xl-alt: 5rem; + --c--globals--font--sizes--lg-alt: 4.5rem; + --c--globals--font--sizes--md-alt: 4rem; + --c--globals--font--sizes--sm-alt: 3.5rem; + --c--globals--font--sizes--xs-alt: 3rem; + --c--globals--font--weights--thin: 200; + --c--globals--font--weights--light: 300; + --c--globals--font--weights--regular: 400; + --c--globals--font--weights--medium: 500; + --c--globals--font--weights--bold: 600; + --c--globals--font--weights--extrabold: 700; + --c--globals--font--weights--black: 800; + --c--globals--font--families--base: "Roboto Flex Variable", sans-serif; + --c--globals--font--families--accent: "Roboto Flex Variable", sans-serif; + --c--globals--spacings--l: 3rem; + --c--globals--spacings--b: 1.625rem; + --c--globals--spacings--m: 0.8125rem; + --c--globals--spacings--s: 1rem; + --c--globals--spacings--t: 0.5rem; + --c--globals--spacings--st: 0.25rem; + --c--globals--spacings--4xs: 0.125rem; + --c--globals--spacings--xxxs: 0.25rem; + --c--globals--spacings--xxs: 0.375rem; + --c--globals--spacings--xs: 0.5rem; + --c--globals--spacings--sm: 0.75rem; + --c--globals--spacings--base: 1rem; + --c--globals--spacings--md: 1.5rem; + --c--globals--spacings--lg: 2rem; + --c--globals--spacings--xl: 2.5rem; + --c--globals--spacings--xxl: 3rem; + --c--globals--spacings--xxxl: 3.5rem; + --c--globals--spacings--4xl: 4rem; + --c--globals--spacings--5xl: 4.5rem; + --c--globals--spacings--6xl: 6rem; + --c--globals--spacings--7xl: 7.5rem; + --c--globals--breakpoints--xs: 0; + --c--globals--breakpoints--sm: 576px; + --c--globals--breakpoints--md: 768px; + --c--globals--breakpoints--lg: 992px; + --c--globals--breakpoints--xl: 1200px; + --c--globals--breakpoints--xxl: 1400px; + --c--contextuals--background--surface--primary: var(--c--globals--colors--gray-800); + --c--contextuals--background--surface--secondary: var(--c--globals--colors--gray-850); + --c--contextuals--background--surface--tertiary: var(--c--globals--colors--gray-900); + --c--contextuals--background--brand--primary: var(--c--globals--colors--brand-550); + --c--contextuals--background--brand--primary-hover: var(--c--globals--colors--brand-650); + --c--contextuals--background--brand--secondary: var(--c--globals--colors--brand-700); + --c--contextuals--background--brand--secondary-hover: var(--c--globals--colors--brand-750); + --c--contextuals--background--brand--tertiary: var(--c--globals--colors--brand-750); + --c--contextuals--background--brand--tertiary-hover: var(--c--globals--colors--brand-800); + --c--contextuals--background--neutral--primary: var(--c--globals--colors--gray-550); + --c--contextuals--background--neutral--primary-hover: var(--c--globals--colors--gray-650); + --c--contextuals--background--neutral--secondary: var(--c--globals--colors--gray-700); + --c--contextuals--background--neutral--secondary-hover: var(--c--globals--colors--gray-750); + --c--contextuals--background--neutral--tertiary: var(--c--globals--colors--gray-750); + --c--contextuals--background--neutral--tertiary-hover: var(--c--globals--colors--gray-800); + --c--contextuals--background--contextual--primary: var(--c--globals--colors--white-050); + --c--contextuals--background--contextual--primary-hover: var(--c--globals--colors--white-100); + --c--contextuals--background--info--primary: var(--c--globals--colors--info-550); + --c--contextuals--background--info--primary-hover: var(--c--globals--colors--info-650); + --c--contextuals--background--info--secondary: var(--c--globals--colors--info-700); + --c--contextuals--background--info--secondary-hover: var(--c--globals--colors--info-750); + --c--contextuals--background--info--tertiary: var(--c--globals--colors--info-750); + --c--contextuals--background--info--tertiary-hover: var(--c--globals--colors--info-800); + --c--contextuals--background--success--primary: var(--c--globals--colors--success-550); + --c--contextuals--background--success--primary-hover: var(--c--globals--colors--success-650); + --c--contextuals--background--success--secondary: var(--c--globals--colors--success-700); + --c--contextuals--background--success--secondary-hover: var(--c--globals--colors--success-750); + --c--contextuals--background--success--tertiary: var(--c--globals--colors--success-750); + --c--contextuals--background--success--tertiary-hover: var(--c--globals--colors--success-800); + --c--contextuals--background--warning--primary: var(--c--globals--colors--warning-550); + --c--contextuals--background--warning--primary-hover: var(--c--globals--colors--warning-650); + --c--contextuals--background--warning--secondary: var(--c--globals--colors--warning-700); + --c--contextuals--background--warning--secondary-hover: var(--c--globals--colors--warning-750); + --c--contextuals--background--warning--tertiary: var(--c--globals--colors--warning-750); + --c--contextuals--background--warning--tertiary-hover: var(--c--globals--colors--warning-800); + --c--contextuals--background--error--primary: var(--c--globals--colors--error-550); + --c--contextuals--background--error--primary-hover: var(--c--globals--colors--error-650); + --c--contextuals--background--error--secondary: var(--c--globals--colors--error-700); + --c--contextuals--background--error--secondary-hover: var(--c--globals--colors--error-750); + --c--contextuals--background--error--tertiary: var(--c--globals--colors--error-750); + --c--contextuals--background--error--tertiary-hover: var(--c--globals--colors--error-800); + --c--contextuals--background--color-brand--primary: var(--c--globals--colors--brand-350); + --c--contextuals--background--color-brand--secondary: var(--c--globals--colors--brand-450); + --c--contextuals--background--color-brand--tertiary: var(--c--globals--colors--brand-550); + --c--contextuals--background--red--primary: var(--c--globals--colors--red-350); + --c--contextuals--background--red--secondary: var(--c--globals--colors--red-450); + --c--contextuals--background--red--tertiary: var(--c--globals--colors--red-550); + --c--contextuals--background--orange--primary: var(--c--globals--colors--orange-350); + --c--contextuals--background--orange--secondary: var(--c--globals--colors--orange-450); + --c--contextuals--background--orange--tertiary: var(--c--globals--colors--orange-550); + --c--contextuals--background--brown--primary: var(--c--globals--colors--brown-350); + --c--contextuals--background--brown--secondary: var(--c--globals--colors--brown-450); + --c--contextuals--background--brown--tertiary: var(--c--globals--colors--brown-550); + --c--contextuals--background--yellow--primary: var(--c--globals--colors--yellow-350); + --c--contextuals--background--yellow--secondary: var(--c--globals--colors--yellow-450); + --c--contextuals--background--yellow--tertiary: var(--c--globals--colors--yellow-550); + --c--contextuals--background--green--primary: var(--c--globals--colors--green-350); + --c--contextuals--background--green--secondary: var(--c--globals--colors--green-450); + --c--contextuals--background--green--tertiary: var(--c--globals--colors--green-550); + --c--contextuals--background--blue-1--primary: var(--c--globals--colors--blue-1-350); + --c--contextuals--background--blue-1--secondary: var(--c--globals--colors--blue-1-450); + --c--contextuals--background--blue-1--tertiary: var(--c--globals--colors--blue-1-550); + --c--contextuals--background--blue-2--primary: var(--c--globals--colors--blue-2-350); + --c--contextuals--background--blue-2--secondary: var(--c--globals--colors--blue-2-450); + --c--contextuals--background--blue-2--tertiary: var(--c--globals--colors--blue-2-550); + --c--contextuals--background--purple--primary: var(--c--globals--colors--purple-350); + --c--contextuals--background--purple--secondary: var(--c--globals--colors--purple-450); + --c--contextuals--background--purple--tertiary: var(--c--globals--colors--purple-550); + --c--contextuals--background--pink--primary: var(--c--globals--colors--pink-350); + --c--contextuals--background--pink--secondary: var(--c--globals--colors--pink-450); + --c--contextuals--background--pink--tertiary: var(--c--globals--colors--pink-550); + --c--contextuals--background--gray--primary: var(--c--globals--colors--gray-350); + --c--contextuals--background--gray--secondary: var(--c--globals--colors--gray-450); + --c--contextuals--background--gray--tertiary: var(--c--globals--colors--gray-550); + --c--contextuals--background--disabled--primary: var(--c--globals--colors--gray-750); + --c--contextuals--background--disabled--secondary: var(--c--globals--colors--gray-800); + --c--contextuals--content--logo1: var(--c--globals--colors--logo-1-dark); + --c--contextuals--content--logo2: var(--c--globals--colors--logo-2-dark); + --c--contextuals--content--brand--primary: var(--c--globals--colors--brand-050); + --c--contextuals--content--brand--secondary: var(--c--globals--colors--brand-100); + --c--contextuals--content--brand--tertiary: var(--c--globals--colors--brand-250); + --c--contextuals--content--brand--on-brand: var(--c--globals--colors--brand-050); + --c--contextuals--content--neutral--primary: var(--c--globals--colors--gray-050); + --c--contextuals--content--neutral--secondary: var(--c--globals--colors--gray-100); + --c--contextuals--content--neutral--tertiary: var(--c--globals--colors--gray-250); + --c--contextuals--content--neutral--on-neutral: var(--c--globals--colors--gray-050); + --c--contextuals--content--contextual--primary: var(--c--globals--colors--black-850); + --c--contextuals--content--info--primary: var(--c--globals--colors--info-050); + --c--contextuals--content--info--secondary: var(--c--globals--colors--info-100); + --c--contextuals--content--info--tertiary: var(--c--globals--colors--info-250); + --c--contextuals--content--info--on-info: var(--c--globals--colors--info-050); + --c--contextuals--content--success--primary: var(--c--globals--colors--success-050); + --c--contextuals--content--success--secondary: var(--c--globals--colors--success-100); + --c--contextuals--content--success--tertiary: var(--c--globals--colors--success-250); + --c--contextuals--content--success--on-success: var(--c--globals--colors--success-050); + --c--contextuals--content--warning--primary: var(--c--globals--colors--warning-050); + --c--contextuals--content--warning--secondary: var(--c--globals--colors--warning-100); + --c--contextuals--content--warning--tertiary: var(--c--globals--colors--warning-250); + --c--contextuals--content--warning--on-warning: var(--c--globals--colors--warning-050); + --c--contextuals--content--error--primary: var(--c--globals--colors--error-050); + --c--contextuals--content--error--secondary: var(--c--globals--colors--error-100); + --c--contextuals--content--error--tertiary: var(--c--globals--colors--error-250); + --c--contextuals--content--error--on-error: var(--c--globals--colors--error-050); + --c--contextuals--content--disabled--primary: var(--c--globals--colors--gray-600); + --c--contextuals--content--disabled--secondary: var(--c--globals--colors--black-300); + --c--contextuals--border--surface--primary: var(--c--globals--colors--gray-750); + --c--contextuals--border--brand--primary: var(--c--globals--colors--brand-450); + --c--contextuals--border--brand--secondary: var(--c--globals--colors--brand-600); + --c--contextuals--border--brand--tertiary: var(--c--globals--colors--brand-700); + --c--contextuals--border--contextual--primary: var(--c--globals--colors--black-200); + --c--contextuals--border--neutral--primary: var(--c--globals--colors--gray-450); + --c--contextuals--border--neutral--secondary: var(--c--globals--colors--gray-600); + --c--contextuals--border--neutral--tertiary: var(--c--globals--colors--gray-700); + --c--contextuals--border--info--primary: var(--c--globals--colors--info-450); + --c--contextuals--border--info--secondary: var(--c--globals--colors--info-600); + --c--contextuals--border--info--tertiary: var(--c--globals--colors--info-700); + --c--contextuals--border--success--primary: var(--c--globals--colors--success-450); + --c--contextuals--border--success--secondary: var(--c--globals--colors--success-600); + --c--contextuals--border--success--tertiary: var(--c--globals--colors--success-700); + --c--contextuals--border--warning--primary: var(--c--globals--colors--warning-450); + --c--contextuals--border--warning--secondary: var(--c--globals--colors--warning-600); + --c--contextuals--border--warning--tertiary: var(--c--globals--colors--warning-700); + --c--contextuals--border--error--primary: var(--c--globals--colors--error-450); + --c--contextuals--border--error--secondary: var(--c--globals--colors--error-600); + --c--contextuals--border--error--tertiary: var(--c--globals--colors--error-700); + --c--contextuals--border--disabled--primary: var(--c--globals--colors--gray-800); --c--components--card--border-width: none; --c--components--card--box-shadow: rgba(0, 8, 16, 0.3) 0px 16px 24px; } diff --git a/packages/react/package.json b/packages/react/package.json index db91427..e85b600 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@openfun/cunningham-react", "private": false, - "version": "3.2.3", + "version": "4.0.0", "publishConfig": { "access": "public" }, diff --git a/packages/react/src/cunningham-tokens.css b/packages/react/src/cunningham-tokens.css index e22051c..4e88746 100644 --- a/packages/react/src/cunningham-tokens.css +++ b/packages/react/src/cunningham-tokens.css @@ -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); diff --git a/packages/react/src/cunningham-tokens.scss b/packages/react/src/cunningham-tokens.scss index ac84f42..6d765bf 100644 --- a/packages/react/src/cunningham-tokens.scss +++ b/packages/react/src/cunningham-tokens.scss @@ -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, diff --git a/packages/react/src/docs/spacings.stories.tsx b/packages/react/src/docs/spacings.stories.tsx index 4d2a5b5..a33923c 100644 --- a/packages/react/src/docs/spacings.stories.tsx +++ b/packages/react/src/docs/spacings.stories.tsx @@ -13,7 +13,7 @@ export const Default: Story = { render: () => { return (
- {Object.entries(tokens.themes.default.theme.spacings).map( + {Object.entries(tokens.themes.default.globals.spacings).map( ([key, value]) => { return (
{ return (
- {Object.keys(tokens.themes.default.theme.font.sizes).map((key) => ( -
+ {Object.keys(tokens.themes.default.globals.font.sizes).map((key) => ( +
Using the fs-{key} class
))} @@ -27,8 +27,8 @@ export const Weights: Story = { render: () => { return (
- {Object.keys(tokens.themes.default.theme.font.weights).map((key) => ( -
+ {Object.keys(tokens.themes.default.globals.font.weights).map((key) => ( +
Using the fw-{key} class
))} @@ -41,8 +41,8 @@ export const Families: Story = { render: () => { return (
- {Object.keys(tokens.themes.default.theme.font.families).map((key) => ( -
+ {Object.keys(tokens.themes.default.globals.font.families).map((key) => ( +
Using the f-{key} class
))} diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss index 3f8949d..b51257d 100644 --- a/packages/react/src/index.scss +++ b/packages/react/src/index.scss @@ -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); } diff --git a/packages/react/src/utils/_responsive.scss b/packages/react/src/utils/_responsive.scss index 2e428b4..cd9e36a 100644 --- a/packages/react/src/utils/_responsive.scss +++ b/packages/react/src/utils/_responsive.scss @@ -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) { diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json index 8f9f026..76dc530 100644 --- a/packages/react/tsconfig.json +++ b/packages/react/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@openfun/typescript-configs/react.json", "compilerOptions": { + "jsx": "react", "noEmit": true, "paths": { ":/*": ["./src/*"] diff --git a/packages/tokens/src/bin/Generators/CssGenerator.ts b/packages/tokens/src/bin/Generators/CssGenerator.ts index 845b0aa..f7c4f68 100644 --- a/packages/tokens/src/bin/Generators/CssGenerator.ts +++ b/packages/tokens/src/bin/Generators/CssGenerator.ts @@ -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(""); + }); } diff --git a/packages/tokens/src/bin/cunningham.ts b/packages/tokens/src/bin/cunningham.ts index 042c499..eac36cc 100644 --- a/packages/tokens/src/bin/cunningham.ts +++ b/packages/tokens/src/bin/cunningham.ts @@ -430,116 +430,120 @@ const defaultTheme = { secondary: "ref(globals.colors.gray-000)", tertiary: "ref(globals.colors.gray-025)", }, - brand: { - primary: "ref(globals.colors.brand-550)", - "primary-hover": "ref(globals.colors.brand-650)", - secondary: "ref(globals.colors.brand-100)", - "secondary-hover": "ref(globals.colors.brand-150)", - tertiary: "ref(globals.colors.brand-050)", - "tertiary-hover": "ref(globals.colors.brand-100)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-550)", + "primary-hover": "ref(globals.colors.brand-650)", + secondary: "ref(globals.colors.brand-100)", + "secondary-hover": "ref(globals.colors.brand-150)", + tertiary: "ref(globals.colors.brand-050)", + "tertiary-hover": "ref(globals.colors.brand-100)", + }, + neutral: { + primary: "ref(globals.colors.gray-550)", + "primary-hover": "ref(globals.colors.gray-650)", + secondary: "ref(globals.colors.gray-100)", + "secondary-hover": "ref(globals.colors.gray-150)", + tertiary: "ref(globals.colors.gray-050)", + "tertiary-hover": "ref(globals.colors.gray-100)", + }, + contextual: { + primary: "ref(globals.colors.black-050)", + "primary-hover": "ref(globals.colors.black-100)", + }, + info: { + primary: "ref(globals.colors.info-550)", + "primary-hover": "ref(globals.colors.info-650)", + secondary: "ref(globals.colors.info-100)", + "secondary-hover": "ref(globals.colors.info-150)", + tertiary: "ref(globals.colors.info-050)", + "tertiary-hover": "ref(globals.colors.info-100)", + }, + success: { + primary: "ref(globals.colors.success-550)", + "primary-hover": "ref(globals.colors.success-650)", + secondary: "ref(globals.colors.success-100)", + "secondary-hover": "ref(globals.colors.success-150)", + tertiary: "ref(globals.colors.success-050)", + "tertiary-hover": "ref(globals.colors.success-100)", + }, + warning: { + primary: "ref(globals.colors.warning-550)", + "primary-hover": "ref(globals.colors.warning-650)", + secondary: "ref(globals.colors.warning-100)", + "secondary-hover": "ref(globals.colors.warning-150)", + tertiary: "ref(globals.colors.warning-050)", + "tertiary-hover": "ref(globals.colors.warning-100)", + }, + error: { + primary: "ref(globals.colors.error-550)", + "primary-hover": "ref(globals.colors.error-650)", + secondary: "ref(globals.colors.error-100)", + "secondary-hover": "ref(globals.colors.error-150)", + tertiary: "ref(globals.colors.error-050)", + "tertiary-hover": "ref(globals.colors.error-100)", + }, + disabled: { + primary: "ref(globals.colors.gray-100)", + secondary: "ref(globals.colors.gray-050)", + }, }, - neutral: { - primary: "ref(globals.colors.gray-550)", - "primary-hover": "ref(globals.colors.gray-650)", - secondary: "ref(globals.colors.gray-100)", - "secondary-hover": "ref(globals.colors.gray-150)", - tertiary: "ref(globals.colors.gray-050)", - "tertiary-hover": "ref(globals.colors.gray-100)", - }, - contextual: { - primary: "ref(globals.colors.black-050)", - "primary-hover": "ref(globals.colors.black-100)", - }, - info: { - primary: "ref(globals.colors.info-550)", - "primary-hover": "ref(globals.colors.info-650)", - secondary: "ref(globals.colors.info-100)", - "secondary-hover": "ref(globals.colors.info-150)", - tertiary: "ref(globals.colors.info-050)", - "tertiary-hover": "ref(globals.colors.info-100)", - }, - success: { - primary: "ref(globals.colors.success-550)", - "primary-hover": "ref(globals.colors.success-650)", - secondary: "ref(globals.colors.success-100)", - "secondary-hover": "ref(globals.colors.success-150)", - tertiary: "ref(globals.colors.success-050)", - "tertiary-hover": "ref(globals.colors.success-100)", - }, - warning: { - primary: "ref(globals.colors.warning-550)", - "primary-hover": "ref(globals.colors.warning-650)", - secondary: "ref(globals.colors.warning-100)", - "secondary-hover": "ref(globals.colors.warning-150)", - tertiary: "ref(globals.colors.warning-050)", - "tertiary-hover": "ref(globals.colors.warning-100)", - }, - error: { - primary: "ref(globals.colors.error-550)", - "primary-hover": "ref(globals.colors.error-650)", - secondary: "ref(globals.colors.error-100)", - "secondary-hover": "ref(globals.colors.error-150)", - tertiary: "ref(globals.colors.error-050)", - "tertiary-hover": "ref(globals.colors.error-100)", - }, - "color-brand": { - primary: "ref(globals.colors.brand-500)", - secondary: "ref(globals.colors.brand-350)", - tertiary: "ref(globals.colors.brand-150)", - }, - red: { - primary: "ref(globals.colors.red-500)", - secondary: "ref(globals.colors.red-350)", - tertiary: "ref(globals.colors.red-150)", - }, - orange: { - primary: "ref(globals.colors.orange-500)", - secondary: "ref(globals.colors.orange-350)", - tertiary: "ref(globals.colors.orange-150)", - }, - brown: { - primary: "ref(globals.colors.brown-500)", - secondary: "ref(globals.colors.brown-350)", - tertiary: "ref(globals.colors.brown-150)", - }, - yellow: { - primary: "ref(globals.colors.yellow-500)", - secondary: "ref(globals.colors.yellow-350)", - tertiary: "ref(globals.colors.yellow-150)", - }, - green: { - primary: "ref(globals.colors.green-500)", - secondary: "ref(globals.colors.green-350)", - tertiary: "ref(globals.colors.green-150)", - }, - "blue-1": { - primary: "ref(globals.colors.blue-1-500)", - secondary: "ref(globals.colors.blue-1-350)", - tertiary: "ref(globals.colors.blue-1-150)", - }, - "blue-2": { - primary: "ref(globals.colors.blue-2-500)", - secondary: "ref(globals.colors.blue-2-350)", - tertiary: "ref(globals.colors.blue-2-150)", - }, - purple: { - primary: "ref(globals.colors.purple-500)", - secondary: "ref(globals.colors.purple-350)", - tertiary: "ref(globals.colors.purple-150)", - }, - pink: { - primary: "ref(globals.colors.pink-500)", - secondary: "ref(globals.colors.pink-350)", - tertiary: "ref(globals.colors.pink-150)", - }, - gray: { - primary: "ref(globals.colors.gray-500)", - secondary: "ref(globals.colors.gray-350)", - tertiary: "ref(globals.colors.gray-150)", - }, - disabled: { - primary: "ref(globals.colors.gray-100)", - secondary: "ref(globals.colors.gray-050)", + palette: { + brand: { + primary: "ref(globals.colors.brand-500)", + secondary: "ref(globals.colors.brand-350)", + tertiary: "ref(globals.colors.brand-150)", + }, + red: { + primary: "ref(globals.colors.red-500)", + secondary: "ref(globals.colors.red-350)", + tertiary: "ref(globals.colors.red-150)", + }, + orange: { + primary: "ref(globals.colors.orange-500)", + secondary: "ref(globals.colors.orange-350)", + tertiary: "ref(globals.colors.orange-150)", + }, + brown: { + primary: "ref(globals.colors.brown-500)", + secondary: "ref(globals.colors.brown-350)", + tertiary: "ref(globals.colors.brown-150)", + }, + yellow: { + primary: "ref(globals.colors.yellow-500)", + secondary: "ref(globals.colors.yellow-350)", + tertiary: "ref(globals.colors.yellow-150)", + }, + green: { + primary: "ref(globals.colors.green-500)", + secondary: "ref(globals.colors.green-350)", + tertiary: "ref(globals.colors.green-150)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-500)", + secondary: "ref(globals.colors.blue-1-350)", + tertiary: "ref(globals.colors.blue-1-150)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-500)", + secondary: "ref(globals.colors.blue-2-350)", + tertiary: "ref(globals.colors.blue-2-150)", + }, + purple: { + primary: "ref(globals.colors.purple-500)", + secondary: "ref(globals.colors.purple-350)", + tertiary: "ref(globals.colors.purple-150)", + }, + pink: { + primary: "ref(globals.colors.pink-500)", + secondary: "ref(globals.colors.pink-350)", + tertiary: "ref(globals.colors.pink-150)", + }, + gray: { + primary: "ref(globals.colors.gray-500)", + secondary: "ref(globals.colors.gray-350)", + tertiary: "ref(globals.colors.gray-150)", + }, }, text: { primary: "ref(globals.colors.black-050)", @@ -548,92 +552,211 @@ const defaultTheme = { content: { logo1: "ref(globals.colors.logo-1)", logo2: "ref(globals.colors.logo-2)", - brand: { - primary: "ref(globals.colors.brand-700)", - secondary: "ref(globals.colors.brand-600)", - tertiary: "ref(globals.colors.brand-500)", - "on-brand": "ref(globals.colors.brand-050)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-700)", + secondary: "ref(globals.colors.brand-600)", + tertiary: "ref(globals.colors.brand-500)", + "on-brand": "ref(globals.colors.brand-050)", + }, + neutral: { + primary: "ref(globals.colors.gray-850)", + secondary: "ref(globals.colors.gray-600)", + tertiary: "ref(globals.colors.gray-500)", + "on-neutral": "ref(globals.colors.gray-050)", + }, + contextual: { + primary: "ref(globals.colors.white-950)", + }, + info: { + primary: "ref(globals.colors.info-700)", + secondary: "ref(globals.colors.info-600)", + tertiary: "ref(globals.colors.info-500)", + "on-info": "ref(globals.colors.info-050)", + }, + success: { + primary: "ref(globals.colors.success-700)", + secondary: "ref(globals.colors.success-600)", + tertiary: "ref(globals.colors.success-500)", + "on-success": "ref(globals.colors.success-050)", + }, + warning: { + primary: "ref(globals.colors.warning-700)", + secondary: "ref(globals.colors.warning-600)", + tertiary: "ref(globals.colors.warning-500)", + "on-warning": "ref(globals.colors.warning-050)", + }, + error: { + primary: "ref(globals.colors.error-700)", + secondary: "ref(globals.colors.error-600)", + tertiary: "ref(globals.colors.error-500)", + "on-error": "ref(globals.colors.error-050)", + }, + disabled: { + primary: "ref(globals.colors.gray-300)", + secondary: "ref(globals.colors.white-500)", + }, }, - neutral: { - primary: "ref(globals.colors.gray-850)", - secondary: "ref(globals.colors.gray-600)", - tertiary: "ref(globals.colors.gray-500)", - "on-neutral": "ref(globals.colors.gray-050)", - }, - contextual: { - primary: "ref(globals.colors.white-950)", - }, - info: { - primary: "ref(globals.colors.info-700)", - secondary: "ref(globals.colors.info-600)", - tertiary: "ref(globals.colors.info-500)", - "on-info": "ref(globals.colors.info-050)", - }, - success: { - primary: "ref(globals.colors.success-700)", - secondary: "ref(globals.colors.success-600)", - tertiary: "ref(globals.colors.success-500)", - "on-success": "ref(globals.colors.success-050)", - }, - warning: { - primary: "ref(globals.colors.warning-700)", - secondary: "ref(globals.colors.warning-600)", - tertiary: "ref(globals.colors.warning-500)", - "on-warning": "ref(globals.colors.warning-050)", - }, - error: { - primary: "ref(globals.colors.error-700)", - secondary: "ref(globals.colors.error-600)", - tertiary: "ref(globals.colors.error-500)", - "on-error": "ref(globals.colors.error-050)", - }, - disabled: { - primary: "ref(globals.colors.gray-300)", - secondary: "ref(globals.colors.white-500)", + palette: { + brand: { + primary: "ref(globals.colors.brand-500)", + secondary: "ref(globals.colors.brand-350)", + tertiary: "ref(globals.colors.brand-150)", + }, + red: { + primary: "ref(globals.colors.red-500)", + secondary: "ref(globals.colors.red-350)", + tertiary: "ref(globals.colors.red-150)", + }, + orange: { + primary: "ref(globals.colors.orange-500)", + secondary: "ref(globals.colors.orange-350)", + tertiary: "ref(globals.colors.orange-150)", + }, + brown: { + primary: "ref(globals.colors.brown-500)", + secondary: "ref(globals.colors.brown-350)", + tertiary: "ref(globals.colors.brown-150)", + }, + yellow: { + primary: "ref(globals.colors.yellow-500)", + secondary: "ref(globals.colors.yellow-350)", + tertiary: "ref(globals.colors.yellow-150)", + }, + green: { + primary: "ref(globals.colors.green-500)", + secondary: "ref(globals.colors.green-350)", + tertiary: "ref(globals.colors.green-150)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-500)", + secondary: "ref(globals.colors.blue-1-350)", + tertiary: "ref(globals.colors.blue-1-150)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-500)", + secondary: "ref(globals.colors.blue-2-350)", + tertiary: "ref(globals.colors.blue-2-150)", + }, + purple: { + primary: "ref(globals.colors.purple-500)", + secondary: "ref(globals.colors.purple-350)", + tertiary: "ref(globals.colors.purple-150)", + }, + pink: { + primary: "ref(globals.colors.pink-500)", + secondary: "ref(globals.colors.pink-350)", + tertiary: "ref(globals.colors.pink-150)", + }, + gray: { + primary: "ref(globals.colors.gray-500)", + secondary: "ref(globals.colors.gray-350)", + tertiary: "ref(globals.colors.gray-150)", + }, }, }, border: { surface: { primary: "ref(globals.colors.gray-100)", }, - brand: { - primary: "ref(globals.colors.brand-550)", - secondary: "ref(globals.colors.brand-300)", - tertiary: "ref(globals.colors.brand-150)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-550)", + secondary: "ref(globals.colors.brand-300)", + tertiary: "ref(globals.colors.brand-150)", + }, + contextual: { + primary: "ref(globals.colors.white-200)", + }, + neutral: { + primary: "ref(globals.colors.gray-550)", + secondary: "ref(globals.colors.gray-300)", + tertiary: "ref(globals.colors.gray-150)", + }, + info: { + primary: "ref(globals.colors.info-550)", + secondary: "ref(globals.colors.info-300)", + tertiary: "ref(globals.colors.info-150)", + }, + success: { + primary: "ref(globals.colors.success-550)", + secondary: "ref(globals.colors.success-300)", + tertiary: "ref(globals.colors.success-150)", + }, + warning: { + primary: "ref(globals.colors.warning-550)", + secondary: "ref(globals.colors.warning-300)", + tertiary: "ref(globals.colors.warning-150)", + }, + error: { + primary: "ref(globals.colors.error-550)", + secondary: "ref(globals.colors.error-300)", + tertiary: "ref(globals.colors.error-150)", + }, + disabled: { + primary: "ref(globals.colors.gray-100)", + }, }, - contextual: { - primary: "ref(globals.colors.white-200)", - }, - neutral: { - primary: "ref(globals.colors.gray-550)", - secondary: "ref(globals.colors.gray-300)", - tertiary: "ref(globals.colors.gray-150)", - }, - info: { - primary: "ref(globals.colors.info-550)", - secondary: "ref(globals.colors.info-300)", - tertiary: "ref(globals.colors.info-150)", - }, - success: { - primary: "ref(globals.colors.success-550)", - secondary: "ref(globals.colors.success-300)", - tertiary: "ref(globals.colors.success-150)", - }, - warning: { - primary: "ref(globals.colors.warning-550)", - secondary: "ref(globals.colors.warning-300)", - tertiary: "ref(globals.colors.warning-150)", - }, - error: { - primary: "ref(globals.colors.error-550)", - secondary: "ref(globals.colors.error-300)", - tertiary: "ref(globals.colors.error-150)", - }, - disabled: { - primary: "ref(globals.colors.gray-100)", + palette: { + brand: { + primary: "ref(globals.colors.brand-500)", + secondary: "ref(globals.colors.brand-350)", + tertiary: "ref(globals.colors.brand-150)", + }, + red: { + primary: "ref(globals.colors.red-500)", + secondary: "ref(globals.colors.red-350)", + tertiary: "ref(globals.colors.red-150)", + }, + orange: { + primary: "ref(globals.colors.orange-500)", + secondary: "ref(globals.colors.orange-350)", + tertiary: "ref(globals.colors.orange-150)", + }, + brown: { + primary: "ref(globals.colors.brown-500)", + secondary: "ref(globals.colors.brown-350)", + tertiary: "ref(globals.colors.brown-150)", + }, + yellow: { + primary: "ref(globals.colors.yellow-500)", + secondary: "ref(globals.colors.yellow-350)", + tertiary: "ref(globals.colors.yellow-150)", + }, + green: { + primary: "ref(globals.colors.green-500)", + secondary: "ref(globals.colors.green-350)", + tertiary: "ref(globals.colors.green-150)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-500)", + secondary: "ref(globals.colors.blue-1-350)", + tertiary: "ref(globals.colors.blue-1-150)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-500)", + secondary: "ref(globals.colors.blue-2-350)", + tertiary: "ref(globals.colors.blue-2-150)", + }, + purple: { + primary: "ref(globals.colors.purple-500)", + secondary: "ref(globals.colors.purple-350)", + tertiary: "ref(globals.colors.purple-150)", + }, + pink: { + primary: "ref(globals.colors.pink-500)", + secondary: "ref(globals.colors.pink-350)", + tertiary: "ref(globals.colors.pink-150)", + }, + gray: { + primary: "ref(globals.colors.gray-500)", + secondary: "ref(globals.colors.gray-350)", + tertiary: "ref(globals.colors.gray-150)", + }, }, }, }, + components: {}, }; export default { @@ -648,204 +771,326 @@ export default { secondary: "ref(globals.colors.gray-850)", tertiary: "ref(globals.colors.gray-900)", }, - brand: { - primary: "ref(globals.colors.brand-550)", - "primary-hover": "ref(globals.colors.brand-650)", - secondary: "ref(globals.colors.brand-700)", - "secondary-hover": "ref(globals.colors.brand-750)", - tertiary: "ref(globals.colors.brand-750)", - "tertiary-hover": "ref(globals.colors.brand-800)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-550)", + "primary-hover": "ref(globals.colors.brand-650)", + secondary: "ref(globals.colors.brand-700)", + "secondary-hover": "ref(globals.colors.brand-750)", + tertiary: "ref(globals.colors.brand-750)", + "tertiary-hover": "ref(globals.colors.brand-800)", + }, + neutral: { + primary: "ref(globals.colors.gray-550)", + "primary-hover": "ref(globals.colors.gray-650)", + secondary: "ref(globals.colors.gray-700)", + "secondary-hover": "ref(globals.colors.gray-750)", + tertiary: "ref(globals.colors.gray-750)", + "tertiary-hover": "ref(globals.colors.gray-800)", + }, + contextual: { + primary: "ref(globals.colors.white-050)", + "primary-hover": "ref(globals.colors.white-100)", + }, + info: { + primary: "ref(globals.colors.info-550)", + "primary-hover": "ref(globals.colors.info-650)", + secondary: "ref(globals.colors.info-700)", + "secondary-hover": "ref(globals.colors.info-750)", + tertiary: "ref(globals.colors.info-750)", + "tertiary-hover": "ref(globals.colors.info-800)", + }, + success: { + primary: "ref(globals.colors.success-550)", + "primary-hover": "ref(globals.colors.success-650)", + secondary: "ref(globals.colors.success-700)", + "secondary-hover": "ref(globals.colors.success-750)", + tertiary: "ref(globals.colors.success-750)", + "tertiary-hover": "ref(globals.colors.success-800)", + }, + warning: { + primary: "ref(globals.colors.warning-550)", + "primary-hover": "ref(globals.colors.warning-650)", + secondary: "ref(globals.colors.warning-700)", + "secondary-hover": "ref(globals.colors.warning-750)", + tertiary: "ref(globals.colors.warning-750)", + "tertiary-hover": "ref(globals.colors.warning-800)", + }, + error: { + primary: "ref(globals.colors.error-550)", + "primary-hover": "ref(globals.colors.error-650)", + secondary: "ref(globals.colors.error-700)", + "secondary-hover": "ref(globals.colors.error-750)", + tertiary: "ref(globals.colors.error-750)", + "tertiary-hover": "ref(globals.colors.error-800)", + }, + disabled: { + primary: "ref(globals.colors.gray-750)", + secondary: "ref(globals.colors.gray-800)", + }, }, - neutral: { - primary: "ref(globals.colors.gray-550)", - "primary-hover": "ref(globals.colors.gray-650)", - secondary: "ref(globals.colors.gray-700)", - "secondary-hover": "ref(globals.colors.gray-750)", - tertiary: "ref(globals.colors.gray-750)", - "tertiary-hover": "ref(globals.colors.gray-800)", - }, - contextual: { - primary: "ref(globals.colors.white-050)", - "primary-hover": "ref(globals.colors.white-100)", - }, - info: { - primary: "ref(globals.colors.info-550)", - "primary-hover": "ref(globals.colors.info-650)", - secondary: "ref(globals.colors.info-700)", - "secondary-hover": "ref(globals.colors.info-750)", - tertiary: "ref(globals.colors.info-750)", - "tertiary-hover": "ref(globals.colors.info-800)", - }, - success: { - primary: "ref(globals.colors.success-550)", - "primary-hover": "ref(globals.colors.success-650)", - secondary: "ref(globals.colors.success-700)", - "secondary-hover": "ref(globals.colors.success-750)", - tertiary: "ref(globals.colors.success-750)", - "tertiary-hover": "ref(globals.colors.success-800)", - }, - warning: { - primary: "ref(globals.colors.warning-550)", - "primary-hover": "ref(globals.colors.warning-650)", - secondary: "ref(globals.colors.warning-700)", - "secondary-hover": "ref(globals.colors.warning-750)", - tertiary: "ref(globals.colors.warning-750)", - "tertiary-hover": "ref(globals.colors.warning-800)", - }, - error: { - primary: "ref(globals.colors.error-550)", - "primary-hover": "ref(globals.colors.error-650)", - secondary: "ref(globals.colors.error-700)", - "secondary-hover": "ref(globals.colors.error-750)", - tertiary: "ref(globals.colors.error-750)", - "tertiary-hover": "ref(globals.colors.error-800)", - }, - "color-brand": { - primary: "ref(globals.colors.brand-350)", - secondary: "ref(globals.colors.brand-450)", - tertiary: "ref(globals.colors.brand-550)", - }, - red: { - primary: "ref(globals.colors.red-350)", - secondary: "ref(globals.colors.red-450)", - tertiary: "ref(globals.colors.red-550)", - }, - orange: { - primary: "ref(globals.colors.orange-350)", - secondary: "ref(globals.colors.orange-450)", - tertiary: "ref(globals.colors.orange-550)", - }, - brown: { - primary: "ref(globals.colors.brown-350)", - secondary: "ref(globals.colors.brown-450)", - tertiary: "ref(globals.colors.brown-550)", - }, - yellow: { - primary: "ref(globals.colors.yellow-350)", - secondary: "ref(globals.colors.yellow-450)", - tertiary: "ref(globals.colors.yellow-550)", - }, - green: { - primary: "ref(globals.colors.green-350)", - secondary: "ref(globals.colors.green-450)", - tertiary: "ref(globals.colors.green-550)", - }, - "blue-1": { - primary: "ref(globals.colors.blue-1-350)", - secondary: "ref(globals.colors.blue-1-450)", - tertiary: "ref(globals.colors.blue-1-550)", - }, - "blue-2": { - primary: "ref(globals.colors.blue-2-350)", - secondary: "ref(globals.colors.blue-2-450)", - tertiary: "ref(globals.colors.blue-2-550)", - }, - purple: { - primary: "ref(globals.colors.purple-350)", - secondary: "ref(globals.colors.purple-450)", - tertiary: "ref(globals.colors.purple-550)", - }, - pink: { - primary: "ref(globals.colors.pink-350)", - secondary: "ref(globals.colors.pink-450)", - tertiary: "ref(globals.colors.pink-550)", - }, - gray: { - primary: "ref(globals.colors.gray-350)", - secondary: "ref(globals.colors.gray-450)", - tertiary: "ref(globals.colors.gray-550)", - }, - disabled: { - primary: "ref(globals.colors.gray-750)", - secondary: "ref(globals.colors.gray-800)", + palette: { + brand: { + primary: "ref(globals.colors.brand-350)", + secondary: "ref(globals.colors.brand-450)", + tertiary: "ref(globals.colors.brand-550)", + }, + red: { + primary: "ref(globals.colors.red-350)", + secondary: "ref(globals.colors.red-450)", + tertiary: "ref(globals.colors.red-550)", + }, + orange: { + primary: "ref(globals.colors.orange-350)", + secondary: "ref(globals.colors.orange-450)", + tertiary: "ref(globals.colors.orange-550)", + }, + brown: { + primary: "ref(globals.colors.brown-350)", + secondary: "ref(globals.colors.brown-450)", + tertiary: "ref(globals.colors.brown-550)", + }, + yellow: { + primary: "ref(globals.colors.yellow-350)", + secondary: "ref(globals.colors.yellow-450)", + tertiary: "ref(globals.colors.yellow-550)", + }, + green: { + primary: "ref(globals.colors.green-350)", + secondary: "ref(globals.colors.green-450)", + tertiary: "ref(globals.colors.green-550)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-350)", + secondary: "ref(globals.colors.blue-1-450)", + tertiary: "ref(globals.colors.blue-1-550)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-350)", + secondary: "ref(globals.colors.blue-2-450)", + tertiary: "ref(globals.colors.blue-2-550)", + }, + purple: { + primary: "ref(globals.colors.purple-350)", + secondary: "ref(globals.colors.purple-450)", + tertiary: "ref(globals.colors.purple-550)", + }, + pink: { + primary: "ref(globals.colors.pink-350)", + secondary: "ref(globals.colors.pink-450)", + tertiary: "ref(globals.colors.pink-550)", + }, + gray: { + primary: "ref(globals.colors.gray-350)", + secondary: "ref(globals.colors.gray-450)", + tertiary: "ref(globals.colors.gray-550)", + }, }, }, content: { logo1: "ref(globals.colors.logo-1-dark)", logo2: "ref(globals.colors.logo-2-dark)", - brand: { - primary: "ref(globals.colors.brand-050)", - secondary: "ref(globals.colors.brand-100)", - tertiary: "ref(globals.colors.brand-250)", - "on-brand": "ref(globals.colors.brand-050)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-050)", + secondary: "ref(globals.colors.brand-100)", + tertiary: "ref(globals.colors.brand-250)", + "on-brand": "ref(globals.colors.brand-050)", + }, + neutral: { + primary: "ref(globals.colors.gray-050)", + secondary: "ref(globals.colors.gray-100)", + tertiary: "ref(globals.colors.gray-250)", + "on-neutral": "ref(globals.colors.gray-050)", + }, + contextual: { + primary: "ref(globals.colors.black-850)", + }, + info: { + primary: "ref(globals.colors.info-050)", + secondary: "ref(globals.colors.info-100)", + tertiary: "ref(globals.colors.info-250)", + "on-info": "ref(globals.colors.info-050)", + }, + success: { + primary: "ref(globals.colors.success-050)", + secondary: "ref(globals.colors.success-100)", + tertiary: "ref(globals.colors.success-250)", + "on-success": "ref(globals.colors.success-050)", + }, + warning: { + primary: "ref(globals.colors.warning-050)", + secondary: "ref(globals.colors.warning-100)", + tertiary: "ref(globals.colors.warning-250)", + "on-warning": "ref(globals.colors.warning-050)", + }, + error: { + primary: "ref(globals.colors.error-050)", + secondary: "ref(globals.colors.error-100)", + tertiary: "ref(globals.colors.error-250)", + "on-error": "ref(globals.colors.error-050)", + }, + disabled: { + primary: "ref(globals.colors.gray-600)", + secondary: "ref(globals.colors.black-300)", + }, }, - neutral: { - primary: "ref(globals.colors.gray-050)", - secondary: "ref(globals.colors.gray-100)", - tertiary: "ref(globals.colors.gray-250)", - "on-neutral": "ref(globals.colors.gray-050)", - }, - contextual: { - primary: "ref(globals.colors.black-850)", - }, - info: { - primary: "ref(globals.colors.info-050)", - secondary: "ref(globals.colors.info-100)", - tertiary: "ref(globals.colors.info-250)", - "on-info": "ref(globals.colors.info-050)", - }, - success: { - primary: "ref(globals.colors.success-050)", - secondary: "ref(globals.colors.success-100)", - tertiary: "ref(globals.colors.success-250)", - "on-success": "ref(globals.colors.success-050)", - }, - warning: { - primary: "ref(globals.colors.warning-050)", - secondary: "ref(globals.colors.warning-100)", - tertiary: "ref(globals.colors.warning-250)", - "on-warning": "ref(globals.colors.warning-050)", - }, - error: { - primary: "ref(globals.colors.error-050)", - secondary: "ref(globals.colors.error-100)", - tertiary: "ref(globals.colors.error-250)", - "on-error": "ref(globals.colors.error-050)", - }, - disabled: { - primary: "ref(globals.colors.gray-600)", - secondary: "ref(globals.colors.black-300)", + palette: { + brand: { + primary: "ref(globals.colors.brand-350)", + secondary: "ref(globals.colors.brand-450)", + tertiary: "ref(globals.colors.brand-550)", + }, + red: { + primary: "ref(globals.colors.red-350)", + secondary: "ref(globals.colors.red-450)", + tertiary: "ref(globals.colors.red-550)", + }, + orange: { + primary: "ref(globals.colors.orange-350)", + secondary: "ref(globals.colors.orange-450)", + tertiary: "ref(globals.colors.orange-550)", + }, + brown: { + primary: "ref(globals.colors.brown-350)", + secondary: "ref(globals.colors.brown-450)", + tertiary: "ref(globals.colors.brown-550)", + }, + yellow: { + primary: "ref(globals.colors.yellow-350)", + secondary: "ref(globals.colors.yellow-450)", + tertiary: "ref(globals.colors.yellow-550)", + }, + green: { + primary: "ref(globals.colors.green-350)", + secondary: "ref(globals.colors.green-450)", + tertiary: "ref(globals.colors.green-550)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-350)", + secondary: "ref(globals.colors.blue-1-450)", + tertiary: "ref(globals.colors.blue-1-550)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-350)", + secondary: "ref(globals.colors.blue-2-450)", + tertiary: "ref(globals.colors.blue-2-550)", + }, + purple: { + primary: "ref(globals.colors.purple-350)", + secondary: "ref(globals.colors.purple-450)", + tertiary: "ref(globals.colors.purple-550)", + }, + pink: { + primary: "ref(globals.colors.pink-350)", + secondary: "ref(globals.colors.pink-450)", + tertiary: "ref(globals.colors.pink-550)", + }, + gray: { + primary: "ref(globals.colors.gray-350)", + secondary: "ref(globals.colors.gray-450)", + tertiary: "ref(globals.colors.gray-550)", + }, }, }, border: { surface: { primary: "ref(globals.colors.gray-750)", }, - brand: { - primary: "ref(globals.colors.brand-450)", - secondary: "ref(globals.colors.brand-600)", - tertiary: "ref(globals.colors.brand-700)", + semantic: { + brand: { + primary: "ref(globals.colors.brand-450)", + secondary: "ref(globals.colors.brand-600)", + tertiary: "ref(globals.colors.brand-700)", + }, + contextual: { + primary: "ref(globals.colors.black-200)", + }, + neutral: { + primary: "ref(globals.colors.gray-450)", + secondary: "ref(globals.colors.gray-600)", + tertiary: "ref(globals.colors.gray-700)", + }, + info: { + primary: "ref(globals.colors.info-450)", + secondary: "ref(globals.colors.info-600)", + tertiary: "ref(globals.colors.info-700)", + }, + success: { + primary: "ref(globals.colors.success-450)", + secondary: "ref(globals.colors.success-600)", + tertiary: "ref(globals.colors.success-700)", + }, + warning: { + primary: "ref(globals.colors.warning-450)", + secondary: "ref(globals.colors.warning-600)", + tertiary: "ref(globals.colors.warning-700)", + }, + error: { + primary: "ref(globals.colors.error-450)", + secondary: "ref(globals.colors.error-600)", + tertiary: "ref(globals.colors.error-700)", + }, + disabled: { + primary: "ref(globals.colors.gray-800)", + }, }, - contextual: { - primary: "ref(globals.colors.black-200)", - }, - neutral: { - primary: "ref(globals.colors.gray-450)", - secondary: "ref(globals.colors.gray-600)", - tertiary: "ref(globals.colors.gray-700)", - }, - info: { - primary: "ref(globals.colors.info-450)", - secondary: "ref(globals.colors.info-600)", - tertiary: "ref(globals.colors.info-700)", - }, - success: { - primary: "ref(globals.colors.success-450)", - secondary: "ref(globals.colors.success-600)", - tertiary: "ref(globals.colors.success-700)", - }, - warning: { - primary: "ref(globals.colors.warning-450)", - secondary: "ref(globals.colors.warning-600)", - tertiary: "ref(globals.colors.warning-700)", - }, - error: { - primary: "ref(globals.colors.error-450)", - secondary: "ref(globals.colors.error-600)", - tertiary: "ref(globals.colors.error-700)", - }, - disabled: { - primary: "ref(globals.colors.gray-800)", + palette: { + brand: { + primary: "ref(globals.colors.brand-350)", + secondary: "ref(globals.colors.brand-450)", + tertiary: "ref(globals.colors.brand-550)", + }, + red: { + primary: "ref(globals.colors.red-350)", + secondary: "ref(globals.colors.red-450)", + tertiary: "ref(globals.colors.red-550)", + }, + orange: { + primary: "ref(globals.colors.orange-350)", + secondary: "ref(globals.colors.orange-450)", + tertiary: "ref(globals.colors.orange-550)", + }, + brown: { + primary: "ref(globals.colors.brown-350)", + secondary: "ref(globals.colors.brown-450)", + tertiary: "ref(globals.colors.brown-550)", + }, + yellow: { + primary: "ref(globals.colors.yellow-350)", + secondary: "ref(globals.colors.yellow-450)", + tertiary: "ref(globals.colors.yellow-550)", + }, + green: { + primary: "ref(globals.colors.green-350)", + secondary: "ref(globals.colors.green-450)", + tertiary: "ref(globals.colors.green-550)", + }, + "blue-1": { + primary: "ref(globals.colors.blue-1-350)", + secondary: "ref(globals.colors.blue-1-450)", + tertiary: "ref(globals.colors.blue-1-550)", + }, + "blue-2": { + primary: "ref(globals.colors.blue-2-350)", + secondary: "ref(globals.colors.blue-2-450)", + tertiary: "ref(globals.colors.blue-2-550)", + }, + purple: { + primary: "ref(globals.colors.purple-350)", + secondary: "ref(globals.colors.purple-450)", + tertiary: "ref(globals.colors.purple-550)", + }, + pink: { + primary: "ref(globals.colors.pink-350)", + secondary: "ref(globals.colors.pink-450)", + tertiary: "ref(globals.colors.pink-550)", + }, + gray: { + primary: "ref(globals.colors.gray-350)", + secondary: "ref(globals.colors.gray-450)", + tertiary: "ref(globals.colors.gray-550)", + }, }, }, }, diff --git a/packages/tokens/src/lib/cunningham-tokens.ts b/packages/tokens/src/lib/cunningham-tokens.ts index 568251a..1573321 100644 --- a/packages/tokens/src/lib/cunningham-tokens.ts +++ b/packages/tokens/src/lib/cunningham-tokens.ts @@ -1 +1 @@ -export const tokens = {"themes":{"default":{"globals":{"colors":{"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":{"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,"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"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","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,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"contextual":{"primary":"#0000000D","primary-hover":"#0000001A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"color-brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"},"text":{"primary":"#0000000D"}},"content":{"logo1":"#377FDB","logo2":"#377FDB","brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#74777C","on-neutral":"#F0F1F2"},"contextual":{"primary":"#FFFFFFF2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#4B851A","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#937303","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#E13131","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#FFFFFF80"}},"border":{"surface":{"primary":"#E1E2E5"},"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"contextual":{"primary":"#FFFFFF33"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}}}},"dark":{"globals":{"colors":{"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":{"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,"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"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","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,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"contextual":{"primary":"#FFFFFF0D","primary-hover":"#FFFFFF1A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"color-brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"content":{"logo1":"#95ABFF","logo2":"#95ABFF","brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"contextual":{"primary":"#000000D9"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#0000004D"}},"border":{"surface":{"primary":"#3A3B3E"},"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"contextual":{"primary":"#00000033"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}}}}}}; +export const tokens = {"themes":{"default":{"globals":{"colors":{"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":{"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,"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"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","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,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#FFFFFF","secondary":"#FFFFFF","tertiary":"#F7F8F8"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#E1E2E5","secondary-hover":"#D2D4D8","tertiary":"#F0F1F2","tertiary-hover":"#E1E2E5"},"contextual":{"primary":"#0000000D","primary-hover":"#0000001A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#D5E4F7","secondary-hover":"#C0D6F4","tertiary":"#EAF1FB","tertiary-hover":"#D5E4F7"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#C8EEA8","secondary-hover":"#AAE579","tertiary":"#E4F7D4","tertiary-hover":"#C8EEA8"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#FFE176","secondary-hover":"#FFCF25","tertiary":"#FFF1BD","tertiary-hover":"#FFE176"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#FADBDB","secondary-hover":"#F7C9C9","tertiary":"#FCEDED","tertiary-hover":"#FADBDB"},"disabled":{"primary":"#E1E2E5","secondary":"#F0F1F2"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}},"text":{"primary":"#0000000D"}},"content":{"logo1":"#377FDB","logo2":"#377FDB","semantic":{"brand":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-brand":"#EAF1FB"},"neutral":{"primary":"#252627","secondary":"#5C5F63","tertiary":"#74777C","on-neutral":"#F0F1F2"},"contextual":{"primary":"#FFFFFFF2"},"info":{"primary":"#20467F","secondary":"#0659C5","tertiary":"#2976D8","on-info":"#EAF1FB"},"success":{"primary":"#344D24","secondary":"#3A6A14","tertiary":"#4B851A","on-success":"#E4F7D4"},"warning":{"primary":"#524620","secondary":"#745B03","tertiary":"#937303","on-warning":"#FFF1BD"},"error":{"primary":"#802820","secondary":"#C00101","tertiary":"#E13131","on-error":"#FCEDED"},"disabled":{"primary":"#A7ACB2","secondary":"#FFFFFF80"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}},"border":{"surface":{"primary":"#E1E2E5"},"semantic":{"brand":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"contextual":{"primary":"#FFFFFF33"},"neutral":{"primary":"#686B6F","secondary":"#A7ACB2","tertiary":"#D2D4D8"},"info":{"primary":"#1167D4","secondary":"#80AEE8","tertiary":"#C0D6F4"},"success":{"primary":"#427816","secondary":"#6AC024","tertiary":"#AAE579"},"warning":{"primary":"#836703","secondary":"#D3A504","tertiary":"#FFCF25"},"error":{"primary":"#D80000","secondary":"#EF9191","tertiary":"#F7C9C9"},"disabled":{"primary":"#E1E2E5"}},"palette":{"brand":{"primary":"#2976D8","secondary":"#6CA0E4","tertiary":"#C0D6F4"},"red":{"primary":"#D83F3D","secondary":"#EE7C7B","tertiary":"#F8C9C9"},"orange":{"primary":"#BE5B0F","secondary":"#F27E27","tertiary":"#FACBA8"},"brown":{"primary":"#8F7065","secondary":"#AF9992","tertiary":"#DCD2CF"},"yellow":{"primary":"#93730C","secondary":"#C39810","tertiary":"#F0D275"},"green":{"primary":"#368741","secondary":"#48B257","tertiary":"#A7E3AF"},"blue-1":{"primary":"#3D71E4","secondary":"#6F9BFD","tertiary":"#C2D5FE"},"blue-2":{"primary":"#2C8199","secondary":"#3BAACA","tertiary":"#A7DDED"},"purple":{"primary":"#9B4BF3","secondary":"#BD83FD","tertiary":"#E3CBFE"},"pink":{"primary":"#CD4089","secondary":"#EA77B3","tertiary":"#F7C7E0"},"gray":{"primary":"#74777C","secondary":"#999EA5","tertiary":"#D2D4D8"}}}},"components":{}},"dark":{"globals":{"colors":{"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":{"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,"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"}},"spacings":{"l":"3rem","b":"1.625rem","m":"0.8125rem","s":"1rem","t":"0.5rem","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,"sm":"576px","md":"768px","lg":"992px","xl":"1200px","xxl":"1400px"}},"contextuals":{"background":{"surface":{"primary":"#2F3033","secondary":"#252627","tertiary":"#1B1C1D"},"semantic":{"brand":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"neutral":{"primary":"#686B6F","primary-hover":"#505356","secondary":"#45474A","secondary-hover":"#3A3B3E","tertiary":"#3A3B3E","tertiary-hover":"#2F3033"},"contextual":{"primary":"#FFFFFF0D","primary-hover":"#FFFFFF1A"},"info":{"primary":"#1167D4","primary-hover":"#1A509F","secondary":"#20467F","secondary-hover":"#203C63","tertiary":"#203C63","tertiary-hover":"#1D314C"},"success":{"primary":"#427816","primary-hover":"#385C1F","secondary":"#344D24","secondary-hover":"#2E4022","tertiary":"#2E4022","tertiary-hover":"#27341F"},"warning":{"primary":"#836703","primary-hover":"#625019","secondary":"#524620","secondary-hover":"#443B20","tertiary":"#443B20","tertiary-hover":"#36301D"},"error":{"primary":"#D80000","primary-hover":"#9E2219","secondary":"#802820","secondary-hover":"#662820","tertiary":"#662820","tertiary-hover":"#4F231E"},"disabled":{"primary":"#3A3B3E","secondary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"content":{"logo1":"#95ABFF","logo2":"#95ABFF","semantic":{"brand":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-brand":"#EAF1FB"},"neutral":{"primary":"#F0F1F2","secondary":"#E1E2E5","tertiary":"#B5B9BE","on-neutral":"#F0F1F2"},"contextual":{"primary":"#000000D9"},"info":{"primary":"#EAF1FB","secondary":"#D5E4F7","tertiary":"#96BCEC","on-info":"#EAF1FB"},"success":{"primary":"#E4F7D4","secondary":"#C8EEA8","tertiary":"#72CF27","on-success":"#E4F7D4"},"warning":{"primary":"#FFF1BD","secondary":"#FFE176","tertiary":"#E3B205","on-warning":"#FFF1BD"},"error":{"primary":"#FCEDED","secondary":"#FADBDB","tertiary":"#F2A4A4","on-error":"#FCEDED"},"disabled":{"primary":"#5C5F63","secondary":"#0000004D"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}},"border":{"surface":{"primary":"#3A3B3E"},"semantic":{"brand":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"contextual":{"primary":"#00000033"},"neutral":{"primary":"#80848A","secondary":"#5C5F63","tertiary":"#45474A"},"info":{"primary":"#4085DC","secondary":"#0659C5","tertiary":"#20467F"},"success":{"primary":"#51941C","secondary":"#3A6A14","tertiary":"#344D24"},"warning":{"primary":"#A27F03","secondary":"#745B03","tertiary":"#524620"},"error":{"primary":"#E55050","secondary":"#C00101","tertiary":"#802820"},"disabled":{"primary":"#2F3033"}},"palette":{"brand":{"primary":"#6CA0E4","secondary":"#4085DC","tertiary":"#1167D4"},"red":{"primary":"#EE7C7B","secondary":"#E74E4D","tertiary":"#C23837"},"orange":{"primary":"#F27E27","secondary":"#D26411","tertiary":"#AA510E"},"brown":{"primary":"#AF9992","secondary":"#997E74","tertiary":"#846357"},"yellow":{"primary":"#C39810","secondary":"#A37F0D","tertiary":"#84670B"},"green":{"primary":"#48B257","secondary":"#3B9548","tertiary":"#30793A"},"blue-1":{"primary":"#6F9BFD","secondary":"#437DFC","tertiary":"#3665CC"},"blue-2":{"primary":"#3BAACA","secondary":"#318EA9","tertiary":"#277389"},"purple":{"primary":"#BD83FD","secondary":"#A85BFD","tertiary":"#8B43DA"},"pink":{"primary":"#EA77B3","secondary":"#E24797","tertiary":"#B8397B"},"gray":{"primary":"#999EA5","secondary":"#80848A","tertiary":"#686B6F"}}}}}}};