/* * Croator Webstudio Addons — design tokens. * * The source .dc.html files set bare custom properties (--tx, --bd, --acc …) on a root * element from JavaScript. Bare names like that are very likely to collide with a theme, * so everything here is prefixed --cws-. * * Values are lifted verbatim from the THEMES map in the design sources. * * Resolution order, lowest to highest: * 1. :root light palette, the default * 2. @media (prefers-color-scheme: dark) OS preference, only when no explicit choice * 3. [data-croator-theme="light"|"dark"] explicit choice, always wins * * Dark mode is currently switched off (the croator_ws_dark_mode filter, default false): * then always carries data-croator-theme="light", so 2 and the dark half of 3 * never apply. The dark values stay here for when it is switched back on. */ :root { --cws-pg: #ffffff; --cws-s1: #f7f8fa; --cws-card: #ffffff; --cws-tx: #0e1116; --cws-tx2: #4a5461; --cws-tx3: #8a94a0; --cws-bd: #eaedf1; --cws-tint: #fbecea; --cws-acc: #c93a2e; --cws-panel: #0e1116; /* Fixed brand colours — identical in both themes in the source. */ --cws-brand: #db4437; --cws-brand-hover: #b8352a; /* Placeholder fill behind an image that has not loaded or is not set. */ --cws-media-bg: #eef1f4; /* Hairline used between the homepage stat cells. */ --cws-rule: #e1e5ea; --cws-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --cws-font-display: "Space Grotesk", "Manrope", -apple-system, system-ui, sans-serif; } /* * The OS preference only applies when the visitor has not made an explicit choice. * :not([data-croator-theme]) keeps an explicit "light" from being overridden here. */ @media (prefers-color-scheme: dark) { :root:not([data-croator-theme]) { --cws-pg: #0e1116; --cws-s1: #12161c; --cws-card: #1a2029; --cws-tx: #f2f4f7; --cws-tx2: #a8b0ba; --cws-tx3: #6c757f; --cws-bd: #272e37; --cws-tint: rgba(219, 68, 55, 0.16); --cws-acc: #f0796b; --cws-panel: #06090d; --cws-media-bg: #272e37; --cws-rule: #272e37; } } [data-croator-theme="dark"] { --cws-pg: #0e1116; --cws-s1: #12161c; --cws-card: #1a2029; --cws-tx: #f2f4f7; --cws-tx2: #a8b0ba; --cws-tx3: #6c757f; --cws-bd: #272e37; --cws-tint: rgba(219, 68, 55, 0.16); --cws-acc: #f0796b; --cws-panel: #06090d; --cws-media-bg: #272e37; --cws-rule: #272e37; } /* * Explicit light, needed so a visitor can opt back out of an OS dark preference. * Repeats :root rather than inheriting it, because the media query above would * otherwise have already won on cascade order. */ [data-croator-theme="light"] { --cws-pg: #ffffff; --cws-s1: #f7f8fa; --cws-card: #ffffff; --cws-tx: #0e1116; --cws-tx2: #4a5461; --cws-tx3: #8a94a0; --cws-bd: #eaedf1; --cws-tint: #fbecea; --cws-acc: #c93a2e; --cws-panel: #0e1116; --cws-media-bg: #eef1f4; --cws-rule: #e1e5ea; }