@sproutsocial/seeds-react-narrative-kit 0.6.3 → 0.6.6
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/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +21 -0
- package/README.md +2 -2
- package/dist/ai-container.css +18 -20
- package/dist/eyebrow-token.css +18 -20
- package/dist/metric-highlight.css +155 -147
- package/dist/narrative-attribution.css +34 -36
- package/dist/narrative-container.css +38 -41
- package/dist/narrative-data-callout.css +51 -53
- package/dist/narrative-divider.css +9 -11
- package/dist/narrative-headline.css +93 -94
- package/dist/narrative-ordered-list.css +80 -74
- package/dist/narrative-section.css +21 -23
- package/dist/narrative-social-media-card.css +61 -55
- package/dist/narrative-summary.css +78 -80
- package/dist/pull-quote.css +43 -45
- package/package.json +3 -3
- package/src/ai-container.css +18 -20
- package/src/eyebrow-token.css +18 -20
- package/src/metric-highlight.css +155 -147
- package/src/narrative-attribution.css +34 -36
- package/src/narrative-container.css +38 -41
- package/src/narrative-data-callout.css +51 -53
- package/src/narrative-divider.css +9 -11
- package/src/narrative-headline.css +93 -94
- package/src/narrative-ordered-list.css +80 -74
- package/src/narrative-section.css +21 -23
- package/src/narrative-social-media-card.css +61 -55
- package/src/narrative-summary.css +78 -80
- package/src/pull-quote.css +43 -45
package/src/metric-highlight.css
CHANGED
|
@@ -13,165 +13,173 @@
|
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
@layer components {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
16
|
+
.seeds-metric-highlight {
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
display: flex;
|
|
19
|
+
/* Wrap the fixed-width chart onto its own line when the metric block + chart
|
|
21
20
|
can't sit side by side (narrow cards / mobile). The metric block claims its
|
|
22
21
|
min-content width below, so a cramped row drops the chart down rather than
|
|
23
22
|
overflowing the card and getting clipped by the container. */
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
23
|
+
flex-wrap: wrap;
|
|
24
|
+
align-items: flex-start;
|
|
25
|
+
gap: var(--space-350); /* 12px */
|
|
26
|
+
border-radius: var(--radius-800); /* 12px */
|
|
27
|
+
font-family: var(--font-family);
|
|
28
|
+
/* Container (default): a padded gray app surface (matches the design's
|
|
30
29
|
#f3f4f4 box). `-bare` strips it. */
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.seeds-metric-highlight-bare {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.seeds-metric-highlight-vertical {
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
45
|
-
.seeds-metric-highlight-metric {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
30
|
+
padding: var(--space-400) var(--space-450); /* 16px / 24px */
|
|
31
|
+
background-color: var(--color-app-bg-base);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.seeds-metric-highlight-bare {
|
|
35
|
+
padding: 0;
|
|
36
|
+
background-color: transparent;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.seeds-metric-highlight-vertical {
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* The metric block: label + value/trend. Grows to fill the row in horizontal. */
|
|
44
|
+
.seeds-metric-highlight-metric {
|
|
45
|
+
box-sizing: border-box;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
align-items: flex-start;
|
|
49
|
+
gap: var(--space-200); /* 4px */
|
|
50
|
+
/* Grow to fill the row, but never shrink below the metric's own content
|
|
52
51
|
(the nowrap value + trend pill). That min-content floor is what forces the
|
|
53
52
|
chart to wrap below on narrow cards instead of the row overflowing. */
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
/* Small: label and value collapse onto a single centered row. */
|
|
64
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.seeds-metric-highlight-label {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
80
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
.seeds-metric-highlight-value-row {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
93
|
-
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.seeds-metric-highlight-value {
|
|
97
|
-
|
|
98
|
-
|
|
53
|
+
flex: 1 1 auto;
|
|
54
|
+
min-width: min-content;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-metric {
|
|
58
|
+
width: 100%;
|
|
59
|
+
flex: 0 0 auto;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Small: label and value collapse onto a single centered row. */
|
|
63
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-metric {
|
|
64
|
+
flex-direction: row;
|
|
65
|
+
align-items: center;
|
|
66
|
+
gap: var(--space-300); /* 8px */
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.seeds-metric-highlight-label {
|
|
70
|
+
margin: 0;
|
|
71
|
+
font-size: var(--font-size-300); /* 16px */
|
|
72
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
73
|
+
font-weight: var(--font-weight-normal);
|
|
74
|
+
color: var(--color-text-body);
|
|
75
|
+
overflow-wrap: break-word;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* In small, the label takes the slack so the value/trend align to the end. */
|
|
79
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-label {
|
|
80
|
+
flex: 1 0 0;
|
|
81
|
+
min-width: 0;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.seeds-metric-highlight-value-row {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-wrap: wrap; /* trend pill drops under the value on very narrow cards */
|
|
87
|
+
align-items: center;
|
|
88
|
+
gap: var(--space-300); /* 8px */
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value-row {
|
|
92
|
+
justify-content: flex-end;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.seeds-metric-highlight-value {
|
|
96
|
+
margin: 0;
|
|
97
|
+
/* No mono token exists yet; fall back to a system monospace stack. Mirrors the
|
|
99
98
|
font/font-mono treatment in the design. */
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
99
|
+
font-family: var(
|
|
100
|
+
--font-family-mono,
|
|
101
|
+
ui-monospace,
|
|
102
|
+
"SF Mono",
|
|
103
|
+
SFMono-Regular,
|
|
104
|
+
Menlo,
|
|
105
|
+
monospace
|
|
106
|
+
);
|
|
107
|
+
font-size: var(--font-size-700); /* 32px */
|
|
108
|
+
line-height: var(--line-height-700); /* 40px */
|
|
109
|
+
font-weight: var(--font-weight-bold);
|
|
110
|
+
color: var(--color-text-headline);
|
|
111
|
+
white-space: nowrap;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.seeds-metric-highlight-small .seeds-metric-highlight-value {
|
|
115
|
+
font-size: var(--font-size-600); /* 24px */
|
|
116
|
+
line-height: var(--line-height-600); /* 32px */
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* Trend badge — a rounded pill. Up is the positive (green) treatment; down
|
|
114
120
|
swaps to the negative (red) treatment. Color flows to the arrow + value via
|
|
115
121
|
currentColor. */
|
|
116
|
-
.seeds-metric-highlight-trend {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
.seeds-metric-highlight-trend-down {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.seeds-metric-highlight-trend-arrow {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
122
|
+
.seeds-metric-highlight-trend {
|
|
123
|
+
display: inline-flex;
|
|
124
|
+
align-items: center;
|
|
125
|
+
gap: var(--space-200); /* 4px */
|
|
126
|
+
padding: var(--space-100) var(--space-300); /* 2px / 8px */
|
|
127
|
+
border-radius: 999px;
|
|
128
|
+
font-size: var(--font-size-200); /* 13px */
|
|
129
|
+
line-height: var(--line-height-200);
|
|
130
|
+
font-weight: var(--font-weight-bold);
|
|
131
|
+
white-space: nowrap;
|
|
132
|
+
background-color: var(--color-container-bg-decorative-green);
|
|
133
|
+
color: var(--color-text-decorative-green);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.seeds-metric-highlight-trend-down {
|
|
137
|
+
background-color: var(--color-container-bg-decorative-red);
|
|
138
|
+
color: var(--color-text-decorative-red);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.seeds-metric-highlight-trend-arrow {
|
|
142
|
+
flex: 0 0 auto;
|
|
143
|
+
width: 1em;
|
|
144
|
+
height: 1em;
|
|
145
|
+
stroke: currentColor;
|
|
146
|
+
stroke-width: 1.5;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Slot for an injected chart (e.g. a data-viz SparklineChart). Layout only — no
|
|
144
150
|
stroke/background styling, so the injected chart controls its own look. Heights
|
|
145
151
|
are explicit (never percentage/stretch) so a Highcharts chart always measures a
|
|
146
152
|
concrete container instead of falling back to its 400px default. */
|
|
147
|
-
.seeds-metric-highlight-chart {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
153
|
+
.seeds-metric-highlight-chart {
|
|
154
|
+
box-sizing: border-box;
|
|
155
|
+
flex: 0 0 auto;
|
|
156
|
+
align-self: center;
|
|
157
|
+
/* Center the injected chart as a flex item — an inline/inline-block child
|
|
152
158
|
(e.g. the data-viz SparklineChart) otherwise sits on the text baseline with
|
|
153
159
|
descender space below it, reading as vertically off-center in the slot. */
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
160
|
+
display: flex;
|
|
161
|
+
align-items: center;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.seeds-metric-highlight:not(.seeds-metric-highlight-vertical)
|
|
165
|
+
.seeds-metric-highlight-chart {
|
|
166
|
+
width: 104px;
|
|
167
|
+
height: 48px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.seeds-metric-highlight-small:not(.seeds-metric-highlight-vertical)
|
|
171
|
+
.seeds-metric-highlight-chart {
|
|
172
|
+
width: 88px;
|
|
173
|
+
height: 40px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.seeds-metric-highlight-vertical .seeds-metric-highlight-chart {
|
|
177
|
+
width: 100%;
|
|
178
|
+
height: 96px;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.seeds-metric-highlight-vertical.seeds-metric-highlight-small
|
|
182
|
+
.seeds-metric-highlight-chart {
|
|
183
|
+
height: 56px;
|
|
184
|
+
}
|
|
177
185
|
}
|
|
@@ -14,43 +14,41 @@
|
|
|
14
14
|
*/
|
|
15
15
|
|
|
16
16
|
@layer components {
|
|
17
|
+
/* Main container — horizontal layout with avatar, social icon, and user name. */
|
|
18
|
+
.seeds-narrative-attribution {
|
|
19
|
+
box-sizing: border-box;
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
gap: var(--space-300); /* 8px */
|
|
23
|
+
font-family: var(--font-family);
|
|
24
|
+
}
|
|
17
25
|
|
|
18
|
-
/*
|
|
19
|
-
.seeds-narrative-attribution {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
/* Circular avatar image — fixed size with rounded corners. */
|
|
28
|
-
.seeds-narrative-attribution-avatar {
|
|
29
|
-
width: var(--space-450); /* 24px */
|
|
30
|
-
height: var(--space-450); /* 24px */
|
|
31
|
-
border-radius: var(--radius-circular); /* 50% */
|
|
32
|
-
object-fit: cover;
|
|
33
|
-
flex-shrink: 0;
|
|
34
|
-
}
|
|
26
|
+
/* Circular avatar image — fixed size with rounded corners. */
|
|
27
|
+
.seeds-narrative-attribution-avatar {
|
|
28
|
+
width: var(--space-450); /* 24px */
|
|
29
|
+
height: var(--space-450); /* 24px */
|
|
30
|
+
border-radius: var(--radius-circular); /* 50% */
|
|
31
|
+
object-fit: cover;
|
|
32
|
+
flex-shrink: 0;
|
|
33
|
+
}
|
|
35
34
|
|
|
36
|
-
/* Social network icon container — flexible sizing for partner logos. */
|
|
37
|
-
.seeds-narrative-attribution-social-icon {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
/* User name text — bold headline text with ellipsis overflow. */
|
|
45
|
-
.seeds-narrative-attribution-user-name {
|
|
46
|
-
overflow: hidden;
|
|
47
|
-
color: var(--color-text-headline);
|
|
48
|
-
text-overflow: ellipsis;
|
|
49
|
-
font-family: var(--font-family);
|
|
50
|
-
font-size: var(--text-base-font-size, 14px);
|
|
51
|
-
font-style: normal;
|
|
52
|
-
font-weight: var(--font-weight-bold, 700);
|
|
53
|
-
line-height: var(--text-base-line-height, 24px);
|
|
54
|
-
}
|
|
35
|
+
/* Social network icon container — flexible sizing for partner logos. */
|
|
36
|
+
.seeds-narrative-attribution-social-icon {
|
|
37
|
+
flex-shrink: 0;
|
|
38
|
+
display: flex;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
}
|
|
55
42
|
|
|
43
|
+
/* User name text — bold headline text with ellipsis overflow. */
|
|
44
|
+
.seeds-narrative-attribution-user-name {
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
color: var(--color-text-headline);
|
|
47
|
+
text-overflow: ellipsis;
|
|
48
|
+
font-family: var(--font-family);
|
|
49
|
+
font-size: var(--text-base-font-size, 14px);
|
|
50
|
+
font-style: normal;
|
|
51
|
+
font-weight: var(--font-weight-bold, 700);
|
|
52
|
+
line-height: var(--text-base-line-height, 24px);
|
|
53
|
+
}
|
|
56
54
|
}
|
|
@@ -10,22 +10,21 @@
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
@layer components {
|
|
13
|
+
.seeds-narrative-container {
|
|
14
|
+
position: relative;
|
|
15
|
+
overflow: hidden;
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
align-items: stretch;
|
|
20
|
+
padding: var(--space-500);
|
|
21
|
+
border-radius: var(--radius-800);
|
|
22
|
+
box-shadow: var(--shadow-low);
|
|
23
|
+
background-color: var(--color-container-bg-base);
|
|
24
|
+
font-family: var(--font-family);
|
|
25
|
+
}
|
|
13
26
|
|
|
14
|
-
|
|
15
|
-
position: relative;
|
|
16
|
-
overflow: hidden;
|
|
17
|
-
box-sizing: border-box;
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
align-items: stretch;
|
|
21
|
-
padding: var(--space-500);
|
|
22
|
-
border-radius: var(--radius-800);
|
|
23
|
-
box-shadow: var(--shadow-low);
|
|
24
|
-
background-color: var(--color-container-bg-base);
|
|
25
|
-
font-family: var(--font-family);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
27
|
+
/* Grid and flex items default to `min-width: auto`, so they never shrink below
|
|
29
28
|
their own min-content. A wide row of widgets (a metric grid, a card grid) then
|
|
30
29
|
forces its column wider than the padded surface — and since the container clips
|
|
31
30
|
with overflow:hidden, the excess is cut off at the edge, eating the right-hand
|
|
@@ -38,37 +37,35 @@
|
|
|
38
37
|
default. Any component that needs a real floor (e.g. the data callout's 270px
|
|
39
38
|
donut slot) sets its own min-width via a plain class and always wins, instead
|
|
40
39
|
of racing this rule on source order. */
|
|
41
|
-
:where(.seeds-narrative-container),
|
|
42
|
-
:where(.seeds-narrative-container *) {
|
|
43
|
-
|
|
44
|
-
}
|
|
40
|
+
:where(.seeds-narrative-container),
|
|
41
|
+
:where(.seeds-narrative-container *) {
|
|
42
|
+
min-width: 0;
|
|
43
|
+
}
|
|
45
44
|
|
|
46
|
-
/* Decorative inner gradient border anchored to the top-left corner.
|
|
45
|
+
/* Decorative inner gradient border anchored to the top-left corner.
|
|
47
46
|
A masked ::before so the gradient renders as a uniform-width ring that follows
|
|
48
47
|
border-radius and never tints the content. The radial ellipse fades to
|
|
49
48
|
transparent away from the corner; its x-radius (80%) is larger than its
|
|
50
49
|
y-radius (60%) so the accent runs slightly further along the top edge than down
|
|
51
50
|
the left edge. Brand stops mirror --color-gradient-ai — tokenize to a
|
|
52
51
|
--color-gradient-* token once one exists for a fade-to-transparent variant. */
|
|
53
|
-
.seeds-narrative-container-accent::before {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
52
|
+
.seeds-narrative-container-accent::before {
|
|
53
|
+
content: "";
|
|
54
|
+
position: absolute;
|
|
55
|
+
inset: 0;
|
|
56
|
+
border-radius: inherit;
|
|
57
|
+
padding: 4px;
|
|
58
|
+
background: radial-gradient(
|
|
59
|
+
ellipse 80% 60% at top left,
|
|
60
|
+
#205bc3 0%,
|
|
61
|
+
#9747ff 28%,
|
|
62
|
+
#f282f5 50%,
|
|
63
|
+
transparent 72%
|
|
64
|
+
);
|
|
65
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
|
66
|
+
linear-gradient(#fff 0 0);
|
|
67
|
+
-webkit-mask-composite: xor;
|
|
68
|
+
mask-composite: exclude;
|
|
69
|
+
pointer-events: none;
|
|
70
|
+
}
|
|
74
71
|
}
|
|
@@ -19,85 +19,83 @@
|
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
@layer components {
|
|
22
|
-
|
|
23
|
-
/* Establishes the query container. The row inside reacts to this element's
|
|
22
|
+
/* Establishes the query container. The row inside reacts to this element's
|
|
24
23
|
inline size. A container query only styles DESCENDANTS of the query container,
|
|
25
24
|
so the flex row lives on the inner element, not this one. */
|
|
26
|
-
.seeds-narrative-data-callout {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
}
|
|
25
|
+
.seeds-narrative-data-callout {
|
|
26
|
+
container-type: inline-size;
|
|
27
|
+
box-sizing: border-box;
|
|
28
|
+
font-family: var(--font-family);
|
|
29
|
+
}
|
|
31
30
|
|
|
32
|
-
/* Stacked single column by default (narrow). The container query below turns it
|
|
31
|
+
/* Stacked single column by default (narrow). The container query below turns it
|
|
33
32
|
into the horizontal 1/3 + 2/3 row once there is room. */
|
|
34
|
-
.seeds-narrative-data-callout-row {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
33
|
+
.seeds-narrative-data-callout-row {
|
|
34
|
+
box-sizing: border-box;
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: center;
|
|
38
|
+
gap: var(--space-450); /* 24px */
|
|
39
|
+
}
|
|
41
40
|
|
|
42
|
-
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
41
|
+
/* Visual slot — layout only, no stroke/background so the injected chart controls
|
|
43
42
|
its own look and its own size. No fixed height: charts like the data-viz
|
|
44
43
|
DonutChart carry their own intrinsic height (and a legend), so the slot sizes
|
|
45
44
|
to the chart rather than clipping it. Stacked full-width until the container
|
|
46
45
|
query expands the row. */
|
|
47
|
-
.seeds-narrative-data-callout-visual {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
46
|
+
.seeds-narrative-data-callout-visual {
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
width: 100%;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
}
|
|
55
54
|
|
|
56
|
-
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
55
|
+
/* Stretch the injected visual to the slot's full width. A fluid-width chart like
|
|
57
56
|
the v2 DonutChart otherwise shrinks to content inside this centered flex slot,
|
|
58
57
|
so Highcharts fills that shrunk width and the ring gets width-capped below its
|
|
59
58
|
fixed 270px height — leaving an empty vertical band. Filling the width lets the
|
|
60
59
|
ring become height-capped and fill its box top-to-bottom, like the standalone
|
|
61
60
|
chart story. */
|
|
62
|
-
.seeds-narrative-data-callout-visual > * {
|
|
63
|
-
|
|
64
|
-
}
|
|
61
|
+
.seeds-narrative-data-callout-visual > * {
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
65
64
|
|
|
66
|
-
/* Body copy — fills the remaining space. */
|
|
67
|
-
.seeds-narrative-data-callout-body {
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
65
|
+
/* Body copy — fills the remaining space. */
|
|
66
|
+
.seeds-narrative-data-callout-body {
|
|
67
|
+
box-sizing: border-box;
|
|
68
|
+
min-width: 0;
|
|
69
|
+
font-size: var(--font-size-300); /* 16px */
|
|
70
|
+
line-height: var(--line-height-400); /* ~28px */
|
|
71
|
+
font-weight: var(--font-weight-normal);
|
|
72
|
+
color: var(--color-text-body);
|
|
73
|
+
overflow-wrap: break-word;
|
|
74
|
+
}
|
|
76
75
|
|
|
77
|
-
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
76
|
+
/* Expand to the horizontal 1/3 + 2/3 split once the component is wide enough.
|
|
78
77
|
The threshold is on the component's own width (container query), so a narrow
|
|
79
78
|
callout on a wide screen still stacks. 480px keeps the donut + copy readable
|
|
80
79
|
side by side. */
|
|
81
|
-
@container (min-width: 480px) {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
80
|
+
@container (min-width: 480px) {
|
|
81
|
+
.seeds-narrative-data-callout-row {
|
|
82
|
+
flex-direction: row;
|
|
83
|
+
}
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
85
|
+
.seeds-narrative-data-callout-visual {
|
|
86
|
+
/* Nominally one-third, but never narrower than the injected chart's fixed
|
|
88
87
|
height (the v2 DonutChart is 270px tall). Below that width a fluid-width,
|
|
89
88
|
fixed-height chart like the donut gets width-capped and leaves an empty
|
|
90
89
|
vertical band above/below the ring; the min-width keeps the visual square
|
|
91
90
|
enough that the ring fills its box top-to-bottom, matching the standalone
|
|
92
91
|
chart story. */
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
92
|
+
flex: 0 0 33.333%;
|
|
93
|
+
min-width: 270px;
|
|
94
|
+
width: auto;
|
|
95
|
+
}
|
|
97
96
|
|
|
98
|
-
|
|
99
|
-
|
|
97
|
+
.seeds-narrative-data-callout-body {
|
|
98
|
+
flex: 1 1 0;
|
|
99
|
+
}
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
|
-
|
|
103
|
-
}
|
|
@@ -10,18 +10,16 @@
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
@layer components {
|
|
13
|
-
|
|
14
|
-
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
13
|
+
/* A full-width, 1px horizontal rule. The <hr> ships with user-agent margins
|
|
15
14
|
and a beveled border, so reset those and draw the line with a single
|
|
16
15
|
border-top using the container-border-base token (#dee1e1), which also
|
|
17
16
|
tracks dark mode. */
|
|
18
|
-
.seeds-narrative-divider {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
|
|
17
|
+
.seeds-narrative-divider {
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
width: 100%;
|
|
20
|
+
height: 0;
|
|
21
|
+
margin: 0;
|
|
22
|
+
border: 0;
|
|
23
|
+
border-top: 1px solid var(--color-container-border-base); /* #dee1e1 */
|
|
24
|
+
}
|
|
27
25
|
}
|