@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/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/src/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/src/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/src/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";

package/src/Input/README.md

@@ -0,0 +1,74 @@
+---
+title: 'Input'
+type: 'component'
+components:
+- Input
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: |
+  Replaced by Form.Control
+---
+
+A component for all user input. It is responsible for rendering select, textarea, and inputs of any type with the appropriate bootstrap class name.
+
+Extra props supplied to Input will be passed through to the html node.
+
+## Text
+
+```jsx live
+<Input type="text" defaultValue="Some text input" />
+```
+
+## Select
+
+```jsx live
+<Input
+  type="select"
+  defaultValue="Foo Bar"
+  options={[
+    { value: 'Foo Bar', label: 'Foo Bar' },
+    { value: 'Foos Bar', label: 'Bar foo' },
+    { value: 'Foo sBar', label: 'FoBaro' },
+    { value: 'Foo ssBar', label: 'Farboo' },
+    {
+      label: 'But there is more',
+      group: [
+        { value: 'vFoo Bar', label: 'Foov Bar' },
+        { value: 'vFoos Bar', label: 'Barv foo' },
+        { value: 'vFoo sBar', label: 'FoBarov' },
+        { value: 'vFoo ssBar', label: 'Farboov' },
+      ],
+    },
+  ]}
+/>
+```
+
+## Textarea
+
+```jsx live
+<Input
+  type="textarea"
+  defaultValue="Hammock semiotics pok pok jianbing venmo, crucifix taiyaki stumptown irony ennui knausgaard bitters synth slow-carb iPhone."
+/>
+```
+
+## Date
+
+```jsx live
+<Input type="date" />
+```
+
+### File
+
+```jsx live
+<Input type="file" />
+```
+
+### Range
+
+```jsx live
+<Input type="range" />
+```