Migrate hardcoded CSS values to design tokens (#62)

Author: EmNudge

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>

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,14 +42,15 @@ button {
   cursor: pointer;
   margin: 0;
   z-index: 2;
-  padding: 10px 20px;
+  padding: var(--space-3) var(--space-5);
 }
 .active {
   color: var(--hsl-bg);
   background: var(--hsl);
   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>

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;
 }

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>

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>

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>

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 {

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;

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;

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%;