@nexub/tokens 1.5.1 → 1.6.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.
Files changed (7) hide show
  1. package/dist/css/roles.css +288 -3
  2. package/dist/css/variables.css +102 -5
  3. package/dist/js/generated/tokens.d.ts +97 -0
  4. package/dist/js/generated/tokens.js +97 -0
  5. package/dist/json/tokens.json +97 -0
  6. package/dist/tailwind/preset.js +128 -1
  7. package/package.json +3 -3
package/dist/css/roles.css CHANGED
@@ -1,7 +1,9 @@
1
1
  /* Auto-generated by @nexub/tokens (scripts/generate.mjs). Do not edit.
2
2
  Color roles. Each role is light-dark(light tone, dark tone), so it follows
3
3
  color-scheme, which data-theme sets below (nested themes work too).
4
- Contrast: data-contrast="high" or prefers-contrast: more. */
4
+ Contrast: data-contrast="medium" | "high" (prefers-contrast: more → high).
5
+ Chart palettes (--color-chart-*) override the static hex in variables.css,
6
+ which loads first. On P3 screens, accent fills gain OKLCH chroma. */
5
7
 
6
8
  :root, [data-theme='light'] { color-scheme: light; }
7
9
  [data-theme='dark'] { color-scheme: dark; }
@@ -34,6 +36,22 @@
34
36
  --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-20));
35
37
  --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
36
38
  --color-on-info-container: light-dark(var(--color-palette-info-10), var(--color-palette-info-90));
39
+ --color-leap: light-dark(var(--color-palette-leap-40), var(--color-palette-leap-80));
40
+ --color-on-leap: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-20));
41
+ --color-leap-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
42
+ --color-on-leap-container: light-dark(var(--color-palette-leap-10), var(--color-palette-leap-90));
43
+ --color-bookub: light-dark(var(--color-palette-bookub-40), var(--color-palette-bookub-80));
44
+ --color-on-bookub: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-20));
45
+ --color-bookub-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
46
+ --color-on-bookub-container: light-dark(var(--color-palette-bookub-10), var(--color-palette-bookub-90));
47
+ --color-payub: light-dark(var(--color-palette-payub-40), var(--color-palette-payub-80));
48
+ --color-on-payub: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-20));
49
+ --color-payub-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
50
+ --color-on-payub-container: light-dark(var(--color-palette-payub-10), var(--color-palette-payub-90));
51
+ --color-founderub: light-dark(var(--color-palette-founderub-40), var(--color-palette-founderub-80));
52
+ --color-on-founderub: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-20));
53
+ --color-founderub-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
54
+ --color-on-founderub-container: light-dark(var(--color-palette-founderub-10), var(--color-palette-founderub-90));
37
55
  --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
38
56
  --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
39
57
  --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
@@ -51,12 +69,78 @@
51
69
  --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
52
70
  --color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
53
71
  --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
72
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
54
73
  --color-tertiary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
55
74
  --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
56
75
  --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
57
76
  --color-on-tertiary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
58
77
  }
59
78
 
79
+ [data-contrast='medium'] {
80
+ --color-primary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
81
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
82
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
83
+ --color-on-primary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
84
+ --color-secondary: light-dark(var(--color-palette-secondary-35), var(--color-palette-secondary-85));
85
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-15));
86
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
87
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-5), var(--color-palette-secondary-95));
88
+ --color-error: light-dark(var(--color-palette-error-35), var(--color-palette-error-85));
89
+ --color-on-error: light-dark(var(--color-palette-error-100), var(--color-palette-error-15));
90
+ --color-error-container: light-dark(var(--color-palette-error-90), var(--color-palette-error-30));
91
+ --color-on-error-container: light-dark(var(--color-palette-error-5), var(--color-palette-error-95));
92
+ --color-success: light-dark(var(--color-palette-success-35), var(--color-palette-success-85));
93
+ --color-on-success: light-dark(var(--color-palette-success-100), var(--color-palette-success-15));
94
+ --color-success-container: light-dark(var(--color-palette-success-90), var(--color-palette-success-30));
95
+ --color-on-success-container: light-dark(var(--color-palette-success-5), var(--color-palette-success-95));
96
+ --color-warning: light-dark(var(--color-palette-warning-35), var(--color-palette-warning-85));
97
+ --color-on-warning: light-dark(var(--color-palette-warning-100), var(--color-palette-warning-15));
98
+ --color-warning-container: light-dark(var(--color-palette-warning-90), var(--color-palette-warning-30));
99
+ --color-on-warning-container: light-dark(var(--color-palette-warning-5), var(--color-palette-warning-95));
100
+ --color-info: light-dark(var(--color-palette-info-35), var(--color-palette-info-85));
101
+ --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-15));
102
+ --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
103
+ --color-on-info-container: light-dark(var(--color-palette-info-5), var(--color-palette-info-95));
104
+ --color-leap: light-dark(var(--color-palette-leap-35), var(--color-palette-leap-85));
105
+ --color-on-leap: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-15));
106
+ --color-leap-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
107
+ --color-on-leap-container: light-dark(var(--color-palette-leap-5), var(--color-palette-leap-95));
108
+ --color-bookub: light-dark(var(--color-palette-bookub-35), var(--color-palette-bookub-85));
109
+ --color-on-bookub: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-15));
110
+ --color-bookub-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
111
+ --color-on-bookub-container: light-dark(var(--color-palette-bookub-5), var(--color-palette-bookub-95));
112
+ --color-payub: light-dark(var(--color-palette-payub-35), var(--color-palette-payub-85));
113
+ --color-on-payub: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-15));
114
+ --color-payub-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
115
+ --color-on-payub-container: light-dark(var(--color-palette-payub-5), var(--color-palette-payub-95));
116
+ --color-founderub: light-dark(var(--color-palette-founderub-35), var(--color-palette-founderub-85));
117
+ --color-on-founderub: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-15));
118
+ --color-founderub-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
119
+ --color-on-founderub-container: light-dark(var(--color-palette-founderub-5), var(--color-palette-founderub-95));
120
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
121
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
122
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
123
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
124
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
125
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
126
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
127
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
128
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
129
+ --color-on-surface: light-dark(var(--color-palette-neutral-5), var(--color-palette-neutral-95));
130
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-25), var(--color-palette-neutral-variant-85));
131
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-35), var(--color-palette-neutral-variant-76));
132
+ --color-outline: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-70));
133
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-65), var(--color-palette-neutral-variant-45));
134
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
135
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-10));
136
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
137
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
138
+ --color-tertiary: light-dark(var(--color-palette-primary-35), var(--color-palette-primary-85));
139
+ --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-15));
140
+ --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
141
+ --color-on-tertiary-container: light-dark(var(--color-palette-primary-5), var(--color-palette-primary-95));
142
+ }
143
+
60
144
  [data-contrast='high'] {
61
145
  --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
62
146
  --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
@@ -82,6 +166,22 @@
82
166
  --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-10));
83
167
  --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
84
168
  --color-on-info-container: light-dark(var(--color-palette-info-0), var(--color-palette-info-100));
169
+ --color-leap: light-dark(var(--color-palette-leap-30), var(--color-palette-leap-90));
170
+ --color-on-leap: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-10));
171
+ --color-leap-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
172
+ --color-on-leap-container: light-dark(var(--color-palette-leap-0), var(--color-palette-leap-100));
173
+ --color-bookub: light-dark(var(--color-palette-bookub-30), var(--color-palette-bookub-90));
174
+ --color-on-bookub: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-10));
175
+ --color-bookub-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
176
+ --color-on-bookub-container: light-dark(var(--color-palette-bookub-0), var(--color-palette-bookub-100));
177
+ --color-payub: light-dark(var(--color-palette-payub-30), var(--color-palette-payub-90));
178
+ --color-on-payub: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-10));
179
+ --color-payub-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
180
+ --color-on-payub-container: light-dark(var(--color-palette-payub-0), var(--color-palette-payub-100));
181
+ --color-founderub: light-dark(var(--color-palette-founderub-30), var(--color-palette-founderub-90));
182
+ --color-on-founderub: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-10));
183
+ --color-founderub-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
184
+ --color-on-founderub-container: light-dark(var(--color-palette-founderub-0), var(--color-palette-founderub-100));
85
185
  --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
86
186
  --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
87
187
  --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
@@ -99,6 +199,7 @@
99
199
  --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
100
200
  --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
101
201
  --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
202
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
102
203
  --color-tertiary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
103
204
  --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
104
205
  --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
@@ -106,7 +207,7 @@
106
207
  }
107
208
 
108
209
  @media (prefers-contrast: more) {
109
- :root:not([data-contrast]) {
210
+ :root:not([data-contrast]) {
110
211
  --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
111
212
  --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
112
213
  --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
@@ -131,6 +232,22 @@
131
232
  --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-10));
132
233
  --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
133
234
  --color-on-info-container: light-dark(var(--color-palette-info-0), var(--color-palette-info-100));
235
+ --color-leap: light-dark(var(--color-palette-leap-30), var(--color-palette-leap-90));
236
+ --color-on-leap: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-10));
237
+ --color-leap-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
238
+ --color-on-leap-container: light-dark(var(--color-palette-leap-0), var(--color-palette-leap-100));
239
+ --color-bookub: light-dark(var(--color-palette-bookub-30), var(--color-palette-bookub-90));
240
+ --color-on-bookub: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-10));
241
+ --color-bookub-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
242
+ --color-on-bookub-container: light-dark(var(--color-palette-bookub-0), var(--color-palette-bookub-100));
243
+ --color-payub: light-dark(var(--color-palette-payub-30), var(--color-palette-payub-90));
244
+ --color-on-payub: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-10));
245
+ --color-payub-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
246
+ --color-on-payub-container: light-dark(var(--color-palette-payub-0), var(--color-palette-payub-100));
247
+ --color-founderub: light-dark(var(--color-palette-founderub-30), var(--color-palette-founderub-90));
248
+ --color-on-founderub: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-10));
249
+ --color-founderub-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
250
+ --color-on-founderub-container: light-dark(var(--color-palette-founderub-0), var(--color-palette-founderub-100));
134
251
  --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
135
252
  --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
136
253
  --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
@@ -148,11 +265,12 @@
148
265
  --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
149
266
  --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
150
267
  --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
268
+ --color-scrim: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-0));
151
269
  --color-tertiary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
152
270
  --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
153
271
  --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
154
272
  --color-on-tertiary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
155
- }
273
+ }
156
274
  }
157
275
 
158
276
  [data-product='leap'] {
@@ -161,6 +279,12 @@
161
279
  --color-tertiary-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
162
280
  --color-on-tertiary-container: light-dark(var(--color-palette-leap-10), var(--color-palette-leap-90));
163
281
  }
282
+ [data-contrast='medium'][data-product='leap'], [data-contrast='medium'] [data-product='leap'] {
283
+ --color-tertiary: light-dark(var(--color-palette-leap-35), var(--color-palette-leap-85));
284
+ --color-on-tertiary: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-15));
285
+ --color-tertiary-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
286
+ --color-on-tertiary-container: light-dark(var(--color-palette-leap-5), var(--color-palette-leap-95));
287
+ }
164
288
  [data-contrast='high'][data-product='leap'], [data-contrast='high'] [data-product='leap'] {
165
289
  --color-tertiary: light-dark(var(--color-palette-leap-30), var(--color-palette-leap-90));
166
290
  --color-on-tertiary: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-10));
@@ -182,6 +306,12 @@
182
306
  --color-tertiary-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
183
307
  --color-on-tertiary-container: light-dark(var(--color-palette-bookub-10), var(--color-palette-bookub-90));
184
308
  }
309
+ [data-contrast='medium'][data-product='bookub'], [data-contrast='medium'] [data-product='bookub'] {
310
+ --color-tertiary: light-dark(var(--color-palette-bookub-35), var(--color-palette-bookub-85));
311
+ --color-on-tertiary: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-15));
312
+ --color-tertiary-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
313
+ --color-on-tertiary-container: light-dark(var(--color-palette-bookub-5), var(--color-palette-bookub-95));
314
+ }
185
315
  [data-contrast='high'][data-product='bookub'], [data-contrast='high'] [data-product='bookub'] {
186
316
  --color-tertiary: light-dark(var(--color-palette-bookub-30), var(--color-palette-bookub-90));
187
317
  --color-on-tertiary: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-10));
@@ -203,6 +333,12 @@
203
333
  --color-tertiary-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
204
334
  --color-on-tertiary-container: light-dark(var(--color-palette-payub-10), var(--color-palette-payub-90));
205
335
  }
336
+ [data-contrast='medium'][data-product='payub'], [data-contrast='medium'] [data-product='payub'] {
337
+ --color-tertiary: light-dark(var(--color-palette-payub-35), var(--color-palette-payub-85));
338
+ --color-on-tertiary: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-15));
339
+ --color-tertiary-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
340
+ --color-on-tertiary-container: light-dark(var(--color-palette-payub-5), var(--color-palette-payub-95));
341
+ }
206
342
  [data-contrast='high'][data-product='payub'], [data-contrast='high'] [data-product='payub'] {
207
343
  --color-tertiary: light-dark(var(--color-palette-payub-30), var(--color-palette-payub-90));
208
344
  --color-on-tertiary: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-10));
@@ -224,6 +360,12 @@
224
360
  --color-tertiary-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
225
361
  --color-on-tertiary-container: light-dark(var(--color-palette-founderub-10), var(--color-palette-founderub-90));
226
362
  }
363
+ [data-contrast='medium'][data-product='founderub'], [data-contrast='medium'] [data-product='founderub'] {
364
+ --color-tertiary: light-dark(var(--color-palette-founderub-35), var(--color-palette-founderub-85));
365
+ --color-on-tertiary: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-15));
366
+ --color-tertiary-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
367
+ --color-on-tertiary-container: light-dark(var(--color-palette-founderub-5), var(--color-palette-founderub-95));
368
+ }
227
369
  [data-contrast='high'][data-product='founderub'], [data-contrast='high'] [data-product='founderub'] {
228
370
  --color-tertiary: light-dark(var(--color-palette-founderub-30), var(--color-palette-founderub-90));
229
371
  --color-on-tertiary: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-10));
@@ -238,3 +380,146 @@
238
380
  --color-on-tertiary-container: light-dark(var(--color-palette-founderub-0), var(--color-palette-founderub-100));
239
381
  }
240
382
  }
383
+
384
+ :root {
385
+ --color-chart-1: light-dark(#0059c8, #96b5ff);
386
+ --color-chart-2: light-dark(#b97500, #ef9800);
387
+ --color-chart-3: light-dark(#006c4a, #00cf91);
388
+ --color-chart-4: light-dark(#c5247d, #ffb8d3);
389
+ --color-chart-5: light-dark(#9465ff, #9b71ff);
390
+ --color-chart-6: light-dark(#0091a7, #0099b0);
391
+ --color-chart-7: light-dark(#c92f29, #ff897d);
392
+ --color-chart-8: light-dark(#578400, #94da14);
393
+ --color-chart-seq-1: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-20));
394
+ --color-chart-seq-2: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-30));
395
+ --color-chart-seq-3: light-dark(var(--color-palette-primary-70), var(--color-palette-primary-40));
396
+ --color-chart-seq-4: light-dark(var(--color-palette-primary-60), var(--color-palette-primary-50));
397
+ --color-chart-seq-5: light-dark(var(--color-palette-primary-50), var(--color-palette-primary-60));
398
+ --color-chart-seq-6: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-70));
399
+ --color-chart-seq-7: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-80));
400
+ --color-chart-div-1: light-dark(var(--color-palette-error-40), var(--color-palette-error-80));
401
+ --color-chart-div-2: light-dark(var(--color-palette-error-60), var(--color-palette-error-60));
402
+ --color-chart-div-3: light-dark(var(--color-palette-error-80), var(--color-palette-error-40));
403
+ --color-chart-div-4: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-20));
404
+ --color-chart-div-5: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
405
+ --color-chart-div-6: light-dark(var(--color-palette-primary-60), var(--color-palette-primary-60));
406
+ --color-chart-div-7: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
407
+ }
408
+
409
+ @media (color-gamut: p3) {
410
+ @supports (color: oklch(from red l c h)) {
411
+ :root, [data-contrast='standard'] {
412
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-40) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-80) l calc(c * 1.18) h));
413
+ --color-error: light-dark(oklch(from var(--color-palette-error-40) l calc(c * 1.18) h), oklch(from var(--color-palette-error-80) l calc(c * 1.18) h));
414
+ --color-success: light-dark(oklch(from var(--color-palette-success-40) l calc(c * 1.18) h), oklch(from var(--color-palette-success-80) l calc(c * 1.18) h));
415
+ --color-warning: light-dark(oklch(from var(--color-palette-warning-40) l calc(c * 1.18) h), oklch(from var(--color-palette-warning-80) l calc(c * 1.18) h));
416
+ --color-info: light-dark(oklch(from var(--color-palette-info-40) l calc(c * 1.18) h), oklch(from var(--color-palette-info-80) l calc(c * 1.18) h));
417
+ --color-leap: light-dark(oklch(from var(--color-palette-leap-40) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-80) l calc(c * 1.18) h));
418
+ --color-bookub: light-dark(oklch(from var(--color-palette-bookub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-80) l calc(c * 1.18) h));
419
+ --color-payub: light-dark(oklch(from var(--color-palette-payub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-80) l calc(c * 1.18) h));
420
+ --color-founderub: light-dark(oklch(from var(--color-palette-founderub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-80) l calc(c * 1.18) h));
421
+ --color-tertiary: light-dark(oklch(from var(--color-palette-primary-40) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-80) l calc(c * 1.18) h));
422
+ }
423
+
424
+ [data-contrast='medium'] {
425
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-35) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-85) l calc(c * 1.18) h));
426
+ --color-error: light-dark(oklch(from var(--color-palette-error-35) l calc(c * 1.18) h), oklch(from var(--color-palette-error-85) l calc(c * 1.18) h));
427
+ --color-success: light-dark(oklch(from var(--color-palette-success-35) l calc(c * 1.18) h), oklch(from var(--color-palette-success-85) l calc(c * 1.18) h));
428
+ --color-warning: light-dark(oklch(from var(--color-palette-warning-35) l calc(c * 1.18) h), oklch(from var(--color-palette-warning-85) l calc(c * 1.18) h));
429
+ --color-info: light-dark(oklch(from var(--color-palette-info-35) l calc(c * 1.18) h), oklch(from var(--color-palette-info-85) l calc(c * 1.18) h));
430
+ --color-leap: light-dark(oklch(from var(--color-palette-leap-35) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-85) l calc(c * 1.18) h));
431
+ --color-bookub: light-dark(oklch(from var(--color-palette-bookub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-85) l calc(c * 1.18) h));
432
+ --color-payub: light-dark(oklch(from var(--color-palette-payub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-85) l calc(c * 1.18) h));
433
+ --color-founderub: light-dark(oklch(from var(--color-palette-founderub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-85) l calc(c * 1.18) h));
434
+ --color-tertiary: light-dark(oklch(from var(--color-palette-primary-35) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-85) l calc(c * 1.18) h));
435
+ }
436
+
437
+ [data-contrast='high'] {
438
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
439
+ --color-error: light-dark(oklch(from var(--color-palette-error-30) l calc(c * 1.18) h), oklch(from var(--color-palette-error-90) l calc(c * 1.18) h));
440
+ --color-success: light-dark(oklch(from var(--color-palette-success-30) l calc(c * 1.18) h), oklch(from var(--color-palette-success-90) l calc(c * 1.18) h));
441
+ --color-warning: light-dark(oklch(from var(--color-palette-warning-30) l calc(c * 1.18) h), oklch(from var(--color-palette-warning-90) l calc(c * 1.18) h));
442
+ --color-info: light-dark(oklch(from var(--color-palette-info-30) l calc(c * 1.18) h), oklch(from var(--color-palette-info-90) l calc(c * 1.18) h));
443
+ --color-leap: light-dark(oklch(from var(--color-palette-leap-30) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-90) l calc(c * 1.18) h));
444
+ --color-bookub: light-dark(oklch(from var(--color-palette-bookub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-90) l calc(c * 1.18) h));
445
+ --color-payub: light-dark(oklch(from var(--color-palette-payub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-90) l calc(c * 1.18) h));
446
+ --color-founderub: light-dark(oklch(from var(--color-palette-founderub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-90) l calc(c * 1.18) h));
447
+ --color-tertiary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
448
+ }
449
+
450
+ @media (prefers-contrast: more) {
451
+ :root:not([data-contrast]) {
452
+ --color-primary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
453
+ --color-error: light-dark(oklch(from var(--color-palette-error-30) l calc(c * 1.18) h), oklch(from var(--color-palette-error-90) l calc(c * 1.18) h));
454
+ --color-success: light-dark(oklch(from var(--color-palette-success-30) l calc(c * 1.18) h), oklch(from var(--color-palette-success-90) l calc(c * 1.18) h));
455
+ --color-warning: light-dark(oklch(from var(--color-palette-warning-30) l calc(c * 1.18) h), oklch(from var(--color-palette-warning-90) l calc(c * 1.18) h));
456
+ --color-info: light-dark(oklch(from var(--color-palette-info-30) l calc(c * 1.18) h), oklch(from var(--color-palette-info-90) l calc(c * 1.18) h));
457
+ --color-leap: light-dark(oklch(from var(--color-palette-leap-30) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-90) l calc(c * 1.18) h));
458
+ --color-bookub: light-dark(oklch(from var(--color-palette-bookub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-90) l calc(c * 1.18) h));
459
+ --color-payub: light-dark(oklch(from var(--color-palette-payub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-90) l calc(c * 1.18) h));
460
+ --color-founderub: light-dark(oklch(from var(--color-palette-founderub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-90) l calc(c * 1.18) h));
461
+ --color-tertiary: light-dark(oklch(from var(--color-palette-primary-30) l calc(c * 1.18) h), oklch(from var(--color-palette-primary-90) l calc(c * 1.18) h));
462
+ }
463
+ }
464
+
465
+ [data-product='leap'] {
466
+ --color-tertiary: light-dark(oklch(from var(--color-palette-leap-40) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-80) l calc(c * 1.18) h));
467
+ }
468
+ [data-contrast='medium'][data-product='leap'], [data-contrast='medium'] [data-product='leap'] {
469
+ --color-tertiary: light-dark(oklch(from var(--color-palette-leap-35) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-85) l calc(c * 1.18) h));
470
+ }
471
+ [data-contrast='high'][data-product='leap'], [data-contrast='high'] [data-product='leap'] {
472
+ --color-tertiary: light-dark(oklch(from var(--color-palette-leap-30) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-90) l calc(c * 1.18) h));
473
+ }
474
+ @media (prefers-contrast: more) {
475
+ :root:not([data-contrast])[data-product='leap'], :root:not([data-contrast]) [data-product='leap'] {
476
+ --color-tertiary: light-dark(oklch(from var(--color-palette-leap-30) l calc(c * 1.18) h), oklch(from var(--color-palette-leap-90) l calc(c * 1.18) h));
477
+ }
478
+ }
479
+
480
+ [data-product='bookub'] {
481
+ --color-tertiary: light-dark(oklch(from var(--color-palette-bookub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-80) l calc(c * 1.18) h));
482
+ }
483
+ [data-contrast='medium'][data-product='bookub'], [data-contrast='medium'] [data-product='bookub'] {
484
+ --color-tertiary: light-dark(oklch(from var(--color-palette-bookub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-85) l calc(c * 1.18) h));
485
+ }
486
+ [data-contrast='high'][data-product='bookub'], [data-contrast='high'] [data-product='bookub'] {
487
+ --color-tertiary: light-dark(oklch(from var(--color-palette-bookub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-90) l calc(c * 1.18) h));
488
+ }
489
+ @media (prefers-contrast: more) {
490
+ :root:not([data-contrast])[data-product='bookub'], :root:not([data-contrast]) [data-product='bookub'] {
491
+ --color-tertiary: light-dark(oklch(from var(--color-palette-bookub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-bookub-90) l calc(c * 1.18) h));
492
+ }
493
+ }
494
+
495
+ [data-product='payub'] {
496
+ --color-tertiary: light-dark(oklch(from var(--color-palette-payub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-80) l calc(c * 1.18) h));
497
+ }
498
+ [data-contrast='medium'][data-product='payub'], [data-contrast='medium'] [data-product='payub'] {
499
+ --color-tertiary: light-dark(oklch(from var(--color-palette-payub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-85) l calc(c * 1.18) h));
500
+ }
501
+ [data-contrast='high'][data-product='payub'], [data-contrast='high'] [data-product='payub'] {
502
+ --color-tertiary: light-dark(oklch(from var(--color-palette-payub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-90) l calc(c * 1.18) h));
503
+ }
504
+ @media (prefers-contrast: more) {
505
+ :root:not([data-contrast])[data-product='payub'], :root:not([data-contrast]) [data-product='payub'] {
506
+ --color-tertiary: light-dark(oklch(from var(--color-palette-payub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-payub-90) l calc(c * 1.18) h));
507
+ }
508
+ }
509
+
510
+ [data-product='founderub'] {
511
+ --color-tertiary: light-dark(oklch(from var(--color-palette-founderub-40) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-80) l calc(c * 1.18) h));
512
+ }
513
+ [data-contrast='medium'][data-product='founderub'], [data-contrast='medium'] [data-product='founderub'] {
514
+ --color-tertiary: light-dark(oklch(from var(--color-palette-founderub-35) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-85) l calc(c * 1.18) h));
515
+ }
516
+ [data-contrast='high'][data-product='founderub'], [data-contrast='high'] [data-product='founderub'] {
517
+ --color-tertiary: light-dark(oklch(from var(--color-palette-founderub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-90) l calc(c * 1.18) h));
518
+ }
519
+ @media (prefers-contrast: more) {
520
+ :root:not([data-contrast])[data-product='founderub'], :root:not([data-contrast]) [data-product='founderub'] {
521
+ --color-tertiary: light-dark(oklch(from var(--color-palette-founderub-30) l calc(c * 1.18) h), oklch(from var(--color-palette-founderub-90) l calc(c * 1.18) h));
522
+ }
523
+ }
524
+ }
525
+ }