feat: server access post release QA (#6316)

* fix: clicking users in table in app takes you to blank page instead of website * fix: wrong loader icon on server panel * fix: surface var misalignment * fix: password managers still detecting username field as something to autofill * feat: show users on backupitem components * feat: seperators for filter sections * fix: lint + change remove -> revoke * fix: copy * feat: align copy
2026-06-05 15:54:27 +01:00
parent c653228fe7
commit dfe12d4ecb
23 changed files with 287 additions and 81 deletions
@@ -0,0 +1,25 @@
+# Surface System
+
+Use `surface-*` variables to describe UI elevation and separation. The scale is ordered from the page base up through stronger raised surfaces and strokes.
+
+## Layers
+
+| Token       | Use                                                                 |
+| ----------- | ------------------------------------------------------------------- |
+| `surface-1` | Page background.                                                    |
+| `surface-2` | Default raised surfaces, table rows, and standard card backgrounds. |
+| `surface-3` | Header bands, inputs, dropdown surfaces, and card hover states.     |
+| `surface-4` | Standard strokes and outlines, including table outlines.            |
+| `surface-5` | Strong strokes for surfaces that need extra separation.             |
+
+## Strokes
+
+Use `surface-4` for normal outlines and dividers. Tables should use `surface-4` for their outer border and row separators.
+
+Reserve `surface-5` for stronger outlines, such as modal frames, high-emphasis separators, or hover states on elements that already sit on `surface-4`.
+
+## Backgrounds
+
+Use `surface-1` for page backgrounds and `surface-2` for ordinary raised content. Use `surface-3` for header strips, inputs, and temporary elevation such as hover states. Use `surface-4` sparingly as a stronger raised background, usually for controls or badges that need to sit above nearby content.
+
+Avoid using legacy aliased background variables for new UI. Prefer explicit `bg-surface-*` and `border-surface-*` utilities so the layer intent is visible in the component.