@troennes/minium 0.1.1 → 0.3.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 +24 -10
- package/dist/integrations/prism.css +5 -3
- package/dist/minium.css +632 -414
- package/dist/minium.min.css +1 -1
- package/dist/themes/amber.css +128 -0
- package/dist/themes/blue.css +128 -0
- package/dist/themes/bronze.css +100 -0
- package/dist/themes/brown.css +128 -0
- package/dist/themes/crimson.css +159 -0
- package/dist/themes/cyan.css +100 -0
- package/dist/themes/gold.css +100 -0
- package/dist/themes/grass.css +159 -0
- package/dist/themes/gray.css +107 -0
- package/dist/themes/green.css +131 -0
- package/dist/themes/indigo.css +156 -0
- package/dist/themes/iris.css +128 -0
- package/dist/themes/jade.css +160 -0
- package/dist/themes/lime.css +131 -0
- package/dist/themes/mauve.css +107 -0
- package/dist/themes/mint.css +100 -0
- package/dist/themes/olive.css +107 -0
- package/dist/themes/orange.css +100 -0
- package/dist/themes/pink.css +131 -0
- package/dist/themes/plum.css +128 -0
- package/dist/themes/purple.css +100 -0
- package/dist/themes/red.css +131 -0
- package/dist/themes/ruby.css +160 -0
- package/dist/themes/sage.css +107 -0
- package/dist/themes/sand.css +107 -0
- package/dist/themes/sky.css +100 -0
- package/dist/themes/slate.css +135 -0
- package/dist/themes/teal.css +128 -0
- package/dist/themes/tomato.css +131 -0
- package/dist/themes/violet.css +100 -0
- package/dist/themes/yellow.css +159 -0
- package/llms.txt +1072 -0
- package/package.json +9 -4
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
@layer tokens, theme, reset, base, layout, components, project, utilities;
|
|
2
|
+
|
|
3
|
+
/* Theme: sand (neutral: sand, primary: sand, accent: gold). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root {
|
|
6
|
+
/* neutral: sand */
|
|
7
|
+
--neutral-1: light-dark(#fdfdfc, #111110);
|
|
8
|
+
--neutral-2: light-dark(#f9f9f8, #191918);
|
|
9
|
+
--neutral-3: light-dark(#f1f0ef, #222221);
|
|
10
|
+
--neutral-4: light-dark(#e9e8e6, #2a2a28);
|
|
11
|
+
--neutral-5: light-dark(#e2e1de, #31312e);
|
|
12
|
+
--neutral-8: light-dark(#bcbbb5, #62605b);
|
|
13
|
+
--neutral-11: light-dark(#63635e, #b5b3ad);
|
|
14
|
+
--neutral-12: light-dark(#21201c, #eeeeec);
|
|
15
|
+
--neutral-a2: light-dark(#25250007, #f4f4f309);
|
|
16
|
+
--neutral-a3: light-dark(#20100010, #f6f6f513);
|
|
17
|
+
--neutral-a4: light-dark(#1f150019, #fefef31b);
|
|
18
|
+
--neutral-a5: light-dark(#1f180021, #fbfbeb23);
|
|
19
|
+
--neutral-a6: light-dark(#19130029, #fffaed2d);
|
|
20
|
+
--neutral-a7: light-dark(#19140035, #fffbed3c);
|
|
21
|
+
|
|
22
|
+
/* primary: sand */
|
|
23
|
+
--primary-7: light-dark(#cfceca, #494844);
|
|
24
|
+
--primary-9: light-dark(#8d8d86, #6f6d66);
|
|
25
|
+
--primary-10: light-dark(#82827c, #7c7b74);
|
|
26
|
+
--primary-11: light-dark(#63635e, #b5b3ad);
|
|
27
|
+
--primary-a2: light-dark(#25250007, #f4f4f309);
|
|
28
|
+
--primary-a3: light-dark(#20100010, #f6f6f513);
|
|
29
|
+
--primary-a4: light-dark(#1f150019, #fefef31b);
|
|
30
|
+
--primary-a5: light-dark(#1f180021, #fbfbeb23);
|
|
31
|
+
--primary-a6: light-dark(#19130029, #fffaed2d);
|
|
32
|
+
--primary-a7: light-dark(#19140035, #fffbed3c);
|
|
33
|
+
--primary-a11: light-dark(#080800a1, #fffcf4b0);
|
|
34
|
+
--primary-text: var(--primary-11);
|
|
35
|
+
--primary-inverse: white;
|
|
36
|
+
|
|
37
|
+
/* accent: gold */
|
|
38
|
+
--accent-7: light-dark(#cbc0aa, #544f46);
|
|
39
|
+
--accent-9: light-dark(#978365, #978365);
|
|
40
|
+
--accent-10: light-dark(#8c7a5e, #a39073);
|
|
41
|
+
--accent-11: light-dark(#71624b, #cbb99f);
|
|
42
|
+
--accent-a2: light-dark(#9d8a000d, #f9e29d0b);
|
|
43
|
+
--accent-a3: light-dark(#75600018, #f8ecbb15);
|
|
44
|
+
--accent-a4: light-dark(#6b4e0024, #ffeec41e);
|
|
45
|
+
--accent-a5: light-dark(#60460030, #feecc22a);
|
|
46
|
+
--accent-a6: light-dark(#64440040, #feebcb37);
|
|
47
|
+
--accent-a7: light-dark(#63420055, #ffedcd48);
|
|
48
|
+
--accent-a11: light-dark(#362100b4, #fee7c6c8);
|
|
49
|
+
--accent-text: var(--accent-11);
|
|
50
|
+
--accent-inverse: white;
|
|
51
|
+
|
|
52
|
+
/* gray primary */
|
|
53
|
+
--color-primary: var(--neutral-12);
|
|
54
|
+
--color-primary-inverse: var(--neutral-1);
|
|
55
|
+
--color-primary-hover: color-mix(in oklab, var(--neutral-12) 85%, var(--neutral-1));
|
|
56
|
+
--color-primary-text: var(--neutral-12);
|
|
57
|
+
--mark-color: light-dark(var(--accent-a5), var(--accent-a11));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@supports (color: color(display-p3 1 1 1)) {
|
|
61
|
+
@media (color-gamut: p3) {
|
|
62
|
+
:root {
|
|
63
|
+
/* neutral: sand */
|
|
64
|
+
--neutral-1: light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063));
|
|
65
|
+
--neutral-2: light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094));
|
|
66
|
+
--neutral-3: light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129));
|
|
67
|
+
--neutral-4: light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156));
|
|
68
|
+
--neutral-5: light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183));
|
|
69
|
+
--neutral-8: light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357));
|
|
70
|
+
--neutral-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
|
|
71
|
+
--neutral-12: light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926));
|
|
72
|
+
--neutral-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
|
|
73
|
+
--neutral-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
|
|
74
|
+
--neutral-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
|
|
75
|
+
--neutral-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
|
|
76
|
+
--neutral-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
|
|
77
|
+
--neutral-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
|
|
78
|
+
|
|
79
|
+
/* primary: sand */
|
|
80
|
+
--primary-7: light-dark(color(display-p3 0.813 0.81 0.794), color(display-p3 0.285 0.282 0.267));
|
|
81
|
+
--primary-9: light-dark(color(display-p3 0.553 0.553 0.528), color(display-p3 0.434 0.428 0.403));
|
|
82
|
+
--primary-10: light-dark(color(display-p3 0.511 0.511 0.488), color(display-p3 0.487 0.481 0.456));
|
|
83
|
+
--primary-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
|
|
84
|
+
--primary-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
|
|
85
|
+
--primary-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
|
|
86
|
+
--primary-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
|
|
87
|
+
--primary-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
|
|
88
|
+
--primary-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
|
|
89
|
+
--primary-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
|
|
90
|
+
--primary-a11: light-dark(color(display-p3 0.031 0.031 0 / 0.632), color(display-p3 1 0.996 0.961 / 0.685));
|
|
91
|
+
|
|
92
|
+
/* accent: gold */
|
|
93
|
+
--accent-7: light-dark(color(display-p3 0.788 0.753 0.677), color(display-p3 0.327 0.31 0.277));
|
|
94
|
+
--accent-9: light-dark(color(display-p3 0.579 0.517 0.41), color(display-p3 0.579 0.517 0.41));
|
|
95
|
+
--accent-10: light-dark(color(display-p3 0.538 0.479 0.38), color(display-p3 0.628 0.566 0.463));
|
|
96
|
+
--accent-11: light-dark(color(display-p3 0.433 0.386 0.305), color(display-p3 0.784 0.728 0.635));
|
|
97
|
+
--accent-a2: light-dark(color(display-p3 0.592 0.514 0.024 / 0.048), color(display-p3 0.98 0.89 0.616 / 0.043));
|
|
98
|
+
--accent-a3: light-dark(color(display-p3 0.4 0.357 0.012 / 0.091), color(display-p3 1 0.949 0.753 / 0.08));
|
|
99
|
+
--accent-a4: light-dark(color(display-p3 0.357 0.298 0.008 / 0.134), color(display-p3 1 0.933 0.8 / 0.118));
|
|
100
|
+
--accent-a5: light-dark(color(display-p3 0.345 0.282 0.004 / 0.185), color(display-p3 1 0.949 0.804 / 0.16));
|
|
101
|
+
--accent-a6: light-dark(color(display-p3 0.341 0.263 0.004 / 0.244), color(display-p3 1 0.925 0.8 / 0.215));
|
|
102
|
+
--accent-a7: light-dark(color(display-p3 0.345 0.235 0.004 / 0.322), color(display-p3 1 0.945 0.831 / 0.278));
|
|
103
|
+
--accent-a11: light-dark(color(display-p3 0.433 0.386 0.305), color(display-p3 0.784 0.728 0.635));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
@layer tokens, theme, reset, base, layout, components, project, utilities;
|
|
2
|
+
|
|
3
|
+
/* Theme: sky (neutral: slate, primary: sky, accent: pink). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root {
|
|
6
|
+
/* neutral: slate */
|
|
7
|
+
--neutral-1: light-dark(#fcfcfd, #111113);
|
|
8
|
+
--neutral-2: light-dark(#f9f9fb, #18191b);
|
|
9
|
+
--neutral-3: light-dark(#f0f0f3, #212225);
|
|
10
|
+
--neutral-4: light-dark(#e8e8ec, #272a2d);
|
|
11
|
+
--neutral-5: light-dark(#e0e1e6, #2e3135);
|
|
12
|
+
--neutral-8: light-dark(#b9bbc6, #5a6169);
|
|
13
|
+
--neutral-11: light-dark(#60646c, #b0b4ba);
|
|
14
|
+
--neutral-12: light-dark(#1c2024, #edeef0);
|
|
15
|
+
--neutral-a2: light-dark(#00005506, #d8f4f609);
|
|
16
|
+
--neutral-a3: light-dark(#0000330f, #ddeaf814);
|
|
17
|
+
--neutral-a4: light-dark(#00002d17, #d3edf81d);
|
|
18
|
+
--neutral-a5: light-dark(#0009321f, #d9edfe25);
|
|
19
|
+
--neutral-a6: light-dark(#00002f26, #d6ebfd30);
|
|
20
|
+
--neutral-a7: light-dark(#00062e32, #d9edff40);
|
|
21
|
+
|
|
22
|
+
/* primary: sky */
|
|
23
|
+
--primary-7: light-dark(#8dcae3, #1f6692);
|
|
24
|
+
--primary-9: light-dark(#7ce2fe, #7ce2fe);
|
|
25
|
+
--primary-10: light-dark(#74daf8, #a8eeff);
|
|
26
|
+
--primary-11: light-dark(#00749e, #75c7f0);
|
|
27
|
+
--primary-a2: light-dark(#00a4db0e, #1171fb18);
|
|
28
|
+
--primary-a3: light-dark(#00b3ee1e, #1184fc33);
|
|
29
|
+
--primary-a4: light-dark(#00ace42e, #128fff49);
|
|
30
|
+
--primary-a5: light-dark(#00a1d841, #1c9dfd5d);
|
|
31
|
+
--primary-a6: light-dark(#0092ca56, #28a5ff72);
|
|
32
|
+
--primary-a7: light-dark(#0089c172, #2badfe8b);
|
|
33
|
+
--primary-a11: light-dark(#00749e, #7cd3ffef);
|
|
34
|
+
--primary-text: light-dark(var(--neutral-12), var(--primary-11));
|
|
35
|
+
--primary-inverse: light-dark(var(--neutral-12), var(--neutral-1));
|
|
36
|
+
|
|
37
|
+
/* accent: pink */
|
|
38
|
+
--accent-7: light-dark(#e7acd0, #833869);
|
|
39
|
+
--accent-9: light-dark(#d6409f, #d6409f);
|
|
40
|
+
--accent-10: light-dark(#cf3897, #de51a8);
|
|
41
|
+
--accent-11: light-dark(#c2298a, #ff8dcc);
|
|
42
|
+
--accent-a2: light-dark(#e0008008, #f420bb12);
|
|
43
|
+
--accent-a3: light-dark(#f4008c16, #fe37cc29);
|
|
44
|
+
--accent-a4: light-dark(#e2008b23, #fc1ec43f);
|
|
45
|
+
--accent-a5: light-dark(#d1008331, #fd35c24e);
|
|
46
|
+
--accent-a6: light-dark(#c0007840, #fd51c75f);
|
|
47
|
+
--accent-a7: light-dark(#b6006f53, #fd62c87b);
|
|
48
|
+
--accent-a11: light-dark(#b60074d6, #ff8dcc);
|
|
49
|
+
--accent-text: var(--accent-11);
|
|
50
|
+
--accent-inverse: white;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
@supports (color: color(display-p3 1 1 1)) {
|
|
54
|
+
@media (color-gamut: p3) {
|
|
55
|
+
:root {
|
|
56
|
+
/* neutral: slate */
|
|
57
|
+
--neutral-1: light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074));
|
|
58
|
+
--neutral-2: light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105));
|
|
59
|
+
--neutral-3: light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145));
|
|
60
|
+
--neutral-4: light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176));
|
|
61
|
+
--neutral-5: light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206));
|
|
62
|
+
--neutral-8: light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409));
|
|
63
|
+
--neutral-11: light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728));
|
|
64
|
+
--neutral-12: light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94));
|
|
65
|
+
--neutral-a2: light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));
|
|
66
|
+
--neutral-a3: light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));
|
|
67
|
+
--neutral-a4: light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));
|
|
68
|
+
--neutral-a5: light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));
|
|
69
|
+
--neutral-a6: light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));
|
|
70
|
+
--neutral-a7: light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));
|
|
71
|
+
|
|
72
|
+
/* primary: sky */
|
|
73
|
+
--primary-7: light-dark(color(display-p3 0.604 0.785 0.879), color(display-p3 0.205 0.394 0.557));
|
|
74
|
+
--primary-9: light-dark(color(display-p3 0.585 0.877 0.983), color(display-p3 0.585 0.877 0.983));
|
|
75
|
+
--primary-10: light-dark(color(display-p3 0.555 0.845 0.959), color(display-p3 0.718 0.925 0.991));
|
|
76
|
+
--primary-11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
|
|
77
|
+
--primary-a2: light-dark(color(display-p3 0.024 0.592 0.757 / 0.048), color(display-p3 0.157 0.467 0.992 / 0.089));
|
|
78
|
+
--primary-a3: light-dark(color(display-p3 0.004 0.655 0.886 / 0.102), color(display-p3 0.192 0.522 0.996 / 0.19));
|
|
79
|
+
--primary-a4: light-dark(color(display-p3 0.004 0.604 0.851 / 0.157), color(display-p3 0.212 0.584 1 / 0.274));
|
|
80
|
+
--primary-a5: light-dark(color(display-p3 0.004 0.565 0.792 / 0.224), color(display-p3 0.259 0.631 1 / 0.349));
|
|
81
|
+
--primary-a6: light-dark(color(display-p3 0.004 0.502 0.737 / 0.299), color(display-p3 0.302 0.655 1 / 0.433));
|
|
82
|
+
--primary-a7: light-dark(color(display-p3 0.004 0.459 0.694 / 0.397), color(display-p3 0.329 0.686 1 / 0.526));
|
|
83
|
+
--primary-a11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
|
|
84
|
+
|
|
85
|
+
/* accent: pink */
|
|
86
|
+
--accent-7: light-dark(color(display-p3 0.869 0.683 0.81), color(display-p3 0.477 0.238 0.405));
|
|
87
|
+
--accent-9: light-dark(color(display-p3 0.775 0.297 0.61), color(display-p3 0.775 0.297 0.61));
|
|
88
|
+
--accent-10: light-dark(color(display-p3 0.748 0.27 0.581), color(display-p3 0.808 0.356 0.645));
|
|
89
|
+
--accent-11: light-dark(color(display-p3 0.698 0.219 0.528), color(display-p3 1 0.535 0.78));
|
|
90
|
+
--accent-a2: light-dark(color(display-p3 0.757 0.02 0.51 / 0.032), color(display-p3 1 0.2 0.8 / 0.059));
|
|
91
|
+
--accent-a3: light-dark(color(display-p3 0.765 0.008 0.529 / 0.083), color(display-p3 1 0.294 0.886 / 0.139));
|
|
92
|
+
--accent-a4: light-dark(color(display-p3 0.737 0.008 0.506 / 0.134), color(display-p3 1 0.192 0.82 / 0.219));
|
|
93
|
+
--accent-a5: light-dark(color(display-p3 0.663 0.004 0.451 / 0.185), color(display-p3 1 0.282 0.827 / 0.274));
|
|
94
|
+
--accent-a6: light-dark(color(display-p3 0.616 0.004 0.424 / 0.244), color(display-p3 1 0.396 0.835 / 0.337));
|
|
95
|
+
--accent-a7: light-dark(color(display-p3 0.596 0.004 0.412 / 0.318), color(display-p3 1 0.459 0.831 / 0.442));
|
|
96
|
+
--accent-a11: light-dark(color(display-p3 0.698 0.219 0.528), color(display-p3 1 0.535 0.78));
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
@layer tokens, theme, reset, base, layout, components, project, utilities;
|
|
2
|
+
|
|
3
|
+
/* Theme: slate (neutral: slate, primary: slate, accent: indigo, info: sky). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root {
|
|
6
|
+
/* neutral: slate */
|
|
7
|
+
--neutral-1: light-dark(#fcfcfd, #111113);
|
|
8
|
+
--neutral-2: light-dark(#f9f9fb, #18191b);
|
|
9
|
+
--neutral-3: light-dark(#f0f0f3, #212225);
|
|
10
|
+
--neutral-4: light-dark(#e8e8ec, #272a2d);
|
|
11
|
+
--neutral-5: light-dark(#e0e1e6, #2e3135);
|
|
12
|
+
--neutral-8: light-dark(#b9bbc6, #5a6169);
|
|
13
|
+
--neutral-11: light-dark(#60646c, #b0b4ba);
|
|
14
|
+
--neutral-12: light-dark(#1c2024, #edeef0);
|
|
15
|
+
--neutral-a2: light-dark(#00005506, #d8f4f609);
|
|
16
|
+
--neutral-a3: light-dark(#0000330f, #ddeaf814);
|
|
17
|
+
--neutral-a4: light-dark(#00002d17, #d3edf81d);
|
|
18
|
+
--neutral-a5: light-dark(#0009321f, #d9edfe25);
|
|
19
|
+
--neutral-a6: light-dark(#00002f26, #d6ebfd30);
|
|
20
|
+
--neutral-a7: light-dark(#00062e32, #d9edff40);
|
|
21
|
+
|
|
22
|
+
/* primary: slate */
|
|
23
|
+
--primary-7: light-dark(#cdced6, #43484e);
|
|
24
|
+
--primary-9: light-dark(#8b8d98, #696e77);
|
|
25
|
+
--primary-10: light-dark(#80838d, #777b84);
|
|
26
|
+
--primary-11: light-dark(#60646c, #b0b4ba);
|
|
27
|
+
--primary-a2: light-dark(#00005506, #d8f4f609);
|
|
28
|
+
--primary-a3: light-dark(#0000330f, #ddeaf814);
|
|
29
|
+
--primary-a4: light-dark(#00002d17, #d3edf81d);
|
|
30
|
+
--primary-a5: light-dark(#0009321f, #d9edfe25);
|
|
31
|
+
--primary-a6: light-dark(#00002f26, #d6ebfd30);
|
|
32
|
+
--primary-a7: light-dark(#00062e32, #d9edff40);
|
|
33
|
+
--primary-a11: light-dark(#0007149f, #f1f7feb5);
|
|
34
|
+
--primary-text: var(--primary-11);
|
|
35
|
+
--primary-inverse: white;
|
|
36
|
+
|
|
37
|
+
/* accent: indigo */
|
|
38
|
+
--accent-7: light-dark(#abbdf9, #3a4f97);
|
|
39
|
+
--accent-9: light-dark(#3e63dd, #3e63dd);
|
|
40
|
+
--accent-10: light-dark(#3358d4, #5472e4);
|
|
41
|
+
--accent-11: light-dark(#3a5bc7, #9eb1ff);
|
|
42
|
+
--accent-a2: light-dark(#0040ff08, #3354fa17);
|
|
43
|
+
--accent-a3: light-dark(#0047f112, #2f62ff3c);
|
|
44
|
+
--accent-a4: light-dark(#0044ff1e, #3566ff57);
|
|
45
|
+
--accent-a5: light-dark(#0044ff2d, #4171fd6b);
|
|
46
|
+
--accent-a6: light-dark(#003eff3e, #5178fd7c);
|
|
47
|
+
--accent-a7: light-dark(#0037ed54, #5a7fff90);
|
|
48
|
+
--accent-a11: light-dark(#002bb7c5, #9eb1ff);
|
|
49
|
+
--accent-text: var(--accent-11);
|
|
50
|
+
--accent-inverse: white;
|
|
51
|
+
|
|
52
|
+
/* info: sky */
|
|
53
|
+
--info-7: light-dark(#8dcae3, #1f6692);
|
|
54
|
+
--info-9: light-dark(#7ce2fe, #7ce2fe);
|
|
55
|
+
--info-10: light-dark(#74daf8, #a8eeff);
|
|
56
|
+
--info-11: light-dark(#00749e, #75c7f0);
|
|
57
|
+
--info-a2: light-dark(#00a4db0e, #1171fb18);
|
|
58
|
+
--info-a3: light-dark(#00b3ee1e, #1184fc33);
|
|
59
|
+
--info-a4: light-dark(#00ace42e, #128fff49);
|
|
60
|
+
--info-a5: light-dark(#00a1d841, #1c9dfd5d);
|
|
61
|
+
--info-a6: light-dark(#0092ca56, #28a5ff72);
|
|
62
|
+
--info-a7: light-dark(#0089c172, #2badfe8b);
|
|
63
|
+
--info-a11: light-dark(#00749e, #7cd3ffef);
|
|
64
|
+
--info-text: light-dark(var(--neutral-12), var(--info-11));
|
|
65
|
+
--info-inverse: light-dark(var(--neutral-12), var(--neutral-1));
|
|
66
|
+
|
|
67
|
+
/* gray primary */
|
|
68
|
+
--color-primary: var(--neutral-12);
|
|
69
|
+
--color-primary-inverse: var(--neutral-1);
|
|
70
|
+
--color-primary-hover: color-mix(in oklab, var(--neutral-12) 85%, var(--neutral-1));
|
|
71
|
+
--color-primary-text: var(--neutral-12);
|
|
72
|
+
--mark-color: light-dark(var(--accent-a5), var(--accent-a11));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@supports (color: color(display-p3 1 1 1)) {
|
|
76
|
+
@media (color-gamut: p3) {
|
|
77
|
+
:root {
|
|
78
|
+
/* neutral: slate */
|
|
79
|
+
--neutral-1: light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074));
|
|
80
|
+
--neutral-2: light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105));
|
|
81
|
+
--neutral-3: light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145));
|
|
82
|
+
--neutral-4: light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176));
|
|
83
|
+
--neutral-5: light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206));
|
|
84
|
+
--neutral-8: light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409));
|
|
85
|
+
--neutral-11: light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728));
|
|
86
|
+
--neutral-12: light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94));
|
|
87
|
+
--neutral-a2: light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));
|
|
88
|
+
--neutral-a3: light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));
|
|
89
|
+
--neutral-a4: light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));
|
|
90
|
+
--neutral-a5: light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));
|
|
91
|
+
--neutral-a6: light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));
|
|
92
|
+
--neutral-a7: light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));
|
|
93
|
+
|
|
94
|
+
/* primary: slate */
|
|
95
|
+
--primary-7: light-dark(color(display-p3 0.805 0.808 0.838), color(display-p3 0.265 0.28 0.302));
|
|
96
|
+
--primary-9: light-dark(color(display-p3 0.547 0.553 0.592), color(display-p3 0.415 0.431 0.463));
|
|
97
|
+
--primary-10: light-dark(color(display-p3 0.503 0.512 0.549), color(display-p3 0.469 0.483 0.514));
|
|
98
|
+
--primary-11: light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728));
|
|
99
|
+
--primary-a2: light-dark(color(display-p3 0.024 0.024 0.349 / 0.024), color(display-p3 0.875 0.992 1 / 0.034));
|
|
100
|
+
--primary-a3: light-dark(color(display-p3 0.004 0.004 0.204 / 0.059), color(display-p3 0.882 0.933 0.992 / 0.077));
|
|
101
|
+
--primary-a4: light-dark(color(display-p3 0.012 0.012 0.184 / 0.091), color(display-p3 0.882 0.953 0.996 / 0.111));
|
|
102
|
+
--primary-a5: light-dark(color(display-p3 0.004 0.039 0.2 / 0.122), color(display-p3 0.878 0.929 0.996 / 0.145));
|
|
103
|
+
--primary-a6: light-dark(color(display-p3 0.008 0.008 0.165 / 0.15), color(display-p3 0.882 0.949 0.996 / 0.183));
|
|
104
|
+
--primary-a7: light-dark(color(display-p3 0.008 0.027 0.184 / 0.197), color(display-p3 0.882 0.929 1 / 0.246));
|
|
105
|
+
--primary-a11: light-dark(color(display-p3 0 0.02 0.063 / 0.62), color(display-p3 0.949 0.969 0.996 / 0.708));
|
|
106
|
+
|
|
107
|
+
/* accent: indigo */
|
|
108
|
+
--accent-7: light-dark(color(display-p3 0.685 0.74 0.957), color(display-p3 0.245 0.309 0.575));
|
|
109
|
+
--accent-9: light-dark(color(display-p3 0.276 0.384 0.837), color(display-p3 0.276 0.384 0.837));
|
|
110
|
+
--accent-10: light-dark(color(display-p3 0.234 0.343 0.801), color(display-p3 0.354 0.445 0.866));
|
|
111
|
+
--accent-11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
|
|
112
|
+
--accent-a2: light-dark(color(display-p3 0.024 0.161 0.863 / 0.028), color(display-p3 0.251 0.345 0.988 / 0.085));
|
|
113
|
+
--accent-a3: light-dark(color(display-p3 0.008 0.239 0.886 / 0.067), color(display-p3 0.243 0.404 1 / 0.223));
|
|
114
|
+
--accent-a4: light-dark(color(display-p3 0.004 0.247 1 / 0.114), color(display-p3 0.263 0.42 1 / 0.324));
|
|
115
|
+
--accent-a5: light-dark(color(display-p3 0.004 0.235 1 / 0.169), color(display-p3 0.314 0.451 1 / 0.4));
|
|
116
|
+
--accent-a6: light-dark(color(display-p3 0.004 0.208 0.984 / 0.232), color(display-p3 0.361 0.49 1 / 0.467));
|
|
117
|
+
--accent-a7: light-dark(color(display-p3 0.004 0.176 0.863 / 0.314), color(display-p3 0.388 0.51 1 / 0.547));
|
|
118
|
+
--accent-a11: light-dark(color(display-p3 0.256 0.354 0.755), color(display-p3 0.63 0.69 1));
|
|
119
|
+
|
|
120
|
+
/* info: sky */
|
|
121
|
+
--info-7: light-dark(color(display-p3 0.604 0.785 0.879), color(display-p3 0.205 0.394 0.557));
|
|
122
|
+
--info-9: light-dark(color(display-p3 0.585 0.877 0.983), color(display-p3 0.585 0.877 0.983));
|
|
123
|
+
--info-10: light-dark(color(display-p3 0.555 0.845 0.959), color(display-p3 0.718 0.925 0.991));
|
|
124
|
+
--info-11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
|
|
125
|
+
--info-a2: light-dark(color(display-p3 0.024 0.592 0.757 / 0.048), color(display-p3 0.157 0.467 0.992 / 0.089));
|
|
126
|
+
--info-a3: light-dark(color(display-p3 0.004 0.655 0.886 / 0.102), color(display-p3 0.192 0.522 0.996 / 0.19));
|
|
127
|
+
--info-a4: light-dark(color(display-p3 0.004 0.604 0.851 / 0.157), color(display-p3 0.212 0.584 1 / 0.274));
|
|
128
|
+
--info-a5: light-dark(color(display-p3 0.004 0.565 0.792 / 0.224), color(display-p3 0.259 0.631 1 / 0.349));
|
|
129
|
+
--info-a6: light-dark(color(display-p3 0.004 0.502 0.737 / 0.299), color(display-p3 0.302 0.655 1 / 0.433));
|
|
130
|
+
--info-a7: light-dark(color(display-p3 0.004 0.459 0.694 / 0.397), color(display-p3 0.329 0.686 1 / 0.526));
|
|
131
|
+
--info-a11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
@layer tokens, theme, reset, base, layout, components, project, utilities;
|
|
2
|
+
|
|
3
|
+
/* Theme: teal (neutral: sage, primary: teal, accent: orange, warning: yellow). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root {
|
|
6
|
+
/* neutral: sage */
|
|
7
|
+
--neutral-1: light-dark(#fbfdfc, #101211);
|
|
8
|
+
--neutral-2: light-dark(#f7f9f8, #171918);
|
|
9
|
+
--neutral-3: light-dark(#eef1f0, #202221);
|
|
10
|
+
--neutral-4: light-dark(#e6e9e8, #272a29);
|
|
11
|
+
--neutral-5: light-dark(#dfe2e0, #2e3130);
|
|
12
|
+
--neutral-8: light-dark(#b8bcba, #5b625f);
|
|
13
|
+
--neutral-11: light-dark(#5f6563, #adb5b2);
|
|
14
|
+
--neutral-12: light-dark(#1a211e, #eceeed);
|
|
15
|
+
--neutral-a2: light-dark(#00402008, #f0f2f108);
|
|
16
|
+
--neutral-a3: light-dark(#002d1e11, #f3f5f412);
|
|
17
|
+
--neutral-a4: light-dark(#001f1519, #f2fefd1a);
|
|
18
|
+
--neutral-a5: light-dark(#00180820, #f1fbfa22);
|
|
19
|
+
--neutral-a6: light-dark(#00140d28, #edfbf42d);
|
|
20
|
+
--neutral-a7: light-dark(#00140a34, #edfcf73c);
|
|
21
|
+
|
|
22
|
+
/* primary: teal */
|
|
23
|
+
--primary-7: light-dark(#83cdc1, #1c6961);
|
|
24
|
+
--primary-9: light-dark(#12a594, #12a594);
|
|
25
|
+
--primary-10: light-dark(#0d9b8a, #0eb39e);
|
|
26
|
+
--primary-11: light-dark(#008573, #0bd8b6);
|
|
27
|
+
--primary-a2: light-dark(#00aa800c, #12fbe60c);
|
|
28
|
+
--primary-a3: light-dark(#00c69d1f, #00ffe61e);
|
|
29
|
+
--primary-a4: light-dark(#00c39633, #00ffe92d);
|
|
30
|
+
--primary-a5: light-dark(#00b49047, #00ffea3b);
|
|
31
|
+
--primary-a6: light-dark(#00a6855e, #1cffe84b);
|
|
32
|
+
--primary-a7: light-dark(#0099807c, #2efde85f);
|
|
33
|
+
--primary-a11: light-dark(#008573, #0afed5d6);
|
|
34
|
+
--primary-text: var(--primary-11);
|
|
35
|
+
--primary-inverse: white;
|
|
36
|
+
|
|
37
|
+
/* accent: orange */
|
|
38
|
+
--accent-7: light-dark(#f5ae73, #7e451d);
|
|
39
|
+
--accent-9: light-dark(#f76b15, #f76b15);
|
|
40
|
+
--accent-10: light-dark(#ef5f00, #ff801f);
|
|
41
|
+
--accent-11: light-dark(#cc4e00, #ffa057);
|
|
42
|
+
--accent-a2: light-dark(#ff8e0012, #fe6d000e);
|
|
43
|
+
--accent-a3: light-dark(#ff9c0029, #fb6a0025);
|
|
44
|
+
--accent-a4: light-dark(#ff91014a, #ff590039);
|
|
45
|
+
--accent-a5: light-dark(#ff8b0065, #ff61004a);
|
|
46
|
+
--accent-a6: light-dark(#ff81007d, #fd75045c);
|
|
47
|
+
--accent-a7: light-dark(#ed6c008c, #ff832c75);
|
|
48
|
+
--accent-a11: light-dark(#cc4e00, #ffa057);
|
|
49
|
+
--accent-text: var(--accent-11);
|
|
50
|
+
--accent-inverse: white;
|
|
51
|
+
|
|
52
|
+
/* warning: yellow */
|
|
53
|
+
--warning-7: light-dark(#e4c767, #665417);
|
|
54
|
+
--warning-9: light-dark(#ffe629, #ffe629);
|
|
55
|
+
--warning-10: light-dark(#ffdc00, #ffff57);
|
|
56
|
+
--warning-11: light-dark(#9e6c00, #f5e147);
|
|
57
|
+
--warning-a2: light-dark(#f4dd0016, #f9b4000b);
|
|
58
|
+
--warning-a3: light-dark(#ffee0047, #ffaa001e);
|
|
59
|
+
--warning-a4: light-dark(#ffe3016b, #fdb70028);
|
|
60
|
+
--warning-a5: light-dark(#ffd5008f, #febb0036);
|
|
61
|
+
--warning-a6: light-dark(#ebbc0097, #fec40046);
|
|
62
|
+
--warning-a7: light-dark(#d2a10098, #fdcb225c);
|
|
63
|
+
--warning-a11: light-dark(#9e6c00, #fee949f5);
|
|
64
|
+
--warning-text: light-dark(var(--neutral-12), var(--warning-11));
|
|
65
|
+
--warning-inverse: light-dark(var(--neutral-12), var(--neutral-1));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@supports (color: color(display-p3 1 1 1)) {
|
|
69
|
+
@media (color-gamut: p3) {
|
|
70
|
+
:root {
|
|
71
|
+
/* neutral: sage */
|
|
72
|
+
--neutral-1: light-dark(color(display-p3 0.986 0.992 0.988), color(display-p3 0.064 0.07 0.067));
|
|
73
|
+
--neutral-2: light-dark(color(display-p3 0.97 0.977 0.974), color(display-p3 0.092 0.098 0.094));
|
|
74
|
+
--neutral-3: light-dark(color(display-p3 0.935 0.944 0.94), color(display-p3 0.128 0.135 0.131));
|
|
75
|
+
--neutral-4: light-dark(color(display-p3 0.904 0.913 0.909), color(display-p3 0.155 0.164 0.159));
|
|
76
|
+
--neutral-5: light-dark(color(display-p3 0.875 0.885 0.88), color(display-p3 0.183 0.193 0.188));
|
|
77
|
+
--neutral-8: light-dark(color(display-p3 0.725 0.738 0.732), color(display-p3 0.362 0.382 0.373));
|
|
78
|
+
--neutral-11: light-dark(color(display-p3 0.377 0.395 0.389), color(display-p3 0.685 0.709 0.697));
|
|
79
|
+
--neutral-12: light-dark(color(display-p3 0.107 0.129 0.118), color(display-p3 0.927 0.933 0.93));
|
|
80
|
+
--neutral-a2: light-dark(color(display-p3 0.02 0.267 0.145 / 0.032), color(display-p3 0.976 0.988 0.984 / 0.03));
|
|
81
|
+
--neutral-a3: light-dark(color(display-p3 0.008 0.184 0.125 / 0.067), color(display-p3 0.992 0.945 0.941 / 0.072));
|
|
82
|
+
--neutral-a4: light-dark(color(display-p3 0.012 0.094 0.051 / 0.095), color(display-p3 0.988 0.996 0.992 / 0.102));
|
|
83
|
+
--neutral-a5: light-dark(color(display-p3 0.008 0.098 0.035 / 0.126), color(display-p3 0.992 1 0.996 / 0.131));
|
|
84
|
+
--neutral-a6: light-dark(color(display-p3 0.004 0.078 0.027 / 0.157), color(display-p3 0.973 1 0.976 / 0.173));
|
|
85
|
+
--neutral-a7: light-dark(color(display-p3 0 0.059 0.039 / 0.2), color(display-p3 0.957 1 0.976 / 0.233));
|
|
86
|
+
|
|
87
|
+
/* primary: teal */
|
|
88
|
+
--primary-7: light-dark(color(display-p3 0.581 0.798 0.756), color(display-p3 0.205 0.406 0.379));
|
|
89
|
+
--primary-9: light-dark(color(display-p3 0.297 0.637 0.581), color(display-p3 0.297 0.637 0.581));
|
|
90
|
+
--primary-10: light-dark(color(display-p3 0.275 0.599 0.542), color(display-p3 0.319 0.69 0.62));
|
|
91
|
+
--primary-11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
|
|
92
|
+
--primary-a2: light-dark(color(display-p3 0.02 0.647 0.467 / 0.044), color(display-p3 0.235 0.988 0.902 / 0.047));
|
|
93
|
+
--primary-a3: light-dark(color(display-p3 0.004 0.741 0.557 / 0.106), color(display-p3 0.235 1 0.898 / 0.118));
|
|
94
|
+
--primary-a4: light-dark(color(display-p3 0.004 0.702 0.537 / 0.169), color(display-p3 0.18 0.996 0.929 / 0.173));
|
|
95
|
+
--primary-a5: light-dark(color(display-p3 0.004 0.643 0.494 / 0.24), color(display-p3 0.31 1 0.933 / 0.227));
|
|
96
|
+
--primary-a6: light-dark(color(display-p3 0.004 0.569 0.447 / 0.318), color(display-p3 0.396 1 0.933 / 0.286));
|
|
97
|
+
--primary-a7: light-dark(color(display-p3 0.004 0.518 0.424 / 0.42), color(display-p3 0.443 1 0.925 / 0.366));
|
|
98
|
+
--primary-a11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
|
|
99
|
+
|
|
100
|
+
/* accent: orange */
|
|
101
|
+
--accent-7: light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));
|
|
102
|
+
--accent-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
|
|
103
|
+
--accent-10: light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));
|
|
104
|
+
--accent-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
|
|
105
|
+
--accent-a2: light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));
|
|
106
|
+
--accent-a3: light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));
|
|
107
|
+
--accent-a4: light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));
|
|
108
|
+
--accent-a5: light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));
|
|
109
|
+
--accent-a6: light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));
|
|
110
|
+
--accent-a7: light-dark(color(display-p3 0.839 0.408 0 / 0.514), color(display-p3 1 0.569 0.251 / 0.429));
|
|
111
|
+
--accent-a11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
|
|
112
|
+
|
|
113
|
+
/* warning: yellow */
|
|
114
|
+
--warning-7: light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135));
|
|
115
|
+
--warning-9: light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22));
|
|
116
|
+
--warning-10: light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456));
|
|
117
|
+
--warning-11: light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));
|
|
118
|
+
--warning-a2: light-dark(color(display-p3 0.953 0.855 0.008 / 0.079), color(display-p3 0.996 0.792 0 / 0.038));
|
|
119
|
+
--warning-a3: light-dark(color(display-p3 0.988 0.925 0.004 / 0.251), color(display-p3 0.996 0.71 0 / 0.11));
|
|
120
|
+
--warning-a4: light-dark(color(display-p3 0.98 0.875 0.004 / 0.373), color(display-p3 0.996 0.741 0 / 0.152));
|
|
121
|
+
--warning-a5: light-dark(color(display-p3 0.969 0.816 0.004 / 0.491), color(display-p3 0.996 0.765 0 / 0.202));
|
|
122
|
+
--warning-a6: light-dark(color(display-p3 0.875 0.71 0 / 0.526), color(display-p3 0.996 0.816 0.082 / 0.261));
|
|
123
|
+
--warning-a7: light-dark(color(display-p3 0.769 0.604 0 / 0.542), color(display-p3 1 0.831 0.263 / 0.345));
|
|
124
|
+
--warning-a11: light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
@layer tokens, theme, reset, base, layout, components, project, utilities;
|
|
2
|
+
|
|
3
|
+
/* Theme: tomato (neutral: mauve, primary: tomato, accent: teal, danger: crimson). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
|
|
4
|
+
@layer theme {
|
|
5
|
+
:root {
|
|
6
|
+
/* neutral: mauve */
|
|
7
|
+
--neutral-1: light-dark(#fdfcfd, #121113);
|
|
8
|
+
--neutral-2: light-dark(#faf9fb, #1a191b);
|
|
9
|
+
--neutral-3: light-dark(#f2eff3, #232225);
|
|
10
|
+
--neutral-4: light-dark(#eae7ec, #2b292d);
|
|
11
|
+
--neutral-5: light-dark(#e3dfe6, #323035);
|
|
12
|
+
--neutral-8: light-dark(#bcbac7, #625f69);
|
|
13
|
+
--neutral-11: light-dark(#65636d, #b5b2bc);
|
|
14
|
+
--neutral-12: light-dark(#211f26, #eeeef0);
|
|
15
|
+
--neutral-a2: light-dark(#2b005506, #f5f4f609);
|
|
16
|
+
--neutral-a3: light-dark(#30004010, #ebeaf814);
|
|
17
|
+
--neutral-a4: light-dark(#20003618, #eee5f81d);
|
|
18
|
+
--neutral-a5: light-dark(#20003820, #efe6fe25);
|
|
19
|
+
--neutral-a6: light-dark(#14003527, #f1e6fd30);
|
|
20
|
+
--neutral-a7: light-dark(#10003332, #eee9ff40);
|
|
21
|
+
|
|
22
|
+
/* primary: tomato */
|
|
23
|
+
--primary-7: light-dark(#f5a898, #853a2d);
|
|
24
|
+
--primary-9: light-dark(#e54d2e, #e54d2e);
|
|
25
|
+
--primary-10: light-dark(#dd4425, #ec6142);
|
|
26
|
+
--primary-11: light-dark(#d13415, #ff977d);
|
|
27
|
+
--primary-a2: light-dark(#ff200008, #ff55330f);
|
|
28
|
+
--primary-a3: light-dark(#f52b0018, #ff35232b);
|
|
29
|
+
--primary-a4: light-dark(#ff35002c, #fd201142);
|
|
30
|
+
--primary-a5: light-dark(#ff2e003d, #fe332153);
|
|
31
|
+
--primary-a6: light-dark(#f92d0050, #ff4f3864);
|
|
32
|
+
--primary-a7: light-dark(#e7280067, #fd644a7d);
|
|
33
|
+
--primary-a11: light-dark(#cd2200ea, #ff977d);
|
|
34
|
+
--primary-text: var(--primary-11);
|
|
35
|
+
--primary-inverse: white;
|
|
36
|
+
|
|
37
|
+
/* accent: teal */
|
|
38
|
+
--accent-7: light-dark(#83cdc1, #1c6961);
|
|
39
|
+
--accent-9: light-dark(#12a594, #12a594);
|
|
40
|
+
--accent-10: light-dark(#0d9b8a, #0eb39e);
|
|
41
|
+
--accent-11: light-dark(#008573, #0bd8b6);
|
|
42
|
+
--accent-a2: light-dark(#00aa800c, #12fbe60c);
|
|
43
|
+
--accent-a3: light-dark(#00c69d1f, #00ffe61e);
|
|
44
|
+
--accent-a4: light-dark(#00c39633, #00ffe92d);
|
|
45
|
+
--accent-a5: light-dark(#00b49047, #00ffea3b);
|
|
46
|
+
--accent-a6: light-dark(#00a6855e, #1cffe84b);
|
|
47
|
+
--accent-a7: light-dark(#0099807c, #2efde85f);
|
|
48
|
+
--accent-a11: light-dark(#008573, #0afed5d6);
|
|
49
|
+
--accent-text: var(--accent-11);
|
|
50
|
+
--accent-inverse: white;
|
|
51
|
+
|
|
52
|
+
/* danger: crimson */
|
|
53
|
+
--danger-7: light-dark(#eaacc3, #873356);
|
|
54
|
+
--danger-9: light-dark(#e93d82, #e93d82);
|
|
55
|
+
--danger-10: light-dark(#df3478, #ee518a);
|
|
56
|
+
--danger-11: light-dark(#cb1d63, #ff92ad);
|
|
57
|
+
--danger-a2: light-dark(#e0004008, #f22f7a11);
|
|
58
|
+
--danger-a3: light-dark(#ff005216, #fe2a8b2a);
|
|
59
|
+
--danger-a4: light-dark(#f8005123, #fd158741);
|
|
60
|
+
--danger-a5: light-dark(#e5004f31, #fd278f51);
|
|
61
|
+
--danger-a6: light-dark(#d0004b41, #fe459763);
|
|
62
|
+
--danger-a7: light-dark(#bf004753, #fd559b7f);
|
|
63
|
+
--danger-a11: light-dark(#c4004fe2, #ff92ad);
|
|
64
|
+
--danger-text: var(--danger-11);
|
|
65
|
+
--danger-inverse: white;
|
|
66
|
+
|
|
67
|
+
/* icons */
|
|
68
|
+
--icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e93d82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@supports (color: color(display-p3 1 1 1)) {
|
|
72
|
+
@media (color-gamut: p3) {
|
|
73
|
+
:root {
|
|
74
|
+
/* neutral: mauve */
|
|
75
|
+
--neutral-1: light-dark(color(display-p3 0.991 0.988 0.992), color(display-p3 0.07 0.067 0.074));
|
|
76
|
+
--neutral-2: light-dark(color(display-p3 0.98 0.976 0.984), color(display-p3 0.101 0.098 0.105));
|
|
77
|
+
--neutral-3: light-dark(color(display-p3 0.946 0.938 0.952), color(display-p3 0.138 0.134 0.144));
|
|
78
|
+
--neutral-4: light-dark(color(display-p3 0.915 0.906 0.925), color(display-p3 0.167 0.161 0.175));
|
|
79
|
+
--neutral-5: light-dark(color(display-p3 0.886 0.876 0.901), color(display-p3 0.196 0.189 0.206));
|
|
80
|
+
--neutral-8: light-dark(color(display-p3 0.735 0.728 0.777), color(display-p3 0.383 0.373 0.408));
|
|
81
|
+
--neutral-11: light-dark(color(display-p3 0.395 0.388 0.424), color(display-p3 0.707 0.7 0.735));
|
|
82
|
+
--neutral-12: light-dark(color(display-p3 0.128 0.122 0.147), color(display-p3 0.933 0.933 0.94));
|
|
83
|
+
--neutral-a2: light-dark(color(display-p3 0.184 0.024 0.349 / 0.024), color(display-p3 0.996 0.992 1 / 0.034));
|
|
84
|
+
--neutral-a3: light-dark(color(display-p3 0.129 0.008 0.255 / 0.063), color(display-p3 0.937 0.933 0.992 / 0.077));
|
|
85
|
+
--neutral-a4: light-dark(color(display-p3 0.094 0.012 0.216 / 0.095), color(display-p3 0.957 0.918 0.996 / 0.111));
|
|
86
|
+
--neutral-a5: light-dark(color(display-p3 0.098 0.008 0.224 / 0.126), color(display-p3 0.937 0.906 0.996 / 0.145));
|
|
87
|
+
--neutral-a6: light-dark(color(display-p3 0.055 0.004 0.18 / 0.153), color(display-p3 0.953 0.925 0.996 / 0.183));
|
|
88
|
+
--neutral-a7: light-dark(color(display-p3 0.067 0.008 0.184 / 0.197), color(display-p3 0.945 0.929 1 / 0.246));
|
|
89
|
+
|
|
90
|
+
/* primary: tomato */
|
|
91
|
+
--primary-7: light-dark(color(display-p3 0.917 0.673 0.611), color(display-p3 0.487 0.245 0.194));
|
|
92
|
+
--primary-9: light-dark(color(display-p3 0.831 0.345 0.231), color(display-p3 0.831 0.345 0.231));
|
|
93
|
+
--primary-10: light-dark(color(display-p3 0.802 0.313 0.2), color(display-p3 0.862 0.415 0.298));
|
|
94
|
+
--primary-11: light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455));
|
|
95
|
+
--primary-a2: light-dark(color(display-p3 0.757 0.145 0.02 / 0.032), color(display-p3 0.992 0.376 0.224 / 0.051));
|
|
96
|
+
--primary-a3: light-dark(color(display-p3 0.831 0.184 0.012 / 0.091), color(display-p3 0.996 0.282 0.176 / 0.148));
|
|
97
|
+
--primary-a4: light-dark(color(display-p3 0.976 0.192 0.004 / 0.165), color(display-p3 1 0.204 0.118 / 0.232));
|
|
98
|
+
--primary-a5: light-dark(color(display-p3 0.918 0.192 0.004 / 0.232), color(display-p3 1 0.286 0.192 / 0.29));
|
|
99
|
+
--primary-a6: light-dark(color(display-p3 0.847 0.173 0.004 / 0.302), color(display-p3 1 0.392 0.278 / 0.353));
|
|
100
|
+
--primary-a7: light-dark(color(display-p3 0.788 0.165 0.004 / 0.389), color(display-p3 1 0.459 0.349 / 0.45));
|
|
101
|
+
--primary-a11: light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455));
|
|
102
|
+
|
|
103
|
+
/* accent: teal */
|
|
104
|
+
--accent-7: light-dark(color(display-p3 0.581 0.798 0.756), color(display-p3 0.205 0.406 0.379));
|
|
105
|
+
--accent-9: light-dark(color(display-p3 0.297 0.637 0.581), color(display-p3 0.297 0.637 0.581));
|
|
106
|
+
--accent-10: light-dark(color(display-p3 0.275 0.599 0.542), color(display-p3 0.319 0.69 0.62));
|
|
107
|
+
--accent-11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
|
|
108
|
+
--accent-a2: light-dark(color(display-p3 0.02 0.647 0.467 / 0.044), color(display-p3 0.235 0.988 0.902 / 0.047));
|
|
109
|
+
--accent-a3: light-dark(color(display-p3 0.004 0.741 0.557 / 0.106), color(display-p3 0.235 1 0.898 / 0.118));
|
|
110
|
+
--accent-a4: light-dark(color(display-p3 0.004 0.702 0.537 / 0.169), color(display-p3 0.18 0.996 0.929 / 0.173));
|
|
111
|
+
--accent-a5: light-dark(color(display-p3 0.004 0.643 0.494 / 0.24), color(display-p3 0.31 1 0.933 / 0.227));
|
|
112
|
+
--accent-a6: light-dark(color(display-p3 0.004 0.569 0.447 / 0.318), color(display-p3 0.396 1 0.933 / 0.286));
|
|
113
|
+
--accent-a7: light-dark(color(display-p3 0.004 0.518 0.424 / 0.42), color(display-p3 0.443 1 0.925 / 0.366));
|
|
114
|
+
--accent-a11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
|
|
115
|
+
|
|
116
|
+
/* danger: crimson */
|
|
117
|
+
--danger-7: light-dark(color(display-p3 0.88 0.683 0.761), color(display-p3 0.489 0.222 0.336));
|
|
118
|
+
--danger-9: light-dark(color(display-p3 0.843 0.298 0.507), color(display-p3 0.843 0.298 0.507));
|
|
119
|
+
--danger-10: light-dark(color(display-p3 0.807 0.266 0.468), color(display-p3 0.864 0.364 0.539));
|
|
120
|
+
--danger-11: light-dark(color(display-p3 0.731 0.195 0.388), color(display-p3 1 0.56 0.66));
|
|
121
|
+
--danger-a2: light-dark(color(display-p3 0.757 0.02 0.267 / 0.032), color(display-p3 0.996 0.282 0.569 / 0.055));
|
|
122
|
+
--danger-a3: light-dark(color(display-p3 0.859 0.008 0.294 / 0.083), color(display-p3 0.996 0.227 0.573 / 0.148));
|
|
123
|
+
--danger-a4: light-dark(color(display-p3 0.827 0.008 0.298 / 0.134), color(display-p3 1 0.157 0.569 / 0.227));
|
|
124
|
+
--danger-a5: light-dark(color(display-p3 0.753 0.008 0.275 / 0.189), color(display-p3 1 0.231 0.604 / 0.286));
|
|
125
|
+
--danger-a6: light-dark(color(display-p3 0.682 0.004 0.247 / 0.244), color(display-p3 1 0.337 0.643 / 0.349));
|
|
126
|
+
--danger-a7: light-dark(color(display-p3 0.62 0.004 0.251 / 0.318), color(display-p3 1 0.416 0.663 / 0.454));
|
|
127
|
+
--danger-a11: light-dark(color(display-p3 0.731 0.195 0.388), color(display-p3 1 0.56 0.66));
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|