:root { --black: rgba(0, 0, 0, 1); --dark-gray-dark-gray-2: rgba(37, 44, 50, 1); --carouselgray: rgba(153, 153, 153, 1); --black-white-white: rgba(255, 255, 255, 1); --light-gray-light-gray-3: rgba(229, 233, 235, 1); --gray-900: rgba(24, 24, 27, 1); --bold-13px-font-family: "Plus Jakarta Sans", Helvetica; --bold-13px-font-weight: 700; --bold-13px-font-size: 14px; --bold-13px-letter-spacing: 0px; --bold-13px-line-height: 22px; --bold-13px-font-style: normal; --regular-13px-font-family: "Plus Jakarta Sans", Helvetica; --regular-13px-font-weight: 400; --regular-13px-font-size: 14px; --regular-13px-letter-spacing: 0px; --regular-13px-line-height: 22px; --regular-13px-font-style: normal; --bold-16px-font-family: "Plus Jakarta Sans", Helvetica; --bold-16px-font-weight: 700; --bold-16px-font-size: 16px; --bold-16px-letter-spacing: 0px; --bold-16px-line-height: 24px; --bold-16px-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; --body-body1-font-family: "Roboto", Helvetica; --body-body1-font-weight: 400; --body-body1-font-size: 16px; --body-body1-letter-spacing: 0.5px; --body-body1-line-height: 23px; --body-body1-font-style: normal; --UI-UI-text-14-reg-font-family: "Inter", Helvetica; --UI-UI-text-14-reg-font-weight: 400; --UI-UI-text-14-reg-font-size: 14px; --UI-UI-text-14-reg-letter-spacing: -0.0840000033378601px; --UI-UI-text-14-reg-line-height: 24px; --UI-UI-text-14-reg-font-style: normal; --UI-small-UI-text-12-reg-font-family: "Inter", Helvetica; --UI-small-UI-text-12-reg-font-weight: 400; --UI-small-UI-text-12-reg-font-size: 12px; --UI-small-UI-text-12-reg-letter-spacing: 0px; --UI-small-UI-text-12-reg-line-height: 16px; --UI-small-UI-text-12-reg-font-style: normal; --headings-heading-18-semi-bold-font-family: "Inter", Helvetica; --headings-heading-18-semi-bold-font-weight: 600; --headings-heading-18-semi-bold-font-size: 18px; --headings-heading-18-semi-bold-letter-spacing: -0.2519999957084656px; --headings-heading-18-semi-bold-line-height: 24px; --headings-heading-18-semi-bold-font-style: normal; --color-text-brand-on-brand: var(--color-primitives-brand-100); --color-primitives-brand-100: rgba(245, 245, 245, 1); --color-primitives-brand-900: rgba(30, 30, 30, 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); } [data-color-mode="SDS-dark"] { --color-text-brand-on-brand: var(--color-primitives-brand-900); }