@streamscloud/kit 0.11.0 → 0.11.1
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.
- package/dist/ui/button/cmp.button.svelte +63 -63
- package/package.json +1 -1
|
@@ -112,13 +112,13 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
|
|
|
112
112
|
-->
|
|
113
113
|
|
|
114
114
|
<style>.btn {
|
|
115
|
-
--_btn--color: var(--sc-kit--button--color, var(--
|
|
116
|
-
--_btn--background: var(--sc-kit--button--background, var(--
|
|
117
|
-
--_btn--background-hover: var(--sc-kit--button--background--hover, var(--
|
|
118
|
-
--_btn--background-active: var(--sc-kit--button--background--active, var(--
|
|
119
|
-
--_btn--border: var(--sc-kit--button--border,
|
|
120
|
-
--_btn--box-shadow: var(--sc-kit--button--box-shadow,
|
|
121
|
-
--_btn--focus-ring-color: var(--sc-kit--button--focus-ring-color, var(--
|
|
115
|
+
--_btn--color: var(--sc-kit--button--color, var(--_btn--variant-color));
|
|
116
|
+
--_btn--background: var(--sc-kit--button--background, var(--_btn--variant-background));
|
|
117
|
+
--_btn--background-hover: var(--sc-kit--button--background--hover, var(--_btn--variant-background-hover));
|
|
118
|
+
--_btn--background-active: var(--sc-kit--button--background--active, var(--_btn--variant-background-active));
|
|
119
|
+
--_btn--border: var(--sc-kit--button--border, var(--_btn--variant-border));
|
|
120
|
+
--_btn--box-shadow: var(--sc-kit--button--box-shadow, var(--_btn--variant-box-shadow));
|
|
121
|
+
--_btn--focus-ring-color: var(--sc-kit--button--focus-ring-color, var(--_btn--variant-focus-ring-color));
|
|
122
122
|
--_btn--height: var(--sc-kit--button--height, var(--_btn--size-height));
|
|
123
123
|
--_btn--padding-inline: var(--sc-kit--button--padding-inline, var(--_btn--size-padding-inline));
|
|
124
124
|
--_btn--font-size: var(--sc-kit--button--font-size, var(--_btn--size-font-size));
|
|
@@ -228,78 +228,78 @@ Pass `type="anchor"` to render as `<a>` with `href`. Otherwise `type` is the nat
|
|
|
228
228
|
aspect-ratio: 1/1;
|
|
229
229
|
}
|
|
230
230
|
.btn--primary {
|
|
231
|
-
--
|
|
232
|
-
--
|
|
233
|
-
--
|
|
234
|
-
--
|
|
235
|
-
--
|
|
236
|
-
--
|
|
237
|
-
--
|
|
231
|
+
--_btn--variant-color: var(--sc-kit--color--text--on-accent);
|
|
232
|
+
--_btn--variant-background: var(--sc-kit--color--accent);
|
|
233
|
+
--_btn--variant-background-hover: var(--sc-kit--color--accent--hover);
|
|
234
|
+
--_btn--variant-background-active: var(--sc-kit--color--accent--hover);
|
|
235
|
+
--_btn--variant-border: 1px solid transparent;
|
|
236
|
+
--_btn--variant-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
|
|
237
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--border--focus);
|
|
238
238
|
}
|
|
239
239
|
.btn--danger {
|
|
240
|
-
--
|
|
241
|
-
--
|
|
242
|
-
--
|
|
243
|
-
--
|
|
244
|
-
--
|
|
245
|
-
--
|
|
246
|
-
--
|
|
240
|
+
--_btn--variant-color: var(--sc-kit--color--text--on-accent);
|
|
241
|
+
--_btn--variant-background: var(--sc-kit--color--danger);
|
|
242
|
+
--_btn--variant-background-hover: var(--sc-kit--color--danger--hover);
|
|
243
|
+
--_btn--variant-background-active: var(--sc-kit--color--danger--hover);
|
|
244
|
+
--_btn--variant-border: 1px solid transparent;
|
|
245
|
+
--_btn--variant-box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
|
|
246
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--danger);
|
|
247
247
|
}
|
|
248
248
|
.btn--info {
|
|
249
|
-
--
|
|
250
|
-
--
|
|
251
|
-
--
|
|
252
|
-
--
|
|
253
|
-
--
|
|
254
|
-
--
|
|
255
|
-
--
|
|
249
|
+
--_btn--variant-color: var(--sc-kit--color--info);
|
|
250
|
+
--_btn--variant-background: var(--sc-kit--color--info--soft);
|
|
251
|
+
--_btn--variant-background-hover: color-mix(in srgb, var(--sc-kit--color--info) 18%, var(--sc-kit--color--bg--panel));
|
|
252
|
+
--_btn--variant-background-active: color-mix(in srgb, var(--sc-kit--color--info) 26%, var(--sc-kit--color--bg--panel));
|
|
253
|
+
--_btn--variant-border: 1px solid var(--sc-kit--color--info);
|
|
254
|
+
--_btn--variant-box-shadow: none;
|
|
255
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--info);
|
|
256
256
|
}
|
|
257
257
|
.btn--success {
|
|
258
|
-
--
|
|
259
|
-
--
|
|
260
|
-
--
|
|
261
|
-
--
|
|
262
|
-
--
|
|
263
|
-
--
|
|
264
|
-
--
|
|
258
|
+
--_btn--variant-color: var(--sc-kit--color--success);
|
|
259
|
+
--_btn--variant-background: var(--sc-kit--color--success--soft);
|
|
260
|
+
--_btn--variant-background-hover: color-mix(in srgb, var(--sc-kit--color--success) 18%, var(--sc-kit--color--bg--panel));
|
|
261
|
+
--_btn--variant-background-active: color-mix(in srgb, var(--sc-kit--color--success) 26%, var(--sc-kit--color--bg--panel));
|
|
262
|
+
--_btn--variant-border: 1px solid var(--sc-kit--color--success);
|
|
263
|
+
--_btn--variant-box-shadow: none;
|
|
264
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--success);
|
|
265
265
|
}
|
|
266
266
|
.btn--warning {
|
|
267
|
-
--
|
|
268
|
-
--
|
|
269
|
-
--
|
|
270
|
-
--
|
|
271
|
-
--
|
|
272
|
-
--
|
|
273
|
-
--
|
|
267
|
+
--_btn--variant-color: var(--sc-kit--color--warning);
|
|
268
|
+
--_btn--variant-background: var(--sc-kit--color--warning--soft);
|
|
269
|
+
--_btn--variant-background-hover: color-mix(in srgb, var(--sc-kit--color--warning) 18%, var(--sc-kit--color--bg--panel));
|
|
270
|
+
--_btn--variant-background-active: color-mix(in srgb, var(--sc-kit--color--warning) 26%, var(--sc-kit--color--bg--panel));
|
|
271
|
+
--_btn--variant-border: 1px solid var(--sc-kit--color--warning);
|
|
272
|
+
--_btn--variant-box-shadow: none;
|
|
273
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--warning);
|
|
274
274
|
}
|
|
275
275
|
.btn--secondary {
|
|
276
|
-
--
|
|
277
|
-
--
|
|
278
|
-
--
|
|
279
|
-
--
|
|
280
|
-
--
|
|
281
|
-
--
|
|
282
|
-
--
|
|
276
|
+
--_btn--variant-color: var(--sc-kit--color--text--primary);
|
|
277
|
+
--_btn--variant-background: var(--sc-kit--color--bg--panel);
|
|
278
|
+
--_btn--variant-background-hover: var(--sc-kit--color--bg--hover);
|
|
279
|
+
--_btn--variant-background-active: var(--sc-kit--color--bg--active);
|
|
280
|
+
--_btn--variant-border: 1px solid var(--sc-kit--color--border);
|
|
281
|
+
--_btn--variant-box-shadow: none;
|
|
282
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--border--focus);
|
|
283
283
|
}
|
|
284
284
|
.btn--ghost {
|
|
285
|
-
--
|
|
286
|
-
--
|
|
287
|
-
--
|
|
288
|
-
--
|
|
289
|
-
--
|
|
290
|
-
--
|
|
291
|
-
--
|
|
285
|
+
--_btn--variant-color: var(--sc-kit--color--text--primary);
|
|
286
|
+
--_btn--variant-background: transparent;
|
|
287
|
+
--_btn--variant-background-hover: var(--sc-kit--color--bg--hover);
|
|
288
|
+
--_btn--variant-background-active: var(--sc-kit--color--bg--active);
|
|
289
|
+
--_btn--variant-border: 1px solid transparent;
|
|
290
|
+
--_btn--variant-box-shadow: none;
|
|
291
|
+
--_btn--variant-focus-ring-color: var(--sc-kit--color--border--focus);
|
|
292
292
|
}
|
|
293
293
|
.btn--primary-disabled, .btn--danger-disabled {
|
|
294
|
-
--
|
|
295
|
-
--
|
|
296
|
-
--
|
|
294
|
+
--_btn--variant-background: var(--sc-kit--color--bg--hover);
|
|
295
|
+
--_btn--variant-color: var(--sc-kit--color--text--muted);
|
|
296
|
+
--_btn--variant-box-shadow: none;
|
|
297
297
|
}
|
|
298
298
|
.btn--secondary-disabled, .btn--info-disabled, .btn--success-disabled, .btn--warning-disabled {
|
|
299
|
-
--
|
|
300
|
-
--
|
|
301
|
-
--
|
|
299
|
+
--_btn--variant-background: var(--sc-kit--color--bg--panel);
|
|
300
|
+
--_btn--variant-color: var(--sc-kit--color--text--muted);
|
|
301
|
+
--_btn--variant-border: 1px solid var(--sc-kit--color--border);
|
|
302
302
|
}
|
|
303
303
|
.btn--ghost-disabled {
|
|
304
|
-
--
|
|
304
|
+
--_btn--variant-color: var(--sc-kit--color--text--muted);
|
|
305
305
|
}</style>
|