@adea-ai/ui 0.99.1 → 0.99.2

package/src/styles/theme.css

@@ -16,9 +16,10 @@
  *     lightness step reads as the same step in every hue and a re-hue does not
  *     need its ramp re-derived by eye.
  *   - **`@adea-ai/themes` supplies the values.** The two default themes are composed
- *     there from upstream palettes — Aardvark Ink's canvas and greyscale for Adea
- *     Dark, Nord Light's for Adea Light, and GitHub's hues for both — and normalized
- *     against measured contrast floors. The colour declarations in sections 1 and 2
+ *     there from upstream palettes — GitHub Dark Default's canvas and greyscale,
+ *     re-greyed to violet, for Adea Dark; GitHub Light Default's white canvas for Adea
+ *     Light; and GitHub's dark hues for both — and normalized against measured
+ *     contrast floors. The colour declarations in sections 1 and 2
  *     are *generated* from that catalogue (`bun run theme:build`) rather than written
  *     here; everything else in this file is this system's own.
  *
@@ -41,11 +42,11 @@
  * ========================================================================== */
 
 /* ---------------------------------------------------------------------------
- * 1. Colour — light theme (the default)
+ * 1. Colour — light theme (the `:root` fallback; Storybook opens dark)
  *
- * Contrast: body text 8.6:1 on the canvas and 7.7:1 on a card, `--muted-foreground`
- * 5.5:1 on the canvas and 5.0:1 on a card, `--primary-foreground` on `--primary`
- * 5.9:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
+ * Contrast: body text 15.8:1 on the canvas and 14.3:1 on a card, `--muted-foreground`
+ * 6.2:1 on the canvas and 5.6:1 on a card and the sidebar, `--primary-foreground` on
+ * `--primary` 6.1:1. Measured rather than estimated; `tests/tokens.test.ts` asserts each pairing.
  * ------------------------------------------------------------------------- */
 :root {
   /* @generated theme:root — run `bun run theme:build` after changing the catalogue */
@@ -176,13 +177,15 @@
 /* ---------------------------------------------------------------------------
  * 2. Colour — dark theme
  *
- * adea's dark theme is a *soft* neutral rather than a near-black: the canvas is a
- * light grey and the primary is near-white. That is the product's existing look,
- * and it is deliberately not the near-black blue-tinted dark of the donor this
- * system's structure came from.
+ * A near-black violet-grey canvas — GitHub Dark Default's greyscale with its chroma
+ * halved and its hue turned from blue to violet — and a bright violet primary that
+ * carries a near-black label. The tint is what pairs it with the light theme's
+ * violet; it is deliberately not the blue-tinted dark of the donor this system's
+ * structure came from.
  *
- * Contrast: body text 14.9:1, `--muted-foreground` 6.1:1 on the canvas and 4.9:1
- * on a card, `--primary-foreground` on `--primary` 10.4:1.
+ * Contrast: body text 16.0:1 on the canvas and 14.9:1 on a card,
+ * `--muted-foreground` 7.0:1 on the canvas and 6.5:1 on a card and the sidebar,
+ * `--primary-foreground` on `--primary` 7.5:1.
  * ------------------------------------------------------------------------- */
 .dark {
   /* @generated theme:dark — run `bun run theme:build` after changing the catalogue */
@@ -304,7 +307,7 @@
 /* ---------------------------------------------------------------------------
  * 3. The accent axis
  *
- * adea's six accents, as a selection rather than a constant. `data-accent` sits on
+ * adea's six accent presets, as a selection rather than a constant. `data-accent` sits on
  * the same element as `dark` — in both applications that is `<html>` — and each
  * block overrides the roles an accent owns: the interactive primary, its label,
  * its hover rung, its tint and the focus ring.
@@ -319,7 +322,7 @@
  *      for exactly this reason: a bright violet in dark mode carries a black
  *      label, and the same accent's deep light-mode form carries a white one.
  *
- * `theme` (the default) is the monochrome primary above and needs no block.
+ * `theme` (the default) is the theme's own primary above and needs no block.
  * ------------------------------------------------------------------------- */
 
 /* @generated accents — run `bun run theme:build` after changing the catalogue */
@@ -490,23 +493,6 @@
   --ui-word-spacing: -2.5px;
 }
 
-/* The default, and it has to be declared *above* the blocks above.
- *
- * `:root` and `[data-font='…']` have the same specificity, so the later one wins
- * outright. With the default written after them — which is where it naturally
- * belongs, next to the stacks it references — every `[data-font]` block was
- * dead: all five typefaces resolved to Space Grotesk while the toolbar reported a
- * different selection.
- *
- * The references resolve fine from here even though `--font-family-*` is declared
- * further down, because a custom property is resolved where it is used rather than
- * where it is declared. The ordering that matters is between two declarations of
- * the *same* property, and there is only one of those below.
- *
- * `tests/appearance-axes.test.ts` asserts this order, because "the block is above
- * the default" is invisible to review and to every behavioural test.
- */
-
 /* ---------------------------------------------------------------------------
  * 4. Non-colour scales
  *
@@ -596,12 +582,6 @@
   --row-height-md: 2rem;
   --row-height-lg: 2.25rem;
 
-  /* Space Grotesk is the default because it is the face the visual language was
-     drawn against: the donor this system's structure comes from sets it, and its
-     slightly narrow, geometric forms are part of the look. The *selection* that
-     picks between it and the other four is the `:root` block above, which has to
-     precede every `[data-font]` block for the reason given there. */
-
   /* Shell geometry. One place to change how wide a rail or sidebar is, so the two
      consumer apps cannot disagree. 56px keeps the icon column to its content:
      20px glyphs centred in a 36px row need less chrome than the 74px the donor's
@@ -621,9 +601,9 @@
   --tooltip-max-width: min(16rem, calc(100vw - 1.5rem));
 
   /* Shadows. Two parts on purpose: a tinted spread that reads as elevation, plus a
-     hairline that keeps an edge visible when the surface behind a panel is the
-     same colour as the panel — which is the light theme, where `--card` and
-     `--background` are both white. */
+     hairline that keeps an edge visible when the surface behind a panel is
+     nearly the same colour as the panel — which is the light theme, where `--card`
+     is one faint step off a white `--background`. */
   --shadow-2xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
   --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.06);
   --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06), 0 0 0 1px oklch(0 0 0 / 0.04);
@@ -631,8 +611,8 @@
   --shadow-lg: 0 12px 28px oklch(0 0 0 / 0.12);
   --shadow-xl: 0 20px 44px oklch(0 0 0 / 0.16);
 
-  /* Motion. Two durations cover the system: `fast` for a state change the user is
-     already watching, `normal` for an entrance. The easing is KiroCrew's entrance
+  /* Motion. Three durations cover the system: `fast` for a state change the user is
+     already watching, `normal` for an entrance, `slow` for a layout settle. The easing is KiroCrew's entrance
      curve — a fast start and a long settle, which reads as decisive rather than
      floaty. */
   --duration-fast: 120ms;