eidotter 0.19.0 → 0.19.3

package/guidelines/README.md

@@ -17,9 +17,7 @@ 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
 
 function App() {
   return (
@@ -90,14 +88,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.0",
+  "version": "0.19.3",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -88,7 +88,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 +106,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",

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 */

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 */

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

@@ -52,8 +52,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

@@ -52,8 +52,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

@@ -52,8 +52,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 */

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)",
@@ -64,9 +88,6 @@ module.exports = {
           "monospace"
         ],
         "dos-fallback": [
-          "Consolas",
-          "Monaco",
-          "\"Courier New\"",
           "monospace"
         ]
       },
@@ -96,19 +117,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 +135,6 @@ module.exports = {
         "dos-16": "64px"
       },
       "borderRadius": {
-        "dos-none": "0px",
         "dos-sm": "2px",
         "dos-base": "4px"
       },
@@ -131,8 +144,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');