vanilla-framework 4.6.0 → 4.8.0

package/scss/_patterns_icons.scss

@@ -2,6 +2,9 @@
 
 @mixin vf-p-icons {
   @include vf-p-icons-common;
+  @include vf-p-icon-sizes;
+
+  // core icons
   @include vf-p-icon-anchor;
   @include vf-p-icon-plus;
   @include vf-p-icon-minus;
@@ -26,6 +29,10 @@
   @include vf-p-icon-share;
   @include vf-p-icon-user;
   @include vf-p-icon-spinner;
+  @include vf-p-icon-show;
+  @include vf-p-icon-hide;
+
+  // social icons
   @include vf-p-icon-facebook;
   @include vf-p-icon-github;
   @include vf-p-icon-twitter;
@@ -34,12 +41,16 @@
   @include vf-p-icon-youtube;
   @include vf-p-icon-rss;
   @include vf-p-icon-email;
-  @include vf-p-icon-sizes;
-  @include vf-p-icon-show;
-  @include vf-p-icon-hide;
 }
 
 @mixin vf-p-icons-common {
+  // backwards compatibility for dark themed icons in --dark strips and with is-light class name
+  // DEPRECATED: use is-dark instead
+  [class*='--dark'] [class*='p-icon--'],
+  [class*='p-icon--'].is-light {
+    @include vf-theme-dark;
+  }
+
   // stylelint-disable selector-max-type
   h1,
   .p-heading--1,
@@ -85,60 +96,35 @@
 @mixin vf-p-icon-anchor {
   .p-icon--anchor {
     @extend %icon;
-    @include vf-icon-anchor($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-anchor($color-x-light);
-    }
+    @include vf-icon-anchor-themed;
   }
 }
 
 @mixin vf-p-icon-plus {
   .p-icon--plus {
     @extend %icon;
-    @include vf-icon-plus($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-plus($color-x-light);
-    }
+    @include vf-icon-plus-themed;
   }
 }
 
 @mixin vf-p-icon-minus {
   .p-icon--minus {
     @extend %icon;
-    @include vf-icon-minus($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-minus($color-x-light);
-    }
+    @include vf-icon-minus-themed;
   }
 }
 
 @mixin vf-p-icon-expand {
   .p-icon--expand {
     @extend %icon;
-    @include vf-icon-expand($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-expand($color-x-light);
-    }
+    @include vf-icon-expand-themed;
   }
 }
 
 @mixin vf-p-icon-collapse {
   .p-icon--collapse {
     @extend %icon;
-    @include vf-icon-collapse($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-collapse($color-x-light);
-    }
+    @include vf-icon-collapse-themed;
   }
 }
 
@@ -150,24 +136,14 @@
   .p-icon--chevron-down,
   .p-icon--chevron-up {
     @extend %icon;
-    @include vf-icon-chevron($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-chevron($color-x-light);
-    }
+    @include vf-icon-chevron-themed;
   }
 }
 
 @mixin vf-p-icon-close {
   .p-icon--close {
     @extend %icon;
-    @include vf-icon-close($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-close($color-x-light);
-    }
+    @include vf-icon-close-themed;
   }
 }
 
@@ -175,165 +151,133 @@
   .p-icon--help,
   .p-icon--question {
     @extend %icon;
-    @include vf-icon-help($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-help($color-x-light);
-    }
+    @include vf-icon-help-themed;
   }
 }
 
 @mixin vf-p-icon-info {
   .p-icon--information {
     @extend %icon;
-    @include vf-icon-info($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-info($color-x-light);
-    }
+    @include vf-icon-info-themed;
   }
 }
 
 @mixin vf-p-icon-delete {
   .p-icon--delete {
     @extend %icon;
-    @include vf-icon-delete($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-delete($color-x-light);
-    }
+    @include vf-icon-delete-themed;
   }
 }
 
 @mixin vf-p-icon-error {
   .p-icon--error {
     @extend %icon;
-    @include vf-icon-error($color-negative);
+    @include vf-icon-error-themed;
   }
 }
 
 @mixin vf-p-icon-warning {
   .p-icon--warning {
     @extend %icon;
-    @include vf-icon-warning($color-caution);
+    @include vf-icon-warning-themed;
   }
 }
 
 @mixin vf-p-icon-external-link {
   .p-icon--external-link {
     @extend %icon;
-    @include vf-icon-external-link($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-external-link($color-x-light);
-    }
+    @include vf-icon-external-link-themed;
   }
 }
 
 @mixin vf-p-icon-drag {
   .p-icon--drag {
     @extend %icon;
-    @include vf-icon-drag($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-drag($color-x-light);
-    }
+    @include vf-icon-drag-themed;
   }
 }
 
 @mixin vf-p-icon-code {
   .p-icon--code {
     @extend %icon;
-    @include vf-icon-code($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-code($color-x-light);
-    }
+    @include vf-icon-code-themed;
   }
 }
 
 @mixin vf-p-icon-menu {
   .p-icon--menu {
     @extend %icon;
-    @include vf-icon-menu($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-menu($color-x-light);
-    }
+    @include vf-icon-menu-themed;
   }
 }
 
 @mixin vf-p-icon-copy {
   .p-icon--copy {
     @extend %icon;
-    @include vf-icon-copy($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-copy($color-x-light);
-    }
+    @include vf-icon-copy-themed;
   }
 }
 
 @mixin vf-p-icon-search {
   .p-icon--search {
     @extend %icon;
-    @include vf-icon-search($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-search($color-x-light);
-    }
+    @include vf-icon-search-themed;
   }
 }
 
 @mixin vf-p-icon-success {
   .p-icon--success {
     @extend %icon;
-    @include vf-icon-success($color-positive);
+    @include vf-icon-success-themed;
   }
 }
 
 @mixin vf-p-icon-share {
   .p-icon--share {
     @extend %icon;
-    @include vf-icon-share($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-share($color-x-light);
-    }
+    @include vf-icon-share-themed;
   }
 }
 
 @mixin vf-p-icon-user {
   .p-icon--user {
     @extend %icon;
-    @include vf-icon-user($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-user($color-x-light);
-    }
+    @include vf-icon-user-themed;
   }
 }
 
 @mixin vf-p-icon-spinner {
   .p-icon--spinner {
     @extend %icon;
-    @include vf-icon-spinner($color-mid-dark);
+    @include vf-icon-spinner-themed;
+  }
+}
 
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-spinner($color-x-light);
-    }
+@mixin vf-p-icon-show {
+  .p-icon--show {
+    @extend %icon;
+    @include vf-icon-show-themed;
+  }
+}
+
+@mixin vf-p-icon-hide {
+  .p-icon--hide {
+    @extend %icon;
+    @include vf-icon-hide-themed;
+  }
+}
+
+@mixin vf-p-icon-success-grey {
+  .p-icon--success-grey {
+    @extend %icon;
+    @include vf-icon-success-grey-themed;
+  }
+}
+
+@mixin vf-p-icon-error-grey {
+  .p-icon--error-grey {
+    @extend %icon;
+    @include vf-icon-error-grey-themed;
   }
 }
 
@@ -347,14 +291,14 @@
 @mixin vf-p-icon-github {
   .p-icon--github {
     @extend %social-icon;
-    @include vf-icon-github;
+    @include vf-icon-github-themed;
   }
 }
 
 @mixin vf-p-icon-twitter {
   .p-icon--twitter {
     @extend %social-icon;
-    @include vf-icon-twitter;
+    @include vf-icon-twitter-themed;
   }
 }
 
@@ -414,11 +358,14 @@
 @mixin vf-p-icon-applications {
   .p-icon--applications {
     @extend %icon;
-    @include vf-icon-applications($color-mid-dark);
+    @include vf-icon-applications($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-applications($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-applications($colors--dark-theme--icon);
     }
   }
 }
@@ -426,11 +373,14 @@
 @mixin vf-p-icon-controllers {
   .p-icon--controllers {
     @extend %icon;
-    @include vf-icon-controllers($color-mid-dark);
+    @include vf-icon-controllers($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-controllers($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-controllers($colors--dark-theme--icon);
     }
   }
 }
@@ -438,11 +388,14 @@
 @mixin vf-p-icon-fullscreen {
   .p-icon--fullscreen {
     @extend %icon;
-    @include vf-icon-fullscreen($color-mid-dark);
+    @include vf-icon-fullscreen($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-fullscreen($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-fullscreen($colors--dark-theme--icon);
     }
   }
 }
@@ -450,11 +403,14 @@
 @mixin vf-p-icon-models {
   .p-icon--models {
     @extend %icon;
-    @include vf-icon-models($color-mid-dark);
+    @include vf-icon-models($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-models($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-models($colors--dark-theme--icon);
     }
   }
 }
@@ -462,11 +418,14 @@
 @mixin vf-p-icon-machines {
   .p-icon--machines {
     @extend %icon;
-    @include vf-icon-machines($color-mid-dark);
+    @include vf-icon-machines($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-machines($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-machines($colors--dark-theme--icon);
     }
   }
 }
@@ -474,11 +433,14 @@
 @mixin vf-p-icon-pin {
   .p-icon--pin {
     @extend %icon;
-    @include vf-icon-pin($color-mid-dark);
+    @include vf-icon-pin($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-pin($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-pin($colors--dark-theme--icon);
     }
   }
 }
@@ -486,11 +448,14 @@
 @mixin vf-p-icon-units {
   .p-icon--units {
     @extend %icon;
-    @include vf-icon-units($color-mid-dark);
+    @include vf-icon-units($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-units($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-units($colors--dark-theme--icon);
     }
   }
 }
@@ -500,11 +465,14 @@
 @mixin vf-p-icon-priority-critical {
   .p-icon--priority-critical {
     @extend %icon;
-    @include vf-icon-priority-critical($color-mid-dark);
+    @include vf-icon-priority-critical($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-critical($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-critical($colors--dark-theme--icon);
     }
   }
 }
@@ -512,11 +480,14 @@
 @mixin vf-p-icon-priority-high {
   .p-icon--priority-high {
     @extend %icon;
-    @include vf-icon-priority-high($color-mid-dark);
+    @include vf-icon-priority-high($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-high($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-high($colors--dark-theme--icon);
     }
   }
 }
@@ -524,11 +495,14 @@
 @mixin vf-p-icon-priority-low {
   .p-icon--priority-low {
     @extend %icon;
-    @include vf-icon-priority-low($color-mid-dark);
+    @include vf-icon-priority-low($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-low($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-low($colors--dark-theme--icon);
     }
   }
 }
@@ -536,11 +510,14 @@
 @mixin vf-p-icon-priority-medium {
   .p-icon--priority-medium {
     @extend %icon;
-    @include vf-icon-priority-medium($color-mid-dark);
+    @include vf-icon-priority-medium($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-medium($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-medium($colors--dark-theme--icon);
     }
   }
 }
@@ -548,11 +525,14 @@
 @mixin vf-p-icon-priority-negligible {
   .p-icon--priority-negligible {
     @extend %icon;
-    @include vf-icon-priority-negligible($color-mid-dark);
+    @include vf-icon-priority-negligible($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-negligible($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-negligible($colors--dark-theme--icon);
     }
   }
 }
@@ -560,11 +540,14 @@
 @mixin vf-p-icon-priority-unknown {
   .p-icon--priority-unknown {
     @extend %icon;
-    @include vf-icon-priority-unknown($color-mid-dark);
+    @include vf-icon-priority-unknown($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-priority-unknown($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-priority-unknown($colors--dark-theme--icon);
     }
   }
 }
@@ -572,11 +555,14 @@
 @mixin vf-p-icon-add-canvas {
   .p-icon--add-canvas {
     @extend %icon;
-    @include vf-icon-add-canvas($color-mid-dark);
+    @include vf-icon-add-canvas($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-add-canvas($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-add-canvas($colors--dark-theme--icon);
     }
   }
 }
@@ -584,11 +570,14 @@
 @mixin vf-p-icon-add-logical-volume {
   .p-icon--add-logical-volume {
     @extend %icon;
-    @include vf-icon-add-logical-volume($color-mid-dark);
+    @include vf-icon-add-logical-volume($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-add-logical-volume($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-add-logical-volume($colors--dark-theme--icon);
     }
   }
 }
@@ -596,11 +585,14 @@
 @mixin vf-p-icon-add-partition {
   .p-icon--add-partition {
     @extend %icon;
-    @include vf-icon-add-partition($color-mid-dark);
+    @include vf-icon-add-partition($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-add-partition($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-add-partition($colors--dark-theme--icon);
     }
   }
 }
@@ -608,11 +600,14 @@
 @mixin vf-p-icon-back-to-top {
   .p-icon--back-to-top {
     @extend %icon;
-    @include vf-icon-back-to-top($color-mid-dark);
+    @include vf-icon-back-to-top($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-back-to-top($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-back-to-top($colors--dark-theme--icon);
     }
   }
 }
@@ -620,11 +615,14 @@
 @mixin vf-p-icon-begin-downloading {
   .p-icon--begin-downloading {
     @extend %icon;
-    @include vf-icon-begin-downloading($color-mid-dark);
+    @include vf-icon-begin-downloading($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-begin-downloading($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-begin-downloading($colors--dark-theme--icon);
     }
   }
 }
@@ -632,11 +630,14 @@
 @mixin vf-p-icon-bundle {
   .p-icon--bundle {
     @extend %icon;
-    @include vf-icon-bundle($color-mid-dark);
+    @include vf-icon-bundle($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-bundle($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-bundle($colors--dark-theme--icon);
     }
   }
 }
@@ -644,11 +645,14 @@
 @mixin vf-p-icon-canvas {
   .p-icon--canvas {
     @extend %icon;
-    @include vf-icon-canvas($color-mid-dark);
+    @include vf-icon-canvas($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-canvas($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-canvas($colors--dark-theme--icon);
     }
   }
 }
@@ -656,11 +660,14 @@
 @mixin vf-p-icon-change-version {
   .p-icon--change-version {
     @extend %icon;
-    @include vf-icon-change-version($color-mid-dark);
+    @include vf-icon-change-version($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-change-version($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-change-version($colors--dark-theme--icon);
     }
   }
 }
@@ -668,11 +675,14 @@
 @mixin vf-p-icon-comments {
   .p-icon--comments {
     @extend %icon;
-    @include vf-icon-comments($color-mid-dark);
+    @include vf-icon-comments($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-comments($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-comments($colors--dark-theme--icon);
     }
   }
 }
@@ -680,11 +690,14 @@
 @mixin vf-p-icon-conflict-grey {
   .p-icon--conflict-grey {
     @extend %icon;
-    @include vf-icon-conflict-grey($color-mid-dark);
+    @include vf-icon-conflict-grey($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-conflict-grey($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-conflict-grey($colors--dark-theme--icon);
     }
   }
 }
@@ -692,11 +705,14 @@
 @mixin vf-p-icon-conflict-resolution-grey {
   .p-icon--conflict-resolution-grey {
     @extend %icon;
-    @include vf-icon-conflict-resolution-grey($color-mid-dark);
+    @include vf-icon-conflict-resolution-grey($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-conflict-resolution-grey($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-conflict-resolution-grey($colors--dark-theme--icon);
     }
   }
 }
@@ -704,11 +720,14 @@
 @mixin vf-p-icon-conflict-resolution {
   .p-icon--conflict-resolution {
     @extend %icon;
-    @include vf-icon-conflict-resolution($color-positive, $color-x-light);
+    @include vf-icon-conflict-resolution($color-positive, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-conflict-resolution($color-positive, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-conflict-resolution($color-positive, $colors--dark-theme--icon);
     }
   }
 }
@@ -716,11 +735,14 @@
 @mixin vf-p-icon-conflict {
   .p-icon--conflict {
     @extend %icon;
-    @include vf-icon-conflict($color-caution, $color-x-light);
+    @include vf-icon-conflict($color-caution, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-conflict($color-caution, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-conflict($color-caution, $colors--dark-theme--icon);
     }
   }
 }
@@ -728,11 +750,14 @@
 @mixin vf-p-icon-connected {
   .p-icon--connected {
     @extend %icon;
-    @include vf-icon-connected($color-mid-dark);
+    @include vf-icon-connected($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-connected($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-connected($colors--dark-theme--icon);
     }
   }
 }
@@ -740,11 +765,14 @@
 @mixin vf-p-icon-containers {
   .p-icon--containers {
     @extend %icon;
-    @include vf-icon-containers($color-mid-dark);
+    @include vf-icon-containers($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-containers($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-containers($colors--dark-theme--icon);
     }
   }
 }
@@ -752,11 +780,14 @@
 @mixin vf-p-icon-copy-to-clipboard {
   .p-icon--copy-to-clipboard {
     @extend %icon;
-    @include vf-icon-copy-to-clipboard($color-mid-dark);
+    @include vf-icon-copy-to-clipboard($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-copy-to-clipboard($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-copy-to-clipboard($colors--dark-theme--icon);
     }
   }
 }
@@ -764,11 +795,14 @@
 @mixin vf-p-icon-disconnect {
   .p-icon--disconnect {
     @extend %icon;
-    @include vf-icon-disconnect($color-mid-dark);
+    @include vf-icon-disconnect($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-disconnect($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-disconnect($colors--dark-theme--icon);
     }
   }
 }
@@ -776,11 +810,14 @@
 @mixin vf-p-icon-edit {
   .p-icon--edit {
     @extend %icon;
-    @include vf-icon-edit($color-mid-dark);
+    @include vf-icon-edit($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-edit($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-edit($colors--dark-theme--icon);
     }
   }
 }
@@ -788,11 +825,14 @@
 @mixin vf-p-icon-export {
   .p-icon--export {
     @extend %icon;
-    @include vf-icon-export($color-mid-dark);
+    @include vf-icon-export($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-export($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-export($colors--dark-theme--icon);
     }
   }
 }
@@ -800,11 +840,14 @@
 @mixin vf-p-icon-exposed {
   .p-icon--exposed {
     @extend %icon;
-    @include vf-icon-exposed($color-mid-dark);
+    @include vf-icon-exposed($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-exposed($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-exposed($colors--dark-theme--icon);
     }
   }
 }
@@ -812,11 +855,14 @@
 @mixin vf-p-icon-filter {
   .p-icon--filter {
     @extend %icon;
-    @include vf-icon-filter($color-mid-dark);
+    @include vf-icon-filter($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-filter($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-filter($colors--dark-theme--icon);
     }
   }
 }
@@ -824,11 +870,14 @@
 @mixin vf-p-icon-fork {
   .p-icon--fork {
     @extend %icon;
-    @include vf-icon-fork($color-mid-dark);
+    @include vf-icon-fork($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-fork($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-fork($colors--dark-theme--icon);
     }
   }
 }
@@ -836,11 +885,14 @@
 @mixin vf-p-icon-get-link {
   .p-icon--get-link {
     @extend %icon;
-    @include vf-icon-get-link($color-mid-dark);
+    @include vf-icon-get-link($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-get-link($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-get-link($colors--dark-theme--icon);
     }
   }
 }
@@ -848,23 +900,14 @@
 @mixin vf-p-icon-halfscreen-bar {
   .p-icon--halfscreen-bar {
     @extend %icon;
-    @include vf-icon-halfscreen-bar($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-halfscreen-bar($color-x-light);
-    }
-  }
-}
-
-@mixin vf-p-icon-hide {
-  .p-icon--hide {
-    @extend %icon;
-    @include vf-icon-hide($color-mid-dark);
+    @include vf-icon-halfscreen-bar($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-hide($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-halfscreen-bar($colors--dark-theme--icon);
     }
   }
 }
@@ -872,11 +915,14 @@
 @mixin vf-p-icon-highlight-off {
   .p-icon--highlight-off {
     @extend %icon;
-    @include vf-icon-highlight-off($color-mid-dark);
+    @include vf-icon-highlight-off($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-highlight-off($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-highlight-off($colors--dark-theme--icon);
     }
   }
 }
@@ -884,11 +930,14 @@
 @mixin vf-p-icon-highlight-on {
   .p-icon--highlight-on {
     @extend %icon;
-    @include vf-icon-highlight-on($color-mid-dark);
+    @include vf-icon-highlight-on($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-highlight-on($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-highlight-on($colors--dark-theme--icon);
     }
   }
 }
@@ -896,11 +945,14 @@
 @mixin vf-p-icon-home {
   .p-icon--home {
     @extend %icon;
-    @include vf-icon-home($color-mid-dark);
+    @include vf-icon-home($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-home($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-home($colors--dark-theme--icon);
     }
   }
 }
@@ -908,11 +960,14 @@
 @mixin vf-p-icon-import {
   .p-icon--import {
     @extend %icon;
-    @include vf-icon-import($color-mid-dark);
+    @include vf-icon-import($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-import($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-import($colors--dark-theme--icon);
     }
   }
 }
@@ -920,11 +975,14 @@
 @mixin vf-p-icon-in-progress {
   .p-icon--in-progress {
     @extend %icon;
-    @include vf-icon-in-progress($color-x-light, $color-mid-dark);
+    @include vf-icon-in-progress($colors--dark-theme--icon, $colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-in-progress($color-x-light, $color-mid-dark);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-in-progress($colors--dark-theme--icon, $colors--light-theme--icon);
     }
   }
 }
@@ -932,11 +990,14 @@
 @mixin vf-p-icon-inspector-debug {
   .p-icon--inspector-debug {
     @extend %icon;
-    @include vf-icon-inspector-debug($color-mid-dark);
+    @include vf-icon-inspector-debug($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-inspector-debug($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-inspector-debug($colors--dark-theme--icon);
     }
   }
 }
@@ -944,11 +1005,14 @@
 @mixin vf-p-icon-loading-steps {
   .p-icon--loading-steps {
     @extend %icon;
-    @include vf-icon-loading-steps($color-mid-dark);
+    @include vf-icon-loading-steps($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-loading-steps($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-loading-steps($colors--dark-theme--icon);
     }
   }
 }
@@ -956,11 +1020,14 @@
 @mixin vf-p-icon-lock-locked-active {
   .p-icon--lock-locked-active {
     @extend %icon;
-    @include vf-icon-lock-locked-active($color-mid-dark);
+    @include vf-icon-lock-locked-active($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-lock-locked-active($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-lock-locked-active($colors--dark-theme--icon);
     }
   }
 }
@@ -968,11 +1035,14 @@
 @mixin vf-p-icon-lock-locked {
   .p-icon--lock-locked {
     @extend %icon;
-    @include vf-icon-lock-locked($color-mid-dark);
+    @include vf-icon-lock-locked($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-lock-locked($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-lock-locked($colors--dark-theme--icon);
     }
   }
 }
@@ -980,11 +1050,14 @@
 @mixin vf-p-icon-lock-unlock {
   .p-icon--lock-unlock {
     @extend %icon;
-    @include vf-icon-lock-unlock($color-mid-dark);
+    @include vf-icon-lock-unlock($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-lock-unlock($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-lock-unlock($colors--dark-theme--icon);
     }
   }
 }
@@ -992,11 +1065,14 @@
 @mixin vf-p-icon-maximise-bar {
   .p-icon--maximise-bar {
     @extend %icon;
-    @include vf-icon-maximise-bar($color-mid-dark);
+    @include vf-icon-maximise-bar($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-maximise-bar($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-maximise-bar($colors--dark-theme--icon);
     }
   }
 }
@@ -1004,11 +1080,14 @@
 @mixin vf-p-icon-minimise-bar {
   .p-icon--minimise-bar {
     @extend %icon;
-    @include vf-icon-minimise-bar($color-mid-dark);
+    @include vf-icon-minimise-bar($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-minimise-bar($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-minimise-bar($colors--dark-theme--icon);
     }
   }
 }
@@ -1016,11 +1095,14 @@
 @mixin vf-p-icon-mount-2 {
   .p-icon--mount-2 {
     @extend %icon;
-    @include vf-icon-mount-2($color-mid-dark);
+    @include vf-icon-mount-2($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-mount-2($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-mount-2($colors--dark-theme--icon);
     }
   }
 }
@@ -1028,11 +1110,14 @@
 @mixin vf-p-icon-mount {
   .p-icon--mount {
     @extend %icon;
-    @include vf-icon-mount($color-mid-dark);
+    @include vf-icon-mount($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-mount($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-mount($colors--dark-theme--icon);
     }
   }
 }
@@ -1040,11 +1125,14 @@
 @mixin vf-p-icon-open-terminal {
   .p-icon--open-terminal {
     @extend %icon;
-    @include vf-icon-open-terminal($color-mid-dark);
+    @include vf-icon-open-terminal($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-open-terminal($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-open-terminal($colors--dark-theme--icon);
     }
   }
 }
@@ -1052,11 +1140,14 @@
 @mixin vf-p-icon-plans {
   .p-icon--plans {
     @extend %icon;
-    @include vf-icon-plans($color-mid-dark);
+    @include vf-icon-plans($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-plans($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-plans($colors--dark-theme--icon);
     }
   }
 }
@@ -1064,11 +1155,14 @@
 @mixin vf-p-icon-pods {
   .p-icon--pods {
     @extend %icon;
-    @include vf-icon-pods($color-mid-dark);
+    @include vf-icon-pods($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-pods($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-pods($colors--dark-theme--icon);
     }
   }
 }
@@ -1076,11 +1170,14 @@
 @mixin vf-p-icon-power-error {
   .p-icon--power-error {
     @extend %icon;
-    @include vf-icon-power-error($color-mid-dark);
+    @include vf-icon-power-error($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-power-error($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-power-error($colors--dark-theme--icon);
     }
   }
 }
@@ -1088,11 +1185,14 @@
 @mixin vf-p-icon-power-off {
   .p-icon--power-off {
     @extend %icon;
-    @include vf-icon-power-off($color-mid-dark);
+    @include vf-icon-power-off($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-power-off($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-power-off($colors--dark-theme--icon);
     }
   }
 }
@@ -1100,11 +1200,14 @@
 @mixin vf-p-icon-power-on {
   .p-icon--power-on {
     @extend %icon;
-    @include vf-icon-power-on($color-mid-dark, $color-x-light);
+    @include vf-icon-power-on($colors--light-theme--icon, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-power-on($color-mid-dark, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-power-on($colors--light-theme--icon, $colors--dark-theme--icon);
     }
   }
 }
@@ -1112,11 +1215,14 @@
 @mixin vf-p-icon-profile {
   .p-icon--profile {
     @extend %icon;
-    @include vf-icon-profile($color-mid-dark);
+    @include vf-icon-profile($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-profile($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-profile($colors--dark-theme--icon);
     }
   }
 }
@@ -1124,11 +1230,14 @@
 @mixin vf-p-icon-restart {
   .p-icon--restart {
     @extend %icon;
-    @include vf-icon-restart($color-mid-dark);
+    @include vf-icon-restart($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-restart($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-restart($colors--dark-theme--icon);
     }
   }
 }
@@ -1136,11 +1245,14 @@
 @mixin vf-p-icon-revisions {
   .p-icon--revisions {
     @extend %icon;
-    @include vf-icon-revisions($color-mid-dark);
+    @include vf-icon-revisions($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-revisions($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-revisions($colors--dark-theme--icon);
     }
   }
 }
@@ -1148,11 +1260,14 @@
 @mixin vf-p-icon-security {
   .p-icon--security {
     @extend %icon;
-    @include vf-icon-security($color-mid-dark);
+    @include vf-icon-security($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-security($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-security($colors--dark-theme--icon);
     }
   }
 }
@@ -1160,23 +1275,14 @@
 @mixin vf-p-icon-settings {
   .p-icon--settings {
     @extend %icon;
-    @include vf-icon-settings($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-settings($color-x-light);
-    }
-  }
-}
-
-@mixin vf-p-icon-show {
-  .p-icon--show {
-    @extend %icon;
-    @include vf-icon-show($color-mid-dark);
+    @include vf-icon-settings($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-show($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-settings($colors--dark-theme--icon);
     }
   }
 }
@@ -1184,11 +1290,14 @@
 @mixin vf-p-icon-sort-both {
   .p-icon--sort-both {
     @extend %icon;
-    @include vf-icon-sort-both($color-mid-dark);
+    @include vf-icon-sort-both($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-sort-both($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-sort-both($colors--dark-theme--icon);
     }
   }
 }
@@ -1196,11 +1305,14 @@
 @mixin vf-p-icon-sort-down {
   .p-icon--sort-down {
     @extend %icon;
-    @include vf-icon-sort-down($color-mid-dark);
+    @include vf-icon-sort-down($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-sort-down($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-sort-down($colors--dark-theme--icon);
     }
   }
 }
@@ -1208,11 +1320,14 @@
 @mixin vf-p-icon-sort-up {
   .p-icon--sort-up {
     @extend %icon;
-    @include vf-icon-sort-up($color-mid-dark);
+    @include vf-icon-sort-up($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-sort-up($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-sort-up($colors--dark-theme--icon);
     }
   }
 }
@@ -1220,11 +1335,14 @@
 @mixin vf-p-icon-starred {
   .p-icon--starred {
     @extend %icon;
-    @include vf-icon-starred($color-mid-dark);
+    @include vf-icon-starred($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-starred($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-starred($colors--dark-theme--icon);
     }
   }
 }
@@ -1234,8 +1352,11 @@
     @extend %icon;
     @include vf-icon-status-small($color-negative);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-status-small($color-negative);
     }
   }
@@ -1246,8 +1367,11 @@
     @extend %icon;
     @include vf-icon-status-small($color-information);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-status-small($color-information);
     }
   }
@@ -1256,11 +1380,14 @@
 @mixin vf-p-icon-status-in-progress {
   .p-icon--status-in-progress {
     @extend %icon;
-    @include vf-icon-status-in-progress($color-information, $color-light, $color-x-light);
+    @include vf-icon-status-in-progress($color-information, $color-light, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-status-in-progress($color-information, $color-light, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-status-in-progress($color-information, $color-light, $colors--dark-theme--icon);
     }
   }
 }
@@ -1268,11 +1395,14 @@
 @mixin vf-p-icon-status-queued-small {
   .p-icon--status-queued-small {
     @extend %icon;
-    @include vf-icon-status-small($color-mid-dark);
+    @include vf-icon-status-small($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-status-small($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-status-small($colors--dark-theme--icon);
     }
   }
 }
@@ -1280,11 +1410,14 @@
 @mixin vf-p-icon-status-queued {
   .p-icon--status-queued {
     @extend %icon;
-    @include vf-icon-status-queued($color-x-light);
+    @include vf-icon-status-queued($colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-status-queued($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-status-queued($colors--dark-theme--icon);
     }
   }
 }
@@ -1294,8 +1427,11 @@
     @extend %icon;
     @include vf-icon-status-small($color-positive);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-status-small($color-positive);
     }
   }
@@ -1306,8 +1442,11 @@
     @extend %icon;
     @include vf-icon-status-small($color-caution);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-status-small($color-caution);
     }
   }
@@ -1316,11 +1455,14 @@
 @mixin vf-p-icon-status-waiting {
   .p-icon--status-waiting {
     @extend %icon;
-    @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $color-x-light);
+    @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-status-waiting($color-caution, $color-mid-light, $color-light, $colors--dark-theme--icon);
     }
   }
 }
@@ -1328,11 +1470,14 @@
 @mixin vf-p-icon-status {
   .p-icon--status {
     @extend %icon;
-    @include vf-icon-status($color-mid-dark);
+    @include vf-icon-status($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-status($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-status($colors--dark-theme--icon);
     }
   }
 }
@@ -1340,35 +1485,14 @@
 @mixin vf-p-icon-submit-bug {
   .p-icon--submit-bug {
     @extend %icon;
-    @include vf-icon-submit-bug($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-submit-bug($color-x-light);
-    }
-  }
-}
-
-@mixin vf-p-icon-success-grey {
-  .p-icon--success-grey {
-    @extend %icon;
-    @include vf-icon-success-grey($color-mid-dark);
-
-    [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-success-grey($color-x-light);
-    }
-  }
-}
-
-@mixin vf-p-icon-error-grey {
-  .p-icon--error-grey {
-    @extend %icon;
-    @include vf-icon-error-grey($color-mid-dark);
+    @include vf-icon-submit-bug($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-error-grey($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-submit-bug($colors--dark-theme--icon);
     }
   }
 }
@@ -1376,11 +1500,14 @@
 @mixin vf-p-icon-switcher-dashboard {
   .p-icon--switcher-dashboard {
     @extend %icon;
-    @include vf-icon-switcher-dashboard($color-mid-dark);
+    @include vf-icon-switcher-dashboard($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-switcher-dashboard($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-switcher-dashboard($colors--dark-theme--icon);
     }
   }
 }
@@ -1388,11 +1515,14 @@
 @mixin vf-p-icon-switcher-environments {
   .p-icon--switcher-environments {
     @extend %icon;
-    @include vf-icon-switcher-environments($color-mid-dark);
+    @include vf-icon-switcher-environments($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-switcher-environments($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-switcher-environments($colors--dark-theme--icon);
     }
   }
 }
@@ -1400,11 +1530,14 @@
 @mixin vf-p-icon-switcher {
   .p-icon--switcher {
     @extend %icon;
-    @include vf-icon-switcher($color-mid-dark);
+    @include vf-icon-switcher($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-switcher($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-switcher($colors--dark-theme--icon);
     }
   }
 }
@@ -1412,11 +1545,14 @@
 @mixin vf-p-icon-tag {
   .p-icon--tag {
     @extend %icon;
-    @include vf-icon-tag($color-mid-dark);
+    @include vf-icon-tag($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-tag($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-tag($colors--dark-theme--icon);
     }
   }
 }
@@ -1424,11 +1560,14 @@
 @mixin vf-p-icon-task-outstanding {
   .p-icon--task-outstanding {
     @extend %icon;
-    @include vf-icon-task-outstanding($color-mid-dark);
+    @include vf-icon-task-outstanding($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-task-outstanding($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-task-outstanding($colors--dark-theme--icon);
     }
   }
 }
@@ -1436,11 +1575,14 @@
 @mixin vf-p-icon-timed-out-grey {
   .p-icon--timed-out-grey {
     @extend %icon;
-    @include vf-icon-timed-out-grey($color-mid-dark);
+    @include vf-icon-timed-out-grey($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-timed-out-grey($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-timed-out-grey($colors--dark-theme--icon);
     }
   }
 }
@@ -1448,11 +1590,14 @@
 @mixin vf-p-icon-timed-out {
   .p-icon--timed-out {
     @extend %icon;
-    @include vf-icon-timed-out($color-mid-dark);
+    @include vf-icon-timed-out($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-timed-out($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-timed-out($colors--dark-theme--icon);
     }
   }
 }
@@ -1460,11 +1605,14 @@
 @mixin vf-p-icon-topic {
   .p-icon--topic {
     @extend %icon;
-    @include vf-icon-topic($color-mid-dark);
+    @include vf-icon-topic($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-topic($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-topic($colors--dark-theme--icon);
     }
   }
 }
@@ -1472,11 +1620,14 @@
 @mixin vf-p-icon-unit-pending {
   .p-icon--unit-pending {
     @extend %icon;
-    @include vf-icon-unit-pending($color-mid-dark);
+    @include vf-icon-unit-pending($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-unit-pending($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-unit-pending($colors--dark-theme--icon);
     }
   }
 }
@@ -1484,11 +1635,14 @@
 @mixin vf-p-icon-unit-running {
   .p-icon--unit-running {
     @extend %icon;
-    @include vf-icon-unit-running($color-positive, $color-x-light);
+    @include vf-icon-unit-running($color-positive, $colors--dark-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-unit-running($color-positive, $color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-unit-running($color-positive, $colors--dark-theme--icon);
     }
   }
 }
@@ -1496,11 +1650,14 @@
 @mixin vf-p-icon-unmount {
   .p-icon--unmount {
     @extend %icon;
-    @include vf-icon-unmount($color-mid-dark);
+    @include vf-icon-unmount($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-unmount($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-unmount($colors--dark-theme--icon);
     }
   }
 }
@@ -1508,11 +1665,14 @@
 @mixin vf-p-icon-unstarred {
   .p-icon--unstarred {
     @extend %icon;
-    @include vf-icon-unstarred($color-mid-dark);
+    @include vf-icon-unstarred($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-unstarred($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-unstarred($colors--dark-theme--icon);
     }
   }
 }
@@ -1520,11 +1680,14 @@
 @mixin vf-p-icon-user-group {
   .p-icon--user-group {
     @extend %icon;
-    @include vf-icon-user-group($color-mid-dark);
+    @include vf-icon-user-group($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-user-group($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-user-group($colors--dark-theme--icon);
     }
   }
 }
@@ -1532,11 +1695,14 @@
 @mixin vf-p-icon-video-play {
   .p-icon--video-play {
     @extend %icon;
-    @include vf-icon-video-play($color-mid-dark);
+    @include vf-icon-video-play($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-video-play($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-video-play($colors--dark-theme--icon);
     }
   }
 }
@@ -1544,11 +1710,14 @@
 @mixin vf-p-icon-warning-grey {
   .p-icon--warning-grey {
     @extend %icon;
-    @include vf-icon-warning-grey($color-mid-dark);
+    @include vf-icon-warning-grey($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
-      @include vf-icon-warning-grey($color-x-light);
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
+      @include vf-icon-warning-grey($colors--dark-theme--icon);
     }
   }
 }
@@ -1556,10 +1725,13 @@
 @mixin vf-p-icon-desktop {
   .p-icon--desktop {
     @extend %icon;
-    @include vf-icon-desktop($color-mid-dark);
+    @include vf-icon-desktop($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-desktop($color-mid-x-light);
     }
   }
@@ -1568,10 +1740,13 @@
 @mixin vf-p-icon-play {
   .p-icon--play {
     @extend %icon;
-    @include vf-icon-play($color-mid-dark);
+    @include vf-icon-play($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-play($color-mid-x-light);
     }
   }
@@ -1580,10 +1755,13 @@
 @mixin vf-p-icon-pause {
   .p-icon--pause {
     @extend %icon;
-    @include vf-icon-pause($color-mid-dark);
+    @include vf-icon-pause($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-pause($color-mid-x-light);
     }
   }
@@ -1592,10 +1770,13 @@
 @mixin vf-p-icon-stop {
   .p-icon--stop {
     @extend %icon;
-    @include vf-icon-stop($color-mid-dark);
+    @include vf-icon-stop($colors--light-theme--icon);
 
+    // stylelint-disable-next-line selector-max-type -- allow theme class on body for legacy theming support on icons
     [class*='--dark'] &,
-    &.is-light {
+    body.is-dark &,
+    &.is-light, // DEPRECATED: use is-dark instead
+    &.is-dark {
       @include vf-icon-stop($color-mid-x-light);
     }
   }