From 6b3a1709c9948e80deb490a86f22c4dc63d9307e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 21 Feb 2023 22:21:02 +0100
Subject: [PATCH] Spacers unify (#1485)

---
 package.json               |  8 +++---
 src/scss/_variables.scss   | 52 +++++++++++++++++++++++++-------------
 src/scss/layout/_page.scss | 10 ++++----
 src/scss/layout/_root.scss | 11 +++++++-
 src/scss/ui/_grid.scss     | 16 ------------
 src/scss/ui/_timeline.scss |  6 ++---
 6 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/package.json b/package.json
index d7afc4ba6..0d3db8d9a 100644
--- a/package.json
+++ b/package.json
@@ -63,19 +63,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "69 kB"
+        "maxSize": "71 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "63 kB"
+        "maxSize": "66 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "69 kB"
+        "maxSize": "71 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "63 kB"
+        "maxSize": "66 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index c20c26500..3b922c546 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -56,6 +56,7 @@ $font-weight-medium: 500 !default;
 $font-weight-bold: 600 !default;
 
 $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
+$headings-margin-bottom: var(--#{$prefix}spacer) !default;
 
 $font-weights: (
   light: $font-weight-light,
@@ -332,14 +333,16 @@ $caret-width: .36em !default;
 $caret-spacing: .4em !default;
 
 //Sizing
-$content-padding: 1.25rem !default;
+$page-padding: var(--#{$prefix}spacer-3) !default;
+$page-padding-sm: var(--#{$prefix}spacer-2) !default;
+$page-padding-y: var(--#{$prefix}spacer-4) !default;
 
-$container-padding-x: var(--#{$prefix}content-padding) !default;
-$grid-gutter-width: var(--#{$prefix}content-padding) !default;
+// Sizing
+$container-padding-x: calc(var(--#{$prefix}page-padding) * 2) !default;
+$grid-gutter-width: var(--#{$prefix}page-padding) !default;
 
 // Grid
 $grid-gutter-width: 1rem !default;
-$container-padding-x: 1.5rem !default;
 
 $container-variations: (
   slim: 16rem,
@@ -347,17 +350,29 @@ $container-variations: (
   narrow: 45rem,
 ) !default;
 
-$content-padding-y: 1.25rem !default;
-
 // Spacers
-$spacer: 1rem !default;
+$spacer-0: 0 !default;
+$spacer-1: .25rem !default;
+$spacer-2: .5rem !default;
+$spacer-3: 1rem !default;
+$spacer-4: 1.5rem !default;
+$spacer-5: 2rem !default;
+$spacer-6: 3rem !default;
+$spacer-7: 5rem !default;
+$spacer-8: 8rem !default;
+
+$spacer: $spacer-3 !default;
+
 $spacers: (
   0: 0,
-  1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 2,
-  5: $spacer * 4,
+  1: $spacer-1,
+  2: $spacer-2,
+  3: $spacer-3,
+  4: $spacer-4,
+  5: $spacer-5,
+  6: $spacer-6,
+  7: $spacer-7,
+  8: $spacer-8,
 ) !default;
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
@@ -380,10 +395,7 @@ $size-values: map-merge($spacers, (
 )) !default;
 
 
-$container-variations: (
-  tight: 30rem,
-  narrow: 45rem,
-) !default;
+
 
 
 // Aspect ratios
@@ -531,7 +543,7 @@ $card-ribbon-font-size: $h6-font-size !default;
 
 $card-header-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 
-$cards-grid-gap: 1rem !default;
+$cards-grid-gap: var(--#{$prefix}page-padding) !default;
 $cards-grid-breakpoint: lg !default;
 
 
@@ -559,7 +571,6 @@ $dropdown-item-padding-x: .75rem !default;
 $dropdown-item-padding-y: .5rem !default;
 $dropdown-font-size: $font-size-base !default;
 $dropdown-border-color: var(--#{$prefix}border-color-translucent) !default;
-$dropdown-divider-bg: $dropdown-border-color !default;
 $dropdown-padding-y: .25rem !default;
 $dropdown-link-color: inherit !default;
 $dropdown-link-hover-bg: $hover-bg !default;
@@ -572,9 +583,14 @@ $dropdown-link-active-color: var(--#{$prefix}primary)  !default;
 $dropdown-link-active-bg: var(--#{$prefix}active-bg) !default;
 $dropdown-box-shadow: var(--#{$prefix}shadow-dropdown) !default;
 
+$dropdown-divider-bg: $dropdown-border-color !default;
+$dropdown-divider-margin-y: var(--#{$prefix}spacer) !default;
+
 // Tooltip
 $tooltip-bg: var(--#{$prefix}bg-surface-dark) !default;
 $tooltip-color: var(--#{$prefix}light) !default;
+$tooltip-padding-y: var(--#{$prefix}spacer-2) !default;
+$tooltip-padding-x: var(--#{$prefix}spacer-2) !default;
 
 // Loader
 $loader-size: 2.5rem !default;
diff --git a/src/scss/layout/_page.scss b/src/scss/layout/_page.scss
index e2a03a1d8..886820862 100644
--- a/src/scss/layout/_page.scss
+++ b/src/scss/layout/_page.scss
@@ -31,14 +31,14 @@
 
 // Content body
 .page-body {
-  margin-top: var(--#{$prefix}content-padding);
-  margin-bottom: var(--#{$prefix}content-padding);
+  margin-top: var(--#{$prefix}page-padding-y);
+  margin-bottom: var(--#{$prefix}page-padding-y);
 }
 
 .page-body-card {
   background: var(--#{$prefix}bg-surface);
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
-  padding: var(--#{$prefix}content-padding) 0;
+  padding: var(--#{$prefix}page-padding) 0;
   margin-bottom: 0;
   flex: 1;
 
@@ -83,13 +83,13 @@
   justify-content: center;
 
   .page-wrapper & {
-    margin: var(--#{$prefix}content-padding) 0 0;
+    margin: var(--#{$prefix}page-padding-y) 0 0;
   }
 }
 
 .page-header-border {
   border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  padding: var(--#{$prefix}content-padding) 0;
+  padding: var(--#{$prefix}page-padding-y) 0;
   margin: 0 !important;
   background-color: var(--#{$prefix}bg-surface);
 }
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 97ca50def..69edbc77b 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -12,6 +12,11 @@
     --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
   }
 
+  @each $name, $value in $spacers {
+    --#{$prefix}spacer-#{$name}: #{$value};
+  }
+  --#{$prefix}spacer: #{$spacer};
+
   --#{$prefix}bg-surface: #{$bg-surface};
   --#{$prefix}bg-surface-secondary: #{$bg-surface-secondary};
   --#{$prefix}bg-surface-tertiary: #{$bg-surface-tertiary};
@@ -32,11 +37,15 @@
   --#{$prefix}code-color: #{$code-color};
   --#{$prefix}code-bg: #{$code-bg};
 
-  --#{$prefix}content-padding: #{$content-padding};
   --#{$prefix}dark-mode-border-color: #{$dark-mode-border-color};
   --#{$prefix}dark-mode-border-color-light: #{$dark-mode-border-color-light};
   --#{$prefix}dark-mode-border-color-active: #{$dark-mode-border-color-active};
 
+  --#{$prefix}page-padding: #{$page-padding};
+  --#{$prefix}page-padding-y: #{$page-padding-y};
+  @include media-breakpoint-down($cards-grid-breakpoint) {
+    --#{$prefix}page-padding: #{$page-padding-sm};
+  }
 
   @each $name, $value in $font-weights {
     --#{$prefix}font-weight-#{$name}: #{$value};
diff --git a/src/scss/ui/_grid.scss b/src/scss/ui/_grid.scss
index b26ccf281..9963cd0b2 100644
--- a/src/scss/ui/_grid.scss
+++ b/src/scss/ui/_grid.scss
@@ -6,17 +6,6 @@
   border-left: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
 }
 
-%container-common {
-  @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$prefix}gutter-x: #{$grid-gutter-width};
-  }
-}
-
-.container,
-.container-fluid {
-  @extend %container-common;
-}
-
 .container {
   @each $variation, $size in $container-variations {
     &-#{$variation} {
@@ -63,11 +52,6 @@
   .row-cards {
     flex: 1;
   }
-
-  @include media-breakpoint-down($cards-grid-breakpoint) {
-    --#{$prefix}gutter-x: #{$cards-grid-gap * .5};
-    --#{$prefix}gutter-y: #{$cards-grid-gap * .5};
-  }
 }
 
 @each $name, $size in map-merge((null: $spacer), $spacers) {
diff --git a/src/scss/ui/_timeline.scss b/src/scss/ui/_timeline.scss
index bccbf420b..7117a19fa 100644
--- a/src/scss/ui/_timeline.scss
+++ b/src/scss/ui/_timeline.scss
@@ -15,14 +15,14 @@
   position: relative;
 
   &:not(:last-child) {
-    margin-bottom: var(--#{$prefix}content-padding);
+    margin-bottom: var(--#{$prefix}page-padding);
 
     &:before {
       content: "";
       position: absolute;
       top: var(--#{$prefix}timeline-icon-size);
       left: calc(var(--#{$prefix}timeline-icon-size) / 2);
-      bottom: calc(-1 * var(--#{$prefix}content-padding));
+      bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);
       border-radius: var(--#{$prefix}border-radius);
@@ -44,7 +44,7 @@
 }
 
 .timeline-event-card {
-  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}content-padding));
+  margin-left: calc(var(--#{$prefix}timeline-icon-size, $avatar-size) + var(--#{$prefix}page-padding));
 }
 
 //