@deskhero/dh_ui 2.66.0 → 2.66.1

package/.ai/COMMON_TASKS.md

@@ -23,8 +23,8 @@
 When touching a component’s layout or spacing, prefer the shared utilities instead of one-off scoped CSS:
 
 1. **Flex:** Use `flex`, `flex-column`, `flex-row`, `items-center`, `justify-center`, `flex-1`, etc. from `flex.scss` instead of custom `display: flex` / `flex-direction` / `align-items` rules.
-2. **Spacing:** Use `m-*`, `p-*`, `gap-*` with the spacer scale (e.g. `p-spacer-4`, `mb-spacer-2`, `gap-spacer-4`) instead of hardcoded margins/padding in `<style>`.
-3. **Sizes:** Use `h-spacer-*`, `w-spacer-*` or `w-100` / `h-100` where they match the need.
+2. **Spacing:** Use `m-*`, `p-*`, `gap-*` with the spacing scale (e.g. `p-4`, `mb-2`, `gap-4`) instead of hardcoded margins/padding in `<style>`.
+3. **Sizes:** Use `h-*`, `w-*` (e.g. `h-8`, `w-40`) or `w-100` / `h-100` where they match the need.
 4. **Cleanup:** Remove redundant scoped rules that are fully replaced by these classes (e.g. empty blocks, duplicate flex/height/padding). Remove selectors for classes that no longer exist in the template (e.g. unused `.header-search-footer`, `.loader`).
-5. Keep in `<style>` only what can’t be expressed with utilities: theme variables, borders, shadows, focus states, `:deep()` overrides, and layout that doesn’t map to the spacer scale (e.g. negative margin, exact rem not in scale).
+5. Keep in `<style>` only what can’t be expressed with utilities: theme variables, borders, shadows, focus states, `:deep()` overrides, and layout that doesn’t map to the spacing scale (e.g. negative margin, exact rem not in scale).
 

package/.ai/CSS-CLASSES-GUIDE.md

@@ -12,7 +12,7 @@ This guide documents the utility classes and **color tokens** from the design sy
 
 ## 1. Flex utilities (`flex.scss`)
 
-Tailwind-inspired flexbox classes. Combine with spacing classes (e.g. `gap-spacer-2`, `m-spacer-2`) for layout.
+Tailwind-inspired flexbox classes. Combine with spacing classes (e.g. `gap-2`, `m-2`) for layout.
 
 ### Display
 | Class          | Effect            |
@@ -82,11 +82,11 @@ Tailwind-inspired flexbox classes. Combine with spacing classes (e.g. `gap-space
 
 **Example:**
 ```html
-<div class="flex flex-row items-center justify-between gap-spacer-2">
+<div class="flex flex-row items-center justify-between gap-2">
   <span>Left</span>
   <span>Right</span>
 </div>
-<div class="flex flex-column flex-wrap gap-spacer-4">
+<div class="flex flex-column flex-wrap gap-4">
   <!-- stacked, wrapping column -->
 </div>
 ```
@@ -247,37 +247,37 @@ Margin, padding, gap, and size use a shared scale. Values use `!important` by de
 
 Use these as the **suffix** for margin, padding, gap, width, and height classes:
 
-| Size name   | Value   | Size name   | Value   |
-|-------------|---------|-------------|---------|
-| `spacer-0`  | 0       | `spacer-12` | 3rem    |
-| `spacer-half` | 0.125rem | `spacer-14` | 3.5rem  |
-| `spacer-1`  | 0.25rem | `spacer-16` | 4rem    |
-| `spacer-2`  | 0.5rem  | `spacer-20` | 5rem    |
-| `spacer-3`  | 0.75rem | `spacer-24` | 6rem    |
-| `spacer-4`  | 1rem    | … up to `spacer-86` (24rem) |
-| `spacer-5`  | 1.25rem |             |
-| `spacer-6`  | 1.5rem  |             |
-| `spacer-8`  | 2rem    |             |
-| `spacer-10` | 2.5rem  |             |
-
-Full list of keys: `spacer-0`, `spacer-half`, `spacer-1` … `spacer-10`, `spacer-12`, `spacer-14`, `spacer-16`, `spacer-20`, `spacer-24`, `spacer-28`, `spacer-32`, `spacer-36`, `spacer-40`, `spacer-44`, `spacer-48`, `spacer-52`, `spacer-56`, `spacer-60`, `spacer-64`, `spacer-72`, `spacer-80`, `spacer-86`.
+| Size name | Value   | Size name | Value   |
+|-----------|---------|-----------|---------|
+| `0`       | 0       | `12`      | 3rem    |
+| `half`    | 0.125rem | `14`      | 3.5rem  |
+| `1`       | 0.25rem | `16`      | 4rem    |
+| `2`       | 0.5rem  | `20`      | 5rem    |
+| `3`       | 0.75rem | `24`      | 6rem    |
+| `4`       | 1rem    | … up to `86` (24rem) |
+| `5`       | 1.25rem |           |
+| `6`       | 1.5rem  |           |
+| `8`       | 2rem    |           |
+| `10`      | 2.5rem  |           |
+
+Full list of keys: `0`, `half`, `1` … `10`, `12`, `14`, `16`, `20`, `24`, `28`, `32`, `36`, `40`, `44`, `48`, `52`, `56`, `60`, `64`, `72`, `80`, `86`.
 
 ### Gap
 - **Class pattern:** `gap-<size>` (size from spacing scale only)
-- **Examples:** `gap-spacer-2`, `gap-spacer-4`, `gap-spacer-0`
+- **Examples:** `gap-2`, `gap-4`, `gap-0`
 
 ### Margin
 - **Pattern:** `m-<size>`, `mx-<size>`, `my-<size>`, `mt-<size>`, `mr-<size>`, `mb-<size>`, `ml-<size>`
-- **Examples:** `m-spacer-2`, `mx-spacer-4`, `mt-spacer-1`, `mb-spacer-3`
+- **Examples:** `m-2`, `mx-4`, `mt-1`, `mb-3`
 - **Special (auto):** `mx-auto`, `ml-auto`, `mr-auto` (no `m-auto` or `my-auto`)
 
 ### Padding
 - **Pattern:** `p-<size>`, `px-<size>`, `py-<size>`, `pt-<size>`, `pr-<size>`, `pb-<size>`, `pl-<size>`
-- **Examples:** `p-spacer-4`, `px-spacer-2`, `py-spacer-3`
+- **Examples:** `p-4`, `px-2`, `py-3`
 
 ### Width and height (rem-based)
 - **Pattern:** `w-<size>`, `h-<size>` with spacing scale
-- **Examples:** `w-spacer-40`, `h-spacer-8`
+- **Examples:** `w-40`, `h-8`
 - **Special:** `w-auto`, `h-auto`
 
 ### Width and height (percentage)
@@ -296,8 +296,8 @@ Full list of keys: `spacer-0`, `spacer-half`, `spacer-1` … `spacer-10`, `space
 
 **Examples:**
 ```html
-<div class="flex flex-column gap-spacer-4 p-spacer-4">
-  <div class="flex flex-row items-center justify-between mb-spacer-2">
+<div class="flex flex-column gap-4 p-4">
+  <div class="flex flex-row items-center justify-between mb-2">
     <span class="text-primary">Title</span>
     <button class="ml-auto">Action</button>
   </div>
@@ -311,9 +311,9 @@ Full list of keys: `spacer-0`, `spacer-half`, `spacer-1` … `spacer-10`, `space
 
 - **Layout:** Prefer `flex` + direction + align/justify + `gap-*` from this guide before adding custom flex CSS.
 - **Colors:** Use `text-*` and `bg-color-*` (or `color="..."` attribute) for semantic colors. For any other color, use **Section 3** variables only: `var(--dh-<scale>-<1-10>)` (e.g. `--dh-blue-4`, `--dh-gray-7`). All available palette variables and hex values are listed in **Section 3.1**; do not invent or hardcode hex.
-- **Spacing:** Use `m-*`, `p-*`, `gap-*` with the `spacer-*` scale; use `mx-auto` for horizontal centering when appropriate.
+- **Spacing:** Use `m-*`, `p-*`, `gap-*` with the spacing scale (e.g. `m-2`, `gap-4`); use `mx-auto` for horizontal centering when appropriate.
 - **Sizes:** Use `w-*` / `h-*` with the spacing scale for fixed sizes, or `w-100` / `h-100` for 100%.
-- **Combining:** e.g. `flex flex-row items-center justify-between gap-spacer-2 p-spacer-4` is a valid and preferred pattern.
+- **Combining:** e.g. `flex flex-row items-center justify-between gap-2 p-4` is a valid and preferred pattern.
 - **No new one-off CSS:** If a layout or spacing need is covered by these classes, use the classes instead of new rules in the component.
 
 ---