@streamscloud/kit 0.0.1-1770989312682 → 0.0.1-1771005811569

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 (26) hide show
  1. package/dist/ui/button/cmp.options-button.svelte +27 -27
  2. package/dist/ui/button/resources/button-base.svelte +25 -25
  3. package/dist/ui/button/resources/button-theme.svelte +263 -161
  4. package/dist/ui/card-actions/cmp.card-action.svelte +1 -1
  5. package/dist/ui/card-actions/cmp.card-actions.svelte +9 -9
  6. package/dist/ui/dialog/cmp.dialog-button.svelte +1 -1
  7. package/dist/ui/dialog/cmp.dialog-cancel-button.svelte +1 -1
  8. package/dist/ui/dialog/cmp.dialog-close-button.svelte +2 -2
  9. package/dist/ui/dialog/cmp.dialog-container.svelte +7 -6
  10. package/dist/ui/dialog/cmp.dialog.svelte +14 -14
  11. package/dist/ui/dropdown/cmp.dropdown.svelte +1 -1
  12. package/dist/ui/icon/cmp.icon.svelte +11 -11
  13. package/dist/ui/image/cmp.image-round.svelte +6 -6
  14. package/dist/ui/image/cmp.image-rounded.svelte +12 -12
  15. package/dist/ui/image/cmp.image-stub.svelte +1 -1
  16. package/dist/ui/image/cmp.image.svelte +4 -4
  17. package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte +1 -1
  18. package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte +1 -1
  19. package/dist/ui/line-clamp/cmp.line-clamp.svelte +3 -3
  20. package/dist/ui/loading/cmp.loading.svelte +2 -2
  21. package/dist/ui/progress/cmp.progress.svelte +5 -5
  22. package/dist/ui/proportional-container/cmp.proportional-container.svelte +4 -4
  23. package/dist/ui/seek-bar/cmp.seek-bar.svelte +4 -4
  24. package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte +3 -3
  25. package/dist/ui/video/cmp.video.svelte +5 -5
  26. package/package.json +1 -1
package/dist/ui/button/cmp.options-button.svelte CHANGED
@@ -112,21 +112,21 @@ const toggleRight = (e) => {
112
112
  </ButtonTheme>
113
113
 
114
114
  <style>.options-button {
115
- --_options-button--font--color: var(--button--font--color, black);
116
- --_options-button--font-weight: var(--button--font-weight, 400);
117
- --_options-button--text--font-size: var(--button--text--font-size, 0.875em);
118
- --_options-button--background: var(--button--background, white);
119
- --_options-button--background--hover: var(--button--background--hover, var(--_options-button--background));
120
- --_options-button--background--active: var(--button--background--active, var(--_options-button--background));
121
- --_options-button--background--disabled: var(--button--background--disabled, var(--_options-button--background));
122
- --_options-button--border: var(--button--border, none);
123
- --_options-button--border-radius: var(--button--border-radius, 0.25em);
124
- --_options-button--box-shadow: var(--button--box-shadow, none);
125
- --_options-button--padding--vertical: var(--button--padding--vertical, 0);
126
- --_options-button--min-width: var(--button--min-width, 0);
127
- --_options-button--height: var(--button--height, 2em);
115
+ --_options-button--font--color: var(--sc-kit--button--font--color, black);
116
+ --_options-button--font-weight: var(--sc-kit--button--font-weight, 400);
117
+ --_options-button--text--font-size: var(--sc-kit--button--text--font-size, 0.875em);
118
+ --_options-button--background: var(--sc-kit--button--background, white);
119
+ --_options-button--background--hover: var(--sc-kit--button--background--hover, var(--_options-button--background));
120
+ --_options-button--background--active: var(--sc-kit--button--background--active, var(--_options-button--background));
121
+ --_options-button--background--disabled: var(--sc-kit--button--background--disabled, var(--_options-button--background));
122
+ --_options-button--border: var(--sc-kit--button--border, none);
123
+ --_options-button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
124
+ --_options-button--box-shadow: var(--sc-kit--button--box-shadow, none);
125
+ --_options-button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
126
+ --_options-button--min-width: var(--sc-kit--button--min-width, 0);
127
+ --_options-button--height: var(--sc-kit--button--height, 2em);
128
128
  --_options-button--separator--border: 1px solid var(--_options-button--font--color);
129
- --_options-button--dropdown--min-width: var(--options-button--dropdown--min-width, 10em);
129
+ --_options-button--dropdown--min-width: var(--sc-kit--options-button--dropdown--min-width, 10em);
130
130
  font-weight: var(--_options-button--font-weight);
131
131
  color: var(--_options-button--font--color);
132
132
  background: var(--_options-button--background);
@@ -153,22 +153,22 @@ const toggleRight = (e) => {
153
153
  display: inline-flex;
154
154
  height: 100%;
155
155
  flex: 1;
156
- --button--min-width: 100%;
157
- --button--box-shadow: none;
158
- --button--border: none;
159
- --button--border--disabled: none;
160
- --button--height: 100%;
161
- --button--background: transparent;
162
- --button--background--hover: transparent;
163
- --button--background--active: transparent;
164
- --button--background--disabled: transparent;
156
+ --sc-kit--button--min-width: 100%;
157
+ --sc-kit--button--box-shadow: none;
158
+ --sc-kit--button--border: none;
159
+ --sc-kit--button--border--disabled: none;
160
+ --sc-kit--button--height: 100%;
161
+ --sc-kit--button--background: transparent;
162
+ --sc-kit--button--background--hover: transparent;
163
+ --sc-kit--button--background--active: transparent;
164
+ --sc-kit--button--background--disabled: transparent;
165
165
  }
166
166
  .options-button__options {
167
167
  position: relative;
168
168
  height: 100%;
169
- --dropdown-item--min-width: var(--_options-button--dropdown--min-width);
170
- --button--min-width: 100%;
171
- --button--justify-content: flex-start;
169
+ --sc-kit--dropdown-item--min-width: var(--_options-button--dropdown--min-width);
170
+ --sc-kit--button--min-width: 100%;
171
+ --sc-kit--button--justify-content: flex-start;
172
172
  }
173
173
  .options-button__options-trigger {
174
174
  height: 100%;
@@ -186,7 +186,7 @@ const toggleRight = (e) => {
186
186
  .options-button__options-trigger-icon {
187
187
  display: inline-flex;
188
188
  align-items: center;
189
- --icon--size: var(--_options-button--text--font-size);
189
+ --sc-kit--icon--size: var(--_options-button--text--font-size);
190
190
  }
191
191
  .options-button__options-separator {
192
192
  border-right: var(--_options-button--separator--border);
package/dist/ui/button/resources/button-base.svelte CHANGED
@@ -15,27 +15,27 @@ export {};
15
15
  </button>
16
16
 
17
17
  <style>.button {
18
- --_button--font--size: var(--button--font--size, 1rem);
19
- --_button--font--color: var(--button--font--color, black);
20
- --_button--font--color--active: var(--button--font--color--active, var(--_button--font--color));
21
- --_button--font--color--disabled: var(--button--font--color--disabled, var(--_button--font--color));
22
- --_button--font-weight: var(--button--font-weight, 400);
23
- --_button--text--font-size: var(--button--text--font-size, 0.75em);
24
- --_button--icon--font-size: var(--button--icon--font-size, 1em);
25
- --_button--justify-content: var(--button--justify-content, center);
26
- --_button--background: var(--button--background, white);
27
- --_button--background--hover: var(--button--background--hover, var(--_button--background));
28
- --_button--background--active: var(--button--background--active, var(--_button--background));
29
- --_button--background--disabled: var(--button--background--disabled, var(--_button--background));
30
- --_button--border: var(--button--border, none);
31
- --_button--border--disabled: var(--button--border--disabled, var(--_button--border));
32
- --_button--border-radius: var(--button--border-radius, 0.25em);
33
- --_button--padding--vertical: var(--button--padding--vertical, 0);
34
- --_button--padding--horizontal: var(--button--padding--horizontal, 1em);
35
- --_button--min-width: var(--button--min-width, 0);
36
- --_button--width: var(--button--width, auto);
37
- --_button--height: var(--button--height, 2em);
38
- --_button--box-shadow: var(--button--box-shadow, none);
18
+ --_button--font--size: var(--sc-kit--button--font--size, 1rem);
19
+ --_button--font--color: var(--sc-kit--button--font--color, black);
20
+ --_button--font--color--active: var(--sc-kit--button--font--color--active, var(--_button--font--color));
21
+ --_button--font--color--disabled: var(--sc-kit--button--font--color--disabled, var(--_button--font--color));
22
+ --_button--font-weight: var(--sc-kit--button--font-weight, 400);
23
+ --_button--text--font-size: var(--sc-kit--button--text--font-size, 0.75em);
24
+ --_button--icon--font-size: var(--sc-kit--button--icon--font-size, 1em);
25
+ --_button--justify-content: var(--sc-kit--button--justify-content, center);
26
+ --_button--background: var(--sc-kit--button--background, white);
27
+ --_button--background--hover: var(--sc-kit--button--background--hover, var(--_button--background));
28
+ --_button--background--active: var(--sc-kit--button--background--active, var(--_button--background));
29
+ --_button--background--disabled: var(--sc-kit--button--background--disabled, var(--_button--background));
30
+ --_button--border: var(--sc-kit--button--border, none);
31
+ --_button--border--disabled: var(--sc-kit--button--border--disabled, var(--_button--border));
32
+ --_button--border-radius: var(--sc-kit--button--border-radius, 0.25em);
33
+ --_button--padding--vertical: var(--sc-kit--button--padding--vertical, 0);
34
+ --_button--padding--horizontal: var(--sc-kit--button--padding--horizontal, 1em);
35
+ --_button--min-width: var(--sc-kit--button--min-width, 0);
36
+ --_button--width: var(--sc-kit--button--width, auto);
37
+ --_button--height: var(--sc-kit--button--height, 2em);
38
+ --_button--box-shadow: var(--sc-kit--button--box-shadow, none);
39
39
  font-size: var(--_button--font--size);
40
40
  font-weight: var(--_button--font-weight);
41
41
  padding: var(--_button--padding--vertical) var(--_button--padding--horizontal);
@@ -61,10 +61,10 @@ export {};
61
61
  width: 100%;
62
62
  text-align: center;
63
63
  font-size: var(--_button--text--font-size);
64
- --icon-text--global--font-size: 1rem;
65
- --icon-text--text--font-size: var(--_button--text--font-size);
66
- --icon-text--icon--font-size: var(--_button--icon--font-size);
67
- --icon-text--justify-content: var(--_button--justify-content);
64
+ --sc-kit--icon-text--global--font-size: 1rem;
65
+ --sc-kit--icon-text--text--font-size: var(--_button--text--font-size);
66
+ --sc-kit--icon-text--icon--font-size: var(--_button--icon--font-size);
67
+ --sc-kit--icon-text--justify-content: var(--_button--justify-content);
68
68
  }
69
69
  .button:not(:disabled):hover {
70
70
  background: var(--_button--background--hover);
package/dist/ui/button/resources/button-theme.svelte CHANGED
@@ -29,205 +29,307 @@ export {};
29
29
  display: contents;
30
30
  }
31
31
  .button-theme--primary {
32
- --button--font--color: var(--button--primary--font--color, #ffffff);
33
- --button--font--color--active: var(--button--primary--font--color--active, #ffffff);
34
- --button--font--color--disabled: var(--button--primary--font--color--disabled, #ffffff);
35
- --button--background: var(--button--primary--background, #144ab0);
36
- --button--background--hover: var(--button--primary--background--hover, #1244a0);
37
- --button--background--active: var(--button--primary--background--active, #103a89);
38
- --button--background--disabled: var(--button--primary--background--disabled, #91b3f3);
39
- --button--border: var(--button--primary--border, none);
40
- --button--border--disabled: var(--button--primary--border--disabled, none);
41
- --button--box-shadow: var(--button--primary--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
32
+ --sc-kit--button--font--color: var(--sc-kit--button--primary--font--color, #ffffff);
33
+ --sc-kit--button--font--color--active: var(--sc-kit--button--primary--font--color--active, #ffffff);
34
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--primary--font--color--disabled, #ffffff);
35
+ --sc-kit--button--background: var(--sc-kit--button--primary--background, #144ab0);
36
+ --sc-kit--button--background--hover: var(--sc-kit--button--primary--background--hover, #1244a0);
37
+ --sc-kit--button--background--active: var(--sc-kit--button--primary--background--active, #103a89);
38
+ --sc-kit--button--background--disabled: var(--sc-kit--button--primary--background--disabled, #91b3f3);
39
+ --sc-kit--button--border: var(--sc-kit--button--primary--border, none);
40
+ --sc-kit--button--border--disabled: var(--sc-kit--button--primary--border--disabled, none);
41
+ --sc-kit--button--box-shadow: var(--sc-kit--button--primary--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
42
42
  }
43
43
  .button-theme--standard {
44
- --button--font--color: var(--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
45
- --button--font--color--active: var(--button--standard--font--color--active, light-dark(#2e2e2e, #ffffff));
46
- --button--font--color--disabled: var(--button--standard--font--color--disabled, light-dark(#2e2e2e, #ffffff));
47
- --button--background: var(--button--standard--background, light-dark(#ffffff, #111827));
48
- --button--background--hover: var(--button--standard--background--hover, light-dark(#f9fafb, #1f2937));
49
- --button--background--active: var(--button--standard--background--active, light-dark(#f2f2f3, #374151));
50
- --button--background--disabled: var(--button--standard--background--disabled, light-dark(#f2f2f3, #374151));
51
- --button--border: var(--button--standard--border, 1px solid light-dark(#e5e7eb, #4b5563));
52
- --button--border--disabled: var(--button--standard--border--disabled, 1px solid light-dark(#e5e7eb, #4b5563));
53
- --button--box-shadow: var(--button--standard--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
44
+ --sc-kit--button--font--color: var(--sc-kit--button--standard--font--color, light-dark(#2e2e2e, #ffffff));
45
+ --sc-kit--button--font--color--active: var(
46
+ --sc-kit--button--standard--font--color--active,
47
+ light-dark(#2e2e2e, #ffffff)
48
+ );
49
+ --sc-kit--button--font--color--disabled: var(
50
+ --sc-kit--button--standard--font--color--disabled,
51
+ light-dark(#2e2e2e, #ffffff)
52
+ );
53
+ --sc-kit--button--background: var(--sc-kit--button--standard--background, light-dark(#ffffff, #111827));
54
+ --sc-kit--button--background--hover: var(
55
+ --sc-kit--button--standard--background--hover,
56
+ light-dark(#f9fafb, #1f2937)
57
+ );
58
+ --sc-kit--button--background--active: var(
59
+ --sc-kit--button--standard--background--active,
60
+ light-dark(#f2f2f3, #374151)
61
+ );
62
+ --sc-kit--button--background--disabled: var(
63
+ --sc-kit--button--standard--background--disabled,
64
+ light-dark(#f2f2f3, #374151)
65
+ );
66
+ --sc-kit--button--border: var(--sc-kit--button--standard--border, 1px solid light-dark(#e5e7eb, #4b5563));
67
+ --sc-kit--button--border--disabled: var(
68
+ --sc-kit--button--standard--border--disabled,
69
+ 1px solid light-dark(#e5e7eb, #4b5563)
70
+ );
71
+ --sc-kit--button--box-shadow: var(
72
+ --sc-kit--button--standard--box-shadow,
73
+ 0px 3px 0px 0px light-dark(transparent, rgba(#ffffff, 0.3)) inset
74
+ );
54
75
  }
55
76
  .button-theme--white {
56
- --button--font--color: var(--button--white--font--color, light-dark(#2e2e2e, #ffffff));
57
- --button--font--color--active: var(--button--white--font--color--active, light-dark(#2e2e2e, #ffffff));
58
- --button--font--color--disabled: var(--button--white--font--color--disabled, light-dark(#2e2e2e, #ffffff));
59
- --button--background: var(--button--white--background, light-dark(#ffffff, #111827));
60
- --button--background--hover: var(--button--white--background--hover, light-dark(#f9fafb, #1f2937));
61
- --button--background--active: var(--button--white--background--active, light-dark(#f2f2f3, #374151));
62
- --button--background--disabled: var(--button--white--background--disabled, light-dark(#f2f2f3, #374151));
63
- --button--border: var(--button--white--border, none);
64
- --button--border--disabled: var(--button--white--border--disabled, none);
65
- --button--box-shadow: var(--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.3)) inset);
77
+ --sc-kit--button--font--color: var(--sc-kit--button--white--font--color, light-dark(#2e2e2e, #ffffff));
78
+ --sc-kit--button--font--color--active: var(--sc-kit--button--white--font--color--active, light-dark(#2e2e2e, #ffffff));
79
+ --sc-kit--button--font--color--disabled: var(
80
+ --sc-kit--button--white--font--color--disabled,
81
+ light-dark(#2e2e2e, #ffffff)
82
+ );
83
+ --sc-kit--button--background: var(--sc-kit--button--white--background, light-dark(#ffffff, #111827));
84
+ --sc-kit--button--background--hover: var(
85
+ --sc-kit--button--white--background--hover,
86
+ light-dark(#f9fafb, #1f2937)
87
+ );
88
+ --sc-kit--button--background--active: var(
89
+ --sc-kit--button--white--background--active,
90
+ light-dark(#f2f2f3, #374151)
91
+ );
92
+ --sc-kit--button--background--disabled: var(
93
+ --sc-kit--button--white--background--disabled,
94
+ light-dark(#f2f2f3, #374151)
95
+ );
96
+ --sc-kit--button--border: var(--sc-kit--button--white--border, none);
97
+ --sc-kit--button--border--disabled: var(--sc-kit--button--white--border--disabled, none);
98
+ --sc-kit--button--box-shadow: var(--sc-kit--button--white--box-shadow, 0px 3px 0px 0px light-dark(transparent, rgba(#ffffff, 0.3)) inset);
66
99
  }
67
100
  .button-theme--gray {
68
- --button--font--color: var(--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
69
- --button--font--color--active: var(--button--gray--font--color--active, light-dark(#2e2e2e, #ffffff));
70
- --button--font--color--disabled: var(--button--gray--font--color--disabled, light-dark(#2e2e2e, #ffffff));
71
- --button--background: var(--button--gray--background, light-dark(#f2f2f3, #374151));
72
- --button--background--hover: var(--button--gray--background--hover, light-dark(#f9fafb, #1f2937));
73
- --button--background--active: var(--button--gray--background--active, light-dark(#f2f2f3, #374151));
74
- --button--background--disabled: var(--button--gray--background--disabled, light-dark(#f2f2f3, #374151));
75
- --button--border: var(--button--gray--border, 1px solid light-dark(#e5e7eb, #4b5563));
76
- --button--border--disabled: var(--button--gray--border--disabled, 1px solid light-dark(#e5e7eb, #4b5563));
77
- --button--box-shadow: var(--button--gray--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
101
+ --sc-kit--button--font--color: var(--sc-kit--button--gray--font--color, light-dark(#2e2e2e, #ffffff));
102
+ --sc-kit--button--font--color--active: var(--sc-kit--button--gray--font--color--active, light-dark(#2e2e2e, #ffffff));
103
+ --sc-kit--button--font--color--disabled: var(
104
+ --sc-kit--button--gray--font--color--disabled,
105
+ light-dark(#2e2e2e, #ffffff)
106
+ );
107
+ --sc-kit--button--background: var(--sc-kit--button--gray--background, light-dark(#f2f2f3, #374151));
108
+ --sc-kit--button--background--hover: var(
109
+ --sc-kit--button--gray--background--hover,
110
+ light-dark(#f9fafb, #1f2937)
111
+ );
112
+ --sc-kit--button--background--active: var(
113
+ --sc-kit--button--gray--background--active,
114
+ light-dark(#f2f2f3, #374151)
115
+ );
116
+ --sc-kit--button--background--disabled: var(
117
+ --sc-kit--button--gray--background--disabled,
118
+ light-dark(#f2f2f3, #374151)
119
+ );
120
+ --sc-kit--button--border: var(--sc-kit--button--gray--border, 1px solid light-dark(#e5e7eb, #4b5563));
121
+ --sc-kit--button--border--disabled: var(
122
+ --sc-kit--button--gray--border--disabled,
123
+ 1px solid light-dark(#e5e7eb, #4b5563)
124
+ );
125
+ --sc-kit--button--box-shadow: var(--sc-kit--button--gray--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
78
126
  }
79
127
  .button-theme--green {
80
- --button--font--color: var(--button--green--font--color, light-dark(#0cce6b, #ffffff));
81
- --button--font--color--active: var(--button--green--font--color--active, light-dark(#0cce6b, #ffffff));
82
- --button--font--color--disabled: var(--button--green--font--color--disabled, light-dark(#0cce6b, #ffffff));
83
- --button--background: var(--button--green--background, light-dark(#d4fce7, #374151));
84
- --button--background--hover: var(--button--green--background--hover, light-dark(#088745, #1f2937));
85
- --button--background--active: var(--button--green--background--active, light-dark(#088745, #374151));
86
- --button--background--disabled: var(--button--green--background--disabled, light-dark(#ffffff, #374151));
87
- --button--border: var(--button--green--border, 1px solid light-dark(#0cce6b, #4b5563));
88
- --button--border--disabled: var(--button--green--border--disabled, 1px solid light-dark(#0cce6b, #4b5563));
89
- --button--box-shadow: var(--button--green--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
128
+ --sc-kit--button--font--color: var(--sc-kit--button--green--font--color, light-dark(#0cce6b, #ffffff));
129
+ --sc-kit--button--font--color--active: var(
130
+ --sc-kit--button--green--font--color--active,
131
+ light-dark(#0cce6b, #ffffff)
132
+ );
133
+ --sc-kit--button--font--color--disabled: var(
134
+ --sc-kit--button--green--font--color--disabled,
135
+ light-dark(#0cce6b, #ffffff)
136
+ );
137
+ --sc-kit--button--background: var(--sc-kit--button--green--background, light-dark(#d4fce7, #374151));
138
+ --sc-kit--button--background--hover: var(
139
+ --sc-kit--button--green--background--hover,
140
+ light-dark(#088745, #1f2937)
141
+ );
142
+ --sc-kit--button--background--active: var(
143
+ --sc-kit--button--green--background--active,
144
+ light-dark(#088745, #374151)
145
+ );
146
+ --sc-kit--button--background--disabled: var(
147
+ --sc-kit--button--green--background--disabled,
148
+ light-dark(#ffffff, #374151)
149
+ );
150
+ --sc-kit--button--border: var(--sc-kit--button--green--border, 1px solid light-dark(#0cce6b, #4b5563));
151
+ --sc-kit--button--border--disabled: var(
152
+ --sc-kit--button--green--border--disabled,
153
+ 1px solid light-dark(#0cce6b, #4b5563)
154
+ );
155
+ --sc-kit--button--box-shadow: var(--sc-kit--button--green--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
90
156
  }
91
157
  .button-theme--black {
92
- --button--font--color: var(--button--black--font--color, light-dark(#ffffff, #2e2e2e));
93
- --button--font--color--active: var(--button--black--font--color--active, light-dark(#ffffff, #2e2e2e));
94
- --button--font--color--disabled: var(--button--black--font--color--disabled, light-dark(#ffffff, #2e2e2e));
95
- --button--background: var(--button--black--background, light-dark(#1c1c1c, #fafafa));
96
- --button--background--hover: var(--button--black--background--hover, light-dark(#1f2937, #f2f2f3));
97
- --button--background--active: var(--button--black--background--active, light-dark(#374151, #e5e7eb));
98
- --button--background--disabled: var(--button--black--background--disabled, light-dark(#374151, #e5e7eb));
99
- --button--border: var(--button--black--border, none);
100
- --button--border--disabled: var(--button--black--border--disabled, none);
101
- --button--box-shadow: var(--button--black--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
158
+ --sc-kit--button--font--color: var(--sc-kit--button--black--font--color, light-dark(#ffffff, #2e2e2e));
159
+ --sc-kit--button--font--color--active: var(--sc-kit--button--black--font--color--active, light-dark(#ffffff, #2e2e2e));
160
+ --sc-kit--button--font--color--disabled: var(
161
+ --sc-kit--button--black--font--color--disabled,
162
+ light-dark(#ffffff, #2e2e2e)
163
+ );
164
+ --sc-kit--button--background: var(--sc-kit--button--black--background, light-dark(#1c1c1c, #fafafa));
165
+ --sc-kit--button--background--hover: var(
166
+ --sc-kit--button--black--background--hover,
167
+ light-dark(#1f2937, #f2f2f3)
168
+ );
169
+ --sc-kit--button--background--active: var(
170
+ --sc-kit--button--black--background--active,
171
+ light-dark(#374151, #e5e7eb)
172
+ );
173
+ --sc-kit--button--background--disabled: var(
174
+ --sc-kit--button--black--background--disabled,
175
+ light-dark(#374151, #e5e7eb)
176
+ );
177
+ --sc-kit--button--border: var(--sc-kit--button--black--border, none);
178
+ --sc-kit--button--border--disabled: var(--sc-kit--button--black--border--disabled, none);
179
+ --sc-kit--button--box-shadow: var(--sc-kit--button--black--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
102
180
  }
103
181
  .button-theme--alert {
104
- --button--font--color: var(--button--alert--font--color, #ffffff);
105
- --button--font--color--active: var(--button--alert--font--color--active, #ffffff);
106
- --button--font--color--disabled: var(--button--alert--font--color--disabled, #ffffff);
107
- --button--background: var(--button--alert--background, #e71d36);
108
- --button--background--hover: var(--button--alert--background--hover, #d4172d);
109
- --button--background--active: var(--button--alert--background--active, #b81427);
110
- --button--background--disabled: var(--button--alert--background--disabled, #f6a7b1);
111
- --button--border: var(--button--alert--border, none);
112
- --button--border--disabled: var(--button--alert--border--disabled, none);
113
- --button--box-shadow: var(--button--alert--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
182
+ --sc-kit--button--font--color: var(--sc-kit--button--alert--font--color, #ffffff);
183
+ --sc-kit--button--font--color--active: var(--sc-kit--button--alert--font--color--active, #ffffff);
184
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--alert--font--color--disabled, #ffffff);
185
+ --sc-kit--button--background: var(--sc-kit--button--alert--background, #e71d36);
186
+ --sc-kit--button--background--hover: var(--sc-kit--button--alert--background--hover, #d4172d);
187
+ --sc-kit--button--background--active: var(--sc-kit--button--alert--background--active, #b81427);
188
+ --sc-kit--button--background--disabled: var(--sc-kit--button--alert--background--disabled, #f6a7b1);
189
+ --sc-kit--button--border: var(--sc-kit--button--alert--border, none);
190
+ --sc-kit--button--border--disabled: var(--sc-kit--button--alert--border--disabled, none);
191
+ --sc-kit--button--box-shadow: var(--sc-kit--button--alert--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
114
192
  }
115
193
  .button-theme--warning {
116
- --button--font--color: var(--button--warning--font--color, #ffffff);
117
- --button--font--color--active: var(--button--warning--font--color--active, #ffffff);
118
- --button--font--color--disabled: var(--button--warning--font--color--disabled, #ffffff);
119
- --button--background: var(--button--warning--background, #ffa62b);
120
- --button--background--hover: var(--button--warning--background--hover, #d97706);
121
- --button--background--active: var(--button--warning--background--active, #b45309);
122
- --button--background--disabled: var(--button--warning--background--disabled, #fcd34d);
123
- --button--border: var(--button--warning--border, none);
124
- --button--border--disabled: var(--button--warning--border--disabled, none);
125
- --button--box-shadow: var(--button--warning--box-shadow, 0px 3px 0px 0px rgba(255, 255, 255, 0.3) inset);
194
+ --sc-kit--button--font--color: var(--sc-kit--button--warning--font--color, #ffffff);
195
+ --sc-kit--button--font--color--active: var(--sc-kit--button--warning--font--color--active, #ffffff);
196
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--warning--font--color--disabled, #ffffff);
197
+ --sc-kit--button--background: var(--sc-kit--button--warning--background, #ffa62b);
198
+ --sc-kit--button--background--hover: var(--sc-kit--button--warning--background--hover, #d97706);
199
+ --sc-kit--button--background--active: var(--sc-kit--button--warning--background--active, #b45309);
200
+ --sc-kit--button--background--disabled: var(--sc-kit--button--warning--background--disabled, #fcd34d);
201
+ --sc-kit--button--border: var(--sc-kit--button--warning--border, none);
202
+ --sc-kit--button--border--disabled: var(--sc-kit--button--warning--border--disabled, none);
203
+ --sc-kit--button--box-shadow: var(--sc-kit--button--warning--box-shadow, 0px 3px 0px 0px rgba(#ffffff, 0.3) inset);
126
204
  }
127
205
  .button-theme--text-only {
128
- --button--font--color: var(--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));
129
- --button--font--color--active: var(--button--text-only--font--color--active, light-dark(#2e2e2e, #ffffff));
130
- --button--font--color--disabled: var(--button--text-only--font--color--disabled, light-dark(#2e2e2e, #ffffff));
131
- --button--background: var(--button--text-only--background, transparent);
132
- --button--background--hover: var(--button--text-only--background--hover, light-dark(#f2f2f3, #111827));
133
- --button--background--active: var(--button--text-only--background--active, light-dark(#e5e7eb, #1f2937));
134
- --button--background--disabled: var(--button--text-only--background--disabled, transparent);
135
- --button--border: var(--button--text-only--border, none);
136
- --button--border--disabled: var(--button--text-only--border--disabled, none);
137
- --button--box-shadow: var(--button--text-only--box-shadow, none);
206
+ --sc-kit--button--font--color: var(--sc-kit--button--text-only--font--color, light-dark(#2e2e2e, #ffffff));
207
+ --sc-kit--button--font--color--active: var(
208
+ --sc-kit--button--text-only--font--color--active,
209
+ light-dark(#2e2e2e, #ffffff)
210
+ );
211
+ --sc-kit--button--font--color--disabled: var(
212
+ --sc-kit--button--text-only--font--color--disabled,
213
+ light-dark(#2e2e2e, #ffffff)
214
+ );
215
+ --sc-kit--button--background: var(--sc-kit--button--text-only--background, transparent);
216
+ --sc-kit--button--background--hover: var(
217
+ --sc-kit--button--text-only--background--hover,
218
+ light-dark(#f2f2f3, #111827)
219
+ );
220
+ --sc-kit--button--background--active: var(
221
+ --sc-kit--button--text-only--background--active,
222
+ light-dark(#e5e7eb, #1f2937)
223
+ );
224
+ --sc-kit--button--background--disabled: var(--sc-kit--button--text-only--background--disabled, transparent);
225
+ --sc-kit--button--border: var(--sc-kit--button--text-only--border, none);
226
+ --sc-kit--button--border--disabled: var(--sc-kit--button--text-only--border--disabled, none);
227
+ --sc-kit--button--box-shadow: var(--sc-kit--button--text-only--box-shadow, none);
138
228
  }
139
229
  .button-theme--transparent-success {
140
- --button--font--color: var(--button--transparent-success--font--color, #0cce6b);
141
- --button--font--color--active: var(--button--transparent-success--font--color--active, #0cce6b);
142
- --button--font--color--disabled: var(--button--transparent-success--font--color--disabled, #39f393);
143
- --button--background: var(--button--transparent-success--background, #ecfef4);
144
- --button--background--hover: var(--button--transparent-success--background--hover, #ecfef4);
145
- --button--background--active: var(--button--transparent-success--background--active, #d4fce7);
146
- --button--background--disabled: var(--button--transparent-success--background--disabled, transparent);
147
- --button--border: var(--button--transparent-success--border, 1px solid #0cce6b);
148
- --button--border--disabled: var(--button--transparent-success--border--disabled, 1px solid #39f393);
149
- --button--box-shadow: var(--button--transparent-success--box-shadow, none);
230
+ --sc-kit--button--font--color: var(--sc-kit--button--transparent-success--font--color, #0cce6b);
231
+ --sc-kit--button--font--color--active: var(--sc-kit--button--transparent-success--font--color--active, #0cce6b);
232
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--transparent-success--font--color--disabled, #39f393);
233
+ --sc-kit--button--background: var(--sc-kit--button--transparent-success--background, #ecfef4);
234
+ --sc-kit--button--background--hover: var(--sc-kit--button--transparent-success--background--hover, #ecfef4);
235
+ --sc-kit--button--background--active: var(--sc-kit--button--transparent-success--background--active, #d4fce7);
236
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-success--background--disabled, transparent);
237
+ --sc-kit--button--border: var(--sc-kit--button--transparent-success--border, 1px solid #0cce6b);
238
+ --sc-kit--button--border--disabled: var(--sc-kit--button--transparent-success--border--disabled, 1px solid #39f393);
239
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-success--box-shadow, none);
150
240
  }
151
241
  .button-theme--transparent-primary {
152
- --button--font--color: var(--button--transparent-primary--font--color, #144ab0);
153
- --button--font--color--active: var(--button--transparent-primary--font--color--active, #144ab0);
154
- --button--font--color--disabled: var(--button--transparent-primary--font--color--disabled, #91b3f3);
155
- --button--background: var(--button--transparent-primary--background, #f1f6fd);
156
- --button--background--hover: var(--button--transparent-primary--background--hover, #f1f6fd);
157
- --button--background--active: var(--button--transparent-primary--background--active, #dfe9fb);
158
- --button--background--disabled: var(--button--transparent-primary--background--disabled, transparent);
159
- --button--border: var(--button--transparent-primary--border, 1px solid #144ab0);
160
- --button--border--disabled: var(--button--transparent-primary--border--disabled, 1px solid #91b3f3);
161
- --button--box-shadow: var(--button--transparent-primary--box-shadow, none);
242
+ --sc-kit--button--font--color: var(--sc-kit--button--transparent-primary--font--color, #144ab0);
243
+ --sc-kit--button--font--color--active: var(--sc-kit--button--transparent-primary--font--color--active, #144ab0);
244
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--transparent-primary--font--color--disabled, #91b3f3);
245
+ --sc-kit--button--background: var(--sc-kit--button--transparent-primary--background, #f1f6fd);
246
+ --sc-kit--button--background--hover: var(--sc-kit--button--transparent-primary--background--hover, #f1f6fd);
247
+ --sc-kit--button--background--active: var(--sc-kit--button--transparent-primary--background--active, #dfe9fb);
248
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-primary--background--disabled, transparent);
249
+ --sc-kit--button--border: var(--sc-kit--button--transparent-primary--border, 1px solid #144ab0);
250
+ --sc-kit--button--border--disabled: var(--sc-kit--button--transparent-primary--border--disabled, 1px solid #91b3f3);
251
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-primary--box-shadow, none);
162
252
  }
163
253
  .button-theme--transparent-white {
164
- --button--font--color: var(--button--transparent-white--font--color, #ffffff);
165
- --button--font--color--active: var(--button--transparent-white--font--color--active, #ffffff);
166
- --button--font--color--disabled: var(--button--transparent-white--font--color--disabled, #ffffff);
167
- --button--background: var(--button--transparent-white--background, transparent);
168
- --button--background--hover: var(--button--transparent-white--background--hover, transparent);
169
- --button--background--active: var(--button--transparent-white--background--active, transparent);
170
- --button--background--disabled: var(--button--transparent-white--background--disabled, transparent);
171
- --button--border: var(--button--transparent-white--border, 1px solid #ffffff);
172
- --button--border--disabled: var(--button--transparent-white--border--disabled, 1px solid #ffffff);
173
- --button--box-shadow: var(--button--transparent-white--box-shadow, none);
254
+ --sc-kit--button--font--color: var(--sc-kit--button--transparent-white--font--color, #ffffff);
255
+ --sc-kit--button--font--color--active: var(--sc-kit--button--transparent-white--font--color--active, #ffffff);
256
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--transparent-white--font--color--disabled, #ffffff);
257
+ --sc-kit--button--background: var(--sc-kit--button--transparent-white--background, transparent);
258
+ --sc-kit--button--background--hover: var(--sc-kit--button--transparent-white--background--hover, transparent);
259
+ --sc-kit--button--background--active: var(--sc-kit--button--transparent-white--background--active, transparent);
260
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-white--background--disabled, transparent);
261
+ --sc-kit--button--border: var(--sc-kit--button--transparent-white--border, 1px solid #ffffff);
262
+ --sc-kit--button--border--disabled: var(--sc-kit--button--transparent-white--border--disabled, 1px solid #ffffff);
263
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-white--box-shadow, none);
174
264
  }
175
265
  .button-theme--transparent-gray {
176
- --button--font--color: var(--button--transparent-gray--font--color, light-dark(#6b7280, #e5e7eb));
177
- --button--font--color--active: var(
178
- --button--transparent-gray--font--color--active,
266
+ --sc-kit--button--font--color: var(
267
+ --sc-kit--button--transparent-gray--font--color,
268
+ light-dark(#6b7280, #e5e7eb)
269
+ );
270
+ --sc-kit--button--font--color--active: var(
271
+ --sc-kit--button--transparent-gray--font--color--active,
179
272
  light-dark(#6b7280, #e5e7eb)
180
273
  );
181
- --button--font--color--disabled: var(
182
- --button--transparent-gray--font--color--disabled,
274
+ --sc-kit--button--font--color--disabled: var(
275
+ --sc-kit--button--transparent-gray--font--color--disabled,
183
276
  light-dark(#6b7280, #e5e7eb)
184
277
  );
185
- --button--background: var(--button--transparent-gray--background, light-dark(#f9fafb, #1f2937));
186
- --button--background--hover: var(--button--transparent-gray--background--hover, light-dark(#f9fafb, #1f2937));
187
- --button--background--active: var(--button--transparent-gray--background--active, light-dark(#f2f2f3, #374151));
188
- --button--background--disabled: var(--button--transparent-gray--background--disabled, transparent);
189
- --button--border: var(--button--transparent-gray--border, 1px solid light-dark(#6b7280, #e5e7eb));
190
- --button--border--disabled: var(
191
- --button--transparent-gray--border--disabled,
278
+ --sc-kit--button--background: var(--sc-kit--button--transparent-gray--background, light-dark(#f9fafb, #1f2937));
279
+ --sc-kit--button--background--hover: var(
280
+ --sc-kit--button--transparent-gray--background--hover,
281
+ light-dark(#f9fafb, #1f2937)
282
+ );
283
+ --sc-kit--button--background--active: var(
284
+ --sc-kit--button--transparent-gray--background--active,
285
+ light-dark(#f2f2f3, #374151)
286
+ );
287
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-gray--background--disabled, transparent);
288
+ --sc-kit--button--border: var(
289
+ --sc-kit--button--transparent-gray--border,
290
+ 1px solid light-dark(#6b7280, #e5e7eb)
291
+ );
292
+ --sc-kit--button--border--disabled: var(
293
+ --sc-kit--button--transparent-gray--border--disabled,
192
294
  1px solid light-dark(#6b7280, #e5e7eb)
193
295
  );
194
- --button--box-shadow: var(--button--transparent-gray--box-shadow, none);
296
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-gray--box-shadow, none);
195
297
  }
196
298
  .button-theme--transparent-warning {
197
- --button--font--color: var(--button--transparent-warning--font--color, #ffa62b);
198
- --button--font--color--active: var(--button--transparent-warning--font--color--active, #ffa62b);
199
- --button--font--color--disabled: var(--button--transparent-warning--font--color--disabled, #fcd34d);
200
- --button--background: var(--button--transparent-warning--background, #fffbeb);
201
- --button--background--hover: var(--button--transparent-warning--background--hover, #fffbeb);
202
- --button--background--active: var(--button--transparent-warning--background--active, #fef3c7);
203
- --button--background--disabled: var(--button--transparent-warning--background--disabled, transparent);
204
- --button--border: var(--button--transparent-warning--border, 1px solid #ffa62b);
205
- --button--border--disabled: var(--button--transparent-warning--border--disabled, 1px solid #fcd34d);
206
- --button--box-shadow: var(--button--transparent-warning--box-shadow, none);
299
+ --sc-kit--button--font--color: var(--sc-kit--button--transparent-warning--font--color, #ffa62b);
300
+ --sc-kit--button--font--color--active: var(--sc-kit--button--transparent-warning--font--color--active, #ffa62b);
301
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--transparent-warning--font--color--disabled, #fcd34d);
302
+ --sc-kit--button--background: var(--sc-kit--button--transparent-warning--background, #fffbeb);
303
+ --sc-kit--button--background--hover: var(--sc-kit--button--transparent-warning--background--hover, #fffbeb);
304
+ --sc-kit--button--background--active: var(--sc-kit--button--transparent-warning--background--active, #fef3c7);
305
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-warning--background--disabled, transparent);
306
+ --sc-kit--button--border: var(--sc-kit--button--transparent-warning--border, 1px solid #ffa62b);
307
+ --sc-kit--button--border--disabled: var(--sc-kit--button--transparent-warning--border--disabled, 1px solid #fcd34d);
308
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-warning--box-shadow, none);
207
309
  }
208
310
  .button-theme--transparent-destructive {
209
- --button--font--color: var(--button--transparent-destructive--font--color, #e71d36);
210
- --button--font--color--active: var(--button--transparent-destructive--font--color--active, #e71d36);
211
- --button--font--color--disabled: var(--button--transparent-destructive--font--color--disabled, #f6a7b1);
212
- --button--background: var(--button--transparent-destructive--background, #fef1f3);
213
- --button--background--hover: var(--button--transparent-destructive--background--hover, #fef1f3);
214
- --button--background--active: var(--button--transparent-destructive--background--active, #fde8ea);
215
- --button--background--disabled: var(--button--transparent-destructive--background--disabled, transparent);
216
- --button--border: var(--button--transparent-destructive--border, 1px solid #e71d36);
217
- --button--border--disabled: var(--button--transparent-destructive--border--disabled, 1px solid #f6a7b1);
218
- --button--box-shadow: var(--button--transparent-destructive--box-shadow, none);
311
+ --sc-kit--button--font--color: var(--sc-kit--button--transparent-destructive--font--color, #e71d36);
312
+ --sc-kit--button--font--color--active: var(--sc-kit--button--transparent-destructive--font--color--active, #e71d36);
313
+ --sc-kit--button--font--color--disabled: var(--sc-kit--button--transparent-destructive--font--color--disabled, #f6a7b1);
314
+ --sc-kit--button--background: var(--sc-kit--button--transparent-destructive--background, #fef1f3);
315
+ --sc-kit--button--background--hover: var(--sc-kit--button--transparent-destructive--background--hover, #fef1f3);
316
+ --sc-kit--button--background--active: var(--sc-kit--button--transparent-destructive--background--active, #fde8ea);
317
+ --sc-kit--button--background--disabled: var(--sc-kit--button--transparent-destructive--background--disabled, transparent);
318
+ --sc-kit--button--border: var(--sc-kit--button--transparent-destructive--border, 1px solid #e71d36);
319
+ --sc-kit--button--border--disabled: var(--sc-kit--button--transparent-destructive--border--disabled, 1px solid #f6a7b1);
320
+ --sc-kit--button--box-shadow: var(--sc-kit--button--transparent-destructive--box-shadow, none);
219
321
  }
220
322
  .button-theme--size-standard {
221
- --button--height: 2em;
222
- --button--text--font-size: 0.75em;
323
+ --sc-kit--button--height: 2em;
324
+ --sc-kit--button--text--font-size: 0.75em;
223
325
  }
224
326
  .button-theme--size-large {
225
- --button--height: 3em;
226
- --button--font-weight: 500;
227
- --icon--stroke-width: 0.4;
228
- --button--text--font-size: 0.9375em;
327
+ --sc-kit--button--height: 3em;
328
+ --sc-kit--button--font-weight: 500;
329
+ --sc-kit--icon--stroke-width: 0.4;
330
+ --sc-kit--button--text--font-size: 0.9375em;
229
331
  }
230
332
  .button-theme--size-small {
231
- --button--height: 1.5em;
232
- --button--text--font-size: 0.625em;
333
+ --sc-kit--button--height: 1.5em;
334
+ --sc-kit--button--text--font-size: 0.625em;
233
335
  }</style>
package/dist/ui/card-actions/cmp.card-action.svelte CHANGED
@@ -18,7 +18,7 @@ let { action, on } = $props();
18
18
  </button>
19
19
 
20
20
  <style>.card-action {
21
- --_card-action--padding: var(--card-action--padding, 0.3125em);
21
+ --_card-action--padding: var(--sc-kit--card-action--padding, 0.3125em);
22
22
  padding: var(--_card-action--padding);
23
23
  transition: transform 0.3s;
24
24
  line-height: 0;
package/dist/ui/card-actions/cmp.card-actions.svelte CHANGED
@@ -27,19 +27,19 @@ let closeDropdown = () => {
27
27
  {/if}
28
28
 
29
29
  <style>.card-actions {
30
- --_card-actions--background: var(--card-actions--background, light-dark(#f9fafb, #111827));
31
- --_card-actions--border-radius: var(--card-actions--border-radius, 0.1875em);
32
- --_card-actions--dropdown-background: var(--card-actions--dropdown-background, var(--_card-actions--background));
33
- --_card-actions--font-size: var(--card-actions--font-size, 1rem);
34
- --_card-actions--left-offset: var(--card-actions--left-offset, 0.3125em);
35
- --_card-actions--opacity: var(--card-actions--opacity, 0);
36
- --_card-actions--right-offset: var(--card-actions--right-offset, auto);
37
- --_card-actions--top-offset: var(--card-actions--top-offset, 0.3125em);
30
+ --_card-actions--background: var(--sc-kit--card-actions--background, light-dark(#f9fafb, #111827));
31
+ --_card-actions--border-radius: var(--sc-kit--card-actions--border-radius, 0.1875em);
32
+ --_card-actions--dropdown-background: var(--sc-kit--card-actions--dropdown-background, var(--_card-actions--background));
33
+ --_card-actions--font-size: var(--sc-kit--card-actions--font-size, 1rem);
34
+ --_card-actions--left-offset: var(--sc-kit--card-actions--left-offset, 0.3125em);
35
+ --_card-actions--opacity: var(--sc-kit--card-actions--opacity, 0);
36
+ --_card-actions--right-offset: var(--sc-kit--card-actions--right-offset, auto);
37
+ --_card-actions--top-offset: var(--sc-kit--card-actions--top-offset, 0.3125em);
38
38
  position: absolute;
39
39
  top: var(--_card-actions--top-offset);
40
40
  right: var(--_card-actions--right-offset);
41
41
  left: var(--_card-actions--left-offset);
42
- --icon--stroke-width: 0.3;
42
+ --sc-kit--icon--stroke-width: 0.3;
43
43
  font-size: var(--_card-actions--font-size);
44
44
  opacity: var(--_card-actions--opacity);
45
45
  transition: opacity ease-in-out 0.4s;
package/dist/ui/dialog/cmp.dialog-button.svelte CHANGED
@@ -9,5 +9,5 @@ let { type = 'button', disabled = false, autofocus = false, variant = 'primary',
9
9
  </div>
10
10
 
11
11
  <style>.dialog-button {
12
- --button--min-width: 8em;
12
+ --sc-kit--button--min-width: 8em;
13
13
  }</style>
package/dist/ui/dialog/cmp.dialog-cancel-button.svelte CHANGED
@@ -9,5 +9,5 @@ let { disabled = false, on, children } = $props();
9
9
  </div>
10
10
 
11
11
  <style>.dialog-cancel-button {
12
- --button--min-width: 8em;
12
+ --sc-kit--button--min-width: 8em;
13
13
  }</style>
package/dist/ui/dialog/cmp.dialog-close-button.svelte CHANGED
@@ -11,7 +11,7 @@ const handleClick = () => {
11
11
  </button>
12
12
 
13
13
  <style>.dialog-close-button {
14
- --_dialog-close-button--color: var(--dialog-close-button--color, light-dark(#6b7280, #d1d5db));
15
- --icon--size: 1.5rem;
14
+ --_dialog-close-button--color: var(--sc-kit--dialog-close-button--color, light-dark(#6b7280, #d1d5db));
15
+ --sc-kit--icon--size: 1.5rem;
16
16
  color: var(--_dialog-close-button--color);
17
17
  }</style>
package/dist/ui/dialog/cmp.dialog-container.svelte CHANGED
@@ -78,18 +78,19 @@ const customWidth = $derived(isCustomWidth ? size : null);
78
78
  onkeydown={handleKeydown}
79
79
  oncancel={handleCancel}
80
80
  onclick={handleBackdropClick}
81
- style:--_dialog-container--custom-width={customWidth}>
81
+ style:--dialog-container--custom-width={customWidth}>
82
82
  <div class="dialog-container__content">
83
83
  <DialogView controller={dialog.controller} data={dialog.data as TData} />
84
84
  </div>
85
85
  </dialog>
86
86
 
87
87
  <style>.dialog-container {
88
- --_dialog-container--backdrop: var(--dialog-container--backdrop, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)));
89
- --_dialog-container--border-radius: var(--dialog-container--border-radius, 0.5rem);
90
- --_dialog-container--max-width: var(--dialog-container--max-width, 64rem);
91
- --_dialog-container--padding: var(--dialog-container--padding, 1rem);
92
- --_dialog-container--scrollbar-thumb: var(--dialog-container--scrollbar-thumb, light-dark(#c1c1c1, #383838));
88
+ --_dialog-container--backdrop: var(--sc-kit--dialog-container--backdrop, light-dark(rgba(#000000, 0.5), rgba(#ffffff, 0.15)));
89
+ --_dialog-container--border-radius: var(--sc-kit--dialog-container--border-radius, 0.5rem);
90
+ --_dialog-container--max-width: var(--sc-kit--dialog-container--max-width, 64rem);
91
+ --_dialog-container--padding: var(--sc-kit--dialog-container--padding, 1rem);
92
+ --_dialog-container--scrollbar-thumb: var(--sc-kit--dialog-container--scrollbar-thumb, light-dark(#c1c1c1, #383838));
93
+ --_dialog-container--custom-width: var(--dialog-container--custom-width);
93
94
  position: fixed;
94
95
  inset: 0;
95
96
  margin: 0;
package/dist/ui/dialog/cmp.dialog.svelte CHANGED
@@ -37,20 +37,20 @@ const showCloseButton = $derived(!hideCloseButton && !controller.settings.nonCan
37
37
  </div>
38
38
 
39
39
  <style>.dialog {
40
- --_dialog--background: var(--dialog--background, light-dark(#fff, #000));
41
- --_dialog--border-color: var(--dialog--border-color, light-dark(#f2f2f3, #1e1e1e));
42
- --_dialog--border-radius: var(--dialog--border-radius, 0.5rem);
43
- --_dialog--color: var(--dialog--color, light-dark(#000, #fff));
44
- --_dialog--shadow-color: var(--dialog--shadow-color, light-dark(#2f2b431a, #ffffff1a));
45
- --_dialog--height: var(--dialog--height, auto);
46
- --_dialog--max-height: var(--dialog--max-height, none);
47
- --_dialog--min-height: var(--dialog--min-height, auto);
48
- --_dialog--padding-block: var(--dialog--padding-block, 1.25rem);
49
- --_dialog--padding-inline: var(--dialog--padding-inline, 1.5rem);
50
- --_dialog--body--padding-block: var(--dialog--body--padding-block, var(--_dialog--padding-block));
51
- --_dialog--body--padding-inline: var(--dialog--body--padding-inline, var(--_dialog--padding-inline));
52
- --_dialog--header--padding-block: var(--dialog--header--padding-block, var(--_dialog--padding-block));
53
- --_dialog--header--padding-inline: var(--dialog--header--padding-inline, var(--_dialog--padding-inline));
40
+ --_dialog--background: var(--sc-kit--dialog--background, light-dark(#ffffff, #000000));
41
+ --_dialog--border-color: var(--sc-kit--dialog--border-color, light-dark(#f2f2f3, #1e1e1e));
42
+ --_dialog--border-radius: var(--sc-kit--dialog--border-radius, 0.5rem);
43
+ --_dialog--color: var(--sc-kit--dialog--color, light-dark(#000000, #ffffff));
44
+ --_dialog--shadow-color: var(--sc-kit--dialog--shadow-color, light-dark(#2f2b431a, #ffffff1a));
45
+ --_dialog--height: var(--sc-kit--dialog--height, auto);
46
+ --_dialog--max-height: var(--sc-kit--dialog--max-height, none);
47
+ --_dialog--min-height: var(--sc-kit--dialog--min-height, auto);
48
+ --_dialog--padding-block: var(--sc-kit--dialog--padding-block, 1.25rem);
49
+ --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1.5rem);
50
+ --_dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
51
+ --_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
52
+ --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
53
+ --_dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
54
54
  display: flex;
55
55
  flex-direction: column;
56
56
  height: var(--_dialog--height);
package/dist/ui/dropdown/cmp.dropdown.svelte CHANGED
@@ -142,7 +142,7 @@ const initPopper = (node) => {
142
142
  }
143
143
 
144
144
  .dropdown {
145
- --_dropdown--width: var(--dropdown--width, auto);
145
+ --_dropdown--width: var(--sc-kit--dropdown--width, auto);
146
146
  height: 100%;
147
147
  width: var(--_dropdown--width);
148
148
  -webkit-user-drag: none;
package/dist/ui/icon/cmp.icon.svelte CHANGED
@@ -19,17 +19,17 @@ let { src, color = null } = $props();
19
19
  {/if}
20
20
 
21
21
  <style>.icon {
22
- --_icon--color: var(--icon--color);
23
- --_icon--color-blue: var(--icon--color-blue, light-dark(#3b82f6, #60a5fa));
24
- --_icon--color-gray: var(--icon--color-gray, #737373);
25
- --_icon--color-green: var(--icon--color-green, #22c55e);
26
- --_icon--color-orange: var(--icon--color-orange, #f97316);
27
- --_icon--color-red: var(--icon--color-red, #ef4444);
28
- --_icon--color-text: var(--icon--color-text, light-dark(#1f2937, #fff));
29
- --_icon--color-white: var(--icon--color-white, #fff);
30
- --_icon--filter: var(--icon--filter, none);
31
- --_icon--size: var(--icon--size, 1.25rem);
32
- --_icon--stroke-width: var(--icon--stroke-width, 0);
22
+ --_icon--color: var(--sc-kit--icon--color);
23
+ --_icon--color-blue: var(--sc-kit--icon--color-blue, light-dark(#3b82f6, #60a5fa));
24
+ --_icon--color-gray: var(--sc-kit--icon--color-gray, #737373);
25
+ --_icon--color-green: var(--sc-kit--icon--color-green, #22c55e);
26
+ --_icon--color-orange: var(--sc-kit--icon--color-orange, #f97316);
27
+ --_icon--color-red: var(--sc-kit--icon--color-red, #ef4444);
28
+ --_icon--color-text: var(--sc-kit--icon--color-text, light-dark(#1f2937, #ffffff));
29
+ --_icon--color-white: var(--sc-kit--icon--color-white, #ffffff);
30
+ --_icon--filter: var(--sc-kit--icon--filter, none);
31
+ --_icon--size: var(--sc-kit--icon--size, 1.25rem);
32
+ --_icon--stroke-width: var(--sc-kit--icon--stroke-width, 0);
33
33
  display: contents;
34
34
  }
35
35
  .icon--white {
package/dist/ui/image/cmp.image-round.svelte CHANGED
@@ -9,12 +9,12 @@ let { src, alt = '', ring = false, on } = $props();
9
9
  </div>
10
10
 
11
11
  <style>.round-img {
12
- --_image--round--size: var(--image--round--size, 100%);
13
- --image--rounded--inner--border-radius: 50%;
14
- --image--rounded--outer--border-radius: 50%;
15
- --image--rounded--image--border-radius: 50%;
16
- --image--rounded--width: 100%;
17
- --image--rounded--height: 100%;
12
+ --_image--round--size: var(--sc-kit--image--round--size, 100%);
13
+ --sc-kit--image--rounded--inner--border-radius: 50%;
14
+ --sc-kit--image--rounded--outer--border-radius: 50%;
15
+ --sc-kit--image--rounded--image--border-radius: 50%;
16
+ --sc-kit--image--rounded--width: 100%;
17
+ --sc-kit--image--rounded--height: 100%;
18
18
  display: inline-block;
19
19
  width: var(--_image--round--size);
20
20
  position: relative;
package/dist/ui/image/cmp.image-rounded.svelte CHANGED
@@ -9,30 +9,30 @@ let { src, alt = '', ring = false, on } = $props();
9
9
  </div>
10
10
 
11
11
  <style>.rounded-img {
12
- --_image--rounded--size: var(--image--rounded--size, 100%);
13
- --_image--rounded--width: var(--image--rounded--width, var(--_image--rounded--size));
14
- --_image--rounded--height: var(--image--rounded--height, var(--_image--rounded--size));
12
+ --_image--rounded--size: var(--sc-kit--image--rounded--size, 100%);
13
+ --_image--rounded--width: var(--sc-kit--image--rounded--width, var(--_image--rounded--size));
14
+ --_image--rounded--height: var(--sc-kit--image--rounded--height, var(--_image--rounded--size));
15
15
  --_image--rounded--image--border-radius: var(
16
- --image--rounded--image--border-radius,
16
+ --sc-kit--image--rounded--image--border-radius,
17
17
  calc(var(--_image--rounded--inner--border-radius) - var(--_image--rounded--inner--border-width))
18
18
  );
19
- --_image--rounded--inner--border-color: var(--image--rounded--inner--border-color, light-dark(#ffffff, #121212));
19
+ --_image--rounded--inner--border-color: var(--sc-kit--image--rounded--inner--border-color, light-dark(#ffffff, #121212));
20
20
  --_image--rounded--inner--border-radius: var(
21
- --image--rounded--inner--border-radius,
21
+ --sc-kit--image--rounded--inner--border-radius,
22
22
  calc(var(--_image--rounded--outer--border-radius) - var(--_image--rounded--outer--border-width))
23
23
  );
24
- --_image--rounded--inner--border-width: var(--image--rounded--inner--border-width, 4px);
24
+ --_image--rounded--inner--border-width: var(--sc-kit--image--rounded--inner--border-width, 4px);
25
25
  --_image--rounded--outer--border-color: var(
26
- --image--rounded--outer--border-color,
26
+ --sc-kit--image--rounded--outer--border-color,
27
27
  linear-gradient(
28
28
  light-dark(#144ab0, #5a8dec),
29
29
  light-dark(#dfe9fb, #0c2d69)
30
30
  )
31
31
  );
32
- --_image--rounded--outer--border-radius: var(--image--rounded--outer--border-radius, 2px);
33
- --_image--rounded--outer--border-width: var(--image--rounded--outer--border-width, 2px);
32
+ --_image--rounded--outer--border-radius: var(--sc-kit--image--rounded--outer--border-radius, 2px);
33
+ --_image--rounded--outer--border-width: var(--sc-kit--image--rounded--outer--border-width, 2px);
34
34
  --_image--rounded--stub--background: var(
35
- --image--rounded--stub--background,
35
+ --sc-kit--image--rounded--stub--background,
36
36
  var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
37
37
  );
38
38
  width: var(--_image--rounded--width);
@@ -58,5 +58,5 @@ let { src, alt = '', ring = false, on } = $props();
58
58
  padding: var(--_image--rounded--inner--border-width);
59
59
  background: var(--_image--rounded--inner--border-color);
60
60
  overflow: hidden;
61
- --image--border-radius: var(--_image--rounded--image--border-radius);
61
+ --sc-kit--image--border-radius: var(--_image--rounded--image--border-radius);
62
62
  }</style>
package/dist/ui/image/cmp.image-stub.svelte CHANGED
@@ -7,7 +7,7 @@ import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
7
7
  </div>
8
8
 
9
9
  <style>.image-stub {
10
- --_image-stub--color: var(--image-stub--color, var(--sc-color--bg-images, light-dark(#d1d5db, #374151)));
10
+ --_image-stub--color: var(--sc-kit--image-stub--color, var(--sc-color--bg-images, light-dark(#d1d5db, #374151)));
11
11
  width: 100%;
12
12
  height: 100%;
13
13
  z-index: 2;
package/dist/ui/image/cmp.image.svelte CHANGED
@@ -35,11 +35,11 @@ const onLoadError = () => {
35
35
  </div>
36
36
 
37
37
  <style>.image {
38
- --_image--background: var(--image--background, transparent);
39
- --_image--border-radius: var(--image--border-radius, 0);
40
- --_image--object-fit: var(--image--object-fit, cover);
38
+ --_image--background: var(--sc-kit--image--background, transparent);
39
+ --_image--border-radius: var(--sc-kit--image--border-radius, 0);
40
+ --_image--object-fit: var(--sc-kit--image--object-fit, cover);
41
41
  --_image--stub--background: var(
42
- --image--stub--background,
42
+ --sc-kit--image--stub--background,
43
43
  var(--sc-color--bg-images, light-dark(#d1d5db, #374151))
44
44
  );
45
45
  position: relative;
package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte CHANGED
@@ -62,7 +62,7 @@ const onLoadMore = async () => {
62
62
  </div>
63
63
 
64
64
  <style>.infinite-scrolling {
65
- --_infinite-scrolling--overflow-y: var(--infinite-scrolling--overflow-y, initial);
65
+ --_infinite-scrolling--overflow-y: var(--sc-kit--infinite-scrolling--overflow-y, initial);
66
66
  overflow-y: var(--_infinite-scrolling--overflow-y);
67
67
  min-height: 2.625em;
68
68
  position: relative;
package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte CHANGED
@@ -67,7 +67,7 @@ $effect(() => {
67
67
  </div>
68
68
 
69
69
  <style>.line-clamp {
70
- --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
70
+ --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
71
71
  width: 100%;
72
72
  height: 100%;
73
73
  display: flex;
package/dist/ui/line-clamp/cmp.line-clamp.svelte CHANGED
@@ -24,7 +24,7 @@ const trackTruncatedState = (node) => {
24
24
  <div
25
25
  class="line-clamp"
26
26
  class:line-clamp--clickable={canShowMore}
27
- style:--line-clamp--line-clamp={maxLines}
27
+ style:--sc-kit--line-clamp--line-clamp={maxLines}
28
28
  onclick={() => canShowMore && toggleShowMore()}
29
29
  onmousedown={() => {}}
30
30
  role="none">
@@ -42,8 +42,8 @@ const trackTruncatedState = (node) => {
42
42
  </div>
43
43
 
44
44
  <style>.line-clamp {
45
- --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
46
- --_line-clamp--line-clamp: var(--line-clamp--line-clamp, 1);
45
+ --_line-clamp--white-space: var(--sc-kit--line-clamp--white-space, pre-line);
46
+ --_line-clamp--line-clamp: var(--sc-kit--line-clamp--line-clamp, 1);
47
47
  width: 100%;
48
48
  height: 100%;
49
49
  display: flex;
package/dist/ui/loading/cmp.loading.svelte CHANGED
@@ -29,8 +29,8 @@ $effect(() => {
29
29
  }
30
30
 
31
31
  .la-ball-clip-rotate {
32
- --_loading--font-size: var(--loading--font-size, 1rem);
33
- --_loading--spinner-color: var(--loading--spinner-color, light-dark(#144ab0, #5a8dec));
32
+ --_loading--font-size: var(--sc-kit--loading--font-size, 1rem);
33
+ --_loading--spinner-color: var(--sc-kit--loading--spinner-color, light-dark(#144ab0, #5a8dec));
34
34
  font-size: var(--_loading--font-size);
35
35
  color: var(--_loading--spinner-color);
36
36
  display: block;
package/dist/ui/progress/cmp.progress.svelte CHANGED
@@ -7,11 +7,11 @@ const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
7
7
  </div>
8
8
 
9
9
  <style>.progress {
10
- --_progress--height: var(--progress--height, 0.25em);
11
- --_progress--back-color: var(--progress--back-color, #9ca3af);
12
- --_progress--front-color: var(--progress--front-color, #ffffff);
13
- --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
14
- --_progress--border-radius: var(--progress--border-radius, 0);
10
+ --_progress--height: var(--sc-kit--progress--height, 0.25em);
11
+ --_progress--back-color: var(--sc-kit--progress--back-color, #9ca3af);
12
+ --_progress--front-color: var(--sc-kit--progress--front-color, #ffffff);
13
+ --_progress--box-shadow: var(--sc-kit--progress--box-shadow, 0 2px 3px rgba(#000000, 0.25) inset);
14
+ --_progress--border-radius: var(--sc-kit--progress--border-radius, 0);
15
15
  width: 100%;
16
16
  background: var(--_progress--back-color);
17
17
  height: var(--_progress--height);
package/dist/ui/proportional-container/cmp.proportional-container.svelte CHANGED
@@ -2,16 +2,16 @@
2
2
  export {};
3
3
  </script>
4
4
 
5
- <div class="proportional-container" style:--proportional-container--ratio={ratio}>
5
+ <div class="proportional-container" style:--sc-kit--proportional-container--ratio={ratio}>
6
6
  <div class="proportional-container__placer">
7
7
  {@render children?.()}
8
8
  </div>
9
9
  </div>
10
10
 
11
11
  <style>.proportional-container {
12
- --_proportional-container--ratio: var(--proportional-container--ratio, 1);
13
- --_proportional-container--height: var(--proportional-container--height, auto);
14
- --_proportional-container--width: var(--proportional-container--width, 100%);
12
+ --_proportional-container--ratio: var(--sc-kit--proportional-container--ratio, 1);
13
+ --_proportional-container--height: var(--sc-kit--proportional-container--height, auto);
14
+ --_proportional-container--width: var(--sc-kit--proportional-container--width, 100%);
15
15
  width: var(--_proportional-container--width);
16
16
  max-width: 100%;
17
17
  height: var(--_proportional-container--height);
package/dist/ui/seek-bar/cmp.seek-bar.svelte CHANGED
@@ -111,10 +111,10 @@ $effect(() => {
111
111
  cursor: pointer;
112
112
  position: relative;
113
113
  padding: 0.3125rem 0;
114
- --_seek-bar--container-color: var(--seek-bar--container-color, #9ca3af);
115
- --_seek-bar--value-color: var(--seek-bar--value-color, #ffffff);
116
- --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #ffffff);
117
- --_seek-bar--scrubber-border-color: var(--seek-bar--scrubber-border-color, #9ca3af);
114
+ --_seek-bar--container-color: var(--sc-kit--seek-bar--container-color, #9ca3af);
115
+ --_seek-bar--value-color: var(--sc-kit--seek-bar--value-color, #ffffff);
116
+ --_seek-bar--scrubber-color: var(--sc-kit--seek-bar--scrubber-color, #ffffff);
117
+ --_seek-bar--scrubber-border-color: var(--sc-kit--seek-bar--scrubber-border-color, #9ca3af);
118
118
  --_seek-bar--scrubber-opacity: 0;
119
119
  }
120
120
  .seek-bar:hover {
package/dist/ui/swipe-indicator/cmp.swipe-indicator.svelte CHANGED
@@ -28,9 +28,9 @@ const indicatorMounted = (_) => {
28
28
  </div>
29
29
 
30
30
  <style>.swipe-indicator {
31
- --_swipe-indicator--color: var(--swipe-indicator--color, #ffffff);
32
- --_swipe-indicator--font-size: var(--swipe-indicator--font-size, 1rem);
33
- --_swipe-indicator--icon-size: var(--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
31
+ --_swipe-indicator--color: var(--sc-kit--swipe-indicator--color, #ffffff);
32
+ --_swipe-indicator--font-size: var(--sc-kit--swipe-indicator--font-size, 1rem);
33
+ --_swipe-indicator--icon-size: var(--sc-kit--swipe-indicator--icon-size, var(--_swipe-indicator--font-size));
34
34
  display: flex;
35
35
  flex-direction: column;
36
36
  align-items: center;
package/dist/ui/video/cmp.video.svelte CHANGED
@@ -291,10 +291,10 @@ const handleSeek = (percent) => {
291
291
  </div>
292
292
 
293
293
  <style>.video {
294
- --_video--background-color: var(--video--background-color, #000000);
295
- --_video--border-radius: var(--video--border-radius, 0);
296
- --_video--media-fit: var(--video--media-fit, contain);
297
- --_video--poster--media-fit: var(--video--poster--media-fit, cover);
294
+ --_video--background-color: var(--sc-kit--video--background-color, #000000);
295
+ --_video--border-radius: var(--sc-kit--video--border-radius, 0);
296
+ --_video--media-fit: var(--sc-kit--video--media-fit, contain);
297
+ --_video--poster--media-fit: var(--sc-kit--video--poster--media-fit, cover);
298
298
  height: 100%;
299
299
  min-height: 100%;
300
300
  max-height: 100%;
@@ -308,7 +308,7 @@ const handleSeek = (percent) => {
308
308
  background: var(--_video--background-color);
309
309
  }
310
310
  .video__playback-button {
311
- --icon--filter: drop-shadow(1px 1px #000000);
311
+ --sc-kit--icon--filter: drop-shadow(1px 1px #000000);
312
312
  position: absolute;
313
313
  top: 50%;
314
314
  left: 50%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.0.1-1770989312682",
3
+ "version": "0.0.1-1771005811569",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",