@szum-tech/design-system 1.1.5 → 1.1.6

package/README.md

@@ -52,7 +52,7 @@ module.exports = {
     extend: {}
   },
   plugins: [],
-  presets: [require("@szum-tech/design-system/tailwind-preset")]
+  presets: [require("@szum-tech/design-system/tailwindcss/main-preset")]
 };
 ```
 
@@ -61,7 +61,7 @@ module.exports = {
 > Import CSS file from `@szum-tech/design-system/theme` with colors palette for dark and light theme and default styles (see file with [theme styles](https://github.com/JanSzewczyk/design-system/blob/main/src/theme/global.css))
 
 ```css
-@import "@szum-tech/design-system/theme/global.css";
+@import "@szum-tech/design-system/tailwindcss/global.css";
 
 @tailwind base;
 @tailwind components;

package/dist/index.js

@@ -12,7 +12,7 @@ var React2__default = /*#__PURE__*/_interopDefaultLegacy(React2);
 // src/components/index.tsx
 function Button() {
   return /* @__PURE__ */ jsxRuntime.jsx("button", {
-    className: "rounded-lg border border-red-800 bg-red-300 p-4",
+    className: "scroll rounded-lg border border-red-800 bg-red-300 p-4",
     children: "button"
   });
 }

package/dist/index.mjs

@@ -4,7 +4,7 @@ import React2 from 'react';
 // src/components/index.tsx
 function Button() {
   return /* @__PURE__ */ jsx("button", {
-    className: "rounded-lg border border-red-800 bg-red-300 p-4",
+    className: "scroll rounded-lg border border-red-800 bg-red-300 p-4",
     children: "button"
   });
 }

package/package.json

@@ -50,8 +50,7 @@
   },
   "files": [
     "dist/**",
-    "tailwind-preset.js",
-    "theme/**"
+    "tailwindcss/**"
   ],
   "homepage": "https://github.com/JanSzewczyk/design-system#readme",
   "keywords": [
@@ -83,17 +82,16 @@
     "clean": "rm -rf node_modules && rm -rf dist",
     "dev": "concurrently \"npm run dev:css\" \"npm run dev:build\"",
     "dev:build": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
-    "dev:css": "tailwindcss -w -i ./src/theme/global.css -o ./src/styles/default.css",
-    "postbuild": "cpy './theme' '../' --cwd='src'",
+    "dev:css": "tailwindcss -w -i tailwindcss/global.css -o src/styles/default.css",
     "storybook": "start-storybook -p 6006",
     "semantic-release": "semantic-release",
     "build:storybook": "build-storybook",
     "build:storybook:docs": "build-storybook --docs",
-    "prebuild:storybook": "tailwindcss -i ./src/theme/global.css -o ./src/styles/default.css"
+    "prebuild:storybook": "tailwindcss -i tailwindcss/global.css -o src/styles/default.css"
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "peerDependencies": {
     "react": "^18.2.0",
     "tailwind-scrollbar": "^2.0.1",

package/{theme → tailwindcss}/global.css

@@ -121,12 +121,6 @@
   }
 
   body {
-    @apply app-scroll bg-gray-900 font-sans text-typography-primary antialiased;
-  }
-}
-
-@layer components {
-  .app-scroll {
-    @apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80;
+    @apply scroll bg-gray-900 font-sans text-typography-primary antialiased;
   }
 }

package/{tailwind-preset.js → tailwindcss/main-preset.js}

@@ -87,5 +87,5 @@ module.exports = {
       }
     }
   },
-  plugins: [require("tailwind-scrollbar")]
+  plugins: [require("tailwind-scrollbar"), require("./plugins/components")]
 };

package/tailwindcss/plugins/components.js

@@ -0,0 +1,10 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addComponents }) {
+  addComponents({
+    ".scroll": {
+      "@apply scrollbar scrollbar-thin scrollbar-thumb-gray-600/100 hover:scrollbar-thumb-gray-600/80":
+        {}
+    }
+  });
+});