From e9700ee717b9c7d44f04f124b3302bda58f184b0 Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Wed, 29 May 2024 16:01:08 -0700
Subject: [PATCH] perf: replace hardcoded styles with tokens

---
 src/styles/helpText.scss          |  2 +-
 src/styles/input.scss             |  2 +-
 src/styles/label.scss             | 10 +++++-----
 src/styles/notificationIcons.scss | 10 +++++-----
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/styles/helpText.scss b/src/styles/helpText.scss
index c12d1ac..735d0fe 100644
--- a/src/styles/helpText.scss
+++ b/src/styles/helpText.scss
@@ -3,5 +3,5 @@
 .inputElement-helpText {
   margin: var(--ds-size-50, $ds-size-50) 0;
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  line-height: 1rem;
+  line-height: var(--ds-size-200, $ds-size-200);
 }
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 3a6075f..ed84a59 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -16,7 +16,7 @@ input {
 
   margin: 0;
   font-family: var(--ds-font-family-default, $ds-font-family-default);
-  font-size: 1rem;
+  font-size: var(--ds-size-200, $ds-size-200);
   transition: all .3s cubic-bezier(.215, .61, .355, 1);
   outline: none;
 
diff --git a/src/styles/label.scss b/src/styles/label.scss
index ded784a..2012462 100644
--- a/src/styles/label.scss
+++ b/src/styles/label.scss
@@ -13,13 +13,13 @@ label {
 
 :host(:not([bordered])) {
   label {
-    top: calc(100% - 4px);
+    top: calc(100% - var(--ds-size-25, $ds-size-25));
     transform: translateY(-100%);
   }
 
   label {
     &.withIcon {
-      left: calc(32px);
+      left: var(--ds-size-400, $ds-size-400);
     }
   }
 }
@@ -32,20 +32,20 @@ label {
 
   label {
     &.withIcon {
-      left: calc(32px + var(--ds-size-100, $ds-size-100));
+      left: var(--ds-size-500, $ds-size-500);
     }
   }
 
   label {
     &:not(label.withIcon) {
-      left: calc(var(--ds-size-100, $ds-size-100));
+      left: var(--ds-size-100, $ds-size-100);
     }
   }
 }
 
 // active label for non-bordered inputs
 @mixin active-label {
-  top: 4px;
+  top: var(--ds-size-25, $ds-size-25);
   transform: unset;
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
 }
diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss
index 4ce25b5..2e0b471 100644
--- a/src/styles/notificationIcons.scss
+++ b/src/styles/notificationIcons.scss
@@ -8,8 +8,8 @@
   align-items: center;
 
   auro-icon {
-    height: 24px;
-    width: 24px;
+    height: var(--ds-size-300, $ds-size-300);
+    width: var(--ds-size-300, $ds-size-300);
     margin-right: var(--ds-size-100, $ds-size-100);
   }
 }
@@ -31,8 +31,8 @@
 }
 
 .notification {
-  height: 24px;
-  width: 24px;
+  height: var(--ds-size-300, $ds-size-300);
+  width: var(--ds-size-300, $ds-size-300);
 
   &:not(:first-of-type) {
     margin-left: var(--ds-size-100, $ds-size-100);
@@ -52,7 +52,7 @@
   .typeIcon,
   .notificationIcons {
     align-items: flex-end;
-    padding-bottom: 8px;
+    padding-bottom: var(--ds-size-100, $ds-size-100);
   }
 }