@openedx/paragon 21.7.0 → 22.0.0-alpha.15

package/dist/Overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","BaseOverlay","BaseOverlayTrigger","Fade","PropTypes","PLACEMENT_VARIANTS","TRIGGER_VARIANTS","Overlay","props","createElement","OverlayTrigger","children","triggerType","oneOf","propTypes","node","isRequired","container","oneOfType","elementType","func","onEnter","onEntered","onEntering","onExit","onExited","onExiting","onHide","placement","popperConfig","shape","rootClose","bool","rootCloseEvent","show","target","transition","element","overlay","defaultShow","delay","number","flip","onToggle","instanceOf","EventTarget","trigger","arrayOf","defaultProps","undefined"],"sources":["../../src/Overlay/index.jsx"],"sourcesContent":["import React from 'react';\nimport BaseOverlay from 'react-bootstrap/Overlay';\nimport BaseOverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport Fade from 'react-bootstrap/Fade';\nimport PropTypes from 'prop-types';\n\nconst PLACEMENT_VARIANTS = [\n  'auto-start',\n  'auto',\n  'auto-end',\n  'top-start',\n  'top',\n  'top-end',\n  'right-start',\n  'right',\n  'right-end',\n  'bottom-end',\n  'bottom',\n  'bottom-start',\n  'left-end',\n  'left',\n  'left-start',\n];\n\nconst TRIGGER_VARIANTS = [\n  'hover',\n  'click',\n  'focus',\n];\n\nfunction Overlay(props) {\n  return <BaseOverlay {...props} />;\n}\nfunction OverlayTrigger(props) {\n  return (\n    <BaseOverlayTrigger {...props}>\n      {props.children}\n    </BaseOverlayTrigger>\n  );\n}\n\nconst triggerType = PropTypes.oneOf(TRIGGER_VARIANTS);\n\nOverlay.propTypes = {\n  /** Specifies the content of the `Overlay`. */\n  children: PropTypes.node.isRequired,\n  /**\n   * A component instance, DOM node, or function that returns either.\n   * The overlay will be positioned in relation to the target.\n   */\n  container: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func]),\n  /** Callback fired before the `Overlay` transitions in. */\n  onEnter: PropTypes.func,\n  /** Callback fired after the `Overlay` finishes transitioning in. */\n  onEntered: PropTypes.func,\n  /** Callback fired as the `Overlay` begins to transition in. */\n  onEntering: PropTypes.func,\n  /** Callback fired right before the `Overlay` transitions out */\n  onExit: PropTypes.func,\n  /** Callback fired after the `Overlay` finishes transitioning out. */\n  onExited: PropTypes.func,\n  /** Callback fired as the Overlay begins to transition out. */\n  onExiting: PropTypes.func,\n  /**\n   * A callback invoked by the overlay when it wishes to be hidden.\n   * Required if `rootClose` is specified.\n   */\n  onHide: PropTypes.func,\n  /** The placement of the `Overlay` in relation to it's target. */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /** A set of popper options and props passed directly to `Popper`. */\n  popperConfig: PropTypes.shape({}),\n  /** Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay. */\n  rootClose: PropTypes.bool,\n  /** Specify event for triggering a “root close” toggle. */\n  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),\n  /** Set the visibility of the `Overlay`. */\n  show: PropTypes.bool,\n  /**\n   * The visibility of the `Overlay`. `show` is a controlled prop so should\n   * be paired with `onToggle` to avoid breaking user interactions.\n   *\n   * Manually toggling show does not wait for delay to change the visibility.\n   *\n   * Controls `onToggle`.\n   */\n  target: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func]),\n  /**\n   * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,\n   * or a custom react-transition-group `<Transition>` component can be provided.\n   */\n  transition: PropTypes.func,\n};\n\nOverlayTrigger.propTypes = {\n  /** Specifies the content of the `OverlayTrigger`. */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  /** An element or text to overlay next to the target. */\n  overlay: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  /** The initial visibility state of the `Overlay`. */\n  defaultShow: PropTypes.bool,\n  /** A millisecond delay amount to show and hide the `Overlay` once triggered. */\n  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({})]),\n  /** The initial flip state of the `Overlay`. */\n  flip: PropTypes.bool,\n  onHide: PropTypes.func,\n  /**\n   * A callback that fires when the user triggers a change in tooltip visibility.\n   * `onToggle` is called with the desired next show, and generally should be\n   * passed back to the `show` prop. `onToggle` fires after the configured `delay`.\n   *\n   * Controls `show`.\n   */\n  onToggle: PropTypes.func,\n  /** The placement of the `Overlay` in relation to it's target. */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popperConfig: PropTypes.shape({}),\n  /**\n   * The visibility of the `Overlay`. `show` is a controlled prop so should\n   * be paired with `onToggle` to avoid breaking user interactions.\n   *\n   * Manually toggling show does not wait for delay to change the visibility.\n   *\n   * Controls `onToggle`.\n   */\n  show: PropTypes.bool,\n  target: PropTypes.instanceOf(EventTarget),\n  /** Specify which action or actions trigger `Overlay` visibility. */\n  trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]),\n};\n\nOverlay.defaultProps = {\n  container: undefined,\n  onEnter: undefined,\n  onEntered: undefined,\n  onEntering: undefined,\n  onExit: undefined,\n  onExited: undefined,\n  onExiting: undefined,\n  onHide: undefined,\n  placement: 'top',\n  popperConfig: {},\n  rootClose: false,\n  rootCloseEvent: undefined,\n  show: false,\n  target: undefined,\n  transition: Fade,\n};\n\nOverlayTrigger.defaultProps = {\n  defaultShow: false,\n  delay: undefined,\n  flip: undefined,\n  onHide: undefined,\n  onToggle: undefined,\n  placement: undefined,\n  popperConfig: {},\n  show: undefined,\n  target: undefined,\n  trigger: ['hover', 'focus'],\n};\n\nexport { OverlayTrigger };\nexport default Overlay;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","BaseOverlay","BaseOverlayTrigger","PropTypes","PLACEMENT_VARIANTS","TRIGGER_VARIANTS","Overlay","props","createElement","OverlayTrigger","children","triggerType","oneOf","propTypes","node","isRequired","container","oneOfType","elementType","func","onEnter","onEntered","onEntering","onExit","onExited","onExiting","onHide","placement","popperConfig","shape","rootClose","bool","rootCloseEvent","show","target","transition","element","overlay","defaultShow","delay","number","flip","onToggle","instanceOf","EventTarget","trigger","arrayOf","defaultProps","undefined"],"sources":["../../src/Overlay/index.jsx"],"sourcesContent":["import React from 'react';\nimport BaseOverlay from 'react-bootstrap/Overlay';\nimport BaseOverlayTrigger from 'react-bootstrap/OverlayTrigger';\nimport PropTypes from 'prop-types';\n\nconst PLACEMENT_VARIANTS = [\n  'auto-start',\n  'auto',\n  'auto-end',\n  'top-start',\n  'top',\n  'top-end',\n  'right-start',\n  'right',\n  'right-end',\n  'bottom-end',\n  'bottom',\n  'bottom-start',\n  'left-end',\n  'left',\n  'left-start',\n];\n\nconst TRIGGER_VARIANTS = [\n  'hover',\n  'click',\n  'focus',\n];\n\nfunction Overlay(props) {\n  return <BaseOverlay {...props} />;\n}\nfunction OverlayTrigger(props) {\n  return (\n    <BaseOverlayTrigger {...props}>\n      {props.children}\n    </BaseOverlayTrigger>\n  );\n}\n\nconst triggerType = PropTypes.oneOf(TRIGGER_VARIANTS);\n\nOverlay.propTypes = {\n  /** Specifies the content of the `Overlay`. */\n  children: PropTypes.node.isRequired,\n  /**\n   * A component instance, DOM node, or function that returns either.\n   * The overlay will be positioned in relation to the target.\n   */\n  container: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func]),\n  /** Callback fired before the `Overlay` transitions in. */\n  onEnter: PropTypes.func,\n  /** Callback fired after the `Overlay` finishes transitioning in. */\n  onEntered: PropTypes.func,\n  /** Callback fired as the `Overlay` begins to transition in. */\n  onEntering: PropTypes.func,\n  /** Callback fired right before the `Overlay` transitions out */\n  onExit: PropTypes.func,\n  /** Callback fired after the `Overlay` finishes transitioning out. */\n  onExited: PropTypes.func,\n  /** Callback fired as the Overlay begins to transition out. */\n  onExiting: PropTypes.func,\n  /**\n   * A callback invoked by the overlay when it wishes to be hidden.\n   * Required if `rootClose` is specified.\n   */\n  onHide: PropTypes.func,\n  /** The placement of the `Overlay` in relation to it's target. */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /** A set of popper options and props passed directly to `Popper`. */\n  popperConfig: PropTypes.shape({}),\n  /** Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay. */\n  rootClose: PropTypes.bool,\n  /** Specify event for triggering a “root close” toggle. */\n  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),\n  /** Set the visibility of the `Overlay`. */\n  show: PropTypes.bool,\n  /**\n   * The visibility of the `Overlay`. `show` is a controlled prop so should\n   * be paired with `onToggle` to avoid breaking user interactions.\n   *\n   * Manually toggling show does not wait for delay to change the visibility.\n   *\n   * Controls `onToggle`.\n   */\n  target: PropTypes.oneOfType([PropTypes.elementType, PropTypes.func]),\n  /**\n   * Animate the entering and exiting of the Overlay. `true` will use the `<Fade>` transition,\n   * or a custom react-transition-group `<Transition>` component can be provided.\n   */\n  transition: PropTypes.oneOfType([PropTypes.bool, PropTypes.elementType]),\n};\n\nOverlayTrigger.propTypes = {\n  /** Specifies the content of the `OverlayTrigger`. */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  /** An element or text to overlay next to the target. */\n  overlay: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,\n  /** The initial visibility state of the `Overlay`. */\n  defaultShow: PropTypes.bool,\n  /** A millisecond delay amount to show and hide the `Overlay` once triggered. */\n  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({})]),\n  /** The initial flip state of the `Overlay`. */\n  flip: PropTypes.bool,\n  onHide: PropTypes.func,\n  /**\n   * A callback that fires when the user triggers a change in tooltip visibility.\n   * `onToggle` is called with the desired next show, and generally should be\n   * passed back to the `show` prop. `onToggle` fires after the configured `delay`.\n   *\n   * Controls `show`.\n   */\n  onToggle: PropTypes.func,\n  /** The placement of the `Overlay` in relation to it's target. */\n  placement: PropTypes.oneOf(PLACEMENT_VARIANTS),\n  /** A `Popper.js` config object passed to the the underlying popper instance. */\n  popperConfig: PropTypes.shape({}),\n  /**\n   * The visibility of the `Overlay`. `show` is a controlled prop so should\n   * be paired with `onToggle` to avoid breaking user interactions.\n   *\n   * Manually toggling show does not wait for delay to change the visibility.\n   *\n   * Controls `onToggle`.\n   */\n  show: PropTypes.bool,\n  target: PropTypes.instanceOf(EventTarget),\n  /** Specify which action or actions trigger `Overlay` visibility. */\n  trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]),\n};\n\nOverlay.defaultProps = {\n  container: undefined,\n  onEnter: undefined,\n  onEntered: undefined,\n  onEntering: undefined,\n  onExit: undefined,\n  onExited: undefined,\n  onExiting: undefined,\n  onHide: undefined,\n  placement: 'top',\n  popperConfig: {},\n  rootClose: false,\n  rootCloseEvent: undefined,\n  show: false,\n  target: undefined,\n  transition: true,\n};\n\nOverlayTrigger.defaultProps = {\n  defaultShow: false,\n  delay: undefined,\n  flip: undefined,\n  onHide: undefined,\n  onToggle: undefined,\n  placement: undefined,\n  popperConfig: {},\n  show: undefined,\n  target: undefined,\n  trigger: ['hover', 'focus'],\n};\n\nexport { OverlayTrigger };\nexport default Overlay;\n"],"mappings":"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"}

package/dist/PageBanner/index.scss

@@ -1,56 +1,52 @@
-// stylelint-disable-next-line selector-class-pattern
+// stylelint-disable selector-class-pattern
 .pgn__pageBanner-component {
   width: 100%;
   min-height: 36px;
   display: flex;
   flex-wrap: nowrap;
-  font-size: $x-small-font-size;
+  font-size: var(--pgn-typography-font-size-small-x);
+  background-color: var(--pgn-page-baner-bg, inherit);
+  color: var(--pgn-page-baner-color, inherit);
 
   @include media-breakpoint-up(md) {
-    font-size: $small-font-size;
+    font-size: var(--pgn-typography-font-size-small-base);
   }
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__dark {
-  background-color: $dark-500;
-  color: white;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-dark);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-dark);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__light {
-  background-color: $light-400;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-light);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-light);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__accentA {
-  background-color: $accent-a;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-a);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-a);
 }
-// stylelint-disable-next-line selector-class-pattern
+
 .pgn__pageBanner__accentB {
-  background-color: $accent-b;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-accent-b);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-accent-b);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner__warning {
-  background-color: $warning-100;
-  color: black;
+  --pgn-page-baner-bg: var(--pgn-color-page-banner-bg-warning);
+  --pgn-page-baner-color: var(--pgn-color-page-banner-text-warning);
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-content {
   display: flex;
   flex-grow: 1;
   justify-content: center;
   align-items: center;
-  padding: map_get($spacers, 2) map_get($spacers, 2\.5);
+  padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-2-5);
   text-align: center;
 }
 
-// stylelint-disable-next-line selector-class-pattern
 .pgn__pageBanner-dismissButtonContainer {
   min-width: 32px;
   min-height: 32px;

package/dist/Pagination/index.scss

@@ -1,5 +1,4 @@
-@import "variables";
-@import "~bootstrap/scss/pagination";
+@import "pagination-bootstrap";
 
 .pagination {
   align-items: center;
@@ -31,11 +30,11 @@
   .page-link {
     &.previous .pgn__icon {
       margin-inline-start: 0;
-      margin-inline-end: $pagination-margin-x;
+      margin-inline-end: var(--pgn-spacing-pagination-margin-x);
     }
 
     &.next .pgn__icon {
-      margin-inline-start: $pagination-margin-x;
+      margin-inline-start: var(--pgn-spacing-pagination-margin-x);
       margin-inline-end: 0;
     }
   }
@@ -43,13 +42,13 @@
   .page-item {
     &:first-child .page-link {
       [dir="rtl"] & {
-        border-radius: 0 $pagination-border-radius-lg $pagination-border-radius-lg 0;
+        border-radius: 0 var(--pgn-size-pagination-border-radius-lg) var(--pgn-size-pagination-border-radius-lg) 0;
       }
     }
 
     &:last-child .page-link {
       [dir="rtl"] & {
-        border-radius: $pagination-border-radius-lg 0 0 $pagination-border-radius-lg;
+        border-radius: var(--pgn-size-pagination-border-radius-lg) 0 0 var(--pgn-size-pagination-border-radius-lg);
       }
     }
   }
@@ -59,8 +58,8 @@
   border: none;
 
   &.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: $pagination-bg;
-    color: $pagination-focus-color-text;
+    background-color: var(--pgn-color-pagination-bg-base);
+    color: var(--pgn-color-pagination-focus-text);
   }
 
   &:focus {
@@ -68,9 +67,15 @@
   }
 
   &.btn-primary:focus::before {
-    border: $pagination-focus-border-width solid $pagination-focus-color;
+    border: var(--pgn-size-pagination-focus-border-width) solid var(--pgn-color-pagination-focus-base);
 
-    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+    @include button-size(
+      var(--pgn-spacing-btn-padding-y-base),
+      var(--pgn-spacing-btn-padding-x-base),
+      var(--pgn-typography-btn-font-size-base),
+      var(--pgn-typography-btn-line-height-base),
+      var(--pgn-size-btn-border-radius-base)
+    );
   }
 
   div {
@@ -92,25 +97,25 @@
 .page-item {
   > .btn {
     transition: none;
-    line-height: $pagination-line-height;
+    line-height: var(--pgn-typography-pagination-line-height);
   }
 
   &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: $pagination-focus-color;
-    color: $pagination-bg;
+    background-color: var(--pgn-color-pagination-focus-base);
+    color: var(--pgn-color-pagination-bg-base);
   }
 }
 
 .pagination-small {
   .page-link {
-    font-size: $pagination-font-size-sm;
-    line-height: $pagination-line-height;
+    font-size: var(--pgn-typography-pagination-font-size-sm);
+    line-height: var(--pgn-typography-pagination-line-height);
     padding: .375rem .78rem;
 
     &.previous,
     &.next {
-      padding: 0 $pagination-padding-y;
-      line-height: $pagination-secondary-height-sm;
+      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
+      line-height: var(--pgn-size-pagination-secondary-height-sm);
 
       div {
         display: flex;
@@ -124,7 +129,7 @@
       &.previous,
       &.next {
         padding: 0;
-        width: $pagination-icon-width;
+        width: var(--pgn-size-pagination-icon-width);
       }
     }
   }
@@ -133,15 +138,15 @@
 .pagination-secondary {
   button.next,
   button.previous {
-    height: $pagination-secondary-height;
-    padding: 0 $pagination-padding-y;
+    height: var(--pgn-size-pagination-secondary-height-base);
+    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
   }
 
   &.pagination-small {
     button.next,
     button.previous {
-      height: $pagination-secondary-height-sm;
-      line-height: $pagination-line-height;
+      height: var(--pgn-size-pagination-secondary-height-sm);
+      line-height: var(--pgn-typography-pagination-line-height);
     }
   }
 
@@ -157,7 +162,7 @@
 .pagination-inverse {
   %dark-styles {
     background-color: transparent;
-    color: $white;
+    color: var(--pgn-color-white);
   }
 
   .pgn__dark-styles {
@@ -170,8 +175,8 @@
     }
 
     &.active button.page-link {
-      background-color: $pagination-bg;
-      color: $pagination-color;
+      background-color: var(--pgn-color-pagination-bg-base);
+      color: var(--pgn-color-pagination-text-base);
     }
 
     button.page-link {
@@ -183,7 +188,7 @@
     }
 
     &:not(.active):focus {
-      box-shadow: $level-1-box-shadow;
+      box-shadow: var(--pgn-elevation-box-shadow-level-1);
     }
   }
 
@@ -196,10 +201,10 @@
 
   .dropdown {
     .btn-tertiary {
-      color: $pagination-color-inverse;
+      color: var(--pgn-color-pagination-text-inverse);
 
       &::after {
-        border-top: $pagination-toggle-border solid $pagination-color-inverse;
+        border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-text-inverse);
       }
 
       &:active,
@@ -208,7 +213,7 @@
       }
 
       &:not(:disabled):not(.disabled):active {
-        color: $pagination-color-inverse;
+        color: var(--pgn-color-pagination-text-inverse);
       }
     }
   }
@@ -220,8 +225,8 @@
 
 .pgn__reduced-pagination-dropdown {
   overflow-y: auto;
-  max-height: $pagination-reduced-dropdown-max-height;
-  min-width: $pagination-reduced-dropdown-min-width;
+  max-height: var(--pgn-size-pagination-reduced-dropdown-max-height);
+  min-width: var(--pgn-size-pagination-reduced-dropdown-min-width);
 
   a {
     text-align: center;
@@ -232,9 +237,9 @@
   .dropdown-toggle::after {
     width: 0;
     height: 0;
-    border-left: $pagination-toggle-border solid transparent;
-    border-right: $pagination-toggle-border solid transparent;
-    border-top: $pagination-toggle-border solid $gray-700;
+    border-left: var(--pgn-size-pagination-toggle-border-base) solid transparent;
+    border-right: var(--pgn-size-pagination-toggle-border-base) solid transparent;
+    border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-gray-700);
     transform: rotate(0);
     inset-inline-start: .5rem;
     top: 0;
@@ -243,25 +248,25 @@
 
   button.next,
   button.previous {
-    height: $pagination-secondary-height;
-    padding: 0 $pagination-padding-y;
+    height: var(--pgn-size-pagination-secondary-height-base);
+    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
   }
 
   &.pagination-small {
     .btn.dropdown-toggle {
-      font-size: $pagination-font-size-sm;
+      font-size: var(--pgn-typography-pagination-font-size-sm);
 
       &::after {
-        border-left-width: $pagination-toggle-border-sm;
-        border-right-width: $pagination-toggle-border-sm;
-        border-top-width: $pagination-toggle-border-sm;
+        border-left-width: var(--pgn-size-pagination-toggle-border-sm);
+        border-right-width: var(--pgn-size-pagination-toggle-border-sm);
+        border-top-width: var(--pgn-size-pagination-toggle-border-sm);
       }
     }
 
     button.previous,
     button.next {
-      line-height: $pagination-icon-height;
-      height: $pagination-icon-height;
+      line-height: var(--pgn-size-pagination-icon-height);
+      height: var(--pgn-size-pagination-icon-height);
     }
   }
 
@@ -281,15 +286,15 @@
 
   button.next,
   button.previous {
-    padding: $pagination-padding-y;
-    height: $pagination-secondary-height;
+    padding: var(--pgn-spacing-pagination-padding-y-base);
+    height: var(--pgn-size-pagination-secondary-height-base);
   }
 
   &.pagination-small {
     button.next,
     button.previous {
-      padding: 0 $pagination-padding-y;
-      height: $pagination-secondary-height-sm;
+      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
+      height: var(--pgn-size-pagination-secondary-height-sm);
     }
   }
 

package/dist/Pagination/pagination-bootstrap.scss

@@ -0,0 +1,83 @@
+.pagination {
+  display: flex;
+
+  @include list-unstyled();
+  @include border-radius();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--pgn-spacing-pagination-padding-y-base) var(--pgn-spacing-pagination-padding-x-base);
+  margin-left: calc(var(--pgn-size-pagination-border-width) * -1);
+  line-height: var(--pgn-typography-pagination-line-height);
+  color: var(--pgn-color-pagination-text-base);
+  text-decoration: none;
+  background-color: var(--pgn-color-pagination-bg-base);
+  border: var(--pgn-size-pagination-border-width) solid var(--pgn-color-pagination-border-base);
+
+  &:hover {
+    z-index: 2;
+    color: var(--pgn-color-pagination-text-hover);
+    text-decoration: none;
+    background-color: var(--pgn-color-pagination-bg-hover);
+    border-color: var(--pgn-color-pagination-border-hover);
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: var(--pgn-size-pagination-focus-outline);
+    box-shadow: var(--pgn-elevation-pagination-focus-box-shadow);
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+
+      @include border-left-radius(var(--pgn-size-border-radius-base));
+    }
+  }
+
+  &:last-child {
+    .page-link {
+      @include border-right-radius(var(--pgn-size-border-radius-base));
+    }
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: var(--pgn-color-pagination-text-active);
+    background-color: var(--pgn-color-pagination-bg-active);
+    border-color: var(--pgn-color-pagination-border-active);
+  }
+
+  &.disabled .page-link {
+    color: var(--pgn-color-pagination-text-disabled);
+    pointer-events: none;
+    cursor: auto;
+    background-color: var(--pgn-color-pagination-bg-disabled);
+    border-color: var(--pgn-color-pagination-border-disabled);
+  }
+}
+
+.pagination-lg {
+  @include pagination-size(
+    var(--pgn-spacing-pagination-padding-y-lg),
+    var(--pgn-spacing-pagination-padding-x-lg),
+    var(--pgn-typography-font-size-lg),
+    var(--pgn-typography-line-height-lg),
+    var(--pgn-size-pagination-border-radius-lg)
+  );
+}
+
+.pagination-sm {
+  @include pagination-size(
+    var(--pgn-spacing-pagination-padding-y-sm),
+    var(--pgn-spacing-pagination-padding-x-sm),
+    var(--pgn-typography-font-size-sm),
+    var(--pgn-typography-line-height-sm),
+    var(--pgn-size-pagination-border-radius-sm)
+  );
+}

package/dist/Popover/index.scss

@@ -1,31 +1,30 @@
-@import "variables";
 @import "mixins";
-@import "~bootstrap/scss/popover";
+@import "popover-bootstrap";
 
 .popover {
-  filter: $popover-box-shadow;
+  filter: var(--pgn-elevation-popover-box-shadow);
 
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: $h5-font-size;
+    font-size: var(--pgn-typography-font-size-h5);
   }
 
   .pgn__icon {
-    margin-inline-end: $popover-icon-margin-right;
-    height: $popover-icon-height;
-    width: $popover-icon-width;
+    margin-inline-end: var(--pgn-spacing-popover-icon-margin-right);
+    height: var(--pgn-size-popover-icon-height);
+    width: var(--pgn-size-popover-icon-width);
   }
 }
 
 .popover-success {
-  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-success-bg), var(--pgn-color-popover-success-icon));
 }
 
 .popover-warning {
-  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-warning-bg), var(--pgn-color-popover-warning-icon));
 }
 
 .popover-danger {
-  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
+  @include get-popover-variant(var(--pgn-color-popover-danger-bg), var(--pgn-color-popover-danger-icon));
 }