@netlify/spark-ui 2.3.0 → 2.4.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 (37) hide show
  1. package/README.md +14 -3
  2. package/dist/assets/AskNetlify.css +1 -1
  3. package/dist/assets/DropZone.css +1 -1
  4. package/dist/assets/Popover.css +1 -1
  5. package/dist/assets/SearchLink.css +1 -1
  6. package/dist/assets/SearchModal.css +1 -1
  7. package/package.json +4 -3
  8. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2 +0 -0
  9. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2 +0 -0
  10. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2 +0 -0
  11. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2 +0 -0
  12. package/packages/assets/fonts/ibm-plex-mono/OFL.txt +93 -0
  13. package/packages/components/Blockquote.astro +1 -1
  14. package/packages/components/Card.astro +2 -2
  15. package/packages/components/Eyebrow.astro +1 -1
  16. package/packages/components/FilterableGrid/FilterableGrid.astro +4 -4
  17. package/packages/components/HeadingBlock.astro +1 -1
  18. package/packages/components/PageHero.astro +1 -1
  19. package/packages/components/PageHeroGraphic.astro +1 -1
  20. package/packages/components/PageSection.astro +1 -1
  21. package/packages/components/TabbedContent.astro +3 -3
  22. package/packages/components/TrustBarTickerItem.astro +1 -1
  23. package/packages/components/preact/AskNetlify/AskNetlify.css +4 -4
  24. package/packages/components/preact/DropZone/DropZone.css +4 -4
  25. package/packages/components/preact/Popover/Popover.css +5 -5
  26. package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +5 -5
  27. package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +6 -6
  28. package/packages/styles/app/color.rgb.css +176 -0
  29. package/packages/styles/buttons.css +1 -1
  30. package/packages/styles/code-block.css +2 -2
  31. package/packages/styles/fonts.css +32 -4
  32. package/packages/styles/layout.css +2 -2
  33. package/packages/styles/tokens.compat.css +124 -1
  34. package/packages/styles/tokens.css +756 -205
  35. package/packages/tokens/app.d.ts +176 -0
  36. package/packages/tokens/app.js +176 -0
  37. package/skills/landing-page.md +15 -10
package/packages/styles/app/color.rgb.css CHANGED
@@ -31,6 +31,182 @@
31
31
  --colorRgbFacetsGreen700: 26 107 52;
32
32
  --colorRgbFacetsGreen800: 15 74 33;
33
33
  --colorRgbFacetsGreen900: 21 42 25;
34
+ --colorRgbHuesBlueBlack000: 244 247 249;
35
+ --colorRgbHuesBlueBlack100: 195 203 206;
36
+ --colorRgbHuesBlueBlack200: 147 158 163;
37
+ --colorRgbHuesBlueBlack300: 100 115 120;
38
+ --colorRgbHuesBlueBlack400: 55 72 78;
39
+ --colorRgbHuesBlueBlack500: 7 27 34;
40
+ --colorRgbHuesBlueBlack600: 4 21 27;
41
+ --colorRgbHuesBlueBlack700: 3 15 20;
42
+ --colorRgbHuesBlueBlack800: 1 9 13;
43
+ --colorRgbHuesBlueBlack900: 1 5 7;
44
+ --colorRgbHuesCobalt000: 243 247 255;
45
+ --colorRgbHuesCobalt100: 204 222 255;
46
+ --colorRgbHuesCobalt200: 164 196 255;
47
+ --colorRgbHuesCobalt300: 122 168 254;
48
+ --colorRgbHuesCobalt400: 77 137 253;
49
+ --colorRgbHuesCobalt500: 6 94 255;
50
+ --colorRgbHuesCobalt600: 0 73 208;
51
+ --colorRgbHuesCobalt700: 0 54 160;
52
+ --colorRgbHuesCobalt800: 0 37 115;
53
+ --colorRgbHuesCobalt900: 0 20 73;
54
+ --colorRgbHuesDeepTeal000: 238 249 255;
55
+ --colorRgbHuesDeepTeal100: 199 225 240;
56
+ --colorRgbHuesDeepTeal200: 161 201 223;
57
+ --colorRgbHuesDeepTeal300: 121 175 205;
58
+ --colorRgbHuesDeepTeal400: 78 149 186;
59
+ --colorRgbHuesDeepTeal500: 10 119 162;
60
+ --colorRgbHuesDeepTeal600: 1 95 131;
61
+ --colorRgbHuesDeepTeal700: 1 72 100;
62
+ --colorRgbHuesDeepTeal800: 1 50 71;
63
+ --colorRgbHuesDeepTeal900: 0 30 44;
64
+ --colorRgbHuesGold000: 253 246 232;
65
+ --colorRgbHuesGold100: 254 238 209;
66
+ --colorRgbHuesGold200: 255 231 185;
67
+ --colorRgbHuesGold300: 255 222 160;
68
+ --colorRgbHuesGold400: 255 213 132;
69
+ --colorRgbHuesGold500: 253 203 101;
70
+ --colorRgbHuesGold600: 195 153 64;
71
+ --colorRgbHuesGold700: 140 105 25;
72
+ --colorRgbHuesGold800: 87 62 2;
73
+ --colorRgbHuesGold900: 37 24 0;
74
+ --colorRgbHuesGray000: 253 253 253;
75
+ --colorRgbHuesGray100: 243 244 244;
76
+ --colorRgbHuesGray200: 234 237 238;
77
+ --colorRgbHuesGray300: 225 230 232;
78
+ --colorRgbHuesGray400: 216 224 227;
79
+ --colorRgbHuesGray500: 207 217 221;
80
+ --colorRgbHuesGray600: 163 176 181;
81
+ --colorRgbHuesGray700: 122 137 143;
82
+ --colorRgbHuesGray800: 82 100 106;
83
+ --colorRgbHuesGray900: 45 65 72;
84
+ --colorRgbHuesGreen000: 236 252 239;
85
+ --colorRgbHuesGreen100: 207 240 214;
86
+ --colorRgbHuesGreen200: 176 227 189;
87
+ --colorRgbHuesGreen300: 144 214 163;
88
+ --colorRgbHuesGreen400: 109 199 136;
89
+ --colorRgbHuesGreen500: 63 182 107;
90
+ --colorRgbHuesGreen600: 36 142 79;
91
+ --colorRgbHuesGreen700: 3 105 52;
92
+ --colorRgbHuesGreen800: 1 68 31;
93
+ --colorRgbHuesGreen900: 0 34 12;
94
+ --colorRgbHuesLilac000: 247 245 255;
95
+ --colorRgbHuesLilac100: 236 234 255;
96
+ --colorRgbHuesLilac200: 226 222 255;
97
+ --colorRgbHuesLilac300: 216 210 255;
98
+ --colorRgbHuesLilac400: 205 196 255;
99
+ --colorRgbHuesLilac500: 193 181 255;
100
+ --colorRgbHuesLilac600: 147 137 199;
101
+ --colorRgbHuesLilac700: 104 95 146;
102
+ --colorRgbHuesLilac800: 64 56 96;
103
+ --colorRgbHuesLilac900: 27 21 51;
104
+ --colorRgbHuesLime000: 242 251 229;
105
+ --colorRgbHuesLime100: 231 250 202;
106
+ --colorRgbHuesLime200: 221 248 174;
107
+ --colorRgbHuesLime300: 210 245 144;
108
+ --colorRgbHuesLime400: 199 242 109;
109
+ --colorRgbHuesLime500: 187 238 60;
110
+ --colorRgbHuesLime600: 139 181 3;
111
+ --colorRgbHuesLime700: 96 127 7;
112
+ --colorRgbHuesLime800: 56 76 0;
113
+ --colorRgbHuesLime900: 21 31 0;
114
+ --colorRgbHuesOffBlack: 19 22 25;
115
+ --colorRgbHuesOrange000: 255 244 240;
116
+ --colorRgbHuesOrange100: 255 224 213;
117
+ --colorRgbHuesOrange200: 255 202 184;
118
+ --colorRgbHuesOrange300: 254 179 153;
119
+ --colorRgbHuesOrange400: 255 152 116;
120
+ --colorRgbHuesOrange500: 255 117 66;
121
+ --colorRgbHuesOrange600: 202 85 40;
122
+ --colorRgbHuesOrange700: 152 54 12;
123
+ --colorRgbHuesOrange800: 101 30 0;
124
+ --colorRgbHuesOrange900: 52 11 0;
125
+ --colorRgbHuesPeach000: 255 245 237;
126
+ --colorRgbHuesPeach100: 255 235 220;
127
+ --colorRgbHuesPeach200: 255 224 203;
128
+ --colorRgbHuesPeach300: 255 214 184;
129
+ --colorRgbHuesPeach400: 255 202 163;
130
+ --colorRgbHuesPeach500: 255 188 138;
131
+ --colorRgbHuesPeach600: 198 141 98;
132
+ --colorRgbHuesPeach700: 143 97 61;
133
+ --colorRgbHuesPeach800: 92 56 26;
134
+ --colorRgbHuesPeach900: 44 19 0;
135
+ --colorRgbHuesPink000: 255 243 247;
136
+ --colorRgbHuesPink100: 255 217 230;
137
+ --colorRgbHuesPink200: 254 190 212;
138
+ --colorRgbHuesPink300: 255 159 195;
139
+ --colorRgbHuesPink400: 254 123 176;
140
+ --colorRgbHuesPink500: 255 61 156;
141
+ --colorRgbHuesPink600: 204 34 121;
142
+ --colorRgbHuesPink700: 154 4 88;
143
+ --colorRgbHuesPink800: 102 2 57;
144
+ --colorRgbHuesPink900: 55 0 28;
145
+ --colorRgbHuesPlum000: 253 243 254;
146
+ --colorRgbHuesPlum100: 224 204 226;
147
+ --colorRgbHuesPlum200: 195 166 198;
148
+ --colorRgbHuesPlum300: 165 127 169;
149
+ --colorRgbHuesPlum400: 133 88 139;
150
+ --colorRgbHuesPlum500: 97 45 104;
151
+ --colorRgbHuesPlum600: 80 36 86;
152
+ --colorRgbHuesPlum700: 64 26 69;
153
+ --colorRgbHuesPlum800: 48 18 53;
154
+ --colorRgbHuesPlum900: 34 9 37;
155
+ --colorRgbHuesPurple000: 244 246 255;
156
+ --colorRgbHuesPurple100: 210 219 254;
157
+ --colorRgbHuesPurple200: 176 190 254;
158
+ --colorRgbHuesPurple300: 142 159 254;
159
+ --colorRgbHuesPurple400: 109 125 253;
160
+ --colorRgbHuesPurple500: 78 73 255;
161
+ --colorRgbHuesPurple600: 61 54 211;
162
+ --colorRgbHuesPurple700: 45 35 169;
163
+ --colorRgbHuesPurple800: 30 16 128;
164
+ --colorRgbHuesPurple900: 17 0 89;
165
+ --colorRgbHuesRed000: 255 244 243;
166
+ --colorRgbHuesRed100: 255 217 213;
167
+ --colorRgbHuesRed200: 254 189 183;
168
+ --colorRgbHuesRed300: 255 158 149;
169
+ --colorRgbHuesRed400: 254 121 113;
170
+ --colorRgbHuesRed500: 248 71 71;
171
+ --colorRgbHuesRed600: 199 46 49;
172
+ --colorRgbHuesRed700: 152 19 27;
173
+ --colorRgbHuesRed800: 105 0 11;
174
+ --colorRgbHuesRed900: 58 0 3;
175
+ --colorRgbHuesSky000: 232 251 253;
176
+ --colorRgbHuesSky100: 203 245 250;
177
+ --colorRgbHuesSky200: 172 238 246;
178
+ --colorRgbHuesSky300: 138 231 241;
179
+ --colorRgbHuesSky400: 96 222 236;
180
+ --colorRgbHuesSky500: 1 212 229;
181
+ --colorRgbHuesSky600: 1 162 175;
182
+ --colorRgbHuesSky700: 4 115 125;
183
+ --colorRgbHuesSky800: 2 71 77;
184
+ --colorRgbHuesSky900: 0 31 35;
185
+ --colorRgbHuesSkyTint100: 169 240 245;
186
+ --colorRgbHuesSkyTint200: 116 230 239;
187
+ --colorRgbHuesSkyTint300: 43 216 230;
188
+ --colorRgbHuesTurquoise000: 232 252 247;
189
+ --colorRgbHuesTurquoise100: 204 247 238;
190
+ --colorRgbHuesTurquoise200: 174 242 228;
191
+ --colorRgbHuesTurquoise300: 141 236 218;
192
+ --colorRgbHuesTurquoise400: 99 230 208;
193
+ --colorRgbHuesTurquoise500: 16 221 196;
194
+ --colorRgbHuesTurquoise600: 9 169 149;
195
+ --colorRgbHuesTurquoise700: 7 120 105;
196
+ --colorRgbHuesTurquoise800: 0 74 64;
197
+ --colorRgbHuesTurquoise900: 0 32 27;
198
+ --colorRgbHuesWarmGray50: 247 246 244;
199
+ --colorRgbHuesWarmGray100: 240 238 234;
200
+ --colorRgbHuesWarmGray200: 231 229 224;
201
+ --colorRgbHuesWarmGray300: 218 216 210;
202
+ --colorRgbHuesWarmGray400: 184 180 173;
203
+ --colorRgbHuesWarmGray500: 148 144 135;
204
+ --colorRgbHuesWarmGray600: 115 111 103;
205
+ --colorRgbHuesWarmGray700: 86 83 76;
206
+ --colorRgbHuesWarmGray800: 61 58 53;
207
+ --colorRgbHuesWarmGray900: 40 38 34;
208
+ --colorRgbHuesWarmGray950: 27 26 23;
209
+ --colorRgbHuesWhite: 255 255 255;
34
210
  --colorRgbFacetsNeutralDark000: 255 255 255;
35
211
  --colorRgbFacetsNeutralDark100: 230 236 242;
36
212
  --colorRgbFacetsNeutralDark200: 171 181 191;
package/packages/styles/buttons.css CHANGED
@@ -9,7 +9,7 @@
9
9
  gap: var(--space-xs);
10
10
  padding: 0.625rem 1.0625rem;
11
11
  font-size: var(--font-size-text-md);
12
- font-family: var(--font-family-display);
12
+ font-family: var(--ntl-font-family-heading);
13
13
  font-weight: var(--font-weight-bold);
14
14
  line-height: var(--line-height-none);
15
15
  text-decoration: none;
package/packages/styles/code-block.css CHANGED
@@ -120,7 +120,7 @@
120
120
  right: calc(100% + 10px);
121
121
  padding: 0.15em 0.5em;
122
122
  border-radius: 2px;
123
- background-color: var(--color-bg);
123
+ background-color: var(--ntl-color-bg-page);
124
124
  color: var(--color-text);
125
125
  font-size: 0.8em;
126
126
  white-space: nowrap;
@@ -130,7 +130,7 @@
130
130
  content: '';
131
131
  right: calc(100%);
132
132
  border: 5px solid transparent;
133
- border-left-color: var(--color-bg);
133
+ border-left-color: var(--ntl-color-bg-page);
134
134
  }
135
135
 
136
136
  .code-block .copy-button:hover::before,
package/packages/styles/fonts.css CHANGED
@@ -60,11 +60,39 @@
60
60
  font-display: swap;
61
61
  }
62
62
 
63
+ @font-face {
64
+ font-family: 'IBM Plex Mono';
65
+ src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2') format('woff2');
66
+ font-weight: 400;
67
+ font-display: swap;
68
+ }
69
+
70
+ @font-face {
71
+ font-family: 'IBM Plex Mono';
72
+ src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2') format('woff2');
73
+ font-weight: 500;
74
+ font-display: swap;
75
+ }
76
+
77
+ @font-face {
78
+ font-family: 'IBM Plex Mono';
79
+ src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2') format('woff2');
80
+ font-weight: 600;
81
+ font-display: swap;
82
+ }
83
+
84
+ @font-face {
85
+ font-family: 'IBM Plex Mono';
86
+ src: url('../assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2') format('woff2');
87
+ font-weight: 700;
88
+ font-display: swap;
89
+ }
90
+
63
91
  /* Text */
64
92
  body {
65
93
  font-family: var(--font-family-text);
66
94
  font-size: var(--font-size-text-lg);
67
- font-weight: var(--font-weight-normal);
95
+ font-weight: var(--ntl-font-weight-regular);
68
96
  line-height: var(--line-height-text);
69
97
  color: var(--body-text-color);
70
98
  }
@@ -77,7 +105,7 @@ strong {
77
105
  i,
78
106
  em {
79
107
  font-style: italic;
80
- font-weight: var(--font-weight-normal);
108
+ font-weight: var(--ntl-font-weight-regular);
81
109
  }
82
110
 
83
111
  /* Headings */
@@ -87,7 +115,7 @@ h3,
87
115
  h4,
88
116
  h5,
89
117
  h6 {
90
- font-family: var(--font-family-display);
118
+ font-family: var(--ntl-font-family-heading);
91
119
  }
92
120
 
93
121
  h1,
@@ -183,6 +211,6 @@ code,
183
211
  kbd {
184
212
  font-family: var(--font-family-mono);
185
213
  font-size: var(--font-size-text-xs);
186
- font-weight: var(--font-weight-normal);
214
+ font-weight: var(--ntl-font-weight-regular);
187
215
  line-height: var(--line-height-text);
188
216
  }
package/packages/styles/layout.css CHANGED
@@ -23,7 +23,7 @@
23
23
  display: grid;
24
24
  grid-template-columns: repeat(
25
25
  var(--ntl-grid-repeat-count, auto-fill),
26
- minmax(min(100%, var(--ntl-grid-column-min-size)), 1fr)
26
+ minmax(min(100%, var(--ntl-grid-column-min-size, 300px)), 1fr)
27
27
  );
28
28
  gap: var(--ntl-grid-gap, var(--space-m));
29
29
  grid-auto-rows: var(--ntl-grid-auto-rows, auto);
@@ -35,7 +35,7 @@
35
35
  gap: var(--ntl-grid-gap, var(--space-m));
36
36
 
37
37
  > * {
38
- flex: 1 1 var(--ntl-grid-column-min-size);
38
+ flex: 1 1 var(--ntl-grid-column-min-size, 300px);
39
39
  }
40
40
  }
41
41
 
package/packages/styles/tokens.compat.css CHANGED
@@ -294,6 +294,8 @@
294
294
  --button-primary-bg-color: var(--ntl-button-primary-bg-color);
295
295
  --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
296
296
  --button-primary-text-color: var(--ntl-button-primary-text-color);
297
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
298
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
297
299
  --button-secondary-text-color: var(--ntl-button-secondary-text-color);
298
300
  --card-bg-color: var(--ntl-card-bg-color);
299
301
  --card-border-color: var(--ntl-card-border-color);
@@ -303,7 +305,9 @@
303
305
  --color-bg-2: var(--ntl-color-bg-2);
304
306
  --color-bg-3: var(--ntl-color-bg-3);
305
307
  --color-bg-inverse: var(--ntl-color-bg-inverse);
308
+ --color-border-default: var(--ntl-color-border-default);
306
309
  --color-border-strong: var(--ntl-color-border-strong);
310
+ --color-border-subtle: var(--ntl-color-border-subtle);
307
311
  --color-brand-primary: var(--ntl-color-brand-primary);
308
312
  --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
309
313
  --color-brand-secondary: var(--ntl-color-brand-secondary);
@@ -325,8 +329,10 @@
325
329
  --color-link-default: var(--ntl-color-link-default);
326
330
  --color-link-hover: var(--ntl-color-link-hover);
327
331
  --color-link-inverse: var(--ntl-color-link-inverse);
332
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
328
333
  --color-logo-spark: var(--ntl-color-logo-spark);
329
334
  --color-logo-type: var(--ntl-color-logo-type);
335
+ --color-stroke: var(--ntl-color-stroke);
330
336
  --color-success-bg: var(--ntl-color-success-bg);
331
337
  --color-success-border: var(--ntl-color-success-border);
332
338
  --color-success-text: var(--ntl-color-success-text);
@@ -340,6 +346,18 @@
340
346
  --color-warning-border: var(--ntl-color-warning-border);
341
347
  --color-warning-text: var(--ntl-color-warning-text);
342
348
  --eyebrow-text-color: var(--ntl-eyebrow-text-color);
349
+ --font-family-display: var(--ntl-font-family-display);
350
+ --font-family-mono: var(--ntl-font-family-mono);
351
+ --font-family-text: var(--ntl-font-family-text);
352
+ --font-size-display-2xl: var(--ntl-font-size-display-2xl);
353
+ --font-size-display-2xs: var(--ntl-font-size-display-2xs);
354
+ --font-size-display-3xl: var(--ntl-font-size-display-3xl);
355
+ --font-size-display-4xl: var(--ntl-font-size-display-4xl);
356
+ --font-size-display-lg: var(--ntl-font-size-display-lg);
357
+ --font-size-display-md: var(--ntl-font-size-display-md);
358
+ --font-size-display-sm: var(--ntl-font-size-display-sm);
359
+ --font-size-display-xl: var(--ntl-font-size-display-xl);
360
+ --font-size-display-xs: var(--ntl-font-size-display-xs);
343
361
  --gold-000: var(--ntl-gold-000);
344
362
  --gold-100: var(--ntl-gold-100);
345
363
  --gold-200: var(--ntl-gold-200);
@@ -361,6 +379,7 @@
361
379
  --green-800: var(--ntl-green-800);
362
380
  --green-900: var(--ntl-green-900);
363
381
  --heading-text-color: var(--ntl-heading-text-color);
382
+ --line-height-heading: var(--ntl-line-height-heading);
364
383
  --neutral-000: var(--ntl-neutral-000);
365
384
  --neutral-100: var(--ntl-neutral-100);
366
385
  --neutral-200: var(--ntl-neutral-200);
@@ -431,6 +450,10 @@
431
450
  --search-source-list-color: var(--ntl-search-source-list-color);
432
451
  --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
433
452
  --search-user-message-color: var(--ntl-search-user-message-color);
453
+ --shadow-deep: var(--ntl-shadow-deep);
454
+ --shadow-heavy: var(--ntl-shadow-heavy);
455
+ --shadow-hover: var(--ntl-shadow-hover);
456
+ --shadow-light: var(--ntl-shadow-light);
434
457
  --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
435
458
  --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
436
459
  --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
@@ -451,7 +474,107 @@
451
474
  }
452
475
 
453
476
  @media (prefers-color-scheme: dark) {
454
- :root, [data-brand="hues"] {
477
+ :root {
478
+ --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
479
+ --badge-bg-color: var(--ntl-badge-bg-color);
480
+ --badge-border-color: var(--ntl-badge-border-color);
481
+ --badge-text-color: var(--ntl-badge-text-color);
482
+ --blockquote-accent-color: var(--ntl-blockquote-accent-color);
483
+ --button-outline-bg-color: var(--ntl-button-outline-bg-color);
484
+ --button-outline-bg-color-hover: var(--ntl-button-outline-bg-color-hover);
485
+ --button-outline-stroke-color: var(--ntl-button-outline-stroke-color);
486
+ --button-outline-text-color: var(--ntl-button-outline-text-color);
487
+ --button-primary-bg-color: var(--ntl-button-primary-bg-color);
488
+ --button-primary-bg-color-hover: var(--ntl-button-primary-bg-color-hover);
489
+ --button-primary-text-color: var(--ntl-button-primary-text-color);
490
+ --button-secondary-bg-color: var(--ntl-button-secondary-bg-color);
491
+ --button-secondary-bg-color-hover: var(--ntl-button-secondary-bg-color-hover);
492
+ --button-secondary-text-color: var(--ntl-button-secondary-text-color);
493
+ --card-bg-color: var(--ntl-card-bg-color);
494
+ --card-border-color: var(--ntl-card-border-color);
495
+ --card-border-color-hover: var(--ntl-card-border-color-hover);
496
+ --code-bg-color: var(--ntl-code-bg-color);
497
+ --color-bg: var(--ntl-color-bg);
498
+ --color-bg-2: var(--ntl-color-bg-2);
499
+ --color-bg-3: var(--ntl-color-bg-3);
500
+ --color-bg-inverse: var(--ntl-color-bg-inverse);
501
+ --color-bg-translucent: var(--ntl-color-bg-translucent);
502
+ --color-border-default: var(--ntl-color-border-default);
503
+ --color-border-strong: var(--ntl-color-border-strong);
504
+ --color-border-subtle: var(--ntl-color-border-subtle);
505
+ --color-brand-primary: var(--ntl-color-brand-primary);
506
+ --color-brand-primary-hover: var(--ntl-color-brand-primary-hover);
507
+ --color-brand-secondary: var(--ntl-color-brand-secondary);
508
+ --color-brand-secondary-hover: var(--ntl-color-brand-secondary-hover);
509
+ --color-disabled-bg: var(--ntl-color-disabled-bg);
510
+ --color-disabled-border: var(--ntl-color-disabled-border);
511
+ --color-disabled-text: var(--ntl-color-disabled-text);
512
+ --color-highlight-bg: var(--ntl-color-highlight-bg);
513
+ --color-highlight-border: var(--ntl-color-highlight-border);
514
+ --color-highlight-text: var(--ntl-color-highlight-text);
515
+ --color-icon: var(--ntl-color-icon);
516
+ --color-info-bg: var(--ntl-color-info-bg);
517
+ --color-info-border: var(--ntl-color-info-border);
518
+ --color-info-text: var(--ntl-color-info-text);
519
+ --color-invalid-bg: var(--ntl-color-invalid-bg);
520
+ --color-invalid-border: var(--ntl-color-invalid-border);
521
+ --color-invalid-text: var(--ntl-color-invalid-text);
522
+ --color-link: var(--ntl-color-link);
523
+ --color-link-default: var(--ntl-color-link-default);
524
+ --color-link-hover: var(--ntl-color-link-hover);
525
+ --color-link-inverse: var(--ntl-color-link-inverse);
526
+ --color-logo-inactive: var(--ntl-color-logo-inactive);
527
+ --color-logo-spark: var(--ntl-color-logo-spark);
528
+ --color-logo-type: var(--ntl-color-logo-type);
529
+ --color-stroke: var(--ntl-color-stroke);
530
+ --color-success-bg: var(--ntl-color-success-bg);
531
+ --color-success-border: var(--ntl-color-success-border);
532
+ --color-success-text: var(--ntl-color-success-text);
533
+ --color-text: var(--ntl-color-text);
534
+ --color-text-accent: var(--ntl-color-text-accent);
535
+ --color-text-default: var(--ntl-color-text-default);
536
+ --color-text-inverse: var(--ntl-color-text-inverse);
537
+ --color-text-weak: var(--ntl-color-text-weak);
538
+ --color-text-weaker: var(--ntl-color-text-weaker);
539
+ --color-warning-bg: var(--ntl-color-warning-bg);
540
+ --color-warning-border: var(--ntl-color-warning-border);
541
+ --color-warning-text: var(--ntl-color-warning-text);
542
+ --eyebrow-text-color: var(--ntl-eyebrow-text-color);
543
+ --filter-invert: var(--ntl-filter-invert);
544
+ --heading-text-color: var(--ntl-heading-text-color);
545
+ --neutral-000: var(--ntl-neutral-000);
546
+ --neutral-100: var(--ntl-neutral-100);
547
+ --neutral-200: var(--ntl-neutral-200);
548
+ --neutral-300: var(--ntl-neutral-300);
549
+ --neutral-400: var(--ntl-neutral-400);
550
+ --neutral-500: var(--ntl-neutral-500);
551
+ --neutral-600: var(--ntl-neutral-600);
552
+ --neutral-700: var(--ntl-neutral-700);
553
+ --neutral-800: var(--ntl-neutral-800);
554
+ --neutral-900: var(--ntl-neutral-900);
555
+ --search-answer-message-color: var(--ntl-search-answer-message-color);
556
+ --search-back-btn-bg-color: var(--ntl-search-back-btn-bg-color);
557
+ --search-bg-color: var(--ntl-search-bg-color);
558
+ --search-highlight-color: var(--ntl-search-highlight-color);
559
+ --search-icon-color: var(--ntl-search-icon-color);
560
+ --search-input-bg-color: var(--ntl-search-input-bg-color);
561
+ --search-loading-color: var(--ntl-search-loading-color);
562
+ --search-source-list-color: var(--ntl-search-source-list-color);
563
+ --search-submit-btn-bg-color: var(--ntl-search-submit-btn-bg-color);
564
+ --search-user-message-color: var(--ntl-search-user-message-color);
565
+ --tabbed-content-bg-color: var(--ntl-tabbed-content-bg-color);
566
+ --tabbed-content-bg-color-active: var(--ntl-tabbed-content-bg-color-active);
567
+ --tabbed-content-border-color: var(--ntl-tabbed-content-border-color);
568
+ --tabbed-content-code-bg-color: var(--ntl-tabbed-content-code-bg-color);
569
+ --tabbed-content-tab-text-color-active: var(--ntl-tabbed-content-tab-text-color-active);
570
+ --testimonial-logo-hover-color: var(--ntl-testimonial-logo-hover-color);
571
+ --testimonial-logo-inactive-color: var(--ntl-testimonial-logo-inactive-color);
572
+ --title-text-color: var(--ntl-title-text-color);
573
+ }
574
+ }
575
+
576
+ @media (prefers-color-scheme: dark) {
577
+ [data-brand="hues"] {
455
578
  --active-switcher-tab-bg-color: var(--ntl-active-switcher-tab-bg-color);
456
579
  --badge-bg-color: var(--ntl-badge-bg-color);
457
580
  --badge-border-color: var(--ntl-badge-border-color);