@redseed/redseed-ui-tailwindcss 7.44.1 → 7.46.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/button_ai.css +17 -0
- package/components/pill.css +55 -12
- package/components.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
.rsui-button-ai {
|
|
2
|
+
/* default colors */
|
|
3
|
+
@apply text-text-ai bg-linear-to-tr from-background-ai-from to-background-ai-to border-border-ai;
|
|
4
|
+
|
|
5
|
+
/* default hover state */
|
|
6
|
+
@apply hover:text-text-ai hover:from-background-ai-invert hover:to-background-ai-from hover:border-border-ai;
|
|
7
|
+
|
|
8
|
+
/* default focus state */
|
|
9
|
+
@apply focus-visible:ring-border-ai focus-visible:border-border-ai;
|
|
10
|
+
|
|
11
|
+
/* default active state */
|
|
12
|
+
@apply active:bg-none active:bg-background-ai-invert;
|
|
13
|
+
|
|
14
|
+
/* default disabled state */
|
|
15
|
+
@apply disabled:bg-none disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-disabled;
|
|
16
|
+
@apply disabled:active:bg-none disabled:active:bg-button-disabled disabled:active:border-button-disabled;
|
|
17
|
+
}
|
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
|
}
|
package/components.css
CHANGED
|
@@ -18,6 +18,7 @@ Please be careful when adding new components and updating the order.
|
|
|
18
18
|
@import './components/button_secondary.css';
|
|
19
19
|
@import './components/button_tertiary.css';
|
|
20
20
|
@import './components/button_danger.css';
|
|
21
|
+
@import './components/button_ai.css';
|
|
21
22
|
@import './components/card_group.css';
|
|
22
23
|
@import './components/card.css';
|
|
23
24
|
@import './components/card_header.css';
|