@sckyzo/cosmos-theme 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to `@sckyzo/cosmos-theme` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-theme@0.2.0...@sckyzo/cosmos-theme@0.3.0) (2026-10-27)
+
+
+### Features
+
+* **theme:** always emit the colors the charts read ([38fed2a](https://github.com/SckyzO/cosmos/commit/38fed2a70a6f9729b856f8911cdcd104d360867f))
+
 ## [0.2.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-theme@0.1.0...@sckyzo/cosmos-theme@0.2.0) (2026-10-21)
 
 

package/README.md

@@ -72,6 +72,37 @@ Every theme × accent pair meets WCAG AA for body text, links and white text on
 the accent. `pnpm --filter @sckyzo/cosmos-theme test` runs the contrast check
 (`scripts/check-contrast.mjs`) against the CSS files.
 
+## Focus indicator
+
+Four Tailwind utilities, shipped with `@sckyzo/cosmos-theme/tailwind`, give
+every control the same keyboard focus look: a **solid accent indicator** plus
+the `--shadow-focus-ring` halo (12% of the accent). The halo alone is too faint
+to count: the solid part is what reaches 3:1 against the surface (WCAG 1.4.11;
+`brand-500` is checked on every theme × accent pair by `pnpm test`).
+
+| Utility                     | Paints                      | For                                                                   |
+| --------------------------- | --------------------------- | --------------------------------------------------------------------- |
+| `focus-indicator`           | 2px `brand-500` ring + halo | buttons, links, toggles, tabs, menu items, cards…                     |
+| `field-focus`               | `brand-500` border + halo   | text inputs, textarea, select and their wrappers                      |
+| `field-focus-error`         | `red-500` border + red halo | the same fields in error (`--shadow-focus-ring-error`)                |
+| `focus-indicator-on-accent` | 2px white ring, no halo     | a control filled with `brand-500`, where the accent ring would vanish |
+
+They hold no state: put the variant that fits in front of them.
+
+```html
+<button class="focus-visible:focus-indicator">Save</button>
+<input class="focus:field-focus border border-gray-200" />
+<div class="focus-within:field-focus border border-gray-200"><input /></div>
+<!-- a control drawn by a sibling of a visually hidden input -->
+<input type="checkbox" class="peer sr-only" />
+<span class="peer-focus-visible:focus-indicator"></span>
+```
+
+There is no ring offset. Add `ring-inset` where an ancestor clips with
+`overflow-hidden`, or a neighbour covers the outer ring. The utilities use
+`outline-hidden`, so the indicator survives forced-colors mode, where box
+shadows are not painted.
+
 ## Fonts & text size
 
 Two more settings on `<html>`, both optional:
@@ -103,13 +134,17 @@ Both attributes also work on an element below `<html>`, for one part of a page.
 
 See [`css/tailwind-tokens.css`](css/tailwind-tokens.css) for the full source.
 
+The brand palette, the status colors and the semantic colors are always in the CSS (`@theme static`): Tailwind
+only emits a theme variable that a utility uses, and the charts read these as plain `var(--color-…)`.
+
 Categories:
 
 - **Brand palette** : `--color-brand-25` to `--color-brand-950`
+- **Chart series** : `--color-chart-2` to `--color-chart-8`, the series colors after the accent (the first series is `--color-brand-500`). Each accent lists its own seven, skipping the hues that look like it
 - **Semantic colors** : `--color-success-*`, `--color-error-*`, `--color-warning-*`
 - **Status** : `--color-status-{ok,warn,crit,unknown}`
 - **Typography** : `--font-sans` (Outfit), `--font-mono` (JetBrains Mono), `--text-2xs` (11px), `--text-3xs` (10px)
-- **Shadows** : `--shadow-card`, `--shadow-card-hover`
+- **Shadows** : `--shadow-card`, `--shadow-card-hover`, `--shadow-focus-ring` and `--shadow-focus-ring-error` (the focus halos)
 - **Layout vars** (theme-aware): `--color-bg-{base,panel,elevated}`, `--color-text-{base,primary,secondary,muted}`, `--color-border`, `--color-accent`
 - **Code highlighting** (theme-aware): `--color-code-foreground` and `--color-code-token-*` (keyword, string, comment, constant, function, parameter, string-expression, punctuation, link, inserted, deleted, changed). The names match Shiki's CSS variables theme with `variablePrefix: '--color-code-'`. Each one keeps 4.5:1 on CodeBlock's background in all four themes (checked by `pnpm test`).
 

package/css/css-vars.css

@@ -37,7 +37,7 @@
   --color-text-base: #101828;
   --color-text-primary: #101828;
   --color-text-secondary: #667085;
-  --color-text-muted: #98a2b3;
+  --color-text-muted: #677185;
 
   /* ── Code ──────────────────────────────────────────────────────────────── */
   /* Syntax highlighting on CodeBlock (gray-50 / gray-900), read by Shiki's
@@ -58,6 +58,19 @@
 
   /* ── Accent ────────────────────────────────────────────────────────────── */
   --color-accent: var(--color-brand-500);
+
+  /* ── Chart series ──────────────────────────────────────────────────────── */
+  /* Series 2 to 8 of the charts, after the accent (series 1 is
+   * --color-brand-500, which the accents redefine). Each accent below lists its
+   * own seven: the hues that look like it are skipped and a reserve takes
+   * their place, so no series is mistaken for the accent. */
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #8b5cf6;
+  --color-chart-4: #ec4899;
+  --color-chart-5: #64748b;
+  --color-chart-6: #f97316;
+  --color-chart-7: #14b8a6;
+  --color-chart-8: #84cc16;
 }
 
 /* ── Themes ────────────────────────────────────────────────────────────── */
@@ -72,7 +85,7 @@
   --color-text-base: #1e1711;
   --color-text-primary: #1e1711;
   --color-text-secondary: #746656;
-  --color-text-muted: #a39684;
+  --color-text-muted: #7a6c5b;
 
   /* ── Code ──────────────────────────────────────────────────────────────── */
   /* Syntax highlighting on CodeBlock (gray-50 / gray-900), read by Shiki's
@@ -155,7 +168,7 @@
   --color-text-base: #e4e7ec;
   --color-text-primary: #fff;
   --color-text-secondary: #98a2b3;
-  --color-text-muted: #667085;
+  --color-text-muted: #8792a5;
 
   /* ── Code ──────────────────────────────────────────────────────────────── */
   /* Syntax highlighting on CodeBlock (gray-50 / gray-900), read by Shiki's
@@ -192,6 +205,13 @@
   --color-brand-800: #2f25ab;
   --color-brand-900: #24257a;
   --color-brand-950: #160b63;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #ec4899;
+  --color-chart-4: #64748b;
+  --color-chart-5: #f97316;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #d946ef;
 }
 
 [data-accent='violet'] {
@@ -201,12 +221,19 @@
   --color-brand-200: #d8ceff;
   --color-brand-300: #c0abff;
   --color-brand-400: #a57eff;
-  --color-brand-500: #8745f1;
+  --color-brand-500: #8a49f5;
   --color-brand-600: #752cdb;
   --color-brand-700: #6508c6;
   --color-brand-800: #5200a4;
   --color-brand-900: #3f097e;
   --color-brand-950: #2b005b;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #ec4899;
+  --color-chart-4: #64748b;
+  --color-chart-5: #f97316;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #3b82f6;
 }
 
 [data-accent='purple'] {
@@ -216,7 +243,7 @@
   --color-brand-200: #f0c2ff;
   --color-brand-300: #e696ff;
   --color-brand-400: #d55bf8;
-  --color-brand-500: #ad2ecf;
+  --color-brand-500: #b234d4;
   --color-brand-600: #990aba;
   --color-brand-700: #81019e;
   --color-brand-800: #690181;
@@ -231,12 +258,19 @@
   --color-brand-200: #ffc3d2;
   --color-brand-300: #ff96b4;
   --color-brand-400: #ff4e90;
-  --color-brand-500: #d4166d;
+  --color-brand-500: #d81e70;
   --color-brand-600: #b8005c;
   --color-brand-700: #9b004c;
   --color-brand-800: #7f013d;
   --color-brand-900: #64002f;
   --color-brand-950: #45001e;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #8b5cf6;
+  --color-chart-4: #64748b;
+  --color-chart-5: #f97316;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #3b82f6;
 }
 
 [data-accent='teal'] {
@@ -252,6 +286,13 @@
   --color-brand-800: #024a43;
   --color-brand-900: #003833;
   --color-brand-950: #002723;
+  --color-chart-2: #8b5cf6;
+  --color-chart-3: #ec4899;
+  --color-chart-4: #64748b;
+  --color-chart-5: #f97316;
+  --color-chart-6: #84cc16;
+  --color-chart-7: #3b82f6;
+  --color-chart-8: #d946ef;
 }
 
 [data-accent='cyan'] {
@@ -267,6 +308,13 @@
   --color-brand-800: #014759;
   --color-brand-900: #003645;
   --color-brand-950: #002631;
+  --color-chart-2: #8b5cf6;
+  --color-chart-3: #ec4899;
+  --color-chart-4: #64748b;
+  --color-chart-5: #f97316;
+  --color-chart-6: #84cc16;
+  --color-chart-7: #3b82f6;
+  --color-chart-8: #d946ef;
 }
 
 [data-accent='graphite'] {
@@ -282,6 +330,13 @@
   --color-brand-800: #3c414b;
   --color-brand-900: #2e3138;
   --color-brand-950: #1f2228;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #8b5cf6;
+  --color-chart-4: #ec4899;
+  --color-chart-5: #f97316;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #3b82f6;
 }
 
 [data-accent='red'] {
@@ -291,7 +346,7 @@
   --color-brand-200: #ffc6c0;
   --color-brand-300: #ff9b94;
   --color-brand-400: #ff5a57;
-  --color-brand-500: #db192a;
+  --color-brand-500: #de1f2d;
   --color-brand-600: #be021e;
   --color-brand-700: #a00118;
   --color-brand-800: #830011;
@@ -312,6 +367,13 @@
   --color-brand-800: #712b00;
   --color-brand-900: #592000;
   --color-brand-950: #3d1300;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #8b5cf6;
+  --color-chart-4: #ec4899;
+  --color-chart-5: #64748b;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #3b82f6;
 }
 
 [data-accent='amber'] {
@@ -327,6 +389,13 @@
   --color-brand-800: #5d3900;
   --color-brand-900: #482b00;
   --color-brand-950: #321c00;
+  --color-chart-2: #06b6d4;
+  --color-chart-3: #8b5cf6;
+  --color-chart-4: #ec4899;
+  --color-chart-5: #64748b;
+  --color-chart-6: #14b8a6;
+  --color-chart-7: #84cc16;
+  --color-chart-8: #3b82f6;
 }
 
 [data-accent='green'] {

package/css/tailwind-tokens.css

@@ -10,38 +10,23 @@
  */
 
 /* Tailwind dark variant: respond to the .dark / .deep-blue class set by the consumer's
-   ThemeContext, instead of (or in addition to) prefers-color-scheme. */
-@custom-variant dark (&:is(.dark, .dark *, .deep-blue, .deep-blue *));
-
-@theme {
-  /* ── Typography ─────────────────────────────────────────────────────────── */
-  --font-sans: 'Outfit', system-ui, sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-
-  /* Sizes under text-xs (12px) for dense labels: 11px and 10px. Without a
-     --line-height they set only font-size, like text-[11px] would, and the
-     text size setting in css-vars.css can scale them. */
-  --text-2xs: 0.6875rem;
-  --text-3xs: 0.625rem;
+   ThemeContext, instead of (or in addition to) prefers-color-scheme.
+   `:where()` keeps the variant at zero specificity, as Tailwind documents it: with `:is()` it
+   weighed as much as `focus:` or `hover:` and, emitted later, `dark:border-gray-700` beat
+   `focus:border-brand-500`, so form controls lost their focus border in the dark themes. */
+@custom-variant dark (&:where(.dark, .dark *, .deep-blue, .deep-blue *));
 
+/* The colors the charts read as plain CSS variables (var(--color-brand-500),
+ * var(--color-status-warn)…), with no utility behind them. Tailwind only emits
+ * a theme variable that a utility uses, so these are `static`: always in the
+ * CSS, whatever the app's classes are. */
+@theme static {
   /* ── Status colors — health indicators, badges, alerts ─────────────────── */
   --color-status-ok: #10b981;
   --color-status-warn: #f59e0b;
   --color-status-crit: #ef4444;
   --color-status-unknown: #6b7280;
 
-  /* ── Card shadows — work on both light and dark backgrounds ────────────── */
-  --shadow-card: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
-  --shadow-card-hover: 0 10px 25px rgb(0 0 0 / 50%), 0 4px 6px rgb(0 0 0 / 20%);
-
-  /* ── TailAdmin elevation shadows (theme.shadow-{xs,sm,md,lg,xl}) ───────── */
-  --shadow-theme-xs: 0px 1px 2px 0px rgb(16 24 40 / 5%);
-  --shadow-theme-sm: 0px 1px 3px 0px rgb(16 24 40 / 10%), 0px 1px 2px 0px rgb(16 24 40 / 6%);
-  --shadow-theme-md: 0px 4px 8px -2px rgb(16 24 40 / 10%), 0px 2px 4px -2px rgb(16 24 40 / 6%);
-  --shadow-theme-lg: 0px 12px 16px -4px rgb(16 24 40 / 8%), 0px 4px 6px -2px rgb(16 24 40 / 3%);
-  --shadow-theme-xl: 0px 20px 24px -4px rgb(16 24 40 / 8%), 0px 8px 8px -4px rgb(16 24 40 / 3%);
-  --shadow-focus-ring: 0px 0px 0px 4px color-mix(in srgb, var(--color-brand-500) 12%, transparent);
-
   /* ── Brand palette (TailAdmin blue) — [data-accent] in css-vars.css swaps it ── */
   --color-brand-25: #f2f7ff;
   --color-brand-50: #ecf3ff;
@@ -56,9 +41,6 @@
   --color-brand-900: #262e89;
   --color-brand-950: #161950;
 
-  /* Dark gray aligned with Tailwind gray-900 — keeps SectionCard bg matching body bg */
-  --color-gray-dark: #111827;
-
   /* ── Semantic colors ───────────────────────────────────────────────────── */
   --color-success-25: #f6fef9;
   --color-success-50: #ecfdf3;
@@ -77,8 +59,79 @@
   --color-warning-100: #fef0c7;
   --color-warning-500: #f79009;
   --color-warning-600: #dc6803;
+}
+
+@theme {
+  /* ── Typography ─────────────────────────────────────────────────────────── */
+  --font-sans: 'Outfit', system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* Sizes under text-xs (12px) for dense labels: 11px and 10px. Without a
+     --line-height they set only font-size, like text-[11px] would, and the
+     text size setting in css-vars.css can scale them. */
+  --text-2xs: 0.6875rem;
+  --text-3xs: 0.625rem;
+
+  /* ── Card shadows — work on both light and dark backgrounds ────────────── */
+  --shadow-card: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
+  --shadow-card-hover: 0 10px 25px rgb(0 0 0 / 50%), 0 4px 6px rgb(0 0 0 / 20%);
+
+  /* ── TailAdmin elevation shadows (theme.shadow-{xs,sm,md,lg,xl}) ───────── */
+  --shadow-theme-xs: 0px 1px 2px 0px rgb(16 24 40 / 5%);
+  --shadow-theme-sm: 0px 1px 3px 0px rgb(16 24 40 / 10%), 0px 1px 2px 0px rgb(16 24 40 / 6%);
+  --shadow-theme-md: 0px 4px 8px -2px rgb(16 24 40 / 10%), 0px 2px 4px -2px rgb(16 24 40 / 6%);
+  --shadow-theme-lg: 0px 12px 16px -4px rgb(16 24 40 / 8%), 0px 4px 6px -2px rgb(16 24 40 / 3%);
+  --shadow-theme-xl: 0px 20px 24px -4px rgb(16 24 40 / 8%), 0px 8px 8px -4px rgb(16 24 40 / 3%);
+  --shadow-focus-ring: 0px 0px 0px 4px color-mix(in srgb, var(--color-brand-500) 12%, transparent);
+  --shadow-focus-ring-error: 0 0 0 4px color-mix(in srgb, var(--color-red-500) 12%, transparent);
+
+  /* Dark gray aligned with Tailwind gray-900 — keeps SectionCard bg matching body bg */
+  --color-gray-dark: #111827;
 
   /* ── Bridges: aliases that pull values from CSS vars (defined in css-vars.css)
      so utilities like bg-accent-primary stay in sync with theme switcher. */
   --color-accent-primary: var(--color-accent);
 }
+
+/* ── Focus indicator ───────────────────────────────────────────────────────
+ * One focus look for every control: a solid accent indicator plus the
+ * --shadow-focus-ring halo. The halo is 12% of the accent, too faint to be the
+ * only cue, so the solid part is what carries WCAG 1.4.11 (brand-500 reaches
+ * 3:1 on the surfaces of the four themes, see scripts/check-contrast.mjs).
+ *
+ * The utilities hold no state: put the variant that fits in front of them.
+ *
+ *   focus-visible:focus-indicator    a button, link, toggle, tab, menu item…:
+ *                                    2px accent ring + halo, keyboard focus only
+ *   peer-focus-visible:…, group-focus-visible:…, focus-within:…
+ *                                    the same, for a control drawn by a sibling
+ *                                    or a wrapper (checkbox, radio, card)
+ *   focus:field-focus                a text field: accent border + halo
+ *   focus-within:field-focus         the same on a wrapper of the field
+ *   focus:field-focus-error          the field in error: red border + red halo
+ *   focus-visible:focus-indicator-on-accent
+ *                                    a control filled with brand-500 (the active
+ *                                    segment, the selected day), where a brand
+ *                                    ring would vanish: a 2px white ring, no halo
+ *                                    (white on brand-500 is checked at 4.5:1)
+ *
+ * No ring offset. Add ring-inset where an ancestor clips (overflow-hidden) or a
+ * neighbour hides the outer ring.
+ *
+ * outline-hidden hides the browser outline but keeps it in forced-colors mode,
+ * where box-shadow is not painted: the indicator never disappears there. */
+@utility focus-indicator {
+  @apply ring-brand-500 shadow-focus-ring ring-2 outline-hidden;
+}
+
+@utility field-focus {
+  @apply border-brand-500 shadow-focus-ring outline-hidden;
+}
+
+@utility field-focus-error {
+  @apply shadow-focus-ring-error border-red-500 outline-hidden;
+}
+
+@utility focus-indicator-on-accent {
+  @apply ring-2 ring-white outline-hidden;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sckyzo/cosmos-theme",
-  "version": "0.2.0",
-  "description": "Tailwind 4 theme and design tokens for the Cosmos design system — palette, typography, radii and light/dark CSS variables.",
+  "version": "0.3.0",
+  "description": "Tailwind 4 theme and design tokens for the Cosmos design system — palette, typography, radii and CSS variables for its light, sand, dark and deep-blue themes.",
   "license": "MIT",
   "author": "SckyzO",
   "homepage": "https://github.com/SckyzO/cosmos/tree/main/packages/theme",