@sproutsocial/seeds-react-theme 3.6.1 → 4.1.0

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

@@ -53,12 +53,6 @@ $theme: (
   ),
   "default": (
     "breakpoints": (900px, 1200px, 1500px, 1800px),
-    "newBreakpoints": (
-      "sm": 640,
-      "md": 768,
-      "lg": 1024,
-      "xl": 1280
-    ),
     "colors": (
       "app": (
         "background": (
@@ -90,7 +84,8 @@ $theme: (
           "selected": #FFFFFF,
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
-          "neutral_sentiment": #c8cccc
+          "neutral_sentiment": #c8cccc,
+          "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
         ),
         "border": (
           "base": #040404,
@@ -113,9 +108,14 @@ $theme: (
             "aqua": #17b8ce,
             "teal": #08c4b2
           ),
-          "selected": #FFFFFF
+          "selected": #FFFFFF,
+          "ai_generated": #6f5ed3
         )
       ),
+      "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%)
+      ),
       "button": (
         "primary": (
           "background": (
@@ -208,6 +208,42 @@ $theme: (
             "base": #c8cccc,
             "hover": #dee1e1
           )
+        ),
+        "ai-primary": (
+          "background": (
+            "base": var(--color-gradient-ai)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #FFFFFF,
+            "hover": #FFFFFF
+          )
+        ),
+        "ai-secondary": (
+          "background": (
+            "base": var(--color-gradient-ai-subtle)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #364141,
+            "hover": #364141
+          )
+        ),
+        "ai-outline": (
+          "background": (
+            "base": transparent
+          ),
+          "border": (
+            "base": var(--color-gradient-ai)
+          ),
+          "text": (
+            "base": #f3f4f4,
+            "hover": #f3f4f4
+          )
         )
       ),
       "link": (
@@ -236,7 +272,8 @@ $theme: (
           "pink": #fcdbeb,
           "aqua": #c5f9f9,
           "teal": #cdf7ef
-        )
+        ),
+        "ai_generated": #273333
       ),
       "icon": (
         "base": #f3f4f4,
@@ -342,6 +379,7 @@ $theme: (
         "instagram": #e4405f,
         "feedly": #2bb24c,
         "analytics": #ef6c00,
+        "google_analytics_property": #ef6c00,
         "youtube": #ff0000,
         "messenger": #000000,
         "snapchat": #fffc00,

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

@@ -6,6 +6,13 @@
 // _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
 @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.
+: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;
+}
+
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($theme, "default");

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

@@ -53,12 +53,6 @@ $theme: (
   ),
   "default": (
     "breakpoints": (900px, 1200px, 1500px, 1800px),
-    "newBreakpoints": (
-      "sm": 640,
-      "md": 768,
-      "lg": 1024,
-      "xl": 1280
-    ),
     "colors": (
       "app": (
         "background": (
@@ -90,7 +84,8 @@ $theme: (
           "selected": #364141,
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
-          "neutral_sentiment": #c8cccc
+          "neutral_sentiment": #c8cccc,
+          "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
         ),
         "border": (
           "base": #dee1e1,
@@ -113,9 +108,14 @@ $theme: (
             "aqua": #17b8ce,
             "teal": #08c4b2
           ),
-          "selected": #364141
+          "selected": #364141,
+          "ai_generated": #6f5ed3
         )
       ),
+      "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%)
+      ),
       "button": (
         "primary": (
           "background": (
@@ -208,6 +208,42 @@ $theme: (
             "base": #515e5f,
             "hover": #273333
           )
+        ),
+        "ai-primary": (
+          "background": (
+            "base": var(--color-gradient-ai)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #FFFFFF,
+            "hover": #FFFFFF
+          )
+        ),
+        "ai-secondary": (
+          "background": (
+            "base": var(--color-gradient-ai-subtle)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #364141,
+            "hover": #364141
+          )
+        ),
+        "ai-outline": (
+          "background": (
+            "base": transparent
+          ),
+          "border": (
+            "base": var(--color-gradient-ai)
+          ),
+          "text": (
+            "base": #364141,
+            "hover": #364141
+          )
         )
       ),
       "link": (
@@ -236,7 +272,8 @@ $theme: (
           "pink": #931847,
           "aqua": #035e73,
           "teal": #026661
-        )
+        ),
+        "ai_generated": #273333
       ),
       "icon": (
         "base": #364141,
@@ -342,6 +379,7 @@ $theme: (
         "instagram": #e4405f,
         "feedly": #2bb24c,
         "analytics": #ef6c00,
+        "google_analytics_property": #ef6c00,
         "youtube": #ff0000,
         "messenger": #000000,
         "snapchat": #fffc00,

package/dist/themes/light/_themed.scss

@@ -6,6 +6,13 @@
 // _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
 @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.
+: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;
+}
+
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($theme, "default");

package/dist/themes/light/theme.scss

@@ -41,7 +41,8 @@ $theme: (
         "selected": #364141,
         "positive_sentiment": #3876e3,
         "negative_sentiment": #f76054,
-        "neutral_sentiment": #c8cccc
+        "neutral_sentiment": #c8cccc,
+        "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
       ),
       "border": (
         "base": #dee1e1,
@@ -64,9 +65,14 @@ $theme: (
           "aqua": #17b8ce,
           "teal": #08c4b2
         ),
-        "selected": #364141
+        "selected": #364141,
+        "ai_generated": #6f5ed3
       )
     ),
+    "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%)
+    ),
     "button": (
       "primary": (
         "background": (
@@ -159,6 +165,42 @@ $theme: (
           "base": #515e5f,
           "hover": #273333
         )
+      ),
+      "ai-primary": (
+        "background": (
+          "base": var(--color-gradient-ai)
+        ),
+        "border": (
+          "base": transparent
+        ),
+        "text": (
+          "base": #FFFFFF,
+          "hover": #FFFFFF
+        )
+      ),
+      "ai-secondary": (
+        "background": (
+          "base": var(--color-gradient-ai-subtle)
+        ),
+        "border": (
+          "base": transparent
+        ),
+        "text": (
+          "base": #364141,
+          "hover": #364141
+        )
+      ),
+      "ai-outline": (
+        "background": (
+          "base": transparent
+        ),
+        "border": (
+          "base": var(--color-gradient-ai)
+        ),
+        "text": (
+          "base": #364141,
+          "hover": #364141
+        )
       )
     ),
     "link": (
@@ -187,7 +229,8 @@ $theme: (
         "pink": #931847,
         "aqua": #035e73,
         "teal": #026661
-      )
+      ),
+      "ai_generated": #273333
     ),
     "icon": (
       "base": #364141,
@@ -293,6 +336,7 @@ $theme: (
       "instagram": #e4405f,
       "feedly": #2bb24c,
       "analytics": #ef6c00,
+      "google_analytics_property": #ef6c00,
       "youtube": #ff0000,
       "messenger": #000000,
       "snapchat": #fffc00,
@@ -535,12 +579,6 @@ $theme: (
   ),
   "default": (
     "breakpoints": (900px, 1200px, 1500px, 1800px),
-    "newBreakpoints": (
-      "sm": 640,
-      "md": 768,
-      "lg": 1024,
-      "xl": 1280
-    ),
     "colors": (
       "app": (
         "background": (
@@ -572,7 +610,8 @@ $theme: (
           "selected": #364141,
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
-          "neutral_sentiment": #c8cccc
+          "neutral_sentiment": #c8cccc,
+          "ai_generated": var(--color-container-bg-ai-generated, #f3f4f4)
         ),
         "border": (
           "base": #dee1e1,
@@ -595,9 +634,14 @@ $theme: (
             "aqua": #17b8ce,
             "teal": #08c4b2
           ),
-          "selected": #364141
+          "selected": #364141,
+          "ai_generated": #6f5ed3
         )
       ),
+      "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%)
+      ),
       "button": (
         "primary": (
           "background": (
@@ -690,6 +734,42 @@ $theme: (
             "base": #515e5f,
             "hover": #273333
           )
+        ),
+        "ai-primary": (
+          "background": (
+            "base": var(--color-gradient-ai)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #FFFFFF,
+            "hover": #FFFFFF
+          )
+        ),
+        "ai-secondary": (
+          "background": (
+            "base": var(--color-gradient-ai-subtle)
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #364141,
+            "hover": #364141
+          )
+        ),
+        "ai-outline": (
+          "background": (
+            "base": transparent
+          ),
+          "border": (
+            "base": var(--color-gradient-ai)
+          ),
+          "text": (
+            "base": #364141,
+            "hover": #364141
+          )
         )
       ),
       "link": (
@@ -718,7 +798,8 @@ $theme: (
           "pink": #931847,
           "aqua": #035e73,
           "teal": #026661
-        )
+        ),
+        "ai_generated": #273333
       ),
       "icon": (
         "base": #364141,
@@ -824,6 +905,7 @@ $theme: (
         "instagram": #e4405f,
         "feedly": #2bb24c,
         "analytics": #ef6c00,
+        "google_analytics_property": #ef6c00,
         "youtube": #ff0000,
         "messenger": #000000,
         "snapchat": #fffc00,
@@ -1326,12 +1408,6 @@ $theme: (
     "1100": 101.33333333333333px,
     "1200": 125.33333333333333px
   ),
-  "newBreakpoints": (
-    "sm": 640,
-    "md": 768,
-    "lg": 1024,
-    "xl": 1280
-  ),
   "radii": (
     "400": 4px,
     "500": 6px,

package/dist/themes/types/_themed.scss

@@ -6,6 +6,13 @@
 // _themed.scss will be copied to each theme folder in /dist, where the theme.scss file for that theme will be.
 @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.
+: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;
+}
+
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.
 $theme: map-get($theme, "default");

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

@@ -0,0 +1,8 @@
+/**
+ * Build CSS custom properties (variables) from Seeds theme objects
+ */
+/**
+ * Main build function for CSS variables
+ */
+export declare function buildCSSVariables(): Promise<void>;
+//# sourceMappingURL=buildCSS.d.ts.map

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

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

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

@@ -0,0 +1,18 @@
+/**
+ * Build a Tailwind CSS v4 @theme preset from Seeds design tokens.
+ *
+ * In Tailwind v4, theme customization is done in CSS via @theme blocks
+ * instead of a JavaScript tailwind.config.js. This builder generates
+ * dist/tailwind-preset.css which consuming apps import as:
+ *
+ *   @import "tailwindcss";
+ *   @import "@sproutsocial/seeds-react-theme/css/tailwind-preset";
+ *
+ * The @theme block registers custom CSS properties that Tailwind v4 picks
+ * up and exposes as utility classes (e.g. --spacing-300 → p-300, gap-300).
+ */
+/**
+ * Build the Tailwind v4 CSS preset file
+ */
+export declare function buildTailwindV4Preset(): Promise<void>;
+//# sourceMappingURL=buildTailwindV4.d.ts.map

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * Build scripts for transforming Seeds theme to multiple output formats
+ */
+export { buildCSSVariables } from "./buildCSS";
+export * from "./utils";
+/**
+ * Run all build transformations
+ */
+export declare function buildAll(): Promise<void>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/builders/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,cAAc,SAAS,CAAC;AAExB;;GAEG;AACH,wBAAsB,QAAQ,kBAI7B"}

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

@@ -0,0 +1,53 @@
+/**
+ * Utility functions for transforming theme objects into different formats
+ */
+/**
+ * Flatten a nested object into a single-level object with kebab-case keys
+ * Example: { button: { primary: { background: { base: '#fff' } } } }
+ * Becomes: { 'button-primary-bg-base': '#fff' }
+ */
+export declare function flattenObject(obj: any, prefix?: string, separator?: string): Record<string, string>;
+/**
+ * Flatten colors with a 'color-' prefix for CSS variables
+ */
+export declare function flattenColors(colors: any): Record<string, string>;
+/**
+ * Flatten spacing with a 'space-' prefix
+ */
+export declare function flattenSpacing(space: any): Record<string, string>;
+/**
+ * Flatten typography values for Tailwind
+ */
+export declare function flattenTypography(typography: any): Record<string, [string, {
+    lineHeight: string;
+}]>;
+/**
+ * Flatten radii (border radius)
+ */
+export declare function flattenRadii(radii: any): Record<string, string>;
+/**
+ * Flatten shadows
+ */
+export declare function flattenShadows(shadows: any): Record<string, string>;
+/**
+ * Flatten font weights
+ */
+export declare function flattenFontWeights(fontWeights: any): Record<string, string | number>;
+/**
+ * Flatten easing (transition timing functions)
+ */
+export declare function flattenEasing(easing: any): Record<string, string>;
+/**
+ * Flatten duration (transition durations)
+ */
+export declare function flattenDuration(duration: any): Record<string, string>;
+/**
+ * Check if a value is a valid CSS color
+ * Filters out complex values like color-mix() which may not work everywhere
+ */
+export declare function isSimpleColor(value: string): boolean;
+/**
+ * Filter out colors that use advanced CSS features
+ */
+export declare function filterComplexColors(colors: Record<string, string>): Record<string, string>;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}