fluent-svelte-extra 1.5.7 → 1.5.9

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 (7) hide show
  1. package/Flipper/Flipper.svelte +6 -3
  2. package/Flipper/Flipper.svelte.d.ts +2 -0
  3. package/MenuFlyout/MenuFlyoutItem.svelte +1 -0
  4. package/MenuFlyout/MenuFlyoutItem.svelte.d.ts +1 -0
  5. package/RangeSlider/RangeSlider.svelte +1 -1
  6. package/package.json +1 -1
  7. package/theme.css +447 -119
package/Flipper/Flipper.svelte CHANGED
@@ -1,7 +1,10 @@
1
1
  <script >export let direction;
2
+ let className = "";
3
+ export { className as class };
2
4
  </script>
3
5
 
4
- <div class="flipper" on:click>
6
+
7
+ <button class="flipper {className}" on:click {...$$restProps}>
5
8
  {#if direction === "right"}
6
9
  <svg
7
10
  xmlns="http://www.w3.org/2000/svg"
@@ -33,6 +36,6 @@
33
36
  </g>
34
37
  </svg>
35
38
  {/if}
36
- </div>
39
+ </button>
37
40
 
38
- <style>.flipper{fill:currentColor;align-items:center;-webkit-backdrop-filter:blur(30px) saturate(125%);backdrop-filter:blur(30px) saturate(125%);background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-border-default);border-radius:3px;display:flex;height:35px;justify-content:center;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.flipper>svg{transform:scale(.9)}.flipper:hover{fill:currentColor}.flipper:hover>svg{transform:scale(1)}.flipper:active>svg{transform:scale(.8)}</style>
41
+ <style>.flipper{fill:currentColor;align-items:center;-webkit-backdrop-filter:var(--fds-acrylic-blur-factor);backdrop-filter:var(--fds-acrylic-blur-factor);background-color:var(--fds-control-fill-default);border:1px solid var(--fds-control-border-default);border-radius:var(--fds-control-corner-radius);box-shadow:var(--fds-flyout-shadow);color:var(--fds-control-strong-fill-default);display:flex;height:35px;justify-content:center;padding:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.flipper>svg{transform:scale(.9)}.flipper:hover{color:var(--fds-text-primary)}.flipper:hover>svg{transform:scale(1)}.flipper:active>svg{transform:scale(.8)}</style>
package/Flipper/Flipper.svelte.d.ts CHANGED
@@ -1,7 +1,9 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
+ [x: string]: any;
4
5
  direction: "left" | "right";
6
+ class?: string;
5
7
  };
6
8
  events: {
7
9
  click: MouseEvent;
package/MenuFlyout/MenuFlyoutItem.svelte CHANGED
@@ -108,6 +108,7 @@ function handleMouseLeave() {
108
108
  on:mouseenter={handleMouseEnter}
109
109
  on:mouseleave={handleMouseLeave}
110
110
  on:keydown={handleKeyDown}
111
+ on:click
111
112
  {...$$restProps}
112
113
  >
113
114
  <slot name="icon" />
package/MenuFlyout/MenuFlyoutItem.svelte.d.ts CHANGED
@@ -22,6 +22,7 @@ declare const __propDef: {
22
22
  subMenuElement?: HTMLUListElement;
23
23
  };
24
24
  events: {
25
+ click: MouseEvent;
25
26
  change: Event;
26
27
  input: Event;
27
28
  beforeinput: InputEvent;
package/RangeSlider/RangeSlider.svelte CHANGED
@@ -54,4 +54,4 @@ function handleMouseDown() {
54
54
  </div>
55
55
  </div>
56
56
 
57
- <style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{background-color:var(--fds-control-solid-fill-default);block-size:20px;border-radius:100%;box-shadow:0 0 0 1px var(--fds-control-stroke-default);inline-size:20px;justify-content:center;z-index:10}.handle:before{background-color:var(--fds-accent-default);block-size:12px;border-radius:100%;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.handle:hover:before{transform:scale(1.167)}.handle:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}#sliderHolder :global(.thumb-content:before){background:none!important}#sliderHolder :global(.track){background:var(--fds-control-strong-fill-default)!important}#sliderHolder :global(.progress){background:var(--fds-accent-text-primary)!important}</style>
57
+ <style>#vals{justify-content:space-between}#vals,.handle{align-items:center;display:flex}.handle{background-color:var(--fds-control-solid-fill-default);block-size:20px;border-radius:100%;box-shadow:0 0 0 1px var(--fds-control-stroke-default);inline-size:20px;justify-content:center;z-index:10}.handle:before{background-color:var(--fds-accent-default);block-size:12px;border-radius:100%;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.handle:hover:before{transform:scale(1.167)}.handle:active:before{background-color:var(--fds-accent-default);transform:scale(.833)}#sliderHolder :global(.thumb-content:before){background:none!important}#sliderHolder :global(.track){background:var(--fds-control-strong-fill-default)!important}#sliderHolder :global(.progress){background:var(--fds-accent-default)!important}</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.5.7",
3
+ "version": "1.5.9",
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",
package/theme.css CHANGED
@@ -1,8 +1,3 @@
1
- @font-face {
2
- font-family: "Segoe UI Variable";
3
- src: url("/segoeui.ttf");
4
- }
5
-
6
1
  /* Global Variables */
7
2
  :root {
8
3
  /* Accent Colors */
@@ -16,14 +11,13 @@
16
11
 
17
12
  /* Font Families */
18
13
  --fds-font-family-fallback: "Segoe UI", -apple-system, ui-sans-serif, system-ui,
19
- BlinkMacSystemFont, Helvetica, Arial, sans-serif;
14
+ BlinkMacSystemFont, Helvetica, Arial, sans-serif;
20
15
  --fds-font-family-text: "Segoe UI Variable Text", "Seoge UI Variable Static Text",
21
- var(--fds-font-family-fallback);
16
+ var(--fds-font-family-fallback);
22
17
  --fds-font-family-small: "Segoe UI Variable Small", "Seoge UI Variable Static Small",
23
- var(--fds-font-family-fallback);
18
+ var(--fds-font-family-fallback);
24
19
  --fds-font-family-display: "Segoe UI Variable Display", "Seoge UI Variable Static Display",
25
- var(--fds-font-family-fallback);
26
- --fds-font-family-variable: "Segoe UI Variable";
20
+ var(--fds-font-family-fallback);
27
21
 
28
22
  /* Font Size */
29
23
  --fds-caption-font-size: 12px;
@@ -50,11 +44,11 @@
50
44
 
51
45
  /* Focus Stroke */
52
46
  --fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner),
53
- 0 0 0 3px var(--fds-focus-stroke-outer);
47
+ 0 0 0 3px var(--fds-focus-stroke-outer);
54
48
 
55
49
  /* Acrylic */
56
50
  --fds-acrylic-noise-asset: url("data:image/png;base64,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");
57
- --fds-acrylic-blur-factor: blur(60px);
51
+ --fds-acrylic-blur-factor: blur(16px) saturate(125%);
58
52
  }
59
53
 
60
54
  /* Reduced Motion Support */
@@ -68,182 +62,174 @@
68
62
  }
69
63
  }
70
64
 
71
- /* Dark Theme Colors */
65
+ /* Light Theme Colors */
72
66
  @media (prefers-color-scheme: light) {
73
67
  :root {
74
68
  /* Text */
75
- --fds-text-primary: hsla(0, 0%, 100%, 100%);
76
- --fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
77
- --fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
78
- --fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
69
+ --fds-text-primary: hsla(0, 0%, 0%, 89.56%);
70
+ --fds-text-secondary: hsla(0, 0%, 0%, 60.63%);
71
+ --fds-text-tertiary: hsla(0, 0%, 0%, 44.58%);
72
+ --fds-text-disabled: hsla(0, 0%, 0%, 36.14%);
79
73
 
80
74
  /* Accent */
81
- --fds-accent-default: hsla(var(--fds-accent-light-2));
82
- --fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
83
- --fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
84
- --fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
75
+ --fds-accent-default: hsl(var(--fds-accent-dark-1));
76
+ --fds-accent-secondary: hsla(var(--fds-accent-dark-1), 90%);
77
+ --fds-accent-tertiary: hsla(var(--fds-accent-dark-1), 80%);
78
+ --fds-accent-disabled: hsla(0, 0%, 0%, 21.69%);
85
79
 
86
80
  /* Accent Text */
87
- --fds-accent-text-primary: hsl(var(--fds-accent-light-3));
88
- --fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
89
- --fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
90
- --fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
81
+ --fds-accent-text-primary: hsl(var(--fds-accent-dark-2));
82
+ --fds-accent-text-secondary: hsl(var(--fds-accent-dark-3));
83
+ --fds-accent-text-tertiary: hsl(var(--fds-accent-dark-1));
84
+ --fds-accent-text-disabled: hsla(0, 0%, 0%, 36.14%);
91
85
 
92
86
  /* Text on Accent */
93
- --fds-text-on-accent-primary: hsl(0, 0%, 0%);
94
- --fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
95
- --fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
96
- --fds-text-on-accent-selected: hsl(0, 0%, 100%);
87
+ --fds-text-on-accent-primary: hsl(0, 0%, 100%);
88
+ --fds-text-on-accent-secondary: hsla(0, 0%, 100%, 70%);
89
+ --fds-text-on-accent-disabled: var(--fds-text-on-accent-secondary);
90
+ --fds-text-on-accent-selected: var(--fds-text-on-accent-primary);
97
91
 
98
92
  /* Control Fill */
99
93
  --fds-control-fill-transparent: transparent;
100
- --fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
101
- --fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
102
- --fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
103
- --fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
104
- --fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
94
+ --fds-control-fill-default: hsla(0, 0%, 100%, 70%);
95
+ --fds-control-fill-secondary: hsla(0, 0%, 98%, 50%);
96
+ --fds-control-fill-tertiary: hsla(0, 0%, 98%, 30%);
97
+ --fds-control-fill-disabled: var(--fds-control-fill-tertiary);
98
+ --fds-control-fill-input-active: hsl(0, 0%, 100%);
105
99
 
106
100
  /* Control Strong Fill */
107
- --fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
108
- --fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
101
+ --fds-control-strong-fill-default: hsla(0, 0%, 0%, 44.58%);
102
+ --fds-control-strong-fill-disabled: hsla(0, 0%, 0%, 31.73%);
109
103
 
110
104
  /* Control Solid Fill */
111
- --fds-control-solid-fill-default: hsl(0, 0%, 27%);
105
+ --fds-control-solid-fill-default: hsl(0, 0%, 100%);
112
106
 
113
107
  /* Control Alt Fill */
114
108
  --fds-control-alt-fill-transparent: transparent;
115
- --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
116
- --fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
117
- --fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
118
- --fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
109
+ --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 2.41%);
110
+ --fds-control-alt-fill-tertiary: hsla(0, 0%, 0%, 5.78%);
111
+ --fds-control-alt-fill-quarternary: hsla(0, 0%, 0%, 9.24%);
112
+ --fds-control-alt-fill-disabled: var(--fds-control-alt-fill-transparent);
119
113
 
120
114
  /* Control on Image Fill */
121
- --fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
122
- --fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
123
- --fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
115
+ --fds-control-on-image-fill-default: hsla(0, 0%, 100%, 79%);
116
+ --fds-control-on-image-fill-secondary: hsl(0, 0%, 95%);
117
+ --fds-control-on-image-fill-tertiary: hsl(0, 0%, 92%);
124
118
  --fds-control-on-image-fill-disabled: transparent;
125
119
 
126
120
  /* Subtle Fill */
127
121
  --fds-subtle-fill-transparent: transparent;
128
- --fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
129
- --fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
130
- --fds-subtle-fill-disabled: transparent;
122
+ --fds-subtle-fill-secondary: hsla(0, 0%, 0%, 3.73%);
123
+ --fds-subtle-fill-tertiary: hsla(0, 0%, 0%, 2.41%);
124
+ --fds-subtle-fill-disabled: var(--fds-subtle-fill-transparent);
131
125
 
132
126
  /* Control Stroke */
133
- --fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
134
- --fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
127
+ --fds-control-stroke-default: hsla(0, 0%, 0%, 5.78%);
128
+ --fds-control-stroke-secondary: hsla(0, 0%, 0%, 16.22%);
135
129
 
136
130
  /* Control Strong Stroke */
137
- --fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
138
- --fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
131
+ --fds-control-strong-stroke-default: hsla(0, 0%, 0%, 44.58%);
132
+ --fds-control-strong-stroke-disabled: hsla(0, 0%, 0%, 21.69%);
139
133
 
140
134
  /* Control Stroke on Accent */
141
135
  --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
142
- --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
136
+ --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 40%);
143
137
  --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
144
- --fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
138
+ --fds-control-stroke-on-accent-disabled: var(--fds-control-stroke-on-accent-default);
145
139
 
146
140
  /* Control Strong Stroke on Image */
147
- --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
141
+ --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 100%, 35%);
148
142
 
149
143
  /* Card Stroke */
150
- --fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
151
- --fds-card-stroke-default-solid: hsl(0, 0%, 11%);
144
+ --fds-card-stroke-default: hsla(0, 0%, 0%, 5.78%);
145
+ --fds-card-stroke-default-solid: hsl(0, 0%, 92%);
152
146
 
153
147
  /* Surface Stroke */
154
148
  --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
155
- --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
149
+ --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 5.78%);
156
150
 
157
151
  /* Divider Stroke */
158
- --fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
152
+ --fds-divider-stroke-default: hsla(0, 0%, 0%, 8.03%);
159
153
 
160
154
  /* Focus Stroke */
161
- --fds-focus-stroke-outer: hsl(0, 0%, 100%);
162
- --fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
155
+ --fds-focus-stroke-outer: hsla(0, 0%, 0%, 89.56%);
156
+ --fds-focus-stroke-inner: hsl(0, 0%, 100%);
163
157
 
164
158
  /* Card Background */
165
- --fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
166
- --fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
167
- /* --fds-card-background-tertiary: unset; */
159
+ --fds-card-background-default: hsla(0, 0%, 100%, 70%);
160
+ --fds-card-background-secondary: hsla(0, 0%, 96%, 50%);
161
+ /* --fds-card-background-tertiary: hsl(0, 0%, 100%); */
168
162
 
169
163
  /* Smoke Background */
170
164
  --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
171
165
 
172
166
  /* Layer */
173
- --fds-layer-background-default: hsla(0, 0%, 23%, 30%);
174
- --fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
167
+ --fds-layer-background-default: hsla(0, 0%, 100%, 50%);
168
+ --fds-layer-background-alt: hsl(0, 0%, 100%);
175
169
 
176
170
  /* Layer on Acrylic */
177
- --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
178
- --fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
171
+ --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 25%);
172
+ --fds-layer-on-accent-acrylic-background-default: var(
173
+ --fds-layer-on-acrylic-background-default
174
+ );
179
175
 
180
176
  /* Solid Background */
181
- --fds-solid-background-base: #111;
182
- --fds-solid-background-secondary: hsl(0, 0%, 11%);
183
- --fds-solid-background-tertiary: hsl(0, 0%, 16%);
184
- --fds-solid-background-quarternary: hsl(0, 0%, 17%);
177
+ --fds-solid-background-base: hsl(0, 0%, 95%);
178
+ --fds-solid-background-secondary: hsl(0, 0%, 93%);
179
+ --fds-solid-background-tertiary: hsl(0, 0%, 98%);
180
+ --fds-solid-background-quarternary: hsl(0, 0%, 100%);
185
181
 
186
182
  /* Mica Background */
187
- /* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
183
+ /* --fds-mica-background-base: linear-gradient(0deg, hsla(0, 0%, 95%, 0.5), hsla(0, 0%, 95%, 0.5)), hsl(0, 0%, 95%); */
188
184
 
189
185
  /* Acrylic Background */
190
- --fds-acrylic-background-default: linear-gradient(
191
- 0deg,
192
- rgb(44, 44, 44, 15%),
193
- rgb(44, 44, 44, 15%)
194
- ),
195
- rgba(44, 44, 44, 96%);
196
- --fds-acrylic-background-base: linear-gradient(
197
- 0deg,
198
- rgb(32, 32, 32, 50%),
199
- rgb(32, 32, 32, 50%)
200
- ),
201
- rgba(32, 32, 32, 96%);
186
+ --fds-acrylic-background-default: transparent, rgba(252, 252, 252, 85%);
187
+ --fds-acrylic-background-base: transparent, rgba(243, 243, 243, 90%);
202
188
 
203
189
  /* Accent Acrylic Background */
204
- /* --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%); */
205
- /* --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%); */
190
+ /* --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%); */
191
+ /* --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%); */
206
192
 
207
193
  /* System */
208
- --fds-system-attention: hsl(199, 100%, 69%);
209
- --fds-system-success: hsl(113, 51%, 58%);
210
- --fds-system-caution: hsl(54, 100%, 49%);
211
- --fds-system-critical: hsl(354, 100%, 80%);
212
- --fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
194
+ --fds-system-attention: hsl(209, 100%, 36%);
195
+ --fds-system-success: hsl(120, 78%, 27%);
196
+ --fds-system-caution: hsl(36, 100%, 31%);
197
+ --fds-system-critical: hsl(5, 75%, 44%);
198
+ --fds-system-neutral: hsla(0, 0%, 0%, 44.58%);
213
199
 
214
200
  /* System Solid */
215
- --fds-system-solid-neutral: hsl(0, 0%, 62%);
201
+ --fds-system-solid-neutral: hsl(0, 0%, 54%);
216
202
 
217
203
  /* System Background */
218
- --fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
219
- --fds-system-background-success: hsl(67, 39%, 17%);
220
- --fds-system-background-caution: hsl(40, 46%, 18%);
221
- --fds-system-background-critical: hsl(2, 28%, 21%);
204
+ --fds-system-background-attention: hsla(0, 0%, 96%, 50%);
205
+ --fds-system-background-success: hsl(115, 58%, 92%);
206
+ --fds-system-background-caution: hsl(47, 100%, 90%);
207
+ --fds-system-background-critical: hsl(355, 85%, 95%);
222
208
 
223
209
  /* System Background Solid */
224
- --fds-system-background-solid-attention: hsl(0, 0%, 18%);
225
- --fds-system-background-solid-neutral: hsl(0, 0%, 62%);
210
+ --fds-system-background-solid-attention: hsl(0, 0%, 97%);
211
+ --fds-system-background-solid-neutral: hsl(0, 0%, 95%);
226
212
 
227
213
  /* Borders */
228
- --fds-control-border-default: var(--fds-control-stroke-secondary)
229
- var(--fds-control-stroke-default) var(--fds-control-stroke-default)
230
- var(--fds-control-stroke-default);
214
+ --fds-control-border-default: var(--fds-control-stroke-default)
215
+ var(--fds-control-stroke-default) var(--fds-control-stroke-secondary)
216
+ var(--fds-control-stroke-default);
231
217
 
232
218
  /* Shadows */
233
- --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
234
- --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
235
- --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
236
- --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
219
+ --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 4%);
220
+ --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 14%);
221
+ --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 14%);
222
+ --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 18.76%),
223
+ 0px 2px 21px hsl(0, 0%, 0%, 14.74%);
237
224
 
238
225
  /* Shell Shadows */
239
- --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
240
- 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
241
- --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
242
- 0px 2px 21px hsla(0, 0%, 0%, 0.55);
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%);
243
230
  }
244
231
  }
245
232
 
246
-
247
233
  /* Dark Theme Colors */
248
234
  @media (prefers-color-scheme: dark) {
249
235
  :root {
@@ -354,7 +340,7 @@
354
340
  --fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
355
341
 
356
342
  /* Solid Background */
357
- --fds-solid-background-base: #111;
343
+ --fds-solid-background-base: hsl(0, 0%, 13%);
358
344
  --fds-solid-background-secondary: hsl(0, 0%, 11%);
359
345
  --fds-solid-background-tertiary: hsl(0, 0%, 16%);
360
346
  --fds-solid-background-quarternary: hsl(0, 0%, 17%);
@@ -367,14 +353,14 @@
367
353
  0deg,
368
354
  rgb(44, 44, 44, 15%),
369
355
  rgb(44, 44, 44, 15%)
370
- ),
371
- rgba(44, 44, 44, 96%);
356
+ ),
357
+ rgba(44, 44, 44, 96%);
372
358
  --fds-acrylic-background-base: linear-gradient(
373
359
  0deg,
374
360
  rgb(32, 32, 32, 50%),
375
361
  rgb(32, 32, 32, 50%)
376
- ),
377
- rgba(32, 32, 32, 96%);
362
+ ),
363
+ rgba(32, 32, 32, 96%);
378
364
 
379
365
  /* Accent Acrylic Background */
380
366
  /* --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%); */
@@ -402,8 +388,8 @@
402
388
 
403
389
  /* Borders */
404
390
  --fds-control-border-default: var(--fds-control-stroke-secondary)
405
- var(--fds-control-stroke-default) var(--fds-control-stroke-default)
406
- var(--fds-control-stroke-default);
391
+ var(--fds-control-stroke-default) var(--fds-control-stroke-default)
392
+ var(--fds-control-stroke-default);
407
393
 
408
394
  /* Shadows */
409
395
  --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
@@ -413,8 +399,350 @@
413
399
 
414
400
  /* Shell Shadows */
415
401
  --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
416
- 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
402
+ 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
417
403
  --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
418
- 0px 2px 21px hsla(0, 0%, 0%, 0.55);
404
+ 0px 2px 21px hsla(0, 0%, 0%, 0.55);
419
405
  }
420
406
  }
407
+
408
+
409
+
410
+ /* Class Light Theme Colors */
411
+ .fds-theme-light {
412
+ /* Text */
413
+ --fds-text-primary: hsla(0, 0%, 0%, 89.56%);
414
+ --fds-text-secondary: hsla(0, 0%, 0%, 60.63%);
415
+ --fds-text-tertiary: hsla(0, 0%, 0%, 44.58%);
416
+ --fds-text-disabled: hsla(0, 0%, 0%, 36.14%);
417
+
418
+ /* Accent */
419
+ --fds-accent-default: hsl(var(--fds-accent-dark-1));
420
+ --fds-accent-secondary: hsla(var(--fds-accent-dark-1), 90%);
421
+ --fds-accent-tertiary: hsla(var(--fds-accent-dark-1), 80%);
422
+ --fds-accent-disabled: hsla(0, 0%, 0%, 21.69%);
423
+
424
+ /* Accent Text */
425
+ --fds-accent-text-primary: hsl(var(--fds-accent-dark-2));
426
+ --fds-accent-text-secondary: hsl(var(--fds-accent-dark-3));
427
+ --fds-accent-text-tertiary: hsl(var(--fds-accent-dark-1));
428
+ --fds-accent-text-disabled: hsla(0, 0%, 0%, 36.14%);
429
+
430
+ /* Text on Accent */
431
+ --fds-text-on-accent-primary: hsl(0, 0%, 100%);
432
+ --fds-text-on-accent-secondary: hsla(0, 0%, 100%, 70%);
433
+ --fds-text-on-accent-disabled: var(--fds-text-on-accent-secondary);
434
+ --fds-text-on-accent-selected: var(--fds-text-on-accent-primary);
435
+
436
+ /* Control Fill */
437
+ --fds-control-fill-transparent: transparent;
438
+ --fds-control-fill-default: hsla(0, 0%, 100%, 70%);
439
+ --fds-control-fill-secondary: hsla(0, 0%, 98%, 50%);
440
+ --fds-control-fill-tertiary: hsla(0, 0%, 98%, 30%);
441
+ --fds-control-fill-disabled: var(--fds-control-fill-tertiary);
442
+ --fds-control-fill-input-active: hsl(0, 0%, 100%);
443
+
444
+ /* Control Strong Fill */
445
+ --fds-control-strong-fill-default: hsla(0, 0%, 0%, 44.58%);
446
+ --fds-control-strong-fill-disabled: hsla(0, 0%, 0%, 31.73%);
447
+
448
+ /* Control Solid Fill */
449
+ --fds-control-solid-fill-default: hsl(0, 0%, 100%);
450
+
451
+ /* Control Alt Fill */
452
+ --fds-control-alt-fill-transparent: transparent;
453
+ --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 2.41%);
454
+ --fds-control-alt-fill-tertiary: hsla(0, 0%, 0%, 5.78%);
455
+ --fds-control-alt-fill-quarternary: hsla(0, 0%, 0%, 9.24%);
456
+ --fds-control-alt-fill-disabled: var(--fds-control-alt-fill-transparent);
457
+
458
+ /* Control on Image Fill */
459
+ --fds-control-on-image-fill-default: hsla(0, 0%, 100%, 79%);
460
+ --fds-control-on-image-fill-secondary: hsl(0, 0%, 95%);
461
+ --fds-control-on-image-fill-tertiary: hsl(0, 0%, 92%);
462
+ --fds-control-on-image-fill-disabled: transparent;
463
+
464
+ /* Subtle Fill */
465
+ --fds-subtle-fill-transparent: transparent;
466
+ --fds-subtle-fill-secondary: hsla(0, 0%, 0%, 3.73%);
467
+ --fds-subtle-fill-tertiary: hsla(0, 0%, 0%, 2.41%);
468
+ --fds-subtle-fill-disabled: var(--fds-subtle-fill-transparent);
469
+
470
+ /* Control Stroke */
471
+ --fds-control-stroke-default: hsla(0, 0%, 0%, 5.78%);
472
+ --fds-control-stroke-secondary: hsla(0, 0%, 0%, 16.22%);
473
+
474
+ /* Control Strong Stroke */
475
+ --fds-control-strong-stroke-default: hsla(0, 0%, 0%, 44.58%);
476
+ --fds-control-strong-stroke-disabled: hsla(0, 0%, 0%, 21.69%);
477
+
478
+ /* Control Stroke on Accent */
479
+ --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
480
+ --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 40%);
481
+ --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
482
+ --fds-control-stroke-on-accent-disabled: var(--fds-control-stroke-on-accent-default);
483
+
484
+ /* Control Strong Stroke on Image */
485
+ --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 100%, 35%);
486
+
487
+ /* Card Stroke */
488
+ --fds-card-stroke-default: hsla(0, 0%, 0%, 5.78%);
489
+ --fds-card-stroke-default-solid: hsl(0, 0%, 92%);
490
+
491
+ /* Surface Stroke */
492
+ --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
493
+ --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 5.78%);
494
+
495
+ /* Divider Stroke */
496
+ --fds-divider-stroke-default: hsla(0, 0%, 0%, 8.03%);
497
+
498
+ /* Focus Stroke */
499
+ --fds-focus-stroke-outer: hsla(0, 0%, 0%, 89.56%);
500
+ --fds-focus-stroke-inner: hsl(0, 0%, 100%);
501
+
502
+ /* Card Background */
503
+ --fds-card-background-default: hsla(0, 0%, 100%, 70%);
504
+ --fds-card-background-secondary: hsla(0, 0%, 96%, 50%);
505
+ /* --fds-card-background-tertiary: hsl(0, 0%, 100%); */
506
+
507
+ /* Smoke Background */
508
+ --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
509
+
510
+ /* Layer */
511
+ --fds-layer-background-default: hsla(0, 0%, 100%, 50%);
512
+ --fds-layer-background-alt: hsl(0, 0%, 100%);
513
+
514
+ /* Layer on Acrylic */
515
+ --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 25%);
516
+ --fds-layer-on-accent-acrylic-background-default: var(
517
+ --fds-layer-on-acrylic-background-default
518
+ );
519
+
520
+ /* Solid Background */
521
+ --fds-solid-background-base: hsl(0, 0%, 95%);
522
+ --fds-solid-background-secondary: hsl(0, 0%, 93%);
523
+ --fds-solid-background-tertiary: hsl(0, 0%, 98%);
524
+ --fds-solid-background-quarternary: hsl(0, 0%, 100%);
525
+
526
+ /* Mica Background */
527
+ /* --fds-mica-background-base: linear-gradient(0deg, hsla(0, 0%, 95%, 0.5), hsla(0, 0%, 95%, 0.5)), hsl(0, 0%, 95%); */
528
+
529
+ /* Acrylic Background */
530
+ --fds-acrylic-background-default: transparent, rgba(252, 252, 252, 85%);
531
+ --fds-acrylic-background-base: transparent, rgba(243, 243, 243, 90%);
532
+
533
+ /* Accent Acrylic Background */
534
+ /* --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%); */
535
+ /* --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%); */
536
+
537
+ /* System */
538
+ --fds-system-attention: hsl(209, 100%, 36%);
539
+ --fds-system-success: hsl(120, 78%, 27%);
540
+ --fds-system-caution: hsl(36, 100%, 31%);
541
+ --fds-system-critical: hsl(5, 75%, 44%);
542
+ --fds-system-neutral: hsla(0, 0%, 0%, 44.58%);
543
+
544
+ /* System Solid */
545
+ --fds-system-solid-neutral: hsl(0, 0%, 54%);
546
+
547
+ /* System Background */
548
+ --fds-system-background-attention: hsla(0, 0%, 96%, 50%);
549
+ --fds-system-background-success: hsl(115, 58%, 92%);
550
+ --fds-system-background-caution: hsl(47, 100%, 90%);
551
+ --fds-system-background-critical: hsl(355, 85%, 95%);
552
+
553
+ /* System Background Solid */
554
+ --fds-system-background-solid-attention: hsl(0, 0%, 97%);
555
+ --fds-system-background-solid-neutral: hsl(0, 0%, 95%);
556
+
557
+ /* Borders */
558
+ --fds-control-border-default: var(--fds-control-stroke-default)
559
+ var(--fds-control-stroke-default) var(--fds-control-stroke-secondary)
560
+ var(--fds-control-stroke-default);
561
+
562
+ /* Shadows */
563
+ --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 4%);
564
+ --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 14%);
565
+ --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 14%);
566
+ --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 18.76%),
567
+ 0px 2px 21px hsl(0, 0%, 0%, 14.74%);
568
+
569
+ /* Shell Shadows */
570
+ --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 18%),
571
+ 0px 2px 10.67px hsla(0, 0%, 0%, 0.1474);
572
+ --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 28%),
573
+ 0px 2px 21px hsla(0, 0%, 0%, 22%);
574
+ }
575
+
576
+ /* Class Dark Theme Colors */
577
+
578
+ .fds-theme-dark {
579
+ /* Text */
580
+ --fds-text-primary: hsla(0, 0%, 100%, 100%);
581
+ --fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
582
+ --fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
583
+ --fds-text-disabled: hsla(0, 0%, 100%, 36.28%);
584
+
585
+ /* Accent */
586
+ --fds-accent-default: hsla(var(--fds-accent-light-2));
587
+ --fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
588
+ --fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
589
+ --fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);
590
+
591
+ /* Accent Text */
592
+ --fds-accent-text-primary: hsl(var(--fds-accent-light-3));
593
+ --fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
594
+ --fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
595
+ --fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);
596
+
597
+ /* Text on Accent */
598
+ --fds-text-on-accent-primary: hsl(0, 0%, 0%);
599
+ --fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
600
+ --fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
601
+ --fds-text-on-accent-selected: hsl(0, 0%, 100%);
602
+
603
+ /* Control Fill */
604
+ --fds-control-fill-transparent: transparent;
605
+ --fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
606
+ --fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
607
+ --fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
608
+ --fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
609
+ --fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);
610
+
611
+ /* Control Strong Fill */
612
+ --fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
613
+ --fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);
614
+
615
+ /* Control Solid Fill */
616
+ --fds-control-solid-fill-default: hsl(0, 0%, 27%);
617
+
618
+ /* Control Alt Fill */
619
+ --fds-control-alt-fill-transparent: transparent;
620
+ --fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
621
+ --fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
622
+ --fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
623
+ --fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);
624
+
625
+ /* Control on Image Fill */
626
+ --fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
627
+ --fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
628
+ --fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
629
+ --fds-control-on-image-fill-disabled: transparent;
630
+
631
+ /* Subtle Fill */
632
+ --fds-subtle-fill-transparent: transparent;
633
+ --fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
634
+ --fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
635
+ --fds-subtle-fill-disabled: transparent;
636
+
637
+ /* Control Stroke */
638
+ --fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
639
+ --fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);
640
+
641
+ /* Control Strong Stroke */
642
+ --fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
643
+ --fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);
644
+
645
+ /* Control Stroke on Accent */
646
+ --fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
647
+ --fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
648
+ --fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
649
+ --fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);
650
+
651
+ /* Control Strong Stroke on Image */
652
+ --fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);
653
+
654
+ /* Card Stroke */
655
+ --fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
656
+ --fds-card-stroke-default-solid: hsl(0, 0%, 11%);
657
+
658
+ /* Surface Stroke */
659
+ --fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
660
+ --fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);
661
+
662
+ /* Divider Stroke */
663
+ --fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);
664
+
665
+ /* Focus Stroke */
666
+ --fds-focus-stroke-outer: hsl(0, 0%, 100%);
667
+ --fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);
668
+
669
+ /* Card Background */
670
+ --fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
671
+ --fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
672
+ /* --fds-card-background-tertiary: unset; */
673
+
674
+ /* Smoke Background */
675
+ --fds-smoke-background-default: hsla(0, 0%, 0%, 30%);
676
+
677
+ /* Layer */
678
+ --fds-layer-background-default: hsla(0, 0%, 23%, 30%);
679
+ --fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);
680
+
681
+ /* Layer on Acrylic */
682
+ --fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
683
+ --fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);
684
+
685
+ /* Solid Background */
686
+ --fds-solid-background-base: hsl(0, 0%, 13%);
687
+ --fds-solid-background-secondary: hsl(0, 0%, 11%);
688
+ --fds-solid-background-tertiary: hsl(0, 0%, 16%);
689
+ --fds-solid-background-quarternary: hsl(0, 0%, 17%);
690
+
691
+ /* Mica Background */
692
+ /* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */
693
+
694
+ /* Acrylic Background */
695
+ --fds-acrylic-background-default: linear-gradient(
696
+ 0deg,
697
+ rgb(44, 44, 44, 15%),
698
+ rgb(44, 44, 44, 15%)
699
+ ),
700
+ rgba(44, 44, 44, 96%);
701
+ --fds-acrylic-background-base: linear-gradient(
702
+ 0deg,
703
+ rgb(32, 32, 32, 50%),
704
+ rgb(32, 32, 32, 50%)
705
+ ),
706
+ rgba(32, 32, 32, 96%);
707
+
708
+ /* Accent Acrylic Background */
709
+ /* --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%); */
710
+ /* --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%); */
711
+
712
+ /* System */
713
+ --fds-system-attention: hsl(199, 100%, 69%);
714
+ --fds-system-success: hsl(113, 51%, 58%);
715
+ --fds-system-caution: hsl(54, 100%, 49%);
716
+ --fds-system-critical: hsl(354, 100%, 80%);
717
+ --fds-system-neutral: hsla(0, 0%, 100%, 54.42%);
718
+
719
+ /* System Solid */
720
+ --fds-system-solid-neutral: hsl(0, 0%, 62%);
721
+
722
+ /* System Background */
723
+ --fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
724
+ --fds-system-background-success: hsl(67, 39%, 17%);
725
+ --fds-system-background-caution: hsl(40, 46%, 18%);
726
+ --fds-system-background-critical: hsl(2, 28%, 21%);
727
+
728
+ /* System Background Solid */
729
+ --fds-system-background-solid-attention: hsl(0, 0%, 18%);
730
+ --fds-system-background-solid-neutral: hsl(0, 0%, 62%);
731
+
732
+ /* Borders */
733
+ --fds-control-border-default: var(--fds-control-stroke-secondary)
734
+ var(--fds-control-stroke-default) var(--fds-control-stroke-default)
735
+ var(--fds-control-stroke-default);
736
+
737
+ /* Shadows */
738
+ --fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
739
+ --fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
740
+ --fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
741
+ --fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);
742
+
743
+ /* Shell Shadows */
744
+ --fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
745
+ 0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
746
+ --fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
747
+ 0px 2px 21px hsla(0, 0%, 0%, 0.55);
748
+ }