From 72874430a0727bf0f1cb8abe15afa00cf09bcd6d Mon Sep 17 00:00:00 2001
From: Ayo Ayco <blog@ayco.io>
Date: Mon, 6 Nov 2023 23:14:37 +0100
Subject: [PATCH] style(site): add initial color theme variables

---
 .vscode/settings.json                   | 2 +-
 site/src/components/awesome-header.html | 6 +++++-
 site/src/components/my-head.html        | 9 +++++++++
 site/src/pages/index.html               | 2 +-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a1f8e28..df023f0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-    "editor.formatOnSave": true,
+    "editor.formatOnSave": false,
     "js/ts.implicitProjectConfig.checkJs": true,
     "cSpell.words": [
         "citty",
diff --git a/site/src/components/awesome-header.html b/site/src/components/awesome-header.html
index 17c56f8..27d7e4a 100644
--- a/site/src/components/awesome-header.html
+++ b/site/src/components/awesome-header.html
@@ -1,7 +1,11 @@
 <header
   style="
     border-radius: 5px;
-    background: linear-gradient(45deg, #3054bf, #416fff);
+    background: linear-gradient(
+      45deg in oklch,
+      var(--color-blue),
+      var(--color-blue-fade)
+    );
     color: white;
     padding: 1em;
     margin: 1em auto;
diff --git a/site/src/components/my-head.html b/site/src/components/my-head.html
index f1f1515..0e3c1d0 100644
--- a/site/src/components/my-head.html
+++ b/site/src/components/my-head.html
@@ -24,6 +24,15 @@
     content="McFly is a no-framework framework that assists in leveraging the web platform."
   />
   <style>
+    :root {
+      --color-blue: oklch(48.44% 0.173 265.97);
+      --color-blue-fade: oklch(59.43% 0.22 266.22);
+      --color-green: oklch(70.57% 0.205 144.57);
+      --color-orange: oklch(69.58% 0.125 86.58);
+      --color-red: oklch(54.18% 0.18 7.98);
+      --color-blue-gray: oklch(41.1% 0.059 269.95);
+    }
+
     body {
       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
       max-width: 40em;
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 28bd2c0..6a0d568 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -28,7 +28,7 @@
           full-stack, no-framework framework that assists developers in
           leveraging the web platform.
         </p>
-        <code-block>npm create <strong style="color:#3054bf">mcfly</strong>@latest</code-block>
+        <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
           Here's a sample interactive custom element:
           <vanilla-hello-world data-name="McFly"></vanilla-hello-world>