@troennes/minium 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,128 @@
1
+ @layer tokens, theme, reset, base, layout, components, project, utilities;
2
+
3
+ /* Theme: iris (neutral: slate, primary: iris, accent: plum, 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: iris */
23
+ --primary-7: light-dark(#b8baf8, #4a4a95);
24
+ --primary-9: light-dark(#5b5bd6, #5b5bd6);
25
+ --primary-10: light-dark(#5151cd, #6e6ade);
26
+ --primary-11: light-dark(#5753c6, #b1a9ff);
27
+ --primary-a2: light-dark(#0000ff07, #564bf916);
28
+ --primary-a3: light-dark(#0011ee0f, #525bff3b);
29
+ --primary-a4: light-dark(#000bff19, #4d58ff5a);
30
+ --primary-a5: light-dark(#000eff25, #5b62fd6b);
31
+ --primary-a6: light-dark(#000aff34, #6d6ffd7a);
32
+ --primary-a7: light-dark(#0008e647, #7777fe8e);
33
+ --primary-a11: light-dark(#0600abac, #b1a9ff);
34
+ --primary-text: var(--primary-11);
35
+ --primary-inverse: white;
36
+
37
+ /* accent: plum */
38
+ --accent-7: light-dark(#deade3, #734079);
39
+ --accent-9: light-dark(#ab4aba, #ab4aba);
40
+ --accent-10: light-dark(#a144af, #b658c4);
41
+ --accent-11: light-dark(#953ea3, #e796f3);
42
+ --accent-a2: light-dark(#c000c008, #f22ff211);
43
+ --accent-a3: light-dark(#cc00cc14, #fd4cfd27);
44
+ --accent-a4: light-dark(#c200c921, #f646ff3a);
45
+ --accent-a5: light-dark(#b700bd2e, #f455ff48);
46
+ --accent-a6: light-dark(#a400b03d, #f66dff56);
47
+ --accent-a7: light-dark(#9900a852, #f07cfd70);
48
+ --accent-a11: light-dark(#730086c1, #f19cfef3);
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
+
68
+ @supports (color: color(display-p3 1 1 1)) {
69
+ @media (color-gamut: p3) {
70
+ :root {
71
+ /* neutral: slate */
72
+ --neutral-1: light-dark(color(display-p3 0.988 0.988 0.992), color(display-p3 0.067 0.067 0.074));
73
+ --neutral-2: light-dark(color(display-p3 0.976 0.976 0.984), color(display-p3 0.095 0.098 0.105));
74
+ --neutral-3: light-dark(color(display-p3 0.94 0.941 0.953), color(display-p3 0.13 0.135 0.145));
75
+ --neutral-4: light-dark(color(display-p3 0.908 0.909 0.925), color(display-p3 0.156 0.163 0.176));
76
+ --neutral-5: light-dark(color(display-p3 0.88 0.881 0.901), color(display-p3 0.183 0.191 0.206));
77
+ --neutral-8: light-dark(color(display-p3 0.727 0.733 0.773), color(display-p3 0.357 0.381 0.409));
78
+ --neutral-11: light-dark(color(display-p3 0.379 0.392 0.421), color(display-p3 0.692 0.704 0.728));
79
+ --neutral-12: light-dark(color(display-p3 0.113 0.125 0.14), color(display-p3 0.93 0.933 0.94));
80
+ --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));
81
+ --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));
82
+ --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));
83
+ --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));
84
+ --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));
85
+ --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));
86
+
87
+ /* primary: iris */
88
+ --primary-7: light-dark(color(display-p3 0.721 0.727 0.955), color(display-p3 0.291 0.289 0.565));
89
+ --primary-9: light-dark(color(display-p3 0.357 0.357 0.81), color(display-p3 0.357 0.357 0.81));
90
+ --primary-10: light-dark(color(display-p3 0.318 0.318 0.774), color(display-p3 0.428 0.416 0.843));
91
+ --primary-11: light-dark(color(display-p3 0.337 0.326 0.748), color(display-p3 0.685 0.662 1));
92
+ --primary-a2: light-dark(color(display-p3 0.024 0.024 0.863 / 0.028), color(display-p3 0.361 0.314 1 / 0.08));
93
+ --primary-a3: light-dark(color(display-p3 0.004 0.071 0.871 / 0.059), color(display-p3 0.357 0.373 1 / 0.219));
94
+ --primary-a4: light-dark(color(display-p3 0.012 0.051 1 / 0.099), color(display-p3 0.325 0.361 1 / 0.337));
95
+ --primary-a5: light-dark(color(display-p3 0.008 0.035 1 / 0.142), color(display-p3 0.38 0.4 1 / 0.4));
96
+ --primary-a6: light-dark(color(display-p3 0 0.02 0.941 / 0.2), color(display-p3 0.447 0.447 1 / 0.454));
97
+ --primary-a7: light-dark(color(display-p3 0.004 0.02 0.847 / 0.279), color(display-p3 0.486 0.486 1 / 0.534));
98
+ --primary-a11: light-dark(color(display-p3 0.337 0.326 0.748), color(display-p3 0.685 0.662 1));
99
+
100
+ /* accent: plum */
101
+ --accent-7: light-dark(color(display-p3 0.84 0.686 0.877), color(display-p3 0.424 0.262 0.461));
102
+ --accent-9: light-dark(color(display-p3 0.624 0.313 0.708), color(display-p3 0.624 0.313 0.708));
103
+ --accent-10: light-dark(color(display-p3 0.587 0.29 0.667), color(display-p3 0.666 0.365 0.748));
104
+ --accent-11: light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933));
105
+ --accent-a2: light-dark(color(display-p3 0.58 0.024 0.58 / 0.028), color(display-p3 0.933 0.267 1 / 0.059));
106
+ --accent-a3: light-dark(color(display-p3 0.655 0.008 0.753 / 0.079), color(display-p3 0.918 0.333 0.996 / 0.148));
107
+ --accent-a4: light-dark(color(display-p3 0.627 0.008 0.722 / 0.126), color(display-p3 0.91 0.318 1 / 0.219));
108
+ --accent-a5: light-dark(color(display-p3 0.58 0.004 0.69 / 0.177), color(display-p3 0.914 0.388 1 / 0.269));
109
+ --accent-a6: light-dark(color(display-p3 0.537 0.004 0.655 / 0.236), color(display-p3 0.906 0.463 1 / 0.328));
110
+ --accent-a7: light-dark(color(display-p3 0.49 0.004 0.616 / 0.314), color(display-p3 0.906 0.529 1 / 0.425));
111
+ --accent-a11: light-dark(color(display-p3 0.543 0.263 0.619), color(display-p3 0.86 0.602 0.933));
112
+
113
+ /* info: sky */
114
+ --info-7: light-dark(color(display-p3 0.604 0.785 0.879), color(display-p3 0.205 0.394 0.557));
115
+ --info-9: light-dark(color(display-p3 0.585 0.877 0.983), color(display-p3 0.585 0.877 0.983));
116
+ --info-10: light-dark(color(display-p3 0.555 0.845 0.959), color(display-p3 0.718 0.925 0.991));
117
+ --info-11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
118
+ --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));
119
+ --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));
120
+ --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));
121
+ --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));
122
+ --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));
123
+ --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));
124
+ --info-a11: light-dark(color(display-p3 0.193 0.448 0.605), color(display-p3 0.536 0.772 0.924));
125
+ }
126
+ }
127
+ }
128
+ }
@@ -0,0 +1,160 @@
1
+ @layer tokens, theme, reset, base, layout, components, project, utilities;
2
+
3
+ /* Theme: jade (neutral: sage, primary: jade, accent: ruby, success: grass, danger: tomato). 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: jade */
23
+ --primary-7: light-dark(#8bceb6, #246854);
24
+ --primary-9: light-dark(#29a383, #29a383);
25
+ --primary-10: light-dark(#26997b, #27b08b);
26
+ --primary-11: light-dark(#208368, #1fd8a4);
27
+ --primary-a2: light-dark(#00a3460b, #27fba60c);
28
+ --primary-a3: light-dark(#00ae4819, #02f99920);
29
+ --primary-a4: light-dark(#00a85129, #00ffaa2d);
30
+ --primary-a5: light-dark(#00a2553c, #11ffb63b);
31
+ --primary-a6: light-dark(#009a5753, #34ffc24b);
32
+ --primary-a7: light-dark(#00945f74, #45fdc75e);
33
+ --primary-a11: light-dark(#007152df, #21fec0d6);
34
+ --primary-text: var(--primary-11);
35
+ --primary-inverse: white;
36
+
37
+ /* accent: ruby */
38
+ --accent-7: light-dark(#efacb8, #883447);
39
+ --accent-9: light-dark(#e54666, #e54666);
40
+ --accent-10: light-dark(#dc3b5d, #ec5a72);
41
+ --accent-11: light-dark(#ca244d, #ff949d);
42
+ --accent-a2: light-dark(#ff002008, #fe5a7f0e);
43
+ --accent-a3: light-dark(#f3002515, #ff235d2c);
44
+ --accent-a4: light-dark(#ff002523, #fd195e42);
45
+ --accent-a5: light-dark(#ff002a31, #fe2d6b53);
46
+ --accent-a6: light-dark(#e4002440, #ff447665);
47
+ --accent-a7: light-dark(#ce002553, #ff577d80);
48
+ --accent-a11: light-dark(#c10030db, #ff949d);
49
+ --accent-text: var(--accent-11);
50
+ --accent-inverse: white;
51
+
52
+ /* success: grass */
53
+ --success-7: light-dark(#94ce9a, #366740);
54
+ --success-9: light-dark(#46a758, #46a758);
55
+ --success-10: light-dark(#3e9b4f, #53b365);
56
+ --success-11: light-dark(#2a7e3b, #71d083);
57
+ --success-a2: light-dark(#0099000a, #5ef7780a);
58
+ --success-a3: light-dark(#00970016, #70fe8c1b);
59
+ --success-a4: light-dark(#009f0725, #57ff802c);
60
+ --success-a5: light-dark(#00930536, #68ff8b3b);
61
+ --success-a6: light-dark(#008f0a4d, #71ff8f4b);
62
+ --success-a7: light-dark(#018b0f6b, #77fd925d);
63
+ --success-a11: light-dark(#006514d5, #89ff9fcd);
64
+ --success-text: var(--success-11);
65
+ --success-inverse: white;
66
+
67
+ /* danger: tomato */
68
+ --danger-7: light-dark(#f5a898, #853a2d);
69
+ --danger-9: light-dark(#e54d2e, #e54d2e);
70
+ --danger-10: light-dark(#dd4425, #ec6142);
71
+ --danger-11: light-dark(#d13415, #ff977d);
72
+ --danger-a2: light-dark(#ff200008, #ff55330f);
73
+ --danger-a3: light-dark(#f52b0018, #ff35232b);
74
+ --danger-a4: light-dark(#ff35002c, #fd201142);
75
+ --danger-a5: light-dark(#ff2e003d, #fe332153);
76
+ --danger-a6: light-dark(#f92d0050, #ff4f3864);
77
+ --danger-a7: light-dark(#e7280067, #fd644a7d);
78
+ --danger-a11: light-dark(#cd2200ea, #ff977d);
79
+ --danger-text: var(--danger-11);
80
+ --danger-inverse: white;
81
+
82
+ /* icons */
83
+ --icon-valid: 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='%2346a758' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
84
+ --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='%23e54d2e' 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");
85
+ }
86
+
87
+ @supports (color: color(display-p3 1 1 1)) {
88
+ @media (color-gamut: p3) {
89
+ :root {
90
+ /* neutral: sage */
91
+ --neutral-1: light-dark(color(display-p3 0.986 0.992 0.988), color(display-p3 0.064 0.07 0.067));
92
+ --neutral-2: light-dark(color(display-p3 0.97 0.977 0.974), color(display-p3 0.092 0.098 0.094));
93
+ --neutral-3: light-dark(color(display-p3 0.935 0.944 0.94), color(display-p3 0.128 0.135 0.131));
94
+ --neutral-4: light-dark(color(display-p3 0.904 0.913 0.909), color(display-p3 0.155 0.164 0.159));
95
+ --neutral-5: light-dark(color(display-p3 0.875 0.885 0.88), color(display-p3 0.183 0.193 0.188));
96
+ --neutral-8: light-dark(color(display-p3 0.725 0.738 0.732), color(display-p3 0.362 0.382 0.373));
97
+ --neutral-11: light-dark(color(display-p3 0.377 0.395 0.389), color(display-p3 0.685 0.709 0.697));
98
+ --neutral-12: light-dark(color(display-p3 0.107 0.129 0.118), color(display-p3 0.927 0.933 0.93));
99
+ --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));
100
+ --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));
101
+ --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));
102
+ --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));
103
+ --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));
104
+ --neutral-a7: light-dark(color(display-p3 0 0.059 0.039 / 0.2), color(display-p3 0.957 1 0.976 / 0.233));
105
+
106
+ /* primary: jade */
107
+ --primary-7: light-dark(color(display-p3 0.603 0.802 0.718), color(display-p3 0.219 0.402 0.335));
108
+ --primary-9: light-dark(color(display-p3 0.319 0.63 0.521), color(display-p3 0.319 0.63 0.521));
109
+ --primary-10: light-dark(color(display-p3 0.299 0.592 0.488), color(display-p3 0.338 0.68 0.555));
110
+ --primary-11: light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656));
111
+ --primary-a2: light-dark(color(display-p3 0.024 0.612 0.22 / 0.04), color(display-p3 0.318 0.988 0.651 / 0.047));
112
+ --primary-a3: light-dark(color(display-p3 0.012 0.596 0.235 / 0.087), color(display-p3 0.267 1 0.667 / 0.118));
113
+ --primary-a4: light-dark(color(display-p3 0.008 0.588 0.255 / 0.142), color(display-p3 0.275 0.996 0.702 / 0.173));
114
+ --primary-a5: light-dark(color(display-p3 0.004 0.561 0.251 / 0.204), color(display-p3 0.361 1 0.741 / 0.227));
115
+ --primary-a6: light-dark(color(display-p3 0.004 0.525 0.278 / 0.287), color(display-p3 0.439 1 0.796 / 0.286));
116
+ --primary-a7: light-dark(color(display-p3 0.004 0.506 0.29 / 0.397), color(display-p3 0.49 1 0.804 / 0.362));
117
+ --primary-a11: light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656));
118
+
119
+ /* accent: ruby */
120
+ --accent-7: light-dark(color(display-p3 0.897 0.685 0.721), color(display-p3 0.495 0.224 0.281));
121
+ --accent-9: light-dark(color(display-p3 0.83 0.323 0.408), color(display-p3 0.83 0.323 0.408));
122
+ --accent-10: light-dark(color(display-p3 0.795 0.286 0.375), color(display-p3 0.857 0.392 0.455));
123
+ --accent-11: light-dark(color(display-p3 0.728 0.211 0.311), color(display-p3 1 0.57 0.59));
124
+ --accent-a2: light-dark(color(display-p3 0.863 0.024 0.024 / 0.028), color(display-p3 0.992 0.376 0.529 / 0.051));
125
+ --accent-a3: light-dark(color(display-p3 0.804 0.008 0.11 / 0.079), color(display-p3 0.996 0.196 0.404 / 0.152));
126
+ --accent-a4: light-dark(color(display-p3 0.91 0.008 0.125 / 0.13), color(display-p3 1 0.173 0.416 / 0.227));
127
+ --accent-a5: light-dark(color(display-p3 0.831 0.004 0.133 / 0.185), color(display-p3 1 0.259 0.459 / 0.29));
128
+ --accent-a6: light-dark(color(display-p3 0.745 0.004 0.118 / 0.244), color(display-p3 1 0.341 0.506 / 0.358));
129
+ --accent-a7: light-dark(color(display-p3 0.678 0.004 0.114 / 0.314), color(display-p3 1 0.412 0.541 / 0.458));
130
+ --accent-a11: light-dark(color(display-p3 0.728 0.211 0.311), color(display-p3 1 0.57 0.59));
131
+
132
+ /* success: grass */
133
+ --success-7: light-dark(color(display-p3 0.628 0.803 0.622), color(display-p3 0.258 0.4 0.264));
134
+ --success-9: light-dark(color(display-p3 0.38 0.647 0.378), color(display-p3 0.38 0.647 0.378));
135
+ --success-10: light-dark(color(display-p3 0.344 0.598 0.342), color(display-p3 0.426 0.694 0.426));
136
+ --success-11: light-dark(color(display-p3 0.263 0.488 0.261), color(display-p3 0.535 0.807 0.542));
137
+ --success-a2: light-dark(color(display-p3 0.024 0.565 0.024 / 0.036), color(display-p3 0.482 0.996 0.584 / 0.038));
138
+ --success-a3: light-dark(color(display-p3 0.059 0.576 0.008 / 0.083), color(display-p3 0.549 0.992 0.588 / 0.106));
139
+ --success-a4: light-dark(color(display-p3 0.035 0.565 0.008 / 0.134), color(display-p3 0.51 0.996 0.557 / 0.169));
140
+ --success-a5: light-dark(color(display-p3 0.047 0.545 0.008 / 0.197), color(display-p3 0.553 1 0.588 / 0.227));
141
+ --success-a6: light-dark(color(display-p3 0.031 0.502 0.004 / 0.275), color(display-p3 0.584 1 0.608 / 0.29));
142
+ --success-a7: light-dark(color(display-p3 0.012 0.482 0.004 / 0.377), color(display-p3 0.604 1 0.616 / 0.358));
143
+ --success-a11: light-dark(color(display-p3 0.263 0.488 0.261), color(display-p3 0.535 0.807 0.542));
144
+
145
+ /* danger: tomato */
146
+ --danger-7: light-dark(color(display-p3 0.917 0.673 0.611), color(display-p3 0.487 0.245 0.194));
147
+ --danger-9: light-dark(color(display-p3 0.831 0.345 0.231), color(display-p3 0.831 0.345 0.231));
148
+ --danger-10: light-dark(color(display-p3 0.802 0.313 0.2), color(display-p3 0.862 0.415 0.298));
149
+ --danger-11: light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455));
150
+ --danger-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));
151
+ --danger-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));
152
+ --danger-a4: light-dark(color(display-p3 0.976 0.192 0.004 / 0.165), color(display-p3 1 0.204 0.118 / 0.232));
153
+ --danger-a5: light-dark(color(display-p3 0.918 0.192 0.004 / 0.232), color(display-p3 1 0.286 0.192 / 0.29));
154
+ --danger-a6: light-dark(color(display-p3 0.847 0.173 0.004 / 0.302), color(display-p3 1 0.392 0.278 / 0.353));
155
+ --danger-a7: light-dark(color(display-p3 0.788 0.165 0.004 / 0.389), color(display-p3 1 0.459 0.349 / 0.45));
156
+ --danger-a11: light-dark(color(display-p3 0.755 0.259 0.152), color(display-p3 1 0.585 0.455));
157
+ }
158
+ }
159
+ }
160
+ }
@@ -0,0 +1,131 @@
1
+ @layer tokens, theme, reset, base, layout, components, project, utilities;
2
+
3
+ /* Theme: lime (neutral: olive, primary: lime, accent: violet, success: jade). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
4
+ @layer theme {
5
+ :root {
6
+ /* neutral: olive */
7
+ --neutral-1: light-dark(#fcfdfc, #111210);
8
+ --neutral-2: light-dark(#f8faf8, #181917);
9
+ --neutral-3: light-dark(#eff1ef, #212220);
10
+ --neutral-4: light-dark(#e7e9e7, #282a27);
11
+ --neutral-5: light-dark(#dfe2df, #2f312e);
12
+ --neutral-8: light-dark(#b9bcb8, #5c625b);
13
+ --neutral-11: light-dark(#60655f, #afb5ad);
14
+ --neutral-12: light-dark(#1d211c, #eceeec);
15
+ --neutral-a2: light-dark(#00490007, #f1f2f008);
16
+ --neutral-a3: light-dark(#00200010, #f4f5f312);
17
+ --neutral-a4: light-dark(#00160018, #f3fef21a);
18
+ --neutral-a5: light-dark(#00180020, #f2fbf122);
19
+ --neutral-a6: light-dark(#00140028, #f4faed2c);
20
+ --neutral-a7: light-dark(#000f0033, #f2fced3b);
21
+
22
+ /* primary: lime */
23
+ --primary-7: light-dark(#abc978, #496231);
24
+ --primary-9: light-dark(#bdee63, #bdee63);
25
+ --primary-10: light-dark(#b0e64c, #d4ff70);
26
+ --primary-11: light-dark(#5c7c2f, #bde56c);
27
+ --primary-a2: light-dark(#6b95000c, #78f7000a);
28
+ --primary-a3: light-dark(#96c80029, #9bfd4c1a);
29
+ --primary-a4: light-dark(#8fc60042, #a7fe5c29);
30
+ --primary-a5: light-dark(#81bb0059, #affe6537);
31
+ --primary-a6: light-dark(#72aa006e, #b2fe6d46);
32
+ --primary-a7: light-dark(#61990087, #b6ff6f57);
33
+ --primary-a11: light-dark(#375f00d0, #d1fe77e4);
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: violet */
38
+ --accent-7: light-dark(#c2b5f5, #56468b);
39
+ --accent-9: light-dark(#6e56cf, #6e56cf);
40
+ --accent-10: light-dark(#654dc4, #7d66d9);
41
+ --accent-11: light-dark(#6550b9, #baa7ff);
42
+ --accent-a2: light-dark(#4900ff07, #853ff916);
43
+ --accent-a3: light-dark(#4400ee0f, #8354fe36);
44
+ --accent-a4: light-dark(#4300ff1b, #7d51fd50);
45
+ --accent-a5: light-dark(#3600ff26, #845ffd5f);
46
+ --accent-a6: light-dark(#3100fb35, #8f6cfd6d);
47
+ --accent-a7: light-dark(#2d01dd4a, #9879ff83);
48
+ --accent-a11: light-dark(#1f0099af, #baa7ff);
49
+ --accent-text: var(--accent-11);
50
+ --accent-inverse: white;
51
+
52
+ /* success: jade */
53
+ --success-7: light-dark(#8bceb6, #246854);
54
+ --success-9: light-dark(#29a383, #29a383);
55
+ --success-10: light-dark(#26997b, #27b08b);
56
+ --success-11: light-dark(#208368, #1fd8a4);
57
+ --success-a2: light-dark(#00a3460b, #27fba60c);
58
+ --success-a3: light-dark(#00ae4819, #02f99920);
59
+ --success-a4: light-dark(#00a85129, #00ffaa2d);
60
+ --success-a5: light-dark(#00a2553c, #11ffb63b);
61
+ --success-a6: light-dark(#009a5753, #34ffc24b);
62
+ --success-a7: light-dark(#00945f74, #45fdc75e);
63
+ --success-a11: light-dark(#007152df, #21fec0d6);
64
+ --success-text: var(--success-11);
65
+ --success-inverse: white;
66
+
67
+ /* icons */
68
+ --icon-valid: 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='%2329a383' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
69
+ }
70
+
71
+ @supports (color: color(display-p3 1 1 1)) {
72
+ @media (color-gamut: p3) {
73
+ :root {
74
+ /* neutral: olive */
75
+ --neutral-1: light-dark(color(display-p3 0.989 0.992 0.989), color(display-p3 0.067 0.07 0.063));
76
+ --neutral-2: light-dark(color(display-p3 0.974 0.98 0.973), color(display-p3 0.095 0.098 0.091));
77
+ --neutral-3: light-dark(color(display-p3 0.939 0.945 0.937), color(display-p3 0.131 0.135 0.126));
78
+ --neutral-4: light-dark(color(display-p3 0.907 0.914 0.905), color(display-p3 0.158 0.163 0.153));
79
+ --neutral-5: light-dark(color(display-p3 0.878 0.885 0.875), color(display-p3 0.186 0.192 0.18));
80
+ --neutral-8: light-dark(color(display-p3 0.727 0.738 0.723), color(display-p3 0.365 0.382 0.359));
81
+ --neutral-11: light-dark(color(display-p3 0.38 0.395 0.374), color(display-p3 0.69 0.709 0.682));
82
+ --neutral-12: light-dark(color(display-p3 0.117 0.129 0.111), color(display-p3 0.927 0.933 0.926));
83
+ --neutral-a2: light-dark(color(display-p3 0.024 0.302 0.024 / 0.028), color(display-p3 0.984 0.988 0.976 / 0.03));
84
+ --neutral-a3: light-dark(color(display-p3 0.008 0.129 0.008 / 0.063), color(display-p3 0.992 0.996 0.988 / 0.068));
85
+ --neutral-a4: light-dark(color(display-p3 0.012 0.094 0.012 / 0.095), color(display-p3 0.953 0.996 0.949 / 0.102));
86
+ --neutral-a5: light-dark(color(display-p3 0.035 0.098 0.008 / 0.126), color(display-p3 0.969 1 0.965 / 0.131));
87
+ --neutral-a6: light-dark(color(display-p3 0.027 0.078 0.004 / 0.157), color(display-p3 0.973 1 0.969 / 0.169));
88
+ --neutral-a7: light-dark(color(display-p3 0.02 0.059 0 / 0.2), color(display-p3 0.98 1 0.961 / 0.228));
89
+
90
+ /* primary: lime */
91
+ --primary-7: light-dark(color(display-p3 0.694 0.784 0.508), color(display-p3 0.307 0.383 0.215));
92
+ --primary-9: light-dark(color(display-p3 0.78 0.928 0.466), color(display-p3 0.78 0.928 0.466));
93
+ --primary-10: light-dark(color(display-p3 0.734 0.896 0.397), color(display-p3 0.865 0.995 0.519));
94
+ --primary-11: light-dark(color(display-p3 0.386 0.482 0.227), color(display-p3 0.771 0.893 0.485));
95
+ --primary-a2: light-dark(color(display-p3 0.514 0.592 0.024 / 0.048), color(display-p3 0.584 0.996 0.071 / 0.038));
96
+ --primary-a3: light-dark(color(display-p3 0.584 0.765 0.008 / 0.15), color(display-p3 0.69 1 0.38 / 0.101));
97
+ --primary-a4: light-dark(color(display-p3 0.561 0.757 0.004 / 0.24), color(display-p3 0.729 1 0.435 / 0.16));
98
+ --primary-a5: light-dark(color(display-p3 0.514 0.698 0.004 / 0.322), color(display-p3 0.745 1 0.471 / 0.215));
99
+ --primary-a6: light-dark(color(display-p3 0.443 0.627 0 / 0.4), color(display-p3 0.769 1 0.482 / 0.274));
100
+ --primary-a7: light-dark(color(display-p3 0.376 0.561 0.004 / 0.491), color(display-p3 0.769 1 0.506 / 0.341));
101
+ --primary-a11: light-dark(color(display-p3 0.386 0.482 0.227), color(display-p3 0.771 0.893 0.485));
102
+
103
+ /* accent: violet */
104
+ --accent-7: light-dark(color(display-p3 0.752 0.712 0.943), color(display-p3 0.326 0.277 0.53));
105
+ --accent-9: light-dark(color(display-p3 0.417 0.341 0.784), color(display-p3 0.417 0.341 0.784));
106
+ --accent-10: light-dark(color(display-p3 0.381 0.306 0.741), color(display-p3 0.477 0.402 0.823));
107
+ --accent-11: light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1));
108
+ --accent-a2: light-dark(color(display-p3 0.161 0.024 0.863 / 0.028), color(display-p3 0.51 0.263 1 / 0.08));
109
+ --accent-a3: light-dark(color(display-p3 0.204 0.004 0.871 / 0.059), color(display-p3 0.494 0.337 0.996 / 0.202));
110
+ --accent-a4: light-dark(color(display-p3 0.196 0.004 1 / 0.102), color(display-p3 0.49 0.345 1 / 0.299));
111
+ --accent-a5: light-dark(color(display-p3 0.165 0.008 1 / 0.15), color(display-p3 0.525 0.392 1 / 0.353));
112
+ --accent-a6: light-dark(color(display-p3 0.153 0.004 0.906 / 0.208), color(display-p3 0.569 0.455 1 / 0.408));
113
+ --accent-a7: light-dark(color(display-p3 0.141 0.004 0.796 / 0.287), color(display-p3 0.588 0.494 1 / 0.496));
114
+ --accent-a11: light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1));
115
+
116
+ /* success: jade */
117
+ --success-7: light-dark(color(display-p3 0.603 0.802 0.718), color(display-p3 0.219 0.402 0.335));
118
+ --success-9: light-dark(color(display-p3 0.319 0.63 0.521), color(display-p3 0.319 0.63 0.521));
119
+ --success-10: light-dark(color(display-p3 0.299 0.592 0.488), color(display-p3 0.338 0.68 0.555));
120
+ --success-11: light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656));
121
+ --success-a2: light-dark(color(display-p3 0.024 0.612 0.22 / 0.04), color(display-p3 0.318 0.988 0.651 / 0.047));
122
+ --success-a3: light-dark(color(display-p3 0.012 0.596 0.235 / 0.087), color(display-p3 0.267 1 0.667 / 0.118));
123
+ --success-a4: light-dark(color(display-p3 0.008 0.588 0.255 / 0.142), color(display-p3 0.275 0.996 0.702 / 0.173));
124
+ --success-a5: light-dark(color(display-p3 0.004 0.561 0.251 / 0.204), color(display-p3 0.361 1 0.741 / 0.227));
125
+ --success-a6: light-dark(color(display-p3 0.004 0.525 0.278 / 0.287), color(display-p3 0.439 1 0.796 / 0.286));
126
+ --success-a7: light-dark(color(display-p3 0.004 0.506 0.29 / 0.397), color(display-p3 0.49 1 0.804 / 0.362));
127
+ --success-a11: light-dark(color(display-p3 0.15 0.5 0.37), color(display-p3 0.4 0.835 0.656));
128
+ }
129
+ }
130
+ }
131
+ }
@@ -0,0 +1,107 @@
1
+ @layer tokens, theme, reset, base, layout, components, project, utilities;
2
+
3
+ /* Theme: mauve (neutral: mauve, primary: mauve, accent: violet). 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: mauve */
23
+ --primary-7: light-dark(#d0cdd7, #49474e);
24
+ --primary-9: light-dark(#8e8c99, #6f6d78);
25
+ --primary-10: light-dark(#84828e, #7c7a85);
26
+ --primary-11: light-dark(#65636d, #b5b2bc);
27
+ --primary-a2: light-dark(#2b005506, #f5f4f609);
28
+ --primary-a3: light-dark(#30004010, #ebeaf814);
29
+ --primary-a4: light-dark(#20003618, #eee5f81d);
30
+ --primary-a5: light-dark(#20003820, #efe6fe25);
31
+ --primary-a6: light-dark(#14003527, #f1e6fd30);
32
+ --primary-a7: light-dark(#10003332, #eee9ff40);
33
+ --primary-a11: light-dark(#0400119c, #f5f1ffb7);
34
+ --primary-text: var(--primary-11);
35
+ --primary-inverse: white;
36
+
37
+ /* accent: violet */
38
+ --accent-7: light-dark(#c2b5f5, #56468b);
39
+ --accent-9: light-dark(#6e56cf, #6e56cf);
40
+ --accent-10: light-dark(#654dc4, #7d66d9);
41
+ --accent-11: light-dark(#6550b9, #baa7ff);
42
+ --accent-a2: light-dark(#4900ff07, #853ff916);
43
+ --accent-a3: light-dark(#4400ee0f, #8354fe36);
44
+ --accent-a4: light-dark(#4300ff1b, #7d51fd50);
45
+ --accent-a5: light-dark(#3600ff26, #845ffd5f);
46
+ --accent-a6: light-dark(#3100fb35, #8f6cfd6d);
47
+ --accent-a7: light-dark(#2d01dd4a, #9879ff83);
48
+ --accent-a11: light-dark(#1f0099af, #baa7ff);
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: mauve */
64
+ --neutral-1: light-dark(color(display-p3 0.991 0.988 0.992), color(display-p3 0.07 0.067 0.074));
65
+ --neutral-2: light-dark(color(display-p3 0.98 0.976 0.984), color(display-p3 0.101 0.098 0.105));
66
+ --neutral-3: light-dark(color(display-p3 0.946 0.938 0.952), color(display-p3 0.138 0.134 0.144));
67
+ --neutral-4: light-dark(color(display-p3 0.915 0.906 0.925), color(display-p3 0.167 0.161 0.175));
68
+ --neutral-5: light-dark(color(display-p3 0.886 0.876 0.901), color(display-p3 0.196 0.189 0.206));
69
+ --neutral-8: light-dark(color(display-p3 0.735 0.728 0.777), color(display-p3 0.383 0.373 0.408));
70
+ --neutral-11: light-dark(color(display-p3 0.395 0.388 0.424), color(display-p3 0.707 0.7 0.735));
71
+ --neutral-12: light-dark(color(display-p3 0.128 0.122 0.147), color(display-p3 0.933 0.933 0.94));
72
+ --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));
73
+ --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));
74
+ --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));
75
+ --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));
76
+ --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));
77
+ --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));
78
+
79
+ /* primary: mauve */
80
+ --primary-7: light-dark(color(display-p3 0.814 0.804 0.84), color(display-p3 0.286 0.277 0.302));
81
+ --primary-9: light-dark(color(display-p3 0.555 0.549 0.596), color(display-p3 0.434 0.428 0.467));
82
+ --primary-10: light-dark(color(display-p3 0.514 0.508 0.552), color(display-p3 0.487 0.48 0.519));
83
+ --primary-11: light-dark(color(display-p3 0.395 0.388 0.424), color(display-p3 0.707 0.7 0.735));
84
+ --primary-a2: light-dark(color(display-p3 0.184 0.024 0.349 / 0.024), color(display-p3 0.996 0.992 1 / 0.034));
85
+ --primary-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));
86
+ --primary-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));
87
+ --primary-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));
88
+ --primary-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));
89
+ --primary-a7: light-dark(color(display-p3 0.067 0.008 0.184 / 0.197), color(display-p3 0.945 0.929 1 / 0.246));
90
+ --primary-a11: light-dark(color(display-p3 0.016 0 0.059 / 0.612), color(display-p3 0.965 0.961 1 / 0.712));
91
+
92
+ /* accent: violet */
93
+ --accent-7: light-dark(color(display-p3 0.752 0.712 0.943), color(display-p3 0.326 0.277 0.53));
94
+ --accent-9: light-dark(color(display-p3 0.417 0.341 0.784), color(display-p3 0.417 0.341 0.784));
95
+ --accent-10: light-dark(color(display-p3 0.381 0.306 0.741), color(display-p3 0.477 0.402 0.823));
96
+ --accent-11: light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1));
97
+ --accent-a2: light-dark(color(display-p3 0.161 0.024 0.863 / 0.028), color(display-p3 0.51 0.263 1 / 0.08));
98
+ --accent-a3: light-dark(color(display-p3 0.204 0.004 0.871 / 0.059), color(display-p3 0.494 0.337 0.996 / 0.202));
99
+ --accent-a4: light-dark(color(display-p3 0.196 0.004 1 / 0.102), color(display-p3 0.49 0.345 1 / 0.299));
100
+ --accent-a5: light-dark(color(display-p3 0.165 0.008 1 / 0.15), color(display-p3 0.525 0.392 1 / 0.353));
101
+ --accent-a6: light-dark(color(display-p3 0.153 0.004 0.906 / 0.208), color(display-p3 0.569 0.455 1 / 0.408));
102
+ --accent-a7: light-dark(color(display-p3 0.141 0.004 0.796 / 0.287), color(display-p3 0.588 0.494 1 / 0.496));
103
+ --accent-a11: light-dark(color(display-p3 0.383 0.317 0.702), color(display-p3 0.72 0.65 1));
104
+ }
105
+ }
106
+ }
107
+ }
@@ -0,0 +1,100 @@
1
+ @layer tokens, theme, reset, base, layout, components, project, utilities;
2
+
3
+ /* Theme: mint (neutral: sage, primary: mint, accent: pink). 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: mint */
23
+ --primary-7: light-dark(#7ecfbd, #1e685f);
24
+ --primary-9: light-dark(#86ead4, #86ead4);
25
+ --primary-10: light-dark(#7de0cb, #a8f5e5);
26
+ --primary-11: light-dark(#027864, #58d5ba);
27
+ --primary-a2: light-dark(#00b18a0d, #00f9f90b);
28
+ --primary-a3: light-dark(#00d29e22, #00fff61d);
29
+ --primary-a4: light-dark(#00cc9937, #00fff42c);
30
+ --primary-a5: light-dark(#00c0914c, #00fff23a);
31
+ --primary-a6: light-dark(#00b08663, #0effeb4a);
32
+ --primary-a7: light-dark(#00a17d81, #34fde55e);
33
+ --primary-a11: light-dark(#007763fd, #67ffded2);
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: sage */
57
+ --neutral-1: light-dark(color(display-p3 0.986 0.992 0.988), color(display-p3 0.064 0.07 0.067));
58
+ --neutral-2: light-dark(color(display-p3 0.97 0.977 0.974), color(display-p3 0.092 0.098 0.094));
59
+ --neutral-3: light-dark(color(display-p3 0.935 0.944 0.94), color(display-p3 0.128 0.135 0.131));
60
+ --neutral-4: light-dark(color(display-p3 0.904 0.913 0.909), color(display-p3 0.155 0.164 0.159));
61
+ --neutral-5: light-dark(color(display-p3 0.875 0.885 0.88), color(display-p3 0.183 0.193 0.188));
62
+ --neutral-8: light-dark(color(display-p3 0.725 0.738 0.732), color(display-p3 0.362 0.382 0.373));
63
+ --neutral-11: light-dark(color(display-p3 0.377 0.395 0.389), color(display-p3 0.685 0.709 0.697));
64
+ --neutral-12: light-dark(color(display-p3 0.107 0.129 0.118), color(display-p3 0.927 0.933 0.93));
65
+ --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));
66
+ --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));
67
+ --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));
68
+ --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));
69
+ --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));
70
+ --neutral-a7: light-dark(color(display-p3 0 0.059 0.039 / 0.2), color(display-p3 0.957 1 0.976 / 0.233));
71
+
72
+ /* primary: mint */
73
+ --primary-7: light-dark(color(display-p3 0.567 0.805 0.744), color(display-p3 0.207 0.403 0.373));
74
+ --primary-9: light-dark(color(display-p3 0.62 0.908 0.834), color(display-p3 0.62 0.908 0.834));
75
+ --primary-10: light-dark(color(display-p3 0.585 0.871 0.797), color(display-p3 0.725 0.954 0.898));
76
+ --primary-11: light-dark(color(display-p3 0.203 0.463 0.397), color(display-p3 0.482 0.825 0.733));
77
+ --primary-a2: light-dark(color(display-p3 0.02 0.647 0.467 / 0.044), color(display-p3 0.071 0.98 0.98 / 0.043));
78
+ --primary-a3: light-dark(color(display-p3 0.004 0.761 0.553 / 0.114), color(display-p3 0.176 0.996 0.996 / 0.11));
79
+ --primary-a4: light-dark(color(display-p3 0.004 0.741 0.545 / 0.181), color(display-p3 0.071 0.996 0.973 / 0.169));
80
+ --primary-a5: light-dark(color(display-p3 0.004 0.678 0.51 / 0.255), color(display-p3 0.243 1 0.949 / 0.223));
81
+ --primary-a6: light-dark(color(display-p3 0.004 0.616 0.463 / 0.334), color(display-p3 0.369 1 0.933 / 0.286));
82
+ --primary-a7: light-dark(color(display-p3 0.004 0.549 0.412 / 0.432), color(display-p3 0.459 1 0.914 / 0.362));
83
+ --primary-a11: light-dark(color(display-p3 0.203 0.463 0.397), color(display-p3 0.482 0.825 0.733));
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
+ }