vanilla-framework 3.8.2 → 3.10.0

package/scss/_patterns_icons.scss

@@ -87,7 +87,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-anchor($color-mid-x-light);
+      @include vf-icon-anchor($color-x-light);
     }
   }
 }
@@ -99,7 +99,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-plus($color-mid-x-light);
+      @include vf-icon-plus($color-x-light);
     }
   }
 }
@@ -111,7 +111,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-minus($color-mid-x-light);
+      @include vf-icon-minus($color-x-light);
     }
   }
 }
@@ -123,7 +123,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-expand($color-mid-x-light);
+      @include vf-icon-expand($color-x-light);
     }
   }
 }
@@ -135,7 +135,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-collapse($color-mid-x-light);
+      @include vf-icon-collapse($color-x-light);
     }
   }
 }
@@ -152,7 +152,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-chevron($color-mid-x-light);
+      @include vf-icon-chevron($color-x-light);
     }
   }
 }
@@ -164,7 +164,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-close($color-mid-x-light);
+      @include vf-icon-close($color-x-light);
     }
   }
 }
@@ -177,7 +177,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-help($color-mid-x-light);
+      @include vf-icon-help($color-x-light);
     }
   }
 }
@@ -189,7 +189,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-info($color-mid-x-light);
+      @include vf-icon-info($color-x-light);
     }
   }
 }
@@ -201,7 +201,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-delete($color-mid-x-light);
+      @include vf-icon-delete($color-x-light);
     }
   }
 }
@@ -227,7 +227,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-external-link($color-mid-x-light);
+      @include vf-icon-external-link($color-x-light);
     }
   }
 }
@@ -239,7 +239,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-drag($color-mid-x-light);
+      @include vf-icon-drag($color-x-light);
     }
   }
 }
@@ -251,7 +251,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-code($color-mid-x-light);
+      @include vf-icon-code($color-x-light);
     }
   }
 }
@@ -263,7 +263,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-menu($color-mid-x-light);
+      @include vf-icon-menu($color-x-light);
     }
   }
 }
@@ -275,7 +275,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-copy($color-mid-x-light);
+      @include vf-icon-copy($color-x-light);
     }
   }
 }
@@ -287,7 +287,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-search($color-mid-x-light);
+      @include vf-icon-search($color-x-light);
     }
   }
 }
@@ -306,7 +306,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-share($color-mid-x-light);
+      @include vf-icon-share($color-x-light);
     }
   }
 }
@@ -318,7 +318,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-user($color-mid-x-light);
+      @include vf-icon-user($color-x-light);
     }
   }
 }
@@ -330,7 +330,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-spinner($color-mid-x-light);
+      @include vf-icon-spinner($color-x-light);
     }
   }
 }
@@ -416,7 +416,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-applications($color-mid-x-light);
+      @include vf-icon-applications($color-x-light);
     }
   }
 }
@@ -428,7 +428,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-controllers($color-mid-x-light);
+      @include vf-icon-controllers($color-x-light);
     }
   }
 }
@@ -440,7 +440,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-fullscreen($color-mid-x-light);
+      @include vf-icon-fullscreen($color-x-light);
     }
   }
 }
@@ -452,7 +452,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-models($color-mid-x-light);
+      @include vf-icon-models($color-x-light);
     }
   }
 }
@@ -464,7 +464,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-machines($color-mid-x-light);
+      @include vf-icon-machines($color-x-light);
     }
   }
 }
@@ -476,7 +476,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-pin($color-mid-x-light);
+      @include vf-icon-pin($color-x-light);
     }
   }
 }
@@ -488,7 +488,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-units($color-mid-x-light);
+      @include vf-icon-units($color-x-light);
     }
   }
 }
@@ -502,7 +502,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-critical($color-mid-x-light);
+      @include vf-icon-priority-critical($color-x-light);
     }
   }
 }
@@ -514,7 +514,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-high($color-mid-x-light);
+      @include vf-icon-priority-high($color-x-light);
     }
   }
 }
@@ -526,7 +526,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-low($color-mid-x-light);
+      @include vf-icon-priority-low($color-x-light);
     }
   }
 }
@@ -538,7 +538,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-medium($color-mid-x-light);
+      @include vf-icon-priority-medium($color-x-light);
     }
   }
 }
@@ -550,7 +550,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-negligible($color-mid-x-light);
+      @include vf-icon-priority-negligible($color-x-light);
     }
   }
 }
@@ -562,7 +562,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-priority-unknown($color-mid-x-light);
+      @include vf-icon-priority-unknown($color-x-light);
     }
   }
 }
@@ -574,7 +574,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-add-canvas($color-mid-x-light);
+      @include vf-icon-add-canvas($color-x-light);
     }
   }
 }
@@ -586,7 +586,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-add-logical-volume($color-mid-x-light);
+      @include vf-icon-add-logical-volume($color-x-light);
     }
   }
 }
@@ -598,7 +598,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-add-partition($color-mid-x-light);
+      @include vf-icon-add-partition($color-x-light);
     }
   }
 }
@@ -610,7 +610,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-back-to-top($color-mid-x-light);
+      @include vf-icon-back-to-top($color-x-light);
     }
   }
 }
@@ -622,7 +622,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-begin-downloading($color-mid-x-light);
+      @include vf-icon-begin-downloading($color-x-light);
     }
   }
 }
@@ -634,7 +634,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-bundle($color-mid-x-light);
+      @include vf-icon-bundle($color-x-light);
     }
   }
 }
@@ -646,7 +646,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-canvas($color-mid-x-light);
+      @include vf-icon-canvas($color-x-light);
     }
   }
 }
@@ -658,7 +658,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-change-version($color-mid-x-light);
+      @include vf-icon-change-version($color-x-light);
     }
   }
 }
@@ -670,7 +670,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-comments($color-mid-x-light);
+      @include vf-icon-comments($color-x-light);
     }
   }
 }
@@ -682,7 +682,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-conflict-grey($color-mid-x-light);
+      @include vf-icon-conflict-grey($color-x-light);
     }
   }
 }
@@ -694,7 +694,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-conflict-resolution-grey($color-mid-x-light);
+      @include vf-icon-conflict-resolution-grey($color-x-light);
     }
   }
 }
@@ -730,7 +730,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-connected($color-mid-x-light);
+      @include vf-icon-connected($color-x-light);
     }
   }
 }
@@ -742,7 +742,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-containers($color-mid-x-light);
+      @include vf-icon-containers($color-x-light);
     }
   }
 }
@@ -754,7 +754,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-copy-to-clipboard($color-mid-x-light);
+      @include vf-icon-copy-to-clipboard($color-x-light);
     }
   }
 }
@@ -766,7 +766,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-disconnect($color-mid-x-light);
+      @include vf-icon-disconnect($color-x-light);
     }
   }
 }
@@ -778,7 +778,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-edit($color-mid-x-light);
+      @include vf-icon-edit($color-x-light);
     }
   }
 }
@@ -790,7 +790,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-export($color-mid-x-light);
+      @include vf-icon-export($color-x-light);
     }
   }
 }
@@ -802,7 +802,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-exposed($color-mid-x-light);
+      @include vf-icon-exposed($color-x-light);
     }
   }
 }
@@ -814,7 +814,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-filter($color-mid-x-light);
+      @include vf-icon-filter($color-x-light);
     }
   }
 }
@@ -826,7 +826,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-fork($color-mid-x-light);
+      @include vf-icon-fork($color-x-light);
     }
   }
 }
@@ -838,7 +838,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-get-link($color-mid-x-light);
+      @include vf-icon-get-link($color-x-light);
     }
   }
 }
@@ -850,7 +850,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-halfscreen-bar($color-mid-x-light);
+      @include vf-icon-halfscreen-bar($color-x-light);
     }
   }
 }
@@ -862,7 +862,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-hide($color-mid-x-light);
+      @include vf-icon-hide($color-x-light);
     }
   }
 }
@@ -874,7 +874,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-highlight-off($color-mid-x-light);
+      @include vf-icon-highlight-off($color-x-light);
     }
   }
 }
@@ -886,7 +886,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-highlight-on($color-mid-x-light);
+      @include vf-icon-highlight-on($color-x-light);
     }
   }
 }
@@ -898,7 +898,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-home($color-mid-x-light);
+      @include vf-icon-home($color-x-light);
     }
   }
 }
@@ -910,7 +910,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-import($color-mid-x-light);
+      @include vf-icon-import($color-x-light);
     }
   }
 }
@@ -934,7 +934,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-inspector-debug($color-mid-x-light);
+      @include vf-icon-inspector-debug($color-x-light);
     }
   }
 }
@@ -946,7 +946,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-loading-steps($color-mid-x-light);
+      @include vf-icon-loading-steps($color-x-light);
     }
   }
 }
@@ -958,7 +958,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-lock-locked-active($color-mid-x-light);
+      @include vf-icon-lock-locked-active($color-x-light);
     }
   }
 }
@@ -970,7 +970,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-lock-locked($color-mid-x-light);
+      @include vf-icon-lock-locked($color-x-light);
     }
   }
 }
@@ -982,7 +982,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-lock-unlock($color-mid-x-light);
+      @include vf-icon-lock-unlock($color-x-light);
     }
   }
 }
@@ -994,7 +994,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-maximise-bar($color-mid-x-light);
+      @include vf-icon-maximise-bar($color-x-light);
     }
   }
 }
@@ -1006,7 +1006,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-minimise-bar($color-mid-x-light);
+      @include vf-icon-minimise-bar($color-x-light);
     }
   }
 }
@@ -1018,7 +1018,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-mount-2($color-mid-x-light);
+      @include vf-icon-mount-2($color-x-light);
     }
   }
 }
@@ -1030,7 +1030,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-mount($color-mid-x-light);
+      @include vf-icon-mount($color-x-light);
     }
   }
 }
@@ -1042,7 +1042,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-open-terminal($color-mid-x-light);
+      @include vf-icon-open-terminal($color-x-light);
     }
   }
 }
@@ -1054,7 +1054,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-plans($color-mid-x-light);
+      @include vf-icon-plans($color-x-light);
     }
   }
 }
@@ -1066,7 +1066,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-pods($color-mid-x-light);
+      @include vf-icon-pods($color-x-light);
     }
   }
 }
@@ -1078,7 +1078,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-power-error($color-mid-x-light);
+      @include vf-icon-power-error($color-x-light);
     }
   }
 }
@@ -1090,7 +1090,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-power-off($color-mid-x-light);
+      @include vf-icon-power-off($color-x-light);
     }
   }
 }
@@ -1098,11 +1098,11 @@
 @mixin vf-p-icon-power-on {
   .p-icon--power-on {
     @extend %icon;
-    @include vf-icon-power-on($color-mid-dark, $color-mid-x-light);
+    @include vf-icon-power-on($color-mid-dark, $color-x-light);
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-power-on($color-mid-dark, $color-mid-x-light);
+      @include vf-icon-power-on($color-mid-dark, $color-x-light);
     }
   }
 }
@@ -1114,7 +1114,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-profile($color-mid-x-light);
+      @include vf-icon-profile($color-x-light);
     }
   }
 }
@@ -1126,7 +1126,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-restart($color-mid-x-light);
+      @include vf-icon-restart($color-x-light);
     }
   }
 }
@@ -1138,7 +1138,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-revisions($color-mid-x-light);
+      @include vf-icon-revisions($color-x-light);
     }
   }
 }
@@ -1150,7 +1150,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-security($color-mid-x-light);
+      @include vf-icon-security($color-x-light);
     }
   }
 }
@@ -1162,7 +1162,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-settings($color-mid-x-light);
+      @include vf-icon-settings($color-x-light);
     }
   }
 }
@@ -1174,7 +1174,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-show($color-mid-x-light);
+      @include vf-icon-show($color-x-light);
     }
   }
 }
@@ -1186,7 +1186,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-sort-both($color-mid-x-light);
+      @include vf-icon-sort-both($color-x-light);
     }
   }
 }
@@ -1198,7 +1198,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-sort-down($color-mid-x-light);
+      @include vf-icon-sort-down($color-x-light);
     }
   }
 }
@@ -1210,7 +1210,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-sort-up($color-mid-x-light);
+      @include vf-icon-sort-up($color-x-light);
     }
   }
 }
@@ -1222,7 +1222,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-starred($color-mid-x-light);
+      @include vf-icon-starred($color-x-light);
     }
   }
 }
@@ -1270,7 +1270,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-status-small($color-mid-x-light);
+      @include vf-icon-status-small($color-x-light);
     }
   }
 }
@@ -1330,7 +1330,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-status($color-mid-x-light);
+      @include vf-icon-status($color-x-light);
     }
   }
 }
@@ -1342,7 +1342,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-submit-bug($color-mid-x-light);
+      @include vf-icon-submit-bug($color-x-light);
     }
   }
 }
@@ -1354,7 +1354,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-success-grey($color-mid-x-light);
+      @include vf-icon-success-grey($color-x-light);
     }
   }
 }
@@ -1366,7 +1366,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-switcher-dashboard($color-mid-x-light);
+      @include vf-icon-switcher-dashboard($color-x-light);
     }
   }
 }
@@ -1378,7 +1378,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-switcher-environments($color-mid-x-light);
+      @include vf-icon-switcher-environments($color-x-light);
     }
   }
 }
@@ -1390,7 +1390,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-switcher($color-mid-x-light);
+      @include vf-icon-switcher($color-x-light);
     }
   }
 }
@@ -1402,7 +1402,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-tag($color-mid-x-light);
+      @include vf-icon-tag($color-x-light);
     }
   }
 }
@@ -1414,7 +1414,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-task-outstanding($color-mid-x-light);
+      @include vf-icon-task-outstanding($color-x-light);
     }
   }
 }
@@ -1426,7 +1426,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-timed-out-grey($color-mid-x-light);
+      @include vf-icon-timed-out-grey($color-x-light);
     }
   }
 }
@@ -1438,7 +1438,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-timed-out($color-mid-x-light);
+      @include vf-icon-timed-out($color-x-light);
     }
   }
 }
@@ -1450,7 +1450,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-topic($color-mid-x-light);
+      @include vf-icon-topic($color-x-light);
     }
   }
 }
@@ -1462,7 +1462,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-unit-pending($color-mid-x-light);
+      @include vf-icon-unit-pending($color-x-light);
     }
   }
 }
@@ -1486,7 +1486,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-unmount($color-mid-x-light);
+      @include vf-icon-unmount($color-x-light);
     }
   }
 }
@@ -1498,7 +1498,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-unstarred($color-mid-x-light);
+      @include vf-icon-unstarred($color-x-light);
     }
   }
 }
@@ -1510,7 +1510,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-user-group($color-mid-x-light);
+      @include vf-icon-user-group($color-x-light);
     }
   }
 }
@@ -1522,7 +1522,7 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-video-play($color-mid-x-light);
+      @include vf-icon-video-play($color-x-light);
     }
   }
 }
@@ -1534,7 +1534,19 @@
 
     [class*='--dark'] &,
     &.is-light {
-      @include vf-icon-warning-grey($color-mid-x-light);
+      @include vf-icon-warning-grey($color-x-light);
+    }
+  }
+}
+
+@mixin vf-p-icon-desktop {
+  .p-icon--desktop {
+    @extend %icon;
+    @include vf-icon-desktop($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-desktop($color-mid-x-light);
     }
   }
 }