Spacers unify (#1485)

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",

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;
+// Sizing
-$grid-gutter-width: var(--#{$prefix}content-padding) !default;
+$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,
+  1: $spacer-1,
-  2: $spacer * .5,
+  2: $spacer-2,
-  3: $spacer,
+  3: $spacer-3,
-  4: $spacer * 2,
+  4: $spacer-4,
-  5: $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;

src/scss/layout/_page.scss

@@ -31,14 +31,14 @@
 
 // Content body
 .page-body {
-  margin-top: var(--#{$prefix}content-padding);
+  margin-top: var(--#{$prefix}page-padding-y);
-  margin-bottom: var(--#{$prefix}content-padding);
+  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);
 }

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};

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) {

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));
 }
 
 //