Values are now a lot more customisable, each neumorphism effect can b…

…e controlled seperately, better handles lighter colors
sambeevors · Jun 10, 2020 · d71f6d3 · d71f6d3
1 parent 6170439
commit d71f6d3
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules
 yarn-debug.log*
 yarn-error.log*
 .npm
-.yarn-integrity
+.yarn-integrity
+test
diff --git a/README.md b/README.md
@@ -27,66 +27,94 @@ Then just require it as a plugin.
 ```js
 // tailwind.config.js
 module.exports = {
-  plugins: [
-    require('tailwindcss-neumorphism')
-  ]
+  plugins: [require('tailwindcss-neumorphism')],
 }
 ```
 
-The plugin will generate 4 different utilities per color.
+The plugin will generate 4 different utilities per color, in any number of sizes (default 5).
 
 ```css
 .nm-flat-red-500 {
-  background: #D8391E;
-  box-shadow: 0.15em 0.15em 0.3em #A22B17, -0.15em -0.15em 0.3em #E6634D;
+  background: #F56565;
+  box-shadow: 0.2em 0.2em calc(0.2em * 2) #F01414, calc(0.2em * -1) calc(0.2em * -1) calc(0.2em * 2) #F9A6A6;
 }
 
-.nm-convex-red-500 {
-  background: linear-gradient(145deg, #B8301A, #E03E22);
-  box-shadow: 0.15em 0.15em 0.3em #A22B17, -0.15em -0.15em 0.3em #E6634D;
+.nm-concave-red-500 {
+  background: linear-gradient(145deg, #F23434, #F78585);
+  box-shadow: 0.2em 0.2em calc(0.2em * 2) #F01414, calc(0.2em * -1) calc(0.2em * -1) calc(0.2em * 2) #F9A6A6;
 }
 
-.nm-concave-red-500 {
-  background: linear-gradient(145deg, #E03E22, #B8301A);
-  box-shadow: 0.15em 0.15em 0.3em #A22B17, -0.15em -0.15em 0.3em #E6634D;
+.nm-convex-red-500 {
+  background: linear-gradient(145deg, #F78585, #F23434);
+  box-shadow: 0.2em 0.2em calc(0.2em * 2) #F01414, calc(0.2em * -1) calc(0.2em * -1) calc(0.2em * 2) #F9A6A6;
 }
 
 .nm-inset-red-500 {
-  background: #D8391E;
-  box-shadow: inset 0.15em 0.15em 0.3em #A22B17, inset -0.15em -0.15em 0.3em #E6634D;
+  background: linear-gradient(145deg, #F78585, #F23434);
+  box-shadow: inset 0.2em 0.2em calc(0.2em * 2) #F01414, inset calc(0.2em * -1) calc(0.2em * -1) calc(0.2em * 2) #F9A6A6;
 }
+
+.nm-flat-red-500-lg {
+  background: #F56565;
+  box-shadow: 0.4em 0.4em calc(0.4em * 2) #F01414, calc(0.4em * -1) calc(0.4em * -1) calc(0.4em * 2) #F9A6A6;
+}
+
+/* ... */
 ```
 
 ### Colors
 
-By default, neumorphism classes will be generated for all of your colors. Alternatively, you can set these colors explicitly in the config.
+By default, neumorphism classes will be generated for all of your background colors. Alternatively, you can set these colors explicitly in the config under `neumorphismColor`.
 
 ```js
 module.exports = {
   // ...
   theme: {
-    neumorphism: {
+    neumorphismColor: {
       red: {
         100: '#FBEBE9',
         200: '#F5CEC7',
         // ...
-      }
-    }
-  }
+      },
+    },
+  },
+  // ...
+}
+```
+
+### Sizes
+
+You can change the sizes of the generated neumorphisms using the `neumorphismSize` property. There are 5 sizes by default, ranging from `xs` to `xl`. Setting a key of `default` will generate an unsuffixed class. Values can be generated from any valid sizing unit.
+
+```js
+module.exports = {
+  // ...
+  theme: {
+    neumorphismSize: {
+      xs: '0.05em',
+      sm: '0.1em',
+      default: '0.2em',
+      lg: '0.4em',
+      xl: '0.8em',
+    },
+  },
   // ...
 }
 ```
 
 ### Variants
 
-The default variants for neumorphism utilities are `responsive`, `hover` and `focus`. These can be configured [like any other tailwind utility](https://tailwindcss.com/docs/configuring-variants/).
+The default variants for each neumorphism utility are `responsive`, `hover` and `focus`. These can be configured [like any other tailwind utility](https://tailwindcss.com/docs/configuring-variants/), including being toggled on and off individually.
 
 ```js
 module.exports = {
   // ...
   variants: {
-    neumorphism: ['responsive']
-  }
+    neumorphismFlat: ['responsive'],
+    neumorphismConcave: false,
+    neumorphismConvex: ['responsive', 'hover'],
+    neumorphismInset: ['focus', 'active'],
+  },
   // ...
 }
 ```
diff --git a/index.js b/index.js
@@ -28,69 +28,167 @@ const flattenColorPalette = function (colors) {
   return result
 }
 
-module.exports = plugin(function ({ addUtilities, e, theme, variants }) {
-  const pairs = _.flatten(
-    _.map(
-      flattenColorPalette(theme('neumorphism', theme('backgroundColor'))),
-      (value, modifier) => {
-        if (invalidKeywords.includes(value.toLowerCase())) return []
-        let baseColor
-        let shadowColor
-        let highlightColor
-        let shadowGradient
-        let highlightGradient
-
-        try {
-          baseColor = Color(value).hex()
-          shadowColor = Color(value).darken(0.25).hex()
-          highlightColor = Color(value).lighten(0.25).hex()
-          shadowGradient = Color(value).darken(0.15).hex()
-          highlightGradient = Color(value).lighten(0.05).hex()
-        } catch {
+const generateShades = (color) => {
+  try {
+    return {
+      baseColor: Color(color).hex(),
+      shadowColor: Color(color).isDark()
+        ? Color(color).darken(0.3).hex()
+        : Color(color).darken(0.25).hex(),
+      highlightColor: Color(color).isLight()
+        ? Color(color).lighten(0.2).hex()
+        : Color(color).lighten(0.25).hex(),
+      shadowGradient: Color(color).isDark()
+        ? Color(color).darken(0.2).hex()
+        : Color(color).darken(0.15).hex(),
+      highlightGradient: Color(color).isLight()
+        ? Color(color).lighten(0.1).hex()
+        : Color(color).lighten(0.05).hex(),
+    }
+  } catch {
+    return false
+  }
+}
+
+module.exports = plugin(
+  function ({ addUtilities, e, theme, variants }) {
+    const nmFlatPairs = []
+    _.forEach(
+      flattenColorPalette(theme('neumorphismColor', theme('backgroundColor'))),
+      (color, colorKey) => {
+        if (invalidKeywords.includes(color.toLowerCase())) return []
+        let shades = generateShades(color)
+        if (!shades) {
           console.log(
-            `tailwind-neumorphism: Something went wrong generating shades of '${modifier}' (${value}). Skipping.`
+            `tailwind-neumorphism: Something went wrong generating shades of '${colorKey}' (${color}). Skipping.`
           )
-          return []
+          return false
         }
 
-        return [
-          [
-            `.${e(`nm-flat-${modifier}`)}`,
+        _.forEach(theme('neumorphismSize'), (size, sizeKey) => {
+          nmFlatPairs.push([
+            sizeKey.toLowerCase() === 'default'
+              ? `.${e(`nm-flat-${colorKey}`)}`
+              : `.${e(`nm-flat-${colorKey}-${sizeKey}`)}`,
             {
-              background: baseColor,
-              boxShadow: `0.15em 0.15em 0.3em ${shadowColor}, -0.15em -0.15em 0.3em ${highlightColor};`,
+              background: shades.baseColor,
+              boxShadow: `${size} ${size} calc(${size} * 2) ${shades.shadowColor}, calc(${size} * -1) calc(${size} * -1) calc(${size} * 2) ${shades.highlightColor}`,
             },
-          ],
-          [
-            `.${e(`nm-concave-${modifier}`)}`,
+          ])
+        })
+      }
+    )
+
+    addUtilities(
+      _.fromPairs(nmFlatPairs),
+      variants('neumorphismFlat', ['responsive', 'hover', 'focus'])
+    )
+
+    const nmConcavePairs = []
+    _.forEach(
+      flattenColorPalette(theme('neumorphismColor', theme('backgroundColor'))),
+      (color, colorKey) => {
+        if (invalidKeywords.includes(color.toLowerCase())) return []
+        let shades = generateShades(color)
+        if (!shades) {
+          console.log(
+            `tailwind-neumorphism: Something went wrong generating shades of '${colorKey}' (${color}). Skipping.`
+          )
+          return false
+        }
+
+        _.forEach(theme('neumorphismSize'), (size, sizeKey) => {
+          nmConcavePairs.push([
+            sizeKey.toLowerCase() === 'default'
+              ? `.${e(`nm-concave-${colorKey}`)}`
+              : `.${e(`nm-concave-${colorKey}-${sizeKey}`)}`,
             {
-              background: `linear-gradient(145deg, ${highlightGradient}, ${shadowGradient});`,
-              boxShadow: `0.15em 0.15em 0.3em ${shadowColor}, -0.15em -0.15em 0.3em ${highlightColor};`,
+              background: `linear-gradient(145deg, ${shades.shadowGradient}, ${shades.highlightGradient})`,
+              boxShadow: `${size} ${size} calc(${size} * 2) ${shades.shadowColor}, calc(${size} * -1) calc(${size} * -1) calc(${size} * 2) ${shades.highlightColor}`,
             },
-          ],
-          [
-            `.${e(`nm-convex-${modifier}`)}`,
+          ])
+        })
+      }
+    )
+
+    addUtilities(
+      _.fromPairs(nmConcavePairs),
+      variants('neumorphismConcave', ['responsive', 'hover', 'focus'])
+    )
+
+    const nmConvexPairs = []
+    _.forEach(
+      flattenColorPalette(theme('neumorphismColor', theme('backgroundColor'))),
+      (color, colorKey) => {
+        if (invalidKeywords.includes(color.toLowerCase())) return []
+        let shades = generateShades(color)
+        if (!shades) {
+          console.log(
+            `tailwind-neumorphism: Something went wrong generating shades of '${colorKey}' (${color}). Skipping.`
+          )
+          return false
+        }
+
+        _.forEach(theme('neumorphismSize'), (size, sizeKey) => {
+          nmConvexPairs.push([
+            sizeKey.toLowerCase() === 'default'
+              ? `.${e(`nm-convex-${colorKey}`)}`
+              : `.${e(`nm-convex-${colorKey}-${sizeKey}`)}`,
             {
-              background: `linear-gradient(145deg, ${shadowGradient}, ${highlightGradient});`,
-              boxShadow: `0.15em 0.15em 0.3em ${shadowColor}, -0.15em -0.15em 0.3em ${highlightColor};`,
+              background: `linear-gradient(145deg, ${shades.highlightGradient}, ${shades.shadowGradient})`,
+              boxShadow: `${size} ${size} calc(${size} * 2) ${shades.shadowColor}, calc(${size} * -1) calc(${size} * -1) calc(${size} * 2) ${shades.highlightColor}`,
             },
-          ],
-          [
-            `.${e(`nm-inset-${modifier}`)}`,
+          ])
+        })
+      }
+    )
+
+    addUtilities(
+      _.fromPairs(nmConvexPairs),
+      variants('neumorphismConvex', ['responsive', 'hover', 'focus'])
+    )
+
+    const nmInsetPairs = []
+    _.forEach(
+      flattenColorPalette(theme('neumorphismColor', theme('backgroundColor'))),
+      (color, colorKey) => {
+        if (invalidKeywords.includes(color.toLowerCase())) return []
+        let shades = generateShades(color)
+        if (!shades) {
+          console.log(
+            `tailwind-neumorphism: Something went wrong generating shades of '${colorKey}' (${color}). Skipping.`
+          )
+          return false
+        }
+
+        _.forEach(theme('neumorphismSize'), (size, sizeKey) => {
+          nmInsetPairs.push([
+            sizeKey.toLowerCase() === 'default'
+              ? `.${e(`nm-inset-${colorKey}`)}`
+              : `.${e(`nm-inset-${colorKey}-${sizeKey}`)}`,
             {
-              background: baseColor,
-              boxShadow: `inset 0.15em 0.15em 0.3em ${shadowColor}, inset -0.15em -0.15em 0.3em ${highlightColor};`,
+              background: `linear-gradient(145deg, ${shades.highlightGradient}, ${shades.shadowGradient})`,
+              boxShadow: `inset ${size} ${size} calc(${size} * 2) ${shades.shadowColor}, inset calc(${size} * -1) calc(${size} * -1) calc(${size} * 2) ${shades.highlightColor}`,
             },
-          ],
-        ]
+          ])
+        })
       }
     )
-  )
-
-  const utilities = _.fromPairs(pairs)
 
-  addUtilities(
-    utilities,
-    variants('neumorphism', ['responsive', 'hover', 'focus'])
-  )
-})
+    addUtilities(
+      _.fromPairs(nmInsetPairs),
+      variants('neumorphismInset', ['responsive', 'hover', 'focus'])
+    )
+  },
+  {
+    theme: {
+      neumorphismSize: {
+        xs: '0.05em',
+        sm: '0.1em',
+        default: '0.2em',
+        lg: '0.4em',
+        xl: '0.8em',
+      },
+    },
+  }
+)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss-neumorphism",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Generate soft UI CSS code using tailwindcss",
   "main": "index.js",
   "files": [