fluent-svelte-extra 2.0.1 → 2.0.2

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 (10) hide show
  1. package/ContextMenu/ContextMenu.svelte +37 -38
  2. package/MenuFlyout/MenuFlyoutSurface.scss +8 -39
  3. package/MenuFlyout/MenuFlyoutSurface.svelte +19 -22
  4. package/MenuFlyout/MenuFlyoutWrapper.scss +64 -64
  5. package/MenuFlyout/MenuFlyoutWrapper.svelte +41 -39
  6. package/MenuFlyout/MenuFlyoutWrapper.svelte.d.ts +1 -0
  7. package/README.md +19 -19
  8. package/package.json +1 -1
  9. package/switchable.css +397 -401
  10. package/theme.css +3 -4
package/ContextMenu/ContextMenu.svelte CHANGED
@@ -1,5 +1,5 @@
1
- <svelte:options accessors />
2
-
1
+ <svelte:options accessors />
2
+
3
3
  <script >import { createEventDispatcher, setContext } from "svelte";
4
4
  import { externalMouseEvents, arrowNavigation } from "../internal";
5
5
  import { tabbable } from "tabbable";
@@ -65,39 +65,38 @@ if (closeOnSelect) {
65
65
  open = false;
66
66
  });
67
67
  }
68
- $: console.log(open);
69
- </script>
70
-
71
- <svelte:window on:keydown={handleEscapeKey} />
72
-
73
- <div
74
- class="context-menu-wrapper"
75
- on:contextmenu|preventDefault|stopPropagation={openBy.includes("rightClick")
76
- ? handleContextMenu
77
- : undefined}
78
- on:click|preventDefault|stopPropagation={openBy.includes("leftClick")
79
- ? handleContextMenu
80
- : undefined}
81
- on:contextmenu={openBy.includes("rightClick") ? handleContextMenu : undefined}
82
- bind:this={wrapperElement}
83
- >
84
- <slot />
85
- {#if open}
86
- <div
87
- use:mountMenu
88
- use:arrowNavigation={{ preventTab: true }}
89
- use:externalMouseEvents={{ type: "mousedown" }}
90
- on:contextmenu|stopPropagation={e => e.preventDefault()}
91
- bind:this={anchorElement}
92
- on:outermousedown={() => (open = false)}
93
- class="context-menu-anchor"
94
- style="top: {menuPosition.y}px; left: {menuPosition.x}px;"
95
- >
96
- <MenuFlyoutSurface bind:this={menu} bind:element={menuElement} {...$$restProps}>
97
- <slot name="flyout" />
98
- </MenuFlyoutSurface>
99
- </div>
100
- {/if}
101
- </div>
102
-
103
- <style >.context-menu-wrapper{display:contents}.context-menu-anchor{position:fixed;z-index:10000}</style>
68
+ </script>
69
+
70
+ <svelte:window on:keydown={handleEscapeKey} />
71
+
72
+ <div
73
+ class="context-menu-wrapper"
74
+ on:contextmenu|preventDefault|stopPropagation={openBy.includes("rightClick")
75
+ ? handleContextMenu
76
+ : undefined}
77
+ on:click|preventDefault|stopPropagation={openBy.includes("leftClick")
78
+ ? handleContextMenu
79
+ : undefined}
80
+ on:contextmenu={openBy.includes("rightClick") ? handleContextMenu : undefined}
81
+ bind:this={wrapperElement}
82
+ >
83
+ <slot />
84
+ {#if open}
85
+ <div
86
+ use:mountMenu
87
+ use:arrowNavigation={{ preventTab: true }}
88
+ use:externalMouseEvents={{ type: "mousedown" }}
89
+ on:contextmenu|stopPropagation={e => e.preventDefault()}
90
+ bind:this={anchorElement}
91
+ on:outermousedown={() => (open = false)}
92
+ class="context-menu-anchor"
93
+ style="top: {menuPosition.y}px; left: {menuPosition.x}px;"
94
+ >
95
+ <MenuFlyoutSurface bind:this={menu} bind:element={menuElement} {...$$restProps}>
96
+ <slot name="flyout" />
97
+ </MenuFlyoutSurface>
98
+ </div>
99
+ {/if}
100
+ </div>
101
+
102
+ <style >.context-menu-wrapper{display:contents}.context-menu-anchor{position:fixed;z-index:10000}</style>
package/MenuFlyout/MenuFlyoutSurface.scss CHANGED
@@ -29,49 +29,18 @@
29
29
  max-block-size: 100vh;
30
30
  margin: 0;
31
31
  padding: 0;
32
+ padding-block: 2px;
32
33
  box-sizing: border-box;
33
34
  color: var(--text-primary);
34
35
  border-radius: var(--overlay-corner-radius);
35
- background-clip: padding-box;
36
+ border: 1px solid var(--surface-stroke-flyout);
37
+ background-color: var(--solid-background-quarternary);
38
+ background-clip: border-box;
36
39
  &-surface-container {
37
40
  overflow: hidden;
38
41
  }
39
- &-background {
40
- z-index: -1;
41
- border-radius: var(--overlay-corner-radius);
42
- border: 1px solid var(--surface-stroke-flyout);
43
- background-clip: padding-box;
44
- height: 100%;
45
- width: 100%;
46
- position: absolute;
47
- background-color: var(--solid-background-quarternary);
42
+ &.acrylic {
43
+ background-color: var(--acrylic-fallback-background-base);
44
+ backdrop-filter: var(--acrylic-fallback-filter);
48
45
  }
49
- .acrylic &-background {
50
- background-color: unset !important;
51
- background: var(--fds-acrylic-fallback-background-base);
52
- }
53
- &-items {
54
- z-index: 1;
55
- padding: 1px;
56
- padding-block: 2px;
57
- }
58
- }
59
-
60
- .acrylic::before {
61
- content: "";
62
- border-radius: var(--fds-overlay-corner-radius);
63
- position: absolute;
64
- width: 100%;
65
- height: 100%;
66
- backdrop-filter: blur(64px);
67
- -webkit-backdrop-filter: blur(64px);
68
- }
69
- .acrylic::after {
70
- border-radius: var(--fds-overlay-corner-radius);
71
- content: "";
72
- position: absolute;
73
-
74
- inset: 0;
75
- background-image: url(data:image/png;base64,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);
76
- opacity: 0.4;
77
- }
46
+ }
package/MenuFlyout/MenuFlyoutSurface.svelte CHANGED
@@ -3,27 +3,24 @@ let className = "";
3
3
  export { className as class };
4
4
  /** Obtains a bound DOM reference to the surface element. */
5
5
  export let element = null;
6
+ /** Whether to use acryllic styling for the surface. */
6
7
  export let acrylic = true;
7
8
  let animationComplete = false;
8
- </script>
9
-
10
- <div
11
- class="menu-flyout-surface-container"
12
- style={animationComplete ? "overflow: visible;" : undefined}
13
- >
14
- <ul
15
- on:animationend|once={() => (animationComplete = true)}
16
- class="menu-flyout {className}"
17
- class:acrylic
18
- bind:this={element}
19
- {...$$restProps}
20
- >
21
- <div class="menu-flyout-background" />
22
-
23
- <div class="menu-flyout-items">
24
- <slot />
25
- </div>
26
- </ul>
27
- </div>
28
-
29
- <style >@-webkit-keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@-webkit-keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.menu-flyout{-webkit-animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;background-clip:padding-box;border-radius:var(--fds-overlay-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:flex;flex-direction:column;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;margin:0;max-block-size:100vh;max-inline-size:100%;min-inline-size:120px;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-flyout-surface-container{overflow:hidden}.menu-flyout-background{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-overlay-corner-radius);height:100%;position:absolute;width:100%;z-index:-1}.acrylic .menu-flyout-background{background-color:unset!important;background:var(--fds-acrylic-fallback-background-base)}.menu-flyout-items{padding:1px;padding-block:2px;z-index:1}.acrylic:before{backdrop-filter:blur(64px);-webkit-backdrop-filter:blur(64px);height:100%;width:100%}.acrylic:after,.acrylic:before{border-radius:var(--fds-overlay-corner-radius);content:"";position:absolute}.acrylic:after{background-image:url(data:image/png;base64,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);inset:0;opacity:.4}</style>
9
+ </script>
10
+
11
+ <div
12
+ class="menu-flyout-surface-container"
13
+ style={animationComplete ? "overflow: visible;" : undefined}
14
+ >
15
+ <ul
16
+ on:animationend|once={() => (animationComplete = true)}
17
+ class="menu-flyout {className}"
18
+ class:acrylic
19
+ bind:this={element}
20
+ {...$$restProps}
21
+ >
22
+ <slot />
23
+ </ul>
24
+ </div>
25
+
26
+ <style >@-webkit-keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@keyframes menu-open{0%{transform:translateY(var(--fds-menu-flyout-transition-offset,-50%))}to{transform:none}}@-webkit-keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}@keyframes menu-shadow{0%{box-shadow:none}to{box-shadow:var(--fds-flyout-shadow)}}.menu-flyout{-webkit-animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;animation:menu-open var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing),menu-shadow var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) var(--fds-control-normal-duration) forwards;background-clip:border-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-overlay-corner-radius);box-sizing:border-box;color:var(--fds-text-primary);display:flex;flex-direction:column;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;margin:0;max-block-size:100vh;max-inline-size:100%;min-inline-size:120px;padding:0;padding-block:2px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-flyout-surface-container{overflow:hidden}.menu-flyout.acrylic{-webkit-backdrop-filter:var(--fds-acrylic-fallback-filter);backdrop-filter:var(--fds-acrylic-fallback-filter);background-color:var(--fds-acrylic-fallback-background-base)}</style>
package/MenuFlyout/MenuFlyoutWrapper.scss CHANGED
@@ -1,64 +1,64 @@
1
- .menu-flyout- {
2
- &wrapper {
3
- display: inline-block;
4
- height: auto;
5
- position: relative;
6
- }
7
- &backdrop {
8
- position: fixed;
9
- top: 0;
10
- left: 0;
11
- width: 100%;
12
- height: 100%;
13
- z-index: 9999;
14
- }
15
- &anchor {
16
- position: absolute;
17
- z-index: 10000;
18
- &.placement- {
19
- &top {
20
- --fds-menu-flyout-transition-offset: 50%;
21
- bottom: calc(100% + var(--menu-flyout-offset));
22
- }
23
- &bottom {
24
- top: calc(100% + var(--menu-flyout-offset));
25
- }
26
- &left {
27
- right: calc(100% + var(--menu-flyout-offset));
28
- }
29
- &right {
30
- left: calc(100% + var(--menu-flyout-offset));
31
- }
32
- &top,
33
- &bottom {
34
- &.alignment- {
35
- &start {
36
- inset-inline-start: 0;
37
- }
38
- &end {
39
- inset-inline-end: 0;
40
- }
41
- &center {
42
- inset-inline-start: 50%;
43
- transform: translateX(-50%);
44
- }
45
- }
46
- }
47
- &left,
48
- &right {
49
- &.alignment- {
50
- &start {
51
- inset-block-start: 0;
52
- }
53
- &end {
54
- inset-block-end: 0;
55
- }
56
- &center {
57
- inset-block-start: 50%;
58
- transform: translateY(-50%);
59
- }
60
- }
61
- }
62
- }
63
- }
64
- }
1
+ .menu-flyout- {
2
+ &wrapper {
3
+ display: inline-block;
4
+ height: auto;
5
+ position: relative;
6
+ }
7
+ &backdrop {
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ width: 100%;
12
+ height: 100%;
13
+ z-index: 9999;
14
+ }
15
+ &anchor {
16
+ position: absolute;
17
+ z-index: 10000;
18
+ &.placement- {
19
+ &top {
20
+ --fds-menu-flyout-transition-offset: 50%;
21
+ bottom: calc(100% + var(--menu-flyout-offset));
22
+ }
23
+ &bottom {
24
+ top: calc(100% + var(--menu-flyout-offset));
25
+ }
26
+ &left {
27
+ right: calc(100% + var(--menu-flyout-offset));
28
+ }
29
+ &right {
30
+ left: calc(100% + var(--menu-flyout-offset));
31
+ }
32
+ &top,
33
+ &bottom {
34
+ &.alignment- {
35
+ &start {
36
+ inset-inline-start: 0;
37
+ }
38
+ &end {
39
+ inset-inline-end: 0;
40
+ }
41
+ &center {
42
+ inset-inline-start: 50%;
43
+ transform: translateX(-50%);
44
+ }
45
+ }
46
+ }
47
+ &left,
48
+ &right {
49
+ &.alignment- {
50
+ &start {
51
+ inset-block-start: 0;
52
+ }
53
+ &end {
54
+ inset-block-end: 0;
55
+ }
56
+ &center {
57
+ inset-block-start: 50%;
58
+ transform: translateY(-50%);
59
+ }
60
+ }
61
+ }
62
+ }
63
+ }
64
+ }
package/MenuFlyout/MenuFlyoutWrapper.svelte CHANGED
@@ -6,14 +6,16 @@ import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
6
6
  export let open = false;
7
7
  /** Determines if the flyout can be closed using conventional user interaction. */
8
8
  export let closable = true;
9
- /** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `false`. */
10
- export let closeOnSelect = false;
9
+ /** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
10
+ export let closeOnSelect = true;
11
11
  /** Direction that the flyout will be opened from. */
12
12
  export let placement = "top";
13
13
  /** Alignment of the menu along the clickable target's given axis. */
14
14
  export let alignment = "center";
15
15
  /** Distance of the flyout from the control button in pixels. */
16
16
  export let offset = 4;
17
+ /** Whether the use acrylic background styling for the flyout. */
18
+ export let acrylic = true;
17
19
  /** Specifies a custom class name for the flyout. */
18
20
  let className = "";
19
21
  export { className as class };
@@ -52,40 +54,40 @@ setContext("closeFlyout", event => {
52
54
  open = false;
53
55
  }
54
56
  });
55
- </script>
56
-
57
- <svelte:window on:keydown={handleEscapeKey} />
58
-
59
- <div
60
- class="menu-flyout-wrapper {className}"
61
- aria-expanded={open}
62
- aria-haspopup={open}
63
- aria-controls={menuId}
64
- on:click={toggleFlyout}
65
- bind:this={wrapperElement}
66
- >
67
- <slot />
68
- {#if open}
69
- <div
70
- id={menuId}
71
- class="menu-flyout-anchor placement-{placement} alignment-{alignment}"
72
- style="--fds-menu-flyout-offset: {offset}px;"
73
- tabindex="-1"
74
- bind:this={anchorElement}
75
- use:arrowNavigation={{ preventTab: true }}
76
- on:click={e => e.stopPropagation()}
77
- >
78
- <MenuFlyoutSurface bind:element={menuElement} bind:this={menu} {...$$restProps}>
79
- <slot name="flyout" />
80
- </MenuFlyoutSurface>
81
- </div>
82
- <div
83
- class="menu-flyout-backdrop"
84
- bind:this={backdropElement}
85
- on:click={e => e.stopPropagation()}
86
- on:mousedown={closeFlyout}
87
- />
88
- {/if}
89
- </div>
90
-
91
- <style >.menu-flyout-wrapper{display:inline-block;height:auto;position:relative}.menu-flyout-backdrop{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.menu-flyout-anchor{position:absolute;z-index:10000}.menu-flyout-anchor.placement-top{--fds-menu-flyout-transition-offset:50%;bottom:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom{top:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-left{right:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-right{left:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom.alignment-start,.menu-flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.menu-flyout-anchor.placement-bottom.alignment-end,.menu-flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.menu-flyout-anchor.placement-bottom.alignment-center,.menu-flyout-anchor.placement-top.alignment-center{inset-inline-start:50%;transform:translateX(-50%)}.menu-flyout-anchor.placement-left.alignment-start,.menu-flyout-anchor.placement-right.alignment-start{inset-block-start:0}.menu-flyout-anchor.placement-left.alignment-end,.menu-flyout-anchor.placement-right.alignment-end{inset-block-end:0}.menu-flyout-anchor.placement-left.alignment-center,.menu-flyout-anchor.placement-right.alignment-center{inset-block-start:50%;transform:translateY(-50%)}</style>
57
+ </script>
58
+
59
+ <svelte:window on:keydown={handleEscapeKey} />
60
+
61
+ <div
62
+ class="menu-flyout-wrapper {className}"
63
+ aria-expanded={open}
64
+ aria-haspopup={open}
65
+ aria-controls={menuId}
66
+ on:click={toggleFlyout}
67
+ bind:this={wrapperElement}
68
+ >
69
+ <slot />
70
+ {#if open}
71
+ <div
72
+ id={menuId}
73
+ class="menu-flyout-anchor placement-{placement} alignment-{alignment}"
74
+ style="--fds-menu-flyout-offset: {offset}px;"
75
+ tabindex="-1"
76
+ bind:this={anchorElement}
77
+ use:arrowNavigation={{ preventTab: true }}
78
+ on:click={e => e.stopPropagation()}
79
+ >
80
+ <MenuFlyoutSurface bind:element={menuElement} bind:this={menu} {...$$restProps} {acrylic}>
81
+ <slot name="flyout" />
82
+ </MenuFlyoutSurface>
83
+ </div>
84
+ <div
85
+ class="menu-flyout-backdrop"
86
+ bind:this={backdropElement}
87
+ on:click={e => e.stopPropagation()}
88
+ on:mousedown={closeFlyout}
89
+ />
90
+ {/if}
91
+ </div>
92
+
93
+ <style >.menu-flyout-wrapper{display:inline-block;height:auto;position:relative}.menu-flyout-backdrop{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.menu-flyout-anchor{position:absolute;z-index:10000}.menu-flyout-anchor.placement-top{--fds-menu-flyout-transition-offset:50%;bottom:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom{top:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-left{right:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-right{left:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom.alignment-start,.menu-flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.menu-flyout-anchor.placement-bottom.alignment-end,.menu-flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.menu-flyout-anchor.placement-bottom.alignment-center,.menu-flyout-anchor.placement-top.alignment-center{inset-inline-start:50%;transform:translateX(-50%)}.menu-flyout-anchor.placement-left.alignment-start,.menu-flyout-anchor.placement-right.alignment-start{inset-block-start:0}.menu-flyout-anchor.placement-left.alignment-end,.menu-flyout-anchor.placement-right.alignment-end{inset-block-end:0}.menu-flyout-anchor.placement-left.alignment-center,.menu-flyout-anchor.placement-right.alignment-center{inset-block-start:50%;transform:translateY(-50%)}</style>
package/MenuFlyout/MenuFlyoutWrapper.svelte.d.ts CHANGED
@@ -8,6 +8,7 @@ declare const __propDef: {
8
8
  placement?: "top" | "bottom" | "left" | "right";
9
9
  alignment?: "start" | "center" | "end";
10
10
  offset?: number;
11
+ acrylic?: boolean;
11
12
  class?: string;
12
13
  wrapperElement?: HTMLDivElement;
13
14
  anchorElement?: HTMLDivElement;
package/README.md CHANGED
@@ -1,19 +1,19 @@
1
- # fluent-svelte-extra
2
-
3
- A fork of fluent-svelte which is in active development.
4
-
5
- # Undocumented Components
6
-
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
-
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
-
17
- # Note
18
-
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!
1
+ # fluent-svelte-extra
2
+
3
+ A fork of fluent-svelte which is in active development.
4
+
5
+ # Undocumented Components
6
+
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
+
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
+
17
+ # Note
18
+
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": "2.0.1",
3
+ "version": "2.0.2",
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",