:root { --youngcustrombgrd: rgba(31, 9, 78, 0.85); --cmstext: rgba(33, 37, 41, 1); --labels-large-bolder-font-family: "ROSSMANN Sans", Helvetica; --labels-large-bolder-font-weight: 500; --labels-large-bolder-font-size: 16px; --labels-large-bolder-letter-spacing: 0px; --labels-large-bolder-line-height: 20px; --labels-large-bolder-font-style: normal; --paragraphs-medium-font-family: "ROSSMANN Sans", Helvetica; --paragraphs-medium-font-weight: 400; --paragraphs-medium-font-size: 16px; --paragraphs-medium-letter-spacing: 0px; --paragraphs-medium-line-height: 24px; --paragraphs-medium-font-style: normal; --labels-medium-bolder-font-family: "ROSSMANN Sans", Helvetica; --labels-medium-bolder-font-weight: 500; --labels-medium-bolder-font-size: 14px; --labels-medium-bolder-letter-spacing: 0px; --labels-medium-bolder-line-height: 18px; --labels-medium-bolder-font-style: normal; --labels-medium-font-family: "ROSSMANN Sans", Helvetica; --labels-medium-font-weight: 400; --labels-medium-font-size: 14px; --labels-medium-letter-spacing: 0px; --labels-medium-line-height: 18px; --labels-medium-font-style: normal; --labels-small-font-family: "ROSSMANN Sans", Helvetica; --labels-small-font-weight: 400; --labels-small-font-size: 12px; --labels-small-letter-spacing: 0px; --labels-small-line-height: 16px; --labels-small-font-style: normal; --medium: 0px 8px 16px 0px rgba(0, 0, 0, 0.12); --collection-1-white: rgba(255, 255, 255, 1); --collection-1-base: var(--colors-base-100); --colors-base-700: rgba(28, 29, 34, 1); --colors-info-400: rgba(16, 122, 198, 1); --colors-base-400: rgba(114, 123, 141, 1); --colors-info-600: rgba(6, 70, 116, 1); --colors-base-450: rgba(96, 103, 118, 1); --colors-radius-sm: var(--colors-size-16); --colors-size-16: 16px; --colors-base-00-elevation: rgba(255, 255, 255, 1); --colors-button-spacing-md: 10px; --colors-base-200: rgba(199, 202, 209, 1); --colors-radius-md: var(--colors-size-20); --colors-size-20: 20px; --colors-spacing-1: var(--colors-size-4); --colors-size-4: 4px; --colors-base-100: rgba(233, 234, 236, 1); --colors-spacing-3: var(--colors-size-16); --colors-spacing-4: var(--colors-size-24); --colors-size-24: 24px; --colors-base-01-elevation: rgba(255, 255, 255, 1); --colors-exceptions-button-tetriary: rgba(28, 29, 34, 1); --colors-exceptions-button-secondary: rgba(28, 29, 34, 1); --colors-exceptions-white-fixed: rgba(255, 255, 255, 1); --sizes-spacing-2: var(--sizes-size-8); --sizes-size-8: 8px; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-colors-mode="normal"] { --colors-base-700: rgba(28, 29, 34, 1); --colors-info-400: rgba(16, 122, 198, 1); --colors-base-400: rgba(114, 123, 141, 1); --colors-info-600: rgba(6, 70, 116, 1); --colors-base-450: rgba(96, 103, 118, 1); --colors-base-00-elevation: rgba(255, 255, 255, 1); --colors-base-200: rgba(199, 202, 209, 1); --colors-base-100: rgba(233, 234, 236, 1); --colors-base-01-elevation: rgba(255, 255, 255, 1); --colors-exceptions-button-tetriary: rgba(28, 29, 34, 1); --colors-exceptions-button-secondary: rgba(28, 29, 34, 1); } [data-colors-mode="dark"] { --colors-base-700: rgba(247, 247, 248, 1); --colors-info-400: rgba(57, 163, 239, 1); --colors-base-400: rgba(166, 171, 181, 1); --colors-info-600: rgba(158, 212, 250, 1); --colors-base-450: rgba(182, 186, 195, 1); --colors-base-00-elevation: rgba(28, 29, 34, 1); --colors-base-200: rgba(83, 88, 101, 1); --colors-base-100: rgba(55, 59, 67, 1); --colors-base-01-elevation: rgba(41, 44, 50, 1); --colors-exceptions-button-tetriary: rgba(247, 247, 248, 1); --colors-exceptions-button-secondary: rgba(247, 247, 248, 1); } [data-colors-mode="test-contrast-mode"] { --colors-base-700: rgba(255, 255, 255, 1); --colors-info-400: rgba(255, 255, 1, 1); --colors-base-400: rgba(255, 255, 255, 1); --colors-info-600: rgba(255, 255, 1, 1); --colors-base-450: rgba(255, 255, 255, 1); --colors-base-00-elevation: rgba(14, 15, 17, 1); --colors-base-200: rgba(255, 255, 255, 1); --colors-base-100: rgba(255, 255, 255, 1); --colors-base-01-elevation: rgba(14, 15, 17, 1); --colors-exceptions-button-tetriary: rgba(75, 158, 255, 1); --colors-exceptions-button-secondary: rgba(255, 255, 1, 1); }