@openedx/paragon 22.4.0 → 23.0.0-alpha.1

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

package/src/Image/index.scss

@@ -1,2 +1,53 @@
-@import "variables";
-@import "~bootstrap/scss/images";
+@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));
+}
+

package/src/Menu/index.scss

@@ -1,28 +1,26 @@
-@import "variables";
-
 .pgn__menu {
-  border-radius: $menu-border-radius;
-  box-shadow: $menu-box-shadow;
-  background-color: $menu-bg;
+  border-radius: var(--pgn-size-menu-base-border-radius);
+  box-shadow: var(--pgn-elevation-menu-box-shadow);
+  background-color: var(--pgn-color-menu-bg);
   overflow: auto;
-  max-height: $menu-max-height;
+  max-height: var(--pgn-size-menu-base-max-height);
 
   .pgn__menu-item {
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    width: $menu-item-width;
-    color: $menu-item-color;
+    width: var(--pgn-size-menu-item-width-base);
+    color: var(--pgn-color-menu-item-color);
     text-align: center;
     vertical-align: middle;
     user-select: none;
-    background-color: $menu-item-bg;
-    border: $menu-item-border;
-    padding: $menu-item-padding-y $menu-item-padding-x;
-    height: $menu-item-height;
+    background-color: var(--pgn-color-menu-item-bg);
+    border: var(--pgn-size-menu-item-border-width) solid var(--pgn-color-menu-item-border);
+    padding: var(--pgn-spacing-menu-item-padding-y) var(--pgn-spacing-menu-item-padding-x);
+    height: var(--pgn-size-menu-item-height);
 
-    @media (max-width: $max-width-xs) {
-      width: $menu-item-width-xs;
+    @media (max-width: var(--pgn-size-container-max-width-xs)) {
+      width: var(--pgn-size-menu-item-width-xs);
     }
 
     .pgn__menu-item-text {
@@ -38,40 +36,40 @@
 
     @include hover {
       text-decoration: none;
-      color: $menu-item-hover-color;
-      border-color: $menu-item-hover-border-color;
-      background: $menu-item-hover-bg;
+      color: var(--pgn-color-menu-item-hover-color);
+      border-color: var(--pgn-color-menu-item-hover-border);
+      background: var(--pgn-color-menu-item-hover-bg);
     }
 
     // Disabled comes first so active can properly restyle
     &.disabled,
     &:disabled {
-      opacity: $btn-disabled-opacity;
+      opacity: var(--pgn-other-btn-disabled-opacity);
     }
 
     &.focus,
     &:focus {
-      font-weight: $font-weight-bolder;
-      background-color: $menu-item-focus-bg;
+      font-weight: var(--pgn-typography-font-weight-bolder);
+      background-color: var(--pgn-color-menu-item-focus-bg);
     }
 
     .btn-icon-before {
       margin-inline-end: .5rem;
-      margin-left: calc(#{$menu-item-icon-margin-left} * -1);
+      margin-left: calc(var(--pgn-spacing-menu-item-icon-margin-left) * -1);
 
       [dir="rtl"] & {
-        margin-right: calc(#{$menu-item-icon-margin-right} * -1);
+        margin-right: calc(var(--pgn-spacing-menu-item-icon-margin-right) * -1);
         margin-left: .5rem;
       }
     }
 
     .btn-icon-after {
       margin-inline-start: .5rem;
-      margin-right: calc(#{$menu-item-icon-margin-right} * -1);
+      margin-right: calc(var(--pgn-spacing-menu-item-icon-margin-right) * -1);
 
       [dir="rtl"] & {
         margin-right: .5rem;
-        margin-left: calc(#{$menu-item-icon-margin-left} * -1);
+        margin-left: calc(var(--pgn-spacing-menu-item-icon-margin-left) * -1);
       }
     }
 
@@ -89,12 +87,12 @@
 
 .pgn__menu-select {
   .btn.btn-link {
-    color: $menu-select-btn-link-color;
+    color: var(--pgn-color-menu-select-btn-link-color);
 
     &:hover,
     &:focus {
-      text-decoration-line: $menu-select-btn-link-text-decoration-line;
-      text-decoration-thickness: $menu-select-btn-link-text-decoration-thickness;
+      text-decoration-line: var(--pgn-typography-menu-select-btn-link-text-decoration-line);
+      text-decoration-thickness: var(--pgn-typography-menu-select-btn-link-text-decoration-thickness);
     }
   }