Merge pull request #24 from bitovi/feature/display-test

Update SCSS variables from Figma
bitovi · Jan 14, 2025 · 24bdedb · 24bdedb
2 parents de7c156 + 97a549c
commit 24bdedb
Showing 1 changed file with 20 additions and 12 deletions.
diff --git a/src/sass/_source.sass b/src/sass/_source.sass
@@ -1,13 +1,14 @@
 // Generated SCSS Variables
 $base-colour-blue-200: #8bc4ff
+$global-font-uidefaultfont: Inter
 $base-font-size-xl: 20px
-$base-font-weight-semibold: 500px
+$base-font-weight-semibold: 500
 $base-font-linespacing-lg: 24px
-$global-font-uidefaultfont: Inter
 $base-colour-static-white: #ffffff
 $base-colour-grey-100: #d9d9d9
+$base-size-lg: 12px
 $global-colour-textonlight: #282828
-$base-font-weight-regular: 400px
+$base-font-weight-regular: 400
 $base-colour-pink-300: #cd0087
 $base-colour-grey-300: #747474
 $base-colour-pink-100: #ffc6e0
@@ -22,16 +23,16 @@ $brand-colour-accent-300: #0177cc
 
 @mixin input_resting_label
   color: $base-colour-blue-200
+  font-family: $global-font-uidefaultfont
   font-size: $base-font-size-xl
   font-weight: $base-font-weight-semibold
   line-height: $base-font-linespacing-lg
-  font-family: $global-font-uidefaultfont
 
 @mixin input_resting_input-box
   display: flex
   flex-direction: row
   align-items: flex-start
-  gap: 12px
+  gap: $base-size-lg
   padding: 11px 12px
   background-color: $base-colour-static-white
   border-color: $base-colour-grey-100
@@ -40,8 +41,10 @@ $brand-colour-accent-300: #0177cc
 
 @mixin input_resting_input-box_input-text
   color: $global-colour-textonlight
-  font-weight: $base-font-weight-regular
   font-family: $global-font-uidefaultfont
+  font-size: 16px
+  font-weight: $base-font-weight-regular
+  line-height: 20px
 
 @mixin input_hover
   display: flex
@@ -51,16 +54,16 @@ $brand-colour-accent-300: #0177cc
 
 @mixin input_hover_label
   color: $base-colour-pink-300
+  font-family: $global-font-uidefaultfont
   font-size: $base-font-size-xl
   font-weight: $base-font-weight-semibold
   line-height: $base-font-linespacing-lg
-  font-family: $global-font-uidefaultfont
 
 @mixin input_hover_input-box
   display: flex
   flex-direction: row
   align-items: flex-start
-  gap: 12px
+  gap: $base-size-lg
   padding: 11px 12px
   background-color: $base-colour-static-white
   border-color: $base-colour-grey-300
@@ -69,8 +72,10 @@ $brand-colour-accent-300: #0177cc
 
 @mixin input_hover_input-box_input-text
   color: $global-colour-textonlight
-  font-weight: $base-font-weight-regular
   font-family: $global-font-uidefaultfont
+  font-size: 16px
+  font-weight: $base-font-weight-regular
+  line-height: 20px
 
 @mixin input_active
   display: flex
@@ -80,22 +85,25 @@ $brand-colour-accent-300: #0177cc
 
 @mixin input_active_label
   color: $base-colour-pink-100
+  font-family: $global-font-uidefaultfont
   font-size: $base-font-size-xl
   font-weight: $base-font-weight-semibold
   line-height: $base-font-linespacing-lg
-  font-family: $global-font-uidefaultfont
 
 @mixin input_active_input-box
   display: flex
   flex-direction: row
   align-items: flex-start
-  gap: 12px
+  gap: $base-size-lg
   padding: 11px 12px
   background-color: $base-colour-static-white
   border-color: $brand-colour-accent-300
   border-width: 2px
 
 @mixin input_active_input-box_input-text
   color: $global-colour-textonlight
+  font-family: $global-font-uidefaultfont
+  font-size: 16px
   font-weight: $base-font-weight-regular
-  font-family: $global-font-uidefaultfont
+  line-height: 20px
+