Use new theme colours in base styles

scss/_base_blockquotes.scss

@@ -4,7 +4,7 @@
 @mixin vf-b-blockquotes {
   // stylelint-disable selector-max-type -- base styles can use type selectors
   blockquote {
-    border-left: 2px solid $color-mid-dark;
+    border-left: 2px solid $colors--theme--border-high-contrast;
     margin-bottom: $spv--x-large;
     margin-left: 0;
     margin-top: 0;

scss/_base_button.scss

@@ -77,6 +77,8 @@
     // stylelint-enable selector-max-type
   }
 
+  // FIXME: buttons are using a custom version of success icon that is not themed
+  // this should ideally be replaced with a themed icon that uses text colour
   %vf-button-white-success-icon {
     & .p-icon--success {
       @include vf-icon-success($color-x-light, $color-transparent);

scss/_base_code.scss

@@ -1,6 +1,5 @@
 @import 'settings';
 
-$color-pre-bg: rgba($color-x-dark, 0.03);
 $digit-width: 1ch; // measured width of one character in the monospaced font
 $code-sidebar-width: calc($sph--large + (4 * $digit-width)) !default;
 $code-inline-padding: 0.25rem;
@@ -71,13 +70,6 @@ $code-inline-padding: 0.25rem;
     white-space: pre;
   }
 
-  // dark theme
-  [class*='--dark'] code,
-  code.is-dark {
-    background-color: $color-code-background-dark;
-    color: $colors--dark-theme--text-default;
-  }
-
   %leading-linux-prompt-icon {
     &::before {
       @extend %icon;

scss/_base_forms-range.scss

@@ -2,7 +2,7 @@
   $thumb-shadow: 0 0 $bar-thickness 1px rgba(0, 0, 0, 0.2);
   $thumb-size: 1rem;
   $thumb-radius: 50%;
-  $thumb-border: $input-border-thickness solid $color-mid-dark;
+  $thumb-border: $input-border-thickness solid $colors--theme--border-high-contrast;
   $track-height: $bar-thickness;
   $track-radius: $bar-thickness;
 
@@ -13,6 +13,7 @@
     -moz-appearance: none;
     appearance: none;
     // stylelint-enable property-no-vendor-prefix
+    background-color: $color-transparent;
     border-radius: $track-radius;
     margin: $sp-small 0;
     padding: 0;
@@ -30,7 +31,7 @@
       -moz-appearance: none;
       appearance: none;
       // stylelint-enable property-no-vendor-prefix
-      background: $color-x-light;
+      background: $colors--theme--background-default;
       border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;
@@ -45,19 +46,19 @@
 
     // Firefox
     &::-moz-range-track {
-      background: $color-mid-light;
+      background: $colors--theme--border-default; // default; //mid-light;
       border-radius: $track-radius;
       height: $track-height;
     }
 
     &::-moz-range-progress {
-      background-color: $color-link;
+      background-color: $colors--theme--link-default; //-link;
       border-radius: $track-radius;
       height: $track-height;
     }
 
     &::-moz-range-thumb {
-      background: $color-x-light;
+      background: $colors--theme--background-default; // x-light;
       border: $thumb-border;
       border-radius: $thumb-radius;
       box-shadow: $thumb-shadow;

scss/_base_forms.scss

@@ -13,7 +13,7 @@
   // Default form input element styles
   %vf-input-elements {
     @extend %bordered-text-vertical-padding;
-    @include vf-focus($color-focus, $bar-thickness, true);
+    @include vf-focus($has-validation: true);
     @include vf-animation(#{background-color}, fast);
 
     // stylelint-disable property-no-vendor-prefix
@@ -93,14 +93,8 @@
 
   // Readonly form elements
   %vf-readonly-element {
-    color: $color-mid-light;
+    color: $colors--theme--text-muted;
     cursor: default;
-
-    &:hover,
-    &:active {
-      border-color: $color-mid-dark;
-      outline: none;
-    }
   }
 
   // stylelint-disable selector-max-type -- base styles can use type selectors

scss/_base_placeholders.scss

@@ -25,11 +25,13 @@
     border: $border;
   }
 
+  // deprecated -- use the theme colour variables
   %vf-bg--light {
     background-color: $color-light;
     color: $colors--light-theme--text-default;
   }
 
+  // deprecated -- use the theme colour variables
   %vf-bg--x-light {
     background-color: $color-x-light;
     color: $colors--light-theme--text-default;

scss/_patterns_card.scss

@@ -40,9 +40,10 @@
 
 @mixin vf-p-card-muted {
   .p-card--muted {
-    @extend %vf-bg--light;
     @extend %vf-has-box-shadow;
 
+    background-color: $color-light;
+    color: $colors--light-theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;

scss/_patterns_notifications.scss

@@ -74,7 +74,6 @@ $notification-text-margin-bottom: $spv--large - $spv-nudge;
   // The mixin for basic notification styling
   %vf-notification {
     @extend %vf-is-bordered;
-    @extend %vf-bg--x-light;
 
     background: $colors--theme--background-default;
     background-position: $sph--large $notification-icon-vert-offset;

templates/docs/examples/base/forms/range.html

@@ -10,8 +10,8 @@
 <script>
 var isWebkit =
   /Chrome/i.test(navigator.userAgent) || /Safari/i.test(navigator.userAgent);
-var PROGRESS_COLOUR = '#06c';
-var EMPTY_COLOUR = '#D9D9D9';
+var PROGRESS_COLOUR = 'var(--vf-color-link-default)';
+var EMPTY_COLOUR = 'var(--vf-color-border-default)';
 
 /**
  Renders gradient to fake progress color in webkit browsers.