@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Alert/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 //
 // Override Bootstrap's alert definition.
 // We do this to get more control over colors
@@ -10,13 +12,11 @@
 
 .alert {
   position: relative;
-  padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
-  margin-bottom: var(--pgn-spacing-alert-margin-bottom);
-  border: var(--pgn-size-alert-border-width) solid var(--pgn-alert-border-color, transparent);
-  color: inherit;
-  background-color: var(--pgn-alert-bg, transparent);
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: $alert-border-width solid transparent;
 
-  @include border-radius(var(--pgn-size-alert-border-radius));
+  @include border-radius($alert-border-radius);
   @include pgn-box-shadow(1, "down");
 
   .alert-message-content > :last-child {
@@ -24,9 +24,8 @@
   }
 
   .alert-icon {
-    color: var(--pgn-alert-icon-color, inherit);
     float: left;
-    margin-inline-end: var(--pgn-spacing-alert-icon-space);
+    margin-inline-end: $alert-icon-space;
     width: 1.5rem;
     height: 1.5rem;
     flex-shrink: 0;
@@ -35,17 +34,17 @@
 
 // Headings for larger alerts
 .alert-heading {
-  // Specified to prevent conflicts of changing var(--pgn-color-headings-base)
-  color: var(--pgn-color-alert-title);
+  // Specified to prevent conflicts of changing $headings-color
+  color: $alert-title-color;
   display: flex;
 }
 
 // added to align content and icon
 .alert-content {
   display: flex;
-  font-size: var(--pgn-typography-alert-font-size);
-  line-height: var(--pgn-typography-alert-line-height);
-  color: var(--pgn-color-alert-content);
+  font-size: $alert-font-size;
+  line-height: $alert-line-height;
+  color: $alert-content-color;
   text-align: start;
 
   div {
@@ -55,7 +54,7 @@
 
 // Provide class for links that match alerts
 .alert-link {
-  font-weight: var(--pgn-typography-alert-font-weight-link);
+  font-weight: $alert-link-font-weight;
   text-decoration: underline;
 
   &:hover {
@@ -67,16 +66,16 @@
 //
 // Expand the right padding and account for the close button's positioning.
 
-// Baking in $close-font-size: var(--pgn-typography-font-size-base) * 1.5 !default; to avoid any dependency
+// Baking in $close-font-size: $font-size-base * 1.5 !default; to avoid any dependency
 .alert-dismissible {
-  padding-right: calc((var(--pgn-typography-font-size-base) * 1.5) + (var(--pgn-spacing-alert-padding-x) * 2));
+  padding-right: ($font-size-base * 1.5) + $alert-padding-x * 2;
 
   // Adjust close link position
   .close {
     position: absolute;
     top: 0;
     right: 0;
-    padding: var(--pgn-spacing-alert-padding-y) var(--pgn-spacing-alert-padding-x);
+    padding: $alert-padding-y $alert-padding-x;
     color: inherit;
   }
 }
@@ -86,36 +85,28 @@
   align-items: center;
 
   .pgn__alert-actions {
-    margin-inline-start: var(--pgn-spacing-alert-actions-gap);
+    margin-inline-start: $alert-actions-gap;
   }
 }
 
-.pgn__alert-message-wrapper-stacked .pgn__alert-actions {
-  margin-top: var(--pgn-spacing-alert-actions-gap);
+.pgn__alert-message-wrapper-stacked {
+  .pgn__alert-actions {
+    margin-top: $alert-actions-gap;
+  }
 }
 
 // Alternate styles
+//
+// Generate contextual modifier classes for coloring the alert.
 
-.alert-success {
-  --pgn-alert-bg: var(--pgn-color-alert-bg-success);
-  --pgn-alert-border-color: var(--pgn-color-alert-border-success);
-  --pgn-alert-icon-color: var(--pgn-color-alert-icon-success);
-}
-
-.alert-info {
-  --pgn-alert-bg: var(--pgn-color-alert-bg-info);
-  --pgn-alert-border-color: var(--pgn-color-alert-border-info);
-  --pgn-alert-icon-color: var(--pgn-color-alert-icon-info);
-}
-
-.alert-danger {
-  --pgn-alert-bg: var(--pgn-color-alert-bg-danger);
-  --pgn-alert-border-color: var(--pgn-color-alert-border-danger);
-  --pgn-alert-icon-color: var(--pgn-color-alert-icon-danger);
-}
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    color: inherit;
+    background-color: theme-color($color, "background");
+    border-color: theme-color($color, "border");
 
-.alert-warning {
-  --pgn-alert-bg: var(--pgn-color-alert-bg-warning);
-  --pgn-alert-border-color: var(--pgn-color-alert-border-warning);
-  --pgn-alert-icon-color: var(--pgn-color-alert-icon-warning);
+    .alert-icon {
+      color: theme-color($color, "default");
+    }
+  }
 }

package/dist/Annotation/_variables.scss

@@ -0,0 +1,18 @@
+$annotation-padding:               .5rem !default;
+$annotation-box-shadow:            drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$annotation-border-radius:         .25rem !default;
+$annotation-max-width:             18.75rem !default;
+$annotation-font-size:             $font-size-sm !default;
+$annotation-line-height:           $line-height-sm !default;
+
+$annotation-variants: (
+  "success": ( "background-color": $success, "color": $white ),
+  "warning": ( "background-color": $accent-b, "color": $black ),
+  "error":   ( "background-color": $danger, "color": $white ),
+  "light":   ( "background-color": $white, "color": $primary-500 ),
+  "dark":    ( "background-color": $dark, "color": $white ),
+) !default;
+
+$annotation-arrow-side-margin:     .25rem !default;
+$annotation-arrow-border-width:    .5rem !default;

package/dist/Annotation/index.js

@@ -1,20 +1,18 @@
-const _excluded = ["className", "variant", "children", "arrowPlacement"];
+var _excluded = ["className", "variant", "children", "arrowPlacement"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-const Annotation = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      className,
-      variant,
-      children,
-      arrowPlacement
-    } = _ref,
+var Annotation = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    variant = _ref.variant,
+    children = _ref.children,
+    arrowPlacement = _ref.arrowPlacement,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("span", _extends({
-    className: classNames(className, 'pgn__annotation', `pgn__annotation-${variant}-${arrowPlacement}`),
+    className: classNames(className, 'pgn__annotation', "pgn__annotation-".concat(variant, "-").concat(arrowPlacement)),
     ref: ref
   }, props), children);
 });

package/dist/Annotation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Annotation","forwardRef","_ref","ref","className","variant","children","arrowPlacement","props","_objectWithoutProperties","_excluded","createElement","_extends","defaultProps","undefined","propTypes","node","isRequired","string","oneOf"],"sources":["../../src/Annotation/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst Annotation = React.forwardRef(({\n  className,\n  variant,\n  children,\n  arrowPlacement,\n  ...props\n}, ref) => (\n  <span\n    className={classNames(\n      className,\n      'pgn__annotation',\n      `pgn__annotation-${variant}-${arrowPlacement}`,\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </span>\n));\n\nAnnotation.defaultProps = {\n  className: undefined,\n  variant: 'success',\n  arrowPlacement: 'bottom',\n};\n\nAnnotation.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['error', 'success', 'warning', 'light', 'dark']),\n  /** Specifies arrow position. */\n  arrowPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),\n};\n\nexport default Annotation;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,MAAMC,UAAU,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAAAC,IAAA,EAMjCC,GAAG;EAAA,IAN+B;MACnCC,SAAS;MACTC,OAAO;MACPC,QAAQ;MACRC;IAEF,CAAC,GAAAL,IAAA;IADIM,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAAA,oBAERb,KAAA,CAAAc,aAAA,SAAAC,QAAA;IACER,SAAS,EAAEL,UAAU,CACnBK,SAAS,EACT,iBAAiB,EAChB,mBAAkBC,OAAQ,IAAGE,cAAe,EAC/C,CAAE;IACFJ,GAAG,EAAEA;EAAI,GACLK,KAAK,GAERF,QACG,CAAC;AAAA,CACR,CAAC;AAEFN,UAAU,CAACa,YAAY,GAAG;EACxBT,SAAS,EAAEU,SAAS;EACpBT,OAAO,EAAE,SAAS;EAClBE,cAAc,EAAE;AAClB,CAAC;AAEDP,UAAU,CAACe,SAAS,GAAG;EACrB;EACAT,QAAQ,EAAER,SAAS,CAACkB,IAAI,CAACC,UAAU;EACnC;EACAb,SAAS,EAAEN,SAAS,CAACoB,MAAM;EAC3B;EACAb,OAAO,EAAEP,SAAS,CAACqB,KAAK,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAC1E;EACAZ,cAAc,EAAET,SAAS,CAACqB,KAAK,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;AACpE,CAAC;AAED,eAAenB,UAAU"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Annotation","forwardRef","_ref","ref","className","variant","children","arrowPlacement","props","_objectWithoutProperties","_excluded","createElement","_extends","concat","defaultProps","undefined","propTypes","node","isRequired","string","oneOf"],"sources":["../../src/Annotation/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nconst Annotation = React.forwardRef(({\n  className,\n  variant,\n  children,\n  arrowPlacement,\n  ...props\n}, ref) => (\n  <span\n    className={classNames(\n      className,\n      'pgn__annotation',\n      `pgn__annotation-${variant}-${arrowPlacement}`,\n    )}\n    ref={ref}\n    {...props}\n  >\n    {children}\n  </span>\n));\n\nAnnotation.defaultProps = {\n  className: undefined,\n  variant: 'success',\n  arrowPlacement: 'bottom',\n};\n\nAnnotation.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies class name to append to the base element. */\n  className: PropTypes.string,\n  /** Specifies variant to use. */\n  variant: PropTypes.oneOf(['error', 'success', 'warning', 'light', 'dark']),\n  /** Specifies arrow position. */\n  arrowPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),\n};\n\nexport default Annotation;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,IAAMC,UAAU,gBAAGH,KAAK,CAACI,UAAU,CAAC,UAAAC,IAAA,EAMjCC,GAAG;EAAA,IALJC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACXC,KAAK,GAAAC,wBAAA,CAAAP,IAAA,EAAAQ,SAAA;EAAA,oBAERb,KAAA,CAAAc,aAAA,SAAAC,QAAA;IACER,SAAS,EAAEL,UAAU,CACnBK,SAAS,EACT,iBAAiB,qBAAAS,MAAA,CACER,OAAO,OAAAQ,MAAA,CAAIN,cAAc,CAC9C,CAAE;IACFJ,GAAG,EAAEA;EAAI,GACLK,KAAK,GAERF,QACG,CAAC;AAAA,CACR,CAAC;AAEFN,UAAU,CAACc,YAAY,GAAG;EACxBV,SAAS,EAAEW,SAAS;EACpBV,OAAO,EAAE,SAAS;EAClBE,cAAc,EAAE;AAClB,CAAC;AAEDP,UAAU,CAACgB,SAAS,GAAG;EACrB;EACAV,QAAQ,EAAER,SAAS,CAACmB,IAAI,CAACC,UAAU;EACnC;EACAd,SAAS,EAAEN,SAAS,CAACqB,MAAM;EAC3B;EACAd,OAAO,EAAEP,SAAS,CAACsB,KAAK,CAAC,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;EAC1E;EACAb,cAAc,EAAET,SAAS,CAACsB,KAAK,CAAC,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;AACpE,CAAC;AAED,eAAepB,UAAU"}

package/dist/Annotation/index.scss

@@ -1,139 +1,112 @@
-@import "mixins";
+@import "variables";
+
+@mixin triangle($color, $direction) {
+  height: 0;
+  width: 0;
+  position: absolute;
+  content: "";
+  border: solid transparent;
+
+  @if $direction == top {
+    border-bottom-color: $color;
+    border-width: 0 $annotation-arrow-border-width $annotation-arrow-border-width;
+    right: 0;
+    left: 0;
+    top: -$annotation-arrow-border-width;
+    margin: 0 auto;
+  }
+
+  @else if $direction == right {
+    border-left-color: $color;
+    border-width: $annotation-arrow-border-width 0 $annotation-arrow-border-width $annotation-arrow-border-width;
+    top: 0;
+    bottom: 0;
+    right: -$annotation-arrow-border-width;
+    margin: auto 0;
+  }
+
+  @else if $direction == bottom {
+    border-top-color: $color;
+    border-width: $annotation-arrow-border-width $annotation-arrow-border-width 0;
+    right: 0;
+    left: 0;
+    bottom: -$annotation-arrow-border-width;
+    margin: 0 auto;
+  }
+
+  @else if $direction == left {
+    border-right-color: $color;
+    border-width: $annotation-arrow-border-width $annotation-arrow-border-width $annotation-arrow-border-width 0;
+    top: 0;
+    bottom: 0;
+    left: -$annotation-arrow-border-width;
+    margin: auto 0;
+  }
+
+  @else {
+    @error "Unknown direction #{$direction}.";
+  }
+}
 
 .pgn__annotation {
-  padding: var(--pgn-spacing-annotation-padding);
-  border-radius: var(--pgn-size-annotation-border-radius);
-  max-width: var(--pgn-size-annotation-max-width);
-  filter: var(--pgn-elevation-annotation-box-shadow);
+  padding: $annotation-padding;
+  border-radius: $annotation-border-radius;
+  max-width: $annotation-max-width;
+  filter: $annotation-box-shadow;
   word-wrap: break-word;
   position: relative;
   display: inline-block;
-  font-size: var(--pgn-typography-annotation-font-size);
-  line-height: var(--pgn-typography-annotation-line-height);
+  font-size: $annotation-font-size;
+  line-height: $annotation-line-height;
   text-align: center;
 }
 
-// SUCCESS
-.pgn__annotation-success-top {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-success),
-    var(--pgn-color-annotation-text-success), "top");
-}
-
-.pgn__annotation-success-bottom {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-success),
-    var(--pgn-color-annotation-text-success), "bottom");
-}
-
-.pgn__annotation-success-right {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-success),
-    var(--pgn-color-annotation-text-success), "right");
-}
-
-.pgn__annotation-success-left {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-success),
-    var(--pgn-color-annotation-text-success), "left");
-}
-
-// WARNING
-.pgn__annotation-warning-top {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-warning),
-    var(--pgn-color-annotation-text-warning), "top");
-}
-
-.pgn__annotation-warning-bottom {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-warning),
-    var(--pgn-color-annotation-text-warning), "bottom");
-}
-
-.pgn__annotation-warning-right {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-warning),
-    var(--pgn-color-annotation-text-warning), "right");
-}
-
-.pgn__annotation-warning-left {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-warning),
-    var(--pgn-color-annotation-text-warning), "left");
-}
-
-// ERROR
-.pgn__annotation-error-top {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-error),
-    var(--pgn-color-annotation-text-error), "top");
-}
-
-.pgn__annotation-error-bottom {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-error),
-    var(--pgn-color-annotation-text-error), "bottom");
-}
-
-.pgn__annotation-error-right {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-error),
-    var(--pgn-color-annotation-text-error), "right");
-}
-
-.pgn__annotation-error-left {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-error),
-    var(--pgn-color-annotation-text-error), "left");
-}
-
-// DARK
-.pgn__annotation-dark-top {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-dark),
-    var(--pgn-color-annotation-text-dark), "top");
-}
-
-.pgn__annotation-dark-bottom {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-dark),
-    var(--pgn-color-annotation-text-dark), "bottom");
-}
-
-.pgn__annotation-dark-right {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-dark),
-    var(--pgn-color-annotation-text-dark), "right");
-}
-
-.pgn__annotation-dark-left {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-dark),
-    var(--pgn-color-annotation-text-dark), "left");
-}
-
-// LIGHT
-.pgn__annotation-light-top {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-light),
-    var(--pgn-color-annotation-text-light), "top");
-}
-
-.pgn__annotation-light-bottom {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-light),
-    var(--pgn-color-annotation-text-light), "bottom");
-}
-
-.pgn__annotation-light-right {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-light),
-    var(--pgn-color-annotation-text-light), "right");
-}
-
-.pgn__annotation-light-left {
-  @include annotation-variant(
-    var(--pgn-color-annotation-bg-light),
-    var(--pgn-color-annotation-text-light), "left");
+$arrow-directions: top, right, bottom, left;
+
+@each $name, $colors in $annotation-variants {
+  @each $direction in $arrow-directions {
+    .pgn__annotation-#{$name}-#{$direction} {
+      background-color: map-get($colors, "background-color");
+      color: map-get($colors, "color");
+
+      // set additional margin to arrow side of the Annotation
+      margin-#{$direction}: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+
+      [dir="rtl"] & {
+        @if $direction == left {
+          margin-left: 0;
+          margin-right: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+        }
+
+        @else if $direction == right {
+          margin-right: 0;
+          margin-left: $annotation-arrow-border-width + $annotation-arrow-side-margin;
+        }
+      }
+
+      &::after {
+        @include triangle(map-get($colors, "background-color"), $direction);
+
+        [dir="rtl"] & {
+          @if $direction == left {
+            left: initial;
+            right: -$annotation-arrow-border-width;
+            border-width:
+              $annotation-arrow-border-width 0 $annotation-arrow-border-width
+              $annotation-arrow-border-width;
+            border-left-color: map-get($colors, "background-color");
+          }
+
+          @else if $direction == right {
+            right: initial;
+            left: -$annotation-arrow-border-width;
+            border-width:
+              $annotation-arrow-border-width $annotation-arrow-border-width
+              $annotation-arrow-border-width 0;
+            border-right-color: map-get($colors, "background-color");
+          }
+        }
+      }
+    }
+  }
 }

package/dist/Avatar/_variables.scss

@@ -0,0 +1,10 @@
+$avatar-border-radius:               100% !default;
+$avatar-border:                      solid 1px $light-300 !default;
+
+$avatar-size-xs:                     1.5rem !default;
+$avatar-size-sm:                     2.25rem !default;
+$avatar-size:                        3rem !default;
+$avatar-size-lg:                     4rem !default;
+$avatar-size-xl:                     6rem !default;
+$avatar-size-xxl:                    11.5rem !default;
+$avatar-size-huge:                   18.75rem !default;

package/dist/Avatar/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["alt", "size", "src"];
+var _excluded = ["alt", "size", "src"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -7,14 +7,12 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import defaultAvatar from './default-avatar.svg';
 function Avatar(_ref) {
-  let {
-      alt,
-      size,
-      src
-    } = _ref,
+  var alt = _ref.alt,
+    size = _ref.size,
+    src = _ref.src,
     attrs = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("img", _extends({}, attrs, {
-    className: classNames('pgn__avatar', `pgn__avatar-${size}`, attrs.className),
+    className: classNames('pgn__avatar', "pgn__avatar-".concat(size), attrs.className),
     src: src || defaultAvatar,
     alt: alt
   }));

package/dist/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","defaultAvatar","Avatar","_ref","alt","size","src","attrs","_objectWithoutProperties","_excluded","createElement","_extends","className","propTypes","string","oneOf","defaultProps","undefined"],"sources":["../../src/Avatar/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport defaultAvatar from './default-avatar.svg';\n\nfunction Avatar({\n  alt,\n  size,\n  src,\n  ...attrs\n}) {\n  return (\n    <img\n      {...attrs}\n      className={classNames(\n        'pgn__avatar',\n        `pgn__avatar-${size}`,\n        attrs.className,\n      )}\n      src={src || defaultAvatar}\n      alt={alt}\n    />\n  );\n}\n\nAvatar.propTypes = {\n  /** Alt text. Usually the user's name */\n  alt: PropTypes.string,\n  /** Size of the avatar */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n};\n\nAvatar.defaultProps = {\n  alt: '',\n  size: 'md',\n  src: undefined,\n};\n\nexport default Avatar;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,sBAAsB;AAEhD,SAASC,MAAMA,CAAAC,IAAA,EAKZ;EAAA,IALa;MACdC,GAAG;MACHC,IAAI;MACJC;IAEF,CAAC,GAAAH,IAAA;IADII,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBACEX,KAAA,CAAAY,aAAA,QAAAC,QAAA,KACMJ,KAAK;IACTK,SAAS,EAAEZ,UAAU,CACnB,aAAa,EACZ,eAAcK,IAAK,EAAC,EACrBE,KAAK,CAACK,SACR,CAAE;IACFN,GAAG,EAAEA,GAAG,IAAIL,aAAc;IAC1BG,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN;AAEAF,MAAM,CAACW,SAAS,GAAG;EACjB;EACAT,GAAG,EAAEL,SAAS,CAACe,MAAM;EACrB;EACAT,IAAI,EAAEN,SAAS,CAACgB,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;EACpE;EACAT,GAAG,EAAEP,SAAS,CAACe;AACjB,CAAC;AAEDZ,MAAM,CAACc,YAAY,GAAG;EACpBZ,GAAG,EAAE,EAAE;EACPC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEW;AACP,CAAC;AAED,eAAef,MAAM"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","defaultAvatar","Avatar","_ref","alt","size","src","attrs","_objectWithoutProperties","_excluded","createElement","_extends","className","concat","propTypes","string","oneOf","defaultProps","undefined"],"sources":["../../src/Avatar/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport defaultAvatar from './default-avatar.svg';\n\nfunction Avatar({\n  alt,\n  size,\n  src,\n  ...attrs\n}) {\n  return (\n    <img\n      {...attrs}\n      className={classNames(\n        'pgn__avatar',\n        `pgn__avatar-${size}`,\n        attrs.className,\n      )}\n      src={src || defaultAvatar}\n      alt={alt}\n    />\n  );\n}\n\nAvatar.propTypes = {\n  /** Alt text. Usually the user's name */\n  alt: PropTypes.string,\n  /** Size of the avatar */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'huge']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n};\n\nAvatar.defaultProps = {\n  alt: '',\n  size: 'md',\n  src: undefined,\n};\n\nexport default Avatar;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,sBAAsB;AAEhD,SAASC,MAAMA,CAAAC,IAAA,EAKZ;EAAA,IAJDC,GAAG,GAAAD,IAAA,CAAHC,GAAG;IACHC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACAC,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAER,oBACEX,KAAA,CAAAY,aAAA,QAAAC,QAAA,KACMJ,KAAK;IACTK,SAAS,EAAEZ,UAAU,CACnB,aAAa,iBAAAa,MAAA,CACER,IAAI,GACnBE,KAAK,CAACK,SACR,CAAE;IACFN,GAAG,EAAEA,GAAG,IAAIL,aAAc;IAC1BG,GAAG,EAAEA;EAAI,EACV,CAAC;AAEN;AAEAF,MAAM,CAACY,SAAS,GAAG;EACjB;EACAV,GAAG,EAAEL,SAAS,CAACgB,MAAM;EACrB;EACAV,IAAI,EAAEN,SAAS,CAACiB,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;EACpE;EACAV,GAAG,EAAEP,SAAS,CAACgB;AACjB,CAAC;AAEDb,MAAM,CAACe,YAAY,GAAG;EACpBb,GAAG,EAAE,EAAE;EACPC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEY;AACP,CAAC;AAED,eAAehB,MAAM"}

package/dist/Avatar/index.scss

@@ -1,44 +1,46 @@
+@import "variables";
+
 .pgn__avatar {
-  border-radius: var(--pgn-size-avatar-border-radius);
-  border: solid var(--pgn-size-avatar-border-base) var(--pgn-color-avatar-border);
+  border-radius: $avatar-border-radius;
+  border: $avatar-border;
   display: inline-block;
-  height: var(--pgn-size-avatar-base);
+  height: $avatar-size;
   overflow: hidden;
-  width: var(--pgn-size-avatar-base);
+  width: $avatar-size;
   object-fit: cover;
 
   &.pgn__avatar-xs {
-    height: var(--pgn-size-avatar-xs);
-    width: var(--pgn-size-avatar-xs);
+    height: $avatar-size-xs;
+    width: $avatar-size-xs;
   }
 
   &.pgn__avatar-sm {
-    height: var(--pgn-size-avatar-sm);
-    width: var(--pgn-size-avatar-sm);
+    height: $avatar-size-sm;
+    width: $avatar-size-sm;
   }
 
   &.pgn__avatar-md {
-    height: var(--pgn-size-avatar-base);
-    width: var(--pgn-size-avatar-base);
+    height: $avatar-size;
+    width: $avatar-size;
   }
 
   &.pgn__avatar-lg {
-    height: var(--pgn-size-avatar-lg);
-    width: var(--pgn-size-avatar-lg);
+    height: $avatar-size-lg;
+    width: $avatar-size-lg;
   }
 
   &.pgn__avatar-xl {
-    height: var(--pgn-size-avatar-xl);
-    width: var(--pgn-size-avatar-xl);
+    height: $avatar-size-xl;
+    width: $avatar-size-xl;
   }
 
   &.pgn__avatar-xxl {
-    height: var(--pgn-size-avatar-xxl);
-    width: var(--pgn-size-avatar-xxl);
+    height: $avatar-size-xxl;
+    width: $avatar-size-xxl;
   }
 
   &.pgn__avatar-huge {
-    height: var(--pgn-size-avatar-huge);
-    width: var(--pgn-size-avatar-huge);
+    height: $avatar-size-huge;
+    width: $avatar-size-huge;
   }
 }

package/dist/AvatarButton/_variables.scss

@@ -0,0 +1,3 @@
+$avatar-button-padding-left: .25em !default;
+$avatar-button-padding-left-sm: .25em !default;
+$avatar-button-padding-left-lg: .25em !default;

package/dist/AvatarButton/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["children", "className", "showLabel", "size", "src"];
+var _excluded = ["children", "className", "showLabel", "size", "src"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -7,25 +7,23 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Button from '../Button';
 import Avatar from '../Avatar';
-const buttonSizesToAvatarSize = {
+var buttonSizesToAvatarSize = {
   sm: 'xs',
   md: 'sm',
   lg: 'md'
 };
-const AvatarButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      className,
-      showLabel,
-      size,
-      src
-    } = _ref,
+var AvatarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    showLabel = _ref.showLabel,
+    size = _ref.size,
+    src = _ref.src,
     attrs = _objectWithoutProperties(_ref, _excluded);
-  const avatarSize = buttonSizesToAvatarSize[size] || 'sm';
+  var avatarSize = buttonSizesToAvatarSize[size] || 'sm';
   return /*#__PURE__*/React.createElement(Button, _extends({}, attrs, {
     className: classNames('btn-avatar',
     // the public class name for custom styling
-    'pgn__avatar-button-avatar', `pgn__avatar-button-avatar-${size}`, className, {
+    'pgn__avatar-button-avatar', "pgn__avatar-button-avatar-".concat(size), className, {
       'pgn__avatar-button-hide-label': !showLabel
     }),
     size: size,

package/dist/AvatarButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Button","Avatar","buttonSizesToAvatarSize","sm","md","lg","AvatarButton","forwardRef","_ref","ref","children","className","showLabel","size","src","attrs","_objectWithoutProperties","_excluded","avatarSize","createElement","_extends","alt","propTypes","string","bool","oneOf","variant","defaultProps","undefined"],"sources":["../../src/AvatarButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Button from '../Button';\nimport Avatar from '../Avatar';\n\nconst buttonSizesToAvatarSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n};\n\nconst AvatarButton = React.forwardRef(({\n  children,\n  className,\n  showLabel,\n  size,\n  src,\n  ...attrs\n}, ref) => {\n  const avatarSize = buttonSizesToAvatarSize[size] || 'sm';\n  return (\n    <Button\n      {...attrs}\n      className={classNames(\n        'btn-avatar', // the public class name for custom styling\n        'pgn__avatar-button-avatar',\n        `pgn__avatar-button-avatar-${size}`,\n        className,\n        { 'pgn__avatar-button-hide-label': !showLabel },\n      )}\n      size={size}\n      ref={ref}\n    >\n      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize} />\n      {showLabel && children}\n    </Button>\n  );\n});\n\nAvatarButton.propTypes = {\n  /** The button text */\n  children: PropTypes.string,\n  /** A class name to append to the button */\n  className: PropTypes.string,\n  /** Show the label or only the avatar */\n  showLabel: PropTypes.bool,\n  /** The button size */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n  /** The button style variant to use */\n  variant: PropTypes.string,\n};\n\nAvatarButton.defaultProps = {\n  children: undefined,\n  className: undefined,\n  showLabel: true,\n  size: 'md',\n  src: undefined,\n  variant: 'tertiary',\n};\n\nexport default AvatarButton;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,uBAAuB,GAAG;EAC9BC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC;AAED,MAAMC,YAAY,gBAAGT,KAAK,CAACU,UAAU,CAAC,CAAAC,IAAA,EAOnCC,GAAG,KAAK;EAAA,IAP4B;MACrCC,QAAQ;MACRC,SAAS;MACTC,SAAS;MACTC,IAAI;MACJC;IAEF,CAAC,GAAAN,IAAA;IADIO,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAER,MAAMC,UAAU,GAAGhB,uBAAuB,CAACW,IAAI,CAAC,IAAI,IAAI;EACxD,oBACEhB,KAAA,CAAAsB,aAAA,CAACnB,MAAM,EAAAoB,QAAA,KACDL,KAAK;IACTJ,SAAS,EAAEZ,UAAU,CACnB,YAAY;IAAE;IACd,2BAA2B,EAC1B,6BAA4Bc,IAAK,EAAC,EACnCF,SAAS,EACT;MAAE,+BAA+B,EAAE,CAACC;IAAU,CAChD,CAAE;IACFC,IAAI,EAAEA,IAAK;IACXJ,GAAG,EAAEA;EAAI,iBAETZ,KAAA,CAAAsB,aAAA,CAAClB,MAAM;IAACa,GAAG,EAAEA,GAAI;IAACO,GAAG,EAAET,SAAS,GAAG,EAAE,GAAGF,QAAS;IAACG,IAAI,EAAEK;EAAW,CAAE,CAAC,EACrEN,SAAS,IAAIF,QACR,CAAC;AAEb,CAAC,CAAC;AAEFJ,YAAY,CAACgB,SAAS,GAAG;EACvB;EACAZ,QAAQ,EAAEZ,SAAS,CAACyB,MAAM;EAC1B;EACAZ,SAAS,EAAEb,SAAS,CAACyB,MAAM;EAC3B;EACAX,SAAS,EAAEd,SAAS,CAAC0B,IAAI;EACzB;EACAX,IAAI,EAAEf,SAAS,CAAC2B,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACzC;EACAX,GAAG,EAAEhB,SAAS,CAACyB,MAAM;EACrB;EACAG,OAAO,EAAE5B,SAAS,CAACyB;AACrB,CAAC;AAEDjB,YAAY,CAACqB,YAAY,GAAG;EAC1BjB,QAAQ,EAAEkB,SAAS;EACnBjB,SAAS,EAAEiB,SAAS;EACpBhB,SAAS,EAAE,IAAI;EACfC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEc,SAAS;EACdF,OAAO,EAAE;AACX,CAAC;AAED,eAAepB,YAAY"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Button","Avatar","buttonSizesToAvatarSize","sm","md","lg","AvatarButton","forwardRef","_ref","ref","children","className","showLabel","size","src","attrs","_objectWithoutProperties","_excluded","avatarSize","createElement","_extends","concat","alt","propTypes","string","bool","oneOf","variant","defaultProps","undefined"],"sources":["../../src/AvatarButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Button from '../Button';\nimport Avatar from '../Avatar';\n\nconst buttonSizesToAvatarSize = {\n  sm: 'xs',\n  md: 'sm',\n  lg: 'md',\n};\n\nconst AvatarButton = React.forwardRef(({\n  children,\n  className,\n  showLabel,\n  size,\n  src,\n  ...attrs\n}, ref) => {\n  const avatarSize = buttonSizesToAvatarSize[size] || 'sm';\n  return (\n    <Button\n      {...attrs}\n      className={classNames(\n        'btn-avatar', // the public class name for custom styling\n        'pgn__avatar-button-avatar',\n        `pgn__avatar-button-avatar-${size}`,\n        className,\n        { 'pgn__avatar-button-hide-label': !showLabel },\n      )}\n      size={size}\n      ref={ref}\n    >\n      <Avatar src={src} alt={showLabel ? '' : children} size={avatarSize} />\n      {showLabel && children}\n    </Button>\n  );\n});\n\nAvatarButton.propTypes = {\n  /** The button text */\n  children: PropTypes.string,\n  /** A class name to append to the button */\n  className: PropTypes.string,\n  /** Show the label or only the avatar */\n  showLabel: PropTypes.bool,\n  /** The button size */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Image src of the avatar image */\n  src: PropTypes.string,\n  /** The button style variant to use */\n  variant: PropTypes.string,\n};\n\nAvatarButton.defaultProps = {\n  children: undefined,\n  className: undefined,\n  showLabel: true,\n  size: 'md',\n  src: undefined,\n  variant: 'tertiary',\n};\n\nexport default AvatarButton;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,MAAM,MAAM,WAAW;AAE9B,IAAMC,uBAAuB,GAAG;EAC9BC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC;AAED,IAAMC,YAAY,gBAAGT,KAAK,CAACU,UAAU,CAAC,UAAAC,IAAA,EAOnCC,GAAG,EAAK;EAAA,IANTC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,SAAS,GAAAJ,IAAA,CAATI,SAAS;IACTC,IAAI,GAAAL,IAAA,CAAJK,IAAI;IACJC,GAAG,GAAAN,IAAA,CAAHM,GAAG;IACAC,KAAK,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAER,IAAMC,UAAU,GAAGhB,uBAAuB,CAACW,IAAI,CAAC,IAAI,IAAI;EACxD,oBACEhB,KAAA,CAAAsB,aAAA,CAACnB,MAAM,EAAAoB,QAAA,KACDL,KAAK;IACTJ,SAAS,EAAEZ,UAAU,CACnB,YAAY;IAAE;IACd,2BAA2B,+BAAAsB,MAAA,CACER,IAAI,GACjCF,SAAS,EACT;MAAE,+BAA+B,EAAE,CAACC;IAAU,CAChD,CAAE;IACFC,IAAI,EAAEA,IAAK;IACXJ,GAAG,EAAEA;EAAI,iBAETZ,KAAA,CAAAsB,aAAA,CAAClB,MAAM;IAACa,GAAG,EAAEA,GAAI;IAACQ,GAAG,EAAEV,SAAS,GAAG,EAAE,GAAGF,QAAS;IAACG,IAAI,EAAEK;EAAW,CAAE,CAAC,EACrEN,SAAS,IAAIF,QACR,CAAC;AAEb,CAAC,CAAC;AAEFJ,YAAY,CAACiB,SAAS,GAAG;EACvB;EACAb,QAAQ,EAAEZ,SAAS,CAAC0B,MAAM;EAC1B;EACAb,SAAS,EAAEb,SAAS,CAAC0B,MAAM;EAC3B;EACAZ,SAAS,EAAEd,SAAS,CAAC2B,IAAI;EACzB;EACAZ,IAAI,EAAEf,SAAS,CAAC4B,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACzC;EACAZ,GAAG,EAAEhB,SAAS,CAAC0B,MAAM;EACrB;EACAG,OAAO,EAAE7B,SAAS,CAAC0B;AACrB,CAAC;AAEDlB,YAAY,CAACsB,YAAY,GAAG;EAC1BlB,QAAQ,EAAEmB,SAAS;EACnBlB,SAAS,EAAEkB,SAAS;EACpBjB,SAAS,EAAE,IAAI;EACfC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAEe,SAAS;EACdF,OAAO,EAAE;AACX,CAAC;AAED,eAAerB,YAAY"}

package/dist/AvatarButton/index.scss

@@ -1,12 +1,14 @@
+@import "variables";
+
 .btn.pgn__avatar-button-avatar {
-  padding-left: var(--pgn-spacing-avatar-button-padding-left-base);
+  padding-left: $avatar-button-padding-left;
 
   &.pgn__avatar-button-avatar-sm {
-    padding-left: var(--pgn-spacing-avatar-button-padding-left-sm);
+    padding-left: $avatar-button-padding-left-sm;
   }
 
   &.pgn__avatar-button-avatar-lg {
-    padding-left: var(--pgn-spacing-avatar-button-padding-left-lg);
+    padding-left: $avatar-button-padding-left-lg;
   }
 
   .pgn__avatar {