@sproutsocial/seeds-react-theme 4.2.1 → 4.3.1

package/commonjs/builders/buildCSS.js

@@ -186,6 +186,11 @@ function _buildCSSVariables() {
           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");
+
+          // Copy static utility stylesheets into dist (dist is generated + cleaned, so
+          // hand-authored CSS must be copied in during the build).
+          _fs.default.copyFileSync(_path.default.join(__dirname, "../css/scrollbar.css"), _path.default.join(distDir, "scrollbar.css"));
+          console.log("  \u2713 Copied scrollbar utility to dist/scrollbar.css");
           console.log("\n✅ CSS variables built successfully!\n");
         case 1:
           return _context.a(2);

package/commonjs/builders/buildThemeSCSS.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildThemeSCSSFiles = void 0;
+var _fs = _interopRequireDefault(require("fs"));
+var _glob = require("glob");
+var _child_process = require("child_process");
+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); }); }; }
+//@ts-ignore
+var execSyncHelper = function execSyncHelper(command, extraEnv) {
+  return (0, _child_process.execSync)(command, {
+    stdio: "inherit",
+    env: Object.assign({}, process.env, extraEnv)
+  });
+};
+
+// Generate theme.scss and add a copy of _themed.scss to /dist for each theme
+var buildThemeSCSSFiles = exports.buildThemeSCSSFiles = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var themeFiles;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          console.log("Building theme stylesheets");
+
+          // "types" excluded: src/types/theme.ts is a type-only file that happens to
+          // share the "theme" basename with the real theme data modules, and its
+          // compiled output has no runtime keys for json-to-scss to convert.
+          themeFiles = (0, _glob.sync)("./commonjs/**/theme.js", {
+            ignore: "commonjs/types/**"
+          });
+          themeFiles.forEach(function (fileName) {
+            var themeDistDirectory = fileName.replace("commonjs", "dist/themes").replace("/theme.js", "");
+            if (!_fs.default.existsSync(themeDistDirectory)) {
+              _fs.default.mkdirSync(themeDistDirectory, {
+                recursive: true
+              });
+            }
+            execSyncHelper("json-to-scss '".concat(fileName, "' '").concat(themeDistDirectory, "/theme.scss' --k=\"dq\""));
+            execSyncHelper("cp './src/utils/_themed.scss' '".concat(themeDistDirectory, "/_themed.scss'"));
+          });
+        case 1:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return function buildThemeSCSSFiles() {
+    return _ref.apply(this, arguments);
+  };
+}();

package/commonjs/dark/theme.js

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

package/commonjs/light/theme.js

@@ -68,10 +68,9 @@ var colors = exports.colors = _objectSpread(_objectSpread({
       negative_sentiment: _seedsColor.default.COLOR_RED_500,
       neutral_sentiment: _seedsColor.default.COLOR_NEUTRAL_300,
       // 20% AI gradient tint composited over the themed container surface.
-      // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
-      // light/dark automatically (was previously a hardcoded, light-only value
-      // injected by seeds-react-theme-provider).
-      ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
+      // The comma-separated composed value lives in _themed.scss (see comment
+      // there) since a literal comma here breaks SCSS map parsing.
+      ai_generated: "var(--color-container-bg-ai-generated)"
     },
     border: {
       base: _seedsColor.default.COLOR_NEUTRAL_200,

package/dist/scrollbar.css

@@ -0,0 +1,19 @@
+/**
+ * Seeds thin-scrollbar utility.
+ *
+ * Tailwind-hybrid replacement for the legacy styled-components `thinScrollbar`
+ * mixin. Apply `seeds-scrollbar-thin` to any scrollable element.
+ *
+ * Requires @sproutsocial/seeds-react-theme/dist/theme-all.css (or theme.css)
+ * loaded for the --color-menuItem-bg-active variable and dark-mode support.
+ *
+ * Wrapped in `@layer components` so consumer Tailwind utilities (unlayered) win
+ * the cascade over this component-level style.
+ */
+
+@layer components {
+  .seeds-scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-menuItem-bg-active) transparent;
+  }
+}

package/dist/theme-all.css

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #dee1e1;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;
@@ -508,7 +508,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #040404;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;

package/dist/theme-dark.css

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #040404;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;

package/dist/theme.css

@@ -27,7 +27,7 @@
   --color-container-bg-positive_sentiment: #3876e3;
   --color-container-bg-negative_sentiment: #f76054;
   --color-container-bg-neutral_sentiment: #c8cccc;
-  --color-container-bg-ai_generated: var(--color-gradient-ai-subtle), var(--color-container-bg-base);
+  --color-container-bg-ai_generated: var(--color-container-bg-ai-generated);
   --color-container-border-base: #dee1e1;
   --color-container-border-success: #59cb59;
   --color-container-border-warning: #ffbc00;

package/dist/themes/dark/_themed.scss

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

package/dist/themes/dark/theme.scss

@@ -31,7 +31,7 @@ $theme: (
         "positive_sentiment": #3876e3,
         "negative_sentiment": #f76054,
         "neutral_sentiment": #c8cccc,
-        "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+        "ai_generated": var(--color-container-bg-ai-generated)
       ),
       "border": (
         "base": #040404,
@@ -600,7 +600,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #040404,

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

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

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

@@ -85,7 +85,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #040404,

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

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

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

@@ -85,7 +85,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #dee1e1,

package/dist/themes/light/_themed.scss

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

package/dist/themes/light/theme.scss

@@ -42,7 +42,7 @@ $theme: (
         "positive_sentiment": #3876e3,
         "negative_sentiment": #f76054,
         "neutral_sentiment": #c8cccc,
-        "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+        "ai_generated": var(--color-container-bg-ai-generated)
       ),
       "border": (
         "base": #dee1e1,
@@ -611,7 +611,7 @@ $theme: (
           "positive_sentiment": #3876e3,
           "negative_sentiment": #f76054,
           "neutral_sentiment": #c8cccc,
-          "ai_generated": var(--color-gradient-ai-subtle), var(--color-container-bg-base)
+          "ai_generated": var(--color-container-bg-ai-generated)
         ),
         "border": (
           "base": #dee1e1,

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

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

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

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

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

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

package/dist/types/dark/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA3UT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/dark/theme.ts"],"names":[],"mappings":"AAyBA,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAeb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGtD,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA5UT,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA8BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAsMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GtD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/types/light/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAteL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/light/theme.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,WAAW;;;;;CAGvB,CAAC;AAMF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAcb,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;YA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8ItD,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAatB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAarB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,eAAO,MAAM,UAAU,QAA+B,CAAC;AAEvD,eAAO,MAAM,WAAW;;;;;CAKvB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,KAAK;;;;;;;;;;CAUjB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;CAInB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;CAIlB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;CAIpB,CAAC;AAEF,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBApeL,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;gBA6BnD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAyMrD,mDAAmD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RtD,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/builders/buildCSS.js

@@ -184,6 +184,11 @@ function _buildCSSVariables() {
           combinedCSS = generateCombinedCSS();
           fs.writeFileSync(path.join(distDir, "theme-all.css"), combinedCSS, "utf-8");
           console.log("  \u2713 Written combined theme to dist/theme-all.css");
+
+          // Copy static utility stylesheets into dist (dist is generated + cleaned, so
+          // hand-authored CSS must be copied in during the build).
+          fs.copyFileSync(path.join(__dirname, "../css/scrollbar.css"), path.join(distDir, "scrollbar.css"));
+          console.log("  \u2713 Copied scrollbar utility to dist/scrollbar.css");
           console.log("\n✅ CSS variables built successfully!\n");
         case 1:
           return _context.a(2);

package/lib/builders/buildThemeSCSS.js

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

package/lib/dark/theme.js

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

package/lib/light/theme.js

@@ -63,10 +63,9 @@ export var colors = _objectSpread(_objectSpread({
       negative_sentiment: COLORS.COLOR_RED_500,
       neutral_sentiment: COLORS.COLOR_NEUTRAL_300,
       // 20% AI gradient tint composited over the themed container surface.
-      // Driven entirely by the ai-subtle + container-bg tokens so it adapts to
-      // light/dark automatically (was previously a hardcoded, light-only value
-      // injected by seeds-react-theme-provider).
-      ai_generated: "var(--color-gradient-ai-subtle), var(--color-container-bg-base)"
+      // The comma-separated composed value lives in _themed.scss (see comment
+      // there) since a literal comma here breaks SCSS map parsing.
+      ai_generated: "var(--color-container-bg-ai-generated)"
     },
     border: {
       base: COLORS.COLOR_NEUTRAL_200,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "description": "Seeds Theme",
   "main": "commonjs/index.js",
   "module": "lib/index.js",
@@ -23,6 +23,7 @@
     "./css/theme": "./dist/theme.css",
     "./css/theme-dark": "./dist/theme-dark.css",
     "./css/theme-all": "./dist/theme-all.css",
+    "./css/scrollbar": "./dist/scrollbar.css",
     "./css/tailwind-preset": "./dist/tailwind-preset.css"
   },
   "scripts": {
@@ -31,7 +32,9 @@
     "build:css": "tsx src/builders/buildCSS.ts",
     "clean": "rm -rf .turbo dist lib commonjs __flow__",
     "clean:modules": "rm -rf node_modules",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-border": "^1.7.1",
@@ -44,12 +47,15 @@
   },
   "devDependencies": {
     "@sproutsocial/seeds-build": "*",
+    "@sproutsocial/seeds-tsconfig": "*",
     "glob": "^10.3.10",
+    "jest": "^29.7.0",
     "json-to-scss": "^1.6.2",
+    "sass": "^1.50.0",
+    "tsc-alias": "^1.8.11",
+    "ts-jest": "^29.2.5",
     "tsx": "^4.0.0",
-    "typescript": "^5.6.2",
-    "@sproutsocial/seeds-tsconfig": "*",
-    "tsc-alias": "^1.8.11"
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
     "tailwindcss": ">=3.0.0 || >=4.0.0"

package/dist/themes/types/_themed.scss

@@ -1,126 +0,0 @@
-// Inspired by https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
-// This file is excluded from stylelint, because stylelint is only set up to lint styled-components at the moment.
-
-// SET-UP
-// theme.scss is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-// _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");
-
-// FUNCTIONS
-// This function will allow you to get any value from the theme.
-// @param {string} $key - the period-separated path to the value in the theme object. e.g., "colors.text.body"
-@function t($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, $keys);
-}
-
-// The rest of the functions are convenience methods to get theme values for subsets of the theme.
-// @param {string} $key - the period-separated path to the value in the theme object, with "colors." omitted. e.g., "text.body"
-@function colors($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("colors", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "typography." omitted. e.g., "100.fontSize"
-@function typography($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("typography", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "fontWeights." omitted. e.g., "normal"
-@function fontWeights($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("fontWeights", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "space." omitted. e.g., "100"
-@function space($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("space", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "radii." omitted. e.g., "inner"
-@function radii($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("radii", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borders." omitted. e.g., "500"
-@function borders($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borders", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "borderWidths." omitted. e.g., "500"
-@function borderWidths($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("borderWidths", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "shadows." omitted. e.g., "low"
-@function shadows($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("shadows", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "easing." omitted. e.g., "ease_in"
-@function easing($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("easing", $keys));
-}
-
-// @param {string} $key - the period-separated path to the value in the theme object, with "duration." omitted. e.g., "fast"
-@function duration($key) {
-  $keys: _str-split($key, ".");
-  @return _map-deep-get($theme, join("duration", $keys));
-}
-
-// UTILITIES
-// Helper functions that power the functions above. Not relevant to the theme.
-// If you import this file with @use, these functions will be excluded because they are private.
-
-// Via https://stackoverflow.com/a/42295154
-// Used to split period-separated object keys, e.g. "colors.text.body" => ["colors", "text", "body"]
-// Only works with a single-character separator.
-@function _str-split($string, $separator) {
-  // empty array/list
-  $split-arr: ();
-  // first index of separator in string
-  $index: str-index($string, $separator);
-  // loop through string
-  @while $index != null {
-    // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
-    // push item to array
-    $split-arr: append($split-arr, $item);
-    // remove item and separator from string
-    $string: str-slice($string, $index + 1);
-    // find new index of separator
-    $index: str-index($string, $separator);
-  }
-  // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
-
-  @return $split-arr;
-}
-
-// Adapted from https://css-tricks.com/snippets/sass/deep-getset-maps/
-// Iterates over a list of keys to read multi-level maps.
-// e.g., _map-deep-get((colors: (text: (body: "#364141"))), ["colors", "text", "body"]) => "#364141"
-@function _map-deep-get($map, $keys) {
-  @each $key in $keys {
-    $map: map-get($map, $key);
-  }
-  @return $map;
-}