eidotter 0.19.3 → 0.20.1

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
@@ -18,6 +18,7 @@ eidotter provides 33 ready-to-use components with consistent DOS terminal stylin
 ```tsx
 import { Button, Card, Input } from 'eidotter';
 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 (
@@ -44,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) |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidotter",
-  "version": "0.19.3",
+  "version": "0.20.1",
   "type": "module",
   "description": "A DOS Themed Design System",
   "main": "./dist/index.umd.js",
@@ -12,7 +12,13 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
     },
+    "./brand": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "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 +42,7 @@
     "src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt",
     "src/styles/tokens.css",
     "src/styles/theme.*.css",
+    "src/styles/dos-utilities.css",
     "guidelines"
   ],
   "scripts": {
@@ -44,6 +51,7 @@
     "prepublishOnly": "npm run build",
     "build-tokens": "node style-dictionary.config.mjs",
     "lint": "eslint src/ --report-unused-disable-directives --max-warnings 0",
+    "lint-tokens": "node scripts/lint-token-refs.mjs",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o docs",
@@ -133,7 +141,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

@@ -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

@@ -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;

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;

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;

package/src/styles/tokens.css

@@ -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

@@ -67,6 +67,7 @@ const preset = {
         "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)",