@netlify/spark-ui 0.0.47-alpha → 1.0.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 (55) hide show
  1. package/README.md +24 -0
  2. package/dist/assets/SearchHeading.css +1 -1
  3. package/dist/assets/SearchLink.css +1 -1
  4. package/dist/assets/SearchModal.css +1 -1
  5. package/dist/assets/SearchToggle.css +1 -1
  6. package/dist/chunks/compat.module.DT16W4Wr.js +175 -0
  7. package/dist/chunks/hooks.module.CNV9mxng.js +138 -0
  8. package/dist/chunks/{useTimeout.DYuvQwFN.js → useTimeout.DOkYFG64.js} +1 -1
  9. package/dist/components/index.d.ts +0 -4
  10. package/dist/components/preact/Modal/Modal.js +1 -1
  11. package/dist/components/preact/SearchModal/components/SearchInput.js +2 -2
  12. package/dist/components/preact/SearchModal/components/SearchLink/SearchLink.js +1 -1
  13. package/dist/components/preact/SearchModal/components/SearchModal/SearchModal.js +1 -1
  14. package/dist/components/preact/SearchModal/components/SearchToggle/SearchToggle.js +3 -3
  15. package/dist/components/preact/SearchModal/components/SearchWindow.js +1 -1
  16. package/dist/components/preact/SearchModal/hooks/useKeyboardNav.js +1 -1
  17. package/dist/components/preact/SearchModal/hooks/useSearch.js +2 -2
  18. package/dist/components/preact/SearchModal/hooks/useSearchHotkeys.js +1 -1
  19. package/dist/components/preact/SearchModal/hooks/useSearchLogger.js +1 -1
  20. package/dist/components/preact/SearchModal/hooks/useSearchParams.js +1 -1
  21. package/dist/components/preact/SearchModal/hooks/useSearchToggles.js +1 -1
  22. package/dist/components/preact/index.d.ts +0 -1
  23. package/dist/components/preact/index.js +5 -7
  24. package/package.json +8 -5
  25. package/packages/assets/fonts/README.md +5 -0
  26. package/packages/assets/fonts/figtree/Figtree-Italic[wght].woff2 +0 -0
  27. package/packages/assets/fonts/figtree/Figtree[wght].woff2 +0 -0
  28. package/packages/assets/fonts/instrument-sans/InstrumentSans-Italic[wdth,wght].woff2 +0 -0
  29. package/packages/assets/fonts/instrument-sans/InstrumentSans[wdth,wght].woff2 +0 -0
  30. package/packages/assets/fonts/martian-mono/MartianMono-Bold.woff2 +0 -0
  31. package/packages/assets/fonts/martian-mono/MartianMono-Medium.woff2 +0 -0
  32. package/packages/assets/fonts/martian-mono/MartianMono-Regular.woff2 +0 -0
  33. package/packages/assets/fonts/martian-mono/MartianMono-SemiBold.woff2 +0 -0
  34. package/packages/components/Ticker.astro +1 -0
  35. package/packages/components/index.ts +0 -6
  36. package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css +6 -6
  37. package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +18 -17
  38. package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +27 -26
  39. package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.css +8 -2
  40. package/packages/components/preact/SearchModal/components/SearchToggle/SearchToggle.tsx +1 -1
  41. package/packages/components/preact/index.ts +0 -1
  42. package/packages/styles/base.css +1 -0
  43. package/packages/styles/buttons.css +40 -33
  44. package/packages/styles/code-block.css +15 -11
  45. package/packages/styles/fonts.css +125 -10
  46. package/packages/styles/layout.css +4 -0
  47. package/packages/styles/reset.css +97 -0
  48. package/packages/styles/tokens.css +162 -66
  49. package/dist/assets/ChatApp.css +0 -1
  50. package/dist/chunks/compat.module.BjTzMHXJ.js +0 -296
  51. package/dist/chunks/hooks.module.DeYLzLnU.js +0 -177
  52. package/dist/components/preact/ChatApp/ChatApp.d.ts +0 -2
  53. package/dist/components/preact/ChatApp/ChatApp.js +0 -5346
  54. package/packages/components/preact/ChatApp/ChatApp.css +0 -142
  55. package/packages/components/preact/ChatApp/ChatApp.tsx +0 -237
package/packages/styles/reset.css ADDED
@@ -0,0 +1,97 @@
1
+ /* Box sizing rules */
2
+ *,
3
+ *::before,
4
+ *::after {
5
+ box-sizing: border-box;
6
+ }
7
+
8
+ /* Prevent font size inflation */
9
+ html {
10
+ -moz-text-size-adjust: none;
11
+ -webkit-text-size-adjust: none;
12
+ text-size-adjust: none;
13
+ }
14
+
15
+ /* Remove default margin in favour of better control in authored CSS */
16
+ body,
17
+ h1,
18
+ h2,
19
+ h3,
20
+ h4,
21
+ p,
22
+ figure,
23
+ blockquote,
24
+ dl,
25
+ dd {
26
+ margin-block-end: 0;
27
+ }
28
+
29
+ ul {
30
+ padding-inline-start: 1rem;
31
+ }
32
+
33
+ ol {
34
+ padding-inline-start: 1.2rem;
35
+ }
36
+
37
+ /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
38
+ ul[role='list'],
39
+ ol[role='list'] {
40
+ list-style: none;
41
+ }
42
+
43
+ /* Set core body defaults */
44
+ body {
45
+ min-height: 100vh;
46
+ line-height: 1.5;
47
+ }
48
+
49
+ /* Set shorter line heights on headings and interactive elements */
50
+ h1,
51
+ h2,
52
+ h3,
53
+ h4,
54
+ button,
55
+ input,
56
+ label {
57
+ line-height: 1.1;
58
+ }
59
+
60
+ /* Balance text wrapping on headings */
61
+ h1,
62
+ h2,
63
+ h3,
64
+ h4 {
65
+ text-wrap: balance;
66
+ }
67
+
68
+ /* A elements that don't have a class get default styles */
69
+ a:not([class]) {
70
+ text-decoration-skip-ink: auto;
71
+ }
72
+
73
+ /* Make images easier to work with */
74
+ img,
75
+ picture {
76
+ max-width: 100%;
77
+ display: block;
78
+ }
79
+
80
+ /* Inherit fonts for inputs and buttons */
81
+ input,
82
+ button,
83
+ textarea,
84
+ select {
85
+ font-family: inherit;
86
+ font-size: inherit;
87
+ }
88
+
89
+ /* Make sure textareas without a rows attribute are not tiny */
90
+ textarea:not([rows]) {
91
+ min-height: 10em;
92
+ }
93
+
94
+ /* Anything that has been anchored to should have extra scroll margin */
95
+ :target {
96
+ scroll-margin-block: 5ex;
97
+ }
package/packages/styles/tokens.css CHANGED
@@ -3,6 +3,7 @@
3
3
  * ------------------------------------------- */
4
4
 
5
5
  :root {
6
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
6
7
  --blue-000: color(srgb 0.9294117647058824 0.9568627450980393 1);
7
8
  --blue-100: color(srgb 0.803921568627451 0.8862745098039215 1);
8
9
  --blue-200: color(srgb 0.7098039215686275 0.8235294117647058 0.984313725490196);
@@ -13,39 +14,65 @@
13
14
  --blue-700: color(srgb 0.1803921568627451 0.3176470588235294 0.9294117647058824);
14
15
  --blue-800: color(srgb 0.12549019607843137 0.21176470588235294 0.6313725490196078);
15
16
  --blue-900: color(srgb 0.10588235294117647 0.12549019607843137 0.3568627450980392);
16
- --color-bg-1: var(--neutral-000);
17
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
18
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
19
+ --button-outline-stroke-color: var(--neutral-800);
20
+ --button-outline-text-color: var(--neutral-800);
21
+ --button-primary-bg-color: var(--teal-200);
22
+ --button-primary-bg-color-hover: var(--teal-100);
23
+ --button-primary-text-color: var(--neutral-800);
24
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
25
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
26
+ --button-secondary-text-color: var(--neutral-800);
27
+ --code-bg-color: var(--teal-900);
28
+ --color-bg: var(--neutral-000);
17
29
  --color-bg-2: var(--neutral-100);
18
30
  --color-bg-3: var(--neutral-200);
19
- --color-border: var(--neutral-200);
20
- --color-brand: var(--blue-700);
21
- --color-brand-alt: var(--teal-200);
22
31
  --color-disabled-bg: var(--neutral-200);
23
32
  --color-disabled-border: var(--neutral-400);
24
33
  --color-disabled-text: var(--neutral-400);
34
+ --color-icon: var(--blue-700);
25
35
  --color-invalid-bg: var(--red-100);
26
36
  --color-invalid-border: var(--red-600);
27
37
  --color-invalid-text: var(--red-600);
28
- --color-link: var(--neutral-800);
38
+ --color-link: var(--blue-700);
39
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
40
+ --color-logo-spark: var(--teal-400);
41
+ --color-logo-type: var(--teal-800);
42
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
29
43
  --color-success-bg: var(--green-100);
30
44
  --color-success-border: var(--green-300);
31
45
  --color-success-text: var(--green-800);
32
- --color-text-1: var(--neutral-800);
33
- --color-text-2: var(--neutral-600);
34
- --color-text-3: var(--neutral-400);
46
+ --color-text: var(--neutral-600);
35
47
  --color-text-accent: var(--teal-000);
36
- --color-text-inverse: var(--neutral-100);
48
+ --color-text-weak: var(--neutral-500);
49
+ --color-text-weaker: var(--neutral-400);
37
50
  --color-warning-bg: var(--gold-100);
38
51
  --color-warning-border: var(--gold-300);
39
52
  --color-warning-text: var(--gold-800);
40
- --font-bold: 800;
41
- --font-light: 300;
42
- --font-medium: 500;
43
- --font-monospace: ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
44
- --font-primary: "Mulish", system-ui, "Helvetica", sans-serif;
45
- --font-regular: 400;
46
- --font-secondary: "Pacaembu", system-ui, "Helvetica", sans-serif;
47
- --font-semibold: 680;
48
- --font-semilight: 350;
53
+ --eyebrow-text-color: var(--blue-700);
54
+ --font-family-display: "Figtree", system-ui, "Helvetica", sans-serif;
55
+ --font-family-mono: "Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
56
+ --font-family-text: "Instrument Sans", system-ui, "Helvetica", sans-serif;
57
+ --font-size-display-2xl: 4rem;
58
+ --font-size-display-2xs: 1.125rem;
59
+ --font-size-display-3xl: 4.5rem;
60
+ --font-size-display-4xl: 5rem;
61
+ --font-size-display-lg: 3rem;
62
+ --font-size-display-md: 2.5rem;
63
+ --font-size-display-sm: 2rem;
64
+ --font-size-display-xl: 3.5rem;
65
+ --font-size-display-xs: 1.5rem;
66
+ --font-size-text-lg: 1.125rem;
67
+ --font-size-text-md: 1rem;
68
+ --font-size-text-sm: 0.875rem;
69
+ --font-size-text-xl: 1.375rem;
70
+ --font-size-text-xs: 0.75rem;
71
+ --font-weight-bold: 700;
72
+ --font-weight-extrabold: 800;
73
+ --font-weight-medium: 500;
74
+ --font-weight-regular: 400;
75
+ --font-weight-semibold: 600;
49
76
  --gold-000: color(srgb 0.9921568627450981 0.9607843137254902 0.8470588235294118);
50
77
  --gold-100: color(srgb 0.9647058823529412 0.8784313725490196 0.6470588235294118);
51
78
  --gold-200: color(srgb 0.9803921568627451 0.803921568627451 0.43529411764705883);
@@ -66,9 +93,10 @@
66
93
  --green-700: color(srgb 0.10196078431372549 0.4196078431372549 0.20392156862745098);
67
94
  --green-800: color(srgb 0.058823529411764705 0.2901960784313726 0.12941176470588237);
68
95
  --green-900: color(srgb 0.08235294117647059 0.16470588235294117 0.09803921568627451);
96
+ --heading-text-color: var(--neutral-800);
69
97
  --line-height-heading: 1.2;
70
98
  --line-height-none: 1;
71
- --line-height-prose: 1.5;
99
+ --line-height-text: 1.5;
72
100
  --neutral-000: color(srgb 1 1 1);
73
101
  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
74
102
  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -99,6 +127,13 @@
99
127
  --purple-700: color(srgb 0.3803921568627451 0.2901960784313726 0.792156862745098);
100
128
  --purple-800: color(srgb 0.2196078431372549 0.16470588235294117 0.6431372549019608);
101
129
  --purple-900: color(srgb 0.1607843137254902 0.12941176470588237 0.25882352941176473);
130
+ --radius-2xl: 1.875rem;
131
+ --radius-l: 0.75rem;
132
+ --radius-m: 0.375rem;
133
+ --radius-pill: 360px;
134
+ --radius-s: 0.25rem;
135
+ --radius-xl: 1rem;
136
+ --radius-xs: 0.125rem;
102
137
  --red-000: color(srgb 0.984313725490196 0.9333333333333333 0.9294117647058824);
103
138
  --red-100: color(srgb 0.984313725490196 0.8274509803921568 0.8156862745098039);
104
139
  --red-200: color(srgb 1 0.7411764705882353 0.7294117647058823);
@@ -123,6 +158,7 @@
123
158
  --space-s: 1rem;
124
159
  --space-xl: 3rem;
125
160
  --space-xs: 0.75rem;
161
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
126
162
  --teal-000: color(srgb 0.8705882352941177 1 0.996078431372549);
127
163
  --teal-100: color(srgb 0.5568627450980392 0.984313725490196 0.9686274509803922);
128
164
  --teal-200: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215);
@@ -133,43 +169,50 @@
133
169
  --teal-700: color(srgb 0.00392156862745098 0.4117647058823529 0.40784313725490196);
134
170
  --teal-800: color(srgb 0.00392156862745098 0.2823529411764706 0.2784313725490196);
135
171
  --teal-900: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
136
- --text-2xl: 1.74rem;
137
- --text-3xl: 2.3rem;
138
- --text-4xl: 3.04rem;
139
- --text-5xl: 4.01rem;
140
- --text-base: 1rem;
141
- --text-lg: 1.125rem;
142
- --text-sm: 0.875rem;
143
- --text-xl: 1.32rem;
144
- --text-xs: 0.8125rem;
172
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
145
173
  }
146
174
 
147
175
  @media (prefers-color-scheme: light) {
148
176
  :root {
149
- --color-bg-1: var(--neutral-000);
177
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
178
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
179
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
180
+ --button-outline-stroke-color: var(--neutral-800);
181
+ --button-outline-text-color: var(--neutral-800);
182
+ --button-primary-bg-color: var(--teal-200);
183
+ --button-primary-bg-color-hover: var(--teal-100);
184
+ --button-primary-text-color: var(--neutral-800);
185
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
186
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
187
+ --button-secondary-text-color: var(--neutral-800);
188
+ --code-bg-color: var(--teal-900);
189
+ --color-bg: var(--neutral-000);
150
190
  --color-bg-2: var(--neutral-100);
151
191
  --color-bg-3: var(--neutral-200);
152
- --color-border: var(--neutral-200);
153
- --color-brand: var(--blue-700);
154
- --color-brand-alt: var(--teal-200);
155
192
  --color-disabled-bg: var(--neutral-200);
156
193
  --color-disabled-border: var(--neutral-400);
157
194
  --color-disabled-text: var(--neutral-400);
195
+ --color-icon: var(--blue-700);
158
196
  --color-invalid-bg: var(--red-100);
159
197
  --color-invalid-border: var(--red-600);
160
198
  --color-invalid-text: var(--red-600);
161
- --color-link: var(--neutral-800);
199
+ --color-link: var(--blue-700);
200
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
201
+ --color-logo-spark: var(--teal-400);
202
+ --color-logo-type: var(--teal-800);
203
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
162
204
  --color-success-bg: var(--green-100);
163
205
  --color-success-border: var(--green-300);
164
206
  --color-success-text: var(--green-800);
165
- --color-text-1: var(--neutral-800);
166
- --color-text-2: var(--neutral-600);
167
- --color-text-3: var(--neutral-400);
207
+ --color-text: var(--neutral-600);
168
208
  --color-text-accent: var(--teal-000);
169
- --color-text-inverse: var(--neutral-100);
209
+ --color-text-weak: var(--neutral-500);
210
+ --color-text-weaker: var(--neutral-400);
170
211
  --color-warning-bg: var(--gold-100);
171
212
  --color-warning-border: var(--gold-300);
172
213
  --color-warning-text: var(--gold-800);
214
+ --eyebrow-text-color: var(--blue-700);
215
+ --heading-text-color: var(--neutral-800);
173
216
  --neutral-000: color(srgb 1 1 1);
174
217
  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
175
218
  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -179,34 +222,51 @@
179
222
  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
180
223
  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
181
224
  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
225
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
226
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
182
227
  }
183
228
  }
184
229
 
185
- [data-mode="light"] {
186
- --color-bg-1: var(--neutral-000);
230
+ [data-theme="light"] {
231
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.047058823529411764);
232
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
233
+ --button-outline-bg-color-hover: color(srgb 0.19607843137254902 0.9019607843137255 0.8862745098039215 / 0.2);
234
+ --button-outline-stroke-color: var(--neutral-800);
235
+ --button-outline-text-color: var(--neutral-800);
236
+ --button-primary-bg-color: var(--teal-200);
237
+ --button-primary-bg-color-hover: var(--teal-100);
238
+ --button-primary-text-color: var(--neutral-800);
239
+ --button-secondary-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.09803921568627451);
240
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
241
+ --button-secondary-text-color: var(--neutral-800);
242
+ --code-bg-color: var(--teal-900);
243
+ --color-bg: var(--neutral-000);
187
244
  --color-bg-2: var(--neutral-100);
188
245
  --color-bg-3: var(--neutral-200);
189
- --color-border: var(--neutral-200);
190
- --color-brand: var(--blue-700);
191
- --color-brand-alt: var(--teal-200);
192
246
  --color-disabled-bg: var(--neutral-200);
193
247
  --color-disabled-border: var(--neutral-400);
194
248
  --color-disabled-text: var(--neutral-400);
249
+ --color-icon: var(--blue-700);
195
250
  --color-invalid-bg: var(--red-100);
196
251
  --color-invalid-border: var(--red-600);
197
252
  --color-invalid-text: var(--red-600);
198
- --color-link: var(--neutral-800);
253
+ --color-link: var(--blue-700);
254
+ --color-logo-inactive: color(srgb 0.7019607843137254 0.7019607843137254 0.7019607843137254);
255
+ --color-logo-spark: var(--teal-400);
256
+ --color-logo-type: var(--teal-800);
257
+ --color-stroke: color(srgb 0 0 0 / 0.14901960784313725);
199
258
  --color-success-bg: var(--green-100);
200
259
  --color-success-border: var(--green-300);
201
260
  --color-success-text: var(--green-800);
202
- --color-text-1: var(--neutral-800);
203
- --color-text-2: var(--neutral-600);
204
- --color-text-3: var(--neutral-400);
261
+ --color-text: var(--neutral-600);
205
262
  --color-text-accent: var(--teal-000);
206
- --color-text-inverse: var(--neutral-100);
263
+ --color-text-weak: var(--neutral-500);
264
+ --color-text-weaker: var(--neutral-400);
207
265
  --color-warning-bg: var(--gold-100);
208
266
  --color-warning-border: var(--gold-300);
209
267
  --color-warning-text: var(--gold-800);
268
+ --eyebrow-text-color: var(--blue-700);
269
+ --heading-text-color: var(--neutral-800);
210
270
  --neutral-000: color(srgb 1 1 1);
211
271
  --neutral-100: color(srgb 0.9647058823529412 0.9647058823529412 0.9686274509803922);
212
272
  --neutral-200: color(srgb 0.9137254901960784 0.9215686274509803 0.9294117647058824);
@@ -216,34 +276,51 @@
216
276
  --neutral-600: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451);
217
277
  --neutral-700: color(srgb 0.20784313725490197 0.22745098039215686 0.24313725490196078);
218
278
  --neutral-800: color(srgb 0.09411764705882353 0.10196078431372549 0.10980392156862745);
279
+ --switcher-tab-bg-color: color(srgb 1 1 1 / 0.047058823529411764);
280
+ --title-text-color: color(srgb 0.32941176470588235 0.35294117647058826 0.3803921568627451 / 0.7490196078431373);
219
281
  }
220
282
 
221
283
  @media (prefers-color-scheme: dark) {
222
284
  :root {
223
- --color-bg-1: var(--neutral-800);
285
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
286
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
287
+ --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
288
+ --button-outline-stroke-color: var(--teal-200);
289
+ --button-outline-text-color: var(--teal-200);
290
+ --button-primary-bg-color: var(--teal-200);
291
+ --button-primary-bg-color-hover: var(--teal-100);
292
+ --button-primary-text-color: var(--neutral-800);
293
+ --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
294
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
295
+ --button-secondary-text-color: var(--teal-200);
296
+ --code-bg-color: var(--teal-900);
297
+ --color-bg: var(--neutral-800);
224
298
  --color-bg-2: var(--neutral-700);
225
299
  --color-bg-3: var(--neutral-600);
226
- --color-border: var(--neutral-200);
227
- --color-brand: var(--teal-200);
228
- --color-brand-alt: var(--blue-700);
229
300
  --color-disabled-bg: var(--neutral-600);
230
301
  --color-disabled-border: var(--neutral-400);
231
302
  --color-disabled-text: var(--neutral-400);
303
+ --color-icon: var(--teal-200);
232
304
  --color-invalid-bg: var(--red-200);
233
305
  --color-invalid-border: var(--red-700);
234
306
  --color-invalid-text: var(--red-700);
235
- --color-link: var(--neutral-100);
307
+ --color-link: var(--teal-200);
308
+ --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
309
+ --color-logo-spark: var(--teal-200);
310
+ --color-logo-type: var(--neutral-000);
311
+ --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
236
312
  --color-success-bg: var(--green-200);
237
313
  --color-success-border: var(--green-400);
238
314
  --color-success-text: var(--green-900);
239
- --color-text-1: var(--neutral-100);
240
- --color-text-2: var(--neutral-300);
241
- --color-text-3: var(--neutral-500);
315
+ --color-text: var(--teal-000);
242
316
  --color-text-accent: var(--teal-600);
243
- --color-text-inverse: var(--teal-800);
317
+ --color-text-weak: var(--neutral-200);
318
+ --color-text-weaker: var(--neutral-400);
244
319
  --color-warning-bg: var(--gold-200);
245
320
  --color-warning-border: var(--gold-400);
246
321
  --color-warning-text: var(--gold-900);
322
+ --eyebrow-text-color: var(--teal-200);
323
+ --heading-text-color: var(--neutral-100);
247
324
  --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
248
325
  --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
249
326
  --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -253,34 +330,51 @@
253
330
  --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
254
331
  --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
255
332
  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
333
+ --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
334
+ --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
256
335
  }
257
336
  }
258
337
 
259
- [data-mode="dark"] {
260
- --color-bg-1: var(--neutral-800);
338
+ [data-theme="dark"] {
339
+ --active-switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117);
340
+ --button-outline-bg-color: color(srgb 0 0 0 / 0);
341
+ --button-outline-bg-color-hover: color(srgb 0.6509803921568628 1 0.9921568627450981 / 0.09803921568627451);
342
+ --button-outline-stroke-color: var(--teal-200);
343
+ --button-outline-text-color: var(--teal-200);
344
+ --button-primary-bg-color: var(--teal-200);
345
+ --button-primary-bg-color-hover: var(--teal-100);
346
+ --button-primary-text-color: var(--neutral-800);
347
+ --button-secondary-bg-color: color(srgb 1 1 1 / 0.09803921568627451);
348
+ --button-secondary-bg-color-hover: color(srgb 0.6549019607843137 1 0.9921568627450981 / 0.14901960784313725);
349
+ --button-secondary-text-color: var(--teal-200);
350
+ --code-bg-color: var(--teal-900);
351
+ --color-bg: var(--neutral-800);
261
352
  --color-bg-2: var(--neutral-700);
262
353
  --color-bg-3: var(--neutral-600);
263
- --color-border: var(--neutral-200);
264
- --color-brand: var(--teal-200);
265
- --color-brand-alt: var(--blue-700);
266
354
  --color-disabled-bg: var(--neutral-600);
267
355
  --color-disabled-border: var(--neutral-400);
268
356
  --color-disabled-text: var(--neutral-400);
357
+ --color-icon: var(--teal-200);
269
358
  --color-invalid-bg: var(--red-200);
270
359
  --color-invalid-border: var(--red-700);
271
360
  --color-invalid-text: var(--red-700);
272
- --color-link: var(--neutral-100);
361
+ --color-link: var(--teal-200);
362
+ --color-logo-inactive: color(srgb 0.2823529411764706 0.36470588235294116 0.36470588235294116);
363
+ --color-logo-spark: var(--teal-200);
364
+ --color-logo-type: var(--neutral-000);
365
+ --color-stroke: color(srgb 1 1 1 / 0.09803921568627451);
273
366
  --color-success-bg: var(--green-200);
274
367
  --color-success-border: var(--green-400);
275
368
  --color-success-text: var(--green-900);
276
- --color-text-1: var(--neutral-100);
277
- --color-text-2: var(--neutral-300);
278
- --color-text-3: var(--neutral-500);
369
+ --color-text: var(--teal-000);
279
370
  --color-text-accent: var(--teal-600);
280
- --color-text-inverse: var(--teal-800);
371
+ --color-text-weak: var(--neutral-200);
372
+ --color-text-weaker: var(--neutral-400);
281
373
  --color-warning-bg: var(--gold-200);
282
374
  --color-warning-border: var(--gold-400);
283
375
  --color-warning-text: var(--gold-900);
376
+ --eyebrow-text-color: var(--teal-200);
377
+ --heading-text-color: var(--neutral-100);
284
378
  --neutral-100: color(srgb 0.9019607843137255 0.9254901960784314 0.9490196078431372);
285
379
  --neutral-200: color(srgb 0.6705882352941176 0.7098039215686275 0.7490196078431373);
286
380
  --neutral-300: color(srgb 0.49411764705882355 0.5294117647058824 0.5725490196078431);
@@ -290,5 +384,7 @@
290
384
  --neutral-700: color(srgb 0.11764705882352941 0.1411764705882353 0.17254901960784313);
291
385
  --neutral-800: color(srgb 0.07058823529411765 0.09411764705882353 0.12156862745098039);
292
386
  --neutral-900: color(srgb 0.023529411764705882 0.043137254901960784 0.06274509803921569);
387
+ --switcher-tab-bg-color: color(srgb 0.047058823529411764 0.16470588235294117 0.16470588235294117 / 0.2);
388
+ --title-text-color: color(srgb 0.8352941176470589 1 0.996078431372549 / 0.7490196078431373);
293
389
  }
294
390
 
package/dist/assets/ChatApp.css DELETED
@@ -1 +0,0 @@
1
- .chatbot-container{display:flex;padding:3rem;height:100vh;background-color:#f7fafc}.chatbot-wrapper{display:flex;flex-direction:column;width:100%;max-width:1024px;margin:0 auto;background-color:#fff;box-shadow:0 4px 6px #0000001a;border-radius:8px;overflow:hidden}.header{background-color:#2d3748;color:#fff;padding:1rem;display:flex;justify-content:space-between;align-items:center}.header-left{display:flex;align-items:center}.header-title{font-weight:700;font-size:1.25rem}.new-chat-button{display:flex;align-items:center;background-color:#4a5568;border-radius:.375rem;padding:.25rem .75rem;font-size:.875rem}.icon{margin-right:.25rem}.chat-container{flex:1;overflow-y:auto;padding:1rem}.error-message{background-color:#fed7d7;border:1px solid #fbd5d5;color:#9b2c2c;padding:1rem;border-radius:.375rem;margin-bottom:1rem}.error-title{font-weight:700}.message{display:flex;flex-direction:column;margin-bottom:1rem}.message-right{display:flex;justify-content:flex-end}.message-bubble{padding:1rem;border-radius:.5rem;max-width:75%}.user-message{background-color:#4299e1;color:#fff}.bot-message{background-color:#edf2f7;color:#2d3748}.input-area{border-top:1px solid #e2e8f0;padding:1rem}.input-form{display:flex;align-items:center}.input-field{flex:1;background-color:#edf2f7;border-radius:.5rem;padding:.5rem 1rem}.input{width:100%;background-color:transparent;border:none;outline:none}.stop-button,.send-button{margin-left:.5rem;background-color:#3182ce;border-radius:9999px;padding:.5rem;color:#fff}.stop-icon{width:1rem;height:1rem}