Feat(web): Unify naming in SCSS, use padding instead of spacing and o…

…ffset #DS-782 Only where it makes sense.
lmc-eu · Jan 23, 2024 · 245bad0 · 245bad0
1 parent 0fa635a
commit 245bad0
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 12 deletions.
diff --git a/packages/web/src/scss/components/Accordion/_Accordion.scss b/packages/web/src/scss/components/Accordion/_Accordion.scss
@@ -113,7 +113,7 @@
 }
 
 .Accordion__content {
-    padding-bottom: theme.$accordion-content-bottom-offset;
+    padding-bottom: theme.$accordion-content-padding-bottom;
 }
 
 // 8.

diff --git a/packages/web/src/scss/components/Accordion/_theme.scss b/packages/web/src/scss/components/Accordion/_theme.scss
@@ -13,4 +13,4 @@ $accordion-border-radius: tokens.$radius-100;
 $accordion-divider-color: tokens.$action-tertiary-default;
 $accordion-divider-width: tokens.$border-width-100;
 $accordion-divider-style: tokens.$border-style-100;
-$accordion-content-bottom-offset: tokens.$space-600;
+$accordion-content-padding-bottom: tokens.$space-600;
diff --git a/packages/web/src/scss/components/Checkbox/_Checkbox.scss b/packages/web/src/scss/components/Checkbox/_Checkbox.scss
@@ -11,7 +11,7 @@ $_field-name: 'Checkbox';
 }
 
 .Checkbox__text {
-    margin-left: form-fields-theme.$spacing;
+    margin-left: form-fields-theme.$padding;
 }
 
 .Checkbox__label {

diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss
@@ -52,12 +52,12 @@
 
 .Item__icon--start {
     grid-column: 1;
-    margin-inline-end: theme.$icon-spacing;
+    margin-inline-end: theme.$icon-padding;
 }
 
 .Item__icon--end {
     grid-column: 3;
-    margin-inline-start: theme.$icon-spacing;
+    margin-inline-start: theme.$icon-padding;
 }
 
 .Item--selected .Item__label {

diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss
@@ -1,5 +1,5 @@
 @use '@tokens' as tokens;
 
-$icon-spacing: tokens.$space-400;
+$icon-padding: tokens.$space-400;
 $icon-color-default: tokens.$action-selected-default;
 $icon-color-disabled: tokens.$action-selected-disabled;
diff --git a/packages/web/src/scss/components/Radio/_Radio.scss b/packages/web/src/scss/components/Radio/_Radio.scss
@@ -47,7 +47,7 @@ $_field-name: 'Radio';
 .Radio__helperText {
     @include form-fields-tools.helper-text();
 
-    margin-left: form-fields-theme.$spacing;
+    margin-left: form-fields-theme.$padding;
 }
 
 @include form-fields-tools.input-field-validation-states(
@@ -59,7 +59,7 @@ $_field-name: 'Radio';
 .Radio__label {
     @include form-fields-tools.inline-field-label();
 
-    margin-left: form-fields-theme.$spacing;
+    margin-left: form-fields-theme.$padding;
 }
 
 .Radio__label--hidden {

diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss
@@ -1,7 +1,7 @@
 @use '@tokens' as tokens;
 
 // Common for all form components
-$spacing: tokens.$space-400;
+$padding: tokens.$space-400;
 $input-typography: tokens.$body-medium-text-regular;
 $input-color-disabled: tokens.$text-primary-disabled;
 $input-border-color-success: tokens.$emotion-success-default;
@@ -64,7 +64,7 @@ $validation-states: (
 );
 
 // Item variant
-$item-spacing: tokens.$space-400;
+$item-padding: tokens.$space-400;
 $item-border-radius: tokens.$radius-100;
 $item-background-color-default: tokens.$background-interactive-default;
 $item-background-color-hover: tokens.$background-interactive-hover;

diff --git a/packages/web/src/scss/tools/_form-fields.scss b/packages/web/src/scss/tools/_form-fields.scss
@@ -42,7 +42,7 @@
 
 @mixin inline-field-root() {
     display: inline-flex;
-    margin-block: form-fields-theme.$spacing;
+    margin-block: form-fields-theme.$padding;
     cursor: cursors.$form-fields;
 }
 
@@ -180,7 +180,7 @@
 
 @mixin item() {
     width: 100%;
-    padding: form-fields-theme.$item-spacing;
+    padding: form-fields-theme.$item-padding;
     margin-block: 0;
     border-radius: form-fields-theme.$item-border-radius;
     background-color: form-fields-theme.$item-background-color-default;
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,7 +113,7 @@ @@
     }
     .Accordion__content {
-        padding-bottom: theme.$accordion-content-bottom-offset;
+        padding-bottom: theme.$accordion-content-padding-bottom;
     }
     // 8.
@@ Expand Down @@