perf: replace hardcoded styles with tokens

AlaskaAirlines · Jun 14, 2024 · 7d348b0 · 7d348b0
1 parent a1746ef
commit 7d348b0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
   }
 }