@sckyzo/cosmos-theme 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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)
 
 

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,6 +72,33 @@ 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.
@@ -80,9 +108,10 @@ Categories:
 - **Brand palette** : `--color-brand-25` to `--color-brand-950`
 - **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** (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 /
@@ -37,6 +39,23 @@
   --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: var(--color-brand-500);
 }
@@ -55,6 +74,13 @@
   --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);
@@ -84,6 +110,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;
@@ -113,6 +156,23 @@
   --color-text-primary: #fff;
   --color-text-secondary: #98a2b3;
   --color-text-muted: #667085;
+
+  /* ── 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 ───────────────────────────────────────────────────────────────
@@ -284,6 +344,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

@@ -18,6 +18,12 @@
   --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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sckyzo/cosmos-theme",
-  "version": "0.1.0",
+  "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": [
@@ -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"
   },