npm - @sproutsocial/seeds-react-theme - Versions diffs - 3.6.2 → 4.1.0 - Mend

@sproutsocial/seeds-react-theme 3.6.2 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/README.md +199 -0
package/commonjs/builders/buildCSS.js +202 -0
package/commonjs/builders/buildTailwindV4.js +238 -0
package/commonjs/builders/index.js +65 -0
package/commonjs/builders/utils.js +225 -0
package/commonjs/dark/theme.js +48 -3
package/commonjs/light/theme.js +56 -3
package/dist/tailwind-preset.css +118 -0
package/dist/theme-all.css +961 -0
package/dist/theme-dark.css +480 -0
package/dist/theme.css +480 -0
package/dist/themes/dark/_themed.scss +7 -0
package/dist/themes/dark/theme.scss +94 -6
package/dist/themes/extendedThemes/sproutTheme/dark/_themed.scss +7 -0
package/dist/themes/extendedThemes/sproutTheme/dark/theme.scss +47 -3
package/dist/themes/extendedThemes/sproutTheme/light/_themed.scss +7 -0
package/dist/themes/extendedThemes/sproutTheme/light/theme.scss +47 -3
package/dist/themes/light/_themed.scss +7 -0
package/dist/themes/light/theme.scss +94 -6
package/dist/themes/types/_themed.scss +7 -0
package/dist/types/builders/buildCSS.d.ts +8 -0
package/dist/types/builders/buildCSS.d.ts.map +1 -0
package/dist/types/builders/buildTailwindV4.d.ts +18 -0
package/dist/types/builders/buildTailwindV4.d.ts.map +1 -0
package/dist/types/builders/index.d.ts +10 -0
package/dist/types/builders/index.d.ts.map +1 -0
package/dist/types/builders/utils.d.ts +53 -0
package/dist/types/builders/utils.d.ts.map +1 -0
package/dist/types/dark/theme.d.ts +88 -0
package/dist/types/dark/theme.d.ts.map +1 -1
package/dist/types/light/theme.d.ts +88 -0
package/dist/types/light/theme.d.ts.map +1 -1
package/dist/types/types/theme.colors.d.ts +1 -0
package/dist/types/types/theme.colors.d.ts.map +1 -1
package/lib/builders/buildCSS.js +200 -0
package/lib/builders/buildTailwindV4.js +233 -0
package/lib/builders/index.js +37 -0
package/lib/builders/utils.js +209 -0
package/lib/dark/theme.js +48 -3
package/lib/light/theme.js +56 -3
package/package.json +24 -2
package/tailwind-preset.js +199 -0

package/README.md ADDED Viewed

@@ -0,0 +1,199 @@
+# @sproutsocial/seeds-react-theme
+The Seeds design system semantic theme layer, providing meaningful component-oriented design tokens.
+## Overview
+This package provides the Seeds theme in multiple formats for use across different frameworks and platforms:
+- **React (styled-components)** - Original theme provider for React applications
+- **Tailwind CSS** - Preset for Tailwind-based projects
+- **CSS Custom Properties** - For Angular, Vue, Svelte, vanilla HTML/CSS
+- **SCSS Variables** - For legacy SCSS-based projects
+All formats support **light and dark mode** out of the box.
+## Installation
+```bash
+npm install @sproutsocial/seeds-react-theme
+# or
+yarn add @sproutsocial/seeds-react-theme
+```
+## Usage
+### React (styled-components)
+```jsx
+import { ThemeProvider } from 'styled-components';
+import theme from '@sproutsocial/seeds-react-theme';
+function App() {
+  return (
+    <ThemeProvider theme={theme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+### Tailwind CSS
+See [MULTI_FRAMEWORK_GUIDE.md](./MULTI_FRAMEWORK_GUIDE.md) for complete documentation.
+**Quick start:**
+```javascript
+// tailwind.config.js
+module.exports = {
+  presets: [
+    require('@sproutsocial/seeds-react-theme/dist/tailwind-preset'),
+  ],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+}
+```
+```jsx
+<button className="bg-color-button-primary-bg-base text-color-button-primary-text-base px-space-400 py-space-300 rounded-radius-500">
+  Primary Button
+</button>
+```
+### CSS Custom Properties
+```html
+<link rel="stylesheet" href="node_modules/@sproutsocial/seeds-react-theme/dist/theme.css">
+<button style="
+  background: var(--color-button-primary-bg-base);
+  color: var(--color-button-primary-text-base);
+  padding: var(--space-400);
+  border-radius: var(--radius-500);
+">
+  Primary Button
+</button>
+```
+### Angular / Vue / Svelte
+Import the CSS file in your application entry point:
+```javascript
+// Angular: styles.css or styles.scss
+@import '@sproutsocial/seeds-react-theme/dist/theme-all.css';
+// Vue: main.js
+import '@sproutsocial/seeds-react-theme/dist/theme-all.css';
+// Svelte: App.svelte or +layout.svelte
+import '@sproutsocial/seeds-react-theme/dist/theme-all.css';
+```
+Then use CSS variables in your component styles:
+```css
+.my-button {
+  background: var(--color-button-primary-bg-base);
+  color: var(--color-button-primary-text-base);
+  padding: var(--space-400);
+}
+```
+## Dark Mode
+### Tailwind CSS
+Use the dark mode preset:
+```javascript
+module.exports = {
+  presets: [
+    require('@sproutsocial/seeds-react-theme/dist/tailwind-preset-dark'),
+  ],
+}
+```
+### CSS Variables
+Add the `data-theme="dark"` attribute to your HTML element:
+```html
+<html data-theme="dark">
+  <!-- All CSS variables automatically switch to dark mode values -->
+</html>
+```
+Toggle with JavaScript:
+```javascript
+// Enable dark mode
+document.documentElement.setAttribute('data-theme', 'dark');
+// Disable dark mode
+document.documentElement.removeAttribute('data-theme');
+```
+## Available Tokens
+### Colors
+- Button colors (primary, secondary, destructive, etc.)
+- Text colors (headline, body, subtext, inverse)
+- Link colors
+- Container backgrounds and borders
+- Form backgrounds and borders
+- Icon colors
+### Spacing
+- `0`, `100`, `200`, `300`, `350`, `400`, `450`, `500`, `600`
+### Typography
+- Font sizes and line heights (`100` - `1200`)
+- Font families
+- Font weights (normal, semibold, bold, extrabold)
+### Other
+- Border radius values
+- Box shadows
+- Motion (easing, duration)
+## Package Exports
+```javascript
+{
+  ".": "@sproutsocial/seeds-react-theme", // React theme
+  "./dist/tailwind-preset": "Tailwind preset (light)",
+  "./dist/tailwind-preset-dark": "Tailwind preset (dark)",
+  "./dist/theme.css": "CSS variables (light)",
+  "./dist/theme-dark.css": "CSS variables (dark)",
+  "./dist/theme-all.css": "CSS variables (light + dark)"
+}
+```
+## Documentation
+- **[Multi-Framework Guide](./MULTI_FRAMEWORK_GUIDE.md)** - Complete guide for using Seeds theme with Tailwind, Angular, Vue, Svelte, and HTML/CSS
+- **[Changelog](./CHANGELOG.md)** - Version history and changes
+## Development
+Build all theme formats:
+```bash
+yarn build
+```
+Build specific formats:
+```bash
+yarn build:tailwind  # Build Tailwind presets
+yarn build:css       # Build CSS variables
+```
+## License
+MIT
+## Contributing
+See the main [Seeds repository](https://github.com/sproutsocial/seeds) for contribution guidelines.

package/commonjs/builders/buildCSS.js ADDED Viewed

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildCSSVariables = buildCSSVariables;
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+var _theme = _interopRequireDefault(require("../light/theme"));
+var _theme2 = _interopRequireDefault(require("../dark/theme"));
+var _utils = require("./utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }); }; }
+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 _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 _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; } /**
+ * Build CSS custom properties (variables) from Seeds theme objects
+ */
+/**
+ * Convert a flat object into CSS custom properties
+ */
+function objectToCSSVariables(obj) {
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+  var variables = [];
+  for (var _i = 0, _Object$entries = Object.entries(obj); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      key = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    var varName = prefix ? "--".concat(prefix, "-").concat(key) : "--".concat(key);
+    variables.push("  ".concat(varName, ": ").concat(value, ";"));
+  }
+  return variables;
+}
+/**
+ * Build CSS variables for typography
+ */
+function typographyToCSSVariables(typography) {
+  var variables = [];
+  for (var _i2 = 0, _Object$entries2 = Object.entries(typography); _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) === "object" && value !== null && "fontSize" in value && "lineHeight" in value) {
+      variables.push("  --font-size-".concat(key, ": ").concat(value.fontSize, ";"));
+      variables.push("  --line-height-".concat(key, ": ").concat(value.lineHeight, ";"));
+    }
+  }
+  return variables;
+}
+/**
+ * Build font family CSS variables
+ */
+function fontFamilyToCSSVariables(fontFamily) {
+  if (typeof fontFamily === "string") {
+    return ["  --font-family: ".concat(fontFamily, ";")];
+  } else if (Array.isArray(fontFamily)) {
+    return ["  --font-family: ".concat(fontFamily.join(", "), ";")];
+  } else if (_typeof(fontFamily) === "object") {
+    var variables = [];
+    for (var _i3 = 0, _Object$entries3 = Object.entries(fontFamily); _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 (Array.isArray(value)) {
+        variables.push("  --font-family-".concat(key, ": ").concat(value.join(", "), ";"));
+      } else {
+        variables.push("  --font-family-".concat(key, ": ").concat(value, ";"));
+      }
+    }
+    return variables;
+  }
+  return [];
+}
+/**
+ * Transform a Seeds theme object into CSS custom properties
+ */
+function generateCSSVariables(themeObj, mode) {
+  console.log("Building CSS variables for ".concat(mode, " theme..."));
+  var selector = mode === "light" ? ":root" : '[data-theme="dark"], .dark, .lights-out';
+  var variables = [];
+  // Colors
+  var colors = (0, _utils.flattenColors)(themeObj.colors);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(colors, "")));
+  console.log("  - Mapped ".concat(Object.keys(colors).length, " color tokens"));
+  // Spacing
+  var spacing = (0, _utils.flattenSpacing)(themeObj.space);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(spacing, "")));
+  console.log("  - Mapped ".concat(Object.keys(spacing).length, " spacing tokens"));
+  // Typography
+  var typography = themeObj.typography.typography || themeObj.typography;
+  var typographyVars = typographyToCSSVariables(typography);
+  variables.push.apply(variables, _toConsumableArray(typographyVars));
+  console.log("  - Mapped ".concat(typographyVars.length / 2, " typography scales"));
+  // Font family
+  var fontFamilyVars = fontFamilyToCSSVariables(themeObj.fontFamily);
+  variables.push.apply(variables, _toConsumableArray(fontFamilyVars));
+  // Font weights
+  var fontWeights = (0, _utils.flattenFontWeights)(themeObj.fontWeights);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(fontWeights, "font-weight")));
+  console.log("  - Mapped ".concat(Object.keys(fontWeights).length, " font weights"));
+  // Border radius
+  var radii = (0, _utils.flattenRadii)(themeObj.radii.radii || themeObj.radii);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(radii, "radius")));
+  console.log("  - Mapped ".concat(Object.keys(radii).length, " border radius values"));
+  // Shadows
+  var shadows = (0, _utils.flattenShadows)(themeObj.shadows);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(shadows, "shadow")));
+  console.log("  - Mapped ".concat(Object.keys(shadows).length, " shadow values"));
+  // Easing (transition timing functions)
+  var easing = (0, _utils.flattenEasing)(themeObj.easing);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(easing, "ease")));
+  console.log("  - Mapped ".concat(Object.keys(easing).length, " easing functions"));
+  // Duration (transition durations)
+  var duration = (0, _utils.flattenDuration)(themeObj.duration);
+  variables.push.apply(variables, _toConsumableArray(objectToCSSVariables(duration, "duration")));
+  console.log("  - Mapped ".concat(Object.keys(duration).length, " duration values"));
+  // Build the CSS
+  return "/**\n * Seeds Design System - CSS Custom Properties (".concat(mode, " theme)\n * @see https://github.com/sproutsocial/seeds\n */\n\n").concat(selector, " {\n").concat(variables.join("\n"), "\n}\n");
+}
+/**
+ * Build a combined CSS file with both light and dark themes
+ */
+function generateCombinedCSS() {
+  console.log("Building combined CSS with light and dark themes...");
+  var lightCSS = generateCSSVariables(_theme.default, "light");
+  var darkCSS = generateCSSVariables(_theme2.default, "dark");
+  return "".concat(lightCSS, "\n").concat(darkCSS);
+}
+/**
+ * Main build function for CSS variables
+ */
+function buildCSSVariables() {
+  return _buildCSSVariables.apply(this, arguments);
+} // Allow running this script directly
+function _buildCSSVariables() {
+  _buildCSSVariables = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var distDir, lightCSS, darkCSS, combinedCSS;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          console.log("\n=== Building CSS Custom Properties ===\n");
+          distDir = _path.default.join(__dirname, "../../dist"); // Ensure dist directory exists
+          if (!_fs.default.existsSync(distDir)) {
+            _fs.default.mkdirSync(distDir, {
+              recursive: true
+            });
+          }
+          // Build light theme CSS
+          lightCSS = generateCSSVariables(_theme.default, "light");
+          _fs.default.writeFileSync(_path.default.join(distDir, "theme.css"), lightCSS, "utf-8");
+          console.log("  \u2713 Written light theme to dist/theme.css");
+          // Build dark theme CSS
+          darkCSS = generateCSSVariables(_theme2.default, "dark");
+          _fs.default.writeFileSync(_path.default.join(distDir, "theme-dark.css"), darkCSS, "utf-8");
+          console.log("  \u2713 Written dark theme to dist/theme-dark.css");
+          // Build combined CSS
+          combinedCSS = generateCombinedCSS();
+          _fs.default.writeFileSync(_path.default.join(distDir, "theme-all.css"), combinedCSS, "utf-8");
+          console.log("  \u2713 Written combined theme to dist/theme-all.css");
+          console.log("\n✅ CSS variables built successfully!\n");
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return _buildCSSVariables.apply(this, arguments);
+}
+if (require.main === module) {
+  buildCSSVariables().catch(function (error) {
+    console.error("Error building CSS variables:", error);
+    process.exit(1);
+  });
+}

package/commonjs/builders/buildTailwindV4.js ADDED Viewed

@@ -0,0 +1,238 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildTailwindV4Preset = buildTailwindV4Preset;
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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 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 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).
+ */
+var COLORS = require("@sproutsocial/seeds-color");
+var SPACE = require("@sproutsocial/seeds-space");
+var BORDER = require("@sproutsocial/seeds-border");
+var TYPOGRAPHY = require("@sproutsocial/seeds-typography");
+/**
+ * Build the Tailwind v4 CSS preset file
+ */
+function buildTailwindV4Preset() {
+  return _buildTailwindV4Preset.apply(this, arguments);
+}
+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;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          console.log("\n=== Building Tailwind v4 CSS Preset ===\n");
+          distDir = _path.default.join(__dirname, "../../dist");
+          if (!_fs.default.existsSync(distDir)) {
+            _fs.default.mkdirSync(distDir, {
+              recursive: true
+            });
+          }
+          lines = ["/**", " * 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
+          // Tailwind v4: --spacing-{key} → p-{key}, m-{key}, gap-{key}, w-{key}, etc.
+          // -------------------------------------------------------------------------
+          lines.push("  /* Spacing — from @sproutsocial/seeds-space */");
+          spacingMap = {
+            0: SPACE.SPACE_SIZE_0,
+            100: SPACE.SPACE_SIZE_100,
+            200: SPACE.SPACE_SIZE_200,
+            300: SPACE.SPACE_SIZE_300,
+            350: SPACE.SPACE_SIZE_350,
+            400: SPACE.SPACE_SIZE_400,
+            450: SPACE.SPACE_SIZE_450,
+            500: SPACE.SPACE_SIZE_500,
+            600: SPACE.SPACE_SIZE_600
+          };
+          for (_i = 0, _Object$entries = Object.entries(spacingMap); _i < _Object$entries.length; _i++) {
+            _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
+            lines.push("  --spacing-".concat(key, ": ").concat(value, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(spacingMap).length, " spacing tokens"));
+          lines.push("");
+          // -------------------------------------------------------------------------
+          // Border radius — from @sproutsocial/seeds-border
+          // Tailwind v4: --radius-{key} → rounded-{key}
+          // -------------------------------------------------------------------------
+          lines.push("  /* Border radius — from @sproutsocial/seeds-border */");
+          radiusMap = {
+            400: BORDER.BORDER_RADIUS_400,
+            500: BORDER.BORDER_RADIUS_500,
+            600: BORDER.BORDER_RADIUS_600,
+            800: BORDER.BORDER_RADIUS_800,
+            900: BORDER.BORDER_RADIUS_900,
+            1000: BORDER.BORDER_RADIUS_1000,
+            pill: "999999px",
+            inner: "4px",
+            outer: "8px"
+          };
+          for (_i2 = 0, _Object$entries2 = Object.entries(radiusMap); _i2 < _Object$entries2.length; _i2++) {
+            _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), _key = _Object$entries2$_i[0], _value = _Object$entries2$_i[1];
+            lines.push("  --radius-".concat(_key, ": ").concat(_value, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(radiusMap).length, " border radius 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];
+            if (val && val.fontSize && val.lineHeight) {
+              // Tailwind v4 uses --text-*--font-size and --text-*--line-height for
+              // the two-value tuple equivalent
+              lines.push("  --text-".concat(scale, "--font-size: ").concat(val.fontSize, ";"));
+              lines.push("  --text-".concat(scale, "--line-height: ").concat(val.lineHeight, ";"));
+            }
+          }
+          console.log("  - Mapped ".concat(typographyScales.length, " typography scales"));
+          lines.push("");
+          // -------------------------------------------------------------------------
+          // Button colors — from @sproutsocial/seeds-color (static values)
+          // Light mode defaults; dark mode via @variant dark overrides below.
+          // -------------------------------------------------------------------------
+          lines.push("  /* Button colors — from @sproutsocial/seeds-color (light mode) */");
+          buttonColors = {
+            // Primary
+            "color-button-primary-bg-base": COLORS.COLOR_BLUE_700,
+            "color-button-primary-bg-hover": COLORS.COLOR_BLUE_800,
+            "color-button-primary-bg-active": COLORS.COLOR_BLUE_900,
+            "color-button-primary-text-base": COLORS.COLOR_NEUTRAL_0,
+            "color-button-primary-text-hover": COLORS.COLOR_NEUTRAL_0,
+            "color-button-primary-border-base": "transparent",
+            // Secondary
+            "color-button-secondary-bg-base": "transparent",
+            "color-button-secondary-bg-hover": COLORS.COLOR_NEUTRAL_800,
+            "color-button-secondary-bg-active": COLORS.COLOR_NEUTRAL_900,
+            "color-button-secondary-text-base": COLORS.COLOR_NEUTRAL_800,
+            "color-button-secondary-text-hover": COLORS.COLOR_NEUTRAL_0,
+            "color-button-secondary-border-base": COLORS.COLOR_NEUTRAL_800,
+            // Destructive
+            "color-button-destructive-bg-base": COLORS.COLOR_RED_800,
+            "color-button-destructive-bg-hover": COLORS.COLOR_RED_900,
+            "color-button-destructive-bg-active": COLORS.COLOR_RED_1000,
+            "color-button-destructive-text-base": COLORS.COLOR_NEUTRAL_0,
+            "color-button-destructive-text-hover": COLORS.COLOR_NEUTRAL_0,
+            "color-button-destructive-border-base": "transparent",
+            // Placeholder
+            "color-button-placeholder-bg-base": "transparent",
+            "color-button-placeholder-bg-hover": COLORS.COLOR_NEUTRAL_0,
+            "color-button-placeholder-bg-active": COLORS.COLOR_NEUTRAL_0,
+            "color-button-placeholder-text-base": COLORS.COLOR_BLUE_700,
+            "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, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(buttonColors).length, " button color tokens"));
+          lines.push("");
+          // CSS variable passthrough tokens (app, container, text, form)
+          // These reference the custom properties defined in theme.css / theme-all.css.
+          lines.push("  /* Semantic tokens — reference CSS vars from theme-all.css */");
+          semanticColors = {
+            "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)"
+          };
+          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, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(semanticColors).length, " semantic color tokens"));
+          // Dark mode variants for button colors — exposed as separate -dark tokens.
+          // Usage in JSX: `dark:bg-button-primary-bg-base-dark`
+          // (Same approach as the v3 preset — the `dark:` variant is built into Tailwind v4.)
+          lines.push("  /* Button colors — dark mode variants (use with dark: prefix) */");
+          darkButtonColors = {
+            "color-button-primary-bg-base-dark": COLORS.COLOR_BLUE_400,
+            "color-button-primary-bg-hover-dark": COLORS.COLOR_BLUE_300,
+            "color-button-primary-bg-active-dark": COLORS.COLOR_BLUE_200,
+            "color-button-primary-text-base-dark": COLORS.COLOR_NEUTRAL_900,
+            "color-button-primary-text-hover-dark": COLORS.COLOR_NEUTRAL_1000,
+            "color-button-secondary-bg-hover-dark": COLORS.COLOR_NEUTRAL_100,
+            "color-button-secondary-bg-active-dark": COLORS.COLOR_NEUTRAL_0,
+            "color-button-secondary-text-base-dark": COLORS.COLOR_NEUTRAL_0,
+            "color-button-secondary-text-hover-dark": COLORS.COLOR_NEUTRAL_800,
+            "color-button-secondary-border-base-dark": COLORS.COLOR_NEUTRAL_0,
+            "color-button-destructive-bg-base-dark": COLORS.COLOR_RED_400,
+            "color-button-destructive-bg-hover-dark": COLORS.COLOR_RED_300,
+            "color-button-destructive-bg-active-dark": COLORS.COLOR_RED_200,
+            "color-button-destructive-text-base-dark": COLORS.COLOR_NEUTRAL_900,
+            "color-button-destructive-text-hover-dark": COLORS.COLOR_NEUTRAL_1000,
+            "color-button-placeholder-bg-hover-dark": COLORS.COLOR_NEUTRAL_1100,
+            "color-button-placeholder-bg-active-dark": COLORS.COLOR_NEUTRAL_1100,
+            "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, ";"));
+          }
+          console.log("  - Mapped ".concat(Object.keys(darkButtonColors).length, " dark mode button color tokens"));
+          lines.push("}");
+          lines.push("");
+          css = lines.join("\n");
+          outPath = _path.default.join(distDir, "tailwind-preset.css");
+          _fs.default.writeFileSync(outPath, css, "utf-8");
+          console.log("  ✓ Written Tailwind v4 preset to dist/tailwind-preset.css");
+          console.log("\n✅ Tailwind v4 preset built successfully!\n");
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return _buildTailwindV4Preset.apply(this, arguments);
+}