From 7927b02e6ce15853395c175d299ca412079ae3cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Tue, 23 Jan 2024 17:08:32 +0100
Subject: [PATCH] Feat(web): Unify naming in SCSS, use padding or gap #DS-782

Only where it makes sense.
---
 packages/web/src/scss/components/Accordion/_Accordion.scss | 2 +-
 packages/web/src/scss/components/Accordion/_theme.scss     | 2 +-
 packages/web/src/scss/components/Checkbox/_Checkbox.scss   | 2 +-
 packages/web/src/scss/components/Item/_Item.scss           | 4 ++--
 packages/web/src/scss/components/Item/_theme.scss          | 2 +-
 packages/web/src/scss/components/Radio/_Radio.scss         | 4 ++--
 packages/web/src/scss/theme/_form-fields.scss              | 4 ++--
 packages/web/src/scss/tools/_form-fields.scss              | 4 ++--
 8 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/scss/components/Accordion/_Accordion.scss b/packages/web/src/scss/components/Accordion/_Accordion.scss
index aecb3349e8..9783cdb4dc 100644
--- 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
index 6f65eba9b5..3c59c7918e 100644
--- 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
index a4fde1b5b0..f3de871201 100644
--- 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.$gap;
 }
 
 .Checkbox__label {
diff --git a/packages/web/src/scss/components/Item/_Item.scss b/packages/web/src/scss/components/Item/_Item.scss
index 781e1b0067..097c512573 100644
--- 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.$gap;
 }
 
 .Item__icon--end {
     grid-column: 3;
-    margin-inline-start: theme.$icon-spacing;
+    margin-inline-start: theme.$gap;
 }
 
 .Item--selected .Item__label {
diff --git a/packages/web/src/scss/components/Item/_theme.scss b/packages/web/src/scss/components/Item/_theme.scss
index 69906ef798..2610197079 100644
--- 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;
+$gap: 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
index f7bc91fbf8..e185d1f7fa 100644
--- 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.$gap;
 }
 
 @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.$gap;
 }
 
 .Radio__label--hidden {
diff --git a/packages/web/src/scss/theme/_form-fields.scss b/packages/web/src/scss/theme/_form-fields.scss
index da0f9bac20..720663b49f 100644
--- 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;
+$gap: 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-gap: 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
index 9d40088eee..54072966ea 100644
--- 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.$gap;
     cursor: cursors.$form-fields;
 }
 
@@ -180,7 +180,7 @@
 
 @mixin item() {
     width: 100%;
-    padding: form-fields-theme.$item-spacing;
+    padding: form-fields-theme.$item-gap;
     margin-block: 0;
     border-radius: form-fields-theme.$item-border-radius;
     background-color: form-fields-theme.$item-background-color-default;