From 91fe355807f17a946b729f75bca5fbb3d3a2b67b Mon Sep 17 00:00:00 2001
From: Your Name <josip.jureta@gmail.com>
Date: Mon, 27 Jul 2026 20:56:40 -0400
Subject: [PATCH] feat(ui): restyle file browser, file view, and home sidebar
 with tokens

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 desktop/src/views/Home.vue             | 12 ++++++------
 n-link-core/components/FileBrowser.vue | 14 +++++++-------
 n-link-core/components/FileView.vue    |  5 ++---
 3 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/desktop/src/views/Home.vue b/desktop/src/views/Home.vue
index 458e777..1abb80a 100644
--- a/desktop/src/views/Home.vue
+++ b/desktop/src/views/Home.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="home h-full overflow-hidden">
     <div class="flex flex-row h-full">
-      <div class="flex-shrink-0 border-r w-64">
+      <div class="flex-shrink-0 border-r border-edge w-64">
         <device-select v-model:selected="selectedCalculator"/>
         <div class="overflow-auto h-full px-4 py-4">
           <div v-if="needsDrivers && !isLinux">
             <h1 class="text-3xl">Drivers required</h1>
             <p>The WinUSB driver is required to use this device.</p>
             <p class="text-center mt-2">
-              <a href="#" @click.prevent="installDrivers()" class="text-blue-600">See installation instructions</a>
+              <a href="#" @click.prevent="installDrivers()" class="text-accent">See installation instructions</a>
             </p>
           </div>
           <div v-else-if="needsDrivers && isLinux">
             <h1 class="text-3xl">udev rules required</h1>
             <p>udev rules are required to access this device.</p>
             <p class="text-center mt-2">
-              <a href="#" @click.prevent="installDrivers('linux')" class="text-blue-600">See installation
+              <a href="#" @click.prevent="installDrivers('linux')" class="text-accent">See installation
                 instructions</a>
             </p>
           </div>
@@ -25,8 +25,8 @@
           <div v-else-if="calculator && calculator.info">
             <calc-info :info="calculator.info" :dev="selectedCalculator!"/>
             <label class="inline-flex items-center cursor-pointer mr-2 mt-4">
-              <input type="checkbox" class="h-5 w-5 text-blue-600 cursor-pointer" v-model="showHidden">
-              <span class="mx-2 text-gray-700 select-none">Include hidden files</span>
+              <input type="checkbox" class="h-5 w-5 text-accent cursor-pointer" v-model="showHidden">
+              <span class="mx-2 text-muted select-none">Include hidden files</span>
             </label>
           </div>
         </div>
@@ -107,7 +107,7 @@ function installDrivers(platform = 'windows') {
 }
 
 .lds-dual-ring:after {
-  $color: theme('colors.gray.400');
+  $color: var(--muted);
   content: " ";
   display: block;
   width: 64px;
diff --git a/n-link-core/components/FileBrowser.vue b/n-link-core/components/FileBrowser.vue
index 7046089..8b2b2da 100644
--- a/n-link-core/components/FileBrowser.vue
+++ b/n-link-core/components/FileBrowser.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="h-full">
-    <div class="border-b py-2 px-2 header flex">
+    <div class="border-b border-edge py-2 px-2 header flex">
       <ol class="flex">
         <li v-for="(part, i) in parts" :key="i" class="" :class="{active: i === parts.length - 1}">
-          <span class="inline-block cursor-pointer bg-gray-200 px-4 py-1 rounded-full"
+          <span class="inline-block cursor-pointer bg-raised text-fg px-4 py-1 rounded-full"
                 @click="goToIndex(i)">{{ part || 'Home' }}</span>
-          <img v-if="i < parts.length - 1" class="inline img-fix" :src="chevronRight"/>
+          <icon v-if="i < parts.length - 1" name="chevron-right" :size="16" class="inline text-muted"/>
         </li>
       </ol>
       <div class="flex-grow"/>
@@ -19,7 +19,7 @@
           <div class="lds-dual-ring"/>
         </div>
       </div>
-      <div class="overflow-auto h-full px-4 pt-4 w-48 flex-shrink-0 border-l">
+      <div class="overflow-auto h-full px-4 pt-4 w-48 flex-shrink-0 border-l border-edge">
         <file-data :files="selected" :show-hidden="showHidden" :dev="dev" :path="path" :native-upload="nativeUpload"/>
       </div>
     </div>
@@ -32,7 +32,7 @@ import FileView from './FileView.vue';
 import {DEVICES_KEY, type GenericDevices, type FileInfo} from './devices';
 import FileData from './FileData.vue';
 import DeviceQueue from './DeviceQueue.vue';
-import chevronRight from 'feather-icons/dist/icons/chevron-right.svg';
+import Icon from './Icon.vue';
 
 const devices = inject(DEVICES_KEY) as GenericDevices;
 
@@ -108,7 +108,7 @@ function goToIndex(i: number) {
 }
 
 .active span {
-  @apply bg-blue-500 text-white;
+  @apply bg-accent text-accent-fg;
 }
 
 .img-fix {
@@ -122,7 +122,7 @@ function goToIndex(i: number) {
 }
 
 .lds-dual-ring:after {
-  $color: theme('colors.gray.400');
+  $color: var(--muted);
   content: " ";
   display: block;
   width: 64px;
diff --git a/n-link-core/components/FileView.vue b/n-link-core/components/FileView.vue
index 715558d..922e38a 100644
--- a/n-link-core/components/FileView.vue
+++ b/n-link-core/components/FileView.vue
@@ -69,10 +69,9 @@ function shiftSelection(item: number) {
 
 <style scoped lang="scss">
 .selected {
-  background-color: #4d88e8;
-  @apply rounded;
+  @apply rounded bg-selected;
   p {
-    @apply text-white;
+    @apply text-fg;
   }
 }
 </style>