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-dark.scss ADDED
@@ -0,0 +1,237 @@
1
+ /* ============================================================
2
+ THEME — Press Dark
3
+ -----------------------------------------------------------
4
+ Dark companion to Press (newsprint editorial light). Same
5
+ editorial voice: dramatic Playfair display, classical
6
+ measure, very square radii, slow editorial motion. Only
7
+ the COLOR palette inverts.
8
+
9
+ Mood: night-newsroom / Stripe Press dark / editorial-after-
10
+ dark. Background is near-ink with warmer-than-pure-black
11
+ surfaces — the paper went black, not the press red. Press
12
+ red stays the single hot accent. Serifs stay.
13
+
14
+ Opt-in via `<html data-theme="press-dark">`. Pair with
15
+ press/theme.css to ship a project with a default light
16
+ editorial mode and an opt-in dark editorial mode.
17
+ ============================================================ */
18
+
19
+ @use '../mixins' as m;
20
+
21
+ @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';
22
+
23
+ @include m.theme('press-dark', dark) {
24
+ /* Surfaces — near-ink newsroom */
25
+ --paper: #0E0E0E;
26
+ --paper-raised: #1A1A1A;
27
+ --paper-sunk: #060606;
28
+ --paper-glass: rgba(26, 26, 26, 0.82);
29
+
30
+ /* Ink — warm off-white headline */
31
+ --ink: #FAFAF7;
32
+ --ink-soft: #C8C6C0;
33
+ --ink-faint: #8A8A86;
34
+ --graphite: #ECEAE4;
35
+ --muted: #6B6963;
36
+
37
+ /* Rules / hairlines — thin editorial rules on dark */
38
+ --guide: #ECEAE4;
39
+ --guide-soft: #2A2A2A;
40
+ --hair: #2A2A2A;
41
+ --hair-soft: #1A1A1A;
42
+
43
+ /* Primary accent — cool ink, near-mono editorial link */
44
+ --ai: #A8A8A8;
45
+ --ai-ink: #ECEAE4;
46
+ --ai-wash: #1F1F1F;
47
+
48
+ /* Seal — press red (kept hot) */
49
+ --shu: #FF4538;
50
+ --shu-wash: rgba(255, 69, 56, 0.14);
51
+
52
+ /* Pull-quote / marginalia — warm gold */
53
+ --ochre: #E8B96E;
54
+ --ochre-wash: rgba(232, 185, 110, 0.12);
55
+
56
+ /* Code surface — keep ink-slab, lifted slightly above paper */
57
+ --code-bg: #060606;
58
+ --code-ink: #FAFAF7;
59
+ --code-muted: #8A8A86;
60
+ --code-accent: #E8B96E;
61
+ --code-green: #B8C57A;
62
+ --code-blue: #94AFC9;
63
+
64
+ /* Typography — match Press */
65
+ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
66
+ --font-script: 'Caveat', 'Shadows Into Light', cursive;
67
+ --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
68
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
69
+ --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
70
+
71
+ /* Radius — match Press, very square */
72
+ --r-sm: 2px;
73
+ --r-md: 3px;
74
+ --r-lg: 4px;
75
+
76
+ /* Shadows — minimal, deeper for dark */
77
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
78
+ --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
79
+ --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
80
+ --shadow-xl: 0 28px 64px rgba(0, 0, 0, .65);
81
+ --shadow-2xl: 0 40px 96px rgba(0, 0, 0, .75);
82
+
83
+ /* Blur — editorial doesn't use it */
84
+ --blur-sm: none;
85
+ --blur-md: none;
86
+ --blur-lg: none;
87
+
88
+ /* Glow — editorial doesn't use it */
89
+ --glow-sm: 0 0 0 transparent;
90
+ --glow-md: 0 0 0 transparent;
91
+ --glow-lg: 0 0 0 transparent;
92
+
93
+ /* Motion — editorial pace, match Press */
94
+ --duration-fast: 200ms;
95
+ --duration-normal: 280ms;
96
+ --duration-slow: 420ms;
97
+ --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
98
+
99
+ /* ----------------------------------------------------------
100
+ SEMANTIC ALIASES
101
+ ---------------------------------------------------------- */
102
+
103
+ /* Backgrounds */
104
+ --background-default: var(--paper);
105
+ --background-subtle: var(--paper-sunk);
106
+ --background-navbar: var(--paper-raised);
107
+
108
+ /* Surfaces */
109
+ --surface-default: var(--paper);
110
+ --surface-raised: var(--paper-raised);
111
+ --surface-sunk: var(--paper-sunk);
112
+ --surface-muted: var(--paper-sunk);
113
+ --surface-subtle: var(--paper-raised);
114
+ --surface-emphasis: var(--ink);
115
+ --surface-glass: var(--paper-glass);
116
+
117
+ /* Text */
118
+ --text-primary: var(--ink);
119
+ --text-secondary: var(--ink-soft);
120
+ --text-muted: var(--ink-faint);
121
+ --text-tertiary: var(--muted);
122
+ --text-inverse: var(--paper);
123
+ --text-link: var(--ink);
124
+ --text-link-hover: var(--shu);
125
+
126
+ /* Borders */
127
+ --border-default: var(--hair);
128
+ --border-subtle: var(--hair-soft);
129
+ --border-emphasis: var(--ink);
130
+ --border-focus: var(--shu);
131
+
132
+ /* Interactive (hover / active wash) — light wash on dark */
133
+ --interactive-hover: rgba(250, 250, 247, 0.05);
134
+ --interactive-active: rgba(250, 250, 247, 0.10);
135
+
136
+ /* Brand */
137
+ --brand-primary: var(--ink);
138
+ --brand-primary-hover: var(--shu);
139
+
140
+ /* Action triplets */
141
+ --action-primary-default: var(--ink);
142
+ --action-primary-hover: var(--ai-ink);
143
+ --action-primary-active: var(--ai-ink);
144
+ --action-primary-wash: var(--ai-wash);
145
+ --action-secondary-default: var(--shu);
146
+ --action-secondary-hover: var(--shu);
147
+ --action-secondary-active: var(--shu);
148
+ --action-secondary-wash: var(--shu-wash);
149
+ --action-tertiary-default: var(--ochre);
150
+ --action-tertiary-hover: var(--ochre);
151
+ --action-tertiary-active: var(--ochre);
152
+ --action-tertiary-wash: var(--ochre-wash);
153
+
154
+ /* Feedback */
155
+ --feedback-info: var(--ai);
156
+ --feedback-success: var(--code-green);
157
+ --feedback-warning: var(--ochre);
158
+ --feedback-error: var(--shu);
159
+
160
+ /* Status — info (near-mono editorial) */
161
+ --info-default: var(--ai);
162
+ --info-subtle: var(--ai-wash);
163
+ --info-text: var(--ai-ink);
164
+
165
+ /* Status — success (restrained editorial green, lifted) */
166
+ --success-default: #6FA85A;
167
+ --success-subtle: rgba(111, 168, 90, 0.14);
168
+ --success-text: #95C97F;
169
+
170
+ /* Status — warning (warm editorial ochre) */
171
+ --warning-default: var(--ochre);
172
+ --warning-subtle: var(--ochre-wash);
173
+ --warning-text: #F0CC8E;
174
+
175
+ /* Status — error — press red IS the error color */
176
+ --error-default: var(--shu);
177
+ --error-subtle: var(--shu-wash);
178
+ --error-text: #FF7A70;
179
+
180
+ /* ----------------------------------------------------------
181
+ LIBRARY SCALES
182
+ ---------------------------------------------------------- */
183
+
184
+ /* Space scale */
185
+
186
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
187
+ The numbered scale is the source of truth: every component reads
188
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
189
+ are emitted by the library as references to these, so they follow
190
+ automatically. Change a value here and the whole page re-proportions.
191
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
192
+ --space-0: 0; /* flush */
193
+ --space-1: 0.5rem; /* tight inner gap */
194
+ --space-2: 0.75rem; /* control padding */
195
+ --space-3: 0.875rem; /* (no t-shirt) */
196
+ --space-4: 1rem; /* default rhythm */
197
+ --space-5: 1.5rem; /* section gap */
198
+ --space-6: 2rem; /* block gap */
199
+ --space-7: 3rem; /* major gap */
200
+ --space-8: 4rem; /* page section */
201
+ --space-9: 6rem; /* hero rhythm */
202
+
203
+
204
+
205
+
206
+
207
+ /* Radius alias — Press is editorial, xl stays tight (6px) */
208
+ --radius-sm: var(--r-sm);
209
+ --radius-md: var(--r-md);
210
+ --radius-lg: var(--r-lg);
211
+ --radius-xl: 6px;
212
+ --radius-full: 9999px;
213
+
214
+ /* Typography */
215
+ --font-primary: var(--font-sans);
216
+ --font-size-base: 1rem;
217
+ --line-height-normal: 1.5;
218
+ --font-weight-medium: 500;
219
+
220
+ /* Z-index */
221
+ --z-sticky: 1020;
222
+ --z-dropdown: 1030;
223
+ --z-backdrop: 1040;
224
+ --z-modal: 1050;
225
+ --z-popover: 1060;
226
+ --z-tooltip: 1070;
227
+
228
+ /* ----------------------------------------------------------
229
+ OPTIONAL COMPONENT OVERRIDES — match Press exactly
230
+ ---------------------------------------------------------- */
231
+ --btn-radius: var(--r-sm); /* 2px — near-square */
232
+ --card-radius: var(--r-sm); /* 2px — boxed */
233
+ --card-shadow: none; /* editorial is flat */
234
+ --card-border: 1px solid var(--hair); /* thin rule instead */
235
+ --input-radius: var(--r-sm); /* 2px */
236
+ --modal-radius: var(--r-md); /* 3px */
237
+ }
package/scss/themes/press-light.scss ADDED
@@ -0,0 +1,273 @@
1
+ /* ============================================================
2
+ THEME — Press (light)
3
+ -----------------------------------------------------------
4
+ Standalone file for `[data-theme="press-light"]` consumers.
5
+ This is the ONE FILE users swap to reskin their site.
6
+ Replace this file with any other theme.css to change the
7
+ entire look & feel. Tokens only — no component CSS lives here.
8
+
9
+ Mood: T-Magazine / Stripe Press / Apple Newsroom editorial
10
+ newsprint. Classical measure, thin hairlines, dramatic serif
11
+ display, a single press-red accent. Warm off-white paper,
12
+ near-black ink, very square radii, minimal flat shadows.
13
+
14
+ TOKEN CONTRACT
15
+ -----------------------------------------------------------
16
+ Every theme MUST declare every variable in this file, even
17
+ if it sets it to a neutral value (e.g. --blur-md: none;).
18
+ That's what guarantees a clean one-file swap.
19
+
20
+ Slots:
21
+ Surfaces : --paper, --paper-raised, --paper-sunk, --paper-glass
22
+ Ink : --ink, --ink-soft, --ink-faint, --graphite, --muted
23
+ Lines : --guide, --guide-soft, --hair, --hair-soft
24
+ Primary : --ai, --ai-ink, --ai-wash (near-ink editorial link)
25
+ Seal : --shu, --shu-wash (press red — the accent)
26
+ Accent : --ochre, --ochre-wash (warm gold / pull-quote)
27
+ Code : --code-bg/ink/muted/accent/green/blue
28
+ Type : --font-display/script/serif/sans/mono
29
+ Radius : --r-sm, --r-md, --r-lg
30
+ Shadow : --shadow-sm, --shadow-md, --shadow-lg
31
+ Blur : --blur-sm, --blur-md, --blur-lg (editorial: none)
32
+ Glow : --glow-sm, --glow-md, --glow-lg (editorial: transparent)
33
+ Motion : --duration-fast, --duration-normal, --duration-slow, --ease
34
+ ============================================================ */
35
+
36
+ @use '../mixins' as m;
37
+
38
+ @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';
39
+
40
+ @include m.theme('press-light', light) {
41
+ /* Surfaces — warm newsprint */
42
+ --paper: #FAFAF7;
43
+ --paper-raised: #FFF;
44
+ --paper-sunk: #F2F1EC;
45
+ --paper-glass: rgba(255, 255, 255, 0.80);
46
+
47
+ /* Ink — warm near-black */
48
+ --ink: #0A0A0A;
49
+ --ink-soft: #555;
50
+ --ink-faint: #727069;
51
+ --graphite: #1A1A1A;
52
+ --muted: #8E8C86;
53
+
54
+ /* Rules / hairlines — thin editorial rules */
55
+ --guide: #1A1A1A;
56
+ --guide-soft: #D9D7D1;
57
+ --hair: #1A1A1A;
58
+ --hair-soft: #ECEAE4;
59
+
60
+ /* Primary accent — near-ink editorial link (not a bright hue) */
61
+ --ai: #1A1A1A;
62
+ --ai-ink: #0A0A0A;
63
+ --ai-wash: #ECEAE4;
64
+
65
+ /* Seal — press red (the single editorial accent) */
66
+ --shu: #D93025;
67
+ --shu-wash: #FBEAE8;
68
+
69
+ /* Pull-quote / marginalia — warm gold */
70
+ --ochre: #B5873A;
71
+ --ochre-wash: #F4EBD6;
72
+
73
+ /* Code surface — keep editorial (ink slab) */
74
+ --code-bg: #0A0A0A;
75
+ --code-ink: #FAFAF7;
76
+ --code-muted: #8A8A86;
77
+ --code-accent: #E8B96E;
78
+ --code-green: #B8C57A;
79
+ --code-blue: #94AFC9;
80
+
81
+ /* Typography */
82
+ --font-display: 'Playfair Display', 'Tiempos', 'Fraunces', Georgia, serif;
83
+ --font-script: 'Caveat', 'Shadows Into Light', cursive;
84
+ --font-serif: 'Playfair Display', 'Tiempos', 'Cormorant Garamond', Georgia, serif;
85
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
86
+ --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;
87
+
88
+ /* Radius — editorial is tight, very square */
89
+ --r-sm: 2px;
90
+ --r-md: 3px;
91
+ --r-lg: 4px;
92
+
93
+ /* Shadows — minimal, single-layer, editorial flat */
94
+ --shadow-sm: 0 1px 2px rgba(10, 10, 10, .05);
95
+ --shadow-md: 0 6px 24px rgba(10, 10, 10, .06);
96
+ --shadow-lg: 0 18px 48px rgba(10, 10, 10, .09);
97
+ --shadow-xl: 0 28px 64px rgba(10, 10, 10, .12);
98
+ --shadow-2xl: 0 40px 96px rgba(10, 10, 10, .18);
99
+
100
+ /* Blur — editorial doesn't use it; declared so swap stays lossless */
101
+ --blur-sm: none;
102
+ --blur-md: none;
103
+ --blur-lg: none;
104
+
105
+ /* Glow — editorial doesn't use it; declared transparent */
106
+ --glow-sm: 0 0 0 transparent;
107
+ --glow-md: 0 0 0 transparent;
108
+ --glow-lg: 0 0 0 transparent;
109
+
110
+ /* Motion — editorial reads slower than digital */
111
+ --duration-fast: 200ms;
112
+ --duration-normal: 280ms;
113
+ --duration-slow: 420ms;
114
+ --ease: cubic-bezier(0.33, 0.66, 0.33, 1);
115
+
116
+ /* ----------------------------------------------------------
117
+ SEMANTIC ALIASES
118
+ -----------------------------------------------------------
119
+ Bridge the library's expected names to this theme's native
120
+ palette. Components can now write m.color(surface-default)
121
+ or var(--surface-default) and reskin with the theme
122
+ automatically.
123
+ ---------------------------------------------------------- */
124
+
125
+ /* Backgrounds (page-level) */
126
+ --background-default: var(--paper);
127
+ --background-subtle: var(--paper-sunk);
128
+ --background-navbar: var(--paper-raised);
129
+
130
+ /* Surfaces */
131
+ --surface-default: var(--paper);
132
+ --surface-raised: var(--paper-raised);
133
+ --surface-sunk: var(--paper-sunk);
134
+ --surface-muted: var(--paper-sunk);
135
+ --surface-subtle: var(--paper-raised);
136
+ --surface-emphasis: var(--ink);
137
+ --surface-glass: var(--paper-glass);
138
+
139
+ /* Text */
140
+ --text-primary: var(--ink);
141
+ --text-secondary: var(--ink-soft);
142
+ --text-muted: var(--ink-faint);
143
+ --text-tertiary: var(--muted);
144
+ --text-inverse: var(--paper);
145
+ --text-link: var(--ai);
146
+ --text-link-hover: var(--ai-ink);
147
+
148
+ /* Borders */
149
+ --border-default: var(--hair);
150
+ --border-subtle: var(--hair-soft);
151
+ --border-emphasis: var(--ink);
152
+ --border-focus: var(--ai);
153
+
154
+ /* Interactive (hover / active wash layers) — ink overlays on paper */
155
+ --interactive-hover: rgba(10, 10, 10, 0.05);
156
+ --interactive-active: rgba(10, 10, 10, 0.10);
157
+
158
+ /* Brand (identity — action-primary references these) */
159
+ --brand-primary: var(--ai);
160
+ --brand-primary-hover: var(--ai-ink);
161
+
162
+ /* Action (primary / secondary / tertiary) */
163
+ --action-primary-default: var(--ai);
164
+ --action-primary-hover: var(--ai-ink);
165
+ --action-primary-active: var(--ai-ink);
166
+ --action-primary-wash: var(--ai-wash);
167
+ --action-secondary-default: var(--shu);
168
+ --action-secondary-hover: var(--shu);
169
+ --action-secondary-active: var(--shu);
170
+ --action-secondary-wash: var(--shu-wash);
171
+ --action-tertiary-default: var(--ochre);
172
+ --action-tertiary-hover: var(--ochre);
173
+ --action-tertiary-active: var(--ochre);
174
+ --action-tertiary-wash: var(--ochre-wash);
175
+
176
+ /* Feedback / status (high-level semantic) */
177
+ --feedback-info: var(--ai);
178
+ --feedback-success: var(--code-green);
179
+ --feedback-warning: var(--ochre);
180
+ --feedback-error: var(--shu);
181
+
182
+ /* Status — info (three-part: default / subtle / text).
183
+ Press has no indigo; --ai is a near-ink editorial tone. */
184
+ --info-default: var(--ai);
185
+ --info-subtle: var(--ai-wash);
186
+ --info-text: var(--ai-ink);
187
+
188
+ /* Status — success. Restrained editorial green (desaturated). */
189
+ --success-default: #2F7A3A;
190
+ --success-subtle: #E3EEDF;
191
+ --success-text: #1F5228;
192
+
193
+ /* Status — warning. Warm editorial ochre. */
194
+ --warning-default: #A86A1A;
195
+ --warning-subtle: var(--ochre-wash);
196
+ --warning-text: #6B4512;
197
+
198
+ /* Status — error. Press red IS the error color. */
199
+ --error-default: var(--shu);
200
+ --error-subtle: var(--shu-wash);
201
+ --error-text: #8A1D15;
202
+
203
+ /* ----------------------------------------------------------
204
+ LIBRARY SCALES (space / radius / type / z)
205
+ -----------------------------------------------------------
206
+ The library mixins emit var(--space-<key>), var(--radius-<key>),
207
+ var(--font-primary), var(--font-size-<key>), var(--z-<key>), …
208
+ Themes declare the slots so those mixins always resolve.
209
+ Numeric scales mirror Sketchbook so rhythm is consistent.
210
+ ---------------------------------------------------------- */
211
+
212
+ /* Space scale (rem for accessibility) */
213
+
214
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
215
+ The numbered scale is the source of truth: every component reads
216
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
217
+ are emitted by the library as references to these, so they follow
218
+ automatically. Change a value here and the whole page re-proportions.
219
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
220
+ --space-0: 0; /* flush */
221
+ --space-1: 0.5rem; /* tight inner gap */
222
+ --space-2: 0.75rem; /* control padding */
223
+ --space-3: 0.875rem; /* (no t-shirt) */
224
+ --space-4: 1rem; /* default rhythm */
225
+ --space-5: 1.5rem; /* section gap */
226
+ --space-6: 2rem; /* block gap */
227
+ --space-7: 3rem; /* major gap */
228
+ --space-8: 4rem; /* page section */
229
+ --space-9: 6rem; /* hero rhythm */
230
+
231
+
232
+
233
+
234
+
235
+ /* Radius alias — mirrors --r-* with standard names so
236
+ `m.radius(size)` in the library finds --radius-<size>.
237
+ Press is editorial and angular: xl stays tight (4px). */
238
+ --radius-sm: var(--r-sm);
239
+ --radius-md: var(--r-md);
240
+ --radius-lg: var(--r-lg);
241
+ --radius-xl: 6px;
242
+ --radius-full: 9999px;
243
+
244
+ /* Typography — base body font + key scale slots.
245
+ Press body is Inter (--font-sans). */
246
+ --font-primary: var(--font-sans);
247
+ --font-size-base: 1rem;
248
+ --line-height-normal: 1.5;
249
+ --font-weight-medium: 500;
250
+
251
+ /* Z-index layers */
252
+ --z-sticky: 1020;
253
+ --z-dropdown: 1030;
254
+ --z-backdrop: 1040;
255
+ --z-modal: 1050;
256
+ --z-popover: 1060;
257
+ --z-tooltip: 1070;
258
+
259
+ /* ----------------------------------------------------------
260
+ OPTIONAL COMPONENT OVERRIDES (Feature 1.3)
261
+ -----------------------------------------------------------
262
+ Press is editorial newsprint: very tight radii (2–4px),
263
+ shadowless cards (rules, not lifts), flat panels.
264
+ Overrides are sparse — only the choices that define the
265
+ editorial voice, defaults carry the rest.
266
+ ---------------------------------------------------------- */
267
+ --btn-radius: var(--r-sm); /* 2px — near-square control */
268
+ --card-radius: var(--r-sm); /* 2px — boxed layout */
269
+ --card-shadow: none; /* editorial is flat */
270
+ --card-border: 1px solid var(--hair); /* thin ink rule instead */
271
+ --input-radius: var(--r-sm); /* 2px — text field */
272
+ --modal-radius: var(--r-md); /* 3px — still tight */
273
+ }