:root { --app-neutral600: rgba(85, 78, 73, 1); --app-neutral200: rgba(236, 235, 233, 1); --app-neutral50: rgba(250, 250, 249, 1); --base: rgba(23, 20, 18, 1); --subheading-x-small-font-family: "Roboto", Helvetica; --subheading-x-small-font-weight: 500; --subheading-x-small-font-size: 12px; --subheading-x-small-letter-spacing: 0px; --subheading-x-small-line-height: 16px; --subheading-x-small-font-style: normal; --title-h6-title-font-family: "Roboto", Helvetica; --title-h6-title-font-weight: 500; --title-h6-title-font-size: 20px; --title-h6-title-letter-spacing: -0.4px; --title-h6-title-line-height: 28px; --title-h6-title-font-style: normal; --label-small-font-family: "Roboto", Helvetica; --label-small-font-weight: 500; --label-small-font-size: 14px; --label-small-letter-spacing: 0px; --label-small-line-height: 20px; --label-small-font-style: normal; --paragraph-small-font-family: "Roboto", Helvetica; --paragraph-small-font-weight: 400; --paragraph-small-font-size: 14px; --paragraph-small-letter-spacing: 0px; --paragraph-small-line-height: 20px; --paragraph-small-font-style: normal; --regular-shadow-x-small: 0px 1px 2px 0px rgba(10, 13, 20, 0.03); --fancy-buttons-primary: 0px 0px 0px 1px rgba(65, 140, 240, 1), 0px 1px 2px 0px rgba(14, 18, 27, 0.24); --02-tokens-bg-bg-primary: var(--01-foundations-neutral-50); --02-tokens-text-soft-500: var(--01-foundations-neutral-500); --02-tokens-text-strong-950: var(--01-foundations-neutral-950); --02-tokens-text-white-0: var(--01-foundations-neutral-25); --02-tokens-text-sub-700: var(--01-foundations-neutral-700); --02-tokens-bg-bg-tertiary: var(--01-foundations-neutral-200); --02-tokens-stroke-soft-200: var(--01-foundations-neutral-200); --02-tokens-bg-bg-quaternary: var(--01-foundations-neutral-100-duplicate); --02-tokens-bg-bg-secondary: var(--02-tokens-static-static-white); --02-tokens-bg-strong-950: var(--01-foundations-neutral-950); --02-tokens-static-static-white: rgba(255, 255, 255, 1); --01-foundations-neutral-50: rgba(250, 250, 249, 1); --01-foundations-neutral-500: rgba(122, 118, 113, 1); --01-foundations-neutral-950: rgba(23, 20, 18, 1); --01-foundations-neutral-25: rgba(253, 253, 252, 1); --01-foundations-neutral-700: rgba(68, 64, 60, 1); --01-foundations-neutral-600: rgba(87, 83, 78, 1); --01-foundations-neutral-200: rgba(236, 235, 233, 1); --01-foundations-neutral-400: rgba(169, 163, 157, 1); --01-foundations-neutral-100-duplicate: rgba(245, 245, 244, 1); --01-foundations-neutral-900: rgba(28, 25, 23, 1); --04-radius-radius-8: 8px; --04-radius-radius-10: 10px; --04-radius-radius-full: 999px; --primitive-neutral-100: rgba(245, 245, 244, 1); --primitive-base-white: rgba(255, 255, 255, 1); } /* 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-02-tokens-mode="light"] { --02-tokens-bg-bg-primary: var(--01-foundations-neutral-50); --02-tokens-text-strong-950: var(--01-foundations-neutral-950); --02-tokens-text-white-0: var(--01-foundations-neutral-25); --02-tokens-text-sub-700: var(--01-foundations-neutral-700); --02-tokens-bg-bg-tertiary: var(--01-foundations-neutral-200); --02-tokens-stroke-soft-200: var(--01-foundations-neutral-200); --02-tokens-bg-bg-quaternary: var(--01-foundations-neutral-100-duplicate); --02-tokens-bg-bg-secondary: var(--02-tokens-static-static-white); --02-tokens-bg-strong-950: var(--01-foundations-neutral-950); --02-tokens-static-static-white: rgba(255, 255, 255, 1); } [data-02-tokens-mode="dark"] { --02-tokens-bg-bg-primary: var(--01-foundations-neutral-600); --02-tokens-text-strong-950: var(--01-foundations-neutral-25); --02-tokens-text-white-0: var(--01-foundations-neutral-950); --02-tokens-text-sub-700: var(--01-foundations-neutral-400); --02-tokens-bg-bg-tertiary: var(--01-foundations-neutral-900); --02-tokens-stroke-soft-200: var(--01-foundations-neutral-700); --02-tokens-bg-bg-quaternary: var(--01-foundations-neutral-950); --02-tokens-bg-bg-secondary: var(--01-foundations-neutral-700); --02-tokens-bg-strong-950: var(--01-foundations-neutral-25); --02-tokens-static-static-white: var(--01-foundations-neutral-25); }