feat(ui): add Slate semantic theme tokens and Inter font

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

desktop/package.json

@@ -11,6 +11,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.1.0",
     "@tauri-apps/api": "^2.11.1",
     "@tauri-apps/plugin-dialog": "^2.7.2",
     "@tauri-apps/plugin-shell": "^2.3.5",

desktop/src/App.vue

@@ -9,9 +9,10 @@
 
 #app {
   user-select: none;
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Inter', theme('fontFamily.sans');
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  background-color: var(--surface);
+  color: var(--fg);
 }
 </style>

desktop/src/main.ts

@@ -4,6 +4,10 @@ import router from './router';
 import devices from './components/devices';
 import { DEVICES_KEY } from 'n-link-core/components/devices';
 import 'n-link-core/assets/tailwind.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
 
 const app = createApp(App);
 app.use(router);

n-link-core/assets/tailwind.css

@@ -4,6 +4,57 @@
 
 @tailwind utilities;
 
+/* Slate theme tokens. Dark is the default (and the fallback when the OS
+   preference is unknown); light applies when the OS asks for it. The
+   [data-theme] blocks let a future manual toggle force a theme. */
+:root,
+:root[data-theme='dark'] {
+    --surface: #0f1117;
+    --raised: #161a25;
+    --edge: #1d2130;
+    --fg: #e6e8ee;
+    --muted: #8b91a3;
+    --accent: #2d4bd8;
+    --accent-fg: #ffffff;
+    --selected: #1a2547;
+    --ok: #2dd4bf;
+    --warn: #f5b942;
+    --danger: #ef4444;
+    --success: #22c55e;
+}
+
+@media (prefers-color-scheme: light) {
+    :root:not([data-theme='dark']) {
+        --surface: #f7f8fa;
+        --raised: #ffffff;
+        --edge: #e6e9ef;
+        --fg: #1c2330;
+        --muted: #6b7280;
+        --accent: #2d4bd8;
+        --accent-fg: #ffffff;
+        --selected: #e4ebff;
+        --ok: #0d9488;
+        --warn: #d97706;
+        --danger: #dc2626;
+        --success: #16a34a;
+    }
+}
+
+:root[data-theme='light'] {
+    --surface: #f7f8fa;
+    --raised: #ffffff;
+    --edge: #e6e9ef;
+    --fg: #1c2330;
+    --muted: #6b7280;
+    --accent: #2d4bd8;
+    --accent-fg: #ffffff;
+    --selected: #e4ebff;
+    --ok: #0d9488;
+    --warn: #d97706;
+    --danger: #dc2626;
+    --success: #16a34a;
+}
+
 @keyframes lds-dual-ring {
     0% {
         transform: rotate(0deg);
@@ -12,7 +63,3 @@
         transform: rotate(360deg);
     }
 }
-
-.el-popover {
-    @apply select-none;
-}

n-link-core/tailwind.config.js

@@ -2,6 +2,7 @@ module.exports = {
   theme: {
     fontFamily: {
       sans: [
+        'Inter',
         'Cantarell',
         'Roboto',
         'system-ui',
@@ -31,16 +32,20 @@ module.exports = {
         '3/2': '0.375em',
       },
       colors: {
-        ui: {
+        surface: 'var(--surface)',
-          background: 'var(--color-ui-background)',
+        raised: 'var(--raised)',
-          emph: 'var(--color-ui-emph)',
+        edge: 'var(--edge)',
-          sidebar: 'var(--color-ui-sidebar)',
+        fg: 'var(--fg)',
-          text: 'var(--color-ui-text)',
+        muted: 'var(--muted)',
-          'text-inv': 'var(--color-ui-text-inv)',
+        accent: {
-          primary: 'var(--color-ui-primary)',
+          DEFAULT: 'var(--accent)',
-          border: 'var(--color-ui-border)',
+          fg: 'var(--accent-fg)',
-          blockquote: 'var(--color-ui-blockquote)',
         },
+        selected: 'var(--selected)',
+        ok: 'var(--ok)',
+        warn: 'var(--warn)',
+        danger: 'var(--danger)',
+        success: 'var(--success)',
       },
       height: {
         min: 'min-content',

package-lock.json

@@ -13,6 +13,7 @@
       "name": "n-link",
       "version": "0.1.6",
       "dependencies": {
+        "@fontsource/inter": "^5.1.0",
         "@tauri-apps/api": "^2.11.1",
         "@tauri-apps/plugin-dialog": "^2.7.2",
         "@tauri-apps/plugin-shell": "^2.3.5",
@@ -557,6 +558,14 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz",
       "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww=="
     },
+    "node_modules/@fontsource/inter": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.3.0.tgz",
+      "integrity": "sha512-RofMylZmjlJEfELXeNHFWBRcSs75rGU/6bV2S2jfnvv/3rPXPGe0LgUJTklcHZ9lM4OZmAVFhcJPnACfb91A3g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",