Design Changes

src/components/alert/Alert.style.scss

@@ -5,15 +5,12 @@
 
   padding: .5rem;
   margin-bottom: 1rem;
-  min-height: 1.5rem;
-
 
   &__heading {
     font-weight: 500;
   }
 
   &__header {
-    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -30,24 +27,20 @@
   }
 
   &__icon {
-    @include box(false);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: .25rem;
+    color: color($white);
+    width: 1.25rem;
+    height: 1.25rem;
     margin-right: .5rem;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
   }
 
   &__dismissible {
     @include box();
 
-    display: flex;
     width: 1rem;
     height: 1rem;
     padding: .25rem;
@@ -67,7 +60,7 @@
     @include box(false, $color);
 
     .alert__icon {
-      @include box(false, $color);
+      color: color($color);
     }
 
     .alert__content {

src/components/button/Button.style.scss

@@ -10,10 +10,7 @@
   margin-bottom: 1rem;
   width: fit-content;
 
-  &--disabled {
-    opacity: 50%;
-    pointer-events: none;
-  }
+  @include disabled;
 
   &__icon + &__content {
     margin-left: .5rem;
@@ -22,19 +19,17 @@
   }
 
   &__icon {
-    @include box(false);
-
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 1rem;
-    height: 1rem;
-    padding: .25rem;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: color($white);
     cursor: pointer;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
   }
 }
@@ -44,7 +39,7 @@
     @include box(true, $color);
 
     .button__icon {
-      @include box(false, $color);
+      color: color($color);
     }
 
   }

src/components/card/Card.stories.tsx

@@ -39,10 +39,10 @@ export const Test = () => {
         </ListGroup>
         <CardFooter>
             <ButtonGroup>
-                <Button>
+                <Button variant={"secondary"}>
                     Button
                 </Button>
-                <Button>
+                <Button variant={"secondary"}>
                     Button
                 </Button>
             </ButtonGroup>

src/components/dropdown/Dropdown.style.scss

@@ -60,9 +60,7 @@
     border-top: 1px solid borderColor();
     border-bottom: 1px solid borderColor();
 
-    @include hoverAndActiveContent {
-      background: rgba($color, .1);
-    }
+    @include background($color, true);
 
     &:first-of-type {
       border-top: none;

src/components/input/Input.style.scss

@@ -7,10 +7,7 @@
     margin-bottom: 0;
   }
 
-  &--disabled {
-    pointer-events: none;
-    opacity: 50%;
-  }
+  @include disabled;
 
   &__control {
     display: flex;
@@ -48,21 +45,18 @@
   }
 
   &__icon {
-    @include box(false);
-
     display: flex;
-    width: 1rem;
-    height: auto;
+    width: 1.25rem;
+    height: 1.25rem;
     justify-content: center;
     align-items: center;
     aspect-ratio: 50/50;
-    padding: .25rem;
     margin-left: .5rem;
     pointer-events: none;
 
     > * {
-      width: 1rem;
-      height: 1rem;
+      width: 1.25rem;
+      height: 1.25rem;
     }
 
   }
@@ -110,18 +104,6 @@
 
   &--not-valid {
 
-    .input__control {
-      border-color: borderColor(false);
-
-      @include hoverAndActiveContent {
-        border-color: borderColor(true);
-      }
-
-      @include activeContent {
-        outline-color: $error;
-      }
-    }
-
     .input__message {
       display: block;
       background: rgba($error, .1);
@@ -131,18 +113,6 @@
 
   &--valid {
 
-    .input__control {
-      border-color: borderColor(false);
-
-      @include hoverAndActiveContent {
-        border-color: borderColor(true);
-      }
-
-      @include activeContent {
-        outline-color: $success;
-      }
-    }
-
     .input__message {
       display: block;
       background: rgba($success, .1);

src/styles/_helpers.scss

@@ -3,24 +3,17 @@
 
 @mixin box($active: true, $color: $secondary) {
 
-  background: rgba($color, 10%);
+  background: mix($bodyBg, $color, 90%);
+  @include border($active);
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
   font-size: $secondaryFontSize;
-  -webkit-backdrop-filter: blur($borderRadius * 2);
-  backdrop-filter: blur($borderRadius * 2);
-  border: 1px solid borderColor();
   position: relative;
 
   @if ($active == true) {
     @include hoverAndActiveContent {
-      border: 1px solid borderColor(true);
-    }
-
-    @include activeContent {
-      outline: 1px solid $info;
-      outline-offset: 2px;
+      background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%));
     }
   }
 }
@@ -32,11 +25,45 @@
 }
 
 @mixin activeContent() {
-  &--active {
+  &:active, &--active {
     @content
   }
 }
 
-@function borderColor($hover: false) {
-  @return rgba($white, if($hover, 0.2, 0.1))
+@function borderColor($interacted: false) {
+  @return rgba($white, if($interacted, .2, .1))
+}
+
+@mixin border($interact: true) {
+
+  border: 1px solid borderColor();
+
+  @if ($interact) {
+    &:active, &--active {
+      border: 1px solid borderColor(true);
+    }
+  }
+}
+
+@function color($color, $opacity: 0.5) {
+  @return rgba(if($color == $primary, $white, $color), $opacity)
+}
+
+@mixin background($color: $primary, $interact: true) {
+  background: mix($bodyBg, $color, 90%);
+
+  @if ($interact == true) {
+    &:hover, &:active, &--active {
+      background: mix($bodyBg, if($color == $primary, $white, $color), if($color == $primary, 95%, 85%));
+    }
+  }
+}
+
+@mixin disabled {
+
+  &--disabled {
+    opacity: 50%;
+    pointer-events: none;
+  }
+
 }