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

package/dist/core.css

@@ -154,6 +154,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;
@@ -192,13 +193,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;
@@ -228,7 +228,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;
@@ -306,10 +305,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;
@@ -329,10 +326,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;
@@ -386,7 +379,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;
@@ -443,7 +435,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;
@@ -452,8 +444,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;
@@ -487,9 +479,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);
@@ -562,7 +554,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);
@@ -593,7 +584,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);
@@ -617,7 +607,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);
@@ -633,7 +622,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);
@@ -673,6 +661,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);
@@ -1044,7 +1033,7 @@ mark,
 .blockquote-footer {
   display: block;
   font-size: var(--pgn-typography-blockquote-small-font-size);
-  color: var(--pgn-color-gray-500);
+  color: var(--pgn-color-blockquote-small);
 }
 .blockquote-footer::before {
   content: "— ";
@@ -8468,7 +8457,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
     page-break-after: avoid;
   }
   @page {
-    size: a3;
+    size: var(--pgn-typography-print-page-size);
   }
   body {
     min-width: 992px !important;
@@ -8510,7 +8499,7 @@ p > a.brand-link[href]:not(.btn):hover, a.brand-link.inline-link:hover {
 /**
  * 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
  */
 /**
  * IMPORTANT: This file is the result of assembling design tokens
@@ -11059,7 +11048,7 @@ a.pgn__card {
 }
 .collapsible-card .collapsible-trigger, .collapsible-card-lg .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;
@@ -11073,7 +11062,7 @@ a.pgn__card {
   margin-top: 0;
 }
 .collapsible-card .collapsible-trigger[aria-expanded=true], .collapsible-card-lg .collapsible-trigger[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;
+  border-radius: 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;
@@ -11190,7 +11179,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1);
   left: calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1);
   border: solid var(--pgn-spacing-chip-outline-selected-distance-light) var(--pgn-color-chip-outline-light);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-light.selected:focus {
   border: 1px solid var(--pgn-color-chip-border-focus-selected-light);
@@ -11233,7 +11222,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1);
   left: calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1);
   border: solid 0.125rem var(--pgn-color-chip-border-focus-selected-light);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-dark {
   background-color: var(--pgn-color-chip-bg-dark);
@@ -11246,7 +11235,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1);
   left: calc(var(--pgn-spacing-chip-outline-selected-distance-dark) * -1);
   border: solid var(--pgn-spacing-chip-outline-selected-distance-dark) var(--pgn-color-chip-outline-dark);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.pgn__chip-dark.selected:focus {
   border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);
@@ -11292,7 +11281,7 @@ a.close.disabled {
   bottom: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1);
   left: calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1);
   border: solid 0.125rem var(--pgn-color-chip-outline-dark);
-  border-radius: var(--pgn-size-border-radius-base);
+  border-radius: calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width));
 }
 .pgn__chip.disabled, .pgn__chip:disabled {
   opacity: var(--pgn-other-chip-opacity-disabled);
@@ -13333,6 +13322,9 @@ select.form-control {
   border-top: solid 1px var(--pgn-color-light-base);
   padding-top: var(--pgn-spacing-modal-footer-padding-y);
 }
+.pgn__modal-fullscreen .pgn__modal-header {
+  border-radius: 0;
+}
 .pgn__modal-content-container > *.pgn__modal.pgn__modal-fullscreen {
   position: fixed;
   top: 0;