From d807a0b4acf112dfcc0c6641ab752afd5d6c1ff8 Mon Sep 17 00:00:00 2001
From: "D. Moonfire" <d.moonfire@moonfire.us>
Date: Sat, 24 Feb 2024 12:10:52 -0600
Subject: [PATCH] chore: added in the examples

---
 {src => examples}/index.html | 409 ++++++++++++++++++-----------------
 examples/style.css           |   2 +
 src/style.css                |   2 -
 3 files changed, 208 insertions(+), 205 deletions(-)
 rename {src => examples}/index.html (69%)
 create mode 100644 examples/style.css
 delete mode 100644 src/style.css

diff --git a/src/index.html b/examples/index.html
similarity index 69%
rename from src/index.html
rename to examples/index.html
index 180e73f..7515021 100644
--- a/src/index.html
+++ b/examples/index.html
@@ -6,7 +6,7 @@
     <link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
     <style>
       :root {
-        --color-hue: 180;
+        --color-priduck-hue: 180;
       }
 
       /* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
@@ -59,7 +59,7 @@
         min-width: 5em;
         min-height: 1em;
         border: 1px solid black;
-        background-color: lch(50% 100 var(--color-hue));
+        background-color: lch(50% 100 var(--color-priduck-hue));
       }
 
       td,
@@ -69,605 +69,605 @@
       }
 
       .fg-c0b0 {
-        color: var(--color-c0b0);
+        color: var(--color-priduck-c0b0);
       }
       .fg-c1b0 {
-        color: var(--color-c1b0);
+        color: var(--color-priduck-c1b0);
       }
       .fg-c2b0 {
-        color: var(--color-c2b0);
+        color: var(--color-priduck-c2b0);
       }
       .fg-c3b0 {
-        color: var(--color-c3b0);
+        color: var(--color-priduck-c3b0);
       }
       .fg-c4b0 {
-        color: var(--color-c4b0);
+        color: var(--color-priduck-c4b0);
       }
       .fg-c5b0 {
-        color: var(--color-c5b0);
+        color: var(--color-priduck-c5b0);
       }
       .fg-c6b0 {
-        color: var(--color-c6b0);
+        color: var(--color-priduck-c6b0);
       }
       .fg-c7b0 {
-        color: var(--color-c7b0);
+        color: var(--color-priduck-c7b0);
       }
       .fg-c8b0 {
-        color: var(--color-c8b0);
+        color: var(--color-priduck-c8b0);
       }
       .fg-c9b0 {
-        color: var(--color-c9b0);
+        color: var(--color-priduck-c9b0);
       }
       .fg-c0b1 {
-        color: var(--color-c0b1);
+        color: var(--color-priduck-c0b1);
       }
       .fg-c1b1 {
-        color: var(--color-c1b1);
+        color: var(--color-priduck-c1b1);
       }
       .fg-c2b1 {
-        color: var(--color-c2b1);
+        color: var(--color-priduck-c2b1);
       }
       .fg-c3b1 {
-        color: var(--color-c3b1);
+        color: var(--color-priduck-c3b1);
       }
       .fg-c4b1 {
-        color: var(--color-c4b1);
+        color: var(--color-priduck-c4b1);
       }
       .fg-c5b1 {
-        color: var(--color-c5b1);
+        color: var(--color-priduck-c5b1);
       }
       .fg-c6b1 {
-        color: var(--color-c6b1);
+        color: var(--color-priduck-c6b1);
       }
       .fg-c7b1 {
-        color: var(--color-c7b1);
+        color: var(--color-priduck-c7b1);
       }
       .fg-c8b1 {
-        color: var(--color-c8b1);
+        color: var(--color-priduck-c8b1);
       }
       .fg-c9b1 {
-        color: var(--color-c9b1);
+        color: var(--color-priduck-c9b1);
       }
       .fg-c0b2 {
-        color: var(--color-c0b2);
+        color: var(--color-priduck-c0b2);
       }
       .fg-c1b2 {
-        color: var(--color-c1b2);
+        color: var(--color-priduck-c1b2);
       }
       .fg-c2b2 {
-        color: var(--color-c2b2);
+        color: var(--color-priduck-c2b2);
       }
       .fg-c3b2 {
-        color: var(--color-c3b2);
+        color: var(--color-priduck-c3b2);
       }
       .fg-c4b2 {
-        color: var(--color-c4b2);
+        color: var(--color-priduck-c4b2);
       }
       .fg-c5b2 {
-        color: var(--color-c5b2);
+        color: var(--color-priduck-c5b2);
       }
       .fg-c6b2 {
-        color: var(--color-c6b2);
+        color: var(--color-priduck-c6b2);
       }
       .fg-c7b2 {
-        color: var(--color-c7b2);
+        color: var(--color-priduck-c7b2);
       }
       .fg-c8b2 {
-        color: var(--color-c8b2);
+        color: var(--color-priduck-c8b2);
       }
       .fg-c9b2 {
-        color: var(--color-c9b2);
+        color: var(--color-priduck-c9b2);
       }
       .fg-c0b3 {
-        color: var(--color-c0b3);
+        color: var(--color-priduck-c0b3);
       }
       .fg-c1b3 {
-        color: var(--color-c1b3);
+        color: var(--color-priduck-c1b3);
       }
       .fg-c2b3 {
-        color: var(--color-c2b3);
+        color: var(--color-priduck-c2b3);
       }
       .fg-c3b3 {
-        color: var(--color-c3b3);
+        color: var(--color-priduck-c3b3);
       }
       .fg-c4b3 {
-        color: var(--color-c4b3);
+        color: var(--color-priduck-c4b3);
       }
       .fg-c5b3 {
-        color: var(--color-c5b3);
+        color: var(--color-priduck-c5b3);
       }
       .fg-c6b3 {
-        color: var(--color-c6b3);
+        color: var(--color-priduck-c6b3);
       }
       .fg-c7b3 {
-        color: var(--color-c7b3);
+        color: var(--color-priduck-c7b3);
       }
       .fg-c8b3 {
-        color: var(--color-c8b3);
+        color: var(--color-priduck-c8b3);
       }
       .fg-c9b3 {
-        color: var(--color-c9b3);
+        color: var(--color-priduck-c9b3);
       }
       .fg-c0b4 {
-        color: var(--color-c0b4);
+        color: var(--color-priduck-c0b4);
       }
       .fg-c1b4 {
-        color: var(--color-c1b4);
+        color: var(--color-priduck-c1b4);
       }
       .fg-c2b4 {
-        color: var(--color-c2b4);
+        color: var(--color-priduck-c2b4);
       }
       .fg-c3b4 {
-        color: var(--color-c3b4);
+        color: var(--color-priduck-c3b4);
       }
       .fg-c4b4 {
-        color: var(--color-c4b4);
+        color: var(--color-priduck-c4b4);
       }
       .fg-c5b4 {
-        color: var(--color-c5b4);
+        color: var(--color-priduck-c5b4);
       }
       .fg-c6b4 {
-        color: var(--color-c6b4);
+        color: var(--color-priduck-c6b4);
       }
       .fg-c7b4 {
-        color: var(--color-c7b4);
+        color: var(--color-priduck-c7b4);
       }
       .fg-c8b4 {
-        color: var(--color-c8b4);
+        color: var(--color-priduck-c8b4);
       }
       .fg-c9b4 {
-        color: var(--color-c9b4);
+        color: var(--color-priduck-c9b4);
       }
       .fg-c0b5 {
-        color: var(--color-c0b5);
+        color: var(--color-priduck-c0b5);
       }
       .fg-c1b5 {
-        color: var(--color-c1b5);
+        color: var(--color-priduck-c1b5);
       }
       .fg-c2b5 {
-        color: var(--color-c2b5);
+        color: var(--color-priduck-c2b5);
       }
       .fg-c3b5 {
-        color: var(--color-c3b5);
+        color: var(--color-priduck-c3b5);
       }
       .fg-c4b5 {
-        color: var(--color-c4b5);
+        color: var(--color-priduck-c4b5);
       }
       .fg-c5b5 {
-        color: var(--color-c5b5);
+        color: var(--color-priduck-c5b5);
       }
       .fg-c6b5 {
-        color: var(--color-c6b5);
+        color: var(--color-priduck-c6b5);
       }
       .fg-c7b5 {
-        color: var(--color-c7b5);
+        color: var(--color-priduck-c7b5);
       }
       .fg-c8b5 {
-        color: var(--color-c8b5);
+        color: var(--color-priduck-c8b5);
       }
       .fg-c9b5 {
-        color: var(--color-c9b5);
+        color: var(--color-priduck-c9b5);
       }
       .fg-c0b6 {
-        color: var(--color-c0b6);
+        color: var(--color-priduck-c0b6);
       }
       .fg-c1b6 {
-        color: var(--color-c1b6);
+        color: var(--color-priduck-c1b6);
       }
       .fg-c2b6 {
-        color: var(--color-c2b6);
+        color: var(--color-priduck-c2b6);
       }
       .fg-c3b6 {
-        color: var(--color-c3b6);
+        color: var(--color-priduck-c3b6);
       }
       .fg-c4b6 {
-        color: var(--color-c4b6);
+        color: var(--color-priduck-c4b6);
       }
       .fg-c5b6 {
-        color: var(--color-c5b6);
+        color: var(--color-priduck-c5b6);
       }
       .fg-c6b6 {
-        color: var(--color-c6b6);
+        color: var(--color-priduck-c6b6);
       }
       .fg-c7b6 {
-        color: var(--color-c7b6);
+        color: var(--color-priduck-c7b6);
       }
       .fg-c8b6 {
-        color: var(--color-c8b6);
+        color: var(--color-priduck-c8b6);
       }
       .fg-c9b6 {
-        color: var(--color-c9b6);
+        color: var(--color-priduck-c9b6);
       }
       .fg-c0b7 {
-        color: var(--color-c0b7);
+        color: var(--color-priduck-c0b7);
       }
       .fg-c1b7 {
-        color: var(--color-c1b7);
+        color: var(--color-priduck-c1b7);
       }
       .fg-c2b7 {
-        color: var(--color-c2b7);
+        color: var(--color-priduck-c2b7);
       }
       .fg-c3b7 {
-        color: var(--color-c3b7);
+        color: var(--color-priduck-c3b7);
       }
       .fg-c4b7 {
-        color: var(--color-c4b7);
+        color: var(--color-priduck-c4b7);
       }
       .fg-c5b7 {
-        color: var(--color-c5b7);
+        color: var(--color-priduck-c5b7);
       }
       .fg-c6b7 {
-        color: var(--color-c6b7);
+        color: var(--color-priduck-c6b7);
       }
       .fg-c7b7 {
-        color: var(--color-c7b7);
+        color: var(--color-priduck-c7b7);
       }
       .fg-c8b7 {
-        color: var(--color-c8b7);
+        color: var(--color-priduck-c8b7);
       }
       .fg-c9b7 {
-        color: var(--color-c9b7);
+        color: var(--color-priduck-c9b7);
       }
       .fg-c0b8 {
-        color: var(--color-c0b8);
+        color: var(--color-priduck-c0b8);
       }
       .fg-c1b8 {
-        color: var(--color-c1b8);
+        color: var(--color-priduck-c1b8);
       }
       .fg-c2b8 {
-        color: var(--color-c2b8);
+        color: var(--color-priduck-c2b8);
       }
       .fg-c3b8 {
-        color: var(--color-c3b8);
+        color: var(--color-priduck-c3b8);
       }
       .fg-c4b8 {
-        color: var(--color-c4b8);
+        color: var(--color-priduck-c4b8);
       }
       .fg-c5b8 {
-        color: var(--color-c5b8);
+        color: var(--color-priduck-c5b8);
       }
       .fg-c6b8 {
-        color: var(--color-c6b8);
+        color: var(--color-priduck-c6b8);
       }
       .fg-c7b8 {
-        color: var(--color-c7b8);
+        color: var(--color-priduck-c7b8);
       }
       .fg-c8b8 {
-        color: var(--color-c8b8);
+        color: var(--color-priduck-c8b8);
       }
       .fg-c9b8 {
-        color: var(--color-c9b8);
+        color: var(--color-priduck-c9b8);
       }
       .fg-c0b9 {
-        color: var(--color-c0b9);
+        color: var(--color-priduck-c0b9);
       }
       .fg-c1b9 {
-        color: var(--color-c1b9);
+        color: var(--color-priduck-c1b9);
       }
       .fg-c2b9 {
-        color: var(--color-c2b9);
+        color: var(--color-priduck-c2b9);
       }
       .fg-c3b9 {
-        color: var(--color-c3b9);
+        color: var(--color-priduck-c3b9);
       }
       .fg-c4b9 {
-        color: var(--color-c4b9);
+        color: var(--color-priduck-c4b9);
       }
       .fg-c5b9 {
-        color: var(--color-c5b9);
+        color: var(--color-priduck-c5b9);
       }
       .fg-c6b9 {
-        color: var(--color-c6b9);
+        color: var(--color-priduck-c6b9);
       }
       .fg-c7b9 {
-        color: var(--color-c7b9);
+        color: var(--color-priduck-c7b9);
       }
       .fg-c8b9 {
-        color: var(--color-c8b9);
+        color: var(--color-priduck-c8b9);
       }
       .fg-c9b9 {
-        color: var(--color-c9b9);
+        color: var(--color-priduck-c9b9);
       }
 
       .bg-c0b0 {
-        background-color: var(--color-c0b0);
+        background-color: var(--color-priduck-c0b0);
       }
       .bg-c1b0 {
-        background-color: var(--color-c1b0);
+        background-color: var(--color-priduck-c1b0);
       }
       .bg-c2b0 {
-        background-color: var(--color-c2b0);
+        background-color: var(--color-priduck-c2b0);
       }
       .bg-c3b0 {
-        background-color: var(--color-c3b0);
+        background-color: var(--color-priduck-c3b0);
       }
       .bg-c4b0 {
-        background-color: var(--color-c4b0);
+        background-color: var(--color-priduck-c4b0);
       }
       .bg-c5b0 {
-        background-color: var(--color-c5b0);
+        background-color: var(--color-priduck-c5b0);
       }
       .bg-c6b0 {
-        background-color: var(--color-c6b0);
+        background-color: var(--color-priduck-c6b0);
       }
       .bg-c7b0 {
-        background-color: var(--color-c7b0);
+        background-color: var(--color-priduck-c7b0);
       }
       .bg-c8b0 {
-        background-color: var(--color-c8b0);
+        background-color: var(--color-priduck-c8b0);
       }
       .bg-c9b0 {
-        background-color: var(--color-c9b0);
+        background-color: var(--color-priduck-c9b0);
       }
       .bg-c0b1 {
-        background-color: var(--color-c0b1);
+        background-color: var(--color-priduck-c0b1);
       }
       .bg-c1b1 {
-        background-color: var(--color-c1b1);
+        background-color: var(--color-priduck-c1b1);
       }
       .bg-c2b1 {
-        background-color: var(--color-c2b1);
+        background-color: var(--color-priduck-c2b1);
       }
       .bg-c3b1 {
-        background-color: var(--color-c3b1);
+        background-color: var(--color-priduck-c3b1);
       }
       .bg-c4b1 {
-        background-color: var(--color-c4b1);
+        background-color: var(--color-priduck-c4b1);
       }
       .bg-c5b1 {
-        background-color: var(--color-c5b1);
+        background-color: var(--color-priduck-c5b1);
       }
       .bg-c6b1 {
-        background-color: var(--color-c6b1);
+        background-color: var(--color-priduck-c6b1);
       }
       .bg-c7b1 {
-        background-color: var(--color-c7b1);
+        background-color: var(--color-priduck-c7b1);
       }
       .bg-c8b1 {
-        background-color: var(--color-c8b1);
+        background-color: var(--color-priduck-c8b1);
       }
       .bg-c9b1 {
-        background-color: var(--color-c9b1);
+        background-color: var(--color-priduck-c9b1);
       }
       .bg-c0b2 {
-        background-color: var(--color-c0b2);
+        background-color: var(--color-priduck-c0b2);
       }
       .bg-c1b2 {
-        background-color: var(--color-c1b2);
+        background-color: var(--color-priduck-c1b2);
       }
       .bg-c2b2 {
-        background-color: var(--color-c2b2);
+        background-color: var(--color-priduck-c2b2);
       }
       .bg-c3b2 {
-        background-color: var(--color-c3b2);
+        background-color: var(--color-priduck-c3b2);
       }
       .bg-c4b2 {
-        background-color: var(--color-c4b2);
+        background-color: var(--color-priduck-c4b2);
       }
       .bg-c5b2 {
-        background-color: var(--color-c5b2);
+        background-color: var(--color-priduck-c5b2);
       }
       .bg-c6b2 {
-        background-color: var(--color-c6b2);
+        background-color: var(--color-priduck-c6b2);
       }
       .bg-c7b2 {
-        background-color: var(--color-c7b2);
+        background-color: var(--color-priduck-c7b2);
       }
       .bg-c8b2 {
-        background-color: var(--color-c8b2);
+        background-color: var(--color-priduck-c8b2);
       }
       .bg-c9b2 {
-        background-color: var(--color-c9b2);
+        background-color: var(--color-priduck-c9b2);
       }
       .bg-c0b3 {
-        background-color: var(--color-c0b3);
+        background-color: var(--color-priduck-c0b3);
       }
       .bg-c1b3 {
-        background-color: var(--color-c1b3);
+        background-color: var(--color-priduck-c1b3);
       }
       .bg-c2b3 {
-        background-color: var(--color-c2b3);
+        background-color: var(--color-priduck-c2b3);
       }
       .bg-c3b3 {
-        background-color: var(--color-c3b3);
+        background-color: var(--color-priduck-c3b3);
       }
       .bg-c4b3 {
-        background-color: var(--color-c4b3);
+        background-color: var(--color-priduck-c4b3);
       }
       .bg-c5b3 {
-        background-color: var(--color-c5b3);
+        background-color: var(--color-priduck-c5b3);
       }
       .bg-c6b3 {
-        background-color: var(--color-c6b3);
+        background-color: var(--color-priduck-c6b3);
       }
       .bg-c7b3 {
-        background-color: var(--color-c7b3);
+        background-color: var(--color-priduck-c7b3);
       }
       .bg-c8b3 {
-        background-color: var(--color-c8b3);
+        background-color: var(--color-priduck-c8b3);
       }
       .bg-c9b3 {
-        background-color: var(--color-c9b3);
+        background-color: var(--color-priduck-c9b3);
       }
       .bg-c0b4 {
-        background-color: var(--color-c0b4);
+        background-color: var(--color-priduck-c0b4);
       }
       .bg-c1b4 {
-        background-color: var(--color-c1b4);
+        background-color: var(--color-priduck-c1b4);
       }
       .bg-c2b4 {
-        background-color: var(--color-c2b4);
+        background-color: var(--color-priduck-c2b4);
       }
       .bg-c3b4 {
-        background-color: var(--color-c3b4);
+        background-color: var(--color-priduck-c3b4);
       }
       .bg-c4b4 {
-        background-color: var(--color-c4b4);
+        background-color: var(--color-priduck-c4b4);
       }
       .bg-c5b4 {
-        background-color: var(--color-c5b4);
+        background-color: var(--color-priduck-c5b4);
       }
       .bg-c6b4 {
-        background-color: var(--color-c6b4);
+        background-color: var(--color-priduck-c6b4);
       }
       .bg-c7b4 {
-        background-color: var(--color-c7b4);
+        background-color: var(--color-priduck-c7b4);
       }
       .bg-c8b4 {
-        background-color: var(--color-c8b4);
+        background-color: var(--color-priduck-c8b4);
       }
       .bg-c9b4 {
-        background-color: var(--color-c9b4);
+        background-color: var(--color-priduck-c9b4);
       }
       .bg-c0b5 {
-        background-color: var(--color-c0b5);
+        background-color: var(--color-priduck-c0b5);
       }
       .bg-c1b5 {
-        background-color: var(--color-c1b5);
+        background-color: var(--color-priduck-c1b5);
       }
       .bg-c2b5 {
-        background-color: var(--color-c2b5);
+        background-color: var(--color-priduck-c2b5);
       }
       .bg-c3b5 {
-        background-color: var(--color-c3b5);
+        background-color: var(--color-priduck-c3b5);
       }
       .bg-c4b5 {
-        background-color: var(--color-c4b5);
+        background-color: var(--color-priduck-c4b5);
       }
       .bg-c5b5 {
-        background-color: var(--color-c5b5);
+        background-color: var(--color-priduck-c5b5);
       }
       .bg-c6b5 {
-        background-color: var(--color-c6b5);
+        background-color: var(--color-priduck-c6b5);
       }
       .bg-c7b5 {
-        background-color: var(--color-c7b5);
+        background-color: var(--color-priduck-c7b5);
       }
       .bg-c8b5 {
-        background-color: var(--color-c8b5);
+        background-color: var(--color-priduck-c8b5);
       }
       .bg-c9b5 {
-        background-color: var(--color-c9b5);
+        background-color: var(--color-priduck-c9b5);
       }
       .bg-c0b6 {
-        background-color: var(--color-c0b6);
+        background-color: var(--color-priduck-c0b6);
       }
       .bg-c1b6 {
-        background-color: var(--color-c1b6);
+        background-color: var(--color-priduck-c1b6);
       }
       .bg-c2b6 {
-        background-color: var(--color-c2b6);
+        background-color: var(--color-priduck-c2b6);
       }
       .bg-c3b6 {
-        background-color: var(--color-c3b6);
+        background-color: var(--color-priduck-c3b6);
       }
       .bg-c4b6 {
-        background-color: var(--color-c4b6);
+        background-color: var(--color-priduck-c4b6);
       }
       .bg-c5b6 {
-        background-color: var(--color-c5b6);
+        background-color: var(--color-priduck-c5b6);
       }
       .bg-c6b6 {
-        background-color: var(--color-c6b6);
+        background-color: var(--color-priduck-c6b6);
       }
       .bg-c7b6 {
-        background-color: var(--color-c7b6);
+        background-color: var(--color-priduck-c7b6);
       }
       .bg-c8b6 {
-        background-color: var(--color-c8b6);
+        background-color: var(--color-priduck-c8b6);
       }
       .bg-c9b6 {
-        background-color: var(--color-c9b6);
+        background-color: var(--color-priduck-c9b6);
       }
       .bg-c0b7 {
-        background-color: var(--color-c0b7);
+        background-color: var(--color-priduck-c0b7);
       }
       .bg-c1b7 {
-        background-color: var(--color-c1b7);
+        background-color: var(--color-priduck-c1b7);
       }
       .bg-c2b7 {
-        background-color: var(--color-c2b7);
+        background-color: var(--color-priduck-c2b7);
       }
       .bg-c3b7 {
-        background-color: var(--color-c3b7);
+        background-color: var(--color-priduck-c3b7);
       }
       .bg-c4b7 {
-        background-color: var(--color-c4b7);
+        background-color: var(--color-priduck-c4b7);
       }
       .bg-c5b7 {
-        background-color: var(--color-c5b7);
+        background-color: var(--color-priduck-c5b7);
       }
       .bg-c6b7 {
-        background-color: var(--color-c6b7);
+        background-color: var(--color-priduck-c6b7);
       }
       .bg-c7b7 {
-        background-color: var(--color-c7b7);
+        background-color: var(--color-priduck-c7b7);
       }
       .bg-c8b7 {
-        background-color: var(--color-c8b7);
+        background-color: var(--color-priduck-c8b7);
       }
       .bg-c9b7 {
-        background-color: var(--color-c9b7);
+        background-color: var(--color-priduck-c9b7);
       }
       .bg-c0b8 {
-        background-color: var(--color-c0b8);
+        background-color: var(--color-priduck-c0b8);
       }
       .bg-c1b8 {
-        background-color: var(--color-c1b8);
+        background-color: var(--color-priduck-c1b8);
       }
       .bg-c2b8 {
-        background-color: var(--color-c2b8);
+        background-color: var(--color-priduck-c2b8);
       }
       .bg-c3b8 {
-        background-color: var(--color-c3b8);
+        background-color: var(--color-priduck-c3b8);
       }
       .bg-c4b8 {
-        background-color: var(--color-c4b8);
+        background-color: var(--color-priduck-c4b8);
       }
       .bg-c5b8 {
-        background-color: var(--color-c5b8);
+        background-color: var(--color-priduck-c5b8);
       }
       .bg-c6b8 {
-        background-color: var(--color-c6b8);
+        background-color: var(--color-priduck-c6b8);
       }
       .bg-c7b8 {
-        background-color: var(--color-c7b8);
+        background-color: var(--color-priduck-c7b8);
       }
       .bg-c8b8 {
-        background-color: var(--color-c8b8);
+        background-color: var(--color-priduck-c8b8);
       }
       .bg-c9b8 {
-        background-color: var(--color-c9b8);
+        background-color: var(--color-priduck-c9b8);
       }
       .bg-c0b9 {
-        background-color: var(--color-c0b9);
+        background-color: var(--color-priduck-c0b9);
       }
       .bg-c1b9 {
-        background-color: var(--color-c1b9);
+        background-color: var(--color-priduck-c1b9);
       }
       .bg-c2b9 {
-        background-color: var(--color-c2b9);
+        background-color: var(--color-priduck-c2b9);
       }
       .bg-c3b9 {
-        background-color: var(--color-c3b9);
+        background-color: var(--color-priduck-c3b9);
       }
       .bg-c4b9 {
-        background-color: var(--color-c4b9);
+        background-color: var(--color-priduck-c4b9);
       }
       .bg-c5b9 {
-        background-color: var(--color-c5b9);
+        background-color: var(--color-priduck-c5b9);
       }
       .bg-c6b9 {
-        background-color: var(--color-c6b9);
+        background-color: var(--color-priduck-c6b9);
       }
       .bg-c7b9 {
-        background-color: var(--color-c7b9);
+        background-color: var(--color-priduck-c7b9);
       }
       .bg-c8b9 {
-        background-color: var(--color-c8b9);
+        background-color: var(--color-priduck-c8b9);
       }
       .bg-c9b9 {
-        background-color: var(--color-c9b9);
+        background-color: var(--color-priduck-c9b9);
       }
 
       .controls {
@@ -1105,7 +1105,10 @@
 
     // Update the current slider value (each time you drag the slider handle)
     slider.oninput = function () {
-      document.documentElement.style.setProperty("--color-hue", this.value);
+      document.documentElement.style.setProperty(
+        "--color-priduck-hue",
+        this.value,
+      );
       output.innerHTML = this.value;
     };
 
diff --git a/examples/style.css b/examples/style.css
new file mode 100644
index 0000000..fcb87be
--- /dev/null
+++ b/examples/style.css
@@ -0,0 +1,2 @@
+@import url("../dist/colors.css");
+@import url("../dist/theme.css");
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index dee2322..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,2 +0,0 @@
-@import url("./colors.css");
-@import url("./theme.css");