feat: added missing SCSS variables in design tokens

src/Alert/Alert.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

src/Annotation/Annotation.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 {

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;

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 Fri, 09 Jun 2023 07:34:34 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,16 +45,19 @@
   --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;
   --pgn-typography-font-weight-semi-bold: 500;
   --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,9 @@
   --pgn-typography-badge-font-size: 75%;
   --pgn-typography-alert-line-height: 1.5rem;
   --pgn-typography-alert-font-size: .875rem;
+  --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 +131,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;

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");

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

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

tokens/src/core/global/spacing.json

@@ -14,6 +14,17 @@
       "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." }
+        }
+      }
     }
   }
 }

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"
+      }
+    }
   }
 }

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."
+      }
     }
   }
 }

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": {