@needless-ui/tokens 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +40 -0
- package/dist/tokens.css +325 -0
- package/dist/tokens.json +1676 -0
- package/package.json +45 -0
- package/src/color/dark.tokens.json +716 -0
- package/src/color/light.tokens.json +716 -0
- package/src/color/static.tokens.json +32 -0
- package/src/dimension.tokens.json +43 -0
- package/src/elevation.tokens.json +51 -0
- package/src/motion.tokens.json +15 -0
- package/src/semantic.tokens.json +82 -0
- package/src/typography.tokens.json +41 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 The Needless UI Authors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# @needless-ui/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for [Needless UI](https://github.com/needless-ui/needless-ui), written in the [W3C Design Tokens format (DTCG 2025.10)](https://www.designtokens.org/) and compiled to CSS custom properties.
|
|
4
|
+
|
|
5
|
+
## Use
|
|
6
|
+
|
|
7
|
+
```css
|
|
8
|
+
@import '@needless-ui/tokens/tokens.css';
|
|
9
|
+
|
|
10
|
+
.card {
|
|
11
|
+
padding: var(--nui-space-4);
|
|
12
|
+
border-radius: var(--nui-radius-lg);
|
|
13
|
+
background: var(--nui-color-bg-subtle);
|
|
14
|
+
color: var(--nui-color-text-default);
|
|
15
|
+
}
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
- `dist/tokens.css`: custom properties with light and dark modes.
|
|
19
|
+
- `dist/tokens.json`: every token resolved per mode, for docs and tooling.
|
|
20
|
+
- `src/**/*.tokens.json`: the DTCG sources, for your own design token pipeline.
|
|
21
|
+
|
|
22
|
+
## Modes
|
|
23
|
+
|
|
24
|
+
Light values apply by default, dark values when the OS prefers dark. Pin a mode on any element, and nest them freely:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<html data-nui-theme="dark">
|
|
28
|
+
<aside data-nui-theme="light">…</aside>
|
|
29
|
+
</html>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Color scales
|
|
33
|
+
|
|
34
|
+
Each palette (neutral, accent, danger, success, warning) has 12 steps with fixed roles: 1–2 backgrounds, 3–5 element states, 6–8 borders, 9–10 solid fills, 11–12 text. The scales are generated by `scripts/palette.ts`, which fits every color into sRGB and checks the WCAG 2.2 contrast of each text/background pair before writing the files.
|
|
35
|
+
|
|
36
|
+
Components use the semantic aliases (`--nui-color-accent-solid`, `--nui-color-bg-canvas`, …), so overriding one alias restyles every component that uses it.
|
|
37
|
+
|
|
38
|
+
## License
|
|
39
|
+
|
|
40
|
+
MIT
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,325 @@
|
|
|
1
|
+
/* @needless-ui/tokens: generated by scripts/build.ts from the files in src/. Do not edit. */
|
|
2
|
+
@layer nui.tokens, nui.base, nui.components, nui.utilities;
|
|
3
|
+
|
|
4
|
+
@layer nui.tokens {
|
|
5
|
+
:root, [data-nui-theme='light'] {
|
|
6
|
+
color-scheme: light;
|
|
7
|
+
--nui-color-neutral-1: oklch(0.99 0.0004 262);
|
|
8
|
+
--nui-color-neutral-2: oklch(0.975 0.001 262);
|
|
9
|
+
--nui-color-neutral-3: oklch(0.95 0.002 262);
|
|
10
|
+
--nui-color-neutral-4: oklch(0.925 0.0032 262);
|
|
11
|
+
--nui-color-neutral-5: oklch(0.895 0.0044 262);
|
|
12
|
+
--nui-color-neutral-6: oklch(0.86 0.0056 262);
|
|
13
|
+
--nui-color-neutral-7: oklch(0.81 0.0072 262);
|
|
14
|
+
--nui-color-neutral-8: oklch(0.74 0.01 262);
|
|
15
|
+
--nui-color-neutral-9: oklch(0.55 0.02 262);
|
|
16
|
+
--nui-color-neutral-10: oklch(0.5 0.0196 262);
|
|
17
|
+
--nui-color-neutral-11: oklch(0.47 0.017 262);
|
|
18
|
+
--nui-color-neutral-12: oklch(0.26 0.009 262);
|
|
19
|
+
--nui-color-accent-1: oklch(0.99 0.0044 264);
|
|
20
|
+
--nui-color-accent-2: oklch(0.975 0.011 264);
|
|
21
|
+
--nui-color-accent-3: oklch(0.95 0.022 264);
|
|
22
|
+
--nui-color-accent-4: oklch(0.925 0.0352 264);
|
|
23
|
+
--nui-color-accent-5: oklch(0.895 0.0484 264);
|
|
24
|
+
--nui-color-accent-6: oklch(0.86 0.0616 264);
|
|
25
|
+
--nui-color-accent-7: oklch(0.81 0.0792 264);
|
|
26
|
+
--nui-color-accent-8: oklch(0.74 0.11 264);
|
|
27
|
+
--nui-color-accent-9: oklch(0.55 0.22 264);
|
|
28
|
+
--nui-color-accent-10: oklch(0.5 0.2156 264);
|
|
29
|
+
--nui-color-accent-11: oklch(0.47 0.187 264);
|
|
30
|
+
--nui-color-accent-12: oklch(0.26 0.099 264);
|
|
31
|
+
--nui-color-danger-1: oklch(0.99 0.0042 25);
|
|
32
|
+
--nui-color-danger-2: oklch(0.975 0.0105 25);
|
|
33
|
+
--nui-color-danger-3: oklch(0.95 0.021 25);
|
|
34
|
+
--nui-color-danger-4: oklch(0.925 0.0336 25);
|
|
35
|
+
--nui-color-danger-5: oklch(0.895 0.0462 25);
|
|
36
|
+
--nui-color-danger-6: oklch(0.86 0.0588 25);
|
|
37
|
+
--nui-color-danger-7: oklch(0.81 0.0756 25);
|
|
38
|
+
--nui-color-danger-8: oklch(0.74 0.105 25);
|
|
39
|
+
--nui-color-danger-9: oklch(0.55 0.21 25);
|
|
40
|
+
--nui-color-danger-10: oklch(0.5 0.2028 25);
|
|
41
|
+
--nui-color-danger-11: oklch(0.47 0.1785 25);
|
|
42
|
+
--nui-color-danger-12: oklch(0.26 0.0945 25);
|
|
43
|
+
--nui-color-success-1: oklch(0.99 0.0032 152);
|
|
44
|
+
--nui-color-success-2: oklch(0.975 0.008 152);
|
|
45
|
+
--nui-color-success-3: oklch(0.95 0.016 152);
|
|
46
|
+
--nui-color-success-4: oklch(0.925 0.0256 152);
|
|
47
|
+
--nui-color-success-5: oklch(0.895 0.0352 152);
|
|
48
|
+
--nui-color-success-6: oklch(0.86 0.0448 152);
|
|
49
|
+
--nui-color-success-7: oklch(0.81 0.0576 152);
|
|
50
|
+
--nui-color-success-8: oklch(0.74 0.08 152);
|
|
51
|
+
--nui-color-success-9: oklch(0.55 0.1448 152);
|
|
52
|
+
--nui-color-success-10: oklch(0.5 0.1316 152);
|
|
53
|
+
--nui-color-success-11: oklch(0.47 0.1238 152);
|
|
54
|
+
--nui-color-success-12: oklch(0.26 0.0688 152);
|
|
55
|
+
--nui-color-warning-1: oklch(0.99 0.0034 78);
|
|
56
|
+
--nui-color-warning-2: oklch(0.975 0.0085 78);
|
|
57
|
+
--nui-color-warning-3: oklch(0.95 0.017 78);
|
|
58
|
+
--nui-color-warning-4: oklch(0.925 0.0272 78);
|
|
59
|
+
--nui-color-warning-5: oklch(0.895 0.0374 78);
|
|
60
|
+
--nui-color-warning-6: oklch(0.86 0.0476 78);
|
|
61
|
+
--nui-color-warning-7: oklch(0.81 0.0612 78);
|
|
62
|
+
--nui-color-warning-8: oklch(0.74 0.085 78);
|
|
63
|
+
--nui-color-warning-9: oklch(0.8 0.1668 78);
|
|
64
|
+
--nui-color-warning-10: oklch(0.76 0.1585 78);
|
|
65
|
+
--nui-color-warning-11: oklch(0.47 0.0981 78);
|
|
66
|
+
--nui-color-warning-12: oklch(0.26 0.0546 78);
|
|
67
|
+
--nui-color-bg-raised: oklch(1 0 0);
|
|
68
|
+
--nui-color-backdrop: oklch(0.22 0.02 262 / 0.45);
|
|
69
|
+
--nui-color-shadow: oklch(0.22 0.02 262 / 0.16);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media (prefers-color-scheme: dark) {
|
|
73
|
+
:root:not([data-nui-theme='light']) {
|
|
74
|
+
color-scheme: dark;
|
|
75
|
+
--nui-color-neutral-1: oklch(0.18 0.0016 262);
|
|
76
|
+
--nui-color-neutral-2: oklch(0.205 0.002 262);
|
|
77
|
+
--nui-color-neutral-3: oklch(0.245 0.0032 262);
|
|
78
|
+
--nui-color-neutral-4: oklch(0.275 0.0044 262);
|
|
79
|
+
--nui-color-neutral-5: oklch(0.31 0.0056 262);
|
|
80
|
+
--nui-color-neutral-6: oklch(0.35 0.0064 262);
|
|
81
|
+
--nui-color-neutral-7: oklch(0.41 0.008 262);
|
|
82
|
+
--nui-color-neutral-8: oklch(0.49 0.011 262);
|
|
83
|
+
--nui-color-neutral-9: oklch(0.5 0.02 262);
|
|
84
|
+
--nui-color-neutral-10: oklch(0.555 0.0196 262);
|
|
85
|
+
--nui-color-neutral-11: oklch(0.78 0.013 262);
|
|
86
|
+
--nui-color-neutral-12: oklch(0.95 0.004 262);
|
|
87
|
+
--nui-color-accent-1: oklch(0.18 0.0176 264);
|
|
88
|
+
--nui-color-accent-2: oklch(0.205 0.022 264);
|
|
89
|
+
--nui-color-accent-3: oklch(0.245 0.0352 264);
|
|
90
|
+
--nui-color-accent-4: oklch(0.275 0.0484 264);
|
|
91
|
+
--nui-color-accent-5: oklch(0.31 0.0616 264);
|
|
92
|
+
--nui-color-accent-6: oklch(0.35 0.0704 264);
|
|
93
|
+
--nui-color-accent-7: oklch(0.41 0.088 264);
|
|
94
|
+
--nui-color-accent-8: oklch(0.49 0.121 264);
|
|
95
|
+
--nui-color-accent-9: oklch(0.5 0.22 264);
|
|
96
|
+
--nui-color-accent-10: oklch(0.555 0.2156 264);
|
|
97
|
+
--nui-color-accent-11: oklch(0.78 0.1112 264);
|
|
98
|
+
--nui-color-accent-12: oklch(0.95 0.0236 264);
|
|
99
|
+
--nui-color-danger-1: oklch(0.18 0.0168 25);
|
|
100
|
+
--nui-color-danger-2: oklch(0.205 0.021 25);
|
|
101
|
+
--nui-color-danger-3: oklch(0.245 0.0336 25);
|
|
102
|
+
--nui-color-danger-4: oklch(0.275 0.0462 25);
|
|
103
|
+
--nui-color-danger-5: oklch(0.31 0.0588 25);
|
|
104
|
+
--nui-color-danger-6: oklch(0.35 0.0672 25);
|
|
105
|
+
--nui-color-danger-7: oklch(0.41 0.084 25);
|
|
106
|
+
--nui-color-danger-8: oklch(0.49 0.1155 25);
|
|
107
|
+
--nui-color-danger-9: oklch(0.5 0.2028 25);
|
|
108
|
+
--nui-color-danger-10: oklch(0.555 0.2058 25);
|
|
109
|
+
--nui-color-danger-11: oklch(0.78 0.1284 25);
|
|
110
|
+
--nui-color-danger-12: oklch(0.95 0.0249 25);
|
|
111
|
+
--nui-color-success-1: oklch(0.18 0.0128 152);
|
|
112
|
+
--nui-color-success-2: oklch(0.205 0.016 152);
|
|
113
|
+
--nui-color-success-3: oklch(0.245 0.0256 152);
|
|
114
|
+
--nui-color-success-4: oklch(0.275 0.0352 152);
|
|
115
|
+
--nui-color-success-5: oklch(0.31 0.0448 152);
|
|
116
|
+
--nui-color-success-6: oklch(0.35 0.0512 152);
|
|
117
|
+
--nui-color-success-7: oklch(0.41 0.064 152);
|
|
118
|
+
--nui-color-success-8: oklch(0.49 0.088 152);
|
|
119
|
+
--nui-color-success-9: oklch(0.5 0.1316 152);
|
|
120
|
+
--nui-color-success-10: oklch(0.55 0.1448 152);
|
|
121
|
+
--nui-color-success-11: oklch(0.78 0.104 152);
|
|
122
|
+
--nui-color-success-12: oklch(0.95 0.032 152);
|
|
123
|
+
--nui-color-warning-1: oklch(0.18 0.0136 78);
|
|
124
|
+
--nui-color-warning-2: oklch(0.205 0.017 78);
|
|
125
|
+
--nui-color-warning-3: oklch(0.245 0.0272 78);
|
|
126
|
+
--nui-color-warning-4: oklch(0.275 0.0374 78);
|
|
127
|
+
--nui-color-warning-5: oklch(0.31 0.0476 78);
|
|
128
|
+
--nui-color-warning-6: oklch(0.35 0.0544 78);
|
|
129
|
+
--nui-color-warning-7: oklch(0.41 0.068 78);
|
|
130
|
+
--nui-color-warning-8: oklch(0.49 0.0935 78);
|
|
131
|
+
--nui-color-warning-9: oklch(0.8 0.1668 78);
|
|
132
|
+
--nui-color-warning-10: oklch(0.76 0.1585 78);
|
|
133
|
+
--nui-color-warning-11: oklch(0.78 0.1105 78);
|
|
134
|
+
--nui-color-warning-12: oklch(0.95 0.034 78);
|
|
135
|
+
--nui-color-bg-raised: oklch(0.225 0.004 262);
|
|
136
|
+
--nui-color-backdrop: oklch(0 0 0 / 0.6);
|
|
137
|
+
--nui-color-shadow: oklch(0 0 0 / 0.5);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[data-nui-theme='dark'] {
|
|
142
|
+
color-scheme: dark;
|
|
143
|
+
--nui-color-neutral-1: oklch(0.18 0.0016 262);
|
|
144
|
+
--nui-color-neutral-2: oklch(0.205 0.002 262);
|
|
145
|
+
--nui-color-neutral-3: oklch(0.245 0.0032 262);
|
|
146
|
+
--nui-color-neutral-4: oklch(0.275 0.0044 262);
|
|
147
|
+
--nui-color-neutral-5: oklch(0.31 0.0056 262);
|
|
148
|
+
--nui-color-neutral-6: oklch(0.35 0.0064 262);
|
|
149
|
+
--nui-color-neutral-7: oklch(0.41 0.008 262);
|
|
150
|
+
--nui-color-neutral-8: oklch(0.49 0.011 262);
|
|
151
|
+
--nui-color-neutral-9: oklch(0.5 0.02 262);
|
|
152
|
+
--nui-color-neutral-10: oklch(0.555 0.0196 262);
|
|
153
|
+
--nui-color-neutral-11: oklch(0.78 0.013 262);
|
|
154
|
+
--nui-color-neutral-12: oklch(0.95 0.004 262);
|
|
155
|
+
--nui-color-accent-1: oklch(0.18 0.0176 264);
|
|
156
|
+
--nui-color-accent-2: oklch(0.205 0.022 264);
|
|
157
|
+
--nui-color-accent-3: oklch(0.245 0.0352 264);
|
|
158
|
+
--nui-color-accent-4: oklch(0.275 0.0484 264);
|
|
159
|
+
--nui-color-accent-5: oklch(0.31 0.0616 264);
|
|
160
|
+
--nui-color-accent-6: oklch(0.35 0.0704 264);
|
|
161
|
+
--nui-color-accent-7: oklch(0.41 0.088 264);
|
|
162
|
+
--nui-color-accent-8: oklch(0.49 0.121 264);
|
|
163
|
+
--nui-color-accent-9: oklch(0.5 0.22 264);
|
|
164
|
+
--nui-color-accent-10: oklch(0.555 0.2156 264);
|
|
165
|
+
--nui-color-accent-11: oklch(0.78 0.1112 264);
|
|
166
|
+
--nui-color-accent-12: oklch(0.95 0.0236 264);
|
|
167
|
+
--nui-color-danger-1: oklch(0.18 0.0168 25);
|
|
168
|
+
--nui-color-danger-2: oklch(0.205 0.021 25);
|
|
169
|
+
--nui-color-danger-3: oklch(0.245 0.0336 25);
|
|
170
|
+
--nui-color-danger-4: oklch(0.275 0.0462 25);
|
|
171
|
+
--nui-color-danger-5: oklch(0.31 0.0588 25);
|
|
172
|
+
--nui-color-danger-6: oklch(0.35 0.0672 25);
|
|
173
|
+
--nui-color-danger-7: oklch(0.41 0.084 25);
|
|
174
|
+
--nui-color-danger-8: oklch(0.49 0.1155 25);
|
|
175
|
+
--nui-color-danger-9: oklch(0.5 0.2028 25);
|
|
176
|
+
--nui-color-danger-10: oklch(0.555 0.2058 25);
|
|
177
|
+
--nui-color-danger-11: oklch(0.78 0.1284 25);
|
|
178
|
+
--nui-color-danger-12: oklch(0.95 0.0249 25);
|
|
179
|
+
--nui-color-success-1: oklch(0.18 0.0128 152);
|
|
180
|
+
--nui-color-success-2: oklch(0.205 0.016 152);
|
|
181
|
+
--nui-color-success-3: oklch(0.245 0.0256 152);
|
|
182
|
+
--nui-color-success-4: oklch(0.275 0.0352 152);
|
|
183
|
+
--nui-color-success-5: oklch(0.31 0.0448 152);
|
|
184
|
+
--nui-color-success-6: oklch(0.35 0.0512 152);
|
|
185
|
+
--nui-color-success-7: oklch(0.41 0.064 152);
|
|
186
|
+
--nui-color-success-8: oklch(0.49 0.088 152);
|
|
187
|
+
--nui-color-success-9: oklch(0.5 0.1316 152);
|
|
188
|
+
--nui-color-success-10: oklch(0.55 0.1448 152);
|
|
189
|
+
--nui-color-success-11: oklch(0.78 0.104 152);
|
|
190
|
+
--nui-color-success-12: oklch(0.95 0.032 152);
|
|
191
|
+
--nui-color-warning-1: oklch(0.18 0.0136 78);
|
|
192
|
+
--nui-color-warning-2: oklch(0.205 0.017 78);
|
|
193
|
+
--nui-color-warning-3: oklch(0.245 0.0272 78);
|
|
194
|
+
--nui-color-warning-4: oklch(0.275 0.0374 78);
|
|
195
|
+
--nui-color-warning-5: oklch(0.31 0.0476 78);
|
|
196
|
+
--nui-color-warning-6: oklch(0.35 0.0544 78);
|
|
197
|
+
--nui-color-warning-7: oklch(0.41 0.068 78);
|
|
198
|
+
--nui-color-warning-8: oklch(0.49 0.0935 78);
|
|
199
|
+
--nui-color-warning-9: oklch(0.8 0.1668 78);
|
|
200
|
+
--nui-color-warning-10: oklch(0.76 0.1585 78);
|
|
201
|
+
--nui-color-warning-11: oklch(0.78 0.1105 78);
|
|
202
|
+
--nui-color-warning-12: oklch(0.95 0.034 78);
|
|
203
|
+
--nui-color-bg-raised: oklch(0.225 0.004 262);
|
|
204
|
+
--nui-color-backdrop: oklch(0 0 0 / 0.6);
|
|
205
|
+
--nui-color-shadow: oklch(0 0 0 / 0.5);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
:root {
|
|
209
|
+
--nui-space-0: 0px;
|
|
210
|
+
--nui-space-1: 0.25rem;
|
|
211
|
+
--nui-space-2: 0.5rem;
|
|
212
|
+
--nui-space-3: 0.75rem;
|
|
213
|
+
--nui-space-4: 1rem;
|
|
214
|
+
--nui-space-5: 1.25rem;
|
|
215
|
+
--nui-space-6: 1.5rem;
|
|
216
|
+
--nui-space-8: 2rem;
|
|
217
|
+
--nui-space-10: 2.5rem;
|
|
218
|
+
--nui-space-12: 3rem;
|
|
219
|
+
--nui-space-16: 4rem;
|
|
220
|
+
--nui-radius-none: 0px;
|
|
221
|
+
--nui-radius-sm: 0.25rem;
|
|
222
|
+
--nui-radius-md: 0.375rem;
|
|
223
|
+
--nui-radius-lg: 0.5rem;
|
|
224
|
+
--nui-radius-xl: 0.75rem;
|
|
225
|
+
--nui-radius-full: 9999px;
|
|
226
|
+
--nui-border-width-thin: 1px;
|
|
227
|
+
--nui-border-width-thick: 2px;
|
|
228
|
+
--nui-control-height-sm: 1.75rem;
|
|
229
|
+
--nui-control-height-md: 2.25rem;
|
|
230
|
+
--nui-control-height-lg: 2.75rem;
|
|
231
|
+
--nui-focus-ring-width: 2px;
|
|
232
|
+
--nui-focus-ring-offset: 2px;
|
|
233
|
+
--nui-font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
234
|
+
--nui-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
235
|
+
--nui-font-size-xs: 0.75rem;
|
|
236
|
+
--nui-font-size-sm: 0.875rem;
|
|
237
|
+
--nui-font-size-md: 1rem;
|
|
238
|
+
--nui-font-size-lg: 1.125rem;
|
|
239
|
+
--nui-font-size-xl: 1.25rem;
|
|
240
|
+
--nui-font-size-2xl: 1.5rem;
|
|
241
|
+
--nui-font-size-3xl: 1.875rem;
|
|
242
|
+
--nui-font-weight-regular: 400;
|
|
243
|
+
--nui-font-weight-medium: 500;
|
|
244
|
+
--nui-font-weight-semibold: 600;
|
|
245
|
+
--nui-font-weight-bold: 700;
|
|
246
|
+
--nui-line-height-tight: 1.25;
|
|
247
|
+
--nui-line-height-normal: 1.5;
|
|
248
|
+
--nui-duration-fast: 120ms;
|
|
249
|
+
--nui-duration-normal: 200ms;
|
|
250
|
+
--nui-duration-slow: 320ms;
|
|
251
|
+
--nui-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
252
|
+
--nui-easing-enter: cubic-bezier(0, 0, 0.2, 1);
|
|
253
|
+
--nui-easing-exit: cubic-bezier(0.4, 0, 1, 1);
|
|
254
|
+
--nui-color-static-white: oklch(1 0 0);
|
|
255
|
+
--nui-color-static-ink: oklch(0.22 0.02 262);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
:root, [data-nui-theme] {
|
|
259
|
+
--nui-shadow-sm: 0px 1px 2px 0px var(--nui-color-shadow);
|
|
260
|
+
--nui-shadow-md: 0px 8px 24px -6px var(--nui-color-shadow), 0px 1px 3px 0px var(--nui-color-shadow);
|
|
261
|
+
--nui-shadow-lg: 0px 24px 48px -12px var(--nui-color-shadow), 0px 2px 6px 0px var(--nui-color-shadow);
|
|
262
|
+
--nui-color-bg-canvas: var(--nui-color-neutral-1);
|
|
263
|
+
--nui-color-bg-subtle: var(--nui-color-neutral-2);
|
|
264
|
+
--nui-color-bg-muted: var(--nui-color-neutral-3);
|
|
265
|
+
--nui-color-text-default: var(--nui-color-neutral-12);
|
|
266
|
+
--nui-color-text-muted: var(--nui-color-neutral-11);
|
|
267
|
+
--nui-color-border-subtle: var(--nui-color-neutral-6);
|
|
268
|
+
--nui-color-border-default: var(--nui-color-neutral-7);
|
|
269
|
+
--nui-color-border-strong: var(--nui-color-neutral-8);
|
|
270
|
+
--nui-color-focus-ring: var(--nui-color-accent-11);
|
|
271
|
+
--nui-color-accent-solid: var(--nui-color-accent-9);
|
|
272
|
+
--nui-color-accent-solid-hover: var(--nui-color-accent-10);
|
|
273
|
+
--nui-color-accent-on-solid: var(--nui-color-static-white);
|
|
274
|
+
--nui-color-accent-soft: var(--nui-color-accent-3);
|
|
275
|
+
--nui-color-accent-soft-hover: var(--nui-color-accent-4);
|
|
276
|
+
--nui-color-accent-soft-active: var(--nui-color-accent-5);
|
|
277
|
+
--nui-color-accent-border: var(--nui-color-accent-7);
|
|
278
|
+
--nui-color-accent-border-hover: var(--nui-color-accent-8);
|
|
279
|
+
--nui-color-accent-text: var(--nui-color-accent-11);
|
|
280
|
+
--nui-color-neutral-solid: var(--nui-color-neutral-12);
|
|
281
|
+
--nui-color-neutral-solid-hover: var(--nui-color-neutral-11);
|
|
282
|
+
--nui-color-neutral-on-solid: var(--nui-color-neutral-1);
|
|
283
|
+
--nui-color-neutral-soft: var(--nui-color-neutral-3);
|
|
284
|
+
--nui-color-neutral-soft-hover: var(--nui-color-neutral-4);
|
|
285
|
+
--nui-color-neutral-soft-active: var(--nui-color-neutral-5);
|
|
286
|
+
--nui-color-neutral-border: var(--nui-color-neutral-7);
|
|
287
|
+
--nui-color-neutral-border-hover: var(--nui-color-neutral-8);
|
|
288
|
+
--nui-color-neutral-text: var(--nui-color-neutral-12);
|
|
289
|
+
--nui-color-danger-solid: var(--nui-color-danger-9);
|
|
290
|
+
--nui-color-danger-solid-hover: var(--nui-color-danger-10);
|
|
291
|
+
--nui-color-danger-on-solid: var(--nui-color-static-white);
|
|
292
|
+
--nui-color-danger-soft: var(--nui-color-danger-3);
|
|
293
|
+
--nui-color-danger-soft-hover: var(--nui-color-danger-4);
|
|
294
|
+
--nui-color-danger-soft-active: var(--nui-color-danger-5);
|
|
295
|
+
--nui-color-danger-border: var(--nui-color-danger-7);
|
|
296
|
+
--nui-color-danger-border-hover: var(--nui-color-danger-8);
|
|
297
|
+
--nui-color-danger-text: var(--nui-color-danger-11);
|
|
298
|
+
--nui-color-success-solid: var(--nui-color-success-9);
|
|
299
|
+
--nui-color-success-solid-hover: var(--nui-color-success-10);
|
|
300
|
+
--nui-color-success-on-solid: var(--nui-color-static-white);
|
|
301
|
+
--nui-color-success-soft: var(--nui-color-success-3);
|
|
302
|
+
--nui-color-success-soft-hover: var(--nui-color-success-4);
|
|
303
|
+
--nui-color-success-soft-active: var(--nui-color-success-5);
|
|
304
|
+
--nui-color-success-border: var(--nui-color-success-7);
|
|
305
|
+
--nui-color-success-border-hover: var(--nui-color-success-8);
|
|
306
|
+
--nui-color-success-text: var(--nui-color-success-11);
|
|
307
|
+
--nui-color-warning-solid: var(--nui-color-warning-9);
|
|
308
|
+
--nui-color-warning-solid-hover: var(--nui-color-warning-10);
|
|
309
|
+
--nui-color-warning-on-solid: var(--nui-color-static-ink);
|
|
310
|
+
--nui-color-warning-soft: var(--nui-color-warning-3);
|
|
311
|
+
--nui-color-warning-soft-hover: var(--nui-color-warning-4);
|
|
312
|
+
--nui-color-warning-soft-active: var(--nui-color-warning-5);
|
|
313
|
+
--nui-color-warning-border: var(--nui-color-warning-7);
|
|
314
|
+
--nui-color-warning-border-hover: var(--nui-color-warning-8);
|
|
315
|
+
--nui-color-warning-text: var(--nui-color-warning-11);
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
@media (prefers-reduced-motion: reduce) {
|
|
319
|
+
:root {
|
|
320
|
+
--nui-duration-fast: 0.01ms;
|
|
321
|
+
--nui-duration-normal: 0.01ms;
|
|
322
|
+
--nui-duration-slow: 0.01ms;
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
}
|