fix: define private border css vars

gravity-ui · Dec 18, 2024 · 7f20dc3 · 7f20dc3
1 parent 68f6a07
commit 7f20dc3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -10,6 +10,9 @@ $transition-timing-function: ease-in-out;
     --_--bg-color-hover: none;
     --_--text-color: none;
     --_--font-size: var(--g-text-body-1-font-size);
+    --_--border-color: var(--g-color-line-generic);
+    --_--border-width: 0;
+    --_--border-color: currentColor;
 
     display: inline-flex;
     align-items: center;
@@ -18,6 +21,8 @@ $transition-timing-function: ease-in-out;
     border-radius: var(--g-label-border-radius, var(--_--border-radius));
     color: var(--g-label-text-color, var(--_--text-color));
     background-color: var(--g-label-background-color, var(--_--bg-color));
+    box-shadow: inset 0 0 0 var(--g-label-border-width, var(--_--border-width))
+        var(--g-label-border-color, var(--_--border-color));
     transition-property: opacity, color, background-color;
     transition-duration: $transition-duration;
     transition-timing-function: $transition-timing-function;
@@ -28,7 +33,7 @@ $transition-timing-function: ease-in-out;
     &__text {
         display: flex;
         align-items: baseline;
-        margin: 0 var(--g-label-margin-inline, var(--_--margin-inline));
+        padding: 0 var(--g-label-padding, var(--_--padding-inline));
         width: 100%;
         font-family: var(--g-text-body-font-family);
         font-weight: var(--g-text-body-font-weight);
@@ -113,23 +118,23 @@ $transition-timing-function: ease-in-out;
         &_xs {
             --_--height: 20px;
             --_--border-radius: var(--g-border-radius-xs);
-            --_--margin-inline: 8px;
+            --_--padding-inline: 8px;
             --_--margin-addon-start: 24px;
             --_--margin-addon-end: 22px;
         }
 
         &_s {
             --_--height: 24px;
             --_--border-radius: var(--g-border-radius-s);
-            --_--margin-inline: 10px;
+            --_--padding-inline: 10px;
             --_--margin-addon-start: 28px;
             --_--margin-addon-end: 26px;
         }
 
         &_m {
             --_--height: 28px;
             --_--border-radius: var(--g-border-radius-m);
-            --_--margin-inline: 12px;
+            --_--padding-inline: 12px;
             --_--margin-addon-start: 32px;
             --_--margin-addon-end: 32px;
         }
@@ -191,9 +196,8 @@ $transition-timing-function: ease-in-out;
             --_--bg-color: transparent;
             --_--bg-color-hover: var(--g-color-base-simple-hover);
             --_--text-color: var(--g-color-text-complementary);
-
-            box-shadow: inset 0 0 0 var(--g-label-border-width, 1px)
-                var(--g-label-border-color, var(--g-color-line-generic));
+            --_--border-width: 1px;
+            --_--border-color: var(--g-color-line-generic);
         }
     }
 

diff --git a/src/components/Label/README.md b/src/components/Label/README.md
@@ -287,4 +287,4 @@ LANDING_BLOCK-->
 | `--g-label-height`                 | Height, line-height       |
 | `--g-label-border-radius`          | Border radius             |
 | `--g-label-font-size`              | Text font size            |
-| `--g-label-margin-inline`          | Margin inline             |
+| `--g-label-padding`                | Side paddings             |