@eagami/ui 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eagami/ui",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
   "author": "Michal Wiraszka <michal@eagami.com>",
   "license": "MIT",

package/src/styles/_reset.scss

@@ -22,7 +22,7 @@ body {
   font-size: var(--font-size-md);
   line-height: var(--line-height-normal);
   color: var(--color-text-primary);
-  background-color: var(--color-bg-base);
+  background-color: var(--color-bg-canvas);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/src/styles/tokens/_colors.scss

@@ -85,27 +85,47 @@
   --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-300);
+  --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);
 
-  // Background
+  // Two-tier surface model: `bg-canvas` is the page itself; `bg-base` is the
+  // surface of components on the page (inputs, cards, accordion items,
+  // popover panels). In dark mode bg-base lifts above bg-canvas so component
+  // surfaces don't disappear 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);
   --color-bg-muted: var(--color-neutral-100);
   --color-bg-elevated: var(--color-neutral-0);
   --color-bg-overlay: rgba(0, 0, 0, 0.5);
 
-  // Border
+  // Border. `subtle` is for low-contrast dividers (table rows, cell grids)
+  // where a full `default` border would feel heavy. `default` is the everyday
+  // form-component outline; `strong` is for prominent outlines (secondary
+  // buttons, etc.); `focus` is the keyboard-focus ring.
+  --color-border-subtle: var(--color-neutral-200);
   --color-border-default: var(--color-neutral-200);
   --color-border-strong: var(--color-neutral-400);
   --color-border-focus: var(--color-primary-500);
 
-  // Brand semantic
+  // Brand semantic.
+  //
+  // Two roles split intentionally:
+  //  - `--color-brand-default` (and `-hover` / `-active`) is the brand colour
+  //    used as a **surface** — solid background under white text (primary
+  //    button, badge bg). Needs ≥ 4.5:1 vs white text.
+  //  - `--color-brand-text` is the brand colour used as a **foreground** on a
+  //    non-brand surface (selected dropdown row, today marker, sorted column
+  //    header, link, spinner). Needs ≥ 4.5:1 vs `--color-bg-base`. In dark
+  //    mode the foreground role flips to a lighter shade so contrast against
+  //    the dark surface still holds.
   --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);
 
@@ -154,29 +174,45 @@
 // ---------------------------------------------------------------------------
 @mixin dark-color-tokens {
   --color-text-primary: var(--color-neutral-50);
-  --color-text-secondary: var(--color-neutral-400);
+  --color-text-secondary: var(--color-neutral-300);
   --color-text-tertiary: var(--color-neutral-500);
-  --color-text-disabled: var(--color-neutral-700);
+  --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);
 
-  // Dark-mode background hierarchy steps from darkest (page) to lightest (hover),
-  // since elevation in dark mode is conveyed by surface lightness rather than shadow:
-  //   bg-base (950) → bg-subtle (900) → bg-elevated (800) → bg-muted (700)
-  // bg-muted sits *above* bg-elevated so hover states inside elevated surfaces
-  // (dropdowns on a card, menu items in a drawer) still read as a step up.
-  --color-bg-base: var(--color-neutral-950);
-  --color-bg-subtle: var(--color-neutral-900);
-  --color-bg-elevated: var(--color-neutral-800);
-  --color-bg-muted: var(--color-neutral-700);
-
-  --color-border-default: var(--color-neutral-700);
-  --color-border-strong: var(--color-neutral-500);
-
-  --color-brand-default: var(--color-primary-400);
-  --color-brand-hover: var(--color-primary-300);
-  --color-brand-active: var(--color-primary-200);
+  // Dark-mode surface hierarchy. Canvas is the page itself (deepest).
+  // bg-base lifts above it so component surfaces (inputs, cards, accordion
+  // items, popover panels) read above the page instead of disappearing into
+  // it. Subtle / elevated / muted continue the lift for striped rows, floating
+  // surfaces, and hover states.
+  --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);
+  --color-bg-elevated: var(--color-neutral-700);
+  --color-bg-muted: var(--color-neutral-600);
+
+  // Borders sit clear of every bg-* shade so they stay visible on any surface.
+  // `subtle` mixes between neutral-700 and -800 so it's distinct from the
+  // card surface (neutral-700) while staying close to cell bgs (-800/-900).
+  // `default` is the form-component outline; anything darker collides with
+  // bg-subtle / bg-elevated (both neutral-700) and disappears.
+  --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);
+
+  // Brand surface roles step one shade lighter than light mode so the button
+  // clears WCAG 1.4.11 (3:1) against the near-black canvas while still
+  // carrying its 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);