css-is-awesome 1.1.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 (198) hide show
  1. package/AGENTS.md +343 -0
  2. package/CHANGELOG.md +1036 -0
  3. package/CLAUDE.md +9 -0
  4. package/CONTRACT.md +580 -0
  5. package/GEMINI.md +9 -0
  6. package/LICENSE +21 -0
  7. package/LICENSE-third-party +88 -0
  8. package/MIGRATION.md +312 -0
  9. package/README.md +380 -0
  10. package/ROADMAP.md +714 -0
  11. package/THEMING.md +290 -0
  12. package/THREE-TIERS.md +158 -0
  13. package/VERSIONING.md +200 -0
  14. package/_index.scss +34 -0
  15. package/api.scss +16 -0
  16. package/bin/README.md +57 -0
  17. package/bin/cia.cjs +114 -0
  18. package/bin/migrate-bootstrap.cjs +427 -0
  19. package/bin/migrate-tailwind.cjs +832 -0
  20. package/css-is-awesome.instructions.md +533 -0
  21. package/dist/css-is-awesome.core.css +598 -0
  22. package/dist/css-is-awesome.core.min.css +1 -0
  23. package/dist/css-is-awesome.css +3733 -0
  24. package/dist/css-is-awesome.min.css +1 -0
  25. package/dist/css-is-awesome.utilities.css +2445 -0
  26. package/dist/css-is-awesome.utilities.min.css +1 -0
  27. package/dist/tokens.css +508 -0
  28. package/dist/tokens.d.ts +266 -0
  29. package/dist/tokens.min.css +1 -0
  30. package/figma-tokens/README.md +57 -0
  31. package/figma-tokens/primitives-brand.scss +121 -0
  32. package/figma-tokens/semantic-dark.scss +61 -0
  33. package/figma-tokens/semantic-light.scss +61 -0
  34. package/figma-tokens/tokens.json +144 -0
  35. package/llm.txt +183 -0
  36. package/mcp/server.cjs +1495 -0
  37. package/package.json +199 -0
  38. package/public/icons/README.md +278 -0
  39. package/public/icons/arrow-right.svg +4 -0
  40. package/public/icons/check.svg +4 -0
  41. package/public/icons/chevron-down.svg +4 -0
  42. package/public/icons/close.svg +4 -0
  43. package/public/icons/core/arrow-down.svg +13 -0
  44. package/public/icons/core/arrow-left.svg +13 -0
  45. package/public/icons/core/arrow-right.svg +13 -0
  46. package/public/icons/core/arrow-up.svg +13 -0
  47. package/public/icons/core/bell.svg +13 -0
  48. package/public/icons/core/calendar.svg +15 -0
  49. package/public/icons/core/check.svg +12 -0
  50. package/public/icons/core/chevron-down.svg +12 -0
  51. package/public/icons/core/chevron-left.svg +12 -0
  52. package/public/icons/core/chevron-right.svg +12 -0
  53. package/public/icons/core/chevron-up.svg +12 -0
  54. package/public/icons/core/clock.svg +13 -0
  55. package/public/icons/core/close.svg +13 -0
  56. package/public/icons/core/copy.svg +13 -0
  57. package/public/icons/core/download.svg +14 -0
  58. package/public/icons/core/edit.svg +13 -0
  59. package/public/icons/core/error.svg +14 -0
  60. package/public/icons/core/external-link.svg +14 -0
  61. package/public/icons/core/eye-off.svg +15 -0
  62. package/public/icons/core/eye.svg +13 -0
  63. package/public/icons/core/filter.svg +12 -0
  64. package/public/icons/core/heart.svg +12 -0
  65. package/public/icons/core/help.svg +14 -0
  66. package/public/icons/core/home.svg +13 -0
  67. package/public/icons/core/info.svg +14 -0
  68. package/public/icons/core/loading.svg +12 -0
  69. package/public/icons/core/lock.svg +13 -0
  70. package/public/icons/core/mail.svg +13 -0
  71. package/public/icons/core/menu.svg +14 -0
  72. package/public/icons/core/message.svg +12 -0
  73. package/public/icons/core/minus.svg +12 -0
  74. package/public/icons/core/more-horizontal.svg +14 -0
  75. package/public/icons/core/pause.svg +13 -0
  76. package/public/icons/core/play.svg +12 -0
  77. package/public/icons/core/plus.svg +13 -0
  78. package/public/icons/core/refresh.svg +15 -0
  79. package/public/icons/core/save.svg +14 -0
  80. package/public/icons/core/search.svg +13 -0
  81. package/public/icons/core/settings.svg +13 -0
  82. package/public/icons/core/share.svg +14 -0
  83. package/public/icons/core/sort.svg +15 -0
  84. package/public/icons/core/star.svg +12 -0
  85. package/public/icons/core/success.svg +13 -0
  86. package/public/icons/core/trash.svg +16 -0
  87. package/public/icons/core/unlock.svg +13 -0
  88. package/public/icons/core/upload.svg +14 -0
  89. package/public/icons/core/user.svg +13 -0
  90. package/public/icons/core/users.svg +15 -0
  91. package/public/icons/core/warning.svg +14 -0
  92. package/public/icons/download.svg +4 -0
  93. package/public/icons/edit.svg +4 -0
  94. package/public/icons/menu.svg +4 -0
  95. package/public/icons/search.svg +4 -0
  96. package/public/theme.css +4179 -0
  97. package/public/themes/README.md +102 -0
  98. package/public/themes/boilerplate/theme.css +154 -0
  99. package/public/themes/boilerplate-dark/theme.css +171 -0
  100. package/public/themes/boilerplate-light/theme.css +171 -0
  101. package/public/themes/cupertino/theme.css +165 -0
  102. package/public/themes/cupertino-dark/theme.css +200 -0
  103. package/public/themes/cupertino-light/theme.css +227 -0
  104. package/public/themes/glass/theme.css +190 -0
  105. package/public/themes/glass-dark/theme.css +201 -0
  106. package/public/themes/glass-light/theme.css +229 -0
  107. package/public/themes/graphite/theme.css +155 -0
  108. package/public/themes/graphite-dark/theme.css +223 -0
  109. package/public/themes/graphite-light/theme.css +191 -0
  110. package/public/themes/press/theme.css +189 -0
  111. package/public/themes/press-dark/theme.css +199 -0
  112. package/public/themes/press-light/theme.css +235 -0
  113. package/public/themes/prism/theme.css +159 -0
  114. package/public/themes/prism-dark/theme.css +185 -0
  115. package/public/themes/prism-light/theme.css +188 -0
  116. package/public/themes/sketchbook/theme.css +152 -0
  117. package/public/themes/sketchbook-dark/theme.css +194 -0
  118. package/public/themes/sketchbook-light/theme.css +188 -0
  119. package/public/themes/terminal/theme.css +159 -0
  120. package/public/themes/terminal-dark/theme.css +229 -0
  121. package/public/themes/terminal-light/theme.css +152 -0
  122. package/scripts/README.md +70 -0
  123. package/scripts/icon-contract.json +67 -0
  124. package/scripts/icon-validator.js +205 -0
  125. package/scripts/prepare-dist.mjs +65 -0
  126. package/scripts/theme-a11y.js +415 -0
  127. package/scripts/theme-contract.json +171 -0
  128. package/scripts/theme-validator.js +674 -0
  129. package/scss/README.md +55 -0
  130. package/scss/_animations-utilities.scss +107 -0
  131. package/scss/_animations.scss +248 -0
  132. package/scss/_app-styles.scss +15 -0
  133. package/scss/_generator.scss +174 -0
  134. package/scss/_icons.scss +475 -0
  135. package/scss/_index.scss +17 -0
  136. package/scss/_layout.scss +597 -0
  137. package/scss/_mixins.scss +1036 -0
  138. package/scss/_system.scss +291 -0
  139. package/scss/_utilities.scss +377 -0
  140. package/scss/api.scss +61 -0
  141. package/scss/components/_accordion.scss +72 -0
  142. package/scss/components/_buttons.scss +171 -0
  143. package/scss/components/_copy-button.scss +69 -0
  144. package/scss/components/_data.scss +190 -0
  145. package/scss/components/_feedback.scss +197 -0
  146. package/scss/components/_forms.scss +272 -0
  147. package/scss/components/_index.scss +17 -0
  148. package/scss/components/_navigation.scss +186 -0
  149. package/scss/components/_overlay.scss +259 -0
  150. package/scss/components/_stepper.scss +159 -0
  151. package/scss/components/_tabs.scss +72 -0
  152. package/scss/core.scss +54 -0
  153. package/scss/examples/_theming.scss +107 -0
  154. package/scss/examples/_usage.scss +317 -0
  155. package/scss/main.scss +64 -0
  156. package/scss/recipes/README.md +110 -0
  157. package/scss/recipes/_bare-tags.scss +232 -0
  158. package/scss/recipes/_recipe-template.md +119 -0
  159. package/scss/recipes/combobox.md +509 -0
  160. package/scss/recipes/dialog.md +265 -0
  161. package/scss/recipes/print-to-pdf.md +263 -0
  162. package/scss/theme/README.md +67 -0
  163. package/scss/theme/_brand.scss +18 -0
  164. package/scss/theme/_colors-dark.scss +68 -0
  165. package/scss/theme/_colors-light.scss +70 -0
  166. package/scss/theme/_components.scss +94 -0
  167. package/scss/theme/_icons.scss +104 -0
  168. package/scss/theme/_index.scss +62 -0
  169. package/scss/theme/_shadows.scss +65 -0
  170. package/scss/theme/_shape.scss +13 -0
  171. package/scss/theme/_typography.scss +9 -0
  172. package/scss/theme/registry.json +447 -0
  173. package/scss/themes/boilerplate-dark.scss +212 -0
  174. package/scss/themes/boilerplate-light.scss +209 -0
  175. package/scss/themes/boilerplate.scss +181 -0
  176. package/scss/themes/cupertino-dark.scss +238 -0
  177. package/scss/themes/cupertino-light.scss +266 -0
  178. package/scss/themes/cupertino.scss +194 -0
  179. package/scss/themes/glass-dark.scss +238 -0
  180. package/scss/themes/glass-light.scss +266 -0
  181. package/scss/themes/glass.scss +220 -0
  182. package/scss/themes/graphite-dark.scss +260 -0
  183. package/scss/themes/graphite-light.scss +228 -0
  184. package/scss/themes/graphite.scss +182 -0
  185. package/scss/themes/press-dark.scss +237 -0
  186. package/scss/themes/press-light.scss +273 -0
  187. package/scss/themes/press.scss +241 -0
  188. package/scss/themes/prism-dark.scss +217 -0
  189. package/scss/themes/prism-light.scss +220 -0
  190. package/scss/themes/prism.scss +190 -0
  191. package/scss/themes/sketchbook-dark.scss +231 -0
  192. package/scss/themes/sketchbook-light.scss +231 -0
  193. package/scss/themes/sketchbook.scss +178 -0
  194. package/scss/themes/terminal-dark.scss +267 -0
  195. package/scss/themes/terminal-light.scss +175 -0
  196. package/scss/themes/terminal.scss +185 -0
  197. package/scss/tokens.scss +23 -0
  198. package/scss/utilities-only.scss +4 -0
package/public/themes/sketchbook-dark/theme.css ADDED
@@ -0,0 +1,194 @@
1
+ @charset "UTF-8";
2
+ /* ============================================================
3
+ THEME — Sketchbook Dark
4
+ -----------------------------------------------------------
5
+ Dark companion to Sketchbook (the css-is-awesome default,
6
+ warm-paper editorial light). Same hand-sketched personality:
7
+ serif display, Caveat script accents, soft warm hairlines,
8
+ slow ink-bleed motion. Only the COLOR palette inverts —
9
+ radius / fonts / shadows / motion all match the partner.
10
+
11
+ Mood: charcoal-paper editorial dark — late-night studio,
12
+ pencil-on-toned-paper, warm grays instead of cold blacks.
13
+ --paper is a warm charcoal; --ink is a warm cream. The
14
+ indigo accent (--ai) brightens for dark surfaces; the
15
+ vermilion seal (--shu) stays warm; ochre (--ochre) stays
16
+ gold; the code panel inverts to a warm cream slab.
17
+
18
+ Opt-in via `<html data-theme="sketchbook-dark">`. Pair with
19
+ the default Sketchbook (which lives in the consolidated
20
+ bundle / public/theme.css) to ship a project with a default
21
+ light mode and an opt-in dark mode.
22
+ ============================================================ */
23
+ @import 'https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Caveat:wght@400;500;600;700&family=Noto+Serif+JP:wght@400;500;700&family=Noto+Sans+JP:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap';
24
+ :root, :root[data-theme=sketchbook-dark] {
25
+ color-scheme: dark;
26
+ /* Surfaces — warm charcoal paper */
27
+ --paper: #1A1815;
28
+ --paper-raised: #2A2520;
29
+ --paper-sunk: #11100E;
30
+ --paper-glass: rgba(42, 37, 32, 0.78);
31
+ /* Ink — warm cream pencil */
32
+ --ink: #F4EFE2;
33
+ --ink-soft: #D8D0BE;
34
+ --ink-faint: #A89E89;
35
+ --graphite: #E8E0CE;
36
+ --muted: #7A715F;
37
+ /* Construction lines — warm dark hairlines */
38
+ --guide: #4A4239;
39
+ --guide-soft: #382F27;
40
+ --hair: #3F362C;
41
+ --hair-soft: #2A241E;
42
+ /* Primary accent — lifted indigo for dark paper */
43
+ --ai: #6E8FBF;
44
+ --ai-ink: #8DA8D1;
45
+ --ai-wash: #1F2B3F;
46
+ /* Seal — vermilion (stays warm, brightened slightly) */
47
+ --shu: #E36148;
48
+ --shu-wash: #3A1A14;
49
+ /* Draft / marginalia — warm gold */
50
+ --ochre: #D4A04B;
51
+ --ochre-wash: #382B14;
52
+ /* Code surface — invert: warm cream slab */
53
+ --code-bg: #F7F3EA;
54
+ --code-ink: #2B2420;
55
+ --code-muted: #6B5E50;
56
+ --code-accent: #826226;
57
+ --code-green: #537035;
58
+ --code-blue: #1F3A5F;
59
+ /* Typography — match Sketchbook */
60
+ --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
61
+ --font-script: 'Caveat', 'Shadows Into Light', cursive;
62
+ --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
63
+ --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
64
+ --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
65
+ /* Radius — match Sketchbook */
66
+ --r-sm: 2px;
67
+ --r-md: 3px;
68
+ --r-lg: 6px;
69
+ /* Shadows — heavier on dark, ink bleeding behind paper */
70
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
71
+ --shadow-md: 0 4px 18px rgba(0, 0, 0, .45);
72
+ --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
73
+ --shadow-xl: 0 20px 50px rgba(0, 0, 0, .65);
74
+ --shadow-2xl: 0 28px 70px rgba(0, 0, 0, .75);
75
+ /* Blur — paper themes don't use it; declared so swap stays lossless */
76
+ --blur-sm: none;
77
+ --blur-md: none;
78
+ --blur-lg: none;
79
+ /* Glow — faint warm rim (charcoal paper, not phosphor) */
80
+ --glow-sm: 0 0 0 transparent;
81
+ --glow-md: 0 0 0 transparent;
82
+ --glow-lg: 0 0 0 transparent;
83
+ /* Motion — match Sketchbook (editorial pace) */
84
+ --duration-fast: 180ms;
85
+ --duration-normal: 240ms;
86
+ --duration-slow: 380ms;
87
+ --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
88
+ /* ----------------------------------------------------------
89
+ SEMANTIC ALIASES
90
+ ---------------------------------------------------------- */
91
+ /* Backgrounds (page-level) */
92
+ --background-default: var(--paper);
93
+ --background-subtle: var(--paper-sunk);
94
+ --background-navbar: var(--paper-raised);
95
+ /* Surfaces */
96
+ --surface-default: var(--paper);
97
+ --surface-raised: var(--paper-raised);
98
+ --surface-sunk: var(--paper-sunk);
99
+ --surface-muted: var(--paper-sunk);
100
+ --surface-subtle: var(--paper-raised);
101
+ --surface-emphasis: var(--ink);
102
+ --surface-glass: var(--paper-glass);
103
+ /* Text */
104
+ --text-primary: var(--ink);
105
+ --text-secondary: var(--ink-soft);
106
+ --text-muted: var(--ink-faint);
107
+ --text-tertiary: var(--muted);
108
+ --text-inverse: var(--paper);
109
+ --text-link: var(--ai);
110
+ --text-link-hover: var(--ai-ink);
111
+ /* Borders */
112
+ --border-default: var(--hair);
113
+ --border-subtle: var(--hair-soft);
114
+ --border-emphasis: var(--guide);
115
+ --border-focus: var(--ai);
116
+ /* Interactive (hover / active wash layers) — warm cream on charcoal */
117
+ --interactive-hover: rgba(244, 239, 226, 0.06);
118
+ --interactive-active: rgba(244, 239, 226, 0.12);
119
+ /* Brand */
120
+ --brand-primary: var(--ai);
121
+ --brand-primary-hover: var(--ai-ink);
122
+ /* Action triplets */
123
+ --action-primary-default: var(--ai);
124
+ --action-primary-hover: var(--ai-ink);
125
+ --action-primary-active: var(--ai-ink);
126
+ --action-primary-wash: var(--ai-wash);
127
+ --action-secondary-default: var(--shu);
128
+ --action-secondary-hover: var(--shu);
129
+ --action-secondary-active: var(--shu);
130
+ --action-secondary-wash: var(--shu-wash);
131
+ --action-tertiary-default: var(--ochre);
132
+ --action-tertiary-hover: var(--ochre);
133
+ --action-tertiary-active: var(--ochre);
134
+ --action-tertiary-wash: var(--ochre-wash);
135
+ /* Feedback */
136
+ --feedback-info: var(--ai);
137
+ --feedback-success: var(--code-green);
138
+ --feedback-warning: var(--ochre);
139
+ --feedback-error: var(--shu);
140
+ /* Status — info */
141
+ --info-default: var(--ai);
142
+ --info-subtle: var(--ai-wash);
143
+ --info-text: var(--ai-ink);
144
+ /* Status — success (lifted moss-green for dark paper) */
145
+ --success-default: #8DA86A;
146
+ --success-subtle: #1F2B14;
147
+ --success-text: #B8CC8E;
148
+ /* Status — warning */
149
+ --warning-default: var(--ochre);
150
+ --warning-subtle: var(--ochre-wash);
151
+ --warning-text: #E8BF6E;
152
+ /* Status — error */
153
+ --error-default: var(--shu);
154
+ --error-subtle: var(--shu-wash);
155
+ --error-text: #F08A72;
156
+ /* ----------------------------------------------------------
157
+ LIBRARY SCALES
158
+ ---------------------------------------------------------- */
159
+ /* Space scale */
160
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
161
+ The numbered scale is the source of truth: every component reads
162
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
163
+ are emitted by the library as references to these, so they follow
164
+ automatically. Change a value here and the whole page re-proportions.
165
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
166
+ --space-0: 0; /* flush */
167
+ --space-1: 0.5rem; /* tight inner gap */
168
+ --space-2: 0.75rem; /* control padding */
169
+ --space-3: 0.875rem; /* (no t-shirt) */
170
+ --space-4: 1rem; /* default rhythm */
171
+ --space-5: 1.5rem; /* section gap */
172
+ --space-6: 2rem; /* block gap */
173
+ --space-7: 3rem; /* major gap */
174
+ --space-8: 4rem; /* page section */
175
+ --space-9: 6rem; /* hero rhythm */
176
+ /* Radius alias */
177
+ --radius-sm: var(--r-sm);
178
+ --radius-md: var(--r-md);
179
+ --radius-lg: var(--r-lg);
180
+ --radius-xl: 0.75rem;
181
+ --radius-full: 9999px;
182
+ /* Typography */
183
+ --font-primary: var(--font-sans);
184
+ --font-size-base: 1rem;
185
+ --line-height-normal: 1.5;
186
+ --font-weight-medium: 500;
187
+ /* Z-index layers */
188
+ --z-sticky: 1020;
189
+ --z-dropdown: 1030;
190
+ --z-backdrop: 1040;
191
+ --z-modal: 1050;
192
+ --z-popover: 1060;
193
+ --z-tooltip: 1070;
194
+ }
package/public/themes/sketchbook-light/theme.css ADDED
@@ -0,0 +1,188 @@
1
+ @charset "UTF-8";
2
+ :root, :root[data-theme=sketchbook-light] {
3
+ color-scheme: light;
4
+ /* Surfaces — warm paper */
5
+ --paper: #F7F3EA;
6
+ --paper-raised: #FDFAF2;
7
+ --paper-sunk: #ECE5D3;
8
+ --paper-glass: rgba(253, 250, 242, 0.75);
9
+ /* Ink — warm pencil + sumi */
10
+ --ink: #2A241E;
11
+ --ink-soft: #4A4037;
12
+ --ink-faint: #726858;
13
+ --graphite: #3A332B;
14
+ --muted: #948977;
15
+ /* Construction lines */
16
+ --guide: #C9BDA5;
17
+ --guide-soft: #DDD4C0;
18
+ --hair: #D4CCBB;
19
+ --hair-soft: #E8E2D4;
20
+ /* Primary accent — indigo */
21
+ --ai: #1F3A5F;
22
+ --ai-ink: #14263F;
23
+ --ai-wash: #E5EBF1;
24
+ /* Seal — vermilion (reserve for emphasis) */
25
+ --shu: #C1272D;
26
+ --shu-wash: #F6E3E1;
27
+ /* Draft / marginalia — warm gold */
28
+ --ochre: #A37B30;
29
+ --ochre-wash: #F0E5CC;
30
+ /* Code surface */
31
+ --code-bg: #2B2420;
32
+ --code-ink: #F7F3EA;
33
+ --code-muted: #A39787;
34
+ --code-accent: #E5B660;
35
+ --code-green: #A8B86C;
36
+ --code-blue: #94AFC9;
37
+ /* Typography */
38
+ --font-display: 'DM Serif Display', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
39
+ --font-script: 'Caveat', 'Shadows Into Light', cursive;
40
+ --font-serif: 'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
41
+ --font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
42
+ --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, Menlo, monospace;
43
+ /* Radius */
44
+ --r-sm: 2px;
45
+ --r-md: 3px;
46
+ --r-lg: 6px;
47
+ /* Shadows — ink bleeding through paper */
48
+ --shadow-sm: 0 1px 2px rgba(42, 36, 30, .06);
49
+ --shadow-md: 0 4px 18px rgba(42, 36, 30, .08);
50
+ --shadow-lg: 0 12px 40px rgba(42, 36, 30, .12);
51
+ --shadow-xl: 0 20px 50px rgba(42, 36, 30, .16);
52
+ --shadow-2xl: 0 28px 70px rgba(42, 36, 30, .22);
53
+ /* Blur — paper themes don't use it; declared so swap stays lossless */
54
+ --blur-sm: none;
55
+ --blur-md: none;
56
+ --blur-lg: none;
57
+ /* Glow — faint ink bleed, not phosphor */
58
+ --glow-sm: 0 0 0 transparent;
59
+ --glow-md: 0 0 0 transparent;
60
+ --glow-lg: 0 0 0 transparent;
61
+ /* Motion */
62
+ --duration-fast: 180ms;
63
+ --duration-normal: 240ms;
64
+ --duration-slow: 380ms;
65
+ --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
66
+ /* ----------------------------------------------------------
67
+ SEMANTIC ALIASES
68
+ -----------------------------------------------------------
69
+ Bridge the library's expected names to this theme's native
70
+ palette. Components can now write m.color(surface-default)
71
+ or var(--surface-default) and reskin with the theme
72
+ automatically.
73
+ ---------------------------------------------------------- */
74
+ /* Backgrounds (page-level) */
75
+ --background-default: var(--paper);
76
+ --background-subtle: var(--paper-sunk);
77
+ --background-navbar: var(--paper-raised);
78
+ /* Surfaces */
79
+ --surface-default: var(--paper);
80
+ --surface-raised: var(--paper-raised);
81
+ --surface-sunk: var(--paper-sunk);
82
+ --surface-muted: var(--paper-sunk);
83
+ --surface-subtle: var(--paper-raised);
84
+ --surface-emphasis: var(--ink);
85
+ --surface-glass: var(--paper-glass);
86
+ /* Text */
87
+ --text-primary: var(--ink);
88
+ --text-secondary: var(--ink-soft);
89
+ --text-muted: var(--ink-faint);
90
+ --text-tertiary: var(--muted);
91
+ --text-inverse: var(--paper);
92
+ --text-link: var(--ai);
93
+ --text-link-hover: var(--ai-ink);
94
+ /* Borders */
95
+ --border-default: var(--hair);
96
+ --border-subtle: var(--hair-soft);
97
+ --border-emphasis: var(--ink);
98
+ --border-focus: var(--ai);
99
+ /* Interactive (hover / active wash layers) */
100
+ --interactive-hover: rgba(42, 36, 30, 0.06);
101
+ --interactive-active: rgba(42, 36, 30, 0.12);
102
+ /* Brand (identity — action-primary usually references these) */
103
+ --brand-primary: var(--ai);
104
+ --brand-primary-hover: var(--ai-ink);
105
+ /* Action (primary / secondary / tertiary) */
106
+ --action-primary-default: var(--ai);
107
+ --action-primary-hover: var(--ai-ink);
108
+ --action-primary-active: var(--ai-ink);
109
+ --action-primary-wash: var(--ai-wash);
110
+ --action-secondary-default: var(--shu);
111
+ --action-secondary-hover: var(--shu);
112
+ --action-secondary-active: var(--shu);
113
+ --action-secondary-wash: var(--shu-wash);
114
+ --action-tertiary-default: var(--ochre);
115
+ --action-tertiary-hover: var(--ochre);
116
+ --action-tertiary-active: var(--ochre);
117
+ --action-tertiary-wash: var(--ochre-wash);
118
+ /* Feedback / status (high-level semantic) */
119
+ --feedback-info: var(--ai);
120
+ --feedback-success: var(--code-green);
121
+ --feedback-warning: var(--ochre);
122
+ --feedback-error: var(--shu);
123
+ /* Status — info (three-part: default / subtle / text) */
124
+ --info-default: var(--ai);
125
+ --info-subtle: var(--ai-wash);
126
+ --info-text: var(--ai-ink);
127
+ /* Status — success */
128
+ --success-default: #5A7A3A;
129
+ --success-subtle: #EAEFDC;
130
+ --success-text: #3F5627;
131
+ /* Status — warning */
132
+ --warning-default: var(--ochre);
133
+ --warning-subtle: var(--ochre-wash);
134
+ --warning-text: #6B4E1E;
135
+ /* Status — error */
136
+ --error-default: var(--shu);
137
+ --error-subtle: var(--shu-wash);
138
+ --error-text: #7A1A1F;
139
+ /* ----------------------------------------------------------
140
+ LIBRARY SCALES (space / radius / type / motion / z)
141
+ -----------------------------------------------------------
142
+ The library mixins emit var(--space-<key>), var(--radius-<key>),
143
+ var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
144
+ Themes declare the slots so those mixins always resolve.
145
+ Override any of these to change the whole system's rhythm.
146
+ ---------------------------------------------------------- */
147
+ /* Space scale (rem for accessibility) */
148
+ --space-2xs: 0.25rem;
149
+ --space-xs: 0.5rem;
150
+ --space-sm: 0.75rem;
151
+ --space-md: 1rem;
152
+ --space-lg: 1.5rem;
153
+ --space-xl: 2rem;
154
+ /* Radius alias — mirrors --r-* with standard names so
155
+ `m.radius(size)` in the library finds --radius-<size>. */
156
+ --radius-sm: var(--r-sm);
157
+ --radius-md: var(--r-md);
158
+ --radius-lg: var(--r-lg);
159
+ --radius-xl: 0.75rem;
160
+ --radius-full: 9999px;
161
+ /* Typography — base body font + key scale slots */
162
+ --font-primary: var(--font-sans);
163
+ --font-size-base: 1rem;
164
+ --line-height-normal: 1.5;
165
+ --font-weight-medium: 500;
166
+ /* Z-index layers */
167
+ --z-sticky: 1020;
168
+ --z-dropdown: 1030;
169
+ --z-backdrop: 1040;
170
+ --z-modal: 1050;
171
+ --z-popover: 1060;
172
+ --z-tooltip: 1070;
173
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
174
+ The numbered scale is the source of truth: every component reads
175
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
176
+ are emitted by the library as references to these, so they follow
177
+ automatically. Change a value here and the whole page re-proportions. */
178
+ --space-0: 0;
179
+ --space-1: 0.5rem;
180
+ --space-2: 0.75rem;
181
+ --space-3: 0.875rem;
182
+ --space-4: 1rem;
183
+ --space-5: 1.5rem;
184
+ --space-6: 2rem;
185
+ --space-7: 3rem;
186
+ --space-8: 4rem;
187
+ --space-9: 6rem;
188
+ }
package/public/themes/terminal/theme.css ADDED
@@ -0,0 +1,159 @@
1
+ @charset "UTF-8";
2
+ @import 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap';
3
+ :root, :root[data-theme=terminal] {
4
+ color-scheme: dark;
5
+ /* Surfaces — deep warm black + phosphor haze */
6
+ --paper: #0A0E0A;
7
+ --paper-raised: #0F140F;
8
+ --paper-sunk: #070A07;
9
+ --paper-glass: rgba(79, 224, 120, 0.06);
10
+ /* Ink — phosphor green on the tube */
11
+ --ink: #4FE078;
12
+ --ink-soft: #2A8B42;
13
+ --ink-faint: #3DAF4F;
14
+ --graphite: #1A3D22;
15
+ --muted: #2A8B42;
16
+ /* Scanlines / rule lines */
17
+ --guide: #1E5E2F;
18
+ --guide-soft: #143618;
19
+ --hair: #2A8B42;
20
+ --hair-soft: #1E5E2F;
21
+ /* Primary accent — cyan (terminal links) */
22
+ --ai: #7FDBFF;
23
+ --ai-ink: #5AB3D4;
24
+ --ai-wash: rgba(127, 219, 255, 0.10);
25
+ /* Seal — error red */
26
+ --shu: #FF5A5A;
27
+ --shu-wash: rgba(255, 90, 90, 0.10);
28
+ /* Accent — warning amber */
29
+ --ochre: #F0A030;
30
+ --ochre-wash: rgba(240, 160, 48, 0.10);
31
+ /* Code surface */
32
+ --code-bg: #070A07;
33
+ --code-ink: #4FE078;
34
+ --code-muted: #2C9245;
35
+ --code-accent: #F0A030;
36
+ --code-green: #8FFCA8;
37
+ --code-blue: #7FDBFF;
38
+ /* Typography — mono everywhere */
39
+ --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Fira Code', ui-monospace, Consolas, Menlo, 'Courier New', monospace;
40
+ --font-sans: var(--font-mono);
41
+ --font-serif: var(--font-mono);
42
+ --font-display: var(--font-mono);
43
+ --font-script: var(--font-mono);
44
+ /* Radius — CRT pixel corners */
45
+ --r-sm: 0;
46
+ --r-md: 0;
47
+ --r-lg: 0;
48
+ /* Shadows — phosphor rings */
49
+ --shadow-sm: 0 0 0 1px rgba(79, 224, 120, 0.20);
50
+ --shadow-md: 0 0 0 1px rgba(79, 224, 120, 0.30), 0 0 12px rgba(79, 224, 120, 0.15);
51
+ --shadow-lg: 0 0 0 1px rgba(79, 224, 120, 0.40), 0 0 24px rgba(79, 224, 120, 0.25);
52
+ --shadow-xl: 0 0 0 1px rgba(79, 224, 120, 0.50), 0 0 36px rgba(79, 224, 120, 0.30);
53
+ --shadow-2xl: 0 0 0 1px rgba(79, 224, 120, 0.60), 0 0 56px rgba(79, 224, 120, 0.40);
54
+ /* Blur — terminal has no frosted glass */
55
+ --blur-sm: none;
56
+ --blur-md: none;
57
+ --blur-lg: none;
58
+ /* Glow — phosphor halo */
59
+ --glow-sm: 0 0 4px rgba(79, 224, 120, 0.25);
60
+ --glow-md: 0 0 8px rgba(79, 224, 120, 0.35);
61
+ --glow-lg: 0 0 16px rgba(79, 224, 120, 0.45);
62
+ /* Motion — instant */
63
+ --duration-fast: 100ms;
64
+ --duration-normal: 140ms;
65
+ --duration-slow: 220ms;
66
+ --ease: cubic-bezier(0.2, 0.0, 0.2, 1);
67
+ /* Semantic aliases */
68
+ --background-default: var(--paper);
69
+ --background-subtle: var(--paper-sunk);
70
+ --background-navbar: var(--paper-raised);
71
+ --surface-default: var(--paper);
72
+ --surface-raised: var(--paper-raised);
73
+ --surface-sunk: var(--paper-sunk);
74
+ --surface-muted: var(--paper-sunk);
75
+ --surface-subtle: var(--paper-raised);
76
+ --surface-emphasis: var(--ink);
77
+ --surface-glass: var(--paper-glass);
78
+ --text-primary: var(--ink);
79
+ --text-secondary: var(--ink-soft);
80
+ --text-muted: var(--ink-faint);
81
+ --text-tertiary: var(--muted);
82
+ --text-inverse: var(--paper);
83
+ --text-link: var(--ai);
84
+ --text-link-hover: var(--ai-ink);
85
+ --border-default: var(--hair);
86
+ --border-subtle: var(--hair-soft);
87
+ --border-emphasis: var(--ink);
88
+ --border-focus: var(--ai);
89
+ --interactive-hover: rgba(79, 224, 120, 0.08);
90
+ --interactive-active: rgba(79, 224, 120, 0.15);
91
+ --brand-primary: var(--ai);
92
+ --brand-primary-hover: var(--ai-ink);
93
+ --action-primary-default: var(--ai);
94
+ --action-primary-hover: var(--ai-ink);
95
+ --action-primary-active: var(--ai-ink);
96
+ --action-primary-wash: var(--ai-wash);
97
+ --action-secondary-default: var(--shu);
98
+ --action-secondary-hover: var(--shu);
99
+ --action-secondary-active: var(--shu);
100
+ --action-secondary-wash: var(--shu-wash);
101
+ --action-tertiary-default: var(--ochre);
102
+ --action-tertiary-hover: var(--ochre);
103
+ --action-tertiary-active: var(--ochre);
104
+ --action-tertiary-wash: var(--ochre-wash);
105
+ --feedback-info: var(--ai);
106
+ --feedback-success: var(--code-green);
107
+ --feedback-warning: var(--ochre);
108
+ --feedback-error: var(--shu);
109
+ --info-default: var(--ai);
110
+ --info-subtle: rgba(127, 219, 255, 0.12);
111
+ --info-text: #7FDBFF;
112
+ --success-default: #8FFCA8;
113
+ --success-subtle: rgba(143, 252, 168, 0.12);
114
+ --success-text: #8FFCA8;
115
+ --warning-default: var(--ochre);
116
+ --warning-subtle: rgba(240, 160, 48, 0.12);
117
+ --warning-text: var(--ochre);
118
+ --error-default: var(--shu);
119
+ --error-subtle: rgba(255, 90, 90, 0.12);
120
+ --error-text: #FF7A7A;
121
+ /* Library scales */
122
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
123
+ The numbered scale is the source of truth: every component reads
124
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
125
+ are emitted by the library as references to these, so they follow
126
+ automatically. Change a value here and the whole page re-proportions.
127
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
128
+ --space-0: 0; /* flush */
129
+ --space-1: 0.5rem; /* tight inner gap */
130
+ --space-2: 0.75rem; /* control padding */
131
+ --space-3: 0.875rem; /* (no t-shirt) */
132
+ --space-4: 1rem; /* default rhythm */
133
+ --space-5: 1.5rem; /* section gap */
134
+ --space-6: 2rem; /* block gap */
135
+ --space-7: 3rem; /* major gap */
136
+ --space-8: 4rem; /* page section */
137
+ --space-9: 6rem; /* hero rhythm */
138
+ --radius-sm: 0;
139
+ --radius-md: 0;
140
+ --radius-lg: 0;
141
+ --radius-xl: 0;
142
+ --radius-full: 0;
143
+ --font-primary: var(--font-mono);
144
+ --font-size-base: 15px;
145
+ --line-height-normal: 1.5;
146
+ --font-weight-medium: 500;
147
+ --z-sticky: 1020;
148
+ --z-dropdown: 1030;
149
+ --z-backdrop: 1040;
150
+ --z-modal: 1050;
151
+ --z-popover: 1060;
152
+ --z-tooltip: 1070;
153
+ /* Component overrides */
154
+ --btn-radius: 0;
155
+ --card-radius: 0;
156
+ --input-radius: 0;
157
+ --card-shadow: var(--glow-sm);
158
+ --card-border: 1px solid var(--ink-faint);
159
+ }