@netlify/spark-ui 1.32.0 → 1.33.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 (4) hide show
  1. package/README.md +12 -1
  2. package/package.json +3 -3
  3. package/packages/styles/tokens.compat.css +376 -1
  4. package/packages/styles/tokens.css +515 -141
package/README.md CHANGED
@@ -53,10 +53,21 @@ 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/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.
64
+
65
+ ### Themes and brands
66
+
67
+ 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.
68
+
69
+ `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.
70
+
60
71
  ### Rebuild CSS token variables
61
72
 
62
73
  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.0",
4
+ "version": "1.33.0",
5
5
  "type": "module",
6
6
  "main": "dist/components/preact/index.js",
7
7
  "types": "dist/components/preact/index.d.ts",
@@ -53,8 +53,8 @@
53
53
  "@semantic-release/changelog": "^6.0.3",
54
54
  "@semantic-release/git": "^10.0.1",
55
55
  "@semantic-release/npm": "^13.0.0",
56
- "@terrazzo/cli": "^0.10.3",
57
- "@terrazzo/plugin-css": "^0.10.0",
56
+ "@terrazzo/cli": "^2.7.1",
57
+ "@terrazzo/plugin-css": "^2.7.1",
58
58
  "@types/gtag.js": "^0.0.20",
59
59
  "@typescript-eslint/eslint-plugin": "^8.26.0",
60
60
  "@typescript-eslint/parser": "^8.26.0",
package/packages/styles/tokens.compat.css CHANGED
@@ -89,6 +89,7 @@
89
89
  --color-warning-border: var(--ntl-color-warning-border);
90
90
  --color-warning-text: var(--ntl-color-warning-text);
91
91
  --eyebrow-text-color: var(--ntl-eyebrow-text-color);
92
+ --filter-invert: var(--ntl-filter-invert);
92
93
  --focus-outline-offset: var(--ntl-focus-outline-offset);
93
94
  --focus-outline-width: var(--ntl-focus-outline-width);
94
95
  --font-family-display: var(--ntl-font-family-display);
@@ -272,8 +273,185 @@
272
273
  --z-index-tooltip: var(--ntl-z-index-tooltip);
273
274
  }
274
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
+
275
453
  @media (prefers-color-scheme: dark) {
276
- :root {
454
+ :root, [data-brand="hues"] {
277
455
  --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
278
456
  --badge-bg-color: var(--ntl-badge-bg-color);
279
457
  --badge-border-color: var(--ntl-badge-border-color);
@@ -547,6 +725,203 @@
547
725
  --neutral-600: var(--ntl-neutral-600);
548
726
  --neutral-700: var(--ntl-neutral-700);
549
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);
550
925
  --search-answer-message-color: var(--ntl-search-answer-message-color);
551
926
  --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
552
927
  --search-bg-color: var(--ntl-search-bg-color);