From c18e027077b6d0bc9971783e0cb3798e27d4985b Mon Sep 17 00:00:00 2001
From: Knah-Tsaeb <Knah-Tsaeb@knah-tsaeb.org>
Date: Thu, 5 Dec 2024 16:10:55 +0100
Subject: [PATCH] Split color var into new css file

---
 css.css       | 61 ---------------------------------
 index.html    |  1 +
 kt-scheme.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 61 deletions(-)
 create mode 100644 kt-scheme.css

diff --git a/css.css b/css.css
index ce94f79..d1f39b6 100644
--- a/css.css
+++ b/css.css
@@ -1,64 +1,3 @@
-:root {
-    color-scheme: light dark;
-
-    --primary: #cc2027;
-    --primary-darken: #8E161B;
-    --primary-lighten: #D64C52;
-    --primary-text-contrast: #FFF;
-
-    --secondary: #20ccc5;
-    --secondary-darken: #168E89;
-    --secondary-lighten: #4CD6D0;
-    --secondary-text-contrast: #000;
-
-    --error: #c43933;
-    --error-darken: #892723;
-    --error-lighten: #CF605B;
-    --error-text-contrast: #FFF;
-
-    --info: #206ccc;
-    --info-darken: #164B8E;
-    --info-lighten: #4C89D6;
-    --info-text-contrast: #FFF;
-
-    --success: #7dcc20;
-    --success-darken: #578E16;
-    --success-lighten: #97D64C;
-    --success-text-contrast: #000;
-
-    --warning: #cc5e20;
-    --warning-darken: #8E4116;
-    --warning-lighten: #D67E4C;
-    --warning-text-contrast: #FFF;
-
-    --background-color: light-dark(#fffbfb, #171414);
-    --background-color-darken: light-dark(#B2AFAF, #100E0E);
-    --background-color-lighten: light-dark(#FFFBFB, #454343);
-
-    --header-background-color: light-dark(#171414, #fffbfb);
-    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
-    --header-background-color-lighten: light-dark(#454343, #FFFBFB);
-
-    --header-text-color: light-dark(#fffbfb, #171414);
-    --header-text-color-secondary: #ffffffb3;
-    --header-text-color-disable: light-dark(#ffffff80, #454343);
-
-    --text-color: light-dark(#171414, #fffbfb);
-    --text-color-secondary: #ffffffb3;
-    --text-color-disable: light-dark(#454343, #ffffff80);
-
-    --text-color-inverse: light-dark(#fffbfb, #171414);
-    --text-color-secondary-inverse: #ffffffb3;
-    --text-color-disable-inverse: light-dark(#ffffff80, #454343);
-
-    --h1-color: var(--primary);
-    --h2-color: #c33d35;
-    --h3-color: #b94f44;
-    --h4-color: #ae5e52;
-    --h5-color: #a16a61;
-    --h6-color: #927671;
-}
-
 [data-theme=dark] {
     /* DEF */
     --pico-background-color: #13171f;
diff --git a/index.html b/index.html
index 4c648e5..6e15c22 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <meta name="description" content="A pure HTML example, without dependencies." />
 
     <!-- Pico.css -->
+    <link rel="stylesheet" href="kt-scheme.css" />
     <link rel="stylesheet" href="pico.min.css" />
     <link rel="stylesheet" href="css.css" />
 </head>
diff --git a/kt-scheme.css b/kt-scheme.css
new file mode 100644
index 0000000..29c1470
--- /dev/null
+++ b/kt-scheme.css
@@ -0,0 +1,95 @@
+:root {
+    color-scheme: dark light;
+
+    --primary: #cc2027;
+    --primary-darken: #8E161B;
+    --primary-lighten: #D64C52;
+    --primary-text-contrast: #FFF;
+
+    --secondary: #20ccc5;
+    --secondary-darken: #168E89;
+    --secondary-lighten: #4CD6D0;
+    --secondary-text-contrast: #000;
+
+    --error: #c43933;
+    --error-darken: #892723;
+    --error-lighten: #CF605B;
+    --error-text-contrast: #FFF;
+
+    --info: #206ccc;
+    --info-darken: #164B8E;
+    --info-lighten: #4C89D6;
+    --info-text-contrast: #FFF;
+
+    --success: #7dcc20;
+    --success-darken: #578E16;
+    --success-lighten: #97D64C;
+    --success-text-contrast: #000;
+
+    --warning: #cc5e20;
+    --warning-darken: #8E4116;
+    --warning-lighten: #D67E4C;
+    --warning-text-contrast: #FFF;
+
+    --divider: light-dark(#B2AFAF, #454343);
+
+    --background-color: light-dark(#fffbfb, #171414);
+    --background-color-darken: light-dark(#B2AFAF, #100E0E);
+    --background-color-lighten: light-dark(#FFFBFB, #454343);
+
+    --light-background-color: #fffbfb;
+    --dark-background-color: #171414;
+
+    --header-background-color: light-dark(#171414, #fffbfb);
+    --header-background-color-darken: light-dark(#100E0E, #B2AFAF);
+    --header-background-color-lighten: light-dark(#454343, #FFFBFB);
+
+    --header-text-color: light-dark(#fffbfb, #171414);
+    --header-text-color-secondary: #ffffffb3;
+    --header-text-color-disable: var(--divider);
+
+    --text-color: light-dark(#171414, #fffbfb);
+    --text-color-secondary: #ffffffb3;
+    --text-color-disable: light-dark(#454343, #B2AFAF);
+
+    --light-text-color: #171414;
+    --dark-text-color: #fffbfb;
+
+    --text-color-inverse: light-dark(#fffbfb, #171414);
+    --text-color-secondary-inverse: #ffffffb3;
+    --text-color-disable-inverse: var(--divider);
+
+    --box-shadow-light: .4rem .4rem 0px .1rem #B2AFAF;
+    --box-shadow-dark: .4rem .4rem 0px .1rem #454343;
+    --box-shadow-auto: .4rem .4rem 0px .1rem var(--divider);
+
+    --h1-color: var(--primary);
+    --h2-color: #c33d35;
+    --h3-color: #b94f44;
+    --h4-color: #ae5e52;
+    --h5-color: #a16a61;
+    --h6-color: #927671;
+
+    --font-size: 1.1em;
+    --default-space: .2em;
+}
+
+[data-theme="dark"] {
+    color-scheme: dark;
+}
+
+[data-theme="light"] {
+    color-scheme: light;
+}
+
+[data-theme="dark"] {
+  --background-color: #171414;
+  --text-color: #fffbfb;
+  --text-color-inverse: #171414;
+}
+
+[data-theme="light"] {
+  --background-color: #fffbfb;
+  --text-color: #171414;
+  --text-color-inverse: #fffbfb;
+}