@netlify/spark-ui 1.18.0 → 1.20.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 (28) hide show
  1. package/README.md +66 -0
  2. package/package.json +3 -2
  3. package/packages/components/ActionArrow.astro +1 -1
  4. package/packages/components/ActionLink.astro +5 -5
  5. package/packages/components/Blockquote.astro +22 -22
  6. package/packages/components/Card.astro +20 -19
  7. package/packages/components/Eyebrow.astro +4 -4
  8. package/packages/components/HeadingBlock.astro +12 -12
  9. package/packages/components/PageHero.astro +4 -4
  10. package/packages/components/PageHeroGraphic.astro +9 -9
  11. package/packages/components/PageSection.astro +9 -9
  12. package/packages/components/Switchback.astro +14 -14
  13. package/packages/components/SwitchbackGroup.astro +1 -1
  14. package/packages/components/TabPanelGroup.astro +4 -4
  15. package/packages/components/TabbedContent.astro +13 -13
  16. package/packages/components/TabbedContentPanel.astro +14 -14
  17. package/packages/components/TestimonialSlider.astro +8 -8
  18. package/packages/components/Ticker.astro +1 -1
  19. package/packages/components/TrustBarTicker.astro +1 -1
  20. package/packages/components/TrustBarTickerItem.astro +5 -5
  21. package/packages/components/preact/AskNetlify/components/ActionBar.tsx +1 -1
  22. package/packages/styles/base.css +1 -0
  23. package/packages/styles/layout.compat.css +114 -0
  24. package/packages/styles/layout.css +35 -35
  25. package/packages/styles/tokens.compat.css +548 -0
  26. package/packages/styles/tokens.css +524 -440
  27. package/packages/styles/tokens.overrides.css +6 -0
  28. package/skills/landing-page.md +189 -0
package/packages/styles/tokens.compat.css ADDED
@@ -0,0 +1,548 @@
1
+ /* -------------------------------------------
2
+ * Backwards-compatible token aliases.
3
+ * Maps unprefixed names to --ntl- prefixed tokens.
4
+ * Autogenerated — DO NOT EDIT!
5
+ * -------------------------------------------
6
+ * Import this file alongside tokens.css for pages
7
+ * that still use unprefixed token names.
8
+ * Remove once migration is complete.
9
+ * -------------------------------------------
10
+ */
11
+
12
+ :root {
13
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
14
+ --badge-bg-color: var(--ntl-badge-bg-color);
15
+ --badge-border-color: var(--ntl-badge-border-color);
16
+ --badge-text-color: var(--ntl-badge-text-color);
17
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
18
+ --blue-000: var(--ntl-blue-000);
19
+ --blue-100: var(--ntl-blue-100);
20
+ --blue-200: var(--ntl-blue-200);
21
+ --blue-300: var(--ntl-blue-300);
22
+ --blue-400: var(--ntl-blue-400);
23
+ --blue-500: var(--ntl-blue-500);
24
+ --blue-600: var(--ntl-blue-600);
25
+ --blue-700: var(--ntl-blue-700);
26
+ --blue-800: var(--ntl-blue-800);
27
+ --blue-900: var(--ntl-blue-900);
28
+ --border-width-base: var(--ntl-border-width-base);
29
+ --border-width-heavy: var(--ntl-border-width-heavy);
30
+ --border-width-thick: var(--ntl-border-width-thick);
31
+ --border-width-thin: var(--ntl-border-width-thin);
32
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
33
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
34
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
35
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
36
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
37
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
38
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
39
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
40
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
41
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
42
+ --card-bg-color: var(--ntl-card-bg-color);
43
+ --card-border-color: var(--ntl-card-border-color);
44
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
45
+ --code-bg-color: var(--ntl-code-bg-color);
46
+ --color-bg: var(--ntl-color-bg);
47
+ --color-bg-2: var(--ntl-color-bg-2);
48
+ --color-bg-3: var(--ntl-color-bg-3);
49
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
50
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
51
+ --color-border-default: var(--ntl-color-border-default);
52
+ --color-border-strong: var(--ntl-color-border-strong);
53
+ --color-border-subtle: var(--ntl-color-border-subtle);
54
+ --color-brand-primary: var(--ntl-color-brand-primary);
55
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
56
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
57
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
58
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
59
+ --color-disabled-border: var(--ntl-color-disabled-border);
60
+ --color-disabled-text: var(--ntl-color-disabled-text);
61
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
62
+ --color-highlight-border: var(--ntl-color-highlight-border);
63
+ --color-highlight-text: var(--ntl-color-highlight-text);
64
+ --color-icon: var(--ntl-color-icon);
65
+ --color-info-bg: var(--ntl-color-info-bg);
66
+ --color-info-border: var(--ntl-color-info-border);
67
+ --color-info-text: var(--ntl-color-info-text);
68
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
69
+ --color-invalid-border: var(--ntl-color-invalid-border);
70
+ --color-invalid-text: var(--ntl-color-invalid-text);
71
+ --color-link: var(--ntl-color-link);
72
+ --color-link-default: var(--ntl-color-link-default);
73
+ --color-link-hover: var(--ntl-color-link-hover);
74
+ --color-link-inverse: var(--ntl-color-link-inverse);
75
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
76
+ --color-logo-spark: var(--ntl-color-logo-spark);
77
+ --color-logo-type: var(--ntl-color-logo-type);
78
+ --color-stroke: var(--ntl-color-stroke);
79
+ --color-success-bg: var(--ntl-color-success-bg);
80
+ --color-success-border: var(--ntl-color-success-border);
81
+ --color-success-text: var(--ntl-color-success-text);
82
+ --color-text: var(--ntl-color-text);
83
+ --color-text-accent: var(--ntl-color-text-accent);
84
+ --color-text-default: var(--ntl-color-text-default);
85
+ --color-text-inverse: var(--ntl-color-text-inverse);
86
+ --color-text-weak: var(--ntl-color-text-weak);
87
+ --color-text-weaker: var(--ntl-color-text-weaker);
88
+ --color-warning-bg: var(--ntl-color-warning-bg);
89
+ --color-warning-border: var(--ntl-color-warning-border);
90
+ --color-warning-text: var(--ntl-color-warning-text);
91
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
92
+ --focus-outline-offset: var(--ntl-focus-outline-offset);
93
+ --focus-outline-width: var(--ntl-focus-outline-width);
94
+ --font-family-display: var(--ntl-font-family-display);
95
+ --font-family-mono: var(--ntl-font-family-mono);
96
+ --font-family-text: var(--ntl-font-family-text);
97
+ --font-size-display-2xl: var(--ntl-font-size-display-2xl);
98
+ --font-size-display-2xs: var(--ntl-font-size-display-2xs);
99
+ --font-size-display-3xl: var(--ntl-font-size-display-3xl);
100
+ --font-size-display-4xl: var(--ntl-font-size-display-4xl);
101
+ --font-size-display-lg: var(--ntl-font-size-display-lg);
102
+ --font-size-display-md: var(--ntl-font-size-display-md);
103
+ --font-size-display-sm: var(--ntl-font-size-display-sm);
104
+ --font-size-display-xl: var(--ntl-font-size-display-xl);
105
+ --font-size-display-xs: var(--ntl-font-size-display-xs);
106
+ --font-size-text-lg: var(--ntl-font-size-text-lg);
107
+ --font-size-text-md: var(--ntl-font-size-text-md);
108
+ --font-size-text-sm: var(--ntl-font-size-text-sm);
109
+ --font-size-text-xl: var(--ntl-font-size-text-xl);
110
+ --font-size-text-xs: var(--ntl-font-size-text-xs);
111
+ --font-weight-bold: var(--ntl-font-weight-bold);
112
+ --font-weight-extrabold: var(--ntl-font-weight-extrabold);
113
+ --font-weight-medium: var(--ntl-font-weight-medium);
114
+ --font-weight-regular: var(--ntl-font-weight-regular);
115
+ --font-weight-semibold: var(--ntl-font-weight-semibold);
116
+ --gold-000: var(--ntl-gold-000);
117
+ --gold-100: var(--ntl-gold-100);
118
+ --gold-200: var(--ntl-gold-200);
119
+ --gold-300: var(--ntl-gold-300);
120
+ --gold-400: var(--ntl-gold-400);
121
+ --gold-500: var(--ntl-gold-500);
122
+ --gold-600: var(--ntl-gold-600);
123
+ --gold-700: var(--ntl-gold-700);
124
+ --gold-800: var(--ntl-gold-800);
125
+ --gold-900: var(--ntl-gold-900);
126
+ --green-000: var(--ntl-green-000);
127
+ --green-100: var(--ntl-green-100);
128
+ --green-200: var(--ntl-green-200);
129
+ --green-300: var(--ntl-green-300);
130
+ --green-400: var(--ntl-green-400);
131
+ --green-500: var(--ntl-green-500);
132
+ --green-600: var(--ntl-green-600);
133
+ --green-700: var(--ntl-green-700);
134
+ --green-800: var(--ntl-green-800);
135
+ --green-900: var(--ntl-green-900);
136
+ --heading-text-color: var(--ntl-heading-text-color);
137
+ --line-height-heading: var(--ntl-line-height-heading);
138
+ --line-height-loose: var(--ntl-line-height-loose);
139
+ --line-height-none: var(--ntl-line-height-none);
140
+ --line-height-relaxed: var(--ntl-line-height-relaxed);
141
+ --line-height-snug: var(--ntl-line-height-snug);
142
+ --line-height-text: var(--ntl-line-height-text);
143
+ --line-height-tight: var(--ntl-line-height-tight);
144
+ --motion-duration-base: var(--ntl-motion-duration-base);
145
+ --motion-duration-fast: var(--ntl-motion-duration-fast);
146
+ --motion-duration-slow: var(--ntl-motion-duration-slow);
147
+ --motion-duration-slower: var(--ntl-motion-duration-slower);
148
+ --motion-easing-default: var(--ntl-motion-easing-default);
149
+ --motion-easing-in: var(--ntl-motion-easing-in);
150
+ --motion-easing-out: var(--ntl-motion-easing-out);
151
+ --motion-easing-spring: var(--ntl-motion-easing-spring);
152
+ --neutral-000: var(--ntl-neutral-000);
153
+ --neutral-100: var(--ntl-neutral-100);
154
+ --neutral-200: var(--ntl-neutral-200);
155
+ --neutral-300: var(--ntl-neutral-300);
156
+ --neutral-400: var(--ntl-neutral-400);
157
+ --neutral-500: var(--ntl-neutral-500);
158
+ --neutral-600: var(--ntl-neutral-600);
159
+ --neutral-700: var(--ntl-neutral-700);
160
+ --neutral-800: var(--ntl-neutral-800);
161
+ --neutral-900: var(--ntl-neutral-900);
162
+ --page-content-max-width: var(--ntl-page-content-max-width);
163
+ --page-gutter: var(--ntl-page-gutter);
164
+ --pink-000: var(--ntl-pink-000);
165
+ --pink-100: var(--ntl-pink-100);
166
+ --pink-200: var(--ntl-pink-200);
167
+ --pink-300: var(--ntl-pink-300);
168
+ --pink-400: var(--ntl-pink-400);
169
+ --pink-500: var(--ntl-pink-500);
170
+ --pink-600: var(--ntl-pink-600);
171
+ --pink-700: var(--ntl-pink-700);
172
+ --pink-800: var(--ntl-pink-800);
173
+ --pink-900: var(--ntl-pink-900);
174
+ --purple-000: var(--ntl-purple-000);
175
+ --purple-100: var(--ntl-purple-100);
176
+ --purple-200: var(--ntl-purple-200);
177
+ --purple-300: var(--ntl-purple-300);
178
+ --purple-400: var(--ntl-purple-400);
179
+ --purple-500: var(--ntl-purple-500);
180
+ --purple-600: var(--ntl-purple-600);
181
+ --purple-700: var(--ntl-purple-700);
182
+ --purple-800: var(--ntl-purple-800);
183
+ --purple-900: var(--ntl-purple-900);
184
+ --radius-2xl: var(--ntl-radius-2xl);
185
+ --radius-l: var(--ntl-radius-l);
186
+ --radius-m: var(--ntl-radius-m);
187
+ --radius-pill: var(--ntl-radius-pill);
188
+ --radius-s: var(--ntl-radius-s);
189
+ --radius-xl: var(--ntl-radius-xl);
190
+ --radius-xs: var(--ntl-radius-xs);
191
+ --red-000: var(--ntl-red-000);
192
+ --red-100: var(--ntl-red-100);
193
+ --red-200: var(--ntl-red-200);
194
+ --red-300: var(--ntl-red-300);
195
+ --red-400: var(--ntl-red-400);
196
+ --red-500: var(--ntl-red-500);
197
+ --red-600: var(--ntl-red-600);
198
+ --red-700: var(--ntl-red-700);
199
+ --red-800: var(--ntl-red-800);
200
+ --red-900: var(--ntl-red-900);
201
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
202
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
203
+ --search-bg-color: var(--ntl-search-bg-color);
204
+ --search-highlight-color: var(--ntl-search-highlight-color);
205
+ --search-icon-color: var(--ntl-search-icon-color);
206
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
207
+ --search-loading-color: var(--ntl-search-loading-color);
208
+ --search-source-list-color: var(--ntl-search-source-list-color);
209
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
210
+ --search-user-message-color: var(--ntl-search-user-message-color);
211
+ --shadow-deep: var(--ntl-shadow-deep);
212
+ --shadow-heavy: var(--ntl-shadow-heavy);
213
+ --shadow-hover: var(--ntl-shadow-hover);
214
+ --shadow-light: var(--ntl-shadow-light);
215
+ --space-0: var(--ntl-space-0);
216
+ --space-2xl: var(--ntl-space-2xl);
217
+ --space-2xs: var(--ntl-space-2xs);
218
+ --space-3xl: var(--ntl-space-3xl);
219
+ --space-3xs: var(--ntl-space-3xs);
220
+ --space-4xl: var(--ntl-space-4xl);
221
+ --space-l: var(--ntl-space-l);
222
+ --space-m: var(--ntl-space-m);
223
+ --space-s: var(--ntl-space-s);
224
+ --space-xl: var(--ntl-space-xl);
225
+ --space-xs: var(--ntl-space-xs);
226
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
227
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
228
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
229
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
230
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
231
+ --teal-000: var(--ntl-teal-000);
232
+ --teal-100: var(--ntl-teal-100);
233
+ --teal-200: var(--ntl-teal-200);
234
+ --teal-300: var(--ntl-teal-300);
235
+ --teal-400: var(--ntl-teal-400);
236
+ --teal-500: var(--ntl-teal-500);
237
+ --teal-600: var(--ntl-teal-600);
238
+ --teal-700: var(--ntl-teal-700);
239
+ --teal-800: var(--ntl-teal-800);
240
+ --teal-900: var(--ntl-teal-900);
241
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
242
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
243
+ --text-underline-offset: var(--ntl-text-underline-offset);
244
+ --title-text-color: var(--ntl-title-text-color);
245
+ --tracking-tight: var(--ntl-tracking-tight);
246
+ --z-index-base: var(--ntl-z-index-base);
247
+ --z-index-modal: var(--ntl-z-index-modal);
248
+ --z-index-overlay: var(--ntl-z-index-overlay);
249
+ --z-index-raised: var(--ntl-z-index-raised);
250
+ --z-index-sticky: var(--ntl-z-index-sticky);
251
+ --z-index-toast: var(--ntl-z-index-toast);
252
+ --z-index-tooltip: var(--ntl-z-index-tooltip);
253
+ }
254
+
255
+ @media (prefers-color-scheme: dark) {
256
+ :root {
257
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
258
+ --badge-bg-color: var(--ntl-badge-bg-color);
259
+ --badge-border-color: var(--ntl-badge-border-color);
260
+ --badge-text-color: var(--ntl-badge-text-color);
261
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
262
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
263
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
264
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
265
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
266
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
267
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
268
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
269
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
270
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
271
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
272
+ --card-bg-color: var(--ntl-card-bg-color);
273
+ --card-border-color: var(--ntl-card-border-color);
274
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
275
+ --code-bg-color: var(--ntl-code-bg-color);
276
+ --color-bg: var(--ntl-color-bg);
277
+ --color-bg-2: var(--ntl-color-bg-2);
278
+ --color-bg-3: var(--ntl-color-bg-3);
279
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
280
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
281
+ --color-border-default: var(--ntl-color-border-default);
282
+ --color-border-strong: var(--ntl-color-border-strong);
283
+ --color-border-subtle: var(--ntl-color-border-subtle);
284
+ --color-brand-primary: var(--ntl-color-brand-primary);
285
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
286
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
287
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
288
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
289
+ --color-disabled-border: var(--ntl-color-disabled-border);
290
+ --color-disabled-text: var(--ntl-color-disabled-text);
291
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
292
+ --color-highlight-border: var(--ntl-color-highlight-border);
293
+ --color-highlight-text: var(--ntl-color-highlight-text);
294
+ --color-icon: var(--ntl-color-icon);
295
+ --color-info-bg: var(--ntl-color-info-bg);
296
+ --color-info-border: var(--ntl-color-info-border);
297
+ --color-info-text: var(--ntl-color-info-text);
298
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
299
+ --color-invalid-border: var(--ntl-color-invalid-border);
300
+ --color-invalid-text: var(--ntl-color-invalid-text);
301
+ --color-link: var(--ntl-color-link);
302
+ --color-link-default: var(--ntl-color-link-default);
303
+ --color-link-hover: var(--ntl-color-link-hover);
304
+ --color-link-inverse: var(--ntl-color-link-inverse);
305
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
306
+ --color-logo-spark: var(--ntl-color-logo-spark);
307
+ --color-logo-type: var(--ntl-color-logo-type);
308
+ --color-stroke: var(--ntl-color-stroke);
309
+ --color-success-bg: var(--ntl-color-success-bg);
310
+ --color-success-border: var(--ntl-color-success-border);
311
+ --color-success-text: var(--ntl-color-success-text);
312
+ --color-text: var(--ntl-color-text);
313
+ --color-text-accent: var(--ntl-color-text-accent);
314
+ --color-text-default: var(--ntl-color-text-default);
315
+ --color-text-inverse: var(--ntl-color-text-inverse);
316
+ --color-text-weak: var(--ntl-color-text-weak);
317
+ --color-text-weaker: var(--ntl-color-text-weaker);
318
+ --color-warning-bg: var(--ntl-color-warning-bg);
319
+ --color-warning-border: var(--ntl-color-warning-border);
320
+ --color-warning-text: var(--ntl-color-warning-text);
321
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
322
+ --filter-invert: var(--ntl-filter-invert);
323
+ --heading-text-color: var(--ntl-heading-text-color);
324
+ --neutral-000: var(--ntl-neutral-000);
325
+ --neutral-100: var(--ntl-neutral-100);
326
+ --neutral-200: var(--ntl-neutral-200);
327
+ --neutral-300: var(--ntl-neutral-300);
328
+ --neutral-400: var(--ntl-neutral-400);
329
+ --neutral-500: var(--ntl-neutral-500);
330
+ --neutral-600: var(--ntl-neutral-600);
331
+ --neutral-700: var(--ntl-neutral-700);
332
+ --neutral-800: var(--ntl-neutral-800);
333
+ --neutral-900: var(--ntl-neutral-900);
334
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
335
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
336
+ --search-bg-color: var(--ntl-search-bg-color);
337
+ --search-highlight-color: var(--ntl-search-highlight-color);
338
+ --search-icon-color: var(--ntl-search-icon-color);
339
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
340
+ --search-loading-color: var(--ntl-search-loading-color);
341
+ --search-source-list-color: var(--ntl-search-source-list-color);
342
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
343
+ --search-user-message-color: var(--ntl-search-user-message-color);
344
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
345
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
346
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
347
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
348
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
349
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
350
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
351
+ --title-text-color: var(--ntl-title-text-color);
352
+ }
353
+ }
354
+
355
+ [data-theme="dark"] {
356
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
357
+ --badge-bg-color: var(--ntl-badge-bg-color);
358
+ --badge-border-color: var(--ntl-badge-border-color);
359
+ --badge-text-color: var(--ntl-badge-text-color);
360
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
361
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
362
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
363
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
364
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
365
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
366
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
367
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
368
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
369
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
370
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
371
+ --card-bg-color: var(--ntl-card-bg-color);
372
+ --card-border-color: var(--ntl-card-border-color);
373
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
374
+ --code-bg-color: var(--ntl-code-bg-color);
375
+ --color-bg: var(--ntl-color-bg);
376
+ --color-bg-2: var(--ntl-color-bg-2);
377
+ --color-bg-3: var(--ntl-color-bg-3);
378
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
379
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
380
+ --color-border-default: var(--ntl-color-border-default);
381
+ --color-border-strong: var(--ntl-color-border-strong);
382
+ --color-border-subtle: var(--ntl-color-border-subtle);
383
+ --color-brand-primary: var(--ntl-color-brand-primary);
384
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
385
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
386
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
387
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
388
+ --color-disabled-border: var(--ntl-color-disabled-border);
389
+ --color-disabled-text: var(--ntl-color-disabled-text);
390
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
391
+ --color-highlight-border: var(--ntl-color-highlight-border);
392
+ --color-highlight-text: var(--ntl-color-highlight-text);
393
+ --color-icon: var(--ntl-color-icon);
394
+ --color-info-bg: var(--ntl-color-info-bg);
395
+ --color-info-border: var(--ntl-color-info-border);
396
+ --color-info-text: var(--ntl-color-info-text);
397
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
398
+ --color-invalid-border: var(--ntl-color-invalid-border);
399
+ --color-invalid-text: var(--ntl-color-invalid-text);
400
+ --color-link: var(--ntl-color-link);
401
+ --color-link-default: var(--ntl-color-link-default);
402
+ --color-link-hover: var(--ntl-color-link-hover);
403
+ --color-link-inverse: var(--ntl-color-link-inverse);
404
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
405
+ --color-logo-spark: var(--ntl-color-logo-spark);
406
+ --color-logo-type: var(--ntl-color-logo-type);
407
+ --color-stroke: var(--ntl-color-stroke);
408
+ --color-success-bg: var(--ntl-color-success-bg);
409
+ --color-success-border: var(--ntl-color-success-border);
410
+ --color-success-text: var(--ntl-color-success-text);
411
+ --color-text: var(--ntl-color-text);
412
+ --color-text-accent: var(--ntl-color-text-accent);
413
+ --color-text-default: var(--ntl-color-text-default);
414
+ --color-text-inverse: var(--ntl-color-text-inverse);
415
+ --color-text-weak: var(--ntl-color-text-weak);
416
+ --color-text-weaker: var(--ntl-color-text-weaker);
417
+ --color-warning-bg: var(--ntl-color-warning-bg);
418
+ --color-warning-border: var(--ntl-color-warning-border);
419
+ --color-warning-text: var(--ntl-color-warning-text);
420
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
421
+ --filter-invert: var(--ntl-filter-invert);
422
+ --heading-text-color: var(--ntl-heading-text-color);
423
+ --neutral-000: var(--ntl-neutral-000);
424
+ --neutral-100: var(--ntl-neutral-100);
425
+ --neutral-200: var(--ntl-neutral-200);
426
+ --neutral-300: var(--ntl-neutral-300);
427
+ --neutral-400: var(--ntl-neutral-400);
428
+ --neutral-500: var(--ntl-neutral-500);
429
+ --neutral-600: var(--ntl-neutral-600);
430
+ --neutral-700: var(--ntl-neutral-700);
431
+ --neutral-800: var(--ntl-neutral-800);
432
+ --neutral-900: var(--ntl-neutral-900);
433
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
434
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
435
+ --search-bg-color: var(--ntl-search-bg-color);
436
+ --search-highlight-color: var(--ntl-search-highlight-color);
437
+ --search-icon-color: var(--ntl-search-icon-color);
438
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
439
+ --search-loading-color: var(--ntl-search-loading-color);
440
+ --search-source-list-color: var(--ntl-search-source-list-color);
441
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
442
+ --search-user-message-color: var(--ntl-search-user-message-color);
443
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
444
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
445
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
446
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
447
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
448
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
449
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
450
+ --title-text-color: var(--ntl-title-text-color);
451
+ }
452
+
453
+ [data-theme="light"] {
454
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
455
+ --badge-bg-color: var(--ntl-badge-bg-color);
456
+ --badge-border-color: var(--ntl-badge-border-color);
457
+ --badge-text-color: var(--ntl-badge-text-color);
458
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
459
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
460
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
461
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
462
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
463
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
464
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
465
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
466
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
467
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
468
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
469
+ --card-bg-color: var(--ntl-card-bg-color);
470
+ --card-border-color: var(--ntl-card-border-color);
471
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
472
+ --code-bg-color: var(--ntl-code-bg-color);
473
+ --color-bg: var(--ntl-color-bg);
474
+ --color-bg-2: var(--ntl-color-bg-2);
475
+ --color-bg-3: var(--ntl-color-bg-3);
476
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
477
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
478
+ --color-border-default: var(--ntl-color-border-default);
479
+ --color-border-strong: var(--ntl-color-border-strong);
480
+ --color-border-subtle: var(--ntl-color-border-subtle);
481
+ --color-brand-primary: var(--ntl-color-brand-primary);
482
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
483
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
484
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
485
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
486
+ --color-disabled-border: var(--ntl-color-disabled-border);
487
+ --color-disabled-text: var(--ntl-color-disabled-text);
488
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
489
+ --color-highlight-border: var(--ntl-color-highlight-border);
490
+ --color-highlight-text: var(--ntl-color-highlight-text);
491
+ --color-icon: var(--ntl-color-icon);
492
+ --color-info-bg: var(--ntl-color-info-bg);
493
+ --color-info-border: var(--ntl-color-info-border);
494
+ --color-info-text: var(--ntl-color-info-text);
495
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
496
+ --color-invalid-border: var(--ntl-color-invalid-border);
497
+ --color-invalid-text: var(--ntl-color-invalid-text);
498
+ --color-link: var(--ntl-color-link);
499
+ --color-link-default: var(--ntl-color-link-default);
500
+ --color-link-hover: var(--ntl-color-link-hover);
501
+ --color-link-inverse: var(--ntl-color-link-inverse);
502
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
503
+ --color-logo-spark: var(--ntl-color-logo-spark);
504
+ --color-logo-type: var(--ntl-color-logo-type);
505
+ --color-stroke: var(--ntl-color-stroke);
506
+ --color-success-bg: var(--ntl-color-success-bg);
507
+ --color-success-border: var(--ntl-color-success-border);
508
+ --color-success-text: var(--ntl-color-success-text);
509
+ --color-text: var(--ntl-color-text);
510
+ --color-text-accent: var(--ntl-color-text-accent);
511
+ --color-text-default: var(--ntl-color-text-default);
512
+ --color-text-inverse: var(--ntl-color-text-inverse);
513
+ --color-text-weak: var(--ntl-color-text-weak);
514
+ --color-text-weaker: var(--ntl-color-text-weaker);
515
+ --color-warning-bg: var(--ntl-color-warning-bg);
516
+ --color-warning-border: var(--ntl-color-warning-border);
517
+ --color-warning-text: var(--ntl-color-warning-text);
518
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
519
+ --filter-invert: var(--ntl-filter-invert);
520
+ --heading-text-color: var(--ntl-heading-text-color);
521
+ --neutral-000: var(--ntl-neutral-000);
522
+ --neutral-100: var(--ntl-neutral-100);
523
+ --neutral-200: var(--ntl-neutral-200);
524
+ --neutral-300: var(--ntl-neutral-300);
525
+ --neutral-400: var(--ntl-neutral-400);
526
+ --neutral-500: var(--ntl-neutral-500);
527
+ --neutral-600: var(--ntl-neutral-600);
528
+ --neutral-700: var(--ntl-neutral-700);
529
+ --neutral-800: var(--ntl-neutral-800);
530
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
531
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
532
+ --search-bg-color: var(--ntl-search-bg-color);
533
+ --search-highlight-color: var(--ntl-search-highlight-color);
534
+ --search-icon-color: var(--ntl-search-icon-color);
535
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
536
+ --search-loading-color: var(--ntl-search-loading-color);
537
+ --search-source-list-color: var(--ntl-search-source-list-color);
538
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
539
+ --search-user-message-color: var(--ntl-search-user-message-color);
540
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
541
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
542
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
543
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
544
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
545
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
546
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
547
+ --title-text-color: var(--ntl-title-text-color);
548
+ }