Helpers and Variables for SCSS

.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
+</style>

src/components/input/Input.stories.tsx

@@ -9,7 +9,9 @@ export default {
 
 export const Mail = () => <Input>
     <Input.Label>e-mail</Input.Label>
-    <Input.Control placeholder={"name@mail.com"}/>
+    <Input.Control placeholder={"name@mail.com"}>
+        <Input.Control.Icon><IconMail/></Input.Control.Icon>
+    </Input.Control>
     <Input.Desc>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</Input.Desc>
 </Input>
 

src/components/input/Input.style.scss

@@ -1,3 +1,5 @@
+@import "../../styles/helpers";
+
 .input {
   margin-bottom: 1rem;
   max-width: 300px;
@@ -12,33 +14,10 @@
   }
 
   &__control {
-    background: rgba(white, .1);
-    border: none;
-    border-radius: .5rem;
     display: flex;
-    position: relative;
     align-items: center;
-    box-shadow: 0 .1rem .1rem rgba(black, .1);
-    overflow: hidden;
-
-    &:before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      border-radius: inherit;
-      padding: 1px; /* control the border thickness */
-      background: linear-gradient(0deg, rgba(white, 0), rgba(white, .1));
-      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-      pointer-events: none;
-    }
 
-    &:hover, &:active, &--focus {
-      &:before {
-        background: linear-gradient(0deg, rgba(white, 0), rgba(white, .25));
-      }
-    }
+    @include box();
   }
 
   &__label {
@@ -69,22 +48,19 @@
   }
 
   &__icon {
-    color: rgba(white, .5);
-    background: rgba(white, .1);
-    border: 1px solid rgba(white, .25);
-    overflow: hidden;
-
     display: flex;
     width: 1rem;
     height: auto;
-    position: relative;
     justify-content: center;
     align-items: center;
     aspect-ratio: 50/50;
     padding: .25rem;
     margin-left: .5rem;
-    border-radius: 100rem;
-    box-shadow: 0 0 1rem rgba(white, .1);
+    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);
 
     > svg {
       width: 1rem;
@@ -125,23 +101,19 @@
       position: absolute;
       content: "";
       width: .5rem;
-      height: 1rem;
-      top: -1rem;
-      border-bottom-left-radius: 50rem;
+      height: .5rem;
+      top: -.5rem;
       left: 0;
-      z-index: -1;
 
     }
 
     &:after {
       position: absolute;
       content: "";
       width: .5rem;
-      height: 1rem;
-      top: -1rem;
-      border-bottom-right-radius: 50rem;
+      height: .5rem;
+      top: -.5rem;
       right: 0;
-      z-index: -1;
 
     }
 
@@ -162,38 +134,41 @@
 
   &--not-valid {
     .input__message {
+
+      $color: mixinColor(#D90429, 2.5);
+
       display: block;
-      background: #3e0019;
+      background: $color;
 
       &:before {
-        background: rgba(#3e0019, 0);
-        box-shadow: 0 .5rem 0 0 #3e0019;
+        background: $color;
 
       }
 
       &:after {
-        background: rgba(#3e0019, 0);
-        box-shadow: 0 .5rem 0 0 #3e0019;
+        background: $color;
       }
 
     }
   }
 
   &--valid {
     .input__message {
+
+      $color: mixinColor(#29BF12, 2.5);
+
       display: block;
-      background: #003110;
+      background: $color;
 
       &:before {
-        background: rgba(#003110, 0);
-        box-shadow: 0 .5rem 0 0 #003110;
+        background: $color;
 
       }
 
       &:after {
-        background: rgba(#003110, 0);
-        box-shadow: 0 .5rem 0 0 #003110;
+        background: $color;
       }
+
     }
   }
 }

src/components/input/Input.tsx

@@ -66,12 +66,12 @@ const InputControl: React.ForwardRefExoticComponent<Omit<InputControlType, "ref"
 
     const onFocus = ((event: React.FocusEvent<HTMLInputElement>) => {
         if (event.target.parentElement)
-            event.target.parentElement.classList.add("input__control--focus")
+            event.target.parentElement.classList.add("input__control--active")
         if (onFocusParam) onFocusParam(event)
     })
     const onBlur = ((event: React.FocusEvent<HTMLInputElement>) => {
         if (event.target.parentElement)
-            event.target.parentElement.classList.remove("input__control--focus")
+            event.target.parentElement.classList.remove("input__control--active")
         if (onBlurParam) onBlurParam(event)
     })
 

src/styles/_helpers.scss

@@ -0,0 +1,65 @@
+@import "variables";
+
+
+@mixin gradientBorder($isPrimary: true) {
+
+  $color: if($isPrimary, $primary, $secondary);
+
+  &:after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px; /* control the border thickness */
+    background: linear-gradient(0deg, rgba($color, 0), rgba($color, .1));
+    -webkit-mask: linear-gradient($color 0 0) content-box, linear-gradient($color 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  &:hover, &:active, &--active {
+    &:after {
+      background: linear-gradient(0deg, rgba($color, 0), rgba($color, .25));
+    }
+  }
+}
+
+@mixin box($level: 1) {
+
+  background: mixinColor($primary, $level);
+  border-radius: $borderRadius;
+  color: rgba($primary, .5);
+  font-family: Ubuntu, sans-serif;
+  font-size: 1rem;
+  box-shadow: 0 .1rem .1rem rgba($black, .1);
+  border: none;
+  position: relative;
+
+  @include gradientBorder(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: none;
+  position: relative;
+
+  @include gradientBorder(false)
+}
+
+
+@function mixinColor($color, $level) {
+  @return mix($color, $bodyBg, 10% * $level);
+}
+
+@function lighten($level) {
+  @return mixinColor(white, $level);
+}
+
+@function darken($level) {
+  @return mixinColor(black, $level);
+}

src/styles/_variables.scss

@@ -0,0 +1,10 @@
+$bodyBg: #030014;
+$primary: #ffffff;
+$secondary: #70ffb2;
+$black: #000000;
+
+//component styling
+$borderRadius: .5rem;
+$primaryFontSize: 1.25rem;
+$secondaryFontSize: 1rem;
+$tertiaryFontSize: .75rem;