From 4b3c38e111dcf91ea648f651f90e5b71a2abe483 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Mon, 20 Mar 2023 00:11:52 +0000
Subject: [PATCH] Base: Add `accent-color` demo page

Currently this just has checkboxes, though I intend to add support
for more things later :^)
---
 Base/res/html/misc/accent-color.html | 70 ++++++++++++++++++++++++++++
 Base/res/html/misc/welcome.html      |  1 +
 2 files changed, 71 insertions(+)
 create mode 100644 Base/res/html/misc/accent-color.html

diff --git a/Base/res/html/misc/accent-color.html b/Base/res/html/misc/accent-color.html
new file mode 100644
index 0000000000..e4d5c17d2c
--- /dev/null
+++ b/Base/res/html/misc/accent-color.html
@@ -0,0 +1,70 @@
+<style>
+  .big {
+    width: 64px;
+    height: 64px;
+  }
+  .color-light {
+    accent-color: wheat;
+  }
+  .color-dark {
+    accent-color: rebeccapurple
+  }
+</style>
+
+<div>
+  <b>System color</b><br>
+  <input type="checkbox" checked></input>
+  <input type="checkbox" ></input>
+  <input class="indeterminate" type="checkbox"></input>
+  <input type="checkbox" checked disabled></input>
+  <input type="checkbox" disabled></input>
+  <input class="indeterminate" type="checkbox" disabled></input>
+
+  <input class="big" type="checkbox" checked></input>
+  <input class="big" type="checkbox" ></input>
+  <input class="big indeterminate" type="checkbox"></input>
+  <input class="big" type="checkbox" checked disabled></input>
+  <input class="big" type="checkbox" disabled></input>
+  <input class="big indeterminate" type="checkbox" disabled></input>
+</div>
+<br>
+<div class="color-dark">
+  <b>Dark accent color</b><br>
+  <input type="checkbox" checked></input>
+  <input type="checkbox" ></input>
+  <input class="indeterminate" type="checkbox"></input>
+  <input type="checkbox" checked disabled></input>
+  <input type="checkbox" disabled></input>
+  <input class="indeterminate" type="checkbox" disabled></input>
+
+  <input class="big" type="checkbox" checked></input>
+  <input class="big" type="checkbox" ></input>
+  <input class="big indeterminate" type="checkbox"></input>
+  <input class="big" type="checkbox" checked disabled></input>
+  <input class="big" type="checkbox" disabled></input>
+  <input class="big indeterminate" type="checkbox" disabled></input>
+</div>
+<br>
+<div class="color-light">
+  <b>Light accent color</b><br>
+  <input type="checkbox" checked></input>
+  <input type="checkbox" ></input>
+  <input class="indeterminate" type="checkbox"></input>
+  <input type="checkbox" checked disabled></input>
+  <input type="checkbox" disabled></input>
+  <input class="indeterminate" type="checkbox" disabled></input>
+
+  <input class="big" type="checkbox" checked></input>
+  <input class="big" type="checkbox" ></input>
+  <input class="big indeterminate" type="checkbox"></input>
+  <input class="big" type="checkbox" checked disabled></input>
+  <input class="big" type="checkbox" disabled></input>
+  <input class="big indeterminate" type="checkbox" disabled></input>
+</div>
+<br>
+<script>
+document.querySelectorAll(".indeterminate").forEach(checkbox => {
+  checkbox.indeterminate = true;
+});
+
+</script>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 0a99d20b6b..1aaa4cb722 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -140,6 +140,7 @@
             <li><a href="transform.html">Transforms</a></li>
             <li><a href="clip.html">Clip</a></li>
             <li><a href="cursor.html">Cursor</a></li>
+            <li><a href="accent-color.html">accent-color</a></li>
             <li><h3>Features</h3></li>
             <li><a href="css.html">Basic functionality</a></li>
             <li><a href="colors.html">css colors</a></li>