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

package/dist/Modal/_ModalDialog.scss

@@ -1,3 +1,23 @@
+:root {
+  --pgn-elevation-modal-content-box-shadow-sm-up:
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-1-color),
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-x)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-offset-y)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-blur)
+    var(--pgn-elevation-modal-content-box-shadow-sm-up-2-color);
+
+  --pgn-spacing-modal-footer-padding-base:
+    var(--pgn-spacing-modal-footer-padding-base-y)
+    var(--pgn-spacing-modal-footer-padding-base-x);
+
+  --pgn-spacing-modal-header-padding-base:
+    var(--pgn-spacing-modal-header-padding-base-y)
+    var(--pgn-spacing-modal-header-padding-base-x);
+}
+
 .pgn__modal {
   background: var(--pgn-color-modal-content-bg);
   border-radius: calc(var(--pgn-size-modal-content-border-radius) - var(--pgn-size-modal-content-border-width));
@@ -122,7 +142,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +330,7 @@
   }
 
   .pgn__modal-title {
-    font-size: var(--pgn-typography-font-size-h4);
+    font-size: var(--pgn-typography-font-size-h4-base);
     display: flex;
     flex-grow: 1;
     align-items: center;

package/dist/Nav/index.scss

@@ -1,5 +1,13 @@
 @import "mixins";
 
+:root {
+  --pgn-border-color-nav-tabs-link-border-hover:
+    var(--pgn-border-color-nav-tabs-link-border-hover-top)
+    var(--pgn-border-color-nav-tabs-link-border-hover-right)
+    var(--pgn-border-color-nav-tabs-link-border-hover-bottom)
+    var(--pgn-border-color-nav-tabs-link-border-hover-left);
+}
+
 // Base class
 //
 // Kickstart any navigation component with a set of style resets. Works with

package/dist/Overlay/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { type OverlayProps } from 'react-bootstrap/Overlay';
 import { type OverlayTriggerProps, type OverlayTriggerType } from 'react-bootstrap/OverlayTrigger';
 import PropTypes from 'prop-types';
-declare function Overlay(props: OverlayProps): React.JSX.Element;
+declare function Overlay(props: OverlayProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Overlay {
     var propTypes: {
         /** Specifies the content of the `Overlay`. */
@@ -72,7 +72,7 @@ declare namespace Overlay {
         transition: React.ForwardRefExoticComponent<import("react-bootstrap/Fade").FadeProps & React.RefAttributes<import("react-transition-group/Transition").default<any>>>;
     };
 }
-declare function OverlayTrigger(props: OverlayTriggerProps): React.JSX.Element;
+declare function OverlayTrigger(props: OverlayTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace OverlayTrigger {
     var propTypes: {
         /** Specifies the content of the `OverlayTrigger`. */

package/dist/PageBanner/index.scss

@@ -4,12 +4,12 @@
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: var(--pgn-typography-font-size-small-x);
+  font-size: var(--pgn-typography-font-size-xs);
   background-color: var(--pgn-page-baner-bg, inherit);
   color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }
 

package/dist/Pagination/pagination-bootstrap.scss

@@ -1,3 +1,12 @@
+:root {
+  --pgn-elevation-pagination-focus-box-shadow:
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-x)
+    var(--pgn-elevation-pagination-focus-box-shadow-offset-y)
+    var(--pgn-elevation-pagination-focus-box-shadow-blur)
+    var(--pgn-elevation-pagination-focus-box-shadow-spread)
+    var(--pgn-elevation-pagination-focus-box-shadow-color);
+}
+
 .pagination {
   display: flex;
 

package/dist/Popover/index.scss

@@ -7,7 +7,7 @@
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: var(--pgn-typography-font-size-h5-base);
   }
 
   .pgn__icon {

package/dist/ProductTour/Checkpoint.scss

@@ -88,7 +88,7 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: var(--pgn-typography-font-size-h3-base);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }

package/dist/ProgressBar/bootstrap-progress.scss

@@ -1,3 +1,18 @@
+:root {
+  --pgn-transition-progress-bar-animation-timing:
+    var(--pgn-transition-progress-bar-animation-timing-duration)
+    var(--pgn-transition-progress-bar-animation-timing-timing-function)
+    var(--pgn-transition-progress-bar-animation-timing-iteration-count)
+    var(--pgn-transition-progress-bar-animation-timing-delay);
+
+  --pgn-transition-progress-bar-transition:
+    var(--pgn-transition-progress-bar-transition-property)
+    var(--pgn-transition-progress-bar-transition-duration)
+    var(--pgn-transition-progress-bar-transition-timing-function)
+    var(--pgn-transition-progress-bar-transition-delay)
+    var(--pgn-transition-progress-bar-transition-behavior);
+}
+
 @if $enable-transitions {
   @keyframes progress-bar-stripes {
     from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
@@ -10,7 +25,7 @@
   height: var(--pgn-size-progress-bar-height-base);
   overflow: hidden;
   line-height: 0;
-  background-color: var(--pgn-color-progress-bar-bg);
+  background-color: var(--pgn-color-progress-bg);
   box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
 
   @include font-size(var(--pgn-typography-progress-bar-font-size));
@@ -22,12 +37,12 @@
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--pgn-color-progress-bar-bar-base);
+  color: var(--pgn-color-progress-bar-base);
   text-align: center;
   white-space: nowrap;
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 
-  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+  @include transition(var(--pgn-transition-progress-bar-transition));
 }
 
 .progress-bar-striped {
@@ -38,7 +53,7 @@
 
 @if $enable-transitions {
   .progress-bar-animated {
-    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+    animation: var(--pgn-transition-progress-bar-animation-timing) progress-bar-stripes;
 
     @if $enable-prefers-reduced-motion-media-query {
       @media (prefers-reduced-motion: reduce) {

package/dist/ProgressBar/index.scss

@@ -6,7 +6,7 @@
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: var(--pgn-color-progress-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -22,7 +22,7 @@
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: var(--pgn-color-progress-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -87,6 +87,6 @@
   .pgn__progress-hint {
     box-sizing: border-box;
     padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    font-size: var(--pgn-typography-font-size-sm);
   }
 }

package/dist/Stepper/index.scss

@@ -56,7 +56,7 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: var(--pgn-typography-font-size-xs);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {

package/dist/Sticky/index.scss

@@ -1,3 +1,15 @@
+:root {
+  --pgn-elevation-sticky-shadow-bottom:
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-1-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-1-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-1-color),
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-x)
+    var(--pgn-elevation-sticky-shadow-bottom-2-offset-y)
+    var(--pgn-elevation-sticky-shadow-bottom-2-blur)
+    var(--pgn-elevation-sticky-shadow-bottom-2-color);
+}
+
 .pgn__sticky {
   display: flex;
   width: 100%;

package/dist/Toast/index.scss

@@ -1,5 +1,17 @@
 @import "bootstrap-toast";
 
+:root {
+  --pgn-elevation-toast-box-shadow:
+    var(--pgn-elevation-toast-box-shadow-1-offset-x)
+    var(--pgn-elevation-toast-box-shadow-1-offset-y)
+    var(--pgn-elevation-toast-box-shadow-1-blur)
+    var(--pgn-elevation-toast-box-shadow-1-color),
+    var(--pgn-elevation-toast-box-shadow-2-offset-x)
+    var(--pgn-elevation-toast-box-shadow-2-offset-y)
+    var(--pgn-elevation-toast-box-shadow-2-blur)
+    var(--pgn-elevation-toast-box-shadow-2-color);
+}
+
 .toast {
   background-color: var(--pgn-color-toast-bg);
   box-shadow: var(--pgn-elevation-toast-box-shadow);
@@ -31,7 +43,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: var(--pgn-typography-font-size-sm);
       margin: 0;
       padding-right: .75rem;
     }

package/dist/Tooltip/index.scss

@@ -1,3 +1,19 @@
+:root {
+  --pgn-elevation-tooltip-box-shadow:
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-1-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-1-blur)
+      var(--pgn-elevation-tooltip-box-shadow-1-color)
+    )
+    drop-shadow(
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-x)
+      var(--pgn-elevation-tooltip-box-shadow-2-offset-y)
+      var(--pgn-elevation-tooltip-box-shadow-2-blur)
+      var(--pgn-elevation-tooltip-box-shadow-2-color)
+    );
+}
+
 // Base class
 .tooltip {
   position: absolute;