@netlify/spark-ui 1.32.1 → 1.34.0-alpha.1

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/README.md +17 -1
  2. package/package.json +5 -1
  3. package/packages/styles/app.css +189 -0
  4. package/packages/styles/tokens.compat.css +375 -1
  5. package/packages/styles/tokens.css +707 -333
  6. package/packages/tokens/app.d.ts +114 -0
  7. package/packages/tokens/app.js +114 -0
package/README.md CHANGED
@@ -53,10 +53,26 @@ npm run format
53
53
 
54
54
  ## Design Tokens
55
55
 
56
- Tokens provide a shared foundation of colors, typography, spacing, and more for our sites and apps. All token information is stored in the `/packages/tokens` directory. These aim to follow standards proposed in the [Design Tokens Format Module](https://tr.designtokens.org/format/).
56
+ Tokens provide a shared foundation of colors, typography, spacing, and more for our sites and apps. All token information is stored in the `/tokens` directory. These aim to follow standards proposed in the [Design Tokens Format Module](https://tr.designtokens.org/format/).
57
57
 
58
58
  Tokens are converted into CSS variables using the [terrazzo](https://terrazzo.app/) tool.
59
59
 
60
+ - `tokens/base/`: every token, with its light-mode value in the current brand
61
+ - `tokens/themes/dark.json`: the tokens that change in dark mode, with their dark values
62
+ - `tokens/brands/hues.json`: the palette ramps for the hues brand
63
+ - `tokens/base/app.json`: app.netlify.com's own values (fonts, sizes, weights, radii, shadows), kept out of `tokens.css`
64
+ - `tokens/resolver.json`: how Terrazzo layers the files above. A new file in `tokens/base/` must be listed here; the build fails if it isn't.
65
+
66
+ ### App tokens
67
+
68
+ `@netlify/spark-ui/styles/app.css` and `@netlify/spark-ui/tokens/app` publish app.netlify.com's tokens under the names it has always read from `@netlify/netlify-design-tokens`: `--colorRgbFacets*` RGB channels (with a `[data-brand="hues"]` block), `--effectShadow*`, and JS exports of hex colors, font sizes, weights, families and radii. `scripts/app-tokens-plugin.mjs` writes them during `build:tokens`.
69
+
70
+ ### Themes and brands
71
+
72
+ Dark mode follows `prefers-color-scheme`, and `data-theme="dark"` or `data-theme="light"` on any element overrides it for that element and its children.
73
+
74
+ `data-brand="hues"` on `<html>` or any wrapper element switches to the hues brand. It composes with `data-theme` on the same element or nested in either direction. A wrapper can't switch back to the current brand inside a hues page.
75
+
60
76
  ### Rebuild CSS token variables
61
77
 
62
78
  When any files in this tokens directory are updated and merged into the `main` branch, the [build-tokens-css](https://github.com/netlify/netlify-bits/blob/main/.github/workflows/build-tokens-css.yml) GitHub Action is executed. This runs the `build:tokens` script, recreating the [tokens.css](https://github.com/netlify/netlify-bits/blob/main/packages/styles/tokens.css) file with updated CSS variables.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@netlify/spark-ui",
3
3
  "description": "Assets, design tokens, components, and utilities",
4
- "version": "1.32.1",
4
+ "version": "1.34.0-alpha.1",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
@@ -31,6 +31,10 @@
31
31
  "./assets/icons/*.svg": "./packages/assets/icons/*.svg",
32
32
  "./logos/*.svg": "./packages/assets/logos/*.svg",
33
33
  "./styles/*.css": "./packages/styles/*.css",
34
+ "./tokens/app": {
35
+ "types": "./packages/tokens/app.d.ts",
36
+ "default": "./packages/tokens/app.js"
37
+ },
34
38
  "./assets/*": "./packages/assets/*",
35
39
  "./components": "./packages/components/index.ts",
36
40
  "./components/FilterableGrid": "./packages/components/FilterableGrid/index.ts",
package/packages/styles/app.css ADDED
@@ -0,0 +1,189 @@
1
+ /* Autogenerated by scripts/app-tokens-plugin.mjs. DO NOT EDIT! */
2
+
3
+ :root {
4
+ --colorRgbFacetsBlue000: 237 244 255;
5
+ --colorRgbFacetsBlue100: 205 226 255;
6
+ --colorRgbFacetsBlue200: 181 210 251;
7
+ --colorRgbFacetsBlue300: 156 190 246;
8
+ --colorRgbFacetsBlue400: 128 171 250;
9
+ --colorRgbFacetsBlue500: 93 141 245;
10
+ --colorRgbFacetsBlue600: 49 107 244;
11
+ --colorRgbFacetsBlue700: 46 81 237;
12
+ --colorRgbFacetsBlue800: 32 54 161;
13
+ --colorRgbFacetsBlue900: 27 32 91;
14
+ --colorRgbFacetsGold000: 253 245 216;
15
+ --colorRgbFacetsGold100: 246 224 165;
16
+ --colorRgbFacetsGold200: 250 205 111;
17
+ --colorRgbFacetsGold300: 251 177 61;
18
+ --colorRgbFacetsGold400: 249 142 33;
19
+ --colorRgbFacetsGold500: 213 119 26;
20
+ --colorRgbFacetsGold600: 168 93 19;
21
+ --colorRgbFacetsGold700: 140 76 13;
22
+ --colorRgbFacetsGold800: 96 52 8;
23
+ --colorRgbFacetsGold900: 51 34 19;
24
+ --colorRgbFacetsGreen000: 231 252 233;
25
+ --colorRgbFacetsGreen100: 190 249 198;
26
+ --colorRgbFacetsGreen200: 147 245 165;
27
+ --colorRgbFacetsGreen300: 100 216 127;
28
+ --colorRgbFacetsGreen400: 58 195 100;
29
+ --colorRgbFacetsGreen500: 49 168 85;
30
+ --colorRgbFacetsGreen600: 34 130 64;
31
+ --colorRgbFacetsGreen700: 26 107 52;
32
+ --colorRgbFacetsGreen800: 15 74 33;
33
+ --colorRgbFacetsGreen900: 21 42 25;
34
+ --colorRgbFacetsNeutralDark000: 255 255 255;
35
+ --colorRgbFacetsNeutralDark100: 230 236 242;
36
+ --colorRgbFacetsNeutralDark200: 171 181 191;
37
+ --colorRgbFacetsNeutralDark300: 126 135 146;
38
+ --colorRgbFacetsNeutralDark400: 77 86 95;
39
+ --colorRgbFacetsNeutralDark500: 59 67 76;
40
+ --colorRgbFacetsNeutralDark600: 39 47 56;
41
+ --colorRgbFacetsNeutralDark700: 30 36 44;
42
+ --colorRgbFacetsNeutralDark800: 18 24 31;
43
+ --colorRgbFacetsNeutralDark900: 6 11 16;
44
+ --colorRgbFacetsNeutralLight000: 255 255 255;
45
+ --colorRgbFacetsNeutralLight100: 246 246 247;
46
+ --colorRgbFacetsNeutralLight200: 233 235 237;
47
+ --colorRgbFacetsNeutralLight300: 209 213 218;
48
+ --colorRgbFacetsNeutralLight400: 157 167 178;
49
+ --colorRgbFacetsNeutralLight500: 119 128 137;
50
+ --colorRgbFacetsNeutralLight600: 84 90 97;
51
+ --colorRgbFacetsNeutralLight700: 53 58 62;
52
+ --colorRgbFacetsNeutralLight800: 24 26 28;
53
+ --colorRgbFacetsPink000: 252 240 251;
54
+ --colorRgbFacetsPink100: 246 210 242;
55
+ --colorRgbFacetsPink200: 247 188 243;
56
+ --colorRgbFacetsPink300: 243 168 238;
57
+ --colorRgbFacetsPink400: 239 127 235;
58
+ --colorRgbFacetsPink500: 223 90 220;
59
+ --colorRgbFacetsPink600: 185 56 184;
60
+ --colorRgbFacetsPink700: 154 45 153;
61
+ --colorRgbFacetsPink800: 108 29 107;
62
+ --colorRgbFacetsPink900: 56 27 55;
63
+ --colorRgbFacetsPurple000: 245 242 252;
64
+ --colorRgbFacetsPurple100: 226 217 247;
65
+ --colorRgbFacetsPurple200: 216 199 255;
66
+ --colorRgbFacetsPurple300: 202 185 244;
67
+ --colorRgbFacetsPurple400: 180 157 241;
68
+ --colorRgbFacetsPurple500: 155 128 237;
69
+ --colorRgbFacetsPurple600: 119 92 231;
70
+ --colorRgbFacetsPurple700: 97 74 202;
71
+ --colorRgbFacetsPurple800: 56 42 164;
72
+ --colorRgbFacetsPurple900: 41 33 66;
73
+ --colorRgbFacetsRed000: 251 238 237;
74
+ --colorRgbFacetsRed100: 251 211 208;
75
+ --colorRgbFacetsRed200: 255 189 186;
76
+ --colorRgbFacetsRed300: 255 173 169;
77
+ --colorRgbFacetsRed400: 254 131 130;
78
+ --colorRgbFacetsRed500: 254 78 92;
79
+ --colorRgbFacetsRed600: 214 39 64;
80
+ --colorRgbFacetsRed700: 175 37 54;
81
+ --colorRgbFacetsRed800: 128 10 32;
82
+ --colorRgbFacetsRed900: 61 28 27;
83
+ --colorRgbFacetsTeal000: 222 255 254;
84
+ --colorRgbFacetsTeal100: 142 251 247;
85
+ --colorRgbFacetsTeal200: 50 230 226;
86
+ --colorRgbFacetsTeal300: 20 216 212;
87
+ --colorRgbFacetsTeal400: 5 189 186;
88
+ --colorRgbFacetsTeal500: 4 162 159;
89
+ --colorRgbFacetsTeal600: 2 128 125;
90
+ --colorRgbFacetsTeal700: 1 105 104;
91
+ --colorRgbFacetsTeal800: 1 72 71;
92
+ --colorRgbFacetsTeal900: 12 42 42;
93
+ --effectShadowDarkDeep: 0 16px 24px 0 rgb(6 11 16 / 20%), 0 6px 30px 0 rgb(6 11 16 / 30%), 0 8px 10px 0 rgb(6 11 16 / 40%);
94
+ --effectShadowDarkShallow: 0 1px 10px 0 rgb(18 24 31 / 60%), 0 2px 4px 0 rgb(18 24 31 / 40%);
95
+ --effectShadowLightDeep: 0 16px 24px 0 rgb(24 26 28 / 7%), 0 6px 30px 0 rgb(24 26 28 / 6%), 0 8px 10px 0 rgb(24 26 28 / 10%);
96
+ --effectShadowLightShallow: 0 1px 10px 0 rgb(53 58 62 / 6%), 0 2px 4px 0 rgb(53 58 62 / 8%);
97
+ }
98
+
99
+ [data-brand="hues"] {
100
+ --colorRgbFacetsBlue000: 237 244 255;
101
+ --colorRgbFacetsBlue100: 205 226 255;
102
+ --colorRgbFacetsBlue200: 181 210 251;
103
+ --colorRgbFacetsBlue300: 156 190 246;
104
+ --colorRgbFacetsBlue400: 128 171 250;
105
+ --colorRgbFacetsBlue500: 93 141 245;
106
+ --colorRgbFacetsBlue600: 49 107 244;
107
+ --colorRgbFacetsBlue700: 46 81 237;
108
+ --colorRgbFacetsBlue800: 32 54 161;
109
+ --colorRgbFacetsBlue900: 27 32 91;
110
+ --colorRgbFacetsGold000: 253 245 216;
111
+ --colorRgbFacetsGold100: 246 224 165;
112
+ --colorRgbFacetsGold200: 250 205 111;
113
+ --colorRgbFacetsGold300: 251 177 61;
114
+ --colorRgbFacetsGold400: 249 142 33;
115
+ --colorRgbFacetsGold500: 213 119 26;
116
+ --colorRgbFacetsGold600: 168 93 19;
117
+ --colorRgbFacetsGold700: 140 76 13;
118
+ --colorRgbFacetsGold800: 96 52 8;
119
+ --colorRgbFacetsGold900: 51 34 19;
120
+ --colorRgbFacetsGreen000: 231 252 233;
121
+ --colorRgbFacetsGreen100: 190 249 198;
122
+ --colorRgbFacetsGreen200: 147 245 165;
123
+ --colorRgbFacetsGreen300: 100 216 127;
124
+ --colorRgbFacetsGreen400: 58 195 100;
125
+ --colorRgbFacetsGreen500: 49 168 85;
126
+ --colorRgbFacetsGreen600: 34 130 64;
127
+ --colorRgbFacetsGreen700: 26 107 52;
128
+ --colorRgbFacetsGreen800: 15 74 33;
129
+ --colorRgbFacetsGreen900: 21 42 25;
130
+ --colorRgbFacetsNeutralDark000: 255 255 255;
131
+ --colorRgbFacetsNeutralDark100: 230 236 242;
132
+ --colorRgbFacetsNeutralDark200: 171 181 191;
133
+ --colorRgbFacetsNeutralDark300: 126 135 146;
134
+ --colorRgbFacetsNeutralDark400: 77 86 95;
135
+ --colorRgbFacetsNeutralDark500: 59 67 76;
136
+ --colorRgbFacetsNeutralDark600: 39 47 56;
137
+ --colorRgbFacetsNeutralDark700: 30 36 44;
138
+ --colorRgbFacetsNeutralDark800: 18 24 31;
139
+ --colorRgbFacetsNeutralDark900: 6 11 16;
140
+ --colorRgbFacetsNeutralLight000: 255 255 255;
141
+ --colorRgbFacetsNeutralLight100: 246 246 247;
142
+ --colorRgbFacetsNeutralLight200: 233 235 237;
143
+ --colorRgbFacetsNeutralLight300: 209 213 218;
144
+ --colorRgbFacetsNeutralLight400: 157 167 178;
145
+ --colorRgbFacetsNeutralLight500: 119 128 137;
146
+ --colorRgbFacetsNeutralLight600: 84 90 97;
147
+ --colorRgbFacetsNeutralLight700: 53 58 62;
148
+ --colorRgbFacetsNeutralLight800: 24 26 28;
149
+ --colorRgbFacetsPink000: 252 240 251;
150
+ --colorRgbFacetsPink100: 246 210 242;
151
+ --colorRgbFacetsPink200: 247 188 243;
152
+ --colorRgbFacetsPink300: 243 168 238;
153
+ --colorRgbFacetsPink400: 239 127 235;
154
+ --colorRgbFacetsPink500: 223 90 220;
155
+ --colorRgbFacetsPink600: 185 56 184;
156
+ --colorRgbFacetsPink700: 154 45 153;
157
+ --colorRgbFacetsPink800: 108 29 107;
158
+ --colorRgbFacetsPink900: 56 27 55;
159
+ --colorRgbFacetsPurple000: 245 242 252;
160
+ --colorRgbFacetsPurple100: 226 217 247;
161
+ --colorRgbFacetsPurple200: 216 199 255;
162
+ --colorRgbFacetsPurple300: 202 185 244;
163
+ --colorRgbFacetsPurple400: 180 157 241;
164
+ --colorRgbFacetsPurple500: 155 128 237;
165
+ --colorRgbFacetsPurple600: 119 92 231;
166
+ --colorRgbFacetsPurple700: 97 74 202;
167
+ --colorRgbFacetsPurple800: 56 42 164;
168
+ --colorRgbFacetsPurple900: 41 33 66;
169
+ --colorRgbFacetsRed000: 251 238 237;
170
+ --colorRgbFacetsRed100: 251 211 208;
171
+ --colorRgbFacetsRed200: 255 189 186;
172
+ --colorRgbFacetsRed300: 255 173 169;
173
+ --colorRgbFacetsRed400: 254 131 130;
174
+ --colorRgbFacetsRed500: 254 78 92;
175
+ --colorRgbFacetsRed600: 214 39 64;
176
+ --colorRgbFacetsRed700: 175 37 54;
177
+ --colorRgbFacetsRed800: 128 10 32;
178
+ --colorRgbFacetsRed900: 61 28 27;
179
+ --colorRgbFacetsTeal000: 222 255 254;
180
+ --colorRgbFacetsTeal100: 142 251 247;
181
+ --colorRgbFacetsTeal200: 50 230 226;
182
+ --colorRgbFacetsTeal300: 20 216 212;
183
+ --colorRgbFacetsTeal400: 5 189 186;
184
+ --colorRgbFacetsTeal500: 4 162 159;
185
+ --colorRgbFacetsTeal600: 2 128 125;
186
+ --colorRgbFacetsTeal700: 1 105 104;
187
+ --colorRgbFacetsTeal800: 1 72 71;
188
+ --colorRgbFacetsTeal900: 12 42 42;
189
+ }
package/packages/styles/tokens.compat.css CHANGED
@@ -273,8 +273,185 @@
273
273
  --z-index-tooltip: var(--ntl-z-index-tooltip);
274
274
  }
275
275
 
276
+ [data-brand="hues"] {
277
+ --badge-bg-color: var(--ntl-badge-bg-color);
278
+ --badge-border-color: var(--ntl-badge-border-color);
279
+ --badge-text-color: var(--ntl-badge-text-color);
280
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
281
+ --blue-000: var(--ntl-blue-000);
282
+ --blue-100: var(--ntl-blue-100);
283
+ --blue-200: var(--ntl-blue-200);
284
+ --blue-300: var(--ntl-blue-300);
285
+ --blue-400: var(--ntl-blue-400);
286
+ --blue-500: var(--ntl-blue-500);
287
+ --blue-600: var(--ntl-blue-600);
288
+ --blue-700: var(--ntl-blue-700);
289
+ --blue-800: var(--ntl-blue-800);
290
+ --blue-900: var(--ntl-blue-900);
291
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
292
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
293
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
294
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
295
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
296
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
297
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
298
+ --card-bg-color: var(--ntl-card-bg-color);
299
+ --card-border-color: var(--ntl-card-border-color);
300
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
301
+ --code-bg-color: var(--ntl-code-bg-color);
302
+ --color-bg: var(--ntl-color-bg);
303
+ --color-bg-2: var(--ntl-color-bg-2);
304
+ --color-bg-3: var(--ntl-color-bg-3);
305
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
306
+ --color-border-strong: var(--ntl-color-border-strong);
307
+ --color-brand-primary: var(--ntl-color-brand-primary);
308
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
309
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
310
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
311
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
312
+ --color-disabled-border: var(--ntl-color-disabled-border);
313
+ --color-disabled-text: var(--ntl-color-disabled-text);
314
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
315
+ --color-highlight-border: var(--ntl-color-highlight-border);
316
+ --color-highlight-text: var(--ntl-color-highlight-text);
317
+ --color-icon: var(--ntl-color-icon);
318
+ --color-info-bg: var(--ntl-color-info-bg);
319
+ --color-info-border: var(--ntl-color-info-border);
320
+ --color-info-text: var(--ntl-color-info-text);
321
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
322
+ --color-invalid-border: var(--ntl-color-invalid-border);
323
+ --color-invalid-text: var(--ntl-color-invalid-text);
324
+ --color-link: var(--ntl-color-link);
325
+ --color-link-default: var(--ntl-color-link-default);
326
+ --color-link-hover: var(--ntl-color-link-hover);
327
+ --color-link-inverse: var(--ntl-color-link-inverse);
328
+ --color-logo-spark: var(--ntl-color-logo-spark);
329
+ --color-logo-type: var(--ntl-color-logo-type);
330
+ --color-success-bg: var(--ntl-color-success-bg);
331
+ --color-success-border: var(--ntl-color-success-border);
332
+ --color-success-text: var(--ntl-color-success-text);
333
+ --color-text: var(--ntl-color-text);
334
+ --color-text-accent: var(--ntl-color-text-accent);
335
+ --color-text-default: var(--ntl-color-text-default);
336
+ --color-text-inverse: var(--ntl-color-text-inverse);
337
+ --color-text-weak: var(--ntl-color-text-weak);
338
+ --color-text-weaker: var(--ntl-color-text-weaker);
339
+ --color-warning-bg: var(--ntl-color-warning-bg);
340
+ --color-warning-border: var(--ntl-color-warning-border);
341
+ --color-warning-text: var(--ntl-color-warning-text);
342
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
343
+ --gold-000: var(--ntl-gold-000);
344
+ --gold-100: var(--ntl-gold-100);
345
+ --gold-200: var(--ntl-gold-200);
346
+ --gold-300: var(--ntl-gold-300);
347
+ --gold-400: var(--ntl-gold-400);
348
+ --gold-500: var(--ntl-gold-500);
349
+ --gold-600: var(--ntl-gold-600);
350
+ --gold-700: var(--ntl-gold-700);
351
+ --gold-800: var(--ntl-gold-800);
352
+ --gold-900: var(--ntl-gold-900);
353
+ --green-000: var(--ntl-green-000);
354
+ --green-100: var(--ntl-green-100);
355
+ --green-200: var(--ntl-green-200);
356
+ --green-300: var(--ntl-green-300);
357
+ --green-400: var(--ntl-green-400);
358
+ --green-500: var(--ntl-green-500);
359
+ --green-600: var(--ntl-green-600);
360
+ --green-700: var(--ntl-green-700);
361
+ --green-800: var(--ntl-green-800);
362
+ --green-900: var(--ntl-green-900);
363
+ --heading-text-color: var(--ntl-heading-text-color);
364
+ --neutral-000: var(--ntl-neutral-000);
365
+ --neutral-100: var(--ntl-neutral-100);
366
+ --neutral-200: var(--ntl-neutral-200);
367
+ --neutral-300: var(--ntl-neutral-300);
368
+ --neutral-400: var(--ntl-neutral-400);
369
+ --neutral-500: var(--ntl-neutral-500);
370
+ --neutral-600: var(--ntl-neutral-600);
371
+ --neutral-700: var(--ntl-neutral-700);
372
+ --neutral-800: var(--ntl-neutral-800);
373
+ --neutral-900: var(--ntl-neutral-900);
374
+ --neutral-dark-000: var(--ntl-neutral-dark-000);
375
+ --neutral-dark-100: var(--ntl-neutral-dark-100);
376
+ --neutral-dark-200: var(--ntl-neutral-dark-200);
377
+ --neutral-dark-300: var(--ntl-neutral-dark-300);
378
+ --neutral-dark-400: var(--ntl-neutral-dark-400);
379
+ --neutral-dark-500: var(--ntl-neutral-dark-500);
380
+ --neutral-dark-600: var(--ntl-neutral-dark-600);
381
+ --neutral-dark-700: var(--ntl-neutral-dark-700);
382
+ --neutral-dark-800: var(--ntl-neutral-dark-800);
383
+ --neutral-dark-900: var(--ntl-neutral-dark-900);
384
+ --neutral-light-000: var(--ntl-neutral-light-000);
385
+ --neutral-light-100: var(--ntl-neutral-light-100);
386
+ --neutral-light-200: var(--ntl-neutral-light-200);
387
+ --neutral-light-300: var(--ntl-neutral-light-300);
388
+ --neutral-light-400: var(--ntl-neutral-light-400);
389
+ --neutral-light-500: var(--ntl-neutral-light-500);
390
+ --neutral-light-600: var(--ntl-neutral-light-600);
391
+ --neutral-light-700: var(--ntl-neutral-light-700);
392
+ --neutral-light-800: var(--ntl-neutral-light-800);
393
+ --neutral-light-900: var(--ntl-neutral-light-900);
394
+ --pink-000: var(--ntl-pink-000);
395
+ --pink-100: var(--ntl-pink-100);
396
+ --pink-200: var(--ntl-pink-200);
397
+ --pink-300: var(--ntl-pink-300);
398
+ --pink-400: var(--ntl-pink-400);
399
+ --pink-500: var(--ntl-pink-500);
400
+ --pink-600: var(--ntl-pink-600);
401
+ --pink-700: var(--ntl-pink-700);
402
+ --pink-800: var(--ntl-pink-800);
403
+ --pink-900: var(--ntl-pink-900);
404
+ --purple-000: var(--ntl-purple-000);
405
+ --purple-100: var(--ntl-purple-100);
406
+ --purple-200: var(--ntl-purple-200);
407
+ --purple-300: var(--ntl-purple-300);
408
+ --purple-400: var(--ntl-purple-400);
409
+ --purple-500: var(--ntl-purple-500);
410
+ --purple-600: var(--ntl-purple-600);
411
+ --purple-700: var(--ntl-purple-700);
412
+ --purple-800: var(--ntl-purple-800);
413
+ --purple-900: var(--ntl-purple-900);
414
+ --red-000: var(--ntl-red-000);
415
+ --red-100: var(--ntl-red-100);
416
+ --red-200: var(--ntl-red-200);
417
+ --red-300: var(--ntl-red-300);
418
+ --red-400: var(--ntl-red-400);
419
+ --red-500: var(--ntl-red-500);
420
+ --red-600: var(--ntl-red-600);
421
+ --red-700: var(--ntl-red-700);
422
+ --red-800: var(--ntl-red-800);
423
+ --red-900: var(--ntl-red-900);
424
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
425
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
426
+ --search-bg-color: var(--ntl-search-bg-color);
427
+ --search-highlight-color: var(--ntl-search-highlight-color);
428
+ --search-icon-color: var(--ntl-search-icon-color);
429
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
430
+ --search-loading-color: var(--ntl-search-loading-color);
431
+ --search-source-list-color: var(--ntl-search-source-list-color);
432
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
433
+ --search-user-message-color: var(--ntl-search-user-message-color);
434
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
435
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
436
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
437
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
438
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
439
+ --teal-000: var(--ntl-teal-000);
440
+ --teal-100: var(--ntl-teal-100);
441
+ --teal-200: var(--ntl-teal-200);
442
+ --teal-300: var(--ntl-teal-300);
443
+ --teal-400: var(--ntl-teal-400);
444
+ --teal-500: var(--ntl-teal-500);
445
+ --teal-600: var(--ntl-teal-600);
446
+ --teal-700: var(--ntl-teal-700);
447
+ --teal-800: var(--ntl-teal-800);
448
+ --teal-900: var(--ntl-teal-900);
449
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
450
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
451
+ }
452
+
276
453
  @media (prefers-color-scheme: dark) {
277
- :root {
454
+ :root, [data-brand="hues"] {
278
455
  --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
279
456
  --badge-bg-color: var(--ntl-badge-bg-color);
280
457
  --badge-border-color: var(--ntl-badge-border-color);
@@ -548,6 +725,203 @@
548
725
  --neutral-600: var(--ntl-neutral-600);
549
726
  --neutral-700: var(--ntl-neutral-700);
550
727
  --neutral-800: var(--ntl-neutral-800);
728
+ --neutral-900: var(--ntl-neutral-900);
729
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
730
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
731
+ --search-bg-color: var(--ntl-search-bg-color);
732
+ --search-highlight-color: var(--ntl-search-highlight-color);
733
+ --search-icon-color: var(--ntl-search-icon-color);
734
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
735
+ --search-loading-color: var(--ntl-search-loading-color);
736
+ --search-source-list-color: var(--ntl-search-source-list-color);
737
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
738
+ --search-user-message-color: var(--ntl-search-user-message-color);
739
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
740
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
741
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
742
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
743
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
744
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
745
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
746
+ --title-text-color: var(--ntl-title-text-color);
747
+ }
748
+
749
+ [data-brand="hues"][data-theme="dark"], [data-brand="hues"] [data-theme="dark"], [data-theme="dark"] [data-brand="hues"] {
750
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
751
+ --badge-bg-color: var(--ntl-badge-bg-color);
752
+ --badge-border-color: var(--ntl-badge-border-color);
753
+ --badge-text-color: var(--ntl-badge-text-color);
754
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
755
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
756
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
757
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
758
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
759
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
760
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
761
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
762
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
763
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
764
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
765
+ --card-bg-color: var(--ntl-card-bg-color);
766
+ --card-border-color: var(--ntl-card-border-color);
767
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
768
+ --code-bg-color: var(--ntl-code-bg-color);
769
+ --color-bg: var(--ntl-color-bg);
770
+ --color-bg-2: var(--ntl-color-bg-2);
771
+ --color-bg-3: var(--ntl-color-bg-3);
772
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
773
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
774
+ --color-border-default: var(--ntl-color-border-default);
775
+ --color-border-strong: var(--ntl-color-border-strong);
776
+ --color-border-subtle: var(--ntl-color-border-subtle);
777
+ --color-brand-primary: var(--ntl-color-brand-primary);
778
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
779
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
780
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
781
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
782
+ --color-disabled-border: var(--ntl-color-disabled-border);
783
+ --color-disabled-text: var(--ntl-color-disabled-text);
784
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
785
+ --color-highlight-border: var(--ntl-color-highlight-border);
786
+ --color-highlight-text: var(--ntl-color-highlight-text);
787
+ --color-icon: var(--ntl-color-icon);
788
+ --color-info-bg: var(--ntl-color-info-bg);
789
+ --color-info-border: var(--ntl-color-info-border);
790
+ --color-info-text: var(--ntl-color-info-text);
791
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
792
+ --color-invalid-border: var(--ntl-color-invalid-border);
793
+ --color-invalid-text: var(--ntl-color-invalid-text);
794
+ --color-link: var(--ntl-color-link);
795
+ --color-link-default: var(--ntl-color-link-default);
796
+ --color-link-hover: var(--ntl-color-link-hover);
797
+ --color-link-inverse: var(--ntl-color-link-inverse);
798
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
799
+ --color-logo-spark: var(--ntl-color-logo-spark);
800
+ --color-logo-type: var(--ntl-color-logo-type);
801
+ --color-stroke: var(--ntl-color-stroke);
802
+ --color-success-bg: var(--ntl-color-success-bg);
803
+ --color-success-border: var(--ntl-color-success-border);
804
+ --color-success-text: var(--ntl-color-success-text);
805
+ --color-text: var(--ntl-color-text);
806
+ --color-text-accent: var(--ntl-color-text-accent);
807
+ --color-text-default: var(--ntl-color-text-default);
808
+ --color-text-inverse: var(--ntl-color-text-inverse);
809
+ --color-text-weak: var(--ntl-color-text-weak);
810
+ --color-text-weaker: var(--ntl-color-text-weaker);
811
+ --color-warning-bg: var(--ntl-color-warning-bg);
812
+ --color-warning-border: var(--ntl-color-warning-border);
813
+ --color-warning-text: var(--ntl-color-warning-text);
814
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
815
+ --filter-invert: var(--ntl-filter-invert);
816
+ --heading-text-color: var(--ntl-heading-text-color);
817
+ --neutral-000: var(--ntl-neutral-000);
818
+ --neutral-100: var(--ntl-neutral-100);
819
+ --neutral-200: var(--ntl-neutral-200);
820
+ --neutral-300: var(--ntl-neutral-300);
821
+ --neutral-400: var(--ntl-neutral-400);
822
+ --neutral-500: var(--ntl-neutral-500);
823
+ --neutral-600: var(--ntl-neutral-600);
824
+ --neutral-700: var(--ntl-neutral-700);
825
+ --neutral-800: var(--ntl-neutral-800);
826
+ --neutral-900: var(--ntl-neutral-900);
827
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
828
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
829
+ --search-bg-color: var(--ntl-search-bg-color);
830
+ --search-highlight-color: var(--ntl-search-highlight-color);
831
+ --search-icon-color: var(--ntl-search-icon-color);
832
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
833
+ --search-loading-color: var(--ntl-search-loading-color);
834
+ --search-source-list-color: var(--ntl-search-source-list-color);
835
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
836
+ --search-user-message-color: var(--ntl-search-user-message-color);
837
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
838
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
839
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
840
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
841
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
842
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
843
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
844
+ --title-text-color: var(--ntl-title-text-color);
845
+ }
846
+
847
+ [data-brand="hues"][data-theme="light"], [data-brand="hues"] [data-theme="light"], [data-theme="light"] [data-brand="hues"] {
848
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
849
+ --badge-bg-color: var(--ntl-badge-bg-color);
850
+ --badge-border-color: var(--ntl-badge-border-color);
851
+ --badge-text-color: var(--ntl-badge-text-color);
852
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
853
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
854
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
855
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
856
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
857
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
858
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
859
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
860
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
861
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
862
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
863
+ --card-bg-color: var(--ntl-card-bg-color);
864
+ --card-border-color: var(--ntl-card-border-color);
865
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
866
+ --code-bg-color: var(--ntl-code-bg-color);
867
+ --color-bg: var(--ntl-color-bg);
868
+ --color-bg-2: var(--ntl-color-bg-2);
869
+ --color-bg-3: var(--ntl-color-bg-3);
870
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
871
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
872
+ --color-border-default: var(--ntl-color-border-default);
873
+ --color-border-strong: var(--ntl-color-border-strong);
874
+ --color-border-subtle: var(--ntl-color-border-subtle);
875
+ --color-brand-primary: var(--ntl-color-brand-primary);
876
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
877
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
878
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
879
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
880
+ --color-disabled-border: var(--ntl-color-disabled-border);
881
+ --color-disabled-text: var(--ntl-color-disabled-text);
882
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
883
+ --color-highlight-border: var(--ntl-color-highlight-border);
884
+ --color-highlight-text: var(--ntl-color-highlight-text);
885
+ --color-icon: var(--ntl-color-icon);
886
+ --color-info-bg: var(--ntl-color-info-bg);
887
+ --color-info-border: var(--ntl-color-info-border);
888
+ --color-info-text: var(--ntl-color-info-text);
889
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
890
+ --color-invalid-border: var(--ntl-color-invalid-border);
891
+ --color-invalid-text: var(--ntl-color-invalid-text);
892
+ --color-link: var(--ntl-color-link);
893
+ --color-link-default: var(--ntl-color-link-default);
894
+ --color-link-hover: var(--ntl-color-link-hover);
895
+ --color-link-inverse: var(--ntl-color-link-inverse);
896
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
897
+ --color-logo-spark: var(--ntl-color-logo-spark);
898
+ --color-logo-type: var(--ntl-color-logo-type);
899
+ --color-stroke: var(--ntl-color-stroke);
900
+ --color-success-bg: var(--ntl-color-success-bg);
901
+ --color-success-border: var(--ntl-color-success-border);
902
+ --color-success-text: var(--ntl-color-success-text);
903
+ --color-text: var(--ntl-color-text);
904
+ --color-text-accent: var(--ntl-color-text-accent);
905
+ --color-text-default: var(--ntl-color-text-default);
906
+ --color-text-inverse: var(--ntl-color-text-inverse);
907
+ --color-text-weak: var(--ntl-color-text-weak);
908
+ --color-text-weaker: var(--ntl-color-text-weaker);
909
+ --color-warning-bg: var(--ntl-color-warning-bg);
910
+ --color-warning-border: var(--ntl-color-warning-border);
911
+ --color-warning-text: var(--ntl-color-warning-text);
912
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
913
+ --filter-invert: var(--ntl-filter-invert);
914
+ --heading-text-color: var(--ntl-heading-text-color);
915
+ --neutral-000: var(--ntl-neutral-000);
916
+ --neutral-100: var(--ntl-neutral-100);
917
+ --neutral-200: var(--ntl-neutral-200);
918
+ --neutral-300: var(--ntl-neutral-300);
919
+ --neutral-400: var(--ntl-neutral-400);
920
+ --neutral-500: var(--ntl-neutral-500);
921
+ --neutral-600: var(--ntl-neutral-600);
922
+ --neutral-700: var(--ntl-neutral-700);
923
+ --neutral-800: var(--ntl-neutral-800);
924
+ --neutral-900: var(--ntl-neutral-900);
551
925
  --search-answer-message-color: var(--ntl-search-answer-message-color);
552
926
  --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
553
927
  --search-bg-color: var(--ntl-search-bg-color);