Neu : Neumorphism Styles Generator

Welcome to Neu. This is a small library which lets you generate Neumorphism styles for your JS application, just with the input of a color.
To install from npm:

npm install neu-js

The only required parameter for Neu is hue, which defines which color should everything be based on.
To initialize the generator:

var neuStyler= Neu();

The other parameters are:

• Background Color: This would override the hue sent. The hue would be selected based on this.
• Text Color: This would override the text color determined by the hue.
• Primary Color: This would override the primary color determined by the hue.
• Contrast: The contrast between the light and dark shade used in elements.
• Border Radius: The border radius for elements.

Currently Supported styles:

Note: The following code examples are for directly using in core HTML, CSS, JS websites. For React components, use neu-components.

• Body: This sets the overall styles in document.body. To use this,

  document.body.style = neuStyles.body();

• Outset Element: This sets the styles for any elements that define a block in the web page. To use this,

  document.getElementById("block").style = neuStyles.outset(2)

  The parameter to this function is the level of the element. Also add padding to this element as required so that it is rendered properly. (Recommended padding : 40px)
• Inset Element: This sets styles for any inset elements. This is mainly used for user inputs such as text areas.

  document.getElementById("input").style = neuStyles.inset(2)

  The parameter to this function is the level of the element.
• Button: This sets styles for a button. This has 3 functions in it:
  • Style : Used for normal state styles
  • Hover : Used for hover styles
  • Active: Used for active styles
  This can be used as required in your js code. A suggested function which can add all 3 styles together:

       function addButtonStyles(selector,parameters){
                  document.querySelector(selector).style=neuStyles.button(parameters).style();
                  document.querySelector(selector).onmouseenter=()=>{
                      document.getElementById(selector).style = neuStyles.button(parameters).hover();
                  }
                  document.querySelector(selector).onmouseleave=()=>{
                      document.getElementById(selector).style = neuStyles.button(parameters).style();
                  }
                  document.querySelector(selector).onmousedown=()=>{
                      document.getElementById(selector).style = neuStyles.button(parameters).active();
                  }
                  document.querySelector(selector).onmouseup=()=>{
                      document.getElementById(selector).style = neuStyles.button(parameters).style();
                  }
              }
      

  Again, this would be lighter if neu-components is used.

Release Notes:

1.0.2:

Basic version with updated Readme, outset, inset, button and dropdown released.