@sproutsocial/seeds-react-theme 4.3.1 → 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/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

@@ -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;
@@ -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;
@@ -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

@@ -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

@@ -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/theme.scss

@@ -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": (
@@ -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/theme.scss

@@ -114,7 +114,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/light/theme.scss

@@ -114,7 +114,10 @@ $theme: (
       ),
       "gradient": (
         "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 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%)
+        "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-stop-1": #205bc3,
+        "ai-stop-2": #9747ff,
+        "ai-stop-3": #f282f5
       ),
       "button": (
         "primary": (

package/dist/themes/light/theme.scss

@@ -71,7 +71,10 @@ $theme: (
     ),
     "gradient": (
       "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 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%)
+      "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-stop-1": #205bc3,
+      "ai-stop-2": #9747ff,
+      "ai-stop-3": #f282f5
     ),
     "button": (
       "primary": (
@@ -640,7 +643,10 @@ $theme: (
       ),
       "gradient": (
         "ai": radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 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%)
+        "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-stop-1": #205bc3,
+        "ai-stop-2": #9747ff,
+        "ai-stop-3": #f282f5
       ),
       "button": (
         "primary": (

package/dist/types/builders/buildCSS.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AA4JH;;GAEG;AACH,wBAAsB,iBAAiB,kBAkCtC"}
+{"version":3,"file":"buildCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildCSS.ts"],"names":[],"mappings":"AAAA;;GAEG;AAoKH;;GAEG;AACH,wBAAsB,iBAAiB,kBAkCtC"}

package/dist/types/builders/buildTailwindV4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"buildTailwindV4.d.ts","sourceRoot":"","sources":["../../../src/builders/buildTailwindV4.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAUH;;GAEG;AACH,wBAAsB,qBAAqB,kBA4N1C"}
+{"version":3,"file":"buildTailwindV4.d.ts","sourceRoot":"","sources":["../../../src/builders/buildTailwindV4.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAUH;;GAEG;AACH,wBAAsB,qBAAqB,kBAgP1C"}

package/dist/types/builders/utils.d.ts

@@ -25,6 +25,10 @@ export declare function flattenTypography(typography: any): Record<string, [stri
  * Flatten radii (border radius)
  */
 export declare function flattenRadii(radii: any): Record<string, string>;
+/**
+ * Flatten border widths
+ */
+export declare function flattenBorderWidths(borderWidths: any): Record<string, string>;
 /**
  * Flatten shadows
  */

package/dist/types/builders/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/builders/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAiBH;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,GAAG,EACR,MAAM,GAAE,MAAW,EACnB,SAAS,GAAE,MAAY,GACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,GAAG,GACd,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAkBlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU/D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,GAAG,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAUjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUjE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAaxB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/builders/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAiBH;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,GAAG,EAAE,GAAG,EACR,MAAM,GAAE,MAAW,EACnB,SAAS,GAAE,MAAY,GACtB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkBxB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjE;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAYjE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,GAAG,GACd,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE;IAAE,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC,CAkBlD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAU7E;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUnE;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,GAAG,GACf,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAUjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUjE;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUrE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEpD;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAaxB"}

package/dist/types/dark/theme.d.ts

@@ -91,6 +91,9 @@ export declare const colors: {
     gradient: {
         ai: string;
         "ai-subtle": string;
+        "ai-stop-1": string;
+        "ai-stop-2": string;
+        "ai-stop-3": string;
     };
     button: {
         primary: {
@@ -662,6 +665,9 @@ declare const darkTheme: {
         gradient: {
             ai: string;
             "ai-subtle": string;
+            "ai-stop-1": string;
+            "ai-stop-2": string;
+            "ai-stop-3": string;
         };
         button: {
             primary: {

package/dist/types/dark/theme.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;YA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA5UT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;YA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAjVT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA2MrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/light/theme.d.ts

@@ -249,6 +249,9 @@ export declare const colors: {
     gradient: {
         ai: string;
         "ai-subtle": string;
+        "ai-stop-1": string;
+        "ai-stop-2": string;
+        "ai-stop-3": string;
     };
     button: {
         primary: {
@@ -923,6 +926,9 @@ declare const theme: {
         gradient: {
             ai: string;
             "ai-subtle": string;
+            "ai-stop-1": string;
+            "ai-stop-2": string;
+            "ai-stop-3": string;
         };
         button: {
             primary: {

package/dist/types/light/theme.d.ts.map

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBApeL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAkNrD,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA7eL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkNrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/builders/buildCSS.js

@@ -21,7 +21,7 @@ import fs from "fs";
 import path from "path";
 import lightTheme from "../light/theme";
 import darkTheme from "../dark/theme";
-import { flattenColors, flattenSpacing, flattenRadii, flattenShadows, flattenFontWeights, flattenEasing, flattenDuration } from "./utils";
+import { flattenColors, flattenSpacing, flattenRadii, flattenBorderWidths, flattenShadows, flattenFontWeights, flattenEasing, flattenDuration } from "./utils";
 
 /**
  * Convert a flat object into CSS custom properties
@@ -119,6 +119,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 = 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 = flattenShadows(themeObj.shadows);
   variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(shadows, "shadow")));

package/lib/builders/buildTailwindV4.js

@@ -37,7 +37,7 @@ export 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:
@@ -94,16 +94,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
@@ -149,9 +167,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("");
@@ -181,9 +199,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"));
 
@@ -212,9 +230,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/lib/builders/utils.js

@@ -118,11 +118,11 @@ export function flattenRadii(radii) {
 }
 
 /**
- * Flatten shadows
+ * Flatten border widths
  */
-export function flattenShadows(shadows) {
+export 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];
@@ -134,15 +134,15 @@ export function flattenShadows(shadows) {
 }
 
 /**
- * Flatten font weights
+ * Flatten shadows
  */
-export function flattenFontWeights(fontWeights) {
+export 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;
     }
   }
@@ -150,15 +150,15 @@ export function flattenFontWeights(fontWeights) {
 }
 
 /**
- * Flatten easing (transition timing functions)
+ * Flatten font weights
  */
-export function flattenEasing(easing) {
+export 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;
     }
   }
@@ -166,11 +166,11 @@ export function flattenEasing(easing) {
 }
 
 /**
- * Flatten duration (transition durations)
+ * Flatten easing (transition timing functions)
  */
-export function flattenDuration(duration) {
+export 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];
@@ -181,6 +181,22 @@ export function flattenDuration(duration) {
   return flattened;
 }
 
+/**
+ * Flatten duration (transition durations)
+ */
+export 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
@@ -194,10 +210,10 @@ export function isSimpleColor(value) {
  */
 export 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/lib/dark/theme.js

@@ -91,7 +91,12 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
   // 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/lib/light/theme.js

@@ -100,7 +100,16 @@ export var 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Seeds Theme",
   "main": "commonjs/index.js",
   "module": "lib/index.js",