@ojiepermana/angular 22.1.11 → 22.1.12

package/theme/styles/css/base/tokens.css

@@ -0,0 +1,361 @@
+/**
+ * Default theme color, style, and layout tokens.
+ */
+@layer tokens {
+  :root {
+    --highlight: 0 0% 64%;
+    --highlight-border-alpha: 0.7;
+    --highlight-background-alpha: 0.7;
+
+    /* App/layout-frame surface — CONSTANT white (near-black in dark). The
+     * theme-color/theme-neutral axes deliberately do NOT emit this token; the
+     * FluxUI-style tint lives on --layout-canvas (the shell behind the layout
+     * frame) instead. */
+    --background: 0 0% 100%;
+    /* Shell canvas behind the layout frame. Tinted per theme-neutral (strong)
+     * and theme-color (fallback) by the generated palettes. */
+    --layout-canvas: 0 0% 95%;
+    --surface: 0 0% 89.8%;
+    --surface-foreground: 0 0% 12%;
+    --foreground: 0 0% 12%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 12%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 12%;
+
+    --muted: 0 0% 94%;
+    --muted-foreground: 0 0% 38%;
+
+    --border: 0 0% 82%;
+    --input: 0 0% 82%;
+
+    /* Surface-grid line for the base neutral. Explicit (not var(--border)) so the
+     * grid keeps the same tonal contract as every generated neutral. */
+    --layout-grid-line: 0 0% 82%;
+    /* LIGHTNESS of the `grid` surface LINE tier. Pattern hue and saturation come
+     * from the achromatic base neutral or the active family on non-base neutrals;
+     * this tonal anchor stays at ~82% in light mode. */
+    --layout-grid-l: 82%;
+
+    /* `grid-line` surface highlight LIGHTNESS. The glow (pattern HIGHLIGHT tier,
+     * base/theme.css) uses this tonal anchor for the base neutral or the active
+     * neutral family.
+     * Medium-dark in light mode so the mosaic reads as soft darker lines on a
+     * light surface; inverts to near-white in dark (dark block). Global
+     * faintness lives in --layout-grid-highlight-opacity (base/theme.css). */
+    --layout-grid-highlight-l: 45%;
+
+    /* Base accent = near-black neutral (FluxUI "base"); inverts to near-white in
+     * dark mode (see :root[data-mode='dark'] below). Accent palettes
+     * (theme-color) override these at higher specificity. */
+    --primary: 0 0% 10%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 0 0% 95%;
+    --accent-foreground: 0 0% 14%;
+    --secondary: 0 0% 95%;
+    --secondary-foreground: 0 0% 18%;
+    --ring: 0 0% 16%;
+
+    /* Brand identity color — set by the consumer via ThemeBrandService
+     * (provideUiTheme({ brand }) or setBrand()). Concrete (not var(--primary))
+     * so the theme-color='brand' preset never forms a var() cycle. Defaults to
+     * the base accent and inverts in dark mode. */
+    --brand: 0 0% 10%;
+    --brand-foreground: 0 0% 100%;
+
+    /* Tailwind's stock `rounded-md`, matching the theme-radius='md' default. */
+    --radius-base: 0.375rem;
+    --radius: var(--radius-base);
+
+    --border-width-base: 1px;
+    --border-width: var(--border-width-base);
+
+    /* Concrete values live in the *-base primitives; --shadow-* and
+     * --theme-shadow-* are aliases. Never alias --theme-shadow-* back to
+     * --shadow-* — the Tailwind @theme mapping re-emits
+     * --shadow-*: var(--theme-shadow-*) in the later `theme` layer, which
+     * turns that into a var() cycle and invalidates both tokens. */
+    --shadow-base: 0 1px 0 0 hsl(0 0% 12% / 0.08);
+    --shadow-md-base: 0 8px 18px -14px hsl(0 0% 12% / 0.24);
+    --shadow-lg-base: 0 18px 36px -28px hsl(0 0% 12% / 0.34);
+    --shadow-xl-base: 0 24px 48px -36px hsl(0 0% 12% / 0.4);
+    --shadow-sm: var(--shadow-base);
+    --shadow-md: var(--shadow-md-base);
+    --shadow-lg: var(--shadow-lg-base);
+    --shadow-xl: var(--shadow-xl-base);
+
+    --theme-shadow-sm: var(--shadow-base);
+    --theme-shadow: 0 2px 4px -2px hsl(0 0% 12% / 0.14);
+    --theme-shadow-md: var(--shadow-md-base);
+    --theme-shadow-lg: var(--shadow-lg-base);
+    --theme-shadow-xl: var(--shadow-xl-base);
+    --shadow: var(--theme-shadow);
+
+    --theme-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    --theme-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --font-sans: var(--theme-font-sans);
+    --font-mono: var(--theme-font-mono);
+    --font-weight-bold: 600;
+    --theme-text-scale: 1;
+    --font-size-base: 1rem;
+    --line-height-base: 1.5;
+    /* Derived, not fixed: this is the middle rung of the control height ladder
+     * and it has to move with the theme-space density axis like every other
+     * rung. Nine units, which is 2.25rem at the 0.25rem default, so the value
+     * this line used to hold is exactly what it still produces. Redeclaring it
+     * as a literal here is what kept `h-control-md` frozen while the rest of the
+     * ladder followed the axis. */
+    --control-height-base: calc(var(--spacing-base) * 9);
+    --nav-font-family: var(--font-sans);
+    /* Item labels — a dedicated 13px tier between --text-xs and --text-sm, with
+     * slightly negative tracking and a mid weight. Weight/tracking are tokens so
+     * the whole tier can be re-tuned without touching components. */
+    --nav-text-size: calc(var(--font-size-base) * 0.8125);
+    --nav-text-line-height: 1.4;
+    --nav-text-weight: 450;
+    --nav-text-tracking: -0.006em;
+    --nav-heading-font-family: var(--font-sans);
+    /* Section/group headings — a distinct micro-label tier *below* item labels:
+     * smaller (11px), uppercase, heavier weight, restrained tracking. Keeping it
+     * smaller than --nav-text-size is what gives the sidebar a clear hierarchy. */
+    --nav-heading-size: var(--text-2xs-plus);
+    --nav-heading-line-height: var(--text-2xs-plus--line-height);
+    --nav-heading-weight: 600;
+    --nav-heading-letter-spacing: 0.08em;
+    --nav-badge-font-family: var(--font-sans);
+    /* Badges/counters — compact pill tier (11px), aligned with the heading tier. */
+    --nav-badge-size: var(--text-2xs-plus);
+    --nav-badge-line-height: var(--text-2xs-plus--line-height);
+    --nav-badge-weight: 500;
+    /* Item subtitles/descriptions — a quiet 12px tier under labels. */
+    --nav-subtitle-size: calc(var(--font-size-base) * 0.75);
+    --nav-subtitle-line-height: 1.35;
+
+    /* Shared opacity for section chrome: Page and Navigation headers/footers,
+     * flyout/panel frames, entry borders, and tree rails. */
+    --section-border-opacity: 0.666;
+
+    /* Navigation geometry — ONE proportional system for every nav surface
+     * (sidebar, dockbar, navbar, flyout, entry grid). Icons are naked glyphs;
+     * derived tokens keep alignment exact: --nav-indent places a child's icon
+     * under its parent's label, --nav-rail-offset places tree rails under the
+     * parent icon's center. Heights/gaps ride --spacing-base so the whole nav
+     * rescales with the theme-space density axis. */
+    --nav-icon-size: 1.125rem; /* inline glyph beside a label */
+    --nav-icon-size-rail: 1.25rem; /* icon-only rail/dock glyph */
+    --nav-icon-size-sub: 1rem; /* chevrons + secondary glyphs */
+    --nav-item-height: calc(var(--spacing-base) * 8); /* 32px @ normal density */
+    --nav-rail-item-size: calc(var(--spacing-base) * 10); /* 40px icon-only button */
+    --nav-item-gap: calc(var(--spacing-base) * 2); /* icon ↔ label */
+    --nav-item-padding-x: calc(var(--spacing-base) * 3);
+    --nav-indent: calc(var(--nav-icon-size) + var(--nav-item-gap));
+    --nav-rail-offset: calc(var(--nav-item-padding-x) + var(--nav-icon-size) / 2);
+    --nav-entry-box-size: calc(var(--spacing-base) * 9); /* entry-grid icon chip */
+    --letter-spacing: 0;
+    --spacing-base: 0.25rem;
+    --space-unit: var(--spacing-base);
+    /* Shell bar height for the navigation header/footer/navbar AND the page
+     * header/footer. Spacing-based (12 × --spacing-base = 3rem @ normal) so it
+     * tracks the theme-space density axis in lockstep with h-12/top-12
+     * utilities — the nav bars and page bars stay border-aligned at every
+     * density, not just the default. */
+    --layout-topbar-height: calc(var(--spacing-base) * 12);
+
+    --layout-shell-padding: clamp(1rem, 2vw, 2rem);
+    --layout-frame-radius: var(--radius-lg);
+    --layout-frame-shadow: var(--shadow-sm);
+    --layout-sidebar-width: 17.5rem;
+    --layout-sidebar-collapsed-width: 4rem;
+    --layout-aside-width: 15rem;
+    --container-base: 80rem;
+    --layout-main-max-width: var(--container-base);
+    --layout-vertical-shell-max-width: calc(
+      var(--layout-sidebar-width) + var(--layout-main-max-width)
+    );
+    --layout-empty-max-width: 24rem;
+    --layout-empty-padding: clamp(1.5rem, 4vw, 3rem);
+    --layout-topbar-inline: 0.875rem;
+    --layout-logo-mark-size: 2rem;
+
+    /* Desktop shell geometry (@ojiepermana/angular/theme/shell), active when the
+     * app owns the OS window (<Shell mode="desktop">). --shell-bar-height is the
+     * single titlebar thickness knob and rides --spacing-base like
+     * --layout-topbar-height, so window chrome tracks the theme-space density
+     * axis. --shell-traffic-light-inset reserves the leading run macOS keeps
+     * drawing its native window buttons into on a decoration-less window. */
+    --shell-bar-height: calc(var(--spacing-base) * 9);
+    --shell-bar-inline: calc(var(--spacing-base) * 2);
+    --shell-bar-gap: calc(var(--spacing-base) * 1);
+    --shell-control-size: calc(var(--spacing-base) * 7);
+    --shell-traffic-light-inset: 4.75rem;
+    /* Diameter of one macOS traffic light — ~13.1px, a little over the 12px the OS
+     * itself draws. The app's own lights sit in a titlebar the user can mis-click, so
+     * they get a slightly larger target than the window server's, without growing
+     * enough to look oversized next to a real macOS window. */
+    --shell-traffic-light-size: calc(0.75rem * 1.0925);
+    /* `frame='modern'`: how far the inset app sits from the window edge. Rides
+     * --spacing-base (3 units = 0.75rem at normal density), so the gap tracks the
+     * theme-space axis like the rest of the shell geometry. */
+    --shell-frame-inset: calc(var(--spacing-base) * 3);
+    /* Corner radius of the app inside a desktop window. Deliberately a fixed 12px
+     * rather than riding --radius-base: this is window geometry, matching what the
+     * OS rounds its own windows to, not a component-styling choice the theme-radius
+     * axis should retune. */
+    --shell-frame-radius: 0.75rem;
+    /* Edge of the app panel inside a desktop window. The full-strength structural
+     * border tier: this is the boundary between the app and the window chrome, the
+     * same weight as a page or nav outer edge. */
+    --shell-frame-border: var(--border);
+
+    /* Titlebar surface. These are the `color='sync'` values: the selected
+     * theme-color is promoted to the shell chrome through the semantic primary
+     * pair. `color='default'` swaps them for the active device's native palette
+     * (see the blocks after the dark theme). */
+    --shell-bar-background: var(--primary);
+    --shell-bar-foreground: var(--primary-foreground);
+    --shell-bar-border: var(--border);
+  }
+
+  :root[data-mode='dark'] {
+    --highlight: 0 0% 64%;
+    --highlight-border-alpha: 0.45;
+    --highlight-background-alpha: 0.55;
+
+    /* Constant near-black (see light block) — the axes tint --layout-canvas. */
+    --background: 0 0% 5%;
+    --layout-canvas: 0 0% 15%;
+    --surface: 0 0% 18%;
+    --surface-foreground: 0 0% 96%;
+    --foreground: 0 0% 96%;
+
+    --card: 0 0% 11%;
+    --card-foreground: 0 0% 96%;
+
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 96%;
+
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 70%;
+
+    --border: 0 0% 24%;
+    --input: 0 0% 24%;
+
+    /* Surface-grid line for the base neutral (dark). See light block. */
+    --layout-grid-line: 0 0% 24%;
+    /* `grid` surface line lightness (dark) — see light block. */
+    --layout-grid-l: 24%;
+
+    /* `grid-line` highlight lightness inverts to near-white so the glow squares
+     * read bright on the dark surface, matching the dark mosaic reference. */
+    --layout-grid-highlight-l: 88%;
+    --layout-grid-highlight-opacity: 0.62;
+
+    /* `matrix` is tinted with the pattern NODE tier, which is bright on dark
+    * (near-white achromatic base node or L78 family hue elsewhere)
+     * — so tone the field down here to keep it as faint behind content as it is
+     * in light mode (see --layout-matrix-opacity in base/theme.css). The
+     * edge-glow accents are raised instead: bright-on-near-black actually
+     * blooms, so the lit digits read as a glow against the dark surface. */
+    --layout-matrix-opacity: 0.24;
+    --layout-matrix-glow-opacity: 0.72;
+
+    /* `circuit` via nodes are tinted with the pattern NODE tier, which is
+     * bright on dark (see the matrix note above) and blooms — so tone the node
+     * layer down here to keep the glints as quiet as they are in light mode
+     * (same treatment as --layout-matrix-opacity). The traces use the LINE tier
+     * (already per-mode), so they need no dark override. */
+    --layout-circuit-node-opacity: 0.3;
+
+    --layout-pattern-node: 0 0% 78%;
+
+    /* Base accent inverts: near-white primary on dark. */
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 0 0% 16%;
+    --accent-foreground: 0 0% 98%;
+    --secondary: 0 0% 18%;
+    --secondary-foreground: 0 0% 96%;
+    --ring: 0 0% 85%;
+
+    --brand: 0 0% 98%;
+    --brand-foreground: 0 0% 12%;
+
+    --shadow-base: 0 1px 0 0 hsl(0 0% 96% / 0.08);
+    --shadow-sm: var(--shadow-base);
+    --theme-shadow-sm: var(--shadow-base);
+
+    --layout-frame-shadow: 0 0 0 1px hsl(var(--border));
+  }
+
+  /*
+   * Native-like titlebar chrome — `<Shell color="default">`.
+   *
+   * `sync` (the default) maps the shell background to the selected Theme color
+   * through --primary, paired with --primary-foreground for readable chrome.
+   * `default` instead paints the real chrome of the active device, for an app that
+   * wants to disappear into its OS: each palette below is that platform's own
+   * titlebar grey, in the same `H S% L%` triplet form as every other token, with a
+   * dark counterpart.
+   *
+   * Scoped to [data-shell-color='default'] on the <Shell> host (and the titlebar
+   * it renders), so it never leaks into the rest of the app. Only desktop devices
+   * appear here — the other modes draw no chrome of their own.
+   */
+  /* Re-declare sync chrome at each shell boundary. Custom properties inherit, so a
+   * nested preview must resolve its own semantic primary pair and structural border
+   * rather than inheriting native chrome from an outer shell. */
+  [data-shell-color='sync'] {
+    --shell-bar-background: var(--primary);
+    --shell-bar-foreground: var(--primary-foreground);
+    --shell-bar-border: var(--border);
+  }
+
+  [data-shell-color='default'][data-shell-device='macos'] {
+    --shell-bar-background: 0 0% 93%;
+    --shell-bar-foreground: 0 0% 20%;
+    --shell-bar-border: 0 0% 80%;
+  }
+
+  [data-shell-color='default'][data-shell-device='windows'] {
+    --shell-bar-background: 0 0% 96%;
+    --shell-bar-foreground: 0 0% 16%;
+    --shell-bar-border: 0 0% 87%;
+  }
+
+  [data-shell-color='default'][data-shell-device='linux'] {
+    --shell-bar-background: 0 0% 92%;
+    --shell-bar-foreground: 0 0% 18%;
+    --shell-bar-border: 0 0% 78%;
+  }
+
+  :root[data-mode='dark'] [data-shell-color='default'][data-shell-device='macos'] {
+    --shell-bar-background: 240 2% 18%;
+    --shell-bar-foreground: 0 0% 90%;
+    --shell-bar-border: 240 2% 26%;
+  }
+
+  :root[data-mode='dark'] [data-shell-color='default'][data-shell-device='windows'] {
+    --shell-bar-background: 0 0% 13%;
+    --shell-bar-foreground: 0 0% 93%;
+    --shell-bar-border: 0 0% 22%;
+  }
+
+  :root[data-mode='dark'] [data-shell-color='default'][data-shell-device='linux'] {
+    --shell-bar-background: 0 0% 19%;
+    --shell-bar-foreground: 0 0% 92%;
+    --shell-bar-border: 0 0% 27%;
+  }
+}
+
+@layer utilities {
+  .border-highlight {
+    border-color: hsl(var(--highlight, var(--border)) / var(--highlight-border-alpha, 0.7));
+  }
+
+  .bg-highlight {
+    background-color: hsl(var(--highlight, var(--border)) / var(--highlight-background-alpha, 0.7));
+  }
+}

package/theme/styles/css/color/amber.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: amber. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='amber'][data-mode='light'] {
+    --foreground: 38 31% 16%;
+    --surface: 38 32% 95%;
+    --surface-foreground: 38 31% 16%;
+    --card: 38 52% 99%;
+    --card-foreground: 38 31% 16%;
+    --popover: 38 52% 99%;
+    --popover-foreground: 38 31% 16%;
+    --muted: 38 28% 95%;
+    --muted-foreground: 38 18% 40%;
+    --border: 38 28% 87%;
+    --input: 38 28% 87%;
+    --primary: 38 92% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 38 55% 94%;
+    --accent-foreground: 38 92% 31%;
+    --secondary: 38 37% 93%;
+    --secondary-foreground: 38 92% 28%;
+    --ring: 38 92% 41%;
+    --highlight: 38 92% 64%;
+  }
+
+  html[theme-color='amber'][data-mode='dark'] {
+    --foreground: 38 14% 96%;
+    --surface: 38 23% 12%;
+    --surface-foreground: 38 14% 96%;
+    --card: 38 28% 9%;
+    --card-foreground: 38 14% 96%;
+    --popover: 38 28% 9%;
+    --popover-foreground: 38 14% 96%;
+    --muted: 38 23% 16%;
+    --muted-foreground: 38 18% 64%;
+    --border: 38 23% 18%;
+    --input: 38 23% 18%;
+    --primary: 38 92% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 38 46% 18%;
+    --accent-foreground: 38 74% 80%;
+    --secondary: 38 37% 18%;
+    --secondary-foreground: 38 64% 82%;
+    --ring: 38 92% 58%;
+    --highlight: 38 92% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='amber']:not([data-mode='light']) {
+      --foreground: 38 14% 96%;
+      --surface: 38 23% 12%;
+      --surface-foreground: 38 14% 96%;
+      --card: 38 28% 9%;
+      --card-foreground: 38 14% 96%;
+      --popover: 38 28% 9%;
+      --popover-foreground: 38 14% 96%;
+      --muted: 38 23% 16%;
+      --muted-foreground: 38 18% 64%;
+      --border: 38 23% 18%;
+      --input: 38 23% 18%;
+      --primary: 38 92% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 38 46% 18%;
+      --accent-foreground: 38 74% 80%;
+      --secondary: 38 37% 18%;
+      --secondary-foreground: 38 64% 82%;
+      --ring: 38 92% 58%;
+      --highlight: 38 92% 58%;
+    }
+  }
+}

package/theme/styles/css/color/blue.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: blue. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='blue'][data-mode='light'] {
+    --foreground: 221 29% 16%;
+    --surface: 221 29% 95%;
+    --surface-foreground: 221 29% 16%;
+    --card: 221 52% 99%;
+    --card-foreground: 221 29% 16%;
+    --popover: 221 52% 99%;
+    --popover-foreground: 221 29% 16%;
+    --muted: 221 25% 95%;
+    --muted-foreground: 221 17% 40%;
+    --border: 221 25% 87%;
+    --input: 221 25% 87%;
+    --primary: 221 83% 48%;
+    --primary-foreground: 0 0% 100%;
+    --accent: 221 50% 94%;
+    --accent-foreground: 221 83% 32%;
+    --secondary: 221 33% 93%;
+    --secondary-foreground: 221 83% 28%;
+    --ring: 221 83% 48%;
+    --highlight: 221 83% 64%;
+  }
+
+  html[theme-color='blue'][data-mode='dark'] {
+    --foreground: 221 12% 96%;
+    --surface: 221 21% 12%;
+    --surface-foreground: 221 12% 96%;
+    --card: 221 25% 9%;
+    --card-foreground: 221 12% 96%;
+    --popover: 221 25% 9%;
+    --popover-foreground: 221 12% 96%;
+    --muted: 221 21% 16%;
+    --muted-foreground: 221 17% 64%;
+    --border: 221 21% 18%;
+    --input: 221 21% 18%;
+    --primary: 221 83% 58%;
+    --primary-foreground: 0 0% 4%;
+    --accent: 221 42% 18%;
+    --accent-foreground: 221 66% 80%;
+    --secondary: 221 33% 18%;
+    --secondary-foreground: 221 58% 82%;
+    --ring: 221 83% 58%;
+    --highlight: 221 83% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='blue']:not([data-mode='light']) {
+      --foreground: 221 12% 96%;
+      --surface: 221 21% 12%;
+      --surface-foreground: 221 12% 96%;
+      --card: 221 25% 9%;
+      --card-foreground: 221 12% 96%;
+      --popover: 221 25% 9%;
+      --popover-foreground: 221 12% 96%;
+      --muted: 221 21% 16%;
+      --muted-foreground: 221 17% 64%;
+      --border: 221 21% 18%;
+      --input: 221 21% 18%;
+      --primary: 221 83% 58%;
+      --primary-foreground: 0 0% 4%;
+      --accent: 221 42% 18%;
+      --accent-foreground: 221 66% 80%;
+      --secondary: 221 33% 18%;
+      --secondary-foreground: 221 58% 82%;
+      --ring: 221 83% 58%;
+      --highlight: 221 83% 58%;
+    }
+  }
+}

package/theme/styles/css/color/brand.css

@@ -0,0 +1,38 @@
+/**
+ * Accent theme: brand. Maps the chromatic accent tokens to the consumer's
+ * --brand / --brand-foreground (set by ThemeBrandService). Layout canvas and
+ * surface patterns are left to the neutral axis. Hand-written, not emitted by
+ * the generated index.
+ *
+ * --accent-foreground and --secondary-foreground are deliberately NOT mapped to
+ * --brand. Those are text on a neutral tint, and --brand is a value the consumer
+ * chooses while the tint underneath it also moves with the theme-neutral axis, so
+ * no fixed mapping can promise 4.5 to 1. They fall through to the base theme
+ * instead, which is measured and passes. The brand colour still comes through on
+ * --primary, --ring, and --highlight, where it is paired with
+ * --brand-foreground.
+ *
+ * --ring reads --brand-ring rather than --brand, for the same reason a generated
+ * accent emits a --ring separate from its --primary: the fill keeps the
+ * lightness it was designed with, and only the focus indicator is darkened to
+ * clear 3 to 1 against the background. ThemeBrandService solves that value once
+ * per mode (--brand-ring-light / --brand-ring-dark); without it the ring simply
+ * falls back to the brand.
+ */
+@layer tokens {
+  html[theme-color='brand'][data-mode='light'] {
+    --brand-ring: var(--brand-ring-light, var(--brand));
+  }
+
+  html[theme-color='brand'][data-mode='dark'] {
+    --brand-ring: var(--brand-ring-dark, var(--brand));
+  }
+
+  html[theme-color='brand'][data-mode='light'],
+  html[theme-color='brand'][data-mode='dark'] {
+    --primary: var(--brand);
+    --primary-foreground: var(--brand-foreground);
+    --ring: var(--brand-ring, var(--brand));
+    --highlight: var(--brand);
+  }
+}

package/theme/styles/css/color/cyan.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: cyan. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='cyan'][data-mode='light'] {
+    --foreground: 191 29% 16%;
+    --surface: 191 30% 95%;
+    --surface-foreground: 191 29% 16%;
+    --card: 191 52% 99%;
+    --card-foreground: 191 29% 16%;
+    --popover: 191 52% 99%;
+    --popover-foreground: 191 29% 16%;
+    --muted: 191 26% 95%;
+    --muted-foreground: 191 17% 40%;
+    --border: 191 26% 87%;
+    --input: 191 26% 87%;
+    --primary: 191 85% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 191 51% 94%;
+    --accent-foreground: 191 85% 30%;
+    --secondary: 191 34% 93%;
+    --secondary-foreground: 191 85% 28%;
+    --ring: 191 85% 41%;
+    --highlight: 191 85% 64%;
+  }
+
+  html[theme-color='cyan'][data-mode='dark'] {
+    --foreground: 191 13% 96%;
+    --surface: 191 21% 12%;
+    --surface-foreground: 191 13% 96%;
+    --card: 191 26% 9%;
+    --card-foreground: 191 13% 96%;
+    --popover: 191 26% 9%;
+    --popover-foreground: 191 13% 96%;
+    --muted: 191 21% 16%;
+    --muted-foreground: 191 17% 64%;
+    --border: 191 21% 18%;
+    --input: 191 21% 18%;
+    --primary: 191 85% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 191 43% 18%;
+    --accent-foreground: 191 68% 80%;
+    --secondary: 191 34% 18%;
+    --secondary-foreground: 191 59% 82%;
+    --ring: 191 85% 58%;
+    --highlight: 191 85% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='cyan']:not([data-mode='light']) {
+      --foreground: 191 13% 96%;
+      --surface: 191 21% 12%;
+      --surface-foreground: 191 13% 96%;
+      --card: 191 26% 9%;
+      --card-foreground: 191 13% 96%;
+      --popover: 191 26% 9%;
+      --popover-foreground: 191 13% 96%;
+      --muted: 191 21% 16%;
+      --muted-foreground: 191 17% 64%;
+      --border: 191 21% 18%;
+      --input: 191 21% 18%;
+      --primary: 191 85% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 191 43% 18%;
+      --accent-foreground: 191 68% 80%;
+      --secondary: 191 34% 18%;
+      --secondary-foreground: 191 59% 82%;
+      --ring: 191 85% 58%;
+      --highlight: 191 85% 58%;
+    }
+  }
+}

package/theme/styles/css/color/emerald.css

@@ -0,0 +1,72 @@
+/**
+ * Accent theme: emerald. Generated by scripts/gen-theme-colors.mjs — do not edit.
+ */
+@layer tokens {
+  html[theme-color='emerald'][data-mode='light'] {
+    --foreground: 160 28% 16%;
+    --surface: 160 27% 95%;
+    --surface-foreground: 160 28% 16%;
+    --card: 160 52% 99%;
+    --card-foreground: 160 28% 16%;
+    --popover: 160 52% 99%;
+    --popover-foreground: 160 28% 16%;
+    --muted: 160 23% 95%;
+    --muted-foreground: 160 16% 40%;
+    --border: 160 23% 87%;
+    --input: 160 23% 87%;
+    --primary: 160 78% 48%;
+    --primary-foreground: 0 0% 12%;
+    --accent: 160 47% 94%;
+    --accent-foreground: 160 78% 27%;
+    --secondary: 160 31% 93%;
+    --secondary-foreground: 160 78% 27%;
+    --ring: 160 78% 37%;
+    --highlight: 160 78% 64%;
+  }
+
+  html[theme-color='emerald'][data-mode='dark'] {
+    --foreground: 160 12% 96%;
+    --surface: 160 20% 12%;
+    --surface-foreground: 160 12% 96%;
+    --card: 160 23% 9%;
+    --card-foreground: 160 12% 96%;
+    --popover: 160 23% 9%;
+    --popover-foreground: 160 12% 96%;
+    --muted: 160 20% 16%;
+    --muted-foreground: 160 16% 64%;
+    --border: 160 20% 18%;
+    --input: 160 20% 18%;
+    --primary: 160 78% 58%;
+    --primary-foreground: 0 0% 10%;
+    --accent: 160 39% 18%;
+    --accent-foreground: 160 62% 80%;
+    --secondary: 160 31% 18%;
+    --secondary-foreground: 160 55% 82%;
+    --ring: 160 78% 58%;
+    --highlight: 160 78% 58%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    html[theme-color='emerald']:not([data-mode='light']) {
+      --foreground: 160 12% 96%;
+      --surface: 160 20% 12%;
+      --surface-foreground: 160 12% 96%;
+      --card: 160 23% 9%;
+      --card-foreground: 160 12% 96%;
+      --popover: 160 23% 9%;
+      --popover-foreground: 160 12% 96%;
+      --muted: 160 20% 16%;
+      --muted-foreground: 160 16% 64%;
+      --border: 160 20% 18%;
+      --input: 160 20% 18%;
+      --primary: 160 78% 58%;
+      --primary-foreground: 0 0% 10%;
+      --accent: 160 39% 18%;
+      --accent-foreground: 160 62% 80%;
+      --secondary: 160 31% 18%;
+      --secondary-foreground: 160 55% 82%;
+      --ring: 160 78% 58%;
+      --highlight: 160 78% 58%;
+    }
+  }
+}