@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/dist/IconButton/index.scss

@@ -1,38 +1,76 @@
-@import "mixins";
-
-.btn-icon {
-  @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));
+$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: var(--btn-icon-hover-bg-color, inherit);
-    color: var(--btn-icon-hover-color, inherit);
+    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;
+    }
   }
 
-  &.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);
+  @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;
+    }
   }
+}
+
+.btn-icon {
+  @include btn-icon-size($btn-icon-diameter-md);
+
+  border-radius: 50%;
+  padding: 0;
+  display: inline-flex;
+  justify-content: center;
+  border: none;
 
   &.btn-icon-sm {
-    @include btn-icon-size(var(--pgn-size-icon-button-diameter-sm));
+    @include btn-icon-size($btn-icon-diameter-sm);
   }
 
   &.btn-icon-inline {
-    @include btn-icon-size(var(--pgn-size-icon-button-diameter-inline));
+    @include btn-icon-size($btn-icon-diameter-inline);
 
     padding: 1em;
     vertical-align: middle;
@@ -62,376 +100,25 @@
 
   &.disabled,
   &:disabled {
-    opacity: var(--pgn-other-btn-disabled-opacity);
+    opacity: $btn-disabled-opacity;
     pointer-events: none;
   }
 
-  // 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-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-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-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);
-  }
+  @each $name, $color in $icon-button-colors {
+    &.btn-icon-#{$name} {
+      @include btn-icon-variant($color, $btn-icon-accent-color);
+    }
 
-  &.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-inverse-#{$name} {
+      @include btn-icon-variant($btn-icon-accent-color, $color);
+    }
 
-  &.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-#{$name}-active {
+      @include btn-icon-variant($color, $btn-icon-accent-color, true);
+    }
 
-  &.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);
+    &.btn-icon-inverse-#{$name}-active {
+      @include btn-icon-variant($btn-icon-accent-color, $color, true);
+    }
   }
 }

package/dist/IconButtonToggle/index.js

@@ -12,28 +12,28 @@ import PropTypes from 'prop-types';
  * @returns {React.Component} A React component
  */
 function IconButtonToggle(_ref) {
-  let {
-    activeValue,
-    onChange,
-    children
-  } = _ref;
-  const iconButtons = useMemo(() => React.Children.map(children, iconButton => {
-    const isActive = iconButton.props.value === activeValue;
-    return /*#__PURE__*/React.cloneElement(iconButton, {
-      onClick: () => {
-        onChange(iconButton.props.value);
-      },
-      isActive,
-      'aria-selected': isActive,
-      'data-testid': `icon-btn-val-${iconButton.props.value}`
+  var activeValue = _ref.activeValue,
+    onChange = _ref.onChange,
+    children = _ref.children;
+  var iconButtons = useMemo(function () {
+    return React.Children.map(children, function (iconButton) {
+      var isActive = iconButton.props.value === activeValue;
+      return /*#__PURE__*/React.cloneElement(iconButton, {
+        onClick: function onClick() {
+          onChange(iconButton.props.value);
+        },
+        isActive: isActive,
+        'aria-selected': isActive,
+        'data-testid': "icon-btn-val-".concat(iconButton.props.value)
+      });
     });
-  }), [children, activeValue, onChange]);
+  }, [children, activeValue, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: "pgn__icon-button-toggle__container"
   }, iconButtons);
 }
 IconButtonToggle.defaultProps = {
-  onChange: () => {},
+  onChange: function onChange() {},
   activeValue: undefined
 };
 IconButtonToggle.propTypes = {

package/dist/IconButtonToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","_ref","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {boolean} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAAC,IAAA,EAAsC;EAAA,IAArC;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAH,IAAA;EAC3D,MAAMI,WAAW,GAAGP,OAAO,CACzB,MAAMD,KAAK,CAACS,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAEI,UAAU,IAAI;IAC/C,MAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;IACvD,oBAAOL,KAAK,CAACe,YAAY,CAACJ,UAAU,EAAE;MACpCK,OAAO,EAAEA,CAAA,KAAM;QAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;MAAE,CAAC;MACpDF,QAAQ;MACR,eAAe,EAAEA,QAAQ;MACzB,aAAa,EAAG,gBAAeD,UAAU,CAACE,KAAK,CAACC,KAAM;IACxD,CAAC,CAAC;EACJ,CAAC,CAAC,EACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAON,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEV,WAAiB,CAAC;AAChF;AAEAL,gBAAgB,CAACgB,YAAY,GAAG;EAC9Bb,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBD,WAAW,EAAEe;AACf,CAAC;AAEDjB,gBAAgB,CAACkB,SAAS,GAAG;EAC3B;EACAhB,WAAW,EAAEH,SAAS,CAACoB,MAAM;EAC7B;EACAhB,QAAQ,EAAEJ,SAAS,CAACqB,IAAI;EACxB;EACAhB,QAAQ,EAAEL,SAAS,CAACsB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAetB,gBAAgB"}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","_ref","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","concat","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {boolean} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAAC,IAAA,EAAsC;EAAA,IAAnCC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAEC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;EACzD,IAAMC,WAAW,GAAGP,OAAO,CACzB;IAAA,OAAMD,KAAK,CAACS,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAE,UAAAI,UAAU,EAAI;MAC/C,IAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;MACvD,oBAAOL,KAAK,CAACe,YAAY,CAACJ,UAAU,EAAE;QACpCK,OAAO,EAAE,SAAAA,QAAA,EAAM;UAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;QAAE,CAAC;QACpDF,QAAQ,EAARA,QAAQ;QACR,eAAe,EAAEA,QAAQ;QACzB,aAAa,kBAAAK,MAAA,CAAkBN,UAAU,CAACE,KAAK,CAACC,KAAK;MACvD,CAAC,CAAC;IACJ,CAAC,CAAC;EAAA,GACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAON,KAAA,CAAAkB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEX,WAAiB,CAAC;AAChF;AAEAL,gBAAgB,CAACiB,YAAY,GAAG;EAC9Bd,QAAQ,EAAE,SAAAA,SAAA,EAAM,CAAC,CAAC;EAClBD,WAAW,EAAEgB;AACf,CAAC;AAEDlB,gBAAgB,CAACmB,SAAS,GAAG;EAC3B;EACAjB,WAAW,EAAEH,SAAS,CAACqB,MAAM;EAC7B;EACAjB,QAAQ,EAAEJ,SAAS,CAACsB,IAAI;EACxB;EACAjB,QAAQ,EAAEL,SAAS,CAACuB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAevB,gBAAgB"}

package/dist/IconButtonToggle/index.scss

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

package/dist/Image/_variables.scss

@@ -0,0 +1,13 @@
+// Image thumbnails
+
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      $body-bg !default;
+$thumbnail-border-width:            $border-width !default;
+$thumbnail-border-color:            theme-color("gray", "border") !default;
+$thumbnail-border-radius:           $border-radius !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+
+// Figures
+
+$figure-caption-font-size:          90% !default;
+$figure-caption-color:              theme-color("gray", "light-text") !default;

package/dist/Image/index.scss

@@ -1,53 +1,2 @@
-@mixin img-fluid() {
-  // Part 1: Set a maximum relative to the parent
-  max-width: 100%;
-  // Part 2: Override the height to auto, otherwise images will be stretched
-  // when setting a width and height attribute on the img element.
-  height: auto;
-}
-
-// Responsive images (ensure images don't scale beyond their parents)
-//
-// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
-// which weren't expecting the images within themselves to be involuntarily resized.
-// See also https://github.com/twbs/bootstrap/issues/18178
-.img-fluid {
-  @include img-fluid();
-}
-
-
-// Image thumbnails
-.img-thumbnail {
-  padding: var(--pgn-spacing-image-thumbnail-padding);
-  background-color: var(--pgn-color-image-thumbnail-bg);
-  border: var(--pgn-size-image-thumbnail-border-width) solid var(--pgn-color-image-thumbnail-border);
-  box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow);
-
-  @include border-radius(var(--pgn-size-image-thumbnail-border-radius));
-
-  // Keep them at most 100% wide
-  @include img-fluid();
-}
-
-//
-// Figures
-//
-
-.figure {
-  // Ensures the caption's text aligns with the image.
-  display: inline-block;
-}
-
-.figure-img {
-  margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5);
-  line-height: 1;
-}
-
-.figure-caption {
-  color: var(--pgn-color-image-figure-caption);
-
-  @include font-size(var(--pgn-typography-image-figure-caption-font-size));
-}
-
+@import "variables";
+@import "~bootstrap/scss/images";