:root { --h1-font-family: "Lato", Helvetica; --h1-font-weight: 700; --h1-font-size: 64px; --h1-letter-spacing: -1.28px; --h1-line-height: 74px; --h1-font-style: normal; --body-font-family: "Lato", Helvetica; --body-font-weight: 400; --body-font-size: 16px; --body-letter-spacing: 0.5px; --body-line-height: 24px; --body-font-style: normal; --h2-font-family: "Lato", Helvetica; --h2-font-weight: 700; --h2-font-size: 54px; --h2-letter-spacing: 0px; --h2-line-height: 62px; --h2-font-style: normal; --h3-font-family: "Lato", Helvetica; --h3-font-weight: 700; --h3-font-size: 44px; --h3-letter-spacing: 0px; --h3-line-height: 50px; --h3-font-style: normal; --h4-font-family: "Lato", Helvetica; --h4-font-weight: 700; --h4-font-size: 34px; --h4-letter-spacing: 0px; --h4-line-height: 40px; --h4-font-style: normal; --h5-font-family: "Lato", Helvetica; --h5-font-weight: 700; --h5-font-size: 24px; --h5-letter-spacing: 0px; --h5-line-height: 30px; --h5-font-style: normal; --h6-font-family: "Lato", Helvetica; --h6-font-weight: 400; --h6-font-size: 22px; --h6-letter-spacing: 0.5px; --h6-line-height: 28px; --h6-font-style: normal; --h-mobile-font-family: "Lato", Helvetica; --h-mobile-font-weight: 700; --h-mobile-font-size: 45px; --h-mobile-letter-spacing: 0px; --h-mobile-line-height: 52px; --h-mobile-font-style: normal; --h6-mobile-font-family: "Lato", Helvetica; --h6-mobile-font-weight: 400; --h6-mobile-font-size: 20px; --h6-mobile-letter-spacing: 0.5px; --h6-mobile-line-height: 28px; --h6-mobile-font-style: normal; --h4-mobile-font-family: "Lato", Helvetica; --h4-mobile-font-weight: 400; --h4-mobile-font-size: 34px; --h4-mobile-letter-spacing: 0px; --h4-mobile-line-height: 40px; --h4-mobile-font-style: normal; --h3-mobile-font-family: "Lato", Helvetica; --h3-mobile-font-weight: 700; --h3-mobile-font-size: 34px; --h3-mobile-letter-spacing: 0px; --h3-mobile-line-height: 40px; --h3-mobile-font-style: normal; --NCSC-body-font-family: "Lato", Helvetica; --NCSC-body-font-weight: 400; --NCSC-body-font-size: 16px; --NCSC-body-letter-spacing: 0px; --NCSC-body-line-height: 30px; --NCSC-body-font-style: normal; --variable-collection-maroon: rgba(102, 36, 128, 1); --variable-collection-SME-purple: rgba(126, 87, 197, 1); --variable-collection-purple: rgba(100, 87, 197, 1); --variable-collection-core-dk-blue: rgba(0, 11, 140, 1); --variable-collection-EU-blue: rgba(40, 83, 213, 1); --variable-collection-NCSC-navy: rgba(10, 34, 64, 1); --variable-collection-grey-navy: rgba(81, 93, 117, 1); --variable-collection-LILAC: rgba(195, 163, 251, 1); --variable-collection-color: rgba(5, 162, 130, 1); --variable-collection-WHITE: rgba(255, 255, 255, 1); --variable-collection-RED: rgba(232, 80, 91, 1); --variable-collection-GREY: rgba(223, 223, 223, 1); --system-colors-miscellaneous-sidebar-fill-selected: 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-system-colors-mode="light"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(255, 255, 255, 1); } [data-system-colors-mode="dark"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(142, 142, 147, 0.25); } [data-system-colors-mode="dark-elevated"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(142, 142, 147, 0.25); } [data-system-colors-mode="IC-light"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(255, 255, 255, 1); } [data-system-colors-mode="IC-dark"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(144, 144, 153, 0.3); } [data-system-colors-mode="IC-dark-elevated"] { --system-colors-miscellaneous-sidebar-fill-selected: rgba(144, 144, 153, 0.3); }