:root { --header-1-font-family: "Lexend", Helvetica; --header-1-font-weight: 400; --header-1-font-size: 60px; --header-1-letter-spacing: 0px; --header-1-line-height: normal; --header-1-font-style: normal; --header-2-font-family: "Lexend", Helvetica; --header-2-font-weight: 400; --header-2-font-size: 35px; --header-2-letter-spacing: 0px; --header-2-line-height: normal; --header-2-font-style: normal; --subtitle-font-family: "Inter", Helvetica; --subtitle-font-weight: 400; --subtitle-font-size: 32px; --subtitle-letter-spacing: 0px; --subtitle-line-height: 120.00000476837158%; --subtitle-font-style: normal; --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-background-brand-default: var(--color-primitives-brand-800); --color-border-brand-default: var(--color-primitives-brand-800); --color-primitives-brand-100: rgba(245, 245, 245, 1); --color-primitives-brand-900: rgba(30, 30, 30, 1); --color-primitives-brand-800: rgba(44, 44, 44, 1); --size-space-200: 8px; --size-space-300: 12px; --size-radius-200: 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-color-mode="SDS-light"] { --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-background-brand-default: var(--color-primitives-brand-800); --color-border-brand-default: var(--color-primitives-brand-800); } [data-color-mode="SDS-dark"] { --color-text-brand-on-brand: var(--color-primitives-brand-900); --color-background-brand-default: var(--color-primitives-brand-100); --color-border-brand-default: var(--color-primitives-brand-100); } [data-color-mode="brand-b-light"] { --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-border-brand-default: var(--color-primitives-brand-800); }