_buttons.scss

components/_buttons.scss

@use "../abstracts/" as *;

@layer reset {
  button {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
  }
}  // @layer reset end

@layer default {
  // add more classes if necessary
  button.submit,
  button.primary,
  button.accent,
  button.outline {
    @include button;
    transition: background-color 0.5s ease-in-out,
                color 0.5s ease-in-out;
    &:hover {
      transition: background-color 0.5s ease-in-out,
      color 0.5s ease-in-out;
    }
    &:active {
      transform: scale(0.97);
    }
  }
} // @layer default end

@layer theme {
  button.submit {
    // --button-bg: #{$color-primary-100};
    // --button-color: #{$color-primary-800};
    &:hover {
      // --button-bg: #{$color-primary-700};
      // --button-color: #{$color-primary-100};
    }
  }
  button.primary {
    --button-bg: #{$color-primary-100};
    --button-color: #{$color-primary-800};
    &:hover {
      --button-bg: #{$color-primary-700};
      --button-color: #{$color-primary-100};
    }
  }
  button.accent {
    --button-bg: #{$color-accent-100};
    --button-color: #{$color-accent-800};
    &:hover {
      --button-bg: #{$color-accent-700};
      --button-color: #{$color-accent-100};
    }
  }
  button.outline {
    --button-bg: #{$button-outline-bg};
    --button-color: #{$button-outline-color};
    outline: $button-outline-size solid $button-outline-color;
    outline-offset: calc($button-outline-size * -1);
    &:hover {
      --button-bg: #{$button-outline-bg};
      --button-color: #{$button-outline-color};
    }
  }
}

Check

• @layer theme bei blumenbeete, filzi, plan B, ISP
• ISP hat zusätzlich ein $button-border-color drinnen -> ergänzen?