ngx-view-builder-runtime 0.5.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.md +69 -0
- package/README.md +98 -0
- package/fesm2022/ngx-view-builder-runtime-avatar-element-D9TPAiIC.mjs +1 -0
- package/fesm2022/ngx-view-builder-runtime-breadcrumbs-element-B-IYngp0.mjs +1 -0
- package/fesm2022/ngx-view-builder-runtime-icon-element-D2Zs5vIG.mjs +1 -0
- package/fesm2022/ngx-view-builder-runtime-ngx-view-builder-runtime-q8FSSVhq.mjs +49 -0
- package/fesm2022/ngx-view-builder-runtime-toast-element-zLm-618Z.mjs +1 -0
- package/fesm2022/ngx-view-builder-runtime.mjs +1 -0
- package/package.json +61 -0
- package/styles/base.css +0 -0
- package/styles/components.css +443 -0
- package/styles/element.css +618 -0
- package/styles/fp-utilities.css +310 -0
- package/styles/index.css +7 -0
- package/styles/reset.css +54 -0
- package/styles/tokens.css +290 -0
- package/types/ngx-view-builder-runtime.d.ts +8801 -0
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
@layer fpUtilities {
|
|
2
|
+
.nvb-root .nvb-hidden {
|
|
3
|
+
display: none !important;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.nvb-root .nvb-flex-center {
|
|
7
|
+
display: flex;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
align-items: center;
|
|
10
|
+
}
|
|
11
|
+
.nvb-root .nvb-flex-left {
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: flex-start;
|
|
14
|
+
align-items: center;
|
|
15
|
+
}
|
|
16
|
+
.nvb-root .nvb-flex-right {
|
|
17
|
+
display: flex;
|
|
18
|
+
justify-content: flex-end;
|
|
19
|
+
align-items: center;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.nvb-root .nvb-bg-primary-50 {
|
|
23
|
+
background-color: var(--nvb-color-primary-050);
|
|
24
|
+
}
|
|
25
|
+
.nvb-root .nvb-bg-primary-100 {
|
|
26
|
+
background-color: var(--nvb-color-primary-100);
|
|
27
|
+
}
|
|
28
|
+
.nvb-root .nvb-bg-primary-200 {
|
|
29
|
+
background-color: var(--nvb-color-primary-200);
|
|
30
|
+
}
|
|
31
|
+
.nvb-root .nvb-bg-primary-300 {
|
|
32
|
+
background-color: var(--nvb-color-primary-300);
|
|
33
|
+
}
|
|
34
|
+
.nvb-root .nvb-bg-primary-400 {
|
|
35
|
+
background-color: var(--nvb-color-primary-400);
|
|
36
|
+
}
|
|
37
|
+
.nvb-root .nvb-bg-primary-500 {
|
|
38
|
+
background-color: var(--nvb-color-primary-500);
|
|
39
|
+
}
|
|
40
|
+
.nvb-root .nvb-bg-primary-600 {
|
|
41
|
+
background-color: var(--nvb-color-primary-600);
|
|
42
|
+
}
|
|
43
|
+
.nvb-root .nvb-bg-primary-700 {
|
|
44
|
+
background-color: var(--nvb-color-primary-700);
|
|
45
|
+
}
|
|
46
|
+
.nvb-root .nvb-bg-primary-800 {
|
|
47
|
+
background-color: var(--nvb-color-primary-800);
|
|
48
|
+
}
|
|
49
|
+
.nvb-root .nvb-bg-primary-900 {
|
|
50
|
+
background-color: var(--nvb-color-primary-900);
|
|
51
|
+
}
|
|
52
|
+
.nvb-root .nvb-bg-primary-950 {
|
|
53
|
+
background-color: var(--nvb-color-primary-950);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.nvb-root .nvb-bg-neutral-000 {
|
|
57
|
+
background-color: var(--nvb-color-neutral-000);
|
|
58
|
+
}
|
|
59
|
+
.nvb-root .nvb-bg-neutral-050 {
|
|
60
|
+
background-color: var(--nvb-color-neutral-050);
|
|
61
|
+
}
|
|
62
|
+
.nvb-root .nvb-bg-neutral-100 {
|
|
63
|
+
background-color: var(--nvb-color-neutral-100);
|
|
64
|
+
}
|
|
65
|
+
.nvb-root .nvb-bg-neutral-200 {
|
|
66
|
+
background-color: var(--nvb-color-neutral-200);
|
|
67
|
+
}
|
|
68
|
+
.nvb-root .nvb-bg-neutral-300 {
|
|
69
|
+
background-color: var(--nvb-color-neutral-300);
|
|
70
|
+
}
|
|
71
|
+
.nvb-root .nvb-bg-neutral-400 {
|
|
72
|
+
background-color: var(--nvb-color-neutral-400);
|
|
73
|
+
}
|
|
74
|
+
.nvb-root .nvb-bg-neutral-500 {
|
|
75
|
+
background-color: var(--nvb-color-neutral-500);
|
|
76
|
+
}
|
|
77
|
+
.nvb-root .nvb-bg-neutral-600 {
|
|
78
|
+
background-color: var(--nvb-color-neutral-600);
|
|
79
|
+
}
|
|
80
|
+
.nvb-root .nvb-bg-neutral-700 {
|
|
81
|
+
background-color: var(--nvb-color-neutral-700);
|
|
82
|
+
}
|
|
83
|
+
.nvb-root .nvb-bg-neutral-800 {
|
|
84
|
+
background-color: var(--nvb-color-neutral-800);
|
|
85
|
+
}
|
|
86
|
+
.nvb-root .nvb-bg-neutral-900 {
|
|
87
|
+
background-color: var(--nvb-color-neutral-900);
|
|
88
|
+
}
|
|
89
|
+
.nvb-root .nvb-bg-neutral-950 {
|
|
90
|
+
background-color: var(--nvb-color-neutral-950);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.nvb-root .nvb-bg-risk-50 {
|
|
94
|
+
background-color: var(--nvb-color-risk-050);
|
|
95
|
+
}
|
|
96
|
+
.nvb-root .nvb-bg-risk-100 {
|
|
97
|
+
background-color: var(--nvb-color-risk-100);
|
|
98
|
+
}
|
|
99
|
+
.nvb-root .nvb-bg-risk-200 {
|
|
100
|
+
background-color: var(--nvb-color-risk-200);
|
|
101
|
+
}
|
|
102
|
+
.nvb-root .nvb-bg-risk-300 {
|
|
103
|
+
background-color: var(--nvb-color-risk-300);
|
|
104
|
+
}
|
|
105
|
+
.nvb-root .nvb-bg-risk-400 {
|
|
106
|
+
background-color: var(--nvb-color-risk-400);
|
|
107
|
+
}
|
|
108
|
+
.nvb-root .nvb-bg-risk-500 {
|
|
109
|
+
background-color: var(--nvb-color-risk-500);
|
|
110
|
+
}
|
|
111
|
+
.nvb-root .nvb-bg-risk-600 {
|
|
112
|
+
background-color: var(--nvb-color-risk-600);
|
|
113
|
+
}
|
|
114
|
+
.nvb-root .nvb-bg-risk-700 {
|
|
115
|
+
background-color: var(--nvb-color-risk-700);
|
|
116
|
+
}
|
|
117
|
+
.nvb-root .nvb-bg-risk-800 {
|
|
118
|
+
background-color: var(--nvb-color-risk-800);
|
|
119
|
+
}
|
|
120
|
+
.nvb-root .nvb-bg-risk-900 {
|
|
121
|
+
background-color: var(--nvb-color-risk-900);
|
|
122
|
+
}
|
|
123
|
+
.nvb-root .nvb-bg-risk-950 {
|
|
124
|
+
background-color: var(--nvb-color-risk-950);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.nvb-root .nvb-bg-warning-50 {
|
|
128
|
+
background-color: var(--nvb-color-warning-050);
|
|
129
|
+
}
|
|
130
|
+
.nvb-root .nvb-bg-warning-100 {
|
|
131
|
+
background-color: var(--nvb-color-warning-100);
|
|
132
|
+
}
|
|
133
|
+
.nvb-root .nvb-bg-warning-200 {
|
|
134
|
+
background-color: var(--nvb-color-warning-200);
|
|
135
|
+
}
|
|
136
|
+
.nvb-root .nvb-bg-warning-300 {
|
|
137
|
+
background-color: var(--nvb-color-warning-300);
|
|
138
|
+
}
|
|
139
|
+
.nvb-root .nvb-bg-warning-400 {
|
|
140
|
+
background-color: var(--nvb-color-warning-400);
|
|
141
|
+
}
|
|
142
|
+
.nvb-root .nvb-bg-warning-500 {
|
|
143
|
+
background-color: var(--nvb-color-warning-500);
|
|
144
|
+
}
|
|
145
|
+
.nvb-root .nvb-bg-warning-600 {
|
|
146
|
+
background-color: var(--nvb-color-warning-600);
|
|
147
|
+
}
|
|
148
|
+
.nvb-root .nvb-bg-warning-700 {
|
|
149
|
+
background-color: var(--nvb-color-warning-700);
|
|
150
|
+
}
|
|
151
|
+
.nvb-root .nvb-bg-warning-800 {
|
|
152
|
+
background-color: var(--nvb-color-warning-800);
|
|
153
|
+
}
|
|
154
|
+
.nvb-root .nvb-bg-warning-900 {
|
|
155
|
+
background-color: var(--nvb-color-warning-900);
|
|
156
|
+
}
|
|
157
|
+
.nvb-root .nvb-bg-warning-950 {
|
|
158
|
+
background-color: var(--nvb-color-warning-950);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.nvb-root .nvb-bg-success-50 {
|
|
162
|
+
background-color: var(--nvb-color-success-050);
|
|
163
|
+
}
|
|
164
|
+
.nvb-root .nvb-bg-success-100 {
|
|
165
|
+
background-color: var(--nvb-color-success-100);
|
|
166
|
+
}
|
|
167
|
+
.nvb-root .nvb-bg-success-200 {
|
|
168
|
+
background-color: var(--nvb-color-success-200);
|
|
169
|
+
}
|
|
170
|
+
.nvb-root .nvb-bg-success-300 {
|
|
171
|
+
background-color: var(--nvb-color-success-300);
|
|
172
|
+
}
|
|
173
|
+
.nvb-root .nvb-bg-success-400 {
|
|
174
|
+
background-color: var(--nvb-color-success-400);
|
|
175
|
+
}
|
|
176
|
+
.nvb-root .nvb-bg-success-500 {
|
|
177
|
+
background-color: var(--nvb-color-success-500);
|
|
178
|
+
}
|
|
179
|
+
.nvb-root .nvb-bg-success-600 {
|
|
180
|
+
background-color: var(--nvb-color-success-600);
|
|
181
|
+
}
|
|
182
|
+
.nvb-root .nvb-bg-success-700 {
|
|
183
|
+
background-color: var(--nvb-color-success-700);
|
|
184
|
+
}
|
|
185
|
+
.nvb-root .nvb-bg-success-800 {
|
|
186
|
+
background-color: var(--nvb-color-success-800);
|
|
187
|
+
}
|
|
188
|
+
.nvb-root .nvb-bg-success-900 {
|
|
189
|
+
background-color: var(--nvb-color-success-900);
|
|
190
|
+
}
|
|
191
|
+
.nvb-root .nvb-bg-success-950 {
|
|
192
|
+
background-color: var(--nvb-color-success-950);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.nvb-root .nvb-bg-info-50 {
|
|
196
|
+
background-color: var(--nvb-color-info-050);
|
|
197
|
+
}
|
|
198
|
+
.nvb-root .nvb-bg-info-100 {
|
|
199
|
+
background-color: var(--nvb-color-info-100);
|
|
200
|
+
}
|
|
201
|
+
.nvb-root .nvb-bg-info-200 {
|
|
202
|
+
background-color: var(--nvb-color-info-200);
|
|
203
|
+
}
|
|
204
|
+
.nvb-root .nvb-bg-info-300 {
|
|
205
|
+
background-color: var(--nvb-color-info-300);
|
|
206
|
+
}
|
|
207
|
+
.nvb-root .nvb-bg-info-400 {
|
|
208
|
+
background-color: var(--nvb-color-info-400);
|
|
209
|
+
}
|
|
210
|
+
.nvb-root .nvb-bg-info-500 {
|
|
211
|
+
background-color: var(--nvb-color-info-500);
|
|
212
|
+
}
|
|
213
|
+
.nvb-root .nvb-bg-info-600 {
|
|
214
|
+
background-color: var(--nvb-color-info-600);
|
|
215
|
+
}
|
|
216
|
+
.nvb-root .nvb-bg-info-700 {
|
|
217
|
+
background-color: var(--nvb-color-info-700);
|
|
218
|
+
}
|
|
219
|
+
.nvb-root .nvb-bg-info-800 {
|
|
220
|
+
background-color: var(--nvb-color-info-800);
|
|
221
|
+
}
|
|
222
|
+
.nvb-root .nvb-bg-info-900 {
|
|
223
|
+
background-color: var(--nvb-color-info-900);
|
|
224
|
+
}
|
|
225
|
+
.nvb-root .nvb-bg-info-950 {
|
|
226
|
+
background-color: var(--nvb-color-info-950);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.nvb-root .nvb-bg-text-000 {
|
|
230
|
+
background-color: var(--nvb-color-text-000);
|
|
231
|
+
}
|
|
232
|
+
.nvb-root .nvb-bg-text-050 {
|
|
233
|
+
background-color: var(--nvb-color-text-050);
|
|
234
|
+
}
|
|
235
|
+
.nvb-root .nvb-bg-text-100 {
|
|
236
|
+
background-color: var(--nvb-color-text-100);
|
|
237
|
+
}
|
|
238
|
+
.nvb-root .nvb-bg-text-200 {
|
|
239
|
+
background-color: var(--nvb-color-text-200);
|
|
240
|
+
}
|
|
241
|
+
.nvb-root .nvb-bg-text-300 {
|
|
242
|
+
background-color: var(--nvb-color-text-300);
|
|
243
|
+
}
|
|
244
|
+
.nvb-root .nvb-bg-text-400 {
|
|
245
|
+
background-color: var(--nvb-color-text-400);
|
|
246
|
+
}
|
|
247
|
+
.nvb-root .nvb-bg-text-500 {
|
|
248
|
+
background-color: var(--nvb-color-text-500);
|
|
249
|
+
}
|
|
250
|
+
.nvb-root .nvb-bg-text-600 {
|
|
251
|
+
background-color: var(--nvb-color-text-600);
|
|
252
|
+
}
|
|
253
|
+
.nvb-root .nvb-bg-text-700 {
|
|
254
|
+
background-color: var(--nvb-color-text-700);
|
|
255
|
+
}
|
|
256
|
+
.nvb-root .nvb-bg-text-800 {
|
|
257
|
+
background-color: var(--nvb-color-text-800);
|
|
258
|
+
}
|
|
259
|
+
.nvb-root .nvb-bg-text-900 {
|
|
260
|
+
background-color: var(--nvb-color-text-900);
|
|
261
|
+
}
|
|
262
|
+
.nvb-root .nvb-bg-text-950 {
|
|
263
|
+
background-color: var(--nvb-color-text-950);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.nvb-root .nvb-text-neutral-0 {
|
|
267
|
+
color: var(--nvb-color-neutral-000);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.nvb-root .nvb-text-neutral-50 {
|
|
271
|
+
color: var(--nvb-color-neutral-050);
|
|
272
|
+
}
|
|
273
|
+
.nvb-root .nvb-text-neutral-100 {
|
|
274
|
+
color: var(--nvb-color-neutral-100);
|
|
275
|
+
}
|
|
276
|
+
.nvb-root .nvb-text-neutral-200 {
|
|
277
|
+
color: var(--nvb-color-neutral-200);
|
|
278
|
+
}
|
|
279
|
+
.nvb-root .nvb-text-neutral-300 {
|
|
280
|
+
color: var(--nvb-color-neutral-300);
|
|
281
|
+
}
|
|
282
|
+
.nvb-root .nvb-text-neutral-400 {
|
|
283
|
+
color: var(--nvb-color-neutral-400);
|
|
284
|
+
}
|
|
285
|
+
.nvb-root .nvb-text-neutral-500 {
|
|
286
|
+
color: var(--nvb-color-neutral-500);
|
|
287
|
+
}
|
|
288
|
+
.nvb-root .nvb-text-neutral-600 {
|
|
289
|
+
color: var(--nvb-color-neutral-600);
|
|
290
|
+
}
|
|
291
|
+
.nvb-root .nvb-text-neutral-700 {
|
|
292
|
+
color: var(--nvb-color-neutral-700);
|
|
293
|
+
}
|
|
294
|
+
.nvb-root .nvb-text-neutral-800 {
|
|
295
|
+
color: var(--nvb-color-neutral-800);
|
|
296
|
+
}
|
|
297
|
+
.nvb-root .nvb-text-neutral-900 {
|
|
298
|
+
color: var(--nvb-color-neutral-900);
|
|
299
|
+
}
|
|
300
|
+
.nvb-root .nvb-text-neutral-950 {
|
|
301
|
+
color: var(--nvb-color-neutral-950);
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.nvb-root .nvb-p-2 {
|
|
305
|
+
padding: var(--nvb-space-2);
|
|
306
|
+
}
|
|
307
|
+
.nvb-root .nvb-p-3 {
|
|
308
|
+
padding: var(--nvb-space-3);
|
|
309
|
+
}
|
|
310
|
+
}
|
package/styles/index.css
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
@layer reset, tokens, components, fpUtilities, elements;
|
|
2
|
+
|
|
3
|
+
@import './reset.css' layer(reset);
|
|
4
|
+
@import './tokens.css' layer(tokens);
|
|
5
|
+
@import './components.css' layer(components);
|
|
6
|
+
@import './fp-utilities.css' layer(fpUtilities);
|
|
7
|
+
@import './element.css' layer(elements);
|
package/styles/reset.css
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.nvb-root,
|
|
2
|
+
.nvb-root *,
|
|
3
|
+
.nvb-root *::before,
|
|
4
|
+
.nvb-root *::after {
|
|
5
|
+
margin: 0;
|
|
6
|
+
padding: 0;
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.nvb-root {
|
|
11
|
+
height: 100%;
|
|
12
|
+
line-height: 1.5;
|
|
13
|
+
-webkit-font-smoothing: antialiased;
|
|
14
|
+
text-size-adjust: 100%;
|
|
15
|
+
font-family: sans-serif;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.nvb-root ul,
|
|
19
|
+
.nvb-root ol {
|
|
20
|
+
list-style: none;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.nvb-root a {
|
|
24
|
+
text-decoration: none;
|
|
25
|
+
color: inherit;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.nvb-root img,
|
|
29
|
+
.nvb-root picture,
|
|
30
|
+
.nvb-root video,
|
|
31
|
+
.nvb-root canvas,
|
|
32
|
+
.nvb-root svg {
|
|
33
|
+
display: block;
|
|
34
|
+
max-width: 100%;
|
|
35
|
+
height: auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.nvb-root input,
|
|
39
|
+
.nvb-root button,
|
|
40
|
+
.nvb-root textarea,
|
|
41
|
+
.nvb-root select {
|
|
42
|
+
font: inherit;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.nvb-root button {
|
|
46
|
+
border: none;
|
|
47
|
+
background: none;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.nvb-root table {
|
|
52
|
+
border-collapse: collapse;
|
|
53
|
+
border-spacing: 0;
|
|
54
|
+
}
|
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
@layer tokens {
|
|
2
|
+
/* `:host` covers the runtime, which injects this sheet into its shadow root. `.nvb-root`
|
|
3
|
+
covers a host application that imports the stylesheet globally, where `:host` matches
|
|
4
|
+
nothing at all and every token silently falls back to its inline default.
|
|
5
|
+
|
|
6
|
+
Every name carries the `nvb-` prefix for the same reason the classes do. Unprefixed
|
|
7
|
+
`--color-neutral-300` collided with the host's own token of that name, and the damage
|
|
8
|
+
ran both ways: our value won inside `.nvb-root`, so a host rule that still applied
|
|
9
|
+
there resolved our colour in the host's format. A design system that keeps its
|
|
10
|
+
palette as HSL channel triplets for Tailwind then computed `hsl(oklch(...))`, which
|
|
11
|
+
is invalid, so the declaration fell back to `currentColor` and inputs came out with
|
|
12
|
+
thick black borders. */
|
|
13
|
+
:host,
|
|
14
|
+
.nvb-root {
|
|
15
|
+
--nvb-font-family-base:
|
|
16
|
+
'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
|
|
17
|
+
'Helvetica Neue', sans-serif;
|
|
18
|
+
--nvb-color-primary-050: oklch(98.04% 0.0104 251.42);
|
|
19
|
+
--nvb-color-primary-100: oklch(95.63% 0.0247 251.98);
|
|
20
|
+
--nvb-color-primary-200: oklch(91.21% 0.0518 252.79);
|
|
21
|
+
--nvb-color-primary-300: oklch(84.55% 0.0888 253.67);
|
|
22
|
+
--nvb-color-primary-400: oklch(75.39% 0.1293 254.94);
|
|
23
|
+
--nvb-color-primary-500: oklch(64.21% 0.1552 256.62);
|
|
24
|
+
--nvb-color-primary-600: oklch(56.71% 0.1412 257.44);
|
|
25
|
+
--nvb-color-primary-700: oklch(48.29% 0.1191 258.32);
|
|
26
|
+
--nvb-color-primary-800: oklch(40.54% 0.0992 258.96);
|
|
27
|
+
--nvb-color-primary-900: oklch(31.48% 0.0762 259.64);
|
|
28
|
+
--nvb-color-primary-950: oklch(24.86% 0.0581 260.47);
|
|
29
|
+
--nvb-color-neutral-000: oklch(100% 0.0001 89.88);
|
|
30
|
+
--nvb-color-neutral-050: oklch(98.38% 0.0035 247.86);
|
|
31
|
+
--nvb-color-neutral-100: oklch(96.76% 0.007 247.9);
|
|
32
|
+
--nvb-color-neutral-200: oklch(92.58% 0.0132 255.03);
|
|
33
|
+
--nvb-color-neutral-300: oklch(86.94% 0.0199 253.37);
|
|
34
|
+
--nvb-color-neutral-400: oklch(71% 0.0348 256.79);
|
|
35
|
+
--nvb-color-neutral-500: oklch(55.64% 0.0398 256.82);
|
|
36
|
+
--nvb-color-neutral-600: oklch(45.05% 0.0371 256.83);
|
|
37
|
+
--nvb-color-neutral-700: oklch(37.52% 0.0394 256.85);
|
|
38
|
+
--nvb-color-neutral-800: oklch(27.53% 0.0364 259.7);
|
|
39
|
+
--nvb-color-neutral-900: oklch(20.64% 0.0388 265.55);
|
|
40
|
+
--nvb-color-neutral-950: oklch(12.92% 0.0415 265.15);
|
|
41
|
+
--nvb-color-risk-050: oklch(96.78% 0.0142 17.4);
|
|
42
|
+
--nvb-color-risk-100: oklch(93.44% 0.0314 17.73);
|
|
43
|
+
--nvb-color-risk-200: oklch(88.03% 0.0615 18.39);
|
|
44
|
+
--nvb-color-risk-300: oklch(80.98% 0.1025 19.54);
|
|
45
|
+
--nvb-color-risk-400: oklch(71.23% 0.1656 22.18);
|
|
46
|
+
--nvb-color-risk-500: oklch(63.56% 0.2082 25.38);
|
|
47
|
+
--nvb-color-risk-600: oklch(57.86% 0.2137 27.17);
|
|
48
|
+
--nvb-color-risk-700: oklch(50.79% 0.1918 27.56);
|
|
49
|
+
--nvb-color-risk-800: oklch(44.1% 0.1603 26.89);
|
|
50
|
+
--nvb-color-risk-900: oklch(39.96% 0.1348 25.77);
|
|
51
|
+
--nvb-color-risk-950: oklch(25.26% 0.0866 26);
|
|
52
|
+
--nvb-color-caution-050: oklch(98.66% 0.0218 95.28);
|
|
53
|
+
--nvb-color-caution-100: oklch(96.22% 0.0569 95.61);
|
|
54
|
+
--nvb-color-caution-200: oklch(92.57% 0.1141 95.75);
|
|
55
|
+
--nvb-color-caution-300: oklch(88.13% 0.1526 91.77);
|
|
56
|
+
--nvb-color-caution-400: oklch(83.34% 0.1641 83.87);
|
|
57
|
+
--nvb-color-caution-500: oklch(76.97% 0.1645 70.61);
|
|
58
|
+
--nvb-color-caution-600: oklch(66.88% 0.1588 57.96);
|
|
59
|
+
--nvb-color-caution-700: oklch(55.42% 0.1447 49.16);
|
|
60
|
+
--nvb-color-caution-800: oklch(47.06% 0.1236 46.53);
|
|
61
|
+
--nvb-color-caution-900: oklch(40.96% 0.1037 46.31);
|
|
62
|
+
--nvb-color-caution-950: oklch(27.8% 0.0739 45.8);
|
|
63
|
+
--nvb-color-warning-050: oklch(98.66% 0.0218 95.28);
|
|
64
|
+
--nvb-color-warning-100: oklch(96.22% 0.0569 95.61);
|
|
65
|
+
--nvb-color-warning-200: oklch(92.57% 0.1141 95.75);
|
|
66
|
+
--nvb-color-warning-300: oklch(88.13% 0.1526 91.77);
|
|
67
|
+
--nvb-color-warning-400: oklch(83.34% 0.1641 83.87);
|
|
68
|
+
--nvb-color-warning-500: oklch(76.97% 0.1645 70.61);
|
|
69
|
+
--nvb-color-warning-600: oklch(66.88% 0.1588 57.96);
|
|
70
|
+
--nvb-color-warning-700: oklch(55.42% 0.1447 49.16);
|
|
71
|
+
--nvb-color-warning-800: oklch(47.06% 0.1236 46.53);
|
|
72
|
+
--nvb-color-warning-900: oklch(40.96% 0.1037 46.31);
|
|
73
|
+
--nvb-color-warning-950: oklch(27.8% 0.0739 45.8);
|
|
74
|
+
--nvb-color-success-050: oklch(98.36% 0.0162 155.55);
|
|
75
|
+
--nvb-color-success-100: oklch(96.46% 0.0405 157.07);
|
|
76
|
+
--nvb-color-success-200: oklch(92.46% 0.0811 155.98);
|
|
77
|
+
--nvb-color-success-300: oklch(87.12% 0.137 154.59);
|
|
78
|
+
--nvb-color-success-400: oklch(79.99% 0.1816 151.78);
|
|
79
|
+
--nvb-color-success-500: oklch(72.05% 0.192 149.49);
|
|
80
|
+
--nvb-color-success-600: oklch(62.3% 0.1688 149.18);
|
|
81
|
+
--nvb-color-success-700: oklch(52.48% 0.1373 149.83);
|
|
82
|
+
--nvb-color-success-800: oklch(44.61% 0.1073 151.49);
|
|
83
|
+
--nvb-color-success-900: oklch(38.98% 0.0885 152.69);
|
|
84
|
+
--nvb-color-success-950: oklch(26.61% 0.0625 153.04);
|
|
85
|
+
--nvb-color-info-050: oklch(97.67% 0.0127 236.62);
|
|
86
|
+
--nvb-color-info-100: oklch(95.35% 0.024 236.81);
|
|
87
|
+
--nvb-color-info-200: oklch(89.99% 0.0556 231.68);
|
|
88
|
+
--nvb-color-info-300: oklch(82.95% 0.1004 229.56);
|
|
89
|
+
--nvb-color-info-400: oklch(75.84% 0.1373 231.6);
|
|
90
|
+
--nvb-color-info-500: oklch(67.76% 0.1481 238.1);
|
|
91
|
+
--nvb-color-info-600: oklch(58.63% 0.1366 241.18);
|
|
92
|
+
--nvb-color-info-700: oklch(49.96% 0.1179 242.21);
|
|
93
|
+
--nvb-color-info-800: oklch(43.8% 0.0988 240.83);
|
|
94
|
+
--nvb-color-info-900: oklch(39.2% 0.0844 240.76);
|
|
95
|
+
--nvb-color-info-950: oklch(29.47% 0.0635 243.15);
|
|
96
|
+
--nvb-color-text-000: oklch(100% 0.0001 89.88);
|
|
97
|
+
--nvb-color-text-050: oklch(98.38% 0.0035 247.86);
|
|
98
|
+
--nvb-color-text-100: oklch(96.76% 0.007 247.9);
|
|
99
|
+
--nvb-color-text-200: oklch(92.58% 0.0132 255.03);
|
|
100
|
+
--nvb-color-text-300: oklch(86.94% 0.0199 253.37);
|
|
101
|
+
--nvb-color-text-400: oklch(71% 0.0348 256.79);
|
|
102
|
+
--nvb-color-text-500: oklch(55.64% 0.0398 256.82);
|
|
103
|
+
--nvb-color-text-600: oklch(45.05% 0.0371 256.83);
|
|
104
|
+
--nvb-color-text-700: oklch(37.52% 0.0394 256.85);
|
|
105
|
+
--nvb-color-text-800: oklch(27.53% 0.0364 259.7);
|
|
106
|
+
--nvb-color-text-900: oklch(20.64% 0.0388 265.55);
|
|
107
|
+
--nvb-color-text-950: oklch(12.92% 0.0415 265.15);
|
|
108
|
+
--nvb-radius-sm: 2px;
|
|
109
|
+
--nvb-radius-md: 4px;
|
|
110
|
+
--nvb-radius-lg: 8px;
|
|
111
|
+
--nvb-radius-xl: 12px;
|
|
112
|
+
--nvb-space-0: 2px;
|
|
113
|
+
--nvb-space-1: 4px;
|
|
114
|
+
--nvb-space-2: 6px;
|
|
115
|
+
--nvb-space-3: 8px;
|
|
116
|
+
--nvb-space-4: 10px;
|
|
117
|
+
--nvb-space-5: 12px;
|
|
118
|
+
--nvb-space-6: 16px;
|
|
119
|
+
--nvb-space-7: 20px;
|
|
120
|
+
--nvb-space-8: 24px;
|
|
121
|
+
--nvb-space-9: 32px;
|
|
122
|
+
--nvb-text-caption2: 10px;
|
|
123
|
+
--nvb-text-caption1: 12px;
|
|
124
|
+
--nvb-text-body1: 14px;
|
|
125
|
+
--nvb-text-subtitle2: 16px;
|
|
126
|
+
--nvb-text-subtitle1: 20px;
|
|
127
|
+
--nvb-text-title3: 24px;
|
|
128
|
+
--nvb-text-title2: 28px;
|
|
129
|
+
--nvb-text-sm: var(--nvb-text-caption1);
|
|
130
|
+
--nvb-text-base: var(--nvb-text-body1);
|
|
131
|
+
--nvb-text-md: var(--nvb-text-body1);
|
|
132
|
+
--nvb-text-lg: var(--nvb-text-subtitle2);
|
|
133
|
+
--nvb-color-surface-mix-target: var(--nvb-color-neutral-000);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
:host([data-theme='dark']),
|
|
137
|
+
:host(.nvb-dark),
|
|
138
|
+
.nvb-root.nvb-dark,
|
|
139
|
+
.nvb-root[data-theme='dark'] {
|
|
140
|
+
--nvb-font-family-base:
|
|
141
|
+
'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
|
|
142
|
+
'Helvetica Neue', sans-serif;
|
|
143
|
+
--nvb-color-primary-050: oklch(24.86% 0.0581 260.47);
|
|
144
|
+
--nvb-color-primary-100: oklch(31.48% 0.0762 259.64);
|
|
145
|
+
--nvb-color-primary-200: oklch(40.54% 0.0992 258.96);
|
|
146
|
+
--nvb-color-primary-300: oklch(48.29% 0.1191 258.32);
|
|
147
|
+
--nvb-color-primary-400: oklch(56.71% 0.1412 257.44);
|
|
148
|
+
--nvb-color-primary-500: oklch(64.21% 0.1552 256.62);
|
|
149
|
+
--nvb-color-primary-600: oklch(75.39% 0.1293 254.94);
|
|
150
|
+
--nvb-color-primary-700: oklch(84.55% 0.0888 253.67);
|
|
151
|
+
--nvb-color-primary-800: oklch(91.21% 0.0518 252.79);
|
|
152
|
+
--nvb-color-primary-900: oklch(95.63% 0.0247 251.98);
|
|
153
|
+
--nvb-color-primary-950: oklch(98.04% 0.0104 251.42);
|
|
154
|
+
--nvb-color-neutral-000: oklch(18% 0.004 286);
|
|
155
|
+
--nvb-color-neutral-050: oklch(20.5% 0.004 286);
|
|
156
|
+
--nvb-color-neutral-100: oklch(23% 0.004 286);
|
|
157
|
+
--nvb-color-neutral-200: oklch(27.5% 0.005 286);
|
|
158
|
+
--nvb-color-neutral-300: oklch(35% 0.006 286);
|
|
159
|
+
--nvb-color-neutral-400: oklch(47% 0.007 286);
|
|
160
|
+
--nvb-color-neutral-500: oklch(60% 0.006 286);
|
|
161
|
+
--nvb-color-neutral-600: oklch(71% 0.005 286);
|
|
162
|
+
--nvb-color-neutral-700: oklch(81% 0.004 286);
|
|
163
|
+
--nvb-color-neutral-800: oklch(87% 0.003 286);
|
|
164
|
+
--nvb-color-neutral-900: oklch(92% 0.002 286);
|
|
165
|
+
--nvb-color-neutral-950: oklch(96% 0.0015 286);
|
|
166
|
+
--nvb-color-risk-050: oklch(25.26% 0.0866 26);
|
|
167
|
+
--nvb-color-risk-100: oklch(39.96% 0.1348 25.77);
|
|
168
|
+
--nvb-color-risk-200: oklch(44.1% 0.1603 26.89);
|
|
169
|
+
--nvb-color-risk-300: oklch(50.79% 0.1918 27.56);
|
|
170
|
+
--nvb-color-risk-400: oklch(57.86% 0.2137 27.17);
|
|
171
|
+
--nvb-color-risk-500: oklch(63.56% 0.2082 25.38);
|
|
172
|
+
--nvb-color-risk-600: oklch(71.23% 0.1656 22.18);
|
|
173
|
+
--nvb-color-risk-700: oklch(80.98% 0.1025 19.54);
|
|
174
|
+
--nvb-color-risk-800: oklch(88.03% 0.0615 18.39);
|
|
175
|
+
--nvb-color-risk-900: oklch(93.44% 0.0314 17.73);
|
|
176
|
+
--nvb-color-risk-950: oklch(96.78% 0.0142 17.4);
|
|
177
|
+
--nvb-color-caution-050: oklch(27.8% 0.0739 45.8);
|
|
178
|
+
--nvb-color-caution-100: oklch(40.96% 0.1037 46.31);
|
|
179
|
+
--nvb-color-caution-200: oklch(47.06% 0.1236 46.53);
|
|
180
|
+
--nvb-color-caution-300: oklch(55.42% 0.1447 49.16);
|
|
181
|
+
--nvb-color-caution-400: oklch(66.88% 0.1588 57.96);
|
|
182
|
+
--nvb-color-caution-500: oklch(76.97% 0.1645 70.61);
|
|
183
|
+
--nvb-color-caution-600: oklch(83.34% 0.1641 83.87);
|
|
184
|
+
--nvb-color-caution-700: oklch(88.13% 0.1526 91.77);
|
|
185
|
+
--nvb-color-caution-800: oklch(92.57% 0.1141 95.75);
|
|
186
|
+
--nvb-color-caution-900: oklch(96.22% 0.0569 95.61);
|
|
187
|
+
--nvb-color-caution-950: oklch(98.66% 0.0218 95.28);
|
|
188
|
+
--nvb-color-warning-050: oklch(27.8% 0.0739 45.8);
|
|
189
|
+
--nvb-color-warning-100: oklch(40.96% 0.1037 46.31);
|
|
190
|
+
--nvb-color-warning-200: oklch(47.06% 0.1236 46.53);
|
|
191
|
+
--nvb-color-warning-300: oklch(55.42% 0.1447 49.16);
|
|
192
|
+
--nvb-color-warning-400: oklch(66.88% 0.1588 57.96);
|
|
193
|
+
--nvb-color-warning-500: oklch(76.97% 0.1645 70.61);
|
|
194
|
+
--nvb-color-warning-600: oklch(83.34% 0.1641 83.87);
|
|
195
|
+
--nvb-color-warning-700: oklch(88.13% 0.1526 91.77);
|
|
196
|
+
--nvb-color-warning-800: oklch(92.57% 0.1141 95.75);
|
|
197
|
+
--nvb-color-warning-900: oklch(96.22% 0.0569 95.61);
|
|
198
|
+
--nvb-color-warning-950: oklch(98.66% 0.0218 95.28);
|
|
199
|
+
--nvb-color-success-050: oklch(26.61% 0.0625 153.04);
|
|
200
|
+
--nvb-color-success-100: oklch(38.98% 0.0885 152.69);
|
|
201
|
+
--nvb-color-success-200: oklch(44.61% 0.1073 151.49);
|
|
202
|
+
--nvb-color-success-300: oklch(52.48% 0.1373 149.83);
|
|
203
|
+
--nvb-color-success-400: oklch(62.3% 0.1688 149.18);
|
|
204
|
+
--nvb-color-success-500: oklch(72.05% 0.192 149.49);
|
|
205
|
+
--nvb-color-success-600: oklch(79.99% 0.1816 151.78);
|
|
206
|
+
--nvb-color-success-700: oklch(87.12% 0.137 154.59);
|
|
207
|
+
--nvb-color-success-800: oklch(92.46% 0.0811 155.98);
|
|
208
|
+
--nvb-color-success-900: oklch(96.46% 0.0405 157.07);
|
|
209
|
+
--nvb-color-success-950: oklch(98.36% 0.0162 155.55);
|
|
210
|
+
--nvb-color-info-050: oklch(29.47% 0.0635 243.15);
|
|
211
|
+
--nvb-color-info-100: oklch(39.2% 0.0844 240.76);
|
|
212
|
+
--nvb-color-info-200: oklch(43.8% 0.0988 240.83);
|
|
213
|
+
--nvb-color-info-300: oklch(49.96% 0.1179 242.21);
|
|
214
|
+
--nvb-color-info-400: oklch(58.63% 0.1366 241.18);
|
|
215
|
+
--nvb-color-info-500: oklch(67.76% 0.1481 238.1);
|
|
216
|
+
--nvb-color-info-600: oklch(75.84% 0.1373 231.6);
|
|
217
|
+
--nvb-color-info-700: oklch(82.95% 0.1004 229.56);
|
|
218
|
+
--nvb-color-info-800: oklch(89.99% 0.0556 231.68);
|
|
219
|
+
--nvb-color-info-900: oklch(95.35% 0.024 236.81);
|
|
220
|
+
--nvb-color-info-950: oklch(97.67% 0.0127 236.62);
|
|
221
|
+
--nvb-color-text-000: oklch(18% 0.004 286);
|
|
222
|
+
--nvb-color-text-050: oklch(20.5% 0.004 286);
|
|
223
|
+
--nvb-color-text-100: oklch(23% 0.004 286);
|
|
224
|
+
--nvb-color-text-200: oklch(27.5% 0.005 286);
|
|
225
|
+
--nvb-color-text-300: oklch(35% 0.006 286);
|
|
226
|
+
--nvb-color-text-400: oklch(47% 0.007 286);
|
|
227
|
+
--nvb-color-text-500: oklch(60% 0.006 286);
|
|
228
|
+
--nvb-color-text-600: oklch(71% 0.005 286);
|
|
229
|
+
--nvb-color-text-700: oklch(81% 0.004 286);
|
|
230
|
+
--nvb-color-text-800: oklch(87% 0.003 286);
|
|
231
|
+
--nvb-color-text-900: oklch(92% 0.002 286);
|
|
232
|
+
--nvb-color-text-950: oklch(96% 0.0015 286);
|
|
233
|
+
--nvb-radius-sm: 2px;
|
|
234
|
+
--nvb-radius-md: 4px;
|
|
235
|
+
--nvb-radius-lg: 8px;
|
|
236
|
+
--nvb-radius-xl: 12px;
|
|
237
|
+
--nvb-space-0: 2px;
|
|
238
|
+
--nvb-space-1: 4px;
|
|
239
|
+
--nvb-space-2: 6px;
|
|
240
|
+
--nvb-space-3: 8px;
|
|
241
|
+
--nvb-space-4: 10px;
|
|
242
|
+
--nvb-space-5: 12px;
|
|
243
|
+
--nvb-space-6: 16px;
|
|
244
|
+
--nvb-space-7: 20px;
|
|
245
|
+
--nvb-space-8: 24px;
|
|
246
|
+
--nvb-space-9: 32px;
|
|
247
|
+
--nvb-text-caption2: 10px;
|
|
248
|
+
--nvb-text-caption1: 12px;
|
|
249
|
+
--nvb-text-body1: 14px;
|
|
250
|
+
--nvb-text-subtitle2: 16px;
|
|
251
|
+
--nvb-text-subtitle1: 20px;
|
|
252
|
+
--nvb-text-title3: 24px;
|
|
253
|
+
--nvb-text-title2: 28px;
|
|
254
|
+
--nvb-text-sm: var(--nvb-text-caption1);
|
|
255
|
+
--nvb-text-base: var(--nvb-text-body1);
|
|
256
|
+
--nvb-text-md: var(--nvb-text-body1);
|
|
257
|
+
--nvb-text-lg: var(--nvb-text-subtitle2);
|
|
258
|
+
--nvb-color-surface-mix-target: var(--nvb-color-neutral-050);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
/* The palette above is a light theme, and every text colour in it assumes a light
|
|
262
|
+
ground. Nothing guarantees one: a host application renders on whatever background it
|
|
263
|
+
likes, and on a dark one the labels stay near black and simply vanish, while the
|
|
264
|
+
inputs keep their own white fill and still look fine. That reads as "the labels are
|
|
265
|
+
missing", not as "the theme is wrong", which sends people looking in the wrong place.
|
|
266
|
+
|
|
267
|
+
So the root paints its own ground instead of borrowing the host's, and declares the
|
|
268
|
+
colour scheme so browser drawn parts - scrollbars, spinners, the native date and
|
|
269
|
+
select popups - come out light to match. `.nvb-root` sits on `<nvb-scope>` and on a
|
|
270
|
+
standalone `<nvb-element>`, so this is one ground per group, not one per field.
|
|
271
|
+
|
|
272
|
+
Set `--nvb-surface: transparent` to opt out where the element already sits on a light
|
|
273
|
+
card and should blend into it. */
|
|
274
|
+
:host,
|
|
275
|
+
.nvb-root {
|
|
276
|
+
color-scheme: light;
|
|
277
|
+
background-color: var(--nvb-surface, var(--nvb-color-neutral-000));
|
|
278
|
+
color: var(--nvb-color-neutral-800);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/* Both declarations above are written in tokens, so the dark theme flips them for free:
|
|
282
|
+
`--nvb-color-neutral-000` becomes the dark surface and `--nvb-color-neutral-800` the light
|
|
283
|
+
text. Only the colour scheme has to be said again, since it is not a token. */
|
|
284
|
+
:host([data-theme='dark']),
|
|
285
|
+
:host(.nvb-dark),
|
|
286
|
+
.nvb-root.nvb-dark,
|
|
287
|
+
.nvb-root[data-theme='dark'] {
|
|
288
|
+
color-scheme: dark;
|
|
289
|
+
}
|
|
290
|
+
}
|