:root { --body-text-font-family: "Inter", Helvetica; --body-text-font-weight: 500; --body-text-font-size: 20px; --body-text-letter-spacing: 0px; --body-text-line-height: 150%; --body-text-font-style: normal; --body-base-font-family: "Inter", Helvetica; --body-base-font-weight: 400; --body-base-font-size: 16px; --body-base-letter-spacing: 0px; --body-base-line-height: 139.9999976158142%; --body-base-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; --small-text-font-family: "Inter", Helvetica; --small-text-font-weight: 500; --small-text-font-size: 16px; --small-text-letter-spacing: 0px; --small-text-line-height: 150%; --small-text-font-style: normal; --subheading-font-family: "Inter", Helvetica; --subheading-font-weight: 400; --subheading-font-size: 24px; --subheading-letter-spacing: 0px; --subheading-line-height: 150%; --subheading-font-style: normal; --button-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); --color-text-neutral-on-neutral: var(--color-primitives-slate-100); --color-text-default-default: var(--color-primitives-gray-900); --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-text-default-tertiary: var(--color-primitives-gray-400); --color-background-default-default: var(--color-primitives-white-1000); --color-border-default-default: var(--color-primitives-gray-300); --variable-collection-spacing-s: 24px; --variable-collection-spacing-m: 48px; --color-primitives-slate-100: rgba(243, 243, 243, 1); --color-primitives-gray-900: rgba(30, 30, 30, 1); --color-primitives-brand-100: rgba(245, 245, 245, 1); --color-primitives-gray-400: rgba(179, 179, 179, 1); --color-primitives-brand-900: rgba(30, 30, 30, 1); --color-primitives-white-400: rgba(255, 255, 255, 0.4); --color-primitives-slate-1000: rgba(36, 36, 36, 1); --color-primitives-white-1000: rgba(255, 255, 255, 1); --color-primitives-gray-300: rgba(217, 217, 217, 1); --color-primitives-gray-600: rgba(68, 68, 68, 1); --size-space-400: 16px; --size-space-300: 12px; --size-radius-200: 8px; --size-space-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-neutral-on-neutral: var(--color-primitives-slate-100); --color-text-default-default: var(--color-primitives-gray-900); --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-text-default-tertiary: var(--color-primitives-gray-400); --color-background-default-default: var(--color-primitives-white-1000); --color-border-default-default: var(--color-primitives-gray-300); } [data-color-mode="SDS-dark"] { --color-text-neutral-on-neutral: var(--color-primitives-slate-1000); --color-text-default-default: var(--color-primitives-white-1000); --color-text-brand-on-brand: var(--color-primitives-brand-900); --color-text-default-tertiary: var(--color-primitives-white-400); --color-background-default-default: var(--color-primitives-gray-900); --color-border-default-default: var(--color-primitives-gray-600); } [data-color-mode="brand-b-light"] { --color-text-neutral-on-neutral: var(--color-primitives-slate-100); --color-text-default-default: var(--color-primitives-gray-900); --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-text-default-tertiary: var(--color-primitives-gray-400); --color-background-default-default: var(--color-primitives-white-1000); --color-border-default-default: var(--color-primitives-gray-300); }