fix: contrast API

feo.css

@@ -960,9 +960,8 @@
   }
 
   .contrast {
-    --bg-color: ;
-    background-color: var(--bg-color);
-    color: lch(from var(--bg-color) calc((49.44 - l) * infinity) 0 0);
+    background-color: var(--contrast-bg);
+    color: lch(from var(--contast-bg) calc((49.44 - l) * infinity) 0 0);
   }
 
   .counted:has( > :first-child) {

package.json

@@ -9,7 +9,7 @@
     "build:11ty": "npx @11ty/eleventy && yarn css:docs"
   },
   "name": "feo-css",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "main": "feo.css",
   "description": "A tiny CSS framework",
   "repository": "https://github.com/vyckes/feo-css.git",

public/demo.css

@@ -39,7 +39,7 @@ footer {
 
 /* Main navigation */
 nav {
-  --bg-color: var(--token-neutral-1);
+  --contrast-bg: var(--token-neutral-1);
 
   z-index: 100;
   /* background-color: var(--token-neutral-1); */

site/utilities/contrast.md

@@ -5,7 +5,7 @@ key: utilities
 subkey: contrast
 ---
 
-Based on some ['magic'](https://til.jakelazaroff.com/css/swap-between-black-and-white-text-based-on-background-color/), the `.contrast` makes it possible to automatically determine the correct `color` based on a background color (set via the `--bg-color` custom property).
+Based on some ['magic'](https://til.jakelazaroff.com/css/swap-between-black-and-white-text-based-on-background-color/), the `.contrast` makes it possible to automatically determine the correct `color` based on a background color (set via the `--contrast-bg` custom property).
 
 <details class="accordion">
   <summary>Did you know?</summary>

src/utilities/contrast.css

@@ -1,9 +1,8 @@
 /* https://til.jakelazaroff.com/css/swap-between-black-and-white-text-based-on-background-color/ */
 
 .contrast {
-  --bg-color: ;
-  background-color: var(--bg-color);
+  background-color: var(--contrast-bg);
   /* This swaps between white or black based on the background color. */
   /* After testing against all RGB background colors, 49.44 minimizes the number of WCAG 4.5:1 contrast failures. */
-  color: lch(from var(--bg-color) calc((49.44 - l) * infinity) 0 0);
+  color: lch(from var(--contast-bg) calc((49.44 - l) * infinity) 0 0);
 }