@streamscloud/kit 0.25.0 → 0.25.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.
|
@@ -65,16 +65,22 @@
|
|
|
65
65
|
// COLOR — TONES (categorical palette; fg + soft bg, component-neutral)
|
|
66
66
|
// ============================================================
|
|
67
67
|
--sc-kit--tone--gray--fg: light-dark(#{$color-neutral-500}, #{$color-neutral-400});
|
|
68
|
+
--sc-kit--tone--gray--muted: light-dark(#{$color-neutral-400}, #{$color-neutral-600});
|
|
68
69
|
--sc-kit--tone--gray--bg: light-dark(#{$color-neutral-50}, #{$color-dark-600});
|
|
69
70
|
--sc-kit--tone--blue--fg: light-dark(#{$color-blue-500}, #{$color-blue-400});
|
|
71
|
+
--sc-kit--tone--blue--muted: light-dark(#{$color-blue-200}, #{$color-blue-700});
|
|
70
72
|
--sc-kit--tone--blue--bg: light-dark(#{$color-blue-50}, #{$color-blue-900});
|
|
71
73
|
--sc-kit--tone--green--fg: light-dark(#{$color-green-500}, #{$color-green-400});
|
|
74
|
+
--sc-kit--tone--green--muted: light-dark(#{$color-green-200}, #{$color-green-700});
|
|
72
75
|
--sc-kit--tone--green--bg: light-dark(#{$color-green-50}, #{$color-green-900});
|
|
73
76
|
--sc-kit--tone--red--fg: light-dark(#{$color-red-500}, #{$color-red-400});
|
|
77
|
+
--sc-kit--tone--red--muted: light-dark(#{$color-red-200}, #{$color-red-700});
|
|
74
78
|
--sc-kit--tone--red--bg: light-dark(#{$color-red-50}, #{$color-red-900});
|
|
75
79
|
--sc-kit--tone--orange--fg: light-dark(#{$color-orange-500}, #{$color-orange-400});
|
|
80
|
+
--sc-kit--tone--orange--muted: light-dark(#{$color-orange-200}, #{$color-orange-700});
|
|
76
81
|
--sc-kit--tone--orange--bg: light-dark(#{$color-orange-100}, #{$color-orange-900});
|
|
77
82
|
--sc-kit--tone--teal--fg: light-dark(#3d7068, #5f938a);
|
|
83
|
+
--sc-kit--tone--teal--muted: light-dark(#3d7068, #5f938a);
|
|
78
84
|
--sc-kit--tone--teal--bg: light-dark(#eef4f3, #16302b);
|
|
79
85
|
|
|
80
86
|
// ============================================================
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
<script lang="ts" generics="S">import { Button } from '../button';
|
|
2
|
+
import { IconText } from '../icon-text';
|
|
2
3
|
import ToolbarFilterSelect from './cmp.toolbar-filter-select.svelte';
|
|
3
4
|
import ToolbarIconButton from './cmp.toolbar-icon-button.svelte';
|
|
4
5
|
import ToolbarSectionTitle from './cmp.toolbar-section-title.svelte';
|
|
5
6
|
import { ToolbarSortSelectLocalization } from './toolbar-sort-select-localization';
|
|
7
|
+
import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
|
|
6
8
|
import IconFilter from '@fluentui/svg-icons/icons/filter_20_regular.svg?raw';
|
|
7
9
|
const { options, value, label, size = 'sm', trigger = 'icon', compare, on } = $props();
|
|
8
10
|
const localization = new ToolbarSortSelectLocalization();
|
|
@@ -21,7 +23,9 @@ const onChange = (next) => {
|
|
|
21
23
|
{/snippet}
|
|
22
24
|
|
|
23
25
|
{#snippet buttonTrigger()}
|
|
24
|
-
<Button type="presentational" variant="secondary" size={size}
|
|
26
|
+
<Button type="presentational" variant="secondary" size={size}>
|
|
27
|
+
<IconText icon={IconFilter} secondaryIcon={IconChevronDown} size={size} iconScale="large" trimText>{localization.sorting}</IconText>
|
|
28
|
+
</Button>
|
|
25
29
|
{/snippet}
|
|
26
30
|
|
|
27
31
|
<ToolbarFilterSelect
|
|
@@ -8,7 +8,7 @@ const currentLabel = $derived(currentStage?.label ?? '');
|
|
|
8
8
|
const tooltipLabel = $derived(!showLabel ? currentLabel : '');
|
|
9
9
|
const segmentColor = (s) => {
|
|
10
10
|
const value = s.color ?? 'gray';
|
|
11
|
-
return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--
|
|
11
|
+
return PROGRESS_BAR_TONES.includes(value) ? `var(--sc-kit--tone--${value}--muted)` : value;
|
|
12
12
|
};
|
|
13
13
|
</script>
|
|
14
14
|
|
|
@@ -45,7 +45,8 @@ const segmentColor = (s) => {
|
|
|
45
45
|
Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
|
|
46
46
|
descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
|
|
47
47
|
the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
|
|
48
|
-
palette (
|
|
48
|
+
palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) or a raw CSS
|
|
49
|
+
color / `var(--sc-kit--*)`. Useful
|
|
49
50
|
for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
|
|
50
51
|
cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
|
|
51
52
|
full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage
|
|
@@ -16,7 +16,8 @@ type Props = {
|
|
|
16
16
|
* Multi-stage workflow progress indicator. Pass `stages` as an array of `{ color, label? }`
|
|
17
17
|
* descriptors — the bar renders one segment per stage; segments `0..stage` (inclusive) are filled,
|
|
18
18
|
* the rest use the empty-segment color. Each stage's `color` is either a named tone from the shared
|
|
19
|
-
* palette (
|
|
19
|
+
* palette (resolved to its muted shade, e.g. `'green'` → `--sc-kit--tone--green--muted`) or a raw CSS
|
|
20
|
+
* color / `var(--sc-kit--*)`. Useful
|
|
20
21
|
* for content-lifecycle indicators (Ideas → Draft → Review → Scheduled → Published) in cards, table
|
|
21
22
|
* cells, or post pages. `variant="pips"` renders compact fixed-size ticks (left-aligned) instead of
|
|
22
23
|
* full-width segments — for dense table cells. `showLabel={false}` drops the inline current-stage
|