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

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

/* #region PRIMARY */
.filled:not(.disabled).primary {
  background-color: var(--primary);
  color: var(--white)
}
input.filled:not(.disabled).primary:hover {
  background-color: var(--primary-active);
}
input.filled:not(.disabled).primary:focus {
  background-color: transparent;
  border-color: var(--primary);
  box-shadow: 0 0 0 3.5px rgba(var(--primary-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).primary{
  box-shadow: 0 0 0 2.5px rgba(var(--primary-rgb), 0.25);
}
button.filled:not(.disabled).primary {
  color: var(--white);
}
button.filled:not(.disabled).primary:focus {
  background-color: var(--primary);
}
.filled:not(.disabled).primary.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-primary ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* PRIMARY */

/* #region PRIMARY-LIGHT */
.filled:not(.disabled).primary-light {
  background-color: var(--primary-light);
  color: var(--white)
}
input.filled:not(.disabled).primary-light:hover {
  background-color: var(--primary-light-active);
}
input.filled:not(.disabled).primary-light:focus {
  background-color: transparent;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3.5px rgba(var(--primary-light-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).primary-light{
  box-shadow: 0 0 0 2.5px rgba(var(--primary-light-rgb), 0.25);
}
button.filled:not(.disabled).primary-light {
  color: var(--white);
}
button.filled:not(.disabled).primary-light:focus {
  background-color: var(--primary-light);
}
.filled:not(.disabled).primary-light.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-primary-light ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* PRIMARY-LIGHT */

/* #region SECONDARY */
.filled:not(.disabled).secondary {
  background-color: var(--secondary);
  color: var(--white)
}
input.filled:not(.disabled).secondary:hover {
  background-color: var(--secondary-active);
}
input.filled:not(.disabled).secondary:focus {
  background-color: transparent;
  border-color: var(--secondary);
  box-shadow: 0 0 0 3.5px rgba(var(--secondary-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).secondary{
  box-shadow: 0 0 0 2.5px rgba(var(--secondary-rgb), 0.25);
}
button.filled:not(.disabled).secondary {
  color: var(--white);
}
button.filled:not(.disabled).secondary:focus {
  background-color: var(--secondary);
}
.filled:not(.disabled).secondary.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-secondary ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* SECONDARY */

/* #region SUCCESS */
.filled:not(.disabled).success {
  background-color: var(--success);
  color: var(--white)
}
input.filled:not(.disabled).success:hover {
  background-color: var(--success-active);
}
input.filled:not(.disabled).success:focus {
  background-color: transparent;
  border-color: var(--success);
  box-shadow: 0 0 0 3.5px rgba(var(--success-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).success{
  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), 0.25);
}
button.filled:not(.disabled).success {
  color: var(--white);
}
button.filled:not(.disabled).success:focus {
  background-color: var(--success);
}
.filled:not(.disabled).success.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-success ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* SUCCESS */

/* #region WARNING */
.filled:not(.disabled).warning {
  background-color: var(--warning);
  color: var(--dark)
}
input.filled:not(.disabled).warning:hover {
  background-color: var(--warning-active);
}
input.filled:not(.disabled).warning:focus {
  background-color: transparent;
  border-color: var(--warning);
  box-shadow: 0 0 0 3.5px rgba(var(--warning-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).warning{
  box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.25);
}
button.filled:not(.disabled).warning {
  color: var(--dark);
}
button.filled:not(.disabled).warning:focus {
  background-color: var(--warning);
}
.filled:not(.disabled).warning.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-warning ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* WARNING */

/* #region DANGER */
.filled:not(.disabled).danger {
  background-color: var(--danger);
  color: var(--white)
}
input.filled:not(.disabled).danger:hover {
  background-color: var(--danger-active);
}
input.filled:not(.disabled).danger:focus {
  background-color: transparent;
  border-color: var(--danger);
  box-shadow: 0 0 0 3.5px rgba(var(--danger-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).danger{
  box-shadow: 0 0 0 2.5px rgba(var(--danger-rgb), 0.25);
}
button.filled:not(.disabled).danger {
  color: var(--white);
}
button.filled:not(.disabled).danger:focus {
  background-color: var(--danger);
}
.filled:not(.disabled).danger.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-danger ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* DANGER */

/* #region INFORMATION */
.filled:not(.disabled).information {
  background-color: var(--information);
  color: var(--white)
}
input.filled:not(.disabled).information:hover {
  background-color: var(--information-active);
}
input.filled:not(.disabled).information:focus {
  background-color: transparent;
  border-color: var(--information);
  box-shadow: 0 0 0 3.5px rgba(var(--information-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).information{
  box-shadow: 0 0 0 2.5px rgba(var(--information-rgb), 0.25);
}
button.filled:not(.disabled).information {
  color: var(--white);
}
button.filled:not(.disabled).information:focus {
  background-color: var(--information);
}
.filled:not(.disabled).information.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-information ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* INFORMATION */

/* #region DARK */
.filled:not(.disabled).dark {
  background-color: var(--dark);
  color: var(--white)
}
input.filled:not(.disabled).dark:hover {
  background-color: var(--dark-active);
}
input.filled:not(.disabled).dark:focus {
  background-color: transparent;
  border-color: var(--dark);
  box-shadow: 0 0 0 3.5px rgba(var(--dark-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).dark{
  box-shadow: 0 0 0 2.5px rgba(var(--dark-rgb), 0.25);
}
button.filled:not(.disabled).dark {
  color: var(--white);
}
button.filled:not(.disabled).dark:focus {
  background-color: var(--dark);
}
.filled:not(.disabled).dark.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-dark ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* DARK */

/* #region LIGHT */
.filled:not(.disabled).light {
  background-color: var(--light);
  color: var(--dark)
}
input.filled:not(.disabled).light:hover {
  background-color: var(--light-active);
}
input.filled:not(.disabled).light:focus {
  background-color: transparent;
  border-color: var(--light);
  box-shadow: 0 0 0 3.5px rgba(var(--light-rgb), 0.25);
}
input[type="checkbox"]:checked + span > .ar-checkbox.filled:not(.disabled).light{
  box-shadow: 0 0 0 2.5px rgba(var(--light-rgb), 0.25);
}
button.filled:not(.disabled).light {
  color: var(--dark);
}
button.filled:not(.disabled).light:focus {
  background-color: var(--light);
}
.filled:not(.disabled).light.active {
  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
  animation: clicked-light ease-in-out 750ms 0s 1 normal both;
}
/* #endregion */
/* LIGHT */