@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/src/Nav/index.scss

@@ -1,4 +1,3 @@
-@import "variables";
 @import "mixins";
 
 // Base class
@@ -16,19 +15,19 @@
 
 .nav-link {
   display: block;
-  padding: $nav-link-padding-y $nav-link-padding-x;
-  text-decoration: if($link-decoration == none, null, none);
-  color: $nav-link-color;
-  font-weight: $nav-link-font-weight;
+  padding: var(--pgn-spacing-nav-link-padding-y) var(--pgn-spacing-nav-link-padding-x);
+  text-decoration: var(--pgn-typography-nav-link-text-decoration);
+  color: var(--pgn-color-nav-link-text-base);
+  font-weight: var(--pgn-typography-nav-link-font-weight);
 
   @include hover-focus {
     text-decoration: none;
-    color: $nav-link-color;
+    color: var(--pgn-color-nav-link-text-base);
   }
 
   // Disabled state lightens text
   &.disabled {
-    color: $nav-link-disabled-color;
+    color: var(--pgn-color-nav-link-text-disabled);
     pointer-events: none;
     cursor: default;
   }
@@ -40,44 +39,47 @@
 
 .pgn__tabs {
   &.nav-pills .nav-link {
-    border: $nav-pills-link-border-width solid $nav-pills-link-border-color;
+    border: var(--pgn-size-nav-pills-link-border-width) solid var(--pgn-color-nav-pills-base-link-border);
 
     &:focus {
-      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
+      // stylelint-disable-next-line max-line-length
+      @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus), var(--pgn-size-nav-pills-border-radius));
     }
 
     &:hover {
-      border-color: $nav-tabs-link-hover-border-color;
-      background-color: $nav-tabs-link-hover-bg;
+      border-color: var(--pgn-border-color-nav-tabs-link-border-hover);
+      background-color: var(--pgn-color-nav-tabs-base-link-hover-bg);
     }
 
     &.active,
     .nav-item.show .nav-link {
-      color: $nav-pills-link-active-color;
-      background-color: $nav-pills-link-active-bg;
-      border-color: $nav-pills-link-active-border-color;
+      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-nav-pills-base-link-active-border);
 
       &:focus {
-        @include nav-tabs-link-focus($nav-tabs-link-focus-border-color, $nav-pills-border-radius);
+        // stylelint-disable-next-line max-line-length
+        @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus), var(--pgn-size-nav-pills-border-radius));
       }
     }
   }
 
   &.nav-inverse-pills {
     + .tab-content {
-      color: $nav-inverse-pills-tab-content-color;
+      color: var(--pgn-color-nav-pills-inverse-tab-content-color);
     }
 
     .nav-link {
-      color: $nav-inverse-pills-link-color;
-      border: $nav-inverse-pills-link-border-width solid $nav-inverse-pills-link-border-color;
+      color: var(--pgn-color-nav-pills-inverse-link-text-base);
+      // stylelint-disable-next-line max-line-length
+      border: var(--pgn-size-nav-pills-inverse-link-border-width) solid var(--pgn-color-nav-pills-inverse-link-border-base);
 
       &:hover {
-        background-color: $nav-inverse-pills-link-hover-bg;
+        background-color: var(--pgn-color-nav-pills-inverse-link-bg-hover);
       }
 
       &:focus {
-        @include nav-tabs-link-focus($nav-inverse-pills-link-focus-color);
+        @include nav-tabs-link-focus(var(--pgn-color-nav-pills-inverse-link-text-focus));
       }
 
       &.disabled {
@@ -87,23 +89,24 @@
 
     .nav-link.active,
     .nav-item.show .nav-link {
-      background-color: $nav-inverse-pills-link-active-bg;
-      color: $nav-inverse-pills-link-active-color;
-      border-color: $nav-inverse-pills-link-active-border-color;
+      background-color: var(--pgn-color-nav-pills-inverse-link-bg-active);
+      color: var(--pgn-color-nav-pills-inverse-link-text-active);
+      border-color: var(--pgn-color-nav-pills-inverse-link-border-active);
 
       &:hover {
-        background-color: $nav-inverse-pills-link-active-hover-bg;
-        color: $nav-inverse-pills-link-active-hover-color;
-        border-color: $nav-inverse-pills-link-active-hover-border-color;
+        background-color: var(--pgn-color-nav-pills-inverse-link-bg-active-hover);
+        color: var(--pgn-color-nav-pills-inverse-link-text-active-hover);
+        border-color: var(--pgn-color-nav-pills-inverse-link-border-active-hover);
       }
 
       &:focus {
-        border-color: $nav-inverse-pills-link-active-focus-border-color;
+        border-color: var(--pgn-color-nav-pills-inverse-link-border-active-focus);
+        background-color: var(--pgn-color-white);
 
         &:hover {
-          background-color: $nav-inverse-pills-link-active-focus-hover-bg;
-          color: $nav-inverse-pills-link-active-focus-color;
-          border-color: $nav-inverse-pills-link-active-focus-hover-border-color;
+          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: var(--pgn-color-nav-pills-inverse-link-border-focus-hover);
         }
       }
     }
@@ -111,15 +114,15 @@
 
   &.nav-inverse-tabs {
     + .tab-content {
-      color: $nav-inverse-tabs-tab-content-color;
+      color: var(--pgn-color-nav-tabs-inverse-link-tab-content-color);
     }
 
     .nav-link {
-      color: $nav-inverse-tabs-link-color;
-      border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-link-border-bottom-color;
+      color: var(--pgn-color-nav-tabs-inverse-link-text-base);
+      border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-link-border-bottom);
 
       .dropdown .dropdown-toggle {
-        border-bottom: $nav-tabs-border-width solid $nav-inverse-tabs-dropdown-border-color;
+        border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-inverse-dropdown-border);
 
         &:hover {
           border-bottom: none;
@@ -127,11 +130,11 @@
       }
 
       &:hover {
-        background-color: $nav-inverse-tabs-link-hover-bg;
+        background-color: var(--pgn-color-nav-tabs-inverse-link-bg-hover);
       }
 
       &:focus {
-        @include nav-tabs-link-focus($nav-inverse-tabs-link-focus-bg);
+        @include nav-tabs-link-focus(var(--pgn-color-nav-tabs-inverse-link-bg-focus));
       }
 
       &.disabled {
@@ -141,35 +144,36 @@
 
     .nav-link.active,
     .nav-item.show .nav-link {
-      border-bottom: $nav-inverse-tabs-link-active-border-bottom-width solid $nav-inverse-tabs-link-active-border-color;
-      background-color: $nav-inverse-tabs-link-active-bg;
+      // stylelint-disable-next-line max-line-length
+      border-bottom: var(--pgn-size-nav-tabs-inverse-link-active-border-bottom-width) solid var(--pgn-color-nav-tabs-inverse-link-border-active);
+      background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active);
 
       &:hover {
-        background-color: $nav-inverse-tabs-link-active-hover-bg;
+        background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active-hover);
       }
     }
   }
 }
 
 .nav-tabs {
-  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
+  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: $nav-tabs-border-width solid $nav-tabs-link-border-color;
+    border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-link-border);
 
     &.disabled {
-      border-color: $nav-tabs-link-disabled-border-color;
+      border-color: var(--pgn-color-nav-tabs-base-link-disabled-border);
     }
   }
 
   .nav-link {
-    margin-bottom: calc(#{$nav-tabs-border-width} * -1);
+    margin-bottom: calc(var(--pgn-size-nav-tabs-border-width) * -1);
 
-    @include border-top-radius($nav-tabs-border-radius);
+    @include border-top-radius(var(--pgn-size-nav-tabs-border-radius));
 
     &:hover {
-      background-color: $nav-tabs-link-hover-bg;
+      background-color: var(--pgn-color-nav-tabs-base-link-hover-bg);
     }
 
     .dropdown {
@@ -177,35 +181,35 @@
     }
 
     &:focus {
-      border-bottom: $nav-tabs-border-width solid $nav-tabs-focus-border-color;
+      border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-focus);
 
-      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+      @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
     }
 
     &.disabled {
-      color: $nav-link-disabled-color;
-      background-color: $nav-tabs-disabled-bg;
+      color: var(--pgn-color-nav-link-text-disabled);
+      background-color: var(--pgn-color-nav-tabs-base-text-disabled);
     }
   }
 
   .nav-link.active,
   .nav-item.show .nav-link {
-    color: $nav-tabs-link-active-color;
-    background-color: $nav-tabs-link-active-bg;
-    border-bottom: $nav-tabs-border-width solid $nav-tabs-link-active-border-color;
+    color: var(--pgn-color-nav-tabs-base-link-active-text);
+    background-color: var(--pgn-color-nav-tabs-base-link-active-bg);
+    border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-border-color-nav-tabs-link-border-active);
 
     &:hover {
-      background-color: $nav-tabs-link-hover-bg;
+      background-color: var(--pgn-color-nav-tabs-base-link-hover-bg);
     }
 
     &:focus {
-      @include nav-tabs-link-focus($nav-tabs-link-focus-border-color);
+      @include nav-tabs-link-focus(var(--pgn-border-color-nav-tabs-link-border-focus));
     }
   }
 
   .dropdown-menu {
     // Make dropdown border overlap tab border
-    margin-top: calc(#{$nav-tabs-border-width} * -1);
+    margin-top: calc(var(--pgn-size-nav-tabs-border-width) * -1);
 
     // Remove the top rounded corners here since there is a hard edge above the menu
     @include border-top-radius(0);
@@ -218,13 +222,13 @@
 
 .nav-pills {
   .nav-link {
-    @include border-radius($nav-pills-border-radius);
+    @include border-radius(var(--pgn-size-nav-pills-border-radius));
   }
 
   .nav-link.active,
   .show > .nav-link {
-    color: $nav-pills-link-active-color;
-    background-color: $nav-pills-link-active-bg;
+    color: var(--pgn-color-nav-pills-base-link-active-text);
+    background-color: var(--pgn-color-nav-pills-base-link-active-bg);
   }
 }
 
@@ -234,13 +238,13 @@
 
 .nav-button-group {
   .nav-link {
-    border: solid 1px $nav-tabs-border-color;
+    border: solid 1px var(--pgn-color-nav-tabs-base-border-base);
 
     &:first-child {
-      @include border-left-radius($nav-pills-border-radius);
+      @include border-left-radius(var(--pgn-size-nav-pills-border-radius));
 
       [dir="rtl"] & {
-        @include border-right-radius($nav-pills-border-radius);
+        @include border-right-radius(var(--pgn-size-nav-pills-border-radius));
 
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
@@ -249,10 +253,10 @@
     }
 
     &:last-child {
-      @include border-right-radius($nav-pills-border-radius);
+      @include border-right-radius(var(--pgn-size-nav-pills-border-radius));
 
       [dir="rtl"] & {
-        @include border-left-radius($nav-pills-border-radius);
+        @include border-left-radius(var(--pgn-size-nav-pills-border-radius));
 
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
@@ -260,7 +264,7 @@
     }
 
     &:hover {
-      background: $nav-tabs-link-hover-bg;
+      background: var(--pgn-color-nav-tabs-base-link-hover-bg);
     }
 
     & + .nav-link {
@@ -270,8 +274,8 @@
 
   .nav-link.active,
   .show > .nav-link {
-    color: $nav-pills-link-active-color;
-    background-color: $nav-pills-link-active-bg;
+    color: var(--pgn-color-nav-pills-base-link-active-text);
+    background-color: var(--pgn-color-nav-pills-base-link-active-bg);
     border-color: transparent;
   }
 }

package/src/Navbar/index.scss

@@ -1,2 +1,276 @@
-@import "variables";
-@import "~bootstrap/scss/navbar";
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--pgn-spacing-navbar-padding-y) var(--pgn-spacing-navbar-padding-x-base);
+
+  %container-flex-properties {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .container,
+  .container-fluid {
+    @extend %container-flex-properties;
+  }
+
+  @each $breakpoint, $container-max-width in $container-max-widths {
+    > .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
+      @extend %container-flex-properties;
+    }
+  }
+}
+
+.navbar-brand {
+  display: inline-block;
+  padding-top: var(--pgn-spacing-navbar-brand-padding-y);
+  padding-bottom: var(--pgn-spacing-navbar-brand-padding-y);
+  margin-right: var(--pgn-spacing-navbar-padding-x-base);
+  line-height: inherit;
+  white-space: nowrap;
+
+  @include font-size(var(--pgn-typography-navbar-brand-font-size));
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  .nav-link {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .dropdown-menu {
+    position: static;
+    float: none;
+  }
+}
+
+.navbar-text {
+  display: inline-block;
+  padding-top: var(--pgn-spacing-nav-link-padding-y);
+  padding-bottom: var(--pgn-spacing-nav-link-padding-y);
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.navbar-toggler {
+  padding: var(--pgn-spacing-navbar-toggler-padding-y) var(--pgn-spacing-navbar-toggler-padding-x);
+  line-height: 1;
+  background-color: transparent;
+  border: var(--pgn-size-border-width) solid transparent;
+
+  @include border-radius(var(--pgn-size-navbar-toggler-border-radius));
+  @include font-size(var(--pgn-typography-navbar-toggler-font-size));
+
+  @include hover-focus() {
+    text-decoration: none;
+  }
+}
+
+.navbar-toggler-icon {
+  content: "";
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background: 50% / 100% 100% no-repeat;
+}
+
+.navbar-nav-scroll {
+  max-height: var(--pgn-size-navbar-nav-scroll-max-height);
+  overflow-y: auto;
+}
+
+.navbar-expand {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        %container-navbar-expand-#{$breakpoint} {
+          padding-right: 0;
+          padding-left: 0;
+        }
+
+        > .container,
+        > .container-fluid {
+          @extend %container-navbar-expand-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-navbar-expand-#{$breakpoint};
+          }
+        }
+      }
+
+      @include media-breakpoint-up($next) {
+        flex-flow: row nowrap;
+        justify-content: flex-start;
+
+        .navbar-nav {
+          flex-direction: row;
+
+          .dropdown-menu {
+            position: absolute;
+          }
+
+          .nav-link {
+            padding-right: var(--pgn-spacing-navbar-padding-x-nav-link);
+            padding-left: var(--pgn-spacing-navbar-padding-x-nav-link);
+          }
+        }
+
+        %container-nesting-#{$breakpoint} {
+          flex-wrap: nowrap;
+        }
+
+        > .container,
+        > .container-fluid {
+          @extend %container-nesting-#{$breakpoint};
+        }
+
+        @each $size, $container-max-width in $container-max-widths {
+          > .container#{breakpoint-infix($size, $container-max-widths)} {
+            @extend %container-nesting-#{$breakpoint};
+          }
+        }
+
+        .navbar-nav-scroll {
+          overflow: visible;
+        }
+
+        .navbar-collapse {
+          display: flex !important;
+          flex-basis: auto;
+        }
+
+        .navbar-toggler {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .navbar-brand {
+    color: var(--pgn-color-navbar-light-brand-text);
+
+    @include hover-focus() {
+      color: var(--pgn-color-navbar-light-brand-hover);
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: var(--pgn-color-navbar-light-text);
+
+      @include hover-focus() {
+        color: var(--pgn-color-navbar-light-hover);
+      }
+
+      &.disabled {
+        color: var(--pgn-color-navbar-light-disabled);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: var(--pgn-color-navbar-light-active);
+    }
+  }
+
+  .navbar-toggler {
+    color: var(--pgn-color-navbar-light-text);
+    border-color: var(--pgn-color-navbar-light-toggler-border);
+  }
+
+  .navbar-toggler-icon {
+    background-image: var(--pgn-content-navbar-toggler-light-icon-bg);
+  }
+
+  .navbar-text {
+    color: var(--pgn-color-navbar-light-text);
+
+    a {
+      color: var(--pgn-color-navbar-light-active);
+
+      @include hover-focus() {
+        color: var(--pgn-color-navbar-light-active);
+      }
+    }
+  }
+}
+
+.navbar-dark {
+  .navbar-brand {
+    color: var(--pgn-color-navbar-dark-brand-text);
+
+    @include hover-focus() {
+      color: var(--pgn-color-navbar-dark-brand-hover);
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: var(--pgn-color-navbar-dark-text);
+
+      @include hover-focus() {
+        color: var(--pgn-color-navbar-dark-hover);
+      }
+
+      &.disabled {
+        color: var(--pgn-color-navbar-dark-disabled);
+      }
+    }
+
+    .show > .nav-link,
+    .active > .nav-link,
+    .nav-link.show,
+    .nav-link.active {
+      color: var(--pgn-color-navbar-dark-active);
+    }
+  }
+
+  .navbar-toggler {
+    color: var(--pgn-color-navbar-dark-text);
+    border-color: var(--pgn-color-navbar-dark-toggler-border);
+  }
+
+  .navbar-toggler-icon {
+    background-image: var(--pgn-content-navbar-toggler-dark-icon-bg);
+  }
+
+  .navbar-text {
+    color: var(--pgn-color-navbar-dark-text);
+
+    a {
+      color: var(--pgn-color-navbar-dark-active);
+
+      @include hover-focus() {
+        color: var(--pgn-color-navbar-dark-active);
+      }
+    }
+  }
+}

package/src/OverflowScroll/data/useOverflowScrollElementAttributes.js

@@ -2,9 +2,9 @@ import { useEffect } from 'react';
 
 export const OVERFLOW_SCROLL_OVERFLOW_CONTAINER_CLASS = 'pgn__overflow-scroll-overflow-container';
 
-export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START = 'linear-gradient(to right, var(--pgn-overflow-scroll-opacity-mask-transparent) 0%, black 10%';
-export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_END = 'linear-gradient(to right, black 90%, var(--pgn-overflow-scroll-opacity-mask-transparent) 100%';
-export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START_END = 'linear-gradient(to right, var(--pgn-overflow-scroll-opacity-mask-transparent) 0%, black 10%, black 90%, var(--pgn-overflow-scroll-opacity-mask-transparent) 100%)';
+export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START = 'linear-gradient(to right, var(--pgn-color-overflow-scroll-opacity-mask-transparent) 0%, black 10%';
+export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_END = 'linear-gradient(to right, black 90%, var(--pgn-color-overflow-scroll-opacity-mask-transparent) 100%';
+export const OVERFLOW_SCROLL_OVERFLOW_OPACITY_MASK_GRADIENT_START_END = 'linear-gradient(to right, var(--pgn-color-overflow-scroll-opacity-mask-transparent) 0%, black 10%, black 90%, var(--pgn-color-overflow-scroll-opacity-mask-transparent) 100%)';
 
 /**
  * Given the ref the overflow container element, adds the following:

package/src/Overlay/index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import BaseOverlay from 'react-bootstrap/Overlay';
 import BaseOverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import Fade from 'react-bootstrap/Fade';
 import PropTypes from 'prop-types';
 
 const PLACEMENT_VARIANTS = [
@@ -89,7 +88,7 @@ Overlay.propTypes = {
    * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,
    * or a custom react-transition-group `<Transition>` component can be provided.
    */
-  transition: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.elementType]),
 };
 
 OverlayTrigger.propTypes = {
@@ -145,7 +144,7 @@ Overlay.defaultProps = {
   rootCloseEvent: undefined,
   show: false,
   target: undefined,
-  transition: Fade,
+  transition: true,
 };
 
 OverlayTrigger.defaultProps = {