@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/dist/Carousel/index.scss

@@ -1,2 +1,168 @@
-@import "variables";
-@import "~bootstrap/scss/carousel";
+.carousel {
+  position: relative;
+}
+
+.carousel.pointer-event {
+  touch-action: pan-y;
+}
+
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  @include clearfix();
+}
+
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: var(--pgn-transition-carousel-base);
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-left),
+.active.carousel-item-right {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-right),
+.active.carousel-item-left {
+  transform: translateX(-100%);
+}
+
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-left,
+  .active.carousel-item-right {
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0s var(--pgn-transition-carousel-base);
+  }
+}
+
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pgn-size-carousel-control-width-base);
+  padding: 0;
+  color: var(--pgn-color-carousel-control-base);
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: var(--pgn-other-carousel-control-opacity-base);
+  transition: var(--pgn-transition-carousel-control);
+
+  @include hover-focus() {
+    color: var(--pgn-carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: var(--pgn-other-carousel-control-opacity-hover);
+  }
+}
+
+.carousel-control-prev {
+  left: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(90deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-next {
+  right: 0;
+
+  @if $enable-gradients {
+    background-image: linear-gradient(270deg, rgba(var(--pgn-color-black), .25), rgba(var(--pgn-color-black), .001));
+  }
+}
+
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: var(--pgn-size-carousel-control-width-icon);
+  height: var(--pgn-size-carousel-control-width-icon);
+  background: 50% / 100% 100% no-repeat;
+}
+
+.carousel-control-prev-icon {
+  background-image: var(--pgn-content-carousel-control-bg-prev-icon);
+}
+
+.carousel-control-next-icon {
+  background-image: var(--pgn-content-carousel-control-bg-next-icon);
+}
+
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  padding-left: 0;
+  margin-right: var(--pgn-size-carousel-control-width-base);
+  margin-left: var(--pgn-size-carousel-control-width-base);
+  list-style: none;
+
+  li {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: var(--pgn-size-carousel-indicator-width);
+    height: var(--pgn-size-carousel-indicator-height-base);
+    margin-right: var(--pgn-spacing-carousel-indicator-spacer);
+    margin-left: var(--pgn-spacing-carousel-indicator-spacer);
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: var(--pgn-color-carousel-indicator-active-bg);
+    background-clip: padding-box;
+    border-top: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    border-bottom: var(--pgn-size-carousel-indicator-height-area-hit) solid transparent;
+    opacity: .5;
+    transition: var(--pgn-transition-carousel-indicator);
+  }
+
+  .active {
+    opacity: 1;
+  }
+}
+
+.carousel-caption {
+  position: absolute;
+  right: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  bottom: 20px;
+  left: calc((calc(100% - var(--pgn-size-carousel-caption-width))) * .5);
+  z-index: 10;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: var(--pgn-color-carousel-caption);
+  text-align: center;
+}

package/dist/Chip/index.scss

@@ -1,34 +1,33 @@
-@import "variables";
 @import "mixins";
 
 .pgn__chip {
-  border-radius: $chip-border-radius;
+  border-radius: var(--pgn-size-chip-border-radius);
   display: inline-flex;
   justify-content: space-between;
   align-items: center;
-  margin: $chip-margin;
-  border: 1px solid $chip-border-color;
-  padding: $chip-padding-y $chip-padding-x;
+  margin: var(--pgn-spacing-chip-margin-base);
+  border: 1px solid var(--pgn-color-chip-border-base);
+  padding: var(--pgn-spacing-chip-padding-y) var(--pgn-spacing-chip-padding-x);
   position: relative;
   outline: none;
   transition: all .3s;
 
   .pgn__chip__label {
-    font-size: $font-size-xs;
+    font-size: var(--pgn-typography-font-size-xs);
     line-height: 1.5rem;
-    font-weight: $font-weight-bold;
-    color: $chip-label-color;
+    font-weight: var(--pgn-typography-font-weight-bold);
+    color: var(--pgn-color-chip-label-base);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 
     [dir="rtl"] & {
-      margin-left: $chip-icon-margin;
+      margin-left: var(--pgn-spacing-chip-margin-icon);
     }
   }
 
   .pgn__chip__icon-before {
-    margin-right: $chip-icon-margin;
+    margin-right: var(--pgn-spacing-chip-margin-icon);
 
     [dir="rtl"] & {
       margin-right: 0;
@@ -37,7 +36,7 @@
   }
 
   .pgn__chip__icon-after {
-    margin-left: $chip-icon-margin;
+    margin-left: var(--pgn-spacing-chip-margin-icon);
 
     [dir="rtl"] & {
       margin-left: 0;
@@ -47,85 +46,85 @@
   .pgn__chip__icon-before,
   .pgn__chip__icon-after {
     &.btn-icon {
-      width: $chip-icon-size;
-      height: $chip-icon-size;
+      width: var(--pgn-size-chip-icon);
+      height: var(--pgn-size-chip-icon);
     }
   }
 
   &.pgn__chip-light {
-    background-color: $chip-light-bg-color;
+    background-color: var(--pgn-color-chip-bg-light);
 
     &.selected {
       @include chip-outline(
-        $chip-light-outline-color,
-        calc($chip-light-selected-outline-distance * -1),
-        calc($chip-border-radius + $chip-outline-width),
-        $chip-light-selected-outline-distance
+        var(--pgn-color-chip-outline-light),
+        calc(var(--pgn-spacing-chip-outline-selected-distance-light) * -1),
+        calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width)),
+        var(--pgn-spacing-chip-outline-selected-distance-light)
       );
 
       &:focus {
-        border: 1px solid $chip-light-selected-focus-border-color;
+        border: 1px solid var(--pgn-color-chip-border-focus-selected-light);
       }
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
       &.pgn__icon {
-        color: $chip-label-color;
+        color: var(--pgn-color-chip-label-base);
       }
     }
 
     &.interactive {
       cursor: pointer;
 
-      @include chip-hover($dark-500, $white);
+      @include chip-hover(var(--pgn-color-dark-500), var(--pgn-color-white));
 
       &:focus {
         @include chip-outline(
-          $chip-light-selected-focus-border-color,
-          calc($chip-light-focus-outline-distance * -1),
-          calc($chip-border-radius + $chip-outline-width)
+          var(--pgn-color-chip-border-focus-selected-light),
+          calc(var(--pgn-spacing-chip-outline-focus-distance-light) * -1),
+          calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width))
         );
       }
     }
   }
 
   &.pgn__chip-dark {
-    background-color: $chip-dark-bg;
+    background-color: var(--pgn-color-chip-bg-dark);
 
     &.selected {
-      @include chip-outline($chip-dark-outline-color,
-      calc($chip-dark-selected-outline-distance * -1),
-      calc($chip-border-radius + $chip-outline-width),
-      $chip-dark-selected-outline-distance
+      @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 $chip-dark-selected-focus-border-color;
+        border: 1px solid var(--pgn-color-chip-border-focus-selected-dark);
       }
     }
 
     .pgn__chip__label {
-      color: $chip-dark-label-color;
+      color: var(--pgn-color-chip-label-dark);
     }
 
     .pgn__chip__icon-before,
     .pgn__chip__icon-after {
       &.pgn__icon {
-        color: $chip-dark-outline-color;
+        color: var(--pgn-color-chip-outline-dark);
       }
     }
 
     &.interactive {
       cursor: pointer;
 
-      @include chip-hover($white, $primary-500);
+      @include chip-hover(var(--pgn-color-white), var(--pgn-color-primary-500));
 
       &:focus {
         @include chip-outline(
-          $chip-dark-outline-color,
-          calc($chip-dark-focus-outline-distance * -1),
-          calc($chip-border-radius + $chip-outline-width)
+          var(--pgn-color-chip-outline-dark),
+          calc(var(--pgn-spacing-chip-outline-focus-distance-dark) * -1),
+          calc(var(--pgn-size-chip-border-radius) + var(--pgn-spacing-chip-outline-width))
         );
       }
     }
@@ -133,7 +132,7 @@
 
   &.disabled,
   &:disabled {
-    opacity: $chip-disable-opacity;
+    opacity: var(--pgn-other-chip-opacity-disabled);
     pointer-events: none;
     user-select: none;
 
@@ -142,3 +141,13 @@
     }
   }
 }
+
+.pgn__chip-light {
+  --pgn-chip-color: var(--pgn-color-chip-text-light);
+  --pgn-chip-bg: var(--pgn-color-chip-bg-light);
+}
+
+.pgn__chip-dark {
+  --pgn-chip-color: var(--pgn-color-chip-text-dark);
+  --pgn-chip-bg: var(--pgn-color-chip-bg-dark);
+}

package/dist/Chip/mixins.scss

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

package/dist/ChipCarousel/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__chip-carousel {
   position: relative;
 
@@ -11,7 +9,9 @@
     &.pgn__chip-carousel-gap__#{$level} {
       .pgn__overflow-scroll-overflow-container {
         column-gap: $space;
-        padding: $chip-carousel-container-padding-x $chip-carousel-container-padding-y;
+        padding:
+          var(--pgn-spacing-chip-carousel-container-padding-x)
+          var(--pgn-spacing-chip-carousel-container-padding-y);
       }
     }
   }
@@ -20,7 +20,7 @@
   .pgn__chip-carousel__left-control {
     position: absolute;
     z-index: 2;
-    top: $chip-carousel-controls-top-offset;
+    top: var(--pgn-spacing-chip-carousel-controls-top-offset);
   }
 
   .pgn__chip-carousel__right-control {

package/dist/CloseButton/index.scss

@@ -1,2 +1,31 @@
-@import "variables";
-@import "~bootstrap/scss/close";
+.close {
+  float: right;
+  font-weight: var(--pgn-typography-close-button-font-weight);
+  line-height: 1;
+  color: var(--pgn-color-close-button);
+  text-shadow: var(--pgn-elevation-close-button-text-shadow);
+  opacity: .5;
+
+  @include font-size(var(--pgn-typography-close-button-font-size));
+
+  @include hover() {
+    color: var(--pgn-color-close-button);
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}

package/dist/Code/index.scss

@@ -1,2 +1,47 @@
-@import "variables";
-@import "~bootstrap/scss/code";
+code {
+  color: var(--pgn-color-code-base);
+  word-wrap: break-word;
+
+  @include font-size(var(--pgn-typography-code-font-size));
+
+  a > & {
+    color: inherit;
+  }
+}
+
+kbd {
+  padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
+  color: var(--pgn-color-code-kbd-base);
+  background-color: var(--pgn-color-code-kbd-bg);
+  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
+
+  @include font-size(var(--pgn-typography-code-kbd-font-size));
+  @include border-radius(var(--pgn-size-border-radius-sm));
+
+  kbd {
+    padding: 0;
+    font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
+    box-shadow: none;
+
+    @include font-size(100%);
+  }
+}
+
+pre {
+  display: block;
+  color: var(--pgn-color-code-pre);
+
+  @include font-size(var(--pgn-typography-code-font-size));
+
+  code {
+    @include font-size(inherit);
+
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+.pre-scrollable {
+  max-height: var(--pgn-size-code-pre-scrollable-max-height);
+  overflow-y: scroll;
+}

package/dist/Collapsible/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .collapsible-card {
   // stylelint-disable-next-line
   @extend .card;
@@ -7,9 +5,9 @@
   border-radius: 0;
 
   .collapsible-trigger {
-    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
-    border-radius: $card-inner-border-radius;
-    border-bottom: $card-border-width solid transparent;
+    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-bottom: var(--pgn-size-card-border-width) solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
     display: flex;
@@ -23,8 +21,10 @@
     }
 
     &[aria-expanded="true"] {
-      border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
-      border-color: $card-border-color;
+      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-color: var(--pgn-color-card-border-base);
       transition: none;
       text-align: start;
     }
@@ -34,8 +34,8 @@
     // stylelint-disable-next-line
     @extend .card-body;
 
-    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
-    padding-left: $collapsible-card-body-spacer-left;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
+    padding-left: var(--pgn-spacing-collapsible-card-spacer-left-body);
     text-align: start;
 
     & > *:last-child {
@@ -44,7 +44,7 @@
   }
 
   .collapsible-icon {
-    margin-inline-start: $collapsible-card-spacer-icon;
+    margin-inline-start: var(--pgn-spacing-collapsible-card-spacer-icon);
   }
 }
 
@@ -53,11 +53,11 @@
   @extend .collapsible-card;
 
   .collapsible-trigger {
-    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
   }
 
   .collapsible-body {
-    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
+    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
   }
 }
 
@@ -68,11 +68,11 @@
     align-items: center;
     text-decoration: underline;
     color: theme-color("primary", "default");
-    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
+    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
   }
 
   .collapsible-body {
-    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
+    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
     text-align: start;
 
     &.collapsing {
@@ -81,6 +81,6 @@
   }
 
   .collapsible-icon {
-    margin-left: $collapsible-basic-spacer-icon;
+    margin-left: var(--pgn-spacing-collapsible-card-spacer-basic-icon);
   }
 }

package/dist/ColorPicker/index.scss

@@ -1,7 +1,5 @@
-@import "variables";
-
 .pgn__color-picker {
-  box-shadow: 0 0 3px 1px $gray-300;
+  box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
   border: none;
   background:
     linear-gradient(to bottom right,
@@ -15,20 +13,20 @@
   );
 
   &.pgn__color-picker-sm {
-    height: $picker-size-sm;
-    width: $picker-size-sm;
+    height: var(--pgn-size-color-picker-sm);
+    width: var(--pgn-size-color-picker-sm);
   }
 
   &.pgn__color-picker-md {
-    height: $picker-size-md;
-    width: $picker-size-md;
+    height: var(--pgn-size-color-picker-md);
+    width: var(--pgn-size-color-picker-md);
   }
 }
 
 .pgn__color-modal {
-  background: $white;
+  background: var(--pgn-color-white);
   padding-bottom: .1rem;
-  margin-bottom: 1rem;
+  margin-bottom: var(--pgn-spacing-spacer-base);
 }
 
 .pgn__color-error {
@@ -39,7 +37,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: $h5-mobile-font-size;
+  font-size: var(--pgn-typography-font-size-mobile-h5);
   padding: .5rem;
   margin-bottom: 0 !important;
 }
@@ -55,7 +53,7 @@
   }
 
   .pgn__hex-field {
-    @media (min-width: map-get($grid-breakpoints, "sm")) {
+    @media (--pgn-size-breakpoint-min-width-sm) {
       margin-inline-end: 0;
     }
   }

package/dist/DataTable/CollapsibleButtonGroup.js

@@ -95,11 +95,11 @@ function CollapsibleButtonGroup(_ref) {
     placement: "bottom-end",
     isOpen: isOverflowMenuOpen
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pgn__datatable__overflow-actions-menu"
+    className: "pgn__data-table__overflow-actions-menu"
   }, /*#__PURE__*/React.createElement(Stack, {
     gap: 2
   }, dropdownActions.map(cloneAction))))), /*#__PURE__*/React.createElement("div", {
-    className: "pgn__datatable__visible-actions"
+    className: "pgn__data-table__visible-actions"
   }, visibleActions.map(cloneAction)));
 }
 CollapsibleButtonGroup.defaultProps = {