From 3be772677564458f16cceb70caa707de7b9094d6 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 7 Aug 2024 04:16:15 +0300
Subject: [PATCH] Style color input, add color picker to the demo

---
 content/demo/index.md | 76 +++++++++++++++++++++++++++++++++++++++++++
 sass/_input.scss      | 31 +++++++++++++++++-
 2 files changed, 106 insertions(+), 1 deletion(-)

diff --git a/content/demo/index.md b/content/demo/index.md
index 1db8a00..121e620 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -11,6 +11,82 @@ This is a demo of most of the components, but some of them are only accessible o
 - [Post Demo](@/blog/the-quill-of-duck/index.md)
 {% end %}
 
+<!-- For the demo purposes only -->
+<div id="color-picker-container">
+<label for="color-picker">Primary color:</label>
+<input id="color-picker" type="color" />
+</div>
+
+<style>
+  #color-picker-container {
+      -webkit-backdrop-filter: var(--blur);
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      transform: translateX(calc(-100% + 1rem));
+      z-index: 1;
+      backdrop-filter: var(--blur);
+      transition: var(--transition);
+      box-shadow: var(--edge-highlight);
+      border-start-end-radius: var(--rounded-corner);
+      background-color: var(--nav-bg);
+      padding: 0.5rem;
+  }
+
+  #color-picker-container:hover {
+      transform: none;
+  }
+
+  #color-picker-container label {
+      margin-inline-end: 0.25rem;
+      color: var(--fg-muted-4);
+      font-weight: bold;
+  }
+
+  :root[dir*="rtl"] #color-picker-container {
+      right: 0;
+      left: unset;
+      transform: translateX(calc(100% - 1rem));
+  }
+
+  :root[dir*="rtl"] #color-picker-container:hover {
+      transform: none;
+  }
+</style>
+
+<script>
+  let colorPicker;
+  const defaultColor = window.getComputedStyle(document.documentElement).getPropertyValue("--primary-color");
+  console.log(defaultColor);
+
+  window.addEventListener("load", startup, false);
+
+  function hexToRGB(hex, alpha) {
+    var r = parseInt(hex.slice(1, 3), 16),
+      g = parseInt(hex.slice(3, 5), 16),
+      b = parseInt(hex.slice(5, 7), 16);
+
+    if (alpha) {
+      return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+    } else {
+      return "rgb(" + r + ", " + g + ", " + b + ")";
+    }
+  }
+
+  function startup() {
+    colorPicker = document.querySelector("#color-picker");
+    colorPicker.value = defaultColor;
+    colorPicker.addEventListener("input", update, false);
+    colorPicker.select();
+  }
+
+  function update(event) {
+    document.documentElement.style.setProperty('--primary-color', event.target.value);
+    document.documentElement.style.setProperty('--primary-color-alpha', hexToRGB(event.target.value, 0.2));
+  }
+</script>
+<!-- End -->
+
 ## Markdown
 
 Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***.
diff --git a/sass/_input.scss b/sass/_input.scss
index a688264..115c8b8 100644
--- a/sass/_input.scss
+++ b/sass/_input.scss
@@ -1,5 +1,6 @@
 input[type="radio"],
-input[type="checkbox"] {
+input[type="checkbox"],
+input[type="color"] {
 	-webkit-appearance: none;
 	position: relative;
 	appearance: none;
@@ -52,6 +53,7 @@ input[type="checkbox"] {
 }
 
 input[type="radio"] {
+    vertical-align: -0.1875em;
 	border-radius: 50%;
 
 	&::before {
@@ -64,6 +66,7 @@ input[type="radio"] {
 }
 
 input[type="checkbox"] {
+    vertical-align: -0.1875em;
 	border-radius: calc(var(--rounded-corner-small) / 2);
 
 	&::before {
@@ -80,3 +83,29 @@ input[type="checkbox"] {
 		content: "";
 	}
 }
+
+input[type="color"] {
+    vertical-align: -0.375em;
+    border: 0.25rem solid var(--fg-muted-2);
+    border-radius: var(--rounded-corner-small);
+    padding: 0;
+    width: 3rem;
+    height: 2rem;
+
+    &:hover {
+        background-color: var(--fg-muted-2);
+    }
+
+    &::-moz-color-swatch {
+        border: none;
+        border-radius: calc(var(--rounded-corner-small) / 2);
+    }
+
+    &::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+        border-radius: calc(var(--rounded-corner-small) / 2);
+    }
+}