@kws3/ui 4.4.0-alpha.2 → 4.4.0-alpha.4

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 (38) hide show
  1. package/controls/FileUpload.svelte +7 -4
  2. package/controls/RangeSlider.svelte +1 -1
  3. package/controls/Toggle.svelte +0 -6
  4. package/controls/ToggleButtons.svelte +2 -43
  5. package/forms/AutoComplete.svelte +1 -1
  6. package/forms/actions.d.ts +28 -5
  7. package/forms/actions.d.ts.map +1 -1
  8. package/forms/actions.js +21 -7
  9. package/forms/colorpicker/Colorpicker.svelte +1 -1
  10. package/helpers/Skeleton.svelte +3 -3
  11. package/helpers/Timeline/TimelineItem.svelte +2 -2
  12. package/package.json +2 -2
  13. package/styles/ActionSheet.scss +7 -6
  14. package/styles/AutoComplete.scss +45 -51
  15. package/styles/Canvas.scss +3 -4
  16. package/styles/Chart.scss +5 -5
  17. package/styles/CheckRadio.scss +32 -36
  18. package/styles/Colorpicker.scss +31 -9
  19. package/styles/DataSearch.scss +14 -7
  20. package/styles/DataSort.scss +4 -2
  21. package/styles/Datepicker.scss +36 -31
  22. package/styles/Divider.scss +16 -16
  23. package/styles/FileUpload.scss +37 -53
  24. package/styles/FloatingUI.scss +73 -31
  25. package/styles/Grid.scss +44 -44
  26. package/styles/Loader.scss +28 -26
  27. package/styles/Pagination.scss +52 -34
  28. package/styles/Panel.scss +16 -14
  29. package/styles/RangeSlider.scss +56 -56
  30. package/styles/Select.scss +38 -39
  31. package/styles/Skeleton.scss +56 -22
  32. package/styles/SlidingPane.scss +3 -1
  33. package/styles/Timeline.scss +25 -17
  34. package/styles/Timepicker.scss +18 -29
  35. package/styles/Toggle.scss +29 -32
  36. package/styles/ToggleButtons.scss +50 -0
  37. package/styles/Tooltip.scss +26 -24
  38. package/types/type-defs/index.d.ts +1 -1
package/styles/Toggle.scss CHANGED
@@ -1,16 +1,12 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
  @use "bulma/sass/utilities/derived-variables" as dv;
3
- @use "bulma/sass/utilities/functions" as fn;
4
3
 
5
- $kws-toggle-off-bg-color: #{cv.getVar("background")} !default;
6
- $kws-toggle-handle-bg-color: #{cv.getVar("white")} !default;
7
- $kws-toggle-track-bg-color: #{cv.getVar("text")} !default;
8
- $kws-toggle-track-bg-color-invert: findColorInvert(
9
- $kws-toggle-track-bg-color
10
- ) !default;
11
- $kws-toggle-border-color: #{cv.getVar("border")} !default;
12
-
13
- $kws-theme-colors: dv.$colors !default;
4
+ $theme-colors: dv.$colors !default;
5
+ $off-bg-color: cv.getVar("border-weak") !default;
6
+ $handle-bg-color: cv.getVar("text-invert") !default;
7
+ $track-bg-color: cv.getVar("text") !default;
8
+ $track-bg-color-invert: cv.getVar("text-invert") !default;
9
+ $border-color: cv.getVar("border") !default;
14
10
 
15
11
  .kws-toggle-button {
16
12
  position: relative;
@@ -18,18 +14,21 @@ $kws-theme-colors: dv.$colors !default;
18
14
  vertical-align: middle;
19
15
  pointer-events: auto;
20
16
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
21
- font-size: 0.9rem;
17
+ font-size: cv.getVar("size-normal");
18
+ &.disabled {
19
+ opacity: 0.5;
20
+ }
22
21
  .track {
23
22
  transition:
24
23
  background-color 0.3s,
25
24
  border 0.3s;
26
25
  display: inline-flex;
27
26
  align-items: center;
28
- width: 3.93em;
29
- height: 2.21em;
30
- border: solid 2px $kws-toggle-border-color;
27
+ width: 4.2em;
28
+ height: 2.5em;
29
+ border: solid 1px $border-color;
31
30
  border-radius: 1.428em;
32
- background-color: $kws-toggle-off-bg-color;
31
+ background-color: $off-bg-color;
33
32
  content: " ";
34
33
  cursor: pointer;
35
34
  .toggle-text {
@@ -42,16 +41,16 @@ $kws-theme-colors: dv.$colors !default;
42
41
  text-align: right;
43
42
  user-select: none;
44
43
  margin: 0 0.5em;
45
- color: findColorInvert($kws-toggle-off-bg-color);
44
+ color: $track-bg-color;
46
45
  }
47
46
  .handle {
48
47
  transition: transform 0.3s cubic-bezier(0, 1.1, 1, 1.1);
49
48
  position: absolute;
50
49
  display: block;
51
- width: 1.928em;
52
- height: 1.928em;
53
- border-radius: 1.928em;
54
- background-color: $kws-toggle-handle-bg-color;
50
+ width: 2.18em;
51
+ height: 2.18em;
52
+ border-radius: 2.18em;
53
+ background-color: $handle-bg-color;
55
54
  box-shadow:
56
55
  0 2px 7px rgba(0, 0, 0, 0.35),
57
56
  0 1px 1px rgba(0, 0, 0, 0.15);
@@ -59,23 +58,21 @@ $kws-theme-colors: dv.$colors !default;
59
58
  }
60
59
  &.on {
61
60
  .track {
62
- border-color: $kws-toggle-track-bg-color;
63
- background-color: $kws-toggle-track-bg-color;
61
+ border-color: $track-bg-color;
62
+ background-color: $track-bg-color;
64
63
  .toggle-text {
65
64
  left: 10%;
66
65
  right: auto;
67
66
  text-align: left;
68
- color: $kws-toggle-track-bg-color-invert;
67
+ color: $track-bg-color-invert;
69
68
  }
70
69
  }
71
70
  .handle {
72
- transform: translate3d(1.785em, 0, 0);
71
+ transform: translate3d(1.9em, 0, 0);
73
72
  }
74
- @each $name, $pair in $kws-theme-colors {
75
- $color: nth($pair, 1);
76
- $color-invert: fn.bulmaFindColorInvert($color);
77
- $color-light: fn.bulmaFindLightColor($color);
78
- $color-dark: fn.bulmaFindDarkColor($color);
73
+ @each $name, $pair in $theme-colors {
74
+ $color: cv.getVar($name);
75
+ $color-invert: cv.getVar($name, "", "-invert");
79
76
  &.is-#{$name} {
80
77
  .track {
81
78
  border-color: $color;
@@ -88,12 +85,12 @@ $kws-theme-colors: dv.$colors !default;
88
85
  }
89
86
  }
90
87
  &.is-small {
91
- font-size: 0.75rem;
88
+ font-size: cv.getVar("size-small");
92
89
  }
93
90
  &.is-medium {
94
- font-size: 1rem;
91
+ font-size: cv.getVar("size-medium");
95
92
  }
96
93
  &.is-large {
97
- font-size: 1.25rem;
94
+ font-size: cv.getVar("size-large");
98
95
  }
99
96
  }
package/styles/ToggleButtons.scss ADDED
@@ -0,0 +1,50 @@
1
+ @use "bulma/sass/utilities/css-variables" as cv;
2
+ @use "bulma/sass/utilities/derived-variables" as dv;
3
+
4
+ $count-background: cv.getVar("danger") !default;
5
+ $count-color: cv.getVar("danger-invert") !default;
6
+
7
+ .kws-toggle-buttons {
8
+ .button,
9
+ .button:focus {
10
+ .icon {
11
+ margin: 0;
12
+ }
13
+ box-shadow: none;
14
+ &.is-active {
15
+ box-shadow: 0 0 0.6rem
16
+ hsla(
17
+ cv.getVar("button-outer-shadow-h"),
18
+ cv.getVar("button-outer-shadow-s"),
19
+ cv.getVar("button-outer-shadow-l"),
20
+ 0.2
21
+ )
22
+ inset !important;
23
+ }
24
+ }
25
+ .button {
26
+ position: relative;
27
+ .option-subtitle {
28
+ font-size: 0.7em;
29
+ display: block;
30
+ margin-top: -0.3em;
31
+ opacity: 0.7;
32
+ }
33
+ .count {
34
+ position: absolute;
35
+ font-weight: 600;
36
+ font-size: 0.8em;
37
+ border-radius: 999px;
38
+ padding: 0.15em 0.2em;
39
+ min-width: 1.8em;
40
+ min-height: 1.5em;
41
+ top: -0.75em;
42
+ right: 0.2em;
43
+ display: inline-flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ background: $count-background;
47
+ color: $count-color;
48
+ }
49
+ }
50
+ }
package/styles/Tooltip.scss CHANGED
@@ -1,17 +1,18 @@
1
1
  @use "bulma/sass/utilities/css-variables" as cv;
2
2
  @use "bulma/sass/utilities/derived-variables" as dv;
3
3
 
4
- $kws-theme-colors: dv.$colors !default;
5
- $kws-tt-background-color: #{cv.getVar("scheme-invert-ter")} !default;
6
- $kws-tt-foreground-color: #{cv.getVar("scheme-main")} !default;
7
- $kws-tt-arrow-size: 8px !default;
8
- $kws-tt-padding: 0.5rem !default;
9
- $kws-tt-radius: #{cv.getVar("radius-small")} !default;
10
- $kws-tt-shadow: 0 5px 10px -5px rgba(0, 0, 0, 0.4) !default;
11
- $kws-popover-background-color: #{cv.getVar("background")} !default;
12
- $kws-popover-foreground-color: #{cv.getVar("text")} !default;
13
- $kws-popover-arrow-color: #{cv.getVar("background")} !default;
14
- $kws-popover-radius: $kws-tt-radius !default;
4
+ $theme-colors: dv.$colors !default;
5
+ $background: cv.getVar("scheme-invert") !default;
6
+ $color: cv.getVar("text-invert") !default;
7
+ $arrow-size: 8px !default;
8
+ $padding: 0.5rem !default;
9
+ $radius: cv.getVar("radius-small") !default;
10
+ $shadow: 0 5px 10px -5px hsla(cv.getVar("shadow-h"), cv.getVar("shadow-s"), cv.getVar("shadow-l"), 0.4) !default;
11
+ $popover-background: cv.getVar("background") !default;
12
+ $popover-color: cv.getVar("text") !default;
13
+ $popover-arrow-color: cv.getVar("background") !default;
14
+ $popover-shadow: $shadow !default;
15
+ $popover-radius: $radius !default;
15
16
 
16
17
  .tippy-iOS {
17
18
  cursor: pointer !important;
@@ -24,9 +25,9 @@ $kws-popover-radius: $kws-tt-radius !default;
24
25
 
25
26
  .tippy-arrow {
26
27
  & {
27
- width: $kws-tt-arrow-size;
28
- height: $kws-tt-arrow-size;
29
- color: $kws-tt-background-color;
28
+ width: $arrow-size;
29
+ height: $arrow-size;
30
+ color: $background;
30
31
  }
31
32
 
32
33
  &::before {
@@ -38,7 +39,7 @@ $kws-popover-radius: $kws-tt-radius !default;
38
39
  }
39
40
  .tippy-content {
40
41
  position: relative;
41
- padding: $kws-tt-padding;
42
+ padding: $padding;
42
43
  z-index: 1;
43
44
  }
44
45
 
@@ -64,14 +65,14 @@ $kws-popover-radius: $kws-tt-radius !default;
64
65
  }
65
66
 
66
67
  position: relative;
67
- background-color: $kws-tt-background-color;
68
- color: $kws-tt-foreground-color;
69
- border-radius: $kws-tt-radius;
68
+ background-color: $background;
69
+ color: $color;
70
+ border-radius: $radius;
70
71
  outline: 0;
71
- box-shadow: $kws-tt-shadow;
72
+ box-shadow: $shadow;
72
73
  transition-property: transform, visibility, opacity;
73
74
 
74
- @each $name, $pair in $kws-theme-colors {
75
+ @each $name, $pair in $theme-colors {
75
76
  &[data-theme~="#{$name}"] {
76
77
  color: cv.getVar($name, "", "-invert");
77
78
  background-color: cv.getVar($name);
@@ -90,11 +91,12 @@ $kws-popover-radius: $kws-tt-radius !default;
90
91
 
91
92
  &[data-theme~="popover"] {
92
93
  font-size: 1rem;
93
- border-radius: $kws-popover-radius;
94
- color: $kws-popover-foreground-color;
95
- background-color: $kws-popover-background-color;
94
+ border-radius: $popover-radius;
95
+ color: $popover-color;
96
+ background-color: $popover-background;
97
+ box-shadow: $popover-shadow;
96
98
  .tippy-arrow {
97
- color: $kws-popover-arrow-color;
99
+ color: $popover-arrow-color;
98
100
  }
99
101
  .tippy-content {
100
102
  padding: 0;
package/types/type-defs/index.d.ts CHANGED
@@ -12,7 +12,7 @@ export const Colors = [
12
12
  "link",
13
13
  ] as const;
14
14
 
15
- export const ExtendedColors = [...Colors, "grey"] as const;
15
+ export const ExtendedColors = [...Colors, "grey", "transparent"] as const;
16
16
  export const BGColors = [...Colors, "transparent"] as const;
17
17
 
18
18
  export const Sizes = ["", "small", "medium", "large"] as const;