@redseed/redseed-ui-tailwindcss 7.43.0 → 7.44.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.
- package/components/pill.css +51 -0
- package/components.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
.rsui-pill {
|
|
2
|
+
/* Accent falls back to a neutral token when the consumer supplies no color. */
|
|
3
|
+
--rsui-pill-accent: var(--color-background-secondary-contrast);
|
|
4
|
+
|
|
5
|
+
@apply inline-flex items-center gap-2 w-fit h-fit shrink-0;
|
|
6
|
+
@apply rounded-full border border-border-secondary;
|
|
7
|
+
@apply px-3 py-1.5 select-none whitespace-nowrap cursor-pointer transition;
|
|
8
|
+
@apply text-sm font-medium leading-5;
|
|
9
|
+
@apply bg-background-primary text-text-secondary;
|
|
10
|
+
|
|
11
|
+
/* hover state */
|
|
12
|
+
@apply hover:bg-background-secondary;
|
|
13
|
+
|
|
14
|
+
/* focus state — mirrors button_slot (ring, cleared when disabled) */
|
|
15
|
+
@apply outline-hidden;
|
|
16
|
+
@apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary;
|
|
17
|
+
@apply disabled:focus-visible:ring-0;
|
|
18
|
+
|
|
19
|
+
/* disabled state */
|
|
20
|
+
@apply disabled:cursor-default disabled:bg-background-disabled disabled:text-text-disabled disabled:border-transparent;
|
|
21
|
+
|
|
22
|
+
& svg {
|
|
23
|
+
@apply size-5;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* icon badge — solid accent fill with an on-color glyph */
|
|
28
|
+
.rsui-pill__icon {
|
|
29
|
+
@apply inline-flex items-center justify-center shrink-0 size-6 rounded-full;
|
|
30
|
+
@apply text-text-on-color;
|
|
31
|
+
background-color: var(--rsui-pill-accent);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* selected — a single accent ring (the halo) with the resting border cleared so
|
|
35
|
+
it doesn't stack into a heavy double outline (which read near-black on a dark
|
|
36
|
+
accent). The tinted fill carries the accent colour, and the label switches to
|
|
37
|
+
the stronger text-primary — a hue-INDEPENDENT contrast cue so selection still
|
|
38
|
+
reads on a pale accent where the ring/tint wash out. Selection is therefore
|
|
39
|
+
never signalled by colour alone (text-contrast + aria-pressed carry it), and
|
|
40
|
+
the text-colour swap shifts no layout. */
|
|
41
|
+
.rsui-pill--selected {
|
|
42
|
+
@apply ring-2 ring-offset-0 text-text-primary;
|
|
43
|
+
--tw-ring-color: var(--rsui-pill-accent);
|
|
44
|
+
border-color: transparent;
|
|
45
|
+
background-color: color-mix(in srgb, var(--rsui-pill-accent) 16%, var(--color-background-primary));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
/* disabled — neutralise the accent-driven badge fill */
|
|
49
|
+
.rsui-pill--disabled .rsui-pill__icon {
|
|
50
|
+
background-color: var(--color-background-disabled-contrast);
|
|
51
|
+
}
|
package/components.css
CHANGED
|
@@ -79,6 +79,7 @@ Please be careful when adding new components and updating the order.
|
|
|
79
79
|
@import './components/pagination_item.css';
|
|
80
80
|
@import './components/pagination_item_previous.css';
|
|
81
81
|
@import './components/pagination_item_next.css';
|
|
82
|
+
@import './components/pill.css';
|
|
82
83
|
@import './components/progress_bar.css';
|
|
83
84
|
@import './components/progress_circle.css';
|
|
84
85
|
@import './components/progress_tracker.css';
|