@sckyzo/cosmos-theme 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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)
+
+
+### Features
+
+* **theme:** add a data-font setting with five more fonts ([6135b66](https://github.com/SckyzO/cosmos/commit/6135b6681f669bdcd178b113fb7b0cbf82aef5d0)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
+* **theme:** add a data-text-size setting ([cd6ed5c](https://github.com/SckyzO/cosmos/commit/cd6ed5c07b15a9df12b56a3638ff0ca477cf1392)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
+* **theme:** add syntax highlighting tokens ([8589ef1](https://github.com/SckyzO/cosmos/commit/8589ef1434fafdd20e7ae042372ff89a534a30f3))
+* **theme:** add the text-2xs and text-3xs sizes ([57decb3](https://github.com/SckyzO/cosmos/commit/57decb3bc301ec65ce9966c84b8412cd9791b32a)), closes [#157](https://github.com/SckyzO/cosmos/issues/157)
+
 ## [0.1.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-theme@0.0.2...@sckyzo/cosmos-theme@0.1.0) (2026-10-20)
 
 

package/README.md

@@ -4,13 +4,14 @@
 
 Cosmos design tokens — CSS only.
 
-Provides three CSS files consumable by any framework:
+Provides CSS files consumable by any framework:
 
-| Import                          | Purpose                                                                        |
-| ------------------------------- | ------------------------------------------------------------------------------ |
-| `@sckyzo/cosmos-theme/tailwind` | Tailwind 4 `@theme` block (palette, fonts, shadows, brand colors)              |
-| `@sckyzo/cosmos-theme/vars`     | Universal CSS custom properties (bg, text, border, accent), themes and accents |
-| `@sckyzo/cosmos-theme/fonts`    | `@fontsource` font imports (Outfit + JetBrains Mono)                           |
+| Import                              | Purpose                                                                        |
+| ----------------------------------- | ------------------------------------------------------------------------------ |
+| `@sckyzo/cosmos-theme/tailwind`     | Tailwind 4 `@theme` block (palette, fonts, shadows, brand colors)              |
+| `@sckyzo/cosmos-theme/vars`         | Universal CSS custom properties (bg, text, border, accent), themes and accents |
+| `@sckyzo/cosmos-theme/fonts`        | `@fontsource` font imports (Outfit + JetBrains Mono)                           |
+| `@sckyzo/cosmos-theme/fonts/<name>` | One variable font for `data-font`: `inter`, `plex`, `montserrat`, `open-sans`  |
 
 ## Usage
 
@@ -71,18 +72,81 @@ 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:
+
+- **Font**: a `data-font` attribute that swaps `--font-sans`. Leave it off for
+  Outfit. The others are `inter`, `plex` (IBM Plex Sans), `montserrat`,
+  `open-sans`, and `system`, the platform's UI font. Each one loads from its own
+  subpath, so import only the fonts you offer; `system` loads nothing. The mono
+  font stays JetBrains Mono.
+
+  ```css
+  @import '@sckyzo/cosmos-theme/fonts'; /* Outfit + JetBrains Mono */
+  @import '@sckyzo/cosmos-theme/fonts/inter';
+  ```
+
+- **Text size**: a `data-text-size` attribute, `sm`, `lg` or `xl`, that scales
+  every `text-*` size to 93.75%, 112.5% or 125%. Leave it off for 100%. Only the
+  text grows: spacing keeps its `rem` values, so layouts keep their density.
+  Sizes written in pixels, such as `text-[13px]`, don't scale; the `text-*`
+  scale includes `text-2xs` (11px) and `text-3xs` (10px) for small labels.
+
+```html
+<html class="sand" data-accent="teal" data-font="inter" data-text-size="lg"></html>
+```
+
+Both attributes also work on an element below `<html>`, for one part of a page.
+
 ## Tokens
 
 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)
-- **Shadows** : `--shadow-card`, `--shadow-card-hover`
+- **Typography** : `--font-sans` (Outfit), `--font-mono` (JetBrains Mono), `--text-2xs` (11px), `--text-3xs` (10px)
+- **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`).
 
 ## License
 

package/css/css-vars.css

@@ -9,8 +9,10 @@
  *              dark       .dark — neutral black/gray dark theme
  *              deep-blue  .deep-blue — navy dark theme
  *   accent → data-accent="indigo" etc. — no attribute means blue
+ *   font   → data-font="inter" etc. — no attribute means Outfit
+ *   text   → data-text-size="sm" | "lg" | "xl" — no attribute means normal
  *
- *   <html class="sand" data-accent="teal">
+ *   <html class="sand" data-accent="teal" data-font="inter" data-text-size="lg">
  *
  * Themes and accents redefine Tailwind's palette variables (--color-white,
  * --color-gray-*, --color-brand-*), so components styled with bg-white /
@@ -35,10 +37,40 @@
   --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
+   * CSS variables theme with variablePrefix '--color-code-'. */
+  --color-code-foreground: oklch(27.8% 0.033 256.848);
+  --color-code-token-keyword: #6d28d9;
+  --color-code-token-string: #15803d;
+  --color-code-token-comment: #5b6472;
+  --color-code-token-constant: #b45309;
+  --color-code-token-function: #1d4ed8;
+  --color-code-token-parameter: #c2410c;
+  --color-code-token-string-expression: #0f766e;
+  --color-code-token-punctuation: #4b5563;
+  --color-code-token-link: #1d4ed8;
+  --color-code-token-inserted: #15803d;
+  --color-code-token-deleted: #b91c1c;
+  --color-code-token-changed: #b45309;
 
   /* ── 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 ────────────────────────────────────────────────────────────── */
@@ -53,7 +85,14 @@
   --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
+   * CSS variables theme with variablePrefix '--color-code-'. */
+  --color-code-foreground: oklch(27.5% 0.02 60);
+  --color-code-token-comment: #6e5f4f;
+  --color-code-token-punctuation: #57493c;
 
   /* Warm gray scale — same lightness steps as Tailwind gray, beige hue. */
   --color-white: oklch(99.3% 0.008 85);
@@ -84,6 +123,23 @@
   --color-text-secondary: #a3a3a3;
   --color-text-muted: #8f8f8f;
 
+  /* ── Code ──────────────────────────────────────────────────────────────── */
+  /* Syntax highlighting on CodeBlock (gray-50 / gray-900), read by Shiki's
+   * CSS variables theme with variablePrefix '--color-code-'. */
+  --color-code-foreground: #e5e5e5;
+  --color-code-token-comment: #8f8f8f;
+  --color-code-token-punctuation: #a3a3a3;
+  --color-code-token-keyword: #c4b5fd;
+  --color-code-token-string: #86efac;
+  --color-code-token-constant: #fcd34d;
+  --color-code-token-function: #93c5fd;
+  --color-code-token-parameter: #fdba74;
+  --color-code-token-string-expression: #5eead4;
+  --color-code-token-link: #93c5fd;
+  --color-code-token-inserted: #86efac;
+  --color-code-token-deleted: #fca5a5;
+  --color-code-token-changed: #fcd34d;
+
   /* Neutral gray scale, softened near-black (no pure #000). */
   --color-gray-50: #fafafa;
   --color-gray-100: #f5f5f5;
@@ -112,7 +168,24 @@
   --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
+   * CSS variables theme with variablePrefix '--color-code-'. */
+  --color-code-foreground: oklch(92.8% 0.006 264.531);
+  --color-code-token-comment: #98a2b3;
+  --color-code-token-punctuation: #b8c0cc;
+  --color-code-token-keyword: #c4b5fd;
+  --color-code-token-string: #86efac;
+  --color-code-token-constant: #fcd34d;
+  --color-code-token-function: #93c5fd;
+  --color-code-token-parameter: #fdba74;
+  --color-code-token-string-expression: #5eead4;
+  --color-code-token-link: #93c5fd;
+  --color-code-token-inserted: #86efac;
+  --color-code-token-deleted: #fca5a5;
+  --color-code-token-changed: #fcd34d;
 }
 
 /* ── Accents ───────────────────────────────────────────────────────────────
@@ -132,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'] {
@@ -141,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'] {
@@ -156,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;
@@ -171,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'] {
@@ -192,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'] {
@@ -207,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'] {
@@ -222,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'] {
@@ -231,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;
@@ -252,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'] {
@@ -267,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'] {
@@ -284,6 +413,93 @@
   --color-brand-950: #00280d;
 }
 
+/* ── Fonts ─────────────────────────────────────────────────────────────────
+ * data-font swaps the sans-serif family; no attribute keeps Outfit. Each
+ * font loads from its own subpath (@sckyzo/cosmos-theme/fonts/inter, …), so
+ * an app only ships the ones it offers; `system` uses the platform's UI font
+ * and loads nothing. The mono font stays JetBrains Mono.
+ *
+ * font-family is set here too: plain text inherits the family <html>
+ * computed, so an element below <html> with data-font needs its own
+ * font-family to switch. In the base layer, so font-mono on the same element
+ * still wins. */
+@layer base {
+  [data-font] {
+    font-family: var(--font-sans);
+  }
+}
+
+[data-font='inter'] {
+  --font-sans: 'Inter Variable', system-ui, sans-serif;
+}
+
+[data-font='plex'] {
+  --font-sans: 'IBM Plex Sans Variable', system-ui, sans-serif;
+}
+
+[data-font='montserrat'] {
+  --font-sans: 'Montserrat Variable', system-ui, sans-serif;
+}
+
+[data-font='open-sans'] {
+  --font-sans: 'Open Sans Variable', system-ui, sans-serif;
+}
+
+[data-font='system'] {
+  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+}
+
+/* ── Text size ─────────────────────────────────────────────────────────────
+ * data-text-size scales every text-* size: sm 93.75%, lg 112.5%, xl 125%;
+ * no attribute keeps 100%. Spacing stays the same, so layouts keep their
+ * density, and line heights follow (they are ratios). Sizes written in
+ * pixels, such as text-[9px], don't scale.
+ *
+ * The sizes are declared again here, not scaled in the @theme block: a
+ * custom property resolves var() on the element that declares it, so a
+ * --text-sm declared on :root would ignore an attribute set below <html>.
+ * Same values as Tailwind's, plus text-2xs and text-3xs. */
+[data-text-size] {
+  --text-3xs: calc(0.625rem * var(--cosmos-text-scale, 1));
+  --text-2xs: calc(0.6875rem * var(--cosmos-text-scale, 1));
+  --text-xs: calc(0.75rem * var(--cosmos-text-scale, 1));
+  --text-sm: calc(0.875rem * var(--cosmos-text-scale, 1));
+  --text-base: calc(1rem * var(--cosmos-text-scale, 1));
+  --text-lg: calc(1.125rem * var(--cosmos-text-scale, 1));
+  --text-xl: calc(1.25rem * var(--cosmos-text-scale, 1));
+  --text-2xl: calc(1.5rem * var(--cosmos-text-scale, 1));
+  --text-3xl: calc(1.875rem * var(--cosmos-text-scale, 1));
+  --text-4xl: calc(2.25rem * var(--cosmos-text-scale, 1));
+  --text-5xl: calc(3rem * var(--cosmos-text-scale, 1));
+  --text-6xl: calc(3.75rem * var(--cosmos-text-scale, 1));
+  --text-7xl: calc(4.5rem * var(--cosmos-text-scale, 1));
+  --text-8xl: calc(6rem * var(--cosmos-text-scale, 1));
+  --text-9xl: calc(8rem * var(--cosmos-text-scale, 1));
+}
+
+[data-text-size='sm'] {
+  --cosmos-text-scale: 0.9375;
+}
+
+[data-text-size='lg'] {
+  --cosmos-text-scale: 1.125;
+}
+
+[data-text-size='xl'] {
+  --cosmos-text-scale: 1.25;
+}
+
+/* Text without a text-* class: body under <html data-text-size>, or the
+   element carrying the attribute below <html>. Not <html> itself, whose
+   font size sets rem and would scale the spacing too. In the base layer, so
+   a text-* class on the same element still wins. */
+@layer base {
+  [data-text-size] body,
+  [data-text-size]:not(:root) {
+    font-size: var(--text-base);
+  }
+}
+
 /* Smooth theme switching transition — opt-in via .cosmos-bg-transition class
    on the app shell (not body, to avoid transitioning every DOM element). */
 .cosmos-bg-transition {

package/css/fonts/inter.css

@@ -0,0 +1,2 @@
+/* Font for data-font='inter': one variable file, weights 100–900. */
+@import '@fontsource-variable/inter/wght.css';

package/css/fonts/montserrat.css

@@ -0,0 +1,2 @@
+/* Font for data-font='montserrat': one variable file, weights 100–900. */
+@import '@fontsource-variable/montserrat/wght.css';

package/css/fonts/open-sans.css

@@ -0,0 +1,2 @@
+/* Font for data-font='open-sans': one variable file, weights 300–800. */
+@import '@fontsource-variable/open-sans/wght.css';

package/css/fonts/plex.css

@@ -0,0 +1,2 @@
+/* Font for data-font='plex': one variable file, weights 100–700. */
+@import '@fontsource-variable/ibm-plex-sans/wght.css';

package/css/fonts.css

@@ -1,5 +1,6 @@
-/* Cosmos fonts — self-hosted via @fontsource (no internet required at runtime).
-   Consumers must install @fontsource/outfit and @fontsource/jetbrains-mono as deps. */
+/* Cosmos default fonts, Outfit and JetBrains Mono, self-hosted via @fontsource
+   (no network needed at runtime). The @fontsource packages are dependencies of
+   this package. The other data-font choices load from fonts/<name>.css. */
 
 @import '@fontsource/outfit/300.css';
 @import '@fontsource/outfit/400.css';

package/css/tailwind-tokens.css

@@ -10,32 +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;
+   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;
@@ -50,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;
@@ -71,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.1.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",
@@ -18,6 +18,10 @@
     "./tailwind": "./css/tailwind-tokens.css",
     "./vars": "./css/css-vars.css",
     "./fonts": "./css/fonts.css",
+    "./fonts/inter": "./css/fonts/inter.css",
+    "./fonts/plex": "./css/fonts/plex.css",
+    "./fonts/montserrat": "./css/fonts/montserrat.css",
+    "./fonts/open-sans": "./css/fonts/open-sans.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -34,6 +38,10 @@
     "build": "echo 'CSS-only package, no build step needed'"
   },
   "dependencies": {
+    "@fontsource-variable/ibm-plex-sans": "^5.3.0",
+    "@fontsource-variable/inter": "^5.3.0",
+    "@fontsource-variable/montserrat": "^5.3.0",
+    "@fontsource-variable/open-sans": "^5.3.0",
     "@fontsource/jetbrains-mono": "^5.3.0",
     "@fontsource/outfit": "^5.3.0"
   },