@redseed/redseed-ui-tailwindcss 7.44.1 → 7.45.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 +55 -12
- package/package.json +1 -1
package/components/pill.css
CHANGED
|
@@ -2,15 +2,10 @@
|
|
|
2
2
|
/* Accent falls back to a neutral token when the consumer supplies no color. */
|
|
3
3
|
--rsui-pill-accent: var(--color-background-secondary-contrast);
|
|
4
4
|
|
|
5
|
-
@apply inline-flex items-center
|
|
6
|
-
@apply rounded-full border border-border-secondary;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
items-center centres the content, so the 24px icon badge no longer drives
|
|
10
|
-
the pill past spec the way the old py-1.5 did. */
|
|
11
|
-
@apply px-3 min-h-8 select-none whitespace-nowrap cursor-pointer transition;
|
|
12
|
-
@apply text-sm font-medium leading-5;
|
|
13
|
-
@apply bg-background-primary text-text-secondary;
|
|
5
|
+
@apply inline-flex items-center w-fit h-fit shrink-0;
|
|
6
|
+
@apply rounded-full border-[1.5px] border-border-secondary;
|
|
7
|
+
@apply select-none whitespace-nowrap cursor-pointer transition;
|
|
8
|
+
@apply font-medium bg-background-primary text-text-secondary;
|
|
14
9
|
|
|
15
10
|
/* hover state */
|
|
16
11
|
@apply hover:bg-background-secondary;
|
|
@@ -24,13 +19,61 @@
|
|
|
24
19
|
@apply disabled:cursor-default disabled:bg-background-disabled disabled:text-text-disabled disabled:border-transparent;
|
|
25
20
|
|
|
26
21
|
& svg {
|
|
27
|
-
@apply size-
|
|
22
|
+
@apply size-3;
|
|
28
23
|
}
|
|
29
24
|
}
|
|
30
25
|
|
|
31
|
-
/*
|
|
26
|
+
/* Size ramp — dimensions read from the RDS Refresh Figma (Badges → Pill
|
|
27
|
+
outline, xs–xl). Height is content-driven (Figma "Hug"): the taller of the
|
|
28
|
+
text line-height or the fixed 16px icon, plus the vertical padding. The icon
|
|
29
|
+
badge stays 16px at every size (it is the label, not decoration), so text and
|
|
30
|
+
padding are what scale. Text-only pills use symmetric padding; icon-leading
|
|
31
|
+
pills tighten the LEFT padding so the badge nests into the rounded cap — the
|
|
32
|
+
per-size pl values come straight from the design. */
|
|
33
|
+
.rsui-pill--xs {
|
|
34
|
+
@apply gap-[4px] px-[8px] py-[2px] text-[10px] leading-[14px];
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.rsui-pill--xs:has(.rsui-pill__icon) {
|
|
38
|
+
@apply pl-[3px];
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.rsui-pill--sm {
|
|
42
|
+
@apply gap-[4px] px-[8px] py-[2px] text-[12px] leading-[18px];
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rsui-pill--sm:has(.rsui-pill__icon) {
|
|
46
|
+
@apply pl-[3px];
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.rsui-pill--md {
|
|
50
|
+
@apply gap-[6px] px-[10px] py-[2px] text-[14px] leading-[20px];
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.rsui-pill--md:has(.rsui-pill__icon) {
|
|
54
|
+
@apply pl-[4px];
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.rsui-pill--lg {
|
|
58
|
+
@apply gap-[6px] px-[12px] py-[4px] text-[14px] leading-[20px];
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.rsui-pill--lg:has(.rsui-pill__icon) {
|
|
62
|
+
@apply pl-[6px];
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.rsui-pill--xl {
|
|
66
|
+
@apply gap-[6px] px-[12px] py-[4px] text-[16px] leading-[24px];
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.rsui-pill--xl:has(.rsui-pill__icon) {
|
|
70
|
+
@apply pl-[6px];
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* icon badge — solid accent fill with an on-color glyph, a constant 16px across
|
|
74
|
+
every pill size to match the design. */
|
|
32
75
|
.rsui-pill__icon {
|
|
33
|
-
@apply inline-flex items-center justify-center shrink-0 size-
|
|
76
|
+
@apply inline-flex items-center justify-center shrink-0 size-[16px] rounded-full;
|
|
34
77
|
@apply text-text-on-color;
|
|
35
78
|
background-color: var(--rsui-pill-accent);
|
|
36
79
|
}
|