eidotter 0.17.2 → 0.19.0

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

@@ -3,24 +3,24 @@
  */
 
 [data-theme="cga-mode5"], .theme-cga-mode5 {
-  --color-cga-black: #000000;
-  --color-cga-blue: #000000;
+  --color-cga-black: #050300;
+  --color-cga-blue: #050300;
   --color-cga-green: #00ffff;
   --color-cga-cyan: #00ffff;
   --color-cga-red: #ff0000;
   --color-cga-magenta: #ff0000;
   --color-cga-brown: #ff0000;
-  --color-cga-light-gray: #ffffff;
-  --color-cga-dark-gray: #000000;
+  --color-cga-light-gray: #fffcf7;
+  --color-cga-dark-gray: #050300;
   --color-cga-bright-blue: #00ffff;
   --color-cga-bright-green: #00ffff;
   --color-cga-bright-cyan: #00ffff;
   --color-cga-bright-red: #ff0000;
   --color-cga-bright-magenta: #ff0000;
-  --color-cga-yellow: #ffffff;
-  --color-cga-white: #ffffff;
+  --color-cga-yellow: #fffcf7;
+  --color-cga-white: #fffcf7;
   --color-cga-amber: #00ffff;
-  --color-cga-amber-bright: #ffffff;
+  --color-cga-amber-bright: #fffcf7;
   --color-cga-amber-dim: #00ffff;
   --color-cga-amber-glow: rgba(0, 255, 255, 0.5);
   --color-cga-red-glow: rgba(255, 85, 85, 0.5); /** Red glow at 50% opacity */
@@ -28,48 +28,58 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --color-semantic-background-primary: #000000;
-  --color-semantic-background-secondary: #000000;
+  --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --color-semantic-background-primary: #050300;
+  --color-semantic-background-secondary: #050300;
   --color-semantic-background-accent: #00ffff;
-  --color-semantic-text-primary: #ffffff;
-  --color-semantic-text-secondary: #000000;
+  --color-semantic-text-primary: #fffcf7;
+  --color-semantic-text-secondary: #050300;
   --color-semantic-text-accent: #00ffff;
   --color-semantic-text-disabled: #ff0000;
   --color-semantic-border-default: #00ffff;
-  --color-semantic-border-focus: #ffffff;
+  --color-semantic-border-focus: #fffcf7;
   --color-semantic-border-hover: #ff0000;
   --color-semantic-border-disabled: #00ffff;
   --color-semantic-link-default: #00ffff;
-  --color-semantic-link-hover: #ffffff;
+  --color-semantic-link-hover: #fffcf7;
   --color-semantic-link-active: #ff0000;
   --color-semantic-link-visited: #ff0000;
   --color-semantic-status-success: #00ffff;
-  --color-semantic-status-warning: #ffffff;
+  --color-semantic-status-warning: #fffcf7;
   --color-semantic-status-error: #ff0000;
-  --color-semantic-status-info: #ffffff;
-  --color-semantic-alert-info: #000000;
-  --color-semantic-alert-success: #000000;
-  --color-semantic-alert-warning: #000000;
-  --color-semantic-alert-error: #000000;
-  --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
-  --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --color-semantic-status-info: #fffcf7;
+  --color-semantic-alert-info: #050300;
+  --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-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 */
+  --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
+  --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
+  --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
+  --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
+  --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
+  --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
+  --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
+  --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
   --typography-font-weight-regular: 400;
-  --typography-font-weight-semibold: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
-  --spacing-0: 0px;
+  --typography-font-weight-semibold: 400;
+  --typography-font-weight-bold: 400;
+  --typography-line-height-text-xs: 1.125rem; /** 18px */
+  --typography-line-height-text-sm: 1.25rem; /** 20px */
+  --typography-line-height-text-md: 1.5rem; /** 24px */
+  --typography-line-height-text-lg: 1.75rem; /** 28px */
+  --typography-line-height-text-xl: 1.875rem; /** 30px */
+  --typography-line-height-display-xs: 2rem; /** 32px */
+  --typography-line-height-display-sm: 2.375rem; /** 38px */
+  --typography-line-height-display-md: 2.75rem; /** 44px */
+  --typography-line-height-display-lg: 3.75rem; /** 60px */
+  --typography-line-height-display-xl: 4.5rem; /** 72px */
+  --typography-line-height-display-2xl: 5.625rem; /** 90px */
+  --spacing-0: 0;
   --spacing-1: 4px;
   --spacing-2: 8px;
   --spacing-3: 12px;
@@ -80,14 +90,14 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
-  --border-radius-none: 0px;
+  --border-radius-none: 0;
   --border-radius-sm: 2px;
   --border-radius-base: 4px;
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
   --shadow-glow-xs: 0px 0px 8px 0px #00FFFF80; /** Extra small phosphor glow (subtle hover) */
   --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80; /** Small phosphor glow (button hover) */
   --shadow-glow-md: 0px 0px 20px 0px #00FFFF80; /** Medium phosphor glow (container/card) */
@@ -138,14 +148,14 @@
   --z-index-tooltip: 1060; /** Tooltips (topmost) */
   --focus-ring-width: 2px; /** Focus ring thickness */
   --focus-ring-offset: 2px; /** Gap between element and ring */
-  --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
   --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
   --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
   --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
-  --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
+  --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
   --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
-  --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
   --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
   --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
   --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */

package/src/styles/tokens.css

@@ -28,29 +28,39 @@
   --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
   --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, 255, 255, 0.5); /** White glow at 50% opacity */
-  --color-semantic-alert-info: #1a2535; /** Cool dark blue-gray for info alerts */
-  --color-semantic-alert-success: #0a2015; /** Dark green for success alerts */
+  --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
+  --color-semantic-alert-info: #1f2228; /** Warm dark blue for info alerts */
+  --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: #430000; /** Dark red for error alerts */
-  --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
-  --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
-  --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
-  --typography-font-size-xs: 0.75rem;
-  --typography-font-size-sm: 0.875rem;
-  --typography-font-size-base: 1rem;
-  --typography-font-size-lg: 1.125rem;
-  --typography-font-size-xl: 1.25rem;
-  --typography-font-size-2xl: 1.5rem;
-  --typography-font-size-3xl: 1.875rem;
-  --typography-font-size-4xl: 2.25rem;
+  --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-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 */
+  --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
+  --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
+  --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
+  --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
+  --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
+  --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
+  --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
+  --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
   --typography-font-weight-regular: 400;
-  --typography-font-weight-semibold: 600;
-  --typography-font-weight-bold: 700;
-  --typography-line-height-tight: 1.2;
-  --typography-line-height-normal: 1.5;
-  --typography-line-height-loose: 1.8;
-  --spacing-0: 0px;
+  --typography-font-weight-semibold: 400;
+  --typography-font-weight-bold: 400;
+  --typography-line-height-text-xs: 1.125rem; /** 18px */
+  --typography-line-height-text-sm: 1.25rem; /** 20px */
+  --typography-line-height-text-md: 1.5rem; /** 24px */
+  --typography-line-height-text-lg: 1.75rem; /** 28px */
+  --typography-line-height-text-xl: 1.875rem; /** 30px */
+  --typography-line-height-display-xs: 2rem; /** 32px */
+  --typography-line-height-display-sm: 2.375rem; /** 38px */
+  --typography-line-height-display-md: 2.75rem; /** 44px */
+  --typography-line-height-display-lg: 3.75rem; /** 60px */
+  --typography-line-height-display-xl: 4.5rem; /** 72px */
+  --typography-line-height-display-2xl: 5.625rem; /** 90px */
+  --spacing-0: 0;
   --spacing-1: 4px;
   --spacing-2: 8px;
   --spacing-3: 12px;
@@ -61,14 +71,14 @@
   --spacing-10: 40px;
   --spacing-12: 48px;
   --spacing-16: 64px;
-  --border-radius-none: 0px;
+  --border-radius-none: 0;
   --border-radius-sm: 2px;
   --border-radius-base: 4px;
   --border-width-thin: 1px;
   --border-width-medium: 2px;
   --border-width-thick: 4px;
   --shadow-none: none;
-  --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
+  --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
   --shadow-glow-xs: 0px 0px 8px 0px #FFB00080; /** Extra small phosphor glow (subtle hover) */
   --shadow-glow-sm: 0px 0px 10px 0px #FFB00080; /** Small phosphor glow (button hover) */
   --shadow-glow-md: 0px 0px 20px 0px #FFB00080; /** Medium phosphor glow (container/card) */
@@ -119,14 +129,14 @@
   --z-index-tooltip: 1060; /** Tooltips (topmost) */
   --focus-ring-width: 2px; /** Focus ring thickness */
   --focus-ring-offset: 2px; /** Gap between element and ring */
-  --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
+  --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
   --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
   --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
   --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
-  --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
-  --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
+  --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
+  --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
   --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
-  --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
+  --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
   --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
   --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
   --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */

package/tailwind.preset.cjs

@@ -60,10 +60,7 @@ module.exports = {
       },
       "fontFamily": {
         "dos": [
-          "\"JetBrains Mono\"",
-          "\"JetBrainsMono Nerd Font\"",
-          "Consolas",
-          "Monaco",
+          "\"Flexi IBM VGA True\"",
           "monospace"
         ],
         "dos-fallback": [
@@ -74,24 +71,41 @@ module.exports = {
         ]
       },
       "fontSize": {
-        "dos-xs": "12px",
-        "dos-sm": "14px",
-        "dos-base": "16px",
-        "dos-lg": "18px",
-        "dos-xl": "20px",
-        "dos-2xl": "24px",
-        "dos-3xl": "30px",
-        "dos-4xl": "36px"
+        "dos-text-xs": "1.125rem",
+        "dos-text-sm": "1.25rem",
+        "dos-text-md": "1.375rem",
+        "dos-text-lg": "1.5rem",
+        "dos-text-xl": "1.625rem",
+        "dos-display-xs": "1.875rem",
+        "dos-display-sm": "2.25rem",
+        "dos-display-md": "2.625rem",
+        "dos-display-lg": "3.5rem",
+        "dos-display-xl": "4.125rem",
+        "dos-display-2xl": "4.875rem"
       },
       "lineHeight": {
-        "dos-tight": "1.2",
-        "dos-normal": "1.5",
-        "dos-loose": "1.8"
+        "dos-text-xs": "1.125rem",
+        "dos-text-sm": "1.25rem",
+        "dos-text-md": "1.5rem",
+        "dos-text-lg": "1.75rem",
+        "dos-text-xl": "1.875rem",
+        "dos-display-xs": "2rem",
+        "dos-display-sm": "2.375rem",
+        "dos-display-md": "2.75rem",
+        "dos-display-lg": "3.75rem",
+        "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": "600",
-        "dos-bold": "700"
+        "dos-semibold": "400",
+        "dos-bold": "400"
       },
       "spacing": {
         "dos-0": "0px",
@@ -113,7 +127,7 @@ module.exports = {
       },
       "boxShadow": {
         "dos-none": "none",
-        "dos-drop": "2px 2px 0px 0px #000000",
+        "dos-drop": "2px 2px 0px 0px #080500",
         "dos-glowXs": "0px 0px 8px 0px #FFB00080",
         "dos-glowSm": "0px 0px 10px 0px #FFB00080",
         "dos-glowMd": "0px 0px 20px 0px #FFB00080",