@sproutsocial/seeds-react-theme 4.2.0 → 4.3.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.
Files changed (18) hide show
  1. package/commonjs/builders/buildCSS.js +5 -0
  2. package/commonjs/dark/theme.js +14 -7
  3. package/commonjs/light/theme.js +5 -1
  4. package/dist/scrollbar.css +19 -0
  5. package/dist/theme-all.css +7 -7
  6. package/dist/theme-dark.css +6 -6
  7. package/dist/theme.css +1 -1
  8. package/dist/themes/dark/theme.scss +12 -12
  9. package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +6 -6
  10. package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +1 -1
  11. package/dist/themes/light/theme.scss +2 -2
  12. package/dist/types/builders/buildCSS.d.ts.map +1 -1
  13. package/dist/types/dark/theme.d.ts.map +1 -1
  14. package/dist/types/light/theme.d.ts.map +1 -1
  15. package/lib/builders/buildCSS.js +5 -0
  16. package/lib/dark/theme.js +14 -7
  17. package/lib/light/theme.js +5 -1
  18. package/package.json +2 -1
package/commonjs/builders/buildCSS.js CHANGED
@@ -186,6 +186,11 @@ function _buildCSSVariables() {
186
186
  combinedCSS = generateCombinedCSS();
187
187
  _fs.default.writeFileSync(_path.default.join(distDir, "theme-all.css"), combinedCSS, "utf-8");
188
188
  console.log(" \u2713 Written combined theme to dist/theme-all.css");
189
+
190
+ // Copy static utility stylesheets into dist (dist is generated + cleaned, so
191
+ // hand-authored CSS must be copied in during the build).
192
+ _fs.default.copyFileSync(_path.default.join(__dirname, "../css/scrollbar.css"), _path.default.join(distDir, "scrollbar.css"));
193
+ console.log(" \u2713 Copied scrollbar utility to dist/scrollbar.css");
189
194
  console.log("\n✅ CSS variables built successfully!\n");
190
195
  case 1:
191
196
  return _context.a(2);
package/commonjs/dark/theme.js CHANGED
@@ -60,7 +60,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
60
60
  positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
61
61
  negative_sentiment: _seedsColor.default.COLOR_RED_500,
62
62
  neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
63
- ai_generated: "var(--color-container-bg-ai-generated, ".concat(_seedsColor.default.COLOR_NEUTRAL_100, ")")
63
+ // 20% AI gradient tint over the dark container surface. Same token-driven
64
+ // value as light mode; the referenced tokens flip per theme.
65
+ ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
64
66
  },
65
67
  border: {
66
68
  base: _seedsColor.default.COLOR_NEUTRAL_1100,
@@ -88,10 +90,11 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
88
90
  ai_generated: _seedsColor.default.COLOR_PURPLE_700
89
91
  }
90
92
  },
91
- // AI brand gradient — identical to light mode (the brand gradient does not flip).
93
+ // AI brand gradient — dark mode uses lighter blue/purple stops for WCAG
94
+ // contrast against the dark surface (Figma Sprout Variables, "Trellis" dark).
92
95
  gradient: {
93
- ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
94
- "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
96
+ ai: "radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%)",
97
+ "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
95
98
  },
96
99
  button: {
97
100
  primary: {
@@ -206,8 +209,10 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
206
209
  base: "transparent"
207
210
  },
208
211
  text: {
209
- base: _seedsColor.default.COLOR_NEUTRAL_800,
210
- hover: _seedsColor.default.COLOR_NEUTRAL_800
212
+ // Dark-mode override: light text for legibility on the dark surface
213
+ // (mirrors ai-outline; the tint now sits over the dark container base).
214
+ base: _seedsColor.default.COLOR_NEUTRAL_100,
215
+ hover: _seedsColor.default.COLOR_NEUTRAL_100
211
216
  }
212
217
  },
213
218
  "ai-outline": {
@@ -251,7 +256,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
251
256
  aqua: _decorativePalettes.aqua.foreground,
252
257
  teal: _decorativePalettes.teal.foreground
253
258
  },
254
- ai_generated: _seedsColor.default.COLOR_NEUTRAL_900
259
+ // Dark-mode override: light text on the (now dark) AI-generated surface,
260
+ // matching the headline treatment. Light mode keeps the dark neutral.
261
+ ai_generated: _seedsColor.default.COLOR_NEUTRAL_0
255
262
  },
256
263
  icon: {
257
264
  base: _seedsColor.default.COLOR_NEUTRAL_100,
package/commonjs/light/theme.js CHANGED
@@ -67,7 +67,11 @@ var colors = exports.colors = _objectSpread(_objectSpread({
67
67
  positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
68
68
  negative_sentiment: _seedsColor.default.COLOR_RED_500,
69
69
  neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
70
- ai_generated: "var(--color-container-bg-ai-generated, ".concat(_seedsColor.default.COLOR_NEUTRAL_100, ")")
70
+ // 20% AI gradient tint composited over the themed container surface.
71
+ // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
72
+ // light/dark automatically (was previously a hardcoded, light-only value
73
+ // injected by seeds-react-theme-provider).
74
+ ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
71
75
  },
72
76
  border: {
73
77
  base: _seedsColor.default.COLOR_NEUTRAL_200,
package/dist/scrollbar.css ADDED
@@ -0,0 +1,19 @@
1
+ /**
2
+ * Seeds thin-scrollbar utility.
3
+ *
4
+ * Tailwind-hybrid replacement for the legacy styled-components `thinScrollbar`
5
+ * mixin. Apply `seeds-scrollbar-thin` to any scrollable element.
6
+ *
7
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css (or theme.css)
8
+ * loaded for the --color-menuItem-bg-active variable and dark-mode support.
9
+ *
10
+ * Wrapped in `@layer components` so consumer Tailwind utilities (unlayered) win
11
+ * the cascade over this component-level style.
12
+ */
13
+
14
+ @layer components {
15
+ .seeds-scrollbar-thin {
16
+ scrollbar-width: thin;
17
+ scrollbar-color: var(--color-menuItem-bg-active) transparent;
18
+ }
19
+ }
package/dist/theme-all.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --color-container-bg-positive_sentiment: #3876e3;
28
28
  --color-container-bg-negative_sentiment: #f76054;
29
29
  --color-container-bg-neutral_sentiment: #c8cccc;
30
- --color-container-bg-ai_generated: var(--color-container-bg-ai-generated, #f3f4f4);
30
+ --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
31
31
  --color-container-border-base: #dee1e1;
32
32
  --color-container-border-success: #59cb59;
33
33
  --color-container-border-warning: #ffbc00;
@@ -508,7 +508,7 @@
508
508
  --color-container-bg-positive_sentiment: #3876e3;
509
509
  --color-container-bg-negative_sentiment: #f76054;
510
510
  --color-container-bg-neutral_sentiment: #c8cccc;
511
- --color-container-bg-ai_generated: var(--color-container-bg-ai-generated, #f3f4f4);
511
+ --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
512
512
  --color-container-border-base: #040404;
513
513
  --color-container-border-success: #59cb59;
514
514
  --color-container-border-warning: #ffbc00;
@@ -529,8 +529,8 @@
529
529
  --color-container-border-decorative-teal: #08c4b2;
530
530
  --color-container-border-selected: #FFFFFF;
531
531
  --color-container-border-ai_generated: #6f5ed3;
532
- --color-gradient-ai: radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%);
533
- --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
532
+ --color-gradient-ai: radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%);
533
+ --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
534
534
  --color-button-primary-bg-base: #679eff;
535
535
  --color-button-primary-bg-hover: #a1c2f8;
536
536
  --color-button-primary-bg-active: #c7dbf9;
@@ -575,8 +575,8 @@
575
575
  --color-button-ai-primary-text-hover: #FFFFFF;
576
576
  --color-button-ai-secondary-bg-base: var(--color-gradient-ai-subtle);
577
577
  --color-button-ai-secondary-border-base: transparent;
578
- --color-button-ai-secondary-text-base: #364141;
579
- --color-button-ai-secondary-text-hover: #364141;
578
+ --color-button-ai-secondary-text-base: #f3f4f4;
579
+ --color-button-ai-secondary-text-hover: #f3f4f4;
580
580
  --color-button-ai-outline-bg-base: transparent;
581
581
  --color-button-ai-outline-border-base: var(--color-gradient-ai);
582
582
  --color-button-ai-outline-text-base: #f3f4f4;
@@ -601,7 +601,7 @@
601
601
  --color-text-decorative-pink: #fcdbeb;
602
602
  --color-text-decorative-aqua: #c5f9f9;
603
603
  --color-text-decorative-teal: #cdf7ef;
604
- --color-text-ai_generated: #273333;
604
+ --color-text-ai_generated: #FFFFFF;
605
605
  --color-icon-base: #f3f4f4;
606
606
  --color-icon-inverse: #273333;
607
607
  --color-icon-success: #d7f4d7;
package/dist/theme-dark.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --color-container-bg-positive_sentiment: #3876e3;
28
28
  --color-container-bg-negative_sentiment: #f76054;
29
29
  --color-container-bg-neutral_sentiment: #c8cccc;
30
- --color-container-bg-ai_generated: var(--color-container-bg-ai-generated, #f3f4f4);
30
+ --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
31
31
  --color-container-border-base: #040404;
32
32
  --color-container-border-success: #59cb59;
33
33
  --color-container-border-warning: #ffbc00;
@@ -48,8 +48,8 @@
48
48
  --color-container-border-decorative-teal: #08c4b2;
49
49
  --color-container-border-selected: #FFFFFF;
50
50
  --color-container-border-ai_generated: #6f5ed3;
51
- --color-gradient-ai: radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%);
52
- --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
51
+ --color-gradient-ai: radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%);
52
+ --color-gradient-ai-subtle: radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%);
53
53
  --color-button-primary-bg-base: #679eff;
54
54
  --color-button-primary-bg-hover: #a1c2f8;
55
55
  --color-button-primary-bg-active: #c7dbf9;
@@ -94,8 +94,8 @@
94
94
  --color-button-ai-primary-text-hover: #FFFFFF;
95
95
  --color-button-ai-secondary-bg-base: var(--color-gradient-ai-subtle);
96
96
  --color-button-ai-secondary-border-base: transparent;
97
- --color-button-ai-secondary-text-base: #364141;
98
- --color-button-ai-secondary-text-hover: #364141;
97
+ --color-button-ai-secondary-text-base: #f3f4f4;
98
+ --color-button-ai-secondary-text-hover: #f3f4f4;
99
99
  --color-button-ai-outline-bg-base: transparent;
100
100
  --color-button-ai-outline-border-base: var(--color-gradient-ai);
101
101
  --color-button-ai-outline-text-base: #f3f4f4;
@@ -120,7 +120,7 @@
120
120
  --color-text-decorative-pink: #fcdbeb;
121
121
  --color-text-decorative-aqua: #c5f9f9;
122
122
  --color-text-decorative-teal: #cdf7ef;
123
- --color-text-ai_generated: #273333;
123
+ --color-text-ai_generated: #FFFFFF;
124
124
  --color-icon-base: #f3f4f4;
125
125
  --color-icon-inverse: #273333;
126
126
  --color-icon-success: #d7f4d7;
package/dist/theme.css CHANGED
@@ -27,7 +27,7 @@
27
27
  --color-container-bg-positive_sentiment: #3876e3;
28
28
  --color-container-bg-negative_sentiment: #f76054;
29
29
  --color-container-bg-neutral_sentiment: #c8cccc;
30
- --color-container-bg-ai_generated: var(--color-container-bg-ai-generated, #f3f4f4);
30
+ --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
31
31
  --color-container-border-base: #dee1e1;
32
32
  --color-container-border-success: #59cb59;
33
33
  --color-container-border-warning: #ffbc00;
package/dist/themes/dark/theme.scss CHANGED
@@ -31,7 +31,7 @@ $theme: (
31
31
  "positive_sentiment": #3876e3,
32
32
  "negative_sentiment": #f76054,
33
33
  "neutral_sentiment": #c8cccc,
34
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
34
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
35
35
  ),
36
36
  "border": (
37
37
  "base": #040404,
@@ -59,8 +59,8 @@ $theme: (
59
59
  )
60
60
  ),
61
61
  "gradient": (
62
- "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%),
63
- "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
62
+ "ai": radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%),
63
+ "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
64
64
  ),
65
65
  "button": (
66
66
  "primary": (
@@ -175,8 +175,8 @@ $theme: (
175
175
  "base": transparent
176
176
  ),
177
177
  "text": (
178
- "base": #364141,
179
- "hover": #364141
178
+ "base": #f3f4f4,
179
+ "hover": #f3f4f4
180
180
  )
181
181
  ),
182
182
  "ai-outline": (
@@ -219,7 +219,7 @@ $theme: (
219
219
  "aqua": #c5f9f9,
220
220
  "teal": #cdf7ef
221
221
  ),
222
- "ai_generated": #273333
222
+ "ai_generated": #FFFFFF
223
223
  ),
224
224
  "icon": (
225
225
  "base": #f3f4f4,
@@ -600,7 +600,7 @@ $theme: (
600
600
  "positive_sentiment": #3876e3,
601
601
  "negative_sentiment": #f76054,
602
602
  "neutral_sentiment": #c8cccc,
603
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
603
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
604
604
  ),
605
605
  "border": (
606
606
  "base": #040404,
@@ -628,8 +628,8 @@ $theme: (
628
628
  )
629
629
  ),
630
630
  "gradient": (
631
- "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%),
632
- "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
631
+ "ai": radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%),
632
+ "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
633
633
  ),
634
634
  "button": (
635
635
  "primary": (
@@ -744,8 +744,8 @@ $theme: (
744
744
  "base": transparent
745
745
  ),
746
746
  "text": (
747
- "base": #364141,
748
- "hover": #364141
747
+ "base": #f3f4f4,
748
+ "hover": #f3f4f4
749
749
  )
750
750
  ),
751
751
  "ai-outline": (
@@ -788,7 +788,7 @@ $theme: (
788
788
  "aqua": #c5f9f9,
789
789
  "teal": #cdf7ef
790
790
  ),
791
- "ai_generated": #273333
791
+ "ai_generated": #FFFFFF
792
792
  ),
793
793
  "icon": (
794
794
  "base": #f3f4f4,
package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss CHANGED
@@ -85,7 +85,7 @@ $theme: (
85
85
  "positive_sentiment": #3876e3,
86
86
  "negative_sentiment": #f76054,
87
87
  "neutral_sentiment": #c8cccc,
88
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
88
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
89
89
  ),
90
90
  "border": (
91
91
  "base": #040404,
@@ -113,8 +113,8 @@ $theme: (
113
113
  )
114
114
  ),
115
115
  "gradient": (
116
- "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%),
117
- "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
116
+ "ai": radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%),
117
+ "ai-subtle": radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)
118
118
  ),
119
119
  "button": (
120
120
  "primary": (
@@ -229,8 +229,8 @@ $theme: (
229
229
  "base": transparent
230
230
  ),
231
231
  "text": (
232
- "base": #364141,
233
- "hover": #364141
232
+ "base": #f3f4f4,
233
+ "hover": #f3f4f4
234
234
  )
235
235
  ),
236
236
  "ai-outline": (
@@ -273,7 +273,7 @@ $theme: (
273
273
  "aqua": #c5f9f9,
274
274
  "teal": #cdf7ef
275
275
  ),
276
- "ai_generated": #273333
276
+ "ai_generated": #FFFFFF
277
277
  ),
278
278
  "icon": (
279
279
  "base": #f3f4f4,
package/dist/themes/extendedThemes/sproutTheme/light/theme.scss CHANGED
@@ -85,7 +85,7 @@ $theme: (
85
85
  "positive_sentiment": #3876e3,
86
86
  "negative_sentiment": #f76054,
87
87
  "neutral_sentiment": #c8cccc,
88
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
88
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
89
89
  ),
90
90
  "border": (
91
91
  "base": #dee1e1,
package/dist/themes/light/theme.scss CHANGED
@@ -42,7 +42,7 @@ $theme: (
42
42
  "positive_sentiment": #3876e3,
43
43
  "negative_sentiment": #f76054,
44
44
  "neutral_sentiment": #c8cccc,
45
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
45
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
46
46
  ),
47
47
  "border": (
48
48
  "base": #dee1e1,
@@ -611,7 +611,7 @@ $theme: (
611
611
  "positive_sentiment": #3876e3,
612
612
  "negative_sentiment": #f76054,
613
613
  "neutral_sentiment": #c8cccc,
614
- "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
614
+ "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
615
615
  ),
616
616
  "border": (
617
617
  "base": #dee1e1,
package/dist/types/builders/buildCSS.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AA4JH;;GAEG;AACH,wBAAsB,iBAAiB,kBA0BtC"}
1
+ {"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AA4JH;;GAEG;AACH,wBAAsB,iBAAiB,kBAkCtC"}
package/dist/types/dark/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA0BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAnUT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA0BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAiMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA3UT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
package/dist/types/light/theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA0BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAjeL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA0BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAteL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/lib/builders/buildCSS.js CHANGED
@@ -184,6 +184,11 @@ function _buildCSSVariables() {
184
184
  combinedCSS = generateCombinedCSS();
185
185
  fs.writeFileSync(path.join(distDir, "theme-all.css"), combinedCSS, "utf-8");
186
186
  console.log(" \u2713 Written combined theme to dist/theme-all.css");
187
+
188
+ // Copy static utility stylesheets into dist (dist is generated + cleaned, so
189
+ // hand-authored CSS must be copied in during the build).
190
+ fs.copyFileSync(path.join(__dirname, "../css/scrollbar.css"), path.join(distDir, "scrollbar.css"));
191
+ console.log(" \u2713 Copied scrollbar utility to dist/scrollbar.css");
187
192
  console.log("\n✅ CSS variables built successfully!\n");
188
193
  case 1:
189
194
  return _context.a(2);
package/lib/dark/theme.js CHANGED
@@ -55,7 +55,9 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
55
55
  positive_sentiment: COLORS.COLOR_BLUE_500,
56
56
  negative_sentiment: COLORS.COLOR_RED_500,
57
57
  neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
58
- ai_generated: "var(--color-container-bg-ai-generated, ".concat(COLORS.COLOR_NEUTRAL_100, ")")
58
+ // 20% AI gradient tint over the dark container surface. Same token-driven
59
+ // value as light mode; the referenced tokens flip per theme.
60
+ ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
59
61
  },
60
62
  border: {
61
63
  base: COLORS.COLOR_NEUTRAL_1100,
@@ -83,10 +85,11 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
83
85
  ai_generated: COLORS.COLOR_PURPLE_700
84
86
  }
85
87
  },
86
- // AI brand gradient — identical to light mode (the brand gradient does not flip).
88
+ // AI brand gradient — dark mode uses lighter blue/purple stops for WCAG
89
+ // contrast against the dark surface (Figma Sprout Variables, "Trellis" dark).
87
90
  gradient: {
88
- ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
89
- "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
91
+ ai: "radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%)",
92
+ "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
90
93
  },
91
94
  button: {
92
95
  primary: {
@@ -201,8 +204,10 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
201
204
  base: "transparent"
202
205
  },
203
206
  text: {
204
- base: COLORS.COLOR_NEUTRAL_800,
205
- hover: COLORS.COLOR_NEUTRAL_800
207
+ // Dark-mode override: light text for legibility on the dark surface
208
+ // (mirrors ai-outline; the tint now sits over the dark container base).
209
+ base: COLORS.COLOR_NEUTRAL_100,
210
+ hover: COLORS.COLOR_NEUTRAL_100
206
211
  }
207
212
  },
208
213
  "ai-outline": {
@@ -246,7 +251,9 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
246
251
  aqua: aqua.foreground,
247
252
  teal: teal.foreground
248
253
  },
249
- ai_generated: COLORS.COLOR_NEUTRAL_900
254
+ // Dark-mode override: light text on the (now dark) AI-generated surface,
255
+ // matching the headline treatment. Light mode keeps the dark neutral.
256
+ ai_generated: COLORS.COLOR_NEUTRAL_0
250
257
  },
251
258
  icon: {
252
259
  base: COLORS.COLOR_NEUTRAL_100,
package/lib/light/theme.js CHANGED
@@ -62,7 +62,11 @@ export var colors = _objectSpread(_objectSpread({
62
62
  positive_sentiment: COLORS.COLOR_BLUE_500,
63
63
  negative_sentiment: COLORS.COLOR_RED_500,
64
64
  neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
65
- ai_generated: "var(--color-container-bg-ai-generated, ".concat(COLORS.COLOR_NEUTRAL_100, ")")
65
+ // 20% AI gradient tint composited over the themed container surface.
66
+ // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
67
+ // light/dark automatically (was previously a hardcoded, light-only value
68
+ // injected by seeds-react-theme-provider).
69
+ ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
66
70
  },
67
71
  border: {
68
72
  base: COLORS.COLOR_NEUTRAL_200,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/seeds-react-theme",
3
- "version": "4.2.0",
3
+ "version": "4.3.0",
4
4
  "description": "Seeds Theme",
5
5
  "main": "commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -23,6 +23,7 @@
23
23
  "./css/theme": "./dist/theme.css",
24
24
  "./css/theme-dark": "./dist/theme-dark.css",
25
25
  "./css/theme-all": "./dist/theme-all.css",
26
+ "./css/scrollbar": "./dist/scrollbar.css",
26
27
  "./css/tailwind-preset": "./dist/tailwind-preset.css"
27
28
  },
28
29
  "scripts": {