@netlify/spark-ui 1.32.1 → 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 +1 -1
  3. package/packages/styles/tokens.compat.css +375 -1
  4. package/packages/styles/tokens.css +707 -333
package/packages/styles/tokens.css CHANGED
@@ -4,10 +4,10 @@
4
4
 
5
5
  :root {
6
6
  --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
7
- --ntl-badge-bg-color: rgb(96.471% 96.471% 96.863%);
8
- --ntl-badge-border-color: rgb(81.961% 83.529% 85.49%);
9
- --ntl-badge-text-color: rgb(46.667% 50.196% 53.725%);
10
- --ntl-blockquote-accent-color: rgb(18.039% 31.765% 92.941%);
7
+ --ntl-badge-bg-color: var(--ntl-neutral-100);
8
+ --ntl-badge-border-color: var(--ntl-neutral-300);
9
+ --ntl-badge-text-color: var(--ntl-neutral-500);
10
+ --ntl-blockquote-accent-color: var(--ntl-blue-700);
11
11
  --ntl-blue-000: rgb(92.941% 95.686% 100%);
12
12
  --ntl-blue-100: rgb(80.392% 88.627% 100%);
13
13
  --ntl-blue-200: rgb(70.98% 82.353% 98.431%);
@@ -24,64 +24,64 @@
24
24
  --ntl-border-width-thin: 1px;
25
25
  --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
26
26
  --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
27
- --ntl-button-outline-stroke-color: rgb(9.4118% 10.196% 10.98%);
28
- --ntl-button-outline-text-color: rgb(9.4118% 10.196% 10.98%);
29
- --ntl-button-primary-bg-color: rgb(19.608% 90.196% 88.627%);
30
- --ntl-button-primary-bg-color-hover: rgb(55.686% 98.431% 96.863%);
31
- --ntl-button-primary-text-color: rgb(9.4118% 10.196% 10.98%);
27
+ --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
28
+ --ntl-button-outline-text-color: var(--ntl-neutral-800);
29
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
30
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
31
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
32
32
  --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
33
33
  --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
34
- --ntl-button-secondary-text-color: rgb(9.4118% 10.196% 10.98%);
35
- --ntl-card-bg-color: rgb(100% 100% 100%);
36
- --ntl-card-border-color: rgb(91.373% 92.157% 92.941%);
37
- --ntl-card-border-color-hover: rgb(81.961% 83.529% 85.49%);
38
- --ntl-code-bg-color: rgb(4.7059% 16.471% 16.471%);
39
- --ntl-color-bg: rgb(100% 100% 100%);
40
- --ntl-color-bg-2: rgb(96.471% 96.471% 96.863%);
41
- --ntl-color-bg-3: rgb(91.373% 92.157% 92.941%);
42
- --ntl-color-bg-inverse: rgb(81.961% 83.529% 85.49%);
34
+ --ntl-button-secondary-text-color: var(--ntl-neutral-800);
35
+ --ntl-card-bg-color: var(--ntl-neutral-000);
36
+ --ntl-card-border-color: var(--ntl-neutral-200);
37
+ --ntl-card-border-color-hover: var(--ntl-neutral-300);
38
+ --ntl-code-bg-color: var(--ntl-teal-900);
39
+ --ntl-color-bg: var(--ntl-neutral-000);
40
+ --ntl-color-bg-2: var(--ntl-neutral-100);
41
+ --ntl-color-bg-3: var(--ntl-neutral-200);
42
+ --ntl-color-bg-inverse: var(--ntl-neutral-300);
43
43
  --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
44
44
  --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
45
- --ntl-color-border-strong: rgb(81.961% 83.529% 85.49%);
45
+ --ntl-color-border-strong: var(--ntl-neutral-300);
46
46
  --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
47
- --ntl-color-brand-primary: rgb(18.039% 31.765% 92.941%);
48
- --ntl-color-brand-primary-hover: rgb(12.549% 21.176% 63.137%);
49
- --ntl-color-brand-secondary: rgb(7.8431% 84.706% 83.137%);
50
- --ntl-color-brand-secondary-hover: rgb(0.39216% 28.235% 27.843%);
51
- --ntl-color-disabled-bg: rgb(91.373% 92.157% 92.941%);
52
- --ntl-color-disabled-border: rgb(61.569% 65.49% 69.804%);
53
- --ntl-color-disabled-text: rgb(61.569% 65.49% 69.804%);
54
- --ntl-color-highlight-bg: rgb(88.627% 85.098% 96.863%);
55
- --ntl-color-highlight-border: rgb(46.667% 36.078% 90.588%);
56
- --ntl-color-highlight-text: rgb(46.667% 36.078% 90.588%);
57
- --ntl-color-icon: rgb(18.039% 31.765% 92.941%);
58
- --ntl-color-info-bg: rgb(80.392% 88.627% 100%);
59
- --ntl-color-info-border: rgb(19.216% 41.961% 95.686%);
60
- --ntl-color-info-text: rgb(19.216% 41.961% 95.686%);
61
- --ntl-color-invalid-bg: rgb(98.431% 82.745% 81.569%);
62
- --ntl-color-invalid-border: rgb(83.922% 15.294% 25.098%);
63
- --ntl-color-invalid-text: rgb(83.922% 15.294% 25.098%);
64
- --ntl-color-link: rgb(18.039% 31.765% 92.941%);
65
- --ntl-color-link-default: rgb(18.039% 31.765% 92.941%);
66
- --ntl-color-link-hover: rgb(12.549% 21.176% 63.137%);
67
- --ntl-color-link-inverse: rgb(50.196% 67.059% 98.039%);
47
+ --ntl-color-brand-primary: var(--ntl-blue-700);
48
+ --ntl-color-brand-primary-hover: var(--ntl-blue-800);
49
+ --ntl-color-brand-secondary: var(--ntl-teal-300);
50
+ --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
51
+ --ntl-color-disabled-bg: var(--ntl-neutral-200);
52
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
53
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
54
+ --ntl-color-highlight-bg: var(--ntl-purple-100);
55
+ --ntl-color-highlight-border: var(--ntl-purple-600);
56
+ --ntl-color-highlight-text: var(--ntl-purple-600);
57
+ --ntl-color-icon: var(--ntl-blue-700);
58
+ --ntl-color-info-bg: var(--ntl-blue-100);
59
+ --ntl-color-info-border: var(--ntl-blue-600);
60
+ --ntl-color-info-text: var(--ntl-blue-600);
61
+ --ntl-color-invalid-bg: var(--ntl-red-100);
62
+ --ntl-color-invalid-border: var(--ntl-red-600);
63
+ --ntl-color-invalid-text: var(--ntl-red-600);
64
+ --ntl-color-link: var(--ntl-blue-700);
65
+ --ntl-color-link-default: var(--ntl-blue-700);
66
+ --ntl-color-link-hover: var(--ntl-blue-800);
67
+ --ntl-color-link-inverse: var(--ntl-blue-400);
68
68
  --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
69
- --ntl-color-logo-spark: rgb(1.9608% 74.118% 72.941%);
70
- --ntl-color-logo-type: rgb(0.39216% 28.235% 27.843%);
69
+ --ntl-color-logo-spark: var(--ntl-teal-400);
70
+ --ntl-color-logo-type: var(--ntl-teal-800);
71
71
  --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
72
- --ntl-color-success-bg: rgb(74.51% 97.647% 77.647%);
73
- --ntl-color-success-border: rgb(39.216% 84.706% 49.804%);
74
- --ntl-color-success-text: rgb(5.8824% 29.02% 12.941%);
75
- --ntl-color-text: rgb(20.784% 22.745% 24.314%);
76
- --ntl-color-text-accent: rgb(7.8431% 84.706% 83.137%);
77
- --ntl-color-text-default: rgb(20.784% 22.745% 24.314%);
78
- --ntl-color-text-inverse: rgb(96.471% 96.471% 96.863%);
79
- --ntl-color-text-weak: rgb(46.667% 50.196% 53.725%);
80
- --ntl-color-text-weaker: rgb(61.569% 65.49% 69.804%);
81
- --ntl-color-warning-bg: rgb(96.471% 87.843% 64.706%);
82
- --ntl-color-warning-border: rgb(98.431% 69.412% 23.922%);
83
- --ntl-color-warning-text: rgb(37.647% 20.392% 3.1373%);
84
- --ntl-eyebrow-text-color: rgb(18.039% 31.765% 92.941%);
72
+ --ntl-color-success-bg: var(--ntl-green-100);
73
+ --ntl-color-success-border: var(--ntl-green-300);
74
+ --ntl-color-success-text: var(--ntl-green-800);
75
+ --ntl-color-text: var(--ntl-neutral-700);
76
+ --ntl-color-text-accent: var(--ntl-teal-300);
77
+ --ntl-color-text-default: var(--ntl-neutral-700);
78
+ --ntl-color-text-inverse: var(--ntl-neutral-100);
79
+ --ntl-color-text-weak: var(--ntl-neutral-500);
80
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
81
+ --ntl-color-warning-bg: var(--ntl-gold-100);
82
+ --ntl-color-warning-border: var(--ntl-gold-300);
83
+ --ntl-color-warning-text: var(--ntl-gold-800);
84
+ --ntl-eyebrow-text-color: var(--ntl-blue-700);
85
85
  --ntl-filter-invert: none;
86
86
  --ntl-focus-outline-offset: 0px;
87
87
  --ntl-focus-outline-width: 5px;
@@ -127,7 +127,7 @@
127
127
  --ntl-green-700: rgb(10.196% 41.961% 20.392%);
128
128
  --ntl-green-800: rgb(5.8824% 29.02% 12.941%);
129
129
  --ntl-green-900: rgb(8.2353% 16.471% 9.8039%);
130
- --ntl-heading-text-color: rgb(9.4118% 10.196% 10.98%);
130
+ --ntl-heading-text-color: var(--ntl-neutral-800);
131
131
  --ntl-line-height-heading: 1.1;
132
132
  --ntl-line-height-loose: 2;
133
133
  --ntl-line-height-none: 1;
@@ -143,16 +143,16 @@
143
143
  --ntl-motion-easing-in: ease-in;
144
144
  --ntl-motion-easing-out: ease-out;
145
145
  --ntl-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
146
- --ntl-neutral-000: rgb(100% 100% 100%);
147
- --ntl-neutral-100: rgb(96.471% 96.471% 96.863%);
148
- --ntl-neutral-200: rgb(91.373% 92.157% 92.941%);
149
- --ntl-neutral-300: rgb(81.961% 83.529% 85.49%);
150
- --ntl-neutral-400: rgb(61.569% 65.49% 69.804%);
151
- --ntl-neutral-500: rgb(46.667% 50.196% 53.725%);
152
- --ntl-neutral-600: rgb(32.941% 35.294% 38.039%);
153
- --ntl-neutral-700: rgb(20.784% 22.745% 24.314%);
154
- --ntl-neutral-800: rgb(9.4118% 10.196% 10.98%);
155
- --ntl-neutral-900: rgb(2.3529% 4.3137% 6.2745%);
146
+ --ntl-neutral-000: var(--ntl-neutral-light-000);
147
+ --ntl-neutral-100: var(--ntl-neutral-light-100);
148
+ --ntl-neutral-200: var(--ntl-neutral-light-200);
149
+ --ntl-neutral-300: var(--ntl-neutral-light-300);
150
+ --ntl-neutral-400: var(--ntl-neutral-light-400);
151
+ --ntl-neutral-500: var(--ntl-neutral-light-500);
152
+ --ntl-neutral-600: var(--ntl-neutral-light-600);
153
+ --ntl-neutral-700: var(--ntl-neutral-light-700);
154
+ --ntl-neutral-800: var(--ntl-neutral-light-800);
155
+ --ntl-neutral-900: var(--ntl-neutral-light-900);
156
156
  --ntl-neutral-dark-000: rgb(100% 100% 100%);
157
157
  --ntl-neutral-dark-100: rgb(90.196% 92.549% 94.902%);
158
158
  --ntl-neutral-dark-200: rgb(67.059% 70.98% 74.902%);
@@ -174,7 +174,7 @@
174
174
  --ntl-neutral-light-800: rgb(9.4118% 10.196% 10.98%);
175
175
  --ntl-neutral-light-900: rgb(2.3529% 4.3137% 6.2745%);
176
176
  --ntl-page-content-max-width: 80rem;
177
- --ntl-page-gutter: 2rem;
177
+ --ntl-page-gutter: var(--ntl-space-l);
178
178
  --ntl-pink-000: rgb(98.824% 94.118% 98.431%);
179
179
  --ntl-pink-100: rgb(96.471% 82.353% 94.902%);
180
180
  --ntl-pink-200: rgb(96.863% 73.725% 95.294%);
@@ -212,16 +212,16 @@
212
212
  --ntl-red-700: rgb(68.627% 14.51% 21.176%);
213
213
  --ntl-red-800: rgb(50.196% 3.9216% 12.549%);
214
214
  --ntl-red-900: rgb(23.922% 10.98% 10.588%);
215
- --ntl-search-answer-message-color: rgb(91.373% 92.157% 92.941%);
216
- --ntl-search-back-btn-bg-color: rgb(96.471% 96.471% 96.863%);
217
- --ntl-search-bg-color: rgb(100% 100% 100%);
218
- --ntl-search-highlight-color: rgb(87.059% 100% 99.608%);
219
- --ntl-search-icon-color: rgb(61.569% 65.49% 69.804%);
220
- --ntl-search-input-bg-color: rgb(96.471% 96.471% 96.863%);
221
- --ntl-search-loading-color: rgb(0.39216% 41.176% 40.784%);
222
- --ntl-search-source-list-color: rgb(96.471% 96.471% 96.863%);
223
- --ntl-search-submit-btn-bg-color: rgb(19.608% 90.196% 88.627%);
224
- --ntl-search-user-message-color: rgb(87.059% 100% 99.608%);
215
+ --ntl-search-answer-message-color: var(--ntl-neutral-200);
216
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
217
+ --ntl-search-bg-color: var(--ntl-neutral-000);
218
+ --ntl-search-highlight-color: var(--ntl-teal-000);
219
+ --ntl-search-icon-color: var(--ntl-neutral-400);
220
+ --ntl-search-input-bg-color: var(--ntl-neutral-100);
221
+ --ntl-search-loading-color: var(--ntl-teal-700);
222
+ --ntl-search-source-list-color: var(--ntl-neutral-100);
223
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
224
+ --ntl-search-user-message-color: var(--ntl-teal-000);
225
225
  --ntl-shadow-deep: 0px 16px 24px 0px rgb(0% 0% 0% / 0.07), 0px 6px 30px 0px rgb(0% 0% 0% / 0.06), 0px 8px 10px 0px rgb(0% 0% 0% / 0.1);
226
226
  --ntl-shadow-heavy: -10px 10px 80px 0px rgb(0% 0% 0% / 0.1);
227
227
  --ntl-shadow-hover: 0px 4px 12px 0px rgb(0% 0% 0% / 0.25);
@@ -237,11 +237,11 @@
237
237
  --ntl-space-s: 1rem;
238
238
  --ntl-space-xl: 3rem;
239
239
  --ntl-space-xs: 0.75rem;
240
- --ntl-tabbed-content-bg-color: rgb(100% 100% 100%);
241
- --ntl-tabbed-content-bg-color-active: rgb(100% 100% 100%);
242
- --ntl-tabbed-content-border-color: rgb(18.039% 31.765% 92.941%);
243
- --ntl-tabbed-content-code-bg-color: rgb(2.3529% 4.3137% 6.2745%);
244
- --ntl-tabbed-content-tab-text-color-active: rgb(18.039% 31.765% 92.941%);
240
+ --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
241
+ --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
242
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
243
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
244
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
245
245
  --ntl-teal-000: rgb(87.059% 100% 99.608%);
246
246
  --ntl-teal-100: rgb(55.686% 98.431% 96.863%);
247
247
  --ntl-teal-200: rgb(19.608% 90.196% 88.627%);
@@ -252,8 +252,8 @@
252
252
  --ntl-teal-700: rgb(0.39216% 41.176% 40.784%);
253
253
  --ntl-teal-800: rgb(0.39216% 28.235% 27.843%);
254
254
  --ntl-teal-900: rgb(4.7059% 16.471% 16.471%);
255
- --ntl-testimonial-logo-hover-color: rgb(46.667% 50.196% 53.725%);
256
- --ntl-testimonial-logo-inactive-color: rgb(61.569% 65.49% 69.804%);
255
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
256
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
257
257
  --ntl-text-underline-offset: 0.125em;
258
258
  --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
259
259
  --ntl-tracking-tight: -0.02em;
@@ -266,297 +266,671 @@
266
266
  --ntl-z-index-tooltip: 500;
267
267
  }
268
268
 
269
+ [data-brand="hues"] {
270
+ --ntl-badge-bg-color: var(--ntl-neutral-100);
271
+ --ntl-badge-border-color: var(--ntl-neutral-300);
272
+ --ntl-badge-text-color: var(--ntl-neutral-500);
273
+ --ntl-blockquote-accent-color: var(--ntl-blue-700);
274
+ --ntl-blue-000: rgb(92.941% 95.686% 100%);
275
+ --ntl-blue-100: rgb(80.392% 88.627% 100%);
276
+ --ntl-blue-200: rgb(70.98% 82.353% 98.431%);
277
+ --ntl-blue-300: rgb(61.176% 74.51% 96.471%);
278
+ --ntl-blue-400: rgb(50.196% 67.059% 98.039%);
279
+ --ntl-blue-500: rgb(36.471% 55.294% 96.078%);
280
+ --ntl-blue-600: rgb(19.216% 41.961% 95.686%);
281
+ --ntl-blue-700: rgb(18.039% 31.765% 92.941%);
282
+ --ntl-blue-800: rgb(12.549% 21.176% 63.137%);
283
+ --ntl-blue-900: rgb(10.588% 12.549% 35.686%);
284
+ --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
285
+ --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
286
+ --ntl-button-outline-text-color: var(--ntl-neutral-800);
287
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
288
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
289
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
290
+ --ntl-button-secondary-text-color: var(--ntl-neutral-800);
291
+ --ntl-card-bg-color: var(--ntl-neutral-000);
292
+ --ntl-card-border-color: var(--ntl-neutral-200);
293
+ --ntl-card-border-color-hover: var(--ntl-neutral-300);
294
+ --ntl-code-bg-color: var(--ntl-teal-900);
295
+ --ntl-color-bg: var(--ntl-neutral-000);
296
+ --ntl-color-bg-2: var(--ntl-neutral-100);
297
+ --ntl-color-bg-3: var(--ntl-neutral-200);
298
+ --ntl-color-bg-inverse: var(--ntl-neutral-300);
299
+ --ntl-color-border-strong: var(--ntl-neutral-300);
300
+ --ntl-color-brand-primary: var(--ntl-blue-700);
301
+ --ntl-color-brand-primary-hover: var(--ntl-blue-800);
302
+ --ntl-color-brand-secondary: var(--ntl-teal-300);
303
+ --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
304
+ --ntl-color-disabled-bg: var(--ntl-neutral-200);
305
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
306
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
307
+ --ntl-color-highlight-bg: var(--ntl-purple-100);
308
+ --ntl-color-highlight-border: var(--ntl-purple-600);
309
+ --ntl-color-highlight-text: var(--ntl-purple-600);
310
+ --ntl-color-icon: var(--ntl-blue-700);
311
+ --ntl-color-info-bg: var(--ntl-blue-100);
312
+ --ntl-color-info-border: var(--ntl-blue-600);
313
+ --ntl-color-info-text: var(--ntl-blue-600);
314
+ --ntl-color-invalid-bg: var(--ntl-red-100);
315
+ --ntl-color-invalid-border: var(--ntl-red-600);
316
+ --ntl-color-invalid-text: var(--ntl-red-600);
317
+ --ntl-color-link: var(--ntl-blue-700);
318
+ --ntl-color-link-default: var(--ntl-blue-700);
319
+ --ntl-color-link-hover: var(--ntl-blue-800);
320
+ --ntl-color-link-inverse: var(--ntl-blue-400);
321
+ --ntl-color-logo-spark: var(--ntl-teal-400);
322
+ --ntl-color-logo-type: var(--ntl-teal-800);
323
+ --ntl-color-success-bg: var(--ntl-green-100);
324
+ --ntl-color-success-border: var(--ntl-green-300);
325
+ --ntl-color-success-text: var(--ntl-green-800);
326
+ --ntl-color-text: var(--ntl-neutral-700);
327
+ --ntl-color-text-accent: var(--ntl-teal-300);
328
+ --ntl-color-text-default: var(--ntl-neutral-700);
329
+ --ntl-color-text-inverse: var(--ntl-neutral-100);
330
+ --ntl-color-text-weak: var(--ntl-neutral-500);
331
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
332
+ --ntl-color-warning-bg: var(--ntl-gold-100);
333
+ --ntl-color-warning-border: var(--ntl-gold-300);
334
+ --ntl-color-warning-text: var(--ntl-gold-800);
335
+ --ntl-eyebrow-text-color: var(--ntl-blue-700);
336
+ --ntl-gold-000: rgb(99.216% 96.078% 84.706%);
337
+ --ntl-gold-100: rgb(96.471% 87.843% 64.706%);
338
+ --ntl-gold-200: rgb(98.039% 80.392% 43.529%);
339
+ --ntl-gold-300: rgb(98.431% 69.412% 23.922%);
340
+ --ntl-gold-400: rgb(97.647% 55.686% 12.941%);
341
+ --ntl-gold-500: rgb(83.529% 46.667% 10.196%);
342
+ --ntl-gold-600: rgb(65.882% 36.471% 7.451%);
343
+ --ntl-gold-700: rgb(54.902% 29.804% 5.098%);
344
+ --ntl-gold-800: rgb(37.647% 20.392% 3.1373%);
345
+ --ntl-gold-900: rgb(20% 13.333% 7.451%);
346
+ --ntl-green-000: rgb(90.588% 98.824% 91.373%);
347
+ --ntl-green-100: rgb(74.51% 97.647% 77.647%);
348
+ --ntl-green-200: rgb(57.647% 96.078% 64.706%);
349
+ --ntl-green-300: rgb(39.216% 84.706% 49.804%);
350
+ --ntl-green-400: rgb(22.745% 76.471% 39.216%);
351
+ --ntl-green-500: rgb(19.216% 65.882% 33.333%);
352
+ --ntl-green-600: rgb(13.333% 50.98% 25.098%);
353
+ --ntl-green-700: rgb(10.196% 41.961% 20.392%);
354
+ --ntl-green-800: rgb(5.8824% 29.02% 12.941%);
355
+ --ntl-green-900: rgb(8.2353% 16.471% 9.8039%);
356
+ --ntl-heading-text-color: var(--ntl-neutral-800);
357
+ --ntl-neutral-000: var(--ntl-neutral-light-000);
358
+ --ntl-neutral-100: var(--ntl-neutral-light-100);
359
+ --ntl-neutral-200: var(--ntl-neutral-light-200);
360
+ --ntl-neutral-300: var(--ntl-neutral-light-300);
361
+ --ntl-neutral-400: var(--ntl-neutral-light-400);
362
+ --ntl-neutral-500: var(--ntl-neutral-light-500);
363
+ --ntl-neutral-600: var(--ntl-neutral-light-600);
364
+ --ntl-neutral-700: var(--ntl-neutral-light-700);
365
+ --ntl-neutral-800: var(--ntl-neutral-light-800);
366
+ --ntl-neutral-900: var(--ntl-neutral-light-900);
367
+ --ntl-neutral-dark-000: rgb(100% 100% 100%);
368
+ --ntl-neutral-dark-100: rgb(90.196% 92.549% 94.902%);
369
+ --ntl-neutral-dark-200: rgb(67.059% 70.98% 74.902%);
370
+ --ntl-neutral-dark-300: rgb(49.412% 52.941% 57.255%);
371
+ --ntl-neutral-dark-400: rgb(30.196% 33.725% 37.255%);
372
+ --ntl-neutral-dark-500: rgb(23.137% 26.275% 29.804%);
373
+ --ntl-neutral-dark-600: rgb(15.294% 18.431% 21.961%);
374
+ --ntl-neutral-dark-700: rgb(11.765% 14.118% 17.255%);
375
+ --ntl-neutral-dark-800: rgb(7.0588% 9.4118% 12.157%);
376
+ --ntl-neutral-dark-900: rgb(2.3529% 4.3137% 6.2745%);
377
+ --ntl-neutral-light-000: rgb(100% 100% 100%);
378
+ --ntl-neutral-light-100: rgb(96.471% 96.471% 96.863%);
379
+ --ntl-neutral-light-200: rgb(91.373% 92.157% 92.941%);
380
+ --ntl-neutral-light-300: rgb(81.961% 83.529% 85.49%);
381
+ --ntl-neutral-light-400: rgb(61.569% 65.49% 69.804%);
382
+ --ntl-neutral-light-500: rgb(46.667% 50.196% 53.725%);
383
+ --ntl-neutral-light-600: rgb(32.941% 35.294% 38.039%);
384
+ --ntl-neutral-light-700: rgb(20.784% 22.745% 24.314%);
385
+ --ntl-neutral-light-800: rgb(9.4118% 10.196% 10.98%);
386
+ --ntl-neutral-light-900: rgb(2.3529% 4.3137% 6.2745%);
387
+ --ntl-pink-000: rgb(98.824% 94.118% 98.431%);
388
+ --ntl-pink-100: rgb(96.471% 82.353% 94.902%);
389
+ --ntl-pink-200: rgb(96.863% 73.725% 95.294%);
390
+ --ntl-pink-300: rgb(95.294% 65.882% 93.333%);
391
+ --ntl-pink-400: rgb(93.725% 49.804% 92.157%);
392
+ --ntl-pink-500: rgb(87.451% 35.294% 86.275%);
393
+ --ntl-pink-600: rgb(72.549% 21.961% 72.157%);
394
+ --ntl-pink-700: rgb(60.392% 17.647% 60%);
395
+ --ntl-pink-800: rgb(42.353% 11.373% 41.961%);
396
+ --ntl-pink-900: rgb(21.961% 10.588% 21.569%);
397
+ --ntl-purple-000: rgb(96.078% 94.902% 98.824%);
398
+ --ntl-purple-100: rgb(88.627% 85.098% 96.863%);
399
+ --ntl-purple-200: rgb(84.706% 78.039% 100%);
400
+ --ntl-purple-300: rgb(79.216% 72.549% 95.686%);
401
+ --ntl-purple-400: rgb(70.588% 61.569% 94.51%);
402
+ --ntl-purple-500: rgb(60.784% 50.196% 92.941%);
403
+ --ntl-purple-600: rgb(46.667% 36.078% 90.588%);
404
+ --ntl-purple-700: rgb(38.039% 29.02% 79.216%);
405
+ --ntl-purple-800: rgb(21.961% 16.471% 64.314%);
406
+ --ntl-purple-900: rgb(16.078% 12.941% 25.882%);
407
+ --ntl-red-000: rgb(98.431% 93.333% 92.941%);
408
+ --ntl-red-100: rgb(98.431% 82.745% 81.569%);
409
+ --ntl-red-200: rgb(100% 74.118% 72.941%);
410
+ --ntl-red-300: rgb(100% 67.843% 66.275%);
411
+ --ntl-red-400: rgb(99.608% 51.373% 50.98%);
412
+ --ntl-red-500: rgb(99.608% 30.588% 36.078%);
413
+ --ntl-red-600: rgb(83.922% 15.294% 25.098%);
414
+ --ntl-red-700: rgb(68.627% 14.51% 21.176%);
415
+ --ntl-red-800: rgb(50.196% 3.9216% 12.549%);
416
+ --ntl-red-900: rgb(23.922% 10.98% 10.588%);
417
+ --ntl-search-answer-message-color: var(--ntl-neutral-200);
418
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
419
+ --ntl-search-bg-color: var(--ntl-neutral-000);
420
+ --ntl-search-highlight-color: var(--ntl-teal-000);
421
+ --ntl-search-icon-color: var(--ntl-neutral-400);
422
+ --ntl-search-input-bg-color: var(--ntl-neutral-100);
423
+ --ntl-search-loading-color: var(--ntl-teal-700);
424
+ --ntl-search-source-list-color: var(--ntl-neutral-100);
425
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
426
+ --ntl-search-user-message-color: var(--ntl-teal-000);
427
+ --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
428
+ --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
429
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
430
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
431
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
432
+ --ntl-teal-000: rgb(87.059% 100% 99.608%);
433
+ --ntl-teal-100: rgb(55.686% 98.431% 96.863%);
434
+ --ntl-teal-200: rgb(19.608% 90.196% 88.627%);
435
+ --ntl-teal-300: rgb(7.8431% 84.706% 83.137%);
436
+ --ntl-teal-400: rgb(1.9608% 74.118% 72.941%);
437
+ --ntl-teal-500: rgb(1.5686% 63.529% 62.353%);
438
+ --ntl-teal-600: rgb(0.78431% 50.196% 49.02%);
439
+ --ntl-teal-700: rgb(0.39216% 41.176% 40.784%);
440
+ --ntl-teal-800: rgb(0.39216% 28.235% 27.843%);
441
+ --ntl-teal-900: rgb(4.7059% 16.471% 16.471%);
442
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
443
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
444
+ }
445
+
269
446
  @media (prefers-color-scheme: dark) {
270
- :root {
447
+ :root, [data-brand="hues"] {
271
448
  --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
272
- --ntl-badge-bg-color: rgb(11.765% 14.118% 17.255%);
273
- --ntl-badge-border-color: rgb(15.294% 18.431% 21.961%);
274
- --ntl-badge-text-color: rgb(90.196% 92.549% 94.902%);
275
- --ntl-blockquote-accent-color: rgb(19.608% 90.196% 88.627%);
449
+ --ntl-badge-bg-color: var(--ntl-neutral-700);
450
+ --ntl-badge-border-color: var(--ntl-neutral-600);
451
+ --ntl-badge-text-color: var(--ntl-neutral-100);
452
+ --ntl-blockquote-accent-color: var(--ntl-teal-200);
276
453
  --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
277
- --ntl-button-outline-bg-color-hover: rgb(23.137% 26.275% 29.804%);
278
- --ntl-button-outline-stroke-color: rgb(19.608% 90.196% 88.627%);
279
- --ntl-button-outline-text-color: rgb(19.608% 90.196% 88.627%);
280
- --ntl-button-primary-bg-color: rgb(19.608% 90.196% 88.627%);
281
- --ntl-button-primary-bg-color-hover: rgb(55.686% 98.431% 96.863%);
282
- --ntl-button-primary-text-color: rgb(7.0588% 9.4118% 12.157%);
454
+ --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
455
+ --ntl-button-outline-stroke-color: var(--ntl-teal-200);
456
+ --ntl-button-outline-text-color: var(--ntl-teal-200);
457
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
458
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
459
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
283
460
  --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
284
461
  --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
285
- --ntl-button-secondary-text-color: rgb(19.608% 90.196% 88.627%);
286
- --ntl-card-bg-color: rgb(4.7059% 16.471% 16.471%);
287
- --ntl-card-border-color: rgb(4.7059% 16.471% 16.471%);
288
- --ntl-card-border-color-hover: rgb(0.39216% 28.235% 27.843%);
289
- --ntl-code-bg-color: rgb(4.7059% 16.471% 16.471%);
290
- --ntl-color-bg: rgb(7.0588% 9.4118% 12.157%);
291
- --ntl-color-bg-2: rgb(11.765% 14.118% 17.255%);
292
- --ntl-color-bg-3: rgb(15.294% 18.431% 21.961%);
293
- --ntl-color-bg-inverse: rgb(100% 100% 100%);
462
+ --ntl-button-secondary-text-color: var(--ntl-teal-200);
463
+ --ntl-card-bg-color: var(--ntl-teal-900);
464
+ --ntl-card-border-color: var(--ntl-teal-900);
465
+ --ntl-card-border-color-hover: var(--ntl-teal-800);
466
+ --ntl-code-bg-color: var(--ntl-teal-900);
467
+ --ntl-color-bg: var(--ntl-neutral-800);
468
+ --ntl-color-bg-2: var(--ntl-neutral-700);
469
+ --ntl-color-bg-3: var(--ntl-neutral-600);
470
+ --ntl-color-bg-inverse: var(--ntl-neutral-000);
294
471
  --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
295
472
  --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
296
- --ntl-color-border-strong: rgb(23.137% 26.275% 29.804%);
473
+ --ntl-color-border-strong: var(--ntl-neutral-500);
297
474
  --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
298
- --ntl-color-brand-primary: rgb(7.8431% 84.706% 83.137%);
299
- --ntl-color-brand-primary-hover: rgb(0.39216% 28.235% 27.843%);
300
- --ntl-color-brand-secondary: rgb(18.039% 31.765% 92.941%);
301
- --ntl-color-brand-secondary-hover: rgb(12.549% 21.176% 63.137%);
302
- --ntl-color-disabled-bg: rgb(15.294% 18.431% 21.961%);
303
- --ntl-color-disabled-border: rgb(30.196% 33.725% 37.255%);
304
- --ntl-color-disabled-text: rgb(30.196% 33.725% 37.255%);
305
- --ntl-color-highlight-bg: rgb(84.706% 78.039% 100%);
306
- --ntl-color-highlight-border: rgb(38.039% 29.02% 79.216%);
307
- --ntl-color-highlight-text: rgb(38.039% 29.02% 79.216%);
308
- --ntl-color-icon: rgb(19.608% 90.196% 88.627%);
309
- --ntl-color-info-bg: rgb(70.98% 82.353% 98.431%);
310
- --ntl-color-info-border: rgb(18.039% 31.765% 92.941%);
311
- --ntl-color-info-text: rgb(18.039% 31.765% 92.941%);
312
- --ntl-color-invalid-bg: rgb(100% 74.118% 72.941%);
313
- --ntl-color-invalid-border: rgb(68.627% 14.51% 21.176%);
314
- --ntl-color-invalid-text: rgb(68.627% 14.51% 21.176%);
315
- --ntl-color-link: rgb(19.608% 90.196% 88.627%);
316
- --ntl-color-link-default: rgb(19.608% 90.196% 88.627%);
317
- --ntl-color-link-hover: rgb(55.686% 98.431% 96.863%);
318
- --ntl-color-link-inverse: rgb(19.216% 41.961% 95.686%);
475
+ --ntl-color-brand-primary: var(--ntl-teal-300);
476
+ --ntl-color-brand-primary-hover: var(--ntl-teal-800);
477
+ --ntl-color-brand-secondary: var(--ntl-blue-700);
478
+ --ntl-color-brand-secondary-hover: var(--ntl-blue-800);
479
+ --ntl-color-disabled-bg: var(--ntl-neutral-600);
480
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
481
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
482
+ --ntl-color-highlight-bg: var(--ntl-purple-200);
483
+ --ntl-color-highlight-border: var(--ntl-purple-700);
484
+ --ntl-color-highlight-text: var(--ntl-purple-700);
485
+ --ntl-color-icon: var(--ntl-teal-200);
486
+ --ntl-color-info-bg: var(--ntl-blue-200);
487
+ --ntl-color-info-border: var(--ntl-blue-700);
488
+ --ntl-color-info-text: var(--ntl-blue-700);
489
+ --ntl-color-invalid-bg: var(--ntl-red-200);
490
+ --ntl-color-invalid-border: var(--ntl-red-700);
491
+ --ntl-color-invalid-text: var(--ntl-red-700);
492
+ --ntl-color-link: var(--ntl-teal-200);
493
+ --ntl-color-link-default: var(--ntl-teal-200);
494
+ --ntl-color-link-hover: var(--ntl-teal-100);
495
+ --ntl-color-link-inverse: var(--ntl-blue-600);
319
496
  --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
320
- --ntl-color-logo-spark: rgb(19.608% 90.196% 88.627%);
321
- --ntl-color-logo-type: rgb(100% 100% 100%);
497
+ --ntl-color-logo-spark: var(--ntl-teal-200);
498
+ --ntl-color-logo-type: var(--ntl-neutral-000);
322
499
  --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
323
- --ntl-color-success-bg: rgb(57.647% 96.078% 64.706%);
324
- --ntl-color-success-border: rgb(22.745% 76.471% 39.216%);
325
- --ntl-color-success-text: rgb(8.2353% 16.471% 9.8039%);
326
- --ntl-color-text: rgb(87.059% 100% 99.608%);
327
- --ntl-color-text-accent: rgb(0.78431% 50.196% 49.02%);
328
- --ntl-color-text-default: rgb(87.059% 100% 99.608%);
329
- --ntl-color-text-inverse: rgb(0.39216% 28.235% 27.843%);
330
- --ntl-color-text-weak: rgb(49.412% 52.941% 57.255%);
331
- --ntl-color-text-weaker: rgb(30.196% 33.725% 37.255%);
332
- --ntl-color-warning-bg: rgb(98.039% 80.392% 43.529%);
333
- --ntl-color-warning-border: rgb(97.647% 55.686% 12.941%);
334
- --ntl-color-warning-text: rgb(20% 13.333% 7.451%);
335
- --ntl-eyebrow-text-color: rgb(19.608% 90.196% 88.627%);
500
+ --ntl-color-success-bg: var(--ntl-green-200);
501
+ --ntl-color-success-border: var(--ntl-green-400);
502
+ --ntl-color-success-text: var(--ntl-green-900);
503
+ --ntl-color-text: var(--ntl-teal-000);
504
+ --ntl-color-text-accent: var(--ntl-teal-600);
505
+ --ntl-color-text-default: var(--ntl-teal-000);
506
+ --ntl-color-text-inverse: var(--ntl-teal-800);
507
+ --ntl-color-text-weak: var(--ntl-neutral-300);
508
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
509
+ --ntl-color-warning-bg: var(--ntl-gold-200);
510
+ --ntl-color-warning-border: var(--ntl-gold-400);
511
+ --ntl-color-warning-text: var(--ntl-gold-900);
512
+ --ntl-eyebrow-text-color: var(--ntl-teal-200);
336
513
  --ntl-filter-invert: invert(1);
337
- --ntl-heading-text-color: rgb(90.196% 92.549% 94.902%);
338
- --ntl-neutral-000: rgb(100% 100% 100%);
339
- --ntl-neutral-100: rgb(90.196% 92.549% 94.902%);
340
- --ntl-neutral-200: rgb(67.059% 70.98% 74.902%);
341
- --ntl-neutral-300: rgb(49.412% 52.941% 57.255%);
342
- --ntl-neutral-400: rgb(30.196% 33.725% 37.255%);
343
- --ntl-neutral-500: rgb(23.137% 26.275% 29.804%);
344
- --ntl-neutral-600: rgb(15.294% 18.431% 21.961%);
345
- --ntl-neutral-700: rgb(11.765% 14.118% 17.255%);
346
- --ntl-neutral-800: rgb(7.0588% 9.4118% 12.157%);
347
- --ntl-neutral-900: rgb(2.3529% 4.3137% 6.2745%);
348
- --ntl-search-answer-message-color: rgb(15.294% 18.431% 21.961%);
349
- --ntl-search-back-btn-bg-color: rgb(23.137% 26.275% 29.804%);
350
- --ntl-search-bg-color: rgb(11.765% 14.118% 17.255%);
351
- --ntl-search-highlight-color: rgb(0.39216% 28.235% 27.843%);
352
- --ntl-search-icon-color: rgb(49.412% 52.941% 57.255%);
353
- --ntl-search-input-bg-color: rgb(15.294% 18.431% 21.961%);
354
- --ntl-search-loading-color: rgb(19.608% 90.196% 88.627%);
355
- --ntl-search-source-list-color: rgb(11.765% 14.118% 17.255%);
356
- --ntl-search-submit-btn-bg-color: rgb(19.608% 90.196% 88.627%);
357
- --ntl-search-user-message-color: rgb(0.39216% 28.235% 27.843%);
514
+ --ntl-heading-text-color: var(--ntl-neutral-100);
515
+ --ntl-neutral-000: var(--ntl-neutral-dark-000);
516
+ --ntl-neutral-100: var(--ntl-neutral-dark-100);
517
+ --ntl-neutral-200: var(--ntl-neutral-dark-200);
518
+ --ntl-neutral-300: var(--ntl-neutral-dark-300);
519
+ --ntl-neutral-400: var(--ntl-neutral-dark-400);
520
+ --ntl-neutral-500: var(--ntl-neutral-dark-500);
521
+ --ntl-neutral-600: var(--ntl-neutral-dark-600);
522
+ --ntl-neutral-700: var(--ntl-neutral-dark-700);
523
+ --ntl-neutral-800: var(--ntl-neutral-dark-800);
524
+ --ntl-neutral-900: var(--ntl-neutral-dark-900);
525
+ --ntl-search-answer-message-color: var(--ntl-neutral-600);
526
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
527
+ --ntl-search-bg-color: var(--ntl-neutral-700);
528
+ --ntl-search-highlight-color: var(--ntl-teal-800);
529
+ --ntl-search-icon-color: var(--ntl-neutral-300);
530
+ --ntl-search-input-bg-color: var(--ntl-neutral-600);
531
+ --ntl-search-loading-color: var(--ntl-teal-200);
532
+ --ntl-search-source-list-color: var(--ntl-neutral-700);
533
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
534
+ --ntl-search-user-message-color: var(--ntl-teal-800);
358
535
  --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
359
- --ntl-tabbed-content-bg-color-active: rgb(4.7059% 16.471% 16.471%);
360
- --ntl-tabbed-content-border-color: rgb(19.608% 90.196% 88.627%);
361
- --ntl-tabbed-content-code-bg-color: rgb(2.3529% 4.3137% 6.2745%);
362
- --ntl-tabbed-content-tab-text-color-active: rgb(19.608% 90.196% 88.627%);
363
- --ntl-testimonial-logo-hover-color: rgb(49.412% 52.941% 57.255%);
364
- --ntl-testimonial-logo-inactive-color: rgb(30.196% 33.725% 37.255%);
536
+ --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
537
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
538
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
539
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
540
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
541
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
365
542
  --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
366
543
  }
367
544
  }
368
545
 
369
546
  [data-theme="dark"] {
370
547
  --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
371
- --ntl-badge-bg-color: rgb(11.765% 14.118% 17.255%);
372
- --ntl-badge-border-color: rgb(15.294% 18.431% 21.961%);
373
- --ntl-badge-text-color: rgb(90.196% 92.549% 94.902%);
374
- --ntl-blockquote-accent-color: rgb(19.608% 90.196% 88.627%);
548
+ --ntl-badge-bg-color: var(--ntl-neutral-700);
549
+ --ntl-badge-border-color: var(--ntl-neutral-600);
550
+ --ntl-badge-text-color: var(--ntl-neutral-100);
551
+ --ntl-blockquote-accent-color: var(--ntl-teal-200);
375
552
  --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
376
- --ntl-button-outline-bg-color-hover: rgb(23.137% 26.275% 29.804%);
377
- --ntl-button-outline-stroke-color: rgb(19.608% 90.196% 88.627%);
378
- --ntl-button-outline-text-color: rgb(19.608% 90.196% 88.627%);
379
- --ntl-button-primary-bg-color: rgb(19.608% 90.196% 88.627%);
380
- --ntl-button-primary-bg-color-hover: rgb(55.686% 98.431% 96.863%);
381
- --ntl-button-primary-text-color: rgb(7.0588% 9.4118% 12.157%);
553
+ --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
554
+ --ntl-button-outline-stroke-color: var(--ntl-teal-200);
555
+ --ntl-button-outline-text-color: var(--ntl-teal-200);
556
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
557
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
558
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
382
559
  --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
383
560
  --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
384
- --ntl-button-secondary-text-color: rgb(19.608% 90.196% 88.627%);
385
- --ntl-card-bg-color: rgb(4.7059% 16.471% 16.471%);
386
- --ntl-card-border-color: rgb(4.7059% 16.471% 16.471%);
387
- --ntl-card-border-color-hover: rgb(0.39216% 28.235% 27.843%);
388
- --ntl-code-bg-color: rgb(4.7059% 16.471% 16.471%);
389
- --ntl-color-bg: rgb(7.0588% 9.4118% 12.157%);
390
- --ntl-color-bg-2: rgb(11.765% 14.118% 17.255%);
391
- --ntl-color-bg-3: rgb(15.294% 18.431% 21.961%);
392
- --ntl-color-bg-inverse: rgb(100% 100% 100%);
561
+ --ntl-button-secondary-text-color: var(--ntl-teal-200);
562
+ --ntl-card-bg-color: var(--ntl-teal-900);
563
+ --ntl-card-border-color: var(--ntl-teal-900);
564
+ --ntl-card-border-color-hover: var(--ntl-teal-800);
565
+ --ntl-code-bg-color: var(--ntl-teal-900);
566
+ --ntl-color-bg: var(--ntl-neutral-800);
567
+ --ntl-color-bg-2: var(--ntl-neutral-700);
568
+ --ntl-color-bg-3: var(--ntl-neutral-600);
569
+ --ntl-color-bg-inverse: var(--ntl-neutral-000);
393
570
  --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
394
571
  --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
395
- --ntl-color-border-strong: rgb(23.137% 26.275% 29.804%);
572
+ --ntl-color-border-strong: var(--ntl-neutral-500);
396
573
  --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
397
- --ntl-color-brand-primary: rgb(7.8431% 84.706% 83.137%);
398
- --ntl-color-brand-primary-hover: rgb(0.39216% 28.235% 27.843%);
399
- --ntl-color-brand-secondary: rgb(18.039% 31.765% 92.941%);
400
- --ntl-color-brand-secondary-hover: rgb(12.549% 21.176% 63.137%);
401
- --ntl-color-disabled-bg: rgb(15.294% 18.431% 21.961%);
402
- --ntl-color-disabled-border: rgb(30.196% 33.725% 37.255%);
403
- --ntl-color-disabled-text: rgb(30.196% 33.725% 37.255%);
404
- --ntl-color-highlight-bg: rgb(84.706% 78.039% 100%);
405
- --ntl-color-highlight-border: rgb(38.039% 29.02% 79.216%);
406
- --ntl-color-highlight-text: rgb(38.039% 29.02% 79.216%);
407
- --ntl-color-icon: rgb(19.608% 90.196% 88.627%);
408
- --ntl-color-info-bg: rgb(70.98% 82.353% 98.431%);
409
- --ntl-color-info-border: rgb(18.039% 31.765% 92.941%);
410
- --ntl-color-info-text: rgb(18.039% 31.765% 92.941%);
411
- --ntl-color-invalid-bg: rgb(100% 74.118% 72.941%);
412
- --ntl-color-invalid-border: rgb(68.627% 14.51% 21.176%);
413
- --ntl-color-invalid-text: rgb(68.627% 14.51% 21.176%);
414
- --ntl-color-link: rgb(19.608% 90.196% 88.627%);
415
- --ntl-color-link-default: rgb(19.608% 90.196% 88.627%);
416
- --ntl-color-link-hover: rgb(55.686% 98.431% 96.863%);
417
- --ntl-color-link-inverse: rgb(19.216% 41.961% 95.686%);
574
+ --ntl-color-brand-primary: var(--ntl-teal-300);
575
+ --ntl-color-brand-primary-hover: var(--ntl-teal-800);
576
+ --ntl-color-brand-secondary: var(--ntl-blue-700);
577
+ --ntl-color-brand-secondary-hover: var(--ntl-blue-800);
578
+ --ntl-color-disabled-bg: var(--ntl-neutral-600);
579
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
580
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
581
+ --ntl-color-highlight-bg: var(--ntl-purple-200);
582
+ --ntl-color-highlight-border: var(--ntl-purple-700);
583
+ --ntl-color-highlight-text: var(--ntl-purple-700);
584
+ --ntl-color-icon: var(--ntl-teal-200);
585
+ --ntl-color-info-bg: var(--ntl-blue-200);
586
+ --ntl-color-info-border: var(--ntl-blue-700);
587
+ --ntl-color-info-text: var(--ntl-blue-700);
588
+ --ntl-color-invalid-bg: var(--ntl-red-200);
589
+ --ntl-color-invalid-border: var(--ntl-red-700);
590
+ --ntl-color-invalid-text: var(--ntl-red-700);
591
+ --ntl-color-link: var(--ntl-teal-200);
592
+ --ntl-color-link-default: var(--ntl-teal-200);
593
+ --ntl-color-link-hover: var(--ntl-teal-100);
594
+ --ntl-color-link-inverse: var(--ntl-blue-600);
418
595
  --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
419
- --ntl-color-logo-spark: rgb(19.608% 90.196% 88.627%);
420
- --ntl-color-logo-type: rgb(100% 100% 100%);
596
+ --ntl-color-logo-spark: var(--ntl-teal-200);
597
+ --ntl-color-logo-type: var(--ntl-neutral-000);
421
598
  --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
422
- --ntl-color-success-bg: rgb(57.647% 96.078% 64.706%);
423
- --ntl-color-success-border: rgb(22.745% 76.471% 39.216%);
424
- --ntl-color-success-text: rgb(8.2353% 16.471% 9.8039%);
425
- --ntl-color-text: rgb(87.059% 100% 99.608%);
426
- --ntl-color-text-accent: rgb(0.78431% 50.196% 49.02%);
427
- --ntl-color-text-default: rgb(87.059% 100% 99.608%);
428
- --ntl-color-text-inverse: rgb(0.39216% 28.235% 27.843%);
429
- --ntl-color-text-weak: rgb(49.412% 52.941% 57.255%);
430
- --ntl-color-text-weaker: rgb(30.196% 33.725% 37.255%);
431
- --ntl-color-warning-bg: rgb(98.039% 80.392% 43.529%);
432
- --ntl-color-warning-border: rgb(97.647% 55.686% 12.941%);
433
- --ntl-color-warning-text: rgb(20% 13.333% 7.451%);
434
- --ntl-eyebrow-text-color: rgb(19.608% 90.196% 88.627%);
599
+ --ntl-color-success-bg: var(--ntl-green-200);
600
+ --ntl-color-success-border: var(--ntl-green-400);
601
+ --ntl-color-success-text: var(--ntl-green-900);
602
+ --ntl-color-text: var(--ntl-teal-000);
603
+ --ntl-color-text-accent: var(--ntl-teal-600);
604
+ --ntl-color-text-default: var(--ntl-teal-000);
605
+ --ntl-color-text-inverse: var(--ntl-teal-800);
606
+ --ntl-color-text-weak: var(--ntl-neutral-300);
607
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
608
+ --ntl-color-warning-bg: var(--ntl-gold-200);
609
+ --ntl-color-warning-border: var(--ntl-gold-400);
610
+ --ntl-color-warning-text: var(--ntl-gold-900);
611
+ --ntl-eyebrow-text-color: var(--ntl-teal-200);
435
612
  --ntl-filter-invert: invert(1);
436
- --ntl-heading-text-color: rgb(90.196% 92.549% 94.902%);
437
- --ntl-neutral-000: rgb(100% 100% 100%);
438
- --ntl-neutral-100: rgb(90.196% 92.549% 94.902%);
439
- --ntl-neutral-200: rgb(67.059% 70.98% 74.902%);
440
- --ntl-neutral-300: rgb(49.412% 52.941% 57.255%);
441
- --ntl-neutral-400: rgb(30.196% 33.725% 37.255%);
442
- --ntl-neutral-500: rgb(23.137% 26.275% 29.804%);
443
- --ntl-neutral-600: rgb(15.294% 18.431% 21.961%);
444
- --ntl-neutral-700: rgb(11.765% 14.118% 17.255%);
445
- --ntl-neutral-800: rgb(7.0588% 9.4118% 12.157%);
446
- --ntl-neutral-900: rgb(2.3529% 4.3137% 6.2745%);
447
- --ntl-search-answer-message-color: rgb(15.294% 18.431% 21.961%);
448
- --ntl-search-back-btn-bg-color: rgb(23.137% 26.275% 29.804%);
449
- --ntl-search-bg-color: rgb(11.765% 14.118% 17.255%);
450
- --ntl-search-highlight-color: rgb(0.39216% 28.235% 27.843%);
451
- --ntl-search-icon-color: rgb(49.412% 52.941% 57.255%);
452
- --ntl-search-input-bg-color: rgb(15.294% 18.431% 21.961%);
453
- --ntl-search-loading-color: rgb(19.608% 90.196% 88.627%);
454
- --ntl-search-source-list-color: rgb(11.765% 14.118% 17.255%);
455
- --ntl-search-submit-btn-bg-color: rgb(19.608% 90.196% 88.627%);
456
- --ntl-search-user-message-color: rgb(0.39216% 28.235% 27.843%);
613
+ --ntl-heading-text-color: var(--ntl-neutral-100);
614
+ --ntl-neutral-000: var(--ntl-neutral-dark-000);
615
+ --ntl-neutral-100: var(--ntl-neutral-dark-100);
616
+ --ntl-neutral-200: var(--ntl-neutral-dark-200);
617
+ --ntl-neutral-300: var(--ntl-neutral-dark-300);
618
+ --ntl-neutral-400: var(--ntl-neutral-dark-400);
619
+ --ntl-neutral-500: var(--ntl-neutral-dark-500);
620
+ --ntl-neutral-600: var(--ntl-neutral-dark-600);
621
+ --ntl-neutral-700: var(--ntl-neutral-dark-700);
622
+ --ntl-neutral-800: var(--ntl-neutral-dark-800);
623
+ --ntl-neutral-900: var(--ntl-neutral-dark-900);
624
+ --ntl-search-answer-message-color: var(--ntl-neutral-600);
625
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
626
+ --ntl-search-bg-color: var(--ntl-neutral-700);
627
+ --ntl-search-highlight-color: var(--ntl-teal-800);
628
+ --ntl-search-icon-color: var(--ntl-neutral-300);
629
+ --ntl-search-input-bg-color: var(--ntl-neutral-600);
630
+ --ntl-search-loading-color: var(--ntl-teal-200);
631
+ --ntl-search-source-list-color: var(--ntl-neutral-700);
632
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
633
+ --ntl-search-user-message-color: var(--ntl-teal-800);
457
634
  --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
458
- --ntl-tabbed-content-bg-color-active: rgb(4.7059% 16.471% 16.471%);
459
- --ntl-tabbed-content-border-color: rgb(19.608% 90.196% 88.627%);
460
- --ntl-tabbed-content-code-bg-color: rgb(2.3529% 4.3137% 6.2745%);
461
- --ntl-tabbed-content-tab-text-color-active: rgb(19.608% 90.196% 88.627%);
462
- --ntl-testimonial-logo-hover-color: rgb(49.412% 52.941% 57.255%);
463
- --ntl-testimonial-logo-inactive-color: rgb(30.196% 33.725% 37.255%);
635
+ --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
636
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
637
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
638
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
639
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
640
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
464
641
  --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
465
642
  }
466
643
 
467
644
  [data-theme="light"] {
468
645
  --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
469
- --ntl-badge-bg-color: rgb(96.471% 96.471% 96.863%);
470
- --ntl-badge-border-color: rgb(81.961% 83.529% 85.49%);
471
- --ntl-badge-text-color: rgb(46.667% 50.196% 53.725%);
472
- --ntl-blockquote-accent-color: rgb(18.039% 31.765% 92.941%);
646
+ --ntl-badge-bg-color: var(--ntl-neutral-100);
647
+ --ntl-badge-border-color: var(--ntl-neutral-300);
648
+ --ntl-badge-text-color: var(--ntl-neutral-500);
649
+ --ntl-blockquote-accent-color: var(--ntl-blue-700);
650
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
651
+ --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
652
+ --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
653
+ --ntl-button-outline-text-color: var(--ntl-neutral-800);
654
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
655
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
656
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
657
+ --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
658
+ --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
659
+ --ntl-button-secondary-text-color: var(--ntl-neutral-800);
660
+ --ntl-card-bg-color: var(--ntl-neutral-000);
661
+ --ntl-card-border-color: var(--ntl-neutral-200);
662
+ --ntl-card-border-color-hover: var(--ntl-neutral-300);
663
+ --ntl-code-bg-color: var(--ntl-teal-900);
664
+ --ntl-color-bg: var(--ntl-neutral-000);
665
+ --ntl-color-bg-2: var(--ntl-neutral-100);
666
+ --ntl-color-bg-3: var(--ntl-neutral-200);
667
+ --ntl-color-bg-inverse: var(--ntl-neutral-300);
668
+ --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
669
+ --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
670
+ --ntl-color-border-strong: var(--ntl-neutral-300);
671
+ --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
672
+ --ntl-color-brand-primary: var(--ntl-blue-700);
673
+ --ntl-color-brand-primary-hover: var(--ntl-blue-800);
674
+ --ntl-color-brand-secondary: var(--ntl-teal-300);
675
+ --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
676
+ --ntl-color-disabled-bg: var(--ntl-neutral-200);
677
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
678
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
679
+ --ntl-color-highlight-bg: var(--ntl-purple-100);
680
+ --ntl-color-highlight-border: var(--ntl-purple-600);
681
+ --ntl-color-highlight-text: var(--ntl-purple-600);
682
+ --ntl-color-icon: var(--ntl-blue-700);
683
+ --ntl-color-info-bg: var(--ntl-blue-100);
684
+ --ntl-color-info-border: var(--ntl-blue-600);
685
+ --ntl-color-info-text: var(--ntl-blue-600);
686
+ --ntl-color-invalid-bg: var(--ntl-red-100);
687
+ --ntl-color-invalid-border: var(--ntl-red-600);
688
+ --ntl-color-invalid-text: var(--ntl-red-600);
689
+ --ntl-color-link: var(--ntl-blue-700);
690
+ --ntl-color-link-default: var(--ntl-blue-700);
691
+ --ntl-color-link-hover: var(--ntl-blue-800);
692
+ --ntl-color-link-inverse: var(--ntl-blue-400);
693
+ --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
694
+ --ntl-color-logo-spark: var(--ntl-teal-400);
695
+ --ntl-color-logo-type: var(--ntl-teal-800);
696
+ --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
697
+ --ntl-color-success-bg: var(--ntl-green-100);
698
+ --ntl-color-success-border: var(--ntl-green-300);
699
+ --ntl-color-success-text: var(--ntl-green-800);
700
+ --ntl-color-text: var(--ntl-neutral-700);
701
+ --ntl-color-text-accent: var(--ntl-teal-300);
702
+ --ntl-color-text-default: var(--ntl-neutral-700);
703
+ --ntl-color-text-inverse: var(--ntl-neutral-100);
704
+ --ntl-color-text-weak: var(--ntl-neutral-500);
705
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
706
+ --ntl-color-warning-bg: var(--ntl-gold-100);
707
+ --ntl-color-warning-border: var(--ntl-gold-300);
708
+ --ntl-color-warning-text: var(--ntl-gold-800);
709
+ --ntl-eyebrow-text-color: var(--ntl-blue-700);
710
+ --ntl-filter-invert: none;
711
+ --ntl-heading-text-color: var(--ntl-neutral-800);
712
+ --ntl-neutral-000: var(--ntl-neutral-light-000);
713
+ --ntl-neutral-100: var(--ntl-neutral-light-100);
714
+ --ntl-neutral-200: var(--ntl-neutral-light-200);
715
+ --ntl-neutral-300: var(--ntl-neutral-light-300);
716
+ --ntl-neutral-400: var(--ntl-neutral-light-400);
717
+ --ntl-neutral-500: var(--ntl-neutral-light-500);
718
+ --ntl-neutral-600: var(--ntl-neutral-light-600);
719
+ --ntl-neutral-700: var(--ntl-neutral-light-700);
720
+ --ntl-neutral-800: var(--ntl-neutral-light-800);
721
+ --ntl-neutral-900: var(--ntl-neutral-light-900);
722
+ --ntl-search-answer-message-color: var(--ntl-neutral-200);
723
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
724
+ --ntl-search-bg-color: var(--ntl-neutral-000);
725
+ --ntl-search-highlight-color: var(--ntl-teal-000);
726
+ --ntl-search-icon-color: var(--ntl-neutral-400);
727
+ --ntl-search-input-bg-color: var(--ntl-neutral-100);
728
+ --ntl-search-loading-color: var(--ntl-teal-700);
729
+ --ntl-search-source-list-color: var(--ntl-neutral-100);
730
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
731
+ --ntl-search-user-message-color: var(--ntl-teal-000);
732
+ --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
733
+ --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
734
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
735
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
736
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
737
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
738
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
739
+ --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
740
+ }
741
+
742
+ [data-brand="hues"][data-theme="dark"], [data-brand="hues"] [data-theme="dark"], [data-theme="dark"] [data-brand="hues"] {
743
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
744
+ --ntl-badge-bg-color: var(--ntl-neutral-700);
745
+ --ntl-badge-border-color: var(--ntl-neutral-600);
746
+ --ntl-badge-text-color: var(--ntl-neutral-100);
747
+ --ntl-blockquote-accent-color: var(--ntl-teal-200);
748
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
749
+ --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
750
+ --ntl-button-outline-stroke-color: var(--ntl-teal-200);
751
+ --ntl-button-outline-text-color: var(--ntl-teal-200);
752
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
753
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
754
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
755
+ --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
756
+ --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
757
+ --ntl-button-secondary-text-color: var(--ntl-teal-200);
758
+ --ntl-card-bg-color: var(--ntl-teal-900);
759
+ --ntl-card-border-color: var(--ntl-teal-900);
760
+ --ntl-card-border-color-hover: var(--ntl-teal-800);
761
+ --ntl-code-bg-color: var(--ntl-teal-900);
762
+ --ntl-color-bg: var(--ntl-neutral-800);
763
+ --ntl-color-bg-2: var(--ntl-neutral-700);
764
+ --ntl-color-bg-3: var(--ntl-neutral-600);
765
+ --ntl-color-bg-inverse: var(--ntl-neutral-000);
766
+ --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
767
+ --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
768
+ --ntl-color-border-strong: var(--ntl-neutral-500);
769
+ --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
770
+ --ntl-color-brand-primary: var(--ntl-teal-300);
771
+ --ntl-color-brand-primary-hover: var(--ntl-teal-800);
772
+ --ntl-color-brand-secondary: var(--ntl-blue-700);
773
+ --ntl-color-brand-secondary-hover: var(--ntl-blue-800);
774
+ --ntl-color-disabled-bg: var(--ntl-neutral-600);
775
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
776
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
777
+ --ntl-color-highlight-bg: var(--ntl-purple-200);
778
+ --ntl-color-highlight-border: var(--ntl-purple-700);
779
+ --ntl-color-highlight-text: var(--ntl-purple-700);
780
+ --ntl-color-icon: var(--ntl-teal-200);
781
+ --ntl-color-info-bg: var(--ntl-blue-200);
782
+ --ntl-color-info-border: var(--ntl-blue-700);
783
+ --ntl-color-info-text: var(--ntl-blue-700);
784
+ --ntl-color-invalid-bg: var(--ntl-red-200);
785
+ --ntl-color-invalid-border: var(--ntl-red-700);
786
+ --ntl-color-invalid-text: var(--ntl-red-700);
787
+ --ntl-color-link: var(--ntl-teal-200);
788
+ --ntl-color-link-default: var(--ntl-teal-200);
789
+ --ntl-color-link-hover: var(--ntl-teal-100);
790
+ --ntl-color-link-inverse: var(--ntl-blue-600);
791
+ --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
792
+ --ntl-color-logo-spark: var(--ntl-teal-200);
793
+ --ntl-color-logo-type: var(--ntl-neutral-000);
794
+ --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
795
+ --ntl-color-success-bg: var(--ntl-green-200);
796
+ --ntl-color-success-border: var(--ntl-green-400);
797
+ --ntl-color-success-text: var(--ntl-green-900);
798
+ --ntl-color-text: var(--ntl-teal-000);
799
+ --ntl-color-text-accent: var(--ntl-teal-600);
800
+ --ntl-color-text-default: var(--ntl-teal-000);
801
+ --ntl-color-text-inverse: var(--ntl-teal-800);
802
+ --ntl-color-text-weak: var(--ntl-neutral-300);
803
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
804
+ --ntl-color-warning-bg: var(--ntl-gold-200);
805
+ --ntl-color-warning-border: var(--ntl-gold-400);
806
+ --ntl-color-warning-text: var(--ntl-gold-900);
807
+ --ntl-eyebrow-text-color: var(--ntl-teal-200);
808
+ --ntl-filter-invert: invert(1);
809
+ --ntl-heading-text-color: var(--ntl-neutral-100);
810
+ --ntl-neutral-000: var(--ntl-neutral-dark-000);
811
+ --ntl-neutral-100: var(--ntl-neutral-dark-100);
812
+ --ntl-neutral-200: var(--ntl-neutral-dark-200);
813
+ --ntl-neutral-300: var(--ntl-neutral-dark-300);
814
+ --ntl-neutral-400: var(--ntl-neutral-dark-400);
815
+ --ntl-neutral-500: var(--ntl-neutral-dark-500);
816
+ --ntl-neutral-600: var(--ntl-neutral-dark-600);
817
+ --ntl-neutral-700: var(--ntl-neutral-dark-700);
818
+ --ntl-neutral-800: var(--ntl-neutral-dark-800);
819
+ --ntl-neutral-900: var(--ntl-neutral-dark-900);
820
+ --ntl-search-answer-message-color: var(--ntl-neutral-600);
821
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-500);
822
+ --ntl-search-bg-color: var(--ntl-neutral-700);
823
+ --ntl-search-highlight-color: var(--ntl-teal-800);
824
+ --ntl-search-icon-color: var(--ntl-neutral-300);
825
+ --ntl-search-input-bg-color: var(--ntl-neutral-600);
826
+ --ntl-search-loading-color: var(--ntl-teal-200);
827
+ --ntl-search-source-list-color: var(--ntl-neutral-700);
828
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
829
+ --ntl-search-user-message-color: var(--ntl-teal-800);
830
+ --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
831
+ --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
832
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
833
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
834
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
835
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
836
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
837
+ --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
838
+ }
839
+
840
+ [data-brand="hues"][data-theme="light"], [data-brand="hues"] [data-theme="light"], [data-theme="light"] [data-brand="hues"] {
841
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
842
+ --ntl-badge-bg-color: var(--ntl-neutral-100);
843
+ --ntl-badge-border-color: var(--ntl-neutral-300);
844
+ --ntl-badge-text-color: var(--ntl-neutral-500);
845
+ --ntl-blockquote-accent-color: var(--ntl-blue-700);
473
846
  --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
474
847
  --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
475
- --ntl-button-outline-stroke-color: rgb(9.4118% 10.196% 10.98%);
476
- --ntl-button-outline-text-color: rgb(9.4118% 10.196% 10.98%);
477
- --ntl-button-primary-bg-color: rgb(19.608% 90.196% 88.627%);
478
- --ntl-button-primary-bg-color-hover: rgb(55.686% 98.431% 96.863%);
479
- --ntl-button-primary-text-color: rgb(9.4118% 10.196% 10.98%);
848
+ --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
849
+ --ntl-button-outline-text-color: var(--ntl-neutral-800);
850
+ --ntl-button-primary-bg-color: var(--ntl-teal-200);
851
+ --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
852
+ --ntl-button-primary-text-color: var(--ntl-neutral-800);
480
853
  --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
481
854
  --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
482
- --ntl-button-secondary-text-color: rgb(9.4118% 10.196% 10.98%);
483
- --ntl-card-bg-color: rgb(100% 100% 100%);
484
- --ntl-card-border-color: rgb(91.373% 92.157% 92.941%);
485
- --ntl-card-border-color-hover: rgb(81.961% 83.529% 85.49%);
486
- --ntl-code-bg-color: rgb(4.7059% 16.471% 16.471%);
487
- --ntl-color-bg: rgb(100% 100% 100%);
488
- --ntl-color-bg-2: rgb(96.471% 96.471% 96.863%);
489
- --ntl-color-bg-3: rgb(91.373% 92.157% 92.941%);
490
- --ntl-color-bg-inverse: rgb(81.961% 83.529% 85.49%);
855
+ --ntl-button-secondary-text-color: var(--ntl-neutral-800);
856
+ --ntl-card-bg-color: var(--ntl-neutral-000);
857
+ --ntl-card-border-color: var(--ntl-neutral-200);
858
+ --ntl-card-border-color-hover: var(--ntl-neutral-300);
859
+ --ntl-code-bg-color: var(--ntl-teal-900);
860
+ --ntl-color-bg: var(--ntl-neutral-000);
861
+ --ntl-color-bg-2: var(--ntl-neutral-100);
862
+ --ntl-color-bg-3: var(--ntl-neutral-200);
863
+ --ntl-color-bg-inverse: var(--ntl-neutral-300);
491
864
  --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
492
865
  --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
493
- --ntl-color-border-strong: rgb(81.961% 83.529% 85.49%);
866
+ --ntl-color-border-strong: var(--ntl-neutral-300);
494
867
  --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
495
- --ntl-color-brand-primary: rgb(18.039% 31.765% 92.941%);
496
- --ntl-color-brand-primary-hover: rgb(12.549% 21.176% 63.137%);
497
- --ntl-color-brand-secondary: rgb(7.8431% 84.706% 83.137%);
498
- --ntl-color-brand-secondary-hover: rgb(0.39216% 28.235% 27.843%);
499
- --ntl-color-disabled-bg: rgb(91.373% 92.157% 92.941%);
500
- --ntl-color-disabled-border: rgb(61.569% 65.49% 69.804%);
501
- --ntl-color-disabled-text: rgb(61.569% 65.49% 69.804%);
502
- --ntl-color-highlight-bg: rgb(88.627% 85.098% 96.863%);
503
- --ntl-color-highlight-border: rgb(46.667% 36.078% 90.588%);
504
- --ntl-color-highlight-text: rgb(46.667% 36.078% 90.588%);
505
- --ntl-color-icon: rgb(18.039% 31.765% 92.941%);
506
- --ntl-color-info-bg: rgb(80.392% 88.627% 100%);
507
- --ntl-color-info-border: rgb(19.216% 41.961% 95.686%);
508
- --ntl-color-info-text: rgb(19.216% 41.961% 95.686%);
509
- --ntl-color-invalid-bg: rgb(98.431% 82.745% 81.569%);
510
- --ntl-color-invalid-border: rgb(83.922% 15.294% 25.098%);
511
- --ntl-color-invalid-text: rgb(83.922% 15.294% 25.098%);
512
- --ntl-color-link: rgb(18.039% 31.765% 92.941%);
513
- --ntl-color-link-default: rgb(18.039% 31.765% 92.941%);
514
- --ntl-color-link-hover: rgb(12.549% 21.176% 63.137%);
515
- --ntl-color-link-inverse: rgb(50.196% 67.059% 98.039%);
868
+ --ntl-color-brand-primary: var(--ntl-blue-700);
869
+ --ntl-color-brand-primary-hover: var(--ntl-blue-800);
870
+ --ntl-color-brand-secondary: var(--ntl-teal-300);
871
+ --ntl-color-brand-secondary-hover: var(--ntl-teal-800);
872
+ --ntl-color-disabled-bg: var(--ntl-neutral-200);
873
+ --ntl-color-disabled-border: var(--ntl-neutral-400);
874
+ --ntl-color-disabled-text: var(--ntl-neutral-400);
875
+ --ntl-color-highlight-bg: var(--ntl-purple-100);
876
+ --ntl-color-highlight-border: var(--ntl-purple-600);
877
+ --ntl-color-highlight-text: var(--ntl-purple-600);
878
+ --ntl-color-icon: var(--ntl-blue-700);
879
+ --ntl-color-info-bg: var(--ntl-blue-100);
880
+ --ntl-color-info-border: var(--ntl-blue-600);
881
+ --ntl-color-info-text: var(--ntl-blue-600);
882
+ --ntl-color-invalid-bg: var(--ntl-red-100);
883
+ --ntl-color-invalid-border: var(--ntl-red-600);
884
+ --ntl-color-invalid-text: var(--ntl-red-600);
885
+ --ntl-color-link: var(--ntl-blue-700);
886
+ --ntl-color-link-default: var(--ntl-blue-700);
887
+ --ntl-color-link-hover: var(--ntl-blue-800);
888
+ --ntl-color-link-inverse: var(--ntl-blue-400);
516
889
  --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
517
- --ntl-color-logo-spark: rgb(1.9608% 74.118% 72.941%);
518
- --ntl-color-logo-type: rgb(0.39216% 28.235% 27.843%);
890
+ --ntl-color-logo-spark: var(--ntl-teal-400);
891
+ --ntl-color-logo-type: var(--ntl-teal-800);
519
892
  --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
520
- --ntl-color-success-bg: rgb(74.51% 97.647% 77.647%);
521
- --ntl-color-success-border: rgb(39.216% 84.706% 49.804%);
522
- --ntl-color-success-text: rgb(5.8824% 29.02% 12.941%);
523
- --ntl-color-text: rgb(20.784% 22.745% 24.314%);
524
- --ntl-color-text-accent: rgb(7.8431% 84.706% 83.137%);
525
- --ntl-color-text-default: rgb(20.784% 22.745% 24.314%);
526
- --ntl-color-text-inverse: rgb(96.471% 96.471% 96.863%);
527
- --ntl-color-text-weak: rgb(46.667% 50.196% 53.725%);
528
- --ntl-color-text-weaker: rgb(61.569% 65.49% 69.804%);
529
- --ntl-color-warning-bg: rgb(96.471% 87.843% 64.706%);
530
- --ntl-color-warning-border: rgb(98.431% 69.412% 23.922%);
531
- --ntl-color-warning-text: rgb(37.647% 20.392% 3.1373%);
532
- --ntl-eyebrow-text-color: rgb(18.039% 31.765% 92.941%);
893
+ --ntl-color-success-bg: var(--ntl-green-100);
894
+ --ntl-color-success-border: var(--ntl-green-300);
895
+ --ntl-color-success-text: var(--ntl-green-800);
896
+ --ntl-color-text: var(--ntl-neutral-700);
897
+ --ntl-color-text-accent: var(--ntl-teal-300);
898
+ --ntl-color-text-default: var(--ntl-neutral-700);
899
+ --ntl-color-text-inverse: var(--ntl-neutral-100);
900
+ --ntl-color-text-weak: var(--ntl-neutral-500);
901
+ --ntl-color-text-weaker: var(--ntl-neutral-400);
902
+ --ntl-color-warning-bg: var(--ntl-gold-100);
903
+ --ntl-color-warning-border: var(--ntl-gold-300);
904
+ --ntl-color-warning-text: var(--ntl-gold-800);
905
+ --ntl-eyebrow-text-color: var(--ntl-blue-700);
533
906
  --ntl-filter-invert: none;
534
- --ntl-heading-text-color: rgb(9.4118% 10.196% 10.98%);
535
- --ntl-neutral-000: rgb(100% 100% 100%);
536
- --ntl-neutral-100: rgb(96.471% 96.471% 96.863%);
537
- --ntl-neutral-200: rgb(91.373% 92.157% 92.941%);
538
- --ntl-neutral-300: rgb(81.961% 83.529% 85.49%);
539
- --ntl-neutral-400: rgb(61.569% 65.49% 69.804%);
540
- --ntl-neutral-500: rgb(46.667% 50.196% 53.725%);
541
- --ntl-neutral-600: rgb(32.941% 35.294% 38.039%);
542
- --ntl-neutral-700: rgb(20.784% 22.745% 24.314%);
543
- --ntl-neutral-800: rgb(9.4118% 10.196% 10.98%);
544
- --ntl-search-answer-message-color: rgb(91.373% 92.157% 92.941%);
545
- --ntl-search-back-btn-bg-color: rgb(96.471% 96.471% 96.863%);
546
- --ntl-search-bg-color: rgb(100% 100% 100%);
547
- --ntl-search-highlight-color: rgb(87.059% 100% 99.608%);
548
- --ntl-search-icon-color: rgb(61.569% 65.49% 69.804%);
549
- --ntl-search-input-bg-color: rgb(96.471% 96.471% 96.863%);
550
- --ntl-search-loading-color: rgb(0.39216% 41.176% 40.784%);
551
- --ntl-search-source-list-color: rgb(96.471% 96.471% 96.863%);
552
- --ntl-search-submit-btn-bg-color: rgb(19.608% 90.196% 88.627%);
553
- --ntl-search-user-message-color: rgb(87.059% 100% 99.608%);
554
- --ntl-tabbed-content-bg-color: rgb(100% 100% 100%);
555
- --ntl-tabbed-content-bg-color-active: rgb(100% 100% 100%);
556
- --ntl-tabbed-content-border-color: rgb(18.039% 31.765% 92.941%);
557
- --ntl-tabbed-content-code-bg-color: rgb(2.3529% 4.3137% 6.2745%);
558
- --ntl-tabbed-content-tab-text-color-active: rgb(18.039% 31.765% 92.941%);
559
- --ntl-testimonial-logo-hover-color: rgb(46.667% 50.196% 53.725%);
560
- --ntl-testimonial-logo-inactive-color: rgb(61.569% 65.49% 69.804%);
907
+ --ntl-heading-text-color: var(--ntl-neutral-800);
908
+ --ntl-neutral-000: var(--ntl-neutral-light-000);
909
+ --ntl-neutral-100: var(--ntl-neutral-light-100);
910
+ --ntl-neutral-200: var(--ntl-neutral-light-200);
911
+ --ntl-neutral-300: var(--ntl-neutral-light-300);
912
+ --ntl-neutral-400: var(--ntl-neutral-light-400);
913
+ --ntl-neutral-500: var(--ntl-neutral-light-500);
914
+ --ntl-neutral-600: var(--ntl-neutral-light-600);
915
+ --ntl-neutral-700: var(--ntl-neutral-light-700);
916
+ --ntl-neutral-800: var(--ntl-neutral-light-800);
917
+ --ntl-neutral-900: var(--ntl-neutral-light-900);
918
+ --ntl-search-answer-message-color: var(--ntl-neutral-200);
919
+ --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
920
+ --ntl-search-bg-color: var(--ntl-neutral-000);
921
+ --ntl-search-highlight-color: var(--ntl-teal-000);
922
+ --ntl-search-icon-color: var(--ntl-neutral-400);
923
+ --ntl-search-input-bg-color: var(--ntl-neutral-100);
924
+ --ntl-search-loading-color: var(--ntl-teal-700);
925
+ --ntl-search-source-list-color: var(--ntl-neutral-100);
926
+ --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
927
+ --ntl-search-user-message-color: var(--ntl-teal-000);
928
+ --ntl-tabbed-content-bg-color: var(--ntl-neutral-000);
929
+ --ntl-tabbed-content-bg-color-active: var(--ntl-neutral-000);
930
+ --ntl-tabbed-content-border-color: var(--ntl-color-icon);
931
+ --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
932
+ --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
933
+ --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
934
+ --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
561
935
  --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
562
936
  }