✨ Unify the spacing variables (#696)

* ✨ Add unified spacing variables * 🚚 Moved deprecated spacing variables to `_deprecated_spacing.scss` * 🚧 Import new spacing variables * ✏️ Use $sp-# instead of $inset-# * ✏️ Use $sp-# instead of $stack-# * ✏️ Use $sp-# instead of $inline-# * 📝 Update spacing story * 🔊 Add a warning about old spacing variables usage
homeday-de · Apr 14, 2021 · bf30a60 · bf30a60
1 parent 370cf44
commit bf30a60
Show file tree

Hide file tree

Showing 41 changed files with 298 additions and 259 deletions.
diff --git a/src/components/HdAlert.vue b/src/components/HdAlert.vue
@@ -80,7 +80,7 @@ export default {
 .alert {
   $root: &;
   display: flex;
-  padding: $inset-s;
+  padding: $sp-s;
   @include font('text-small');
   border-width: 1px;
   border-style: solid;
@@ -110,15 +110,15 @@ export default {
   }
 
   &--no-icon {
-    padding: $stack-s $inline-m;
+    padding: $sp-s $sp-m;
   }
 
   &__icon {
     width: 24px;
     align-self: flex-start;
     flex-shrink: 0;
-    margin-top: $stack-xxs;
-    margin-right: $inline-s;
+    margin-top: $sp-xxs;
+    margin-right: $sp-s;
 
     ::v-deep path {
       #{$root}--success & {

diff --git a/src/components/HdBadge.vue b/src/components/HdBadge.vue
@@ -132,16 +132,16 @@ export default {
       font-size: 18px;
       line-height: 28px;
       border-radius: 4px;
-      padding: $stack-xs $inline-s;
+      padding: $sp-xs $sp-s;
       cursor: default;
     }
 
     &__chevron {
       display: none;
       width: 24px;
       height: 24px;
-      margin-left: $inline-m;
-      margin-right: $inline-s;
+      margin-left: $sp-m;
+      margin-right: $sp-s;
 
       &::v-deep path {
         fill: currentColor;
@@ -151,7 +151,7 @@ export default {
     ::v-deep  &__icon{
       width: 14px;
       height: 14px;
-      margin-right: $inline-s;
+      margin-right: $sp-s;
     }
 
     &__details{
@@ -160,10 +160,10 @@ export default {
       white-space: nowrap;
       overflow: hidden;
 
-      padding: $inset-s;
+      padding: $sp-s;
       padding-top: 0;
-      border-bottom-left-radius: $inline-xs;
-      border-bottom-right-radius: $inline-xs;
+      border-bottom-left-radius: $sp-xs;
+      border-bottom-right-radius: $sp-xs;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       font-weight: normal;

diff --git a/src/components/HdCalendar.vue b/src/components/HdCalendar.vue
@@ -196,15 +196,15 @@ export default {
   &__header {
     text-align: center;
     position: relative;
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
     display: flex;
     justify-content: center;
     align-items: center;
     &__month {
       font-size: 14px;
       line-height: 20px;
       font-weight: bold;
-      margin: 0 $stack-xl;
+      margin: 0 $sp-xl;
 
       @media (min-width: $break-mobile) {
         font-size: 18px;
@@ -213,30 +213,30 @@ export default {
     }
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-s * 3;
+      margin-bottom: $sp-s * 3;
     }
   }
   &__row {
     display: flex;
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-m;
+      margin-bottom: $sp-m;
     }
 
     &__item {
       width: calc(100% / 7);
       text-align: center;
       &:not(:last-child) {
-        margin-right: $inline-m;
+        margin-right: $sp-m;
       }
     }
   }
   &__days {
-    margin-bottom: $stack-m;
+    margin-bottom: $sp-m;
 
     @media (min-width: $break-mobile) {
-      margin-bottom: $stack-s * 3;
+      margin-bottom: $sp-s * 3;
     }
   }
   &__day {

diff --git a/src/components/HdDashedList.vue b/src/components/HdDashedList.vue
@@ -57,8 +57,8 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50);
   background-color: inherit;
 
   &__title {
-    margin-top: $stack-l;
-    margin-bottom: $stack-s;
+    margin-top: $sp-l;
+    margin-bottom: $sp-s;
     color: $neutral-gray;
     font-weight: 700;
   }
@@ -76,7 +76,7 @@ $leaders-border: 1px dashed getShade($neutral-gray, 50);
 .dashed-list__item {
   display: flex;
   flex-flow: wrap;
-  margin-bottom: $stack-s;
+  margin-bottom: $sp-s;
 
   > dt,
   > dd {

diff --git a/src/components/HdEditSwitch.vue b/src/components/HdEditSwitch.vue
@@ -164,12 +164,12 @@ export default {
   &__actions {
     display: flex;
     justify-content: flex-end;
-    margin-bottom: $stack-s;
+    margin-bottom: $sp-s;
     &__button {
       display: flex;
       align-items: center;
       padding: 0;
-      margin-left: $inline-m;
+      margin-left: $sp-m;
       cursor: pointer;
       &--edit {
         color: getShade($secondary-color, 110);
@@ -184,7 +184,7 @@ export default {
         font-size: 18px;
         font-weight: 400;
         line-height: 26px;
-        margin-left: $inline-xs;
+        margin-left: $sp-xs;
       }
       &__icon path {
         fill: currentColor;
@@ -196,7 +196,7 @@ export default {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    margin-bottom: $stack-s;
+    margin-bottom: $sp-s;
 
     &__icon {
       width: 20px;
@@ -210,7 +210,7 @@ export default {
 
     &__label {
       display: none;
-      margin-left: $inline-s;
+      margin-left: $sp-s;
       font-size: 18px;
       line-height: 26px;
 
@@ -232,11 +232,11 @@ export default {
 
   &--editing-allowed .details-table-wrap:first-child {
     padding-top: 0;
-    margin-top: $stack-s * -1;
+    margin-top: $sp-s * -1;
   }
 
   h3 + .field {
-    margin-top: $stack-s;
+    margin-top: $sp-s;
   }
 }
 

diff --git a/src/components/HdExpandText.vue b/src/components/HdExpandText.vue
@@ -225,7 +225,7 @@ export default {
     align-items: center;
     position: relative;
     padding: 0;
-    margin-right: $inline-m;
+    margin-right: $sp-m;
     font-size: 18px;
     line-height: 28px;
     font-family: inherit;
@@ -250,9 +250,9 @@ export default {
     &::before {
       content: '';
       position: absolute;
-      bottom: $stack-xs;
+      bottom: $sp-xs;
       left: 0;
-      width: calc(100% - #{$inline-xs + $_icon-size});
+      width: calc(100% - #{$sp-xs + $_icon-size});
       height: 1px;
       background-color: getShade($secondary-color, 110);
     }
@@ -261,7 +261,7 @@ export default {
       position: relative;
       width: $_icon-size;
       height: $_icon-size;
-      margin-left: $inline-xs;
+      margin-left: $sp-xs;
       transition: transform ($time-s * 2) ease-in-out;
 
       path {

diff --git a/src/components/HdModal.vue b/src/components/HdModal.vue
@@ -154,7 +154,7 @@ export default {
   left: 0;
   display: flex;
   flex-direction: column;
-  padding: $inset-s;
+  padding: $sp-s;
   z-index: 100;
   animation: fadeIn .3s forwards;
   overflow: auto;
@@ -166,7 +166,7 @@ export default {
   }
 
   &--external-close-icon {
-    padding-top: $stack-s + 24px;
+    padding-top: $sp-s + 24px;
   }
 
   &__overlay {
@@ -185,8 +185,8 @@ export default {
   }
   &__close {
     position: absolute;
-    top: $stack-s;
-    right: $inline-s;
+    top: $sp-s;
+    right: $sp-s;
     width: 24px;
     height: 24px;
     background-color: transparent;
@@ -196,8 +196,8 @@ export default {
     z-index: 2;
 
     @media (min-width: $break-tablet){
-      top: $stack-m;
-      right: $inline-m;
+      top: $sp-m;
+      right: $sp-m;
     }
 
     #{$_root}--external-close-icon & {
@@ -236,10 +236,10 @@ export default {
 
   &__body {
     background-color: white;
-    padding: $inset-l;
+    padding: $sp-l;
 
     #{$_root}--spacing-normal & {
-      padding: $inset-m;
+      padding: $sp-m;
     }
 
     #{$_root}--no-spacing & {
@@ -249,12 +249,12 @@ export default {
 
   &__actions {
     display: flex;
-    padding: $inset-m ($inset-m - ($inline-xs * 2));
+    padding: $sp-m ($sp-m - ($sp-xs * 2));
 
     &__action {
       width: auto;
-      margin-left: $inline-xs;
-      margin-right: $inline-xs;
+      margin-left: $sp-xs;
+      margin-right: $sp-xs;
       flex-grow: 1;
       flex-shrink: 0;
 
@@ -282,7 +282,7 @@ export default {
     border-bottom: 1px solid getShade($quaternary-color, 60);
 
     &::v-deep > *:first-child {
-      padding: $inset-m;
+      padding: $sp-m;
     }
   }
 

diff --git a/src/components/HdTable.vue b/src/components/HdTable.vue
@@ -48,14 +48,14 @@ export default {
 @import 'homeday-blocks/src/styles/mixins.scss';
 
 .hd-table {
-  margin-top: $stack-s;
+  margin-top: $sp-s;
   @include font('text-xsmall');
   border-collapse: collapse;
   width: 100%;
   z-index: -1;
   text-align: center;
   th, td {
-    padding: $inset-s;
+    padding: $sp-s;
     border-top: 1px solid getShade($quaternary-color, 60);
     color: $quaternary-color;
     font-weight: 600;
@@ -88,7 +88,7 @@ export default {
     }
     td:after {
       content: '';
-      width: $inset-s;
+      width: $sp-s;
       height: 100%;
       position: absolute;
       right: 0;

diff --git a/src/components/HdTabsMenu.vue b/src/components/HdTabsMenu.vue
@@ -118,7 +118,7 @@ export default {
   &__item {
     padding-left: 0;
     padding-right: 0;
-    margin-right: $inline-l;
+    margin-right: $sp-l;
     white-space: nowrap;
     font-weight: 400;
     text-align: left;

diff --git a/src/components/HdTagsList.vue b/src/components/HdTagsList.vue
@@ -28,16 +28,16 @@ export default {
 .tags-list {
   display: flex;
   flex-wrap: wrap;
-  min-height: #{$stack-l + $stack-s};
-  margin-bottom: $stack-m;
+  min-height: #{$sp-l + $sp-s};
+  margin-bottom: $sp-m;
   &__tag {
     display: flex;
     align-items: center;
-    height: $stack-l;
+    height: $sp-l;
     background-color: getShade($quaternary-color, 50);
     border-radius: 3px;
-    padding: 0 $inline-s;
-    margin: $stack-s $inline-s 0 0;
+    padding: 0 $sp-s;
+    margin: $sp-s $sp-s 0 0;
   }
 }
 </style>
diff --git a/src/components/HdTileSelectItem.vue b/src/components/HdTileSelectItem.vue
@@ -53,7 +53,7 @@ export default {
   width: 100%;
   background-color: white;
   border: 0;
-  padding: $inset-m;
+  padding: $sp-m;
   font-family: inherit;
   font-size: inherit;
   font-weight: inherit;