💄 - style: reduce various spacings to increase data density

maykinmedia · Aug 30, 2024 · 82fcece · 82fcece
1 parent f5ab975
commit 82fcece
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 20 deletions.
diff --git a/src/components/data/attributelist/attributelist.scss b/src/components/data/attributelist/attributelist.scss
@@ -13,7 +13,7 @@
 
   &__list {
     display: grid;
-    gap: 0 var(--spacing-v) var(--gutter-h-mobile);
+    gap: 0;
     grid-template-columns: 1fr;
     margin: 0;
     width: 66%;
@@ -34,13 +34,13 @@
 
   &__value {
     color: var(--typography-color-muted);
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-v);
+    }
   }
 
   @media screen and (min-width: constants.$breakpoint-desktop) {
     flex-direction: row;
-
-    &__list {
-      gap: var(--spacing-v) var(--gutter-h-desktop);
-    }
   }
 }
diff --git a/src/components/data/kanban/kanban.scss b/src/components/data/kanban/kanban.scss
@@ -40,8 +40,8 @@
     border: 1px solid var(--typography-color-border);
     display: flex;
     flex-direction: column;
-    gap: calc(2 * var(--spacing-v));
-    padding: calc(2 * var(--spacing-v)) calc(2 * var(--spacing-h)) !important;
+    gap: var(--spacing-v);
+    padding: var(--spacing-v) var(--spacing-h);
     position: relative;
   }
 

diff --git a/src/components/layout/grid/grid.scss b/src/components/layout/grid/grid.scss
@@ -23,15 +23,15 @@
   }
 
   &--gutter-true {
-    gap: var(--gutter-v-mobile) var(--gutter-h-mobile);
+    gap: var(--spacing-v) var(--spacing-h);
   }
 
-  &--gutter-h {
-    gap: 0 var(--gutter-h-mobile);
+  &--spacing-h {
+    gap: 0 var(--spacing-h);
   }
 
   &--gutter-v {
-    gap: var(--gutter-v-mobile) 0;
+    gap: var(--spacing-v) 0;
   }
 
   @media screen and (min-width: constants.$breakpoint-desktop) {
@@ -44,15 +44,15 @@
     }
 
     &--gutter-true {
-      gap: var(--gutter-v-desktop) var(--gutter-h-desktop);
+      gap: var(--spacing-v) var(--spacing-h);
     }
 
-    &--gutter-h {
-      gap: 0 var(--gutter-h-desktop);
+    &--spacing-h {
+      gap: 0 var(--spacing-h-desktop);
     }
 
     &--gutter-v {
-      gap: var(--gutter-v-desktop) 0;
+      gap: var(--spacing-v) 0;
     }
 
     @for $i from 1 through 12 {

diff --git a/src/style/tokens/base.scss b/src/style/tokens/base.scss
@@ -30,11 +30,6 @@
   --border-radius-l: 4px;
   --border-radius-s: 2px;
 
-  --gutter-h-desktop: 24px;
-  --gutter-v-desktop: 24px;
-  --gutter-h-mobile: 12px;
-  --gutter-v-mobile: 12px;
-
   --spacing-h: 8px;
   --spacing-v: 8px;