:root { --head-font-family: "Inter", Helvetica; --head-font-weight: 600; --head-font-size: 16px; --head-letter-spacing: 0px; --head-line-height: 100%; --head-font-style: normal; --single-line-body-base-font-family: "Inter", Helvetica; --single-line-body-base-font-weight: 400; --single-line-body-base-font-size: 16px; --single-line-body-base-letter-spacing: 0px; --single-line-body-base-line-height: 100%; --single-line-body-base-font-style: normal; --variable-collection-head: rgba(213, 213, 213, 1); --variable-collection-header: var(--variable-collection-head); --variable-collection-headerr: rgba(53, 53, 53, 1); --color-text-default-default: var(--color-primitives-gray-900); --color-background-neutral-tertiary: var(--color-primitives-slate-200); --color-background-neutral-tertiary-hover: var(--color-primitives-slate-300); --color-border-neutral-secondary: var(--color-primitives-slate-600); --color-primitives-gray-900: rgba(30, 30, 30, 1); --color-primitives-white-1000: rgba(255, 255, 255, 1); --color-primitives-slate-200: rgba(227, 227, 227, 1); --color-primitives-slate-300: rgba(205, 205, 205, 1); --color-primitives-slate-600: rgba(118, 118, 118, 1); --color-primitives-slate-900: rgba(48, 48, 48, 1); --color-primitives-slate-1000: rgba(36, 36, 36, 1); --color-primitives-slate-500: rgba(148, 148, 148, 1); --size-space-200: 8px; --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-default-default: var(--color-primitives-gray-900); --color-background-neutral-tertiary: var(--color-primitives-slate-200); --color-background-neutral-tertiary-hover: var(--color-primitives-slate-300); --color-border-neutral-secondary: var(--color-primitives-slate-600); } [data-color-mode="SDS-dark"] { --color-text-default-default: var(--color-primitives-white-1000); --color-background-neutral-tertiary: var(--color-primitives-slate-900); --color-background-neutral-tertiary-hover: var(--color-primitives-slate-1000); --color-border-neutral-secondary: var(--color-primitives-slate-500); } [data-color-mode="brand-b-light"] { --color-text-default-default: var(--color-primitives-gray-900); --color-background-neutral-tertiary: var(--color-primitives-slate-200); --color-background-neutral-tertiary-hover: var(--color-primitives-slate-300); --color-border-neutral-secondary: var(--color-primitives-slate-600); }