app

commit 439e22843499a36f628de40d726dfec00f65599d
parent f70694a2b9b3f1deea098deafa2918eecb1d19c9
Author: triesap <triesap@radroots.dev>
Date:   Wed, 21 Jan 2026 19:50:41 +0000

app: wire ui stylesheet layers

- import ui tokens stylesheet via postcss import

- add base focus touch and disabled styles

- add surface card separator and material utilities

- extend postcss config and deps for css imports

Diffstat:
M
app/assets/styles.css
 | 
65
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
M
app/package.json
 | 
1
+
M
app/postcss.config.js
 | 
1
+

3 files changed, 67 insertions(+), 0 deletions(-)
diff --git a/app/assets/styles.css b/app/assets/styles.css
@@ -1,3 +1,68 @@
+@import "../../crates/ui-tokens/assets/tokens.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html {
+    font-family: var(--font-sans);
+    background: var(--bg-app);
+    color: var(--text-primary);
+  }
+
+  body {
+    min-height: 100dvh;
+    margin: 0;
+    background: var(--bg-app);
+  }
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  html[data-input="keyboard"] :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+    border-radius: 8px;
+  }
+
+  html[data-input="pointer"] :focus {
+    outline: none;
+  }
+
+  [data-disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+@layer components {
+  .ui-surface {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-1);
+  }
+
+  .ui-card {
+    background: var(--bg-elevated);
+    color: var(--text-primary);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-1);
+  }
+
+  .ui-separator {
+    height: 1px;
+    background: var(--separator);
+  }
+
+  .ui-text-secondary {
+    color: var(--text-secondary);
+  }
+
+  .ui-material-regular {
+    background: var(--material-regular);
+    backdrop-filter: blur(18px) saturate(180%);
+  }
+}
diff --git a/app/package.json b/app/package.json
@@ -4,6 +4,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "postcss-import": "^16.1.0",
     "tailwindcss": "^3.4.17"
   }
 }
diff --git a/app/postcss.config.js b/app/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    "postcss-import": {},
     tailwindcss: {},
     autoprefixer: {}
   }