:root { --black-10: rgba(13, 26, 51, 0.1); --black-100: rgba(13, 26, 51, 1); --collection-BG-100: rgba(44, 44, 44, 1); --collection-BG-200: rgba(32, 32, 32, 1); --collection-BG-base: rgba(27, 28, 30, 1); --collection-BG-500: #262626; --confirmation-color-CC-l-150: rgba(48, 172, 121, 1); --error-color-EC-l-150: rgba(239, 77, 79, 1); --grey: rgba(250, 250, 250, 1); --heading-m-h4-font-family: "SF Pro Display", Helvetica; --heading-m-h4-font-size: 20px; --heading-m-h4-font-style: normal; --heading-m-h4-font-weight: 500; --heading-m-h4-letter-spacing: 0px; --heading-m-h4-line-height: 24px; --heading-m-h5-font-family: "SF Pro Text", Helvetica; --heading-m-h5-font-size: 18px; --heading-m-h5-font-style: normal; --heading-m-h5-font-weight: 500; --heading-m-h5-letter-spacing: 0px; --heading-m-h5-line-height: 22px; --info-color-IC-base: rgba(58, 112, 226, 1); --info-color-IC-l-150: rgba(88, 133, 230, 1); --neutral-color-grey-1000: rgba(250, 250, 250, 1); --neutral-color-grey-150: rgba(58, 60, 62, 1); --neutral-color-grey-300: #5D5E60; --neutral-color-grey-450: rgba(127, 128, 130, 1); --neutral-color-grey-600: rgba(162, 163, 164, 1); --neutral-color-grey-750: rgba(197, 197, 198, 1); --neutral-color-grey-900: rgba(232, 232, 232, 1); --neutral-color-grey-950: rgba(243, 243, 244, 1); --neutral-color-grey-1000: #FAFAFA; --paragraph-m-p2-font-family: "SF Pro Text", Helvetica; --paragraph-m-p2-font-size: 14px; --paragraph-m-p2-font-style: normal; --paragraph-m-p2-font-weight: 500; --paragraph-m-p2-letter-spacing: 0px; --paragraph-m-p2-line-height: 20px; --paragraph-m-p3-font-family: "SF Pro Text", Helvetica; --paragraph-m-p3-font-size: 12px; --paragraph-m-p3-font-style: normal; --paragraph-m-p3-font-weight: 500; --paragraph-m-p3-letter-spacing: 0px; --paragraph-m-p3-line-height: 18px; --paragraph-r-p1-font-family: "SF Pro Text", Helvetica; --paragraph-r-p1-font-size: 16px; --paragraph-r-p1-font-style: normal; --paragraph-r-p1-font-weight: 400; --paragraph-r-p1-letter-spacing: 0px; --paragraph-r-p1-line-height: 24px; --paragraph-r-p2-font-family: "SF Pro Text", Helvetica; --paragraph-r-p2-font-size: 14px; --paragraph-r-p2-font-style: normal; --paragraph-r-p2-font-weight: 400; --paragraph-r-p2-letter-spacing: 0px; --paragraph-r-p2-line-height: 20px; --paragraph-r-p3-font-family: "SF Pro Text", Helvetica; --paragraph-r-p3-font-size: 12px; --paragraph-r-p3-font-style: normal; --paragraph-r-p3-font-weight: 400; --paragraph-r-p3-letter-spacing: 0px; --paragraph-r-p3-line-height: 18px; --paragraph-SB-p2-font-family: "SF Pro Text", Helvetica; --paragraph-SB-p2-font-size: 14px; --paragraph-SB-p2-font-style: normal; --paragraph-SB-p2-font-weight: 400; --paragraph-SB-p2-letter-spacing: 0px; --paragraph-SB-p2-line-height: 20px; --warning-color-1-WC-l-150: rgba(254, 170, 50, 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-neutral-color-mode="light"] { --neutral-color-grey-1000: rgba(250, 250, 250, 1); --neutral-color-grey-900: rgba(232, 232, 232, 1); --neutral-color-grey-950: rgba(243, 243, 244, 1); } [data-neutral-color-mode="dark"] { --neutral-color-grey-1000: rgba(44, 44, 44, 1); --neutral-color-grey-900: rgba(93, 94, 96, 1); --neutral-color-grey-950: rgba(44, 44, 44, 1); }