@gryt/ui 0.14.0 → 0.15.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/dist/theme.js CHANGED
@@ -1,1078 +1,2 @@
1
- function G(r) {
2
- return r <= 0.04045 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
3
- }
4
- function k(r) {
5
- return r <= 31308e-7 ? 12.92 * r : 1.055 * r ** (1 / 2.4) - 0.055;
6
- }
7
- function p(r) {
8
- return Math.min(1, Math.max(0, r));
9
- }
10
- function x(r) {
11
- const a = r.replace("#", ""), t = a.length === 3 ? a.split("").map((e) => e + e).join("") : a;
12
- return [
13
- parseInt(t.slice(0, 2), 16) / 255,
14
- parseInt(t.slice(2, 4), 16) / 255,
15
- parseInt(t.slice(4, 6), 16) / 255
16
- ];
17
- }
18
- function N([r, a, t]) {
19
- const e = (s) => Math.round(p(s) * 255).toString(16).padStart(2, "0");
20
- return `#${e(r)}${e(a)}${e(t)}`;
21
- }
22
- function R(r) {
23
- const [a, t, e] = x(r).map(G), s = Math.cbrt(
24
- 0.4122214708 * a + 0.5363325363 * t + 0.0514459929 * e
25
- ), c = Math.cbrt(
26
- 0.2119034982 * a + 0.6806995451 * t + 0.1073969566 * e
27
- ), n = Math.cbrt(
28
- 0.0883024619 * a + 0.2817188376 * t + 0.6299787005 * e
29
- ), f = 0.2104542553 * s + 0.793617785 * c - 0.0040720468 * n, d = 1.9779984951 * s - 2.428592205 * c + 0.4505937099 * n, g = 0.0259040371 * s + 0.7827717662 * c - 0.808675766 * n;
30
- return {
31
- l: f,
32
- c: Math.hypot(d, g),
33
- h: (Math.atan2(g, d) * 180 / Math.PI + 360) % 360
34
- };
35
- }
36
- function y({ l: r, c: a, h: t }) {
37
- const e = a * Math.cos(t * Math.PI / 180), s = a * Math.sin(t * Math.PI / 180), c = (r + 0.3963377774 * e + 0.2158037573 * s) ** 3, n = (r - 0.1055613458 * e - 0.0638541728 * s) ** 3, f = (r - 0.0894841775 * e - 1.291485548 * s) ** 3;
38
- return N([
39
- k(p(4.0767416621 * c - 3.3077115913 * n + 0.2309699292 * f)),
40
- k(p(-1.2684380046 * c + 2.6097574011 * n - 0.3413193965 * f)),
41
- k(p(-0.0041960863 * c - 0.7034186147 * n + 1.707614701 * f))
42
- ]);
43
- }
44
- const F = [0.195, 0.24, 0.27, 0.3, 0.33, 0.37, 0.43, 0.52], W = [0.014, 0.026, 0.04, 0.052, 0.062, 0.072, 0.084, 0.1];
45
- function h(r, a) {
46
- const { h: t } = R(r), e = F.map((f, d) => y({ l: f, c: W[d], h: t }));
47
- e.push(r, a);
48
- const s = R(a).l, c = Math.min(0.95, Math.max(0.84, s + 0.04)), n = Math.min(0.98, Math.max(c + 0.06, 0.93));
49
- return e.push(y({ l: c, c: 0.11, h: t })), e.push(y({ l: n, c: 0.055, h: t })), e;
50
- }
51
- const B = [
52
- 0.187,
53
- 0.231,
54
- 0.245,
55
- 0.268,
56
- 0.289,
57
- 0.31,
58
- 0.355,
59
- 0.425,
60
- 0.52,
61
- 0.57,
62
- 0.627,
63
- 0.908
64
- ], K = [
65
- 0.011,
66
- 0.014,
67
- 0.016,
68
- 0.019,
69
- 0.022,
70
- 0.024,
71
- 0.026,
72
- 0.026,
73
- 0.02,
74
- 0.012,
75
- 0,
76
- 8e-3
77
- ];
78
- function I(r) {
79
- const a = {
80
- 0: r.bg,
81
- 1: r.surface,
82
- 2: r.surfaceRaised,
83
- 5: r.border,
84
- 10: r.muted,
85
- 11: r.text
86
- }, t = R(r.border).h;
87
- return B.map(
88
- (e, s) => a[s] ?? y({ l: e, c: K[s], h: t })
89
- );
90
- }
91
- function w(r, a) {
92
- const t = x(a);
93
- return r.map((e) => {
94
- const s = x(e);
95
- let c = 0;
96
- for (let u = 0; u < 3; u++) {
97
- const i = s[u], m = t[u];
98
- i > m ? c = Math.max(c, m < 1 ? (i - m) / (1 - m) : 0) : i < m && (c = Math.max(c, m > 0 ? (m - i) / m : 0));
99
- }
100
- if (c < 1e-6) return "transparent";
101
- const n = N(
102
- s.map((u, i) => p(t[i] + (u - t[i]) / c))
103
- ), [f, d, g] = x(n).map((u) => Math.round(u * 255));
104
- return `rgb(${f} ${d} ${g} / ${(c * 100).toFixed(1)}%)`;
105
- });
106
- }
107
- const q = [
108
- 0.962,
109
- 1,
110
- 0.978,
111
- 0.952,
112
- 0.928,
113
- 0.898,
114
- 0.855,
115
- 0.79,
116
- 0.66,
117
- 0.61,
118
- 0.48,
119
- 0.25
120
- ], J = [
121
- 6e-3,
122
- 0,
123
- 4e-3,
124
- 7e-3,
125
- 0.01,
126
- 0.013,
127
- 0.016,
128
- 0.018,
129
- 0.016,
130
- 0.014,
131
- 0.012,
132
- 0.014
133
- ], X = [0.975, 0.955, 0.93, 0.905, 0.878, 0.845, 0.795, 0.72], Q = [0.012, 0.024, 0.038, 0.05, 0.062, 0.074, 0.09, 0.11];
134
- function U(r) {
135
- const a = {
136
- 0: r.bg,
137
- 1: r.surface,
138
- 2: r.surfaceRaised,
139
- 5: r.border,
140
- 10: r.muted,
141
- 11: r.text
142
- }, t = R(r.border).h;
143
- return q.map(
144
- (e, s) => a[s] ?? y({ l: e, c: J[s], h: t })
145
- );
146
- }
147
- function b(r) {
148
- const { l: a, c: t, h: e } = R(r), s = X.map(
149
- (c, n) => y({ l: c, c: Q[n], h: e })
150
- );
151
- return s.push(r), s.push(y({ l: Math.max(0, a - 0.07), c: t, h: e })), s.push(y({ l: 0.46, c: 0.15, h: e })), s.push(y({ l: 0.33, c: 0.1, h: e })), s;
152
- }
153
- function E(r) {
154
- const [a, t, e] = x(r).map(G);
155
- return 0.2126 * a + 0.7152 * t + 0.0722 * e;
156
- }
157
- function oe(r, a) {
158
- const t = E(r), e = E(a);
159
- return (Math.max(t, e) + 0.05) / (Math.min(t, e) + 0.05);
160
- }
161
- const o = {
162
- color: {
163
- bg: "#111318",
164
- surface: "#1a1d24",
165
- surfaceRaised: "#1e2028",
166
- surfaceHover: "#334155",
167
- border: "#2b303d",
168
- text: "#e0e0e6",
169
- muted: "#888888",
170
- accent: "#968ff8",
171
- accentLight: "#b4afff",
172
- secondary: "#7dd3fc",
173
- secondaryLight: "#bae6fd",
174
- success: "#4ade80",
175
- danger: "#f87171",
176
- dangerLight: "#fca5a5",
177
- warning: "#fbbf24",
178
- // The fill's own hue, dark enough to clear 7:1 against it. See the note in
179
- // theme.css: these are the only text in the library that always sits on a
180
- // saturated colour, so they are held to AAA rather than AA.
181
- onAccent: "#0c0a20",
182
- onSecondary: "#02121a",
183
- onDanger: "#1f0405"
184
- },
185
- radius: {
186
- sm: 8,
187
- md: 12,
188
- lg: 20,
189
- xl: 28,
190
- full: 999
191
- }
192
- }, l = {
193
- bg: "#f1f2f7",
194
- surface: "#ffffff",
195
- surfaceRaised: "#f7f8fb",
196
- border: "#dadde6",
197
- muted: "#5b5d65",
198
- text: "#1f2129"
199
- }, _ = {
200
- neutral: I({
201
- bg: o.color.bg,
202
- surface: o.color.surface,
203
- surfaceRaised: o.color.surfaceRaised,
204
- border: o.color.border,
205
- muted: o.color.muted,
206
- text: o.color.text
207
- }),
208
- accent: h(o.color.accent, o.color.accentLight),
209
- secondary: h(
210
- o.color.secondary,
211
- o.color.secondaryLight
212
- ),
213
- success: h(o.color.success, o.color.success),
214
- danger: h(o.color.danger, o.color.dangerLight),
215
- warning: h(o.color.warning, o.color.warning)
216
- }, T = {
217
- neutral: U(l),
218
- accent: b(o.color.accent),
219
- secondary: b(o.color.secondary),
220
- success: b(o.color.success),
221
- danger: b(o.color.danger),
222
- warning: b(o.color.warning)
223
- }, C = T.neutral[3], se = {
224
- neutral: w(_.neutral, o.color.bg),
225
- accent: w(_.accent, o.color.bg)
226
- }, fe = {
227
- neutral: w(T.neutral, l.bg),
228
- accent: w(T.accent, l.bg)
229
- };
230
- function de(r = {}) {
231
- const a = r.appearance === "light", e = { ...a ? {
232
- ...o.color,
233
- ...l,
234
- surfaceHover: C
235
- } : o.color, ...r.color }, s = { ...o.radius, ...r.radius }, c = {
236
- bg: e.bg,
237
- surface: e.surface,
238
- surfaceRaised: e.surfaceRaised,
239
- border: e.border,
240
- muted: e.muted,
241
- text: e.text
242
- }, n = a ? {
243
- neutral: U(c),
244
- accent: b(e.accent),
245
- secondary: b(e.secondary),
246
- success: b(e.success),
247
- danger: b(e.danger),
248
- warning: b(e.warning)
249
- } : {
250
- neutral: I(c),
251
- accent: h(e.accent, e.accentLight),
252
- secondary: h(e.secondary, e.secondaryLight),
253
- success: h(e.success, e.success),
254
- danger: h(e.danger, e.dangerLight),
255
- warning: h(e.warning, e.warning)
256
- }, f = {};
257
- for (const [d, g] of Object.entries(n))
258
- g.forEach((u, i) => {
259
- f[`--gryt-${d}-${i + 1}`] = u, f[`--color-gryt-${d}-${i + 1}`] = u;
260
- });
261
- for (const d of ["neutral", "accent"])
262
- w(n[d], e.bg).forEach((g, u) => {
263
- f[`--gryt-${d}-a${u + 1}`] = g, f[`--color-gryt-${d}-a${u + 1}`] = g;
264
- });
265
- return {
266
- ...f,
267
- "--gryt-bg": e.bg,
268
- "--gryt-surface": e.surface,
269
- "--gryt-surface-raised": e.surfaceRaised,
270
- "--gryt-surface-hover": e.surfaceHover,
271
- "--gryt-border": e.border,
272
- "--gryt-text": e.text,
273
- "--gryt-muted": e.muted,
274
- "--gryt-accent": e.accent,
275
- "--gryt-accent-light": e.accentLight,
276
- "--gryt-secondary": e.secondary,
277
- "--gryt-secondary-light": e.secondaryLight,
278
- "--gryt-success": e.success,
279
- "--gryt-danger": e.danger,
280
- "--gryt-danger-light": e.dangerLight,
281
- "--gryt-warning": e.warning,
282
- "--gryt-on-accent": e.onAccent,
283
- "--gryt-on-secondary": e.onSecondary,
284
- "--gryt-on-danger": e.onDanger,
285
- // Tailwind's @theme emits --color-* names, and the utilities compile
286
- // against those. Both sets have to move together or an override would
287
- // change the raw var but not bg-gryt-accent.
288
- "--color-gryt-bg": e.bg,
289
- "--color-gryt-surface": e.surface,
290
- "--color-gryt-surface-raised": e.surfaceRaised,
291
- "--color-gryt-surface-hover": e.surfaceHover,
292
- "--color-gryt-border": e.border,
293
- "--color-gryt-text": e.text,
294
- "--color-gryt-muted": e.muted,
295
- "--color-gryt-accent": e.accent,
296
- "--color-gryt-accent-light": e.accentLight,
297
- "--color-gryt-secondary": e.secondary,
298
- "--color-gryt-secondary-light": e.secondaryLight,
299
- "--color-gryt-success": e.success,
300
- "--color-gryt-danger": e.danger,
301
- "--color-gryt-danger-light": e.dangerLight,
302
- "--color-gryt-warning": e.warning,
303
- "--color-gryt-on-accent": e.onAccent,
304
- "--color-gryt-on-secondary": e.onSecondary,
305
- "--color-gryt-on-danger": e.onDanger,
306
- "--gryt-radius-sm": `${s.sm}px`,
307
- "--gryt-radius-md": `${s.md}px`,
308
- "--gryt-radius-lg": `${s.lg}px`,
309
- "--gryt-radius-xl": `${s.xl}px`,
310
- "--gryt-radius-full": `${s.full}px`
311
- };
312
- }
313
- const S = [
314
- "accent",
315
- "accentLight",
316
- "secondary",
317
- "secondaryLight",
318
- "success",
319
- "danger",
320
- "dangerLight",
321
- "warning",
322
- "onAccent",
323
- "onSecondary",
324
- "onDanger"
325
- ], O = [
326
- "bg",
327
- "surface",
328
- "surfaceRaised",
329
- "surfaceHover",
330
- "border",
331
- "muted",
332
- "text"
333
- ], M = ["sm", "md", "lg", "xl", "full"], V = 60;
334
- function $(r) {
335
- return r.replace(/\s+/g, " ").trim().slice(0, V);
336
- }
337
- const L = {
338
- hue: {
339
- accent: o.color.accent,
340
- accentLight: o.color.accentLight,
341
- secondary: o.color.secondary,
342
- secondaryLight: o.color.secondaryLight,
343
- success: o.color.success,
344
- danger: o.color.danger,
345
- dangerLight: o.color.dangerLight,
346
- warning: o.color.warning,
347
- onAccent: o.color.onAccent,
348
- onSecondary: o.color.onSecondary,
349
- onDanger: o.color.onDanger
350
- },
351
- lightHue: null,
352
- dark: {
353
- bg: o.color.bg,
354
- surface: o.color.surface,
355
- surfaceRaised: o.color.surfaceRaised,
356
- surfaceHover: o.color.surfaceHover,
357
- border: o.color.border,
358
- muted: o.color.muted,
359
- text: o.color.text
360
- },
361
- light: {
362
- bg: l.bg,
363
- surface: l.surface,
364
- surfaceRaised: l.surfaceRaised,
365
- surfaceHover: C,
366
- border: l.border,
367
- muted: l.muted,
368
- text: l.text
369
- },
370
- radius: { ...o.radius }
371
- };
372
- function j(r) {
373
- return {
374
- ...r.name === void 0 ? {} : { name: r.name },
375
- hue: { ...r.hue },
376
- lightHue: r.lightHue === null ? null : { ...r.lightHue },
377
- dark: { ...r.dark },
378
- light: { ...r.light },
379
- radius: { ...r.radius }
380
- };
381
- }
382
- function Z(r, a) {
383
- return a === "light" && r.lightHue !== null ? r.lightHue : r.hue;
384
- }
385
- function ue(r, a) {
386
- return {
387
- appearance: a,
388
- color: { ...Z(r, a), ...r[a] },
389
- radius: { ...r.radius }
390
- };
391
- }
392
- const H = {
393
- accent: "accent",
394
- accentLight: "accent-light",
395
- secondary: "secondary",
396
- secondaryLight: "secondary-light",
397
- success: "success",
398
- danger: "danger",
399
- dangerLight: "danger-light",
400
- warning: "warning",
401
- onAccent: "on-accent",
402
- onSecondary: "on-secondary",
403
- onDanger: "on-danger"
404
- }, Y = {
405
- bg: "bg",
406
- surface: "surface",
407
- surfaceRaised: "raised",
408
- surfaceHover: "hover",
409
- border: "border",
410
- muted: "muted",
411
- text: "text"
412
- }, ee = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
413
- function z(r) {
414
- return ee.test(r.trim());
415
- }
416
- function D(r) {
417
- const a = r.trim().toLowerCase();
418
- return a.length === 4 ? `#${a[1]}${a[1]}${a[2]}${a[2]}${a[3]}${a[3]}` : a;
419
- }
420
- function ge(r, a) {
421
- const t = new URLSearchParams(), e = (c) => D(c).slice(1), s = $(r.name ?? "");
422
- s !== "" && t.set("name", s);
423
- for (const c of S)
424
- r.hue[c] !== L.hue[c] && t.set(H[c], e(r.hue[c]));
425
- if (r.lightHue !== null)
426
- for (const c of S)
427
- t.set(`lh-${H[c]}`, e(r.lightHue[c]));
428
- for (const c of ["dark", "light"]) {
429
- const n = c === "dark" ? "d" : "l";
430
- for (const f of O)
431
- r[c][f] !== L[c][f] && t.set(`${n}-${Y[f]}`, e(r[c][f]));
432
- }
433
- for (const c of M)
434
- r.radius[c] !== L.radius[c] && t.set(`r-${c}`, String(r.radius[c]));
435
- return a === "light" && t.set("mode", "light"), t;
436
- }
437
- function ie(r) {
438
- const a = r.trim();
439
- if (a === "") return null;
440
- if (a.startsWith("{")) return ae(a);
441
- const t = a.includes("?") ? a.slice(a.indexOf("?") + 1) : a;
442
- return re(new URLSearchParams(t));
443
- }
444
- function re(r) {
445
- const a = j(L);
446
- let t = !1;
447
- const e = (c) => {
448
- const n = r.get(c);
449
- if (n === null) return null;
450
- const f = n.startsWith("#") ? n : `#${n}`;
451
- return z(f) ? (t = !0, D(f)) : null;
452
- }, s = $(r.get("name") ?? "");
453
- s !== "" && (a.name = s, t = !0);
454
- for (const c of S) {
455
- const n = e(H[c]);
456
- n !== null && (a.hue[c] = n);
457
- }
458
- if (r.has(`lh-${H.accent}`)) {
459
- const c = { ...a.hue };
460
- for (const n of S) {
461
- const f = e(`lh-${H[n]}`);
462
- f !== null && (c[n] = f);
463
- }
464
- a.lightHue = c;
465
- }
466
- for (const c of ["dark", "light"]) {
467
- const n = c === "dark" ? "d" : "l";
468
- for (const f of O) {
469
- const d = e(`${n}-${Y[f]}`);
470
- d !== null && (a[c][f] = d);
471
- }
472
- }
473
- for (const c of M) {
474
- const n = Number(r.get(`r-${c}`));
475
- Number.isFinite(n) && n >= 0 && n <= 999 && r.has(`r-${c}`) && (a.radius[c] = Math.round(n), t = !0);
476
- }
477
- return t ? {
478
- theme: a,
479
- appearance: r.get("mode") === "light" ? "light" : "dark"
480
- } : null;
481
- }
482
- function ae(r) {
483
- let a;
484
- try {
485
- a = JSON.parse(r);
486
- } catch {
487
- return null;
488
- }
489
- if (typeof a != "object" || a === null) return null;
490
- const t = a, e = j(L);
491
- let s = !1;
492
- const c = (n, f) => {
493
- if (!(typeof n != "object" || n === null))
494
- for (const [d, g] of Object.entries(n))
495
- typeof g == "string" && z(g) && d in f && (f[d] = D(g), s = !0);
496
- };
497
- if (typeof t.name == "string") {
498
- const n = $(t.name);
499
- n !== "" && (e.name = n, s = !0);
500
- }
501
- if (c(t.hue, e.hue), c(t.dark, e.dark), c(t.light, e.light), typeof t.lightHue == "object" && t.lightHue !== null) {
502
- const n = { ...e.hue };
503
- c(t.lightHue, n), e.lightHue = n;
504
- }
505
- if (typeof t.radius == "object" && t.radius !== null)
506
- for (const [n, f] of Object.entries(
507
- t.radius
508
- )) {
509
- const d = Number(f);
510
- M.includes(n) && Number.isFinite(d) && d >= 0 && d <= 999 && (e.radius[n] = Math.round(d), s = !0);
511
- }
512
- return s ? { theme: e, appearance: "dark" } : null;
513
- }
514
- const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg: 14, xl: 18, full: 999 }, ce = { sm: 4, md: 6, lg: 10, xl: 14, full: 6 }, te = { sm: 6, md: 8, lg: 10, xl: 14, full: 10 }, P = { sm: 2, md: 4, lg: 6, xl: 8, full: 4 }, ne = [
515
- {
516
- id: "gryt",
517
- name: "Gryt",
518
- note: "What the library ships, from the Gryt code-theme.",
519
- group: "Gryt",
520
- source: "github.com/Gryt-chat/code-theme",
521
- theme: L
522
- },
523
- {
524
- id: "ember",
525
- name: "Ember",
526
- note: "Warm all the way down — the neutrals are brown, not blue.",
527
- group: "Gryt",
528
- theme: {
529
- name: "Ember",
530
- hue: {
531
- accent: "#f0803c",
532
- accentLight: "#ff9f66",
533
- secondary: "#d9a441",
534
- secondaryLight: "#ecc06a",
535
- success: "#8bb056",
536
- danger: "#e35d55",
537
- dangerLight: "#ef8079",
538
- warning: "#e8b33e",
539
- onAccent: "#231004",
540
- onSecondary: "#241a04",
541
- onDanger: "#2b0a08"
542
- },
543
- lightHue: null,
544
- dark: {
545
- bg: "#17110e",
546
- surface: "#1f1815",
547
- surfaceRaised: "#251d19",
548
- surfaceHover: "#33261f",
549
- border: "#352822",
550
- muted: "#a48f81",
551
- text: "#f5ece5"
552
- },
553
- light: {
554
- bg: "#f6efe8",
555
- surface: "#fffdfb",
556
- surfaceRaised: "#faf3ec",
557
- surfaceHover: "#efe3d8",
558
- border: "#e0d2c4",
559
- muted: "#6b5b50",
560
- text: "#241a14"
561
- },
562
- radius: A
563
- }
564
- },
565
- {
566
- id: "paper",
567
- name: "Paper",
568
- note: "Near-monochrome. One quiet slate accent and nothing else.",
569
- group: "Gryt",
570
- theme: {
571
- name: "Paper",
572
- hue: {
573
- accent: "#8390a8",
574
- accentLight: "#a3aec2",
575
- secondary: "#93a0a0",
576
- secondaryLight: "#b1bcbc",
577
- success: "#7f9b7f",
578
- danger: "#b56b6b",
579
- dangerLight: "#c98d8d",
580
- warning: "#b39a6a",
581
- onAccent: "#11151c",
582
- onSecondary: "#121717",
583
- onDanger: "#1d0e0e"
584
- },
585
- lightHue: null,
586
- dark: {
587
- bg: "#101011",
588
- surface: "#17171a",
589
- surfaceRaised: "#1d1d20",
590
- surfaceHover: "#282a2e",
591
- border: "#2a2a2e",
592
- muted: "#8e8e94",
593
- text: "#ededf0"
594
- },
595
- light: {
596
- bg: "#f0f0f2",
597
- surface: "#ffffff",
598
- surfaceRaised: "#f7f7f9",
599
- surfaceHover: "#e6e6ea",
600
- border: "#d6d6dc",
601
- muted: "#5b5b63",
602
- text: "#17171a"
603
- },
604
- radius: v
605
- }
606
- },
607
- {
608
- id: "signal",
609
- name: "Signal",
610
- note: "Black, white, and a yellow that cannot be missed.",
611
- group: "Gryt",
612
- theme: {
613
- name: "Signal",
614
- hue: {
615
- accent: "#ffd400",
616
- accentLight: "#ffe454",
617
- secondary: "#00d0ff",
618
- secondaryLight: "#66e2ff",
619
- success: "#00e06a",
620
- danger: "#ff453a",
621
- dangerLight: "#ff7a72",
622
- warning: "#ffab00",
623
- onAccent: "#161200",
624
- onSecondary: "#001a20",
625
- onDanger: "#1a0300"
626
- },
627
- lightHue: null,
628
- dark: {
629
- bg: "#000000",
630
- surface: "#0c0c0c",
631
- surfaceRaised: "#151515",
632
- surfaceHover: "#242424",
633
- border: "#454545",
634
- muted: "#bcbcbc",
635
- text: "#ffffff"
636
- },
637
- light: {
638
- bg: "#f0f0f0",
639
- surface: "#ffffff",
640
- surfaceRaised: "#f8f8f8",
641
- surfaceHover: "#e3e3e3",
642
- border: "#6f6f6f",
643
- muted: "#3d3d3d",
644
- text: "#000000"
645
- },
646
- radius: P
647
- }
648
- },
649
- {
650
- /* Dracula's eleven, and Alucard's eleven for the light half, from the
651
- palette tables in dracula/dracula-theme. Background, Current Line,
652
- Foreground and Comment are exact; the two steps between Background and
653
- Current Line are derived, because Dracula does not name them. */
654
- id: "dracula",
655
- name: "Dracula",
656
- note: "The purple-and-pink dark theme, with Alucard as its light half.",
657
- group: "Ported",
658
- source: "draculatheme.com, MIT",
659
- theme: {
660
- name: "Dracula",
661
- hue: {
662
- accent: "#bd93f9",
663
- accentLight: "#d0b3fb",
664
- secondary: "#8be9fd",
665
- secondaryLight: "#aff0fe",
666
- success: "#50fa7b",
667
- danger: "#ff5555",
668
- dangerLight: "#ff7979",
669
- warning: "#ffb86c",
670
- onAccent: "#282a36",
671
- onSecondary: "#282a36",
672
- onDanger: "#282a36"
673
- },
674
- lightHue: {
675
- accent: "#644ac9",
676
- accentLight: "#7b64d6",
677
- secondary: "#036a96",
678
- secondaryLight: "#0b83b5",
679
- success: "#14710a",
680
- danger: "#cb3a2a",
681
- dangerLight: "#d95445",
682
- warning: "#a34d14",
683
- onAccent: "#fffbeb",
684
- onSecondary: "#fffbeb",
685
- onDanger: "#fffbeb"
686
- },
687
- dark: {
688
- bg: "#282a36",
689
- surface: "#31323f",
690
- surfaceRaised: "#383a49",
691
- surfaceHover: "#44475a",
692
- border: "#44475a",
693
- muted: "#6272a4",
694
- text: "#f8f8f2"
695
- },
696
- light: {
697
- bg: "#f5f1e1",
698
- surface: "#fffbeb",
699
- surfaceRaised: "#faf6e6",
700
- surfaceHover: "#ece7d4",
701
- border: "#dcd6bf",
702
- muted: "#6c664b",
703
- text: "#1f1f1f"
704
- },
705
- radius: v
706
- }
707
- },
708
- {
709
- /* nord0-nord15, exactly as nordtheme.com publishes them. Polar Night is
710
- the dark neutrals, Snow Storm the light ones, Frost the accents and
711
- Aurora the status colours. Nothing here is derived. */
712
- id: "nord",
713
- name: "Nord",
714
- note: "Polar Night and Snow Storm, with Frost on top.",
715
- group: "Ported",
716
- source: "nordtheme.com, MIT",
717
- theme: {
718
- name: "Nord",
719
- hue: {
720
- accent: "#88c0d0",
721
- accentLight: "#8fbcbb",
722
- secondary: "#81a1c1",
723
- secondaryLight: "#a3b8d4",
724
- success: "#a3be8c",
725
- danger: "#bf616a",
726
- dangerLight: "#d08770",
727
- warning: "#ebcb8b",
728
- onAccent: "#2e3440",
729
- onSecondary: "#2e3440",
730
- onDanger: "#eceff4"
731
- },
732
- lightHue: {
733
- accent: "#5e81ac",
734
- accentLight: "#81a1c1",
735
- secondary: "#8fbcbb",
736
- secondaryLight: "#88c0d0",
737
- success: "#a3be8c",
738
- danger: "#bf616a",
739
- dangerLight: "#d08770",
740
- warning: "#ebcb8b",
741
- onAccent: "#eceff4",
742
- onSecondary: "#2e3440",
743
- onDanger: "#eceff4"
744
- },
745
- dark: {
746
- bg: "#2e3440",
747
- surface: "#3b4252",
748
- surfaceRaised: "#434c5e",
749
- surfaceHover: "#4c566a",
750
- border: "#4c566a",
751
- muted: "#d8dee9",
752
- text: "#eceff4"
753
- },
754
- light: {
755
- bg: "#e5e9f0",
756
- surface: "#eceff4",
757
- surfaceRaised: "#e9edf2",
758
- surfaceHover: "#d8dee9",
759
- border: "#c9d1de",
760
- muted: "#4c566a",
761
- text: "#2e3440"
762
- },
763
- radius: v
764
- }
765
- },
766
- {
767
- /* Mocha and Latte from catppuccin/palette's palette.json. base, mantle,
768
- surface0/1/2, text and subtext0 are exact; the border step is derived
769
- from surface1 and surface2, which is where a border sits in their own
770
- ports. */
771
- id: "catppuccin",
772
- name: "Catppuccin",
773
- note: "Mocha for dark, Latte for light. Mauve does the accent work.",
774
- group: "Ported",
775
- source: "catppuccin/palette, MIT",
776
- theme: {
777
- name: "Catppuccin",
778
- hue: {
779
- accent: "#cba6f7",
780
- accentLight: "#dcc0fa",
781
- secondary: "#89b4fa",
782
- secondaryLight: "#a8c8fb",
783
- success: "#a6e3a1",
784
- danger: "#f38ba8",
785
- dangerLight: "#eba0ac",
786
- warning: "#f9e2af",
787
- onAccent: "#1e1e2e",
788
- onSecondary: "#1e1e2e",
789
- onDanger: "#1e1e2e"
790
- },
791
- lightHue: {
792
- accent: "#8839ef",
793
- accentLight: "#9a55f2",
794
- secondary: "#1e66f5",
795
- secondaryLight: "#4680f7",
796
- success: "#40a02b",
797
- danger: "#d20f39",
798
- dangerLight: "#e64553",
799
- warning: "#df8e1d",
800
- onAccent: "#eff1f5",
801
- onSecondary: "#eff1f5",
802
- onDanger: "#eff1f5"
803
- },
804
- dark: {
805
- bg: "#1e1e2e",
806
- surface: "#313244",
807
- surfaceRaised: "#45475a",
808
- surfaceHover: "#585b70",
809
- border: "#45475a",
810
- muted: "#a6adc8",
811
- text: "#cdd6f4"
812
- },
813
- light: {
814
- bg: "#e6e9ef",
815
- surface: "#eff1f5",
816
- surfaceRaised: "#eaedf3",
817
- surfaceHover: "#dce0e8",
818
- border: "#ccd0da",
819
- muted: "#6c6f85",
820
- text: "#4c4f69"
821
- },
822
- radius: A
823
- }
824
- },
825
- {
826
- /* Primer's functional tokens, from @primer/primitives' compiled themes:
827
- bgColor-default, bgColor-muted, borderColor-default, fgColor-default,
828
- fgColor-muted, and the -emphasis fills for accent, danger, success,
829
- attention and done. The raised and hover steps are derived — Primer
830
- expresses those as translucent overlays rather than as solid colours. */
831
- id: "github",
832
- name: "GitHub",
833
- note: "Primer's own tokens, six-pixel corners included.",
834
- group: "Ported",
835
- source: "@primer/primitives",
836
- theme: {
837
- name: "GitHub",
838
- hue: {
839
- accent: "#1f6feb",
840
- accentLight: "#4493f8",
841
- secondary: "#8957e5",
842
- secondaryLight: "#a371f7",
843
- success: "#238636",
844
- danger: "#da3633",
845
- dangerLight: "#f85149",
846
- warning: "#9e6a03",
847
- onAccent: "#ffffff",
848
- onSecondary: "#ffffff",
849
- onDanger: "#ffffff"
850
- },
851
- lightHue: {
852
- accent: "#0969da",
853
- accentLight: "#218bff",
854
- secondary: "#8250df",
855
- secondaryLight: "#a475f9",
856
- success: "#1f883d",
857
- danger: "#cf222e",
858
- dangerLight: "#d1242f",
859
- warning: "#9a6700",
860
- onAccent: "#ffffff",
861
- onSecondary: "#ffffff",
862
- onDanger: "#ffffff"
863
- },
864
- dark: {
865
- bg: "#0d1117",
866
- surface: "#151b23",
867
- surfaceRaised: "#1c222b",
868
- surfaceHover: "#262c36",
869
- border: "#3d444d",
870
- muted: "#9198a1",
871
- text: "#f0f6fc"
872
- },
873
- light: {
874
- bg: "#f6f8fa",
875
- surface: "#ffffff",
876
- surfaceRaised: "#fbfcfd",
877
- surfaceHover: "#eef1f4",
878
- border: "#d1d9e0",
879
- muted: "#59636e",
880
- text: "#1f2328"
881
- },
882
- radius: ce
883
- }
884
- },
885
- {
886
- /* Read off anthropic.com's own stylesheet: the clay #d97757, the cream
887
- #f0eee6 and #faf9f5, the ink #141413, and the neutrals #3d3d3a,
888
- #87867f, #b0aea5, #c6c4ba, #e8e6dc. Anthropic publishes no token file,
889
- so the status hues have no published counterpart and are Gryt's own —
890
- this is the one preset that is a likeness rather than a port. */
891
- id: "claude",
892
- name: "Claude",
893
- note: "Anthropic's clay orange on cream and near-black.",
894
- group: "Ported",
895
- source: "anthropic.com — a likeness, not a published palette",
896
- theme: {
897
- name: "Claude",
898
- hue: {
899
- accent: "#d97757",
900
- accentLight: "#e59275",
901
- secondary: "#7d9ec4",
902
- secondaryLight: "#9db8d6",
903
- success: "#6ba368",
904
- danger: "#bf4d43",
905
- dangerLight: "#d4726a",
906
- warning: "#d9a441",
907
- onAccent: "#241009",
908
- onSecondary: "#0c1720",
909
- onDanger: "#faf9f5"
910
- },
911
- lightHue: null,
912
- dark: {
913
- bg: "#141413",
914
- surface: "#1f1e1d",
915
- surfaceRaised: "#262624",
916
- surfaceHover: "#3d3d3a",
917
- border: "#3d3d3a",
918
- muted: "#b0aea5",
919
- text: "#faf9f5"
920
- },
921
- light: {
922
- bg: "#f0eee6",
923
- surface: "#faf9f5",
924
- surfaceRaised: "#f5f3ec",
925
- surfaceHover: "#e8e6dc",
926
- border: "#d5d2c5",
927
- muted: "#87867f",
928
- text: "#141413"
929
- },
930
- radius: A
931
- }
932
- },
933
- {
934
- /* The zinc theme from shadcn-ui/ui's registry, converted from its OKLCH
935
- values. One deliberate departure: shadcn's primary is monochrome —
936
- near-white in dark, near-black in light — which cannot be a Gryt accent,
937
- because the accent is also the colour every link and focus ring is drawn
938
- from. Its destructive red is the accent here, and the neutrals are the
939
- theme's own. */
940
- id: "shadcn",
941
- name: "shadcn/ui",
942
- note: "Zinc neutrals and a ten-pixel radius. No pills anywhere.",
943
- group: "Ported",
944
- source: "ui.shadcn.com, MIT — accent adapted",
945
- theme: {
946
- name: "shadcn/ui",
947
- hue: {
948
- accent: "#a1a1aa",
949
- accentLight: "#d4d4d8",
950
- secondary: "#71717a",
951
- secondaryLight: "#a1a1aa",
952
- success: "#4ade80",
953
- danger: "#e7000b",
954
- dangerLight: "#fb2c36",
955
- warning: "#fd9a00",
956
- onAccent: "#18181b",
957
- onSecondary: "#fafafa",
958
- onDanger: "#fafafa"
959
- },
960
- lightHue: {
961
- accent: "#3f3f46",
962
- accentLight: "#52525b",
963
- secondary: "#71717a",
964
- secondaryLight: "#a1a1aa",
965
- success: "#00a63e",
966
- danger: "#e7000b",
967
- dangerLight: "#fb2c36",
968
- warning: "#e17100",
969
- onAccent: "#fafafa",
970
- onSecondary: "#fafafa",
971
- onDanger: "#fafafa"
972
- },
973
- dark: {
974
- bg: "#18181b",
975
- surface: "#27272a",
976
- surfaceRaised: "#3f3f46",
977
- surfaceHover: "#3f3f46",
978
- border: "#3f3f46",
979
- muted: "#a1a1aa",
980
- text: "#fafafa"
981
- },
982
- light: {
983
- bg: "#f4f4f5",
984
- surface: "#ffffff",
985
- surfaceRaised: "#fafafa",
986
- surfaceHover: "#e4e4e7",
987
- border: "#e4e4e7",
988
- muted: "#71717a",
989
- text: "#18181b"
990
- },
991
- radius: te
992
- }
993
- },
994
- {
995
- /* Ethan Schoonover's sixteen, exactly. base03 and base02 are the dark
996
- page and surface, base2 and base3 the light ones, and the accent hues
997
- are shared between the two halves — which is the whole point of
998
- Solarized. The steps between base03 and base02 are derived. */
999
- id: "solarized",
1000
- name: "Solarized",
1001
- note: "Both halves on one set of accents, as designed.",
1002
- group: "Ported",
1003
- source: "ethanschoonover.com/solarized, MIT",
1004
- theme: {
1005
- name: "Solarized",
1006
- hue: {
1007
- accent: "#268bd2",
1008
- accentLight: "#4ba3e3",
1009
- secondary: "#2aa198",
1010
- secondaryLight: "#43bbb1",
1011
- success: "#859900",
1012
- danger: "#dc322f",
1013
- dangerLight: "#cb4b16",
1014
- warning: "#b58900",
1015
- onAccent: "#fdf6e3",
1016
- onSecondary: "#002b36",
1017
- onDanger: "#fdf6e3"
1018
- },
1019
- lightHue: null,
1020
- dark: {
1021
- bg: "#002b36",
1022
- surface: "#073642",
1023
- surfaceRaised: "#0b414f",
1024
- surfaceHover: "#134b5a",
1025
- border: "#0f4757",
1026
- muted: "#93a1a1",
1027
- text: "#eee8d5"
1028
- },
1029
- light: {
1030
- bg: "#eee8d5",
1031
- surface: "#fdf6e3",
1032
- surfaceRaised: "#f7f0dc",
1033
- surfaceHover: "#e4dcc4",
1034
- border: "#d9d0b4",
1035
- muted: "#586e75",
1036
- text: "#073642"
1037
- },
1038
- radius: P
1039
- }
1040
- }
1041
- ], le = new Map(
1042
- ne.map((r) => [r.id, r])
1043
- );
1044
- export {
1045
- S as GRYT_HUE_KEYS,
1046
- O as GRYT_NEUTRAL_KEYS,
1047
- M as GRYT_RADIUS_KEYS,
1048
- V as GRYT_THEME_NAME_MAX,
1049
- w as alphaScale,
1050
- j as cloneGrytTheme,
1051
- oe as contrast,
1052
- de as createGrytTheme,
1053
- ie as decodeGrytTheme,
1054
- ge as encodeGrytTheme,
1055
- se as grytAlphaScales,
1056
- fe as grytAlphaScalesLight,
1057
- l as grytLightTokens,
1058
- ne as grytPresets,
1059
- le as grytPresetsById,
1060
- _ as grytScales,
1061
- T as grytScalesLight,
1062
- L as grytTheme,
1063
- Z as grytThemeHues,
1064
- ue as grytThemeToOptions,
1065
- o as grytTokens,
1066
- R as hexToOklch,
1067
- x as hexToRgb,
1068
- h as hueScale,
1069
- b as hueScaleLight,
1070
- z as isHexColor,
1071
- I as neutralScale,
1072
- U as neutralScaleLight,
1073
- D as normalizeHexColor,
1074
- $ as normalizeThemeName,
1075
- y as oklchToHex,
1076
- N as rgbToHex
1077
- };
1
+ export * from "@gryt/theme";
1078
2
  //# sourceMappingURL=theme.js.map