/* ───────────────────────────────────────────────────────────────────── GENERATED — copied from we-energy-design/tokens.css by scripts/sync-design.sh Do not edit here. Edit the source and re-run the script. ───────────────────────────────────────────────────────────────────── */ /* ============================================================================= WE-Energy · Design Tokens Source of truth for colour, type, space, radius, elevation and motion. Framework-agnostic: consumed by Django templates, React, email and Figma. Contrast: every text/background pair below meets WCAG 2.2 AA (verified). ----------------------------------------------------------------------------- Layers: 1. Primitives --we-blue-500, --we-grey-200 ... (raw scale, never flip) 2. Semantic --we-bg, --we-text, --we-primary ... (role-based, theme-flip) Style components through the SEMANTIC tokens only. ========================================================================== */ :root { /* ---- Primitive · Current blue (brand, from the logo #4578AD) ------------ */ --we-blue-50: #eef4fa; --we-blue-100: #d6e5f2; --we-blue-200: #b0cbe3; --we-blue-300: #84acd1; --we-blue-400: #5e8fbe; --we-blue-500: #4578ad; /* brand blue — headings >=24px & non-text only */ --we-blue-600: #3a6390; /* interactive blue — links & body-size text */ --we-blue-700: #314f72; --we-blue-800: #2b4159; --we-blue-900: #26374a; --we-blue-950: #18232f; /* ---- Primitive · Solar sand (accent, from the logo #FAE398) ------------- */ --we-sand-50: #fefbee; --we-sand-100: #fdf3cf; --we-sand-200: #fae398; /* brand accent — fills/highlights, never text/white */ --we-sand-300: #f5d06a; --we-sand-400: #efb93f; --we-sand-500: #e19e1c; --we-sand-600: #c07e15; --we-sand-700: #985e16; --we-sand-800: #7c4c18; /* "ink sand" — sand that is safe as text on light */ --we-sand-900: #683f19; --we-sand-950: #3c220a; /* ---- Primitive · Slate grey (blue-biased neutral) ---------------------- */ --we-grey-0: #ffffff; --we-grey-25: #fbfaf6; /* warm paper — the light ground */ --we-grey-50: #f3f5f7; --we-grey-100: #e7ebef; --we-grey-200: #d3dae1; --we-grey-300: #b2bdc7; --we-grey-400: #8896a3; --we-grey-500: #657482; --we-grey-600: #4c5a66; --we-grey-700: #39454f; --we-grey-800: #28313a; --we-grey-900: #1a222a; --we-grey-950: #0e141a; --we-ink: #101820; /* darkest text / the dark ground */ /* ---- Primitive · Semantic hues --------------------------------------- */ --we-positive-600: #1f7a57; --we-positive-400: #57b08d; --we-positive-tint: #e4f1eb; --we-caution-600: #9a570e; --we-caution-400: #e0954a; --we-caution-tint: #fbecd9; --we-critical-600: #b23a32; --we-critical-400: #e27d74; --we-critical-tint: #f8e4e2; /* ---- Type ----------------------------------------------------------- */ --we-font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --we-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --we-font-display: var(--we-font-sans); --we-font-logo: "56th Street", var(--we-font-display); /* licensed · lockups only */ --we-text-2xs: 0.6875rem; --we-lh-2xs: 1.45; /* 11px · mono micro-labels */ --we-text-xs: 0.75rem; --we-lh-xs: 1.5; /* 12px */ --we-text-sm: 0.875rem; --we-lh-sm: 1.55; /* 14px */ --we-text-base: 1rem; --we-lh-base:1.65; /* 16px · body */ --we-text-md: 1.125rem; --we-lh-md: 1.6; /* 18px · lead */ --we-text-lg: 1.375rem; --we-lh-lg: 1.35; /* 22px */ --we-text-xl: 1.75rem; --we-lh-xl: 1.25; /* 28px */ --we-text-2xl: 2.25rem; --we-lh-2xl: 1.15; /* 36px */ --we-text-3xl: 3rem; --we-lh-3xl: 1.08; /* 48px */ --we-text-4xl: 3.75rem; --we-lh-4xl: 1.04; /* 60px */ --we-tracking-tight: -0.02em; --we-tracking-normal: 0; --we-tracking-label: 0.08em; /* uppercase mono labels */ --we-weight-regular: 400; --we-weight-medium: 500; --we-weight-semibold: 600; --we-weight-bold: 700; /* ---- Space (4px base) --------------------------------------------- */ --we-space-1: 0.25rem; --we-space-2: 0.5rem; --we-space-3: 0.75rem; --we-space-4: 1rem; --we-space-5: 1.5rem; --we-space-6: 2rem; --we-space-7: 3rem; --we-space-8: 4rem; --we-space-9: 6rem; --we-space-10: 8rem; --we-measure: 68ch; /* max width for running text */ /* ---- Radius (friendly, not pill-everything) --------------------- */ --we-radius-xs: 3px; --we-radius-sm: 5px; --we-radius-md: 8px; --we-radius-lg: 12px; --we-radius-xl: 18px; --we-radius-2xl: 28px; --we-radius-full: 999px; --we-radius-control: var(--we-radius-md); /* buttons, inputs */ /* ---- Elevation (cool-tinted) ----------------------------------- */ --we-shadow-sm: 0 1px 2px rgba(14,20,26,.06), 0 1px 1px rgba(14,20,26,.04); --we-shadow-md: 0 4px 12px -2px rgba(14,20,26,.10), 0 2px 6px -2px rgba(14,20,26,.06); --we-shadow-lg: 0 12px 32px -8px rgba(14,20,26,.16), 0 6px 12px -6px rgba(14,20,26,.08); /* ---- Motion --------------------------------------------------- */ --we-ease: cubic-bezier(.2, 0, 0, 1); --we-ease-out: cubic-bezier(.16, 1, .3, 1); --we-dur-1: 120ms; --we-dur-2: 200ms; --we-dur-3: 320ms; /* ===================================================================== SEMANTIC TOKENS — light (the bare :root defines the complete palette) ================================================================== */ --we-bg: var(--we-grey-25); --we-bg-raised: var(--we-grey-0); --we-bg-sunken: var(--we-grey-50); --we-bg-inset: var(--we-grey-100); --we-bg-invert: var(--we-ink); --we-border: var(--we-grey-200); /* dividers, card edges */ --we-border-strong: var(--we-grey-300); --we-border-field: #7c8794; /* control boundary · >=3:1 */ --we-text: var(--we-ink); --we-text-muted: var(--we-grey-600); --we-text-subtle: var(--we-grey-500); --we-text-onfill: var(--we-grey-0); --we-text-invert: var(--we-grey-25); --we-primary: var(--we-blue-600); --we-primary-hover: var(--we-blue-700); --we-primary-text: var(--we-grey-0); --we-primary-soft: var(--we-blue-50); /* tinted primary surface */ --we-brand-blue: var(--we-blue-500); /* display / decorative only */ --we-accent: var(--we-sand-200); /* fills, underlines, highlights */ --we-accent-text: var(--we-sand-800); /* "sand" when it must be text */ --we-link: var(--we-blue-600); --we-link-hover: var(--we-blue-700); --we-focus: var(--we-blue-500); /* focus ring */ --we-positive: var(--we-positive-600); --we-positive-bg: var(--we-positive-tint); --we-caution: var(--we-caution-600); --we-caution-bg: var(--we-caution-tint); --we-critical: var(--we-critical-600); --we-critical-bg: var(--we-critical-tint); --we-info: var(--we-blue-600); --we-info-bg: var(--we-blue-50); /* Duotone icons — consumers may override these two per context */ --we-icon: currentColor; --we-icon-accent: var(--we-brand-blue); color-scheme: light; } /* ========================================================================= DARK — OS preference, unless an explicit light choice overrides it ====================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --we-bg: var(--we-ink); --we-bg-raised: #17212b; --we-bg-sunken: #0b1116; --we-bg-inset: #1e2a35; --we-bg-invert: var(--we-grey-25); --we-border: #2b3742; --we-border-strong: #3b4a57; --we-border-field: #55697a; --we-text: #edefec; --we-text-muted: var(--we-grey-300); --we-text-subtle: var(--we-grey-400); --we-text-onfill: var(--we-blue-950); --we-text-invert: var(--we-ink); --we-primary: var(--we-blue-300); --we-primary-hover: var(--we-blue-200); --we-primary-text: #0a0f14; --we-primary-soft: #1a2a3a; --we-brand-blue: var(--we-blue-400); --we-accent: var(--we-sand-200); --we-accent-text: var(--we-sand-200); /* sand is text-safe on dark */ --we-link: var(--we-blue-300); --we-link-hover: var(--we-blue-200); --we-focus: var(--we-blue-300); --we-positive: var(--we-positive-400); --we-positive-bg: #12281f; --we-caution: var(--we-caution-400); --we-caution-bg: #2e2213; --we-critical: var(--we-critical-400); --we-critical-bg: #2e1a18; --we-info: var(--we-blue-300); --we-info-bg: #14202c; --we-icon-accent: var(--we-blue-300); --we-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --we-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.35); --we-shadow-lg: 0 12px 32px -8px rgba(0,0,0,.6), 0 6px 12px -6px rgba(0,0,0,.4); color-scheme: dark; } } /* ========================================================================= DARK — explicit toggle wins in the other direction too ====================================================================== */ :root[data-theme="dark"] { --we-bg: var(--we-ink); --we-bg-raised: #17212b; --we-bg-sunken: #0b1116; --we-bg-inset: #1e2a35; --we-bg-invert: var(--we-grey-25); --we-border: #2b3742; --we-border-strong: #3b4a57; --we-border-field: #55697a; --we-text: #edefec; --we-text-muted: var(--we-grey-300); --we-text-subtle: var(--we-grey-400); --we-text-onfill: var(--we-blue-950); --we-text-invert: var(--we-ink); --we-primary: var(--we-blue-300); --we-primary-hover: var(--we-blue-200); --we-primary-text: #0a0f14; --we-primary-soft: #1a2a3a; --we-brand-blue: var(--we-blue-400); --we-accent: var(--we-sand-200); --we-accent-text: var(--we-sand-200); --we-link: var(--we-blue-300); --we-link-hover: var(--we-blue-200); --we-focus: var(--we-blue-300); --we-positive: var(--we-positive-400); --we-positive-bg: #12281f; --we-caution: var(--we-caution-400); --we-caution-bg: #2e2213; --we-critical: var(--we-critical-400); --we-critical-bg: #2e1a18; --we-info: var(--we-blue-300); --we-info-bg: #14202c; --we-icon-accent: var(--we-blue-300); --we-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --we-shadow-md: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 6px -2px rgba(0,0,0,.35); --we-shadow-lg: 0 12px 32px -8px rgba(0,0,0,.6), 0 6px 12px -6px rgba(0,0,0,.4); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --we-dur-1: 0ms; --we-dur-2: 0ms; --we-dur-3: 0ms; } }