@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/IconButton/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin btn-icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+}

package/dist/IconButton/index.js

@@ -10,7 +10,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Icon from '../Icon';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -28,12 +28,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     attrs = _objectWithoutProperties(_ref, _excluded);
   var invert = invertColors ? 'inverse-' : '';
   var activeStyle = isActive ? "".concat(variant, "-") : '';
-  if (!iconAs && process.env.NODE_ENV === 'development' && console) {
-    var msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and ' + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon ' + 'as Paragon is moving away from FontAwesome, please use Paragon\'s icons instead.';
-    // eslint-disable-next-line no-console
-    console.warn(msg);
-  }
-  var IconComponent = iconAs || FontAwesomeIcon;
+  var IconComponent = iconAs;
   return /*#__PURE__*/React.createElement("button", _extends({
     "aria-label": alt,
     className: classNames('btn-icon', "btn-icon-".concat(invert).concat(variant), "btn-icon-".concat(size), _defineProperty({}, "btn-icon-".concat(invert).concat(activeStyle, "active"), isActive), className),
@@ -49,7 +44,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   })));
 });
 IconButton.defaultProps = {
-  iconAs: undefined,
+  iconAs: Icon,
   src: null,
   icon: undefined,
   iconClassNames: undefined,
@@ -63,8 +58,7 @@ IconButton.defaultProps = {
 IconButton.propTypes = {
   /** A custom class name. */
   className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
-   *  but is going to be deprecated soon, please use Paragon's icons instead. */
+  /** Component that renders the icon, currently defaults to `Icon` */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
    * `import { Check } from '@openedx/paragon/dist/icon';`
@@ -76,7 +70,7 @@ IconButton.propTypes = {
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a React fontawesome icon. */
+  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport Icon from '../Icon';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}

package/dist/IconButton/index.scss

@@ -1,76 +1,38 @@
-$icon-button-colors: (
-  "primary": $primary,
-  "secondary": $secondary,
-  "brand": $brand,
-  "success": $success,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $light,
-  "dark": $dark,
-  "black": $black,
-) !default;
-$btn-icon-diameter-md: 2.75rem !default;
-$btn-icon-diameter-sm: 2.25rem !default;
-$btn-icon-diameter-inline: calc(#{$line-height-base}em + .1em) !default;
-
-$btn-icon-bg: transparent !default;
-$btn-icon-accent-color: white !default;
-
-@mixin btn-icon-size($icon-size) {
-  width: $icon-size;
-  height: $icon-size;
-}
-
-@mixin btn-icon-variant($icon-color, $accent-color, $active-state: false) {
-  &.hover,
-  &:hover,
-  &.active,
-  &:active {
-    background-color: $icon-color;
-    color: $accent-color;
-  }
-
-  @if $active-state {
-    background-color: $icon-color;
-    color: $accent-color;
-
-    &.focus,
-    &:focus {
-      outline: 2px transparent;
-      background-color: $icon-color;
-      color: $accent-color;
-    }
-  }
-
-  @else {
-    background-color: $btn-icon-bg;
-    color: $icon-color;
-
-    &.focus,
-    &:focus {
-      outline: 2px transparent;
-      background-color: $btn-icon-bg;
-      color: $icon-color;
-      box-shadow: inset 0 0 0 $btn-focus-width $icon-color;
-    }
-  }
-}
+@import "mixins";
 
 .btn-icon {
-  @include btn-icon-size($btn-icon-diameter-md);
+  @include btn-icon-size(var(--pgn-size-icon-button-diameter-md));
 
   border-radius: 50%;
   padding: 0;
   display: inline-flex;
   justify-content: center;
   border: none;
+  background-color: var(--btn-icon-bg-color, var(--pgn-color-icon-button-bg));
+  color: var(--btn-icon-color, var(--pgn-color-icon-button-accent));
+
+  &.hover,
+  &:hover,
+  &.active,
+  &:active {
+    background-color: var(--btn-icon-hover-bg-color, inherit);
+    color: var(--btn-icon-hover-color, inherit);
+  }
+
+  &.focus,
+  &:focus {
+    outline: 2px transparent;
+    background-color: var(--btn-icon-focus-bg-color, var(--pgn-color-icon-button-bg));
+    color: var(--btn-icon-focus-color, (--pgn-color-icon-button-accent));
+    box-shadow: var(--btn-icon-box-shadow, none);
+  }
 
   &.btn-icon-sm {
-    @include btn-icon-size($btn-icon-diameter-sm);
+    @include btn-icon-size(var(--pgn-size-icon-button-diameter-sm));
   }
 
   &.btn-icon-inline {
-    @include btn-icon-size($btn-icon-diameter-inline);
+    @include btn-icon-size(var(--pgn-size-icon-button-diameter-inline));
 
     padding: 1em;
     vertical-align: middle;
@@ -100,25 +62,376 @@ $btn-icon-accent-color: white !default;
 
   &.disabled,
   &:disabled {
-    opacity: $btn-disabled-opacity;
+    opacity: var(--pgn-other-btn-disabled-opacity);
     pointer-events: none;
   }
 
-  @each $name, $color in $icon-button-colors {
-    &.btn-icon-#{$name} {
-      @include btn-icon-variant($color, $btn-icon-accent-color);
-    }
+  // PRIMARY
+  &.btn-icon-primary {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-primary-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-base);
+  }
 
-    &.btn-icon-inverse-#{$name} {
-      @include btn-icon-variant($btn-icon-accent-color, $color);
-    }
+  &.btn-icon-inverse-primary {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse);
+  }
 
-    &.btn-icon-#{$name}-active {
-      @include btn-icon-variant($color, $btn-icon-accent-color, true);
-    }
+  &.btn-icon-primary-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-primary-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-active);
+  }
 
-    &.btn-icon-inverse-#{$name}-active {
-      @include btn-icon-variant($btn-icon-accent-color, $color, true);
-    }
+  &.btn-icon-inverse-primary-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-primary-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-primary-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-primary-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-primary-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-primary-inverse-active);
+  }
+
+  // SECONDARY
+  &.btn-icon-secondary {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-secondary-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-base);
+  }
+
+  &.btn-icon-inverse-secondary {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse);
+  }
+
+  &.btn-icon-secondary-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-secondary-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-active);
+  }
+
+  &.btn-icon-inverse-secondary-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-secondary-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-secondary-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-secondary-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-secondary-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-secondary-inverse-active);
+  }
+
+  // BRAND
+  &.btn-icon-brand {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-brand-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-base);
+  }
+
+  &.btn-icon-inverse-brand {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse);
+  }
+
+  &.btn-icon-brand-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-brand-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-active);
+  }
+
+  &.btn-icon-inverse-brand-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-brand-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-brand-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-brand-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-brand-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-brand-inverse-active);
+  }
+
+  // SUCCESS
+  &.btn-icon-success {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-success-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-base);
+  }
+
+  &.btn-icon-inverse-success {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse);
+  }
+
+  &.btn-icon-success-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-success-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-active);
+  }
+
+  &.btn-icon-inverse-success-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-success-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-success-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-success-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-success-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-success-inverse-active);
+  }
+
+  // WARNING
+  &.btn-icon-warning {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-warning-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-base);
+  }
+
+  &.btn-icon-inverse-warning {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse);
+  }
+
+  &.btn-icon-warning-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-warning-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-active);
+  }
+
+  &.btn-icon-inverse-warning-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-warning-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-warning-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-warning-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-warning-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-warning-inverse-active);
+  }
+
+  // DANGER
+  &.btn-icon-danger {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-danger-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-base);
+  }
+
+  &.btn-icon-inverse-danger {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse);
+  }
+
+  &.btn-icon-danger-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-danger-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-active);
+  }
+
+  &.btn-icon-inverse-danger-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-danger-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-danger-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-danger-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-danger-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-danger-inverse-active);
+  }
+
+  // LIGHT
+  &.btn-icon-light {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-light-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-base);
+  }
+
+  &.btn-icon-inverse-light {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse);
+  }
+
+  &.btn-icon-light-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-light-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-active);
+  }
+
+  &.btn-icon-inverse-light-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-light-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-light-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-light-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-light-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-light-inverse-active);
+  }
+
+  // DARK
+  &.btn-icon-dark {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-dark-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-base);
+  }
+
+  &.btn-icon-inverse-dark {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse);
+  }
+
+  &.btn-icon-dark-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-dark-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-active);
+  }
+
+  &.btn-icon-inverse-dark-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-dark-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-dark-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-dark-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-dark-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-dark-inverse-active);
+  }
+
+  // BLACK
+  &.btn-icon-black {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-black-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-base);
+  }
+
+  &.btn-icon-inverse-black {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-inverse-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-inverse-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-inverse-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse);
+  }
+
+  &.btn-icon-black-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-black-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-active);
+  }
+
+  &.btn-icon-inverse-black-active {
+    --btn-icon-hover-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-hover);
+    --btn-icon-hover-color: var(--pgn-color-icon-button-text-black-inverse-active-hover);
+    --btn-icon-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-base);
+    --btn-icon-color: var(--pgn-color-icon-button-text-black-inverse-active-base);
+    --btn-icon-focus-bg-color: var(--pgn-color-icon-button-bg-black-inverse-active-focus);
+    --btn-icon-focus-color: var(--pgn-color-icon-button-text-black-inverse-active-focus);
+    --btn-icon-box-shadow: var(--pgn-elevation-icon-button-box-shadow-black-inverse-active);
   }
 }

package/dist/IconButtonToggle/index.scss

@@ -2,6 +2,6 @@
   display: flex;
 
   .btn-icon + .btn-icon {
-    margin-inline-start: map_get($spacers, 1);
+    margin-inline-start: var(--pgn-spacing-spacer-1);
   }
 }