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/scss/themes/press.scss ADDED
@@ -0,0 +1,241 @@
1
+ // ============================================================================
2
+ // THEME — Press
3
+ // ============================================================================
4
+ // Newsprint editorial.
5
+ // Light: warm off-white paper, near-black ink, press-red accent.
6
+ // Dark: night-newsroom, paper inverts to ink, press red stays hot.
7
+ //
8
+ // Fonts, radii, motion, spacing, z-index are IDENTICAL across modes.
9
+ // Only colors and shadow alphas differ — handled with light-dark().
10
+ //
11
+ // Selector: :root, :root[data-theme="press"]
12
+ // Modes: light + dark via prefers-color-scheme (browser auto-switches).
13
+ //
14
+ // Replaces the old split files (press-light + press-dark). Consumers using
15
+ // `<html data-theme="press-light">` must migrate to `<html data-theme="press">`.
16
+ // ============================================================================
17
+ @use '../mixins' as m;
18
+
19
+ @import 'https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700;1,900&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@400;500;600;700&display=swap';
20
+
21
+ @include m.theme('press') {
22
+ /* ----------------------------------------------------------------
23
+ Surfaces — light: warm newsprint / dark: near-ink newsroom
24
+ ---------------------------------------------------------------- */
25
+ --paper: light-dark(#FAFAF7, #0E0E0E);
26
+ --paper-raised: light-dark(#FFF, #1A1A1A);
27
+ --paper-sunk: light-dark(#F2F1EC, #060606);
28
+ --paper-glass: light-dark(rgba(255, 255, 255, 0.80), rgba(26, 26, 26, 0.82));
29
+
30
+ /* ----------------------------------------------------------------
31
+ Ink — light: warm near-black / dark: warm off-white
32
+ ---------------------------------------------------------------- */
33
+ --ink: light-dark(#0A0A0A, #FAFAF7);
34
+ --ink-soft: light-dark(#555, #C8C6C0);
35
+ --ink-faint: light-dark(#727069, #8A8A86);
36
+ --graphite: light-dark(#1A1A1A, #ECEAE4);
37
+ --muted: light-dark(#8E8C86, #6B6963);
38
+
39
+ /* Rules / hairlines */
40
+ --guide: light-dark(#1A1A1A, #ECEAE4);
41
+ --guide-soft: light-dark(#D9D7D1, #2A2A2A);
42
+ --hair: light-dark(#1A1A1A, #2A2A2A);
43
+ --hair-soft: light-dark(#ECEAE4, #1A1A1A);
44
+
45
+ /* Primary accent — near-ink editorial link */
46
+ --ai: light-dark(#1A1A1A, #A8A8A8);
47
+ --ai-ink: light-dark(#0A0A0A, #ECEAE4);
48
+ --ai-wash: light-dark(#ECEAE4, #1F1F1F);
49
+
50
+ /* Seal — press red */
51
+ --shu: light-dark(#D93025, #FF4538);
52
+ --shu-wash: light-dark(#FBEAE8, rgba(255, 69, 56, 0.14));
53
+
54
+ /* Pull-quote / marginalia — warm gold */
55
+ --ochre: light-dark(#B5873A, #E8B96E);
56
+ --ochre-wash: light-dark(#F4EBD6, rgba(232, 185, 110, 0.12));
57
+
58
+ /* Code surface */
59
+ --code-bg: light-dark(#0A0A0A, #060606);
60
+ --code-ink: #FAFAF7;
61
+ --code-muted: #8A8A86;
62
+ --code-accent: #E8B96E;
63
+ --code-green: #B8C57A;
64
+ --code-blue: #94AFC9;
65
+
66
+ /* ----------------------------------------------------------------
67
+ Typography — identical across modes
68
+ ---------------------------------------------------------------- */
69
+ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
70
+ --font-script: 'Caveat', 'Shadows Into Light', cursive;
71
+ --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
72
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
73
+ --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
74
+
75
+ /* ----------------------------------------------------------------
76
+ Radius — identical, editorial = always tight
77
+ ---------------------------------------------------------------- */
78
+ --r-sm: 2px;
79
+ --r-md: 3px;
80
+ --r-lg: 4px;
81
+
82
+ /* ----------------------------------------------------------------
83
+ Shadows — same shape, different alpha per mode (rgba is <color>)
84
+ ---------------------------------------------------------------- */
85
+ --shadow-sm: 0 1px 2px light-dark(rgba(10, 10, 10, 0.05), rgba(0, 0, 0, 0.35));
86
+ --shadow-md: 0 6px 24px light-dark(rgba(10, 10, 10, 0.06), rgba(0, 0, 0, 0.45));
87
+ --shadow-lg: 0 18px 48px light-dark(rgba(10, 10, 10, 0.09), rgba(0, 0, 0, 0.55));
88
+ --shadow-xl: 0 28px 64px light-dark(rgba(10, 10, 10, 0.12), rgba(0, 0, 0, 0.65));
89
+ --shadow-2xl: 0 40px 96px light-dark(rgba(10, 10, 10, 0.18), rgba(0, 0, 0, 0.75));
90
+
91
+ /* Blur / glow — editorial doesn't use these */
92
+ --blur-sm: none;
93
+ --blur-md: none;
94
+ --blur-lg: none;
95
+ --glow-sm: 0 0 0 transparent;
96
+ --glow-md: 0 0 0 transparent;
97
+ --glow-lg: 0 0 0 transparent;
98
+
99
+ /* ----------------------------------------------------------------
100
+ Motion — editorial pace, identical across modes
101
+ ---------------------------------------------------------------- */
102
+ --duration-fast: 200ms;
103
+ --duration-normal: 280ms;
104
+ --duration-slow: 420ms;
105
+ --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
106
+
107
+ /* ----------------------------------------------------------------
108
+ SEMANTIC ALIASES — bridge library expected names to Press palette
109
+ ---------------------------------------------------------------- */
110
+
111
+ /* Backgrounds */
112
+ --background-default: var(--paper);
113
+ --background-subtle: var(--paper-sunk);
114
+ --background-navbar: var(--paper-raised);
115
+
116
+ /* Surfaces */
117
+ --surface-default: var(--paper);
118
+ --surface-raised: var(--paper-raised);
119
+ --surface-sunk: var(--paper-sunk);
120
+ --surface-muted: var(--paper-sunk);
121
+ --surface-subtle: var(--paper-raised);
122
+ --surface-emphasis: var(--ink);
123
+ --surface-glass: var(--paper-glass);
124
+
125
+ /* Text */
126
+ --text-primary: var(--ink);
127
+ --text-secondary: var(--ink-soft);
128
+ --text-muted: var(--ink-faint);
129
+ --text-tertiary: var(--muted);
130
+ --text-inverse: var(--paper);
131
+ --text-link: light-dark(var(--ai), var(--ink));
132
+ --text-link-hover: light-dark(var(--ai-ink), var(--shu));
133
+
134
+ /* Borders */
135
+ --border-default: var(--hair);
136
+ --border-subtle: var(--hair-soft);
137
+ --border-emphasis: var(--ink);
138
+ --border-focus: light-dark(var(--ai), var(--shu));
139
+
140
+ /* Interactive (hover / active wash) */
141
+ --interactive-hover: light-dark(rgba(10, 10, 10, 0.05), rgba(250, 250, 247, 0.05));
142
+ --interactive-active: light-dark(rgba(10, 10, 10, 0.10), rgba(250, 250, 247, 0.10));
143
+
144
+ /* Brand */
145
+ --brand-primary: light-dark(var(--ai), var(--ink));
146
+ --brand-primary-hover: light-dark(var(--ai-ink), var(--shu));
147
+
148
+ /* Action — three groups */
149
+ --action-primary-default: light-dark(var(--ai), var(--ink));
150
+ --action-primary-hover: var(--ai-ink);
151
+ --action-primary-active: var(--ai-ink);
152
+ --action-primary-wash: var(--ai-wash);
153
+ --action-secondary-default: var(--shu);
154
+ --action-secondary-hover: var(--shu);
155
+ --action-secondary-active: var(--shu);
156
+ --action-secondary-wash: var(--shu-wash);
157
+ --action-tertiary-default: var(--ochre);
158
+ --action-tertiary-hover: var(--ochre);
159
+ --action-tertiary-active: var(--ochre);
160
+ --action-tertiary-wash: var(--ochre-wash);
161
+
162
+ /* Feedback (high-level semantic) */
163
+ --feedback-info: var(--ai);
164
+ --feedback-success: var(--code-green);
165
+ --feedback-warning: var(--ochre);
166
+ --feedback-error: var(--shu);
167
+
168
+ /* Status — info */
169
+ --info-default: var(--ai);
170
+ --info-subtle: var(--ai-wash);
171
+ --info-text: var(--ai-ink);
172
+
173
+ /* Status — success (restrained editorial green) */
174
+ --success-default: light-dark(#2F7A3A, #6FA85A);
175
+ --success-subtle: light-dark(#E3EEDF, rgba(111, 168, 90, 0.14));
176
+ --success-text: light-dark(#1F5228, #95C97F);
177
+
178
+ /* Status — warning (warm editorial ochre) */
179
+ --warning-default: light-dark(#A86A1A, var(--ochre));
180
+ --warning-subtle: var(--ochre-wash);
181
+ --warning-text: light-dark(#6B4512, #F0CC8E);
182
+
183
+ /* Status — error (press red IS the error color) */
184
+ --error-default: var(--shu);
185
+ --error-subtle: var(--shu-wash);
186
+ --error-text: light-dark(#8A1D15, #FF7A70);
187
+
188
+ /* ----------------------------------------------------------------
189
+ LIBRARY SCALES — identical across modes
190
+ ---------------------------------------------------------------- */
191
+
192
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
193
+ The numbered scale is the source of truth: every component reads
194
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
195
+ are emitted by the library as references to these, so they follow
196
+ automatically. Change a value here and the whole page re-proportions.
197
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
198
+ --space-0: 0; /* flush */
199
+ --space-1: 0.5rem; /* tight inner gap */
200
+ --space-2: 0.75rem; /* control padding */
201
+ --space-3: 0.875rem; /* (no t-shirt) */
202
+ --space-4: 1rem; /* default rhythm */
203
+ --space-5: 1.5rem; /* section gap */
204
+ --space-6: 2rem; /* block gap */
205
+ --space-7: 3rem; /* major gap */
206
+ --space-8: 4rem; /* page section */
207
+ --space-9: 6rem; /* hero rhythm */
208
+
209
+
210
+
211
+
212
+
213
+
214
+ --radius-sm: var(--r-sm);
215
+ --radius-md: var(--r-md);
216
+ --radius-lg: var(--r-lg);
217
+ --radius-xl: 6px;
218
+ --radius-full: 9999px;
219
+
220
+ --font-primary: var(--font-sans);
221
+ --font-size-base: 1rem;
222
+ --line-height-normal: 1.5;
223
+ --font-weight-medium: 500;
224
+
225
+ --z-sticky: 1020;
226
+ --z-dropdown: 1030;
227
+ --z-backdrop: 1040;
228
+ --z-modal: 1050;
229
+ --z-popover: 1060;
230
+ --z-tooltip: 1070;
231
+
232
+ /* ----------------------------------------------------------------
233
+ COMPONENT OVERRIDES — identical across modes
234
+ ---------------------------------------------------------------- */
235
+ --btn-radius: var(--r-sm); /* 2px — near-square */
236
+ --card-radius: var(--r-sm); /* 2px — boxed */
237
+ --card-shadow: none; /* editorial is flat */
238
+ --card-border: 1px solid var(--hair); /* thin rule instead */
239
+ --input-radius: var(--r-sm); /* 2px */
240
+ --modal-radius: var(--r-md); /* 3px */
241
+ }
package/scss/themes/prism-dark.scss ADDED
@@ -0,0 +1,217 @@
1
+ /* ============================================================
2
+ THEME — Prism Dark
3
+ -----------------------------------------------------------
4
+ Dark companion to Prism Light. Same Vercel/Linear/Radix UI
5
+ philosophy: neutral grays, refined blue accent (brighter
6
+ for dark surfaces), border-driven, tight radii.
7
+
8
+ Opt-in via `<html data-theme="prism-dark">`. Does not match
9
+ `:root` — pair with prism-light's theme.css to get a default
10
+ light mode and an opt-in dark mode in the same project.
11
+ ============================================================ */
12
+
13
+ @use '../mixins' as m;
14
+
15
+ @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
16
+
17
+ @include m.theme('prism-dark', dark) {
18
+ /* Surfaces — Zinc dark ramp */
19
+ --paper: #09090b;
20
+ --paper-raised: #18181b;
21
+ --paper-sunk: #27272a;
22
+ --paper-glass: rgba(24, 24, 27, 0.80);
23
+
24
+ /* Ink — inverted neutrals */
25
+ --ink: #fafafa;
26
+ --ink-soft: #e4e4e7;
27
+ --ink-faint: #a1a1aa;
28
+ --graphite: #f4f4f5;
29
+ --muted: #71717a;
30
+
31
+ /* Lines — dark borders */
32
+ --guide: #3f3f46;
33
+ --guide-soft: #27272a;
34
+ --hair: #27272a;
35
+ --hair-soft: #18181b;
36
+
37
+ /* Primary accent — brighter blue for dark surfaces */
38
+ --ai: #3b82f6;
39
+ --ai-ink: #60a5fa;
40
+ --ai-wash: #1e3a8a;
41
+
42
+ /* Seal — red */
43
+ --shu: #ef4444;
44
+ --shu-wash: #450a0a;
45
+
46
+ /* Tertiary — amber */
47
+ --ochre: #eab308;
48
+ --ochre-wash: #422006;
49
+
50
+ /* Code — dark syntax surface */
51
+ --code-bg: #0a0a0a;
52
+ --code-ink: #e4e4e7;
53
+ --code-muted: #808089;
54
+ --code-accent: #fb923c;
55
+ --code-green: #4ade80;
56
+ --code-blue: #60a5fa;
57
+
58
+ /* Typography */
59
+ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
60
+ --font-script: 'Inter', cursive;
61
+ --font-serif: Georgia, 'Times New Roman', Times, serif;
62
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
63
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
64
+
65
+ /* Radius */
66
+ --r-sm: 4px;
67
+ --r-md: 6px;
68
+ --r-lg: 8px;
69
+
70
+ /* Shadow — heavier for dark backgrounds */
71
+ --shadow-sm: 0 1px 1px rgba(0, 0, 0, .3);
72
+ --shadow-md: 0 1px 2px rgba(0, 0, 0, .4);
73
+ --shadow-lg: 0 4px 12px -4px rgba(0, 0, 0, .6);
74
+ --shadow-xl: 0 16px 32px -16px rgba(0, 0, 0, .7);
75
+ --shadow-2xl: 0 0 0 1px #27272a, 0 8px 24px -8px rgba(0, 0, 0, .6);
76
+
77
+ /* Blur */
78
+ --blur-sm: none;
79
+ --blur-md: none;
80
+ --blur-lg: none;
81
+
82
+ /* Glow */
83
+ --glow-sm: 0 0 0 transparent;
84
+ --glow-md: 0 0 0 transparent;
85
+ --glow-lg: 0 0 0 transparent;
86
+
87
+ /* Motion */
88
+ --duration-fast: 100ms;
89
+ --duration-normal: 150ms;
90
+ --duration-slow: 250ms;
91
+ --ease: cubic-bezier(.32, .72, 0, 1);
92
+
93
+ /* Backgrounds */
94
+ --background-default: var(--paper);
95
+ --background-subtle: var(--paper-sunk);
96
+ --background-navbar: var(--paper-raised);
97
+
98
+ /* Surfaces (semantic) */
99
+ --surface-default: var(--paper);
100
+ --surface-raised: var(--paper-raised);
101
+ --surface-sunk: var(--paper-sunk);
102
+ --surface-muted: var(--paper-sunk);
103
+ --surface-subtle: var(--paper-raised);
104
+ --surface-emphasis: var(--ink);
105
+ --surface-glass: var(--paper-glass);
106
+
107
+ /* Text */
108
+ --text-primary: var(--ink);
109
+ --text-secondary: var(--ink-soft);
110
+ --text-muted: var(--ink-faint);
111
+ --text-tertiary: var(--muted);
112
+ --text-inverse: var(--paper);
113
+ --text-link: var(--ai);
114
+ --text-link-hover: var(--ai-ink);
115
+
116
+ /* Borders */
117
+ --border-default: var(--hair);
118
+ --border-subtle: var(--hair-soft);
119
+ --border-emphasis: var(--guide);
120
+ --border-focus: var(--ai);
121
+
122
+ /* Interactive overlays — light wash on dark */
123
+ --interactive-hover: rgba(255, 255, 255, 0.05);
124
+ --interactive-active: rgba(255, 255, 255, 0.10);
125
+
126
+ /* Brand */
127
+ --brand-primary: var(--ai);
128
+ --brand-primary-hover: var(--ai-ink);
129
+
130
+ /* Action triplets */
131
+ --action-primary-default: var(--ai);
132
+ --action-primary-hover: var(--ai-ink);
133
+ --action-primary-active: var(--ai-ink);
134
+ --action-primary-wash: var(--ai-wash);
135
+ --action-secondary-default: var(--shu);
136
+ --action-secondary-hover: var(--shu);
137
+ --action-secondary-active: var(--shu);
138
+ --action-secondary-wash: var(--shu-wash);
139
+ --action-tertiary-default: var(--ochre);
140
+ --action-tertiary-hover: var(--ochre);
141
+ --action-tertiary-active: var(--ochre);
142
+ --action-tertiary-wash: var(--ochre-wash);
143
+
144
+ /* Feedback */
145
+ --feedback-info: var(--ai);
146
+ --feedback-success: #22c55e;
147
+ --feedback-warning: var(--ochre);
148
+ --feedback-error: var(--shu);
149
+
150
+ /* Status — info */
151
+ --info-default: var(--ai);
152
+ --info-subtle: var(--ai-wash);
153
+ --info-text: #85BFFF;
154
+
155
+ /* Status — success */
156
+ --success-default: #22c55e;
157
+ --success-subtle: #14532d;
158
+ --success-text: #4ade80;
159
+
160
+ /* Status — warning */
161
+ --warning-default: #eab308;
162
+ --warning-subtle: #422006;
163
+ --warning-text: #fde047;
164
+
165
+ /* Status — error */
166
+ --error-default: #ef4444;
167
+ --error-subtle: #450a0a;
168
+ --error-text: #fca5a5;
169
+
170
+ /* Space scale */
171
+
172
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
173
+ The numbered scale is the source of truth: every component reads
174
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
175
+ are emitted by the library as references to these, so they follow
176
+ automatically. Change a value here and the whole page re-proportions.
177
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
178
+ --space-0: 0; /* flush */
179
+ --space-1: 0.5rem; /* tight inner gap */
180
+ --space-2: 0.75rem; /* control padding */
181
+ --space-3: 0.875rem; /* (no t-shirt) */
182
+ --space-4: 1rem; /* default rhythm */
183
+ --space-5: 1.5rem; /* section gap */
184
+ --space-6: 2rem; /* block gap */
185
+ --space-7: 3rem; /* major gap */
186
+ --space-8: 4rem; /* page section */
187
+ --space-9: 6rem; /* hero rhythm */
188
+
189
+ /* Radius alias */
190
+ --radius-sm: var(--r-sm);
191
+ --radius-md: var(--r-md);
192
+ --radius-lg: var(--r-lg);
193
+ --radius-xl: 12px;
194
+ --radius-full: 9999px;
195
+
196
+ /* Typography */
197
+ --font-primary: var(--font-sans);
198
+ --font-size-base: 1rem;
199
+ --line-height-normal: 1.5;
200
+ --font-weight-medium: 500;
201
+
202
+ /* Z-index layers */
203
+ --z-sticky: 1020;
204
+ --z-dropdown: 1030;
205
+ --z-backdrop: 1040;
206
+ --z-modal: 1050;
207
+ --z-popover: 1060;
208
+ --z-tooltip: 1070;
209
+
210
+ /* Component overrides */
211
+ --btn-radius: var(--r-md);
212
+ --card-radius: var(--r-md);
213
+ --card-shadow: var(--shadow-sm);
214
+ --card-border: 1px solid var(--hair);
215
+ --input-radius: var(--r-md);
216
+ --modal-radius: var(--r-lg);
217
+ }
package/scss/themes/prism-light.scss ADDED
@@ -0,0 +1,220 @@
1
+ /* ============================================================
2
+ THEME — Prism Light
3
+ -----------------------------------------------------------
4
+ Clean component-library aesthetic inspired by Vercel,
5
+ Linear, Radix UI, shadcn/ui. Neutral grays do the heavy
6
+ lifting, single restrained refined-blue accent,
7
+ border-driven (not shadow-driven), generous whitespace.
8
+
9
+ Long-term default theme for boilerplate-derived projects.
10
+ Pairs with `prism-dark` (separate file).
11
+
12
+ Sketchbook is css-is-awesome's brand theme. This is one
13
+ of the shipped consumer themes.
14
+ ============================================================ */
15
+
16
+ @use '../mixins' as m;
17
+
18
+ @import 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap';
19
+
20
+ @include m.theme('prism-light', light) {
21
+ /* Surfaces */
22
+ --paper: #fff;
23
+ --paper-raised: #fff;
24
+ --paper-sunk: #f4f4f5;
25
+ --paper-glass: rgba(255, 255, 255, 0.80);
26
+
27
+ /* Ink — Zinc neutral ramp */
28
+ --ink: #09090b;
29
+ --ink-soft: #27272a;
30
+ --ink-faint: #52525b;
31
+ --graphite: #18181b;
32
+ --muted: #71717a;
33
+
34
+ /* Lines */
35
+ --guide: #d4d4d8;
36
+ --guide-soft: #e4e4e7;
37
+ --hair: #e4e4e7;
38
+ --hair-soft: #f4f4f5;
39
+
40
+ /* Primary accent — refined blue */
41
+ --ai: #2563eb;
42
+ --ai-ink: #1d4ed8;
43
+ --ai-wash: #eff6ff;
44
+
45
+ /* Seal — red (used for error / secondary) */
46
+ --shu: #dc2626;
47
+ --shu-wash: #fef2f2;
48
+
49
+ /* Tertiary — amber (used for warning) */
50
+ --ochre: #ca8a04;
51
+ --ochre-wash: #fefce8;
52
+
53
+ /* Code — light syntax surface */
54
+ --code-bg: #fafafa;
55
+ --code-ink: #18181b;
56
+ --code-muted: #71717a;
57
+ --code-accent: #c2410c;
58
+ --code-green: #117C38;
59
+ --code-blue: #2563eb;
60
+
61
+ /* Typography */
62
+ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
63
+ --font-script: 'Inter', cursive;
64
+ --font-serif: Georgia, 'Times New Roman', Times, serif;
65
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
66
+ --font-mono: 'JetBrains Mono', 'SF Mono', 'Roboto Mono', Consolas, Menlo, monospace;
67
+
68
+ /* Radius */
69
+ --r-sm: 4px;
70
+ --r-md: 6px;
71
+ --r-lg: 8px;
72
+
73
+ /* Shadow — extremely subtle */
74
+ --shadow-sm: 0 1px 1px rgba(9, 9, 11, .03);
75
+ --shadow-md: 0 1px 2px rgba(9, 9, 11, .05);
76
+ --shadow-lg: 0 4px 12px -4px rgba(9, 9, 11, .08);
77
+ --shadow-xl: 0 16px 32px -16px rgba(9, 9, 11, .15);
78
+ --shadow-2xl: 0 0 0 1px #e4e4e7, 0 8px 24px -8px rgba(9, 9, 11, .12);
79
+
80
+ /* Blur — Prism doesn't use frosted surfaces */
81
+ --blur-sm: none;
82
+ --blur-md: none;
83
+ --blur-lg: none;
84
+
85
+ /* Glow — Prism doesn't use glow effects */
86
+ --glow-sm: 0 0 0 transparent;
87
+ --glow-md: 0 0 0 transparent;
88
+ --glow-lg: 0 0 0 transparent;
89
+
90
+ /* Motion — fast and crisp */
91
+ --duration-fast: 100ms;
92
+ --duration-normal: 150ms;
93
+ --duration-slow: 250ms;
94
+ --ease: cubic-bezier(.32, .72, 0, 1);
95
+
96
+ /* Backgrounds */
97
+ --background-default: var(--paper);
98
+ --background-subtle: var(--paper-sunk);
99
+ --background-navbar: var(--paper-raised);
100
+
101
+ /* Surfaces (semantic) */
102
+ --surface-default: var(--paper);
103
+ --surface-raised: var(--paper-raised);
104
+ --surface-sunk: var(--paper-sunk);
105
+ --surface-muted: var(--paper-sunk);
106
+ --surface-subtle: var(--paper-raised);
107
+ --surface-emphasis: var(--ink);
108
+ --surface-glass: var(--paper-glass);
109
+
110
+ /* Text */
111
+ --text-primary: var(--ink);
112
+ --text-secondary: var(--ink-soft);
113
+ --text-muted: var(--ink-faint);
114
+ --text-tertiary: var(--muted);
115
+ --text-inverse: var(--paper);
116
+ --text-link: var(--ai);
117
+ --text-link-hover: var(--ai-ink);
118
+
119
+ /* Borders */
120
+ --border-default: var(--hair);
121
+ --border-subtle: var(--hair-soft);
122
+ --border-emphasis: var(--guide);
123
+ --border-focus: var(--ai);
124
+
125
+ /* Interactive overlays */
126
+ --interactive-hover: rgba(9, 9, 11, 0.05);
127
+ --interactive-active: rgba(9, 9, 11, 0.10);
128
+
129
+ /* Brand */
130
+ --brand-primary: var(--ai);
131
+ --brand-primary-hover: var(--ai-ink);
132
+
133
+ /* Action triplets */
134
+ --action-primary-default: var(--ai);
135
+ --action-primary-hover: var(--ai-ink);
136
+ --action-primary-active: var(--ai-ink);
137
+ --action-primary-wash: var(--ai-wash);
138
+ --action-secondary-default: var(--shu);
139
+ --action-secondary-hover: var(--shu);
140
+ --action-secondary-active: var(--shu);
141
+ --action-secondary-wash: var(--shu-wash);
142
+ --action-tertiary-default: var(--ochre);
143
+ --action-tertiary-hover: var(--ochre);
144
+ --action-tertiary-active: var(--ochre);
145
+ --action-tertiary-wash: var(--ochre-wash);
146
+
147
+ /* Feedback */
148
+ --feedback-info: var(--ai);
149
+ --feedback-success: #16a34a;
150
+ --feedback-warning: var(--ochre);
151
+ --feedback-error: var(--shu);
152
+
153
+ /* Status — info */
154
+ --info-default: var(--ai);
155
+ --info-subtle: var(--ai-wash);
156
+ --info-text: var(--ai-ink);
157
+
158
+ /* Status — success */
159
+ --success-default: #16a34a;
160
+ --success-subtle: #f0fdf4;
161
+ --success-text: #15803d;
162
+
163
+ /* Status — warning */
164
+ --warning-default: #ca8a04;
165
+ --warning-subtle: #fefce8;
166
+ --warning-text: #854d0e;
167
+
168
+ /* Status — error */
169
+ --error-default: #dc2626;
170
+ --error-subtle: #fef2f2;
171
+ --error-text: #b91c1c;
172
+
173
+ /* Space scale */
174
+
175
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
176
+ The numbered scale is the source of truth: every component reads
177
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
178
+ are emitted by the library as references to these, so they follow
179
+ automatically. Change a value here and the whole page re-proportions.
180
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
181
+ --space-0: 0; /* flush */
182
+ --space-1: 0.5rem; /* tight inner gap */
183
+ --space-2: 0.75rem; /* control padding */
184
+ --space-3: 0.875rem; /* (no t-shirt) */
185
+ --space-4: 1rem; /* default rhythm */
186
+ --space-5: 1.5rem; /* section gap */
187
+ --space-6: 2rem; /* block gap */
188
+ --space-7: 3rem; /* major gap */
189
+ --space-8: 4rem; /* page section */
190
+ --space-9: 6rem; /* hero rhythm */
191
+
192
+ /* Radius alias */
193
+ --radius-sm: var(--r-sm);
194
+ --radius-md: var(--r-md);
195
+ --radius-lg: var(--r-lg);
196
+ --radius-xl: 12px;
197
+ --radius-full: 9999px;
198
+
199
+ /* Typography */
200
+ --font-primary: var(--font-sans);
201
+ --font-size-base: 1rem;
202
+ --line-height-normal: 1.5;
203
+ --font-weight-medium: 500;
204
+
205
+ /* Z-index layers */
206
+ --z-sticky: 1020;
207
+ --z-dropdown: 1030;
208
+ --z-backdrop: 1040;
209
+ --z-modal: 1050;
210
+ --z-popover: 1060;
211
+ --z-tooltip: 1070;
212
+
213
+ /* Component overrides — Prism is border-driven and tightly rounded */
214
+ --btn-radius: var(--r-md);
215
+ --card-radius: var(--r-md);
216
+ --card-shadow: var(--shadow-sm);
217
+ --card-border: 1px solid var(--hair);
218
+ --input-radius: var(--r-md);
219
+ --modal-radius: var(--r-lg);
220
+ }