From 0cebd3868b27b2dbd32a3823458df972fd71af1b Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Mon, 16 Mar 2026 18:59:21 -0400 Subject: [PATCH] docs+utils: Remove all legacy variant-* class references, update all docs and snippets to use only preset-* (Skeleton v4) --- documentation/AE__Components.md | 4 +-- .../GUIDE__AE_UI_Style_Guidelines.md | 25 +++---------------- .../PROJECT__AE_Access_Control_UX.md | 2 +- documentation/PROJECT__AE_Style_Review.md | 22 +--------------- ...JECT__AE_UI_Journals_module_update_2026.md | 2 +- src/lib/utils/ae_string_snippets.ts | 2 -- 6 files changed, 8 insertions(+), 49 deletions(-) diff --git a/documentation/AE__Components.md b/documentation/AE__Components.md index f82e41fe..d8d6106b 100644 --- a/documentation/AE__Components.md +++ b/documentation/AE__Components.md @@ -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` diff --git a/documentation/GUIDE__AE_UI_Style_Guidelines.md b/documentation/GUIDE__AE_UI_Style_Guidelines.md index f0773bbf..2ea93a8a 100644 --- a/documentation/GUIDE__AE_UI_Style_Guidelines.md +++ b/documentation/GUIDE__AE_UI_Style_Guidelines.md @@ -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. --- diff --git a/documentation/PROJECT__AE_Access_Control_UX.md b/documentation/PROJECT__AE_Access_Control_UX.md index c5938121..c120a7a4 100644 --- a/documentation/PROJECT__AE_Access_Control_UX.md +++ b/documentation/PROJECT__AE_Access_Control_UX.md @@ -222,7 +222,7 @@ Add the dismissible banner to the template (after/near the existing `is_offline`

Your session has expired. Please reload or sign in again.

- +
diff --git a/documentation/PROJECT__AE_Style_Review.md b/documentation/PROJECT__AE_Style_Review.md index b1142b89..52f7aa99 100644 --- a/documentation/PROJECT__AE_Style_Review.md +++ b/documentation/PROJECT__AE_Style_Review.md @@ -107,28 +107,8 @@ Skeleton's `.input`, `.select`, `.textarea` classes do not include dark mode sty ``` -### Legacy: `variant-*` (Skeleton v3 pattern) — migrate away ⚠️ -```html - - - -``` -### 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. diff --git a/documentation/PROJECT__AE_UI_Journals_module_update_2026.md b/documentation/PROJECT__AE_UI_Journals_module_update_2026.md index af6def11..e5a650a1 100644 --- a/documentation/PROJECT__AE_UI_Journals_module_update_2026.md +++ b/documentation/PROJECT__AE_UI_Journals_module_update_2026.md @@ -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 `` — removed diff --git a/src/lib/utils/ae_string_snippets.ts b/src/lib/utils/ae_string_snippets.ts index 73488af4..1bba5bd3 100644 --- a/src/lib/utils/ae_string_snippets.ts +++ b/src/lib/utils/ae_string_snippets.ts @@ -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'] =