/* * Orbit demos — theme layer * ---------------------------------------------------------------------------- * Religiously sourced from the Highsoft design tokens, pulled from jsDelivr at * runtime (NOT bundled — keeps the GPL-3.0 token package out of any product * bundle). The @import must stay first. * * Token families consumed here: * --primitives-{neutral,brand,success,attention,danger}-{0..1000} * --shadow-size-* --border_radius-size-* --padding-size-* --item-spacing-* * --typography-size-* --typography-weight-* --headings-* * --brand_{light,dark}-chart-color1..8 / -background-color / -text-color * * Everything in the demo CSS references the *semantic* layer below * (--ds-*), and the semantic layer references the raw tokens. That's the only * place light/dark differ. */ @import url('https://cdn.jsdelivr.net/npm/highsoft-design-tokens@2.10.0/dist/css/tokens.css'); /* ---- Semantic layer ------------------------------------------------------ * Light/dark is driven by the STANDARD Highcharts signal: the `.highcharts-light` * / `.highcharts-dark` class on a parent (set on by the theme toggle). * Highcharts 13 and the Orbit toolbar already key their `--highcharts-*` * variables off this class, so the charts and Orbit UI adapt out of the box. We * key our own chrome (--ds-*) and `color-scheme` off the same class, so ONE * signal themes the chrome, the charts and the Orbit UI together — no JS colour * overrides, no per-chart rebuild. */ :root, .highcharts-light { color-scheme: light; --ds-bg: var(--primitives-neutral-50); --ds-surface: var(--primitives-neutral-0); --ds-surface-2: var(--primitives-neutral-25); --ds-surface-inset: var(--primitives-neutral-50); --ds-text: var(--primitives-neutral-900); --ds-text-muted: var(--primitives-neutral-500); --ds-text-faint: var(--primitives-neutral-400); --ds-border: var(--primitives-neutral-100); --ds-border-strong: var(--primitives-neutral-200); --ds-accent: var(--primitives-brand-600); --ds-accent-hover: var(--primitives-brand-700); --ds-accent-weak: var(--primitives-brand-100); --ds-accent-text: var(--primitives-brand-700); --ds-on-accent: var(--primitives-neutral-0); --ds-success: var(--primitives-success-600); --ds-success-weak: var(--primitives-success-50); --ds-danger: var(--primitives-danger-600); --ds-danger-weak: var(--primitives-danger-50); --ds-attention: var(--primitives-attention-600); /* radii / shadow / motion straight from tokens (theme-agnostic) */ --ds-radius-sm: var(--border_radius-size-4); --ds-radius: var(--border_radius-size-8); --ds-radius-lg: var(--border_radius-size-16); --ds-shadow: var(--shadow-size-100); --ds-shadow-md: var(--shadow-size-200); --ds-shadow-lg: var(--shadow-size-300); --ds-motion: var(--animations-fade-fast); /* spacing scale (tokenised) */ --ds-space-1: var(--padding-size-2); --ds-space-2: var(--padding-size-4); --ds-space-3: var(--padding-size-8); --ds-space-4: var(--item-spacing-600); /* 12px */ --ds-space-5: var(--padding-size-16); --ds-space-6: var(--item-spacing-900); /* 24px */ --ds-space-8: var(--padding-size-32); /* type */ --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ds-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --ds-fs-xs: var(--typography-size-75); /* 12px */ --ds-fs-sm: var(--typography-size-100); /* 14px */ --ds-fs-md: var(--typography-size-200); /* 16px */ --ds-fs-lg: var(--typography-size-400); /* 20px */ --ds-fw-normal: var(--typography-weight-normal); --ds-fw-medium: var(--typography-weight-medium); --ds-fw-bold: var(--headings-weight-bold); } /* Dark — the .highcharts-dark class (same convention Highcharts + Orbit use). */ .highcharts-dark { color-scheme: dark; --ds-bg: var(--primitives-neutral-950); --ds-surface: var(--primitives-neutral-850); --ds-surface-2: var(--primitives-neutral-800); --ds-surface-inset: var(--primitives-neutral-900); --ds-text: var(--primitives-neutral-50); --ds-text-muted: var(--primitives-neutral-300); --ds-text-faint: var(--primitives-neutral-400); --ds-border: var(--primitives-neutral-800); --ds-border-strong: var(--primitives-neutral-700); --ds-accent: var(--primitives-brand-400); --ds-accent-hover: var(--primitives-brand-300); --ds-accent-weak: var(--primitives-brand-900); --ds-accent-text: var(--primitives-brand-300); --ds-on-accent: var(--primitives-neutral-1000); --ds-success: var(--primitives-success-400); --ds-success-weak: var(--primitives-success-900); --ds-danger: var(--primitives-danger-400); --ds-danger-weak: var(--primitives-danger-900); --ds-attention: var(--primitives-attention-400); } /* ---- Reset / base ------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--ds-font); font-size: var(--ds-fs-md); line-height: var(--typography-lineHeight-text); color: var(--ds-text); background: var(--ds-bg); -webkit-font-smoothing: antialiased; transition: background var(--ds-motion), color var(--ds-motion); } h1, h2, h3, h4 { margin: 0; font-weight: var(--ds-fw-bold); line-height: var(--headings-lineHeight-text); letter-spacing: -0.01em; } p { margin: 0; } a { color: var(--ds-accent); text-decoration: none; } a:hover { color: var(--ds-accent-hover); text-decoration: underline; } code, pre, kbd { font-family: var(--ds-mono); } :not(pre) > code { background: var(--ds-surface-inset); border: 1px solid var(--ds-border); padding: 0.05em 0.4em; border-radius: var(--ds-radius-sm); font-size: 0.85em; color: var(--ds-text); } :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }