@medyll/idae-slotui-svelte 0.121.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 (112) hide show
  1. package/dist/base/icon/Icon.svelte.d.ts +1 -1
  2. package/dist/controls/button/Button.svelte.d.ts +1 -1
  3. package/dist/controls/rating/Rating.svelte.d.ts +1 -1
  4. package/dist/controls/textfield/TextField.svelte.d.ts +1 -1
  5. package/dist/index.d.ts +44 -44
  6. package/dist/index.js +44 -44
  7. package/dist/slotui-css/alert.css +95 -95
  8. package/dist/slotui-css/alert.min.css +95 -95
  9. package/dist/slotui-css/auto-complete.css +11 -11
  10. package/dist/slotui-css/auto-complete.min.css +11 -11
  11. package/dist/slotui-css/avatar.css +12 -12
  12. package/dist/slotui-css/avatar.min.css +12 -12
  13. package/dist/slotui-css/backdrop.css +31 -31
  14. package/dist/slotui-css/backdrop.min.css +31 -31
  15. package/dist/slotui-css/badge.css +15 -15
  16. package/dist/slotui-css/badge.min.css +15 -15
  17. package/dist/slotui-css/boot-menu.css +76 -76
  18. package/dist/slotui-css/boot-menu.min.css +76 -76
  19. package/dist/slotui-css/box.css +28 -28
  20. package/dist/slotui-css/box.min.css +28 -28
  21. package/dist/slotui-css/breadcrumb.css +2 -2
  22. package/dist/slotui-css/breadcrumb.min.css +2 -2
  23. package/dist/slotui-css/button-action.css +7 -7
  24. package/dist/slotui-css/button-action.min.css +7 -7
  25. package/dist/slotui-css/button-menu.css +30 -30
  26. package/dist/slotui-css/button-menu.min.css +30 -30
  27. package/dist/slotui-css/button.css +760 -760
  28. package/dist/slotui-css/button.min.css +760 -760
  29. package/dist/slotui-css/cartouche.css +113 -113
  30. package/dist/slotui-css/cartouche.min.css +113 -113
  31. package/dist/slotui-css/checkbox.css +126 -126
  32. package/dist/slotui-css/checkbox.min.css +126 -126
  33. package/dist/slotui-css/chipper.css +55 -55
  34. package/dist/slotui-css/chipper.min.css +55 -55
  35. package/dist/slotui-css/chrome-frame.css +33 -33
  36. package/dist/slotui-css/chrome-frame.min.css +33 -33
  37. package/dist/slotui-css/confirm.css +8 -8
  38. package/dist/slotui-css/confirm.min.css +8 -8
  39. package/dist/slotui-css/containerConfig.css +6 -6
  40. package/dist/slotui-css/containerConfig.min.css +6 -6
  41. package/dist/slotui-css/content-switcher.css +20 -20
  42. package/dist/slotui-css/content-switcher.min.css +20 -20
  43. package/dist/slotui-css/csss.css +9 -9
  44. package/dist/slotui-css/csss.min.css +9 -9
  45. package/dist/slotui-css/datalist.css +135 -135
  46. package/dist/slotui-css/datalist.min.css +135 -135
  47. package/dist/slotui-css/divider.css +15 -15
  48. package/dist/slotui-css/divider.min.css +15 -15
  49. package/dist/slotui-css/drawer.css +87 -87
  50. package/dist/slotui-css/drawer.min.css +87 -87
  51. package/dist/slotui-css/finder.css +73 -73
  52. package/dist/slotui-css/finder.min.css +73 -73
  53. package/dist/slotui-css/frame.css +48 -48
  54. package/dist/slotui-css/frame.min.css +48 -48
  55. package/dist/slotui-css/icon.css +15 -15
  56. package/dist/slotui-css/icon.min.css +15 -15
  57. package/dist/slotui-css/loader.css +45 -45
  58. package/dist/slotui-css/loader.min.css +45 -45
  59. package/dist/slotui-css/marquee.css +57 -57
  60. package/dist/slotui-css/marquee.min.css +57 -57
  61. package/dist/slotui-css/menu-list.css +216 -216
  62. package/dist/slotui-css/menu-list.min.css +216 -216
  63. package/dist/slotui-css/menu.css +95 -95
  64. package/dist/slotui-css/menu.min.css +95 -95
  65. package/dist/slotui-css/panel.css +24 -24
  66. package/dist/slotui-css/panel.min.css +24 -24
  67. package/dist/slotui-css/paper.css +20 -20
  68. package/dist/slotui-css/paper.min.css +20 -20
  69. package/dist/slotui-css/popper.css +84 -84
  70. package/dist/slotui-css/popper.min.css +84 -84
  71. package/dist/slotui-css/progress.css +19 -19
  72. package/dist/slotui-css/progress.min.css +19 -19
  73. package/dist/slotui-css/rating.css +8 -8
  74. package/dist/slotui-css/rating.min.css +8 -8
  75. package/dist/slotui-css/select.css +10 -10
  76. package/dist/slotui-css/select.min.css +10 -10
  77. package/dist/slotui-css/sheetConfig.css +6 -6
  78. package/dist/slotui-css/sheetConfig.min.css +6 -6
  79. package/dist/slotui-css/slider.css +73 -73
  80. package/dist/slotui-css/slider.min.css +73 -73
  81. package/dist/slotui-css/slotui-css.css +4574 -4574
  82. package/dist/slotui-css/slotui-min-css.css +4574 -4574
  83. package/dist/slotui-css/slotui-sheet.css +294 -294
  84. package/dist/slotui-css/slotui-sheet.min.css +294 -294
  85. package/dist/slotui-css/sorterer.css +10 -10
  86. package/dist/slotui-css/sorterer.min.css +10 -10
  87. package/dist/slotui-css/stepper.css +19 -19
  88. package/dist/slotui-css/stepper.min.css +19 -19
  89. package/dist/slotui-css/stylesheet-container.css +373 -373
  90. package/dist/slotui-css/stylesheet-container.min.css +373 -373
  91. package/dist/slotui-css/stylesheet.css +370 -370
  92. package/dist/slotui-css/stylesheet.min.css +370 -370
  93. package/dist/slotui-css/switch.css +62 -62
  94. package/dist/slotui-css/switch.min.css +62 -62
  95. package/dist/slotui-css/tabs.css +84 -84
  96. package/dist/slotui-css/tabs.min.css +84 -84
  97. package/dist/slotui-css/taskbar.css +24 -24
  98. package/dist/slotui-css/taskbar.min.css +24 -24
  99. package/dist/slotui-css/textfield.css +127 -127
  100. package/dist/slotui-css/textfield.min.css +127 -127
  101. package/dist/slotui-css/title-bar.css +27 -27
  102. package/dist/slotui-css/title-bar.min.css +27 -27
  103. package/dist/slotui-css/toggle-bar.css +40 -40
  104. package/dist/slotui-css/toggle-bar.min.css +40 -40
  105. package/dist/slotui-css/toolbar.css +27 -27
  106. package/dist/slotui-css/toolbar.min.css +27 -27
  107. package/dist/slotui-css/tree.css +49 -49
  108. package/dist/slotui-css/tree.min.css +49 -49
  109. package/dist/slotui-css/window.css +59 -59
  110. package/dist/slotui-css/window.min.css +59 -59
  111. package/dist/ui/toggleBar/ToggleBar.svelte.d.ts +1 -1
  112. package/package.json +4 -4
package/dist/slotui-css/slotui-sheet.css CHANGED
@@ -1,295 +1,295 @@
1
- :root {
2
- transition: all 0.3s ease-out;
3
- }
4
-
5
- :root {
6
- --sld-radius-tiny: 2px;
7
- --sld-radius-small: 4px;
8
- --sld-radius-med: 8px;
9
- --sld-radius-large: 16px;
10
- --sld-pad-tiny: 0.25rem;
11
- --sld-pad-small: 0.5rem;
12
- --sld-pad-med: 1rem;
13
- --sld-pad-large: 1.5rem;
14
- --sld-gap-tiny: 0.25rem;
15
- --sld-gap-mini: 0.4rem;
16
- --sld-gap-small: 0.5rem;
17
- --sld-gap-med: 1rem;
18
- --sld-gap-large: 1.5rem;
19
- --sld-gap-default: 0.5rem;
20
- --sld-gutter-tiny: 0.25rem;
21
- --sld-gutter-mini: 0.5rem;
22
- --sld-gutter-small: 1rem;
23
- --sld-gutter-med: 2rem;
24
- --sld-gutter-kind: 3rem;
25
- --sld-gutter-default: 1rem;
26
- --sld-tall-tiny: 1rem;
27
- --sld-tall-mini: 1.5rem;
28
- --sld-tall-small: 2.5rem;
29
- --sld-tall-med: 3.5rem;
30
- --sld-tall-kind: 4rem;
31
- --sld-tall-auto: auto;
32
- --sld-tall-default: 2.5rem;
33
- --sld-width-tiny: 2rem;
34
- --sld-width-mini: 3rem;
35
- --sld-width-small: 10rem;
36
- --sld-width-med: 14rem;
37
- --sld-width-kind: 20rem;
38
- --sld-width-full: 100%;
39
- --sld-width-auto: auto;
40
- --sld-width-default: 10rem;
41
- }
42
-
43
- :root {
44
- --white: #fff;
45
- --black: #333;
46
- }
47
-
48
- @media (prefers-color-scheme: dark) {
49
- :root {
50
- --white: #333;
51
- --black: #ccc;
52
- }
53
- }
54
- :root.dark,
55
- :root[data-theme=dark],
56
- body[data-theme=dark],
57
- :root[theme=dark] {
58
- --white: #333;
59
- --black: #ccc;
60
- }
61
-
62
- :root {
63
- --sld-color-foreground: #333333;
64
- --sld-color-background: #ffffff;
65
- --sld-color-paper: color-mix(
66
- in srgb,
67
- var(--sld-color-background) 90%,
68
- var(--sld-color-foreground) 10%
69
- );
70
- --sld-color-primary: color-mix(in srgb, var(--sld-color-foreground) 60%, #4caf50);
71
- --sld-color-secondary: color-mix(in srgb, var(--sld-color-foreground) 80%, #2196f3);
72
- --sld-color-tertiary: color-mix(in srgb, var(--sld-color-foreground) 70%, #ffc107);
73
- --sld-color-disabled: color-mix(
74
- in srgb,
75
- var(--sld-color-foreground) 20%,
76
- var(--sld-color-background)
77
- );
78
- --sld-color-disabled-border: color-mix(
79
- in srgb,
80
- var(--sld-color-foreground) 30%,
81
- var(--sld-color-background)
82
- );
83
- --sld-background-disabled: color-mix(
84
- in srgb,
85
- var(--sld-color-background) 90%,
86
- var(--sld-color-foreground)
87
- );
88
- }
89
-
90
- :root.dark,
91
- :root[data-theme=dark],
92
- body[data-theme=dark],
93
- :root[theme=dark] {
94
- --sld-color-foreground: #ffffff;
95
- --sld-color-background: #27323a;
96
- }
97
-
98
- :root {
99
- --sld-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);
100
- --sld-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);
101
- --sld-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
102
- --sld-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);
103
- --sld-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);
104
- }
105
-
106
- :root {
107
- --sld-color-discrete: #ccc;
108
- --sld-color-success: #075c07;
109
- --sld-color-info: #ffd324;
110
- --sld-color-warning: #b49104;
111
- --sld-color-alert: #cc5c00;
112
- --sld-color-error: #cc0000;
113
- }
114
-
115
- :root {
116
- /* alpha foreground */
117
- --sld-color-foreground-alpha-low: color-mix(in srgb, var(--sld-color-foreground), transparent 10%);
118
- --sld-color-foreground-alpha-mid: color-mix(in srgb, var(--sld-color-foreground), transparent 60%);
119
- --sld-color-foreground-alpha-high: color-mix(in srgb, var(--sld-color-foreground), transparent 80%);
120
- /* alpha background */
121
- --sld-color-background-alpha-low: color-mix(in srgb, var(--sld-color-background), transparent 10%);
122
- --sld-color-background-alpha-mid: color-mix(in srgb, var(--sld-color-background), transparent 60%);
123
- --sld-color-background-alpha-high: color-mix(in srgb, var(--sld-color-background), transparent 80%);
124
- /* alpha primary */
125
- --sld-color-primary-alpha-low: color-mix(in srgb, var(--sld-color-primary), transparent 10%);
126
- --sld-color-primary-alpha-mid: color-mix(in srgb, var(--sld-color-primary), transparent 60%);
127
- --sld-color-primary-alpha-high: color-mix(in srgb, var(--sld-color-primary), transparent 80%);
128
- /* alpha secondary */
129
- --sld-color-secondary-alpha-low: color-mix(in srgb, var(--sld-color-secondary), transparent 10%);
130
- --sld-color-secondary-alpha-mid: color-mix(in srgb, var(--sld-color-secondary), transparent 60%);
131
- --sld-color-secondary-alpha-high: color-mix(in srgb, var(--sld-color-secondary), transparent 80%);
132
- /* alpha tertiary */
133
- --sld-color-tertiary-alpha-low: color-mix(in srgb, var(--sld-color-tertiary), transparent 10%);
134
- --sld-color-tertiary-alpha-mid: color-mix(in srgb, var(--sld-color-tertiary), transparent 60%);
135
- --sld-color-tertiary-alpha-high: color-mix(in srgb, var(--sld-color-tertiary), transparent 80%);
136
- /* darken foreground */
137
- --sld-color-foreground-darken-low: color-mix(in srgb, var(--sld-color-foreground), black 10%);
138
- --sld-color-foreground-darken-mid: color-mix(in srgb, var(--sld-color-foreground), black 30%);
139
- --sld-color-foreground-darken-high: color-mix(in srgb, var(--sld-color-foreground), black 60%);
140
- /* darken background */
141
- --sld-color-background-darken-low: color-mix(in srgb, var(--sld-color-background), black 10%);
142
- --sld-color-background-darken-mid: color-mix(in srgb, var(--sld-color-background), black 30%);
143
- --sld-color-background-darken-high: color-mix(in srgb, var(--sld-color-background), black 60%);
144
- /* darken primary */
145
- --sld-color-primary-darken-low: color-mix(in srgb, var(--sld-color-primary), black 10%);
146
- --sld-color-primary-darken-mid: color-mix(in srgb, var(--sld-color-primary), black 30%);
147
- --sld-color-primary-darken-high: color-mix(in srgb, var(--sld-color-primary), black 60%);
148
- /* darken secondary */
149
- --sld-color-secondary-darken-low: color-mix(in srgb, var(--sld-color-secondary), black 10%);
150
- --sld-color-secondary-darken-mid: color-mix(in srgb, var(--sld-color-secondary), black 30%);
151
- --sld-color-secondary-darken-high: color-mix(in srgb, var(--sld-color-secondary), black 60%);
152
- /* darken tertiary */
153
- --sld-color-tertiary-darken-low: color-mix(in srgb, var(--sld-color-tertiary), black 10%);
154
- --sld-color-tertiary-darken-mid: color-mix(in srgb, var(--sld-color-tertiary), black 30%);
155
- --sld-color-tertiary-darken-high: color-mix(in srgb, var(--sld-color-tertiary), black 60%);
156
- /* lighten foreground */
157
- --sld-color-foreground-lighten-low: color-mix(in srgb, var(--sld-color-foreground), white 10%);
158
- --sld-color-foreground-lighten-mid: color-mix(in srgb, var(--sld-color-foreground), white 30%);
159
- --sld-color-foreground-lighten-high: color-mix(in srgb, var(--sld-color-foreground), white 60%);
160
- /* lighten background */
161
- --sld-color-background-lighten-low: color-mix(in srgb, var(--sld-color-background), white 10%);
162
- --sld-color-background-lighten-mid: color-mix(in srgb, var(--sld-color-background), white 30%);
163
- --sld-color-background-lighten-high: color-mix(in srgb, var(--sld-color-background), white 60%);
164
- /* lighten primary */
165
- --sld-color-primary-lighten-low: color-mix(in srgb, var(--sld-color-primary), white 10%);
166
- --sld-color-primary-lighten-mid: color-mix(in srgb, var(--sld-color-primary), white 30%);
167
- --sld-color-primary-lighten-high: color-mix(in srgb, var(--sld-color-primary), white 60%);
168
- /* lighten secondary */
169
- --sld-color-secondary-lighten-low: color-mix(in srgb, var(--sld-color-secondary), white 10%);
170
- --sld-color-secondary-lighten-mid: color-mix(in srgb, var(--sld-color-secondary), white 30%);
171
- --sld-color-secondary-lighten-high: color-mix(in srgb, var(--sld-color-secondary), white 60%);
172
- /* lighten tertiary */
173
- --sld-color-tertiary-lighten-low: color-mix(in srgb, var(--sld-color-tertiary), white 10%);
174
- --sld-color-tertiary-lighten-mid: color-mix(in srgb, var(--sld-color-tertiary), white 30%);
175
- --sld-color-tertiary-lighten-high: color-mix(in srgb, var(--sld-color-tertiary), white 60%);
176
- /* alpha discrete */
177
- --sld-color-discrete-alpha-low: color-mix(in srgb, var(--sld-color-discrete), transparent 10%);
178
- --sld-color-discrete-alpha-mid: color-mix(in srgb, var(--sld-color-discrete), transparent 30%);
179
- --sld-color-discrete-alpha-high: color-mix(in srgb, var(--sld-color-discrete), transparent 60%);
180
- /* alpha success */
181
- --sld-color-success-alpha-low: color-mix(in srgb, var(--sld-color-success), transparent 10%);
182
- --sld-color-success-alpha-mid: color-mix(in srgb, var(--sld-color-success), transparent 30%);
183
- --sld-color-success-alpha-high: color-mix(in srgb, var(--sld-color-success), transparent 60%);
184
- /* alpha info */
185
- --sld-color-info-alpha-low: color-mix(in srgb, var(--sld-color-info), transparent 10%);
186
- --sld-color-info-alpha-mid: color-mix(in srgb, var(--sld-color-info), transparent 30%);
187
- --sld-color-info-alpha-high: color-mix(in srgb, var(--sld-color-info), transparent 60%);
188
- /* alpha warning */
189
- --sld-color-warning-alpha-low: color-mix(in srgb, var(--sld-color-warning), transparent 10%);
190
- --sld-color-warning-alpha-mid: color-mix(in srgb, var(--sld-color-warning), transparent 30%);
191
- --sld-color-warning-alpha-high: color-mix(in srgb, var(--sld-color-warning), transparent 60%);
192
- /* alpha alert */
193
- --sld-color-alert-alpha-low: color-mix(in srgb, var(--sld-color-alert), transparent 10%);
194
- --sld-color-alert-alpha-mid: color-mix(in srgb, var(--sld-color-alert), transparent 30%);
195
- --sld-color-alert-alpha-high: color-mix(in srgb, var(--sld-color-alert), transparent 60%);
196
- /* alpha error */
197
- --sld-color-error-alpha-low: color-mix(in srgb, var(--sld-color-error), transparent 10%);
198
- --sld-color-error-alpha-mid: color-mix(in srgb, var(--sld-color-error), transparent 30%);
199
- --sld-color-error-alpha-high: color-mix(in srgb, var(--sld-color-error), transparent 60%);
200
- /* darken discrete */
201
- --sld-color-discrete-darken-low: color-mix(in srgb, var(--sld-color-discrete), black 10%);
202
- --sld-color-discrete-darken-mid: color-mix(in srgb, var(--sld-color-discrete), black 30%);
203
- --sld-color-discrete-darken-high: color-mix(in srgb, var(--sld-color-discrete), black 60%);
204
- /* darken success */
205
- --sld-color-success-darken-low: color-mix(in srgb, var(--sld-color-success), black 10%);
206
- --sld-color-success-darken-mid: color-mix(in srgb, var(--sld-color-success), black 30%);
207
- --sld-color-success-darken-high: color-mix(in srgb, var(--sld-color-success), black 60%);
208
- /* darken info */
209
- --sld-color-info-darken-low: color-mix(in srgb, var(--sld-color-info), black 10%);
210
- --sld-color-info-darken-mid: color-mix(in srgb, var(--sld-color-info), black 30%);
211
- --sld-color-info-darken-high: color-mix(in srgb, var(--sld-color-info), black 60%);
212
- /* darken warning */
213
- --sld-color-warning-darken-low: color-mix(in srgb, var(--sld-color-warning), black 10%);
214
- --sld-color-warning-darken-mid: color-mix(in srgb, var(--sld-color-warning), black 30%);
215
- --sld-color-warning-darken-high: color-mix(in srgb, var(--sld-color-warning), black 60%);
216
- /* darken alert */
217
- --sld-color-alert-darken-low: color-mix(in srgb, var(--sld-color-alert), black 10%);
218
- --sld-color-alert-darken-mid: color-mix(in srgb, var(--sld-color-alert), black 30%);
219
- --sld-color-alert-darken-high: color-mix(in srgb, var(--sld-color-alert), black 60%);
220
- /* darken error */
221
- --sld-color-error-darken-low: color-mix(in srgb, var(--sld-color-error), black 10%);
222
- --sld-color-error-darken-mid: color-mix(in srgb, var(--sld-color-error), black 30%);
223
- --sld-color-error-darken-high: color-mix(in srgb, var(--sld-color-error), black 60%);
224
- /* lighten discrete */
225
- --sld-color-discrete-lighten-low: color-mix(in srgb, var(--sld-color-discrete), white 10%);
226
- --sld-color-discrete-lighten-mid: color-mix(in srgb, var(--sld-color-discrete), white 30%);
227
- --sld-color-discrete-lighten-high: color-mix(in srgb, var(--sld-color-discrete), white 60%);
228
- /* lighten success */
229
- --sld-color-success-lighten-low: color-mix(in srgb, var(--sld-color-success), white 10%);
230
- --sld-color-success-lighten-mid: color-mix(in srgb, var(--sld-color-success), white 30%);
231
- --sld-color-success-lighten-high: color-mix(in srgb, var(--sld-color-success), white 60%);
232
- /* lighten info */
233
- --sld-color-info-lighten-low: color-mix(in srgb, var(--sld-color-info), white 10%);
234
- --sld-color-info-lighten-mid: color-mix(in srgb, var(--sld-color-info), white 30%);
235
- --sld-color-info-lighten-high: color-mix(in srgb, var(--sld-color-info), white 60%);
236
- /* lighten warning */
237
- --sld-color-warning-lighten-low: color-mix(in srgb, var(--sld-color-warning), white 10%);
238
- --sld-color-warning-lighten-mid: color-mix(in srgb, var(--sld-color-warning), white 30%);
239
- --sld-color-warning-lighten-high: color-mix(in srgb, var(--sld-color-warning), white 60%);
240
- /* lighten alert */
241
- --sld-color-alert-lighten-low: color-mix(in srgb, var(--sld-color-alert), white 10%);
242
- --sld-color-alert-lighten-mid: color-mix(in srgb, var(--sld-color-alert), white 30%);
243
- --sld-color-alert-lighten-high: color-mix(in srgb, var(--sld-color-alert), white 60%);
244
- /* lighten error */
245
- --sld-color-error-lighten-low: color-mix(in srgb, var(--sld-color-error), white 10%);
246
- --sld-color-error-lighten-mid: color-mix(in srgb, var(--sld-color-error), white 30%);
247
- --sld-color-error-lighten-high: color-mix(in srgb, var(--sld-color-error), white 60%);
248
- }
249
-
250
- /* presets */
251
- :root {
252
- --sld-color-border: var(--sld-color-foreground-alpha-low);
253
- --sld-hover-background-color: var(--sld-color-secondary-alpha-mid);
254
- --sld-hover-border-color: var(--sld-color-foreground-alpha-high);
255
- --sld-hover-shadow: var(--sld-elevation-3);
256
- --sld-selected-background-color: var(--sld-color-primary-alpha-mid);
257
- --sld-selected-border-color: var(--sld-color-primary);
258
- --sld-selected-shadow: var(--sld-elevation-3);
259
- }
260
-
261
- .bg-themed-scheme-discrete {
262
- color: black;
263
- text-shadow: 0 0 0.125rem #b3b3b3;
264
- background-color: #ccc;
265
- }
266
-
267
- .bg-themed-scheme-success {
268
- color: white;
269
- text-shadow: 0 0 0.125rem #004d00;
270
- background-color: green;
271
- }
272
-
273
- .bg-themed-scheme-info {
274
- color: black;
275
- text-shadow: 0 0 0.125rem #ffd324;
276
- background-color: #ffdd57;
277
- }
278
-
279
- .bg-themed-scheme-warning {
280
- color: black;
281
- text-shadow: 0 0 0.125rem #b49104;
282
- background-color: #e6b905;
283
- }
284
-
285
- .bg-themed-scheme-alert {
286
- color: black;
287
- text-shadow: 0 0 0.125rem #cc5c00;
288
- background-color: #ff7300;
289
- }
290
-
291
- .bg-themed-scheme-error {
292
- color: white;
293
- text-shadow: 0 0 0.125rem #cc0000;
294
- background-color: red;
1
+ :root {
2
+ transition: all 0.3s ease-out;
3
+ }
4
+
5
+ :root {
6
+ --sld-radius-tiny: 2px;
7
+ --sld-radius-small: 4px;
8
+ --sld-radius-med: 8px;
9
+ --sld-radius-large: 16px;
10
+ --sld-pad-tiny: 0.25rem;
11
+ --sld-pad-small: 0.5rem;
12
+ --sld-pad-med: 1rem;
13
+ --sld-pad-large: 1.5rem;
14
+ --sld-gap-tiny: 0.25rem;
15
+ --sld-gap-mini: 0.4rem;
16
+ --sld-gap-small: 0.5rem;
17
+ --sld-gap-med: 1rem;
18
+ --sld-gap-large: 1.5rem;
19
+ --sld-gap-default: 0.5rem;
20
+ --sld-gutter-tiny: 0.25rem;
21
+ --sld-gutter-mini: 0.5rem;
22
+ --sld-gutter-small: 1rem;
23
+ --sld-gutter-med: 2rem;
24
+ --sld-gutter-kind: 3rem;
25
+ --sld-gutter-default: 1rem;
26
+ --sld-tall-tiny: 1rem;
27
+ --sld-tall-mini: 1.5rem;
28
+ --sld-tall-small: 2.5rem;
29
+ --sld-tall-med: 3.5rem;
30
+ --sld-tall-kind: 4rem;
31
+ --sld-tall-auto: auto;
32
+ --sld-tall-default: 2.5rem;
33
+ --sld-width-tiny: 2rem;
34
+ --sld-width-mini: 3rem;
35
+ --sld-width-small: 10rem;
36
+ --sld-width-med: 14rem;
37
+ --sld-width-kind: 20rem;
38
+ --sld-width-full: 100%;
39
+ --sld-width-auto: auto;
40
+ --sld-width-default: 10rem;
41
+ }
42
+
43
+ :root {
44
+ --white: #fff;
45
+ --black: #333;
46
+ }
47
+
48
+ @media (prefers-color-scheme: dark) {
49
+ :root {
50
+ --white: #333;
51
+ --black: #ccc;
52
+ }
53
+ }
54
+ :root.dark,
55
+ :root[data-theme=dark],
56
+ body[data-theme=dark],
57
+ :root[theme=dark] {
58
+ --white: #333;
59
+ --black: #ccc;
60
+ }
61
+
62
+ :root {
63
+ --sld-color-foreground: #333333;
64
+ --sld-color-background: #ffffff;
65
+ --sld-color-paper: color-mix(
66
+ in srgb,
67
+ var(--sld-color-background) 90%,
68
+ var(--sld-color-foreground) 10%
69
+ );
70
+ --sld-color-primary: color-mix(in srgb, var(--sld-color-foreground) 60%, #4caf50);
71
+ --sld-color-secondary: color-mix(in srgb, var(--sld-color-foreground) 80%, #2196f3);
72
+ --sld-color-tertiary: color-mix(in srgb, var(--sld-color-foreground) 70%, #ffc107);
73
+ --sld-color-disabled: color-mix(
74
+ in srgb,
75
+ var(--sld-color-foreground) 20%,
76
+ var(--sld-color-background)
77
+ );
78
+ --sld-color-disabled-border: color-mix(
79
+ in srgb,
80
+ var(--sld-color-foreground) 30%,
81
+ var(--sld-color-background)
82
+ );
83
+ --sld-background-disabled: color-mix(
84
+ in srgb,
85
+ var(--sld-color-background) 90%,
86
+ var(--sld-color-foreground)
87
+ );
88
+ }
89
+
90
+ :root.dark,
91
+ :root[data-theme=dark],
92
+ body[data-theme=dark],
93
+ :root[theme=dark] {
94
+ --sld-color-foreground: #ffffff;
95
+ --sld-color-background: #27323a;
96
+ }
97
+
98
+ :root {
99
+ --sld-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);
100
+ --sld-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);
101
+ --sld-elevation-3: 0 0 5.17px 0 rgba(0, 0, 0, 0.15), 0 0 1.39px 0 rgba(0, 0, 0, 0.1);
102
+ --sld-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);
103
+ --sld-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);
104
+ }
105
+
106
+ :root {
107
+ --sld-color-discrete: #ccc;
108
+ --sld-color-success: #075c07;
109
+ --sld-color-info: #ffd324;
110
+ --sld-color-warning: #b49104;
111
+ --sld-color-alert: #cc5c00;
112
+ --sld-color-error: #cc0000;
113
+ }
114
+
115
+ :root {
116
+ /* alpha foreground */
117
+ --sld-color-foreground-alpha-low: color-mix(in srgb, var(--sld-color-foreground), transparent 10%);
118
+ --sld-color-foreground-alpha-mid: color-mix(in srgb, var(--sld-color-foreground), transparent 60%);
119
+ --sld-color-foreground-alpha-high: color-mix(in srgb, var(--sld-color-foreground), transparent 80%);
120
+ /* alpha background */
121
+ --sld-color-background-alpha-low: color-mix(in srgb, var(--sld-color-background), transparent 10%);
122
+ --sld-color-background-alpha-mid: color-mix(in srgb, var(--sld-color-background), transparent 60%);
123
+ --sld-color-background-alpha-high: color-mix(in srgb, var(--sld-color-background), transparent 80%);
124
+ /* alpha primary */
125
+ --sld-color-primary-alpha-low: color-mix(in srgb, var(--sld-color-primary), transparent 10%);
126
+ --sld-color-primary-alpha-mid: color-mix(in srgb, var(--sld-color-primary), transparent 60%);
127
+ --sld-color-primary-alpha-high: color-mix(in srgb, var(--sld-color-primary), transparent 80%);
128
+ /* alpha secondary */
129
+ --sld-color-secondary-alpha-low: color-mix(in srgb, var(--sld-color-secondary), transparent 10%);
130
+ --sld-color-secondary-alpha-mid: color-mix(in srgb, var(--sld-color-secondary), transparent 60%);
131
+ --sld-color-secondary-alpha-high: color-mix(in srgb, var(--sld-color-secondary), transparent 80%);
132
+ /* alpha tertiary */
133
+ --sld-color-tertiary-alpha-low: color-mix(in srgb, var(--sld-color-tertiary), transparent 10%);
134
+ --sld-color-tertiary-alpha-mid: color-mix(in srgb, var(--sld-color-tertiary), transparent 60%);
135
+ --sld-color-tertiary-alpha-high: color-mix(in srgb, var(--sld-color-tertiary), transparent 80%);
136
+ /* darken foreground */
137
+ --sld-color-foreground-darken-low: color-mix(in srgb, var(--sld-color-foreground), black 10%);
138
+ --sld-color-foreground-darken-mid: color-mix(in srgb, var(--sld-color-foreground), black 30%);
139
+ --sld-color-foreground-darken-high: color-mix(in srgb, var(--sld-color-foreground), black 60%);
140
+ /* darken background */
141
+ --sld-color-background-darken-low: color-mix(in srgb, var(--sld-color-background), black 10%);
142
+ --sld-color-background-darken-mid: color-mix(in srgb, var(--sld-color-background), black 30%);
143
+ --sld-color-background-darken-high: color-mix(in srgb, var(--sld-color-background), black 60%);
144
+ /* darken primary */
145
+ --sld-color-primary-darken-low: color-mix(in srgb, var(--sld-color-primary), black 10%);
146
+ --sld-color-primary-darken-mid: color-mix(in srgb, var(--sld-color-primary), black 30%);
147
+ --sld-color-primary-darken-high: color-mix(in srgb, var(--sld-color-primary), black 60%);
148
+ /* darken secondary */
149
+ --sld-color-secondary-darken-low: color-mix(in srgb, var(--sld-color-secondary), black 10%);
150
+ --sld-color-secondary-darken-mid: color-mix(in srgb, var(--sld-color-secondary), black 30%);
151
+ --sld-color-secondary-darken-high: color-mix(in srgb, var(--sld-color-secondary), black 60%);
152
+ /* darken tertiary */
153
+ --sld-color-tertiary-darken-low: color-mix(in srgb, var(--sld-color-tertiary), black 10%);
154
+ --sld-color-tertiary-darken-mid: color-mix(in srgb, var(--sld-color-tertiary), black 30%);
155
+ --sld-color-tertiary-darken-high: color-mix(in srgb, var(--sld-color-tertiary), black 60%);
156
+ /* lighten foreground */
157
+ --sld-color-foreground-lighten-low: color-mix(in srgb, var(--sld-color-foreground), white 10%);
158
+ --sld-color-foreground-lighten-mid: color-mix(in srgb, var(--sld-color-foreground), white 30%);
159
+ --sld-color-foreground-lighten-high: color-mix(in srgb, var(--sld-color-foreground), white 60%);
160
+ /* lighten background */
161
+ --sld-color-background-lighten-low: color-mix(in srgb, var(--sld-color-background), white 10%);
162
+ --sld-color-background-lighten-mid: color-mix(in srgb, var(--sld-color-background), white 30%);
163
+ --sld-color-background-lighten-high: color-mix(in srgb, var(--sld-color-background), white 60%);
164
+ /* lighten primary */
165
+ --sld-color-primary-lighten-low: color-mix(in srgb, var(--sld-color-primary), white 10%);
166
+ --sld-color-primary-lighten-mid: color-mix(in srgb, var(--sld-color-primary), white 30%);
167
+ --sld-color-primary-lighten-high: color-mix(in srgb, var(--sld-color-primary), white 60%);
168
+ /* lighten secondary */
169
+ --sld-color-secondary-lighten-low: color-mix(in srgb, var(--sld-color-secondary), white 10%);
170
+ --sld-color-secondary-lighten-mid: color-mix(in srgb, var(--sld-color-secondary), white 30%);
171
+ --sld-color-secondary-lighten-high: color-mix(in srgb, var(--sld-color-secondary), white 60%);
172
+ /* lighten tertiary */
173
+ --sld-color-tertiary-lighten-low: color-mix(in srgb, var(--sld-color-tertiary), white 10%);
174
+ --sld-color-tertiary-lighten-mid: color-mix(in srgb, var(--sld-color-tertiary), white 30%);
175
+ --sld-color-tertiary-lighten-high: color-mix(in srgb, var(--sld-color-tertiary), white 60%);
176
+ /* alpha discrete */
177
+ --sld-color-discrete-alpha-low: color-mix(in srgb, var(--sld-color-discrete), transparent 10%);
178
+ --sld-color-discrete-alpha-mid: color-mix(in srgb, var(--sld-color-discrete), transparent 30%);
179
+ --sld-color-discrete-alpha-high: color-mix(in srgb, var(--sld-color-discrete), transparent 60%);
180
+ /* alpha success */
181
+ --sld-color-success-alpha-low: color-mix(in srgb, var(--sld-color-success), transparent 10%);
182
+ --sld-color-success-alpha-mid: color-mix(in srgb, var(--sld-color-success), transparent 30%);
183
+ --sld-color-success-alpha-high: color-mix(in srgb, var(--sld-color-success), transparent 60%);
184
+ /* alpha info */
185
+ --sld-color-info-alpha-low: color-mix(in srgb, var(--sld-color-info), transparent 10%);
186
+ --sld-color-info-alpha-mid: color-mix(in srgb, var(--sld-color-info), transparent 30%);
187
+ --sld-color-info-alpha-high: color-mix(in srgb, var(--sld-color-info), transparent 60%);
188
+ /* alpha warning */
189
+ --sld-color-warning-alpha-low: color-mix(in srgb, var(--sld-color-warning), transparent 10%);
190
+ --sld-color-warning-alpha-mid: color-mix(in srgb, var(--sld-color-warning), transparent 30%);
191
+ --sld-color-warning-alpha-high: color-mix(in srgb, var(--sld-color-warning), transparent 60%);
192
+ /* alpha alert */
193
+ --sld-color-alert-alpha-low: color-mix(in srgb, var(--sld-color-alert), transparent 10%);
194
+ --sld-color-alert-alpha-mid: color-mix(in srgb, var(--sld-color-alert), transparent 30%);
195
+ --sld-color-alert-alpha-high: color-mix(in srgb, var(--sld-color-alert), transparent 60%);
196
+ /* alpha error */
197
+ --sld-color-error-alpha-low: color-mix(in srgb, var(--sld-color-error), transparent 10%);
198
+ --sld-color-error-alpha-mid: color-mix(in srgb, var(--sld-color-error), transparent 30%);
199
+ --sld-color-error-alpha-high: color-mix(in srgb, var(--sld-color-error), transparent 60%);
200
+ /* darken discrete */
201
+ --sld-color-discrete-darken-low: color-mix(in srgb, var(--sld-color-discrete), black 10%);
202
+ --sld-color-discrete-darken-mid: color-mix(in srgb, var(--sld-color-discrete), black 30%);
203
+ --sld-color-discrete-darken-high: color-mix(in srgb, var(--sld-color-discrete), black 60%);
204
+ /* darken success */
205
+ --sld-color-success-darken-low: color-mix(in srgb, var(--sld-color-success), black 10%);
206
+ --sld-color-success-darken-mid: color-mix(in srgb, var(--sld-color-success), black 30%);
207
+ --sld-color-success-darken-high: color-mix(in srgb, var(--sld-color-success), black 60%);
208
+ /* darken info */
209
+ --sld-color-info-darken-low: color-mix(in srgb, var(--sld-color-info), black 10%);
210
+ --sld-color-info-darken-mid: color-mix(in srgb, var(--sld-color-info), black 30%);
211
+ --sld-color-info-darken-high: color-mix(in srgb, var(--sld-color-info), black 60%);
212
+ /* darken warning */
213
+ --sld-color-warning-darken-low: color-mix(in srgb, var(--sld-color-warning), black 10%);
214
+ --sld-color-warning-darken-mid: color-mix(in srgb, var(--sld-color-warning), black 30%);
215
+ --sld-color-warning-darken-high: color-mix(in srgb, var(--sld-color-warning), black 60%);
216
+ /* darken alert */
217
+ --sld-color-alert-darken-low: color-mix(in srgb, var(--sld-color-alert), black 10%);
218
+ --sld-color-alert-darken-mid: color-mix(in srgb, var(--sld-color-alert), black 30%);
219
+ --sld-color-alert-darken-high: color-mix(in srgb, var(--sld-color-alert), black 60%);
220
+ /* darken error */
221
+ --sld-color-error-darken-low: color-mix(in srgb, var(--sld-color-error), black 10%);
222
+ --sld-color-error-darken-mid: color-mix(in srgb, var(--sld-color-error), black 30%);
223
+ --sld-color-error-darken-high: color-mix(in srgb, var(--sld-color-error), black 60%);
224
+ /* lighten discrete */
225
+ --sld-color-discrete-lighten-low: color-mix(in srgb, var(--sld-color-discrete), white 10%);
226
+ --sld-color-discrete-lighten-mid: color-mix(in srgb, var(--sld-color-discrete), white 30%);
227
+ --sld-color-discrete-lighten-high: color-mix(in srgb, var(--sld-color-discrete), white 60%);
228
+ /* lighten success */
229
+ --sld-color-success-lighten-low: color-mix(in srgb, var(--sld-color-success), white 10%);
230
+ --sld-color-success-lighten-mid: color-mix(in srgb, var(--sld-color-success), white 30%);
231
+ --sld-color-success-lighten-high: color-mix(in srgb, var(--sld-color-success), white 60%);
232
+ /* lighten info */
233
+ --sld-color-info-lighten-low: color-mix(in srgb, var(--sld-color-info), white 10%);
234
+ --sld-color-info-lighten-mid: color-mix(in srgb, var(--sld-color-info), white 30%);
235
+ --sld-color-info-lighten-high: color-mix(in srgb, var(--sld-color-info), white 60%);
236
+ /* lighten warning */
237
+ --sld-color-warning-lighten-low: color-mix(in srgb, var(--sld-color-warning), white 10%);
238
+ --sld-color-warning-lighten-mid: color-mix(in srgb, var(--sld-color-warning), white 30%);
239
+ --sld-color-warning-lighten-high: color-mix(in srgb, var(--sld-color-warning), white 60%);
240
+ /* lighten alert */
241
+ --sld-color-alert-lighten-low: color-mix(in srgb, var(--sld-color-alert), white 10%);
242
+ --sld-color-alert-lighten-mid: color-mix(in srgb, var(--sld-color-alert), white 30%);
243
+ --sld-color-alert-lighten-high: color-mix(in srgb, var(--sld-color-alert), white 60%);
244
+ /* lighten error */
245
+ --sld-color-error-lighten-low: color-mix(in srgb, var(--sld-color-error), white 10%);
246
+ --sld-color-error-lighten-mid: color-mix(in srgb, var(--sld-color-error), white 30%);
247
+ --sld-color-error-lighten-high: color-mix(in srgb, var(--sld-color-error), white 60%);
248
+ }
249
+
250
+ /* presets */
251
+ :root {
252
+ --sld-color-border: var(--sld-color-foreground-alpha-low);
253
+ --sld-hover-background-color: var(--sld-color-secondary-alpha-mid);
254
+ --sld-hover-border-color: var(--sld-color-foreground-alpha-high);
255
+ --sld-hover-shadow: var(--sld-elevation-3);
256
+ --sld-selected-background-color: var(--sld-color-primary-alpha-mid);
257
+ --sld-selected-border-color: var(--sld-color-primary);
258
+ --sld-selected-shadow: var(--sld-elevation-3);
259
+ }
260
+
261
+ .bg-themed-scheme-discrete {
262
+ color: black;
263
+ text-shadow: 0 0 0.125rem #b3b3b3;
264
+ background-color: #ccc;
265
+ }
266
+
267
+ .bg-themed-scheme-success {
268
+ color: white;
269
+ text-shadow: 0 0 0.125rem #004d00;
270
+ background-color: green;
271
+ }
272
+
273
+ .bg-themed-scheme-info {
274
+ color: black;
275
+ text-shadow: 0 0 0.125rem #ffd324;
276
+ background-color: #ffdd57;
277
+ }
278
+
279
+ .bg-themed-scheme-warning {
280
+ color: black;
281
+ text-shadow: 0 0 0.125rem #b49104;
282
+ background-color: #e6b905;
283
+ }
284
+
285
+ .bg-themed-scheme-alert {
286
+ color: black;
287
+ text-shadow: 0 0 0.125rem #cc5c00;
288
+ background-color: #ff7300;
289
+ }
290
+
291
+ .bg-themed-scheme-error {
292
+ color: white;
293
+ text-shadow: 0 0 0.125rem #cc0000;
294
+ background-color: red;
295
295
  }