@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/dist/Modal/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+@import "~bootstrap/scss/modal";
 @import "ModalDialog";
 
 .pgn__hidden-scroll-padding-right {
@@ -11,15 +13,15 @@
   position: fixed;
   top: 0;
   width: 100vw;
-  z-index: var(--pgn-elevation-modal-zindex);
+  z-index: $zindex-modal;
   -webkit-overflow-scrolling: touch;
 }
 
 .pgn__modal-backdrop {
-  background: var(--pgn-color-modal-backdrop-bg);
+  background: $modal-backdrop-bg;
   bottom: 0;
   left: 0;
-  opacity: var(--pgn-other-modal-opacity);
+  opacity: $modal-backdrop-opacity;
   position: fixed;
   right: 0;
   top: 0;
@@ -47,6 +49,71 @@
   }
 }
 
+// Bootstrap modal styles
+
+.modal.show {
+  position: fixed;
+  background-color: transparent;
+  max-height: 100%;
+  width: 100%;
+
+  &:focus {
+    .modal-dialog {
+      box-shadow: $btn-focus-box-shadow;
+    }
+  }
+}
+
+.modal.is-ie11 {
+  // fix browser that likes to do things its own way
+  overflow-y: scroll;
+  height: auto;
+
+  .modal-content {
+    height: auto;
+    max-height: none;
+  }
+}
+
+.modal-backdrop {
+  background-color: rgba(0, 0, 0, .3);
+
+  // Fade for backdrop
+  &.fade { opacity: 0; }
+  &.show { opacity: 1; }
+}
+
+.modal-dialog {
+  height: 100%;
+  margin: auto;
+  padding: calc($spacer / 2);
+
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
+    padding: $spacer;
+  }
+}
+
+.modal-content {
+  max-height: calc(100vh - (#{$spacer} * 2));
+
+  &:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+}
+
+.modal-header {
+  flex: 0 0 auto;
+}
+
+.modal-body {
+  overflow: auto;
+}
+
+.modal-footer {
+  flex: 0 0 auto;
+}
+
 .pgn__modal-popup__arrow {
   position: absolute;
   width: 1rem;
@@ -62,7 +129,7 @@
   }
 
   &::before {
-    border-top-color: rgba(0, 0, 0, .2);
+    border-top-color: rgba($black, 20%);
   }
 }
 
@@ -97,8 +164,8 @@
 .pgn__modal-popup__arrow::after,
 .pgn__modal-popup__arrow-top-start::after,
 .pgn__modal-popup__arrow-top::after {
-  bottom: var(--pgn-size-border-width);
-  border-top-color: var(--pgn-color-white);
+  bottom: $border-width;
+  border-top-color: $white;
 }
 
 [data-popper-placement^="right"] .pgn__modal-popup__arrow-auto,

package/dist/Nav/_mixins.scss

@@ -1,7 +1,7 @@
 @mixin nav-tabs-link-focus(
-  $tabs-border-color,
-  $radius: var(--pgn-size-nav-tabs-border-radius),
-  $distance: var(--pgn-spacing-nav-link-distance-to-border)
+  $border-color,
+  $radius: $nav-tabs-border-radius,
+  $distance: $nav-tabs-link-distance-to-border
 ) {
   position: relative;
   outline: 0;
@@ -14,7 +14,7 @@
     right: calc(#{$distance} * -1);
     bottom: calc(#{$distance} * -1);
     left: calc(#{$distance} * -1);
-    border: solid var(--pgn-size-nav-tabs-border-width) $tabs-border-color;
+    border: solid $nav-tabs-border-width $border-color;
     border-radius: $radius;
   }
 }

package/dist/Nav/_variables.scss

@@ -0,0 +1,58 @@
+// Navs
+
+$nav-link-padding-y:                               .5rem !default;
+$nav-link-padding-x:                               1rem !default;
+$nav-link-color:                                   $gray-700 !default;
+$nav-link-disabled-color:                          $gray-300 !default;
+$nav-link-font-weight:                             500 !default;
+
+$nav-tabs-border-color:                            $light-400 !default;
+$nav-tabs-border-width:                            2px !default;
+$nav-tabs-border-radius:                           0 !default;
+$nav-tabs-hover-bg:                                transparent !default;
+$nav-tabs-focus-border-color:                      $nav-tabs-hover-bg !default;
+$nav-tabs-disabled-bg:                             $nav-tabs-hover-bg !default;
+$nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
+$nav-tabs-link-hover-bg:                           $light-400 !default;
+$nav-tabs-link-active-color:                       $primary-500 !default;
+$nav-tabs-link-active-border-color:                $nav-tabs-link-active-color !default;
+$nav-tabs-link-active-bg:                          transparent !default;
+$nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
+$nav-tabs-link-distance-to-border:                 4px !default;
+$nav-tabs-link-border-color:                       transparent !default;
+$nav-tabs-link-disabled-border-color:              $nav-tabs-link-border-color !default;
+
+$nav-pills-border-radius:                          $border-radius !default;
+$nav-pills-link-active-color:                      $component-active-color !default;
+$nav-pills-link-active-bg:                         $component-active-bg !default;
+$nav-pills-link-active-border-color:               $white !default;
+$nav-pills-link-border-color:                      $nav-tabs-border-color !default;
+$nav-pills-link-border-width:                      1px !default;
+
+$nav-inverse-pills-link-color:                     $white !default;
+$nav-inverse-pills-link-border-color:              $dark-300 !default;
+$nav-inverse-pills-link-hover-bg:                  $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-focus-color:               $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-bg:                 $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-color:              $primary-500 !default;
+$nav-inverse-pills-link-active-border-color:       $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-bg:           $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
+$nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
+$nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
+$nav-inverse-pills-link-active-focus-border-color: $primary !default;
+$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
+$nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
+$nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
+
+$nav-inverse-tabs-link-color:                      $white !default;
+$nav-inverse-tabs-link-border-bottom-color:        $dark-300 !default;
+$nav-inverse-tabs-link-hover-bg:                   $nav-inverse-tabs-link-border-bottom-color !default;
+$nav-inverse-tabs-link-active-hover-bg:            transparent !default;
+$nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
+$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
+$nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
+$nav-inverse-tabs-dropdown-border-color:           $nav-inverse-tabs-link-active-hover-bg !default;

package/dist/Nav/index.js

@@ -1,8 +1,9 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import React from 'react';
 import BaseNav from 'react-bootstrap/Nav';
 import BaseNavDropdown from 'react-bootstrap/NavDropdown';

package/dist/Nav/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","BaseNav","BaseNavDropdown","BaseNavItem","BaseNavLink","PropTypes","Nav","props","createElement","NavItem","NavLink","NavDropdown","NavDropdownItem","Item","NavDropdownDivider","Divider","propTypes","cardHeaderBsPrefix","string","defaultActiveKey","oneOfType","number","activeKey","as","elementType","fill","bool","justify","navbar","onKeyDown","func","onSelect","role","variant","oneOf","bsPrefix","active","disabled","eventKey","href","id","isRequired","title","node","menuRole","menuVariant","onClick","renderMenuOnMount","rootCloseEvent","defaultProps","_objectSpread","Link"],"sources":["../../src/Nav/index.jsx"],"sourcesContent":["import React from 'react';\nimport BaseNav from 'react-bootstrap/Nav';\nimport BaseNavDropdown from 'react-bootstrap/NavDropdown';\nimport BaseNavItem from 'react-bootstrap/NavItem';\nimport BaseNavLink from 'react-bootstrap/NavLink';\nimport PropTypes from 'prop-types';\n\nfunction Nav(props) {\n  return <BaseNav {...props} />;\n}\nfunction NavItem(props) {\n  return <BaseNavItem {...props} />;\n}\nfunction NavLink(props) {\n  return <BaseNavLink {...props} />;\n}\nfunction NavDropdown(props) {\n  return <BaseNavDropdown {...props} />;\n}\nfunction NavDropdownItem(props) {\n  return <BaseNavDropdown.Item {...props} />;\n}\nfunction NavDropdownDivider(props) {\n  return <BaseNavDropdown.Divider {...props} />;\n}\n\nNav.propTypes = {\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  cardHeaderBsPrefix: PropTypes.string,\n  /** Specifies default active nav (uncontrolled usage). */\n  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Marks the NavItem with a matching eventKey (or href if present) as active. */\n  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Set a custom element for this component. */\n  as: PropTypes.elementType,\n  /** Have all `NavItems` proportionately fill all available width. */\n  fill: PropTypes.bool,\n  /** Have all `NavItems` evenly fill all available width. */\n  justify: PropTypes.bool,\n  /**\n   * Apply styling an alignment for use in a `Navbar`.\n   * This prop will be set automatically when the `Nav` is used inside a `Navbar`.\n   */\n  navbar: PropTypes.bool,\n  /** Callback fired when a key is pressed. */\n  onKeyDown: PropTypes.func,\n  /** A callback fired when a NavItem is selected. */\n  onSelect: PropTypes.func,\n  /**\n   * ARIA role for the `Nav`, in the context of a `TabContainer`,\n   * the default will be set to \"tablist\", but can be overridden by the `Nav` when set explicitly.\n   */\n  role: PropTypes.string,\n  /** The visual variant of the nav items. */\n  variant: PropTypes.oneOf(['tabs', 'pills']),\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavItem.propTypes = {\n  /** The ARIA role for the `NavItem` */\n  role: PropTypes.string,\n  /** Set a custom element for this component. */\n  as: PropTypes.elementType,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavLink.propTypes = {\n  /** Callback fired when the active item changes. */\n  onSelect: PropTypes.string,\n  /** The active state of the `NavItem` item. */\n  active: PropTypes.bool,\n  /** You can use a custom element type for this component. */\n  as: PropTypes.elementType,\n  /** The disabled state of the `NavItem` item. */\n  disabled: PropTypes.bool,\n  /**\n   * Uniquely identifies the `NavItem` amongst its siblings,\n   * used to determine and control the active state of the parent `Nav`\n   */\n  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** The HTML href attribute for the `NavLink` */\n  href: PropTypes.string,\n  /** The ARIA role for the `NavLink`, In the context of a 'tablist' parent `Nav`, the role defaults to 'tab' */\n  role: PropTypes.string,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavDropdown.propTypes = {\n  /** An html id attribute for the `Toggle` button, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.string.isRequired,\n  /** The content of the non-toggle Button. */\n  title: PropTypes.node.isRequired,\n  /** Style the toggle `NavLink` as active */\n  active: PropTypes.bool,\n  /** Disables the toggle `NavLink` */\n  disabled: PropTypes.bool,\n  /** An ARIA accessible role applied to the `Menu` component. */\n  menuRole: PropTypes.string,\n  /** Menu color variant. Omitting this will use the default light color. */\n  menuVariant: PropTypes.oneOf(['dark']),\n  /** An `onClick` handler passed to the `Toggle` component */\n  onClick: PropTypes.func,\n  /** Whether to render the dropdown menu in the DOM before the first time it is shown. */\n  renderMenuOnMount: PropTypes.bool,\n  /** Which event when fired outside the component will cause it to be closed. */\n  rootCloseEvent: PropTypes.string,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNav.defaultProps = {\n  ...BaseNav.defaultProps,\n};\n\nNavDropdown.defaultProps = {\n  ...BaseNavDropdown.defaultProps,\n};\n\nNavItem.defaultProps = {\n  ...BaseNavItem.defaultProps,\n};\n\nNavLink.defaultProps = {\n  ...BaseNavLink.defaultProps,\n};\n\nNav.Item = NavItem;\nNav.Link = NavLink;\nNavDropdown.Item = NavDropdownItem;\nNavDropdown.Divider = NavDropdownDivider;\n\nexport { NavDropdown, NavItem, NavLink };\nexport default Nav;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","BaseNav","BaseNavDropdown","BaseNavItem","BaseNavLink","PropTypes","Nav","props","createElement","NavItem","NavLink","NavDropdown","NavDropdownItem","Item","NavDropdownDivider","Divider","propTypes","cardHeaderBsPrefix","string","defaultActiveKey","oneOfType","number","activeKey","as","elementType","fill","bool","justify","navbar","onKeyDown","func","onSelect","role","variant","oneOf","bsPrefix","active","disabled","eventKey","href","id","isRequired","title","node","menuRole","menuVariant","onClick","renderMenuOnMount","rootCloseEvent","defaultProps","_objectSpread","Link"],"sources":["../../src/Nav/index.jsx"],"sourcesContent":["import React from 'react';\nimport BaseNav from 'react-bootstrap/Nav';\nimport BaseNavDropdown from 'react-bootstrap/NavDropdown';\nimport BaseNavItem from 'react-bootstrap/NavItem';\nimport BaseNavLink from 'react-bootstrap/NavLink';\nimport PropTypes from 'prop-types';\n\nfunction Nav(props) {\n  return <BaseNav {...props} />;\n}\nfunction NavItem(props) {\n  return <BaseNavItem {...props} />;\n}\nfunction NavLink(props) {\n  return <BaseNavLink {...props} />;\n}\nfunction NavDropdown(props) {\n  return <BaseNavDropdown {...props} />;\n}\nfunction NavDropdownItem(props) {\n  return <BaseNavDropdown.Item {...props} />;\n}\nfunction NavDropdownDivider(props) {\n  return <BaseNavDropdown.Divider {...props} />;\n}\n\nNav.propTypes = {\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  cardHeaderBsPrefix: PropTypes.string,\n  /** Specifies default active nav (uncontrolled usage). */\n  defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Marks the NavItem with a matching eventKey (or href if present) as active. */\n  activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Set a custom element for this component. */\n  as: PropTypes.elementType,\n  /** Have all `NavItems` proportionately fill all available width. */\n  fill: PropTypes.bool,\n  /** Have all `NavItems` evenly fill all available width. */\n  justify: PropTypes.bool,\n  /**\n   * Apply styling an alignment for use in a `Navbar`.\n   * This prop will be set automatically when the `Nav` is used inside a `Navbar`.\n   */\n  navbar: PropTypes.bool,\n  /** Callback fired when a key is pressed. */\n  onKeyDown: PropTypes.func,\n  /** A callback fired when a NavItem is selected. */\n  onSelect: PropTypes.func,\n  /**\n   * ARIA role for the `Nav`, in the context of a `TabContainer`,\n   * the default will be set to \"tablist\", but can be overridden by the `Nav` when set explicitly.\n   */\n  role: PropTypes.string,\n  /** The visual variant of the nav items. */\n  variant: PropTypes.oneOf(['tabs', 'pills']),\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavItem.propTypes = {\n  /** The ARIA role for the `NavItem` */\n  role: PropTypes.string,\n  /** Set a custom element for this component. */\n  as: PropTypes.elementType,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavLink.propTypes = {\n  /** Callback fired when the active item changes. */\n  onSelect: PropTypes.string,\n  /** The active state of the `NavItem` item. */\n  active: PropTypes.bool,\n  /** You can use a custom element type for this component. */\n  as: PropTypes.elementType,\n  /** The disabled state of the `NavItem` item. */\n  disabled: PropTypes.bool,\n  /**\n   * Uniquely identifies the `NavItem` amongst its siblings,\n   * used to determine and control the active state of the parent `Nav`\n   */\n  eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** The HTML href attribute for the `NavLink` */\n  href: PropTypes.string,\n  /** The ARIA role for the `NavLink`, In the context of a 'tablist' parent `Nav`, the role defaults to 'tab' */\n  role: PropTypes.string,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNavDropdown.propTypes = {\n  /** An html id attribute for the `Toggle` button, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.string.isRequired,\n  /** The content of the non-toggle Button. */\n  title: PropTypes.node.isRequired,\n  /** Style the toggle `NavLink` as active */\n  active: PropTypes.bool,\n  /** Disables the toggle `NavLink` */\n  disabled: PropTypes.bool,\n  /** An ARIA accessible role applied to the `Menu` component. */\n  menuRole: PropTypes.string,\n  /** Menu color variant. Omitting this will use the default light color. */\n  menuVariant: PropTypes.oneOf(['dark']),\n  /** An `onClick` handler passed to the `Toggle` component */\n  onClick: PropTypes.func,\n  /** Whether to render the dropdown menu in the DOM before the first time it is shown. */\n  renderMenuOnMount: PropTypes.bool,\n  /** Which event when fired outside the component will cause it to be closed. */\n  rootCloseEvent: PropTypes.string,\n  /** Change the underlying component CSS base class name and modifier class names prefix. */\n  bsPrefix: PropTypes.string,\n};\n\nNav.defaultProps = {\n  ...BaseNav.defaultProps,\n};\n\nNavDropdown.defaultProps = {\n  ...BaseNavDropdown.defaultProps,\n};\n\nNavItem.defaultProps = {\n  ...BaseNavItem.defaultProps,\n};\n\nNavLink.defaultProps = {\n  ...BaseNavLink.defaultProps,\n};\n\nNav.Item = NavItem;\nNav.Link = NavLink;\nNavDropdown.Item = NavDropdownItem;\nNavDropdown.Divider = NavDropdownDivider;\n\nexport { NavDropdown, NavItem, NavLink };\nexport default Nav;\n"],"mappings":"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"}

package/dist/Nav/index.scss

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

package/dist/Navbar/_variables.scss

@@ -0,0 +1,40 @@
+// Navbar
+
+$navbar-padding-y:                  calc($spacer / 2) !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-nav-link-padding-x:         .5rem !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+// The default for $nav-link-padding-y is .5rem. Copied here for modularization
+$nav-link-height:                   $font-size-base * $line-height-base + .5rem * 2 !default;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2) !default;
+
+$navbar-toggler-padding-y:          .25rem !default;
+$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-border-radius:      $btn-border-radius !default;
+
+$navbar-nav-scroll-max-height:      75vh !default;
+
+$navbar-dark-color:                 rgba($white, .5) !default;
+$navbar-dark-hover-color:           rgba($white, .75) !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
+
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+$navbar-light-brand-color:                $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;