eidotter 0.19.1 → 0.20.0

package/guidelines/README.md

@@ -4,7 +4,7 @@ A DOS-themed React component library with authentic CGA/amber phosphor aesthetic
 
 ## Overview
 
-eidotter provides 33 ready-to-use components with consistent DOS terminal styling:
+eidotter provides 36 ready-to-use components with consistent DOS terminal styling:
 
 - **Dark theme only** - Amber-on-black phosphor CRT aesthetic
 - **CGA color palette** - 16 authentic CGA colors + amber extensions
@@ -17,9 +17,8 @@ eidotter provides 33 ready-to-use components with consistent DOS terminal stylin
 
 ```tsx
 import { Button, Card, Input } from 'eidotter';
-import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
-import 'eidotter/styles';      // Component CSS (includes Tailwind utilities)
-import 'eidotter/tokens.css';  // CSS variable definitions (required)
+import 'eidotter/styles';      // All styles: fonts, tokens, components, Tailwind utilities
+// Optional (v0.19.4+): import 'eidotter/utilities';  // .dos-* classes for raw HTML / MDX / prose
 
 function App() {
   return (
@@ -46,12 +45,15 @@ function App() {
 | ChatInput | Multiline textarea with Enter-to-send |
 | ChatContainer | Composes ChatHistory + ChatInput |
 | Checkbox | Boolean form inputs with DOS bracket indicator |
+| CmdPalette | ⌘K / Ctrl+K command palette overlay with scored search + keyboard nav |
 | CommandPrompt | DOS command line display |
+| DosFigure | Demoscene-style painted-screen media placeholder with scanline sweep |
 | FilterBar | Multi-select toggle group |
 | Footer | Site footer with legal links |
 | Header | Sticky site header with branding + Nav |
 | Icon | SVG icons backed by pixelarticons (MIT) — authentic DOS pixel art |
 | InlineExpand | Inline disclosure widget |
+| InlineLink | In-flow navigational anchor — dotted underline, phosphor-invert hover, external variant |
 | Input | Text entry fields with label and error support |
 | Modal | Dialog overlays |
 | Nav | Responsive navigation (desktop + mobile) |
@@ -90,14 +92,20 @@ function App() {
 ### CSS Import (required)
 
 ```tsx
-import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face (required)
-import 'eidotter/styles';      // Component CSS (includes compiled Tailwind utilities)
-import 'eidotter/tokens.css';  // Design token CSS variables
+import 'eidotter/styles';      // All styles: fonts, tokens, components, Tailwind utilities
 
 // Optional: import a theme
 import 'eidotter/themes/amber-mono.css';
 ```
 
+Individual imports are still available if you need granular control (e.g., providing your own font or overriding tokens):
+
+```tsx
+import 'eidotter/fonts.css';   // Flexi IBM VGA True @font-face
+import 'eidotter/tokens.css';  // Design token CSS variables
+import 'eidotter/styles';      // Component CSS + Tailwind utilities
+```
+
 ### Tailwind Preset (optional)
 
 Use eidotter tokens as Tailwind classes in your own code:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -13,6 +13,7 @@
       "require": "./dist/index.umd.js"
     },
     "./styles": "./dist/eidotter.css",
+    "./utilities": "./src/styles/dos-utilities.css",
     "./tailwind.preset": "./tailwind.preset.cjs",
     "./tailwind.preset.enhanced": "./tailwind.preset.enhanced.cjs",
     "./fonts.css": "./src/styles/fonts.css",
@@ -36,6 +37,7 @@
     "src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt",
     "src/styles/tokens.css",
     "src/styles/theme.*.css",
+    "src/styles/dos-utilities.css",
     "guidelines"
   ],
   "scripts": {
@@ -88,7 +90,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@figma/plugin-typings": "^1.107.0-beta.2",
-    "@figma/rest-api-spec": "^0.36.0",
+    "@figma/rest-api-spec": "^0.37.0",
     "@storybook/addon-a11y": "^10.2.7",
     "@storybook/addon-designs": "^11.1.2",
     "@storybook/addon-docs": "^10.2.7",
@@ -106,7 +108,7 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^5.1.2",
     "autoprefixer": "^10.4.27",
-    "chromatic": "^15.2.0",
+    "chromatic": "^16.2.0",
     "cross-env": "^10.1.0",
     "dotenv": "^17.3.1",
     "eslint": "^10.0.3",
@@ -133,7 +135,7 @@
     "vite": "^6.2.0"
   },
   "dependencies": {
-    "pixelarticons": "^2.0.2",
+    "pixelarticons": "^2.1.0",
     "react-aria": "^3.47.0",
     "react-aria-components": "^1.16.0",
     "react-stately": "^3.45.0"

package/src/styles/dos-utilities.css

@@ -0,0 +1,197 @@
+/* =============================================================================
+ * eidotter — .dos-* typography utilities (opt-in)
+ *
+ * Apply DOS typography to raw HTML in prose, MDX, or CMS output when wrapping
+ * every element in a component is overkill.
+ *
+ * Usage:
+ *   import 'eidotter/utilities';       // opt-in; not in the default 'eidotter/styles' bundle
+ *
+ *   <div class="dos-page">
+ *     <h1 class="dos-h1">MAIN TITLE</h1>
+ *     <p  class="dos-body">Body copy.</p>
+ *     <code class="dos-code">DIR /W</code>
+ *   </div>
+ *
+ * All classes resolve through the repo's existing semantic + primitive tokens,
+ * so they track the active theme (amber-mono, cga-amber, cga-mode4-*, cga-mode5)
+ * automatically.
+ *
+ * Requires `eidotter/tokens.css` (or the bundled `eidotter/styles`) to be
+ * imported at the consumer root so the referenced custom properties resolve.
+ * Without tokens.css, every `var()` fallback kicks in and the utilities lose
+ * theme tracking.
+ *
+ * T11 handoff adoption — see CHANGELOG.md for rationale.
+ * ========================================================================== */
+
+/* Shared font-family + weight, applied at zero specificity via :where() so
+ * consumer overrides win without !important. */
+:where(
+  .dos-page,
+  .dos-hero,
+  .dos-h1,
+  .dos-h2,
+  .dos-h3,
+  .dos-h4,
+  .dos-h5,
+  .dos-body,
+  .dos-body-lg,
+  .dos-caption,
+  .dos-micro,
+  .dos-label,
+  .dos-code
+) {
+  font-family: var(--typography-font-family-primary), var(--typography-font-family-fallback);
+  font-weight: var(--typography-font-weight-regular, 400);
+  font-synthesis: none;
+}
+
+/* ---- Page shell --------------------------------------------------------- */
+
+.dos-page {
+  background-color: var(--color-semantic-background-primary);
+  color: var(--color-semantic-text-primary);
+  font-size: var(--typography-font-size-text-md, 1.375rem);
+  line-height: var(--typography-line-height-text-md, 1.5rem);
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* ---- Display tier (display-* tokens) ------------------------------------ */
+
+.dos-hero {
+  font-size: var(--typography-font-size-display-2xl, 4.875rem);
+  line-height: var(--typography-line-height-display-2xl, 5.625rem);
+  color: var(--color-semantic-text-accent);
+  text-shadow: 0 0 14px var(--color-cga-amber-glow);
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+
+.dos-h1 {
+  font-size: var(--typography-font-size-display-xl, 4.125rem);
+  line-height: var(--typography-line-height-display-xl, 4.5rem);
+  color: var(--color-semantic-text-accent);
+  text-shadow: 0 0 8px var(--color-cga-amber-glow);
+  text-transform: uppercase;
+}
+
+.dos-h2 {
+  font-size: var(--typography-font-size-display-lg, 3.5rem);
+  line-height: var(--typography-line-height-display-lg, 3.75rem);
+  color: var(--color-semantic-text-accent);
+  text-shadow: 0 0 8px var(--color-cga-amber-glow);
+  text-transform: uppercase;
+}
+
+.dos-h3 {
+  font-size: var(--typography-font-size-display-md, 2.625rem);
+  line-height: var(--typography-line-height-display-md, 2.75rem);
+  color: var(--color-semantic-text-accent);
+  text-shadow: 0 0 4px var(--color-cga-amber-glow);
+  text-transform: uppercase;
+}
+
+.dos-h4 {
+  font-size: var(--typography-font-size-display-sm, 2.25rem);
+  line-height: var(--typography-line-height-display-sm, 2.375rem);
+  color: var(--color-semantic-text-primary);
+  text-transform: uppercase;
+}
+
+.dos-h5 {
+  font-size: var(--typography-font-size-display-xs, 1.875rem);
+  line-height: var(--typography-line-height-display-xs, 2rem);
+  color: var(--color-semantic-text-primary);
+  text-transform: uppercase;
+}
+
+/* ---- Body (text-* tokens) ---------------------------------------------- */
+
+.dos-body {
+  font-size: var(--typography-font-size-text-md, 1.375rem);
+  line-height: var(--typography-line-height-text-md, 1.5rem);
+  color: var(--color-semantic-text-primary);
+}
+
+.dos-body-lg {
+  font-size: var(--typography-font-size-text-lg, 1.5rem);
+  line-height: var(--typography-line-height-text-lg, 1.75rem);
+  color: var(--color-semantic-text-primary);
+}
+
+/* ---- Meta rows --------------------------------------------------------- */
+
+.dos-caption {
+  font-size: var(--typography-font-size-text-sm, 1.25rem);
+  line-height: var(--typography-line-height-text-sm, 1.25rem);
+  color: var(--color-semantic-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.dos-micro {
+  font-size: var(--typography-font-size-text-xs, 1.125rem);
+  line-height: var(--typography-line-height-text-xs, 1.125rem);
+  color: var(--color-semantic-text-muted);
+}
+
+.dos-label {
+  font-size: var(--typography-font-size-text-sm, 1.25rem);
+  line-height: var(--typography-line-height-text-sm, 1.25rem);
+  color: var(--color-semantic-text-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.dos-code {
+  font-size: var(--typography-font-size-text-sm, 1.25rem);
+  line-height: var(--typography-line-height-text-sm, 1.25rem);
+  color: var(--color-semantic-text-accent);
+  background-color: var(--color-semantic-background-secondary);
+  padding: 0 var(--spacing-1, 4px);
+  border: 1px solid var(--color-semantic-border-default);
+  border-radius: var(--border-radius-sm, 2px);
+}
+
+/* ---- Scanlines overlay -------------------------------------------------- */
+
+/* Intended for dark-surface overlays (e.g., `.dos-page` or components on
+ * `bg-primary`). `mix-blend-mode: overlay` inverts over light surfaces —
+ * document this constraint when consuming. */
+.dos-scanlines {
+  position: relative;
+}
+
+.dos-scanlines::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    0deg,
+    var(--effects-scanline-dark, rgba(255,176,0,0.02)) 0px,
+    var(--effects-scanline-dark, rgba(255,176,0,0.02)) 1px,
+    var(--effects-scanline-light, rgba(255,176,0,0.05)) 1px,
+    var(--effects-scanline-light, rgba(255,176,0,0.05)) 3px
+  );
+  mix-blend-mode: overlay;
+  opacity: 0.6;
+}
+
+/* =============================================================================
+ * Accessibility
+ * ========================================================================== */
+
+@media (prefers-contrast: high) {
+  .dos-hero,
+  .dos-h1,
+  .dos-h2,
+  .dos-h3 {
+    text-shadow: none;
+  }
+  .dos-code {
+    border-width: 2px;
+  }
+}

package/src/styles/theme.amber-mono.css

@@ -29,8 +29,8 @@
   --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
   --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
   --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
@@ -144,6 +144,7 @@
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-yellow);
   --color-semantic-text-disabled: var(--color-cga-amber-dim);
+  --color-semantic-text-muted: var(--color-cga-light-gray);
   --color-semantic-border-default: var(--color-cga-amber);
   --color-semantic-border-focus: var(--color-cga-amber-bright);
   --color-semantic-border-hover: var(--color-cga-yellow);

package/src/styles/theme.cga-amber.css

@@ -33,8 +33,8 @@
   --color-semantic-alert-success: #122010;
   --color-semantic-alert-warning: #352800;
   --color-semantic-alert-error: #430500;
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
@@ -148,6 +148,7 @@
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-amber);
   --color-semantic-text-disabled: var(--color-cga-dark-gray);
+  --color-semantic-text-muted: var(--color-cga-brown);
   --color-semantic-border-default: var(--color-cga-light-gray);
   --color-semantic-border-focus: var(--color-cga-amber);
   --color-semantic-border-hover: var(--color-cga-amber-bright);

package/src/styles/theme.cga-mode4-p0.css

@@ -36,6 +36,7 @@
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ff00;
   --color-semantic-text-disabled: #ff0000;
+  --color-semantic-text-muted: rgba(255, 255, 0, 0.65);
   --color-semantic-border-default: #00ff00;
   --color-semantic-border-focus: #ffff00;
   --color-semantic-border-hover: #ff0000;
@@ -52,8 +53,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-mode4-p1.css

@@ -36,6 +36,7 @@
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff00ff;
+  --color-semantic-text-muted: rgba(255, 252, 247, 0.65);
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff00ff;
@@ -52,8 +53,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/theme.cga-mode5.css

@@ -36,6 +36,7 @@
   --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff0000;
+  --color-semantic-text-muted: rgba(255, 252, 247, 0.65);
   --color-semantic-border-default: #00ffff;
   --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff0000;
@@ -52,8 +53,8 @@
   --color-semantic-alert-success: #050300;
   --color-semantic-alert-warning: #050300;
   --color-semantic-alert-error: #050300;
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */

package/src/styles/tokens.css

@@ -33,8 +33,8 @@
   --color-semantic-alert-success: #122010; /** Warm dark green for success alerts */
   --color-semantic-alert-warning: #352800; /** Dark amber for warning alerts */
   --color-semantic-alert-error: #430500; /** Warm dark red for error alerts */
-  --typography-font-family-primary: 'Flexi IBM VGA True'; /** Flexi IBM VGA True v2 — vector remake of IBM VGA BIOS font, aspect-corrected (CC BY-SA 4.0) */
-  --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
+  --typography-font-family-primary: 'Flexi IBM VGA True', monospace; /** Flexi IBM VGA True v2 (CC BY-SA 4.0) with a `monospace` fallback that preserves DOS aesthetic on @font-face failure. */
+  --typography-font-family-fallback: monospace; /** Bare `monospace` stack — fail-loud diagnostic counterpart to `primary`. Compose with `primary` when consumers want strict Flexi-or-nothing rendering. */
   --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
   --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
   --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
@@ -148,6 +148,7 @@
   --color-semantic-text-secondary: var(--color-cga-black);
   --color-semantic-text-accent: var(--color-cga-yellow);
   --color-semantic-text-disabled: var(--color-cga-dark-gray);
+  --color-semantic-text-muted: var(--color-cga-amber-dim); /** Muted supplementary text — timestamps, counts, footnotes. T10 handoff: dedicated amber-dim hex (in-family with primary), not brown; no opacity coupling. */
   --color-semantic-border-default: var(--color-cga-light-gray);
   --color-semantic-border-focus: var(--color-cga-yellow);
   --color-semantic-border-hover: var(--color-cga-white);

package/tailwind.preset.cjs

@@ -5,6 +5,8 @@
  * Generated from: src/tokens/base.tokens.json
  * Run: npm run build-tokens
  *
+ * Includes all design tokens plus optional React Aria and animate plugins.
+ *
  * Usage:
  *   // tailwind.config.js
  *   module.exports = {
@@ -12,7 +14,23 @@
  *   }
  */
 
-module.exports = {
+let reactAriaPlugin;
+try {
+  reactAriaPlugin = require('tailwindcss-react-aria-components');
+} catch {
+  // tailwindcss-react-aria-components not installed — skip
+  reactAriaPlugin = null;
+}
+
+let animatePlugin;
+try {
+  animatePlugin = require('tailwindcss-animate');
+} catch {
+  // tailwindcss-animate not installed — skip
+  animatePlugin = null;
+}
+
+const preset = {
   "theme": {
     "extend": {
       "colors": {
@@ -36,6 +54,12 @@ module.exports = {
         "cga-amber-bright": "#fdca9f",
         "cga-amber-dim": "#9a5700",
         "cga-amber-glow": "#ffb00080",
+        "cga-red-glow": "#ff555580",
+        "cga-green-glow": "#55ff5580",
+        "cga-cyan-glow": "#55ffff80",
+        "cga-magenta-glow": "#ff55ff80",
+        "cga-blue-glow": "#5555ff80",
+        "cga-white-glow": "#fff5e080",
         "dos-bg-primary": "var(--color-semantic-background-primary)",
         "dos-bg-secondary": "var(--color-semantic-background-secondary)",
         "dos-bg-accent": "var(--color-semantic-background-accent)",
@@ -43,6 +67,7 @@ module.exports = {
         "dos-text-secondary": "var(--color-semantic-text-secondary)",
         "dos-text-accent": "var(--color-semantic-text-accent)",
         "dos-text-disabled": "var(--color-semantic-text-disabled)",
+        "dos-text-muted": "var(--color-semantic-text-muted)",
         "dos-border-default": "var(--color-semantic-border-default)",
         "dos-border-focus": "var(--color-semantic-border-focus)",
         "dos-border-hover": "var(--color-semantic-border-hover)",
@@ -64,9 +89,6 @@ module.exports = {
           "monospace"
         ],
         "dos-fallback": [
-          "Consolas",
-          "Monaco",
-          "\"Courier New\"",
           "monospace"
         ]
       },
@@ -96,19 +118,12 @@ module.exports = {
         "dos-display-xl": "4.5rem",
         "dos-display-2xl": "5.625rem"
       },
-      // Flexi IBM VGA True is a single-weight bitmap-style font. Authentic
-      // DOS had no bold variant — emphasis is expressed via color, uppercase,
-      // or inverse video. The dos-regular/semibold/bold utilities are kept
-      // as aliases all resolving to 400 so existing consumer code using
-      // font-dos-bold / font-dos-semibold keeps working without visual change.
-      // Mirrors the generated tailwind.preset.js.
       "fontWeight": {
         "dos-regular": "400",
         "dos-semibold": "400",
         "dos-bold": "400"
       },
       "spacing": {
-        "dos-0": "0px",
         "dos-1": "4px",
         "dos-2": "8px",
         "dos-3": "12px",
@@ -121,7 +136,6 @@ module.exports = {
         "dos-16": "64px"
       },
       "borderRadius": {
-        "dos-none": "0px",
         "dos-sm": "2px",
         "dos-base": "4px"
       },
@@ -131,8 +145,40 @@ module.exports = {
         "dos-glowXs": "0px 0px 8px 0px #FFB00080",
         "dos-glowSm": "0px 0px 10px 0px #FFB00080",
         "dos-glowMd": "0px 0px 20px 0px #FFB00080",
-        "dos-glowLg": "0px 0px 30px 0px #FFB00080"
+        "dos-glowLg": "0px 0px 30px 0px #FFB00080",
+        "dos-glowXsRed": "0px 0px 8px 0px #FF555580",
+        "dos-glowSmRed": "0px 0px 10px 0px #FF555580",
+        "dos-glowMdRed": "0px 0px 20px 0px #FF555580",
+        "dos-glowLgRed": "0px 0px 30px 0px #FF555580",
+        "dos-glowXsGreen": "0px 0px 8px 0px #55FF5580",
+        "dos-glowSmGreen": "0px 0px 10px 0px #55FF5580",
+        "dos-glowMdGreen": "0px 0px 20px 0px #55FF5580",
+        "dos-glowLgGreen": "0px 0px 30px 0px #55FF5580",
+        "dos-glowXsCyan": "0px 0px 8px 0px #55FFFF80",
+        "dos-glowSmCyan": "0px 0px 10px 0px #55FFFF80",
+        "dos-glowMdCyan": "0px 0px 20px 0px #55FFFF80",
+        "dos-glowLgCyan": "0px 0px 30px 0px #55FFFF80",
+        "dos-glowXsMagenta": "0px 0px 8px 0px #FF55FF80",
+        "dos-glowSmMagenta": "0px 0px 10px 0px #FF55FF80",
+        "dos-glowMdMagenta": "0px 0px 20px 0px #FF55FF80",
+        "dos-glowLgMagenta": "0px 0px 30px 0px #FF55FF80",
+        "dos-glowXsBlue": "0px 0px 8px 0px #5555FF80",
+        "dos-glowSmBlue": "0px 0px 10px 0px #5555FF80",
+        "dos-glowMdBlue": "0px 0px 20px 0px #5555FF80",
+        "dos-glowLgBlue": "0px 0px 30px 0px #5555FF80",
+        "dos-glowXsWhite": "0px 0px 8px 0px #FFFFFF80",
+        "dos-glowSmWhite": "0px 0px 10px 0px #FFFFFF80",
+        "dos-glowMdWhite": "0px 0px 20px 0px #FFFFFF80",
+        "dos-glowLgWhite": "0px 0px 30px 0px #FFFFFF80"
       }
     }
   }
 };
+
+preset.plugins = [
+  ...(preset.plugins || []),
+  ...(reactAriaPlugin ? [reactAriaPlugin] : []),
+  ...(animatePlugin ? [animatePlugin] : []),
+];
+
+module.exports = preset;

package/tailwind.preset.enhanced.cjs

@@ -1,44 +1,29 @@
 /**
- * Eidotter Enhanced Tailwind CSS Preset
+ * Deprecated alias for `eidotter/tailwind.preset`.
  *
- * Extends the base token preset with React Aria state variants
- * and utility plugins for component development.
+ * REMOVE-IN-0.21.0 — grep this marker when preparing the 0.21.0 release to
+ * delete this file, the `./tailwind.preset.enhanced` entry in `package.json`
+ * `exports`, and the matching entry in `files`.
  *
- * Usage:
- *   // tailwind.config.js
- *   module.exports = {
- *     presets: [require('eidotter/tailwind.preset.enhanced')],
- *   }
+ * @note Hand-written — NOT generated by `style-dictionary.config.mjs`.
+ *       The sibling `tailwind.preset.cjs` IS generated; do not confuse them.
  *
- * Or use the base preset without React Aria:
- *   module.exports = {
- *     presets: [require('eidotter/tailwind.preset')],
- *   }
+ * In v0.19.2, the base and enhanced presets were merged (#282). The single
+ * `tailwind.preset` now includes all design tokens plus React Aria state
+ * variants and the animate plugin. This file is a shim so existing consumers
+ * don't break on upgrade.
+ *
+ * Migration:
+ *   - presets: [require('eidotter/tailwind.preset.enhanced')]
+ *   + presets: [require('eidotter/tailwind.preset')]
  */
 
-const basePreset = require('./tailwind.preset.cjs');
-
-let reactAriaPlugin;
-try {
-  reactAriaPlugin = require('tailwindcss-react-aria-components');
-} catch {
-  // tailwindcss-react-aria-components not installed — skip
-  reactAriaPlugin = null;
-}
-
-let animatePlugin;
-try {
-  animatePlugin = require('tailwindcss-animate');
-} catch {
-  // tailwindcss-animate not installed — skip
-  animatePlugin = null;
+if (!globalThis.__eidotterEnhancedPresetDeprecationWarned) {
+  globalThis.__eidotterEnhancedPresetDeprecationWarned = true;
+  console.warn(
+    "[eidotter] 'eidotter/tailwind.preset.enhanced' is deprecated since 0.19.2 " +
+      "and will be removed in 0.21.0. Use 'eidotter/tailwind.preset' instead."
+  );
 }
 
-module.exports = {
-  ...basePreset,
-  plugins: [
-    ...(basePreset.plugins || []),
-    ...(reactAriaPlugin ? [reactAriaPlugin] : []),
-    ...(animatePlugin ? [animatePlugin] : []),
-  ],
-};
+module.exports = require('./tailwind.preset.cjs');