@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/ProductTour/Checkpoint.scss

@@ -1,20 +1,16 @@
-@import "variables";
-
-$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
-$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color;
-$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
-
 .pgn__checkpoint {
   position: absolute;
-  background: $checkpoint-background-color;
-  border-top: $checkpoint-border-width solid $checkpoint-border-color;
-  border-radius: $border-radius;
-  padding: map_get($spacers, 4);
-  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
-  z-index: $checkpoint-z-index;
-  max-width: $checkpoint-max-width;
-
-  @media (max-width: map-get($grid-breakpoints, "md")) {
+  background: var(--pgn-color-product-tour-checkpoint-bg);
+  border-top:
+    var(--pgn-size-product-tour-checkpoint-width-border)
+    solid var(--pgn-color-product-tour-checkpoint-border);
+  border-radius: var(--pgn-size-border-radius-base);
+  padding: var(--pgn-spacing-spacer-4);
+  box-shadow: 0 .25rem .5rem var(--pgn-color-product-tour-checkpoint-box-shadow);
+  z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
+  max-width: var(--pgn-size-product-tour-checkpoint-width-max);
+
+  @media (--pgn-size-breakpoint-max-width-sm) {
     min-width: 90%;
     max-width: 90%;
   }
@@ -38,12 +34,12 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
   #pgn__checkpoint-arrow::before,
   #pgn__checkpoint-arrow::after {
-    visibility: visible;
     content: "";
+    visibility: visible;
   }
 
   .pgn__checkpoint-button_dismiss {
-    margin-inline-end: map_get($spacers, 2);
+    margin-inline-end: var(--pgn-spacing-spacer-2);
   }
 
   .pgn__checkpoint-breadcrumb {
@@ -52,11 +48,11 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
     border-radius: 50%;
 
     &.pgn__checkpoint-breadcrumb_active {
-      background: $checkpoint-breadcrumb-color;
+      background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
     }
 
     &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid $checkpoint-breadcrumb-color;
+      border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
       background: transparent;
     }
 
@@ -80,7 +76,7 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   }
 
   .pgn__checkpoint-body {
-    color: $checkpoint-body-color;
+    color: var(--pgn-color-product-tour-checkpoint-body);
     margin-bottom: map_get($spacers, 3\.5);
     text-align: start;
   }
@@ -92,25 +88,33 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
   }
 
   #pgn__checkpoint-title {
-    font-size: $h3-font-size;
+    font-size: var(--pgn-typography-font-size-h3);
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow {
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
   bottom: 1px;
 
   [dir="rtl"] & {
-    left: $checkpoint-arrow-width !important;
+    left: var(--pgn-size-product-tour-checkpoint-width-arrow) !important;
   }
 
   &::after {
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-default-color;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
     filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
     -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
   }
@@ -118,39 +122,63 @@ $checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
 
 .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow {
   top: -36px;
-  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
 
   &::after {
-    border-bottom: $checkpoint-arrow-top-color;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-border);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
   right: 1px;
 
   &::after {
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-default-color;
-    border-right: $checkpoint-arrow-transparent;
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
     filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow {
-  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
+  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
   left: 1px;
 
   &::after {
-    left: -2 * $checkpoint-arrow-width;
-    border-bottom: $checkpoint-arrow-transparent;
-    border-top: $checkpoint-arrow-transparent;
-    border-left: $checkpoint-arrow-transparent;
-    border-right: $checkpoint-arrow-default-color;
+    left: calc(-2 * var(--pgn-size-product-tour-checkpoint-width-arrow));
+    border-bottom:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-top:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-left:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-right:
+      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
+      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
     filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
   }
 }

package/dist/ProgressBar/_mixins.scss

@@ -0,0 +1,22 @@
+@mixin progress-bar-variant($bg) {
+  background-color: $bg;
+
+  &::after {
+    content: "";
+    display: block;
+    background: $bg;
+    position: absolute;
+    // stylelint-disable-next-line max-line-length
+    top: calc(calc(var(--pgn-size-progress-bar-threshold-circle) / 2 - var(--pgn-size-progress-bar-height-annotated) / 2) * -1);
+    right: calc(var(--pgn-size-progress-bar-threshold-circle) / -2);
+    width: var(--pgn-size-progress-bar-threshold-circle);
+    height: var(--pgn-size-progress-bar-threshold-circle);
+    border-radius: calc(var(--pgn-size-progress-bar-threshold-circle) / 2);
+    z-index: 1;
+
+    [dir="rtl"] & {
+      left: calc(calc(var(--pgn-size-progress-bar-threshold-circle) / 2) * -1);
+      right: auto;
+    }
+  }
+}

package/dist/ProgressBar/bootstrap-progress.scss

@@ -0,0 +1,49 @@
+@if $enable-transitions {
+  @keyframes progress-bar-stripes {
+    from { background-position: var(--pgn-size-progress-bar-height-base) 0; }
+    to { background-position: 0 0; }
+  }
+}
+
+.progress {
+  display: flex;
+  height: var(--pgn-size-progress-bar-height-base);
+  overflow: hidden;
+  line-height: 0;
+  background-color: var(--pgn-color-progress-bar-bg);
+  box-shadow: var(--pgn-elevation-progress-bar-box-shadow);
+
+  @include font-size(var(--pgn-typography-progress-bar-font-size));
+  @include border-radius(var(--pgn-size-progress-bar-border-radius));
+}
+
+.progress-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  color: var(--pgn-color-progress-bar-bar-base);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+
+  @include transition(var(--pgn-transition-progress-bar-bar-transition));
+}
+
+.progress-bar-striped {
+  @include gradient-striped();
+
+  background-size: var(--pgn-size-progress-bar-height-base) var(--pgn-size-progress-bar-height-base);
+}
+
+@if $enable-transitions {
+  .progress-bar-animated {
+    animation: var(--pgn-transition-progress-bar-bar-animation-timing) progress-bar-stripes;
+
+    @if $enable-prefers-reduced-motion-media-query {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
+  }
+}

package/dist/ProgressBar/index.scss

@@ -1,12 +1,12 @@
-@import "variables";
-@import "~bootstrap/scss/progress";
+@import "bootstrap-progress";
+@import "mixins";
 
 .progress {
-  border: $progress-bar-border-width solid $progress-bar-border-color;
+  border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border);
 }
 
 .progress-bar {
-  background-color: $progress-bar-bg;
+  background-color: var(--pgn-color-progress-bar-bar-bg-base);
 }
 
 .pgn__progress-annotated {
@@ -17,12 +17,12 @@
 
   .progress {
     overflow: visible;
-    background-color: $light-300;
-    height: $annotated-progress-height;
+    background-color: var(--pgn-color-light-300);
+    height: var(--pgn-size-progress-bar-height-annotated);
     border: none;
 
     .progress-bar {
-      background-color: $annotated-progress-bar-bg;
+      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
       overflow: visible;
       position: relative;
     }
@@ -31,41 +31,33 @@
     .pgn__progress-tick--black::after {
       content: "";
       position: absolute;
-      height: $annotated-progress-height;
+      height: var(--pgn-size-progress-bar-height-annotated);
       width: 1px;
       right: 0;
     }
 
     .pgn__progress-tick--white::after {
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     .pgn__progress-tick--black::after {
-      background: $primary-500;
+      background: var(--pgn-color-primary-500);
     }
 
-    @each $name, $color in $progress-colors {
-      .pgn__progress-bar--#{$name} {
-        background-color: $color;
-
-        &::after {
-          content: "";
-          display: block;
-          background: $color;
-          position: absolute;
-          top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
-          right: -(calc($progress-threshold-circle / 2));
-          width: $progress-threshold-circle;
-          height: $progress-threshold-circle;
-          border-radius: calc($progress-threshold-circle / 2);
-          z-index: 1;
-
-          [dir="rtl"] & {
-            left: -(calc($progress-threshold-circle / 2));
-            right: auto;
-          }
-        }
-      }
+    .pgn__progress-bar--dark {
+      @include progress-bar-variant(var(--pgn-color-primary-500));
+    }
+
+    .pgn__progress-bar--success {
+      @include progress-bar-variant(var(--pgn-color-success-500));
+    }
+
+    .pgn__progress-bar--error {
+      @include progress-bar-variant(var(--pgn-color-danger-500));
+    }
+
+    .pgn__progress-bar--warning {
+      @include progress-bar-variant(var(--pgn-color-accent-b));
     }
   }
 
@@ -73,9 +65,9 @@
   .progress::after {
     position: absolute;
     content: "";
-    height: $annotated-progress-height;
+    height: var(--pgn-size-progress-bar-height-annotated);
     width: 1px;
-    background: $primary-500;
+    background: var(--pgn-color-primary-500);
   }
 
   .progress::after {
@@ -94,7 +86,7 @@
 
   .pgn__progress-hint {
     box-sizing: border-box;
-    padding: 0 $progress-hint-annotation-gap;
-    font-size: $small-font-size;
+    padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
+    font-size: var(--pgn-typography-font-size-small-base);
   }
 }

package/dist/Scrollable/index.scss

@@ -9,7 +9,7 @@
   &::before {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
     display: block;
     height: 2px;
     position: sticky;
@@ -21,7 +21,7 @@
   &::after {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
+    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
     display: block;
     height: 2px;
     position: sticky;

package/dist/SearchField/SearchFieldInput.js

@@ -1,7 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import Input from '../Input';
+import { FormControl } from '../Form';
 import { SearchFieldContext } from './SearchFieldAdvanced';
 function SearchFieldInput(props) {
   var _useContext = useContext(SearchFieldContext),
@@ -12,7 +12,7 @@ function SearchFieldInput(props) {
     handleBlur = _useContext.handleBlur,
     refs = _useContext.refs,
     disabled = _useContext.disabled;
-  return /*#__PURE__*/React.createElement(Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(FormControl, _extends({}, props, {
     ref: refs.input,
     type: "text",
     role: "searchbox",

package/dist/SearchField/SearchFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldInput.js","names":["React","useContext","PropTypes","Input","SearchFieldContext","SearchFieldInput","props","_useContext","inputId","value","handleChange","handleFocus","handleBlur","refs","disabled","createElement","_extends","ref","input","type","role","id","current","name","onFocus","onBlur","onChange","propTypes","className","string","placeholder","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldInput.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport Input from '../Input';\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldInput(props) {\n  const {\n    inputId, value, handleChange, handleFocus, handleBlur, refs, disabled,\n  } = useContext(SearchFieldContext);\n\n  return (\n    <Input\n      {...props}\n      ref={refs.input}\n      type=\"text\"\n      role=\"searchbox\"\n      id={inputId.current}\n      name=\"searchfield-input\"\n      value={value}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\nSearchFieldInput.propTypes = {\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n};\n\nSearchFieldInput.defaultProps = {\n  className: undefined,\n  placeholder: undefined,\n};\n\nexport default SearchFieldInput;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAElC,OAAOC,KAAK,MAAM,UAAU;AAC5B,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,IAAAC,WAAA,GAEIN,UAAU,CAACG,kBAAkB,CAAC;IADhCI,OAAO,GAAAD,WAAA,CAAPC,OAAO;IAAEC,KAAK,GAAAF,WAAA,CAALE,KAAK;IAAEC,YAAY,GAAAH,WAAA,CAAZG,YAAY;IAAEC,WAAW,GAAAJ,WAAA,CAAXI,WAAW;IAAEC,UAAU,GAAAL,WAAA,CAAVK,UAAU;IAAEC,IAAI,GAAAN,WAAA,CAAJM,IAAI;IAAEC,QAAQ,GAAAP,WAAA,CAARO,QAAQ;EAGvE,oBACEd,KAAA,CAAAe,aAAA,CAACZ,KAAK,EAAAa,QAAA,KACAV,KAAK;IACTW,GAAG,EAAEJ,IAAI,CAACK,KAAM;IAChBC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,WAAW;IAChBC,EAAE,EAAEb,OAAO,CAACc,OAAQ;IACpBC,IAAI,EAAC,mBAAmB;IACxBd,KAAK,EAAEA,KAAM;IACbe,OAAO,EAAEb,WAAY;IACrBc,MAAM,EAAEb,UAAW;IACnBc,QAAQ,EAAEhB,YAAa;IACvBI,QAAQ,EAAEA;EAAS,EACpB,CAAC;AAEN;AAEAT,gBAAgB,CAACsB,SAAS,GAAG;EAC3B;EACAC,SAAS,EAAE1B,SAAS,CAAC2B,MAAM;EAC3B;EACAC,WAAW,EAAE5B,SAAS,CAAC2B;AACzB,CAAC;AAEDxB,gBAAgB,CAAC0B,YAAY,GAAG;EAC9BH,SAAS,EAAEI,SAAS;EACpBF,WAAW,EAAEE;AACf,CAAC;AAED,eAAe3B,gBAAgB","ignoreList":[]}
+{"version":3,"file":"SearchFieldInput.js","names":["React","useContext","PropTypes","FormControl","SearchFieldContext","SearchFieldInput","props","_useContext","inputId","value","handleChange","handleFocus","handleBlur","refs","disabled","createElement","_extends","ref","input","type","role","id","current","name","onFocus","onBlur","onChange","propTypes","className","string","placeholder","defaultProps","undefined"],"sources":["../../src/SearchField/SearchFieldInput.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FormControl } from '../Form';\nimport { SearchFieldContext } from './SearchFieldAdvanced';\n\nfunction SearchFieldInput(props) {\n  const {\n    inputId, value, handleChange, handleFocus, handleBlur, refs, disabled,\n  } = useContext(SearchFieldContext);\n\n  return (\n    <FormControl\n      {...props}\n      ref={refs.input}\n      type=\"text\"\n      role=\"searchbox\"\n      id={inputId.current}\n      name=\"searchfield-input\"\n      value={value}\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\nSearchFieldInput.propTypes = {\n  /** specifies a custom class name. */\n  className: PropTypes.string,\n  /** specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n};\n\nSearchFieldInput.defaultProps = {\n  className: undefined,\n  placeholder: undefined,\n};\n\nexport default SearchFieldInput;\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,WAAW,QAAQ,SAAS;AACrC,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,IAAAC,WAAA,GAEIN,UAAU,CAACG,kBAAkB,CAAC;IADhCI,OAAO,GAAAD,WAAA,CAAPC,OAAO;IAAEC,KAAK,GAAAF,WAAA,CAALE,KAAK;IAAEC,YAAY,GAAAH,WAAA,CAAZG,YAAY;IAAEC,WAAW,GAAAJ,WAAA,CAAXI,WAAW;IAAEC,UAAU,GAAAL,WAAA,CAAVK,UAAU;IAAEC,IAAI,GAAAN,WAAA,CAAJM,IAAI;IAAEC,QAAQ,GAAAP,WAAA,CAARO,QAAQ;EAGvE,oBACEd,KAAA,CAAAe,aAAA,CAACZ,WAAW,EAAAa,QAAA,KACNV,KAAK;IACTW,GAAG,EAAEJ,IAAI,CAACK,KAAM;IAChBC,IAAI,EAAC,MAAM;IACXC,IAAI,EAAC,WAAW;IAChBC,EAAE,EAAEb,OAAO,CAACc,OAAQ;IACpBC,IAAI,EAAC,mBAAmB;IACxBd,KAAK,EAAEA,KAAM;IACbe,OAAO,EAAEb,WAAY;IACrBc,MAAM,EAAEb,UAAW;IACnBc,QAAQ,EAAEhB,YAAa;IACvBI,QAAQ,EAAEA;EAAS,EACpB,CAAC;AAEN;AAEAT,gBAAgB,CAACsB,SAAS,GAAG;EAC3B;EACAC,SAAS,EAAE1B,SAAS,CAAC2B,MAAM;EAC3B;EACAC,WAAW,EAAE5B,SAAS,CAAC2B;AACzB,CAAC;AAEDxB,gBAAgB,CAAC0B,YAAY,GAAG;EAC9BH,SAAS,EAAEI,SAAS;EACpBF,WAAW,EAAEE;AACf,CAAC;AAED,eAAe3B,gBAAgB","ignoreList":[]}

package/dist/SearchField/index.scss

@@ -1,24 +1,22 @@
-@import "variables";
-
 .pgn__searchfield {
-  transition: $input-transition;
-  border: $search-border-width solid $search-border-color;
+  transition: var(--pgn-transition-form-input);
+  border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
 
   .pgn__searchfield-form {
     display: flex;
     align-items: center;
     width: 100%;
-    background-color: $search-form-background-color;
+    background-color: var(--pgn-color-search-field-form-bg);
   }
 
   .btn:focus-visible {
     outline: none;
     position: relative;
-    transition: $input-transition;
+    transition: var(--pgn-transition-form-input);
 
     &::after {
       content: "";
-      border: $search-border-focus-width double $search-border-focus-color;
+      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
       position: absolute;
       width: 100%;
       height: 100%;
@@ -27,7 +25,7 @@
 
   &.disabled,
   &:disabled {
-    opacity: $search-disabled-opacity;
+    opacity: var(--pgn-other-search-field-disabled-opacity);
     pointer-events: none;
   }
 
@@ -36,26 +34,26 @@
 
     &::after {
       content: "";
-      border: $search-border-focus-width double $search-border-focus-color;
+      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
       position: absolute;
       width: 100%;
       height: 100%;
     }
 
     .pgn__searchfield_wrapper {
-      box-shadow: 0 0 0 $search-border-width $search-border-color-interaction;
+      box-shadow: 0 0 0 var(--pgn-size-search-field-border-width-base) var(--pgn-color-search-field-border-interaction);
     }
   }
 
   &:hover,
   &:active {
-    border-color: $search-border-color-interaction;
+    border-color: var(--pgn-color-search-field-border-interaction);
   }
 
   .form-control {
     border: none;
-    border-radius: $search-border-radius;
-    height: $input-height-search;
+    border-radius: var(--pgn-size-search-field-border-radius);
+    height: var(--pgn-size-search-field-search-input-height);
 
     &:focus {
       box-shadow: none;
@@ -99,7 +97,7 @@
 
         &::after {
           content: "";
-          border: $search-border-focus-width double $search-border-focus-color;
+          border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
           position: absolute;
           width: 100%;
           height: 100%;
@@ -112,18 +110,18 @@
     display: flex;
     align-items: center;
     width: 100%;
-    border: $search-border-width solid $search-border-color;
+    border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
 
     &:hover,
     &:active {
-      border-color: $search-border-color-interaction;
+      border-color: var(--pgn-color-search-field-border-interaction);
     }
   }
 }
 
 .pgn__searchfield__button.btn[type="submit"] {
   border-radius: 0;
-  margin-inline-start: $search-button-margin;
+  margin-inline-start: var(--pgn-spacing-search-field-margin-button);
 }
 
 .pgn__searchfield__iconbutton-submit,

package/dist/SelectableBox/index.scss

@@ -1,11 +1,9 @@
-@import "variables";
-
 .pgn__selectable_box-set {
   display: grid;
   grid-auto-rows: 1fr;
-  grid-gap: $selectable-box-space;
+  grid-gap: var(--pgn-spacing-selectable-box-box-space);
 
-  @for $i from $min-cols-number through $max-cols-number {
+  @for $i from 1 through 12 {
     &.pgn__selectable_box-set--#{$i} {
       grid-template-columns: repeat(#{$i}, 1fr);
     }
@@ -19,21 +17,21 @@
 .pgn__selectable_box {
   position: relative;
   height: 100%;
-  padding: $selectable-box-padding;
-  box-shadow: $level-1-box-shadow;
-  border-radius: $selectable-box-border-radius;
+  padding: var(--pgn-spacing-selectable-box-padding);
+  box-shadow: var(--pgn-elevation-box-shadow-level-1);
+  border-radius: var(--pgn-spacing-selectable-box-border-radius);
   text-align: start;
-  background: $white;
+  background: var(--pgn-color-white);
 
   &:focus-visible {
-    outline: 1px solid $primary-700;
+    outline: 1px solid var(--pgn-color-primary-700);
   }
 
   .pgn__form-radio,
   .pgn__form-checkbox {
     position: absolute;
-    top: $selectable-box-padding;
-    inset-inline-end: $selectable-box-padding;
+    top: var(--pgn-spacing-selectable-box-padding);
+    inset-inline-end: var(--pgn-spacing-selectable-box-padding);
 
     input {
       margin-inline-end: 0;
@@ -46,9 +44,9 @@
 }
 
 .pgn__selectable_box-active {
-  outline: 2px solid $primary-500;
+  outline: 2px solid var(--pgn-color-primary-500);
 }
 
 .pgn__selectable_box-invalid {
-  outline: 2px solid $danger-300;
+  outline: 2px solid var(--pgn-color-danger-300);
 }

package/dist/Sheet/index.scss

@@ -1,7 +1,7 @@
 .pgn__sheet-skrim {
   width: 100%;
   height: 100%;
-  background-color: rgba(196, 196, 196, .5);
+  background-color: var(--pgn-color-sheet-skrim-bg);
   position: fixed;
   top: 0;
   left: 0;
@@ -10,17 +10,17 @@
     display: none;
   }
 
-  z-index: $zindex-sheet-backdrop;
+  z-index: var(--pgn-elevation-sheet-zindex-backdrop);
 }
 
 %component-left {
   left: 0;
-  box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15);
+  box-shadow: 8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
 }
 
 %component-right {
   right: 0;
-  box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15);
+  box-shadow: -8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
 }
 
 .pgn__sheet-component-left {
@@ -34,22 +34,22 @@
 .pgn__sheet-component {
   position: fixed;
   padding: 1.25rem;
-  background-color: white;
-  z-index: $zindex-sheet;
+  background-color: var(--pgn-color-white);
+  z-index: var(--pgn-elevation-sheet-zindex-main);
 
   &.pgn__sheet__dark {
-    background-color: $dark-500;
-    color: $light-300;
+    background-color: var(--pgn-color-dark-500);
+    color: var(--pgn-color-light-300);
   }
 
   &.bottom {
     bottom: 0;
-    box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 -8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
   }
 
   &.top {
     top: 0;
-    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
+    box-shadow: 0 8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
   }
 
   &.left {