@eagami/ui 4.5.1 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "4.5.1",
+  "version": "4.7.0",
   "description": "Lightweight, accessible, themeable Angular UI component library and icon set built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",
@@ -55,6 +55,9 @@
   "files": [
     "fesm2022",
     "types",
+    "src/styles",
+    "schematics",
     "README.md"
-  ]
+  ],
+  "schematics": "./schematics/collection.json"
 }

package/schematics/collection.json

@@ -0,0 +1,9 @@
+{
+  "schematics": {
+    "ng-add": {
+      "description": "Set up Eagami UI: register the global stylesheet and fonts in an Angular workspace.",
+      "factory": "./ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ngAdd = ngAdd;
+const schematics_1 = require("@angular-devkit/schematics");
+const workspace_1 = require("@schematics/angular/utility/workspace");
+const utils_1 = require("./utils");
+function ngAdd(options) {
+    return (0, schematics_1.chain)([registerStylesheet(options), registerFonts(options), logNextSteps()]);
+}
+function registerStylesheet(options) {
+    return (0, workspace_1.updateWorkspace)(workspace => {
+        const { project } = findProject(workspace, options.project);
+        const build = project.targets.get('build');
+        if (!build) {
+            throw new schematics_1.SchematicsException('No "build" target found; cannot register the Eagami UI stylesheet.');
+        }
+        build.options ??= {};
+        const existing = build.options['styles'];
+        const styles = Array.isArray(existing) ? existing : [];
+        build.options['styles'] = (0, utils_1.withEagamiStyle)(styles);
+    });
+}
+function registerFonts(options) {
+    return async (tree, context) => {
+        const workspace = await (0, workspace_1.getWorkspace)(tree);
+        const { name, project } = findProject(workspace, options.project);
+        const indexPath = (0, utils_1.resolveIndexPath)(project.targets.get('build')?.options?.['index']);
+        if (!indexPath) {
+            context.logger.warn(`No index.html found for project "${name}"; add the Eagami UI fonts manually.`);
+            return;
+        }
+        const current = tree.read(indexPath);
+        if (!current) {
+            context.logger.warn(`Could not read "${indexPath}"; add the Eagami UI fonts manually.`);
+            return;
+        }
+        const html = current.toString('utf-8');
+        const updated = (0, utils_1.withEagamiFonts)(html);
+        if (updated !== html) {
+            tree.overwrite(indexPath, updated);
+        }
+    };
+}
+function logNextSteps() {
+    return (_tree, context) => {
+        context.logger.info('Eagami UI is set up: the global stylesheet and fonts are registered.');
+        context.logger.info('Optional: call provideEagamiUi() in app.config.ts for a custom brand palette or extra locales.');
+    };
+}
+function findProject(workspace, name) {
+    if (name) {
+        const project = workspace.projects.get(name);
+        if (!project) {
+            throw new schematics_1.SchematicsException(`Project "${name}" not found in the workspace.`);
+        }
+        return { name, project };
+    }
+    for (const [projectName, project] of workspace.projects) {
+        if (project.extensions['projectType'] === 'application') {
+            return { name: projectName, project };
+        }
+    }
+    throw new schematics_1.SchematicsException('No application project found to set up Eagami UI.');
+}

package/schematics/ng-add/schema.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "eagami-ui-ng-add",
+  "title": "Eagami UI ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "The project to set up Eagami UI in.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "additionalProperties": false
+}

package/schematics/ng-add/utils.js

@@ -0,0 +1,53 @@
+"use strict";
+// Pure, dependency-free transforms for the ng-add schematic. Kept separate from
+// index.ts (which pulls in @angular-devkit) so the unit tests compile under the
+// Angular test build without dragging Node-only schematics APIs into the bundle.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EAGAMI_FONT_LINKS = exports.EAGAMI_STYLE_PATH = void 0;
+exports.styleEntryMatches = styleEntryMatches;
+exports.withEagamiStyle = withEagamiStyle;
+exports.hasEagamiFonts = hasEagamiFonts;
+exports.withEagamiFonts = withEagamiFonts;
+exports.resolveIndexPath = resolveIndexPath;
+exports.EAGAMI_STYLE_PATH = 'node_modules/@eagami/ui/src/styles/eagami-ui.scss';
+exports.EAGAMI_FONT_LINKS = [
+    '<link rel="preconnect" href="https://fonts.googleapis.com" />',
+    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />',
+    '<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=Syne:wght@400;500;600;700&display=swap" />',
+];
+// Unique to our Google Fonts request, so it doubles as the idempotency marker
+const FONT_MARKER = 'family=DM+Sans';
+function styleEntryMatches(entry, path) {
+    return typeof entry === 'string' ? entry === path : entry.input === path;
+}
+function withEagamiStyle(styles) {
+    if (styles.some(style => styleEntryMatches(style, exports.EAGAMI_STYLE_PATH))) {
+        return styles;
+    }
+    return [exports.EAGAMI_STYLE_PATH, ...styles];
+}
+function hasEagamiFonts(html) {
+    return html.includes(FONT_MARKER);
+}
+function withEagamiFonts(html) {
+    if (hasEagamiFonts(html)) {
+        return html;
+    }
+    const block = exports.EAGAMI_FONT_LINKS.map(link => `    ${link}`).join('\n');
+    const headClose = /([ \t]*)<\/head>/i;
+    if (headClose.test(html)) {
+        return html.replace(headClose, `${block}\n$1</head>`);
+    }
+    return `${block}\n${html}`;
+}
+// The build target's `index` option is either a path string or a { input, output } object
+function resolveIndexPath(index) {
+    if (typeof index === 'string') {
+        return index;
+    }
+    if (index !== null && typeof index === 'object' && 'input' in index) {
+        const input = index.input;
+        return typeof input === 'string' ? input : undefined;
+    }
+    return undefined;
+}

package/schematics/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/src/styles/_mixins.scss

@@ -0,0 +1,68 @@
+// Shared SCSS mixins for the library. Consume from a component stylesheet with:
+//   @use '../../styles/mixins' as ea;
+//   .ea-foo__close { @include ea.icon-button; }
+
+// Standard focus indicator. The ring is a soft box-shadow halo, but box-shadow
+// is dropped in forced-colors (Windows High Contrast) mode, which would leave
+// keyboard users with no visible focus. Pair the halo with a real outline that
+// only renders in forced-colors so the ring survives there. Pass the full
+// box-shadow value to compose the ring with an existing shadow.
+@mixin focus-ring($ring: var(--shadow-focus-ring)) {
+  box-shadow: $ring;
+
+  @media (forced-colors: active) {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+}
+
+// Floating surfaces (menus, dialogs, popovers, toasts) lean on elevation shadow
+// for their boundary, but shadows are dropped in forced-colors mode. Add a
+// hairline border there so the surface stays separated from the content behind.
+@mixin elevated-surface-border {
+  @media (forced-colors: active) {
+    border: 1px solid CanvasText;
+  }
+}
+
+// Standard icon button: clear, close/dismiss, password-toggle, nav, etc. The box
+// is `--ea-icon-button-size` (em) so it scales with the host component's size and
+// is consistent across components at a given size tier. The glyph is enlarged so
+// it reads clearly inside the box regardless of how much padding the icon's own
+// viewBox carries (the feather `x`, for instance, only fills its middle half).
+@mixin icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--ea-icon-button-size, 1.75em);
+  height: var(--ea-icon-button-size, 1.75em);
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-colors);
+
+  // Glyph sized via font-size (not width) so it overrides the icon's inline 1em
+  // host size and still scales with the box.
+  > * {
+    font-size: 1.25em;
+  }
+
+  &:hover {
+    background-color: var(--color-state-hover);
+    color: var(--color-text-primary);
+  }
+
+  &:focus-visible {
+    outline: none;
+    @include focus-ring;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

package/src/styles/_reset.scss

@@ -0,0 +1,62 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-md);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-canvas);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+img,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  background: transparent;
+  border: none;
+}
+
+a {
+  color: var(--color-text-link);
+  text-decoration: underline;
+
+  &:hover {
+    color: var(--color-text-link-hover);
+  }
+}
+
+:focus-visible {
+  outline: var(--border-width-medium) solid var(--color-border-focus);
+  outline-offset: 2px;
+}

package/src/styles/_rtl.scss

@@ -0,0 +1,38 @@
+// Sign multiplier for horizontal translate animations: +1 in LTR, -1 in RTL, so
+// a single `translateX(calc(<x> * var(--ea-rtl-sign)))` mirrors automatically.
+:where(:root) {
+  --ea-rtl-sign: 1;
+}
+
+[dir='rtl'] {
+  --ea-rtl-sign: -1;
+}
+
+// Horizontally mirrors directional glyphs (prev/next chevrons, breadcrumb
+// separators, transfer arrows) when an ancestor sets dir="rtl". Opt in by
+// adding the `ea-rtl-flip` class to the icon element.
+[dir='rtl'] .ea-rtl-flip {
+  transform: scaleX(-1);
+}
+
+// background-position has no logical keyword, so flip the paginator select's
+// native chevron from the inline-end to the inline-start edge under RTL.
+[dir='rtl'] .ea-paginator__select {
+  background-position: left 6px center;
+}
+
+// The tree disclosure chevron points toward the inline-start (left) when
+// collapsed in RTL; the open state still rotates down. A 180deg turn keeps it in
+// pure-rotation space so the expand transition stays smooth. Must live here, not
+// the component, because the dir ancestor is outside its encapsulation scope.
+[dir='rtl'] .ea-tree-node__chevron:not(.ea-tree-node__chevron--open) {
+  transform: rotate(180deg);
+}
+
+// Native fields use dir="auto" so typed LTR text stays LTR, but that resolves
+// an empty field to LTR and parks its placeholder on the left. Pin them to the
+// inline-end edge so every RTL field reads from the right like the others.
+[dir='rtl'] input[dir='auto'],
+[dir='rtl'] textarea[dir='auto'] {
+  text-align: right;
+}

package/src/styles/_tooltip.scss

@@ -0,0 +1,39 @@
+@use 'mixins' as ea;
+
+// Guard against "sticky hover" on touch devices, which fire `mouseenter` on tap
+// but never the matching `mouseleave`. The directive gates pointer listeners on
+// `(hover: hover)`, but if a tooltip ever slips through keep it invisible on touch.
+.ea-tooltip {
+  z-index: var(--z-index-tooltip);
+  position: absolute;
+  padding: var(--space-1-5) var(--space-2-5);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-normal);
+  white-space: nowrap;
+  // When a max-width switches the bubble to multi-line, break long unbreakable
+  // strings (URLs, tokens) instead of letting them overflow the bubble.
+  overflow-wrap: anywhere;
+  border: var(--border-width-thin) solid var(--color-tooltip-border);
+  border-radius: var(--radius-md);
+  background-color: var(--color-tooltip-surface);
+  color: var(--color-neutral-0);
+  pointer-events: none;
+  animation: ea-tooltip-fade-in var(--duration-fast) var(--ease-out);
+  @include ea.elevated-surface-border;
+
+  @media (hover: none) {
+    display: none;
+  }
+}
+
+@keyframes ea-tooltip-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/src/styles/eagami-ui.scss

@@ -0,0 +1,7 @@
+// Global stylesheet: loads all design token custom properties and the base reset.
+// Consumers must also load the DM Sans and Syne fonts via <link> tags in the HTML head.
+
+@use 'tokens/index';
+@use 'reset';
+@use 'tooltip';
+@use 'rtl';

package/src/styles/tokens/_colors.scss

@@ -0,0 +1,265 @@
+// Every token-declaring selector is wrapped in :where() so it contributes zero
+// specificity. A consumer's own root-level token override (specificity 0,1,0)
+// then wins in light mode, OS-dark, and forced dark alike, independent of
+// stylesheet load order. The library's own light-to-dark switching still
+// resolves correctly by source order, since the dark blocks come after the
+// light ones at equal (zero) specificity.
+:where(:root) {
+  --color-primary-50: #ecf3f9;
+  --color-primary-100: #d1e3f0;
+  --color-primary-200: #abcbe3;
+  --color-primary-300: #7dafd4;
+  --color-primary-400: #4b91c3;
+  --color-primary-500: #3674a1;
+  --color-primary-600: #2a5b7e;
+  --color-primary-700: #204560;
+  --color-primary-800: #162f41;
+  --color-primary-900: #0d1c26;
+
+  --color-secondary-50: #f2eff5;
+  --color-secondary-100: #dfd9e8;
+  --color-secondary-200: #c4b9d5;
+  --color-secondary-300: #a493be;
+  --color-secondary-400: #8169a5;
+  --color-secondary-500: #665086;
+  --color-secondary-600: #503f69;
+  --color-secondary-700: #3d3050;
+  --color-secondary-800: #292136;
+  --color-secondary-900: #181320;
+
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #374151;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+  --color-neutral-950: #030712;
+
+  --color-success-50: #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+
+  --color-warning-50: #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+
+  --color-error-50: #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+
+  --color-info-50: #ecfeff;
+  --color-info-100: #cffafe;
+  --color-info-200: #a5f3fc;
+  --color-info-500: #06b6d4;
+  --color-info-600: #0891b2;
+  --color-info-700: #0e7490;
+
+  --color-text-primary: var(--color-neutral-900);
+  --color-text-secondary: var(--color-neutral-600);
+  --color-text-tertiary: var(--color-neutral-400);
+  --color-text-disabled: var(--color-neutral-400);
+  --color-text-inverse: var(--color-neutral-0);
+  --color-text-link: var(--color-primary-600);
+  --color-text-link-hover: var(--color-primary-800);
+
+  // Two-tier surfaces: bg-canvas is the page, bg-base is component surfaces on
+  // it (inputs, cards, accordion, popovers). In dark mode bg-base lifts above
+  // bg-canvas so surfaces don't vanish into the page.
+  --color-bg-canvas: var(--color-neutral-0);
+  --color-bg-base: var(--color-neutral-0);
+  --color-bg-subtle: var(--color-neutral-50);
+  --color-bg-stripe: var(--color-neutral-50);
+  // Zebra-stripe fill for table rows: a mid-tone between the base row and the
+  // header tint so striped rows read as lighter than the header, not identical to
+  // it. Dark mode overrides the ratio to stay equally subtle.
+  --color-bg-stripe-subtle: color-mix(
+    in srgb,
+    var(--color-bg-base) 30%,
+    var(--color-bg-stripe)
+  );
+  --color-bg-muted: var(--color-neutral-100);
+  // Soft neutral fill for placeholder surfaces (e.g. avatar initials) when no
+  // image is set; light enough to sit gently on a white page
+  --color-bg-emphasis: var(--color-neutral-100);
+  --color-bg-elevated: var(--color-neutral-0);
+  --color-bg-overlay: rgba(0, 0, 0, 0.5);
+
+  // Tooltips float over arbitrary content, so their surface is a unique tone that
+  // never matches a page or palette colour in either theme; the translucent
+  // hairline border separates it from same-tone backgrounds.
+  --color-tooltip-surface: #1a1b21;
+  --color-tooltip-border: rgba(255, 255, 255, 0.15);
+
+  // Interactive lift layers for hover and active/selected fills. Light surfaces
+  // are all near-white and never collapse onto these shades, so solid muted
+  // tones read cleanly. Dark mode swaps them for translucent washes (see the
+  // dark overrides) because its surfaces all collapse onto the same neutrals,
+  // where a solid fill would vanish into whatever it sits on.
+  --color-state-hover: var(--color-neutral-100);
+  --color-state-active: var(--color-neutral-200);
+
+  --color-border-subtle: var(--color-neutral-200);
+  --color-border-default: var(--color-neutral-200);
+  --color-border-strong: var(--color-neutral-400);
+  --color-divider: var(--color-border-subtle);
+  --color-border-focus: var(--color-primary-500);
+
+  // brand-default/-hover/-active are the brand colour as a surface (solid bg
+  // under white text); needs 4.5:1 vs white. brand-text is the brand colour as
+  // a foreground on a non-brand surface; needs 4.5:1 vs bg-base and flips
+  // lighter in dark mode.
+  --color-brand-default: var(--color-primary-600);
+  --color-brand-hover: var(--color-primary-700);
+  --color-brand-active: var(--color-primary-800);
+  --color-brand-text: var(--color-primary-700);
+  --color-brand-subtle: var(--color-primary-50);
+  --color-brand-muted: var(--color-primary-100);
+
+  --color-brand-secondary-default: var(--color-secondary-500);
+  --color-brand-secondary-hover: var(--color-secondary-600);
+  --color-brand-secondary-active: var(--color-secondary-700);
+  --color-brand-secondary-subtle: var(--color-secondary-50);
+  --color-brand-secondary-muted: var(--color-secondary-100);
+
+  // *-text is the status hue as a foreground on its own *-subtle/-muted wash
+  // (badge, tag, toast). It needs 4.5:1 vs that wash and flips lighter in dark
+  // mode, mirroring --color-brand-text.
+  --color-success-default: var(--color-success-600);
+  --color-success-subtle: var(--color-success-50);
+  --color-success-muted: var(--color-success-100);
+  --color-success-text: var(--color-success-700);
+
+  --color-warning-default: var(--color-warning-600);
+  --color-warning-subtle: var(--color-warning-50);
+  --color-warning-muted: var(--color-warning-100);
+  --color-warning-text: var(--color-warning-700);
+
+  --color-error-default: var(--color-error-600);
+  --color-error-subtle: var(--color-error-50);
+  --color-error-muted: var(--color-error-100);
+  --color-error-text: var(--color-error-700);
+
+  --color-info-default: var(--color-info-600);
+  --color-info-subtle: var(--color-info-50);
+  --color-info-muted: var(--color-info-100);
+  --color-info-text: var(--color-info-700);
+
+  // Pure RGB primaries for the picker's hue wheel and saturation/value
+  // gradient. Intrinsic to the picker, not themeable; kept here so component
+  // SCSS stays literal-free.
+  --color-picker-hue-red: #ff0000;
+  --color-picker-hue-yellow: #ffff00;
+  --color-picker-hue-green: #00ff00;
+  --color-picker-hue-cyan: #00ffff;
+  --color-picker-hue-blue: #0000ff;
+  --color-picker-hue-magenta: #ff00ff;
+  --color-picker-sv-white: #ffffff;
+  --color-picker-sv-black: #000000;
+  --color-picker-thumb-halo: rgba(0, 0, 0, 0.25);
+}
+
+// Dark mode: applied when the OS prefers dark, unless forced light via
+// `<html data-theme="light">`. `<html data-theme="dark">` forces dark.
+@mixin dark-color-tokens {
+  --color-text-primary: var(--color-neutral-50);
+  --color-text-secondary: var(--color-neutral-300);
+  --color-text-tertiary: var(--color-neutral-500);
+  --color-text-disabled: var(--color-neutral-500);
+  --color-text-inverse: var(--color-neutral-900);
+  --color-text-link: var(--color-primary-300);
+  --color-text-link-hover: var(--color-primary-100);
+
+  // Canvas is the deepest page tone; bg-base and up lift component surfaces,
+  // striped rows, floating surfaces, and hover states above it.
+  --color-bg-canvas: var(--color-neutral-950);
+  --color-bg-base: var(--color-neutral-800);
+  --color-bg-subtle: var(--color-neutral-700);
+  --color-bg-stripe: var(--color-neutral-900);
+  // The dark base-to-stripe gap reads stronger than the light one, so weight the
+  // stripe mix toward the base row to keep zebra striping subtle.
+  --color-bg-stripe-subtle: color-mix(
+    in srgb,
+    var(--color-bg-base) 62.5%,
+    var(--color-bg-stripe)
+  );
+  --color-bg-elevated: var(--color-neutral-700);
+  // Opaque muted surface for static fills (disabled fields, slider/progress
+  // tracks, skeletons). Hover/active fills route through the translucent
+  // --color-state-* tokens instead, so they never collide with this shade.
+  --color-bg-muted: var(--color-neutral-700);
+  --color-bg-emphasis: var(--color-neutral-600);
+
+  // White wash so an interactive lift reads on any dark surface, including the
+  // neutral-700 tier where bg-muted/-subtle/-elevated all coincide. This is the
+  // fix that lets dropdown/menu/dialog hovers lift off their elevated surfaces.
+  --color-state-hover: rgba(255, 255, 255, 0.08);
+  --color-state-active: rgba(255, 255, 255, 0.14);
+
+  // Borders stay clear of every bg-* shade so they stay visible. subtle mixes
+  // neutral-700/-800 to sit between card and cell backgrounds; default can't go
+  // darker without colliding with bg-subtle/-elevated (both neutral-700).
+  --color-border-subtle: color-mix(
+    in srgb,
+    var(--color-neutral-700),
+    var(--color-neutral-800)
+  );
+  --color-border-default: var(--color-neutral-400);
+  --color-border-strong: var(--color-neutral-300);
+  // Dividers read as barely-there against dark surfaces at border-subtle, so
+  // they step one neutral lighter for a visible-but-quiet rule.
+  --color-divider: var(--color-neutral-600);
+
+  // Surface roles step one shade lighter than light mode so the button clears
+  // WCAG 1.4.11 (3:1) on the near-black canvas while keeping a white label
+  // above 4.5:1.
+  --color-brand-default: var(--color-primary-500);
+  --color-brand-hover: var(--color-primary-600);
+  --color-brand-active: var(--color-primary-700);
+  --color-brand-text: var(--color-primary-300);
+  --color-brand-subtle: rgba(75, 145, 195, 0.1);
+  --color-brand-muted: rgba(75, 145, 195, 0.2);
+
+  // Light pastels become unreadable behind light text in dark mode. Re-tint as
+  // a low-alpha wash of the saturated *-500 hue so the surface darkens enough
+  // for white text.
+  --color-success-subtle: rgba(34, 197, 94, 0.15);
+  --color-success-muted: rgba(34, 197, 94, 0.25);
+  --color-warning-subtle: rgba(245, 158, 11, 0.15);
+  --color-warning-muted: rgba(245, 158, 11, 0.25);
+  --color-error-subtle: rgba(239, 68, 68, 0.15);
+  --color-error-muted: rgba(239, 68, 68, 0.25);
+  --color-info-subtle: rgba(6, 182, 212, 0.15);
+  --color-info-muted: rgba(6, 182, 212, 0.25);
+
+  // The *-700 shades are unreadable on the dark translucent washes above; flip
+  // to the light *-200 pastels so status text keeps 4.5:1.
+  --color-success-text: var(--color-success-200);
+  --color-warning-text: var(--color-warning-200);
+  --color-error-text: var(--color-error-200);
+  --color-info-text: var(--color-info-200);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme='light'])) {
+    @include dark-color-tokens;
+  }
+}
+
+:where(:root[data-theme='dark']) {
+  @include dark-color-tokens;
+  color-scheme: dark;
+}