fluent-svelte-extra 1.8.4 → 1.8.6

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 +9 -1
  2. package/package.json +2 -1
  3. package/switchable.css +401 -0
  4. package/theme.css +4 -2
package/README.md CHANGED
@@ -6,6 +6,14 @@ A fork of fluent-svelte which is in active development.
6
6
 
7
7
  Components that we develop won't be in docs. But you can view the detailed usage [here](https://github.com/OpenAnime/fluent-svelte-extra/blob/main/src/routes/test/index.svelte)
8
8
 
9
+ # Switching between themes
10
+
11
+ Along with the new components, we have also added the ability to switch between dark and light themes. To switch between themes you should import `fluent-svelte-extra/switchable.css` in your layout.svelte file and add `fds-theme-dark` or `fds-theme-light` classes to your `<html>` tag in app.html file. `fluent-svelte-extra/switchable.css` does not contain anything that can be controlled by `prefers-color-scheme`
12
+
13
+ If you use `fluent-svelte-extra/theme.css` it will use the system default until you add `fds-theme-dark` or `fds-theme-light` classes to your `<html>` tag.
14
+
15
+ Based on your needs, you can select a file which will be the best fit for your project.
16
+
9
17
  # Note
10
18
 
11
- Thanks to the [creator](https://github.com/Tropix126) of [fluent-svelte](https://github.com/tropix126/fluent-svelte) library for making such an awesome library!
19
+ Thanks to the [creator](https://github.com/Tropix126) of [fluent-svelte](https://github.com/tropix126/fluent-svelte) library for making such an awesome library!
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.8.4",
3
+ "version": "1.8.6",
4
4
  "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
5
5
  "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
6
6
  "license": "MIT",
@@ -145,6 +145,7 @@
145
145
  "./ScrollView/ScrollView.svelte": "./ScrollView/ScrollView.svelte",
146
146
  "./Slider/Slider.scss": "./Slider/Slider.scss",
147
147
  "./Slider/Slider.svelte": "./Slider/Slider.svelte",
148
+ "./switchable.css": "./switchable.css",
148
149
  "./TextArea/TextArea.scss": "./TextArea/TextArea.scss",
149
150
  "./TextArea/TextArea.svelte": "./TextArea/TextArea.svelte",
150
151
  "./TextBlock/TextBlock.scss": "./TextBlock/TextBlock.scss",
package/switchable.css ADDED
@@ -0,0 +1,401 @@
1
+ /* Global Variables */
2
+ :root {
3
+ /* Accent Colors */
4
+ --fds-accent-light-3: 191, 98%, 80%;
5
+ --fds-accent-light-2: 199, 99%, 69%;
6
+ --fds-accent-light-1: 205, 100%, 49%;
7
+ --fds-accent-base: 206, 100%, 42%;
8
+ --fds-accent-dark-1: 209, 100%, 36%;
9
+ --fds-accent-dark-2: 215, 100%, 29%;
10
+ --fds-accent-dark-3: 226, 100%, 20%;
11
+
12
+ /* Font Families */
13
+ --fds-font-family-fallback: "Segoe UI", -apple-system, ui-sans-serif, system-ui,
14
+ BlinkMacSystemFont, Helvetica, Arial, sans-serif;
15
+ --fds-font-family-text: "Segoe UI Variable Text", "Seoge UI Variable Static Text",
16
+ var(--fds-font-family-fallback);
17
+ --fds-font-family-small: "Segoe UI Variable Small", "Seoge UI Variable Static Small",
18
+ var(--fds-font-family-fallback);
19
+ --fds-font-family-display: "Segoe UI Variable Display", "Seoge UI Variable Static Display",
20
+ var(--fds-font-family-fallback);
21
+
22
+ /* Font Size */
23
+ --fds-caption-font-size: 12px;
24
+ --fds-body-font-size: 14px;
25
+ --fds-body-large-font-size: 18px;
26
+ --fds-subtitle-font-size: 20px;
27
+ --fds-title-font-size: 28px;
28
+ --fds-title-large-font-size: 40px;
29
+ --fds-display-font-size: 68px;
30
+
31
+ /* Roundness */
32
+ --fds-control-corner-radius: 4px;
33
+ --fds-overlay-corner-radius: 8px;
34
+
35
+ /* Duration */
36
+ --fds-control-slow-duration: 333ms;
37
+ --fds-control-normal-duration: 250ms;
38
+ --fds-control-fast-duration: 167ms;
39
+ /* --fds-control-fast-after-duration: 168ms; */
40
+ --fds-control-faster-duration: 83ms;
41
+
42
+ /* Easing */
43
+ --fds-control-fast-out-slow-in-easing: cubic-bezier(0, 0, 0, 1);
44
+
45
+ /* Focus Stroke */
46
+ --fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner),
47
+ 0 0 0 3px var(--fds-focus-stroke-outer);
48
+
49
+ /* Acrylic */
50
+ --fds-acrylic-noise-asset: url("data:image/png;base64,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");
51
+ --fds-acrylic-noise-asset-alpha: url("data:image/png;base64,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");
52
+ --fds-acrylic-blur-factor: blur(60px);
53
+ }
54
+
55
+ /* Reduced Motion Support */
56
+ @media (prefers-reduced-motion: reduce) {
57
+ :root {
58
+ --fds-control-slow-duration: 0ms;
59
+ --fds-control-normal-duration: 0ms;
60
+ --fds-control-fast-duration: 0ms;
61
+ /* --fds-control-fast-after-duration: 0ms; */
62
+ --fds-control-faster-duration: 0ms;
63
+ }
64
+ }
65
+
66
+ /* Class Light Theme Colors */
67
+ .fds-theme-light {
68
+ color-scheme: light;
69
+ /* Text */
70
+ --fds-text-primary: hsla(0, 0%, 0%, 89.56%);
71
+ --fds-text-secondary: hsla(0, 0%, 0%, 60.63%);
72
+ --fds-text-tertiary: hsla(0, 0%, 0%, 44.58%);
73
+ --fds-text-disabled: hsla(0, 0%, 0%, 36.14%);
74
+
75
+ /* Accent */
76
+ --fds-accent-default: hsl(var(--fds-accent-dark-1));
77
+ --fds-accent-secondary: hsla(var(--fds-accent-dark-1), 90%);
78
+ --fds-accent-tertiary: hsla(var(--fds-accent-dark-1), 80%);
79
+ --fds-accent-disabled: hsla(0, 0%, 0%, 21.69%);
80
+
81
+ /* Accent Text */
82
+ --fds-accent-text-primary: hsl(var(--fds-accent-dark-2));
83
+ --fds-accent-text-secondary: hsl(var(--fds-accent-dark-3));
84
+ --fds-accent-text-tertiary: hsl(var(--fds-accent-dark-1));
85
+ --fds-accent-text-disabled: hsla(0, 0%, 0%, 36.14%);
86
+
87
+ /* Text on Accent */
88
+ --fds-text-on-accent-primary: hsl(0, 0%, 100%);
89
+ --fds-text-on-accent-secondary: hsla(0, 0%, 100%, 70%);
90
+ --fds-text-on-accent-disabled: var(--fds-text-on-accent-secondary);
91
+ --fds-text-on-accent-selected: var(--fds-text-on-accent-primary);
92
+
93
+ /* Control Fill */
94
+ --fds-control-fill-transparent: transparent;
95
+ --fds-control-fill-default: hsla(0, 0%, 100%, 70%);
96
+ --fds-control-fill-secondary: hsla(0, 0%, 98%, 50%);
97
+ --fds-control-fill-tertiary: hsla(0, 0%, 98%, 30%);
98
+ --fds-control-fill-disabled: var(--fds-control-fill-tertiary);
99
+ --fds-control-fill-input-active: hsl(0, 0%, 100%);
100
+
101
+ /* Control Strong Fill */
102
+ --fds-control-strong-fill-default: hsla(0, 0%, 0%, 44.58%);
103
+ --fds-control-strong-fill-disabled: hsla(0, 0%, 0%, 31.73%);
104
+
105
+ /* Control Solid Fill */
106
+ --fds-control-solid-fill-default: hsl(0, 0%, 100%);
107
+
108
+ /* Control Alt Fill */
109
+ --fds-control-alt-fill-transparent: transparent;
110
+ --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 2.41%);
111
+ --fds-control-alt-fill-tertiary: hsla(0, 0%, 0%, 5.78%);
112
+ --fds-control-alt-fill-quarternary: hsla(0, 0%, 0%, 9.24%);
113
+ --fds-control-alt-fill-disabled: var(--fds-control-alt-fill-transparent);
114
+
115
+ /* Control on Image Fill */
116
+ --fds-control-on-image-fill-default: hsla(0, 0%, 100%, 79%);
117
+ --fds-control-on-image-fill-secondary: hsl(0, 0%, 95%);
118
+ --fds-control-on-image-fill-tertiary: hsl(0, 0%, 92%);
119
+ --fds-control-on-image-fill-disabled: transparent;
120
+
121
+ /* Subtle Fill */
122
+ --fds-subtle-fill-transparent: transparent;
123
+ --fds-subtle-fill-secondary: hsla(0, 0%, 0%, 3.73%);
124
+ --fds-subtle-fill-tertiary: hsla(0, 0%, 0%, 2.41%);
125
+ --fds-subtle-fill-disabled: var(--fds-subtle-fill-transparent);
126
+
127
+ /* Control Stroke */
128
+ --fds-control-stroke-default: hsla(0, 0%, 0%, 5.78%);
129
+ --fds-control-stroke-secondary: hsla(0, 0%, 0%, 16.22%);
130
+
131
+ /* Control Strong Stroke */
132
+ --fds-control-strong-stroke-default: hsla(0, 0%, 0%, 44.58%);
133
+ --fds-control-strong-stroke-disabled: hsla(0, 0%, 0%, 21.69%);
134
+
135
+ /* Control Stroke on Accent */
136
+ --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
137
+ --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 40%);
138
+ --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
139
+ --fds-control-stroke-on-accent-disabled: var(--fds-control-stroke-on-accent-default);
140
+
141
+ /* Control Strong Stroke on Image */
142
+ --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 100%, 35%);
143
+
144
+ /* Card Stroke */
145
+ --fds-card-stroke-default: hsla(0, 0%, 0%, 5.78%);
146
+ --fds-card-stroke-default-solid: hsl(0, 0%, 92%);
147
+
148
+ /* Surface Stroke */
149
+ --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
150
+ --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 5.78%);
151
+
152
+ /* Divider Stroke */
153
+ --fds-divider-stroke-default: hsla(0, 0%, 0%, 8.03%);
154
+
155
+ /* Focus Stroke */
156
+ --fds-focus-stroke-outer: hsla(0, 0%, 0%, 89.56%);
157
+ --fds-focus-stroke-inner: hsl(0, 0%, 100%);
158
+
159
+ /* Card Background */
160
+ --fds-card-background-default: hsla(0, 0%, 100%, 70%);
161
+ --fds-card-background-secondary: hsla(0, 0%, 96%, 50%);
162
+ /* --fds-card-background-tertiary: hsl(0, 0%, 100%); */
163
+
164
+ /* Smoke Background */
165
+ --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
166
+
167
+ /* Layer */
168
+ --fds-layer-background-default: hsla(0, 0%, 100%, 50%);
169
+ --fds-layer-background-alt: hsl(0, 0%, 100%);
170
+
171
+ /* Layer on Acrylic */
172
+ --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 25%);
173
+ --fds-layer-on-accent-acrylic-background-default: var(
174
+ --fds-layer-on-acrylic-background-default
175
+ );
176
+
177
+ /* Solid Background */
178
+ --fds-solid-background-base: hsl(0, 0%, 95%);
179
+ --fds-solid-background-secondary: hsl(0, 0%, 93%);
180
+ --fds-solid-background-tertiary: hsl(0, 0%, 98%);
181
+ --fds-solid-background-quarternary: hsl(0, 0%, 100%);
182
+
183
+ /* Mica Background */
184
+ /* --fds-mica-background-base: linear-gradient(0deg, hsla(0, 0%, 95%, 0.5), hsla(0, 0%, 95%, 0.5)), hsl(0, 0%, 95%); */
185
+
186
+ /* Acrylic Background */
187
+ --fds-acrylic-background-default: transparent, rgba(252, 252, 252, 85%);
188
+ --fds-acrylic-background-base: transparent, rgba(243, 243, 243, 90%);
189
+
190
+ /* Accent Acrylic Background */
191
+ /* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
192
+ /* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(153, 235, 255, 80%), rgba(153, 235, 255, 80%)), rgba(153, 235, 255, 90%); */
193
+
194
+ /* System */
195
+ --fds-system-attention: hsl(209, 100%, 36%);
196
+ --fds-system-success: hsl(120, 78%, 27%);
197
+ --fds-system-caution: hsl(36, 100%, 31%);
198
+ --fds-system-critical: hsl(5, 75%, 44%);
199
+ --fds-system-neutral: hsla(0, 0%, 0%, 44.58%);
200
+
201
+ /* System Solid */
202
+ --fds-system-solid-neutral: hsl(0, 0%, 54%);
203
+
204
+ /* System Background */
205
+ --fds-system-background-attention: hsla(0, 0%, 96%, 50%);
206
+ --fds-system-background-success: hsl(115, 58%, 92%);
207
+ --fds-system-background-caution: hsl(47, 100%, 90%);
208
+ --fds-system-background-critical: hsl(355, 85%, 95%);
209
+
210
+ /* System Background Solid */
211
+ --fds-system-background-solid-attention: hsl(0, 0%, 97%);
212
+ --fds-system-background-solid-neutral: hsl(0, 0%, 95%);
213
+
214
+ /* Borders */
215
+ --fds-control-border-default: var(--fds-control-stroke-default)
216
+ var(--fds-control-stroke-default) var(--fds-control-stroke-secondary)
217
+ var(--fds-control-stroke-default);
218
+
219
+ /* Shadows */
220
+ --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 4%);
221
+ --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 14%);
222
+ --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 14%);
223
+ --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 18.76%), 0px 2px 21px hsl(0, 0%, 0%, 14.74%);
224
+
225
+ /* Shell Shadows */
226
+ --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 18%),
227
+ 0px 2px 10.67px hsla(0, 0%, 0%, 0.1474);
228
+ --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 28%),
229
+ 0px 2px 21px hsla(0, 0%, 0%, 22%);
230
+ }
231
+
232
+ /* Class Dark Theme Colors */
233
+
234
+ .fds-theme-dark {
235
+ color-scheme: dark;
236
+ /* Text */
237
+ --fds-text-primary: hsla(0, 0%, 100%, 100%);
238
+ --fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
239
+ --fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
240
+ --fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
241
+
242
+ /* Accent */
243
+ --fds-accent-default: hsla(var(--fds-accent-light-2));
244
+ --fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
245
+ --fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
246
+ --fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
247
+
248
+ /* Accent Text */
249
+ --fds-accent-text-primary: hsl(var(--fds-accent-light-3));
250
+ --fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
251
+ --fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
252
+ --fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
253
+
254
+ /* Text on Accent */
255
+ --fds-text-on-accent-primary: hsl(0, 0%, 0%);
256
+ --fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
257
+ --fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
258
+ --fds-text-on-accent-selected: hsl(0, 0%, 100%);
259
+
260
+ /* Control Fill */
261
+ --fds-control-fill-transparent: transparent;
262
+ --fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
263
+ --fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
264
+ --fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
265
+ --fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
266
+ --fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
267
+
268
+ /* Control Strong Fill */
269
+ --fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
270
+ --fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
271
+
272
+ /* Control Solid Fill */
273
+ --fds-control-solid-fill-default: hsl(0, 0%, 27%);
274
+
275
+ /* Control Alt Fill */
276
+ --fds-control-alt-fill-transparent: transparent;
277
+ --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
278
+ --fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
279
+ --fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
280
+ --fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
281
+
282
+ /* Control on Image Fill */
283
+ --fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
284
+ --fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
285
+ --fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
286
+ --fds-control-on-image-fill-disabled: transparent;
287
+
288
+ /* Subtle Fill */
289
+ --fds-subtle-fill-transparent: transparent;
290
+ --fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
291
+ --fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
292
+ --fds-subtle-fill-disabled: transparent;
293
+
294
+ /* Control Stroke */
295
+ --fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
296
+ --fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
297
+
298
+ /* Control Strong Stroke */
299
+ --fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
300
+ --fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
301
+
302
+ /* Control Stroke on Accent */
303
+ --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
304
+ --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
305
+ --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
306
+ --fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
307
+
308
+ /* Control Strong Stroke on Image */
309
+ --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
310
+
311
+ /* Card Stroke */
312
+ --fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
313
+ --fds-card-stroke-default-solid: hsl(0, 0%, 11%);
314
+
315
+ /* Surface Stroke */
316
+ --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
317
+ --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
318
+
319
+ /* Divider Stroke */
320
+ --fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
321
+
322
+ /* Focus Stroke */
323
+ --fds-focus-stroke-outer: hsl(0, 0%, 100%);
324
+ --fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
325
+
326
+ /* Card Background */
327
+ --fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
328
+ --fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
329
+ /* --fds-card-background-tertiary: unset; */
330
+
331
+ /* Smoke Background */
332
+ --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
333
+
334
+ /* Layer */
335
+ --fds-layer-background-default: hsla(0, 0%, 23%, 30%);
336
+ --fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
337
+
338
+ /* Layer on Acrylic */
339
+ --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
340
+ --fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
341
+
342
+ /* Solid Background */
343
+ --fds-solid-background-base: hsl(0, 0%, 13%);
344
+ --fds-solid-background-secondary: hsl(0, 0%, 11%);
345
+ --fds-solid-background-tertiary: hsl(0, 0%, 16%);
346
+ --fds-solid-background-quarternary: hsl(0, 0%, 17%);
347
+
348
+ /* Mica Background */
349
+ /* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
350
+
351
+ /* Acrylic Background */
352
+ --fds-acrylic-background-default: linear-gradient(
353
+ 0deg,
354
+ rgb(44, 44, 44, 15%),
355
+ rgb(44, 44, 44, 15%)
356
+ ),
357
+ rgba(44, 44, 44, 96%);
358
+ --fds-acrylic-background-base: linear-gradient(0deg, rgb(32, 32, 32, 50%), rgb(32, 32, 32, 50%)),
359
+ rgba(32, 32, 32, 96%);
360
+
361
+ /* Accent Acrylic Background */
362
+ /* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
363
+ /* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */
364
+
365
+ /* System */
366
+ --fds-system-attention: hsl(199, 100%, 69%);
367
+ --fds-system-success: hsl(113, 51%, 58%);
368
+ --fds-system-caution: hsl(54, 100%, 49%);
369
+ --fds-system-critical: hsl(354, 100%, 80%);
370
+ --fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
371
+
372
+ /* System Solid */
373
+ --fds-system-solid-neutral: hsl(0, 0%, 62%);
374
+
375
+ /* System Background */
376
+ --fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
377
+ --fds-system-background-success: hsl(67, 39%, 17%);
378
+ --fds-system-background-caution: hsl(40, 46%, 18%);
379
+ --fds-system-background-critical: hsl(2, 28%, 21%);
380
+
381
+ /* System Background Solid */
382
+ --fds-system-background-solid-attention: hsl(0, 0%, 18%);
383
+ --fds-system-background-solid-neutral: hsl(0, 0%, 62%);
384
+
385
+ /* Borders */
386
+ --fds-control-border-default: var(--fds-control-stroke-secondary)
387
+ var(--fds-control-stroke-default) var(--fds-control-stroke-default)
388
+ var(--fds-control-stroke-default);
389
+
390
+ /* Shadows */
391
+ --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
392
+ --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
393
+ --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
394
+ --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
395
+
396
+ /* Shell Shadows */
397
+ --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
398
+ 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
399
+ --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
400
+ 0px 2px 21px hsla(0, 0%, 0%, 0.55);
401
+ }
package/theme.css CHANGED
@@ -407,7 +407,8 @@
407
407
  }
408
408
 
409
409
  /* Class Light Theme Colors */
410
- :global(.fds-theme-light) {
410
+ .fds-theme-light {
411
+ color-scheme: light !important;
411
412
  /* Text */
412
413
  --fds-text-primary: hsla(0, 0%, 0%, 89.56%);
413
414
  --fds-text-secondary: hsla(0, 0%, 0%, 60.63%);
@@ -573,7 +574,8 @@
573
574
 
574
575
  /* Class Dark Theme Colors */
575
576
 
576
- :global(.fds-theme-dark) {
577
+ .fds-theme-dark {
578
+ color-scheme: dark !important;
577
579
  /* Text */
578
580
  --fds-text-primary: hsla(0, 0%, 100%, 100%);
579
581
  --fds-text-secondary: hsla(0, 0%, 100%, 78.6%);