From 33512707126584fda03c5f9c0008bdf3a174064b Mon Sep 17 00:00:00 2001
From: EmNudge <24513691+EmNudge@users.noreply.github.com>
Date: Wed, 4 Feb 2026 09:23:53 -0500
Subject: [PATCH] Migrate hardcoded CSS values to design tokens

---
 src/components/EasySearch.vue                 | 43 +++++++------------
 src/components/Header.vue                     |  7 +--
 src/components/Loader.vue                     |  4 +-
 .../advanced-search/AdvancedSearch.vue        | 14 +++---
 src/components/advanced-search/BoxContent.vue | 24 ++++++++---
 src/components/advanced-search/BoxSet.vue     |  6 +--
 src/components/advanced-search/Button.vue     | 13 +++---
 src/components/advanced-search/Dropdown.vue   |  5 ++-
 .../table-container/InfoContainer.vue         | 10 ++---
 src/components/table-container/ResultsRow.vue |  2 +-
 .../table-container/info-tables/Encoding.vue  | 11 ++---
 .../info-tables/HtmlEntities.vue              |  6 +--
 .../info-tables/Properties.vue                |  8 ++--
 src/lib/components/forms/Input.vue            |  3 ++
 src/lib/components/overlay/Modal.vue          |  2 +-
 src/styles/base.css                           | 21 +++++----
 src/styles/tokens.css                         | 20 +++++++++
 17 files changed, 114 insertions(+), 85 deletions(-)

diff --git a/src/components/EasySearch.vue b/src/components/EasySearch.vue
index c4149e7..137e2cb 100644
--- a/src/components/EasySearch.vue
+++ b/src/components/EasySearch.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { easySearch, isCommandPaletteOpen } from "$stores";
 import { debounce } from "$utils/debounce";
+import Input from "$lib/components/forms/Input.vue";
 
 interface Props {
   onSearch?: () => void;
@@ -10,7 +11,7 @@ interface Props {
 const props = defineProps<Props>();
 
 const error = ref("");
-const inputEl = ref<HTMLInputElement | null>(null);
+const inputEl = ref<InstanceType<typeof Input> | null>(null);
 
 const search = debounce(() => props.onSearch?.(), 100);
 
@@ -37,10 +38,15 @@ function trySearch() {
   search();
 }
 
+function getInputElement() {
+  return inputEl.value?.$el?.querySelector("input") as HTMLInputElement | null;
+}
+
 function handleKeyDown(e: KeyboardEvent) {
   if (isCommandPaletteOpen.value) return;
 
-  const inputIsFocused = document.activeElement === inputEl.value;
+  const input = getInputElement();
+  const inputIsFocused = document.activeElement === input;
   if (inputIsFocused) return;
 
   if (e.key.length > 1 || /\p{C}/u.test(e.key)) return;
@@ -51,7 +57,7 @@ function handleKeyDown(e: KeyboardEvent) {
     return;
   }
 
-  inputEl.value?.focus();
+  input?.focus();
 }
 
 onMounted(() => {
@@ -76,39 +82,20 @@ function handleSubmit(e: Event) {
 
 <template>
   <form @submit="handleSubmit">
-    <input
+    <Input
       ref="inputEl"
       type="text"
       placeholder="Search..."
-      :value="easySearch"
+      :model-value="easySearch"
+      :error="error"
+      full-width
       @input="handleInput"
     />
-
-    <template v-if="error">
-      <br />
-      <span style="color: red">{{ error }}</span>
-    </template>
   </form>
 </template>
 
 <style scoped>
-input {
-  width: 90%;
-  margin: 0 auto;
-  border: 1px solid transparent;
-  box-shadow: -3px 4px 2px #0000000f;
-}
-:root[data-theme="dark"] input {
-  background-color: #151515;
-  color: white;
-  border: 1px solid #6b6b6b;
-  box-shadow: 1px 1px 1px 2px #0000006e;
-}
-input::-webkit-input-placeholder {
-  opacity: 0.5;
-}
-input:focus {
-  outline: 1px solid #a5b5ff;
-  box-shadow: -3px 4px 2px #894aff0f;
+form {
+  width: 100%;
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 445eb46..f443021 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -28,7 +28,7 @@ header {
   display: flex;
   justify-content: space-between;
   max-width: 600px;
-  margin: 20px auto;
+  margin: var(--space-5) auto;
   display: flex;
   align-items: center;
 }
@@ -42,7 +42,7 @@ button {
   cursor: pointer;
   margin: 0;
   z-index: 2;
-  padding: 10px 20px;
+  padding: var(--space-3) var(--space-5);
 }
 .active {
   color: var(--hsl-bg);
@@ -50,6 +50,7 @@ button {
   transition: 0.25s;
 }
 button:focus {
-  border: 1px solid var(--hsl);
+  outline: var(--border-width-2) solid var(--color-border-focus);
+  outline-offset: var(--border-width-2);
 }
 </style>
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index 4765865..50432a6 100644
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -34,11 +34,11 @@ const chars = computed(() => Array.from(str.value));
 <style scoped>
 section {
   text-align: center;
-  padding-top: 50px;
+  padding-top: var(--space-12);
 }
 .chars span {
   display: inline-block;
-  width: 25px;
+  width: var(--space-6);
   text-align: center;
   line-height: 1em;
 }
diff --git a/src/components/advanced-search/AdvancedSearch.vue b/src/components/advanced-search/AdvancedSearch.vue
index 0658245..5cc6650 100644
--- a/src/components/advanced-search/AdvancedSearch.vue
+++ b/src/components/advanced-search/AdvancedSearch.vue
@@ -10,13 +10,13 @@ interface Props {
 
 defineProps<Props>();
 
-const onClose = (index: number) => () => {
+function handleClose(index: number) {
   boxes.value = [...boxes.value.slice(0, index), ...boxes.value.slice(index + 1)];
-};
+}
 
-const updateBox = (index: number) => (box: Box) => {
+function handleBoxChange(index: number, box: Box) {
   boxes.value = [...boxes.value.slice(0, index), box, ...boxes.value.slice(index + 1)];
-};
+}
 
 onMounted(() => {
   if (boxes.value.length === 0) {
@@ -36,8 +36,8 @@ function addRule() {
         v-for="(box, i) in boxes"
         :key="i"
         :box="box"
-        @box-change="updateBox(i)"
-        @close="onClose(i)"
+        @boxChange="(b) => handleBoxChange(i, b)"
+        @close="() => handleClose(i)"
       />
     </form>
 
@@ -53,6 +53,6 @@ function addRule() {
   justify-content: flex-end;
 }
 .buttons :deep(*) {
-  margin: 5px;
+  margin: var(--space-1);
 }
 </style>
diff --git a/src/components/advanced-search/BoxContent.vue b/src/components/advanced-search/BoxContent.vue
index cf1b4de..83e9d3a 100644
--- a/src/components/advanced-search/BoxContent.vue
+++ b/src/components/advanced-search/BoxContent.vue
@@ -54,33 +54,43 @@ function handleDataChange(data: any) {
 
     <hr />
 
-    <component :is="component" :data="props.data" @data-change="handleDataChange" />
+    <component
+      v-if="component"
+      :is="component"
+      :data="props.data"
+      @data-change="handleDataChange"
+    />
   </div>
 </template>
 
 <style scoped>
 .content {
-  padding: 40px;
+  padding: var(--space-10);
   display: grid;
   justify-content: center;
   margin-top: -1px;
   position: relative;
+  z-index: 1;
+  isolation: isolate;
 }
 button {
   position: absolute;
-  top: 5px;
-  right: 10px;
+  top: var(--space-1);
+  right: var(--space-3);
   background: none;
   border: none;
   font-size: 2em;
-  padding: 3px;
+  padding: var(--space-1);
   line-height: 0.8em;
   margin: 0;
-  z-index: 2;
+  z-index: 3;
   cursor: pointer;
 }
+button:hover {
+  opacity: 0.7;
+}
 hr {
-  margin: 10px -40px;
+  margin: var(--space-3) calc(var(--space-10) * -1);
   opacity: 0.4;
 }
 </style>
diff --git a/src/components/advanced-search/BoxSet.vue b/src/components/advanced-search/BoxSet.vue
index 6647ccf..8cab5fe 100644
--- a/src/components/advanced-search/BoxSet.vue
+++ b/src/components/advanced-search/BoxSet.vue
@@ -55,13 +55,13 @@ function handleDataChange(data: any) {
 <style scoped>
 .box {
   display: grid;
-  padding: 20px 0;
-  margin-bottom: 20px;
+  padding: var(--space-5) 0;
+  margin-bottom: var(--space-5);
 }
 .dropdown-container {
   display: flex;
   justify-content: center;
-  margin: -25px;
+  margin: calc(var(--space-6) * -1);
   z-index: 2;
 }
 </style>
diff --git a/src/components/advanced-search/Button.vue b/src/components/advanced-search/Button.vue
index 7321e24..bd7f9c9 100644
--- a/src/components/advanced-search/Button.vue
+++ b/src/components/advanced-search/Button.vue
@@ -27,15 +27,18 @@ const btnClass = computed(() => ["styled", props.disabled && "disabled"].filter(
 <style scoped>
 button {
   margin: 0;
-  padding: 5px 15px;
-  border-radius: 4px;
-  box-shadow: 0px 4px 3px 0px #00000017;
+  padding: var(--space-2) var(--space-4);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
 }
-button:focus,
+button:focus {
+  outline: var(--border-width-2) solid var(--color-border-focus);
+  outline-offset: var(--border-width-2);
+}
 button:active {
   color: var(--hsl);
-  border: 1px solid var(--hsl);
+  border: var(--border-width-1) solid var(--hsl);
   background: hsl(var(--hue), 100%, 95%);
 }
 button:active {
diff --git a/src/components/advanced-search/Dropdown.vue b/src/components/advanced-search/Dropdown.vue
index 138992f..432bd32 100644
--- a/src/components/advanced-search/Dropdown.vue
+++ b/src/components/advanced-search/Dropdown.vue
@@ -41,11 +41,12 @@ function handleChange(e: Event) {
 
 <style scoped>
 select {
-  box-shadow: 0px 4px 3px 0px #00000017;
+  box-shadow: var(--shadow-sm);
   cursor: pointer;
 }
 select:focus {
-  outline: none;
+  outline: var(--border-width-2) solid var(--color-border-focus);
+  outline-offset: var(--border-width-2);
 }
 select:disabled {
   opacity: 1;
diff --git a/src/components/table-container/InfoContainer.vue b/src/components/table-container/InfoContainer.vue
index 40f7a0c..c184f1a 100644
--- a/src/components/table-container/InfoContainer.vue
+++ b/src/components/table-container/InfoContainer.vue
@@ -103,14 +103,14 @@ const htmlEntityNames = computed(() => symbolHtmlNamesMap.value.get(props.codepo
 
 <style scoped>
 div.container {
-  border-radius: 8px;
-  padding: 20px;
+  border-radius: var(--radius-xl);
+  padding: var(--space-5);
 }
 .basic-info {
   display: grid;
 }
 td {
-  padding: 5px;
+  padding: var(--space-2);
 }
 td:nth-child(1) {
   font-weight: bold;
@@ -126,11 +126,11 @@ h1 {
   height: 64px;
   width: 64px;
   font-size: 3em;
-  border: 1px solid grey;
+  border: var(--border-width-1) solid var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 12px 0;
+  margin: var(--space-3) 0;
 }
 header {
   display: flex;
diff --git a/src/components/table-container/ResultsRow.vue b/src/components/table-container/ResultsRow.vue
index 78fd283..6174a68 100644
--- a/src/components/table-container/ResultsRow.vue
+++ b/src/components/table-container/ResultsRow.vue
@@ -92,7 +92,7 @@ watch(
   font-size: 0.8rem;
 }
 .row.active {
-  border: 1px solid blue;
+  border: var(--border-width-1) solid var(--color-border-focus);
 }
 .content {
   width: 100%;
diff --git a/src/components/table-container/info-tables/Encoding.vue b/src/components/table-container/info-tables/Encoding.vue
index 468f5f4..4e0dc7e 100644
--- a/src/components/table-container/info-tables/Encoding.vue
+++ b/src/components/table-container/info-tables/Encoding.vue
@@ -85,12 +85,12 @@ function setEncoding(encoding: EncodingType) {
   font-weight: bold;
 }
 td {
-  padding: 5px;
+  padding: var(--space-2);
 }
 th:first-child {
   color: var(--primary-text);
   font-weight: 400;
-  padding-right: 1rem;
+  padding-right: var(--space-4);
 }
 tbody tr:nth-child(odd) {
   background-color: var(--bg-offset);
@@ -101,17 +101,18 @@ tbody tr:nth-child(odd) {
 .encoding-type button {
   opacity: 0.6;
   cursor: pointer;
-  padding: 6px;
+  padding: var(--space-2);
   border: none;
   background: 0;
   margin: 0;
   font-weight: 600;
 }
 .encoding-type button:focus {
-  outline: 1px solid rgba(0, 0, 255, 0.443);
+  outline: var(--border-width-2) solid var(--color-border-focus);
+  outline-offset: var(--border-width-2);
 }
 .encoding-type .active {
   opacity: 0.95;
-  background-color: rgba(128, 128, 128, 0.097);
+  background-color: var(--color-bg-active);
 }
 </style>
diff --git a/src/components/table-container/info-tables/HtmlEntities.vue b/src/components/table-container/info-tables/HtmlEntities.vue
index 5dc22b1..4175f28 100644
--- a/src/components/table-container/info-tables/HtmlEntities.vue
+++ b/src/components/table-container/info-tables/HtmlEntities.vue
@@ -39,15 +39,15 @@ th {
   text-align: left;
   color: var(--primary-text);
   font-weight: 400;
-  padding-bottom: 6px;
+  padding-bottom: var(--space-2);
 }
 tbody tr:nth-child(odd) {
   background-color: var(--bg-offset);
 }
 td {
-  padding: 6px;
+  padding: var(--space-2);
 }
 td:first-child {
-  padding-right: 30px;
+  padding-right: var(--space-8);
 }
 </style>
diff --git a/src/components/table-container/info-tables/Properties.vue b/src/components/table-container/info-tables/Properties.vue
index 69ed913..b045794 100644
--- a/src/components/table-container/info-tables/Properties.vue
+++ b/src/components/table-container/info-tables/Properties.vue
@@ -17,7 +17,7 @@ const props = defineProps<Props>();
 
 <style scoped>
 h3 {
-  padding-bottom: 6px;
+  padding-bottom: var(--space-2);
   color: var(--primary-text);
   font-size: 1rem;
   font-weight: 400;
@@ -26,13 +26,13 @@ h3 {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
+  gap: var(--space-1);
   text-align: left;
   margin-bottom: var(--space-8);
 }
 .properties span {
   background: var(--bg-offset);
-  padding: 2px 8px;
-  border-radius: 4px;
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-md);
 }
 </style>
diff --git a/src/lib/components/forms/Input.vue b/src/lib/components/forms/Input.vue
index 7797315..b167e50 100644
--- a/src/lib/components/forms/Input.vue
+++ b/src/lib/components/forms/Input.vue
@@ -83,6 +83,9 @@ function handleInput(e: Event) {
   gap: var(--space-1);
   width: auto;
 }
+.input-wrapper:has(.input--full-width) {
+  width: 100%;
+}
 .input {
   margin: 0;
   padding: var(--space-2) var(--space-4);
diff --git a/src/lib/components/overlay/Modal.vue b/src/lib/components/overlay/Modal.vue
index f334fd1..060794c 100644
--- a/src/lib/components/overlay/Modal.vue
+++ b/src/lib/components/overlay/Modal.vue
@@ -64,7 +64,7 @@ watch(
 .modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--color-backdrop);
   display: flex;
   align-items: flex-start;
   justify-content: center;
diff --git a/src/styles/base.css b/src/styles/base.css
index df37d6f..6da1479 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -32,7 +32,7 @@ body {
 }
 
 a {
-  color: rgb(0, 100, 200);
+  color: var(--color-link);
   text-decoration: none;
   transition: var(--transition-colors);
 }
@@ -42,7 +42,7 @@ a:hover {
 }
 
 a:visited {
-  color: rgb(0, 80, 160);
+  color: var(--color-link-visited);
 }
 
 label {
@@ -70,7 +70,7 @@ input::placeholder {
 }
 
 input:disabled {
-  color: #ccc;
+  color: var(--color-text-tertiary);
   opacity: 0.6;
 }
 
@@ -80,23 +80,24 @@ input[type="range"] {
 
 button {
   color: var(--color-text);
-  background-color: #f4f4f4;
+  background-color: var(--color-bg-offset);
   outline: none;
   cursor: pointer;
 }
 
 button:disabled {
-  color: #999;
+  color: var(--color-text-tertiary);
   cursor: not-allowed;
   opacity: 0.6;
 }
 
 button:not(:disabled):active {
-  background-color: #ddd;
+  background-color: var(--color-bg-active);
 }
 
 button:focus {
-  border-color: #666;
+  outline: var(--border-width-2) solid var(--color-border-focus);
+  outline-offset: var(--border-width-2);
 }
 
 /* ==========================================
@@ -127,10 +128,12 @@ button.underline-btn {
   border-radius: var(--radius-base);
 }
 
-.styled:hover:not(:disabled) {
+button.styled:hover:not(:disabled),
+select.styled:hover:not(:disabled) {
   filter: brightness(0.95);
 }
 
-.styled:active:not(:disabled) {
+button.styled:active:not(:disabled),
+select.styled:active:not(:disabled) {
   transform: scale(0.98);
 }
diff --git a/src/styles/tokens.css b/src/styles/tokens.css
index 55a7fae..76be3a8 100644
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@@ -59,6 +59,16 @@
   --color-border-focus: #a5b5ff;
   --color-border-error: var(--color-error);
 
+  /* Link Colors */
+  --color-link: hsl(210, 100%, 40%);
+  --color-link-visited: hsl(210, 100%, 32%);
+
+  /* Backdrop Colors */
+  --color-backdrop: rgba(0, 0, 0, 0.5);
+
+  /* Active/Selected State */
+  --color-bg-active: rgba(128, 128, 128, 0.1);
+
   /* Shadow Colors */
   --color-shadow: rgba(0, 0, 0, 0.09);
   --color-shadow-elevated: rgba(0, 0, 0, 0.12);
@@ -254,6 +264,11 @@
   --color-shadow: rgba(0, 0, 0, 0.43);
   --color-shadow-elevated: rgba(0, 0, 0, 0.6);
 
+  --color-link: hsl(210, 80%, 60%);
+  --color-link-visited: hsl(210, 70%, 52%);
+  --color-backdrop: rgba(0, 0, 0, 0.7);
+  --color-bg-active: rgba(128, 128, 128, 0.15);
+
   /* Adjusted state colors for dark mode */
   --color-success: hsl(140, 50%, 55%);
   --color-success-bg: hsl(140, 40%, 20%);
@@ -298,6 +313,11 @@
     --color-shadow: rgba(0, 0, 0, 0.43);
     --color-shadow-elevated: rgba(0, 0, 0, 0.6);
 
+    --color-link: hsl(210, 80%, 60%);
+    --color-link-visited: hsl(210, 70%, 52%);
+    --color-backdrop: rgba(0, 0, 0, 0.7);
+    --color-bg-active: rgba(128, 128, 128, 0.15);
+
     --color-success: hsl(140, 50%, 55%);
     --color-success-bg: hsl(140, 40%, 20%);
     --color-success-border: hsl(140, 50%, 50%);