Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs+utils: Remove all legacy variant-* class references, update all docs and snippets to use only preset-* (Skeleton v4)

Browse Source
This commit is contained in:
Scott Idem
2026-03-16 18:59:21 -04:00
parent b543c8a930
commit 0cebd3868b
6 changed files with 8 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
documentation/GUIDE__AE_UI_Style_Guidelines.md
View File

@@ -109,36 +109,17 @@ bg-error-100 border border-error-300 ← inline error banners
| `bg-white dark:bg-gray-800` | Manual light/dark pair | Let theme tokens handle it — remove entirely |
| `text-gray-600 dark:text-gray-400` | Manual light/dark pair | `opacity-60` |
| `rounded-container-token` | Skeleton v3 class | `rounded-xl` |
| `variant-soft-*` | Skeleton v3 class | `preset-tonal-*` |
| `variant-ghost-*` | Skeleton v3 class | `preset-ghost-*` |
| `variant-ringed-*` | Skeleton v3 class | `preset-outlined-*` |
| `variant-filled-*` | Skeleton v3 class | `preset-filled-*` |
| | | |
| `preset-filled-surface-300-700` | v3 dual-shade notation | `bg-surface-200-800` or `bg-surface-100-900` |
| `preset-filled-surface-400-600` | v3 dual-shade notation | `bg-surface-100-900` |
| `overflow-x-scroll` | Forces scrollbar visible | `overflow-x-auto` |
---
## 4. Skeleton v3 → v4 Migration Reference
The app uses **Skeleton v4**. v3 classes produce wrong or zero styling and must be updated on sight.
| Skeleton v3 | Skeleton v4 Equivalent |
|---|---|
| `variant-soft-primary` | `preset-tonal-primary` |
| `variant-soft-secondary` | `preset-tonal-secondary` |
| `variant-soft-warning` | `preset-tonal-warning` |
| `variant-soft-success` | `preset-tonal-success` |
| `variant-ghost-success` | `preset-ghost-success` |
| `variant-ghost-warning` | `preset-ghost-warning` |
| `variant-ringed-warning` | `preset-outlined-warning` |
| `variant-filled-primary` | `preset-filled-primary` |
| `variant-filled-warning` | `preset-filled-warning` |
| `rounded-container-token` | `rounded-xl` |
| `rounded-token` | `rounded-md` |
| `card` (standalone) | `card preset-tonal-surface` or surface div pattern |
| `badge` (standalone) | `badge preset-tonal-surface` |
| `chip` | `badge preset-tonal-*` |
All Skeleton v3 `variant-*` classes are now fully removed from the codebase. Use only `preset-*` classes for all buttons and interactive elements.
---