@diskette/palette 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/amber-p3.css +95 -0
- package/dist/amber-tokens.css +32 -0
- package/dist/blue-p3.css +95 -0
- package/dist/blue-tokens.css +32 -0
- package/dist/bronze-p3.css +95 -0
- package/dist/brown-p3.css +95 -0
- package/dist/brown-tokens.css +32 -0
- package/dist/crimson-p3.css +95 -0
- package/dist/crimson-tokens.css +32 -0
- package/dist/cyan-p3.css +95 -0
- package/dist/cyan-tokens.css +32 -0
- package/dist/gold-p3.css +95 -0
- package/dist/grass-p3.css +95 -0
- package/dist/grass-tokens.css +32 -0
- package/dist/gray-p3.css +95 -0
- package/dist/gray-tokens.css +32 -0
- package/dist/green-p3.css +95 -0
- package/dist/green-tokens.css +32 -0
- package/dist/indigo-p3.css +95 -0
- package/dist/indigo-tokens.css +32 -0
- package/dist/iris-p3.css +95 -0
- package/dist/iris-tokens.css +32 -0
- package/dist/jade-p3.css +95 -0
- package/dist/jade-tokens.css +32 -0
- package/dist/lime-p3.css +95 -0
- package/dist/lime-tokens.css +32 -0
- package/dist/mauve-p3.css +95 -0
- package/dist/mauve-tokens.css +32 -0
- package/dist/mint-p3.css +95 -0
- package/dist/mint-tokens.css +32 -0
- package/dist/olive-p3.css +95 -0
- package/dist/olive-tokens.css +32 -0
- package/dist/orange-p3.css +95 -0
- package/dist/orange-tokens.css +32 -0
- package/dist/pink-p3.css +95 -0
- package/dist/pink-tokens.css +32 -0
- package/dist/plum-p3.css +95 -0
- package/dist/plum-tokens.css +32 -0
- package/dist/purple-p3.css +95 -0
- package/dist/purple-tokens.css +32 -0
- package/dist/red-p3.css +95 -0
- package/dist/red-tokens.css +32 -0
- package/dist/ruby-p3.css +95 -0
- package/dist/ruby-tokens.css +32 -0
- package/dist/sage-p3.css +95 -0
- package/dist/sage-tokens.css +32 -0
- package/dist/sand-p3.css +95 -0
- package/dist/sand-tokens.css +32 -0
- package/dist/sky-p3.css +95 -0
- package/dist/sky-tokens.css +32 -0
- package/dist/slate-p3.css +95 -0
- package/dist/slate-tokens.css +32 -0
- package/dist/teal-p3.css +95 -0
- package/dist/teal-tokens.css +32 -0
- package/dist/tomato-p3.css +95 -0
- package/dist/tomato-tokens.css +32 -0
- package/dist/violet-p3.css +95 -0
- package/dist/violet-tokens.css +32 -0
- package/dist/yellow-p3.css +95 -0
- package/dist/yellow-tokens.css +32 -0
- package/package.json +38 -0
package/dist/sky-p3.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
--color-sky-1: var(--sky-1);
|
|
3
|
+
--color-sky-2: var(--sky-2);
|
|
4
|
+
--color-sky-3: var(--sky-3);
|
|
5
|
+
--color-sky-4: var(--sky-4);
|
|
6
|
+
--color-sky-5: var(--sky-5);
|
|
7
|
+
--color-sky-6: var(--sky-6);
|
|
8
|
+
--color-sky-7: var(--sky-7);
|
|
9
|
+
--color-sky-8: var(--sky-8);
|
|
10
|
+
--color-sky-9: var(--sky-9);
|
|
11
|
+
--color-sky-10: var(--sky-10);
|
|
12
|
+
--color-sky-11: var(--sky-11);
|
|
13
|
+
--color-sky-12: var(--sky-12);
|
|
14
|
+
|
|
15
|
+
--color-sky-a1: var(--sky-a1);
|
|
16
|
+
--color-sky-a2: var(--sky-a2);
|
|
17
|
+
--color-sky-a3: var(--sky-a3);
|
|
18
|
+
--color-sky-a4: var(--sky-a4);
|
|
19
|
+
--color-sky-a5: var(--sky-a5);
|
|
20
|
+
--color-sky-a6: var(--sky-a6);
|
|
21
|
+
--color-sky-a7: var(--sky-a7);
|
|
22
|
+
--color-sky-a8: var(--sky-a8);
|
|
23
|
+
--color-sky-a9: var(--sky-a9);
|
|
24
|
+
--color-sky-a10: var(--sky-a10);
|
|
25
|
+
--color-sky-a11: var(--sky-a11);
|
|
26
|
+
--color-sky-a12: var(--sky-a12);
|
|
27
|
+
|
|
28
|
+
--color-sky-contrast: var(--sky-contrast);
|
|
29
|
+
--color-sky-surface: var(--sky-surface);
|
|
30
|
+
--color-sky-indicator: var(--sky-indicator);
|
|
31
|
+
--color-sky-track: var(--sky-track);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--sky-1: color(display-p3 0.98 0.995 0.999);
|
|
36
|
+
--sky-2: color(display-p3 0.953 0.98 0.99);
|
|
37
|
+
--sky-3: color(display-p3 0.899 0.963 0.989);
|
|
38
|
+
--sky-4: color(display-p3 0.842 0.937 0.977);
|
|
39
|
+
--sky-5: color(display-p3 0.777 0.9 0.954);
|
|
40
|
+
--sky-6: color(display-p3 0.701 0.851 0.921);
|
|
41
|
+
--sky-7: color(display-p3 0.604 0.785 0.879);
|
|
42
|
+
--sky-8: color(display-p3 0.457 0.696 0.829);
|
|
43
|
+
--sky-9: color(display-p3 0.585 0.877 0.983);
|
|
44
|
+
--sky-10: color(display-p3 0.555 0.845 0.959);
|
|
45
|
+
--sky-11: color(display-p3 0.193 0.448 0.605);
|
|
46
|
+
--sky-12: color(display-p3 0.145 0.241 0.329);
|
|
47
|
+
|
|
48
|
+
--sky-a1: color(display-p3 0.02 0.804 1 / 0.02);
|
|
49
|
+
--sky-a2: color(display-p3 0.024 0.592 0.757 / 0.048);
|
|
50
|
+
--sky-a3: color(display-p3 0.004 0.655 0.886 / 0.102);
|
|
51
|
+
--sky-a4: color(display-p3 0.004 0.604 0.851 / 0.157);
|
|
52
|
+
--sky-a5: color(display-p3 0.004 0.565 0.792 / 0.224);
|
|
53
|
+
--sky-a6: color(display-p3 0.004 0.502 0.737 / 0.299);
|
|
54
|
+
--sky-a7: color(display-p3 0.004 0.459 0.694 / 0.397);
|
|
55
|
+
--sky-a8: color(display-p3 0 0.435 0.682 / 0.542);
|
|
56
|
+
--sky-a9: color(display-p3 0.004 0.71 0.965 / 0.416);
|
|
57
|
+
--sky-a10: color(display-p3 0.004 0.647 0.914 / 0.444);
|
|
58
|
+
--sky-a11: color(display-p3 0.193 0.448 0.605);
|
|
59
|
+
--sky-a12: color(display-p3 0.145 0.241 0.329);
|
|
60
|
+
|
|
61
|
+
--sky-contrast: #1c2024; /* light mode slate 12 */
|
|
62
|
+
--sky-surface: color(display-p3 0.9412 0.9765 0.9843 / 0.8);
|
|
63
|
+
--sky-indicator: var(--sky-9);
|
|
64
|
+
--sky-track: var(--sky-9);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark {
|
|
68
|
+
--sky-1: color(display-p3 0.056 0.078 0.116);
|
|
69
|
+
--sky-2: color(display-p3 0.075 0.101 0.149);
|
|
70
|
+
--sky-3: color(display-p3 0.089 0.154 0.244);
|
|
71
|
+
--sky-4: color(display-p3 0.106 0.207 0.323);
|
|
72
|
+
--sky-5: color(display-p3 0.135 0.261 0.394);
|
|
73
|
+
--sky-6: color(display-p3 0.17 0.322 0.469);
|
|
74
|
+
--sky-7: color(display-p3 0.205 0.394 0.557);
|
|
75
|
+
--sky-8: color(display-p3 0.232 0.48 0.665);
|
|
76
|
+
--sky-9: color(display-p3 0.585 0.877 0.983);
|
|
77
|
+
--sky-10: color(display-p3 0.718 0.925 0.991);
|
|
78
|
+
--sky-11: color(display-p3 0.536 0.772 0.924);
|
|
79
|
+
--sky-12: color(display-p3 0.799 0.947 0.993);
|
|
80
|
+
|
|
81
|
+
--sky-a1: color(display-p3 0 0.282 0.996 / 0.055);
|
|
82
|
+
--sky-a2: color(display-p3 0.157 0.467 0.992 / 0.089);
|
|
83
|
+
--sky-a3: color(display-p3 0.192 0.522 0.996 / 0.19);
|
|
84
|
+
--sky-a4: color(display-p3 0.212 0.584 1 / 0.274);
|
|
85
|
+
--sky-a5: color(display-p3 0.259 0.631 1 / 0.349);
|
|
86
|
+
--sky-a6: color(display-p3 0.302 0.655 1 / 0.433);
|
|
87
|
+
--sky-a7: color(display-p3 0.329 0.686 1 / 0.526);
|
|
88
|
+
--sky-a8: color(display-p3 0.325 0.71 1 / 0.643);
|
|
89
|
+
--sky-a9: color(display-p3 0.592 0.894 1 / 0.984);
|
|
90
|
+
--sky-a10: color(display-p3 0.722 0.933 1 / 0.992);
|
|
91
|
+
--sky-a11: color(display-p3 0.536 0.772 0.924);
|
|
92
|
+
--sky-a12: color(display-p3 0.799 0.947 0.993);
|
|
93
|
+
|
|
94
|
+
--sky-surface: color(display-p3 0.0863 0.1333 0.2196 / 0.5);
|
|
95
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-accent-color='sky'] {
|
|
2
|
+
--accent-1: var(--sky-1);
|
|
3
|
+
--accent-2: var(--sky-2);
|
|
4
|
+
--accent-3: var(--sky-3);
|
|
5
|
+
--accent-4: var(--sky-4);
|
|
6
|
+
--accent-5: var(--sky-5);
|
|
7
|
+
--accent-6: var(--sky-6);
|
|
8
|
+
--accent-7: var(--sky-7);
|
|
9
|
+
--accent-8: var(--sky-8);
|
|
10
|
+
--accent-9: var(--sky-9);
|
|
11
|
+
--accent-10: var(--sky-10);
|
|
12
|
+
--accent-11: var(--sky-11);
|
|
13
|
+
--accent-12: var(--sky-12);
|
|
14
|
+
|
|
15
|
+
--accent-a1: var(--sky-a1);
|
|
16
|
+
--accent-a2: var(--sky-a2);
|
|
17
|
+
--accent-a3: var(--sky-a3);
|
|
18
|
+
--accent-a4: var(--sky-a4);
|
|
19
|
+
--accent-a5: var(--sky-a5);
|
|
20
|
+
--accent-a6: var(--sky-a6);
|
|
21
|
+
--accent-a7: var(--sky-a7);
|
|
22
|
+
--accent-a8: var(--sky-a8);
|
|
23
|
+
--accent-a9: var(--sky-a9);
|
|
24
|
+
--accent-a10: var(--sky-a10);
|
|
25
|
+
--accent-a11: var(--sky-a11);
|
|
26
|
+
--accent-a12: var(--sky-a12);
|
|
27
|
+
|
|
28
|
+
--accent-contrast: var(--sky-contrast);
|
|
29
|
+
--accent-surface: var(--sky-surface);
|
|
30
|
+
--accent-indicator: var(--sky-indicator);
|
|
31
|
+
--accent-track: var(--sky-track);
|
|
32
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
--color-slate-1: var(--slate-1);
|
|
3
|
+
--color-slate-2: var(--slate-2);
|
|
4
|
+
--color-slate-3: var(--slate-3);
|
|
5
|
+
--color-slate-4: var(--slate-4);
|
|
6
|
+
--color-slate-5: var(--slate-5);
|
|
7
|
+
--color-slate-6: var(--slate-6);
|
|
8
|
+
--color-slate-7: var(--slate-7);
|
|
9
|
+
--color-slate-8: var(--slate-8);
|
|
10
|
+
--color-slate-9: var(--slate-9);
|
|
11
|
+
--color-slate-10: var(--slate-10);
|
|
12
|
+
--color-slate-11: var(--slate-11);
|
|
13
|
+
--color-slate-12: var(--slate-12);
|
|
14
|
+
|
|
15
|
+
--color-slate-a1: var(--slate-a1);
|
|
16
|
+
--color-slate-a2: var(--slate-a2);
|
|
17
|
+
--color-slate-a3: var(--slate-a3);
|
|
18
|
+
--color-slate-a4: var(--slate-a4);
|
|
19
|
+
--color-slate-a5: var(--slate-a5);
|
|
20
|
+
--color-slate-a6: var(--slate-a6);
|
|
21
|
+
--color-slate-a7: var(--slate-a7);
|
|
22
|
+
--color-slate-a8: var(--slate-a8);
|
|
23
|
+
--color-slate-a9: var(--slate-a9);
|
|
24
|
+
--color-slate-a10: var(--slate-a10);
|
|
25
|
+
--color-slate-a11: var(--slate-a11);
|
|
26
|
+
--color-slate-a12: var(--slate-a12);
|
|
27
|
+
|
|
28
|
+
--color-slate-contrast: var(--slate-contrast);
|
|
29
|
+
--color-slate-surface: var(--slate-surface);
|
|
30
|
+
--color-slate-indicator: var(--slate-indicator);
|
|
31
|
+
--color-slate-track: var(--slate-track);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--slate-1: color(display-p3 0.988 0.988 0.992);
|
|
36
|
+
--slate-2: color(display-p3 0.976 0.976 0.984);
|
|
37
|
+
--slate-3: color(display-p3 0.94 0.941 0.953);
|
|
38
|
+
--slate-4: color(display-p3 0.908 0.909 0.925);
|
|
39
|
+
--slate-5: color(display-p3 0.88 0.881 0.901);
|
|
40
|
+
--slate-6: color(display-p3 0.85 0.852 0.876);
|
|
41
|
+
--slate-7: color(display-p3 0.805 0.808 0.838);
|
|
42
|
+
--slate-8: color(display-p3 0.727 0.733 0.773);
|
|
43
|
+
--slate-9: color(display-p3 0.547 0.553 0.592);
|
|
44
|
+
--slate-10: color(display-p3 0.503 0.512 0.549);
|
|
45
|
+
--slate-11: color(display-p3 0.379 0.392 0.421);
|
|
46
|
+
--slate-12: color(display-p3 0.113 0.125 0.14);
|
|
47
|
+
|
|
48
|
+
--slate-a1: color(display-p3 0.024 0.024 0.349 / 0.012);
|
|
49
|
+
--slate-a2: color(display-p3 0.024 0.024 0.349 / 0.024);
|
|
50
|
+
--slate-a3: color(display-p3 0.004 0.004 0.204 / 0.059);
|
|
51
|
+
--slate-a4: color(display-p3 0.012 0.012 0.184 / 0.091);
|
|
52
|
+
--slate-a5: color(display-p3 0.004 0.039 0.2 / 0.122);
|
|
53
|
+
--slate-a6: color(display-p3 0.008 0.008 0.165 / 0.15);
|
|
54
|
+
--slate-a7: color(display-p3 0.008 0.027 0.184 / 0.197);
|
|
55
|
+
--slate-a8: color(display-p3 0.004 0.031 0.176 / 0.275);
|
|
56
|
+
--slate-a9: color(display-p3 0.004 0.02 0.106 / 0.455);
|
|
57
|
+
--slate-a10: color(display-p3 0.004 0.027 0.098 / 0.499);
|
|
58
|
+
--slate-a11: color(display-p3 0 0.02 0.063 / 0.62);
|
|
59
|
+
--slate-a12: color(display-p3 0 0.012 0.031 / 0.887);
|
|
60
|
+
|
|
61
|
+
--slate-contrast: white;
|
|
62
|
+
--slate-surface: color(display-p3 1 1 1 / 0.8);
|
|
63
|
+
--slate-indicator: var(--slate-9);
|
|
64
|
+
--slate-track: var(--slate-9);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark {
|
|
68
|
+
--slate-1: color(display-p3 0.067 0.067 0.074);
|
|
69
|
+
--slate-2: color(display-p3 0.095 0.098 0.105);
|
|
70
|
+
--slate-3: color(display-p3 0.13 0.135 0.145);
|
|
71
|
+
--slate-4: color(display-p3 0.156 0.163 0.176);
|
|
72
|
+
--slate-5: color(display-p3 0.183 0.191 0.206);
|
|
73
|
+
--slate-6: color(display-p3 0.215 0.226 0.244);
|
|
74
|
+
--slate-7: color(display-p3 0.265 0.28 0.302);
|
|
75
|
+
--slate-8: color(display-p3 0.357 0.381 0.409);
|
|
76
|
+
--slate-9: color(display-p3 0.415 0.431 0.463);
|
|
77
|
+
--slate-10: color(display-p3 0.469 0.483 0.514);
|
|
78
|
+
--slate-11: color(display-p3 0.692 0.704 0.728);
|
|
79
|
+
--slate-12: color(display-p3 0.93 0.933 0.94);
|
|
80
|
+
|
|
81
|
+
--slate-a1: color(display-p3 0 0 0 / 0);
|
|
82
|
+
--slate-a2: color(display-p3 0.875 0.992 1 / 0.034);
|
|
83
|
+
--slate-a3: color(display-p3 0.882 0.933 0.992 / 0.077);
|
|
84
|
+
--slate-a4: color(display-p3 0.882 0.953 0.996 / 0.111);
|
|
85
|
+
--slate-a5: color(display-p3 0.878 0.929 0.996 / 0.145);
|
|
86
|
+
--slate-a6: color(display-p3 0.882 0.949 0.996 / 0.183);
|
|
87
|
+
--slate-a7: color(display-p3 0.882 0.929 1 / 0.246);
|
|
88
|
+
--slate-a8: color(display-p3 0.871 0.937 1 / 0.361);
|
|
89
|
+
--slate-a9: color(display-p3 0.898 0.937 1 / 0.42);
|
|
90
|
+
--slate-a10: color(display-p3 0.918 0.945 1 / 0.475);
|
|
91
|
+
--slate-a11: color(display-p3 0.949 0.969 0.996 / 0.708);
|
|
92
|
+
--slate-a12: color(display-p3 0.988 0.992 1 / 0.937);
|
|
93
|
+
|
|
94
|
+
--slate-surface: color(display-p3 0.1176 0.1255 0.1333 / 0.5);
|
|
95
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-accent-color='slate'] {
|
|
2
|
+
--accent-1: var(--slate-1);
|
|
3
|
+
--accent-2: var(--slate-2);
|
|
4
|
+
--accent-3: var(--slate-3);
|
|
5
|
+
--accent-4: var(--slate-4);
|
|
6
|
+
--accent-5: var(--slate-5);
|
|
7
|
+
--accent-6: var(--slate-6);
|
|
8
|
+
--accent-7: var(--slate-7);
|
|
9
|
+
--accent-8: var(--slate-8);
|
|
10
|
+
--accent-9: var(--slate-9);
|
|
11
|
+
--accent-10: var(--slate-10);
|
|
12
|
+
--accent-11: var(--slate-11);
|
|
13
|
+
--accent-12: var(--slate-12);
|
|
14
|
+
|
|
15
|
+
--accent-a1: var(--slate-a1);
|
|
16
|
+
--accent-a2: var(--slate-a2);
|
|
17
|
+
--accent-a3: var(--slate-a3);
|
|
18
|
+
--accent-a4: var(--slate-a4);
|
|
19
|
+
--accent-a5: var(--slate-a5);
|
|
20
|
+
--accent-a6: var(--slate-a6);
|
|
21
|
+
--accent-a7: var(--slate-a7);
|
|
22
|
+
--accent-a8: var(--slate-a8);
|
|
23
|
+
--accent-a9: var(--slate-a9);
|
|
24
|
+
--accent-a10: var(--slate-a10);
|
|
25
|
+
--accent-a11: var(--slate-a11);
|
|
26
|
+
--accent-a12: var(--slate-a12);
|
|
27
|
+
|
|
28
|
+
--accent-contrast: var(--slate-contrast);
|
|
29
|
+
--accent-surface: var(--slate-surface);
|
|
30
|
+
--accent-indicator: var(--slate-indicator);
|
|
31
|
+
--accent-track: var(--slate-track);
|
|
32
|
+
}
|
package/dist/teal-p3.css
ADDED
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
--color-teal-1: var(--teal-1);
|
|
3
|
+
--color-teal-2: var(--teal-2);
|
|
4
|
+
--color-teal-3: var(--teal-3);
|
|
5
|
+
--color-teal-4: var(--teal-4);
|
|
6
|
+
--color-teal-5: var(--teal-5);
|
|
7
|
+
--color-teal-6: var(--teal-6);
|
|
8
|
+
--color-teal-7: var(--teal-7);
|
|
9
|
+
--color-teal-8: var(--teal-8);
|
|
10
|
+
--color-teal-9: var(--teal-9);
|
|
11
|
+
--color-teal-10: var(--teal-10);
|
|
12
|
+
--color-teal-11: var(--teal-11);
|
|
13
|
+
--color-teal-12: var(--teal-12);
|
|
14
|
+
|
|
15
|
+
--color-teal-a1: var(--teal-a1);
|
|
16
|
+
--color-teal-a2: var(--teal-a2);
|
|
17
|
+
--color-teal-a3: var(--teal-a3);
|
|
18
|
+
--color-teal-a4: var(--teal-a4);
|
|
19
|
+
--color-teal-a5: var(--teal-a5);
|
|
20
|
+
--color-teal-a6: var(--teal-a6);
|
|
21
|
+
--color-teal-a7: var(--teal-a7);
|
|
22
|
+
--color-teal-a8: var(--teal-a8);
|
|
23
|
+
--color-teal-a9: var(--teal-a9);
|
|
24
|
+
--color-teal-a10: var(--teal-a10);
|
|
25
|
+
--color-teal-a11: var(--teal-a11);
|
|
26
|
+
--color-teal-a12: var(--teal-a12);
|
|
27
|
+
|
|
28
|
+
--color-teal-contrast: var(--teal-contrast);
|
|
29
|
+
--color-teal-surface: var(--teal-surface);
|
|
30
|
+
--color-teal-indicator: var(--teal-indicator);
|
|
31
|
+
--color-teal-track: var(--teal-track);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--teal-1: color(display-p3 0.983 0.996 0.992);
|
|
36
|
+
--teal-2: color(display-p3 0.958 0.983 0.976);
|
|
37
|
+
--teal-3: color(display-p3 0.895 0.971 0.952);
|
|
38
|
+
--teal-4: color(display-p3 0.831 0.949 0.92);
|
|
39
|
+
--teal-5: color(display-p3 0.761 0.914 0.878);
|
|
40
|
+
--teal-6: color(display-p3 0.682 0.864 0.825);
|
|
41
|
+
--teal-7: color(display-p3 0.581 0.798 0.756);
|
|
42
|
+
--teal-8: color(display-p3 0.433 0.716 0.671);
|
|
43
|
+
--teal-9: color(display-p3 0.297 0.637 0.581);
|
|
44
|
+
--teal-10: color(display-p3 0.275 0.599 0.542);
|
|
45
|
+
--teal-11: color(display-p3 0.08 0.5 0.43);
|
|
46
|
+
--teal-12: color(display-p3 0.11 0.235 0.219);
|
|
47
|
+
|
|
48
|
+
--teal-a1: color(display-p3 0.024 0.757 0.514 / 0.016);
|
|
49
|
+
--teal-a2: color(display-p3 0.02 0.647 0.467 / 0.044);
|
|
50
|
+
--teal-a3: color(display-p3 0.004 0.741 0.557 / 0.106);
|
|
51
|
+
--teal-a4: color(display-p3 0.004 0.702 0.537 / 0.169);
|
|
52
|
+
--teal-a5: color(display-p3 0.004 0.643 0.494 / 0.24);
|
|
53
|
+
--teal-a6: color(display-p3 0.004 0.569 0.447 / 0.318);
|
|
54
|
+
--teal-a7: color(display-p3 0.004 0.518 0.424 / 0.42);
|
|
55
|
+
--teal-a8: color(display-p3 0 0.506 0.424 / 0.569);
|
|
56
|
+
--teal-a9: color(display-p3 0 0.482 0.404 / 0.702);
|
|
57
|
+
--teal-a10: color(display-p3 0 0.451 0.369 / 0.726);
|
|
58
|
+
--teal-a11: color(display-p3 0.08 0.5 0.43);
|
|
59
|
+
--teal-a12: color(display-p3 0.11 0.235 0.219);
|
|
60
|
+
|
|
61
|
+
--teal-contrast: white;
|
|
62
|
+
--teal-surface: color(display-p3 0.9451 0.9804 0.9725 / 0.8);
|
|
63
|
+
--teal-indicator: var(--teal-9);
|
|
64
|
+
--teal-track: var(--teal-9);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark {
|
|
68
|
+
--teal-1: color(display-p3 0.059 0.083 0.079);
|
|
69
|
+
--teal-2: color(display-p3 0.075 0.11 0.107);
|
|
70
|
+
--teal-3: color(display-p3 0.087 0.175 0.165);
|
|
71
|
+
--teal-4: color(display-p3 0.087 0.227 0.214);
|
|
72
|
+
--teal-5: color(display-p3 0.12 0.277 0.261);
|
|
73
|
+
--teal-6: color(display-p3 0.162 0.335 0.314);
|
|
74
|
+
--teal-7: color(display-p3 0.205 0.406 0.379);
|
|
75
|
+
--teal-8: color(display-p3 0.245 0.489 0.453);
|
|
76
|
+
--teal-9: color(display-p3 0.297 0.637 0.581);
|
|
77
|
+
--teal-10: color(display-p3 0.319 0.69 0.62);
|
|
78
|
+
--teal-11: color(display-p3 0.388 0.835 0.719);
|
|
79
|
+
--teal-12: color(display-p3 0.734 0.934 0.87);
|
|
80
|
+
|
|
81
|
+
--teal-a1: color(display-p3 0 0.992 0.761 / 0.017);
|
|
82
|
+
--teal-a2: color(display-p3 0.235 0.988 0.902 / 0.047);
|
|
83
|
+
--teal-a3: color(display-p3 0.235 1 0.898 / 0.118);
|
|
84
|
+
--teal-a4: color(display-p3 0.18 0.996 0.929 / 0.173);
|
|
85
|
+
--teal-a5: color(display-p3 0.31 1 0.933 / 0.227);
|
|
86
|
+
--teal-a6: color(display-p3 0.396 1 0.933 / 0.286);
|
|
87
|
+
--teal-a7: color(display-p3 0.443 1 0.925 / 0.366);
|
|
88
|
+
--teal-a8: color(display-p3 0.459 1 0.925 / 0.454);
|
|
89
|
+
--teal-a9: color(display-p3 0.443 0.996 0.906 / 0.61);
|
|
90
|
+
--teal-a10: color(display-p3 0.439 0.996 0.89 / 0.669);
|
|
91
|
+
--teal-a11: color(display-p3 0.388 0.835 0.719);
|
|
92
|
+
--teal-a12: color(display-p3 0.734 0.934 0.87);
|
|
93
|
+
|
|
94
|
+
--teal-surface: color(display-p3 0.0863 0.149 0.1412 / 0.5);
|
|
95
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-accent-color='teal'] {
|
|
2
|
+
--accent-1: var(--teal-1);
|
|
3
|
+
--accent-2: var(--teal-2);
|
|
4
|
+
--accent-3: var(--teal-3);
|
|
5
|
+
--accent-4: var(--teal-4);
|
|
6
|
+
--accent-5: var(--teal-5);
|
|
7
|
+
--accent-6: var(--teal-6);
|
|
8
|
+
--accent-7: var(--teal-7);
|
|
9
|
+
--accent-8: var(--teal-8);
|
|
10
|
+
--accent-9: var(--teal-9);
|
|
11
|
+
--accent-10: var(--teal-10);
|
|
12
|
+
--accent-11: var(--teal-11);
|
|
13
|
+
--accent-12: var(--teal-12);
|
|
14
|
+
|
|
15
|
+
--accent-a1: var(--teal-a1);
|
|
16
|
+
--accent-a2: var(--teal-a2);
|
|
17
|
+
--accent-a3: var(--teal-a3);
|
|
18
|
+
--accent-a4: var(--teal-a4);
|
|
19
|
+
--accent-a5: var(--teal-a5);
|
|
20
|
+
--accent-a6: var(--teal-a6);
|
|
21
|
+
--accent-a7: var(--teal-a7);
|
|
22
|
+
--accent-a8: var(--teal-a8);
|
|
23
|
+
--accent-a9: var(--teal-a9);
|
|
24
|
+
--accent-a10: var(--teal-a10);
|
|
25
|
+
--accent-a11: var(--teal-a11);
|
|
26
|
+
--accent-a12: var(--teal-a12);
|
|
27
|
+
|
|
28
|
+
--accent-contrast: var(--teal-contrast);
|
|
29
|
+
--accent-surface: var(--teal-surface);
|
|
30
|
+
--accent-indicator: var(--teal-indicator);
|
|
31
|
+
--accent-track: var(--teal-track);
|
|
32
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
--color-tomato-1: var(--tomato-1);
|
|
3
|
+
--color-tomato-2: var(--tomato-2);
|
|
4
|
+
--color-tomato-3: var(--tomato-3);
|
|
5
|
+
--color-tomato-4: var(--tomato-4);
|
|
6
|
+
--color-tomato-5: var(--tomato-5);
|
|
7
|
+
--color-tomato-6: var(--tomato-6);
|
|
8
|
+
--color-tomato-7: var(--tomato-7);
|
|
9
|
+
--color-tomato-8: var(--tomato-8);
|
|
10
|
+
--color-tomato-9: var(--tomato-9);
|
|
11
|
+
--color-tomato-10: var(--tomato-10);
|
|
12
|
+
--color-tomato-11: var(--tomato-11);
|
|
13
|
+
--color-tomato-12: var(--tomato-12);
|
|
14
|
+
|
|
15
|
+
--color-tomato-a1: var(--tomato-a1);
|
|
16
|
+
--color-tomato-a2: var(--tomato-a2);
|
|
17
|
+
--color-tomato-a3: var(--tomato-a3);
|
|
18
|
+
--color-tomato-a4: var(--tomato-a4);
|
|
19
|
+
--color-tomato-a5: var(--tomato-a5);
|
|
20
|
+
--color-tomato-a6: var(--tomato-a6);
|
|
21
|
+
--color-tomato-a7: var(--tomato-a7);
|
|
22
|
+
--color-tomato-a8: var(--tomato-a8);
|
|
23
|
+
--color-tomato-a9: var(--tomato-a9);
|
|
24
|
+
--color-tomato-a10: var(--tomato-a10);
|
|
25
|
+
--color-tomato-a11: var(--tomato-a11);
|
|
26
|
+
--color-tomato-a12: var(--tomato-a12);
|
|
27
|
+
|
|
28
|
+
--color-tomato-contrast: var(--tomato-contrast);
|
|
29
|
+
--color-tomato-surface: var(--tomato-surface);
|
|
30
|
+
--color-tomato-indicator: var(--tomato-indicator);
|
|
31
|
+
--color-tomato-track: var(--tomato-track);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--tomato-1: color(display-p3 0.998 0.989 0.988);
|
|
36
|
+
--tomato-2: color(display-p3 0.994 0.974 0.969);
|
|
37
|
+
--tomato-3: color(display-p3 0.985 0.924 0.909);
|
|
38
|
+
--tomato-4: color(display-p3 0.996 0.868 0.835);
|
|
39
|
+
--tomato-5: color(display-p3 0.98 0.812 0.77);
|
|
40
|
+
--tomato-6: color(display-p3 0.953 0.75 0.698);
|
|
41
|
+
--tomato-7: color(display-p3 0.917 0.673 0.611);
|
|
42
|
+
--tomato-8: color(display-p3 0.875 0.575 0.502);
|
|
43
|
+
--tomato-9: color(display-p3 0.831 0.345 0.231);
|
|
44
|
+
--tomato-10: color(display-p3 0.802 0.313 0.2);
|
|
45
|
+
--tomato-11: color(display-p3 0.755 0.259 0.152);
|
|
46
|
+
--tomato-12: color(display-p3 0.335 0.165 0.132);
|
|
47
|
+
|
|
48
|
+
--tomato-a1: color(display-p3 0.675 0.024 0.024 / 0.012);
|
|
49
|
+
--tomato-a2: color(display-p3 0.757 0.145 0.02 / 0.032);
|
|
50
|
+
--tomato-a3: color(display-p3 0.831 0.184 0.012 / 0.091);
|
|
51
|
+
--tomato-a4: color(display-p3 0.976 0.192 0.004 / 0.165);
|
|
52
|
+
--tomato-a5: color(display-p3 0.918 0.192 0.004 / 0.232);
|
|
53
|
+
--tomato-a6: color(display-p3 0.847 0.173 0.004 / 0.302);
|
|
54
|
+
--tomato-a7: color(display-p3 0.788 0.165 0.004 / 0.389);
|
|
55
|
+
--tomato-a8: color(display-p3 0.749 0.153 0.004 / 0.499);
|
|
56
|
+
--tomato-a9: color(display-p3 0.78 0.149 0 / 0.769);
|
|
57
|
+
--tomato-a10: color(display-p3 0.757 0.141 0 / 0.8);
|
|
58
|
+
--tomato-a11: color(display-p3 0.755 0.259 0.152);
|
|
59
|
+
--tomato-a12: color(display-p3 0.335 0.165 0.132);
|
|
60
|
+
|
|
61
|
+
--tomato-contrast: white;
|
|
62
|
+
--tomato-surface: color(display-p3 0.9922 0.9647 0.9608 / 0.8);
|
|
63
|
+
--tomato-indicator: var(--tomato-9);
|
|
64
|
+
--tomato-track: var(--tomato-9);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark {
|
|
68
|
+
--tomato-1: color(display-p3 0.09 0.068 0.067);
|
|
69
|
+
--tomato-2: color(display-p3 0.115 0.084 0.076);
|
|
70
|
+
--tomato-3: color(display-p3 0.205 0.097 0.083);
|
|
71
|
+
--tomato-4: color(display-p3 0.282 0.099 0.077);
|
|
72
|
+
--tomato-5: color(display-p3 0.339 0.129 0.101);
|
|
73
|
+
--tomato-6: color(display-p3 0.398 0.179 0.141);
|
|
74
|
+
--tomato-7: color(display-p3 0.487 0.245 0.194);
|
|
75
|
+
--tomato-8: color(display-p3 0.629 0.322 0.248);
|
|
76
|
+
--tomato-9: color(display-p3 0.831 0.345 0.231);
|
|
77
|
+
--tomato-10: color(display-p3 0.862 0.415 0.298);
|
|
78
|
+
--tomato-11: color(display-p3 1 0.585 0.455);
|
|
79
|
+
--tomato-12: color(display-p3 0.959 0.833 0.802);
|
|
80
|
+
|
|
81
|
+
--tomato-a1: color(display-p3 0.973 0.071 0.071 / 0.026);
|
|
82
|
+
--tomato-a2: color(display-p3 0.992 0.376 0.224 / 0.051);
|
|
83
|
+
--tomato-a3: color(display-p3 0.996 0.282 0.176 / 0.148);
|
|
84
|
+
--tomato-a4: color(display-p3 1 0.204 0.118 / 0.232);
|
|
85
|
+
--tomato-a5: color(display-p3 1 0.286 0.192 / 0.29);
|
|
86
|
+
--tomato-a6: color(display-p3 1 0.392 0.278 / 0.353);
|
|
87
|
+
--tomato-a7: color(display-p3 1 0.459 0.349 / 0.45);
|
|
88
|
+
--tomato-a8: color(display-p3 1 0.49 0.369 / 0.601);
|
|
89
|
+
--tomato-a9: color(display-p3 1 0.408 0.267 / 0.82);
|
|
90
|
+
--tomato-a10: color(display-p3 1 0.478 0.341 / 0.853);
|
|
91
|
+
--tomato-a11: color(display-p3 1 0.585 0.455);
|
|
92
|
+
--tomato-a12: color(display-p3 0.959 0.833 0.802);
|
|
93
|
+
|
|
94
|
+
--tomato-surface: color(display-p3 0.1569 0.0941 0.0784 / 0.5);
|
|
95
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-accent-color='tomato'] {
|
|
2
|
+
--accent-1: var(--tomato-1);
|
|
3
|
+
--accent-2: var(--tomato-2);
|
|
4
|
+
--accent-3: var(--tomato-3);
|
|
5
|
+
--accent-4: var(--tomato-4);
|
|
6
|
+
--accent-5: var(--tomato-5);
|
|
7
|
+
--accent-6: var(--tomato-6);
|
|
8
|
+
--accent-7: var(--tomato-7);
|
|
9
|
+
--accent-8: var(--tomato-8);
|
|
10
|
+
--accent-9: var(--tomato-9);
|
|
11
|
+
--accent-10: var(--tomato-10);
|
|
12
|
+
--accent-11: var(--tomato-11);
|
|
13
|
+
--accent-12: var(--tomato-12);
|
|
14
|
+
|
|
15
|
+
--accent-a1: var(--tomato-a1);
|
|
16
|
+
--accent-a2: var(--tomato-a2);
|
|
17
|
+
--accent-a3: var(--tomato-a3);
|
|
18
|
+
--accent-a4: var(--tomato-a4);
|
|
19
|
+
--accent-a5: var(--tomato-a5);
|
|
20
|
+
--accent-a6: var(--tomato-a6);
|
|
21
|
+
--accent-a7: var(--tomato-a7);
|
|
22
|
+
--accent-a8: var(--tomato-a8);
|
|
23
|
+
--accent-a9: var(--tomato-a9);
|
|
24
|
+
--accent-a10: var(--tomato-a10);
|
|
25
|
+
--accent-a11: var(--tomato-a11);
|
|
26
|
+
--accent-a12: var(--tomato-a12);
|
|
27
|
+
|
|
28
|
+
--accent-contrast: var(--tomato-contrast);
|
|
29
|
+
--accent-surface: var(--tomato-surface);
|
|
30
|
+
--accent-indicator: var(--tomato-indicator);
|
|
31
|
+
--accent-track: var(--tomato-track);
|
|
32
|
+
}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
@theme static {
|
|
2
|
+
--color-violet-1: var(--violet-1);
|
|
3
|
+
--color-violet-2: var(--violet-2);
|
|
4
|
+
--color-violet-3: var(--violet-3);
|
|
5
|
+
--color-violet-4: var(--violet-4);
|
|
6
|
+
--color-violet-5: var(--violet-5);
|
|
7
|
+
--color-violet-6: var(--violet-6);
|
|
8
|
+
--color-violet-7: var(--violet-7);
|
|
9
|
+
--color-violet-8: var(--violet-8);
|
|
10
|
+
--color-violet-9: var(--violet-9);
|
|
11
|
+
--color-violet-10: var(--violet-10);
|
|
12
|
+
--color-violet-11: var(--violet-11);
|
|
13
|
+
--color-violet-12: var(--violet-12);
|
|
14
|
+
|
|
15
|
+
--color-violet-a1: var(--violet-a1);
|
|
16
|
+
--color-violet-a2: var(--violet-a2);
|
|
17
|
+
--color-violet-a3: var(--violet-a3);
|
|
18
|
+
--color-violet-a4: var(--violet-a4);
|
|
19
|
+
--color-violet-a5: var(--violet-a5);
|
|
20
|
+
--color-violet-a6: var(--violet-a6);
|
|
21
|
+
--color-violet-a7: var(--violet-a7);
|
|
22
|
+
--color-violet-a8: var(--violet-a8);
|
|
23
|
+
--color-violet-a9: var(--violet-a9);
|
|
24
|
+
--color-violet-a10: var(--violet-a10);
|
|
25
|
+
--color-violet-a11: var(--violet-a11);
|
|
26
|
+
--color-violet-a12: var(--violet-a12);
|
|
27
|
+
|
|
28
|
+
--color-violet-contrast: var(--violet-contrast);
|
|
29
|
+
--color-violet-surface: var(--violet-surface);
|
|
30
|
+
--color-violet-indicator: var(--violet-indicator);
|
|
31
|
+
--color-violet-track: var(--violet-track);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
:root {
|
|
35
|
+
--violet-1: color(display-p3 0.991 0.988 0.995);
|
|
36
|
+
--violet-2: color(display-p3 0.978 0.974 0.998);
|
|
37
|
+
--violet-3: color(display-p3 0.953 0.943 0.993);
|
|
38
|
+
--violet-4: color(display-p3 0.916 0.897 1);
|
|
39
|
+
--violet-5: color(display-p3 0.876 0.851 1);
|
|
40
|
+
--violet-6: color(display-p3 0.825 0.793 0.981);
|
|
41
|
+
--violet-7: color(display-p3 0.752 0.712 0.943);
|
|
42
|
+
--violet-8: color(display-p3 0.654 0.602 0.902);
|
|
43
|
+
--violet-9: color(display-p3 0.417 0.341 0.784);
|
|
44
|
+
--violet-10: color(display-p3 0.381 0.306 0.741);
|
|
45
|
+
--violet-11: color(display-p3 0.383 0.317 0.702);
|
|
46
|
+
--violet-12: color(display-p3 0.179 0.15 0.359);
|
|
47
|
+
|
|
48
|
+
--violet-a1: color(display-p3 0.349 0.024 0.675 / 0.012);
|
|
49
|
+
--violet-a2: color(display-p3 0.161 0.024 0.863 / 0.028);
|
|
50
|
+
--violet-a3: color(display-p3 0.204 0.004 0.871 / 0.059);
|
|
51
|
+
--violet-a4: color(display-p3 0.196 0.004 1 / 0.102);
|
|
52
|
+
--violet-a5: color(display-p3 0.165 0.008 1 / 0.15);
|
|
53
|
+
--violet-a6: color(display-p3 0.153 0.004 0.906 / 0.208);
|
|
54
|
+
--violet-a7: color(display-p3 0.141 0.004 0.796 / 0.287);
|
|
55
|
+
--violet-a8: color(display-p3 0.133 0.004 0.753 / 0.397);
|
|
56
|
+
--violet-a9: color(display-p3 0.114 0 0.675 / 0.659);
|
|
57
|
+
--violet-a10: color(display-p3 0.11 0 0.627 / 0.695);
|
|
58
|
+
--violet-a11: color(display-p3 0.383 0.317 0.702);
|
|
59
|
+
--violet-a12: color(display-p3 0.179 0.15 0.359);
|
|
60
|
+
|
|
61
|
+
--violet-contrast: white;
|
|
62
|
+
--violet-surface: color(display-p3 0.9725 0.9647 0.9961 / 0.8);
|
|
63
|
+
--violet-indicator: var(--violet-9);
|
|
64
|
+
--violet-track: var(--violet-9);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark {
|
|
68
|
+
--violet-1: color(display-p3 0.077 0.071 0.118);
|
|
69
|
+
--violet-2: color(display-p3 0.101 0.084 0.141);
|
|
70
|
+
--violet-3: color(display-p3 0.154 0.123 0.256);
|
|
71
|
+
--violet-4: color(display-p3 0.191 0.148 0.345);
|
|
72
|
+
--violet-5: color(display-p3 0.226 0.182 0.396);
|
|
73
|
+
--violet-6: color(display-p3 0.269 0.223 0.449);
|
|
74
|
+
--violet-7: color(display-p3 0.326 0.277 0.53);
|
|
75
|
+
--violet-8: color(display-p3 0.399 0.346 0.656);
|
|
76
|
+
--violet-9: color(display-p3 0.417 0.341 0.784);
|
|
77
|
+
--violet-10: color(display-p3 0.477 0.402 0.823);
|
|
78
|
+
--violet-11: color(display-p3 0.72 0.65 1);
|
|
79
|
+
--violet-12: color(display-p3 0.883 0.867 0.986);
|
|
80
|
+
|
|
81
|
+
--violet-a1: color(display-p3 0.282 0.141 0.996 / 0.055);
|
|
82
|
+
--violet-a2: color(display-p3 0.51 0.263 1 / 0.08);
|
|
83
|
+
--violet-a3: color(display-p3 0.494 0.337 0.996 / 0.202);
|
|
84
|
+
--violet-a4: color(display-p3 0.49 0.345 1 / 0.299);
|
|
85
|
+
--violet-a5: color(display-p3 0.525 0.392 1 / 0.353);
|
|
86
|
+
--violet-a6: color(display-p3 0.569 0.455 1 / 0.408);
|
|
87
|
+
--violet-a7: color(display-p3 0.588 0.494 1 / 0.496);
|
|
88
|
+
--violet-a8: color(display-p3 0.596 0.51 1 / 0.631);
|
|
89
|
+
--violet-a9: color(display-p3 0.522 0.424 1 / 0.769);
|
|
90
|
+
--violet-a10: color(display-p3 0.576 0.482 1 / 0.811);
|
|
91
|
+
--violet-a11: color(display-p3 0.72 0.65 1);
|
|
92
|
+
--violet-a12: color(display-p3 0.883 0.867 0.986);
|
|
93
|
+
|
|
94
|
+
--violet-surface: color(display-p3 0.1333 0.102 0.2118 / 0.5);
|
|
95
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
[data-accent-color='violet'] {
|
|
2
|
+
--accent-1: var(--violet-1);
|
|
3
|
+
--accent-2: var(--violet-2);
|
|
4
|
+
--accent-3: var(--violet-3);
|
|
5
|
+
--accent-4: var(--violet-4);
|
|
6
|
+
--accent-5: var(--violet-5);
|
|
7
|
+
--accent-6: var(--violet-6);
|
|
8
|
+
--accent-7: var(--violet-7);
|
|
9
|
+
--accent-8: var(--violet-8);
|
|
10
|
+
--accent-9: var(--violet-9);
|
|
11
|
+
--accent-10: var(--violet-10);
|
|
12
|
+
--accent-11: var(--violet-11);
|
|
13
|
+
--accent-12: var(--violet-12);
|
|
14
|
+
|
|
15
|
+
--accent-a1: var(--violet-a1);
|
|
16
|
+
--accent-a2: var(--violet-a2);
|
|
17
|
+
--accent-a3: var(--violet-a3);
|
|
18
|
+
--accent-a4: var(--violet-a4);
|
|
19
|
+
--accent-a5: var(--violet-a5);
|
|
20
|
+
--accent-a6: var(--violet-a6);
|
|
21
|
+
--accent-a7: var(--violet-a7);
|
|
22
|
+
--accent-a8: var(--violet-a8);
|
|
23
|
+
--accent-a9: var(--violet-a9);
|
|
24
|
+
--accent-a10: var(--violet-a10);
|
|
25
|
+
--accent-a11: var(--violet-a11);
|
|
26
|
+
--accent-a12: var(--violet-a12);
|
|
27
|
+
|
|
28
|
+
--accent-contrast: var(--violet-contrast);
|
|
29
|
+
--accent-surface: var(--violet-surface);
|
|
30
|
+
--accent-indicator: var(--violet-indicator);
|
|
31
|
+
--accent-track: var(--violet-track);
|
|
32
|
+
}
|