@sproutsocial/seeds-react-theme 4.2.1 → 4.3.0

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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-theme",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "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": {