feat: added grid-gutter-width token

styles/css/core/variables.css

@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Fri, 09 Jun 2023 07:34:34 GMT
+ * Generated on Thu, 15 Jun 2023 15:10:16 GMT
  */
 
 :root {
@@ -115,6 +115,7 @@
   --pgn-typography-badge-font-size: 75%;
   --pgn-typography-alert-line-height: 1.5rem;
   --pgn-typography-alert-font-size: .875rem;
+  --pgn-spacing-grid-gutter-width: 24px;
   --pgn-spacing-table-cell-padding-sm: .3rem;
   --pgn-spacing-table-cell-padding-base: 75rem;
   --pgn-spacing-label-margin-bottom: .5rem;

styles/scss/core/_variables.scss

@@ -441,10 +441,10 @@ $container-max-widths: (
 //
 // Set the number of columns and specify the width of the gutters.
 
-// TODO: can't use css variables due to conflict with @if SCSS.
+// TODO: don`t create a token for this variable. Requires more changes to bootstrap files.
 $grid-columns: 12 !default;
-$grid-gutter-width:           24px !default;
-// TODO: can't use css variables due to conflict with @if SCSS.
+$grid-gutter-width: var(--pgn-spacing-grid-gutter-width) !default;
+// TODO: don`t create a token for this variable. Requires more changes to bootstrap files.
 $grid-row-columns: 6 !default;
 
 $max-width-xs: var(--pgn-size-container-max-width-xs) !default;

styles/scss/core/bootstrap-override/_mixins.scss

@@ -1,2 +1,4 @@
 // Components
 @import "mixins/list-group";
+@import "mixins/grid";
+@import "mixins/grid-framework";

styles/scss/core/bootstrap-override/mixins/_grid-framework.scss

@@ -0,0 +1,80 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+  // Common properties for all breakpoints
+  %grid-column {
+    position: relative;
+    width: 100%;
+    padding-right: calc($gutter * .5);
+    padding-left: calc($gutter * .5);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @if $columns > 0 {
+      // Allow columns to stretch full width below their breakpoints
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          @extend %grid-column;
+        }
+      }
+    }
+
+    .col#{$infix},
+    .col#{$infix}-auto {
+      @extend %grid-column;
+    }
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix} {
+        flex-basis: 0;
+        flex-grow: 1;
+        max-width: 100%;
+      }
+
+      @if $grid-row-columns > 0 {
+        @for $i from 1 through $grid-row-columns {
+          .row-cols#{$infix}-#{$i} {
+            @include row-cols($i);
+          }
+        }
+      }
+
+      .col#{$infix}-auto {
+        @include make-col-auto();
+      }
+
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .col#{$infix}-#{$i} {
+            @include make-col($i, $columns);
+          }
+        }
+      }
+
+      .order#{$infix}-first { order: -1; }
+
+      .order#{$infix}-last { order: $columns + 1; }
+
+      @for $i from 0 through $columns {
+        .order#{$infix}-#{$i} { order: $i; }
+      }
+
+      @if $columns > 0 {
+        // `$columns - 1` because offsetting by the width of an entire row isn't possible
+        @for $i from 0 through ($columns - 1) {
+          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+            .offset#{$infix}-#{$i} {
+              @include make-col-offset($i, $columns);
+            }
+          }
+        }
+      }
+    }
+  }
+}

styles/scss/core/bootstrap-override/mixins/_grid.scss

@@ -0,0 +1,69 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container($gutter: $grid-gutter-width) {
+  width: 100%;
+  padding-right: calc($gutter * .5);
+  padding-left: calc($gutter * .5);
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin make-row($gutter: $grid-gutter-width) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc(-1 * calc($gutter * .5));
+  margin-left: calc(-1 * calc($gutter * .5));
+}
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
+}
+
+@mixin make-col-ready($gutter: $grid-gutter-width) {
+  position: relative;
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: calc($gutter * .5);
+  padding-left: calc($gutter * .5);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage(divide($size, $columns));
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage(divide($size, $columns));
+}
+
+@mixin make-col-auto() {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: 100%; // Reset earlier grid tiers
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+  $num: divide($size, $columns);
+  margin-left: if($num == 0, 0, percentage($num));
+}
+
+// Row columns
+//
+// Specify on a parent element(e.g., .row) to force immediate children into NN
+// numberof columns. Supports wrapping to new lines, but does not do a Masonry
+// style grid.
+@mixin row-cols($count) {
+  > * {
+    flex: 0 0 divide(100%, $count);
+    max-width: divide(100%, $count);
+  }
+}

tokens/src/core/global/spacing.json

@@ -25,6 +25,11 @@
           "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." }
         }
       }
+    },
+    "grid": {
+      "gutter-width": {
+        "value": "24px", "type": "dimension", "description": "Grid gutter width value."
+      }
     }
   }
 }