@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.
Files changed (30) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/CHANGELOG.md +21 -0
  3. package/README.md +2 -2
  4. package/dist/ai-container.css +18 -20
  5. package/dist/eyebrow-token.css +18 -20
  6. package/dist/metric-highlight.css +155 -147
  7. package/dist/narrative-attribution.css +34 -36
  8. package/dist/narrative-container.css +38 -41
  9. package/dist/narrative-data-callout.css +51 -53
  10. package/dist/narrative-divider.css +9 -11
  11. package/dist/narrative-headline.css +93 -94
  12. package/dist/narrative-ordered-list.css +80 -74
  13. package/dist/narrative-section.css +21 -23
  14. package/dist/narrative-social-media-card.css +61 -55
  15. package/dist/narrative-summary.css +78 -80
  16. package/dist/pull-quote.css +43 -45
  17. package/package.json +3 -3
  18. package/src/ai-container.css +18 -20
  19. package/src/eyebrow-token.css +18 -20
  20. package/src/metric-highlight.css +155 -147
  21. package/src/narrative-attribution.css +34 -36
  22. package/src/narrative-container.css +38 -41
  23. package/src/narrative-data-callout.css +51 -53
  24. package/src/narrative-divider.css +9 -11
  25. package/src/narrative-headline.css +93 -94
  26. package/src/narrative-ordered-list.css +80 -74
  27. package/src/narrative-section.css +21 -23
  28. package/src/narrative-social-media-card.css +61 -55
  29. package/src/narrative-summary.css +78 -80
  30. package/src/pull-quote.css +43 -45
package/src/narrative-summary.css CHANGED
@@ -16,111 +16,109 @@
16
16
  */
17
17
 
18
18
  @layer components {
19
-
20
- /* Establishes the query container. The grid inside reacts to this element's
19
+ /* Establishes the query container. The grid inside reacts to this element's
21
20
  inline size. */
22
- .seeds-narrative-summary {
23
- container-type: inline-size;
24
- box-sizing: border-box;
25
- font-family: var(--font-family);
26
- }
21
+ .seeds-narrative-summary {
22
+ container-type: inline-size;
23
+ box-sizing: border-box;
24
+ font-family: var(--font-family);
25
+ }
27
26
 
28
- /* Stacked single column by default (narrow). The container query below expands
27
+ /* Stacked single column by default (narrow). The container query below expands
29
28
  it once there is room. */
30
- .seeds-narrative-summary-grid {
31
- display: grid;
32
- grid-template-columns: 1fr;
33
- gap: var(--space-450); /* 24px */
34
- }
29
+ .seeds-narrative-summary-grid {
30
+ display: grid;
31
+ grid-template-columns: 1fr;
32
+ gap: var(--space-450); /* 24px */
33
+ }
35
34
 
36
- /* The lead column: eyebrow, headline, optional action. align-items:flex-start
35
+ /* The lead column: eyebrow, headline, optional action. align-items:flex-start
37
36
  keeps the eyebrow pill and the action sized to their content — without it the
38
37
  column's default stretch would blow the eyebrow out to full width. The
39
38
  headline still fills and wraps because its text is wider than the track. */
40
- .seeds-narrative-summary-lead {
41
- display: flex;
42
- flex-direction: column;
43
- align-items: flex-start;
44
- gap: var(--space-300); /* 8px */
45
- min-width: 0;
46
- }
39
+ .seeds-narrative-summary-lead {
40
+ display: flex;
41
+ flex-direction: column;
42
+ align-items: flex-start;
43
+ gap: var(--space-300); /* 8px */
44
+ min-width: 0;
45
+ }
47
46
 
48
- /* The headline area grows so the action anchors toward the bottom of the lead
47
+ /* The headline area grows so the action anchors toward the bottom of the lead
49
48
  column when the neighboring columns are taller. align-self:stretch fills the
50
49
  track width (the lead column pins other items to flex-start) so the headline
51
50
  wraps at the column edge regardless of its length. */
52
- .seeds-narrative-summary-headline {
53
- flex: 1 1 auto;
54
- align-self: stretch;
55
- }
51
+ .seeds-narrative-summary-headline {
52
+ flex: 1 1 auto;
53
+ align-self: stretch;
54
+ }
56
55
 
57
- /* In three-column mode the content wrapper is transparent to the grid, so its
56
+ /* In three-column mode the content wrapper is transparent to the grid, so its
58
57
  two sections become grid items in their own columns. In two-column mode the
59
58
  container query below turns it into a real, stacking grid item. */
60
- .seeds-narrative-summary-content {
61
- display: contents;
62
- }
59
+ .seeds-narrative-summary-content {
60
+ display: contents;
61
+ }
63
62
 
64
- .seeds-narrative-summary-section {
65
- display: flex;
66
- flex-direction: column;
67
- gap: var(--space-300); /* 8px */
68
- min-width: 0;
69
- }
63
+ .seeds-narrative-summary-section {
64
+ display: flex;
65
+ flex-direction: column;
66
+ gap: var(--space-300); /* 8px */
67
+ min-width: 0;
68
+ }
70
69
 
71
- /* Section label. 14px / 24px has no exact type token (the scale skips from
70
+ /* Section label. 14px / 24px has no exact type token (the scale skips from
72
71
  13px to 16px), so the design value is kept verbatim — same rationale as
73
72
  eyebrow-token.css. All other values use tokens. */
74
- .seeds-narrative-summary-label {
75
- margin: 0;
76
- font-size: 14px;
77
- line-height: 24px;
78
- font-weight: var(--font-weight-bold);
79
- color: var(--color-text-headline);
80
- }
73
+ .seeds-narrative-summary-label {
74
+ margin: 0;
75
+ font-size: 14px;
76
+ line-height: 24px;
77
+ font-weight: var(--font-weight-bold);
78
+ color: var(--color-text-headline);
79
+ }
81
80
 
82
- .seeds-narrative-summary-text {
83
- margin: 0;
84
- font-size: 14px; /* off-scale, see label above */
85
- line-height: 24px;
86
- font-weight: var(--font-weight-normal);
87
- color: var(--color-text-body);
88
- }
81
+ .seeds-narrative-summary-text {
82
+ margin: 0;
83
+ font-size: 14px; /* off-scale, see label above */
84
+ line-height: 24px;
85
+ font-weight: var(--font-weight-normal);
86
+ color: var(--color-text-body);
87
+ }
89
88
 
90
- .seeds-narrative-summary-list {
91
- margin: 0;
92
- padding-inline-start: 21px;
93
- list-style: disc;
94
- font-size: 14px; /* off-scale, see label above */
95
- line-height: 24px;
96
- font-weight: var(--font-weight-normal);
97
- color: var(--color-text-body);
98
- }
89
+ .seeds-narrative-summary-list {
90
+ margin: 0;
91
+ padding-inline-start: 21px;
92
+ list-style: disc;
93
+ font-size: 14px; /* off-scale, see label above */
94
+ line-height: 24px;
95
+ font-weight: var(--font-weight-normal);
96
+ color: var(--color-text-body);
97
+ }
99
98
 
100
- .seeds-narrative-summary-list li {
101
- margin: 0;
102
- }
99
+ .seeds-narrative-summary-list li {
100
+ margin: 0;
101
+ }
103
102
 
104
- /* Expand to the multi-column layout once the component is wide enough. The
103
+ /* Expand to the multi-column layout once the component is wide enough. The
105
104
  threshold is on the component's own width (container query), so a narrow card
106
105
  on a wide screen still stacks. 640px = Tailwind/Seeds sm breakpoint. */
107
- @container (min-width: 640px) {
108
- .seeds-narrative-summary-grid {
109
- grid-template-columns: repeat(3, 1fr);
110
- }
106
+ @container (min-width: 640px) {
107
+ .seeds-narrative-summary-grid {
108
+ grid-template-columns: repeat(3, 1fr);
109
+ }
111
110
 
112
- /* 1/3 lead + 2/3 content. */
113
- .seeds-narrative-summary-two-column {
114
- grid-template-columns: 1fr 2fr;
115
- }
111
+ /* 1/3 lead + 2/3 content. */
112
+ .seeds-narrative-summary-two-column {
113
+ grid-template-columns: 1fr 2fr;
114
+ }
116
115
 
117
- /* The content wrapper becomes a real grid item that stacks its two sections. */
118
- .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
119
- display: flex;
120
- flex-direction: column;
121
- gap: var(--space-450); /* 24px */
122
- min-width: 0;
116
+ /* The content wrapper becomes a real grid item that stacks its two sections. */
117
+ .seeds-narrative-summary-two-column .seeds-narrative-summary-content {
118
+ display: flex;
119
+ flex-direction: column;
120
+ gap: var(--space-450); /* 24px */
121
+ min-width: 0;
122
+ }
123
123
  }
124
124
  }
125
-
126
- }
package/src/pull-quote.css CHANGED
@@ -11,58 +11,56 @@
11
11
  */
12
12
 
13
13
  @layer components {
14
-
15
- .seeds-pull-quote {
16
- width: 100%;
17
- display: flex;
18
- flex-direction: column;
19
- align-items: flex-start;
20
- margin: 0; /* reset the browser default <figure> margin */
21
- /* 40px block / 48px inline — 48px is off the space scale, so derive it from
14
+ .seeds-pull-quote {
15
+ width: 100%;
16
+ display: flex;
17
+ flex-direction: column;
18
+ align-items: flex-start;
19
+ margin: 0; /* reset the browser default <figure> margin */
20
+ /* 40px block / 48px inline — 48px is off the space scale, so derive it from
22
21
  two tokens (40 + 8) rather than hardcoding an off-scale value. */
23
- padding: var(--space-600) calc(var(--space-600) + var(--space-300));
24
- }
22
+ padding: var(--space-600) calc(var(--space-600) + var(--space-300));
23
+ }
25
24
 
26
- /* The accented bar holding the quote and attribution. */
27
- .seeds-pull-quote-bar {
28
- box-sizing: border-box;
29
- display: flex;
30
- flex-direction: column;
31
- align-items: flex-start;
32
- gap: var(--space-450); /* 24px */
33
- width: 100%;
34
- padding-left: var(--space-450); /* 24px */
35
- /* 4px is off the border-width scale (max token is 3px); the bar is a
25
+ /* The accented bar holding the quote and attribution. */
26
+ .seeds-pull-quote-bar {
27
+ box-sizing: border-box;
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: flex-start;
31
+ gap: var(--space-450); /* 24px */
32
+ width: 100%;
33
+ padding-left: var(--space-450); /* 24px */
34
+ /* 4px is off the border-width scale (max token is 3px); the bar is a
36
35
  decorative accent, mirroring NarrativeContainer's hardcoded 4px ring. The
37
36
  subtle accent uses the AI gradient mid stop (#9747ff — no exact token). */
38
- border-left: 4px solid #9747ff;
39
- }
37
+ border-left: 4px solid #9747ff;
38
+ }
40
39
 
41
- .seeds-pull-quote-vivid .seeds-pull-quote-bar {
42
- border-left-color: #fff;
43
- }
40
+ .seeds-pull-quote-vivid .seeds-pull-quote-bar {
41
+ border-left-color: #fff;
42
+ }
44
43
 
45
- .seeds-pull-quote-text {
46
- margin: 0; /* reset the browser default <blockquote> margin */
47
- font-size: var(--font-size-600);
48
- line-height: var(--line-height-600);
49
- font-style: italic;
50
- font-weight: var(--font-weight-normal);
51
- color: inherit;
52
- overflow-wrap: break-word;
53
- }
44
+ .seeds-pull-quote-text {
45
+ margin: 0; /* reset the browser default <blockquote> margin */
46
+ font-size: var(--font-size-600);
47
+ line-height: var(--line-height-600);
48
+ font-style: italic;
49
+ font-weight: var(--font-weight-normal);
50
+ color: inherit;
51
+ overflow-wrap: break-word;
52
+ }
54
53
 
55
- /* Attribution row — a flex container for author name, avatar, network, etc.
54
+ /* Attribution row — a flex container for author name, avatar, network, etc.
56
55
  Direct text inherits a bold, small treatment to match the display-name style;
57
56
  richer content (e.g. an Avatar) composes freely. */
58
- .seeds-pull-quote-attribution {
59
- display: flex;
60
- align-items: center;
61
- gap: var(--space-300); /* 8px */
62
- font-size: var(--font-size-200);
63
- line-height: var(--line-height-200);
64
- font-weight: var(--font-weight-bold);
65
- color: inherit;
66
- }
67
-
57
+ .seeds-pull-quote-attribution {
58
+ display: flex;
59
+ align-items: center;
60
+ gap: var(--space-300); /* 8px */
61
+ font-size: var(--font-size-200);
62
+ line-height: var(--line-height-200);
63
+ font-weight: var(--font-weight-bold);
64
+ color: inherit;
65
+ }
68
66
  }