@sproutsocial/seeds-react-theme 4.3.0 → 4.4.0

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

@@ -85,7 +85,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #040404,
@@ -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/_themed.scss

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

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -85,7 +85,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #dee1e1,
@@ -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/_themed.scss

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

package/dist/themes/light/theme.scss

@@ -42,7 +42,7 @@ $theme: (
         "positive_sentiment": #3876e3,
         "negative_sentiment": #f76054,
         "neutral_sentiment": #c8cccc,
-        "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+        "ai_generated": var(--color-container-bg-ai-generated)
       ),
       "border": (
         "base": #dee1e1,
@@ -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": (
@@ -611,7 +614,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #dee1e1,
@@ -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/buildThemeSCSS.d.ts

@@ -0,0 +1,2 @@
+export declare const buildThemeSCSSFiles: () => Promise<void>;
+//# sourceMappingURL=buildThemeSCSS.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"buildThemeSCSS.d.ts","sourceRoot":"","sources":["../../../src/builders/buildThemeSCSS.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,mBAAmB,qBA2B/B,CAAC"}

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;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA3UT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,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;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAteL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"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/buildThemeSCSS.js

@@ -0,0 +1,50 @@
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+import fs from "fs";
+import { sync as globSync } from "glob";
+import { execSync } from "child_process";
+
+//@ts-ignore
+var execSyncHelper = function execSyncHelper(command, extraEnv) {
+  return execSync(command, {
+    stdio: "inherit",
+    env: Object.assign({}, process.env, extraEnv)
+  });
+};
+
+// Generate theme.scss and add a copy of _themed.scss to /dist for each theme
+export var buildThemeSCSSFiles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var themeFiles;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          console.log("Building theme stylesheets");
+
+          // "types" excluded: src/types/theme.ts is a type-only file that happens to
+          // share the "theme" basename with the real theme data modules, and its
+          // compiled output has no runtime keys for json-to-scss to convert.
+          themeFiles = globSync("./commonjs/**/theme.js", {
+            ignore: "commonjs/types/**"
+          });
+          themeFiles.forEach(function (fileName) {
+            var themeDistDirectory = fileName.replace("commonjs", "dist/themes").replace("/theme.js", "");
+            if (!fs.existsSync(themeDistDirectory)) {
+              fs.mkdirSync(themeDistDirectory, {
+                recursive: true
+              });
+            }
+            execSyncHelper("json-to-scss '".concat(fileName, "' '").concat(themeDistDirectory, "/theme.scss' --k=\"dq\""));
+            execSyncHelper("cp './src/utils/_themed.scss' '".concat(themeDistDirectory, "/_themed.scss'"));
+          });
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function buildThemeSCSSFiles() {
+    return _ref.apply(this, arguments);
+  };
+}();

package/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

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

@@ -63,10 +63,9 @@ export var colors = _objectSpread(_objectSpread({
       negative_sentiment: COLORS.COLOR_RED_500,
       neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
       // 20% AI gradient tint composited over the themed container surface.
-      // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
-      // light/dark automatically (was previously a hardcoded, light-only value
-      // injected by seeds-react-theme-provider).
-      ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
+      // The comma-separated composed value lives in _themed.scss (see comment
+      // there) since a literal comma here breaks SCSS map parsing.
+      ai_generated: "var(--color-container-bg-ai-generated)"
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,
@@ -101,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.0",
+  "version": "4.4.0",
   "description": "Seeds Theme",
   "main": "commonjs/index.js",
   "module": "lib/index.js",
@@ -32,7 +32,9 @@
     "build:css": "tsx src/builders/buildCSS.ts",
     "clean": "rm -rf .turbo dist lib commonjs __flow__",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-border": "^1.7.1",
@@ -45,12 +47,15 @@
   },
   "devDependencies": {
     "@sproutsocial/seeds-build": "*",
+    "@sproutsocial/seeds-tsconfig": "*",
     "glob": "^10.3.10",
+    "jest": "^29.7.0",
     "json-to-scss": "^1.6.2",
+    "sass": "^1.50.0",
+    "tsc-alias": "^1.8.11",
+    "ts-jest": "^29.2.5",
     "tsx": "^4.0.0",
-    "typescript": "^5.6.2",
-    "@sproutsocial/seeds-tsconfig": "*",
-    "tsc-alias": "^1.8.11"
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.0.0 || >=4.0.0"