@openedx/paragon 23.0.0-alpha.1 → 23.0.0-alpha.2

package/lib/build-tokens.js

@@ -31,8 +31,13 @@ async function buildTokensCommand(commandArgs) {
   } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
 
   const coreConfig = {
-    include: [path.resolve(__dirname, '../tokens/src/core/**/*.json')],
-    source: tokensSource ? [`${tokensSource}/core/**/*.json`] : [],
+    include: [
+      path.resolve(__dirname, '../tokens/src/core/**/*.json'),
+      path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
+    ],
+    source: tokensSource
+      ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
+      : [],
     platforms: {
       css: {
         prefix: 'pgn',
@@ -67,8 +72,17 @@ async function buildTokensCommand(commandArgs) {
 
   const getStyleDictionaryConfig = (themeVariant) => ({
     ...coreConfig,
-    include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`)],
-    source: tokensSource ? [`${tokensSource}/themes/${themeVariant}/**/*.json`] : [],
+    include: [
+      ...coreConfig.include,
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`),
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`),
+    ],
+    source: tokensSource
+      ? [
+        `${tokensSource}/themes/${themeVariant}/**/*.json`,
+        `${tokensSource}/themes/${themeVariant}/**/*.toml`,
+      ]
+      : [],
     transform: {
       'color/sass-color-functions': {
         ...StyleDictionary.transform['color/sass-color-functions'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "23.0.0-alpha.1",
+  "version": "23.0.0-alpha.2",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -68,6 +68,7 @@
     "file-selector": "^0.6.0",
     "glob": "^8.0.3",
     "inquirer": "^8.2.5",
+    "js-toml": "^1.0.0",
     "lodash.uniqby": "^4.7.0",
     "log-update": "^4.0.0",
     "mailto-link": "^2.0.0",

package/src/Button/index.scss

@@ -91,8 +91,6 @@
     opacity: var(--pgn-other-btn-disabled-opacity);
   }
 
-  // Button Icon Sizes
-
   .btn-icon-before {
     margin-inline-end: .5rem;
     margin-left: -.25em;

package/src/Chip/index.scss

@@ -93,11 +93,12 @@
     background-color: var(--pgn-color-chip-bg-dark);
 
     &.selected {
-      @include chip-outline(var(--pgn-color-chip-outline-dark),
-      calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
-      calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
-      var(--pgn-spacing-chip-outline-selected-distance-dark)
-    );
+      @include chip-outline(
+        var(--pgn-color-chip-outline-dark),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-dark)
+      );
 
       &:focus {
         border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);

package/src/Chip/mixins.scss

@@ -1,8 +1,8 @@
 @mixin chip-outline(
   $outline-color: var(--pgn-color-white),
   $distance-to-border: 0,
-  $border-radius: 50%,
-  $border-width-value: .125rem
+  $outline-border-radius: 50%,
+  $outline-border-width: .125rem
 ) {
   &::before {
     content: "";
@@ -11,8 +11,8 @@
     right: $distance-to-border;
     bottom: $distance-to-border;
     left: $distance-to-border;
-    border: solid $border-width-value $outline-color;
-    border-radius: var(--pgn-size-border-radius-base);
+    border: solid $outline-border-width $outline-color;
+    border-radius: $outline-border-radius;
   }
 }
 

package/src/Collapsible/index.scss

@@ -6,7 +6,7 @@
 
   .collapsible-trigger {
     padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
-    border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
+    border-radius: var(--pgn-size-card-border-radius-inner);
     border-bottom: var(--pgn-size-card-border-width) solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
@@ -22,8 +22,8 @@
 
     &[aria-expanded="true"] {
       border-radius:
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0;
+        var(--pgn-size-card-border-radius-inner)
+        var(--pgn-size-card-border-radius-inner) 0 0;
       border-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;

package/src/Stepper/index.scss

@@ -8,8 +8,9 @@
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x);
+    padding:
+      var(--pgn-spacing-stepper-header-step-list-padding-y)
+      var(--pgn-spacing-stepper-header-step-list-padding-x);
     display: flex;
     align-items: center;
     margin: var(--pgn-spacing-stepper-header-step-list-margin);

package/src/Tabs/index.scss

@@ -30,8 +30,9 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
-        // stylelint-disable-next-line max-line-length
-        padding: var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
+        padding:
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x)
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 
         &:focus {
           background-color: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
@@ -62,8 +63,9 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
-      // stylelint-disable-next-line max-line-length
-      padding: var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
+      padding:
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x)
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
       border: none;
 
       &:focus {
@@ -97,8 +99,9 @@
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
+    padding:
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x)
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
 
     &:hover {
       background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover);

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 Thu, 09 May 2024 13:33:11 GMT
+ * Generated on Wed, 15 May 2024 12:30:36 GMT
  */
 
 :root {
@@ -73,6 +73,7 @@
   --pgn-typography-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",  "Courier New", monospace;
   --pgn-typography-font-family-serif: serif;
   --pgn-typography-font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",  Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",  "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pgn-typography-print-page-size: a3;
   --pgn-typography-display-mobile: 3.25rem;
   --pgn-typography-display-line-height-mobile: 3.5rem;
   --pgn-typography-display-line-height-base: 1;
@@ -111,13 +112,12 @@
   --pgn-typography-headings-font-family: inherit;
   --pgn-typography-dropdown-item-text-decoration: none;
   --pgn-typography-code-font-size: 87.5%;
-  --pgn-typography-breadcrumb-font-size: inherit;
   --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-table-cell-padding-base: .75rem;
   --pgn-spacing-label-margin-bottom: .5rem;
   --pgn-spacing-spacer-base: 1rem;
   --pgn-spacing-spacer-0: 0;
@@ -147,7 +147,6 @@
   --pgn-spacing-popover-icon-margin-right: .5rem;
   --pgn-spacing-popover-header-padding-x: 1rem;
   --pgn-spacing-popover-header-padding-y: .5rem;
-  --pgn-spacing-pagination-margin-x: .5rem;
   --pgn-spacing-pagination-padding-x-lg: 1.5rem;
   --pgn-spacing-pagination-padding-x-sm: .6rem;
   --pgn-spacing-pagination-padding-x-base: 1rem;
@@ -225,10 +224,8 @@
   --pgn-spacing-chip-outline-focus-distance-light: .313rem;
   --pgn-spacing-chip-outline-selected-distance-dark: 3px;
   --pgn-spacing-chip-outline-selected-distance-light: 3px;
-  --pgn-spacing-chip-padding-to-icon: 3px;
-  --pgn-spacing-chip-padding-icon: .25rem;
   --pgn-spacing-chip-padding-x: .5rem;
-  --pgn-spacing-chip-padding-y: .125rem;
+  --pgn-spacing-chip-padding-y: 1px;
   --pgn-spacing-chip-margin-icon: .25rem;
   --pgn-spacing-chip-margin-base: .125rem;
   --pgn-spacing-carousel-indicator-spacer: 3px;
@@ -248,10 +245,6 @@
   --pgn-spacing-bubble-expandable-padding-x: .25rem;
   --pgn-spacing-bubble-expandable-padding-y: 0;
   --pgn-spacing-breadcrumb-margin-left: .5rem;
-  --pgn-spacing-breadcrumb-margin-bottom: 1rem;
-  --pgn-spacing-breadcrumb-padding-item: .5rem;
-  --pgn-spacing-breadcrumb-padding-x: 1rem;
-  --pgn-spacing-breadcrumb-padding-y: .75rem;
   --pgn-spacing-badge-padding-y: .125rem;
   --pgn-spacing-badge-padding-x-pill: .6em;
   --pgn-spacing-badge-padding-x-base: .5rem;
@@ -305,7 +298,6 @@
   --pgn-size-popover-icon-height: 1rem;
   --pgn-size-popover-max-width: 480px;
   --pgn-size-pagination-focus-outline: 0;
-  --pgn-size-pagination-focus-border-width: .125rem;
   --pgn-size-pagination-toggle-border-sm: .25rem;
   --pgn-size-pagination-toggle-border-base: .3125rem;
   --pgn-size-pagination-reduced-dropdown-min-width: 6rem;
@@ -362,7 +354,7 @@
   --pgn-size-data-table-layout-sidebar-width: 12rem;
   --pgn-size-data-table-dropdown-pagination-min-width: 6rem;
   --pgn-size-data-table-dropdown-pagination-max-height: 60vh;
-  --pgn-size-data-table-border: 1px;
+  --pgn-size-data-table-border: 2px;
   --pgn-size-container-max-width-xl: 1440px;
   --pgn-size-container-max-width-lg: 1192px;
   --pgn-size-container-max-width-md: 952px;
@@ -371,8 +363,8 @@
   --pgn-size-color-picker-md: calc(1.3333em + 1.125rem + 2px);
   --pgn-size-color-picker-sm: 2rem;
   --pgn-size-code-pre-scrollable-max-height: 340px;
-  --pgn-size-chip-icon: 1.25rem;
-  --pgn-size-chip-border-radius: .25rem;
+  --pgn-size-chip-icon: 1.5rem;
+  --pgn-size-chip-border-radius: .375rem;
   --pgn-size-carousel-caption-width: 70%;
   --pgn-size-carousel-indicator-height-area-hit: 10px;
   --pgn-size-carousel-indicator-height-base: 3px;
@@ -406,9 +398,9 @@
   --pgn-size-annotation-arrow-border-width: .5rem;
   --pgn-size-alert-border-width: 0;
   --pgn-size-rounded-pill: 50rem;
-  --pgn-size-border-radius-sm: 4px;
-  --pgn-size-border-radius-lg: 7px;
-  --pgn-size-border-radius-base: 6px;
+  --pgn-size-border-radius-sm: .25rem;
+  --pgn-size-border-radius-lg: .425rem;
+  --pgn-size-border-radius-base: .375rem;
   --pgn-size-border-width: 1px;
   --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
   --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal);
@@ -481,7 +473,6 @@
   --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y);
   --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base);
   --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2);
-  --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2);
   --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem;
   --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem;
   --pgn-spacing-menu-item-icon-margin-right: var(--pgn-spacing-menu-item-icon-margin-left);
@@ -512,7 +503,6 @@
   --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width);
   --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow);
   --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow);
-  --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border);
   --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm);
   --pgn-size-popover-border-width: var(--pgn-size-border-width);
   --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg);
@@ -536,7 +526,6 @@
   --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width);
   --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base);
-  --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus);
   --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2);
   --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4);
   --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75);
@@ -552,7 +541,6 @@
   --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm);
   --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg);
   --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base);
-  --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base);
   --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width);
   --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base);
   --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family);
@@ -592,6 +580,7 @@
   --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-card-border-radius-inner: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
   --pgn-size-btn-focus-border-radius-sm: var(--pgn-size-btn-border-radius-base);
   --pgn-size-btn-focus-border-radius-base: 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);

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 Thu, 09 May 2024 13:33:11 GMT
+ * Generated on Wed, 15 May 2024 07:58:56 GMT
  */
 
 :root {
@@ -253,13 +253,11 @@
   --pgn-elevation-form-control-indicator-active: none;
   --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1);
   --pgn-elevation-form-control-indicator-checked-base: none;
-  --pgn-elevation-form-input-focus: none;
   --pgn-elevation-form-input-base: none;
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-btn-box-shadow-active: none;
   --pgn-elevation-btn-box-shadow-base: none;
-  --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-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-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-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);
@@ -453,11 +451,13 @@
   --pgn-color-icon-button-bg-primary-inverse-base: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-focus: var(--pgn-color-icon-button-bg-base);
   --pgn-color-icon-button-bg-primary-base: var(--pgn-color-icon-button-bg-base);
+  --pgn-color-yiq-light: var(--pgn-color-white);
   --pgn-color-list-group-action-active-bg: var(--pgn-color-gray-200);
   --pgn-color-list-group-action-base: var(--pgn-color-gray-700);
   --pgn-color-list-group-disabled-base: var(--pgn-color-gray-600);
   --pgn-color-list-group-border: #00000020;
   --pgn-color-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-color-list-group-bg-base: var(--pgn-color-white);
   --pgn-color-hr-border: #0000001A;
   --pgn-color-headings-base: var(--pgn-color-black);
   --pgn-color-body-base: var(--pgn-color-gray-700);
@@ -472,7 +472,6 @@
   --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;
-  --pgn-color-data-table-border: var(--pgn-color-gray-200);
   --pgn-color-data-table-bg-is-loading: #FFFFFFB3;
   --pgn-color-code-pre: var(--pgn-color-gray-900);
   --pgn-color-code-kbd-bg: var(--pgn-color-gray-700);
@@ -565,7 +564,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-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);
   --pgn-color-badge-bg-primary: var(--pgn-color-primary-base);
@@ -611,7 +609,6 @@
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
@@ -896,11 +893,12 @@
   --pgn-color-icon-button-bg-primary-active-base: var(--pgn-color-icon-button-text-primary-base);
   --pgn-color-icon-button-bg-primary-inverse-hover: var(--pgn-color-icon-button-accent);
   --pgn-color-icon-button-bg-primary-hover: var(--pgn-color-icon-button-text-primary-base);
+  --pgn-color-blockquote-small: var(--pgn-color-gray-500);
   --pgn-color-text-muted: var(--pgn-color-gray-500);
   --pgn-color-list-group-action-active-base: var(--pgn-color-body-base);
   --pgn-color-list-group-action-hover: var(--pgn-color-list-group-action-base);
+  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-base: var(--pgn-color-active);
-  --pgn-color-list-group-bg-base: var(--pgn-color-bg-base);
   --pgn-color-link-brand-inline-base: var(--pgn-color-brand-500);
   --pgn-color-link-brand-base: var(--pgn-color-brand-500);
   --pgn-color-link-muted-inline-base: var(--pgn-color-primary-500);
@@ -931,6 +929,7 @@
   --pgn-color-dropdown-bg: var(--pgn-color-bg-base);
   --pgn-color-dropdown-header: var(--pgn-color-gray-500);
   --pgn-color-dropdown-text: var(--pgn-color-body-base);
+  --pgn-color-data-table-border: var(--pgn-color-light-300);
   --pgn-color-data-table-bg-base: var(--pgn-color-bg-base);
   --pgn-color-chip-label-dark: var(--pgn-color-chip-outline-dark);
   --pgn-color-chip-label-base: var(--pgn-color-primary-700);
@@ -939,7 +938,7 @@
   --pgn-color-chip-border-base: var(--pgn-color-light-800);
   --pgn-color-chip-bg-dark: var(--pgn-color-primary-300);
   --pgn-color-card-divider-bg: var(--pgn-color-light-400);
-  --pgn-color-card-border-focus-base: #0A305580;
+  --pgn-color-card-border-focus-base: var(--pgn-color-primary-500);
   --pgn-color-card-bg-muted: var(--pgn-color-light-200);
   --pgn-color-card-bg-dark: var(--pgn-color-primary-500);
   --pgn-color-card-bg-base: var(--pgn-color-bg-base);
@@ -1137,6 +1136,7 @@
   --pgn-color-bg-active: var(--pgn-color-primary-500);
   --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-elevation-form-input-focus: 0 0 0 1px var(--pgn-color-primary-500);
   --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --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-base);
@@ -1233,7 +1233,6 @@
   --pgn-color-icon-button-bg-success-active-hover: var(--pgn-color-icon-button-bg-success-active-base);
   --pgn-color-icon-button-bg-secondary-active-focus: var(--pgn-color-icon-button-bg-secondary-active-base);
   --pgn-color-icon-button-bg-secondary-active-hover: var(--pgn-color-icon-button-bg-secondary-active-base);
-  --pgn-color-list-group-disabled-bg: var(--pgn-color-list-group-bg-base);
   --pgn-color-list-group-active-bg: var(--pgn-color-bg-active);
   --pgn-color-link-brand-inline-hover-base: #51002BFF;
   --pgn-color-link-brand-inline-decoration: #9D00544D;
@@ -1468,13 +1467,14 @@
   --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-color-input-btn-focus: var(--pgn-color-bg-active);
   --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");
   --pgn-other-content-form-control-radio-indicator-icon-checked-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23C32D3AFF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-radio-indicator-icon-checked-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23178253FF'/%3e%3c/svg%3e");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-invalid: 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='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23C32D3AFF'/></svg>");
   --pgn-other-content-form-control-checkbox-indicator-icon-checked-valid: 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='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23178253FF'/></svg>");
+  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-elevation-dropzone-error: inset 0 0 0 2px var(--pgn-color-danger-300);
   --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);

package/styles/scss/core/_variables.scss

@@ -282,7 +282,7 @@ $element-color-levels: map-merge(
     "border": 200,
     "icon": 300,
     "active-border": 300,
-    "focus": 300,
+    "focus": 500,
     "graphic": 300,
     "default": 500,
     "light-text": 500,
@@ -303,7 +303,7 @@ $yiq-contrasted-threshold:  150 !default;
 
 // Customize the light and dark text colors for use in our YIQ color contrast function.
 $yiq-text-dark:             theme-color("gray", "text") !default;
-$yiq-text-light:            $white !default;
+$yiq-text-light:            var(--pgn-color-yiq-light) !default;
 
 // Characters which are escaped by the escape-svg function
 $escaped-characters: (
@@ -323,7 +323,6 @@ $enable-rounded:                              true !default;
 $enable-gradients:                            false !default;
 $enable-transitions:                          true !default;
 $enable-prefers-reduced-motion-media-query:   true !default;
-$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:                         true !default;
 $enable-pointer-cursor-for-buttons:           true !default;
 $enable-print-styles:                         true !default;
@@ -750,7 +749,7 @@ $micro-line-height: var(--pgn-typography-line-height-micro);
 
 $text-muted: var(--pgn-color-text-muted) !default;
 
-$blockquote-small-color: theme-color("gray", "light-text") !default;
+$blockquote-small-color: var(--pgn-color-blockquote-small) !default;
 $blockquote-small-font-size: var(--pgn-typography-blockquote-small-font-size) !default;
 $blockquote-font-size: var(--pgn-typography-blockquote-font-size) !default;
 
@@ -837,7 +836,7 @@ $user-selects: all, auto, none !default;
 
 // Printing
 
-$print-page-size:                   a3 !default;
+$print-page-size:                   var(--pgn-typography-print-page-size) !default;
 $print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
 
 // List group

package/styles/scss/core/core.scss

@@ -18,4 +18,4 @@
 @import "../../css/core/custom-media-breakpoints";
 
 // Paragon components
-@import "../../../src/index";
+@import "../../../src";

package/tokens/README.md

@@ -1,7 +1,6 @@
 # Design Tokens
 
-This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens)
-and relevant ADR(TODO: add link when we merge an ADR). 
+This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens). 
 
 ## Overview
 

package/tokens/src/core/alias/size.json

@@ -3,9 +3,9 @@
     "border": {
       "width": { "value": "1px", "type": "dimension", "source": "$border-width", "description": "Default border width." },
       "radius": {
-        "base": { "value": "6px", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
-        "lg": { "value": "7px", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
-        "sm": { "value": "4px", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
+        "base": { "value": ".375rem", "type": "dimension", "source": "$border-radius", "description": "Default border radius." },
+        "lg": { "value": ".425rem", "type": "dimension", "source": "$border-radius-lg", "description": "Large border radius." },
+        "sm": { "value": ".25rem", "type": "dimension", "source": "$border-radius-sm", "description": "Small border radius." }
       }
     },
     "rounded": {

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

@@ -1,18 +1,7 @@
 {
-  "typography": {
-    "breadcrumb": {
-      "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" }
-    }
-  },
   "spacing": {
     "breadcrumb": {
-      "padding": {
-        "y": { "value": ".75rem", "type": "dimension", "source": "$breadcrumb-padding-y" },
-        "x": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-padding-x" },
-        "item": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-item-padding" }
-      },
       "margin": {
-        "bottom": { "value": "1rem", "type": "dimension", "source": "$breadcrumb-margin-bottom" },
         "left": { "value": ".5rem", "type": "dimension", "source": "$breadcrumb-margin-left" }
       }
     }
@@ -21,9 +10,6 @@
     "breadcrumb": {
       "border": {
         "radius": {
-          "base": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$breadcrumb-border-radius"
-          },
           "focus": { "value": ".125rem", "type": "dimension", "source": "$breadcrumb-focus-border-radius" }
         },
         "axis": {

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

@@ -44,7 +44,12 @@
         "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
         "radius": {
           "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
-          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" }
+          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" },
+          "inner": {
+            "value": "calc({size.card.border.radius.base} - {size.card.border.width})",
+            "type": "dimension",
+            "source": "$card-inner-border-radius"
+          }
         }
       },
       "focus": {

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

@@ -8,10 +8,8 @@
         "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
       },
       "padding": {
-        "y": { "value": ".125rem", "type": "dimension", "source": "$chip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" },
-        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-padding" },
-        "to-icon": { "value": "3px", "type": "dimension", "source": "$chip-padding-to-icon" }
+        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
+        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
       },
       "outline": {
         "selected-distance": {
@@ -36,8 +34,8 @@
   },
   "size": {
     "chip": {
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },
-      "icon": { "value": "1.25rem", "type": "dimension", "source": "$chip-icon-size" }
+      "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" },
+      "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" }
     }
   }
 }

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

@@ -1,8 +1,8 @@
 {
   "size": {
     "color-picker": {
-      "sm": { "value": "2rem", "source": "$picker-size-sm", "type": "dimension"},
-      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "source": "$picker-size-md", "type": "dimension"}
+      "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
+      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
     }
   }
 }

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

@@ -1,7 +1,7 @@
 {
   "size": {
     "data-table": {
-      "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
+      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
       "dropdown": {
         "pagination": {
           "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },

package/tokens/src/core/components/Form/size.json

@@ -57,7 +57,7 @@
         }
       },
       "control": {
-        "indicator": { 
+        "indicator": {
           "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
           "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
           "border": {
@@ -101,7 +101,8 @@
             "icon": {
               "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
               "type": "dimension",
-              "source": "$custom-select-feedback-icon-size" }
+              "source": "$custom-select-feedback-icon-size"
+            }
           },
           "border": {
             "width": {
@@ -109,11 +110,6 @@
                 "value": "{size.form.input.width.border}",
                 "type": "dimension",
                 "source": "$custom-select-border-width"
-              },
-              "focus": {
-                "value": "{size.form.input.width.focus}",
-                "type": "dimension",
-                "source": "$custom-select-focus-width"
               }
             },
             "radius": {