sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-28 10:34:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: cleanup standards (#6970)

Browse Source 
* chore: cleanup standards & skills

* remove: figma mcp doc, not needed anymore
This commit is contained in:
Calum H.
2026-08-10 15:15:44 +00:00
committed by GitHub
parent 98cb6b6b44
commit e8aee15664
39 changed files with 1271 additions and 1130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
standards/frontend/SURFACE_SYSTEM.md
+18 -12
View File
@@ -1,25 +1,31 @@
# 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.
Use `surface-*` variables to show UI elevation and separation. The scale starts at the page base and ends at strong 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. |
| Token | Use |
| ----------- | ----------------------------------------------------------------- |
| `surface-1` | Use for the page background. |
| `surface-2` | Use for raised surfaces, table rows, and standard card backgrounds. |
| `surface-3` | Use for header bands, inputs, dropdowns, and card hover states. |
| `surface-4` | Use for standard strokes, outlines, and table outlines. |
| `surface-5` | Use for strong strokes that need more separation. |
## Strokes
Use `surface-4` for normal outlines and dividers. Tables should use `surface-4` for their outer border and row separators.
Use `surface-4` for standard outlines and dividers. Use it for table borders 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`.
Use `surface-5` for modal frames, strong separators, and hover states above `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.
Use `surface-1` for page backgrounds. Use `surface-2` for standard raised 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.
Use `surface-3` for header strips, inputs, and temporary elevation. A hover state is an example of temporary elevation.
Use `surface-4` only for controls or badges that must appear above adjacent content.
Do not use legacy aliased background variables in new UI. Use explicit `bg-surface-*` and `border-surface-*` utilities.
These utilities show the intended layer in the component.