nk_jtb 0.28.3 → 0.29.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 (35) hide show
  1. package/dev.html +30 -34
  2. package/docs/colors-and-themes.md +486 -0
  3. package/docs/components/navbar.md +33 -44
  4. package/docs/examples/homepage.md +1 -0
  5. package/docs/jtb-status.md +3 -1
  6. package/docs/variable-system.md +37 -29
  7. package/home-aurora.html +147 -0
  8. package/home-clarity.html +229 -0
  9. package/home-dusk.html +188 -0
  10. package/index.html +18 -870
  11. package/jtb-conversion-notes.md +2 -3
  12. package/package.json +1 -1
  13. package/scripts/jtb-nav.json +8 -0
  14. package/src/base/_root.scss +5 -16
  15. package/src/build.scss +5 -1
  16. package/src/components/_button.scss +4 -4
  17. package/src/components/_navbar.scss +2 -1
  18. package/src/extras/_hero.scss +47 -1
  19. package/src/maps_and_variables/_colors.scss +337 -333
  20. package/src/mixins/_gradients.scss +2 -2
  21. package/src/play.scss +13 -15
  22. package/src/themes/_brand.scss +93 -0
  23. package/src/{utilities/_themes.scss → themes/_color.scss} +53 -71
  24. package/src/themes/_glass.scss +39 -0
  25. package/src/themes/index.scss +3 -0
  26. package/src/utilities/_backgrounds.scss +8 -20
  27. package/src/utilities/_border.scss +0 -18
  28. package/src/utilities/_effects.scss +6 -0
  29. package/src/utilities/_misc.scss +1 -2
  30. package/src/utilities/_typography.scss +0 -15
  31. package/todo.md +0 -3
  32. package/code-review-loaders-spinners-260514.md +0 -104
  33. package/docs/themes.md +0 -150
  34. package/homepage-examples.html +0 -416
  35. package/loaders_and_spinners.html +0 -280
package/dev.html CHANGED
@@ -16,39 +16,35 @@
16
16
  <body class="container py-5 bg-gray-200">
17
17
 
18
18
  <style>
19
- /* ============================================================
20
- Local helpers — JTB gaps documented in jtb-conversion-notes.md
21
- ============================================================ */
22
-
23
19
  :root {
24
20
  --primary: #7c0442;
25
21
  --box-border-radius: 0.75rem;
26
22
  }
27
23
 
28
24
  /* Positional border-color not generated — known gap */
29
- .bdr-l-brand { border-inline-start-color: var(--primary); }
25
+ .bdr-l-primary { border-inline-start-color: var(--primary); }
30
26
  </style>
31
27
 
32
- <div class="flex-col gap-3">
28
+ <div class="flex-col">
33
29
 
34
- <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option A — soft pattern</p>
30
+ <h2 class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option A — soft pattern</h2>
35
31
 
36
- <div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
37
- <svg class="absolute -top-1.5 -right-1.5 opacity-10" width="120" height="120" viewBox="0 0 120 120">
38
- <circle cx="60" cy="60" r="50" fill="#7c0442"/>
39
- <circle cx="60" cy="60" r="35" fill="none" stroke="#7c0442" stroke-width="2"/>
40
- <circle cx="60" cy="60" r="20" fill="none" stroke="#7c0442" stroke-width="2"/>
32
+ <div class="bx relative overflow-hidden max-w-384px" style="background-color: var(--primary-surface); border-color: var(--primary-surface-border);">
33
+ <svg class="absolute -top-1.5 -right-1.5 opacity-10" width="120" height="120" viewBox="0 0 120 120" style="color: var(--primary)">
34
+ <circle cx="60" cy="60" r="50" fill="currentColor"/>
35
+ <circle cx="60" cy="60" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
36
+ <circle cx="60" cy="60" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
41
37
  </svg>
42
- <svg class="absolute -bottom-1 -left-1 opacity-10" width="80" height="80" viewBox="0 0 80 80">
43
- <circle cx="40" cy="40" r="35" fill="#7c0442"/>
38
+ <svg class="absolute -bottom-1 -left-1 opacity-10" width="80" height="80" viewBox="0 0 80 80" style="color: var(--primary)">
39
+ <circle cx="40" cy="40" r="35" fill="currentColor"/>
44
40
  </svg>
45
- <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
46
- <p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
47
- <p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
48
- <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
41
+ <p class="txt-xs font-medium uppercase tracking-widest opacity-70" style="color: var(--primary)">Also available as</p>
42
+ <p class="font-serif txt-base font-medium" style="color: var(--primary-on-surface)">Part of a program</p>
43
+ <p class="txt-sm" style="color: var(--primary-on-surface)">Save with a bundle discount when you enrol in the full program.</p>
44
+ <a href="#" class="txt-sm font-medium inline-flex items-center gap-025" style="color: var(--primary)">View program →</a>
49
45
  </div>
50
46
 
51
- <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option B — brand colour + corner shapes</p>
47
+ <h2 class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option B — brand colour + corner shapes</h2>
52
48
 
53
49
  <div class="bx primary relative overflow-hidden max-w-384px">
54
50
  <svg class="absolute -top-1.5 -right-1.5 opacity-10" width="100" height="100" viewBox="0 0 100 100">
@@ -65,29 +61,29 @@
65
61
  <a href="#" class="txt-sm font-medium inline-flex items-center gap-025">View program →</a>
66
62
  </div>
67
63
 
68
- <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option C — left border accent</p>
64
+ <h2 class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option C — left border accent</h2>
69
65
 
70
- <div class="bx relative overflow-hidden max-w-384px bdr-l-3 bdr-l-brand">
71
- <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
66
+ <div class="bx relative overflow-hidden max-w-384px bdr-l-3 bdr-l-primary">
67
+ <p class="txt-xs font-medium uppercase tracking-widest opacity-70" style="color: var(--primary)">Also available as</p>
72
68
  <p class="font-serif txt-base font-medium">Part of a program</p>
73
69
  <p class="txt-sm txt-muted">Save with a bundle discount when you enrol in the full program.</p>
74
- <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
70
+ <a href="#" class="txt-sm font-medium inline-flex items-center gap-025" style="color: var(--primary)">View program →</a>
75
71
  </div>
76
72
 
77
- <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option D — diagonal shape bleed</p>
73
+ <h2 class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option D — diagonal shape bleed</h2>
78
74
 
79
- <div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
80
- <svg class="absolute top-0 right-0" width="120" height="120" viewBox="0 0 120 120">
81
- <polygon points="120,0 120,120 0,0" fill="#7c0442" opacity="0.08"/>
82
- <polygon points="120,0 120,80 40,0" fill="#7c0442" opacity="0.08"/>
75
+ <div class="bx relative overflow-hidden max-w-384px" style="background-color: var(--primary-surface); border-color: var(--primary-surface-border);">
76
+ <svg class="absolute top-0 right-0" width="120" height="120" viewBox="0 0 120 120" style="color: var(--primary)">
77
+ <polygon points="120,0 120,120 0,0" fill="currentColor" opacity="0.08"/>
78
+ <polygon points="120,0 120,80 40,0" fill="currentColor" opacity="0.08"/>
83
79
  </svg>
84
- <svg class="absolute bottom-0 left-0" width="70" height="70" viewBox="0 0 70 70">
85
- <polygon points="0,70 70,70 0,0" fill="#7c0442" opacity="0.06"/>
80
+ <svg class="absolute bottom-0 left-0" width="70" height="70" viewBox="0 0 70 70" style="color: var(--primary)">
81
+ <polygon points="0,70 70,70 0,0" fill="currentColor" opacity="0.06"/>
86
82
  </svg>
87
- <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
88
- <p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
89
- <p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
90
- <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
83
+ <p class="txt-xs font-medium uppercase tracking-widest opacity-70" style="color: var(--primary)">Also available as</p>
84
+ <p class="font-serif txt-base font-medium" style="color: var(--primary-on-surface)">Part of a program</p>
85
+ <p class="txt-sm" style="color: var(--primary-on-surface)">Save with a bundle discount when you enrol in the full program.</p>
86
+ <a href="#" class="txt-sm font-medium inline-flex items-center gap-025" style="color: var(--primary)">View program →</a>
91
87
  </div>
92
88
 
93
89
  </div>
package/docs/colors-and-themes.md ADDED
@@ -0,0 +1,486 @@
1
+ # Colors & Themes
2
+
3
+ JTB provides a full color palette and a theme class system that applies those
4
+ colors to components in a coordinated way.
5
+
6
+ ## Color Scales
7
+
8
+ <div class="grid gap-025 cols-12 tac txt-sm font-semibold mb-05">
9
+ <div></div>
10
+ <div>50</div>
11
+ <div>100</div>
12
+ <div>200</div>
13
+ <div>300</div>
14
+ <div>400</div>
15
+ <div>500</div>
16
+ <div>600</div>
17
+ <div>700</div>
18
+ <div>800</div>
19
+ <div>900</div>
20
+ <div>950</div>
21
+ </div>
22
+ <div class="grid gap cols-12 va-c mb-05">
23
+ <p class="tal font-sm font-semibold">red</p>
24
+ <div class="h-3 rounded-05 bg-red-50"></div>
25
+ <div class="h-3 rounded-05 bg-red-100"></div>
26
+ <div class="h-3 rounded-05 bg-red-200"></div>
27
+ <div class="h-3 rounded-05 bg-red-300"></div>
28
+ <div class="h-3 rounded-05 bg-red-400"></div>
29
+ <div class="h-3 rounded-05 bg-red-500"></div>
30
+ <div class="h-3 rounded-05 bg-red-600"></div>
31
+ <div class="h-3 rounded-05 bg-red-700"></div>
32
+ <div class="h-3 rounded-05 bg-red-800"></div>
33
+ <div class="h-3 rounded-05 bg-red-900"></div>
34
+ <div class="h-3 rounded-05 bg-red-950"></div>
35
+ </div>
36
+ <div class="grid gap cols-12 va-c mb-05">
37
+ <p class="tal font-sm font-semibold">orange</p>
38
+ <div class="h-3 rounded-05 bg-orange-50"></div>
39
+ <div class="h-3 rounded-05 bg-orange-100"></div>
40
+ <div class="h-3 rounded-05 bg-orange-200"></div>
41
+ <div class="h-3 rounded-05 bg-orange-300"></div>
42
+ <div class="h-3 rounded-05 bg-orange-400"></div>
43
+ <div class="h-3 rounded-05 bg-orange-500"></div>
44
+ <div class="h-3 rounded-05 bg-orange-600"></div>
45
+ <div class="h-3 rounded-05 bg-orange-700"></div>
46
+ <div class="h-3 rounded-05 bg-orange-800"></div>
47
+ <div class="h-3 rounded-05 bg-orange-900"></div>
48
+ <div class="h-3 rounded-05 bg-orange-950"></div>
49
+ </div>
50
+ <div class="grid gap cols-12 va-c mb-05">
51
+ <p class="tal font-sm font-semibold">amber</p>
52
+ <div class="h-3 rounded-05 bg-amber-50"></div>
53
+ <div class="h-3 rounded-05 bg-amber-100"></div>
54
+ <div class="h-3 rounded-05 bg-amber-200"></div>
55
+ <div class="h-3 rounded-05 bg-amber-300"></div>
56
+ <div class="h-3 rounded-05 bg-amber-400"></div>
57
+ <div class="h-3 rounded-05 bg-amber-500"></div>
58
+ <div class="h-3 rounded-05 bg-amber-600"></div>
59
+ <div class="h-3 rounded-05 bg-amber-700"></div>
60
+ <div class="h-3 rounded-05 bg-amber-800"></div>
61
+ <div class="h-3 rounded-05 bg-amber-900"></div>
62
+ <div class="h-3 rounded-05 bg-amber-950"></div>
63
+ </div>
64
+ <div class="grid gap cols-12 va-c mb-05">
65
+ <p class="tal font-sm font-semibold">yellow</p>
66
+ <div class="h-3 rounded-05 bg-yellow-50"></div>
67
+ <div class="h-3 rounded-05 bg-yellow-100"></div>
68
+ <div class="h-3 rounded-05 bg-yellow-200"></div>
69
+ <div class="h-3 rounded-05 bg-yellow-300"></div>
70
+ <div class="h-3 rounded-05 bg-yellow-400"></div>
71
+ <div class="h-3 rounded-05 bg-yellow-500"></div>
72
+ <div class="h-3 rounded-05 bg-yellow-600"></div>
73
+ <div class="h-3 rounded-05 bg-yellow-700"></div>
74
+ <div class="h-3 rounded-05 bg-yellow-800"></div>
75
+ <div class="h-3 rounded-05 bg-yellow-900"></div>
76
+ <div class="h-3 rounded-05 bg-yellow-950"></div>
77
+ </div>
78
+ <div class="grid gap cols-12 va-c mb-05">
79
+ <p class="tal font-sm font-semibold">lime</p>
80
+ <div class="h-3 rounded-05 bg-lime-50"></div>
81
+ <div class="h-3 rounded-05 bg-lime-100"></div>
82
+ <div class="h-3 rounded-05 bg-lime-200"></div>
83
+ <div class="h-3 rounded-05 bg-lime-300"></div>
84
+ <div class="h-3 rounded-05 bg-lime-400"></div>
85
+ <div class="h-3 rounded-05 bg-lime-500"></div>
86
+ <div class="h-3 rounded-05 bg-lime-600"></div>
87
+ <div class="h-3 rounded-05 bg-lime-700"></div>
88
+ <div class="h-3 rounded-05 bg-lime-800"></div>
89
+ <div class="h-3 rounded-05 bg-lime-900"></div>
90
+ <div class="h-3 rounded-05 bg-lime-950"></div>
91
+ </div>
92
+ <div class="grid gap cols-12 va-c mb-05">
93
+ <p class="tal font-sm font-semibold">green</p>
94
+ <div class="h-3 rounded-05 bg-green-50"></div>
95
+ <div class="h-3 rounded-05 bg-green-100"></div>
96
+ <div class="h-3 rounded-05 bg-green-200"></div>
97
+ <div class="h-3 rounded-05 bg-green-300"></div>
98
+ <div class="h-3 rounded-05 bg-green-400"></div>
99
+ <div class="h-3 rounded-05 bg-green-500"></div>
100
+ <div class="h-3 rounded-05 bg-green-600"></div>
101
+ <div class="h-3 rounded-05 bg-green-700"></div>
102
+ <div class="h-3 rounded-05 bg-green-800"></div>
103
+ <div class="h-3 rounded-05 bg-green-900"></div>
104
+ <div class="h-3 rounded-05 bg-green-950"></div>
105
+ </div>
106
+ <div class="grid gap cols-12 va-c mb-05">
107
+ <p class="tal font-sm font-semibold">emerald</p>
108
+ <div class="h-3 rounded-05 bg-emerald-50"></div>
109
+ <div class="h-3 rounded-05 bg-emerald-100"></div>
110
+ <div class="h-3 rounded-05 bg-emerald-200"></div>
111
+ <div class="h-3 rounded-05 bg-emerald-300"></div>
112
+ <div class="h-3 rounded-05 bg-emerald-400"></div>
113
+ <div class="h-3 rounded-05 bg-emerald-500"></div>
114
+ <div class="h-3 rounded-05 bg-emerald-600"></div>
115
+ <div class="h-3 rounded-05 bg-emerald-700"></div>
116
+ <div class="h-3 rounded-05 bg-emerald-800"></div>
117
+ <div class="h-3 rounded-05 bg-emerald-900"></div>
118
+ <div class="h-3 rounded-05 bg-emerald-950"></div>
119
+ </div>
120
+ <div class="grid gap cols-12 va-c mb-05">
121
+ <p class="tal font-sm font-semibold">teal</p>
122
+ <div class="h-3 rounded-05 bg-teal-50"></div>
123
+ <div class="h-3 rounded-05 bg-teal-100"></div>
124
+ <div class="h-3 rounded-05 bg-teal-200"></div>
125
+ <div class="h-3 rounded-05 bg-teal-300"></div>
126
+ <div class="h-3 rounded-05 bg-teal-400"></div>
127
+ <div class="h-3 rounded-05 bg-teal-500"></div>
128
+ <div class="h-3 rounded-05 bg-teal-600"></div>
129
+ <div class="h-3 rounded-05 bg-teal-700"></div>
130
+ <div class="h-3 rounded-05 bg-teal-800"></div>
131
+ <div class="h-3 rounded-05 bg-teal-900"></div>
132
+ <div class="h-3 rounded-05 bg-teal-950"></div>
133
+ </div>
134
+ <div class="grid gap cols-12 va-c mb-05">
135
+ <p class="tal font-sm font-semibold">cyan</p>
136
+ <div class="h-3 rounded-05 bg-cyan-50"></div>
137
+ <div class="h-3 rounded-05 bg-cyan-100"></div>
138
+ <div class="h-3 rounded-05 bg-cyan-200"></div>
139
+ <div class="h-3 rounded-05 bg-cyan-300"></div>
140
+ <div class="h-3 rounded-05 bg-cyan-400"></div>
141
+ <div class="h-3 rounded-05 bg-cyan-500"></div>
142
+ <div class="h-3 rounded-05 bg-cyan-600"></div>
143
+ <div class="h-3 rounded-05 bg-cyan-700"></div>
144
+ <div class="h-3 rounded-05 bg-cyan-800"></div>
145
+ <div class="h-3 rounded-05 bg-cyan-900"></div>
146
+ <div class="h-3 rounded-05 bg-cyan-950"></div>
147
+ </div>
148
+ <div class="grid gap cols-12 va-c mb-05">
149
+ <p class="tal font-sm font-semibold">sky</p>
150
+ <div class="h-3 rounded-05 bg-sky-50"></div>
151
+ <div class="h-3 rounded-05 bg-sky-100"></div>
152
+ <div class="h-3 rounded-05 bg-sky-200"></div>
153
+ <div class="h-3 rounded-05 bg-sky-300"></div>
154
+ <div class="h-3 rounded-05 bg-sky-400"></div>
155
+ <div class="h-3 rounded-05 bg-sky-500"></div>
156
+ <div class="h-3 rounded-05 bg-sky-600"></div>
157
+ <div class="h-3 rounded-05 bg-sky-700"></div>
158
+ <div class="h-3 rounded-05 bg-sky-800"></div>
159
+ <div class="h-3 rounded-05 bg-sky-900"></div>
160
+ <div class="h-3 rounded-05 bg-sky-950"></div>
161
+ </div>
162
+ <div class="grid gap cols-12 va-c mb-05">
163
+ <p class="tal font-sm font-semibold">blue</p>
164
+ <div class="h-3 rounded-05 bg-blue-50"></div>
165
+ <div class="h-3 rounded-05 bg-blue-100"></div>
166
+ <div class="h-3 rounded-05 bg-blue-200"></div>
167
+ <div class="h-3 rounded-05 bg-blue-300"></div>
168
+ <div class="h-3 rounded-05 bg-blue-400"></div>
169
+ <div class="h-3 rounded-05 bg-blue-500"></div>
170
+ <div class="h-3 rounded-05 bg-blue-600"></div>
171
+ <div class="h-3 rounded-05 bg-blue-700"></div>
172
+ <div class="h-3 rounded-05 bg-blue-800"></div>
173
+ <div class="h-3 rounded-05 bg-blue-900"></div>
174
+ <div class="h-3 rounded-05 bg-blue-950"></div>
175
+ </div>
176
+ <div class="grid gap cols-12 va-c mb-05">
177
+ <p class="tal font-sm font-semibold">indigo</p>
178
+ <div class="h-3 rounded-05 bg-indigo-50"></div>
179
+ <div class="h-3 rounded-05 bg-indigo-100"></div>
180
+ <div class="h-3 rounded-05 bg-indigo-200"></div>
181
+ <div class="h-3 rounded-05 bg-indigo-300"></div>
182
+ <div class="h-3 rounded-05 bg-indigo-400"></div>
183
+ <div class="h-3 rounded-05 bg-indigo-500"></div>
184
+ <div class="h-3 rounded-05 bg-indigo-600"></div>
185
+ <div class="h-3 rounded-05 bg-indigo-700"></div>
186
+ <div class="h-3 rounded-05 bg-indigo-800"></div>
187
+ <div class="h-3 rounded-05 bg-indigo-900"></div>
188
+ <div class="h-3 rounded-05 bg-indigo-950"></div>
189
+ </div>
190
+ <div class="grid gap cols-12 va-c mb-05">
191
+ <p class="tal font-sm font-semibold">violet</p>
192
+ <div class="h-3 rounded-05 bg-violet-50"></div>
193
+ <div class="h-3 rounded-05 bg-violet-100"></div>
194
+ <div class="h-3 rounded-05 bg-violet-200"></div>
195
+ <div class="h-3 rounded-05 bg-violet-300"></div>
196
+ <div class="h-3 rounded-05 bg-violet-400"></div>
197
+ <div class="h-3 rounded-05 bg-violet-500"></div>
198
+ <div class="h-3 rounded-05 bg-violet-600"></div>
199
+ <div class="h-3 rounded-05 bg-violet-700"></div>
200
+ <div class="h-3 rounded-05 bg-violet-800"></div>
201
+ <div class="h-3 rounded-05 bg-violet-900"></div>
202
+ <div class="h-3 rounded-05 bg-violet-950"></div>
203
+ </div>
204
+ <div class="grid gap cols-12 va-c mb-05">
205
+ <p class="tal font-sm font-semibold">purple</p>
206
+ <div class="h-3 rounded-05 bg-purple-50"></div>
207
+ <div class="h-3 rounded-05 bg-purple-100"></div>
208
+ <div class="h-3 rounded-05 bg-purple-200"></div>
209
+ <div class="h-3 rounded-05 bg-purple-300"></div>
210
+ <div class="h-3 rounded-05 bg-purple-400"></div>
211
+ <div class="h-3 rounded-05 bg-purple-500"></div>
212
+ <div class="h-3 rounded-05 bg-purple-600"></div>
213
+ <div class="h-3 rounded-05 bg-purple-700"></div>
214
+ <div class="h-3 rounded-05 bg-purple-800"></div>
215
+ <div class="h-3 rounded-05 bg-purple-900"></div>
216
+ <div class="h-3 rounded-05 bg-purple-950"></div>
217
+ </div>
218
+ <div class="grid gap cols-12 va-c mb-05">
219
+ <p class="tal font-sm font-semibold">fuchsia</p>
220
+ <div class="h-3 rounded-05 bg-fuchsia-50"></div>
221
+ <div class="h-3 rounded-05 bg-fuchsia-100"></div>
222
+ <div class="h-3 rounded-05 bg-fuchsia-200"></div>
223
+ <div class="h-3 rounded-05 bg-fuchsia-300"></div>
224
+ <div class="h-3 rounded-05 bg-fuchsia-400"></div>
225
+ <div class="h-3 rounded-05 bg-fuchsia-500"></div>
226
+ <div class="h-3 rounded-05 bg-fuchsia-600"></div>
227
+ <div class="h-3 rounded-05 bg-fuchsia-700"></div>
228
+ <div class="h-3 rounded-05 bg-fuchsia-800"></div>
229
+ <div class="h-3 rounded-05 bg-fuchsia-900"></div>
230
+ <div class="h-3 rounded-05 bg-fuchsia-950"></div>
231
+ </div>
232
+ <div class="grid gap cols-12 va-c mb-05">
233
+ <p class="tal font-sm font-semibold">pink</p>
234
+ <div class="h-3 rounded-05 bg-pink-50"></div>
235
+ <div class="h-3 rounded-05 bg-pink-100"></div>
236
+ <div class="h-3 rounded-05 bg-pink-200"></div>
237
+ <div class="h-3 rounded-05 bg-pink-300"></div>
238
+ <div class="h-3 rounded-05 bg-pink-400"></div>
239
+ <div class="h-3 rounded-05 bg-pink-500"></div>
240
+ <div class="h-3 rounded-05 bg-pink-600"></div>
241
+ <div class="h-3 rounded-05 bg-pink-700"></div>
242
+ <div class="h-3 rounded-05 bg-pink-800"></div>
243
+ <div class="h-3 rounded-05 bg-pink-900"></div>
244
+ <div class="h-3 rounded-05 bg-pink-950"></div>
245
+ </div>
246
+ <div class="grid gap cols-12 va-c mb-05">
247
+ <p class="tal font-sm font-semibold">rose</p>
248
+ <div class="h-3 rounded-05 bg-rose-50"></div>
249
+ <div class="h-3 rounded-05 bg-rose-100"></div>
250
+ <div class="h-3 rounded-05 bg-rose-200"></div>
251
+ <div class="h-3 rounded-05 bg-rose-300"></div>
252
+ <div class="h-3 rounded-05 bg-rose-400"></div>
253
+ <div class="h-3 rounded-05 bg-rose-500"></div>
254
+ <div class="h-3 rounded-05 bg-rose-600"></div>
255
+ <div class="h-3 rounded-05 bg-rose-700"></div>
256
+ <div class="h-3 rounded-05 bg-rose-800"></div>
257
+ <div class="h-3 rounded-05 bg-rose-900"></div>
258
+ <div class="h-3 rounded-05 bg-rose-950"></div>
259
+ </div>
260
+ <div class="grid gap cols-12 va-c mb-05">
261
+ <p class="tal font-sm font-semibold">slate</p>
262
+ <div class="h-3 rounded-05 bg-slate-50"></div>
263
+ <div class="h-3 rounded-05 bg-slate-100"></div>
264
+ <div class="h-3 rounded-05 bg-slate-200"></div>
265
+ <div class="h-3 rounded-05 bg-slate-300"></div>
266
+ <div class="h-3 rounded-05 bg-slate-400"></div>
267
+ <div class="h-3 rounded-05 bg-slate-500"></div>
268
+ <div class="h-3 rounded-05 bg-slate-600"></div>
269
+ <div class="h-3 rounded-05 bg-slate-700"></div>
270
+ <div class="h-3 rounded-05 bg-slate-800"></div>
271
+ <div class="h-3 rounded-05 bg-slate-900"></div>
272
+ <div class="h-3 rounded-05 bg-slate-950"></div>
273
+ </div>
274
+ <div class="grid gap cols-12 va-c mb-05">
275
+ <p class="tal font-sm font-semibold">gray</p>
276
+ <div class="h-3 rounded-05 bg-gray-50"></div>
277
+ <div class="h-3 rounded-05 bg-gray-100"></div>
278
+ <div class="h-3 rounded-05 bg-gray-200"></div>
279
+ <div class="h-3 rounded-05 bg-gray-300"></div>
280
+ <div class="h-3 rounded-05 bg-gray-400"></div>
281
+ <div class="h-3 rounded-05 bg-gray-500"></div>
282
+ <div class="h-3 rounded-05 bg-gray-600"></div>
283
+ <div class="h-3 rounded-05 bg-gray-700"></div>
284
+ <div class="h-3 rounded-05 bg-gray-800"></div>
285
+ <div class="h-3 rounded-05 bg-gray-900"></div>
286
+ <div class="h-3 rounded-05 bg-gray-950"></div>
287
+ </div>
288
+ <div class="grid gap cols-12 va-c mb-05">
289
+ <p class="tal font-sm font-semibold">zinc</p>
290
+ <div class="h-3 rounded-05 bg-zinc-50"></div>
291
+ <div class="h-3 rounded-05 bg-zinc-100"></div>
292
+ <div class="h-3 rounded-05 bg-zinc-200"></div>
293
+ <div class="h-3 rounded-05 bg-zinc-300"></div>
294
+ <div class="h-3 rounded-05 bg-zinc-400"></div>
295
+ <div class="h-3 rounded-05 bg-zinc-500"></div>
296
+ <div class="h-3 rounded-05 bg-zinc-600"></div>
297
+ <div class="h-3 rounded-05 bg-zinc-700"></div>
298
+ <div class="h-3 rounded-05 bg-zinc-800"></div>
299
+ <div class="h-3 rounded-05 bg-zinc-900"></div>
300
+ <div class="h-3 rounded-05 bg-zinc-950"></div>
301
+ </div>
302
+ <div class="grid gap cols-12 va-c mb-05">
303
+ <p class="tal font-sm font-semibold">neutral</p>
304
+ <div class="h-3 rounded-05 bg-neutral-50"></div>
305
+ <div class="h-3 rounded-05 bg-neutral-100"></div>
306
+ <div class="h-3 rounded-05 bg-neutral-200"></div>
307
+ <div class="h-3 rounded-05 bg-neutral-300"></div>
308
+ <div class="h-3 rounded-05 bg-neutral-400"></div>
309
+ <div class="h-3 rounded-05 bg-neutral-500"></div>
310
+ <div class="h-3 rounded-05 bg-neutral-600"></div>
311
+ <div class="h-3 rounded-05 bg-neutral-700"></div>
312
+ <div class="h-3 rounded-05 bg-neutral-800"></div>
313
+ <div class="h-3 rounded-05 bg-neutral-900"></div>
314
+ <div class="h-3 rounded-05 bg-neutral-950"></div>
315
+ </div>
316
+ <div class="grid gap cols-12 va-c mb-05">
317
+ <p class="tal font-sm font-semibold">stone</p>
318
+ <div class="h-3 rounded-05 bg-stone-50"></div>
319
+ <div class="h-3 rounded-05 bg-stone-100"></div>
320
+ <div class="h-3 rounded-05 bg-stone-200"></div>
321
+ <div class="h-3 rounded-05 bg-stone-300"></div>
322
+ <div class="h-3 rounded-05 bg-stone-400"></div>
323
+ <div class="h-3 rounded-05 bg-stone-500"></div>
324
+ <div class="h-3 rounded-05 bg-stone-600"></div>
325
+ <div class="h-3 rounded-05 bg-stone-700"></div>
326
+ <div class="h-3 rounded-05 bg-stone-800"></div>
327
+ <div class="h-3 rounded-05 bg-stone-900"></div>
328
+ <div class="h-3 rounded-05 bg-stone-950"></div>
329
+ </div>
330
+
331
+ ## Base Colors
332
+
333
+ Named single-value tokens for each hue — the representative shade used when you
334
+ want a color without specifying a scale step. These are the source for named
335
+ utilities (`bg-blue`, `txt-teal`) and theme class generation.
336
+
337
+ <div class="grid cols-8 gap-025">
338
+ <div class="red rounded-05 h-4 flex-centered font-mono">red</div>
339
+ <div class="orange rounded-05 h-4 flex-centered font-mono">orange</div>
340
+ <div class="amber rounded-05 h-4 flex-centered font-mono">amber</div>
341
+ <div class="yellow rounded-05 h-4 flex-centered font-mono">yellow</div>
342
+ <div class="lime rounded-05 h-4 flex-centered font-mono">lime</div>
343
+ <div class="green rounded-05 h-4 flex-centered font-mono">green</div>
344
+ <div class="emerald rounded-05 h-4 flex-centered font-mono">emerald</div>
345
+ <div class="teal rounded-05 h-4 flex-centered font-mono">teal</div>
346
+ <div class="cyan rounded-05 h-4 flex-centered font-mono">cyan</div>
347
+ <div class="sky rounded-05 h-4 flex-centered font-mono">sky</div>
348
+ <div class="blue rounded-05 h-4 flex-centered font-mono">blue</div>
349
+ <div class="indigo rounded-05 h-4 flex-centered font-mono">indigo</div>
350
+ <div class="violet rounded-05 h-4 flex-centered font-mono">violet</div>
351
+ <div class="purple rounded-05 h-4 flex-centered font-mono">purple</div>
352
+ <div class="fuchsia rounded-05 h-4 flex-centered font-mono">fuchsia</div>
353
+ <div class="pink rounded-05 h-4 flex-centered font-mono">pink</div>
354
+ <div class="rose rounded-05 h-4 flex-centered font-mono">rose</div>
355
+ <div class="slate rounded-05 h-4 flex-centered font-mono">slate</div>
356
+ <div class="gray rounded-05 h-4 flex-centered font-mono">gray</div>
357
+ <div class="zinc rounded-05 h-4 flex-centered font-mono">zinc</div>
358
+ <div class="neutral rounded-05 h-4 flex-centered font-mono">neutral</div>
359
+ <div class="stone rounded-05 h-4 flex-centered font-mono">stone</div>
360
+ <div class="muted rounded-05 h-4 flex-centered font-mono">muted</div>
361
+ <div class="white rounded-05 h-4 flex-centered font-mono bdr">white</div>
362
+ </div>
363
+
364
+ ## Themes
365
+
366
+ A theme class sets background color, border, and text color together — all derived from a single base color.
367
+
368
+ All JTB theme classes are context-aware. Apply the same class to a button, box, input, badge, or any other component and it adapts to that component's styling rules.
369
+
370
+ ```html +code +preview preview-class="grid md:cols-2 gap mb"
371
+ <div class="bx primary">Primary box</div>
372
+ <div class="bx teal">Teal box</div>
373
+ ```
374
+
375
+ ```html +code +preview preview-class="my"
376
+ <button class="btn primary">Primary</button>
377
+ <button class="btn teal">Teal</button>
378
+ <button class="btn danger">Danger</button>
379
+ <button class="btn success">Success</button>
380
+ ```
381
+
382
+
383
+ ## Semantic & Brand Themes
384
+
385
+ Beyond hue themes, JTB provides semantic themes for communicating intent and
386
+ brand themes (`primary`, `secondary`, `accent`) that are runtime-swappable via
387
+ CSS custom properties.
388
+
389
+ <div class="grid cols-8 gap-025">
390
+ <div class="primary rounded-05 h-4 flex-centered font-mono">primary</div>
391
+ <div class="secondary rounded-05 h-4 flex-centered font-mono">secondary</div>
392
+ <div class="accent rounded-05 h-4 flex-centered font-mono">accent</div>
393
+ <div class="danger rounded-05 h-4 flex-centered font-mono">danger</div>
394
+ <div class="success rounded-05 h-4 flex-centered font-mono">success</div>
395
+ <div class="warning rounded-05 h-4 flex-centered font-mono">warning</div>
396
+ <div class="info rounded-05 h-4 flex-centered font-mono">info</div>
397
+ <div class="light rounded-05 h-4 flex-centered font-mono bdr">light</div>
398
+ <div class="dark rounded-05 h-4 flex-centered font-mono">dark</div>
399
+ </div>
400
+
401
+ ## Outline Themes
402
+
403
+ Every theme has an `-outline` variant — transparent background with a colored
404
+ border and text, filling on hover.
405
+
406
+ ```html +code +preview preview-class="my"
407
+ <button class="btn primary-outline">Primary</button>
408
+ <button class="btn teal-outline">Teal</button>
409
+ <button class="btn danger-outline">Danger</button>
410
+ ```
411
+
412
+ ## Customizing
413
+
414
+ Brand themes (`primary`, `secondary`, `accent`) are overridable at runtime via
415
+ CSS custom properties. See [Customizing Themes](/docs/jtb/customizing-themes)
416
+ for the full reference.
417
+
418
+ ## Examples
419
+
420
+ ### Buttons
421
+
422
+ <div class="grid cols-8 gap-025">
423
+ <button class="btn primary">primary</button>
424
+ <button class="btn secondary">secondary</button>
425
+ <button class="btn accent">accent</button>
426
+ <button class="btn danger">danger</button>
427
+ <button class="btn info">info</button>
428
+ <button class="btn success">success</button>
429
+ <button class="btn warning">warning</button>
430
+ <button class="btn red">red</button>
431
+ <button class="btn orange">orange</button>
432
+ <button class="btn amber">amber</button>
433
+ <button class="btn yellow">yellow</button>
434
+ <button class="btn lime">lime</button>
435
+ <button class="btn green">green</button>
436
+ <button class="btn emerald">emerald</button>
437
+ <button class="btn teal">teal</button>
438
+ <button class="btn cyan">cyan</button>
439
+ <button class="btn sky">sky</button>
440
+ <button class="btn blue">blue</button>
441
+ <button class="btn indigo">indigo</button>
442
+ <button class="btn violet">violet</button>
443
+ <button class="btn purple">purple</button>
444
+ <button class="btn fuchsia">fuchsia</button>
445
+ <button class="btn pink">pink</button>
446
+ <button class="btn rose">rose</button>
447
+ <button class="btn slate">slate</button>
448
+ <button class="btn gray">gray</button>
449
+ <button class="btn zinc">zinc</button>
450
+ <button class="btn neutral">neutral</button>
451
+ <button class="btn stone">stone</button>
452
+ </div>
453
+
454
+ ### Buttons with outline themes
455
+
456
+ <div class="grid cols-8 gap-025">
457
+ <button class="btn primary-outline">primary</button>
458
+ <button class="btn secondary-outline">secondary</button>
459
+ <button class="btn accent-outline">accent</button>
460
+ <button class="btn danger-outline">danger</button>
461
+ <button class="btn info-outline">info</button>
462
+ <button class="btn success-outline">success</button>
463
+ <button class="btn warning-outline">warning</button>
464
+ <button class="btn red-outline">red</button>
465
+ <button class="btn orange-outline">orange</button>
466
+ <button class="btn amber-outline">amber</button>
467
+ <button class="btn yellow-outline">yellow</button>
468
+ <button class="btn lime-outline">lime</button>
469
+ <button class="btn green-outline">green</button>
470
+ <button class="btn emerald-outline">emerald</button>
471
+ <button class="btn teal-outline">teal</button>
472
+ <button class="btn cyan-outline">cyan</button>
473
+ <button class="btn sky-outline">sky</button>
474
+ <button class="btn blue-outline">blue</button>
475
+ <button class="btn indigo-outline">indigo</button>
476
+ <button class="btn violet-outline">violet</button>
477
+ <button class="btn purple-outline">purple</button>
478
+ <button class="btn fuchsia-outline">fuchsia</button>
479
+ <button class="btn pink-outline">pink</button>
480
+ <button class="btn rose-outline">rose</button>
481
+ <button class="btn slate-outline">slate</button>
482
+ <button class="btn gray-outline">gray</button>
483
+ <button class="btn zinc-outline">zinc</button>
484
+ <button class="btn neutral-outline">neutral</button>
485
+ <button class="btn stone-outline">stone</button>
486
+ </div>