refactor: button + alert

scss/_buttons.scss

@@ -13,15 +13,11 @@
     }
   }
 
-  @include hover-focus() {
-    cursor: pointer;
-  }
-
   // Disabled comes first so active can properly restyle
   &.disabled,
   &:disabled {
     cursor: not-allowed;
-    background-color: $gray-disabled;
+    //background-color: $gray-disabled;
     opacity: 1;
   }
 
@@ -30,27 +26,33 @@
   }
 
   &-default {
-    @include ps-button-outline-variant(var(--#{$cdk}primary-800), var(--#{$cdk}primary-800), "default");
+    @include ps-button-outline-variant(var(--#{$cdk}primary-500), var(--#{$cdk}primary-800), "secondary");
   }
 
   &-link {
     > .material-icons {
       // css trick to remove icon underline on hover
       float: left;
     }
+
+    @include disabled() {
+      color: var(--#{$cdk}primary-500);
+      background-color: var(--#{$cdk}white);
+      border-color: var(--#{$cdk}white);
+    }
   }
 
-  &:focus,
-  &:active:focus,
-  &:focus-visible,
-  &:active,
-  &.focus {
+  @include focus-active() {
     z-index: 1;
     outline: var(--#{$cdk}size-2) solid $outline-color;
     outline-offset: var(--#{$cdk}size-2);
     /* stylelint-disable-next-line */
     box-shadow: none !important;
   }
+
+  @include disabled() {
+    outline: 0;
+  }
 }
 
 @each $color, $value in $theme-colors {

scss/_functions.scss

@@ -6,6 +6,18 @@
   @return map-get($theme-colors-active, $key);
 }
 
+@function theme-color-light($key: "primary") {
+  @return map-get($theme-colors-light, $key);
+}
+
+@function theme-color-light-hover($key: "primary") {
+  @return map-get($theme-colors-light-hover, $key);
+}
+
+@function theme-color-light-active($key: "primary") {
+  @return map-get($theme-colors-light-active, $key);
+}
+
 @function theme-color-background($key: "primary") {
   @return map-get($theme-colors-background, $key);
 }

scss/_variables.scss

@@ -95,24 +95,36 @@ $theme-colors: (
 );
 
 $alerts-background-colors: (
+  "primary": var(--#{$cdk}primary-400, #dddddd),
+  "secondary": var(--#{$cdk}white, #ffffff),
   "success": var(--#{$cdk}green-50, #eaf8ef),
   "info": var(--#{$cdk}blue-50, #e8edfd),
   "warning": var(--#{$cdk}yellow-50, #fff5e5),
   "danger": var(--#{$cdk}red-50, #ffe4e6),
+  "light": var(--#{$cdk}white, #ffffff),
+  "dark": var(--#{$cdk}primary-500, #bbbbbb),
 );
 
 $alerts-second-colors: (
+  "primary": var(--#{$cdk}primary-800, #1b1c1d),
+  "secondary": var(--#{$cdk}primary-800, #1b1c1d),
   "success": var(--#{$cdk}green-500, #207f4b),
   "info": var(--#{$cdk}blue-500, #174eef),
   "warning": var(--#{$cdk}yellow-500, #ffa000),
   "danger": var(--#{$cdk}red-500, #ba151a),
+  "light": var(--#{$cdk}primary-400, #dddddd),
+  "dark": var(--#{$cdk}primary-800, #1b1c1d),
 );
 
 $theme-alerts-icons: (
+  primary: "\e000",
+  secondary: "\e000",
   success: "\e86c",
   info: "\e88e",
   warning: "\e002",
   danger: "\e000",
+  light: "\e000",
+  dark: "\e000",
 );
 
 $theme-colors-icons: (
@@ -128,25 +140,61 @@ $theme-colors-icons: (
 $theme-colors-hover: (
   primary: $primary-hover,
   secondary: $secondary-hover,
-  success: adjust-color(adjust-hue(lighten(map-get($theme-colors, "success"), 18%), -8deg), $saturation: -20%),
-  info: adjust-color(adjust-hue(lighten(map-get($theme-colors, "info"), 18%), -8deg), $saturation: -20%),
-  warning: adjust-color(adjust-hue(lighten(map-get($theme-colors, "warning"), 18%), -8deg), $saturation: -20%),
-  danger: adjust-color(adjust-hue(lighten(map-get($theme-colors, "danger"), 18%), -8deg), $saturation: -20%),
+  success: map-get($map: $cdk-green, $key: "green-300"),
+  info: map-get($map: $cdk-blue, $key: "blue-300"),
+  warning: map-get($map: $cdk-yellow, $key: "yellow-300"),
+  danger: map-get($map: $cdk-red, $key: "red-300"),
   light: $gray-700,
   dark: $gray-700,
-  default: $light-blue,
+  default: map-get($map: $cdk-primary, $key: "primary-300"),
 );
 
 $theme-colors-active: (
   primary: $primary-active,
   secondary: $secondary-active,
-  success: darken(map-get($theme-colors, "success"), 8%),
-  info: darken(map-get($theme-colors, "info"), 8%),
-  warning: darken(map-get($theme-colors, "warning"), 8%),
-  danger: darken(map-get($theme-colors, "danger"), 8%),
+  success: map-get($map: $cdk-green, $key: "green-500"),
+  info: map-get($map: $cdk-blue, $key: "blue-500"),
+  warning: map-get($map: $cdk-yellow, $key: "yellow-500"),
+  danger: map-get($map: $cdk-red, $key: "red-500"),
   light: darken(map-get($theme-colors, "light"), 8%),
   dark: darken(map-get($theme-colors, "dark"), 8%),
-  default: $primary,
+  default: map-get($map: $cdk-primary, $key: "primary-400"),
+);
+
+$theme-colors-light: (
+  primary: map-get($map: $cdk-primary, $key: "primary-400"),
+  secondary: map-get($map: $cdk-common, $key: "white"),
+  success: map-get($map: $cdk-green, $key: "green-50"),
+  info: map-get($map: $cdk-blue, $key: "blue-50"),
+  warning: map-get($map: $cdk-yellow, $key: "yellow-50"),
+  danger: map-get($map: $cdk-red, $key: "red-50"),
+  light: map-get($map: $cdk-common, $key: "white"),
+  dark: map-get($map: $cdk-primary, $key: "primary-500"),
+  default: map-get($map: $cdk-primary, $key: "primary-400"),
+);
+
+$theme-colors-light-hover: (
+  primary: map-get($map: $cdk-primary, $key: "primary-300"),
+  secondary: map-get($map: $cdk-primary, $key: "primary-300"),
+  success: map-get($map: $cdk-green, $key: "green-100"),
+  info: map-get($map: $cdk-blue, $key: "blue-100"),
+  warning: map-get($map: $cdk-yellow, $key: "yellow-100"),
+  danger: map-get($map: $cdk-red, $key: "red-100"),
+  light: map-get($map: $cdk-common, $key: "white"),
+  dark: map-get($map: $cdk-primary, $key: "primary-600"),
+  default: map-get($map: $cdk-primary, $key: "primary-300"),
+);
+
+$theme-colors-light-active: (
+  primary: map-get($map: $cdk-primary, $key: "primary-400"),
+  secondary: map-get($map: $cdk-primary, $key: "primary-400"),
+  success: map-get($map: $cdk-green, $key: "green-300"),
+  info: map-get($map: $cdk-blue, $key: "blue-300"),
+  warning: map-get($map: $cdk-yellow, $key: "yellow-300"),
+  danger: map-get($map: $cdk-red, $key: "red-300"),
+  light: map-get($map: $cdk-common, $key: "white"),
+  dark: map-get($map: $cdk-primary, $key: "primary-400"),
+  default: map-get($map: $cdk-primary, $key: "primary-400"),
 );
 
 $theme-colors-background: (

scss/export/_theme.scss

@@ -14,6 +14,18 @@
     theme-colors-active-#{$name}: $value;
   }
 
+  @each $name, $value in $theme-colors-light {
+    theme-colors-light-#{$name}: $value;
+  }
+
+  @each $name, $value in $theme-colors-light-hover {
+    theme-colors-light-hover-#{$name}: $value;
+  }
+
+  @each $name, $value in $theme-colors-light-active {
+    theme-colors-light-active-#{$name}: $value;
+  }
+
   @each $name, $value in $theme-colors-background {
     theme-colors-background-#{$name}: $value;
   }