@deskhero/dh_ui 2.62.1 → 2.63.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.ai/COMMON_TASKS.md +30 -0
- package/dist/dh_ui.css +1 -1
- package/dist/dh_ui.es.js +1116 -1084
- package/dist/dh_ui.umd.js +34 -34
- package/package.json +1 -1
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## Common Tasks
|
|
2
|
+
### Library Update
|
|
3
|
+
1. Check all the libraries that can be updated without breaking changes
|
|
4
|
+
2. Run linting: `pnpm run lint`
|
|
5
|
+
3. Run unit test: `pnpm run unit-test`
|
|
6
|
+
4. Set the same version for e2e/package.json
|
|
7
|
+
|
|
8
|
+
### Theming: Extract component colors to CSS variables
|
|
9
|
+
1. **Identify hard-coded colors** in component `<style>` blocks that should be themeable (e.g. text, background, borders).
|
|
10
|
+
2. **Replace them with CSS variables that have safe fallbacks**, for example:
|
|
11
|
+
- `color: var(--dh-records-text-color, var(--dh-text-primary));`
|
|
12
|
+
- `color: var(--dh-records-domain-color, var(--dh-primary));`
|
|
13
|
+
- `color: var(--dh-404-text-color, var(--dh-text-primary));`
|
|
14
|
+
3. **Define the new variables in `variables.light.scss` and `variables.dark.scss`** with sensible defaults:
|
|
15
|
+
- Light: map to existing light tokens (e.g. `--dh-records-text-color: var(--dh-text-primary);`)
|
|
16
|
+
- Dark: map to dark tokens (e.g. `--dh-records-text-color: var(--dh-text-primary);`)
|
|
17
|
+
4. **Keep classic theme behavior unchanged** by not touching `variables.scss`; rely on the fallback in `var(--new-var, existing-token)`.
|
|
18
|
+
5. **Verify theme switching**:
|
|
19
|
+
- Initialize theme store (`useThemeStore().initializeTheme()` is typically called on app boot).
|
|
20
|
+
- Manually toggle between `classic`, `light`, and `dark` and confirm the component now follows the theme.
|
|
21
|
+
|
|
22
|
+
### Refactor layout/spacing to DH UI utility classes
|
|
23
|
+
When touching a component’s layout or spacing, prefer the shared utilities instead of one-off scoped CSS:
|
|
24
|
+
|
|
25
|
+
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.
|
|
26
|
+
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>`.
|
|
27
|
+
3. **Sizes:** Use `h-spacer-*`, `w-spacer-*` or `w-100` / `h-100` where they match the need.
|
|
28
|
+
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`).
|
|
29
|
+
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).
|
|
30
|
+
|