Merge pull request #2 from gradints/dev

allow configuration from theme in addition to plugin.withOptions

Author: christhofer

.eslintrc.js

@@ -4,6 +4,9 @@ module.exports = {
     browser: true,
     es6: true,
   },
+  parserOptions: {
+    ecmaVersion: 2018,
+  },
   rules: {
     'brace-style': 'warn', // [1tbs default, stroustrup, allman]
     'comma-dangle': ['warn', 'always-multiline'],
@@ -24,7 +27,4 @@ module.exports = {
     'space-infix-ops': ['warn'],
     'space-in-parens': ['warn', 'never'],
   },
-  globals: {
-    process: true,
-  },
 }

README.md

@@ -2,11 +2,11 @@
 
 Tailwindcss plugin to customize browser scrollbar.
 
-![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-scrollbar)
+[![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-scrollbar)](https://www.npmjs.com/package/@gradin/tailwindcss-scrollbar)
 ![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-scrollbar)
 ![npm](https://img.shields.io/npm/dw/@gradin/tailwindcss-scrollbar)
 
-[Live Demo](https://play.tailwindcss.com/SeDSnfsxrR)
+[Live Demo](https://play.tailwindcss.com/2Mc2a5IbSY)
 
 ## Installation
 
@@ -18,7 +18,22 @@ npm install -D @gradin/tailwindcss-scrollbar
 yarn add -D @gradin/tailwindcss-scrollbar
 ```
 
-Then add the plugin to `tailwind.config.js` file
+Then add the plugin to `tailwind.config.js` file.
+
+```js
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('@gradin/tailwindcss-scrollbar'),
+  ],
+}
+```
+
+## Configuration
+
+You can customize the size and color of the scrollbar.
 
 ```js
 module.exports = {
@@ -38,6 +53,26 @@ module.exports = {
 }
 ```
 
+To use colors from your theme, you need to override `theme.scrollbar.DEFAULT`.
+
+```js
+module.exports = {
+  theme: {
+    // ...
+    scrollbar: theme => ({
+      DEFAULT: {
+        size: theme('spacing.1'),
+        colors: {
+          track: theme('colors.gray.300'),
+          thumb: theme('colors.gray.100'),
+          thumbHover: theme('colors.gray.600'),
+        }
+      },
+    })
+  },
+}
+```
+
 ## Browser Support
 
 Custom scrollbars are not supported in Firefox or in Edge, prior version 79.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradin/tailwindcss-scrollbar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Tailwindcss plugin to customize scrollbar.",
   "main": "src/index.js",
   "scripts": {},

src/index.js

@@ -1,12 +1,16 @@
 const plugin = require('tailwindcss/plugin')
 
 module.exports = plugin.withOptions(function (options) {
-  return function ({ addBase }) {
-    // const size = options?.size ?? '5px'
-    // const { track, thumb, thumbHover } = options?.colors ?? {}
+  return function ({ addBase, theme }) {
+    const size = options && options.size ? options.size : theme('scrollbar.DEFAULT.size', '5px')
 
-    const size = options && options.size ? options.size : '5px'
-    const { track, thumb, thumbHover } = options && options.colors ? options.colors : {}
+    const optionColors = options && options.colors ? options.colors : {}
+    const defaultColors = theme('scrollbar.DEFAULT.colors', {
+      track: '#f1f1f1',
+      thumb: '#c1c1c1',
+      hover: '#a8a8a8',
+    })
+    const { track, thumb, thumbHover } = { ...defaultColors, ...optionColors }
 
     addBase([
       {
@@ -15,13 +19,13 @@ module.exports = plugin.withOptions(function (options) {
           height: size,
         },
         '::-webkit-scrollbar-track': {
-          background: track ? track : '#f1f1f1',
+          background: track,
         },
         '::-webkit-scrollbar-thumb': {
-          background: thumb ? thumb : '#c1c1c1',
+          background: thumb,
         },
         '::-webkit-scrollbar-thumb:hover': {
-          background: thumbHover ? thumbHover : '#a8a8a8',
+          background: thumbHover,
         },
       },
     ])