docs+utils: Remove all legacy variant-* class references, update all docs and snippets to use only preset-* (Skeleton v4)
This commit is contained in:
@@ -143,6 +143,6 @@ Generic container types used for layout and grouping.
|
||||
|
||||
## 4. CSS Styling for UI Elements
|
||||
|
||||
- **Warning/Hide Buttons:** `variant-soft-warning hover:variant-filled-warning`
|
||||
- **Error/Delete/Disable Buttons:** `variant-soft-error hover:variant-filled-error`
|
||||
- **Warning/Hide Buttons:** `preset-tonal-warning hover:preset-filled-warning-500`
|
||||
- **Error/Delete/Disable Buttons:** `preset-tonal-error hover:preset-filled-error-500`
|
||||
- **Submenu:** `flex flex-row items-center justify-center gap-1`
|
||||
|
||||
@@ -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.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -222,7 +222,7 @@ Add the dismissible banner to the template (after/near the existing `is_offline`
|
||||
<div class="fixed top-0 left-0 right-0 z-50 bg-warning-500 text-white px-4 py-2 flex items-center justify-between">
|
||||
<p class="text-sm font-semibold">Your session has expired. Please reload or sign in again.</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-sm variant-filled-surface" onclick={() => window.location.reload()}>Reload</button>
|
||||
<button class="btn btn-sm preset-filled-surface" onclick={() => window.location.reload()}>Reload</button>
|
||||
<button class="btn btn-sm" onclick={() => { flag_expired = false; ae_auth_error.set({ type: null, ts: null }); }}>Dismiss</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -107,28 +107,8 @@ Skeleton's `.input`, `.select`, `.textarea` classes do not include dark mode sty
|
||||
<button class="btn preset-outlined-surface">Outlined</button>
|
||||
```
|
||||
|
||||
### Legacy: `variant-*` (Skeleton v3 pattern) — migrate away ⚠️
|
||||
```html
|
||||
<button class="btn variant-soft-secondary">Legacy</button>
|
||||
<button class="btn variant-filled-primary">Legacy</button>
|
||||
<button class="btn variant-ghost-surface">Legacy</button>
|
||||
```
|
||||
|
||||
### Migration Map
|
||||
| Legacy `variant-*` | Modern `preset-*` |
|
||||
|---|---|
|
||||
| `variant-filled-primary` | `preset-filled-primary` |
|
||||
| `variant-filled-secondary` | `preset-filled-secondary` |
|
||||
| `variant-soft-primary` | `preset-tonal-primary` |
|
||||
| `variant-soft-secondary` | `preset-tonal-secondary` |
|
||||
| `variant-soft-surface` | `preset-tonal-surface` |
|
||||
| `variant-soft-error` | `preset-tonal-error` |
|
||||
| `variant-soft-warning` | `preset-tonal-warning` |
|
||||
| `variant-soft-success` | `preset-tonal-success` |
|
||||
| `variant-ghost-surface` | `preset-outlined-surface` |
|
||||
| `variant-ghost-error` | `preset-outlined-error` |
|
||||
| `variant-ghost-success` | `preset-outlined-success` |
|
||||
| `variant-outlined-*` | `preset-outlined-*` |
|
||||
> **Note:** All legacy `variant-*` classes have been fully removed from the codebase. Use only `preset-*` classes for all buttons and interactive elements.
|
||||
|
||||
### Custom `ae_btn_*` Classes (app.css)
|
||||
These exist in `app.css` and wrap the `preset-*` system. They are valid but underused. Consider adopting where button groups need reuse.
|
||||
|
||||
@@ -124,7 +124,7 @@ We have established a unified design language for configuration interfaces and a
|
||||
| Badge (error) | `badge preset-tonal-error` |
|
||||
|
||||
#### Removed Patterns (never use)
|
||||
- `variant-filled-*`, `variant-soft-*`, `variant-ghost-*`, `variant-ringed-*` — Skeleton v2, removed
|
||||
- All `variant-*` classes are now fully removed from the codebase. Use only `preset-*` classes for all buttons and interactive elements.
|
||||
- `variant-form-material` — Skeleton v2, removed from all inputs/selects/textareas
|
||||
- `input-bordered` — non-standard, removed
|
||||
- DaisyUI `modal` / `modal-box` / `modal-action` wrapper divs inside Flowbite `<Modal>` — removed
|
||||
|
||||
@@ -28,8 +28,6 @@ string_snippets['classes__events_pres_mgmt_menu__button'] =
|
||||
string_snippets['classes__events_pres_mgmt_menu__button_special'] =
|
||||
'btn btn-sm mx-1 hover:preset-filled-primary-500';
|
||||
|
||||
// string_snippets['classes__events_pres_mgmt_menu__button'] = 'btn btn-sm mx-1 variant-soft-tertiary text-info-300 hover:text-info-800 hover:variant-filled-tertiary';
|
||||
// string_snippets['classes__events_pres_mgmt_menu__button_special'] = 'btn btn-sm mx-1 variant-ghost-tertiary text-info-300 hover:text-info-800 hover:variant-filled-tertiary';
|
||||
string_snippets['classes__events_pres_mgmt_menu__button_highlight'] =
|
||||
'btn btn-sm mx-1 preset-filled-tertiary-500 text-info-300 hover:text-info-800';
|
||||
string_snippets['classes__events_pres_mgmt_menu__button_warning'] =
|
||||
|
||||
Reference in New Issue
Block a user