:root { --h1-font-family: "Albert Sans", Helvetica; --h1-font-weight: 700; --h1-font-size: 48px; --h1-letter-spacing: 0px; --h1-line-height: normal; --h1-font-style: normal; --h2-font-family: "Albert Sans", Helvetica; --h2-font-weight: 700; --h2-font-size: 28px; --h2-letter-spacing: 0px; --h2-line-height: 120.00000476837158%; --h2-font-style: normal; --p-font-family: "Open Sans", Helvetica; --p-font-weight: 400; --p-font-size: 18px; --p-letter-spacing: 0px; --p-line-height: 150%; --p-font-style: normal; --p-small-font-family: "Open Sans", Helvetica; --p-small-font-weight: 400; --p-small-font-size: 14px; --p-small-letter-spacing: 0px; --p-small-line-height: 150%; --p-small-font-style: normal; --global-default-paragraph-paragraph-font-family: "Open Sans", Helvetica; --global-default-paragraph-paragraph-font-weight: 400; --global-default-paragraph-paragraph-font-size: 16px; --global-default-paragraph-paragraph-letter-spacing: 0px; --global-default-paragraph-paragraph-line-height: 129.99999523162842%; --global-default-paragraph-paragraph-font-style: normal; --global-default-paragraph-small-paragraph-font-family: "Open Sans", Helvetica; --global-default-paragraph-small-paragraph-font-weight: 400; --global-default-paragraph-small-paragraph-font-size: 14px; --global-default-paragraph-small-paragraph-letter-spacing: 0px; --global-default-paragraph-small-paragraph-line-height: 129.99999523162842%; --global-default-paragraph-small-paragraph-font-style: normal; --global-default-heading-heading-07-font-family: "Open Sans", Helvetica; --global-default-heading-heading-07-font-weight: 400; --global-default-heading-heading-07-font-size: 14px; --global-default-heading-heading-07-letter-spacing: 0px; --global-default-heading-heading-07-line-height: 150%; --global-default-heading-heading-07-font-style: normal; --theme-primary-900: rgba(23, 54, 73, 1); --theme-secundary-300: rgba(224, 237, 102, 1); --theme-neutral-700: rgba(89, 99, 110, 1); --theme-neutral-600: rgba(129, 139, 152, 1); --theme-white: rgba(255, 255, 255, 1); --theme-neutral-850: rgba(57, 63, 70, 1); --theme-neutral-900: rgba(37, 41, 46, 1); --theme-neutral-800: rgba(69, 76, 84, 1); --theme-neutral-400: rgba(224, 230, 235, 1); --theme-neutral-100: rgba(246, 248, 250, 1); --theme-neutral-200: rgba(239, 242, 245, 1); --theme-neutral-300: rgba(230, 234, 239, 1); --theme-green-300: rgba(74, 194, 107, 1); --theme-neutral-500: rgba(218, 224, 231, 1); --theme-neutral-50: rgba(255, 255, 255, 1); --paddings-pd-4: 4px; --paddings-pd-8: 8px; --tailwindcss-spacing-1-5: 6px; --tailwindcss-spacing-1: 4px; --tailwindcss-spacing-3-5: 14px; --tailwindcss-spacing-2: 8px; --borders-border-radius-rounded: 4px; --borders-border-radius-rounded-md: 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-theme-mode="light"] { --theme-neutral-700: rgba(89, 99, 110, 1); --theme-neutral-600: rgba(129, 139, 152, 1); --theme-neutral-850: rgba(57, 63, 70, 1); --theme-neutral-900: rgba(37, 41, 46, 1); --theme-neutral-800: rgba(69, 76, 84, 1); --theme-neutral-400: rgba(224, 230, 235, 1); --theme-neutral-100: rgba(246, 248, 250, 1); --theme-neutral-200: rgba(239, 242, 245, 1); --theme-neutral-300: rgba(230, 234, 239, 1); --theme-neutral-500: rgba(218, 224, 231, 1); --theme-neutral-50: rgba(255, 255, 255, 1); } [data-theme-mode="dark"] { --theme-neutral-700: rgba(224, 230, 235, 1); --theme-neutral-600: rgba(218, 224, 231, 1); --theme-neutral-850: rgba(239, 242, 245, 1); --theme-neutral-900: rgba(246, 248, 250, 1); --theme-neutral-800: rgba(230, 234, 239, 1); --theme-neutral-400: rgba(89, 99, 110, 1); --theme-neutral-100: rgba(37, 41, 46, 1); --theme-neutral-200: rgba(57, 63, 70, 1); --theme-neutral-300: rgba(69, 76, 84, 1); --theme-neutral-500: rgba(129, 139, 152, 1); --theme-neutral-50: rgba(31, 35, 40, 1); } :root { --h1-font-family: "Albert Sans", Helvetica; --h1-font-weight: 700; --h1-font-size: 48px; --h1-letter-spacing: 0px; --h1-line-height: normal; --h1-font-style: normal; --h2-font-family: "Albert Sans", Helvetica; --h2-font-weight: 700; --h2-font-size: 28px; --h2-letter-spacing: 0px; --h2-line-height: 120.00000476837158%; --h2-font-style: normal; --p-font-family: "Open Sans", Helvetica; --p-font-weight: 400; --p-font-size: 18px; --p-letter-spacing: 0px; --p-line-height: 150%; --p-font-style: normal; --p-small-font-family: "Open Sans", Helvetica; --p-small-font-weight: 400; --p-small-font-size: 14px; --p-small-letter-spacing: 0px; --p-small-line-height: 150%; --p-small-font-style: normal; --global-default-paragraph-small-paragraph-font-family: "Open Sans", Helvetica; --global-default-paragraph-small-paragraph-font-weight: 400; --global-default-paragraph-small-paragraph-font-size: 14px; --global-default-paragraph-small-paragraph-letter-spacing: 0px; --global-default-paragraph-small-paragraph-line-height: 129.99999523162842%; --global-default-paragraph-small-paragraph-font-style: normal; --theme-primary-900: rgba(23, 54, 73, 1); --theme-secundary-300: rgba(224, 237, 102, 1); --theme-neutral-800: rgba(69, 76, 84, 1); --theme-neutral-700: rgba(89, 99, 110, 1); --theme-neutral-600: rgba(129, 139, 152, 1); --theme-neutral-50: rgba(255, 255, 255, 1); --theme-neutral-500: rgba(218, 224, 231, 1); --paddings-pd-4: 4px; --paddings-pd-8: 8px; --borders-border-radius-rounded: 4px; --tailwindcss-spacing-1-5: 6px; --tailwindcss-spacing-1: 4px; --tailwindcss-spacing-2-5: 10px; --tailwindcss-spacing-2: 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-theme-mode="light"] { --theme-neutral-800: rgba(69, 76, 84, 1); --theme-neutral-700: rgba(89, 99, 110, 1); --theme-neutral-600: rgba(129, 139, 152, 1); --theme-neutral-50: rgba(255, 255, 255, 1); --theme-neutral-500: rgba(218, 224, 231, 1); } [data-theme-mode="dark"] { --theme-neutral-800: rgba(230, 234, 239, 1); --theme-neutral-700: rgba(224, 230, 235, 1); --theme-neutral-600: rgba(218, 224, 231, 1); --theme-neutral-50: rgba(31, 35, 40, 1); --theme-neutral-500: rgba(129, 139, 152, 1); }