@netlify/spark-ui 1.32.0 → 1.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +12 -1
  2. package/package.json +3 -3
  3. package/packages/styles/tokens.compat.css +376 -1
  4. package/packages/styles/tokens.css +515 -141
package/packages/styles/tokens.css CHANGED
@@ -3,34 +3,34 @@
3
3
  * ------------------------------------------- */
4
4
 
5
5
  :root {
6
- --ntl-active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
6
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
7
7
  --ntl-badge-bg-color: var(--ntl-neutral-100);
8
8
  --ntl-badge-border-color: var(--ntl-neutral-300);
9
9
  --ntl-badge-text-color: var(--ntl-neutral-500);
10
10
  --ntl-blockquote-accent-color: var(--ntl-blue-700);
11
- --ntl-blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
12
- --ntl-blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
13
- --ntl-blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
14
- --ntl-blue-300: color(srgb 0.611764705882353 0.7450980392156863 0.9647058823529412);
15
- --ntl-blue-400: color(srgb 0.5019607843137255 0.6705882352941176 0.9803921568627451);
16
- --ntl-blue-500: color(srgb 0.36470588235294116 0.5529411764705883 0.9607843137254902);
17
- --ntl-blue-600: color(srgb 0.19215686274509805 0.4196078431372549 0.9568627450980393);
18
- --ntl-blue-700: color(srgb 0.1803921568627451 0.3176470588235294 0.9294117647058824);
19
- --ntl-blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
20
- --ntl-blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
11
+ --ntl-blue-000: rgb(92.941% 95.686% 100%);
12
+ --ntl-blue-100: rgb(80.392% 88.627% 100%);
13
+ --ntl-blue-200: rgb(70.98% 82.353% 98.431%);
14
+ --ntl-blue-300: rgb(61.176% 74.51% 96.471%);
15
+ --ntl-blue-400: rgb(50.196% 67.059% 98.039%);
16
+ --ntl-blue-500: rgb(36.471% 55.294% 96.078%);
17
+ --ntl-blue-600: rgb(19.216% 41.961% 95.686%);
18
+ --ntl-blue-700: rgb(18.039% 31.765% 92.941%);
19
+ --ntl-blue-800: rgb(12.549% 21.176% 63.137%);
20
+ --ntl-blue-900: rgb(10.588% 12.549% 35.686%);
21
21
  --ntl-border-width-base: 1.5px;
22
22
  --ntl-border-width-heavy: 3px;
23
23
  --ntl-border-width-thick: 2px;
24
24
  --ntl-border-width-thin: 1px;
25
- --ntl-button-outline-bg-color: color(srgb 0 0 0 / 0);
26
- --ntl-button-outline-bg-color-hover: color(srgb 0.8392156862745098 0.9803921568627451 0.9764705882352941);
25
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
26
+ --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
27
27
  --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
28
28
  --ntl-button-outline-text-color: var(--ntl-neutral-800);
29
29
  --ntl-button-primary-bg-color: var(--ntl-teal-200);
30
30
  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
31
31
  --ntl-button-primary-text-color: var(--ntl-neutral-800);
32
- --ntl-button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
33
- --ntl-button-secondary-bg-color-hover: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.14901960784313725);
32
+ --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
33
+ --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
34
34
  --ntl-button-secondary-text-color: var(--ntl-neutral-800);
35
35
  --ntl-card-bg-color: var(--ntl-neutral-000);
36
36
  --ntl-card-border-color: var(--ntl-neutral-200);
@@ -40,10 +40,10 @@
40
40
  --ntl-color-bg-2: var(--ntl-neutral-100);
41
41
  --ntl-color-bg-3: var(--ntl-neutral-200);
42
42
  --ntl-color-bg-inverse: var(--ntl-neutral-300);
43
- --ntl-color-bg-translucent: color(srgb 1 1 1 / 0.9019607843137255);
44
- --ntl-color-border-default: color(srgb 0 0 0 / 0.14901960784313725);
43
+ --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
44
+ --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
45
45
  --ntl-color-border-strong: var(--ntl-neutral-300);
46
- --ntl-color-border-subtle: color(srgb 0 0 0 / 0.06274509803921569);
46
+ --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
47
47
  --ntl-color-brand-primary: var(--ntl-blue-700);
48
48
  --ntl-color-brand-primary-hover: var(--ntl-blue-800);
49
49
  --ntl-color-brand-secondary: var(--ntl-teal-300);
@@ -65,10 +65,10 @@
65
65
  --ntl-color-link-default: var(--ntl-blue-700);
66
66
  --ntl-color-link-hover: var(--ntl-blue-800);
67
67
  --ntl-color-link-inverse: var(--ntl-blue-400);
68
- --ntl-color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
68
+ --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
69
69
  --ntl-color-logo-spark: var(--ntl-teal-400);
70
70
  --ntl-color-logo-type: var(--ntl-teal-800);
71
- --ntl-color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
71
+ --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
72
72
  --ntl-color-success-bg: var(--ntl-green-100);
73
73
  --ntl-color-success-border: var(--ntl-green-300);
74
74
  --ntl-color-success-text: var(--ntl-green-800);
@@ -82,7 +82,8 @@
82
82
  --ntl-color-warning-border: var(--ntl-gold-300);
83
83
  --ntl-color-warning-text: var(--ntl-gold-800);
84
84
  --ntl-eyebrow-text-color: var(--ntl-blue-700);
85
- --ntl-focus-outline-offset: 0;
85
+ --ntl-filter-invert: none;
86
+ --ntl-focus-outline-offset: 0px;
86
87
  --ntl-focus-outline-width: 5px;
87
88
  --ntl-font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
88
89
  --ntl-font-family-mono: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
@@ -106,26 +107,26 @@
106
107
  --ntl-font-weight-medium: 500;
107
108
  --ntl-font-weight-regular: 400;
108
109
  --ntl-font-weight-semibold: 600;
109
- --ntl-gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
110
- --ntl-gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
111
- --ntl-gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
112
- --ntl-gold-300: color(srgb 0.984313725490196 0.6941176470588235 0.23921568627450981);
113
- --ntl-gold-400: color(srgb 0.9764705882352941 0.5568627450980392 0.12941176470588237);
114
- --ntl-gold-500: color(srgb 0.8352941176470589 0.4666666666666667 0.10196078431372549);
115
- --ntl-gold-600: color(srgb 0.6588235294117647 0.36470588235294116 0.07450980392156863);
116
- --ntl-gold-700: color(srgb 0.5490196078431373 0.2980392156862745 0.050980392156862744);
117
- --ntl-gold-800: color(srgb 0.3764705882352941 0.20392156862745098 0.03137254901960784);
118
- --ntl-gold-900: color(srgb 0.2 0.13333333333333333 0.07450980392156863);
119
- --ntl-green-000: color(srgb 0.9058823529411765 0.9882352941176471 0.9137254901960784);
120
- --ntl-green-100: color(srgb 0.7450980392156863 0.9764705882352941 0.7764705882352941);
121
- --ntl-green-200: color(srgb 0.5764705882352941 0.9607843137254902 0.6470588235294118);
122
- --ntl-green-300: color(srgb 0.39215686274509803 0.8470588235294118 0.4980392156862745);
123
- --ntl-green-400: color(srgb 0.22745098039215686 0.7647058823529411 0.39215686274509803);
124
- --ntl-green-500: color(srgb 0.19215686274509805 0.6588235294117647 0.3333333333333333);
125
- --ntl-green-600: color(srgb 0.13333333333333333 0.5098039215686274 0.25098039215686274);
126
- --ntl-green-700: color(srgb 0.10196078431372549 0.4196078431372549 0.20392156862745098);
127
- --ntl-green-800: color(srgb 0.058823529411764705 0.2901960784313726 0.12941176470588237);
128
- --ntl-green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
110
+ --ntl-gold-000: rgb(99.216% 96.078% 84.706%);
111
+ --ntl-gold-100: rgb(96.471% 87.843% 64.706%);
112
+ --ntl-gold-200: rgb(98.039% 80.392% 43.529%);
113
+ --ntl-gold-300: rgb(98.431% 69.412% 23.922%);
114
+ --ntl-gold-400: rgb(97.647% 55.686% 12.941%);
115
+ --ntl-gold-500: rgb(83.529% 46.667% 10.196%);
116
+ --ntl-gold-600: rgb(65.882% 36.471% 7.451%);
117
+ --ntl-gold-700: rgb(54.902% 29.804% 5.098%);
118
+ --ntl-gold-800: rgb(37.647% 20.392% 3.1373%);
119
+ --ntl-gold-900: rgb(20% 13.333% 7.451%);
120
+ --ntl-green-000: rgb(90.588% 98.824% 91.373%);
121
+ --ntl-green-100: rgb(74.51% 97.647% 77.647%);
122
+ --ntl-green-200: rgb(57.647% 96.078% 64.706%);
123
+ --ntl-green-300: rgb(39.216% 84.706% 49.804%);
124
+ --ntl-green-400: rgb(22.745% 76.471% 39.216%);
125
+ --ntl-green-500: rgb(19.216% 65.882% 33.333%);
126
+ --ntl-green-600: rgb(13.333% 50.98% 25.098%);
127
+ --ntl-green-700: rgb(10.196% 41.961% 20.392%);
128
+ --ntl-green-800: rgb(5.8824% 29.02% 12.941%);
129
+ --ntl-green-900: rgb(8.2353% 16.471% 9.8039%);
129
130
  --ntl-heading-text-color: var(--ntl-neutral-800);
130
131
  --ntl-line-height-heading: 1.1;
131
132
  --ntl-line-height-loose: 2;
@@ -152,48 +153,48 @@
152
153
  --ntl-neutral-700: var(--ntl-neutral-light-700);
153
154
  --ntl-neutral-800: var(--ntl-neutral-light-800);
154
155
  --ntl-neutral-900: var(--ntl-neutral-light-900);
155
- --ntl-neutral-dark-000: color(srgb 1 1 1);
156
- --ntl-neutral-dark-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
157
- --ntl-neutral-dark-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
158
- --ntl-neutral-dark-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
159
- --ntl-neutral-dark-400: color(srgb 0.30196078431372547 0.33725490196078434 0.37254901960784315);
160
- --ntl-neutral-dark-500: color(srgb 0.23137254901960785 0.2627450980392157 0.2980392156862745);
161
- --ntl-neutral-dark-600: color(srgb 0.15294117647058825 0.1843137254901961 0.2196078431372549);
162
- --ntl-neutral-dark-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
163
- --ntl-neutral-dark-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
164
- --ntl-neutral-dark-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
165
- --ntl-neutral-light-000: color(srgb 1 1 1);
166
- --ntl-neutral-light-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
167
- --ntl-neutral-light-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
168
- --ntl-neutral-light-300: color(srgb 0.8196078431372549 0.8352941176470589 0.8549019607843137);
169
- --ntl-neutral-light-400: color(srgb 0.615686274509804 0.6549019607843137 0.6980392156862745);
170
- --ntl-neutral-light-500: color(srgb 0.4666666666666667 0.5019607843137255 0.5372549019607843);
171
- --ntl-neutral-light-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
172
- --ntl-neutral-light-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
173
- --ntl-neutral-light-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
174
- --ntl-neutral-light-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
156
+ --ntl-neutral-dark-000: rgb(100% 100% 100%);
157
+ --ntl-neutral-dark-100: rgb(90.196% 92.549% 94.902%);
158
+ --ntl-neutral-dark-200: rgb(67.059% 70.98% 74.902%);
159
+ --ntl-neutral-dark-300: rgb(49.412% 52.941% 57.255%);
160
+ --ntl-neutral-dark-400: rgb(30.196% 33.725% 37.255%);
161
+ --ntl-neutral-dark-500: rgb(23.137% 26.275% 29.804%);
162
+ --ntl-neutral-dark-600: rgb(15.294% 18.431% 21.961%);
163
+ --ntl-neutral-dark-700: rgb(11.765% 14.118% 17.255%);
164
+ --ntl-neutral-dark-800: rgb(7.0588% 9.4118% 12.157%);
165
+ --ntl-neutral-dark-900: rgb(2.3529% 4.3137% 6.2745%);
166
+ --ntl-neutral-light-000: rgb(100% 100% 100%);
167
+ --ntl-neutral-light-100: rgb(96.471% 96.471% 96.863%);
168
+ --ntl-neutral-light-200: rgb(91.373% 92.157% 92.941%);
169
+ --ntl-neutral-light-300: rgb(81.961% 83.529% 85.49%);
170
+ --ntl-neutral-light-400: rgb(61.569% 65.49% 69.804%);
171
+ --ntl-neutral-light-500: rgb(46.667% 50.196% 53.725%);
172
+ --ntl-neutral-light-600: rgb(32.941% 35.294% 38.039%);
173
+ --ntl-neutral-light-700: rgb(20.784% 22.745% 24.314%);
174
+ --ntl-neutral-light-800: rgb(9.4118% 10.196% 10.98%);
175
+ --ntl-neutral-light-900: rgb(2.3529% 4.3137% 6.2745%);
175
176
  --ntl-page-content-max-width: 80rem;
176
177
  --ntl-page-gutter: var(--ntl-space-l);
177
- --ntl-pink-000: color(srgb 0.9882352941176471 0.9411764705882353 0.984313725490196);
178
- --ntl-pink-100: color(srgb 0.9647058823529412 0.8235294117647058 0.9490196078431372);
179
- --ntl-pink-200: color(srgb 0.9686274509803922 0.7372549019607844 0.9529411764705882);
180
- --ntl-pink-300: color(srgb 0.9529411764705882 0.6588235294117647 0.9333333333333333);
181
- --ntl-pink-400: color(srgb 0.9372549019607843 0.4980392156862745 0.9215686274509803);
182
- --ntl-pink-500: color(srgb 0.8745098039215686 0.35294117647058826 0.8627450980392157);
183
- --ntl-pink-600: color(srgb 0.7254901960784313 0.2196078431372549 0.7215686274509804);
184
- --ntl-pink-700: color(srgb 0.6039215686274509 0.17647058823529413 0.6);
185
- --ntl-pink-800: color(srgb 0.4235294117647059 0.11372549019607843 0.4196078431372549);
186
- --ntl-pink-900: color(srgb 0.2196078431372549 0.10588235294117647 0.21568627450980393);
187
- --ntl-purple-000: color(srgb 0.9607843137254902 0.9490196078431372 0.9882352941176471);
188
- --ntl-purple-100: color(srgb 0.8862745098039215 0.8509803921568627 0.9686274509803922);
189
- --ntl-purple-200: color(srgb 0.8470588235294118 0.7803921568627451 1);
190
- --ntl-purple-300: color(srgb 0.792156862745098 0.7254901960784313 0.9568627450980393);
191
- --ntl-purple-400: color(srgb 0.7058823529411765 0.615686274509804 0.9450980392156862);
192
- --ntl-purple-500: color(srgb 0.6078431372549019 0.5019607843137255 0.9294117647058824);
193
- --ntl-purple-600: color(srgb 0.4666666666666667 0.3607843137254902 0.9058823529411765);
194
- --ntl-purple-700: color(srgb 0.3803921568627451 0.2901960784313726 0.792156862745098);
195
- --ntl-purple-800: color(srgb 0.2196078431372549 0.16470588235294117 0.6431372549019608);
196
- --ntl-purple-900: color(srgb 0.1607843137254902 0.12941176470588237 0.25882352941176473);
178
+ --ntl-pink-000: rgb(98.824% 94.118% 98.431%);
179
+ --ntl-pink-100: rgb(96.471% 82.353% 94.902%);
180
+ --ntl-pink-200: rgb(96.863% 73.725% 95.294%);
181
+ --ntl-pink-300: rgb(95.294% 65.882% 93.333%);
182
+ --ntl-pink-400: rgb(93.725% 49.804% 92.157%);
183
+ --ntl-pink-500: rgb(87.451% 35.294% 86.275%);
184
+ --ntl-pink-600: rgb(72.549% 21.961% 72.157%);
185
+ --ntl-pink-700: rgb(60.392% 17.647% 60%);
186
+ --ntl-pink-800: rgb(42.353% 11.373% 41.961%);
187
+ --ntl-pink-900: rgb(21.961% 10.588% 21.569%);
188
+ --ntl-purple-000: rgb(96.078% 94.902% 98.824%);
189
+ --ntl-purple-100: rgb(88.627% 85.098% 96.863%);
190
+ --ntl-purple-200: rgb(84.706% 78.039% 100%);
191
+ --ntl-purple-300: rgb(79.216% 72.549% 95.686%);
192
+ --ntl-purple-400: rgb(70.588% 61.569% 94.51%);
193
+ --ntl-purple-500: rgb(60.784% 50.196% 92.941%);
194
+ --ntl-purple-600: rgb(46.667% 36.078% 90.588%);
195
+ --ntl-purple-700: rgb(38.039% 29.02% 79.216%);
196
+ --ntl-purple-800: rgb(21.961% 16.471% 64.314%);
197
+ --ntl-purple-900: rgb(16.078% 12.941% 25.882%);
197
198
  --ntl-radius-2xl: 1.875rem;
198
199
  --ntl-radius-l: 0.75rem;
199
200
  --ntl-radius-m: 0.375rem;
@@ -201,16 +202,16 @@
201
202
  --ntl-radius-s: 0.25rem;
202
203
  --ntl-radius-xl: 1rem;
203
204
  --ntl-radius-xs: 0.125rem;
204
- --ntl-red-000: color(srgb 0.984313725490196 0.9333333333333333 0.9294117647058824);
205
- --ntl-red-100: color(srgb 0.984313725490196 0.8274509803921568 0.8156862745098039);
206
- --ntl-red-200: color(srgb 1 0.7411764705882353 0.7294117647058823);
207
- --ntl-red-300: color(srgb 1 0.6784313725490196 0.6627450980392157);
208
- --ntl-red-400: color(srgb 0.996078431372549 0.5137254901960784 0.5098039215686274);
209
- --ntl-red-500: color(srgb 0.996078431372549 0.3058823529411765 0.3607843137254902);
210
- --ntl-red-600: color(srgb 0.8392156862745098 0.15294117647058825 0.25098039215686274);
211
- --ntl-red-700: color(srgb 0.6862745098039216 0.1450980392156863 0.21176470588235294);
212
- --ntl-red-800: color(srgb 0.5019607843137255 0.0392156862745098 0.12549019607843137);
213
- --ntl-red-900: color(srgb 0.23921568627450981 0.10980392156862745 0.10588235294117647);
205
+ --ntl-red-000: rgb(98.431% 93.333% 92.941%);
206
+ --ntl-red-100: rgb(98.431% 82.745% 81.569%);
207
+ --ntl-red-200: rgb(100% 74.118% 72.941%);
208
+ --ntl-red-300: rgb(100% 67.843% 66.275%);
209
+ --ntl-red-400: rgb(99.608% 51.373% 50.98%);
210
+ --ntl-red-500: rgb(99.608% 30.588% 36.078%);
211
+ --ntl-red-600: rgb(83.922% 15.294% 25.098%);
212
+ --ntl-red-700: rgb(68.627% 14.51% 21.176%);
213
+ --ntl-red-800: rgb(50.196% 3.9216% 12.549%);
214
+ --ntl-red-900: rgb(23.922% 10.98% 10.588%);
214
215
  --ntl-search-answer-message-color: var(--ntl-neutral-200);
215
216
  --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
216
217
  --ntl-search-bg-color: var(--ntl-neutral-000);
@@ -221,11 +222,11 @@
221
222
  --ntl-search-source-list-color: var(--ntl-neutral-100);
222
223
  --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
223
224
  --ntl-search-user-message-color: var(--ntl-teal-000);
224
- --ntl-shadow-deep: 0 16px 24px 0 color(srgb 0 0 0 / 0.07), 0 6px 30px 0 color(srgb 0 0 0 / 0.06), 0 8px 10px 0 color(srgb 0 0 0 / 0.1);
225
- --ntl-shadow-heavy: -10px 10px 80px 0 color(srgb 0 0 0 / 0.1);
226
- --ntl-shadow-hover: 0 4px 12px 0 color(srgb 0 0 0 / 0.25);
227
- --ntl-shadow-light: 0 2px 4px 0 color(srgb 0.2 0.21568627450980393 0.23137254901960785 / 0.08), 0 1px 10px 0 color(srgb 0.2 0.21568627450980393 0.23137254901960785 / 0.06);
228
- --ntl-space-0: 0;
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
+ --ntl-shadow-heavy: -10px 10px 80px 0px rgb(0% 0% 0% / 0.1);
227
+ --ntl-shadow-hover: 0px 4px 12px 0px rgb(0% 0% 0% / 0.25);
228
+ --ntl-shadow-light: 0px 2px 4px 0px rgb(20% 21.569% 23.137% / 0.08), 0px 1px 10px 0px rgb(20% 21.569% 23.137% / 0.06);
229
+ --ntl-space-0: 0rem;
229
230
  --ntl-space-2xl: 4rem;
230
231
  --ntl-space-2xs: 0.5rem;
231
232
  --ntl-space-3xl: 6rem;
@@ -241,20 +242,20 @@
241
242
  --ntl-tabbed-content-border-color: var(--ntl-color-icon);
242
243
  --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
243
244
  --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
244
- --ntl-teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
245
- --ntl-teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
246
- --ntl-teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
247
- --ntl-teal-300: color(srgb 0.0784313725490196 0.8470588235294118 0.8313725490196079);
248
- --ntl-teal-400: color(srgb 0.0196078431372549 0.7411764705882353 0.7294117647058823);
249
- --ntl-teal-500: color(srgb 0.01568627450980392 0.6352941176470588 0.6235294117647059);
250
- --ntl-teal-600: color(srgb 0.00784313725490196 0.5019607843137255 0.49019607843137253);
251
- --ntl-teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
252
- --ntl-teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
253
- --ntl-teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
245
+ --ntl-teal-000: rgb(87.059% 100% 99.608%);
246
+ --ntl-teal-100: rgb(55.686% 98.431% 96.863%);
247
+ --ntl-teal-200: rgb(19.608% 90.196% 88.627%);
248
+ --ntl-teal-300: rgb(7.8431% 84.706% 83.137%);
249
+ --ntl-teal-400: rgb(1.9608% 74.118% 72.941%);
250
+ --ntl-teal-500: rgb(1.5686% 63.529% 62.353%);
251
+ --ntl-teal-600: rgb(0.78431% 50.196% 49.02%);
252
+ --ntl-teal-700: rgb(0.39216% 41.176% 40.784%);
253
+ --ntl-teal-800: rgb(0.39216% 28.235% 27.843%);
254
+ --ntl-teal-900: rgb(4.7059% 16.471% 16.471%);
254
255
  --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
255
256
  --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
256
257
  --ntl-text-underline-offset: 0.125em;
257
- --ntl-title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
258
+ --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
258
259
  --ntl-tracking-tight: -0.02em;
259
260
  --ntl-z-index-base: 0;
260
261
  --ntl-z-index-modal: 300;
@@ -265,22 +266,199 @@
265
266
  --ntl-z-index-tooltip: 500;
266
267
  }
267
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
+
268
446
  @media (prefers-color-scheme: dark) {
269
- :root {
270
- --ntl-active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
447
+ :root, [data-brand="hues"] {
448
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
271
449
  --ntl-badge-bg-color: var(--ntl-neutral-700);
272
450
  --ntl-badge-border-color: var(--ntl-neutral-600);
273
451
  --ntl-badge-text-color: var(--ntl-neutral-100);
274
452
  --ntl-blockquote-accent-color: var(--ntl-teal-200);
275
- --ntl-button-outline-bg-color: color(srgb 0 0 0 / 0);
453
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
276
454
  --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
277
455
  --ntl-button-outline-stroke-color: var(--ntl-teal-200);
278
456
  --ntl-button-outline-text-color: var(--ntl-teal-200);
279
457
  --ntl-button-primary-bg-color: var(--ntl-teal-200);
280
458
  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
281
459
  --ntl-button-primary-text-color: var(--ntl-neutral-800);
282
- --ntl-button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
283
- --ntl-button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
460
+ --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
461
+ --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
284
462
  --ntl-button-secondary-text-color: var(--ntl-teal-200);
285
463
  --ntl-card-bg-color: var(--ntl-teal-900);
286
464
  --ntl-card-border-color: var(--ntl-teal-900);
@@ -290,10 +468,10 @@
290
468
  --ntl-color-bg-2: var(--ntl-neutral-700);
291
469
  --ntl-color-bg-3: var(--ntl-neutral-600);
292
470
  --ntl-color-bg-inverse: var(--ntl-neutral-000);
293
- --ntl-color-bg-translucent: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039 / 0.9490196078431372);
294
- --ntl-color-border-default: color(srgb 1 1 1 / 0.09803921568627451);
471
+ --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
472
+ --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
295
473
  --ntl-color-border-strong: var(--ntl-neutral-500);
296
- --ntl-color-border-subtle: color(srgb 1 1 1 / 0.0392156862745098);
474
+ --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
297
475
  --ntl-color-brand-primary: var(--ntl-teal-300);
298
476
  --ntl-color-brand-primary-hover: var(--ntl-teal-800);
299
477
  --ntl-color-brand-secondary: var(--ntl-blue-700);
@@ -315,10 +493,10 @@
315
493
  --ntl-color-link-default: var(--ntl-teal-200);
316
494
  --ntl-color-link-hover: var(--ntl-teal-100);
317
495
  --ntl-color-link-inverse: var(--ntl-blue-600);
318
- --ntl-color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
496
+ --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
319
497
  --ntl-color-logo-spark: var(--ntl-teal-200);
320
498
  --ntl-color-logo-type: var(--ntl-neutral-000);
321
- --ntl-color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
499
+ --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
322
500
  --ntl-color-success-bg: var(--ntl-green-200);
323
501
  --ntl-color-success-border: var(--ntl-green-400);
324
502
  --ntl-color-success-text: var(--ntl-green-900);
@@ -354,32 +532,32 @@
354
532
  --ntl-search-source-list-color: var(--ntl-neutral-700);
355
533
  --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
356
534
  --ntl-search-user-message-color: var(--ntl-teal-800);
357
- --ntl-tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
535
+ --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
358
536
  --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
359
537
  --ntl-tabbed-content-border-color: var(--ntl-color-icon);
360
538
  --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
361
539
  --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
362
540
  --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
363
541
  --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
364
- --ntl-title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
542
+ --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
365
543
  }
366
544
  }
367
545
 
368
546
  [data-theme="dark"] {
369
- --ntl-active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
547
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471%);
370
548
  --ntl-badge-bg-color: var(--ntl-neutral-700);
371
549
  --ntl-badge-border-color: var(--ntl-neutral-600);
372
550
  --ntl-badge-text-color: var(--ntl-neutral-100);
373
551
  --ntl-blockquote-accent-color: var(--ntl-teal-200);
374
- --ntl-button-outline-bg-color: color(srgb 0 0 0 / 0);
552
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
375
553
  --ntl-button-outline-bg-color-hover: var(--ntl-neutral-500);
376
554
  --ntl-button-outline-stroke-color: var(--ntl-teal-200);
377
555
  --ntl-button-outline-text-color: var(--ntl-teal-200);
378
556
  --ntl-button-primary-bg-color: var(--ntl-teal-200);
379
557
  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
380
558
  --ntl-button-primary-text-color: var(--ntl-neutral-800);
381
- --ntl-button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
382
- --ntl-button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
559
+ --ntl-button-secondary-bg-color: rgb(100% 100% 100% / 0.09804);
560
+ --ntl-button-secondary-bg-color-hover: rgb(65.49% 100% 99.216% / 0.14902);
383
561
  --ntl-button-secondary-text-color: var(--ntl-teal-200);
384
562
  --ntl-card-bg-color: var(--ntl-teal-900);
385
563
  --ntl-card-border-color: var(--ntl-teal-900);
@@ -389,10 +567,10 @@
389
567
  --ntl-color-bg-2: var(--ntl-neutral-700);
390
568
  --ntl-color-bg-3: var(--ntl-neutral-600);
391
569
  --ntl-color-bg-inverse: var(--ntl-neutral-000);
392
- --ntl-color-bg-translucent: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039 / 0.9490196078431372);
393
- --ntl-color-border-default: color(srgb 1 1 1 / 0.09803921568627451);
570
+ --ntl-color-bg-translucent: rgb(7.0588% 9.4118% 12.157% / 0.94902);
571
+ --ntl-color-border-default: rgb(100% 100% 100% / 0.09804);
394
572
  --ntl-color-border-strong: var(--ntl-neutral-500);
395
- --ntl-color-border-subtle: color(srgb 1 1 1 / 0.0392156862745098);
573
+ --ntl-color-border-subtle: rgb(100% 100% 100% / 0.03922);
396
574
  --ntl-color-brand-primary: var(--ntl-teal-300);
397
575
  --ntl-color-brand-primary-hover: var(--ntl-teal-800);
398
576
  --ntl-color-brand-secondary: var(--ntl-blue-700);
@@ -414,10 +592,10 @@
414
592
  --ntl-color-link-default: var(--ntl-teal-200);
415
593
  --ntl-color-link-hover: var(--ntl-teal-100);
416
594
  --ntl-color-link-inverse: var(--ntl-blue-600);
417
- --ntl-color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
595
+ --ntl-color-logo-inactive: rgb(28.235% 36.471% 36.471%);
418
596
  --ntl-color-logo-spark: var(--ntl-teal-200);
419
597
  --ntl-color-logo-type: var(--ntl-neutral-000);
420
- --ntl-color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
598
+ --ntl-color-stroke: rgb(100% 100% 100% / 0.09804);
421
599
  --ntl-color-success-bg: var(--ntl-green-200);
422
600
  --ntl-color-success-border: var(--ntl-green-400);
423
601
  --ntl-color-success-text: var(--ntl-green-900);
@@ -453,31 +631,31 @@
453
631
  --ntl-search-source-list-color: var(--ntl-neutral-700);
454
632
  --ntl-search-submit-btn-bg-color: var(--ntl-teal-200);
455
633
  --ntl-search-user-message-color: var(--ntl-teal-800);
456
- --ntl-tabbed-content-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
634
+ --ntl-tabbed-content-bg-color: rgb(4.7059% 16.471% 16.471% / 0.2);
457
635
  --ntl-tabbed-content-bg-color-active: var(--ntl-teal-900);
458
636
  --ntl-tabbed-content-border-color: var(--ntl-color-icon);
459
637
  --ntl-tabbed-content-code-bg-color: var(--ntl-neutral-900);
460
638
  --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
461
639
  --ntl-testimonial-logo-hover-color: var(--ntl-neutral-300);
462
640
  --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
463
- --ntl-title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
641
+ --ntl-title-text-color: rgb(83.529% 100% 99.608% / 0.74902);
464
642
  }
465
643
 
466
644
  [data-theme="light"] {
467
- --ntl-active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
645
+ --ntl-active-switcher-tab-bg-color: rgb(4.7059% 16.471% 16.471% / 0.04706);
468
646
  --ntl-badge-bg-color: var(--ntl-neutral-100);
469
647
  --ntl-badge-border-color: var(--ntl-neutral-300);
470
648
  --ntl-badge-text-color: var(--ntl-neutral-500);
471
649
  --ntl-blockquote-accent-color: var(--ntl-blue-700);
472
- --ntl-button-outline-bg-color: color(srgb 0 0 0 / 0);
473
- --ntl-button-outline-bg-color-hover: color(srgb 0.8392156862745098 0.9803921568627451 0.9764705882352941);
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%);
474
652
  --ntl-button-outline-stroke-color: var(--ntl-neutral-800);
475
653
  --ntl-button-outline-text-color: var(--ntl-neutral-800);
476
654
  --ntl-button-primary-bg-color: var(--ntl-teal-200);
477
655
  --ntl-button-primary-bg-color-hover: var(--ntl-teal-100);
478
656
  --ntl-button-primary-text-color: var(--ntl-neutral-800);
479
- --ntl-button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
480
- --ntl-button-secondary-bg-color-hover: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.14901960784313725);
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);
481
659
  --ntl-button-secondary-text-color: var(--ntl-neutral-800);
482
660
  --ntl-card-bg-color: var(--ntl-neutral-000);
483
661
  --ntl-card-border-color: var(--ntl-neutral-200);
@@ -487,10 +665,10 @@
487
665
  --ntl-color-bg-2: var(--ntl-neutral-100);
488
666
  --ntl-color-bg-3: var(--ntl-neutral-200);
489
667
  --ntl-color-bg-inverse: var(--ntl-neutral-300);
490
- --ntl-color-bg-translucent: color(srgb 1 1 1 / 0.9019607843137255);
491
- --ntl-color-border-default: color(srgb 0 0 0 / 0.14901960784313725);
668
+ --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
669
+ --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
492
670
  --ntl-color-border-strong: var(--ntl-neutral-300);
493
- --ntl-color-border-subtle: color(srgb 0 0 0 / 0.06274509803921569);
671
+ --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
494
672
  --ntl-color-brand-primary: var(--ntl-blue-700);
495
673
  --ntl-color-brand-primary-hover: var(--ntl-blue-800);
496
674
  --ntl-color-brand-secondary: var(--ntl-teal-300);
@@ -512,10 +690,10 @@
512
690
  --ntl-color-link-default: var(--ntl-blue-700);
513
691
  --ntl-color-link-hover: var(--ntl-blue-800);
514
692
  --ntl-color-link-inverse: var(--ntl-blue-400);
515
- --ntl-color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
693
+ --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
516
694
  --ntl-color-logo-spark: var(--ntl-teal-400);
517
695
  --ntl-color-logo-type: var(--ntl-teal-800);
518
- --ntl-color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
696
+ --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
519
697
  --ntl-color-success-bg: var(--ntl-green-100);
520
698
  --ntl-color-success-border: var(--ntl-green-300);
521
699
  --ntl-color-success-text: var(--ntl-green-800);
@@ -540,6 +718,7 @@
540
718
  --ntl-neutral-600: var(--ntl-neutral-light-600);
541
719
  --ntl-neutral-700: var(--ntl-neutral-light-700);
542
720
  --ntl-neutral-800: var(--ntl-neutral-light-800);
721
+ --ntl-neutral-900: var(--ntl-neutral-light-900);
543
722
  --ntl-search-answer-message-color: var(--ntl-neutral-200);
544
723
  --ntl-search-back-btn-bg-color: var(--ntl-neutral-100);
545
724
  --ntl-search-bg-color: var(--ntl-neutral-000);
@@ -557,6 +736,201 @@
557
736
  --ntl-tabbed-content-tab-text-color-active: var(--ntl-color-icon);
558
737
  --ntl-testimonial-logo-hover-color: var(--ntl-neutral-500);
559
738
  --ntl-testimonial-logo-inactive-color: var(--ntl-neutral-400);
560
- --ntl-title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
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);
561
838
  }
562
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);
846
+ --ntl-button-outline-bg-color: rgb(0% 0% 0% / 0);
847
+ --ntl-button-outline-bg-color-hover: rgb(83.922% 98.039% 97.647%);
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);
853
+ --ntl-button-secondary-bg-color: rgb(4.7059% 16.471% 16.471% / 0.09804);
854
+ --ntl-button-secondary-bg-color-hover: rgb(4.7059% 16.471% 16.471% / 0.14902);
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);
864
+ --ntl-color-bg-translucent: rgb(100% 100% 100% / 0.90196);
865
+ --ntl-color-border-default: rgb(0% 0% 0% / 0.14902);
866
+ --ntl-color-border-strong: var(--ntl-neutral-300);
867
+ --ntl-color-border-subtle: rgb(0% 0% 0% / 0.06275);
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);
889
+ --ntl-color-logo-inactive: rgb(70.196% 70.196% 70.196%);
890
+ --ntl-color-logo-spark: var(--ntl-teal-400);
891
+ --ntl-color-logo-type: var(--ntl-teal-800);
892
+ --ntl-color-stroke: rgb(0% 0% 0% / 0.14902);
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);
906
+ --ntl-filter-invert: none;
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);
935
+ --ntl-title-text-color: rgb(32.941% 35.294% 38.039% / 0.74902);
936
+ }