ar-design/dist/assets/css/core/variants/filled.css

AR Design is a (react | nextjs) ui library.

/* #region BLUE */
.filled:not(.disabled) {
  &.blue {
    background-color: var(--blue-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.blue { 
    background-color: var(--blue-500);

    &:hover {
      background-color: var(--blue-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--blue-300);
      box-shadow: 0 0 0 3.5px var(--blue-100);
    }
  }
}

button.filled:not(.disabled) {
  &.blue { 
    background-color: var(--blue-500);

    &:hover {
      background-color: var(--blue-300);
    }
  }
}
/* #endregion */
/* BLUE */

/* #region PURPLE */
.filled:not(.disabled) {
  &.purple {
    background-color: var(--purple-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.purple { 
    background-color: var(--purple-500);

    &:hover {
      background-color: var(--purple-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--purple-300);
      box-shadow: 0 0 0 3.5px var(--purple-100);
    }
  }
}

button.filled:not(.disabled) {
  &.purple { 
    background-color: var(--purple-500);

    &:hover {
      background-color: var(--purple-300);
    }
  }
}
/* #endregion */
/* PURPLE */

/* #region PINK */
.filled:not(.disabled) {
  &.pink {
    background-color: var(--pink-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.pink { 
    background-color: var(--pink-500);

    &:hover {
      background-color: var(--pink-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--pink-300);
      box-shadow: 0 0 0 3.5px var(--pink-100);
    }
  }
}

button.filled:not(.disabled) {
  &.pink { 
    background-color: var(--pink-500);

    &:hover {
      background-color: var(--pink-300);
    }
  }
}
/* #endregion */
/* PINK */

/* #region RED */
.filled:not(.disabled) {
  &.red {
    background-color: var(--red-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-red ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.red { 
    background-color: var(--red-500);

    &:hover {
      background-color: var(--red-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--red-300);
      box-shadow: 0 0 0 3.5px var(--red-100);
    }
  }
}

button.filled:not(.disabled) {
  &.red { 
    background-color: var(--red-500);

    &:hover {
      background-color: var(--red-300);
    }
  }
}
/* #endregion */
/* RED */

/* #region ORANGE */
.filled:not(.disabled) {
  &.orange {
    background-color: var(--orange-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.orange { 
    background-color: var(--orange-500);

    &:hover {
      background-color: var(--orange-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--orange-300);
      box-shadow: 0 0 0 3.5px var(--orange-100);
    }
  }
}

button.filled:not(.disabled) {
  &.orange { 
    background-color: var(--orange-500);

    &:hover {
      background-color: var(--orange-300);
    }
  }
}
/* #endregion */
/* ORANGE */

/* #region YELLOW */
.filled:not(.disabled) {
  &.yellow {
    background-color: var(--yellow-500) !important;
    color: var(--black) !important;
    
    &.active {
      animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.yellow { 
    background-color: var(--yellow-500);

    &:hover {
      background-color: var(--yellow-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--yellow-300);
      box-shadow: 0 0 0 3.5px var(--yellow-100);
    }
  }
}

button.filled:not(.disabled) {
  &.yellow { 
    background-color: var(--yellow-500);

    &:hover {
      background-color: var(--yellow-300);
    }
  }
}
/* #endregion */
/* YELLOW */

/* #region GREEN */
.filled:not(.disabled) {
  &.green {
    background-color: var(--green-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-green ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.green { 
    background-color: var(--green-500);

    &:hover {
      background-color: var(--green-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--green-300);
      box-shadow: 0 0 0 3.5px var(--green-100);
    }
  }
}

button.filled:not(.disabled) {
  &.green { 
    background-color: var(--green-500);

    &:hover {
      background-color: var(--green-300);
    }
  }
}
/* #endregion */
/* GREEN */

/* #region TEAL */
.filled:not(.disabled) {
  &.teal {
    background-color: var(--teal-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.teal { 
    background-color: var(--teal-500);

    &:hover {
      background-color: var(--teal-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--teal-300);
      box-shadow: 0 0 0 3.5px var(--teal-100);
    }
  }
}

button.filled:not(.disabled) {
  &.teal { 
    background-color: var(--teal-500);

    &:hover {
      background-color: var(--teal-300);
    }
  }
}
/* #endregion */
/* TEAL */

/* #region CYAN */
.filled:not(.disabled) {
  &.cyan {
    background-color: var(--cyan-500) !important;
    color: var(--white) !important;
    
    &.active {
      animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.cyan { 
    background-color: var(--cyan-500);

    &:hover {
      background-color: var(--cyan-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--cyan-300);
      box-shadow: 0 0 0 3.5px var(--cyan-100);
    }
  }
}

button.filled:not(.disabled) {
  &.cyan { 
    background-color: var(--cyan-500);

    &:hover {
      background-color: var(--cyan-300);
    }
  }
}
/* #endregion */
/* CYAN */

/* #region GRAY */
.filled:not(.disabled) {
  &.gray {
    background-color: var(--gray-500) !important;
    color: var(--black) !important;
    
    &.active {
      animation: clicked-gray ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.gray { 
    background-color: var(--gray-500);

    &:hover {
      background-color: var(--gray-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--gray-300);
      box-shadow: 0 0 0 3.5px var(--gray-100);
    }
  }
}

button.filled:not(.disabled) {
  &.gray { 
    background-color: var(--gray-500);

    &:hover {
      background-color: var(--gray-300);
    }
  }
}
/* #endregion */
/* GRAY */

/* #region LIGHT */
.filled:not(.disabled) {
  &.light {
    background-color: var(--light-500) !important;
    color: var(--gray-500) !important;
    
    &.active {
      animation: clicked-light ease-in-out 750ms 0s 1 normal both;
    }
  }
}

input.filled:not(.disabled) {
  &.light { 
    background-color: var(--light-500);

    &:hover {
      background-color: var(--light-300);
    }
    &:focus,&.focused {
      background-color: transparent;
      border-color: var(--light-300);
      box-shadow: 0 0 0 3.5px var(--light-100);
    }
  }
}

button.filled:not(.disabled) {
  &.light { 
    background-color: var(--light-500);

    &:hover {
      background-color: var(--light-300);
    }
  }
}
/* #endregion */
/* LIGHT */