From 88e0a416476c4529416285307e61fb6610d9fb76 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Fri, 16 Jun 2023 14:49:30 +0300
Subject: [PATCH] fix: added missing SCSS variables in design tokens (#2364)

* feat: added missing SCSS variables in design tokens
* feat: added grid-gutter-width token
---
 src/Alert/index.scss                          |  6 +-
 src/Annotation/index.scss                     |  3 +-
 src/Card/card-bootstrap.scss                  |  2 -
 styles/css/core/variables.css                 | 13 ++-
 styles/css/themes/light/variables.css         |  4 +-
 styles/scss/core/_variables.scss              | 29 ++++---
 .../scss/core/bootstrap-override/_mixins.scss |  2 +
 .../mixins/_grid-framework.scss               | 80 +++++++++++++++++++
 .../core/bootstrap-override/mixins/_grid.scss | 69 ++++++++++++++++
 tokens/src/core/components/Spinner.json       |  3 +
 tokens/src/core/global/spacing.json           | 16 ++++
 tokens/src/core/global/transition.json        |  9 ++-
 tokens/src/core/global/typography.json        | 14 +++-
 tokens/src/themes/light/alias/color.json      |  8 ++
 14 files changed, 229 insertions(+), 29 deletions(-)
 create mode 100644 styles/scss/core/bootstrap-override/mixins/_grid-framework.scss
 create mode 100644 styles/scss/core/bootstrap-override/mixins/_grid.scss

diff --git a/src/Alert/index.scss b/src/Alert/index.scss
index 7ead686381..372b7fb51c 100644
--- a/src/Alert/index.scss
+++ b/src/Alert/index.scss
@@ -90,10 +90,8 @@
   }
 }
 
-.pgn__alert-message-wrapper-stacked {
-  .pgn__alert-actions {
-    margin-top: var(--pgn-spacing-alert-actions-gap);
-  }
+.pgn__alert-message-wrapper-stacked .pgn__alert-actions {
+  margin-top: var(--pgn-spacing-alert-actions-gap);
 }
 
 // Alternate styles
diff --git a/src/Annotation/index.scss b/src/Annotation/index.scss
index cef45ee6e5..a06f5629a1 100644
--- a/src/Annotation/index.scss
+++ b/src/Annotation/index.scss
@@ -17,8 +17,7 @@
 .pgn__annotation-success-top {
   @include annotation-variant(
     var(--pgn-color-annotation-bg-success),
-    var(--pgn-color-annotation-text-success), "top"
-  );
+    var(--pgn-color-annotation-text-success), "top");
 }
 
 .pgn__annotation-success-bottom {
diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss
index 9ca0e00ea8..bb192b97e7 100644
--- a/src/Card/card-bootstrap.scss
+++ b/src/Card/card-bootstrap.scss
@@ -42,8 +42,6 @@
   }
 }
 
-// TODO: This selector is not used in Paragon.
-// It is necessary to delete it and the existing design token (`$card-color`).
 .card-body {
   flex: 1 1 auto;
   min-height: 1px;
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index 7fb11fa2c6..0b1a0f3ecf 100644
--- a/styles/css/core/variables.css
+++ b/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 Thu, 08 Jun 2023 07:10:04 GMT
+ * Generated on Thu, 15 Jun 2023 15:10:16 GMT
  */
 
 :root {
@@ -32,7 +32,8 @@
   --pgn-elevation-modal-zindex: 1050;
   --pgn-elevation-modal-backdrop-zindex: 1040;
   --pgn-elevation-dropdown-zindex: 1000;
-  --pgn-transition-collapse: height .35s ease;
+  --pgn-transition-collapse-width: width .35s ease;
+  --pgn-transition-collapse-height: height .35s ease;
   --pgn-transition-fade: opacity .15s linear;
   --pgn-transition-base: all .2s ease-in-out;
   --pgn-transition-progress-bar-bar-transition: width .6s ease;
@@ -44,9 +45,11 @@
   --pgn-transition-carousel-duration: .6s;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
+  --pgn-typography-line-height-micro: .938rem;
   --pgn-typography-line-height-sm: 1.5;
   --pgn-typography-line-height-lg: 1.5;
   --pgn-typography-line-height-base: 1.5556;
+  --pgn-typography-font-weight-table-th: normal;
   --pgn-typography-font-weight-lead: inherit;
   --pgn-typography-font-weight-bolder: bolder;
   --pgn-typography-font-weight-bold: 700;
@@ -54,6 +57,7 @@
   --pgn-typography-font-weight-normal: 400;
   --pgn-typography-font-weight-light: 300;
   --pgn-typography-font-weight-lighter: lighter;
+  --pgn-typography-font-size-micro: .688rem;
   --pgn-typography-font-size-mobile-h1: 2.25rem;
   --pgn-typography-font-size-h6: .75rem;
   --pgn-typography-font-size-h5: .875rem;
@@ -111,6 +115,10 @@
   --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;
   --pgn-spacing-spacer-base: 1rem;
   --pgn-spacing-spacer-0: 0;
   --pgn-spacing-tooltip-margin: 0;
@@ -124,6 +132,7 @@
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
   --pgn-spacing-sticky-offset: 0;
+  --pgn-spacing-vertical-align: .125em;
   --pgn-spacing-selectable-box-box-space: .75rem;
   --pgn-spacing-selectable-box-border-radius: .25rem;
   --pgn-spacing-selectable-box-padding: 1rem;
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 136cc9b8e6..a001ea3665 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Mon, 05 Jun 2023 02:30:54 GMT
+ * Generated on Fri, 09 Jun 2023 07:34:35 GMT
  */
 
 :root {
@@ -1109,6 +1109,7 @@
   --pgn-color-theme-bg-light: var(--pgn-color-light-100);
   --pgn-color-theme-bg-brand: var(--pgn-color-brand-100);
   --pgn-color-theme-bg-primary: var(--pgn-color-primary-100);
+  --pgn-color-table-border: var(--pgn-color-border);
   --pgn-color-input-focus: var(--pgn-color-primary-500);
   --pgn-color-disabled: var(--pgn-color-gray-500);
   --pgn-color-bg-active: var(--pgn-color-primary-500);
@@ -1445,6 +1446,7 @@
   --pgn-color-theme-bg-info: var(--pgn-color-info-100);
   --pgn-color-theme-bg-success: var(--pgn-color-success-100);
   --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100);
+  --pgn-color-table-caption: var(--pgn-color-text-muted);
   --pgn-color-input-btn-focus: var(--pgn-color-input-focus);
   --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="%23454545FF"/></svg>');
   --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e");
diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss
index 440b10d6d4..592c0d05ba 100644
--- a/styles/scss/core/_variables.scss
+++ b/styles/scss/core/_variables.scss
@@ -295,7 +295,6 @@ $element-color-levels: map-merge(
 );
 
 // Set a specific jump point for requesting color jumps
-// TODO: can't use css variables due to conflict with SCSS function.
 $theme-color-interval: var(--pgn-theme-interval) !default;
 
 // The yiq lightness value that determines when the lightness
@@ -442,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;
@@ -667,8 +666,8 @@ $caret-spacing: var(--pgn-spacing-caret-base) !default;
 
 $transition-base: var(--pgn-transition-base) !default;
 $transition-fade: var(--pgn-transition-fade) !default;
-$transition-collapse: var(--pgn-transition-collapse) !default;
-$transition-collapse-width:   width .35s ease !default;
+$transition-collapse: var(--pgn-transition-collapse-height) !default;
+$transition-collapse-width: var(--pgn-transition-collapse-width) !default;
 
 $embed-responsive-aspect-ratios: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
@@ -747,8 +746,8 @@ $lead-font-weight: var(--pgn-typography-font-weight-lead) !default;
 $small-font-size: var(--pgn-typography-font-size-small-base) !default;
 $x-small-font-size: var(--pgn-typography-font-size-small-x) !default;
 
-$micro-font-size: .688rem;
-$micro-line-height: .938rem;
+$micro-font-size: var(--pgn-typography-font-size-micro);
+$micro-line-height: var(--pgn-typography-line-height-micro);
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
@@ -769,13 +768,13 @@ $mark-bg: var(--pgn-color-mark-bg) !default;
 
 $hr-margin-y: var(--pgn-size-hr-border-margin-y) !default;
 
-$label-margin-bottom: .5rem !default;
+$label-margin-bottom: var(--pgn-spacing-label-margin-bottom) !default;
 
-$table-cell-padding: 75rem !default;
-$table-cell-padding-sm: .3rem !default;
-$table-caption-color: $text-muted !default;
-$table-border-color: $border-color !default;
-$table-th-font-weight: null !default;
+$table-cell-padding: var(--pgn-spacing-table-cell-padding-base) !default;
+$table-cell-padding-sm: var(--pgn-spacing-table-cell-padding-sm) !default;
+$table-caption-color: var(--pgn-color-table-caption) !default;
+$table-border-color: var(--pgn-color-table-border) !default;
+$table-th-font-weight: var(--pgn-typography-font-weight-table-th) !default;
 
 // Z-index master list
 //
@@ -822,7 +821,7 @@ $input-btn-border-width: var(--pgn-size-input-btn-border-width) !default;
 
 // $spinner-width:           2rem !default;
 // $spinner-height:          $spinner-width !default;
-$spinner-vertical-align:      -.125em !default;
+$spinner-vertical-align:     calc(var(--pgn-spacing-vertical-align) * -1) !default;
 
 // $spinner-border-width:    .25em !default;
 
diff --git a/styles/scss/core/bootstrap-override/_mixins.scss b/styles/scss/core/bootstrap-override/_mixins.scss
index f427fad6ea..fb13f40fd5 100644
--- a/styles/scss/core/bootstrap-override/_mixins.scss
+++ b/styles/scss/core/bootstrap-override/_mixins.scss
@@ -1,2 +1,4 @@
 // Components
 @import "mixins/list-group";
+@import "mixins/grid";
+@import "mixins/grid-framework";
diff --git a/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss b/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss
new file mode 100644
index 0000000000..49dafa3499
--- /dev/null
+++ b/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);
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/styles/scss/core/bootstrap-override/mixins/_grid.scss b/styles/scss/core/bootstrap-override/mixins/_grid.scss
new file mode 100644
index 0000000000..50338d0626
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json
index a67d8fabe9..2c642554bf 100644
--- a/tokens/src/core/components/Spinner.json
+++ b/tokens/src/core/components/Spinner.json
@@ -12,5 +12,8 @@
         "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" }
       }
     }
+  },
+  "spacing": {
+    "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" }
   }
 }
diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json
index 3e4496584a..467fcba172 100644
--- a/tokens/src/core/global/spacing.json
+++ b/tokens/src/core/global/spacing.json
@@ -14,6 +14,22 @@
       "5": { "value": "calc({spacing.spacer.base} * 3rem)", "type": "dimension", "description": "Space value of level 5" },
       "5,5": { "value": "calc({spacing.spacer.base} * 4rem)", "type": "dimension", "description": "Space value of level 5.5"},
       "6": { "value": "calc({spacing.spacer.base} * 5rem)", "type": "dimension", "description": "Space value of level 6" }
+    },
+    "label": {
+      "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." }
+    },
+    "table": {
+      "cell": {
+        "padding": {
+          "base": { "value": "75rem", "type": "dimension", "description": "Padding for tables." },
+          "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." }
+        }
+      }
+    },
+    "grid": {
+      "gutter-width": {
+        "value": "24px", "type": "dimension", "description": "Grid gutter width value."
+      }
     }
   }
 }
diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json
index 4bb8d41b06..7cd6c13d3b 100644
--- a/tokens/src/core/global/transition.json
+++ b/tokens/src/core/global/transition.json
@@ -2,6 +2,13 @@
   "transition": {
     "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" },
     "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" },
-    "collapse": { "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition that takes 350ms" }
+    "collapse": {
+      "height": {
+        "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms"
+      },
+      "width": {
+        "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms"
+      }
+    }
   }
 }
diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json
index e7ffbd255a..935fa96e9b 100644
--- a/tokens/src/core/global/typography.json
+++ b/tokens/src/core/global/typography.json
@@ -52,6 +52,12 @@
           "type": "dimension",
           "source": "$lead-font-size",
           "description": "Lead text font size."
+        },
+        "micro": {
+          "value": ".688rem",
+          "type": "dimension",
+          "source": "$micro-font-size",
+          "description": "Micro utils text font size."
         }
       },
       "weight": {
@@ -69,13 +75,17 @@
           "source": "$font-weight-base",
           "description": "Basic font weight."
         },
-        "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." }
+        "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." },
+        "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." }
       }
     },
     "line-height": {
       "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." },
       "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." },
-      "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." }
+      "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." },
+      "micro": {
+        "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height."
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json
index 142765e36a..ec29f72280 100644
--- a/tokens/src/themes/light/alias/color.json
+++ b/tokens/src/themes/light/alias/color.json
@@ -27,6 +27,14 @@
     "input": {
       "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." }
     },
+    "table": {
+      "caption": {
+        "value": "{color.text-muted}", "type": "color", "description": "Table caption color."
+      },
+      "border": {
+        "value": "{color.border}", "type": "color", "description": "Table border color."
+      }
+    },
     "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." },
     "theme": {
       "bg": {