@sproutsocial/seeds-react-theme 4.3.1 → 4.5.0

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;
@@ -421,6 +424,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;
@@ -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 #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;
@@ -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;

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

@@ -1,6 +1,11 @@
 /**
  * Build CSS custom properties (variables) from Seeds theme objects
  */
+/**
+ * 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.
+ */
+export declare function generateCombinedCSS(): string;
 /**
  * Main build function for CSS variables
  */

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;AA8JH;;;GAGG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAQ5C;AAED;;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

@@ -1,6 +1,12 @@
 /**
  * Utility functions for transforming theme objects into different formats
  */
+/**
+ * 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.
+ */
+export declare function abbreviate(key: string): string;
 /**
  * Flatten a nested object into a single-level object with kebab-case keys
  * Example: { button: { primary: { background: { base: '#fff' } } } }
@@ -25,6 +31,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;AAUH;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAE9C;AAED;;;;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

@@ -19,9 +19,16 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 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";
+// 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.
+import lightTheme from "../extendedThemes/sproutTheme/light/theme";
+import darkTheme from "../extendedThemes/sproutTheme/dark/theme";
+import { flattenColors, flattenSpacing, flattenRadii, flattenBorderWidths, flattenShadows, flattenFontWeights, flattenEasing, flattenDuration } from "./utils";
 
 /**
  * Convert a flat object into CSS custom properties
@@ -119,6 +126,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")));
@@ -139,9 +151,10 @@ 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() {
+export function generateCombinedCSS() {
   console.log("Building combined CSS with light and dark themes...");
   var lightCSS = generateCSSVariables(lightTheme, "light");
   var darkCSS = generateCSSVariables(darkTheme, "dark");

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("}");