:root { --grayscalegray-50: rgba(255, 255, 255, 1); --6xl-font-family: "Spoqa Han Sans Neo", Helvetica; --6xl-font-weight: 700; --6xl-font-size: 48px; --6xl-letter-spacing: -0.72px; --6xl-line-height: 125%; --6xl-font-style: normal; --md-font-family: "Spoqa Han Sans Neo", Helvetica; --md-font-weight: 400; --md-font-size: 16px; --md-letter-spacing: 0px; --md-line-height: 150%; --md-font-style: normal; --sm-font-family: "Spoqa Han Sans Neo", Helvetica; --sm-font-weight: 400; --sm-font-size: 14px; --sm-letter-spacing: 0.035px; --sm-line-height: 150%; --sm-font-style: normal; --4xl-font-family: "Spoqa Han Sans Neo", Helvetica; --4xl-font-weight: 700; --4xl-font-size: 36px; --4xl-letter-spacing: -0.36px; --4xl-line-height: 125%; --4xl-font-style: normal; --xl-bold-font-family: "Spoqa Han Sans Neo", Helvetica; --xl-bold-font-weight: 700; --xl-bold-font-size: 20px; --xl-bold-letter-spacing: 0px; --xl-bold-line-height: 125%; --xl-bold-font-style: normal; --xs-font-family: "Spoqa Han Sans Neo", Helvetica; --xs-font-weight: 400; --xs-font-size: 12px; --xs-letter-spacing: 0.12px; --xs-line-height: 125%; --xs-font-style: normal; --variable-collection-grayscale-gray50: rgba(255, 255, 255, 1); --variable-collection-grayscale-gray900: rgba(11, 11, 11, 1); --variable-collection-grayscale-gray800: rgba(32, 33, 36, 1); --variable-collection-grayscale-gray400: rgba(177, 181, 191, 1); --variable-collection-grayscale-gray500: rgba(134, 139, 149, 1); --variable-collection-primary-purple400: rgba(141, 70, 231, 1); --variable-collection-additional-yellow200: rgba(255, 179, 89, 1); --variable-collection-grayscale-gray700: rgba(58, 60, 65, 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-variable-collection-mode="light"] { --variable-collection-primary-purple400: rgba(141, 70, 231, 1); --variable-collection-additional-yellow200: rgba(255, 179, 89, 1); } [data-variable-collection-mode="dark"] { --variable-collection-primary-purple400: rgba(101, 14, 211, 1); --variable-collection-additional-yellow200: rgba(127, 120, 111, 1); }