:root { --fuschia-100: rgba(239, 93, 168, 1); --fuschia-80: rgba(241, 120, 182, 1); --fuschia-60: rgba(252, 221, 236, 1); --iris-100: rgba(93, 95, 239, 1); --iris-80: rgba(120, 121, 241, 1); --iris-60: rgba(165, 166, 246, 1); --header-1-font-family: "Work Sans", Helvetica; --header-1-font-weight: 700; --header-1-font-size: 34px; --header-1-letter-spacing: -0.68px; --header-1-line-height: normal; --header-1-font-style: normal; --header-2-font-family: "Work Sans", Helvetica; --header-2-font-weight: 700; --header-2-font-size: 20px; --header-2-letter-spacing: -0.4px; --header-2-line-height: normal; --header-2-font-style: normal; --body-font-family: "Work Sans", Helvetica; --body-font-weight: 400; --body-font-size: 13px; --body-letter-spacing: -0.26px; --body-line-height: normal; --body-font-style: normal; --2-color-modes-colors-background-bg-primary: var( --1-primitives-colors-based-white ); --2-color-modes-colors-border-border-primary: var( --1-primitives-colors-gray-300 ); --1-primitives-colors-based-white: rgba(255, 255, 255, 1); --1-primitives-colors-gray-300: rgba(217, 217, 217, 1); --1-primitives-colors-gray-950: rgba(20, 20, 20, 1); --1-primitives-colors-gray-700: rgba(69, 69, 69, 1); --3-radius-spacing-radius-radius-sm: 6px; } /* 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-2-color-modes-mode="light-theme"] { --2-color-modes-colors-background-bg-primary: var( --1-primitives-colors-based-white ); --2-color-modes-colors-border-border-primary: var( --1-primitives-colors-gray-300 ); } [data-2-color-modes-mode="dark-theme"] { --2-color-modes-colors-background-bg-primary: var( --1-primitives-colors-gray-950 ); --2-color-modes-colors-border-border-primary: var( --1-primitives-colors-gray-700 ); }