From 5ed0a74c9d837f7a5da62f0e0d21fb26ba077d40 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Sat, 16 Dec 2023 16:27:36 +0100
Subject: [PATCH 1/4] adjusting the box design for auto layering

---
 src/styles/_helpers.scss   | 55 +++++++++++---------------------------
 src/styles/_variables.scss |  9 ++++---
 2 files changed, 21 insertions(+), 43 deletions(-)

diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index 1bf62334..5be91884 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -1,54 +1,29 @@
 @use "sass:math";
 @import "variables";
 
-@mixin box($level: 0, $color: $primary) {
+@mixin box($active: true, $color: $secondary) {
 
-  @if ($level <= 0) {
-    background: mixinColor($primary, .5);
-  } @else {
-    background: linear-gradient(135deg, mixinColor($color, $level) 0%, mixinColor($color, math.div($level, 2)) 100%);
-  }
+  background: rgba($color, 10%);
   border-radius: $borderRadius;
-  color: rgba($primary, .5);
+  color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
   font-size: $secondaryFontSize;
-  @if ($level >= 2) {
-    box-shadow: 0 .25rem .25rem rgba($black, .2), inset 0 0 0 1px rgba($color, .1);
-  } @else {
-    box-shadow: inset 0 0 0 1px rgba($color, .1);
-  }
+  border: 1px solid borderColor($color);
   position: relative;
 
-
-  &:hover, &:active, &--active {
-
-    @if ($level >= 2) {
-      box-shadow: 0 .25rem .25rem rgba($black, .2), inset 0 0 0 1px rgba($color, .2);
-    } @else {
-      box-shadow: inset 0 0 0 1px rgba($color, .2);
+  @if ($active == true) {
+    &:hover, &:active, &--active {
+      border: 1px solid borderColor($color, true);
     }
-  }
-}
-
-@mixin boxSecondary($level: 1) {
-
-  background: mixinColor($secondary, $level);
-  border-radius: $borderRadius;
-  color: rgba($secondary, .5);
-  box-shadow: 0 .1rem .1rem rgba($black, .1);
-  border: 1px solid rgba($primary, .1);
-  position: relative;
-}
-
 
-@function mixinColor($color, $level) {
-  @return mix($color, $bodyBg, 15% * $level);
-}
+    &--active {
+      outline: 1px solid $info;
+      outline-offset: 2px;
+    }
 
-@function lighten($level) {
-  @return mixinColor(white, $level);
+  }
 }
 
-@function darken($level) {
-  @return mixinColor(black, $level);
-}
+@function borderColor($color: $white, $hover: false) {
+  @return rgba($white, if($hover, 0.2, 0.1))
+}
\ No newline at end of file
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index e99ab8f7..123c9d6e 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,10 +1,12 @@
 $bodyBg: #030014;
-$primary: #ffffff;
-$secondary: #70ffb2;
+$primary: #030014;
+$secondary: #ffffff;
+$info: #70ffb2;
 $success: #29BF12;
 $warning: #FFBE0B;
 $error: #D90429;
 $black: #000000;
+$white: #ffffff;
 
 //component styling
 $borderRadius: .5rem;
@@ -17,5 +19,6 @@ $variants: (
         "secondary": $secondary,
         "success": $success,
         "warning": $warning,
-        "error": $error
+        "error": $error,
+        "info": $info
 )

From 355e1d1c1ed1b05d8a788cac959fc872e2f56694 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Sat, 16 Dec 2023 16:28:28 +0100
Subject: [PATCH 2/4] adding info variant

---
 src/components/alert/Alert.stories.tsx |  4 ++--
 src/components/alert/Alert.style.scss  | 16 ++++++++--------
 src/components/alert/Alert.tsx         |  7 ++++---
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index 12de7e23..d1001323 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -28,7 +28,7 @@ export const WithBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "success", "warning", "error"].map(value => {
+                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
                     // @ts-ignore
                     return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
@@ -51,7 +51,7 @@ export const WithoutBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "success", "warning", "error"].map(value => {
+                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
                     // @ts-ignore
                     return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
                 })
diff --git a/src/components/alert/Alert.style.scss b/src/components/alert/Alert.style.scss
index 461b246a..b5fb1ea3 100644
--- a/src/components/alert/Alert.style.scss
+++ b/src/components/alert/Alert.style.scss
@@ -1,7 +1,7 @@
 @import "../../styles/helpers";
 
 .alert {
-  @include box(1);
+  @include box(false);
 
   padding: .5rem;
   margin-bottom: 1rem;
@@ -30,8 +30,7 @@
   }
 
   &__icon {
-    @include box(2);
-    pointer-events: none;
+    @include box(false);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,7 +45,7 @@
   }
 
   &__dismissible {
-    @include box(2);
+    @include box();
 
     display: flex;
     width: 1rem;
@@ -65,18 +64,19 @@
 
 @each $name, $color in $variants {
   .alert--#{$name} {
-    @include box(1, $color);
+    @include box(false, $color);
 
     .alert__icon {
-      @include box(2, $color);
+      @include box(false, $color);
     }
 
     .alert__content {
-      border-top: 1px solid rgba($color, .1);
+      border-top: 1px solid borderColor($color);
     }
 
     .alert__dismissible {
-      @include box(2, $color);
+      @include box(true, $color);
     }
+
   }
 }
\ No newline at end of file
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index 3a8e22c7..ae25adce 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -6,8 +6,8 @@ export interface AlertType {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
-    //defaults to info
-    variant?: "primary" | "secondary" | "success" | "warning" | "error"
+    //defaults to primary
+    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
     //defaults to true
     icon?: boolean
     //defaults to false
@@ -16,6 +16,7 @@ export interface AlertType {
 }
 
 const IconVariants = {
+    "info": <IconInfoCircle/>,
     "primary": <IconInfoCircle/>,
     "secondary": <IconInfoCircle/>,
     "success": <IconCircleCheck/>,
@@ -49,7 +50,7 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: "primary" | "secondary" | "success" | "warning" | "error"
+    variant: "primary" | "secondary" | "info" | "success" | "warning" | "error"
 }
 
 const AlertIcon: React.FC<AlertIconType> = ({variant}) => {

From faa2f56cb022fd727b3880d9364d89793b6d55a1 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Sat, 16 Dec 2023 16:28:59 +0100
Subject: [PATCH 3/4] new design implementation for input

---
 src/components/input/Input.style.scss | 80 ++++++++-------------------
 1 file changed, 22 insertions(+), 58 deletions(-)

diff --git a/src/components/input/Input.style.scss b/src/components/input/Input.style.scss
index d34126ea..dca42993 100644
--- a/src/components/input/Input.style.scss
+++ b/src/components/input/Input.style.scss
@@ -15,12 +15,13 @@
   &__control {
     display: flex;
     align-items: center;
+    margin-bottom: .5rem;
 
-    @include box(1);
+    @include box();
   }
 
   &__label {
-    color: rgba(white, .5);
+    color: rgba($white, .5);
     font-size: .75rem;
     font-family: Ubuntu, sans-serif;
     margin-bottom: .5rem;
@@ -33,7 +34,7 @@
     display: inline-block;
     background: none;
     width: 100%;
-    color: rgba(white, .5);
+    color: rgba($white, .5);
     font-family: Ubuntu, sans-serif;
     border: none;
     outline: none;
@@ -42,11 +43,13 @@
     font-size: 1rem;
 
     &::placeholder {
-      color: rgba(white, .25);
+      color: rgba($white, .25);
     }
   }
 
   &__icon {
+    @include box(false);
+
     display: flex;
     width: 1rem;
     height: auto;
@@ -57,10 +60,6 @@
     margin-left: .5rem;
     pointer-events: none;
 
-    //first parameter describes weither the box is in primary or secondary style
-    //second parameter describes weither the this box is inside another box
-    @include box(2);
-
     > * {
       width: 1rem;
       height: 1rem;
@@ -70,7 +69,7 @@
 
   &__desc {
     padding-left: 1rem;
-    color: rgba(white, .5);
+    color: rgba($white, .5);
     font-size: .75rem;
     font-family: Ubuntu, sans-serif;
     margin: .5rem 0;
@@ -88,33 +87,11 @@
   &__message {
     display: none;
     position: relative;
-    color: rgba(white, .5);
-    border-radius: 0 0 .5rem .5rem;
+    color: rgba($white, .5);
+    border-radius: $borderRadius;
     font-size: .75rem;
     z-index: -1;
     font-family: Ubuntu, sans-serif;
-    width: 100%;
-    max-width: 100%;
-
-    &:before {
-      position: absolute;
-      content: "";
-      width: .5rem;
-      height: .5rem;
-      top: -.5rem;
-      left: 0;
-
-    }
-
-    &:after {
-      position: absolute;
-      content: "";
-      width: .5rem;
-      height: .5rem;
-      top: -.5rem;
-      right: 0;
-
-    }
 
     > p {
       margin: 0;
@@ -132,42 +109,29 @@
   }
 
   &--not-valid {
-    .input__message {
 
-      $color: mixinColor(#D90429, 1);
+    .input__control {
+      outline: 1px solid $error !important;
+      outline-offset: 2px;
+    }
 
+    .input__message {
       display: block;
-      background: $color;
-
-      &:before {
-        background: $color;
-
-      }
-
-      &:after {
-        background: $color;
-      }
+      background: rgba($error, .1);
 
     }
   }
 
   &--valid {
-    .input__message {
 
-      $color: mixinColor(#29BF12, 1);
+    .input__control {
+      outline: 1px solid $success !important;
+      outline-offset: 2px;
+    }
 
+    .input__message {
       display: block;
-      background: $color;
-
-      &:before {
-        background: $color;
-
-      }
-
-      &:after {
-        background: $color;
-      }
-
+      background: rgba($success, .1);
     }
   }
 }
\ No newline at end of file

From d39dd855a503f4fb42ce5233ed3539e17b01f191 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Sat, 16 Dec 2023 16:54:08 +0100
Subject: [PATCH 4/4] adding mixins for centralized adding over hover, focus
 and active stated of a component

---
 src/components/input/Input.style.scss | 23 +++++++++++++++++++----
 src/styles/_helpers.scss              | 19 +++++++++++++++----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/input/Input.style.scss b/src/components/input/Input.style.scss
index dca42993..9f160814 100644
--- a/src/components/input/Input.style.scss
+++ b/src/components/input/Input.style.scss
@@ -111,8 +111,15 @@
   &--not-valid {
 
     .input__control {
-      outline: 1px solid $error !important;
-      outline-offset: 2px;
+      border-color: borderColor($error, false);
+
+      @include hoverAndActiveContent {
+        border-color: borderColor($error, true);
+      }
+
+      @include activeContent {
+        outline-color: $error;
+      }
     }
 
     .input__message {
@@ -125,13 +132,21 @@
   &--valid {
 
     .input__control {
-      outline: 1px solid $success !important;
-      outline-offset: 2px;
+      border-color: borderColor($success, false);
+
+      @include hoverAndActiveContent {
+        border-color: borderColor($success, true);
+      }
+
+      @include activeContent {
+        outline-color: $success;
+      }
     }
 
     .input__message {
       display: block;
       background: rgba($success, .1);
+
     }
   }
 }
\ No newline at end of file
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index 5be91884..ae69ec25 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -12,18 +12,29 @@
   position: relative;
 
   @if ($active == true) {
-    &:hover, &:active, &--active {
+    @include hoverAndActiveContent {
       border: 1px solid borderColor($color, true);
     }
 
-    &--active {
+    @include activeContent {
       outline: 1px solid $info;
       outline-offset: 2px;
     }
+  }
+}
+
+@mixin hoverAndActiveContent() {
+  &:hover, &:active, &--active {
+    @content
+  }
+}
 
+@mixin activeContent() {
+  &--active {
+    @content
   }
 }
 
 @function borderColor($color: $white, $hover: false) {
-  @return rgba($white, if($hover, 0.2, 0.1))
-}
\ No newline at end of file
+  @return rgba($color, if($hover, 0.2, 0.1))
+}