eidotter 0.17.2 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/LICENSE.md +41 -1
  2. package/README.md +20 -7
  3. package/dist/components/Alert/components/Alert.d.ts +1 -1
  4. package/dist/components/Badge/components/Badge.d.ts +2 -2
  5. package/dist/components/Button/components/Button.d.ts +6 -1
  6. package/dist/components/Card/components/Card.d.ts +1 -1
  7. package/dist/components/Chat/components/ChatContainer.d.ts +0 -1
  8. package/dist/components/Checkbox/components/Checkbox.d.ts +1 -1
  9. package/dist/components/FilterBar/components/FilterBar.d.ts +1 -1
  10. package/dist/components/Header/components/Header.d.ts +24 -0
  11. package/dist/components/Header/components/index.d.ts +2 -0
  12. package/dist/components/Header/index.d.ts +2 -0
  13. package/dist/components/Icon/components/Icon.d.ts +18 -7
  14. package/dist/components/Modal/components/Modal.d.ts +5 -7
  15. package/dist/components/Progress/components/Progress.d.ts +2 -2
  16. package/dist/components/Stat/components/Stat.d.ts +2 -2
  17. package/dist/components/Switch/components/Switch.d.ts +3 -1
  18. package/dist/components/Tabs/components/Tabs.d.ts +9 -3
  19. package/dist/components/Tag/components/Tag.d.ts +1 -1
  20. package/dist/components/Terminal/components/Terminal.d.ts +2 -4
  21. package/dist/components/TextScramble/components/TextScramble.d.ts +1 -1
  22. package/dist/components/TimelineNode/components/TimelineNode.d.ts +4 -4
  23. package/dist/eidotter.css +1 -1
  24. package/dist/index.d.ts +6 -2
  25. package/dist/index.es.js +3539 -3374
  26. package/dist/index.umd.js +6 -6
  27. package/guidelines/README.md +8 -4
  28. package/guidelines/components.md +40 -1
  29. package/package.json +7 -3
  30. package/src/styles/fonts/Flexi_IBM_VGA_LICENSE.txt +428 -0
  31. package/src/styles/fonts/Flexi_IBM_VGA_True.ttf +0 -0
  32. package/src/styles/fonts.css +17 -0
  33. package/src/styles/theme.amber-mono.css +34 -24
  34. package/src/styles/theme.cga-amber.css +41 -31
  35. package/src/styles/theme.cga-mode4-p0.css +44 -34
  36. package/src/styles/theme.cga-mode4-p1.css +52 -42
  37. package/src/styles/theme.cga-mode5.css +53 -43
  38. package/src/styles/tokens.css +37 -27
  39. package/tailwind.preset.cjs +32 -18
package/src/styles/theme.amber-mono.css CHANGED
@@ -28,25 +28,35 @@
28
28
  --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
29
29
  --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
30
30
  --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
31
- --color-cga-white-glow: rgba(255, 255, 255, 0.5); /** White glow at 50% opacity */
32
- --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
33
- --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
34
- --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
35
- --typography-font-size-xs: 0.75rem;
36
- --typography-font-size-sm: 0.875rem;
37
- --typography-font-size-base: 1rem;
38
- --typography-font-size-lg: 1.125rem;
39
- --typography-font-size-xl: 1.25rem;
40
- --typography-font-size-2xl: 1.5rem;
41
- --typography-font-size-3xl: 1.875rem;
42
- --typography-font-size-4xl: 2.25rem;
31
+ --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
32
+ --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) */
33
+ --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
34
+ --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
35
+ --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
36
+ --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
37
+ --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
38
+ --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
39
+ --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
40
+ --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
41
+ --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
42
+ --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
43
+ --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
44
+ --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
43
45
  --typography-font-weight-regular: 400;
44
- --typography-font-weight-semibold: 600;
45
- --typography-font-weight-bold: 700;
46
- --typography-line-height-tight: 1.2;
47
- --typography-line-height-normal: 1.5;
48
- --typography-line-height-loose: 1.8;
49
- --spacing-0: 0px;
46
+ --typography-font-weight-semibold: 400;
47
+ --typography-font-weight-bold: 400;
48
+ --typography-line-height-text-xs: 1.125rem; /** 18px */
49
+ --typography-line-height-text-sm: 1.25rem; /** 20px */
50
+ --typography-line-height-text-md: 1.5rem; /** 24px */
51
+ --typography-line-height-text-lg: 1.75rem; /** 28px */
52
+ --typography-line-height-text-xl: 1.875rem; /** 30px */
53
+ --typography-line-height-display-xs: 2rem; /** 32px */
54
+ --typography-line-height-display-sm: 2.375rem; /** 38px */
55
+ --typography-line-height-display-md: 2.75rem; /** 44px */
56
+ --typography-line-height-display-lg: 3.75rem; /** 60px */
57
+ --typography-line-height-display-xl: 4.5rem; /** 72px */
58
+ --typography-line-height-display-2xl: 5.625rem; /** 90px */
59
+ --spacing-0: 0;
50
60
  --spacing-1: 4px;
51
61
  --spacing-2: 8px;
52
62
  --spacing-3: 12px;
@@ -57,14 +67,14 @@
57
67
  --spacing-10: 40px;
58
68
  --spacing-12: 48px;
59
69
  --spacing-16: 64px;
60
- --border-radius-none: 0px;
70
+ --border-radius-none: 0;
61
71
  --border-radius-sm: 2px;
62
72
  --border-radius-base: 4px;
63
73
  --border-width-thin: 1px;
64
74
  --border-width-medium: 2px;
65
75
  --border-width-thick: 4px;
66
76
  --shadow-none: none;
67
- --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
77
+ --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
68
78
  --shadow-glow-xs: 0px 0px 8px 0px #FFB00080; /** Extra small phosphor glow (subtle hover) */
69
79
  --shadow-glow-sm: 0px 0px 10px 0px #FFB00080; /** Small phosphor glow (button hover) */
70
80
  --shadow-glow-md: 0px 0px 20px 0px #FFB00080; /** Medium phosphor glow (container/card) */
@@ -115,14 +125,14 @@
115
125
  --z-index-tooltip: 1060; /** Tooltips (topmost) */
116
126
  --focus-ring-width: 2px; /** Focus ring thickness */
117
127
  --focus-ring-offset: 2px; /** Gap between element and ring */
118
- --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
128
+ --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
119
129
  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
120
130
  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
121
131
  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
122
- --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
123
- --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
132
+ --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
133
+ --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
124
134
  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
125
- --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
135
+ --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
126
136
  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
127
137
  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
128
138
  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
package/src/styles/theme.cga-amber.css CHANGED
@@ -3,22 +3,22 @@
3
3
  */
4
4
 
5
5
  [data-theme="cga-amber"], .theme-cga-amber {
6
- --color-cga-black: #000000;
6
+ --color-cga-black: #050300; /** Warm near-black (~3% amber) */
7
7
  --color-cga-blue: #0000aa;
8
8
  --color-cga-green: #00aa00;
9
9
  --color-cga-cyan: #00aaaa;
10
10
  --color-cga-red: #aa0000;
11
11
  --color-cga-magenta: #aa00aa;
12
12
  --color-cga-brown: #aa5500;
13
- --color-cga-light-gray: #aaaaaa;
14
- --color-cga-dark-gray: #555555;
13
+ --color-cga-light-gray: #adaaa5; /** Warm light gray (~3% amber) */
14
+ --color-cga-dark-gray: #5a5852; /** Warm mid-gray (~3% amber) */
15
15
  --color-cga-bright-blue: #5555ff;
16
16
  --color-cga-bright-green: #55ff55;
17
17
  --color-cga-bright-cyan: #55ffff;
18
18
  --color-cga-bright-red: #ff5555;
19
19
  --color-cga-bright-magenta: #ff55ff;
20
20
  --color-cga-yellow: #ffff55;
21
- --color-cga-white: #ffffff;
21
+ --color-cga-white: #fffcf7; /** Warm off-white (~2% amber) */
22
22
  --color-cga-amber: #ffb000; /** P3 phosphor amber (602nm) */
23
23
  --color-cga-amber-bright: #fdca9f; /** P3 phosphor amber bright */
24
24
  --color-cga-amber-dim: #9a5700; /** P3 phosphor amber dim */
@@ -28,29 +28,39 @@
28
28
  --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
29
29
  --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
30
30
  --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
31
- --color-cga-white-glow: rgba(255, 255, 255, 0.5); /** White glow at 50% opacity */
32
- --color-semantic-alert-info: #001535;
33
- --color-semantic-alert-success: #0a2015;
31
+ --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
32
+ --color-semantic-alert-info: #0a1828;
33
+ --color-semantic-alert-success: #122010;
34
34
  --color-semantic-alert-warning: #352800;
35
- --color-semantic-alert-error: #430000;
36
- --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
37
- --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
38
- --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
39
- --typography-font-size-xs: 0.75rem;
40
- --typography-font-size-sm: 0.875rem;
41
- --typography-font-size-base: 1rem;
42
- --typography-font-size-lg: 1.125rem;
43
- --typography-font-size-xl: 1.25rem;
44
- --typography-font-size-2xl: 1.5rem;
45
- --typography-font-size-3xl: 1.875rem;
46
- --typography-font-size-4xl: 2.25rem;
35
+ --color-semantic-alert-error: #430500;
36
+ --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) */
37
+ --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
38
+ --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
39
+ --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
40
+ --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
41
+ --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
42
+ --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
43
+ --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
44
+ --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
45
+ --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
46
+ --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
47
+ --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
48
+ --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
47
49
  --typography-font-weight-regular: 400;
48
- --typography-font-weight-semibold: 600;
49
- --typography-font-weight-bold: 700;
50
- --typography-line-height-tight: 1.2;
51
- --typography-line-height-normal: 1.5;
52
- --typography-line-height-loose: 1.8;
53
- --spacing-0: 0px;
50
+ --typography-font-weight-semibold: 400;
51
+ --typography-font-weight-bold: 400;
52
+ --typography-line-height-text-xs: 1.125rem; /** 18px */
53
+ --typography-line-height-text-sm: 1.25rem; /** 20px */
54
+ --typography-line-height-text-md: 1.5rem; /** 24px */
55
+ --typography-line-height-text-lg: 1.75rem; /** 28px */
56
+ --typography-line-height-text-xl: 1.875rem; /** 30px */
57
+ --typography-line-height-display-xs: 2rem; /** 32px */
58
+ --typography-line-height-display-sm: 2.375rem; /** 38px */
59
+ --typography-line-height-display-md: 2.75rem; /** 44px */
60
+ --typography-line-height-display-lg: 3.75rem; /** 60px */
61
+ --typography-line-height-display-xl: 4.5rem; /** 72px */
62
+ --typography-line-height-display-2xl: 5.625rem; /** 90px */
63
+ --spacing-0: 0;
54
64
  --spacing-1: 4px;
55
65
  --spacing-2: 8px;
56
66
  --spacing-3: 12px;
@@ -61,14 +71,14 @@
61
71
  --spacing-10: 40px;
62
72
  --spacing-12: 48px;
63
73
  --spacing-16: 64px;
64
- --border-radius-none: 0px;
74
+ --border-radius-none: 0;
65
75
  --border-radius-sm: 2px;
66
76
  --border-radius-base: 4px;
67
77
  --border-width-thin: 1px;
68
78
  --border-width-medium: 2px;
69
79
  --border-width-thick: 4px;
70
80
  --shadow-none: none;
71
- --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
81
+ --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
72
82
  --shadow-glow-xs: 0px 0px 8px 0px #FFB00080; /** Extra small phosphor glow (subtle hover) */
73
83
  --shadow-glow-sm: 0px 0px 10px 0px #FFB00080; /** Small phosphor glow (button hover) */
74
84
  --shadow-glow-md: 0px 0px 20px 0px #FFB00080; /** Medium phosphor glow (container/card) */
@@ -119,14 +129,14 @@
119
129
  --z-index-tooltip: 1060; /** Tooltips (topmost) */
120
130
  --focus-ring-width: 2px; /** Focus ring thickness */
121
131
  --focus-ring-offset: 2px; /** Gap between element and ring */
122
- --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
132
+ --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
123
133
  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
124
134
  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
125
135
  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
126
- --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
127
- --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
136
+ --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
137
+ --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
128
138
  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
129
- --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
139
+ --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
130
140
  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
131
141
  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
132
142
  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
package/src/styles/theme.cga-mode4-p0.css CHANGED
@@ -3,15 +3,15 @@
3
3
  */
4
4
 
5
5
  [data-theme="cga-mode4-p0"], .theme-cga-mode4-p0 {
6
- --color-cga-black: #000000;
7
- --color-cga-blue: #000000;
6
+ --color-cga-black: #050300;
7
+ --color-cga-blue: #050300;
8
8
  --color-cga-green: #00ff00;
9
9
  --color-cga-cyan: #00ff00;
10
10
  --color-cga-red: #ff0000;
11
11
  --color-cga-magenta: #ff0000;
12
12
  --color-cga-brown: #ff0000;
13
13
  --color-cga-light-gray: #ffff00;
14
- --color-cga-dark-gray: #000000;
14
+ --color-cga-dark-gray: #050300;
15
15
  --color-cga-bright-blue: #00ff00;
16
16
  --color-cga-bright-green: #00ff00;
17
17
  --color-cga-bright-cyan: #00ff00;
@@ -28,12 +28,12 @@
28
28
  --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
29
29
  --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
30
30
  --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
31
- --color-cga-white-glow: rgba(255, 255, 255, 0.5); /** White glow at 50% opacity */
32
- --color-semantic-background-primary: #000000;
33
- --color-semantic-background-secondary: #000000;
31
+ --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
32
+ --color-semantic-background-primary: #050300;
33
+ --color-semantic-background-secondary: #050300;
34
34
  --color-semantic-background-accent: #00ff00;
35
35
  --color-semantic-text-primary: #ffff00;
36
- --color-semantic-text-secondary: #000000;
36
+ --color-semantic-text-secondary: #050300;
37
37
  --color-semantic-text-accent: #00ff00;
38
38
  --color-semantic-text-disabled: #ff0000;
39
39
  --color-semantic-border-default: #00ff00;
@@ -48,28 +48,38 @@
48
48
  --color-semantic-status-warning: #ffff00;
49
49
  --color-semantic-status-error: #ff0000;
50
50
  --color-semantic-status-info: #ffff00;
51
- --color-semantic-alert-info: #000000;
52
- --color-semantic-alert-success: #000000;
53
- --color-semantic-alert-warning: #000000;
54
- --color-semantic-alert-error: #000000;
55
- --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
56
- --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
57
- --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
58
- --typography-font-size-xs: 0.75rem;
59
- --typography-font-size-sm: 0.875rem;
60
- --typography-font-size-base: 1rem;
61
- --typography-font-size-lg: 1.125rem;
62
- --typography-font-size-xl: 1.25rem;
63
- --typography-font-size-2xl: 1.5rem;
64
- --typography-font-size-3xl: 1.875rem;
65
- --typography-font-size-4xl: 2.25rem;
51
+ --color-semantic-alert-info: #050300;
52
+ --color-semantic-alert-success: #050300;
53
+ --color-semantic-alert-warning: #050300;
54
+ --color-semantic-alert-error: #050300;
55
+ --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) */
56
+ --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
57
+ --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
58
+ --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
59
+ --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
60
+ --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
61
+ --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
62
+ --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
63
+ --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
64
+ --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
65
+ --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
66
+ --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
67
+ --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
66
68
  --typography-font-weight-regular: 400;
67
- --typography-font-weight-semibold: 600;
68
- --typography-font-weight-bold: 700;
69
- --typography-line-height-tight: 1.2;
70
- --typography-line-height-normal: 1.5;
71
- --typography-line-height-loose: 1.8;
72
- --spacing-0: 0px;
69
+ --typography-font-weight-semibold: 400;
70
+ --typography-font-weight-bold: 400;
71
+ --typography-line-height-text-xs: 1.125rem; /** 18px */
72
+ --typography-line-height-text-sm: 1.25rem; /** 20px */
73
+ --typography-line-height-text-md: 1.5rem; /** 24px */
74
+ --typography-line-height-text-lg: 1.75rem; /** 28px */
75
+ --typography-line-height-text-xl: 1.875rem; /** 30px */
76
+ --typography-line-height-display-xs: 2rem; /** 32px */
77
+ --typography-line-height-display-sm: 2.375rem; /** 38px */
78
+ --typography-line-height-display-md: 2.75rem; /** 44px */
79
+ --typography-line-height-display-lg: 3.75rem; /** 60px */
80
+ --typography-line-height-display-xl: 4.5rem; /** 72px */
81
+ --typography-line-height-display-2xl: 5.625rem; /** 90px */
82
+ --spacing-0: 0;
73
83
  --spacing-1: 4px;
74
84
  --spacing-2: 8px;
75
85
  --spacing-3: 12px;
@@ -80,14 +90,14 @@
80
90
  --spacing-10: 40px;
81
91
  --spacing-12: 48px;
82
92
  --spacing-16: 64px;
83
- --border-radius-none: 0px;
93
+ --border-radius-none: 0;
84
94
  --border-radius-sm: 2px;
85
95
  --border-radius-base: 4px;
86
96
  --border-width-thin: 1px;
87
97
  --border-width-medium: 2px;
88
98
  --border-width-thick: 4px;
89
99
  --shadow-none: none;
90
- --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
100
+ --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
91
101
  --shadow-glow-xs: 0px 0px 8px 0px #00FF0080; /** Extra small phosphor glow (subtle hover) */
92
102
  --shadow-glow-sm: 0px 0px 10px 0px #00FF0080; /** Small phosphor glow (button hover) */
93
103
  --shadow-glow-md: 0px 0px 20px 0px #00FF0080; /** Medium phosphor glow (container/card) */
@@ -138,14 +148,14 @@
138
148
  --z-index-tooltip: 1060; /** Tooltips (topmost) */
139
149
  --focus-ring-width: 2px; /** Focus ring thickness */
140
150
  --focus-ring-offset: 2px; /** Gap between element and ring */
141
- --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
151
+ --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
142
152
  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
143
153
  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
144
154
  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
145
- --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
146
- --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
155
+ --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
156
+ --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
147
157
  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
148
- --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
158
+ --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
149
159
  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
150
160
  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
151
161
  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */
package/src/styles/theme.cga-mode4-p1.css CHANGED
@@ -3,24 +3,24 @@
3
3
  */
4
4
 
5
5
  [data-theme="cga-mode4-p1"], .theme-cga-mode4-p1 {
6
- --color-cga-black: #000000;
7
- --color-cga-blue: #000000;
6
+ --color-cga-black: #050300;
7
+ --color-cga-blue: #050300;
8
8
  --color-cga-green: #00ffff;
9
9
  --color-cga-cyan: #00ffff;
10
10
  --color-cga-red: #ff00ff;
11
11
  --color-cga-magenta: #ff00ff;
12
12
  --color-cga-brown: #ff00ff;
13
- --color-cga-light-gray: #ffffff;
14
- --color-cga-dark-gray: #000000;
13
+ --color-cga-light-gray: #fffcf7;
14
+ --color-cga-dark-gray: #050300;
15
15
  --color-cga-bright-blue: #00ffff;
16
16
  --color-cga-bright-green: #00ffff;
17
17
  --color-cga-bright-cyan: #00ffff;
18
18
  --color-cga-bright-red: #ff00ff;
19
19
  --color-cga-bright-magenta: #ff00ff;
20
- --color-cga-yellow: #ffffff;
21
- --color-cga-white: #ffffff;
20
+ --color-cga-yellow: #fffcf7;
21
+ --color-cga-white: #fffcf7;
22
22
  --color-cga-amber: #00ffff;
23
- --color-cga-amber-bright: #ffffff;
23
+ --color-cga-amber-bright: #fffcf7;
24
24
  --color-cga-amber-dim: #00ffff;
25
25
  --color-cga-amber-glow: rgba(0, 255, 255, 0.5);
26
26
  --color-cga-red-glow: rgba(255, 85, 85, 0.5); /** Red glow at 50% opacity */
@@ -28,48 +28,58 @@
28
28
  --color-cga-cyan-glow: rgba(85, 255, 255, 0.5); /** Cyan glow at 50% opacity */
29
29
  --color-cga-magenta-glow: rgba(255, 85, 255, 0.5); /** Magenta glow at 50% opacity */
30
30
  --color-cga-blue-glow: rgba(85, 85, 255, 0.5); /** Blue glow at 50% opacity */
31
- --color-cga-white-glow: rgba(255, 255, 255, 0.5); /** White glow at 50% opacity */
32
- --color-semantic-background-primary: #000000;
33
- --color-semantic-background-secondary: #000000;
31
+ --color-cga-white-glow: rgba(255, 245, 224, 0.5); /** Warm white glow at 50% opacity */
32
+ --color-semantic-background-primary: #050300;
33
+ --color-semantic-background-secondary: #050300;
34
34
  --color-semantic-background-accent: #00ffff;
35
- --color-semantic-text-primary: #ffffff;
36
- --color-semantic-text-secondary: #000000;
35
+ --color-semantic-text-primary: #fffcf7;
36
+ --color-semantic-text-secondary: #050300;
37
37
  --color-semantic-text-accent: #00ffff;
38
38
  --color-semantic-text-disabled: #ff00ff;
39
39
  --color-semantic-border-default: #00ffff;
40
- --color-semantic-border-focus: #ffffff;
40
+ --color-semantic-border-focus: #fffcf7;
41
41
  --color-semantic-border-hover: #ff00ff;
42
42
  --color-semantic-border-disabled: #00ffff;
43
43
  --color-semantic-link-default: #00ffff;
44
- --color-semantic-link-hover: #ffffff;
44
+ --color-semantic-link-hover: #fffcf7;
45
45
  --color-semantic-link-active: #ff00ff;
46
46
  --color-semantic-link-visited: #ff00ff;
47
47
  --color-semantic-status-success: #00ffff;
48
48
  --color-semantic-status-warning: #ff00ff;
49
49
  --color-semantic-status-error: #ff00ff;
50
- --color-semantic-status-info: #ffffff;
51
- --color-semantic-alert-info: #000000;
52
- --color-semantic-alert-success: #000000;
53
- --color-semantic-alert-warning: #000000;
54
- --color-semantic-alert-error: #000000;
55
- --typography-font-family-primary: 'JetBrains Mono', 'JetBrainsMono Nerd Font', Consolas, Monaco, monospace; /** JetBrains Mono with Nerd Font fallback */
56
- --typography-font-family-fallback: Consolas, Monaco, 'Courier New', monospace; /** System monospace fallback */
57
- --typography-font-size-2xs: 0.625rem; /** Compact UI chrome (badges, counts, small labels) */
58
- --typography-font-size-xs: 0.75rem;
59
- --typography-font-size-sm: 0.875rem;
60
- --typography-font-size-base: 1rem;
61
- --typography-font-size-lg: 1.125rem;
62
- --typography-font-size-xl: 1.25rem;
63
- --typography-font-size-2xl: 1.5rem;
64
- --typography-font-size-3xl: 1.875rem;
65
- --typography-font-size-4xl: 2.25rem;
50
+ --color-semantic-status-info: #fffcf7;
51
+ --color-semantic-alert-info: #050300;
52
+ --color-semantic-alert-success: #050300;
53
+ --color-semantic-alert-warning: #050300;
54
+ --color-semantic-alert-error: #050300;
55
+ --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) */
56
+ --typography-font-family-fallback: monospace; /** Generic monospace fallback — intentionally bare to surface missing font-face */
57
+ --typography-font-size-text-xs: 1.125rem; /** 18px — smallest body text */
58
+ --typography-font-size-text-sm: 1.25rem; /** 20px — secondary body text */
59
+ --typography-font-size-text-md: 1.375rem; /** 22px — default body text */
60
+ --typography-font-size-text-lg: 1.5rem; /** 24px — large body text */
61
+ --typography-font-size-text-xl: 1.625rem; /** 26px — extra large body text */
62
+ --typography-font-size-display-xs: 1.875rem; /** 30px — smallest heading */
63
+ --typography-font-size-display-sm: 2.25rem; /** 36px — small heading */
64
+ --typography-font-size-display-md: 2.625rem; /** 42px — medium heading */
65
+ --typography-font-size-display-lg: 3.5rem; /** 56px — large heading */
66
+ --typography-font-size-display-xl: 4.125rem; /** 66px — extra large heading */
67
+ --typography-font-size-display-2xl: 4.875rem; /** 78px — hero heading */
66
68
  --typography-font-weight-regular: 400;
67
- --typography-font-weight-semibold: 600;
68
- --typography-font-weight-bold: 700;
69
- --typography-line-height-tight: 1.2;
70
- --typography-line-height-normal: 1.5;
71
- --typography-line-height-loose: 1.8;
72
- --spacing-0: 0px;
69
+ --typography-font-weight-semibold: 400;
70
+ --typography-font-weight-bold: 400;
71
+ --typography-line-height-text-xs: 1.125rem; /** 18px */
72
+ --typography-line-height-text-sm: 1.25rem; /** 20px */
73
+ --typography-line-height-text-md: 1.5rem; /** 24px */
74
+ --typography-line-height-text-lg: 1.75rem; /** 28px */
75
+ --typography-line-height-text-xl: 1.875rem; /** 30px */
76
+ --typography-line-height-display-xs: 2rem; /** 32px */
77
+ --typography-line-height-display-sm: 2.375rem; /** 38px */
78
+ --typography-line-height-display-md: 2.75rem; /** 44px */
79
+ --typography-line-height-display-lg: 3.75rem; /** 60px */
80
+ --typography-line-height-display-xl: 4.5rem; /** 72px */
81
+ --typography-line-height-display-2xl: 5.625rem; /** 90px */
82
+ --spacing-0: 0;
73
83
  --spacing-1: 4px;
74
84
  --spacing-2: 8px;
75
85
  --spacing-3: 12px;
@@ -80,14 +90,14 @@
80
90
  --spacing-10: 40px;
81
91
  --spacing-12: 48px;
82
92
  --spacing-16: 64px;
83
- --border-radius-none: 0px;
93
+ --border-radius-none: 0;
84
94
  --border-radius-sm: 2px;
85
95
  --border-radius-base: 4px;
86
96
  --border-width-thin: 1px;
87
97
  --border-width-medium: 2px;
88
98
  --border-width-thick: 4px;
89
99
  --shadow-none: none;
90
- --shadow-drop: 2px 2px 0px 0px #000000; /** Hard drop shadow, DOS window style */
100
+ --shadow-drop: 2px 2px 0px 0px #080500; /** Hard drop shadow, DOS window style (amber-warm near-black) */
91
101
  --shadow-glow-xs: 0px 0px 8px 0px #00FFFF80; /** Extra small phosphor glow (subtle hover) */
92
102
  --shadow-glow-sm: 0px 0px 10px 0px #00FFFF80; /** Small phosphor glow (button hover) */
93
103
  --shadow-glow-md: 0px 0px 20px 0px #00FFFF80; /** Medium phosphor glow (container/card) */
@@ -138,14 +148,14 @@
138
148
  --z-index-tooltip: 1060; /** Tooltips (topmost) */
139
149
  --focus-ring-width: 2px; /** Focus ring thickness */
140
150
  --focus-ring-offset: 2px; /** Gap between element and ring */
141
- --effects-overlay: rgba(0, 0, 0, 0.8); /** Modal/dialog backdrop overlay */
151
+ --effects-overlay: rgba(8, 5, 0, 0.8); /** Modal/dialog backdrop overlay (amber-warm) */
142
152
  --effects-scanline-light: rgba(255, 176, 0, 0.05); /** CRT scanline light band */
143
153
  --effects-scanline-dark: rgba(255, 176, 0, 0.02); /** CRT scanline dark band */
144
154
  --effects-vignette-glow: rgba(255, 176, 0, 0.12); /** Inner screen glow vignette */
145
- --effects-vignette-edge: rgba(0, 0, 0, 0.3); /** Vignette edge darkening */
146
- --effects-vignette-corner: rgba(0, 0, 0, 0.5); /** Vignette corner darkening */
155
+ --effects-vignette-edge: rgba(8, 5, 0, 0.3); /** Vignette edge darkening (amber-warm) */
156
+ --effects-vignette-corner: rgba(8, 5, 0, 0.5); /** Vignette corner darkening (amber-warm) */
147
157
  --effects-screen-tint: rgba(255, 176, 0, 0.1); /** Subtle amber screen tint */
148
- --effects-drop-shadow: rgba(0, 0, 0, 0.5); /** Terminal window drop shadow */
158
+ --effects-drop-shadow: rgba(8, 5, 0, 0.5); /** Terminal window drop shadow (amber-warm) */
149
159
  --effects-phosphor-glow: rgba(255, 176, 0, 0.12); /** Phosphor bloom/bleeding glow for CRT effects */
150
160
  --effects-bloom-outer: rgba(255, 176, 0, 0.05); /** Outer phosphor bloom layer (faint glow) */
151
161
  --effects-bloom-center: rgba(255, 176, 0, 0.03); /** Center phosphor bloom highlight */