@sckyzo/cosmos-theme 0.0.2 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,27 @@ 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.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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **theme:** .dark is now the neutral black/gray theme. Use .deep-blue for the previous navy dark theme.
+
+### Features
+
+* **theme:** add sand, neutral dark, deep-blue themes and 12 accents ([2ab8ebb](https://github.com/SckyzO/cosmos/commit/2ab8ebb61ee2ca3eeaafb588eb93ab481b156cab))
+
 ## [0.0.2] - 2026-05-21
 
 Packaging/metadata only — no token, no CSS changes.

package/README.md

@@ -1,27 +1,37 @@
 # @sckyzo/cosmos-theme
 
+[![npm](https://img.shields.io/npm/v/@sckyzo/cosmos-theme)](https://www.npmjs.com/package/@sckyzo/cosmos-theme)
+
 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 + dark mode) |
-| `@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
 
 ### With Tailwind 4 (recommended for React apps)
 
+Import order matters: `tailwindcss` comes first, then the Cosmos tokens, then
+the vars.
+
 ```css
 /* src/index.css */
-@import '@sckyzo/cosmos-theme/fonts';
-@import '@sckyzo/cosmos-theme/tailwind';
 @import 'tailwindcss';
+@import '@sckyzo/cosmos-theme/tailwind';
 @import '@sckyzo/cosmos-theme/vars';
+@import '@sckyzo/cosmos-theme/fonts';
 ```
 
+Pairing this with `@sckyzo/cosmos-react`? You also need an `@source` line so
+Tailwind scans the components — see the
+[cosmos-react README](../react#set-up-the-styles).
+
 ### Without Tailwind (e.g. Docusaurus)
 
 ```css
@@ -30,6 +40,65 @@ Provides three CSS files consumable by any framework:
 /* Then reference vars: var(--color-brand-500), var(--color-bg-base), etc. */
 ```
 
+## Themes & accents
+
+Two independent settings, both on the `<html>` element:
+
+- **Theme**: one class, and only one at a time.
+
+  | Theme       | Class        | Look                                         |
+  | ----------- | ------------ | -------------------------------------------- |
+  | `light`     | _(none)_     | Cool gray, the default                       |
+  | `sand`      | `.sand`      | Warm beige light theme                       |
+  | `dark`      | `.dark`      | Neutral black/gray, softened (no pure black) |
+  | `deep-blue` | `.deep-blue` | Navy dark theme                              |
+
+  `.dark` and `.deep-blue` both enable Tailwind's `dark:` variant.
+
+- **Accent**: a `data-accent` attribute that swaps the whole `--color-brand-*`
+  scale (and with it `--color-accent` and the focus ring). Leave it off for
+  `blue`. The others are `indigo`, `violet`, `purple`, `rose`, `teal`, `cyan`,
+  `graphite`, `red`, `orange`, `amber`, `green`.
+
+```html
+<html class="sand" data-accent="teal"></html>
+```
+
+`red`, `orange`, `amber` and `green` look like the status colors (error,
+warning, success): a red primary button reads as a destructive action. Offer
+them last in any picker, after the others.
+
+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.
+
+## 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.
@@ -37,11 +106,12 @@ See [`css/tailwind-tokens.css`](css/tailwind-tokens.css) for the full source.
 Categories:
 
 - **Brand palette** : `--color-brand-25` to `--color-brand-950`
-- **Semantic colors** : `--color-success-*`, `--color-error-*`, `--color-warn-*`
+- **Semantic colors** : `--color-success-*`, `--color-error-*`, `--color-warning-*`
 - **Status** : `--color-status-{ok,warn,crit,unknown}`
-- **Typography** : `--font-sans` (Outfit), `--font-mono` (JetBrains Mono)
+- **Typography** : `--font-sans` (Outfit), `--font-mono` (JetBrains Mono), `--text-2xs` (11px), `--text-3xs` (10px)
 - **Shadows** : `--shadow-card`, `--shadow-card-hover`
-- **Layout vars** (dark-mode aware): `--color-bg-{base,panel,elevated}`, `--color-text-{base,primary,secondary,muted}`, `--color-border`, `--color-accent`
+- **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

@@ -1,7 +1,24 @@
 /* Cosmos CSS variables — universal (work with or without Tailwind).
  *
- * Light mode is :root (default). Dark mode is .dark — applied by the
- * consumer's theme switcher (ThemeContext, etc.) on the <html> element.
+ * Two independent settings on the <html> element, set by the consumer's
+ * theme switcher (ThemeContext, etc.):
+ *
+ *   theme  → one class, at most one at a time:
+ *              light      no class (:root default) — cool gray
+ *              sand       .sand — warm beige light theme
+ *              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" 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 /
+ * text-gray-500 / dark:bg-gray-900 / bg-brand-500 follow them without
+ * per-theme classes. These rules stay outside any @layer so they win over
+ * the @theme block, which Tailwind emits in @layer theme.
  *
  * Consumers reference these via var(--color-bg-base), var(--color-text-primary), etc.
  * Tailwind 4 utilities (bg-accent-primary, etc.) are bridged via tailwind-tokens.css.
@@ -22,13 +39,113 @@
   --color-text-secondary: #667085;
   --color-text-muted: #98a2b3;
 
+  /* ── 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: #465fff;
+  --color-accent: var(--color-brand-500);
+}
+
+/* ── Themes ────────────────────────────────────────────────────────────── */
+
+.sand {
+  --color-bg-base: #f9f5eb;
+  --color-bg-panel: #fffcf7;
+  --color-bg-elevated: #fffcf7;
+
+  --color-border: #d5cbba;
+
+  --color-text-base: #1e1711;
+  --color-text-primary: #1e1711;
+  --color-text-secondary: #746656;
+  --color-text-muted: #a39684;
+
+  /* ── 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);
+  --color-gray-50: oklch(97% 0.014 85);
+  --color-gray-100: oklch(94.8% 0.018 84);
+  --color-gray-200: oklch(90.5% 0.022 82);
+  --color-gray-300: oklch(84.5% 0.026 80);
+  --color-gray-400: oklch(68% 0.03 75);
+  --color-gray-500: oklch(52% 0.03 70);
+  --color-gray-600: oklch(43% 0.028 65);
+  --color-gray-700: oklch(36% 0.025 60);
+  --color-gray-800: oklch(27.5% 0.02 60);
+  --color-gray-900: oklch(21% 0.016 60);
+  --color-gray-950: oklch(13% 0.012 60);
 }
 
 .dark {
   color-scheme: dark;
 
+  --color-bg-base: #0a0a0a;
+  --color-bg-panel: #141414;
+  --color-bg-elevated: #242424;
+
+  --color-border: #3d3d3d;
+
+  --color-text-base: #e5e5e5;
+  --color-text-primary: #fff;
+  --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;
+  --color-gray-200: #e5e5e5;
+  --color-gray-300: #d4d4d4;
+  --color-gray-400: #a3a3a3;
+  --color-gray-500: #8f8f8f;
+  --color-gray-600: #5c5c5c;
+  --color-gray-700: #3d3d3d;
+  --color-gray-800: #242424;
+  --color-gray-900: #141414;
+  --color-gray-950: #0a0a0a;
+  --color-gray-dark: #141414;
+}
+
+/* Uses Tailwind's default gray scale. */
+.deep-blue {
+  color-scheme: dark;
+
   --color-bg-base: #0c111d;
   --color-bg-panel: #1a2231;
   --color-bg-elevated: #1d2939;
@@ -40,7 +157,278 @@
   --color-text-secondary: #98a2b3;
   --color-text-muted: #667085;
 
-  --color-accent: #465fff;
+  /* ── 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 ───────────────────────────────────────────────────────────────
+   Blue is the @theme default and has no rule. Red, orange, amber and green
+   look like the status colors (error / warning / success): list them last. */
+
+[data-accent='indigo'] {
+  --color-brand-25: #f4f6fe;
+  --color-brand-50: #eff2fe;
+  --color-brand-100: #e2e7ff;
+  --color-brand-200: #c9d3ff;
+  --color-brand-300: #a7b5ff;
+  --color-brand-400: #7f8fff;
+  --color-brand-500: #5963e9;
+  --color-brand-600: #4a4fd3;
+  --color-brand-700: #3c3bbf;
+  --color-brand-800: #2f25ab;
+  --color-brand-900: #24257a;
+  --color-brand-950: #160b63;
+}
+
+[data-accent='violet'] {
+  --color-brand-25: #f7f5ff;
+  --color-brand-50: #f3f0fe;
+  --color-brand-100: #eae4ff;
+  --color-brand-200: #d8ceff;
+  --color-brand-300: #c0abff;
+  --color-brand-400: #a57eff;
+  --color-brand-500: #8745f1;
+  --color-brand-600: #752cdb;
+  --color-brand-700: #6508c6;
+  --color-brand-800: #5200a4;
+  --color-brand-900: #3f097e;
+  --color-brand-950: #2b005b;
+}
+
+[data-accent='purple'] {
+  --color-brand-25: #fcf3ff;
+  --color-brand-50: #fbedff;
+  --color-brand-100: #f7dfff;
+  --color-brand-200: #f0c2ff;
+  --color-brand-300: #e696ff;
+  --color-brand-400: #d55bf8;
+  --color-brand-500: #ad2ecf;
+  --color-brand-600: #990aba;
+  --color-brand-700: #81019e;
+  --color-brand-800: #690181;
+  --color-brand-900: #520066;
+  --color-brand-950: #380046;
+}
+
+[data-accent='rose'] {
+  --color-brand-25: #fff3f6;
+  --color-brand-50: #ffeef1;
+  --color-brand-100: #ffdfe6;
+  --color-brand-200: #ffc3d2;
+  --color-brand-300: #ff96b4;
+  --color-brand-400: #ff4e90;
+  --color-brand-500: #d4166d;
+  --color-brand-600: #b8005c;
+  --color-brand-700: #9b004c;
+  --color-brand-800: #7f013d;
+  --color-brand-900: #64002f;
+  --color-brand-950: #45001e;
+}
+
+[data-accent='teal'] {
+  --color-brand-25: #defffa;
+  --color-brand-50: #d2fdf6;
+  --color-brand-100: #c8f3ec;
+  --color-brand-200: #99e7dc;
+  --color-brand-300: #31d5c6;
+  --color-brand-400: #02b3a5;
+  --color-brand-500: #038378;
+  --color-brand-600: #006f66;
+  --color-brand-700: #015c54;
+  --color-brand-800: #024a43;
+  --color-brand-900: #003833;
+  --color-brand-950: #002723;
+}
+
+[data-accent='cyan'] {
+  --color-brand-25: #ecf9ff;
+  --color-brand-50: #e1f7ff;
+  --color-brand-100: #c8f0ff;
+  --color-brand-200: #96e3fe;
+  --color-brand-300: #25cefb;
+  --color-brand-400: #01abd3;
+  --color-brand-500: #017f9d;
+  --color-brand-600: #016b84;
+  --color-brand-700: #01596e;
+  --color-brand-800: #014759;
+  --color-brand-900: #003645;
+  --color-brand-950: #002631;
+}
+
+[data-accent='graphite'] {
+  --color-brand-25: #f5f7fb;
+  --color-brand-50: #f0f3f7;
+  --color-brand-100: #e6e8ec;
+  --color-brand-200: #d0d6e2;
+  --color-brand-300: #b5bbc7;
+  --color-brand-400: #959ba6;
+  --color-brand-500: #707580;
+  --color-brand-600: #5d626d;
+  --color-brand-700: #4c515c;
+  --color-brand-800: #3c414b;
+  --color-brand-900: #2e3138;
+  --color-brand-950: #1f2228;
+}
+
+[data-accent='red'] {
+  --color-brand-25: #fff4f3;
+  --color-brand-50: #ffeeec;
+  --color-brand-100: #ffe0dd;
+  --color-brand-200: #ffc6c0;
+  --color-brand-300: #ff9b94;
+  --color-brand-400: #ff5a57;
+  --color-brand-500: #db192a;
+  --color-brand-600: #be021e;
+  --color-brand-700: #a00118;
+  --color-brand-800: #830011;
+  --color-brand-900: #67000b;
+  --color-brand-950: #470005;
+}
+
+[data-accent='orange'] {
+  --color-brand-25: #fff4f0;
+  --color-brand-50: #ffefe8;
+  --color-brand-100: #ffe1d5;
+  --color-brand-200: #ffc8b0;
+  --color-brand-300: #ff9f73;
+  --color-brand-400: #f66a15;
+  --color-brand-500: #c04f01;
+  --color-brand-600: #a44201;
+  --color-brand-700: #8a3600;
+  --color-brand-800: #712b00;
+  --color-brand-900: #592000;
+  --color-brand-950: #3d1300;
+}
+
+[data-accent='amber'] {
+  --color-brand-25: #fff5ea;
+  --color-brand-50: #fff0e0;
+  --color-brand-100: #ffe3c5;
+  --color-brand-200: #ffcb8f;
+  --color-brand-300: #ffa408;
+  --color-brand-400: #d48700;
+  --color-brand-500: #a46800;
+  --color-brand-600: #8a5601;
+  --color-brand-700: #734701;
+  --color-brand-800: #5d3900;
+  --color-brand-900: #482b00;
+  --color-brand-950: #321c00;
+}
+
+[data-accent='green'] {
+  --color-brand-25: #e5ffe9;
+  --color-brand-50: #d7ffde;
+  --color-brand-100: #cdf4d4;
+  --color-brand-200: #a5e9b2;
+  --color-brand-300: #5ad87e;
+  --color-brand-400: #32b75e;
+  --color-brand-500: #02863c;
+  --color-brand-600: #027232;
+  --color-brand-700: #015e28;
+  --color-brand-800: #014b1f;
+  --color-brand-900: #003915;
+  --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

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

@@ -1,23 +1,29 @@
 /* Cosmos Tailwind 4 theme — @theme block (generates Tailwind utility classes).
  *
- * Usage:
- *   @import '@sckyzo/cosmos-theme/fonts';
- *   @import '@sckyzo/cosmos-theme/tailwind';
+ * Usage (import order matters — tailwindcss first):
  *   @import 'tailwindcss';
+ *   @import '@sckyzo/cosmos-theme/tailwind';
  *   @import '@sckyzo/cosmos-theme/vars';
+ *   @import '@sckyzo/cosmos-theme/fonts';
  *
- * The dark variant is class-based (.dark) — applied by the consumer's theme switcher.
+ * The dark variant is class-based (.dark or .deep-blue) — applied by the consumer's theme switcher.
  */
 
-/* Tailwind dark variant: respond to the .dark class set by the consumer's ThemeContext,
-   instead of (or in addition to) prefers-color-scheme. */
-@custom-variant dark (&:is(.dark, .dark *));
+/* 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;
+
   /* ── Status colors — health indicators, badges, alerts ─────────────────── */
   --color-status-ok: #10b981;
   --color-status-warn: #f59e0b;
@@ -34,9 +40,9 @@
   --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 rgb(70 95 255 / 12%);
+  --shadow-focus-ring: 0px 0px 0px 4px color-mix(in srgb, var(--color-brand-500) 12%, transparent);
 
-  /* ── Brand palette (TailAdmin blue) ────────────────────────────────────── */
+  /* ── Brand palette (TailAdmin blue) — [data-accent] in css-vars.css swaps it ── */
   --color-brand-25: #f2f7ff;
   --color-brand-50: #ecf3ff;
   --color-brand-100: #dde9ff;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sckyzo/cosmos-theme",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "Tailwind 4 theme and design tokens for the Cosmos design system — palette, typography, radii and light/dark CSS variables.",
   "license": "MIT",
   "author": "SckyzO",
@@ -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": [
@@ -30,12 +34,16 @@
     "lint": "echo 'CSS-only package, no JS lint needed'",
     "lint:fix": "echo 'CSS-only package, no JS lint needed'",
     "typecheck": "echo 'CSS-only package, no TS check needed'",
-    "test": "echo 'CSS-only package, no tests yet'",
+    "test": "node scripts/check-contrast.mjs",
     "build": "echo 'CSS-only package, no build step needed'"
   },
   "dependencies": {
-    "@fontsource/jetbrains-mono": "^5.2.8",
-    "@fontsource/outfit": "^5.2.8"
+    "@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"
   },
   "publishConfig": {
     "access": "public"