Update core icons to support new theming system

releases.yml

@@ -8,6 +8,14 @@
       url: /docs/settings/color-settings#color-theming
       status: Deprecated
       notes: We're deprecating the SCSS variables used to set the default theme. Theme can be set by using a class name on an element.
+    - component: Icons / Themes
+      url: /docs/patterns/icons#dark-theme
+      status: Updated
+      notes: Standard Vanilla icons have been updated to support new theming via <code>is-dark</code> class.
+    - component: Icons / Themes
+      url: /docs/patterns/icons#dark-theme
+      status: Deprecated
+      notes: We're deprecating the <code>is-light</code> class for icons. Use <code>is-dark</code> instead.
     - component: Section / Hero
       url: /docs/patterns/section#hero-sections
       status: New

scss/_base.scss

@@ -1,7 +1,7 @@
 // Base
 @import 'base_placeholders'; //mandatory import
-@import 'base_themes';
 @import 'base_icon-definitions';
+@import 'base_themes';
 @import 'base_typography';
 @import 'base_blockquotes';
 @import 'base_box-sizing';

scss/_base_forms.scss

@@ -183,7 +183,7 @@
 
   // Select styles
   select {
-    @include vf-icon-chevron;
+    @include vf-icon-chevron-themed;
 
     // stylelint-disable property-no-vendor-prefix
     -moz-appearance: none;

scss/_base_themes.scss

@@ -1,8 +1,34 @@
 @import 'settings';
 
+@mixin vf-theme-light {
+  --vf-theme-light: var(--vf-FLAG-ON);
+  --vf-theme-dark: var(--vf-FLAG-OFF);
+  @include vf-theme-light--colors;
+}
+
+@mixin vf-theme-dark {
+  --vf-theme-light: var(--vf-FLAG-OFF);
+  --vf-theme-dark: var(--vf-FLAG-ON);
+  @include vf-theme-dark--colors;
+}
+
+@mixin vf-theme-paper {
+  // we treat the paper theme as a light theme
+  --vf-theme-light: var(--vf-FLAG-ON);
+  --vf-theme-dark: var(--vf-FLAG-OFF);
+  @include vf-theme-paper--colors;
+}
+
 // Color themes
 @mixin vf-b-themes {
   @at-root {
+    :root {
+      // based on:
+      // https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
+      --vf-FLAG-ON: initial;
+      --vf-FLAG-OFF: ;
+    }
+
     :root,
     .is-light {
       @include vf-theme-light;
@@ -17,3 +43,10 @@
     }
   }
 }
+
+// based on:
+// https://lea.verou.me/blog/2020/10/the-var-space-hack-to-toggle-multiple-values-with-one-custom-property/
+// https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/
+@mixin vf-themed-property($property, $light-value, $dark-value) {
+  #{$property}: var(--vf-theme-light, #{$light-value}) var(--vf-theme-dark, #{$dark-value});
+}

scss/_patterns_chip.scss

@@ -43,8 +43,7 @@ $chip-border-thickness: 1px;
 
     .p-chip__dismiss {
       @extend %icon;
-      @include vf-icon-close($color: $colors--light-theme--text-default);
-      // also includes button and close icon styles in the theming section
+      @include vf-icon-close-themed;
 
       align-self: center;
       background-size: map-get($icon-sizes, small);
@@ -64,12 +63,6 @@ $chip-border-thickness: 1px;
       margin: 0;
       vertical-align: baseline;
     }
-
-    // stylelint-disable-next-line selector-max-type
-    body.is-dark & .p-chip__dismiss,
-    &.is-dark .p-chip__dismiss {
-      @include vf-icon-close($color: $colors--dark-theme--text-default);
-    }
   }
 
   @include vf-chips-default;

scss/_patterns_form-validation.scss

@@ -33,24 +33,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-warning($color: map-get($colors-light-theme--tinted-borders, caution));
+      @include vf-icon-warning-themed;
       color: $colors--theme--border-caution;
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      body.is-dark &,
-      &.is-dark {
-        @include vf-icon-warning($color: map-get($colors-dark-theme--tinted-borders, caution), $color-symbol: $colors--dark-theme--background-default);
-      }
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      &.is-light,
-      &.is-paper,
-      body.is-light &,
-      body.is-paper & {
-        @include vf-icon-warning($color: map-get($colors-light-theme--tinted-borders, caution));
-      }
     }
   }
 
@@ -69,24 +53,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-error($color: map-get($colors-light-theme--tinted-borders, negative));
+      @include vf-icon-error-themed;
       color: $colors--theme--border-negative;
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      body.is-dark &,
-      &.is-dark {
-        @include vf-icon-error($color: map-get($colors-dark-theme--tinted-borders, negative), $color-symbol: $colors--dark-theme--background-default);
-      }
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      &.is-light,
-      &.is-paper,
-      body.is-light &,
-      body.is-paper & {
-        @include vf-icon-error($color: map-get($colors-light-theme--tinted-borders, negative));
-      }
     }
   }
 
@@ -105,24 +73,8 @@
     }
 
     .p-form-validation__message {
-      @include vf-icon-success($color: map-get($colors-light-theme--tinted-borders, positive));
+      @include vf-icon-success-themed;
       color: $colors--theme--border-positive;
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      body.is-dark &,
-      &.is-dark {
-        @include vf-icon-success($color: map-get($colors-dark-theme--tinted-borders, positive), $color-symbol: $colors--dark-theme--background-default);
-      }
-
-      // FIXME: Temporary workaround for unsupported theme colors in icons
-      // stylelint-disable-next-line selector-max-type
-      &.is-light,
-      &.is-paper,
-      body.is-light &,
-      body.is-paper & {
-        @include vf-icon-success($color: map-get($colors-light-theme--tinted-borders, positive));
-      }
     }
   }
 }