@central-design-system/components 3.0.0-beta.9 → 3.0.0

package/src/themes/colors.ts

@@ -0,0 +1,492 @@
+/**
+ * Automatically generated by CDS CLI from CDS Server
+ * Generated on 1/27/2025, 7:21:39 AM
+ * Updated on 2024-12-25T14:30:52.638Z
+ **/
+
+const red = Object.freeze({
+  light10: '#FFE9E3',
+  light50: '#FFD1C6',
+  light100: '#FEC0B2',
+  light200: '#FFAE9E',
+  light300: '#FE9585',
+  light400: '#FE8071',
+  light500: '#F46A5D',
+  light600: '#E4594F',
+  light700: '#D1453F',
+  light800: '#9D2124',
+  light900: '#831118',
+  light950: '#470500',
+  dark10: '#4C1715',
+  dark50: '#822825',
+  dark100: '#A5302F',
+  dark200: '#B8423D',
+  dark300: '#D15850',
+  dark400: '#DF655C',
+  dark500: '#F0786D',
+  dark600: '#F9887C',
+  dark700: '#FF9E92',
+  dark800: '#FFC4BA',
+  dark900: '#FFD2CC',
+  dark950: '#FFE8E4'
+});
+
+const chocolate = Object.freeze({
+  light10: '#FAEBDF',
+  light50: '#E7D9CC',
+  light100: '#E0CBBB',
+  light200: '#D8BEA9',
+  light300: '#CDAD93',
+  light400: '#C4A082',
+  light500: '#B78F6D',
+  light600: '#AC7F58',
+  light700: '#9E6D41',
+  light800: '#7F470D',
+  light900: '#693803',
+  light950: '#361D01',
+  dark10: '#3F2301',
+  dark50: '#6E3B01',
+  dark100: '#874E0A',
+  dark200: '#985E1F',
+  dark300: '#AF7134',
+  dark400: '#BB7F42',
+  dark500: '#CA915C',
+  dark600: '#D49E6D',
+  dark700: '#E1AE7F',
+  dark800: '#F1CBA7',
+  dark900: '#F4D8BE',
+  dark950: '#FAEADB'
+});
+
+const orange = Object.freeze({
+  light10: '#FEEAD9',
+  light50: '#FBD5B5',
+  light100: '#FBC398',
+  light200: '#FBB27C',
+  light300: '#FB9A57',
+  light400: '#F38A4A',
+  light500: '#E17B44',
+  light600: '#D16C39',
+  light700: '#BD5B2D',
+  light800: '#8F3810',
+  light900: '#782A0A',
+  light950: '#431502',
+  dark10: '#471D07',
+  dark50: '#793213',
+  dark100: '#9A3F15',
+  dark200: '#AC5025',
+  dark300: '#C36438',
+  dark400: '#D27144',
+  dark500: '#E48255',
+  dark600: '#EE9165',
+  dark700: '#F5A57F',
+  dark800: '#FAC7B0',
+  dark900: '#FBD5C4',
+  dark950: '#FEE8DE'
+});
+
+const yellow = Object.freeze({
+  light10: '#FBEDBE',
+  light50: '#F2DB82',
+  light100: '#EACD60',
+  light200: '#DEC048',
+  light300: '#D1AF30',
+  light400: '#C6A221',
+  light500: '#B69210',
+  light600: '#A6840A',
+  light700: '#937305',
+  light800: '#6B5100',
+  light900: '#584001',
+  light950: '#312300',
+  dark10: '#382601',
+  dark50: '#614301',
+  dark100: '#785501',
+  dark200: '#8A6502',
+  dark300: '#A07914',
+  dark400: '#AE8624',
+  dark500: '#BE9737',
+  dark600: '#C9A449',
+  dark700: '#D4B56A',
+  dark800: '#E5D0A0',
+  dark900: '#EADBBA',
+  dark950: '#F4EBD9'
+});
+
+const lemon = Object.freeze({
+  light10: '#F4EFBE',
+  light50: '#E6DF83',
+  light100: '#D8D268',
+  light200: '#CBC65F',
+  light300: '#BAB726',
+  light400: '#ADAB26',
+  light500: '#9D9B25',
+  light600: '#8E8C23',
+  light700: '#7D7A1F',
+  light800: '#5A571C',
+  light900: '#494619',
+  light950: '#282601',
+  dark10: '#2A2C01',
+  dark50: '#484C01',
+  dark100: '#5C6101',
+  dark200: '#6A7100',
+  dark300: '#7F8505',
+  dark400: '#8C921D',
+  dark500: '#9DA235',
+  dark600: '#ABAE48',
+  dark700: '#BBBD6A',
+  dark800: '#D6D5A1',
+  dark900: '#E0DFBA',
+  dark950: '#EEEED9'
+});
+
+const lime = Object.freeze({
+  light10: '#EAF2C4',
+  light50: '#D4E490',
+  light100: '#C4D878',
+  light200: '#B6CC65',
+  light300: '#A1BE40',
+  light400: '#93B230',
+  light500: '#85A12D',
+  light600: '#78922C',
+  light700: '#6A8029',
+  light800: '#4C5B21',
+  light900: '#3E4A1D',
+  light950: '#202901',
+  dark10: '#242D01',
+  dark50: '#3D4F00',
+  dark100: '#4E6401',
+  dark200: '#5B7400',
+  dark300: '#6E8913',
+  dark400: '#7C9624',
+  dark500: '#8DA63B',
+  dark600: '#9BB24D',
+  dark700: '#AEC06D',
+  dark800: '#CDD7A3',
+  dark900: '#D9E0BB',
+  dark950: '#EBEED8'
+});
+
+const green = Object.freeze({
+  light10: '#DCF5D0',
+  light50: '#BCE8AB',
+  light100: '#A5DD98',
+  light200: '#97D283',
+  light300: '#7DC470',
+  light400: '#6EB85A',
+  light500: '#50A946',
+  light600: '#3C9C2C',
+  light700: '#2C8926',
+  light800: '#026309',
+  light900: '#005005',
+  light950: '#0B2C01',
+  dark10: '#093107',
+  dark50: '#0D5512',
+  dark100: '#016B12',
+  dark200: '#1F7C22',
+  dark300: '#399136',
+  dark400: '#479E43',
+  dark500: '#5DAF55',
+  dark600: '#6EBA66',
+  dark700: '#89C880',
+  dark800: '#B6DCAF',
+  dark900: '#CAE4C4',
+  dark950: '#E1F1DE'
+});
+
+const cyan = Object.freeze({
+  light10: '#D4F5EC',
+  light50: '#9FEBD8',
+  light100: '#6FE3CA',
+  light200: '#58D8BE',
+  light300: '#51C5AE',
+  light400: '#4FB9A3',
+  light500: '#48A692',
+  light600: '#439786',
+  light700: '#3C8475',
+  light800: '#2A5F54',
+  light900: '#204D44',
+  light950: '#052B24',
+  dark10: '#013126',
+  dark50: '#005348',
+  dark100: '#026959',
+  dark200: '#067A69',
+  dark300: '#04917C',
+  dark400: '#029E88',
+  dark500: '#0AB098',
+  dark600: '#0ABEA3',
+  dark700: '#45CCB2',
+  dark800: '#96E0CE',
+  dark900: '#B6E7DB',
+  dark950: '#D5F3EB'
+});
+
+const teal = Object.freeze({
+  light10: '#D4F4F7',
+  light50: '#A1E9E9',
+  light100: '#74DFE3',
+  light200: '#48D6DB',
+  light300: '#44C4CC',
+  light400: '#41B7BF',
+  light500: '#3CA5AD',
+  light600: '#3A969E',
+  light700: '#34838A',
+  light800: '#2A5D62',
+  light900: '#254C50',
+  light950: '#022B2F',
+  dark10: '#012F37',
+  dark50: '#04525B',
+  dark100: '#046672',
+  dark200: '#007886',
+  dark300: '#028D9C',
+  dark400: '#059BAC',
+  dark500: '#01ACBF',
+  dark600: '#0ABACE',
+  dark700: '#31C9DD',
+  dark800: '#91DEEB',
+  dark900: '#B3E6EF',
+  dark950: '#D4F2F7'
+});
+
+const sky = Object.freeze({
+  light10: '#E2EFFF',
+  light50: '#C3DFFF',
+  light100: '#A9D3FF',
+  light200: '#90C8FF',
+  light300: '#71B7F7',
+  light400: '#4CAEF8',
+  light500: '#2B9DE9',
+  light600: '#198FD8',
+  light700: '#1D7DBC',
+  light800: '#06598B',
+  light900: '#004871',
+  light950: '#012740',
+  dark10: '#002D47',
+  dark50: '#014F77',
+  dark100: '#016193',
+  dark200: '#0172AC',
+  dark300: '#0287CA',
+  dark400: '#0394DD',
+  dark500: '#0EA4F8',
+  dark600: '#4DB1FF',
+  dark700: '#77BEFE',
+  dark800: '#B0D6FF',
+  dark900: '#C7E0FF',
+  dark950: '#E2EEFE'
+});
+
+const blue = Object.freeze({
+  light10: '#E6EEFF',
+  light50: '#CBDDFD',
+  light100: '#B6D0FD',
+  light200: '#A4C5FE',
+  light300: '#85B4FB',
+  light400: '#6EA9FC',
+  light500: '#4D98F9',
+  light600: '#3D8AEC',
+  light700: '#2978D4',
+  light800: '#14559C',
+  light900: '#11447D',
+  light950: '#072649',
+  dark10: '#142955',
+  dark50: '#1D4790',
+  dark100: '#1159B5',
+  dark200: '#3368C8',
+  dark300: '#417FE1',
+  dark400: '#4A8DEF',
+  dark500: '#5D9DFC',
+  dark600: '#76ABFF',
+  dark700: '#92BAFE',
+  dark800: '#BBD4FE',
+  dark900: '#CDDEFF',
+  dark950: '#E4EDFE'
+});
+
+const indigo = Object.freeze({
+  light10: '#EEECFF',
+  light50: '#DDD9FC',
+  light100: '#CFCAF7',
+  light200: '#C3BDF9',
+  light300: '#B1ABF1',
+  light400: '#A49FF1',
+  light500: '#918DEC',
+  light600: '#807EEC',
+  light700: '#6B6CD8',
+  light800: '#4649AF',
+  light900: '#353799',
+  light950: '#1F1F55',
+  dark10: '#212753',
+  dark50: '#40428D',
+  dark100: '#5350B0',
+  dark200: '#6362C5',
+  dark300: '#7477DC',
+  dark400: '#7E83EA',
+  dark500: '#8B95F9',
+  dark600: '#96A4FF',
+  dark700: '#A6B5FE',
+  dark800: '#C7D0FE',
+  dark900: '#D7DBFE',
+  dark950: '#EBEBFF'
+});
+
+const purple = Object.freeze({
+  light10: '#F5E9FE',
+  light50: '#E8D5F6',
+  light100: '#DEC5F1',
+  light200: '#D6B8EF',
+  light300: '#C9A4E9',
+  light400: '#C195E7',
+  light500: '#B381E1',
+  light600: '#A96FDE',
+  light700: '#955EC8',
+  light800: '#6D3BA0',
+  light900: '#59288A',
+  light950: '#2F0F50',
+  dark10: '#31224F',
+  dark50: '#5E3882',
+  dark100: '#7346A5',
+  dark200: '#8457B8',
+  dark300: '#946DD2',
+  dark400: '#9D7AE0',
+  dark500: '#AE8BEE',
+  dark600: '#B79AF5',
+  dark700: '#C0AEF8',
+  dark800: '#D7CCFA',
+  dark900: '#E1D8FC',
+  dark950: '#F3E9FE'
+});
+
+const pink = Object.freeze({
+  light10: '#F7E9FF',
+  light50: '#F8D1F2',
+  light100: '#F6BEEC',
+  light200: '#F3ACE7',
+  light300: '#F094DF',
+  light400: '#ED81D8',
+  light500: '#DB70C4',
+  light600: '#D25CB8',
+  light700: '#BD49A2',
+  light800: '#941A79',
+  light900: '#7C0164',
+  light950: '#420D35',
+  dark10: '#47173D',
+  dark50: '#7A2869',
+  dark100: '#992F84',
+  dark200: '#AC4296',
+  dark300: '#C358AB',
+  dark400: '#D164B8',
+  dark500: '#E078C7',
+  dark600: '#E889D1',
+  dark700: '#ECA1D8',
+  dark800: '#F4C5E7',
+  dark900: '#F7D3EC',
+  dark950: '#FDE6F6'
+});
+
+const silver = Object.freeze({
+  light10: '#ECEEF2',
+  light50: '#DADDE2',
+  light100: '#CCCFD6',
+  light200: '#C0C3CB',
+  light300: '#AFB3BD',
+  light400: '#A3A7B2',
+  light500: '#9298A4',
+  light600: '#828A97',
+  light700: '#727987',
+  light800: '#4F5666',
+  light900: '#404653',
+  light950: '#212631',
+  dark10: '#272A30',
+  dark50: '#454951',
+  dark100: '#565D67',
+  dark200: '#666C79',
+  dark300: '#7A808E',
+  dark400: '#868C99',
+  dark500: '#989DA8',
+  dark600: '#A5A9B2',
+  dark700: '#B5B7C0',
+  dark800: '#CFD2D7',
+  dark900: '#DCDDE3',
+  dark950: '#ECECEF',
+  dark25: '#33373F'
+});
+
+const gray = Object.freeze({
+  light10: '#EEEEEE',
+  light50: '#DCDCDC',
+  light100: '#CFCFCF',
+  light200: '#C3C3C3',
+  light300: '#B3B3B3',
+  light400: '#A7A7A7',
+  light500: '#989898',
+  light600: '#898989',
+  light700: '#797979',
+  light800: '#565656',
+  light900: '#454545',
+  light950: '#262626',
+  dark10: '#2A2A2A',
+  dark50: '#494949',
+  dark100: '#5C5C5C',
+  dark200: '#6C6C6C',
+  dark300: '#808080',
+  dark400: '#8C8C8C',
+  dark500: '#9D9D9D',
+  dark600: '#A9A9A9',
+  dark700: '#B8B8B8',
+  dark800: '#D2D2D2',
+  dark900: '#DDDDDD',
+  dark950: '#ECECEC',
+  light0: '#FFFFFF',
+  light1000: '#000000',
+  dark0: '#1A1A1A',
+  dark1000: '#F9F9FC'
+});
+
+const alpha = Object.freeze({
+  dark500: '#272A3080',
+  dark400: '#272A3066',
+  dark300: '#272A304D',
+  dark200: '#272A3033',
+  dark100: '#272A301A',
+  light100: '#FFFFFF1A',
+  light200: '#FFFFFF33',
+  light300: '#FFFFFF4D',
+  light400: '#FFFFFF66',
+  light500: '#FFFFFF80',
+  silver100: '#828A971A',
+  silver200: '#828A9733',
+  silver300: '#828A974D',
+  silver400: '#828A9766',
+  silver500: '#828A9780',
+  light0: '#FFFFFF00',
+  dark0: '#272A3000',
+  silver0: '#828A9700',
+  dark600: '#272A3099',
+  dark700: '#272A30B2',
+  dark800: '#272A30CC',
+  silver600: '#828A9799',
+  silver700: '#828A97B2',
+  silver800: '#828A97CC',
+  light600: '#FFFFFF99',
+  light700: '#FFFFFFB2',
+  light800: '#FFFFFFCC'
+});
+
+export default {
+  red,
+  chocolate,
+  orange,
+  yellow,
+  lemon,
+  lime,
+  green,
+  cyan,
+  teal,
+  sky,
+  blue,
+  indigo,
+  purple,
+  pink,
+  silver,
+  gray,
+  alpha
+};

package/src/themes/css/b2bDark.css

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: 0rem;
+  --cds-shadow-y-minus-300: 0rem;
+  --cds-shadow-y-minus-200: 0rem;
+  --cds-shadow-y-minus-100: 0rem;
+  --cds-shadow-y-400: 0rem;
+  --cds-shadow-y-300: 0rem;
+  --cds-shadow-y-200: 0rem;
+  --cds-shadow-y-100: 0rem;
+  --cds-shadow-x-minus-400: 0rem;
+  --cds-shadow-x-minus-300: 0rem;
+  --cds-shadow-x-minus-200: 0rem;
+  --cds-shadow-x-minus-100: 0rem;
+  --cds-shadow-x-400: 0rem;
+  --cds-shadow-x-300: 0rem;
+  --cds-shadow-x-200: 0rem;
+  --cds-shadow-x-100: 0rem;
+  --cds-shadow-blur-400: 0rem;
+  --cds-shadow-blur-300: 0rem;
+  --cds-shadow-blur-200: 0rem;
+  --cds-shadow-blur-100: 0rem;
+  --cds-font-weight-regular: 400;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: Arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 51, 55, 63;
+  --cds-color-surface-primary: 39, 42, 48;
+  --cds-color-surface-overlay: 39, 42, 48, 0.8;
+  --cds-color-surface-inverse: 220, 221, 227;
+  --cds-color-surface-elevated: 51, 55, 63;
+  --cds-color-status-warning-surface: 201, 164, 73;
+  --cds-color-status-warning-line: 190, 151, 55;
+  --cds-color-status-warning-fill-hover: 138, 101, 2;
+  --cds-color-status-warning-fill: 97, 67, 1;
+  --cds-color-status-warning-content: 234, 219, 186;
+  --cds-color-status-success-surface: 110, 186, 102;
+  --cds-color-status-success-line: 93, 175, 85;
+  --cds-color-status-success-fill-hover: 31, 124, 34;
+  --cds-color-status-success-fill: 13, 85, 18;
+  --cds-color-status-success-content: 202, 228, 196;
+  --cds-color-status-progress-surface: 77, 177, 255;
+  --cds-color-status-progress-line: 14, 164, 248;
+  --cds-color-status-progress-fill-hover: 1, 114, 172;
+  --cds-color-status-progress-fill: 1, 79, 119;
+  --cds-color-status-progress-content: 199, 224, 255;
+  --cds-color-status-info-surface: 165, 169, 178;
+  --cds-color-status-info-line: 152, 157, 168;
+  --cds-color-status-info-fill-hover: 102, 108, 121;
+  --cds-color-status-info-fill: 69, 73, 81;
+  --cds-color-status-info-content: 220, 221, 227;
+  --cds-color-status-indication-surface: 255, 158, 146;
+  --cds-color-status-indication-line: 255, 158, 146;
+  --cds-color-status-indication-fill-hover: 184, 66, 61;
+  --cds-color-status-indication-fill: 130, 40, 37;
+  --cds-color-status-indication-content: 255, 210, 204;
+  --cds-color-status-danger-surface: 255, 158, 146;
+  --cds-color-status-danger-line: 255, 158, 146;
+  --cds-color-status-danger-fill-hover: 184, 66, 61;
+  --cds-color-status-danger-fill: 130, 40, 37;
+  --cds-color-status-danger-content: 255, 210, 204;
+  --cds-color-page-primary: 26, 26, 26;
+  --cds-color-other-teal-surface: 10, 186, 206;
+  --cds-color-other-teal-line: 1, 172, 191;
+  --cds-color-other-teal-fill-hover: 0, 120, 134;
+  --cds-color-other-teal-fill: 4, 82, 91;
+  --cds-color-other-teal-content: 212, 242, 247;
+  --cds-color-other-purple-surface: 183, 154, 245;
+  --cds-color-other-purple-line: 174, 139, 238;
+  --cds-color-other-purple-fill-hover: 132, 87, 184;
+  --cds-color-other-purple-fill: 94, 56, 130;
+  --cds-color-other-purple-content: 243, 233, 254;
+  --cds-color-other-pink-surface: 232, 137, 209;
+  --cds-color-other-pink-line: 224, 120, 199;
+  --cds-color-other-pink-fill-hover: 172, 66, 150;
+  --cds-color-other-pink-fill: 122, 40, 105;
+  --cds-color-other-pink-content: 253, 230, 246;
+  --cds-color-other-lime-surface: 155, 178, 77;
+  --cds-color-other-lime-line: 141, 166, 59;
+  --cds-color-other-lime-fill-hover: 91, 116, 0;
+  --cds-color-other-lime-fill: 61, 79, 0;
+  --cds-color-other-lime-content: 235, 238, 216;
+  --cds-color-other-lemon-surface: 171, 174, 72;
+  --cds-color-other-lemon-line: 157, 162, 53;
+  --cds-color-other-lemon-fill-hover: 106, 113, 0;
+  --cds-color-other-lemon-fill: 72, 76, 1;
+  --cds-color-other-lemon-content: 238, 238, 217;
+  --cds-color-other-indigo-surface: 150, 164, 255;
+  --cds-color-other-indigo-line: 139, 149, 249;
+  --cds-color-other-indigo-fill-hover: 99, 98, 197;
+  --cds-color-other-indigo-fill: 64, 66, 141;
+  --cds-color-other-indigo-content: 235, 235, 255;
+  --cds-color-other-cyan-surface: 10, 190, 163;
+  --cds-color-other-cyan-line: 10, 176, 152;
+  --cds-color-other-cyan-fill-hover: 6, 122, 105;
+  --cds-color-other-cyan-fill: 0, 83, 72;
+  --cds-color-other-cyan-content: 213, 243, 235;
+  --cds-color-other-chocolate-surface: 212, 158, 109;
+  --cds-color-other-chocolate-line: 202, 145, 92;
+  --cds-color-other-chocolate-fill-hover: 152, 94, 31;
+  --cds-color-other-chocolate-fill: 110, 59, 1;
+  --cds-color-other-chocolate-content: 250, 234, 219;
+  --cds-color-line-tertiary-hover: 122, 128, 142;
+  --cds-color-line-tertiary: 86, 93, 103;
+  --cds-color-line-selected-hover: 146, 186, 254;
+  --cds-color-line-selected: 93, 157, 252;
+  --cds-color-line-secondary-hover: 152, 157, 168;
+  --cds-color-line-secondary: 122, 128, 142;
+  --cds-color-line-primary-hover: 181, 183, 192;
+  --cds-color-line-primary: 152, 157, 168;
+  --cds-color-line-focus-outline: 17, 89, 181;
+  --cds-color-line-focus: 93, 157, 252;
+  --cds-color-line-elevated: 130, 138, 151, 0.4;
+  --cds-color-line-disable: 102, 108, 121;
+  --cds-color-fill-selected-hover: 146, 186, 254;
+  --cds-color-fill-selected: 93, 157, 252;
+  --cds-color-fill-secondary-hover: 86, 93, 103;
+  --cds-color-fill-secondary-active: 102, 108, 121;
+  --cds-color-fill-secondary: 69, 73, 81;
+  --cds-color-fill-primary-hover: 69, 73, 81;
+  --cds-color-fill-primary-active: 86, 93, 103;
+  --cds-color-fill-primary: 39, 42, 48;
+  --cds-color-fill-elevated: 122, 128, 142;
+  --cds-color-fill-disable: 69, 73, 81;
+  --cds-color-content-tertiary: 181, 183, 192;
+  --cds-color-content-secondary: 207, 210, 215;
+  --cds-color-content-primary: 236, 236, 239;
+  --cds-color-content-placeholder: 165, 169, 178;
+  --cds-color-content-on-dark: 249, 249, 252;
+  --cds-color-content-link-visited: 192, 174, 248;
+  --cds-color-content-link: 146, 186, 254;
+  --cds-color-content-inverse: 26, 26, 26;
+  --cds-color-content-disable: 152, 157, 168;
+  --cds-color-brand-secondary-hover: 1, 79, 119;
+  --cds-color-brand-secondary-border: 1, 97, 147;
+  --cds-color-brand-secondary-active: 1, 97, 147;
+  --cds-color-brand-secondary: 0, 45, 71;
+  --cds-color-brand-primary-hover: 1, 97, 147;
+  --cds-color-brand-primary-content: 199, 224, 255;
+  --cds-color-brand-primary-border: 2, 135, 202;
+  --cds-color-brand-primary-active: 1, 79, 119;
+  --cds-color-brand-primary: 2, 135, 202;
+}