@memobit/themes 2.0.0 → 2.2.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.
- package/README.md +27 -10
- package/dist/authored/sandy-parchment.css +1 -1
- package/dist/authored.css +1 -1
- package/dist/authoredThemes.d.ts +80 -0
- package/dist/authoredThemes.js +475 -5
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/dist/registry.d.ts +7 -0
- package/dist/registry.js +13 -0
- package/dist/themeConfig.js +17 -111
- package/dist/themes/ascend-contour-night.css +83 -0
- package/dist/themes/ascend-contour.css +83 -0
- package/dist/themes/cookbook-slate.css +83 -0
- package/dist/themes/cookbook-terracotta.css +83 -0
- package/dist/themes/garage-night-drive.css +83 -0
- package/dist/themes/garage-redline.css +83 -0
- package/dist/themes/garage-workshop.css +83 -0
- package/dist/themes/hub-deep-water.css +83 -0
- package/dist/themes/hub-shallows.css +83 -0
- package/dist/themes/impulse-pause.css +83 -0
- package/dist/themes/impulse-still-water.css +83 -0
- package/dist/themes/nutritrack-fresh-market.css +83 -0
- package/dist/themes/nutritrack-verdant.css +83 -0
- package/dist/themes/pocket-chip.css +83 -0
- package/dist/themes/pocket-receipt.css +83 -0
- package/dist/themes/pulse-ivory.css +83 -0
- package/dist/themes/pulse-night-chart.css +83 -0
- package/dist/themes/readout-highlighter.css +83 -0
- package/dist/themes/readout-night-reader.css +83 -0
- package/dist/themes/recall-calling-card.css +83 -0
- package/dist/themes/recall-stage-light.css +83 -0
- package/dist/themes/seeds-blossom.css +83 -0
- package/dist/themes/seeds-nightlight.css +83 -0
- package/dist/themes/tasks-deep-work.css +83 -0
- package/dist/themes/tasks-legal-pad.css +83 -0
- package/dist/themes.css +2099 -0
- package/package.json +3 -1
package/dist/themeConfig.js
CHANGED
|
@@ -14,8 +14,7 @@ var THEME_CONFIGS = [
|
|
|
14
14
|
value: "blossom-meadow",
|
|
15
15
|
label: "Blossom Meadow",
|
|
16
16
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap",
|
|
17
|
-
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&display=swap"
|
|
18
|
-
recommendedApps: ["Seeds", "Garage"]
|
|
17
|
+
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&display=swap"
|
|
19
18
|
},
|
|
20
19
|
{
|
|
21
20
|
value: "crimson-dusk",
|
|
@@ -54,18 +53,12 @@ var THEME_CONFIGS = [
|
|
|
54
53
|
{
|
|
55
54
|
value: "ocean-depths",
|
|
56
55
|
label: "Ocean Depths",
|
|
57
|
-
fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
58
|
-
recommendedApps: ["HUB"]
|
|
56
|
+
fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
59
57
|
},
|
|
60
58
|
{
|
|
61
59
|
value: "sandstone",
|
|
62
60
|
label: "Sandstone",
|
|
63
|
-
fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
|
|
64
|
-
recommendedApps: [
|
|
65
|
-
"CookBook",
|
|
66
|
-
"Impulse",
|
|
67
|
-
"Seeds"
|
|
68
|
-
]
|
|
61
|
+
fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
|
|
69
62
|
},
|
|
70
63
|
{
|
|
71
64
|
value: "tailwind-vue-dark",
|
|
@@ -76,15 +69,7 @@ var THEME_CONFIGS = [
|
|
|
76
69
|
{
|
|
77
70
|
value: "sandy-parchment",
|
|
78
71
|
label: "Sandy Parchment",
|
|
79
|
-
recommendedApps: [
|
|
80
|
-
"Shelf",
|
|
81
|
-
"Ascend",
|
|
82
|
-
"Basket",
|
|
83
|
-
"CookBook",
|
|
84
|
-
"HUB",
|
|
85
|
-
"Impulse",
|
|
86
|
-
"Seeds"
|
|
87
|
-
],
|
|
72
|
+
recommendedApps: ["Shelf", "Basket"],
|
|
88
73
|
fontUrl: "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap",
|
|
89
74
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&display=swap"
|
|
90
75
|
},
|
|
@@ -92,12 +77,7 @@ var THEME_CONFIGS = [
|
|
|
92
77
|
value: "midnight-amber",
|
|
93
78
|
label: "Midnight Amber",
|
|
94
79
|
fontUrl: "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap",
|
|
95
|
-
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap"
|
|
96
|
-
recommendedApps: [
|
|
97
|
-
"Garage",
|
|
98
|
-
"CookBook",
|
|
99
|
-
"Impulse"
|
|
100
|
-
]
|
|
80
|
+
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&display=swap"
|
|
101
81
|
},
|
|
102
82
|
{
|
|
103
83
|
value: "cobalt-pulse",
|
|
@@ -109,46 +89,27 @@ var THEME_CONFIGS = [
|
|
|
109
89
|
{
|
|
110
90
|
value: "carbon-velocity",
|
|
111
91
|
label: "Carbon Velocity",
|
|
112
|
-
recommendedApps: [
|
|
113
|
-
"Garage",
|
|
114
|
-
"HUB",
|
|
115
|
-
"Impulse",
|
|
116
|
-
"Resume"
|
|
117
|
-
],
|
|
92
|
+
recommendedApps: ["Resume"],
|
|
118
93
|
fontUrl: "https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap",
|
|
119
94
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap"
|
|
120
95
|
},
|
|
121
96
|
{
|
|
122
97
|
value: "signal-burst",
|
|
123
98
|
label: "Signal Burst",
|
|
124
|
-
recommendedApps: [
|
|
125
|
-
"Impulse",
|
|
126
|
-
"Garage",
|
|
127
|
-
"Ascend",
|
|
128
|
-
"Basket",
|
|
129
|
-
"CookBook",
|
|
130
|
-
"Resume",
|
|
131
|
-
"NutriTrack",
|
|
132
|
-
"Seeds"
|
|
133
|
-
],
|
|
99
|
+
recommendedApps: ["Basket", "Resume"],
|
|
134
100
|
fontUrl: "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap",
|
|
135
101
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"
|
|
136
102
|
},
|
|
137
103
|
{
|
|
138
104
|
value: "ivory-serif",
|
|
139
105
|
label: "Ivory Serif",
|
|
140
|
-
recommendedApps: ["Pulse"],
|
|
141
106
|
fontUrl: "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap",
|
|
142
107
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
|
|
143
108
|
},
|
|
144
109
|
{
|
|
145
110
|
value: "noir-marquee",
|
|
146
111
|
label: "Noir Marquee",
|
|
147
|
-
recommendedApps: [
|
|
148
|
-
"Reels",
|
|
149
|
-
"Resume",
|
|
150
|
-
"Pulse"
|
|
151
|
-
],
|
|
112
|
+
recommendedApps: ["Reels", "Resume"],
|
|
152
113
|
fontUrl: "https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap",
|
|
153
114
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap"
|
|
154
115
|
},
|
|
@@ -156,32 +117,18 @@ var THEME_CONFIGS = [
|
|
|
156
117
|
value: "garden-harvest",
|
|
157
118
|
label: "Garden Harvest",
|
|
158
119
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap",
|
|
159
|
-
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap"
|
|
160
|
-
recommendedApps: [
|
|
161
|
-
"NutriTrack",
|
|
162
|
-
"Garage",
|
|
163
|
-
"Impulse",
|
|
164
|
-
"Pulse"
|
|
165
|
-
]
|
|
120
|
+
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap"
|
|
166
121
|
},
|
|
167
122
|
{
|
|
168
123
|
value: "citrus-vital",
|
|
169
124
|
label: "Citrus Vital",
|
|
170
|
-
recommendedApps: [],
|
|
171
125
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&display=swap",
|
|
172
126
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700&display=swap"
|
|
173
127
|
},
|
|
174
128
|
{
|
|
175
129
|
value: "horizon-amber",
|
|
176
130
|
label: "Horizon Amber",
|
|
177
|
-
recommendedApps: [
|
|
178
|
-
"Ascend",
|
|
179
|
-
"Garage",
|
|
180
|
-
"Basket",
|
|
181
|
-
"HUB",
|
|
182
|
-
"Impulse",
|
|
183
|
-
"NutriTrack"
|
|
184
|
-
],
|
|
131
|
+
recommendedApps: ["Basket"],
|
|
185
132
|
fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap",
|
|
186
133
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap"
|
|
187
134
|
},
|
|
@@ -190,12 +137,8 @@ var THEME_CONFIGS = [
|
|
|
190
137
|
label: "Chalk & Circuit",
|
|
191
138
|
recommendedApps: [
|
|
192
139
|
"Quiz Lab",
|
|
193
|
-
"Garage",
|
|
194
140
|
"Basket",
|
|
195
|
-
"
|
|
196
|
-
"Resume",
|
|
197
|
-
"NutriTrack",
|
|
198
|
-
"Pulse"
|
|
141
|
+
"Resume"
|
|
199
142
|
],
|
|
200
143
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap",
|
|
201
144
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700&display=swap"
|
|
@@ -203,12 +146,6 @@ var THEME_CONFIGS = [
|
|
|
203
146
|
{
|
|
204
147
|
value: "terracotta-kitchen",
|
|
205
148
|
label: "Terracotta Kitchen",
|
|
206
|
-
recommendedApps: [
|
|
207
|
-
"CookBook",
|
|
208
|
-
"Impulse",
|
|
209
|
-
"NutriTrack",
|
|
210
|
-
"Seeds"
|
|
211
|
-
],
|
|
212
149
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&display=swap",
|
|
213
150
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
|
|
214
151
|
},
|
|
@@ -222,7 +159,6 @@ var THEME_CONFIGS = [
|
|
|
222
159
|
{
|
|
223
160
|
value: "slate-focus",
|
|
224
161
|
label: "Slate Focus",
|
|
225
|
-
recommendedApps: ["Tasks"],
|
|
226
162
|
fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
227
163
|
},
|
|
228
164
|
{
|
|
@@ -231,10 +167,7 @@ var THEME_CONFIGS = [
|
|
|
231
167
|
recommendedApps: [
|
|
232
168
|
"Voyage",
|
|
233
169
|
"Basket",
|
|
234
|
-
"
|
|
235
|
-
"HUB",
|
|
236
|
-
"Resume",
|
|
237
|
-
"NutriTrack"
|
|
170
|
+
"Resume"
|
|
238
171
|
],
|
|
239
172
|
fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap",
|
|
240
173
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&display=swap"
|
|
@@ -245,7 +178,6 @@ var THEME_CONFIGS = [
|
|
|
245
178
|
recommendedApps: [
|
|
246
179
|
"Backup",
|
|
247
180
|
"Basket",
|
|
248
|
-
"Impulse",
|
|
249
181
|
"Resume"
|
|
250
182
|
],
|
|
251
183
|
fontUrl: "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap",
|
|
@@ -254,18 +186,13 @@ var THEME_CONFIGS = [
|
|
|
254
186
|
{
|
|
255
187
|
value: "crawler-dusk",
|
|
256
188
|
label: "Crawler Dusk",
|
|
257
|
-
recommendedApps: ["Ascend", "NutriTrack"],
|
|
258
189
|
fontUrl: "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap",
|
|
259
190
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap"
|
|
260
191
|
},
|
|
261
192
|
{
|
|
262
193
|
value: "asphalt-code",
|
|
263
194
|
label: "Asphalt Code",
|
|
264
|
-
recommendedApps: [
|
|
265
|
-
"Cars Crawler",
|
|
266
|
-
"Impulse",
|
|
267
|
-
"Resume"
|
|
268
|
-
],
|
|
195
|
+
recommendedApps: ["Cars Crawler", "Resume"],
|
|
269
196
|
fontUrl: "https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap",
|
|
270
197
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap"
|
|
271
198
|
},
|
|
@@ -282,7 +209,6 @@ var THEME_CONFIGS = [
|
|
|
282
209
|
recommendedApps: [
|
|
283
210
|
"Health-IQ",
|
|
284
211
|
"Basket",
|
|
285
|
-
"HUB",
|
|
286
212
|
"Resume"
|
|
287
213
|
],
|
|
288
214
|
fontUrl: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap",
|
|
@@ -318,12 +244,7 @@ var THEME_CONFIGS = [
|
|
|
318
244
|
{
|
|
319
245
|
value: "audit-ember",
|
|
320
246
|
label: "Audit Ember",
|
|
321
|
-
recommendedApps: [
|
|
322
|
-
"Network Audit",
|
|
323
|
-
"Garage",
|
|
324
|
-
"Impulse",
|
|
325
|
-
"Resume"
|
|
326
|
-
],
|
|
247
|
+
recommendedApps: ["Network Audit", "Resume"],
|
|
327
248
|
fontUrl: "https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap",
|
|
328
249
|
fontUrlMono: "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap"
|
|
329
250
|
},
|
|
@@ -350,14 +271,13 @@ var THEME_CONFIGS = [
|
|
|
350
271
|
{
|
|
351
272
|
value: "verdant-pulse",
|
|
352
273
|
label: "Verdant Pulse",
|
|
353
|
-
recommendedApps: ["NutriTrack"],
|
|
354
274
|
fontUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap",
|
|
355
275
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&display=swap"
|
|
356
276
|
},
|
|
357
277
|
{
|
|
358
278
|
value: "atelier-media",
|
|
359
279
|
label: "Atelier Media",
|
|
360
|
-
recommendedApps: ["Atelier Media"
|
|
280
|
+
recommendedApps: ["Atelier Media"],
|
|
361
281
|
fontUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
|
|
362
282
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&display=swap"
|
|
363
283
|
},
|
|
@@ -366,13 +286,8 @@ var THEME_CONFIGS = [
|
|
|
366
286
|
label: "Chrono Atlas",
|
|
367
287
|
recommendedApps: [
|
|
368
288
|
"Atlas of Time",
|
|
369
|
-
"Garage",
|
|
370
|
-
"Ascend",
|
|
371
289
|
"Basket",
|
|
372
|
-
"
|
|
373
|
-
"Resume",
|
|
374
|
-
"Pulse",
|
|
375
|
-
"Seeds"
|
|
290
|
+
"Resume"
|
|
376
291
|
],
|
|
377
292
|
fontUrl: "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap",
|
|
378
293
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
|
|
@@ -387,21 +302,18 @@ var THEME_CONFIGS = [
|
|
|
387
302
|
{
|
|
388
303
|
value: "kindred-ink",
|
|
389
304
|
label: "Kindred Ink",
|
|
390
|
-
recommendedApps: ["Recall"],
|
|
391
305
|
fontUrl: "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&display=swap",
|
|
392
306
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"
|
|
393
307
|
},
|
|
394
308
|
{
|
|
395
309
|
value: "lamplight",
|
|
396
310
|
label: "Lamplight",
|
|
397
|
-
recommendedApps: ["Readout"],
|
|
398
311
|
fontUrl: "https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&display=swap",
|
|
399
312
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"
|
|
400
313
|
},
|
|
401
314
|
{
|
|
402
315
|
value: "indigo-stitch",
|
|
403
316
|
label: "Indigo Stitch",
|
|
404
|
-
recommendedApps: ["Pocket"],
|
|
405
317
|
fontUrl: "https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap",
|
|
406
318
|
fontUrlDisplay: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
|
|
407
319
|
},
|
|
@@ -440,10 +352,4 @@ var LIGHT_THEMES = /* @__PURE__ */ new Set([
|
|
|
440
352
|
"terracotta-kitchen",
|
|
441
353
|
"vital-aurora"
|
|
442
354
|
]);
|
|
443
|
-
|
|
444
|
-
return LIGHT_THEMES.has(themeValue) ? "light" : "dark";
|
|
445
|
-
};
|
|
446
|
-
var getThemeConfig = (themeValue) => {
|
|
447
|
-
return THEME_CONFIGS.find((config) => config.value === themeValue);
|
|
448
|
-
};
|
|
449
|
-
export { FAVORITE_THEMES, LIGHT_THEMES, THEME_CONFIGS, getThemeAppearance, getThemeConfig };
|
|
355
|
+
export { FAVORITE_THEMES, LIGHT_THEMES, THEME_CONFIGS };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[data-theme='ascend-contour-night']{color-scheme:dark;--font-body:'Public Sans', system-ui, sans-serif;--font-display:'Bricolage Grotesque', system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:700;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:-0.02em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.08em;--header-weight:600;--canvas-layers:repeating-radial-gradient(circle at 85% 8%, transparent 0 22px, rgba(190, 225, 205, 0.045) 22px 23px), repeating-radial-gradient(circle at 8% 96%, transparent 0 26px, rgba(190, 225, 205, 0.04) 26px 27px);--surface-canvas:#111816;--surface-card:rgba(23, 33, 30, 0.96);--surface-raised:#121a17;--surface-raised-alt:#1c2824;--surface-overlay:#1e2a26;--button-fill:#1f2b27;--surface-overlay-card:rgba(23, 33, 30, 0.96);--surface-sunken:#24312c;--control-hover:#22302b;--surface-hover:color-mix(in oklab, #78b3ec 8%, transparent);--surface-stripe:#192420;--rating-empty:color-mix(in oklab, #24312c 85%, #eef4f0);--surface-selected:color-mix(in oklab, #78b3ec 18%, transparent);--surface-blur:none;--text-strong:#eef4f0;--text-default:#d6e0da;--text-soft:#b6c3bb;--text-muted:#93a39a;--text-subtle:#71817a;--text-link:#8cc0f0;--text-link-hover:#b3d6f6;--border-subtle:rgba(214, 224, 218, 0.08);--border-default:rgba(214, 224, 218, 0.14);--border-strong:rgba(214, 224, 218, 0.14);--border-card:rgba(214, 224, 218, 0.07);--border-card-hover:rgba(120, 179, 236, 0.45);--field-bg:#121a17;--field-bg-focus:#121a17;--field-bg-disabled:color-mix(in oklab, #121a17 94%, #eef4f0);--field-fg:#d6e0da;--field-border:rgba(214, 224, 218, 0.16);--field-border-hover:#78b3ec;--field-border-focus:#78b3ec;--field-placeholder:#71817a;--field-label:#93a39a;--field-ring:color-mix(in oklab, #78b3ec 24%, transparent);--tone-neutral-solid:#eef4f0;--tone-neutral-solid-hover:color-mix(in oklab, #eef4f0 70%, #d6e0da);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#22302b;--tone-neutral-soft-hover:color-mix(in oklab, #22302b 92%, #eef4f0);--tone-neutral-on-soft:#eef4f0;--tone-neutral-border:rgba(214, 224, 218, 0.14);--tone-neutral-text:#b6c3bb;--tone-accent-solid:#2d6aa8;--tone-accent-mark:#78b3ec;--tone-accent-solid-hover:#3779bb;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #78b3ec 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #78b3ec 24%, transparent);--tone-accent-on-soft:#8cc0f0;--tone-accent-border:color-mix(in oklab, #78b3ec 40%, transparent);--tone-accent-text:#8cc0f0;--tone-success-solid:#2b7a4d;--tone-success-mark:#5cc98a;--tone-success-solid-hover:#33905b;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #5cc98a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #5cc98a 24%, transparent);--tone-success-on-soft:#72d39b;--tone-success-border:color-mix(in oklab, #5cc98a 40%, transparent);--tone-success-text:#72d39b;--tone-warning-solid:#93570e;--tone-warning-mark:#e8b05a;--tone-warning-solid-hover:#a96614;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #e8b05a 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e8b05a 24%, transparent);--tone-warning-on-soft:#ecc06a;--tone-warning-border:color-mix(in oklab, #e8b05a 40%, transparent);--tone-warning-text:#ecc06a;--tone-danger-solid:#ad3734;--tone-danger-mark:#f07470;--tone-danger-solid-hover:#c2433f;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #f07470 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f07470 24%, transparent);--tone-danger-on-soft:#f48a86;--tone-danger-border:color-mix(in oklab, #f07470 40%, transparent);--tone-danger-text:#f48a86;--accent-glow:#f08a4b;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(214, 224, 218, 0.03) inset, 0 2px 6px rgba(0, 0, 0, 0.35);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 72px rgba(0, 0, 0, 0.7);--scrim:color-mix(in oklab, #eef4f0 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-display);--modal-title-font-size:var(--font-size-xl);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:-0.02em;--modal-title-text-transform:none;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='ascend-contour-night'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='ascend-contour-night'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='ascend-contour-night'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='ascend-contour-night'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='ascend-contour-night'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='ascend-contour-night']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='ascend-contour-night'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='ascend-contour-night'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='ascend-contour-night'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='ascend-contour-night'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='ascend-contour-night'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[data-theme='ascend-contour']{color-scheme:light;--font-body:'Public Sans', system-ui, sans-serif;--font-display:'Bricolage Grotesque', system-ui, sans-serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:normal;--display-weight:700;--display-size:var(--font-size-lg);--display-transform:none;--display-tracking:-0.02em;--label-weight:600;--label-transform:uppercase;--label-tracking:0.08em;--header-weight:600;--canvas-layers:repeating-radial-gradient(circle at 85% 8%, transparent 0 22px, rgba(46, 90, 70, 0.07) 22px 23px), repeating-radial-gradient(circle at 8% 96%, transparent 0 26px, rgba(46, 90, 70, 0.06) 26px 27px);--surface-canvas:#eef1ed;--surface-card:rgba(252, 253, 251, 0.95);--surface-raised:#ffffff;--surface-raised-alt:#f3f6f2;--surface-overlay:#ffffff;--button-fill:#ffffff;--surface-overlay-card:rgba(252, 253, 251, 0.95);--surface-sunken:#dfe6de;--control-hover:#e6ece5;--surface-hover:color-mix(in oklab, #2b74bd 8%, transparent);--surface-stripe:#f6f8f5;--rating-empty:color-mix(in oklab, #dfe6de 85%, #16231d);--surface-selected:color-mix(in oklab, #2b74bd 18%, transparent);--surface-blur:none;--text-strong:#16231d;--text-default:#26342d;--text-soft:#3e4c45;--text-muted:#55635b;--text-subtle:#7d8982;--text-link:#1c5893;--text-link-hover:#143f6b;--border-subtle:rgba(22, 35, 29, 0.09);--border-default:rgba(22, 35, 29, 0.16);--border-strong:rgba(22, 35, 29, 0.16);--border-card:rgba(22, 35, 29, 0.08);--border-card-hover:rgba(31, 95, 158, 0.4);--field-bg:#ffffff;--field-bg-focus:#ffffff;--field-bg-disabled:color-mix(in oklab, #ffffff 94%, #16231d);--field-fg:#26342d;--field-border:rgba(22, 35, 29, 0.2);--field-border-hover:#1f5f9e;--field-border-focus:#2b74bd;--field-placeholder:#7d8982;--field-label:#55635b;--field-ring:color-mix(in oklab, #2b74bd 24%, transparent);--tone-neutral-solid:#16231d;--tone-neutral-solid-hover:color-mix(in oklab, #16231d 70%, #26342d);--tone-neutral-on-solid:#ffffff;--tone-neutral-soft:#e6ece5;--tone-neutral-soft-hover:color-mix(in oklab, #e6ece5 92%, #16231d);--tone-neutral-on-soft:#16231d;--tone-neutral-border:rgba(22, 35, 29, 0.16);--tone-neutral-text:#3e4c45;--tone-accent-solid:#1f5f9e;--tone-accent-mark:#2b74bd;--tone-accent-solid-hover:#184d82;--tone-accent-on-solid:#ffffff;--tone-accent-soft:color-mix(in oklab, #2b74bd 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #2b74bd 24%, transparent);--tone-accent-on-soft:#1c5893;--tone-accent-border:color-mix(in oklab, #2b74bd 40%, transparent);--tone-accent-text:#1c5893;--tone-success-solid:#25734a;--tone-success-mark:#25734a;--tone-success-solid-hover:#1d5d3c;--tone-success-on-solid:#ffffff;--tone-success-soft:color-mix(in oklab, #25734a 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #25734a 24%, transparent);--tone-success-on-soft:#1f6640;--tone-success-border:color-mix(in oklab, #25734a 40%, transparent);--tone-success-text:#1f6640;--tone-warning-solid:#a3560c;--tone-warning-mark:#a3560c;--tone-warning-solid-hover:#86460a;--tone-warning-on-solid:#ffffff;--tone-warning-soft:color-mix(in oklab, #a3560c 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #a3560c 24%, transparent);--tone-warning-on-soft:#8c4a0a;--tone-warning-border:color-mix(in oklab, #a3560c 40%, transparent);--tone-warning-text:#8c4a0a;--tone-danger-solid:#b42a24;--tone-danger-mark:#b42a24;--tone-danger-solid-hover:#93221d;--tone-danger-on-solid:#ffffff;--tone-danger-soft:color-mix(in oklab, #b42a24 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #b42a24 24%, transparent);--tone-danger-on-soft:#a3241f;--tone-danger-border:color-mix(in oklab, #b42a24 40%, transparent);--tone-danger-text:#a3241f;--accent-glow:#e2732f;--selected-bg:var(--tone-neutral-solid);--selected-bg-hover:var(--tone-neutral-solid-hover);--selected-fg:var(--tone-neutral-on-solid);--selected-border:var(--tone-neutral-solid);--selected-solid:var(--tone-neutral-solid);--selected-solid-fg:var(--tone-neutral-on-solid);--shadow-color:color-mix(in oklab, color-mix(in oklab, #16231d 40%, transparent) 45%, transparent);--shadow-color-strong:color-mix(in oklab, color-mix(in oklab, #16231d 40%, transparent) 62%, transparent);--shadow-sm:0 1px 2px rgba(22, 35, 29, 0.05);--shadow-md:0 1px 2px rgba(22, 35, 29, 0.05), 0 12px 28px -16px rgba(22, 35, 29, 0.22);--shadow-lg:0 24px 64px rgba(22, 35, 29, 0.24);--scrim:color-mix(in oklab, #16231d 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-display);--modal-title-font-size:var(--font-size-xl);--modal-title-font-style:normal;--modal-title-font-weight:700;--modal-title-letter-spacing:-0.02em;--modal-title-text-transform:none;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='ascend-contour'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='ascend-contour'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='ascend-contour'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='ascend-contour'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='ascend-contour'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='ascend-contour']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='ascend-contour'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='ascend-contour'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='ascend-contour'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='ascend-contour'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='ascend-contour'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
[data-theme='cookbook-slate']{color-scheme:dark;--font-body:'Nunito Sans', 'Avenir', sans-serif;--font-display:'Playfair Display', Georgia, serif;--font-mono:ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, Consolas, monospace;--display-style:italic;--display-weight:500;--display-size:var(--font-size-xl);--display-transform:none;--display-tracking:normal;--label-weight:600;--label-transform:uppercase;--label-tracking:0.12em;--header-weight:600;--canvas-layers:radial-gradient(55% 50% at 0% 100%, rgba(229, 137, 95, 0.11) 0%, transparent 65%), radial-gradient(45% 40% at 100% 0%, rgba(150, 170, 190, 0.06) 0%, transparent 65%), linear-gradient(160deg, #181c20 0%, #111417 100%);--surface-canvas:#14171a;--surface-card:#1b1f23;--surface-raised:#16191d;--surface-raised-alt:#20252a;--surface-overlay:#23282d;--button-fill:#252a30;--surface-overlay-card:#1c2024;--surface-sunken:#2a2f35;--control-hover:#272c32;--surface-hover:color-mix(in oklab, #e5895f 8%, transparent);--surface-stripe:#1e2226;--rating-empty:color-mix(in oklab, #2a2f35 85%, #f6f3ef);--surface-selected:color-mix(in oklab, #e5895f 18%, transparent);--surface-blur:none;--text-strong:#f6f3ef;--text-default:#e2dfdb;--text-soft:#c4c3c1;--text-muted:#9da0a4;--text-subtle:#777b81;--text-link:#f0a07c;--text-link-hover:#ffc3a3;--border-subtle:rgba(226, 223, 219, 0.08);--border-default:rgba(226, 223, 219, 0.13);--border-strong:rgba(226, 223, 219, 0.13);--border-card:rgba(226, 223, 219, 0.07);--border-card-hover:rgba(229, 137, 95, 0.45);--field-bg:#16191d;--field-bg-focus:#16191d;--field-bg-disabled:color-mix(in oklab, #16191d 94%, #f6f3ef);--field-fg:#e2dfdb;--field-border:rgba(226, 223, 219, 0.16);--field-border-hover:#e5895f;--field-border-focus:#e5895f;--field-placeholder:#777b81;--field-label:#9da0a4;--field-ring:color-mix(in oklab, #e5895f 24%, transparent);--tone-neutral-solid:#f6f3ef;--tone-neutral-solid-hover:color-mix(in oklab, #f6f3ef 70%, #e2dfdb);--tone-neutral-on-solid:#fff8f4;--tone-neutral-soft:#272c32;--tone-neutral-soft-hover:color-mix(in oklab, #272c32 92%, #f6f3ef);--tone-neutral-on-soft:#f6f3ef;--tone-neutral-border:rgba(226, 223, 219, 0.13);--tone-neutral-text:#c4c3c1;--tone-accent-solid:#b0462a;--tone-accent-mark:#e5895f;--tone-accent-solid-hover:#c2522f;--tone-accent-on-solid:#fff8f4;--tone-accent-soft:color-mix(in oklab, #e5895f 16%, transparent);--tone-accent-soft-hover:color-mix(in oklab, #e5895f 24%, transparent);--tone-accent-on-soft:#f0a07c;--tone-accent-border:color-mix(in oklab, #e5895f 40%, transparent);--tone-accent-text:#f0a07c;--tone-success-solid:#3f7a46;--tone-success-mark:#7cc488;--tone-success-solid-hover:#4a8c52;--tone-success-on-solid:#fff8f4;--tone-success-soft:color-mix(in oklab, #7cc488 16%, transparent);--tone-success-soft-hover:color-mix(in oklab, #7cc488 24%, transparent);--tone-success-on-soft:#93d19d;--tone-success-border:color-mix(in oklab, #7cc488 40%, transparent);--tone-success-text:#93d19d;--tone-warning-solid:#93650f;--tone-warning-mark:#e8b04e;--tone-warning-solid-hover:#a87618;--tone-warning-on-solid:#fff8f4;--tone-warning-soft:color-mix(in oklab, #e8b04e 16%, transparent);--tone-warning-soft-hover:color-mix(in oklab, #e8b04e 24%, transparent);--tone-warning-on-soft:#f0c272;--tone-warning-border:color-mix(in oklab, #e8b04e 40%, transparent);--tone-warning-text:#f0c272;--tone-danger-solid:#b3362e;--tone-danger-mark:#f07a6e;--tone-danger-solid-hover:#c6443b;--tone-danger-on-solid:#fff8f4;--tone-danger-soft:color-mix(in oklab, #f07a6e 16%, transparent);--tone-danger-soft-hover:color-mix(in oklab, #f07a6e 24%, transparent);--tone-danger-on-soft:#f59287;--tone-danger-border:color-mix(in oklab, #f07a6e 40%, transparent);--tone-danger-text:#f59287;--accent-glow:#ffb37a;--selected-bg:var(--tone-accent-soft);--selected-bg-hover:var(--tone-accent-soft-hover);--selected-fg:var(--tone-accent-on-soft);--selected-border:var(--tone-accent-border);--selected-solid:var(--tone-accent-solid);--selected-solid-fg:var(--tone-accent-on-solid);--shadow-color:color-mix(in oklab, #000 45%, transparent);--shadow-color-strong:color-mix(in oklab, #000 62%, transparent);--shadow-sm:0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 8px rgba(0, 0, 0, 0.4);--shadow-md:0 14px 34px -16px rgba(0, 0, 0, 0.75);--shadow-lg:0 28px 70px rgba(0, 0, 0, 0.65);--scrim:color-mix(in oklab, #f6f3ef 45%, transparent);--body-background:var(--canvas-layers), var(--surface-canvas);--body-background-base:var(--surface-canvas);--body-background-wash:var(--canvas-layers), var(--surface-canvas);--body-background-glow:none;--body-color:var(--text-default);--body-color-accent:var(--text-strong);--body-color-muted:var(--text-muted);--body-title-color:var(--text-strong);--body-sub-title-color:var(--text-soft);--body-accent-color:var(--tone-accent-text);--body-danger-color:var(--tone-danger-text);--backdrop-color:var(--scrim);--box-shadow:var(--shadow-color);--text-shadow:var(--shadow-color);--border-color:var(--border-strong);--delimiter-color:var(--border-subtle);--links-color:var(--text-link);--links-hover-color:var(--text-link-hover);--font-family:var(--font-body);--font-family-sans:var(--font-body);--font-family-display:var(--font-display);--font-family-mono:var(--font-mono);--header-background-color:var(--surface-raised);--header-border-bottom-color:var(--border-subtle);--header-color:var(--text-strong);--header-font-weight:var(--header-weight);--button-default-background-color:var(--button-fill);--button-default-border-color:var(--border-default);--button-default-color:var(--text-default);--button-default-hover-background-color:var(--control-hover);--button-default-hover-border-color:var(--field-border-hover);--button-default-hover-color:var(--text-strong);--button-ghost-background-color:transparent;--button-ghost-border-color:transparent;--button-ghost-color:var(--text-soft);--button-ghost-hover-background-color:var(--control-hover);--button-ghost-hover-border-color:transparent;--button-ghost-hover-color:var(--text-strong);--button-plain-color:var(--text-soft);--button-plain-hover-color:var(--text-strong);--button-info-background-color:var(--tone-accent-solid);--button-info-border-color:var(--tone-accent-mark);--button-info-color:var(--tone-accent-on-solid);--button-info-hover-background-color:var(--tone-accent-solid-hover);--button-info-hover-border-color:var(--tone-accent-mark);--button-info-hover-color:var(--tone-accent-on-solid);--toast-info-background-color:var(--tone-accent-soft);--toast-info-border-color:var(--tone-accent-border);--toast-info-color:var(--tone-accent-on-soft);--progress-info-bar-border-color:var(--tone-accent-mark);--progress-info-bar-fill-color:var(--tone-accent-mark);--rating-color-info:var(--tone-accent-mark);--card-tint-info-background:var(--tone-accent-soft);--button-success-background-color:var(--tone-success-solid);--button-success-border-color:var(--tone-success-mark);--button-success-color:var(--tone-success-on-solid);--button-success-hover-background-color:var(--tone-success-solid-hover);--button-success-hover-border-color:var(--tone-success-mark);--button-success-hover-color:var(--tone-success-on-solid);--toast-success-background-color:var(--tone-success-soft);--toast-success-border-color:var(--tone-success-border);--toast-success-color:var(--tone-success-on-soft);--progress-success-bar-border-color:var(--tone-success-mark);--progress-success-bar-fill-color:var(--tone-success-mark);--rating-color-success:var(--tone-success-mark);--card-tint-success-background:var(--tone-success-soft);--button-warning-background-color:var(--tone-warning-solid);--button-warning-border-color:var(--tone-warning-mark);--button-warning-color:var(--tone-warning-on-solid);--button-warning-hover-background-color:var(--tone-warning-solid-hover);--button-warning-hover-border-color:var(--tone-warning-mark);--button-warning-hover-color:var(--tone-warning-on-solid);--toast-warning-background-color:var(--tone-warning-soft);--toast-warning-border-color:var(--tone-warning-border);--toast-warning-color:var(--tone-warning-on-soft);--progress-warning-bar-border-color:var(--tone-warning-mark);--progress-warning-bar-fill-color:var(--tone-warning-mark);--rating-color-warning:var(--tone-warning-mark);--card-tint-warning-background:var(--tone-warning-soft);--button-danger-background-color:var(--tone-danger-solid);--button-danger-border-color:var(--tone-danger-mark);--button-danger-color:var(--tone-danger-on-solid);--button-danger-hover-background-color:var(--tone-danger-solid-hover);--button-danger-hover-border-color:var(--tone-danger-mark);--button-danger-hover-color:var(--tone-danger-on-solid);--toast-danger-background-color:var(--tone-danger-soft);--toast-danger-border-color:var(--tone-danger-border);--toast-danger-color:var(--tone-danger-on-soft);--progress-danger-bar-border-color:var(--tone-danger-mark);--progress-danger-bar-fill-color:var(--tone-danger-mark);--rating-color-danger:var(--tone-danger-mark);--card-tint-danger-background:var(--tone-danger-soft);--progress-bar-background-color:var(--surface-sunken);--progress-bar-color:var(--text-default);--progress-default-bar-border-color:var(--border-strong);--progress-default-bar-fill-color:var(--text-muted);--rating-empty-color:var(--rating-empty);--rating-empty-label-color:var(--text-muted);--rating-half-rate-empty-color:var(--rating-empty);--card-tint-default-background:var(--surface-raised-alt);--card-accent-color:var(--tone-accent-text);--card-backdrop-filter:var(--surface-blur);--card-background-accent-color:var(--surface-raised-alt);--card-background-color:var(--surface-card);--card-border-accent-color:var(--tone-accent-mark);--card-border-color:var(--border-card);--card-box-shadow:var(--shadow-md);--card-color:var(--text-default);--card-footer-background-color:var(--surface-raised-alt);--card-footer-color:var(--text-soft);--card-hover-border-color:var(--border-card-hover);--card-surface-box-shadow:var(--shadow-sm);--card-title-color:var(--text-strong);--card-title-font-family:var(--font-display);--card-title-font-size:var(--display-size);--card-title-font-style:var(--display-style);--card-title-font-weight:var(--display-weight);--card-title-letter-spacing:var(--display-tracking);--card-title-text-transform:var(--display-transform);--modal-backdrop-filter:var(--surface-blur);--modal-background-color:var(--surface-overlay-card);--modal-body-color:var(--text-default);--modal-border-color:var(--border-card);--modal-box-shadow:var(--shadow-lg);--modal-box-shadow-hover:var(--shadow-lg);--modal-color:var(--text-default);--modal-footer-background-color:var(--surface-raised-alt);--modal-header-background-color:var(--surface-raised-alt);--modal-header-color:var(--text-strong);--modal-surface-box-shadow:var(--shadow-lg);--modal-title-color:var(--text-strong);--modal-title-font-family:var(--font-body);--modal-title-font-size:var(--font-size-sm);--modal-title-font-style:normal;--modal-title-font-weight:600;--modal-title-letter-spacing:0.16em;--modal-title-text-transform:uppercase;--drawer-background-color:var(--surface-overlay-card);--drawer-header-background-color:var(--surface-raised-alt);--drawer-border-color:var(--border-card);--drawer-shadow:var(--shadow-lg);--form-control-background-color:var(--field-bg);--form-control-border-color:var(--field-border);--form-control-color:var(--field-fg);--form-control-focus-background-color:var(--field-bg-focus);--form-control-focus-border-color:var(--field-border-focus);--form-control-focus-color:var(--field-fg);--form-control-focus-ring:var(--field-ring);--form-control-error-background-color:color-mix(in oklab, var(--tone-danger-solid) 6%, var(--field-bg));--form-control-error-border-color:var(--tone-danger-mark);--form-control-error-color:var(--tone-danger-text);--form-control-success-background-color:color-mix(in oklab, var(--tone-success-solid) 7%, var(--field-bg));--form-control-success-border-color:var(--tone-success-mark);--form-control-success-color:var(--tone-success-text);--form-control-font-family:var(--font-body);--form-control-label-color:var(--field-label);--form-control-label-font-size:var(--font-size-xs);--form-control-label-font-weight:var(--label-weight);--form-control-label-letter-spacing:var(--label-tracking);--form-control-label-text-transform:var(--label-transform);--form-control-placeholder-color:var(--field-placeholder);--form-control-selection-background-color:var(--selected-solid);--form-control-selection-border-color:var(--selected-solid);--form-control-selection-color:var(--selected-solid-fg);--form-control-selection-label-color:var(--text-default);--datepicker-input-background-color:var(--field-bg);--dropdown-border-color:var(--field-border);--dropdown-header-background-color:var(--field-bg);--dropdown-header-border-focus-color:var(--field-border-focus);--dropdown-header-color:var(--field-fg);--dropdown-options-background-color:var(--surface-overlay);--dropdown-options-color:var(--text-default);--dropdown-options-hover-background-color:var(--surface-hover);--dropdown-options-hover-color:var(--text-strong);--dropdown-options-selected-background-color:var(--surface-selected);--dropdown-options-selected-color:var(--text-strong);--dropdown-action-background-color:var(--surface-raised-alt);--dropdown-action-color:var(--text-link);--dropdown-action-hover-background-color:var(--surface-hover);--dropdown-action-hover-color:var(--text-link-hover);--dropdown-chips-background-color:var(--selected-bg);--dropdown-chips-border-color:var(--selected-border);--dropdown-chips-color:var(--selected-fg);--dropdown-chips-hover-background-color:var(--selected-bg-hover);--slider-track-background-color:var(--surface-sunken);--slider-track-border-color:var(--field-border);--slider-track-hover-background-color:var(--control-hover);--slider-track-hover-border-color:var(--field-border-hover);--slider-thumb-background-color:var(--tone-accent-mark);--slider-thumb-border-color:var(--tone-accent-mark);--slider-thumb-hover-background-color:var(--tone-accent-solid-hover);--slider-thumb-hover-border-color:var(--tone-accent-solid-hover);--calendar-background-color:var(--surface-overlay);--calendar-border-color:var(--border-default);--calendar-day-color:var(--text-soft);--calendar-day-disabled-color:var(--text-subtle);--calendar-day-hover-background-color:var(--control-hover);--calendar-day-selected-background-color:var(--tone-accent-solid);--calendar-day-selected-color:var(--tone-accent-on-solid);--calendar-day-today-border-color:var(--tone-accent-mark);--calendar-day-weekend-color:var(--text-muted);--calendar-header-background-color:var(--surface-raised-alt);--calendar-header-color:var(--text-strong);--chip-hover-background-color:var(--surface-hover);--chip-hover-border-color:var(--border-strong);--chip-hover-color:var(--text-strong);--chip-selected-background-color:var(--selected-bg);--chip-selected-border-color:var(--selected-border);--chip-selected-color:var(--selected-fg);--chip-selected-count-color:color-mix(in oklab, var(--selected-fg) 72%, transparent);--list-alternate-background-color:var(--surface-stripe);--list-hover-background-color:var(--surface-hover);--tabs-active-background-color:var(--selected-bg);--tabs-active-color:var(--selected-fg);--tabs-inactive-background-color:transparent;--tabs-inactive-color:var(--text-muted);--tooltip-background-color:var(--tone-neutral-solid);--tooltip-border-color:var(--tone-neutral-solid);--tooltip-color:var(--tone-neutral-on-solid);--popover-background-color:var(--surface-overlay);--popover-border-color:var(--border-default);--popover-color:var(--text-default);--popover-arrow-color:var(--border-default);--loader-border-color:var(--tone-accent-soft);--loader-border-top-color:var(--tone-accent-mark);--tour-hud-accent-color:var(--tone-accent-mark);--note-container-effect-background-color:var(--tone-accent-soft);--note-container-effect-color:var(--tone-accent-on-soft);--note-container-effect-border-left-color:var(--tone-accent-mark);--glow-box-shadow-color:0 0 16px color-mix(in oklab, var(--tone-accent-mark) 45%, transparent);--glow-hover-border-color:var(--tone-accent-border);--infuse-effect-before-background:linear-gradient(90deg, var(--tone-accent-mark), var(--accent-glow));--infuse-effect-hover-border-color:var(--tone-accent-mark);--infuse-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent);--up-lift-effect-before-background:linear-gradient(135deg, var(--tone-accent-mark), var(--accent-glow));--up-lift-effect-box-shadow-color:var(--shadow-color-strong);--up-lift-effect-hover-border-color:var(--tone-accent-mark);--up-lift-effect-hover-box-shadow-color:color-mix(in oklab, var(--tone-accent-mark) 35%, transparent)}
|
|
2
|
+
/*
|
|
3
|
+
* Component recipes for the authored themes. Badge and Chip take a tone and one shared set
|
|
4
|
+
* of roles (soft background, ink on soft, border), so a "success" badge, a selected
|
|
5
|
+
* "success" chip and a success toast carry the same three colours.
|
|
6
|
+
*
|
|
7
|
+
* These rules sit here rather than in @memobit/libs while the classic themes still drive
|
|
8
|
+
* the same components. Once the classic themes are retired they move into the lib.
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
[data-theme='cookbook-slate'] .badge-variant--default {
|
|
12
|
+
--recipe-soft: var(--tone-neutral-soft);
|
|
13
|
+
--recipe-soft-hover: var(--tone-neutral-soft-hover);
|
|
14
|
+
--recipe-on-soft: var(--tone-neutral-on-soft);
|
|
15
|
+
--recipe-border: var(--tone-neutral-border);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--info, .chip--info) {
|
|
19
|
+
--recipe-soft: var(--tone-accent-soft);
|
|
20
|
+
--recipe-soft-hover: var(--tone-accent-soft-hover);
|
|
21
|
+
--recipe-on-soft: var(--tone-accent-on-soft);
|
|
22
|
+
--recipe-border: var(--tone-accent-border);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--success, .chip--success) {
|
|
26
|
+
--recipe-soft: var(--tone-success-soft);
|
|
27
|
+
--recipe-soft-hover: var(--tone-success-soft-hover);
|
|
28
|
+
--recipe-on-soft: var(--tone-success-on-soft);
|
|
29
|
+
--recipe-border: var(--tone-success-border);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--warning, .chip--warning) {
|
|
33
|
+
--recipe-soft: var(--tone-warning-soft);
|
|
34
|
+
--recipe-soft-hover: var(--tone-warning-soft-hover);
|
|
35
|
+
--recipe-on-soft: var(--tone-warning-on-soft);
|
|
36
|
+
--recipe-border: var(--tone-warning-border);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
[data-theme='cookbook-slate'] :is(.badge-variant--danger, .chip--danger) {
|
|
40
|
+
--recipe-soft: var(--tone-danger-soft);
|
|
41
|
+
--recipe-soft-hover: var(--tone-danger-soft-hover);
|
|
42
|
+
--recipe-on-soft: var(--tone-danger-on-soft);
|
|
43
|
+
--recipe-border: var(--tone-danger-border);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-theme='cookbook-slate']
|
|
47
|
+
.badge:is(.badge-variant--default, .badge-variant--info, .badge-variant--success, .badge-variant--warning, .badge-variant--danger) {
|
|
48
|
+
border-color: var(--recipe-border);
|
|
49
|
+
background-color: var(--recipe-soft);
|
|
50
|
+
color: var(--recipe-on-soft);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger) {
|
|
54
|
+
border-color: var(--border-default);
|
|
55
|
+
background: transparent;
|
|
56
|
+
color: var(--text-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger):hover:not(:disabled) {
|
|
60
|
+
border-color: var(--recipe-border);
|
|
61
|
+
background: var(--surface-hover);
|
|
62
|
+
color: var(--text-strong);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected {
|
|
66
|
+
border-color: var(--recipe-border);
|
|
67
|
+
background: var(--recipe-soft);
|
|
68
|
+
color: var(--recipe-on-soft);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
[data-theme='cookbook-slate'] .chip:is(.chip--default, .chip--info, .chip--success, .chip--warning, .chip--danger).chip--selected:hover:not(:disabled) {
|
|
72
|
+
border-color: var(--recipe-border);
|
|
73
|
+
background: var(--recipe-soft-hover);
|
|
74
|
+
color: var(--recipe-on-soft);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* A default chip carries no tone, so its selected state is the theme's selection style. */
|
|
78
|
+
[data-theme='cookbook-slate'] .chip.chip--default {
|
|
79
|
+
--recipe-soft: var(--selected-bg);
|
|
80
|
+
--recipe-soft-hover: var(--selected-bg-hover);
|
|
81
|
+
--recipe-on-soft: var(--selected-fg);
|
|
82
|
+
--recipe-border: var(--selected-border);
|
|
83
|
+
}
|