@nexub/tokens 1.2.0 → 1.4.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 +240 -0
  2. package/dist/css/variables.css +398 -3
  3. package/dist/js/generated/tokens.d.ts +490 -3
  4. package/dist/js/generated/tokens.js +490 -3
  5. package/dist/json/tokens.json +398 -3
  6. package/dist/tailwind/preset.js +560 -8
  7. package/package.json +5 -2
package/dist/css/roles.css ADDED
@@ -0,0 +1,240 @@
1
+ /* Auto-generated by @nexub/tokens (scripts/generate.mjs). Do not edit.
2
+ Color roles. Each role is light-dark(light tone, dark tone), so it follows
3
+ color-scheme, which data-theme sets below (nested themes work too).
4
+ Contrast: data-contrast="high" or prefers-contrast: more. */
5
+
6
+ :root, [data-theme='light'] { color-scheme: light; }
7
+ [data-theme='dark'] { color-scheme: dark; }
8
+ @media (prefers-color-scheme: dark) {
9
+ :root:not([data-theme]) { color-scheme: dark; }
10
+ }
11
+
12
+ :root, [data-contrast='standard'] {
13
+ --color-primary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
14
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
15
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
16
+ --color-on-primary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
17
+ --color-secondary: light-dark(var(--color-palette-secondary-40), var(--color-palette-secondary-80));
18
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-20));
19
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
20
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-10), var(--color-palette-secondary-90));
21
+ --color-error: light-dark(var(--color-palette-error-40), var(--color-palette-error-80));
22
+ --color-on-error: light-dark(var(--color-palette-error-100), var(--color-palette-error-20));
23
+ --color-error-container: light-dark(var(--color-palette-error-90), var(--color-palette-error-30));
24
+ --color-on-error-container: light-dark(var(--color-palette-error-10), var(--color-palette-error-90));
25
+ --color-success: light-dark(var(--color-palette-success-40), var(--color-palette-success-80));
26
+ --color-on-success: light-dark(var(--color-palette-success-100), var(--color-palette-success-20));
27
+ --color-success-container: light-dark(var(--color-palette-success-90), var(--color-palette-success-30));
28
+ --color-on-success-container: light-dark(var(--color-palette-success-10), var(--color-palette-success-90));
29
+ --color-warning: light-dark(var(--color-palette-warning-40), var(--color-palette-warning-80));
30
+ --color-on-warning: light-dark(var(--color-palette-warning-100), var(--color-palette-warning-20));
31
+ --color-warning-container: light-dark(var(--color-palette-warning-90), var(--color-palette-warning-30));
32
+ --color-on-warning-container: light-dark(var(--color-palette-warning-10), var(--color-palette-warning-90));
33
+ --color-info: light-dark(var(--color-palette-info-40), var(--color-palette-info-80));
34
+ --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-20));
35
+ --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
36
+ --color-on-info-container: light-dark(var(--color-palette-info-10), var(--color-palette-info-90));
37
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
38
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
39
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
40
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
41
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
42
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
43
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
44
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
45
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
46
+ --color-on-surface: light-dark(var(--color-palette-neutral-10), var(--color-palette-neutral-90));
47
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
48
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-40), var(--color-palette-neutral-variant-72));
49
+ --color-outline: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
50
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-80), var(--color-palette-neutral-variant-30));
51
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
52
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-95), var(--color-palette-neutral-20));
53
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
54
+ --color-tertiary: light-dark(var(--color-palette-primary-40), var(--color-palette-primary-80));
55
+ --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-20));
56
+ --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
57
+ --color-on-tertiary-container: light-dark(var(--color-palette-primary-10), var(--color-palette-primary-90));
58
+ }
59
+
60
+ [data-contrast='high'] {
61
+ --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
62
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
63
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
64
+ --color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
65
+ --color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
66
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
67
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
68
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
69
+ --color-error: light-dark(var(--color-palette-error-30), var(--color-palette-error-90));
70
+ --color-on-error: light-dark(var(--color-palette-error-100), var(--color-palette-error-10));
71
+ --color-error-container: light-dark(var(--color-palette-error-90), var(--color-palette-error-30));
72
+ --color-on-error-container: light-dark(var(--color-palette-error-0), var(--color-palette-error-100));
73
+ --color-success: light-dark(var(--color-palette-success-30), var(--color-palette-success-90));
74
+ --color-on-success: light-dark(var(--color-palette-success-100), var(--color-palette-success-10));
75
+ --color-success-container: light-dark(var(--color-palette-success-90), var(--color-palette-success-30));
76
+ --color-on-success-container: light-dark(var(--color-palette-success-0), var(--color-palette-success-100));
77
+ --color-warning: light-dark(var(--color-palette-warning-30), var(--color-palette-warning-90));
78
+ --color-on-warning: light-dark(var(--color-palette-warning-100), var(--color-palette-warning-10));
79
+ --color-warning-container: light-dark(var(--color-palette-warning-90), var(--color-palette-warning-30));
80
+ --color-on-warning-container: light-dark(var(--color-palette-warning-0), var(--color-palette-warning-100));
81
+ --color-info: light-dark(var(--color-palette-info-30), var(--color-palette-info-90));
82
+ --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-10));
83
+ --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
84
+ --color-on-info-container: light-dark(var(--color-palette-info-0), var(--color-palette-info-100));
85
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
86
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
87
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
88
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
89
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
90
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
91
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
92
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
93
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
94
+ --color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
95
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
96
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
97
+ --color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
98
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
99
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
100
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
101
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
102
+ --color-tertiary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
103
+ --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
104
+ --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
105
+ --color-on-tertiary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
106
+ }
107
+
108
+ @media (prefers-contrast: more) {
109
+ :root:not([data-contrast]) {
110
+ --color-primary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
111
+ --color-on-primary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
112
+ --color-primary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
113
+ --color-on-primary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
114
+ --color-secondary: light-dark(var(--color-palette-secondary-30), var(--color-palette-secondary-90));
115
+ --color-on-secondary: light-dark(var(--color-palette-secondary-100), var(--color-palette-secondary-10));
116
+ --color-secondary-container: light-dark(var(--color-palette-secondary-90), var(--color-palette-secondary-30));
117
+ --color-on-secondary-container: light-dark(var(--color-palette-secondary-0), var(--color-palette-secondary-100));
118
+ --color-error: light-dark(var(--color-palette-error-30), var(--color-palette-error-90));
119
+ --color-on-error: light-dark(var(--color-palette-error-100), var(--color-palette-error-10));
120
+ --color-error-container: light-dark(var(--color-palette-error-90), var(--color-palette-error-30));
121
+ --color-on-error-container: light-dark(var(--color-palette-error-0), var(--color-palette-error-100));
122
+ --color-success: light-dark(var(--color-palette-success-30), var(--color-palette-success-90));
123
+ --color-on-success: light-dark(var(--color-palette-success-100), var(--color-palette-success-10));
124
+ --color-success-container: light-dark(var(--color-palette-success-90), var(--color-palette-success-30));
125
+ --color-on-success-container: light-dark(var(--color-palette-success-0), var(--color-palette-success-100));
126
+ --color-warning: light-dark(var(--color-palette-warning-30), var(--color-palette-warning-90));
127
+ --color-on-warning: light-dark(var(--color-palette-warning-100), var(--color-palette-warning-10));
128
+ --color-warning-container: light-dark(var(--color-palette-warning-90), var(--color-palette-warning-30));
129
+ --color-on-warning-container: light-dark(var(--color-palette-warning-0), var(--color-palette-warning-100));
130
+ --color-info: light-dark(var(--color-palette-info-30), var(--color-palette-info-90));
131
+ --color-on-info: light-dark(var(--color-palette-info-100), var(--color-palette-info-10));
132
+ --color-info-container: light-dark(var(--color-palette-info-90), var(--color-palette-info-30));
133
+ --color-on-info-container: light-dark(var(--color-palette-info-0), var(--color-palette-info-100));
134
+ --color-surface: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-6));
135
+ --color-surface-dim: light-dark(var(--color-palette-neutral-87), var(--color-palette-neutral-6));
136
+ --color-surface-bright: light-dark(var(--color-palette-neutral-98), var(--color-palette-neutral-24));
137
+ --color-surface-container-lowest: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-4));
138
+ --color-surface-container-low: light-dark(var(--color-palette-neutral-96), var(--color-palette-neutral-10));
139
+ --color-surface-container: light-dark(var(--color-palette-neutral-94), var(--color-palette-neutral-12));
140
+ --color-surface-container-high: light-dark(var(--color-palette-neutral-92), var(--color-palette-neutral-17));
141
+ --color-surface-container-highest: light-dark(var(--color-palette-neutral-90), var(--color-palette-neutral-22));
142
+ --color-surface-elevated: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-17));
143
+ --color-on-surface: light-dark(var(--color-palette-neutral-0), var(--color-palette-neutral-100));
144
+ --color-on-surface-variant: light-dark(var(--color-palette-neutral-variant-20), var(--color-palette-neutral-variant-90));
145
+ --color-on-surface-muted: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
146
+ --color-outline: light-dark(var(--color-palette-neutral-variant-30), var(--color-palette-neutral-variant-80));
147
+ --color-outline-variant: light-dark(var(--color-palette-neutral-variant-50), var(--color-palette-neutral-variant-60));
148
+ --color-inverse-surface: light-dark(var(--color-palette-neutral-20), var(--color-palette-neutral-90));
149
+ --color-inverse-on-surface: light-dark(var(--color-palette-neutral-100), var(--color-palette-neutral-0));
150
+ --color-inverse-primary: light-dark(var(--color-palette-primary-80), var(--color-palette-primary-40));
151
+ --color-tertiary: light-dark(var(--color-palette-primary-30), var(--color-palette-primary-90));
152
+ --color-on-tertiary: light-dark(var(--color-palette-primary-100), var(--color-palette-primary-10));
153
+ --color-tertiary-container: light-dark(var(--color-palette-primary-90), var(--color-palette-primary-30));
154
+ --color-on-tertiary-container: light-dark(var(--color-palette-primary-0), var(--color-palette-primary-100));
155
+ }
156
+ }
157
+
158
+ [data-product='leap'] {
159
+ --color-tertiary: light-dark(var(--color-palette-leap-40), var(--color-palette-leap-80));
160
+ --color-on-tertiary: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-20));
161
+ --color-tertiary-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
162
+ --color-on-tertiary-container: light-dark(var(--color-palette-leap-10), var(--color-palette-leap-90));
163
+ }
164
+ [data-contrast='high'][data-product='leap'], [data-contrast='high'] [data-product='leap'] {
165
+ --color-tertiary: light-dark(var(--color-palette-leap-30), var(--color-palette-leap-90));
166
+ --color-on-tertiary: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-10));
167
+ --color-tertiary-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
168
+ --color-on-tertiary-container: light-dark(var(--color-palette-leap-0), var(--color-palette-leap-100));
169
+ }
170
+ @media (prefers-contrast: more) {
171
+ :root:not([data-contrast])[data-product='leap'], :root:not([data-contrast]) [data-product='leap'] {
172
+ --color-tertiary: light-dark(var(--color-palette-leap-30), var(--color-palette-leap-90));
173
+ --color-on-tertiary: light-dark(var(--color-palette-leap-100), var(--color-palette-leap-10));
174
+ --color-tertiary-container: light-dark(var(--color-palette-leap-90), var(--color-palette-leap-30));
175
+ --color-on-tertiary-container: light-dark(var(--color-palette-leap-0), var(--color-palette-leap-100));
176
+ }
177
+ }
178
+
179
+ [data-product='bookub'] {
180
+ --color-tertiary: light-dark(var(--color-palette-bookub-40), var(--color-palette-bookub-80));
181
+ --color-on-tertiary: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-20));
182
+ --color-tertiary-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
183
+ --color-on-tertiary-container: light-dark(var(--color-palette-bookub-10), var(--color-palette-bookub-90));
184
+ }
185
+ [data-contrast='high'][data-product='bookub'], [data-contrast='high'] [data-product='bookub'] {
186
+ --color-tertiary: light-dark(var(--color-palette-bookub-30), var(--color-palette-bookub-90));
187
+ --color-on-tertiary: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-10));
188
+ --color-tertiary-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
189
+ --color-on-tertiary-container: light-dark(var(--color-palette-bookub-0), var(--color-palette-bookub-100));
190
+ }
191
+ @media (prefers-contrast: more) {
192
+ :root:not([data-contrast])[data-product='bookub'], :root:not([data-contrast]) [data-product='bookub'] {
193
+ --color-tertiary: light-dark(var(--color-palette-bookub-30), var(--color-palette-bookub-90));
194
+ --color-on-tertiary: light-dark(var(--color-palette-bookub-100), var(--color-palette-bookub-10));
195
+ --color-tertiary-container: light-dark(var(--color-palette-bookub-90), var(--color-palette-bookub-30));
196
+ --color-on-tertiary-container: light-dark(var(--color-palette-bookub-0), var(--color-palette-bookub-100));
197
+ }
198
+ }
199
+
200
+ [data-product='payub'] {
201
+ --color-tertiary: light-dark(var(--color-palette-payub-40), var(--color-palette-payub-80));
202
+ --color-on-tertiary: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-20));
203
+ --color-tertiary-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
204
+ --color-on-tertiary-container: light-dark(var(--color-palette-payub-10), var(--color-palette-payub-90));
205
+ }
206
+ [data-contrast='high'][data-product='payub'], [data-contrast='high'] [data-product='payub'] {
207
+ --color-tertiary: light-dark(var(--color-palette-payub-30), var(--color-palette-payub-90));
208
+ --color-on-tertiary: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-10));
209
+ --color-tertiary-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
210
+ --color-on-tertiary-container: light-dark(var(--color-palette-payub-0), var(--color-palette-payub-100));
211
+ }
212
+ @media (prefers-contrast: more) {
213
+ :root:not([data-contrast])[data-product='payub'], :root:not([data-contrast]) [data-product='payub'] {
214
+ --color-tertiary: light-dark(var(--color-palette-payub-30), var(--color-palette-payub-90));
215
+ --color-on-tertiary: light-dark(var(--color-palette-payub-100), var(--color-palette-payub-10));
216
+ --color-tertiary-container: light-dark(var(--color-palette-payub-90), var(--color-palette-payub-30));
217
+ --color-on-tertiary-container: light-dark(var(--color-palette-payub-0), var(--color-palette-payub-100));
218
+ }
219
+ }
220
+
221
+ [data-product='founderub'] {
222
+ --color-tertiary: light-dark(var(--color-palette-founderub-40), var(--color-palette-founderub-80));
223
+ --color-on-tertiary: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-20));
224
+ --color-tertiary-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
225
+ --color-on-tertiary-container: light-dark(var(--color-palette-founderub-10), var(--color-palette-founderub-90));
226
+ }
227
+ [data-contrast='high'][data-product='founderub'], [data-contrast='high'] [data-product='founderub'] {
228
+ --color-tertiary: light-dark(var(--color-palette-founderub-30), var(--color-palette-founderub-90));
229
+ --color-on-tertiary: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-10));
230
+ --color-tertiary-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
231
+ --color-on-tertiary-container: light-dark(var(--color-palette-founderub-0), var(--color-palette-founderub-100));
232
+ }
233
+ @media (prefers-contrast: more) {
234
+ :root:not([data-contrast])[data-product='founderub'], :root:not([data-contrast]) [data-product='founderub'] {
235
+ --color-tertiary: light-dark(var(--color-palette-founderub-30), var(--color-palette-founderub-90));
236
+ --color-on-tertiary: light-dark(var(--color-palette-founderub-100), var(--color-palette-founderub-10));
237
+ --color-tertiary-container: light-dark(var(--color-palette-founderub-90), var(--color-palette-founderub-30));
238
+ --color-on-tertiary-container: light-dark(var(--color-palette-founderub-0), var(--color-palette-founderub-100));
239
+ }
240
+ }