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/README.md ADDED
@@ -0,0 +1,102 @@
1
+ # public/themes
2
+
3
+ Runtime theme files shipped with css-is-awesome. One file per theme, no
4
+ build step. Each `theme.css` declares the full **127-token contract**
5
+ (see `scripts/theme-contract.json`, plus 36 optional tokens) under a
6
+ `:root, :root[data-theme="<name>"]` selector.
7
+
8
+ The bare `:root` half is the point: **dropping a single theme file in
9
+ restyles the page with no markup change.** Link it — or copy it over your
10
+ own `theme.css` — and you're done:
11
+
12
+ ```html
13
+ <link rel="stylesheet" href="/themes/press-dark/theme.css">
14
+ ```
15
+
16
+ Setting `<html data-theme="press-dark">` is optional in that case. It is
17
+ **required** only for the consolidated bundle (see below), where every
18
+ theme shares one file and the attribute is the only thing telling them
19
+ apart.
20
+
21
+ Library default tokens emit under `:where(:root)` (specificity `0,0,0`),
22
+ so a theme's declarations win regardless of load order.
23
+
24
+ All shipped themes pass the WCAG 2.2 AA contrast audit (22 audited pairs
25
+ per theme).
26
+
27
+ ## Shipped themes
28
+
29
+ **24 themes: 8 families × 3 files.** Each family ships a dual-mode base
30
+ (`<family>`, both modes in one file via `light-dark()`) plus single-mode
31
+ `<family>-light` and `<family>-dark` variants for `<link media>` pairing.
32
+ All pass WCAG 2.2 AA.
33
+
34
+ | Family | Base modes | Mood |
35
+ | ------------ | ------------- | ----------------------------------------------------------------- |
36
+ | sketchbook | light + dark | Warm washi paper, sumi ink, indigo accent (brand default) |
37
+ | press | light + dark | Editorial newsprint, Playfair serif, press-red accent |
38
+ | graphite | light + dark | Space-gray aluminum, system blue |
39
+ | glass | light + dark | visionOS glassmorphism, iOS indigo, dual-rim highlights |
40
+ | cupertino | light + dark | macOS Sonoma window, SF Pro, system blue |
41
+ | terminal | dark only | VT100 phosphor, zero radii, CRT glow |
42
+ | prism | light + dark | Brand-system showcase, vivid accents |
43
+ | boilerplate | light + dark | Neutral starter (system fonts, slate ramp) — copy and override |
44
+
45
+ `terminal`'s base is dark-only by design; `terminal-light` is its
46
+ daylight companion.
47
+
48
+ ## Layout
49
+
50
+ ```
51
+ public/themes/
52
+ <family>/theme.css ← both modes via light-dark()
53
+ <family>-light/theme.css ← light only
54
+ <family>-dark/theme.css ← dark only
55
+ ```
56
+
57
+ Every folder holds one `theme.css` with the same selector shape, so any
58
+ of the 24 can be dropped in standalone.
59
+
60
+ ## Consolidated bundle
61
+
62
+ `public/theme.css` is the **all-in-one** bundle: all 24 theme blocks in a
63
+ single file, generated by `scripts/build-theme-bundle.mjs` (run via
64
+ `npm run build:css:themes`). Consumers pick:
65
+
66
+ - `<link href="/theme.css">` — one request, every theme available;
67
+ **`data-theme` required**, since bundled blocks emit only
68
+ `:root[data-theme="<name>"]` (no bare `:root`, or they'd collide)
69
+ - `<link href="/themes/<name>/theme.css">` — only the theme you want;
70
+ `data-theme` optional
71
+
72
+ This is the `$standalone` argument on the `theme()` mixin:
73
+ `@mixin theme($name, $scheme: light dark, $standalone: true)`. The
74
+ bundle builds with `$standalone: false`.
75
+
76
+ ## Spacing is themeable
77
+
78
+ Themes declare the **numbered** scale `--space-0` … `--space-9`, which is
79
+ what `cia.space(4)` reads (`var(--space-4)`). The six t-shirt names
80
+ (`--space-2xs/xs/sm/md/lg/xl`) are optional and the library emits them as
81
+ references (`--space-md: var(--space-4)`), so they follow the numbered
82
+ scale automatically. A theme can ship its own rhythm without any
83
+ component change.
84
+
85
+ ## Validator gate
86
+
87
+ Every theme MUST:
88
+
89
+ 1. Declare all 127 required tokens in `scripts/theme-contract.json`.
90
+ 2. Pass WCAG 2.2 AA on the 22 audited token pairs (`scripts/theme-a11y.js`),
91
+ which include the five `--code-*` pairs graded against `--code-bg`.
92
+
93
+ CI runs `npm run validate-themes` and fails the PR on either gap.
94
+ `--border-default` is the one decorative pair (WCAG 2.2 SC 1.4.11) and is
95
+ reported as `info`, never `fail`.
96
+
97
+ CI also runs `npm run check:theme-drift`, which rebuilds the themes into
98
+ a scratch copy and fails if the committed `theme.css` artifacts (or the
99
+ bundle) no longer match their SCSS sources.
100
+
101
+ Full authoring + PR flow lives in
102
+ [`CONTRIBUTING-THEMES.md`](../../CONTRIBUTING-THEMES.md).
package/public/themes/boilerplate/theme.css ADDED
@@ -0,0 +1,154 @@
1
+ @charset "UTF-8";
2
+ :root, :root[data-theme=boilerplate] {
3
+ color-scheme: light dark;
4
+ /* Surfaces */
5
+ --paper: light-dark(#fff, #0f172a);
6
+ --paper-raised: light-dark(#f2f2f2, #1e293b);
7
+ --paper-sunk: light-dark(#f8fafc, #020617);
8
+ --paper-glass: light-dark(rgba(255, 255, 255, 0.85), rgba(15, 23, 42, 0.85));
9
+ /* Ink — slate neutral ramp */
10
+ --ink: light-dark(#0f172a, #f8fafc);
11
+ --ink-soft: light-dark(#1e293b, #e2e8f0);
12
+ --ink-faint: light-dark(#475569, #94a3b8);
13
+ --graphite: light-dark(#0f172a, #f1f5f9);
14
+ --muted: light-dark(#64748b, #64748b);
15
+ /* Lines */
16
+ --guide: light-dark(#cbd5e1, #334155);
17
+ --guide-soft: light-dark(#e2e8f0, #1e293b);
18
+ --hair: light-dark(#e2e8f0, #1e293b);
19
+ --hair-soft: light-dark(#f1f5f9, #0f172a);
20
+ /* Primary accent */
21
+ --ai: light-dark(#2563eb, #3b82f6);
22
+ --ai-ink: light-dark(#1d4ed8, #60a5fa);
23
+ --ai-wash: light-dark(#eff6ff, #1e3a8a);
24
+ /* Seal — red */
25
+ --shu: light-dark(#dc2626, #ef4444);
26
+ --shu-wash: light-dark(#fef2f2, #450a0a);
27
+ /* Tertiary — amber */
28
+ --ochre: light-dark(#d97706, #f59e0b);
29
+ --ochre-wash: light-dark(#fffbeb, #422006);
30
+ /* Code surface */
31
+ --code-bg: light-dark(#f8fafc, #020617);
32
+ --code-ink: light-dark(#0f172a, #e2e8f0);
33
+ --code-muted: light-dark(#5E6D83, #6F8098);
34
+ --code-accent: light-dark(#C1410C, #fb923c);
35
+ --code-green: light-dark(#147C3B, #4ade80);
36
+ --code-blue: light-dark(#2362EB, #60a5fa);
37
+ /* Typography — system stacks, no @import, identical */
38
+ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
39
+ --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
40
+ --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
41
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
42
+ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
43
+ /* Radius — identical */
44
+ --r-sm: 4px;
45
+ --r-md: 6px;
46
+ --r-lg: 8px;
47
+ /* Shadow — subtle, neutral slate / heavier on dark */
48
+ --shadow-sm: 0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30));
49
+ --shadow-md: 0 1px 3px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40)),
50
+ 0 1px 2px light-dark(rgba(15, 23, 42, 0.04), rgba(0, 0, 0, 0.30));
51
+ --shadow-lg: 0 4px 12px -2px light-dark(rgba(15, 23, 42, 0.08), rgba(0, 0, 0, 0.55)),
52
+ 0 2px 4px -2px light-dark(rgba(15, 23, 42, 0.05), rgba(0, 0, 0, 0.30));
53
+ --shadow-xl: 0 12px 24px -8px light-dark(rgba(15, 23, 42, 0.10), rgba(0, 0, 0, 0.65)),
54
+ 0 4px 8px -4px light-dark(rgba(15, 23, 42, 0.06), rgba(0, 0, 0, 0.40));
55
+ --shadow-2xl: 0 24px 48px -12px light-dark(rgba(15, 23, 42, 0.15), rgba(0, 0, 0, 0.75));
56
+ /* Blur / glow — none */
57
+ --blur-sm: none;
58
+ --blur-md: none;
59
+ --blur-lg: none;
60
+ --glow-sm: 0 0 0 transparent;
61
+ --glow-md: 0 0 0 transparent;
62
+ --glow-lg: 0 0 0 transparent;
63
+ /* Motion — identical */
64
+ --duration-fast: 120ms;
65
+ --duration-normal: 180ms;
66
+ --duration-slow: 280ms;
67
+ --ease: cubic-bezier(.4, 0, .2, 1);
68
+ /* Semantic aliases */
69
+ --background-default: var(--paper);
70
+ --background-subtle: var(--paper-sunk);
71
+ --background-navbar: light-dark(var(--paper), var(--paper-raised));
72
+ --surface-default: var(--paper);
73
+ --surface-raised: var(--paper-raised);
74
+ --surface-sunk: var(--paper-sunk);
75
+ --surface-muted: var(--paper-sunk);
76
+ --surface-subtle: light-dark(var(--paper-sunk), var(--paper-raised));
77
+ --surface-emphasis: var(--ink);
78
+ --surface-glass: var(--paper-glass);
79
+ --text-primary: var(--ink);
80
+ --text-secondary: var(--ink-soft);
81
+ --text-muted: var(--ink-faint);
82
+ --text-tertiary: var(--muted);
83
+ --text-inverse: var(--paper);
84
+ --text-link: var(--ai);
85
+ --text-link-hover: var(--ai-ink);
86
+ --border-default: var(--hair);
87
+ --border-subtle: var(--hair-soft);
88
+ --border-emphasis: var(--guide);
89
+ --border-focus: var(--ai);
90
+ --interactive-hover: light-dark(rgba(15, 23, 42, 0.04), rgba(248, 250, 252, 0.05));
91
+ --interactive-active: light-dark(rgba(15, 23, 42, 0.08), rgba(248, 250, 252, 0.10));
92
+ --brand-primary: var(--ai);
93
+ --brand-primary-hover: var(--ai-ink);
94
+ --action-primary-default: var(--ai);
95
+ --action-primary-hover: var(--ai-ink);
96
+ --action-primary-active: var(--ai-ink);
97
+ --action-primary-wash: var(--ai-wash);
98
+ --action-secondary-default: var(--shu);
99
+ --action-secondary-hover: var(--shu);
100
+ --action-secondary-active: var(--shu);
101
+ --action-secondary-wash: var(--shu-wash);
102
+ --action-tertiary-default: var(--ochre);
103
+ --action-tertiary-hover: var(--ochre);
104
+ --action-tertiary-active: var(--ochre);
105
+ --action-tertiary-wash: var(--ochre-wash);
106
+ --feedback-info: var(--ai);
107
+ --feedback-success: light-dark(#16a34a, #22c55e);
108
+ --feedback-warning: var(--ochre);
109
+ --feedback-error: var(--shu);
110
+ --info-default: var(--ai);
111
+ --info-subtle: var(--ai-wash);
112
+ --info-text: light-dark(var(--ai-ink), #85BFFF);
113
+ --success-default: light-dark(#16a34a, #22c55e);
114
+ --success-subtle: light-dark(#f0fdf4, #14532d);
115
+ --success-text: light-dark(#15803d, #4ade80);
116
+ --warning-default: var(--ochre);
117
+ --warning-subtle: var(--ochre-wash);
118
+ --warning-text: light-dark(#b45309, #fbbf24);
119
+ --error-default: var(--shu);
120
+ --error-subtle: var(--shu-wash);
121
+ --error-text: light-dark(#b91c1c, #fca5a5);
122
+ /* Library scales — identical */
123
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
124
+ The numbered scale is the source of truth: every component reads
125
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
126
+ are emitted by the library as references to these, so they follow
127
+ automatically. Change a value here and the whole page re-proportions.
128
+ Halve them for a compact UI; raise 4/5/6 for an airy editorial feel. */
129
+ --space-0: 0; /* flush */
130
+ --space-1: 0.5rem; /* tight inner gap */
131
+ --space-2: 0.75rem; /* control padding */
132
+ --space-3: 0.875rem; /* (no t-shirt) */
133
+ --space-4: 1rem; /* default rhythm */
134
+ --space-5: 1.5rem; /* section gap */
135
+ --space-6: 2rem; /* block gap */
136
+ --space-7: 3rem; /* major gap */
137
+ --space-8: 4rem; /* page section */
138
+ --space-9: 6rem; /* hero rhythm */
139
+ --radius-sm: var(--r-sm);
140
+ --radius-md: var(--r-md);
141
+ --radius-lg: var(--r-lg);
142
+ --radius-xl: 12px;
143
+ --radius-full: 9999px;
144
+ --font-primary: var(--font-sans);
145
+ --font-size-base: 1rem;
146
+ --line-height-normal: 1.5;
147
+ --font-weight-medium: 500;
148
+ --z-sticky: 1020;
149
+ --z-dropdown: 1030;
150
+ --z-backdrop: 1040;
151
+ --z-modal: 1050;
152
+ --z-popover: 1060;
153
+ --z-tooltip: 1070;
154
+ }
package/public/themes/boilerplate-dark/theme.css ADDED
@@ -0,0 +1,171 @@
1
+ @charset "UTF-8";
2
+ :root, :root[data-theme=boilerplate-dark] {
3
+ color-scheme: dark;
4
+ /* Surfaces — slate dark ramp */
5
+ --paper: #0f172a;
6
+ --paper-raised: #1e293b;
7
+ --paper-sunk: #020617;
8
+ --paper-glass: rgba(15, 23, 42, 0.85);
9
+ /* Ink — inverted slate */
10
+ --ink: #f8fafc;
11
+ --ink-soft: #e2e8f0;
12
+ --ink-faint: #94a3b8;
13
+ --graphite: #f1f5f9;
14
+ --muted: #64748b;
15
+ /* Lines — dark slate borders */
16
+ --guide: #334155;
17
+ --guide-soft: #1e293b;
18
+ --hair: #1e293b;
19
+ --hair-soft: #0f172a;
20
+ /* Primary accent — brighter blue for dark surfaces */
21
+ --ai: #3b82f6;
22
+ --ai-ink: #60a5fa;
23
+ --ai-wash: #1e3a8a;
24
+ /* Seal — red */
25
+ --shu: #ef4444;
26
+ --shu-wash: #450a0a;
27
+ /* Tertiary — amber */
28
+ --ochre: #f59e0b;
29
+ --ochre-wash: #422006;
30
+ /* Code — neutral dark syntax surface */
31
+ --code-bg: #020617;
32
+ --code-ink: #e2e8f0;
33
+ --code-muted: #708198;
34
+ --code-accent: #fb923c;
35
+ --code-green: #4ade80;
36
+ --code-blue: #60a5fa;
37
+ /* Typography — system stacks only (no @import) */
38
+ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
39
+ --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
40
+ --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
41
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
42
+ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
43
+ /* Radius */
44
+ --r-sm: 4px;
45
+ --r-md: 6px;
46
+ --r-lg: 8px;
47
+ /* Shadow — heavier on dark, neutral black */
48
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
49
+ --shadow-md: 0 2px 4px rgba(0, 0, 0, .40);
50
+ --shadow-lg: 0 6px 16px -4px rgba(0, 0, 0, .55);
51
+ --shadow-xl: 0 16px 32px -8px rgba(0, 0, 0, .65);
52
+ --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, .75);
53
+ /* Blur */
54
+ --blur-sm: none;
55
+ --blur-md: none;
56
+ --blur-lg: none;
57
+ /* Glow */
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: 120ms;
63
+ --duration-normal: 180ms;
64
+ --duration-slow: 280ms;
65
+ --ease: cubic-bezier(.4, 0, .2, 1);
66
+ /* Backgrounds */
67
+ --background-default: var(--paper);
68
+ --background-subtle: var(--paper-sunk);
69
+ --background-navbar: var(--paper-raised);
70
+ /* Surfaces (semantic) */
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 */
79
+ --text-primary: var(--ink);
80
+ --text-secondary: var(--ink-soft);
81
+ --text-muted: var(--ink-faint);
82
+ --text-tertiary: var(--muted);
83
+ --text-inverse: var(--paper);
84
+ --text-link: var(--ai);
85
+ --text-link-hover: var(--ai-ink);
86
+ /* Borders */
87
+ --border-default: var(--hair);
88
+ --border-subtle: var(--hair-soft);
89
+ --border-emphasis: var(--guide);
90
+ --border-focus: var(--ai);
91
+ /* Interactive overlays — light wash on dark */
92
+ --interactive-hover: rgba(248, 250, 252, 0.05);
93
+ --interactive-active: rgba(248, 250, 252, 0.10);
94
+ /* Brand */
95
+ --brand-primary: var(--ai);
96
+ --brand-primary-hover: var(--ai-ink);
97
+ /* Action triplets */
98
+ --action-primary-default: var(--ai);
99
+ --action-primary-hover: var(--ai-ink);
100
+ --action-primary-active: var(--ai-ink);
101
+ --action-primary-wash: var(--ai-wash);
102
+ --action-secondary-default: var(--shu);
103
+ --action-secondary-hover: var(--shu);
104
+ --action-secondary-active: var(--shu);
105
+ --action-secondary-wash: var(--shu-wash);
106
+ --action-tertiary-default: var(--ochre);
107
+ --action-tertiary-hover: var(--ochre);
108
+ --action-tertiary-active: var(--ochre);
109
+ --action-tertiary-wash: var(--ochre-wash);
110
+ /* Feedback */
111
+ --feedback-info: var(--ai);
112
+ --feedback-success: #22c55e;
113
+ --feedback-warning: var(--ochre);
114
+ --feedback-error: var(--shu);
115
+ /* Status — info */
116
+ --info-default: var(--ai);
117
+ --info-subtle: var(--ai-wash);
118
+ --info-text: #85BFFF;
119
+ /* Status — success */
120
+ --success-default: #22c55e;
121
+ --success-subtle: #14532d;
122
+ --success-text: #4ade80;
123
+ /* Status — warning */
124
+ --warning-default: var(--ochre);
125
+ --warning-subtle: var(--ochre-wash);
126
+ --warning-text: #fbbf24;
127
+ /* Status — error */
128
+ --error-default: var(--shu);
129
+ --error-subtle: var(--shu-wash);
130
+ --error-text: #fca5a5;
131
+ /* Space scale */
132
+ --space-2xs: 0.25rem;
133
+ --space-xs: 0.5rem;
134
+ --space-sm: 0.75rem;
135
+ --space-md: 1rem;
136
+ --space-lg: 1.5rem;
137
+ --space-xl: 2rem;
138
+ /* Radius alias */
139
+ --radius-sm: var(--r-sm);
140
+ --radius-md: var(--r-md);
141
+ --radius-lg: var(--r-lg);
142
+ --radius-xl: 12px;
143
+ --radius-full: 9999px;
144
+ /* Typography */
145
+ --font-primary: var(--font-sans);
146
+ --font-size-base: 1rem;
147
+ --line-height-normal: 1.5;
148
+ --font-weight-medium: 500;
149
+ /* Z-index layers */
150
+ --z-sticky: 1020;
151
+ --z-dropdown: 1030;
152
+ --z-backdrop: 1040;
153
+ --z-modal: 1050;
154
+ --z-popover: 1060;
155
+ --z-tooltip: 1070;
156
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
157
+ The numbered scale is the source of truth: every component reads
158
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
159
+ are emitted by the library as references to these, so they follow
160
+ automatically. Change a value here and the whole page re-proportions. */
161
+ --space-0: 0;
162
+ --space-1: 0.5rem;
163
+ --space-2: 0.75rem;
164
+ --space-3: 0.875rem;
165
+ --space-4: 1rem;
166
+ --space-5: 1.5rem;
167
+ --space-6: 2rem;
168
+ --space-7: 3rem;
169
+ --space-8: 4rem;
170
+ --space-9: 6rem;
171
+ }
package/public/themes/boilerplate-light/theme.css ADDED
@@ -0,0 +1,171 @@
1
+ @charset "UTF-8";
2
+ :root, :root[data-theme=boilerplate-light] {
3
+ color-scheme: light;
4
+ /* Surfaces — off-white paper, light gray sunk */
5
+ --paper: #fff;
6
+ --paper-raised: #f2f2f2;
7
+ --paper-sunk: #f8fafc;
8
+ --paper-glass: rgba(255, 255, 255, 0.85);
9
+ /* Ink — slate neutral ramp */
10
+ --ink: #0f172a;
11
+ --ink-soft: #1e293b;
12
+ --ink-faint: #475569;
13
+ --graphite: #0f172a;
14
+ --muted: #64748b;
15
+ /* Lines — light slate borders */
16
+ --guide: #cbd5e1;
17
+ --guide-soft: #e2e8f0;
18
+ --hair: #e2e8f0;
19
+ --hair-soft: #f1f5f9;
20
+ /* Primary accent — clean, recognizable blue */
21
+ --ai: #2563eb;
22
+ --ai-ink: #1d4ed8;
23
+ --ai-wash: #eff6ff;
24
+ /* Seal — red (used for error / secondary action) */
25
+ --shu: #dc2626;
26
+ --shu-wash: #fef2f2;
27
+ /* Tertiary — amber (used for warning) */
28
+ --ochre: #d97706;
29
+ --ochre-wash: #fffbeb;
30
+ /* Code — neutral light syntax surface */
31
+ --code-bg: #f8fafc;
32
+ --code-ink: #0f172a;
33
+ --code-muted: #64748b;
34
+ --code-accent: #c2410c;
35
+ --code-green: #15803d;
36
+ --code-blue: #2563eb;
37
+ /* Typography — system stacks only (no @import) */
38
+ --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
39
+ --font-script: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
40
+ --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
41
+ --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
42
+ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
43
+ /* Radius — standard, unsurprising */
44
+ --r-sm: 4px;
45
+ --r-md: 6px;
46
+ --r-lg: 8px;
47
+ /* Shadow — subtle, neutral slate */
48
+ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
49
+ --shadow-md: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
50
+ --shadow-lg: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
51
+ --shadow-xl: 0 12px 24px -8px rgba(15, 23, 42, .10), 0 4px 8px -4px rgba(15, 23, 42, .06);
52
+ --shadow-2xl: 0 24px 48px -12px rgba(15, 23, 42, .15);
53
+ /* Blur — Boilerplate doesn't use frosted surfaces */
54
+ --blur-sm: none;
55
+ --blur-md: none;
56
+ --blur-lg: none;
57
+ /* Glow — Boilerplate doesn't use glow effects */
58
+ --glow-sm: 0 0 0 transparent;
59
+ --glow-md: 0 0 0 transparent;
60
+ --glow-lg: 0 0 0 transparent;
61
+ /* Motion — moderate, not flashy */
62
+ --duration-fast: 120ms;
63
+ --duration-normal: 180ms;
64
+ --duration-slow: 280ms;
65
+ --ease: cubic-bezier(.4, 0, .2, 1);
66
+ /* Backgrounds */
67
+ --background-default: var(--paper);
68
+ --background-subtle: var(--paper-sunk);
69
+ --background-navbar: var(--paper);
70
+ /* Surfaces (semantic) */
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-sunk);
76
+ --surface-emphasis: var(--ink);
77
+ --surface-glass: var(--paper-glass);
78
+ /* Text */
79
+ --text-primary: var(--ink);
80
+ --text-secondary: var(--ink-soft);
81
+ --text-muted: var(--ink-faint);
82
+ --text-tertiary: var(--muted);
83
+ --text-inverse: var(--paper);
84
+ --text-link: var(--ai);
85
+ --text-link-hover: var(--ai-ink);
86
+ /* Borders */
87
+ --border-default: var(--hair);
88
+ --border-subtle: var(--hair-soft);
89
+ --border-emphasis: var(--guide);
90
+ --border-focus: var(--ai);
91
+ /* Interactive overlays */
92
+ --interactive-hover: rgba(15, 23, 42, 0.04);
93
+ --interactive-active: rgba(15, 23, 42, 0.08);
94
+ /* Brand */
95
+ --brand-primary: var(--ai);
96
+ --brand-primary-hover: var(--ai-ink);
97
+ /* Action triplets */
98
+ --action-primary-default: var(--ai);
99
+ --action-primary-hover: var(--ai-ink);
100
+ --action-primary-active: var(--ai-ink);
101
+ --action-primary-wash: var(--ai-wash);
102
+ --action-secondary-default: var(--shu);
103
+ --action-secondary-hover: var(--shu);
104
+ --action-secondary-active: var(--shu);
105
+ --action-secondary-wash: var(--shu-wash);
106
+ --action-tertiary-default: var(--ochre);
107
+ --action-tertiary-hover: var(--ochre);
108
+ --action-tertiary-active: var(--ochre);
109
+ --action-tertiary-wash: var(--ochre-wash);
110
+ /* Feedback */
111
+ --feedback-info: var(--ai);
112
+ --feedback-success: #16a34a;
113
+ --feedback-warning: var(--ochre);
114
+ --feedback-error: var(--shu);
115
+ /* Status — info */
116
+ --info-default: var(--ai);
117
+ --info-subtle: var(--ai-wash);
118
+ --info-text: var(--ai-ink);
119
+ /* Status — success */
120
+ --success-default: #16a34a;
121
+ --success-subtle: #f0fdf4;
122
+ --success-text: #15803d;
123
+ /* Status — warning */
124
+ --warning-default: var(--ochre);
125
+ --warning-subtle: var(--ochre-wash);
126
+ --warning-text: #b45309;
127
+ /* Status — error */
128
+ --error-default: var(--shu);
129
+ --error-subtle: var(--shu-wash);
130
+ --error-text: #b91c1c;
131
+ /* Space scale */
132
+ --space-2xs: 0.25rem;
133
+ --space-xs: 0.5rem;
134
+ --space-sm: 0.75rem;
135
+ --space-md: 1rem;
136
+ --space-lg: 1.5rem;
137
+ --space-xl: 2rem;
138
+ /* Radius alias */
139
+ --radius-sm: var(--r-sm);
140
+ --radius-md: var(--r-md);
141
+ --radius-lg: var(--r-lg);
142
+ --radius-xl: 12px;
143
+ --radius-full: 9999px;
144
+ /* Typography */
145
+ --font-primary: var(--font-sans);
146
+ --font-size-base: 1rem;
147
+ --line-height-normal: 1.5;
148
+ --font-weight-medium: 500;
149
+ /* Z-index layers */
150
+ --z-sticky: 1020;
151
+ --z-dropdown: 1030;
152
+ --z-backdrop: 1040;
153
+ --z-modal: 1050;
154
+ --z-popover: 1060;
155
+ --z-tooltip: 1070;
156
+ /* Spacing rhythm — THE knob for how dense or airy this theme feels.
157
+ The numbered scale is the source of truth: every component reads
158
+ var(--space-N), and the t-shirt aliases (--space-md, --space-lg …)
159
+ are emitted by the library as references to these, so they follow
160
+ automatically. Change a value here and the whole page re-proportions. */
161
+ --space-0: 0;
162
+ --space-1: 0.5rem;
163
+ --space-2: 0.75rem;
164
+ --space-3: 0.875rem;
165
+ --space-4: 1rem;
166
+ --space-5: 1.5rem;
167
+ --space-6: 2rem;
168
+ --space-7: 3rem;
169
+ --space-8: 4rem;
170
+ --space-9: 6rem;
171
+ }