@sproutsocial/seeds-react-theme 3.6.1 → 4.1.0

package/commonjs/builders/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  buildAll: true,
+  buildCSSVariables: true
+};
+exports.buildAll = buildAll;
+Object.defineProperty(exports, "buildCSSVariables", {
+  enumerable: true,
+  get: function get() {
+    return _buildCSS.buildCSSVariables;
+  }
+});
+var _buildCSS = require("./buildCSS");
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _utils[key];
+    }
+  });
+});
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, 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); }); }; } /**
+ * Build scripts for transforming Seeds theme to multiple output formats
+ */
+/**
+ * Run all build transformations
+ */
+function buildAll() {
+  return _buildAll.apply(this, arguments);
+}
+function _buildAll() {
+  _buildAll = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _yield$import, buildCSSVariables;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          _context.n = 1;
+          return Promise.resolve().then(function () {
+            return _interopRequireWildcard(require("./buildCSS"));
+          });
+        case 1:
+          _yield$import = _context.v;
+          buildCSSVariables = _yield$import.buildCSSVariables;
+          _context.n = 2;
+          return buildCSSVariables();
+        case 2:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return _buildAll.apply(this, arguments);
+}

package/commonjs/builders/utils.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterComplexColors = filterComplexColors;
+exports.flattenColors = flattenColors;
+exports.flattenDuration = flattenDuration;
+exports.flattenEasing = flattenEasing;
+exports.flattenFontWeights = flattenFontWeights;
+exports.flattenObject = flattenObject;
+exports.flattenRadii = flattenRadii;
+exports.flattenShadows = flattenShadows;
+exports.flattenSpacing = flattenSpacing;
+exports.flattenTypography = flattenTypography;
+exports.isSimpleColor = isSimpleColor;
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+/**
+ * Utility functions for transforming theme objects into different formats
+ */
+
+/**
+ * Abbreviation mapping for common theme terms
+ */
+var ABBREVIATIONS = {
+  background: "bg",
+  foreground: "fg"
+};
+
+/**
+ * Apply abbreviation rules to a key
+ */
+function abbreviate(key) {
+  return ABBREVIATIONS[key] || key;
+}
+
+/**
+ * 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' }
+ */
+function flattenObject(obj) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var separator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "-";
+  var result = {};
+  function recurse(current) {
+    var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    if (typeof current === "string" || typeof current === "number") {
+      // Leaf node - create the final key
+      var key = path.map(abbreviate).join(separator);
+      result[key] = String(current);
+    } else if (_typeof(current) === "object" && current !== null) {
+      // Recurse into nested objects
+      for (var _i = 0, _Object$entries = Object.entries(current); _i < _Object$entries.length; _i++) {
+        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+          _key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+        recurse(value, [].concat(_toConsumableArray(path), [_key]));
+      }
+    }
+  }
+  recurse(obj, prefix ? [prefix] : []);
+  return result;
+}
+
+/**
+ * Flatten colors with a 'color-' prefix for CSS variables
+ */
+function flattenColors(colors) {
+  return flattenObject(colors, "color");
+}
+
+/**
+ * Flatten spacing with a 'space-' prefix
+ */
+function flattenSpacing(space) {
+  var flattened = {};
+
+  // Space is already flat: { 0: '0px', 100: '2px', ... }
+  // But it may have nested properties like 'space' and '-space'
+  for (var _i2 = 0, _Object$entries2 = Object.entries(space); _i2 < _Object$entries2.length; _i2++) {
+    var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
+      key = _Object$entries2$_i[0],
+      value = _Object$entries2$_i[1];
+    if (typeof value === "string") {
+      flattened["space-".concat(key)] = value;
+    }
+  }
+  return flattened;
+}
+
+/**
+ * Flatten typography values for Tailwind
+ */
+function flattenTypography(typography) {
+  var result = {};
+  for (var _i3 = 0, _Object$entries3 = Object.entries(typography); _i3 < _Object$entries3.length; _i3++) {
+    var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
+      key = _Object$entries3$_i[0],
+      value = _Object$entries3$_i[1];
+    if (_typeof(value) === "object" && value !== null && "fontSize" in value && "lineHeight" in value) {
+      result[key] = [value.fontSize, {
+        lineHeight: value.lineHeight
+      }];
+    }
+  }
+  return result;
+}
+
+/**
+ * Flatten radii (border radius)
+ */
+function flattenRadii(radii) {
+  var flattened = {};
+  for (var _i4 = 0, _Object$entries4 = Object.entries(radii); _i4 < _Object$entries4.length; _i4++) {
+    var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i4], 2),
+      key = _Object$entries4$_i[0],
+      value = _Object$entries4$_i[1];
+    if (typeof value === "string") {
+      flattened[key] = value;
+    }
+  }
+  return flattened;
+}
+
+/**
+ * Flatten shadows
+ */
+function flattenShadows(shadows) {
+  var flattened = {};
+  for (var _i5 = 0, _Object$entries5 = Object.entries(shadows); _i5 < _Object$entries5.length; _i5++) {
+    var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i5], 2),
+      key = _Object$entries5$_i[0],
+      value = _Object$entries5$_i[1];
+    if (typeof value === "string") {
+      flattened[key] = value;
+    }
+  }
+  return flattened;
+}
+
+/**
+ * Flatten font weights
+ */
+function flattenFontWeights(fontWeights) {
+  var flattened = {};
+  for (var _i6 = 0, _Object$entries6 = Object.entries(fontWeights); _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") {
+      flattened[key] = value;
+    }
+  }
+  return flattened;
+}
+
+/**
+ * Flatten easing (transition timing functions)
+ */
+function flattenEasing(easing) {
+  var flattened = {};
+  for (var _i7 = 0, _Object$entries7 = Object.entries(easing); _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") {
+      flattened[key] = value;
+    }
+  }
+  return flattened;
+}
+
+/**
+ * Flatten duration (transition durations)
+ */
+function flattenDuration(duration) {
+  var flattened = {};
+  for (var _i8 = 0, _Object$entries8 = Object.entries(duration); _i8 < _Object$entries8.length; _i8++) {
+    var _Object$entries8$_i = _slicedToArray(_Object$entries8[_i8], 2),
+      key = _Object$entries8$_i[0],
+      value = _Object$entries8$_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
+ */
+function isSimpleColor(value) {
+  return !value.includes("color-mix") && !value.includes("gradient");
+}
+
+/**
+ * Filter out colors that use advanced CSS features
+ */
+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];
+    if (isSimpleColor(value)) {
+      filtered[key] = value;
+    } else {
+      // Keep it but add a comment in generated files
+      filtered[key] = value;
+    }
+  }
+  return filtered;
+}

package/commonjs/dark/theme.js

@@ -59,7 +59,8 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
       selected: _seedsColor.default.COLOR_NEUTRAL_0,
       positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
       negative_sentiment: _seedsColor.default.COLOR_RED_500,
-      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
+      ai_generated: "var(--color-container-bg-ai-generated, ".concat(_seedsColor.default.COLOR_NEUTRAL_100, ")")
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_1100,
@@ -83,9 +84,15 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
         aqua: _decorativePalettes.aqua.highlight,
         teal: _decorativePalettes.teal.highlight
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_0
+      selected: _seedsColor.default.COLOR_NEUTRAL_0,
+      ai_generated: _seedsColor.default.COLOR_PURPLE_700
     }
   },
+  // AI brand gradient — identical to light mode (the brand gradient does not flip).
+  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: {
@@ -178,6 +185,43 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
         base: _seedsColor.default.COLOR_NEUTRAL_300,
         hover: _seedsColor.default.COLOR_NEUTRAL_200
       }
+    },
+    "ai-primary": {
+      background: {
+        base: "var(--color-gradient-ai)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    "ai-secondary": {
+      background: {
+        base: "var(--color-gradient-ai-subtle)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800,
+        hover: _seedsColor.default.COLOR_NEUTRAL_800
+      }
+    },
+    "ai-outline": {
+      background: {
+        base: "transparent"
+      },
+      border: {
+        base: "var(--color-gradient-ai)"
+      },
+      text: {
+        // Dark-mode override: light text for legibility on the dark surface.
+        base: _seedsColor.default.COLOR_NEUTRAL_100,
+        hover: _seedsColor.default.COLOR_NEUTRAL_100
+      }
     }
   },
   link: {
@@ -206,7 +250,8 @@ var colors = exports.colors = _objectSpread(_objectSpread({}, _theme.default.col
       pink: _decorativePalettes.pink.foreground,
       aqua: _decorativePalettes.aqua.foreground,
       teal: _decorativePalettes.teal.foreground
-    }
+    },
+    ai_generated: _seedsColor.default.COLOR_NEUTRAL_900
   },
   icon: {
     base: _seedsColor.default.COLOR_NEUTRAL_100,

package/commonjs/light/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typography = exports.space = exports.shadows = exports.radii = exports.newBreakpoints = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
+exports.typography = exports.space = exports.shadows = exports.radii = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.fontFamily = exports.easing = exports.duration = exports.default = exports.colors = exports.breakpoints = exports.borders = exports.borderWidths = void 0;
 var _seedsColor = _interopRequireDefault(require("@sproutsocial/seeds-color"));
 var _seedsNetworkcolor = _interopRequireDefault(require("@sproutsocial/seeds-networkcolor"));
 var _seedsTypography = _interopRequireDefault(require("@sproutsocial/seeds-typography"));
@@ -23,17 +23,13 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // eslint-disable-next-line no-restricted-syntax
 // json-to-scss is not working with the alias right now
 //import {TypeThemeMode} from '@src/types/theme';
-var breakpoints = exports.breakpoints = ["900px", "1200px", "1500px", "1800px"];
-var newBreakpoints = exports.newBreakpoints = {
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280
+var breakpointAliases = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px"
 };
-breakpoints.sm = newBreakpoints.sm;
-breakpoints.md = newBreakpoints.md;
-breakpoints.lg = newBreakpoints.lg;
-breakpoints.xl = newBreakpoints.xl;
+var breakpoints = exports.breakpoints = Object.assign(["900px", "1200px", "1500px", "1800px"], breakpointAliases);
 var MODE = "light";
 
 // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
@@ -70,7 +66,8 @@ var colors = exports.colors = _objectSpread(_objectSpread({
       selected: _seedsColor.default.COLOR_NEUTRAL_800,
       positive_sentiment: _seedsColor.default.COLOR_BLUE_500,
       negative_sentiment: _seedsColor.default.COLOR_RED_500,
-      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300
+      neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
+      ai_generated: "var(--color-container-bg-ai-generated, ".concat(_seedsColor.default.COLOR_NEUTRAL_100, ")")
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,
@@ -94,9 +91,19 @@ var colors = exports.colors = _objectSpread(_objectSpread({
         aqua: _decorativePalettes.aqua.highlight,
         teal: _decorativePalettes.teal.highlight
       },
-      selected: _seedsColor.default.COLOR_NEUTRAL_800
+      selected: _seedsColor.default.COLOR_NEUTRAL_800,
+      ai_generated: _seedsColor.default.COLOR_PURPLE_700
     }
   },
+  // AI brand gradient (AI/Gradient: Start #205bc3 -> Mid #9747ff -> Stop #f282f5).
+  // Raw hex matches the `ai_generated` precedent; #9747ff has no exact seeds-color token.
+  gradient: {
+    // 100% — AI primary fill & outline border
+    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%)"
+  },
   button: {
     primary: {
       background: {
@@ -189,6 +196,46 @@ var colors = exports.colors = _objectSpread(_objectSpread({
         base: _seedsColor.default.COLOR_NEUTRAL_700,
         hover: _seedsColor.default.COLOR_NEUTRAL_900
       }
+    },
+    // AI brand appearances — consume the shared `gradient.ai*` tokens.
+    // Rendered only via the Tailwind/button.css path (see seeds-react-button).
+    "ai-primary": {
+      background: {
+        base: "var(--color-gradient-ai)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_0,
+        hover: _seedsColor.default.COLOR_NEUTRAL_0
+      }
+    },
+    "ai-secondary": {
+      background: {
+        // White base is applied in button.css; this is the 20% gradient tint on top.
+        base: "var(--color-gradient-ai-subtle)"
+      },
+      border: {
+        base: "transparent"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800,
+        hover: _seedsColor.default.COLOR_NEUTRAL_800
+      }
+    },
+    "ai-outline": {
+      background: {
+        base: "transparent"
+      },
+      border: {
+        // Drawn as a rounded gradient border via a ::before pseudo-element in button.css.
+        base: "var(--color-gradient-ai)"
+      },
+      text: {
+        base: _seedsColor.default.COLOR_NEUTRAL_800,
+        hover: _seedsColor.default.COLOR_NEUTRAL_800
+      }
     }
   },
   link: {
@@ -217,7 +264,8 @@ var colors = exports.colors = _objectSpread(_objectSpread({
       pink: _decorativePalettes.pink.foreground,
       aqua: _decorativePalettes.aqua.foreground,
       teal: _decorativePalettes.teal.foreground
-    }
+    },
+    ai_generated: _seedsColor.default.COLOR_NEUTRAL_900
   },
   icon: {
     base: _seedsColor.default.COLOR_NEUTRAL_800,
@@ -324,6 +372,7 @@ var colors = exports.colors = _objectSpread(_objectSpread({
     instagram: _seedsNetworkcolor.default.NETWORK_COLOR_INSTAGRAM,
     feedly: _seedsNetworkcolor.default.NETWORK_COLOR_FEEDLY,
     analytics: _seedsNetworkcolor.default.NETWORK_COLOR_ANALYTICS,
+    google_analytics_property: _seedsNetworkcolor.default.NETWORK_COLOR_ANALYTICS,
     youtube: _seedsNetworkcolor.default.NETWORK_COLOR_YOUTUBE,
     messenger: _seedsNetworkcolor.default.NETWORK_COLOR_MESSENGER,
     snapchat: _seedsNetworkcolor.default.NETWORK_COLOR_SNAPCHAT,
@@ -460,7 +509,6 @@ var duration = exports.duration = {
 };
 var theme = {
   breakpoints: breakpoints,
-  newBreakpoints: newBreakpoints,
   colors: colors,
   typography: _objectSpread(_objectSpread({}, typography), {}, {
     typography: typography

package/dist/tailwind-preset.css

@@ -0,0 +1,118 @@
+/**
+ * Seeds Design System — Tailwind CSS v4 Preset
+ *
+ * Import this file in your CSS entry point:
+ *   @import "tailwindcss";
+ *   @import "@sproutsocial/seeds-react-theme/css/tailwind-preset";
+ *
+ * All values are sourced from Seeds token packages — no hardcoded values.
+ * Dark mode is handled via the .dark class on <html>.
+ */
+
+@theme {
+  /* Spacing — from @sproutsocial/seeds-space */
+  --spacing-0: 0px;
+  --spacing-100: 2px;
+  --spacing-200: 4px;
+  --spacing-300: 8px;
+  --spacing-350: 12px;
+  --spacing-400: 16px;
+  --spacing-450: 24px;
+  --spacing-500: 32px;
+  --spacing-600: 40px;
+
+  /* Border radius — from @sproutsocial/seeds-border */
+  --radius-400: 4px;
+  --radius-500: 6px;
+  --radius-600: 8px;
+  --radius-800: 12px;
+  --radius-900: 24px;
+  --radius-1000: 999999px;
+  --radius-pill: 999999px;
+  --radius-inner: 4px;
+  --radius-outer: 8px;
+
+  /* Font size — from @sproutsocial/seeds-typography */
+  --text-100--font-size: 11px;
+  --text-100--line-height: 18.666666666666668px;
+  --text-200--font-size: 13px;
+  --text-200--line-height: 21.333333333333332px;
+  --text-300--font-size: 16px;
+  --text-300--line-height: 24px;
+  --text-400--font-size: 18px;
+  --text-400--line-height: 26.666666666666668px;
+  --text-500--font-size: 21px;
+  --text-500--line-height: 29.333333333333332px;
+  --text-600--font-size: 24px;
+  --text-600--line-height: 32px;
+  --text-700--font-size: 32px;
+  --text-700--line-height: 40px;
+
+  /* Button colors — from @sproutsocial/seeds-color (light mode) */
+  --color-button-primary-bg-base: #205bc3;
+  --color-button-primary-bg-hover: #1150aa;
+  --color-button-primary-bg-active: #0c3f89;
+  --color-button-primary-text-base: #FFFFFF;
+  --color-button-primary-text-hover: #FFFFFF;
+  --color-button-primary-border-base: transparent;
+  --color-button-secondary-bg-base: transparent;
+  --color-button-secondary-bg-hover: #364141;
+  --color-button-secondary-bg-active: #273333;
+  --color-button-secondary-text-base: #364141;
+  --color-button-secondary-text-hover: #FFFFFF;
+  --color-button-secondary-border-base: #364141;
+  --color-button-destructive-bg-base: #c63434;
+  --color-button-destructive-bg-hover: #992222;
+  --color-button-destructive-bg-active: #6d1313;
+  --color-button-destructive-text-base: #FFFFFF;
+  --color-button-destructive-text-hover: #FFFFFF;
+  --color-button-destructive-border-base: transparent;
+  --color-button-placeholder-bg-base: transparent;
+  --color-button-placeholder-bg-hover: #FFFFFF;
+  --color-button-placeholder-bg-active: #FFFFFF;
+  --color-button-placeholder-text-base: #205bc3;
+  --color-button-placeholder-text-hover: #1150aa;
+  --color-button-placeholder-border-base: #929a9b;
+
+  /* Semantic tokens — reference CSS vars from theme-all.css */
+  --color-app-bg-base: var(--color-app-bg-base);
+  --color-container-bg-base: var(--color-container-bg-base);
+  --color-container-bg-success: var(--color-container-bg-success);
+  --color-container-bg-warning: var(--color-container-bg-warning);
+  --color-container-bg-error: var(--color-container-bg-error);
+  --color-container-bg-info: var(--color-container-bg-info);
+  --color-container-bg-opportunity: var(--color-container-bg-opportunity);
+  --color-container-border-base: var(--color-container-border-base);
+  --color-container-border-success: var(--color-container-border-success);
+  --color-container-border-warning: var(--color-container-border-warning);
+  --color-container-border-error: var(--color-container-border-error);
+  --color-container-border-info: var(--color-container-border-info);
+  --color-container-border-opportunity: var(--color-container-border-opportunity);
+  --color-text-body: var(--color-text-body);
+  --color-text-headline: var(--color-text-headline);
+  --color-text-subtext: var(--color-text-subtext);
+  --color-form-bg-base: var(--color-form-bg-base);
+  --color-form-border-base: var(--color-form-border-base);
+  --color-form-border-selected: var(--color-form-border-selected);
+  --color-form-placeholder-base: var(--color-form-placeholder-base);
+  /* Button colors — dark mode variants (use with dark: prefix) */
+  --color-button-primary-bg-base-dark: #679eff;
+  --color-button-primary-bg-hover-dark: #a1c2f8;
+  --color-button-primary-bg-active-dark: #c7dbf9;
+  --color-button-primary-text-base-dark: #273333;
+  --color-button-primary-text-hover-dark: #162020;
+  --color-button-secondary-bg-hover-dark: #f3f4f4;
+  --color-button-secondary-bg-active-dark: #FFFFFF;
+  --color-button-secondary-text-base-dark: #FFFFFF;
+  --color-button-secondary-text-hover-dark: #364141;
+  --color-button-secondary-border-base-dark: #FFFFFF;
+  --color-button-destructive-bg-base-dark: #ff7f6e;
+  --color-button-destructive-bg-hover-dark: #ff9c8f;
+  --color-button-destructive-bg-active-dark: #ffb8b1;
+  --color-button-destructive-text-base-dark: #273333;
+  --color-button-destructive-text-hover-dark: #162020;
+  --color-button-placeholder-bg-hover-dark: #040404;
+  --color-button-placeholder-bg-active-dark: #040404;
+  --color-button-placeholder-text-base-dark: #679eff;
+  --color-button-placeholder-text-hover-dark: #a1c2f8;
+}