soften text colors

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.24.1",
+  "version": "0.24.2",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

src/app/App.scss

@@ -75,7 +75,8 @@
         background: radial-gradient(circle at top 25% right 15%, rgba($color-warn-l1, 0.75) 3%, transparent 3%),
           radial-gradient(circle at top 65% right 5%, rgba($color-success-l1, 0.75) 10%, transparent 10%) fixed,
           radial-gradient(circle at bottom 7% left 25%, rgba($color-brand-l1, 0.75) 10%, transparent 10%),
-          radial-gradient(circle at top 30% left -10%, rgba($color-info-d2, 0.75) 30%, transparent 30%) fixed, white;
+          radial-gradient(circle at top 30% left -10%, rgba($color-info-d2, 0.75) 30%, transparent 30%) fixed,
+          $color-neutral-l5;
 
         .simple-page-header {
           background-color: $color-inverse;

src/app/views/design/color/Color.vue

@@ -32,7 +32,7 @@
       </ul>
       <p>
         Another important feature of the palette generator is ensuring accessible contrast ratios of the colors when
-        used in combination with white or black text in light and dark modes.
+        used in combination with text in light and dark modes.
       </p>
       <p>
         It is possible to override the reference colors that any palette is generated from by overriding the color

src/sass/colors/_drawer.scss

@@ -5,6 +5,6 @@
   }
 
   &__overlay {
-    background-color: rgba(black, 0.5);
+    background-color: rgba($color-neutral-d5, 0.5);
   }
 }

src/sass/colors/_modal.scss

@@ -1,3 +1,3 @@
 .neon-modal__overlay {
-  background-color: rgba(black, 0.5);
+  background-color: rgba($color-neutral-d5, 0.5);
 }

src/sass/colors/_switch.scss

@@ -16,7 +16,7 @@
 
     .neon-switch__indicator {
       background-color: $background-color-switch-indicator;
-      box-shadow: 0 0 2px 1px rgba(black, 0.125);
+      box-shadow: 0 0 2px 1px rgba($color-neutral-d5, 0.125);
     }
 
     @each $color, $palette in $functional-colors {
@@ -28,7 +28,7 @@
           }
 
           .neon-switch__indicator {
-            box-shadow: 0 0 2px 1px rgba(black, 0.125);
+            box-shadow: 0 0 2px 1px rgba($color-neutral-d5, 0.125);
           }
         }
       }

src/sass/includes/farbig/_color-functions.scss

@@ -175,7 +175,7 @@ $lab-t3: 0.008856452; // t1 * t1 * t1
   $chroma: nth($hcl, 2);
   $luminance: nth($hcl, 3);
   // check contrast and adjust lightness up if contrast ratio too low
-  @while (contrast-ratio($reference-color, #000) < 4.5) {
+  @while (contrast-ratio($reference-color, $color-text-dark) < 4.5) {
     $luminance: $luminance + 1;
     $reference-color: hcl($hue, $chroma, $luminance);
   }
@@ -193,7 +193,7 @@ $lab-t3: 0.008856452; // t1 * t1 * t1
   $chroma: nth($hcl, 2);
   $luminance: nth($hcl, 3);
   // check contrast and adjust lightness down if contrast ratio too low
-  @while (contrast-ratio($reference-color, #fff) < 4.5) {
+  @while (contrast-ratio($reference-color, $color-text-light) < 4.5) {
     $luminance: $luminance - 1;
     $reference-color: hcl($hue, $chroma, $luminance);
   }

src/sass/includes/farbig/_global-variables.scss

@@ -1,5 +1,5 @@
-$color-text-dark: black !default; // dark text color
-$color-text-light: white !default; // light text color
+$color-text-dark: #242424 !default; // dark text color
+$color-text-light: #eeeeee !default; // light text color
 
 $neutral-luminance-curve: (94, 88, 81, 73, 64, 44, 35, 27, 20, 14) !default;
 $low-contrast-luminance-curve: (88, 81, 72, 60, 48, 68, 55, 44, 35, 28) !default;