@sproutsocial/seeds-react-theme 4.3.1 → 4.5.0

package/lib/builders/utils.js

@@ -22,9 +22,11 @@ var ABBREVIATIONS = {
 };
 
 /**
- * Apply abbreviation rules to a key
+ * 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.
  */
-function abbreviate(key) {
+export function abbreviate(key) {
   return ABBREVIATIONS[key] || key;
 }
 
@@ -118,11 +120,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 +136,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 +152,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 +168,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 +183,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 +212,10 @@ export function isSimpleColor(value) {
  */
 export function filterComplexColors(colors) {
   var filtered = {};
-  for (var _i9 = 0, _Object$entries9 = Object.entries(colors); _i9 < _Object$entries9.length; _i9++) {
-    var _Object$entries9$_i = _slicedToArray(_Object$entries9[_i9], 2),
-      key = _Object$entries9$_i[0],
-      value = _Object$entries9$_i[1];
+  for (var _i0 = 0, _Object$entries0 = Object.entries(colors); _i0 < _Object$entries0.length; _i0++) {
+    var _Object$entries0$_i = _slicedToArray(_Object$entries0[_i0], 2),
+      key = _Object$entries0$_i[0],
+      value = _Object$entries0$_i[1];
     if (isSimpleColor(value)) {
       filtered[key] = value;
     } else {

package/lib/dark/theme.js

@@ -91,7 +91,12 @@ export var colors = _objectSpread(_objectSpread({}, lightTheme.colors), {}, {
   // contrast against the dark surface (Figma Sprout Variables, "Trellis" dark).
   gradient: {
     ai: "radial-gradient(circle at bottom left, #679eff 0%, #b984ff 61%, #f282f5 100%)",
-    "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
+    "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #679eff, transparent 80%) 0%, color-mix(in srgb, #b984ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)",
+    // Discrete stops for SVG paint servers — see the light theme for why these
+    // exist alongside the composed gradient strings.
+    "ai-stop-1": "#679eff",
+    "ai-stop-2": "#b984ff",
+    "ai-stop-3": "#f282f5"
   },
   button: {
     primary: {

package/lib/light/theme.js

@@ -100,7 +100,16 @@ export var colors = _objectSpread(_objectSpread({
     ai: "radial-gradient(circle at bottom left, #205bc3 0%, #9747ff 61%, #f282f5 100%)",
     // 20% tint — AI secondary (composited over a white base in CSS).
     // Kebab key so it flattens to --color-gradient-ai-subtle.
-    "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)"
+    "ai-subtle": "radial-gradient(circle at bottom left, color-mix(in srgb, #205bc3, transparent 80%) 0%, color-mix(in srgb, #9747ff, transparent 80%) 61%, color-mix(in srgb, #f282f5, transparent 80%) 100%)",
+    // The same three stops as discrete colors, flattening to
+    // --color-gradient-ai-stop-{1,2,3}. SVG needs a real <radialGradient> with
+    // separate <stop> elements to use as a paint server, and a CSS
+    // radial-gradient() string can't be decomposed back into stops. Consumed by
+    // seeds-react-icon's gradient defs (see icon.css) so gradient-filled icons
+    // pick up dark mode through the usual .dark variable swap.
+    "ai-stop-1": "#205bc3",
+    "ai-stop-2": "#9747ff",
+    "ai-stop-3": "#f282f5"
   },
   button: {
     primary: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "4.3.1",
+  "version": "4.5.0",
   "description": "Seeds Theme",
   "main": "commonjs/index.js",
   "module": "lib/index.js",
@@ -20,6 +20,11 @@
       "types": "./dist/types/index.d.ts"
     },
     "./tailwind-preset": "./tailwind-preset.js",
+    "./token-utils": {
+      "import": "./lib/builders/utils.js",
+      "require": "./commonjs/builders/utils.js",
+      "types": "./dist/types/builders/utils.d.ts"
+    },
     "./css/theme": "./dist/theme.css",
     "./css/theme-dark": "./dist/theme-dark.css",
     "./css/theme-all": "./dist/theme-all.css",