adding variables for repeated sizes

fortanix · Nov 19, 2024 · 37bd86e · 37bd86e
1 parent 0bf25a4
commit 37bd86e
Showing 1 changed file with 8 additions and 4 deletions.
diff --git a/src/components/forms/controls/Tag/Tag.module.scss b/src/components/forms/controls/Tag/Tag.module.scss
@@ -8,20 +8,24 @@
   .bk-tag {
     @include bk.component-base(bk-tag);
 
+    --small-padding: 2px; // currently missing from Figma
+
     background: bk.$theme-tag-background-default;
     border-radius: 2px;
     color: bk.$theme-tag-text-default;
     display: flex;
     align-items: center;
     font-size: bk.$font-size-xs;
-    padding: 2px 0 3px bk.$spacing-2;
+    padding: var(--small-padding) 0 3px bk.$spacing-2;
 
     .bk-tag__icon {
-      width: 7px;
-      height: 7px;
+      --icon-size: 7px;
+
+      width: var(--icon-size);
+      height: var(--icon-size);
       color: bk.$theme-tag-icon-default;
       cursor: pointer;
-      padding: 2px bk.$spacing-2 2px bk.$spacing-2;
+      padding: var(--small-padding) bk.$spacing-2 var(--small-padding) bk.$spacing-2;
     }
   }
 }