@redseed/redseed-ui-tailwindcss 7.59.0 → 7.61.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/card.css +26 -0
- package/components/section.css +38 -0
- package/package.json +1 -1
package/components/card.css
CHANGED
|
@@ -64,6 +64,32 @@
|
|
|
64
64
|
color: var(--Colors-Warm-Mauve-200);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
/* Empty sets `text-text-primary` on its own root and its description is a plain
|
|
68
|
+
BodyText, which does the same — both vanish here. Empty has no on-color prop to
|
|
69
|
+
pass, and an invisible empty state is the worst case of all: it is what the card
|
|
70
|
+
shows before it has anything to say. Same reach as the card header above. */
|
|
71
|
+
.rsui-card--ai-bold .rsui-empty {
|
|
72
|
+
@apply text-text-on-color;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.rsui-card--ai-bold .rsui-empty__description {
|
|
76
|
+
@apply text-text-on-color;
|
|
77
|
+
@apply *:text-text-on-color;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* MetaInfo the same: its label is `text-text-tertiary` and its value
|
|
81
|
+
`text-text-primary`. The label keeps its muted step against the value rather than
|
|
82
|
+
flattening to white — Warm Mauve 200, the ink the card subtitle already uses,
|
|
83
|
+
measured at 6.05:1 on the lightest stop of this gradient. */
|
|
84
|
+
.rsui-card--ai-bold .rsui-meta-info__label {
|
|
85
|
+
color: var(--Colors-Warm-Mauve-200);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.rsui-card--ai-bold .rsui-meta-info__value,
|
|
89
|
+
.rsui-card--ai-bold .rsui-meta-info__help {
|
|
90
|
+
@apply text-text-on-color;
|
|
91
|
+
}
|
|
92
|
+
|
|
67
93
|
.rsui-card--secondary {
|
|
68
94
|
@apply bg-background-secondary;
|
|
69
95
|
}
|
package/components/section.css
CHANGED
|
@@ -54,6 +54,44 @@
|
|
|
54
54
|
@apply bg-pink-50 border-pink-200 text-text-primary;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
/* ---------------------------------------------------------------------------
|
|
58
|
+
The AI family at full strength: the same dark plum gradient Card's `ai-bold`
|
|
59
|
+
uses, so a bold section and a bold card read as one surface family. Unlike
|
|
60
|
+
`ai` this one does not animate — a moving gradient across a whole section's
|
|
61
|
+
worth of dark ground is a lot of motion for a container the reader is meant
|
|
62
|
+
to read, not glance at.
|
|
63
|
+
|
|
64
|
+
Contrast figures are card.css's: on the lightest stop, Warm Mauve 900, white
|
|
65
|
+
title 7.90:1 and Warm Mauve 200 muted 6.05:1.
|
|
66
|
+
|
|
67
|
+
`BodyText` inside is deliberately NOT adapted — it owns `onColor` for this,
|
|
68
|
+
the same split Card's `ai-bold` makes.
|
|
69
|
+
--------------------------------------------------------------------------- */
|
|
70
|
+
.rsui-section--ai-bold {
|
|
71
|
+
@apply bg-linear-to-br from-background-ai-bold-from via-background-ai-bold-via via-65% to-background-ai-bold-to;
|
|
72
|
+
@apply text-text-on-color;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* A bordered dark section wants its own edge, not a light hairline. */
|
|
76
|
+
.rsui-section--bordered.rsui-section--ai-bold {
|
|
77
|
+
@apply border-transparent;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* SectionHeader sets its own dark ink, which disappears here. Same reach
|
|
81
|
+
card.css makes into CardHeader for the same reason. */
|
|
82
|
+
.rsui-section--ai-bold .rsui-section-header__title-text {
|
|
83
|
+
@apply text-text-on-color;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.rsui-section--ai-bold .rsui-section-header__subtitle {
|
|
87
|
+
color: var(--Colors-Warm-Mauve-200);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* The header hairline is a light-ground border and vanishes on this surface. */
|
|
91
|
+
.rsui-section--ai-bold .rsui-section-header--divider {
|
|
92
|
+
border-color: var(--Colors-Warm-Mauve-900);
|
|
93
|
+
}
|
|
94
|
+
|
|
57
95
|
.rsui-section--ai {
|
|
58
96
|
@apply bg-linear-to-tr from-background-ai-from to-background-ai-to;
|
|
59
97
|
background-size: 160% 160%;
|