@redseed/redseed-ui-tailwindcss 7.59.0 → 7.60.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/section.css +38 -0
- package/package.json +1 -1
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%;
|