Update default text colour to 000 from 111

scss/_base_code.scss

@@ -61,7 +61,7 @@ $code-inline-padding: 0.25rem;
 
   pre {
     background-color: $color-code-background;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     display: block;
     margin-bottom: $spv--x-large;
     margin-top: 0;

scss/_base_forms.scss

@@ -25,7 +25,7 @@
     border: 0 solid transparent;
     border-bottom: $input-border-thickness solid $colors--light-theme--text-default;
     border-radius: 0;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     font-family: unquote($font-base-family);
     font-size: 1rem;
     font-weight: $font-weight-regular-text;
@@ -198,7 +198,7 @@
     background-repeat: no-repeat;
     background-size: map-get($icon-sizes, default);
     box-shadow: none;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     min-height: map-get($line-heights, default-text);
     padding-right: calc($default-icon-size + 2 * $sph--small);
     text-indent: 0.01px;

scss/_base_placeholders.scss

@@ -25,12 +25,12 @@
 
   %vf-bg--light {
     background-color: $color-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-bg--x-light {
     background-color: $color-x-light;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   %vf-card-padding {

scss/_base_typography.scss

@@ -8,7 +8,7 @@
 
   // stylelint-disable selector-max-type -- base styles can use type selectors
   html {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     font-family: unquote($font-base-family);
     // These vendor prefixes are unique and cannot be added by autoprefixer
     -moz-osx-font-smoothing: grayscale;

scss/_global_functions.scss

@@ -34,19 +34,19 @@
 // Test value of bg $color and return light or dark text color accordingly
 @function vf-contrast-text-color($color) {
   @if (lightness($color) > 55) {
-    @return $color-dark; // Lighter background, return dark color
+    @return $colors--light-theme--text-default; // Lighter background, return dark color
   } @else {
-    @return $color-x-light; // Darker background, return light color
+    @return $colors--dark-theme--text-default; // Darker background, return light color
   }
 }
 
 // Returns the font color to be presented on the passed background-color
 // variable.
 @function vf-determine-text-color($background-color) {
   @if (lightness($background-color) > 50) {
-    @return $color-dark;
+    @return $colors--light-theme--text-default;
   } @else {
-    @return $color-x-light;
+    @return $colors--dark-theme--text-default;
   }
 }
 

scss/_patterns_article-pagination.scss

@@ -17,7 +17,7 @@
 
   .p-article-pagination__label,
   .p-article-pagination__title {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     display: block;
     margin-top: 0;
     width: 100%;

scss/_patterns_badge.scss

@@ -3,7 +3,7 @@
 @mixin vf-p-badge {
   %vf-badge {
     @extend %x-small-text;
-    background-color: $color-dark;
+    background-color: $colors--light-theme--text-default;
     border-radius: 1rem;
     box-sizing: content-box;
     color: $color-x-light;

scss/_patterns_card.scss

@@ -33,7 +33,7 @@
 @mixin vf-p-card-overlay {
   .p-card--overlay {
     background: transparentize($color-x-light, 0.1);
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     margin-bottom: $spv--x-large;
     overflow: auto;
     padding: $spv--large;

scss/_patterns_code-snippet.scss

@@ -115,7 +115,7 @@ $code-snippet-header-v-spacing: $spv--small;
     .p-code-snippet__dropdown {
       background-color: $color-transparent;
       border: 0;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       margin-bottom: 0;
       margin-left: $sph--small;
       min-width: min-content;

scss/_patterns_form-password-toggle.scss

@@ -18,7 +18,7 @@
   .p-form-password-toggle + [type='text'] {
     &[readonly],
     &[readonly='readonly'] {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
     }
   }
 }

scss/_patterns_links.scss

@@ -2,10 +2,10 @@
 
 @mixin vf-p-links {
   .p-link--soft {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
 
     &:visited {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       text-decoration: none;
     }
 
@@ -70,7 +70,7 @@
   }
 
   .p-top__link {
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     padding: 0 $sph--small 0 $sph--large;
     text-decoration: none;
   }

scss/_patterns_lists.scss

@@ -77,7 +77,7 @@ $list-step-bullet-margin: $sph--x-large;
     }
 
     &::before {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       content: counters(list-item, '.') '. ';
       display: inline-block;
       text-align: right;
@@ -86,7 +86,7 @@ $list-step-bullet-margin: $sph--x-large;
 
   %vf-list-item-bullet {
     &::before {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       content: '•';
       display: inline-block;
       text-align: right;

scss/_patterns_media-object.scss

@@ -10,7 +10,7 @@
   %vf-meta-list-item {
     @extend %small-text;
 
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
     padding-left: map-get($icon-sizes, default) + $sph--large;
   }
 

scss/_patterns_pagination.scss

@@ -8,7 +8,7 @@
     &.is-active,
     &[aria-current='page'] {
       background-color: scale-color($color-x-light, $lightness: -$active-background-opacity-amount * 100%);
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       text-decoration: none;
     }
   }

scss/_patterns_status-label.scss

@@ -36,7 +36,7 @@
     @extend %vf-status-label;
 
     background-color: $color-caution;
-    color: $color-dark;
+    color: $colors--light-theme--text-default;
   }
 
   .p-status-label--information,

scss/_patterns_strip.scss

@@ -64,7 +64,7 @@
     background-size: cover;
 
     &.is-light {
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
     }
 
     &.is-dark {

scss/_patterns_table-of-contents.scss

@@ -36,11 +36,11 @@
 
     .p-table-of-contents__link {
       border-bottom: 0;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       margin-bottom: $sp-x-small;
 
       &:visited {
-        color: $color-dark;
+        color: $colors--light-theme--text-default;
       }
 
       &:hover {

scss/_patterns_tabs.scss

@@ -44,7 +44,7 @@
 
       align-items: center;
       border: none;
-      color: $color-dark;
+      color: $colors--light-theme--text-default;
       display: flex;
       gap: $sph--small;
       height: 100%;

scss/_settings_colors.scss

@@ -95,7 +95,7 @@ $states: (
 // --border-low-contrast  - low contrast version of border color, to be used when border needs more visibility (separators)
 
 // Light theme
-$colors--light-theme--text-default: #111 !default;
+$colors--light-theme--text-default: #000 !default;
 $colors--light-theme--text-muted: rgba($color-x-dark, $muted-text-opacity-amount) !default;
 $colors--light-theme--text-inactive: rgba($color-x-dark, $inactive-text-opacity-amount) !default;
 

templates/docs/utilities/functions.md

@@ -32,9 +32,9 @@ This function tests the value of the background's colour and returns light or da
 ```scss
 @function vf-determine-text-color($background-color) {
   @if (lightness($background-color) > 50) {
-    @return $color-dark;
+    @return $colors--light-theme--text-default;
   } @else {
-    @return $color-x-light;
+    @return $colors--dark-theme--text-default;
   }
 }
 ```