@openedx/paragon 22.0.0-alpha.16 → 22.0.0-alpha.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.0.0-alpha.16",
+  "version": "22.0.0-alpha.18",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Avatar/README.md

@@ -5,7 +5,6 @@ components:
 - Avatar
 categories:
 - Imagery & Iconography
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

package/src/Form/_index.scss

@@ -42,6 +42,20 @@
   flex-grow: 1;
   align-items: flex-start;
 
+  textarea {
+    &.form-control {
+      min-height: var(--pgn-size-form-input-height-base);
+    }
+
+    &.form-control-lg {
+      min-height: var(--pgn-size-form-input-height-lg);
+    }
+
+    &.form-control-sm {
+      min-height: var(--pgn-size-form-input-height-sm);
+    }
+  }
+
   @media (--pgn-size-breakpoint-min-width-sm) {
     margin-inline-end: var(--pgn-spacing-form-control-gutter);
   }

package/src/Image/README.md

@@ -3,7 +3,6 @@ title: 'Image'
 type: 'component'
 categories:
 - Imagery & Iconography
-- Content
 components:
 - Image
 status: 'Stable'

package/src/Nav/index.scss

@@ -55,7 +55,7 @@
     .nav-item.show .nav-link {
       color: var(--pgn-color-nav-pills-base-link-active-text);
       background-color: var(--pgn-color-nav-pills-base-link-active-bg);
-      border-color: var(--pgn-color-primary-base);
+      border-color: var(--pgn-color-nav-pills-base-link-active-border);
 
       &:focus {
         // stylelint-disable-next-line max-line-length
@@ -104,9 +104,9 @@
         background-color: var(--pgn-color-white);
 
         &:hover {
-          // background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover);
+          background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-focus-hover);
           color: var(--pgn-color-nav-pills-inverse-link-text-active-focus);
-          // border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
+          border-color: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
         }
       }
     }
@@ -122,7 +122,7 @@
       border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
 
       .dropdown .dropdown-toggle {
-        border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+        border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
 
         &:hover {
           border-bottom: none;
@@ -156,14 +156,14 @@
 }
 
 .nav-tabs {
-  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border);
+  border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
 
   button.nav-link {
     border: none;
     border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
 
     &.disabled {
-      border-color: transparent;
+      border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
     }
   }
 
@@ -181,14 +181,14 @@
     }
 
     &:focus {
-      border-bottom: var(--pgn-size-nav-tabs-border-width) solid transparent;
+      border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
 
       @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
     }
 
     &.disabled {
       color: var(--pgn-color-nav-link-text-disabled);
-      background-color: transparent;
+      background-color: var(--pgn-color-nav-tabs-base-text-disabled);
     }
   }
 
@@ -238,7 +238,7 @@
 
 .nav-button-group {
   .nav-link {
-    border: solid 1px var(--pgn-color-nav-tabs-base-border);
+    border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
 
     &:first-child {
       @include border-left-radius(var(--pgn-size-nav-pills-border-radius));

package/src/SearchField/README.md

@@ -10,7 +10,6 @@ components:
 - SearchFieldSubmitButton
 categories:
 - Forms
-- Navigation
 status: 'Stable'
 designStatus: 'Needs Review'
 devStatus: 'Done'

package/src/SelectableBox/README.md

@@ -6,7 +6,6 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'In progress'

package/src/Spinner/README.md

@@ -6,7 +6,6 @@ components:
 - Spinner
 categories:
 - Status & metadata
-- Choreography
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

package/src/Stepper/README.md

@@ -10,7 +10,6 @@ components:
 - StepperHeaderStep
 categories:
 - Navigation
-- Content
 designStatus: 'Done'
 devStatus: 'Done'
 notes: |

package/src/Tabs/index.scss

@@ -79,6 +79,14 @@
         color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
         background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
       }
+
+      &:focus {
+        @include nav-tabs-link-focus(
+          var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
+          var(--pgn-size-nav-tabs-border-radius),
+          var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
+        );
+      }
     }
   }
 

package/src/Truncate/README.md

@@ -3,6 +3,8 @@ title: 'Truncate'
 type: 'component'
 components:
 - Truncate
+categories:
+- Content
 status: 'New'
 designStatus: 'Done'
 devStatus: 'Done'

package/src/hooks/useIndexOfLastVisibleChild.mdx

@@ -3,7 +3,6 @@ title: 'useIndexOfLastVisibleChild'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIndexOfLastVisibleChild
 status: 'New'

package/src/hooks/useIsVisible.mdx

@@ -3,7 +3,6 @@ title: 'useIsVisible'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useIsVisible
 status: 'Stable'

package/src/hooks/useWindowSize.mdx

@@ -3,7 +3,6 @@ title: 'useWindowSize'
 type: 'hook'
 categories:
 - Hooks
-- Layout
 components:
 - useWindowSize
 status: 'New'

package/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, 22 Sep 2023 08:20:17 GMT
+ * Generated on Thu, 16 Nov 2023 10:44:11 GMT
  */
 
 :root {
@@ -26,7 +26,6 @@
   --pgn-elevation-tooltip-zindex: 1070;
   --pgn-elevation-sheet-zindex-main: 1032;
   --pgn-elevation-sheet-zindex-backdrop: 1031;
-  --pgn-elevation-progress-bar-box-shadow: none;
   --pgn-elevation-product-tour-checkpoint-zindex: 1060;
   --pgn-elevation-popover-zindex: 1060;
   --pgn-elevation-modal-zindex: 1050;
@@ -129,6 +128,7 @@
   --pgn-spacing-toast-container-gutter-lg: 1.25rem;
   --pgn-spacing-toast-padding-y: .25rem;
   --pgn-spacing-toast-padding-x: .75rem;
+  --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance: 5px;
   --pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem;
   --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem;
@@ -157,7 +157,7 @@
   --pgn-spacing-navbar-toggler-padding-x: .75rem;
   --pgn-spacing-navbar-toggler-padding-y: .25rem;
   --pgn-spacing-navbar-padding-x-nav-link: .5rem;
-  --pgn-spacing-nav-link-distance-to-border: .313rem;
+  --pgn-spacing-nav-link-distance-to-border: 4px;
   --pgn-spacing-nav-link-padding-x: 1rem;
   --pgn-spacing-nav-link-padding-y: .5rem;
   --pgn-spacing-modal-dialog-margin: 1.5rem;
@@ -208,7 +208,7 @@
   --pgn-spacing-dropdown-padding-x-base: 0;
   --pgn-spacing-dropdown-spacer: .125rem;
   --pgn-spacing-data-table-footer-position: center;
-  --pgn-spacing-data-table-padding-cell: .75rem;
+  --pgn-spacing-data-table-padding-cell: .5rem .75rem;
   --pgn-spacing-data-table-padding-small: .5rem;
   --pgn-spacing-data-table-padding-y: .75rem;
   --pgn-spacing-data-table-padding-x: .75rem;
@@ -371,14 +371,13 @@
   --pgn-size-chip-icon: 1.25rem;
   --pgn-size-chip-border-radius: .25rem;
   --pgn-size-carousel-caption-width: 70%;
-  --pgn-size-carousel-indicator-height-area-hit: 3px;
+  --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
   --pgn-size-carousel-indicator-width: 30px;
   --pgn-size-carousel-control-width-icon: 20px;
   --pgn-size-carousel-control-width-base: 15%;
   --pgn-size-card-logo-height: 4.125rem;
   --pgn-size-card-logo-width: 7.25rem;
-  --pgn-size-card-image-border-radius: .3125rem;
   --pgn-size-card-image-vertical-max-height: 140px;
   --pgn-size-card-image-horizontal-width-max: 240px;
   --pgn-size-card-focus-border-width: 2px;
@@ -588,6 +587,7 @@
   --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border));
   --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width));
+  --pgn-size-card-image-border-radius: var(--pgn-size-card-border-radius-base);
   --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap));
   --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width);
   --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight);

package/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, 30 Oct 2023 14:36:05 GMT
+ * Generated on Wed, 15 Nov 2023 20:38:34 GMT
  */
 
 :root {
@@ -37,6 +37,7 @@
   --pgn-color-overflow-scroll-opacity-mask-transparent: #00000066;
   --pgn-color-nav-tabs-inverse-link-bg-active-hover: #00000000;
   --pgn-color-nav-tabs-base-link-active-bg: #00000000;
+  --pgn-color-nav-tabs-base-bg-hover: #00000000;
   --pgn-color-nav-link-border: #00000000;
   --pgn-color-menu-item-bg: #00000000;
   --pgn-color-icon-button-text-primary-inverse-active-hover: #000000FF;
@@ -225,6 +226,7 @@
   --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
+  --pgn-elevation-progress-bar-box-shadow: none;
   --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-black-active: none;
@@ -259,7 +261,6 @@
   --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15))  drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
   --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15);
   --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15));
-  --pgn-elevation-progress-bar-box-shadow: none;
   --pgn-elevation-popover-box-shadow: none;
   --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15);
   --pgn-elevation-dropdown-box-shadow: none;
@@ -343,6 +344,8 @@
   --pgn-color-progress-bar-bar-bg-base: var(--pgn-color-accent-a);
   --pgn-color-progress-bar-bar-base: var(--pgn-color-white);
   --pgn-color-product-tour-checkpoint-box-shadow: #0000004D;
+  --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-base);
+  --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-base);
   --pgn-color-product-tour-checkpoint-body: var(--pgn-color-gray-700);
   --pgn-color-popover-arrow-outer: #0000000D;
   --pgn-color-popover-header-border-bottom-dark: #F2F2F2FF;
@@ -374,8 +377,14 @@
   --pgn-color-nav-light: #00000080;
   --pgn-color-nav-dark: #FFFFFF80;
   --pgn-color-nav-divider: var(--pgn-color-gray-100);
+  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-primary-base);
   --pgn-color-nav-pills-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-pills-base-link-active-border: var(--pgn-color-white);
+  --pgn-color-nav-tabs-inverse-dropdown-border: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
   --pgn-color-nav-tabs-inverse-link-text-base: var(--pgn-color-white);
+  --pgn-color-nav-tabs-base-link-disabled-border: var(--pgn-color-nav-link-border);
+  --pgn-color-nav-tabs-base-border-focus: var(--pgn-color-nav-tabs-base-bg-hover);
+  --pgn-color-nav-tabs-base-text-disabled: var(--pgn-color-nav-tabs-base-bg-hover);
   --pgn-color-nav-link-text-disabled: var(--pgn-color-gray-300);
   --pgn-color-nav-link-text-base: var(--pgn-color-gray-700);
   --pgn-color-modal-backdrop-bg: var(--pgn-color-black);
@@ -453,11 +462,12 @@
   --pgn-color-body-base: var(--pgn-color-gray-700);
   --pgn-color-form-control-range-track-bg: var(--pgn-color-gray-300);
   --pgn-color-form-control-select-bg-disabled: var(--pgn-color-gray-100);
+  --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
   --pgn-color-form-control-indicator-border: var(--pgn-color-gray-700);
   --pgn-color-form-input-group-addon-bg: var(--pgn-color-gray-100);
   --pgn-color-form-input-bg-disabled: var(--pgn-color-gray-100);
   --pgn-color-form-input-base: var(--pgn-color-gray-700);
-  --pgn-color-dropdown-link-hover-base: var(--pgn-color-gray-900);
+  --pgn-color-dropdown-link-hover-base: #000000FF;
   --pgn-color-dropdown-link-base: var(--pgn-color-gray-900);
   --pgn-color-dropdown-divider-bg: var(--pgn-color-gray-100);
   --pgn-color-dropdown-border: #00000026;
@@ -552,7 +562,6 @@
   --pgn-color-bubble-text-warning: var(--pgn-color-white);
   --pgn-color-bubble-text-success: var(--pgn-color-white);
   --pgn-color-breadcrumb-inverse-base: var(--pgn-color-white);
-  --pgn-color-breadcrumb-divider: var(--pgn-color-gray-600);
   --pgn-color-breadcrumb-bg: var(--pgn-color-gray-200);
   --pgn-color-badge-bg-dark: var(--pgn-color-dark-base);
   --pgn-color-badge-bg-light: var(--pgn-color-light-base);
@@ -698,6 +707,7 @@
   --pgn-color-secondary-200: #D1D1D1FF;
   --pgn-color-secondary-100: #F4F4F4FF;
   --pgn-color-tooltip-arrow-base: var(--pgn-color-tooltip-bg-base);
+  --pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
   --pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover: var(--pgn-color-primary-300);
   --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
   --pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus: var(--pgn-color-primary-500);
@@ -711,8 +721,6 @@
   --pgn-color-search-field-border-base: var(--pgn-color-gray-500);
   --pgn-color-progress-bar-bar-bg-annotated: var(--pgn-color-dark-500);
   --pgn-color-progress-bar-border: var(--pgn-color-gray-500);
-  --pgn-color-product-tour-checkpoint-breadcrumb: var(--pgn-color-primary-500);
-  --pgn-color-product-tour-checkpoint-border: var(--pgn-color-brand-500);
   --pgn-color-product-tour-checkpoint-bg: var(--pgn-color-light-300);
   --pgn-color-popover-body: var(--pgn-color-body-base);
   --pgn-color-popover-header-text: var(--pgn-color-headings-base);
@@ -728,7 +736,7 @@
   --pgn-color-nav-pills-inverse-tab-content-color: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-active-focus-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-bg-active: var(--pgn-color-nav-pills-inverse-link-text-base);
-  --pgn-color-nav-pills-inverse-link-border-active-focus: var(--pgn-color-nav-pills-inverse-link-text-base);
+  --pgn-color-nav-pills-inverse-link-border-focus-hover: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
   --pgn-color-nav-pills-inverse-link-border-active: var(--pgn-color-nav-pills-inverse-link-text-base);
   --pgn-color-nav-pills-inverse-link-border-base: var(--pgn-color-dark-300);
   --pgn-color-nav-pills-inverse-link-text-active-hover: var(--pgn-color-nav-pills-inverse-link-text-base);
@@ -742,7 +750,7 @@
   --pgn-color-nav-tabs-inverse-link-border-bottom: var(--pgn-color-dark-300);
   --pgn-color-nav-tabs-base-link-active-text: var(--pgn-color-primary-500);
   --pgn-color-nav-tabs-base-link-hover-bg: var(--pgn-color-light-400);
-  --pgn-color-nav-tabs-base-border: var(--pgn-color-light-400);
+  --pgn-color-nav-tabs-base-border-base: var(--pgn-color-light-400);
   --pgn-color-modal-content-bg: var(--pgn-color-bg-base);
   --pgn-color-menu-select-btn-link-color: var(--pgn-color-primary-500);
   --pgn-color-menu-item-hover-color: var(--pgn-color-btn-text-tertiary);
@@ -905,8 +913,6 @@
   --pgn-color-form-control-select-base: var(--pgn-color-form-input-base);
   --pgn-color-form-control-switch-indicator-checked-bg: var(--pgn-color-success-base);
   --pgn-color-form-control-indicator-active-base: var(--pgn-color-active);
-  --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-primary-500);
-  --pgn-color-form-control-indicator-checked-bg-disabled: #0A305580;
   --pgn-color-form-control-indicator-checked-invalid: var(--pgn-color-danger-base);
   --pgn-color-form-control-indicator-checked-valid: var(--pgn-color-success-base);
   --pgn-color-form-control-indicator-bg-disabled: var(--pgn-color-form-input-bg-disabled);
@@ -1126,7 +1132,7 @@
   --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
   --pgn-border-color-nav-tabs-link-border-focus: var(--pgn-color-nav-tabs-base-link-active-text);
-  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border);
+  --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-action-default-danger-900: #60161DFF;
   --pgn-color-action-default-danger-800: #691820FF;
   --pgn-color-action-default-danger-700: #731A22FF;
@@ -1178,7 +1184,7 @@
   --pgn-color-tab-more-link-dropdown-toggle-btn-border-focus: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
   --pgn-color-stepper-header-step-description-error: var(--pgn-color-stepper-header-step-bubble-error);
   --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg);
-  --pgn-color-popover-danger-icon: var(--pgn-color-warning-500);
+  --pgn-color-popover-danger-icon: var(--pgn-color-danger-500);
   --pgn-color-popover-danger-bg: var(--pgn-color-danger-100);
   --pgn-color-popover-warning-icon: var(--pgn-color-warning-500);
   --pgn-color-popover-warning-bg: var(--pgn-color-warning-100);
@@ -1194,7 +1200,7 @@
   --pgn-color-nav-pills-inverse-link-bg-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
   --pgn-color-nav-pills-inverse-link-border-active-hover: var(--pgn-color-nav-pills-inverse-link-border-base);
   --pgn-color-nav-pills-inverse-link-text-active-focus: var(--pgn-color-nav-pills-inverse-link-text-active);
-  --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border);
+  --pgn-color-nav-pills-base-link-border: var(--pgn-color-nav-tabs-base-border-base);
   --pgn-color-nav-pills-base-link-active-bg: var(--pgn-color-bg-active);
   --pgn-color-nav-tabs-inverse-link-bg-hover: var(--pgn-color-nav-tabs-inverse-link-border-bottom);
   --pgn-color-menu-item-focus-bg: var(--pgn-color-btn-active-bg-tertiary);
@@ -1480,6 +1486,7 @@
   --pgn-color-form-control-checkbox-indicator-indeterminate-base: var(--pgn-color-form-control-indicator-checked-base);
   --pgn-color-form-control-indicator-active-border: var(--pgn-color-form-control-indicator-active-bg);
   --pgn-color-form-control-indicator-checked-border-focus: var(--pgn-color-form-input-focus-border);
+  --pgn-color-form-control-indicator-checked-border-base: var(--pgn-color-form-control-indicator-checked-base);
   --pgn-color-btn-disabled-border-warning: var(--pgn-color-btn-border-warning);
   --pgn-color-btn-disabled-border-success: var(--pgn-color-btn-border-success);
   --pgn-color-btn-disabled-border-outline-primary: var(--pgn-color-btn-hover-text-outline-primary);

package/tokens/src/core/components/Card.json

@@ -71,7 +71,7 @@
         "vertical": {
           "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
         },
-        "border-radius": { "value": ".3125rem", "type": "dimension", "source": "$card-image-border-radius" }
+        "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
       },
       "logo": {
         "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },

package/tokens/src/core/components/Carousel.json

@@ -11,7 +11,7 @@
         "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
         "height": {
           "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
-          "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+          "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
         }
       },
       "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
@@ -27,7 +27,7 @@
       "base": {
         "value": "transform {transition.carousel.duration} ease-in-out",
         "type": "transition",
-        "source": "$carousel-transition-duration"
+        "source": "$carousel-transition"
       },
       "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
       "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },

package/tokens/src/core/components/DataTable.json

@@ -19,7 +19,7 @@
         "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
         "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
         "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
-        "cell": { "value": ".75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+        "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
       },
       "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
     }

package/tokens/src/core/components/Nav.json

@@ -45,7 +45,7 @@
           "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
           "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
         },
-        "distance-to-border": { "value": ".313rem", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+        "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
       },
       "divider": {
         "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }

package/tokens/src/core/components/ProgressBar.json

@@ -19,11 +19,6 @@
       "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
     }
   },
-  "elevation": {
-    "progress-bar": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
-    }
-  },
   "spacing": {
     "progress-bar": {
       "hint": {

package/tokens/src/core/components/Tab.json

@@ -11,7 +11,8 @@
       },
       "inverse-tabs-link-dropdown-toggle": {
         "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
-        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" }
+        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
+        "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
       }
     }
   }

package/tokens/src/themes/light/components/Breadcrumb.json

@@ -3,7 +3,6 @@
     "breadcrumb": {
       "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
       "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
-      "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" },
       "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
       "inverse": {
         "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },

package/tokens/src/themes/light/components/Dropdown.json

@@ -17,7 +17,12 @@
       "link": {
         "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" },
         "hover": {
-          "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" },
+          "base": { 
+            "value": "{color.gray.900}", 
+            "type": "color", 
+            "source": "$dropdown-link-hover-color",
+            "modify": [{ "type": "darken", "amount": 0.5 }]
+          },
           "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" }
         },
         "active": {

package/tokens/src/themes/light/components/Form/color.json

@@ -49,7 +49,7 @@
                 "value": "{color.bg.active}", "type": "color", "source": "$custom-control-indicator-checked-bg"
               },
               "disabled": {
-                "value": "{color.primary.500}",
+                "value": "{color.primary.base}",
                 "type": "color",
                 "source": "$custom-control-indicator-checked-disabled-bg",
                 "modify": [{ "type": "alpha", "amount": 0.5 }]
@@ -57,7 +57,7 @@
             },
             "border": {
               "base": {
-                "value": "{color.primary.500}",
+                "value": "{color.form.control.indicator.checked.base}",
                 "type": "color",
                 "source": "$custom-control-indicator-checked-border-color"
               },

package/tokens/src/themes/light/components/Nav.json

@@ -9,7 +9,7 @@
             "source": "$nav-tabs-link-active-border-color"
           },
           "hover": {
-            "value": "transparent transparent {color.nav.tabs.base.border}",
+            "value": "transparent transparent {color.nav.tabs.base.border.base}",
             "type": "color",
             "source": "$nav-tabs-link-hover-border-color"
           },
@@ -33,7 +33,16 @@
       },
       "tabs": {
         "base": {
-          "border": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+          "text": {
+            "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
+          },
+          "bg": {
+            "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+          },
+          "border": {
+            "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
+            "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+          },
           "link": {
             "hover": {
               "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
@@ -41,6 +50,9 @@
             "active": {
               "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
               "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+            },
+            "disabled": {
+              "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
             }
           }
         },
@@ -64,6 +76,9 @@
               }
             },
           "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+          },
+          "dropdown": {
+            "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
           }
         }
       },
@@ -72,9 +87,10 @@
           "link": {
             "active": {
               "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
-              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" }
+              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
+              "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
             },
-            "border": { "value": "{color.nav.tabs.base.border}", "type": "color", "source": "$nav-pills-link-border-color" }
+            "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
           }
         },
         "inverse": {
@@ -104,9 +120,14 @@
                 "source": "$nav-inverse-pills-link-active-hover-border-color"
               },
               "active-focus": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
+                "value": "{color.primary.base}",
                 "type": "color",
                 "source": "$nav-inverse-pills-link-active-focus-border-color"
+              },
+              "focus-hover": {
+                "value": "{color.nav.pills.inverse.link.border.active-focus}",
+                "type": "color",
+                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
               }
             },
             "bg": {

package/tokens/src/themes/light/components/Popover.json

@@ -39,7 +39,7 @@
       },
       "danger": {
         "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
-        "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-danger-icon-color" }
+        "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
       }
     }
   },