Styling

The color props are available to the Button (and related components like ButtonGroup and IconButton), ToggleSwitch, Range, Checkbox and Radio. The 'disabled' prop can be applied to the component regardless of whether the styling is passed from the props or overwritten with custom CSS.

Overwrite Button component styles by wrapping them in a div and declaring the styling for the button element. Change the background color, text color, add hover effects, etc. The font-family in the Button component is set to 'inherit', but that can easily be overwritten as well.

button {
  transition: 0.2s;

    &:hover {
        box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.5);
    }
}

button {
  outline: lawngreen solid 3px;
  color: lawngreen;     
}

button {
  background-color: lawngreen;
  color: darkgreen;
}

button {
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  color: lawngreen;
}
  

Because components like the ToggleSwitch are made up of a checkbox with other elements and pseudo-classes that create the look of a switch, you must style all of the relevant parts that make up the component.

input:checked + span::before {
  background-color: mediumvioletred;
  }
    & span {
      background-color: mediumturquoise;
      &:hover {
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
              }
    &::before {
   background-color: mediumvioletred;
    }
}
  

Styling the Range component also requires getting ahold of all of the relevant elements. Be aware that in order to get consistent styling across browsers, you must declare styles for webkit(Safari) and moz(Firefox).

input {
  background-color: mediumturquoise;
  
  &::-webkit-slider-thumb {
      background: lawngreen;
      border: darkgreen 2px solid;
  }
  &::-moz-range-thumb {
      background: lawngreen;
      border: darkgreen 2px solid;
  }
  &:focus::-webkit-slider-thumb {
      outline: max(2px, 0.2em) solid darkgreen;
      outline-offset: max(2px, 0.15em);
  }
  &:focus::-moz-range-thumb {
      outline: max(2px, 0.2em) solid darkgreen;
      outline-offset: max(2px, 0.15em);
  }
}
  

• The Modal is open to virtually any styling option, as whatever content you like needs only to be wrapped in the Modal component.
• The Card component is more rigid with its styling, as the background is already set to respond to a light and dark theme. However, of course the button styling and image are still open to be re-styled to your liking.
• While the components in Módulo UI as well as this website were styled with Emotion/Styled, you can feel free to use vanilla CSS, virtually any preprocessor, or virtually any CSS-in-JS system instead.