@duyluonganduin/acl-web-components 0.0.63 → 0.0.65

package/dist/tokens.css

@@ -148,12 +148,6 @@
   --radius-24: 24px;
   --radius-full: 9999px;
 
-  /* ===================== Box Shadow ===================== */
-  --shadow-1: 0px 1px 2px rgba(29, 41, 57, 0.07);
-  --shadow-2: 0px 1px 2px rgba(29, 41, 57, 0.04), 0px 2px 8px rgba(29, 41, 57, 0.08);
-  --shadow-3: 0px 2px 8px rgba(29, 41, 57, 0.08), 0px 8px 24px rgba(29, 41, 57, 0.12);
-  --shadow-4: 0px 4px 8px rgba(29, 41, 57, 0.08), 0px 16px 48px rgba(29, 41, 57, 0.16);
-
   /* ===================== Spacing ===================== */
   --spacing-px: 1px;
   --spacing-0: 0;
@@ -185,6 +179,332 @@
   --z-9999: 9999;
 }
 
+/* ===================== Semantic colors =====================
+ * Role-based colors, named after shadcn/ui plus the roles ACL needs on top
+ * (status fills, soft tints, ramp-based hover/active, disabled, inverse, AI).
+ * Build UI against these, not the gray/primary ramps, so it follows the theme.
+ *
+ * Light is the default. Dark is opt-in: add `class="dark"` (or
+ * `data-theme="dark"`) to <html> or to any subtree. `.light` /
+ * `data-theme="light"` forces light back inside a dark subtree.
+ *
+ * Every `*-foreground` is the text/icon color that sits on its fill.
+ * Per status family: base fill, -hover, -active, -subtle (tint), -subtle-active
+ * (pressed tint), -subtle-foreground (strong text; also status text on plain
+ * surfaces), -border (soft border for outlined controls), -icon (an icon, dot
+ * or marker on the page or the tint).
+ *
+ * The dark palette, and the extra roles canvas / table-header / highlight /
+ * border-muted / -icon / ai-glow, come from anduin.design: see @semantic-dark.
+ */
+/* @semantic-light */
+:root, .light, [data-theme="light"] {
+  color-scheme: light;
+
+  --color-background: var(--color-gray-0);
+  --color-foreground: var(--color-gray-8);
+  --color-card: var(--color-gray-0);
+  --color-card-foreground: var(--color-gray-8);
+  --color-popover: var(--color-gray-0);
+  --color-popover-foreground: var(--color-gray-8);
+  /* Edge for floating surfaces; invisible in light, where the shadow does the job */
+  --color-popover-border: transparent;
+
+  --color-primary: var(--color-primary-4);
+  --color-primary-foreground: var(--color-gray-0);
+  --color-primary-hover: var(--color-primary-3);
+  --color-primary-active: var(--color-primary-5);
+  --color-primary-subtle: var(--color-primary-1);
+  --color-primary-subtle-foreground: var(--color-primary-5);
+  --color-primary-subtle-active: var(--color-primary-2);
+  --color-primary-border: var(--color-primary-3);
+
+  --color-secondary: var(--color-gray-2);
+  --color-secondary-foreground: var(--color-gray-8);
+  --color-muted: var(--color-gray-1);
+  --color-muted-foreground: var(--color-gray-7);
+  --color-subtle-foreground: var(--color-gray-6);
+  --color-placeholder: var(--color-gray-5);
+  --color-accent: var(--color-gray-2);
+  /* Faint hover for large areas (table rows) */
+  --color-accent-subtle: var(--color-gray-1);
+  --color-accent-foreground: var(--color-gray-8);
+  --color-accent-active: var(--color-gray-3);
+  --color-accent-strong: var(--color-gray-4);
+  
+  /* Solid gray: dark-gray filled button, bold gray badge */
+  --color-neutral: var(--color-gray-7);
+  --color-neutral-foreground: var(--color-gray-0);
+  --color-neutral-hover: var(--color-gray-6);
+  --color-neutral-active: var(--color-gray-8);
+  --color-neutral-subtle: var(--color-gray-3);
+  --color-neutral-subtle-foreground: var(--color-gray-7);
+
+  --color-destructive: var(--color-danger-4);
+  --color-destructive-foreground: var(--color-gray-0);
+  --color-destructive-hover: var(--color-danger-3);
+  --color-destructive-active: var(--color-danger-5);
+  --color-destructive-subtle: var(--color-danger-1);
+  --color-destructive-subtle-foreground: var(--color-danger-5);
+  --color-destructive-subtle-active: var(--color-danger-2);
+  --color-destructive-border: var(--color-danger-3);
+
+  --color-success: var(--color-success-4);
+  --color-success-foreground: var(--color-gray-0);
+  --color-success-hover: var(--color-success-3);
+  --color-success-active: var(--color-success-5);
+  --color-success-subtle: var(--color-success-1);
+  --color-success-subtle-foreground: var(--color-success-5);
+  --color-success-subtle-active: var(--color-success-2);
+  --color-success-border: var(--color-success-3);
+
+  --color-warning: var(--color-warning-3);
+  --color-warning-foreground: var(--color-gray-8);
+  --color-warning-hover: var(--color-warning-2);
+  --color-warning-active: var(--color-warning-4);
+  --color-warning-subtle: var(--color-warning-1);
+  --color-warning-subtle-foreground: var(--color-warning-5);
+  --color-warning-subtle-active: var(--color-warning-2);
+  --color-warning-border: var(--color-warning-3);
+
+  --color-ai: var(--color-purple-600);
+  --color-ai-foreground: var(--color-gray-0);
+  --color-ai-hover: var(--color-purple-500);
+  --color-ai-active: var(--color-purple-700);
+  --color-ai-subtle: var(--color-purple-50);
+  --color-ai-subtle-foreground: var(--color-purple-700);
+  --color-ai-subtle-active: var(--color-purple-100);
+  --color-ai-border: var(--color-purple-300);
+
+  --color-border: var(--color-gray-3);
+  /* Lighter hairline: table row rules */
+  --color-border-subtle: var(--color-gray-2);
+  --color-input: var(--color-gray-4);
+  --color-ring: var(--color-primary-4);
+  --color-ring-subtle: var(--color-primary-1);
+  /* 2px focus outline on small controls (checkbox, radio) */
+  --color-ring-outline: var(--color-primary-2);
+
+  --color-disabled: var(--color-gray-2);
+  --color-disabled-foreground: var(--color-gray-4);
+  --color-inverse: var(--color-gray-9);
+  --color-inverse-foreground: var(--color-gray-0);
+  --color-overlay: rgba(50, 60, 77, 0.6);
+  /* Base for custom shadows: color-mix(in srgb, var(--color-shadow) 12%, transparent) */
+  --color-shadow: var(--color-gray-9);
+
+  /* Box shadow — lives here so `.light` restores it inside a `.dark` subtree. */
+  --shadow-1: 0px 1px 2px rgba(29, 41, 57, 0.07);
+  --shadow-2: 0px 1px 2px rgba(29, 41, 57, 0.04), 0px 2px 8px rgba(29, 41, 57, 0.08);
+  --shadow-3: 0px 2px 8px rgba(29, 41, 57, 0.08), 0px 8px 24px rgba(29, 41, 57, 0.12);
+  --shadow-4: 0px 4px 8px rgba(29, 41, 57, 0.08), 0px 16px 48px rgba(29, 41, 57, 0.16);
+
+  /* Roles from anduin.design that ACL had no token for (added in 0.0.65), with
+     the design's own light values. Nothing in ACL reads them yet except the
+     table header; they are here so apps can build against the design's names. */
+  /* The page behind cards in a card layout, and quiet fills a step below a card
+     (dropzone, PDF backdrop). Same as `muted` in both themes. */
+  --color-canvas: var(--color-gray-1);
+  /* A table's header row: gray-1 in light, gray-8 in dark (a step lighter than the gray-9 rows) */
+  --color-table-header: var(--color-gray-1);
+  /* Hover and selection, translucent so it reads on any surface. ACL's own `accent`
+     is the opaque equivalent on the page; use this where nothing scrolls beneath. */
+  --color-highlight: oklch(from var(--color-gray-8) l c h / 0.06);
+  /* A quieter line inside a surface that already has an edge. Same as `border-subtle`. */
+  --color-border-muted: var(--color-gray-2);
+  /* `-icon`: an intent-coloured icon, dot or marker on the page or on the intent's
+     tint: lighter than the tint's text, and 3:1 on both surfaces in both themes */
+  --color-primary-icon: var(--color-primary-4);
+  --color-destructive-icon: var(--color-danger-4);
+  --color-success-icon: color-mix(in oklab, var(--color-success-4), var(--color-success-5));
+  --color-warning-icon: color-mix(in oklab, var(--color-warning-4), var(--color-warning-5));
+  --color-ai-icon: var(--color-purple-500);
+  --color-neutral-icon: var(--color-gray-7);
+  /* The AI spinner's halo: none on a light page, a faint blue glow on a dark one */
+  --color-ai-glow: transparent;
+}
+
+/* @semantic-dark
+ * Ported from anduin.design (`web/css/src/tw/input.css` on its feat/dark-mode
+ * branch), which is the authoritative dark palette. 0.0.64 shipped ACL's own
+ * first pass instead, where surfaces stepped lighter as they rose
+ * (muted < background < card < popover) and every value was a literal oklch().
+ * That made each dialog, menu, dropdown panel and toast draw visibly lighter
+ * than the page, and none of its values came from ACL's palette, so a brand
+ * that overrides a ramp never reached dark mode.
+ *
+ * The design's reasoning, kept here:
+ * - One surface. Page, card and popover are all gray-9. Raised and floating
+ *   surfaces stand out by an edge (`popover-border` = the white-10% border,
+ *   drawn as an inset outline) and a black shadow, not by lightness. A gray-9
+ *   shadow would vanish on a gray-9 page, hence black.
+ * - Every value aliases ACL's own ramps (`var(--color-gray-9)`,
+ *   `oklch(from var(--color-primary-4) l c h / 0.16)`), so a brand theme that
+ *   overrides a ramp carries through. ACL has no step below gray-9, so the
+ *   sunken `muted` is gray-9 mixed with 6% black.
+ * - Fills keep the brand ramps, exactly as in light: their on-fill contrast is
+ *   unchanged. Intent text on a plain surface is `-subtle-foreground` (step 2);
+ *   the bare fill token as text (e.g. an outlined primary button) is about
+ *   3:1 on gray-9 and is a known limit of reading a fill as ink.
+ * - Text: gray-2; secondary text halfway between gray-4 and gray-5 (5.6:1 on
+ *   gray-8, ~7:1 on gray-9); gray-5 is the quietest tier that still holds
+ *   4.5:1, so `subtle-foreground` and `placeholder` share it.
+ * - Lines are translucent white (10% / 6%), so they show on gray-8 fills too,
+ *   where a solid gray-8 line vanished.
+ *
+ * Mapped by role, not by name (the design's names differ from ACL's):
+ *   design `canvas` (sunken page)       → ACL `muted`
+ *   design `muted` (gray-2/gray-8 fill) → ACL `secondary`, `disabled`, and the
+ *                                         pressed/selected `accent-active`
+ *   design `highlight` (hover)          → ACL `accent`, `accent-subtle`
+ *   design `placeholder` (gray-5)       → ACL `placeholder`, `subtle-foreground`
+ *
+ * One deliberate difference: the design's `highlight` and intent tints are
+ * translucent. ACL's components were written against opaque fills: a table
+ * row's hover and selected colours are inherited by its sticky frozen cells,
+ * the sticky header takes `accent` on hover, and a calendar range stacks
+ * `-subtle-active` over `-subtle`. A translucent fill there lets scrolled
+ * content show through, or doubles up. So every ACL *fill* takes the design
+ * value composited over the gray-9 surface:
+ * `color-mix(in srgb, var(--color-gray-9), X N%)` is what the browser paints
+ * for X at N% alpha over gray-9, so on the shared page/card/popover surface it
+ * is the same colour, and it stays opaque. The design's translucent originals
+ * are exposed unchanged as the additive `--color-highlight` (and lines stay
+ * translucent, as in the design: nothing scrolls under a 1px line).
+ */
+.dark, [data-theme="dark"] {
+  color-scheme: dark;
+
+  /* One surface for page, cards and popovers (design: background/card/popover) */
+  --color-background: var(--color-gray-9);
+  --color-foreground: var(--color-gray-2);
+  --color-card: var(--color-gray-9);
+  --color-card-foreground: var(--color-gray-2);
+  --color-popover: var(--color-gray-9);
+  --color-popover-foreground: var(--color-gray-2);
+  /* The design's popover-border: the white-10% border, so floating layers get their edge */
+  --color-popover-border: var(--color-border);
+
+  /* Fills keep the brand ramps (same as light); tints are step 4 at 16% over gray-9 */
+  --color-primary: var(--color-primary-4);
+  --color-primary-foreground: var(--color-gray-0);
+  --color-primary-hover: var(--color-primary-3);
+  --color-primary-active: var(--color-primary-5);
+  --color-primary-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-primary-4) 16%);
+  --color-primary-subtle-foreground: var(--color-primary-2);
+  /* No design counterpart: the pressed tint, a stronger 28% of the same fill */
+  --color-primary-subtle-active: color-mix(in srgb, var(--color-gray-9), var(--color-primary-4) 28%);
+  /* No design counterpart as a token; the design's outlined buttons draw their colour at 60% */
+  --color-primary-border: oklch(from var(--color-primary-4) l c h / 0.6);
+
+  /* design `muted`: the gray-8 read-only / neutral fill */
+  --color-secondary: var(--color-gray-8);
+  --color-secondary-foreground: var(--color-gray-2);
+  /* design `canvas`: the sunken surface, a step below the gray-9 page */
+  --color-muted: color-mix(in oklab, var(--color-gray-9), black 6%);
+  --color-muted-foreground: color-mix(in oklab, var(--color-gray-4), var(--color-gray-5));
+  /* design `placeholder`: the quietest tier that still holds 4.5:1 on gray-9 */
+  --color-subtle-foreground: var(--color-gray-5);
+  --color-placeholder: var(--color-gray-5);
+  /* design `highlight` (white 5%), opaque over gray-9: every one of accent's uses is a hover */
+  --color-accent: color-mix(in srgb, var(--color-gray-9), var(--color-gray-0) 5%);
+  --color-accent-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-gray-0) 5%);
+  --color-accent-foreground: var(--color-gray-2);
+  /* Pressed / selected: the design's gray-8 `muted`, which is also the gray tag
+     (`neutral-subtle`), as in light where both are gray-3 */
+  --color-accent-active: var(--color-gray-8);
+  /* No design counterpart: one step past gray-8, toward gray-7 */
+  --color-accent-strong: color-mix(in oklab, var(--color-gray-8), var(--color-gray-7) 35%);
+
+  /* The design's neutral intent: the fill keeps gray-7 + white, the tint is gray-8 */
+  --color-neutral: var(--color-gray-7);
+  --color-neutral-foreground: var(--color-gray-0);
+  --color-neutral-hover: var(--color-gray-6);
+  --color-neutral-active: var(--color-gray-8);
+  --color-neutral-subtle: var(--color-gray-8);
+  --color-neutral-subtle-foreground: var(--color-gray-2);
+
+  --color-destructive: var(--color-danger-4);
+  --color-destructive-foreground: var(--color-gray-0);
+  --color-destructive-hover: var(--color-danger-3);
+  --color-destructive-active: var(--color-danger-5);
+  --color-destructive-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-danger-4) 16%);
+  --color-destructive-subtle-foreground: var(--color-danger-2);
+  --color-destructive-subtle-active: color-mix(in srgb, var(--color-gray-9), var(--color-danger-4) 28%);
+  --color-destructive-border: oklch(from var(--color-danger-4) l c h / 0.6);
+
+  --color-success: var(--color-success-4);
+  --color-success-foreground: var(--color-gray-0);
+  --color-success-hover: var(--color-success-3);
+  --color-success-active: var(--color-success-5);
+  --color-success-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-success-4) 16%);
+  --color-success-subtle-foreground: var(--color-success-2);
+  --color-success-subtle-active: color-mix(in srgb, var(--color-gray-9), var(--color-success-4) 28%);
+  --color-success-border: oklch(from var(--color-success-4) l c h / 0.6);
+
+  /* Warning's fill is step 3 with gray-8 text in both modes; its tint is step 4, as in the design */
+  --color-warning: var(--color-warning-3);
+  --color-warning-foreground: var(--color-gray-8);
+  --color-warning-hover: var(--color-warning-2);
+  --color-warning-active: var(--color-warning-4);
+  --color-warning-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-warning-4) 16%);
+  --color-warning-subtle-foreground: var(--color-warning-2);
+  --color-warning-subtle-active: color-mix(in srgb, var(--color-gray-9), var(--color-warning-4) 28%);
+  --color-warning-border: oklch(from var(--color-warning-4) l c h / 0.6);
+
+  /* The design's purple intent */
+  --color-ai: var(--color-purple-600);
+  --color-ai-foreground: var(--color-gray-0);
+  --color-ai-hover: var(--color-purple-500);
+  --color-ai-active: var(--color-purple-700);
+  --color-ai-subtle: color-mix(in srgb, var(--color-gray-9), var(--color-purple-600) 16%);
+  --color-ai-subtle-foreground: var(--color-purple-200);
+  --color-ai-subtle-active: color-mix(in srgb, var(--color-gray-9), var(--color-purple-600) 28%);
+  --color-ai-border: oklch(from var(--color-purple-600) l c h / 0.6);
+
+  /* White at 10% (shadcn's dark border): ~1.36:1 on any dark surface, so it
+     still shows on gray-8 fills, where a solid gray-8 line vanished */
+  --color-border: oklch(from var(--color-gray-0) l c h / 0.1);
+  /* design `border-muted`: row rules inside a surface that already has an edge */
+  --color-border-subtle: oklch(from var(--color-gray-0) l c h / 0.06);
+  --color-input: var(--color-gray-7);
+  --color-ring: var(--color-primary-4);
+  /* No design counterparts: the focus glow and small-control outline, as the ring at 30% / 60% */
+  --color-ring-subtle: oklch(from var(--color-primary-4) l c h / 0.3);
+  --color-ring-outline: oklch(from var(--color-primary-4) l c h / 0.6);
+
+  /* The design keeps read-only and disabled on its gray-8 fills; as in light, disabled = secondary */
+  --color-disabled: var(--color-gray-8);
+  --color-disabled-foreground: var(--color-gray-7);
+  /* No design counterpart. The design's tooltip stays gray-9 and takes the border; ACL's
+     tooltip draws no edge, so inverse flips instead: the foreground colour as a surface */
+  --color-inverse: var(--color-gray-2);
+  --color-inverse-foreground: var(--color-gray-9);
+  /* The scrim has to darken the page, so black rather than a lifted gray */
+  --color-overlay: oklch(0 0 0 / 0.4);
+  --color-shadow: oklch(0 0 0);
+
+  /* The design's extra roles */
+  --color-canvas: color-mix(in oklab, var(--color-gray-9), black 6%);
+  --color-table-header: var(--color-gray-8);
+  --color-highlight: oklch(from var(--color-gray-0) l c h / 0.05);
+  --color-border-muted: oklch(from var(--color-gray-0) l c h / 0.06);
+  --color-primary-icon: var(--color-primary-3);
+  --color-destructive-icon: var(--color-danger-3);
+  --color-success-icon: var(--color-success-3);
+  --color-warning-icon: var(--color-warning-4);
+  --color-ai-icon: var(--color-purple-400);
+  --color-neutral-icon: var(--color-gray-4);
+  --color-ai-glow: oklch(from var(--color-primary-3) l c h / 0.25);
+
+  /* The design's shadows: the light alphas, tinted black. They barely show on
+     gray-9, which is why floating surfaces carry the white-10% edge. */
+  --shadow-1: 0px 1px 2px oklch(from var(--color-shadow) l c h / 0.07);
+  --shadow-2: 0px 1px 2px oklch(from var(--color-shadow) l c h / 0.04), 0px 2px 8px oklch(from var(--color-shadow) l c h / 0.08);
+  --shadow-3: 0px 2px 8px oklch(from var(--color-shadow) l c h / 0.08), 0px 8px 24px oklch(from var(--color-shadow) l c h / 0.12);
+  --shadow-4: 0px 4px 8px oklch(from var(--color-shadow) l c h / 0.08), 0px 16px 48px oklch(from var(--color-shadow) l c h / 0.16);
+}
+
 
 body {
   font-family: var(--font-sans);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duyluonganduin/acl-web-components",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "type": "module",
   "repository": {
     "type": "git",