@medyll/idae-slotui-svelte 0.120.0 → 0.122.0

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 (208) hide show
  1. package/README.md +47 -47
  2. package/dist/base/alert/Alert.demo.svelte +62 -62
  3. package/dist/base/alert/Alert.svelte +121 -121
  4. package/dist/base/alert/alert.scss +93 -93
  5. package/dist/base/avatar/Avatar.demo.svelte +41 -41
  6. package/dist/base/avatar/Avatar.preview.svelte +6 -6
  7. package/dist/base/avatar/Avatar.svelte +65 -65
  8. package/dist/base/avatar/avatar.scss +17 -17
  9. package/dist/base/backdrop/Backdrop.demo.svelte +49 -49
  10. package/dist/base/backdrop/Backdrop.svelte +78 -78
  11. package/dist/base/backdrop/backdrop.scss +34 -34
  12. package/dist/base/badge/Badge.svelte +31 -31
  13. package/dist/base/badge/badge.scss +19 -19
  14. package/dist/base/box/Box.demo.svelte +54 -54
  15. package/dist/base/box/Box.svelte +72 -72
  16. package/dist/base/box/box.scss +33 -33
  17. package/dist/base/breadCrumb/BreadCrumb.svelte +23 -23
  18. package/dist/base/breadCrumb/breadcrumb.scss +11 -11
  19. package/dist/base/cartouche/Cartouche.demo.svelte +108 -108
  20. package/dist/base/cartouche/Cartouche.svelte +114 -114
  21. package/dist/base/cartouche/cartouche.scss +114 -114
  22. package/dist/base/chipper/Chipper.demo.svelte +45 -45
  23. package/dist/base/chipper/Chipper.svelte +36 -36
  24. package/dist/base/chipper/chipper.scss +65 -65
  25. package/dist/base/columner/Column.svelte +62 -62
  26. package/dist/base/columner/Columner.demo.svelte +15 -15
  27. package/dist/base/columner/Columner.svelte +21 -21
  28. package/dist/base/contentSwitcher/ContentSwitcher.demo.svelte +45 -45
  29. package/dist/base/contentSwitcher/ContentSwitcher.svelte +63 -63
  30. package/dist/base/contentSwitcher/content-switcher.scss +22 -22
  31. package/dist/base/debug/Debug.svelte +21 -21
  32. package/dist/base/demoer/DemoPage.svelte +40 -40
  33. package/dist/base/demoer/Demoer.svelte +170 -170
  34. package/dist/base/demoer/DemoerCode.svelte +45 -45
  35. package/dist/base/demoer/DemoerComponent.svelte +50 -50
  36. package/dist/base/divider/Divider.demo.svelte +34 -34
  37. package/dist/base/divider/Divider.svelte +68 -68
  38. package/dist/base/divider/divider.scss +19 -19
  39. package/dist/base/icon/Icon.demo.svelte +24 -24
  40. package/dist/base/icon/Icon.svelte +117 -117
  41. package/dist/base/icon/Icon.svelte.d.ts +1 -1
  42. package/dist/base/icon/icon.scss +17 -17
  43. package/dist/base/paper/Paper.demo.svelte +31 -31
  44. package/dist/base/paper/Paper.svelte +20 -20
  45. package/dist/base/paper/paper.scss +15 -15
  46. package/dist/base/titleBar/TitleBar.demo.svelte +30 -30
  47. package/dist/base/titleBar/TitleBar.svelte +40 -40
  48. package/dist/base/titleBar/title-bar.scss +29 -29
  49. package/dist/controls/autocomplete/AutoComplete.demo.svelte +88 -88
  50. package/dist/controls/autocomplete/AutoComplete.svelte +152 -152
  51. package/dist/controls/autocomplete/auto-complete.scss +15 -15
  52. package/dist/controls/button/Button.demo.svelte +165 -165
  53. package/dist/controls/button/Button.svelte +95 -95
  54. package/dist/controls/button/Button.svelte.d.ts +1 -1
  55. package/dist/controls/button/ButtonAction.svelte +55 -55
  56. package/dist/controls/button/ButtonMenu.svelte +55 -55
  57. package/dist/controls/button/IconButton.svelte +45 -45
  58. package/dist/controls/button/button-action.scss +8 -8
  59. package/dist/controls/button/button-menu.scss +36 -36
  60. package/dist/controls/button/button.scss +293 -293
  61. package/dist/controls/checkbox/Checkbox.demo.svelte +29 -29
  62. package/dist/controls/checkbox/Checkbox.svelte +59 -59
  63. package/dist/controls/checkbox/checkbox.scss +115 -115
  64. package/dist/controls/confirm/Confirm.demo.svelte +60 -60
  65. package/dist/controls/confirm/Confirm.preview.svelte +14 -14
  66. package/dist/controls/confirm/Confirm.svelte +156 -156
  67. package/dist/controls/confirm/confirm.scss +12 -12
  68. package/dist/controls/inplaceedit/InPlaceEdit.demo.svelte +41 -41
  69. package/dist/controls/inplaceedit/InPlaceEdit.svelte +109 -109
  70. package/dist/controls/progress/Progress.demo.svelte +30 -30
  71. package/dist/controls/progress/Progress.svelte +26 -26
  72. package/dist/controls/progress/progress.scss +23 -23
  73. package/dist/controls/rating/Rating.demo.svelte +45 -45
  74. package/dist/controls/rating/Rating.svelte +44 -44
  75. package/dist/controls/rating/Rating.svelte.d.ts +1 -1
  76. package/dist/controls/rating/rating.scss +9 -9
  77. package/dist/controls/select/Select.demo.svelte +101 -101
  78. package/dist/controls/select/Select.svelte +125 -125
  79. package/dist/controls/select/select.scss +13 -13
  80. package/dist/controls/slider/Slider.demo.svelte +34 -34
  81. package/dist/controls/slider/Slider.svelte +153 -153
  82. package/dist/controls/slider/slider.scss +51 -51
  83. package/dist/controls/stepper/Stepper.demo.svelte +32 -32
  84. package/dist/controls/stepper/Stepper.svelte +30 -30
  85. package/dist/controls/stepper/stepper.scss +23 -23
  86. package/dist/controls/switch/Switch.demo.svelte +61 -61
  87. package/dist/controls/switch/Switch.svelte +45 -45
  88. package/dist/controls/switch/switch.scss +73 -73
  89. package/dist/controls/textfield/TextField.demo.svelte +79 -79
  90. package/dist/controls/textfield/TextField.svelte +86 -86
  91. package/dist/controls/textfield/TextField.svelte.d.ts +1 -1
  92. package/dist/controls/textfield/textfield.scss +68 -68
  93. package/dist/csss/csss.scss +10 -10
  94. package/dist/data/dataList/DataList.demo.svelte +151 -151
  95. package/dist/data/dataList/DataList.preview.svelte +23 -23
  96. package/dist/data/dataList/DataList.svelte +233 -233
  97. package/dist/data/dataList/DataListCell.svelte +212 -212
  98. package/dist/data/dataList/DataListHead.svelte +75 -75
  99. package/dist/data/dataList/DataListRow.svelte +93 -93
  100. package/dist/data/dataList/datalist.scss +157 -157
  101. package/dist/data/finder/Finder.demo.svelte +55 -55
  102. package/dist/data/finder/Finder.svelte +166 -166
  103. package/dist/data/finder/finder.scss +14 -14
  104. package/dist/data/grouper/Grouper.demo.svelte +36 -36
  105. package/dist/data/grouper/Grouper.svelte +85 -85
  106. package/dist/data/jsoner/Jsoner.svelte +40 -40
  107. package/dist/data/list/List.svelte +16 -16
  108. package/dist/data/list/ListItem.svelte +10 -10
  109. package/dist/data/list/ListTitle.svelte +8 -8
  110. package/dist/data/loader/Loader.demo.svelte +95 -95
  111. package/dist/data/loader/Loader.preview.svelte +7 -7
  112. package/dist/data/loader/Loader.svelte +99 -99
  113. package/dist/data/loader/loader.scss +50 -50
  114. package/dist/data/sorter/Sorter.demo.svelte +62 -62
  115. package/dist/data/sorter/Sorter.svelte +80 -80
  116. package/dist/data/sorter/Sorterer.svelte +27 -27
  117. package/dist/data/sorter/sorterer.scss +11 -11
  118. package/dist/index.d.ts +46 -47
  119. package/dist/index.js +46 -47
  120. package/dist/navigation/drawer/Drawer.demo.svelte +52 -52
  121. package/dist/navigation/drawer/Drawer.svelte +163 -163
  122. package/dist/navigation/drawer/drawer.scss +69 -69
  123. package/dist/navigation/tabs/Tabs.demo.svelte +83 -83
  124. package/dist/navigation/tabs/Tabs.preview.svelte +22 -22
  125. package/dist/navigation/tabs/Tabs.svelte +158 -158
  126. package/dist/navigation/tabs/tabs.scss +92 -92
  127. package/dist/slotui-css/slotui-css.css +288 -288
  128. package/dist/slotui-css/slotui-min-css.css +288 -288
  129. package/dist/styles/slotui-mixins.scss +168 -168
  130. package/dist/styles/slotui-presets.scss +56 -56
  131. package/dist/styles/slotuisheet/SlotuiSheet.svelte +36 -36
  132. package/dist/styles/slotuisheet/SlotyuiSheet.demo.svelte +28 -28
  133. package/dist/styles/slotuisheet/sheetConfig.scss +7 -7
  134. package/dist/styles/slotuisheet/slotui-sheet.scss +192 -192
  135. package/dist/styles/slotuisheet/stylesheet-container.scss +147 -147
  136. package/dist/styles/slotuisheet/stylesheet.scss +156 -156
  137. package/dist/types/slotui-ambient.d.ts +27 -27
  138. package/dist/ui/bootstrapp/BootStrApp.svelte +92 -92
  139. package/dist/ui/chromeFrame/ChromeFrame.svelte +43 -43
  140. package/dist/ui/chromeFrame/ChromeFrameButtonList.svelte +33 -33
  141. package/dist/ui/chromeFrame/ChromeFrameList.svelte +106 -106
  142. package/dist/ui/chromeFrame/chrome-frame.scss +34 -34
  143. package/dist/ui/frame/Frame.demo.svelte +48 -48
  144. package/dist/ui/frame/Frame.svelte +90 -90
  145. package/dist/ui/frame/frame.scss +46 -46
  146. package/dist/ui/login/Login.demo.svelte +62 -62
  147. package/dist/ui/login/Login.svelte +102 -102
  148. package/dist/ui/marquee/Marquee.demo.svelte +33 -33
  149. package/dist/ui/marquee/Marquee.svelte +97 -97
  150. package/dist/ui/marquee/marquee.scss +34 -34
  151. package/dist/ui/menu/Menu.svelte +9 -9
  152. package/dist/ui/menu/MenuItem.svelte +9 -9
  153. package/dist/ui/menu/MenuTitle.svelte +10 -10
  154. package/dist/ui/menu/menu.scss +61 -61
  155. package/dist/ui/menuList/MenuList.demo.svelte +73 -73
  156. package/dist/ui/menuList/MenuList.svelte +143 -143
  157. package/dist/ui/menuList/MenuListItem.svelte +134 -134
  158. package/dist/ui/menuList/MenuListTitle.svelte +10 -10
  159. package/dist/ui/menuList/menu-list.scss +120 -120
  160. package/dist/ui/panel/Panel.demo.svelte +169 -169
  161. package/dist/ui/panel/Panel.svelte +96 -96
  162. package/dist/ui/panel/PanelGrid.svelte +62 -62
  163. package/dist/ui/panel/PanelSlide.svelte +156 -156
  164. package/dist/ui/panel/Paneler.svelte +63 -63
  165. package/dist/ui/panel/panel.scss +32 -32
  166. package/dist/ui/popper/Popper.demo.svelte +92 -92
  167. package/dist/ui/popper/Popper.svelte +160 -160
  168. package/dist/ui/popper/popper.scss +108 -108
  169. package/dist/ui/preview/Preview.svelte +41 -41
  170. package/dist/ui/serviceBox/ServiceBox.svelte +24 -24
  171. package/dist/ui/startMenu/BootMenu.svelte +102 -102
  172. package/dist/ui/startMenu/boot-menu.scss +86 -86
  173. package/dist/ui/taskbar/TaskBarContent.svelte +20 -20
  174. package/dist/ui/taskbar/Taskbar.svelte +26 -26
  175. package/dist/ui/taskbar/taskbar.scss +28 -28
  176. package/dist/ui/themeswitcher/ThemeSwitcher.svelte +18 -18
  177. package/dist/ui/toast/Toast.demo.svelte +19 -19
  178. package/dist/ui/toast/Toast.svelte +60 -60
  179. package/dist/ui/toast/Toaster.svelte +18 -18
  180. package/dist/ui/toggleBar/ToggleBar.demo.svelte +114 -114
  181. package/dist/ui/toggleBar/ToggleBar.svelte +58 -58
  182. package/dist/ui/toggleBar/ToggleBar.svelte.d.ts +1 -1
  183. package/dist/ui/toggleBar/toggle-bar.scss +45 -45
  184. package/dist/ui/toolBar/ToolBar.demo.svelte +98 -98
  185. package/dist/ui/toolBar/ToolBar.svelte +30 -30
  186. package/dist/ui/toolBar/toolbar.scss +32 -32
  187. package/dist/ui/tree/Tree.demo.svelte +84 -84
  188. package/dist/ui/tree/Tree.preview.svelte +19 -19
  189. package/dist/ui/tree/Tree.svelte +182 -182
  190. package/dist/ui/tree/tree.scss +38 -38
  191. package/dist/ui/window/Window.demo.svelte +111 -111
  192. package/dist/ui/window/Window.svelte +177 -177
  193. package/dist/ui/window/window.scss +66 -66
  194. package/dist/utils/content/Content.svelte +78 -78
  195. package/dist/utils/contextRooter/ContextRooter.demo.svelte +33 -33
  196. package/dist/utils/contextRooter/ContextRooter.svelte +6 -6
  197. package/dist/utils/css/Css.demo.svelte +5 -5
  198. package/dist/utils/css/Css.svelte +64 -64
  199. package/dist/utils/effects/transitions.js +6 -6
  200. package/dist/utils/looper/Looper.demo.svelte +36 -36
  201. package/dist/utils/looper/Looper.svelte +47 -47
  202. package/dist/utils/slotted/Slotted.svelte +21 -21
  203. package/dist/utils/stylesheet/StyleSheet.demo.svelte +28 -28
  204. package/dist/utils/stylesheet/StyleSheet.svelte +30 -30
  205. package/dist/utils/stylesheet/containerConfig.scss +7 -7
  206. package/dist/utils/stylesheet/stylesheet.scss +147 -147
  207. package/dist/utils/uses/sx4u/sx4uPreprocess.js +34 -34
  208. package/package.json +4 -4
package/dist/styles/slotuisheet/slotui-sheet.scss CHANGED
@@ -1,192 +1,192 @@
1
- @use "../slotui-presets.scss";
2
-
3
- :root {
4
- transition: all 0.3s ease-out;
5
- }
6
-
7
- :root {
8
- @each $preset, $preset-value in slotui-presets.$preset-radius-list {
9
- --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
10
- }
11
-
12
- @each $preset, $preset-value in slotui-presets.$preset-pad-list {
13
- --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
14
- }
15
-
16
- @each $preset, $preset-value in slotui-presets.$preset-gap-list {
17
- --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
18
- }
19
-
20
- @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
21
- --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
22
- }
23
-
24
- @each $preset, $preset-value in slotui-presets.$preset-tall-list {
25
- --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
26
- }
27
-
28
- @each $preset, $preset-value in slotui-presets.$preset-width-list {
29
- --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
30
- }
31
- }
32
-
33
- :root {
34
- --white: #fff;
35
- --black: #333;
36
- }
37
-
38
- @media (prefers-color-scheme: dark) {
39
- :root {
40
- --white: #333;
41
- --black: #ccc;
42
- }
43
- }
44
-
45
- :root.dark,
46
- :root[data-theme="dark"],
47
- body[data-theme="dark"],
48
- :root[theme="dark"] {
49
- --white: #333;
50
- --black: #ccc;
51
- }
52
-
53
- :root {
54
- --#{slotui-presets.$vendor}-color-foreground: #333333;
55
- --#{slotui-presets.$vendor}-color-background: #ffffff;
56
-
57
- --#{slotui-presets.$vendor}-color-paper: color-mix(
58
- in srgb,
59
- var(--#{slotui-presets.$vendor}-color-background) 90%,
60
- var(--#{slotui-presets.$vendor}-color-foreground) 10%
61
- );
62
-
63
- --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
64
- --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
65
- --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
66
-
67
- --#{slotui-presets.$vendor}-color-disabled: color-mix(
68
- in srgb,
69
- var(--#{slotui-presets.$vendor}-color-foreground) 20%,
70
- var(--#{slotui-presets.$vendor}-color-background)
71
- );
72
- --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
73
- in srgb,
74
- var(--#{slotui-presets.$vendor}-color-foreground) 30%,
75
- var(--#{slotui-presets.$vendor}-color-background)
76
- );
77
- --#{slotui-presets.$vendor}-background-disabled: color-mix(
78
- in srgb,
79
- var(--#{slotui-presets.$vendor}-color-background) 90%,
80
- var(--#{slotui-presets.$vendor}-color-foreground)
81
- );
82
- }
83
-
84
- :root.dark,
85
- :root[data-theme="dark"],
86
- body[data-theme="dark"],
87
- :root[theme="dark"] {
88
- --#{slotui-presets.$vendor}-color-foreground: #ffffff;
89
- --#{slotui-presets.$vendor}-color-background: #27323a;
90
- }
91
-
92
- :root {
93
- --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
94
- --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
95
- --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
96
- --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
97
- --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
98
- }
99
-
100
- :root {
101
- --#{slotui-presets.$vendor}-color-discrete: #ccc;
102
- --#{slotui-presets.$vendor}-color-success: #075c07;
103
- --#{slotui-presets.$vendor}-color-info: #ffd324;
104
- --#{slotui-presets.$vendor}-color-warning: #b49104;
105
- --#{slotui-presets.$vendor}-color-alert: #cc5c00;
106
- --#{slotui-presets.$vendor}-color-error: #cc0000;
107
- }
108
- :root {
109
- $tints: foreground, "background", primary, secondary, tertiary;
110
-
111
- @each $tint in $tints {
112
- /* alpha #{$tint} */
113
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
114
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
115
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
116
- }
117
- @each $tint in $tints {
118
- /* darken #{$tint} */
119
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
120
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
121
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
122
- }
123
- @each $tint in $tints {
124
- /* lighten #{$tint} */
125
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
126
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
127
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
128
- }
129
-
130
- $tints: discrete, success, info, warning, alert, error;
131
- @each $tint in $tints {
132
- /* alpha #{$tint} */
133
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
134
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
135
- --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
136
- }
137
- @each $tint in $tints {
138
- /* darken #{$tint} */
139
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
140
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
141
- --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
142
- }
143
- @each $tint in $tints {
144
- /* lighten #{$tint} */
145
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
146
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
147
- --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
148
- }
149
- }
150
- /* presets */
151
- :root {
152
- --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
153
-
154
- --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
155
- --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
156
- --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
157
-
158
- --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
159
- --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
160
- --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
161
- }
162
-
163
- .bg-themed-scheme-discrete {
164
- color: black;
165
- text-shadow: 0 0 0.125rem #b3b3b3;
166
- background-color: #ccc;
167
- }
168
- .bg-themed-scheme-success {
169
- color: white;
170
- text-shadow: 0 0 0.125rem #004d00;
171
- background-color: green;
172
- }
173
- .bg-themed-scheme-info {
174
- color: black;
175
- text-shadow: 0 0 0.125rem #ffd324;
176
- background-color: #ffdd57;
177
- }
178
- .bg-themed-scheme-warning {
179
- color: black;
180
- text-shadow: 0 0 0.125rem #b49104;
181
- background-color: #e6b905;
182
- }
183
- .bg-themed-scheme-alert {
184
- color: black;
185
- text-shadow: 0 0 0.125rem #cc5c00;
186
- background-color: #ff7300;
187
- }
188
- .bg-themed-scheme-error {
189
- color: white;
190
- text-shadow: 0 0 0.125rem #cc0000;
191
- background-color: red;
192
- }
1
+ @use "../slotui-presets.scss";
2
+
3
+ :root {
4
+ transition: all 0.3s ease-out;
5
+ }
6
+
7
+ :root {
8
+ @each $preset, $preset-value in slotui-presets.$preset-radius-list {
9
+ --#{slotui-presets.$vendor}-radius-#{$preset}: #{$preset-value};
10
+ }
11
+
12
+ @each $preset, $preset-value in slotui-presets.$preset-pad-list {
13
+ --#{slotui-presets.$vendor}-pad-#{$preset}: #{$preset-value};
14
+ }
15
+
16
+ @each $preset, $preset-value in slotui-presets.$preset-gap-list {
17
+ --#{slotui-presets.$vendor}-gap-#{$preset}: #{$preset-value};
18
+ }
19
+
20
+ @each $preset, $preset-value in slotui-presets.$preset-gutter-list {
21
+ --#{slotui-presets.$vendor}-gutter-#{$preset}: #{$preset-value};
22
+ }
23
+
24
+ @each $preset, $preset-value in slotui-presets.$preset-tall-list {
25
+ --#{slotui-presets.$vendor}-tall-#{$preset}: #{$preset-value};
26
+ }
27
+
28
+ @each $preset, $preset-value in slotui-presets.$preset-width-list {
29
+ --#{slotui-presets.$vendor}-width-#{$preset}: #{$preset-value};
30
+ }
31
+ }
32
+
33
+ :root {
34
+ --white: #fff;
35
+ --black: #333;
36
+ }
37
+
38
+ @media (prefers-color-scheme: dark) {
39
+ :root {
40
+ --white: #333;
41
+ --black: #ccc;
42
+ }
43
+ }
44
+
45
+ :root.dark,
46
+ :root[data-theme="dark"],
47
+ body[data-theme="dark"],
48
+ :root[theme="dark"] {
49
+ --white: #333;
50
+ --black: #ccc;
51
+ }
52
+
53
+ :root {
54
+ --#{slotui-presets.$vendor}-color-foreground: #333333;
55
+ --#{slotui-presets.$vendor}-color-background: #ffffff;
56
+
57
+ --#{slotui-presets.$vendor}-color-paper: color-mix(
58
+ in srgb,
59
+ var(--#{slotui-presets.$vendor}-color-background) 90%,
60
+ var(--#{slotui-presets.$vendor}-color-foreground) 10%
61
+ );
62
+
63
+ --#{slotui-presets.$vendor}-color-primary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 60%, #4caf50);
64
+ --#{slotui-presets.$vendor}-color-secondary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 80%, #2196f3);
65
+ --#{slotui-presets.$vendor}-color-tertiary: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-foreground) 70%, #ffc107);
66
+
67
+ --#{slotui-presets.$vendor}-color-disabled: color-mix(
68
+ in srgb,
69
+ var(--#{slotui-presets.$vendor}-color-foreground) 20%,
70
+ var(--#{slotui-presets.$vendor}-color-background)
71
+ );
72
+ --#{slotui-presets.$vendor}-color-disabled-border: color-mix(
73
+ in srgb,
74
+ var(--#{slotui-presets.$vendor}-color-foreground) 30%,
75
+ var(--#{slotui-presets.$vendor}-color-background)
76
+ );
77
+ --#{slotui-presets.$vendor}-background-disabled: color-mix(
78
+ in srgb,
79
+ var(--#{slotui-presets.$vendor}-color-background) 90%,
80
+ var(--#{slotui-presets.$vendor}-color-foreground)
81
+ );
82
+ }
83
+
84
+ :root.dark,
85
+ :root[data-theme="dark"],
86
+ body[data-theme="dark"],
87
+ :root[theme="dark"] {
88
+ --#{slotui-presets.$vendor}-color-foreground: #ffffff;
89
+ --#{slotui-presets.$vendor}-color-background: #27323a;
90
+ }
91
+
92
+ :root {
93
+ --#{slotui-presets.$vendor}-elevation-1: 0 0 1.75px 0 rgba(0, 0, 0, 0.15), 0 0.15px 0.46px 0 rgba(0, 0, 0, 0.1);
94
+ --#{slotui-presets.$vendor}-elevation-2: 0 0 3.44px 0 rgba(0, 0, 0, 0.15), 0 0.3px 0.93px 0 rgba(0, 0, 0, 0.1);
95
+ --#{slotui-presets.$vendor}-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
96
+ --#{slotui-presets.$vendor}-elevation-4: 0 0 6.89px 0 rgba(0, 0, 0, 0.15), 0 0.61px 1.86px 0 rgba(0, 0, 0, 0.1);
97
+ --#{slotui-presets.$vendor}-elevation-5: 0 0 8.62px 0 rgba(0, 0, 0, 0.15), 0 0.76px 2.32px 0 rgba(0, 0, 0, 0.1);
98
+ }
99
+
100
+ :root {
101
+ --#{slotui-presets.$vendor}-color-discrete: #ccc;
102
+ --#{slotui-presets.$vendor}-color-success: #075c07;
103
+ --#{slotui-presets.$vendor}-color-info: #ffd324;
104
+ --#{slotui-presets.$vendor}-color-warning: #b49104;
105
+ --#{slotui-presets.$vendor}-color-alert: #cc5c00;
106
+ --#{slotui-presets.$vendor}-color-error: #cc0000;
107
+ }
108
+ :root {
109
+ $tints: foreground, "background", primary, secondary, tertiary;
110
+
111
+ @each $tint in $tints {
112
+ /* alpha #{$tint} */
113
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
114
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
115
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 80%);
116
+ }
117
+ @each $tint in $tints {
118
+ /* darken #{$tint} */
119
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
120
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
121
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
122
+ }
123
+ @each $tint in $tints {
124
+ /* lighten #{$tint} */
125
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
126
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
127
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
128
+ }
129
+
130
+ $tints: discrete, success, info, warning, alert, error;
131
+ @each $tint in $tints {
132
+ /* alpha #{$tint} */
133
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 10%);
134
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 30%);
135
+ --#{slotui-presets.$vendor}-color-#{$tint}-alpha-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), transparent 60%);
136
+ }
137
+ @each $tint in $tints {
138
+ /* darken #{$tint} */
139
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 10%);
140
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 30%);
141
+ --#{slotui-presets.$vendor}-color-#{$tint}-darken-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), black 60%);
142
+ }
143
+ @each $tint in $tints {
144
+ /* lighten #{$tint} */
145
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-low: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 10%);
146
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-mid: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 30%);
147
+ --#{slotui-presets.$vendor}-color-#{$tint}-lighten-high: color-mix(in srgb, var(--#{slotui-presets.$vendor}-color-#{$tint}), white 60%);
148
+ }
149
+ }
150
+ /* presets */
151
+ :root {
152
+ --#{slotui-presets.$vendor}-color-border: var(--#{slotui-presets.$vendor}-color-foreground-alpha-low);
153
+
154
+ --#{slotui-presets.$vendor}-hover-background-color: var(--#{slotui-presets.$vendor}-color-secondary-alpha-mid);
155
+ --#{slotui-presets.$vendor}-hover-border-color: var(--#{slotui-presets.$vendor}-color-foreground-alpha-high);
156
+ --#{slotui-presets.$vendor}-hover-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
157
+
158
+ --#{slotui-presets.$vendor}-selected-background-color: var(--#{slotui-presets.$vendor}-color-primary-alpha-mid);
159
+ --#{slotui-presets.$vendor}-selected-border-color: var(--#{slotui-presets.$vendor}-color-primary);
160
+ --#{slotui-presets.$vendor}-selected-shadow: var(--#{slotui-presets.$vendor}-elevation-3);
161
+ }
162
+
163
+ .bg-themed-scheme-discrete {
164
+ color: black;
165
+ text-shadow: 0 0 0.125rem #b3b3b3;
166
+ background-color: #ccc;
167
+ }
168
+ .bg-themed-scheme-success {
169
+ color: white;
170
+ text-shadow: 0 0 0.125rem #004d00;
171
+ background-color: green;
172
+ }
173
+ .bg-themed-scheme-info {
174
+ color: black;
175
+ text-shadow: 0 0 0.125rem #ffd324;
176
+ background-color: #ffdd57;
177
+ }
178
+ .bg-themed-scheme-warning {
179
+ color: black;
180
+ text-shadow: 0 0 0.125rem #b49104;
181
+ background-color: #e6b905;
182
+ }
183
+ .bg-themed-scheme-alert {
184
+ color: black;
185
+ text-shadow: 0 0 0.125rem #cc5c00;
186
+ background-color: #ff7300;
187
+ }
188
+ .bg-themed-scheme-error {
189
+ color: white;
190
+ text-shadow: 0 0 0.125rem #cc0000;
191
+ background-color: red;
192
+ }