@sproutsocial/seeds-react-theme 4.3.1 → 4.5.0

package/README.md

@@ -26,8 +26,8 @@ yarn add @sproutsocial/seeds-react-theme
 ### React (styled-components)
 
 ```jsx
-import { ThemeProvider } from 'styled-components';
-import theme from '@sproutsocial/seeds-react-theme';
+import { ThemeProvider } from "styled-components";
+import theme from "@sproutsocial/seeds-react-theme";
 
 function App() {
   return (
@@ -47,11 +47,9 @@ See [MULTI_FRAMEWORK_GUIDE.md](./MULTI_FRAMEWORK_GUIDE.md) for complete document
 ```javascript
 // tailwind.config.js
 module.exports = {
-  presets: [
-    require('@sproutsocial/seeds-react-theme/dist/tailwind-preset'),
-  ],
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
-}
+  presets: [require("@sproutsocial/seeds-react-theme/dist/tailwind-preset")],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+};
 ```
 
 ```jsx
@@ -63,14 +61,19 @@ module.exports = {
 ### CSS Custom Properties
 
 ```html
-<link rel="stylesheet" href="node_modules/@sproutsocial/seeds-react-theme/dist/theme.css">
+<link
+  rel="stylesheet"
+  href="node_modules/@sproutsocial/seeds-react-theme/dist/theme.css"
+/>
 
-<button style="
+<button
+  style="
   background: var(--color-button-primary-bg-base);
   color: var(--color-button-primary-text-base);
   padding: var(--space-400);
   border-radius: var(--radius-500);
-">
+"
+>
   Primary Button
 </button>
 ```
@@ -109,9 +112,9 @@ Use the dark mode preset:
 ```javascript
 module.exports = {
   presets: [
-    require('@sproutsocial/seeds-react-theme/dist/tailwind-preset-dark'),
+    require("@sproutsocial/seeds-react-theme/dist/tailwind-preset-dark"),
   ],
-}
+};
 ```
 
 ### CSS Variables
@@ -128,15 +131,16 @@ Toggle with JavaScript:
 
 ```javascript
 // Enable dark mode
-document.documentElement.setAttribute('data-theme', 'dark');
+document.documentElement.setAttribute("data-theme", "dark");
 
 // Disable dark mode
-document.documentElement.removeAttribute('data-theme');
+document.documentElement.removeAttribute("data-theme");
 ```
 
 ## Available Tokens
 
 ### Colors
+
 - Button colors (primary, secondary, destructive, etc.)
 - Text colors (headline, body, subtext, inverse)
 - Link colors
@@ -145,14 +149,17 @@ document.documentElement.removeAttribute('data-theme');
 - Icon colors
 
 ### Spacing
+
 - `0`, `100`, `200`, `300`, `350`, `400`, `450`, `500`, `600`
 
 ### Typography
+
 - Font sizes and line heights (`100` - `1200`)
 - Font families
 - Font weights (normal, semibold, bold, extrabold)
 
 ### Other
+
 - Border radius values
 - Box shadows
 - Motion (easing, duration)

package/commonjs/builders/buildCSS.js

@@ -4,10 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildCSSVariables = buildCSSVariables;
+exports.generateCombinedCSS = generateCombinedCSS;
 var _fs = _interopRequireDefault(require("fs"));
 var _path = _interopRequireDefault(require("path"));
-var _theme = _interopRequireDefault(require("../light/theme"));
-var _theme2 = _interopRequireDefault(require("../dark/theme"));
+var _theme = _interopRequireDefault(require("../extendedThemes/sproutTheme/light/theme"));
+var _theme2 = _interopRequireDefault(require("../extendedThemes/sproutTheme/dark/theme"));
 var _utils = require("./utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
@@ -26,7 +27,13 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /**
  * Build CSS custom properties (variables) from Seeds theme objects
- */
+ */ // Source the full production theme (base + extended sproutTheme namespaces:
+// growth, ai, navigation, datePicker, analytics, listening, cardControl, tags),
+// not the base theme alone. The styled-system shim resolves color props to
+// var(--color-...) references and is theme-agnostic, so every namespace must
+// have a real CSS var wherever the shim runs. Both sprout themes spread the
+// base theme, so all non-color fields (space, typography, radii, ...) are
+// unchanged and base color tokens keep identical values.
 /**
  * Convert a flat object into CSS custom properties
  */
@@ -123,6 +130,11 @@ function generateCSSVariables(themeObj, mode) {
   variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(radii, "radius")));
   console.log("  - Mapped ".concat(Object.keys(radii).length, " border radius values"));
 
+  // Border width
+  var borderWidths = (0, _utils.flattenBorderWidths)(themeObj.borderWidths);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(borderWidths, "border-width")));
+  console.log("  - Mapped ".concat(Object.keys(borderWidths).length, " border width values"));
+
   // Shadows
   var shadows = (0, _utils.flattenShadows)(themeObj.shadows);
   variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(shadows, "shadow")));
@@ -143,7 +155,8 @@ function generateCSSVariables(themeObj, mode) {
 }
 
 /**
- * Build a combined CSS file with both light and dark themes
+ * Build a combined CSS file with both light and dark themes. Exported so tests
+ * can assert the source theme (extended sproutTheme) actually feeds the output.
  */
 function generateCombinedCSS() {
   console.log("Building combined CSS with light and dark themes...");

package/commonjs/builders/buildTailwindV4.js

@@ -42,7 +42,7 @@ function buildTailwindV4Preset() {
 }
 function _buildTailwindV4Preset() {
   _buildTailwindV4Preset = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-    var distDir, lines, spacingMap, _i, _Object$entries, _Object$entries$_i, key, value, radiusMap, _i2, _Object$entries2, _Object$entries2$_i, _key, _value, typographyScales, _i3, _typographyScales, scale, _key2, val, buttonColors, _i4, _Object$entries3, _Object$entries3$_i, _key3, _value2, semanticColors, _i5, _Object$entries4, _Object$entries4$_i, _key4, _value3, darkButtonColors, _i6, _Object$entries5, _Object$entries5$_i, _key5, _value4, css, outPath;
+    var distDir, lines, spacingMap, _i, _Object$entries, _Object$entries$_i, key, value, radiusMap, _i2, _Object$entries2, _Object$entries2$_i, _key, _value, borderWidthMap, _i3, _Object$entries3, _Object$entries3$_i, _key2, _value2, typographyScales, _i4, _typographyScales, scale, _key3, val, buttonColors, _i5, _Object$entries4, _Object$entries4$_i, _key4, _value3, semanticColors, _i6, _Object$entries5, _Object$entries5$_i, _key5, _value4, darkButtonColors, _i7, _Object$entries6, _Object$entries6$_i, _key6, _value5, css, outPath;
     return _regenerator().w(function (_context) {
       while (1) switch (_context.n) {
         case 0:
@@ -99,16 +99,34 @@ function _buildTailwindV4Preset() {
           console.log("  - Mapped ".concat(Object.keys(radiusMap).length, " border radius tokens"));
           lines.push("");
 
+          // -------------------------------------------------------------------------
+          // Border width — from @sproutsocial/seeds-border
+          // Seeds' own `border-w-{key}` utility (not Tailwind's numeric border-<n>
+          // scale) — see seeds-react-system-props/src/scales.ts SCALE_PROPS.borderWidth
+          // -------------------------------------------------------------------------
+          lines.push("  /* Border width — from @sproutsocial/seeds-border */");
+          borderWidthMap = {
+            500: BORDER.BORDER_WIDTH_500,
+            600: BORDER.BORDER_WIDTH_600,
+            700: BORDER.BORDER_WIDTH_700
+          };
+          for (_i3 = 0, _Object$entries3 = Object.entries(borderWidthMap); _i3 < _Object$entries3.length; _i3++) {
+            _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2), _key2 = _Object$entries3$_i[0], _value2 = _Object$entries3$_i[1];
+            lines.push("  --border-width-".concat(_key2, ": ").concat(_value2, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(borderWidthMap).length, " border width tokens"));
+          lines.push("");
+
           // -------------------------------------------------------------------------
           // Font size — from @sproutsocial/seeds-typography
           // Tailwind v4: --text-{key}--font-size + --text-{key}--line-height → text-{key}
           // -------------------------------------------------------------------------
           lines.push("  /* Font size — from @sproutsocial/seeds-typography */");
           typographyScales = [100, 200, 300, 400, 500, 600, 700];
-          for (_i3 = 0, _typographyScales = typographyScales; _i3 < _typographyScales.length; _i3++) {
-            scale = _typographyScales[_i3];
-            _key2 = "TYPOGRAPHY_SIZE_".concat(scale);
-            val = TYPOGRAPHY[_key2];
+          for (_i4 = 0, _typographyScales = typographyScales; _i4 < _typographyScales.length; _i4++) {
+            scale = _typographyScales[_i4];
+            _key3 = "TYPOGRAPHY_SIZE_".concat(scale);
+            val = TYPOGRAPHY[_key3];
             if (val && val.fontSize && val.lineHeight) {
               // Tailwind v4 uses --text-*--font-size and --text-*--line-height for
               // the two-value tuple equivalent
@@ -154,9 +172,9 @@ function _buildTailwindV4Preset() {
             "color-button-placeholder-text-hover": COLORS.COLOR_BLUE_800,
             "color-button-placeholder-border-base": COLORS.COLOR_NEUTRAL_500
           };
-          for (_i4 = 0, _Object$entries3 = Object.entries(buttonColors); _i4 < _Object$entries3.length; _i4++) {
-            _Object$entries3$_i = _slicedToArray(_Object$entries3[_i4], 2), _key3 = _Object$entries3$_i[0], _value2 = _Object$entries3$_i[1];
-            lines.push("  --".concat(_key3, ": ").concat(_value2, ";"));
+          for (_i5 = 0, _Object$entries4 = Object.entries(buttonColors); _i5 < _Object$entries4.length; _i5++) {
+            _Object$entries4$_i = _slicedToArray(_Object$entries4[_i5], 2), _key4 = _Object$entries4$_i[0], _value3 = _Object$entries4$_i[1];
+            lines.push("  --".concat(_key4, ": ").concat(_value3, ";"));
           }
           console.log("  - Mapped ".concat(Object.keys(buttonColors).length, " button color tokens"));
           lines.push("");
@@ -186,9 +204,9 @@ function _buildTailwindV4Preset() {
             "color-form-border-selected": "var(--color-form-border-selected)",
             "color-form-placeholder-base": "var(--color-form-placeholder-base)"
           };
-          for (_i5 = 0, _Object$entries4 = Object.entries(semanticColors); _i5 < _Object$entries4.length; _i5++) {
-            _Object$entries4$_i = _slicedToArray(_Object$entries4[_i5], 2), _key4 = _Object$entries4$_i[0], _value3 = _Object$entries4$_i[1];
-            lines.push("  --".concat(_key4, ": ").concat(_value3, ";"));
+          for (_i6 = 0, _Object$entries5 = Object.entries(semanticColors); _i6 < _Object$entries5.length; _i6++) {
+            _Object$entries5$_i = _slicedToArray(_Object$entries5[_i6], 2), _key5 = _Object$entries5$_i[0], _value4 = _Object$entries5$_i[1];
+            lines.push("  --".concat(_key5, ": ").concat(_value4, ";"));
           }
           console.log("  - Mapped ".concat(Object.keys(semanticColors).length, " semantic color tokens"));
 
@@ -217,9 +235,9 @@ function _buildTailwindV4Preset() {
             "color-button-placeholder-text-base-dark": COLORS.COLOR_BLUE_400,
             "color-button-placeholder-text-hover-dark": COLORS.COLOR_BLUE_300
           };
-          for (_i6 = 0, _Object$entries5 = Object.entries(darkButtonColors); _i6 < _Object$entries5.length; _i6++) {
-            _Object$entries5$_i = _slicedToArray(_Object$entries5[_i6], 2), _key5 = _Object$entries5$_i[0], _value4 = _Object$entries5$_i[1];
-            lines.push("  --".concat(_key5, ": ").concat(_value4, ";"));
+          for (_i7 = 0, _Object$entries6 = Object.entries(darkButtonColors); _i7 < _Object$entries6.length; _i7++) {
+            _Object$entries6$_i = _slicedToArray(_Object$entries6[_i7], 2), _key6 = _Object$entries6$_i[0], _value5 = _Object$entries6$_i[1];
+            lines.push("  --".concat(_key6, ": ").concat(_value5, ";"));
           }
           console.log("  - Mapped ".concat(Object.keys(darkButtonColors).length, " dark mode button color tokens"));
           lines.push("}");

package/commonjs/builders/utils.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.abbreviate = abbreviate;
 exports.filterComplexColors = filterComplexColors;
+exports.flattenBorderWidths = flattenBorderWidths;
 exports.flattenColors = flattenColors;
 exports.flattenDuration = flattenDuration;
 exports.flattenEasing = flattenEasing;
@@ -38,7 +40,9 @@ var ABBREVIATIONS = {
 };
 
 /**
- * Apply abbreviation rules to a key
+ * Apply abbreviation rules to a single token-path segment. Shared by the CSS
+ * var generator (`flattenObject`) and the seeds-react-system-props shim's
+ * color-prop fallback, so the `--color-*` names each side produces can't drift.
  */
 function abbreviate(key) {
   return ABBREVIATIONS[key] || key;
@@ -134,11 +138,11 @@ function flattenRadii(radii) {
 }
 
 /**
- * Flatten shadows
+ * Flatten border widths
  */
-function flattenShadows(shadows) {
+function flattenBorderWidths(borderWidths) {
   var flattened = {};
-  for (var _i5 = 0, _Object$entries5 = Object.entries(shadows); _i5 < _Object$entries5.length; _i5++) {
+  for (var _i5 = 0, _Object$entries5 = Object.entries(borderWidths); _i5 < _Object$entries5.length; _i5++) {
     var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i5], 2),
       key = _Object$entries5$_i[0],
       value = _Object$entries5$_i[1];
@@ -150,15 +154,15 @@ function flattenShadows(shadows) {
 }
 
 /**
- * Flatten font weights
+ * Flatten shadows
  */
-function flattenFontWeights(fontWeights) {
+function flattenShadows(shadows) {
   var flattened = {};
-  for (var _i6 = 0, _Object$entries6 = Object.entries(fontWeights); _i6 < _Object$entries6.length; _i6++) {
+  for (var _i6 = 0, _Object$entries6 = Object.entries(shadows); _i6 < _Object$entries6.length; _i6++) {
     var _Object$entries6$_i = _slicedToArray(_Object$entries6[_i6], 2),
       key = _Object$entries6$_i[0],
       value = _Object$entries6$_i[1];
-    if (typeof value === "string" || typeof value === "number") {
+    if (typeof value === "string") {
       flattened[key] = value;
     }
   }
@@ -166,15 +170,15 @@ function flattenFontWeights(fontWeights) {
 }
 
 /**
- * Flatten easing (transition timing functions)
+ * Flatten font weights
  */
-function flattenEasing(easing) {
+function flattenFontWeights(fontWeights) {
   var flattened = {};
-  for (var _i7 = 0, _Object$entries7 = Object.entries(easing); _i7 < _Object$entries7.length; _i7++) {
+  for (var _i7 = 0, _Object$entries7 = Object.entries(fontWeights); _i7 < _Object$entries7.length; _i7++) {
     var _Object$entries7$_i = _slicedToArray(_Object$entries7[_i7], 2),
       key = _Object$entries7$_i[0],
       value = _Object$entries7$_i[1];
-    if (typeof value === "string") {
+    if (typeof value === "string" || typeof value === "number") {
       flattened[key] = value;
     }
   }
@@ -182,11 +186,11 @@ function flattenEasing(easing) {
 }
 
 /**
- * Flatten duration (transition durations)
+ * Flatten easing (transition timing functions)
  */
-function flattenDuration(duration) {
+function flattenEasing(easing) {
   var flattened = {};
-  for (var _i8 = 0, _Object$entries8 = Object.entries(duration); _i8 < _Object$entries8.length; _i8++) {
+  for (var _i8 = 0, _Object$entries8 = Object.entries(easing); _i8 < _Object$entries8.length; _i8++) {
     var _Object$entries8$_i = _slicedToArray(_Object$entries8[_i8], 2),
       key = _Object$entries8$_i[0],
       value = _Object$entries8$_i[1];
@@ -197,6 +201,22 @@ function flattenDuration(duration) {
   return flattened;
 }
 
+/**
+ * Flatten duration (transition durations)
+ */
+function flattenDuration(duration) {
+  var flattened = {};
+  for (var _i9 = 0, _Object$entries9 = Object.entries(duration); _i9 < _Object$entries9.length; _i9++) {
+    var _Object$entries9$_i = _slicedToArray(_Object$entries9[_i9], 2),
+      key = _Object$entries9$_i[0],
+      value = _Object$entries9$_i[1];
+    if (typeof value === "string") {
+      flattened[key] = value;
+    }
+  }
+  return flattened;
+}
+
 /**
  * Check if a value is a valid CSS color
  * Filters out complex values like color-mix() which may not work everywhere
@@ -210,10 +230,10 @@ function isSimpleColor(value) {
  */
 function filterComplexColors(colors) {
   var filtered = {};
-  for (var _i9 = 0, _Object$entries9 = Object.entries(colors); _i9 < _Object$entries9.length; _i9++) {
-    var _Object$entries9$_i = _slicedToArray(_Object$entries9[_i9], 2),
-      key = _Object$entries9$_i[0],
-      value = _Object$entries9$_i[1];
+  for (var _i0 = 0, _Object$entries0 = Object.entries(colors); _i0 < _Object$entries0.length; _i0++) {
+    var _Object$entries0$_i = _slicedToArray(_Object$entries0[_i0], 2),
+      key = _Object$entries0$_i[0],
+      value = _Object$entries0$_i[1];
     if (isSimpleColor(value)) {
       filtered[key] = value;
     } else {

package/commonjs/dark/theme.js

@@ -96,7 +96,12 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
   // contrast against the dark surface (Figma Sprout Variables, "Trellis" dark).
   gradient: {
     ai: "radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%)",
-    "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%)"
+    "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%)",
+    // Discrete stops for SVG paint servers — see the light theme for why these
+    // exist alongside the composed gradient strings.
+    "ai-stop-1": "#679eff",
+    "ai-stop-2": "#b984ff",
+    "ai-stop-3": "#f282f5"
   },
   button: {
     primary: {

package/commonjs/light/theme.js

@@ -105,7 +105,16 @@ var colors = exports.colors = _objectSpread(_objectSpread({
     ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
     // 20% tint — AI secondary (composited over a white base in CSS).
     // Kebab key so it flattens to --color-gradient-ai-subtle.
-    "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%)"
+    "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%)",
+    // The same three stops as discrete colors, flattening to
+    // --color-gradient-ai-stop-{1,2,3}. SVG needs a real <radialGradient> with
+    // separate <stop> elements to use as a paint server, and a CSS
+    // radial-gradient() string can't be decomposed back into stops. Consumed by
+    // seeds-react-icon's gradient defs (see icon.css) so gradient-filled icons
+    // pick up dark mode through the usual .dark variable swap.
+    "ai-stop-1": "#205bc3",
+    "ai-stop-2": "#9747ff",
+    "ai-stop-3": "#f282f5"
   },
   button: {
     primary: {

package/dist/tailwind-preset.css

@@ -32,6 +32,11 @@
   --radius-inner: 4px;
   --radius-outer: 8px;
 
+  /* Border width — from @sproutsocial/seeds-border */
+  --border-width-500: 1px;
+  --border-width-600: 2px;
+  --border-width-700: 3px;
+
   /* Font size — from @sproutsocial/seeds-typography */
   --text-100--font-size: 11px;
   --text-100--line-height: 18.666666666666668px;

package/dist/theme-all.css

@@ -50,6 +50,9 @@
   --color-container-border-ai_generated: #6f5ed3;
   --color-gradient-ai: radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%);
   --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%);
+  --color-gradient-ai-stop-1: #205bc3;
+  --color-gradient-ai-stop-2: #9747ff;
+  --color-gradient-ai-stop-3: #f282f5;
   --color-button-primary-bg-base: #205bc3;
   --color-button-primary-bg-hover: #1150aa;
   --color-button-primary-bg-active: #0c3f89;
@@ -421,6 +424,94 @@
   --color-DATAVIZ_COLORS_MAP-19: #0ca750;
   --color-DATAVIZ_COLORS_MAP-20: #ba7506;
   --color-PLACEHOLDER: #c8cccc;
+  --color-ai-feature-decorative-primary: #067c7c;
+  --color-ai-feature-decorative-secondary: #0c3f89;
+  --color-ai-feature-bg-primary: #067c7c;
+  --color-ai-feature-bg-secondary: #0c3f89;
+  --color-ai-feature-bg-default-primary: #067c7c;
+  --color-ai-feature-bg-default-secondary: #0c3f89;
+  --color-ai-feature-bg-inverse-primary: #cdf7ef;
+  --color-ai-feature-bg-inverse-secondary: #c7dbf9;
+  --color-navigation-main-bg-base: #273333;
+  --color-navigation-main-bg-overflowGradient: #162020;
+  --color-navigation-main-border-base: #162020;
+  --color-navigation-secondary-bg-base: #364141;
+  --color-navigation-secondary-widget-bg-base: #162020;
+  --color-navigation-secondary-accordion-bg-base: #273333;
+  --color-navigation-settings-listItem-bg-base: transparent;
+  --color-navigation-settings-listItem-bg-hover: #dee1e1;
+  --color-navigation-settings-listItem-bg-selected: #FFFFFF;
+  --color-navigation-text-base: #FFFFFF;
+  --color-navigation-text-hover: #FFFFFF;
+  --color-navigation-icon-base: #FFFFFF;
+  --color-navigation-icon-hover: #FFFFFF;
+  --color-navigation-listItem-bg-base: #364141;
+  --color-navigation-listItem-bg-hover: #162020;
+  --color-navigation-listItem-bg-selected: #515e5f;
+  --color-datePicker-comparison-bg-base: #b0b6b7;
+  --color-datePicker-comparison-text-base: #364141;
+  --color-analytics-trend-positive: #067c7c;
+  --color-analytics-trend-neutral: #364141;
+  --color-analytics-trend-negative: #364141;
+  --color-analytics-overlay-bg-base: color-mix(in srgb, #FFFFFF, transparent 20%);
+  --color-listening-chart-indicator-default-primary: #b0b6b7;
+  --color-listening-chart-indicator-default-secondary: #FFFFFF;
+  --color-listening-chart-indicator-hover-primary: #162020;
+  --color-listening-chart-indicator-hover-secondary: #FFFFFF;
+  --color-listening-chart-spike-bg-base: #08c4b2;
+  --color-listening-chart-spike-icon-base: #FFFFFF;
+  --color-listening-topicTypes-customTopic: #679eff;
+  --color-listening-topicTypes-brandHealth: #ff7f6e;
+  --color-listening-topicTypes-industryInsights: #75dd66;
+  --color-listening-topicTypes-competitiveAnalysis: #ffd943;
+  --color-listening-topicTypes-campaignAnalysis: #f282f5;
+  --color-listening-topicTypes-eventMonitoring: #33d6e2;
+  --color-listening-topicTypes-featuredTopic: #75dd66;
+  --color-listening-worldMap-empty: #dee1e1;
+  --color-listening-worldMap-q0: #d8d7f9;
+  --color-listening-worldMap-q1: #c1c1f7;
+  --color-listening-worldMap-q2: #a193f2;
+  --color-listening-worldMap-q3: #9180f4;
+  --color-listening-worldMap-q4: #816fea;
+  --color-listening-worldMap-q5: #6f5ed3;
+  --color-listening-worldMap-q6: #5e4eba;
+  --color-listening-worldMap-q7: #483a9c;
+  --color-growth-carousel-indicator-active: #2b68d3;
+  --color-growth-carousel-indicator-inactive: #c8cccc;
+  --color-growth-education-decorative-aqua: #0797ae;
+  --color-growth-education-decorative-teal: #0b968f;
+  --color-growth-opportunity-bg-base: #6f5ed3;
+  --color-growth-opportunity-bg-secondary: #273333;
+  --color-growth-opportunity-bg-hover: #c1c1f7;
+  --color-growth-opportunity-button-primary-base: #6f5ed3;
+  --color-growth-opportunity-button-primary-hover: #5e4eba;
+  --color-growth-opportunity-badge-bg-base: #d8d7f9;
+  --color-growth-opportunity-badge-bg-active: #5e4eba;
+  --color-growth-opportunity-badge-icon-base: #6f5ed3;
+  --color-growth-opportunity-badge-icon-active: #eaeaf9;
+  --color-growth-opportunity-badge-text-base: #6f5ed3;
+  --color-growth-opportunity-decorative-green: #0ca750;
+  --color-growth-opportunity-decorative-lightAqua: #0797ae;
+  --color-growth-opportunity-decorative-darkAqua: #002838;
+  --color-growth-opportunity-decorative-purple: #6f5ed3;
+  --color-growth-featuredDemo-bg-primary-base: #205bc3;
+  --color-growth-featuredDemo-bg-primary-hover: #0c3f89;
+  --color-growth-featuredDemo-bg-secondary-base: #5e4eba;
+  --color-growth-featuredDemo-bg-secondary-hover: #5e4eba;
+  --color-growth-darkModal-bg-base: #002838;
+  --color-growth-darkModal-text-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-hover: #eaeaf9;
+  --color-growth-darkModal-cards-text-base: #364141;
+  --color-growth-darkModal-cards-text-hover: #273333;
+  --color-growth-darkModal-cards-border-base: #FFFFFF;
+  --color-growth-darkModal-cards-border-hover: #6f5ed3;
+  --color-growth-user-status-online: #0ca750;
+  --color-cardControl-bg-base: #FFFFFF;
+  --color-cardControl-bg-selected: #364141;
+  --color-cardControl-bg-hover: #f3f4f4;
+  --color-cardControl-text-selected: #FFFFFF;
+  --color-tags-collections-bg-base: #f3f4f4;
   --space-0: 0px;
   --space-100: 2px;
   --space-200: 4px;
@@ -468,6 +559,9 @@
   --radius-inner: 6px;
   --radius-outer: 8px;
   --radius-pill: 999999px;
+  --border-width-500: 1px;
+  --border-width-600: 2px;
+  --border-width-700: 3px;
   --shadow-low: 0px 2px 4px #2733333D;
   --shadow-medium: 0px 8px 16px #2733333D;
   --shadow-high: 0px 16px 32px #2733333D;
@@ -531,6 +625,9 @@
   --color-container-border-ai_generated: #6f5ed3;
   --color-gradient-ai: radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%);
   --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%);
+  --color-gradient-ai-stop-1: #679eff;
+  --color-gradient-ai-stop-2: #b984ff;
+  --color-gradient-ai-stop-3: #f282f5;
   --color-button-primary-bg-base: #679eff;
   --color-button-primary-bg-hover: #a1c2f8;
   --color-button-primary-bg-active: #c7dbf9;
@@ -902,6 +999,94 @@
   --color-DATAVIZ_COLORS_MAP-19: #c2f2bd;
   --color-DATAVIZ_COLORS_MAP-20: #ffe99a;
   --color-PLACEHOLDER: #364141;
+  --color-navigation-main-bg-base: #162020;
+  --color-navigation-main-bg-overflowGradient: #040404;
+  --color-navigation-main-border-base: #040404;
+  --color-navigation-secondary-bg-base: #273333;
+  --color-navigation-secondary-widget-bg-base: #364141;
+  --color-navigation-secondary-accordion-bg-base: #162020A3;
+  --color-navigation-settings-listItem-bg-base: transparent;
+  --color-navigation-settings-listItem-bg-hover: #040404;
+  --color-navigation-settings-listItem-bg-selected: #364141;
+  --color-navigation-text-base: #FFFFFF;
+  --color-navigation-text-hover: #FFFFFF;
+  --color-navigation-icon-base: #FFFFFF;
+  --color-navigation-icon-hover: #FFFFFF;
+  --color-navigation-listItem-bg-base: #162020;
+  --color-navigation-listItem-bg-hover: #040404;
+  --color-navigation-listItem-bg-selected: #515e5f;
+  --color-datePicker-comparison-bg-base: #b0b6b7;
+  --color-datePicker-comparison-text-base: #364141;
+  --color-ai-feature-decorative-primary: #067c7c;
+  --color-ai-feature-decorative-secondary: #0c3f89;
+  --color-ai-feature-bg-primary: #cdf7ef;
+  --color-ai-feature-bg-secondary: #c7dbf9;
+  --color-ai-feature-bg-default-primary: #cdf7ef;
+  --color-ai-feature-bg-default-secondary: #c7dbf9;
+  --color-ai-feature-bg-inverse-primary: #067c7c;
+  --color-ai-feature-bg-inverse-secondary: #0c3f89;
+  --color-analytics-trend-positive: #08c4b2;
+  --color-analytics-trend-neutral: #f3f4f4;
+  --color-analytics-trend-negative: #f3f4f4;
+  --color-analytics-overlay-bg-base: color-mix(in srgb, #273333, transparent 20%);
+  --color-listening-chart-indicator-default-primary: #f3f4f4;
+  --color-listening-chart-indicator-default-secondary: #273333;
+  --color-listening-chart-indicator-hover-primary: #c8cccc;
+  --color-listening-chart-indicator-hover-secondary: #FFFFFF;
+  --color-listening-chart-spike-bg-base: #08c4b2;
+  --color-listening-chart-spike-icon-base: #FFFFFF;
+  --color-listening-topicTypes-customTopic: #24e0c5;
+  --color-listening-topicTypes-brandHealth: #ff7f6e;
+  --color-listening-topicTypes-industryInsights: #75dd66;
+  --color-listening-topicTypes-competitiveAnalysis: #ffd943;
+  --color-listening-topicTypes-campaignAnalysis: #f282f5;
+  --color-listening-topicTypes-eventMonitoring: #33d6e2;
+  --color-listening-topicTypes-featuredTopic: #75dd66;
+  --color-listening-worldMap-empty: #dee1e1;
+  --color-listening-worldMap-q0: #d8d7f9;
+  --color-listening-worldMap-q1: #c1c1f7;
+  --color-listening-worldMap-q2: #a193f2;
+  --color-listening-worldMap-q3: #9180f4;
+  --color-listening-worldMap-q4: #816fea;
+  --color-listening-worldMap-q5: #6f5ed3;
+  --color-listening-worldMap-q6: #5e4eba;
+  --color-listening-worldMap-q7: #483a9c;
+  --color-growth-carousel-indicator-active: #2b68d3;
+  --color-growth-carousel-indicator-inactive: #c8cccc;
+  --color-growth-education-decorative-aqua: #0797ae;
+  --color-growth-education-decorative-teal: #08c4b2;
+  --color-growth-opportunity-bg-base: #6f5ed3;
+  --color-growth-opportunity-bg-secondary: #515e5f;
+  --color-growth-opportunity-bg-hover: #9180f4;
+  --color-growth-opportunity-button-primary-base: #a193f2;
+  --color-growth-opportunity-button-primary-hover: #c1c1f7;
+  --color-growth-opportunity-badge-bg-base: #6f5ed3;
+  --color-growth-opportunity-badge-bg-active: #eaeaf9;
+  --color-growth-opportunity-badge-icon-base: #d8d7f9;
+  --color-growth-opportunity-badge-icon-active: #5e4eba;
+  --color-growth-opportunity-badge-text-base: #d8d7f9;
+  --color-growth-opportunity-decorative-green: #0ca750;
+  --color-growth-opportunity-decorative-lightAqua: #0797ae;
+  --color-growth-opportunity-decorative-darkAqua: #002838;
+  --color-growth-opportunity-decorative-purple: #6f5ed3;
+  --color-growth-featuredDemo-bg-primary-base: #679eff;
+  --color-growth-featuredDemo-bg-primary-hover: #deebfe;
+  --color-growth-featuredDemo-bg-secondary-base: #9180f4;
+  --color-growth-featuredDemo-bg-secondary-hover: #eaeaf9;
+  --color-growth-darkModal-bg-base: #002838;
+  --color-growth-darkModal-text-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-base: #FFFFFF;
+  --color-growth-darkModal-cards-bg-hover: #eaeaf9;
+  --color-growth-darkModal-cards-text-base: #364141;
+  --color-growth-darkModal-cards-text-hover: #273333;
+  --color-growth-darkModal-cards-border-base: #FFFFFF;
+  --color-growth-darkModal-cards-border-hover: #6f5ed3;
+  --color-growth-user-status-online: #0ca750;
+  --color-cardControl-bg-base: #273333;
+  --color-cardControl-bg-selected: #515e5f;
+  --color-cardControl-bg-hover: #364141;
+  --color-cardControl-text-selected: #f3f4f4;
+  --color-tags-collections-bg-base: #364141;
   --space-0: 0px;
   --space-100: 2px;
   --space-200: 4px;
@@ -949,6 +1134,9 @@
   --radius-inner: 6px;
   --radius-outer: 8px;
   --radius-pill: 999999px;
+  --border-width-500: 1px;
+  --border-width-600: 2px;
+  --border-width-700: 3px;
   --shadow-low: 0px 2px 4px #040404FF;
   --shadow-medium: 0px 8px 16px #040404FF;
   --shadow-high: 0px 16px 32px #040404FF;