fluent-svelte-extra 1.8.5 → 1.8.7

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 (5) hide show
  1. package/Flyout/FlyoutWrapper.scss +5 -0
  2. package/Flyout/FlyoutWrapper.svelte +1 -1
  3. package/README.md +5 -1
  4. package/package.json +1 -1
  5. package/theme.css +4 -2
package/Flyout/FlyoutWrapper.scss CHANGED
@@ -30,6 +30,7 @@
30
30
  animation: flyout-in var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
31
31
  transform: var(--flyout-transform);
32
32
  &.placement- {
33
+ --flyout-transform: translateX(0%);
33
34
  &top {
34
35
  bottom: calc(100% + var(--flyout-offset));
35
36
  --flyout-transition-offset: translateY(12px);
@@ -51,9 +52,11 @@
51
52
  &.alignment- {
52
53
  &start {
53
54
  inset-inline-start: 0;
55
+ --flyout-transform: translateX(0%);
54
56
  }
55
57
  &end {
56
58
  inset-inline-end: 0;
59
+ --flyout-transform: translateX(0%);
57
60
  }
58
61
  &center {
59
62
  inset-inline-start: 50%;
@@ -66,9 +69,11 @@
66
69
  &.alignment- {
67
70
  &start {
68
71
  inset-block-start: 0;
72
+ --flyout-transform: translateY(0%);
69
73
  }
70
74
  &end {
71
75
  inset-block-end: 0;
76
+ --flyout-transform: translateY(0%);
72
77
  }
73
78
  &center {
74
79
  inset-block-start: 50%;
package/Flyout/FlyoutWrapper.svelte CHANGED
@@ -110,4 +110,4 @@ Flyouts represent a control that displays lightweight UI that is either informat
110
110
  {/if}
111
111
  </div>
112
112
 
113
- <style >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>
113
+ <style >@-webkit-keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}@keyframes flyout-in{0%{opacity:0;transform:var(--fds-flyout-transform) var(--fds-flyout-transition-offset,translateY(12px))}to{opacity:1;transform:var(--fds-flyout-transform)}}.flyout-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.flyout-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.flyout-anchor{-webkit-animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);animation:flyout-in var(--fds-control-normal-duration) var(--fds-control-fast-out-slow-in-easing);position:absolute;transform:var(--fds-flyout-transform);z-index:10000}.flyout-anchor.placement-{--fds-flyout-transform:translateX(0%)}.flyout-anchor.placement-top{--fds-flyout-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom{--fds-flyout-transition-offset:translateY(-12px);top:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-left{--fds-flyout-transition-offset:translateX(12px);right:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-right{--fds-flyout-transition-offset:translateX(-12px);left:calc(100% + var(--fds-flyout-offset))}.flyout-anchor.placement-bottom.alignment-start,.flyout-anchor.placement-top.alignment-start{--fds-flyout-transform:translateX(0%);inset-inline-start:0}.flyout-anchor.placement-bottom.alignment-end,.flyout-anchor.placement-top.alignment-end{--fds-flyout-transform:translateX(0%);inset-inline-end:0}.flyout-anchor.placement-bottom.alignment-center,.flyout-anchor.placement-top.alignment-center{--fds-flyout-transform:translateX(-50%);inset-inline-start:50%}.flyout-anchor.placement-left.alignment-start,.flyout-anchor.placement-right.alignment-start{--fds-flyout-transform:translateY(0%);inset-block-start:0}.flyout-anchor.placement-left.alignment-end,.flyout-anchor.placement-right.alignment-end{--fds-flyout-transform:translateY(0%);inset-block-end:0}.flyout-anchor.placement-left.alignment-center,.flyout-anchor.placement-right.alignment-center{--fds-flyout-transform:translateY(-50%);inset-block-start:50%}</style>
package/README.md CHANGED
@@ -8,7 +8,11 @@ Components that we develop won't be in docs. But you can view the detailed usage
8
8
 
9
9
  # Switching between themes
10
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` to your `<html>` tag in app.html file.
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.
12
16
 
13
17
  # Note
14
18
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.8.5",
3
+ "version": "1.8.7",
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
@@ -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%);