@sproutsocial/seeds-react-theme 4.3.0 → 4.4.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

@@ -123,6 +123,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")));

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/buildThemeSCSS.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildThemeSCSSFiles = void 0;
+var _fs = _interopRequireDefault(require("fs"));
+var _glob = require("glob");
+var _child_process = require("child_process");
+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 }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+//@ts-ignore
+var execSyncHelper = function execSyncHelper(command, extraEnv) {
+  return (0, _child_process.execSync)(command, {
+    stdio: "inherit",
+    env: Object.assign({}, process.env, extraEnv)
+  });
+};
+
+// Generate theme.scss and add a copy of _themed.scss to /dist for each theme
+var buildThemeSCSSFiles = exports.buildThemeSCSSFiles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var themeFiles;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          console.log("Building theme stylesheets");
+
+          // "types" excluded: src/types/theme.ts is a type-only file that happens to
+          // share the "theme" basename with the real theme data modules, and its
+          // compiled output has no runtime keys for json-to-scss to convert.
+          themeFiles = (0, _glob.sync)("./commonjs/**/theme.js", {
+            ignore: "commonjs/types/**"
+          });
+          themeFiles.forEach(function (fileName) {
+            var themeDistDirectory = fileName.replace("commonjs", "dist/themes").replace("/theme.js", "");
+            if (!_fs.default.existsSync(themeDistDirectory)) {
+              _fs.default.mkdirSync(themeDistDirectory, {
+                recursive: true
+              });
+            }
+            execSyncHelper("json-to-scss '".concat(fileName, "' '").concat(themeDistDirectory, "/theme.scss' --k=\"dq\""));
+            execSyncHelper("cp './src/utils/_themed.scss' '".concat(themeDistDirectory, "/_themed.scss'"));
+          });
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function buildThemeSCSSFiles() {
+    return _ref.apply(this, arguments);
+  };
+}();

package/commonjs/builders/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.filterComplexColors = filterComplexColors;
+exports.flattenBorderWidths = flattenBorderWidths;
 exports.flattenColors = flattenColors;
 exports.flattenDuration = flattenDuration;
 exports.flattenEasing = flattenEasing;
@@ -134,11 +135,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 +151,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 +167,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 +183,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 +198,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 +227,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

@@ -62,7 +62,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
       neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
       // 20% AI gradient tint over the dark container surface. Same token-driven
       // value as light mode; the referenced tokens flip per theme.
-      ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
+      // The comma-separated composed value lives in _themed.scss (see comment
+      // there) since a literal comma here breaks SCSS map parsing.
+      ai_generated: "var(--color-container-bg-ai-generated)"
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_1100,
@@ -94,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

@@ -68,10 +68,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({
       negative_sentiment: _seedsColor.default.COLOR_RED_500,
       neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
       // 20% AI gradient tint composited over the themed container surface.
-      // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
-      // light/dark automatically (was previously a hardcoded, light-only value
-      // injected by seeds-react-theme-provider).
-      ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
+      // The comma-separated composed value lives in _themed.scss (see comment
+      // there) since a literal comma here breaks SCSS map parsing.
+      ai_generated: "var(--color-container-bg-ai-generated)"
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,
@@ -106,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

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #dee1e1;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;
@@ -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;
@@ -468,6 +471,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;
@@ -508,7 +514,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #040404;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;
@@ -531,6 +537,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;
@@ -949,6 +958,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;

package/dist/theme-dark.css

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #040404;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;
@@ -50,6 +50,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;
@@ -468,6 +471,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;

package/dist/theme.css

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #dee1e1;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;
@@ -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;
@@ -468,6 +471,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;

package/dist/themes/dark/_themed.scss

@@ -7,10 +7,14 @@
 @import "./theme.scss";
 
 // CSS custom properties for values that can't be represented in SCSS maps.
-// radial-gradient + color-mix() breaks SCSS map parsing, so the theme object
-// holds a var() reference and the actual value is defined here.
+// A comma-separated CSS value (e.g. a multi-layer background) breaks SCSS map
+// parsing, since Sass reads the top-level comma as a second map value with no
+// key. So the theme object holds a single var() reference, and the composed,
+// comma-separated value is defined here instead, built from the other
+// theme-driven vars so it stays correct for light and dark automatically.
 :root {
-  --color-container-bg-ai-generated: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #6f5ed3, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%), #f3f4f4;
+  --color-container-bg-ai-generated: var(--color-gradient-ai-subtle),
+    var(--color-container-bg-base);
 }
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),

package/dist/themes/dark/theme.scss

@@ -31,7 +31,7 @@ $theme: (
         "positive_sentiment": #3876e3,
         "negative_sentiment": #f76054,
         "neutral_sentiment": #c8cccc,
-        "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+        "ai_generated": var(--color-container-bg-ai-generated)
       ),
       "border": (
         "base": #040404,
@@ -60,7 +60,10 @@ $theme: (
     ),
     "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%),
+      "ai-stop-1": #679eff,
+      "ai-stop-2": #b984ff,
+      "ai-stop-3": #f282f5
     ),
     "button": (
       "primary": (
@@ -600,7 +603,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #040404,
@@ -629,7 +632,10 @@ $theme: (
       ),
       "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%),
+        "ai-stop-1": #679eff,
+        "ai-stop-2": #b984ff,
+        "ai-stop-3": #f282f5
       ),
       "button": (
         "primary": (

package/dist/themes/extendedThemes/sproutTheme/dark/_themed.scss

@@ -7,10 +7,14 @@
 @import "./theme.scss";
 
 // CSS custom properties for values that can't be represented in SCSS maps.
-// radial-gradient + color-mix() breaks SCSS map parsing, so the theme object
-// holds a var() reference and the actual value is defined here.
+// A comma-separated CSS value (e.g. a multi-layer background) breaks SCSS map
+// parsing, since Sass reads the top-level comma as a second map value with no
+// key. So the theme object holds a single var() reference, and the composed,
+// comma-separated value is defined here instead, built from the other
+// theme-driven vars so it stays correct for light and dark automatically.
 :root {
-  --color-container-bg-ai-generated: radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #6f5ed3, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%), #f3f4f4;
+  --color-container-bg-ai-generated: var(--color-gradient-ai-subtle),
+    var(--color-container-bg-base);
 }
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),