@szum-tech/design-system 1.1.7 → 1.2.0

package/README.md

@@ -23,14 +23,14 @@ Szum-Tech Design System is available as an [npm package](https://www.npmjs.com/p
 
 ```sh
 npm install @szum-tech/design-system
-npm install -D tailwindcss tailwind-scrollbar 
+npm install -D tailwindcss tailwind-scrollbar @tailwindcss/container-queries
 ```
 
 **yarn:**
 
 ```sh
 yarn add @szum-tech/design-system
-yarn add -D tailwindcss tailwind-scrollbar
+yarn add -D tailwindcss tailwind-scrollbar @tailwindcss/container-queries
 ```
 
 ## Configuration 

package/package.json

@@ -24,6 +24,7 @@
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.13",
+    "@tailwindcss/container-queries": "^0.1.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/prettier": "^2.7.1",
@@ -50,8 +51,7 @@
   },
   "files": [
     "dist/**",
-    "tailwindcss/main-preset.js",
-    "tailwindcss/global.css"
+    "tailwindcss/**"
   ],
   "homepage": "https://github.com/JanSzewczyk/design-system#readme",
   "keywords": [
@@ -92,8 +92,9 @@
   },
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "peerDependencies": {
+    "@tailwindcss/container-queries": "^0.1.0",
     "react": "^18.2.0",
     "tailwind-scrollbar": "^2.0.1",
     "tailwindcss": "^3.2.1"

package/tailwindcss/main-preset.js

@@ -87,5 +87,9 @@ module.exports = {
       }
     }
   },
-  plugins: [require("tailwind-scrollbar"), require("./plugins/components")]
+  plugins: [
+    require("@tailwindcss/container-queries"),
+    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":
+        {}
+    }
+  });
+});