@deskhero/dh_ui 2.84.0 → 2.85.0
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 +5 -2
- package/.ai/CSS-CLASSES-GUIDE.md +208 -180
- package/README.md +2 -6
- package/bin/ai-init.cjs +0 -1
- package/dist/dh_ui.css +2 -1
- package/dist/dh_ui.es.js +106479 -113664
- package/dist/dh_ui.umd.js +126 -129
- package/dist/vscode.css-custom-data.json +0 -87
- package/package.json +77 -79
package/.ai/COMMON_TASKS.md
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
## Common Tasks
|
|
2
|
+
|
|
2
3
|
### Library Update
|
|
3
|
-
|
|
4
|
+
|
|
5
|
+
1. Check all the libraries that can be updated without breaking changes
|
|
4
6
|
2. Run linting: `pnpm run lint`
|
|
5
7
|
3. Run unit test: `pnpm run unit-test`
|
|
6
8
|
4. Set the same version for e2e/package.json
|
|
7
9
|
|
|
8
10
|
### Theming: Extract component colors to CSS variables
|
|
11
|
+
|
|
9
12
|
1. **Identify hard-coded colors** in component `<style>` blocks that should be themeable (e.g. text, background, borders).
|
|
10
13
|
2. **Replace them with CSS variables that have safe fallbacks**, for example:
|
|
11
14
|
- `color: var(--dh-records-text-color, var(--dh-text-primary));`
|
|
@@ -20,6 +23,7 @@
|
|
|
20
23
|
- Manually toggle between `classic`, `light`, and `dark` and confirm the component now follows the theme.
|
|
21
24
|
|
|
22
25
|
### Refactor layout/spacing to DH UI utility classes
|
|
26
|
+
|
|
23
27
|
When touching a component’s layout or spacing, prefer the shared utilities instead of one-off scoped CSS:
|
|
24
28
|
|
|
25
29
|
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.
|
|
@@ -27,4 +31,3 @@ When touching a component’s layout or spacing, prefer the shared utilities ins
|
|
|
27
31
|
3. **Sizes:** Use `h-*`, `w-*` (e.g. `h-8`, `w-40`) or `w-100` / `h-100` where they match the need.
|
|
28
32
|
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
33
|
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).
|
|
30
|
-
|
package/.ai/CSS-CLASSES-GUIDE.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
This guide documents the utility classes and **color tokens** from the design system. Use these classes and variables in templates and components instead of writing one-off CSS or hardcoded hex colors. The guide is **exportable**: use it in other codebases that consume the same `colors.scss` (or equivalent `:root` variables).
|
|
4
4
|
|
|
5
5
|
**Source files:**
|
|
6
|
+
|
|
6
7
|
- `src/styles/flex.scss` – flexbox layout
|
|
7
8
|
- `src/styles/colorize.scss` – text/background color classes (design tokens)
|
|
8
9
|
- `src/styles/colors.scss` – color palette variables (all `--dh-*` shades and filters)
|
|
@@ -15,72 +16,81 @@ This guide documents the utility classes and **color tokens** from the design sy
|
|
|
15
16
|
Tailwind-inspired flexbox classes. Combine with spacing classes (e.g. `gap-2`, `m-2`) for layout.
|
|
16
17
|
|
|
17
18
|
### Display
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
|
21
|
-
| `
|
|
19
|
+
|
|
20
|
+
| Class | Effect |
|
|
21
|
+
| ------------- | ---------------------- |
|
|
22
|
+
| `flex` | `display: flex` |
|
|
23
|
+
| `inline-flex` | `display: inline-flex` |
|
|
22
24
|
|
|
23
25
|
### Direction
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
|
27
|
-
| `flex-row
|
|
28
|
-
| `flex-
|
|
29
|
-
| `flex-column
|
|
26
|
+
|
|
27
|
+
| Class | Effect |
|
|
28
|
+
| --------------------- | -------------------------------- |
|
|
29
|
+
| `flex-row` | `flex-direction: row` |
|
|
30
|
+
| `flex-row-reverse` | `flex-direction: row-reverse` |
|
|
31
|
+
| `flex-column` | `flex-direction: column` |
|
|
32
|
+
| `flex-column-reverse` | `flex-direction: column-reverse` |
|
|
30
33
|
|
|
31
34
|
### Wrap
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
|
35
|
-
| `flex-
|
|
35
|
+
|
|
36
|
+
| Class | Effect |
|
|
37
|
+
| ------------------- | ------------------------- |
|
|
38
|
+
| `flex-wrap` | `flex-wrap: wrap` |
|
|
39
|
+
| `flex-nowrap` | `flex-wrap: nowrap` |
|
|
36
40
|
| `flex-wrap-reverse` | `flex-wrap: wrap-reverse` |
|
|
37
41
|
|
|
38
42
|
### Flex (grow/shrink/basis)
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
|
42
|
-
| `flex-
|
|
43
|
-
| `flex-
|
|
44
|
-
| `flex-
|
|
43
|
+
|
|
44
|
+
| Class | Effect |
|
|
45
|
+
| -------------- | ---------------- |
|
|
46
|
+
| `flex-1` | `flex: 1 1 0%` |
|
|
47
|
+
| `flex-auto` | `flex: 1 1 auto` |
|
|
48
|
+
| `flex-initial` | `flex: 0 1 auto` |
|
|
49
|
+
| `flex-none` | `flex: none` |
|
|
45
50
|
|
|
46
51
|
### Justify content
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
|
50
|
-
| `justify-
|
|
51
|
-
| `justify-
|
|
52
|
+
|
|
53
|
+
| Class | Effect |
|
|
54
|
+
| ----------------- | -------------------------------- |
|
|
55
|
+
| `justify-start` | `justify-content: flex-start` |
|
|
56
|
+
| `justify-end` | `justify-content: flex-end` |
|
|
57
|
+
| `justify-center` | `justify-content: center` |
|
|
52
58
|
| `justify-between` | `justify-content: space-between` |
|
|
53
59
|
| `justify-around` | `justify-content: space-around` |
|
|
54
60
|
| `justify-evenly` | `justify-content: space-evenly` |
|
|
55
61
|
|
|
56
62
|
### Align items
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
|
60
|
-
| `items-
|
|
61
|
-
| `items-
|
|
63
|
+
|
|
64
|
+
| Class | Effect |
|
|
65
|
+
| ---------------- | ------------------------- |
|
|
66
|
+
| `items-start` | `align-items: flex-start` |
|
|
67
|
+
| `items-end` | `align-items: flex-end` |
|
|
68
|
+
| `items-center` | `align-items: center` |
|
|
62
69
|
| `items-baseline` | `align-items: baseline` |
|
|
63
70
|
| `items-stretch` | `align-items: stretch` |
|
|
64
71
|
|
|
65
72
|
### Align self
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
|
69
|
-
| `self-
|
|
70
|
-
| `self-
|
|
71
|
-
| `self-
|
|
72
|
-
| `self-
|
|
73
|
-
| `self-
|
|
73
|
+
|
|
74
|
+
| Class | Effect |
|
|
75
|
+
| --------------- | ------------------------ |
|
|
76
|
+
| `self-auto` | `align-self: auto` |
|
|
77
|
+
| `self-start` | `align-self: flex-start` |
|
|
78
|
+
| `self-end` | `align-self: flex-end` |
|
|
79
|
+
| `self-center` | `align-self: center` |
|
|
80
|
+
| `self-stretch` | `align-self: stretch` |
|
|
81
|
+
| `self-baseline` | `align-self: baseline` |
|
|
74
82
|
|
|
75
83
|
### Order
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
|
79
|
-
| `order-
|
|
80
|
-
| `order-
|
|
84
|
+
|
|
85
|
+
| Class | Effect |
|
|
86
|
+
| ---------------------- | ------------------------ |
|
|
87
|
+
| `order-first` | `order: -9999` |
|
|
88
|
+
| `order-last` | `order: 9999` |
|
|
89
|
+
| `order-none` | `order: 0` |
|
|
81
90
|
| `order-1` … `order-12` | `order: 1` … `order: 12` |
|
|
82
91
|
|
|
83
92
|
**Example:**
|
|
93
|
+
|
|
84
94
|
```html
|
|
85
95
|
<div class="flex flex-row items-center justify-between gap-2">
|
|
86
96
|
<span>Left</span>
|
|
@@ -98,45 +108,49 @@ Tailwind-inspired flexbox classes. Combine with spacing classes (e.g. `gap-2`, `
|
|
|
98
108
|
Uses design tokens (`--dh-*`). Prefer these over hardcoded colors.
|
|
99
109
|
|
|
100
110
|
### Color attribute (on any element)
|
|
111
|
+
|
|
101
112
|
Set the `color` **attribute** (not class) for semantic text color:
|
|
102
113
|
|
|
103
|
-
| Attribute value
|
|
104
|
-
|
|
105
|
-
| `color="primary"`
|
|
106
|
-
| `color="secondary"`
|
|
114
|
+
| Attribute value | Maps to variable |
|
|
115
|
+
| --------------------------- | ----------------------------- |
|
|
116
|
+
| `color="primary"` | `--dh-primary` |
|
|
117
|
+
| `color="secondary"` | `--dh-text-secondary` |
|
|
107
118
|
| `color="secondary-lighter"` | `--dh-text-secondary-lighter` |
|
|
108
|
-
| `color="danger"`
|
|
109
|
-
| `color="success"`
|
|
110
|
-
| `color="warning"`
|
|
111
|
-
| `color="purple"`
|
|
119
|
+
| `color="danger"` | `--dh-danger` |
|
|
120
|
+
| `color="success"` | `--dh-success` |
|
|
121
|
+
| `color="warning"` | `--dh-warning` |
|
|
122
|
+
| `color="purple"` | `--dh-purple` |
|
|
112
123
|
|
|
113
124
|
**Example:** `<span color="danger">Error message</span>`
|
|
114
125
|
|
|
115
126
|
### Text color classes (`.text-*`)
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
|
119
|
-
| `text-
|
|
127
|
+
|
|
128
|
+
| Class | Maps to variable |
|
|
129
|
+
| ------------------------ | ----------------------------- |
|
|
130
|
+
| `text-primary` | `--dh-text-primary` |
|
|
131
|
+
| `text-secondary` | `--dh-text-secondary` |
|
|
120
132
|
| `text-secondary-lighter` | `--dh-text-secondary-lighter` |
|
|
121
|
-
| `text-disabled`
|
|
122
|
-
| `text-warning`
|
|
123
|
-
| `text-purple`
|
|
124
|
-
| `text-success`
|
|
125
|
-
| `text-danger`
|
|
133
|
+
| `text-disabled` | `--dh-text-disabled` |
|
|
134
|
+
| `text-warning` | `--dh-warning` |
|
|
135
|
+
| `text-purple` | `--dh-purple` |
|
|
136
|
+
| `text-success` | `--dh-success` |
|
|
137
|
+
| `text-danger` | `--dh-danger` |
|
|
126
138
|
|
|
127
139
|
### Background color classes (`.bg-color-*`)
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
|
131
|
-
| `bg-color-
|
|
140
|
+
|
|
141
|
+
| Class | Maps to variable |
|
|
142
|
+
| ---------------------------- | ----------------------------- |
|
|
143
|
+
| `bg-color-primary` | `--dh-bg-primary` |
|
|
144
|
+
| `bg-color-secondary` | `--dh-text-secondary` |
|
|
132
145
|
| `bg-color-secondary-lighter` | `--dh-text-secondary-lighter` |
|
|
133
|
-
| `bg-color-disabled`
|
|
134
|
-
| `bg-color-warning`
|
|
135
|
-
| `bg-color-purple`
|
|
136
|
-
| `bg-color-success`
|
|
137
|
-
| `bg-color-danger`
|
|
146
|
+
| `bg-color-disabled` | `--dh-text-disabled` |
|
|
147
|
+
| `bg-color-warning` | `--dh-warning-lighter` |
|
|
148
|
+
| `bg-color-purple` | `--dh-purple-lighter` |
|
|
149
|
+
| `bg-color-success` | `--dh-success-lighter` |
|
|
150
|
+
| `bg-color-danger` | `--dh-danger-lighter` |
|
|
138
151
|
|
|
139
152
|
**Example:**
|
|
153
|
+
|
|
140
154
|
```html
|
|
141
155
|
<p class="text-secondary">Hint text</p>
|
|
142
156
|
<div class="bg-color-success text-primary">Success state</div>
|
|
@@ -152,73 +166,73 @@ Base color scales are defined as CSS variables in `src/styles/colors.scss`. Each
|
|
|
152
166
|
|
|
153
167
|
### 3.1 Palette scales (variable → hex)
|
|
154
168
|
|
|
155
|
-
| Variable
|
|
156
|
-
|
|
157
|
-
| **Burgundy**
|
|
158
|
-
| `--dh-burgundy-1`
|
|
159
|
-
| `--dh-burgundy-6`
|
|
160
|
-
| **Pink**
|
|
161
|
-
| `--dh-pink-1`
|
|
162
|
-
| `--dh-pink-6`
|
|
163
|
-
| **Gray**
|
|
164
|
-
| `--dh-gray-1`
|
|
165
|
-
| `--dh-gray-6`
|
|
166
|
-
| **Yellow**
|
|
167
|
-
| `--dh-yellow-1`
|
|
168
|
-
| `--dh-yellow-6`
|
|
169
|
-
| **Red**
|
|
170
|
-
| `--dh-red-1`
|
|
171
|
-
| `--dh-red-6`
|
|
172
|
-
| **Blue**
|
|
173
|
-
| `--dh-blue-1`
|
|
174
|
-
| `--dh-blue-6`
|
|
175
|
-
| **Green**
|
|
176
|
-
| `--dh-green-1`
|
|
177
|
-
| `--dh-green-6`
|
|
178
|
-
| **Orange**
|
|
179
|
-
| `--dh-orange-1`
|
|
180
|
-
| `--dh-orange-6`
|
|
181
|
-
| **Purple**
|
|
182
|
-
| `--dh-purple-1`
|
|
183
|
-
| `--dh-purple-6`
|
|
184
|
-
| **Surface** (dark → light neutrals)
|
|
185
|
-
| `--dh-surface-1`
|
|
186
|
-
| `--dh-surface-6`
|
|
187
|
-
| **Surface contrast** (dark → light; use on dark UIs) |
|
|
188
|
-
| `--dh-surface-contrast-10`
|
|
189
|
-
| `--dh-surface-contrast-5`
|
|
169
|
+
| Variable | Hex | Variable | Hex | Variable | Hex | Variable | Hex | Variable | Hex |
|
|
170
|
+
| ---------------------------------------------------- | ------- | ------------------------- | ------- | ------------------------- | ------- | ------------------------- | ------- | ------------------------- | ------- |
|
|
171
|
+
| **Burgundy** | | | | | | | | | |
|
|
172
|
+
| `--dh-burgundy-1` | #660033 | `--dh-burgundy-2` | #944c70 | `--dh-burgundy-3` | #c299a9 | `--dh-burgundy-4` | #f0e5eb | `--dh-burgundy-5` | #f9f2f5 |
|
|
173
|
+
| `--dh-burgundy-6` | #fcf5f8 | `--dh-burgundy-7` | #fefafd | `--dh-burgundy-8` | #fff5f9 | `--dh-burgundy-9` | #fffbfe | `--dh-burgundy-10` | #ffffff |
|
|
174
|
+
| **Pink** | | | | | | | | | |
|
|
175
|
+
| `--dh-pink-1` | #ff668f | `--dh-pink-2` | #ff7fa7 | `--dh-pink-3` | #ff95af | `--dh-pink-4` | #ffdbe0 | `--dh-pink-5` | #ffc3d1 |
|
|
176
|
+
| `--dh-pink-6` | #ffeaeb | `--dh-pink-7` | #fff1f2 | `--dh-pink-8` | #f0e5eb | `--dh-pink-9` | #ffffff | `--dh-pink-10` | #ffffff |
|
|
177
|
+
| **Gray** | | | | | | | | | |
|
|
178
|
+
| `--dh-gray-1` | #808080 | `--dh-gray-2` | #999999 | `--dh-gray-3` | #b3b3b3 | `--dh-gray-4` | #cccccc | `--dh-gray-5` | #dddddd |
|
|
179
|
+
| `--dh-gray-6` | #e5e5e5 | `--dh-gray-7` | #f0f0f0 | `--dh-gray-8` | #f2f2f2 | `--dh-gray-9` | #f5f5f5 | `--dh-gray-10` | #ffffff |
|
|
180
|
+
| **Yellow** | | | | | | | | | |
|
|
181
|
+
| `--dh-yellow-1` | #e1a400 | `--dh-yellow-2` | #e6b000 | `--dh-yellow-3` | #ebbc00 | `--dh-yellow-4` | #f0c800 | `--dh-yellow-5` | #f5d300 |
|
|
182
|
+
| `--dh-yellow-6` | #FCDE02 | `--dh-yellow-7` | #ffcf56 | `--dh-yellow-8` | #ffda79 | `--dh-yellow-9` | #ffe59c | `--dh-yellow-10` | #fff1c2 |
|
|
183
|
+
| **Red** | | | | | | | | | |
|
|
184
|
+
| `--dh-red-1` | #c32f27 | `--dh-red-2` | #d9332e | `--dh-red-3` | #ef3835 | `--dh-red-4` | #f53c3b | `--dh-red-5` | #fb4040 |
|
|
185
|
+
| `--dh-red-6` | #ff4444 | `--dh-red-7` | #ff4848 | `--dh-red-8` | #ff4c4c | `--dh-red-9` | #ff5050 | `--dh-red-10` | #ff8e88 |
|
|
186
|
+
| **Blue** | | | | | | | | | |
|
|
187
|
+
| `--dh-blue-1` | #0a4f7f | `--dh-blue-2` | #0f71b4 | `--dh-blue-3` | #177fc2 | `--dh-blue-4` | #1e8bd6 | `--dh-blue-5` | #3497de |
|
|
188
|
+
| `--dh-blue-6` | #5ea9e5 | `--dh-blue-7` | #8cc4f0 | `--dh-blue-8` | #c2e0f7 | `--dh-blue-9` | #e3f0fb | `--dh-blue-10` | #f5f9ff |
|
|
189
|
+
| **Green** | | | | | | | | | |
|
|
190
|
+
| `--dh-green-1` | #146233 | `--dh-green-2` | #18753c | `--dh-green-3` | #1d8245 | `--dh-green-4` | #289b54 | `--dh-green-5` | #37b866 |
|
|
191
|
+
| `--dh-green-6` | #5fd287 | `--dh-green-7` | #9de9b5 | `--dh-green-8` | #dcf5e0 | `--dh-green-9` | #f1fbf3 | `--dh-green-10` | #ffffff |
|
|
192
|
+
| **Orange** | | | | | | | | | |
|
|
193
|
+
| `--dh-orange-1` | #8a5707 | `--dh-orange-2` | #a36508 | `--dh-orange-3` | #cd7f0a | `--dh-orange-4` | #e2910d | `--dh-orange-5` | #f2a836 |
|
|
194
|
+
| `--dh-orange-6` | #f6b75e | `--dh-orange-7` | #f8c887 | `--dh-orange-8` | #f3cca8 | `--dh-orange-9` | #ffe6cf | `--dh-orange-10` | #fff7eb |
|
|
195
|
+
| **Purple** | | | | | | | | | |
|
|
196
|
+
| `--dh-purple-1` | #5f2a9b | `--dh-purple-2` | #7633c0 | `--dh-purple-3` | #8642cf | `--dh-purple-4` | #9b51e0 | `--dh-purple-5` | #a968e4 |
|
|
197
|
+
| `--dh-purple-6` | #bc84ea | `--dh-purple-7` | #d8b6f4 | `--dh-purple-8` | #f0e0fb | `--dh-purple-9` | #fff5f4 | `--dh-purple-10` | #ffffff |
|
|
198
|
+
| **Surface** (dark → light neutrals) | | | | | | | | | |
|
|
199
|
+
| `--dh-surface-1` | #121212 | `--dh-surface-2` | #2b2a2a | `--dh-surface-3` | #333333 | `--dh-surface-4` | #444444 | `--dh-surface-5` | #555555 |
|
|
200
|
+
| `--dh-surface-6` | #666666 | `--dh-surface-7` | #777777 | `--dh-surface-8` | #888888 | `--dh-surface-9` | #999999 | `--dh-surface-10` | #aaaaaa |
|
|
201
|
+
| **Surface contrast** (dark → light; use on dark UIs) | | | | | | | | | |
|
|
202
|
+
| `--dh-surface-contrast-10` | #555555 | `--dh-surface-contrast-9` | #666666 | `--dh-surface-contrast-8` | #777777 | `--dh-surface-contrast-7` | #888888 | `--dh-surface-contrast-6` | #999999 |
|
|
203
|
+
| `--dh-surface-contrast-5` | #aaaaaa | `--dh-surface-contrast-4` | #bbbbbb | `--dh-surface-contrast-3` | #cccccc | `--dh-surface-contrast-2` | #dddddd | `--dh-surface-contrast-1` | #eeeeee |
|
|
190
204
|
|
|
191
205
|
### 3.2 Filter variables (for SVG/icons)
|
|
192
206
|
|
|
193
207
|
Use as `filter: var(--dh-*);` to tint icons or images. Values are CSS `filter()` functions.
|
|
194
208
|
|
|
195
|
-
| Variable
|
|
196
|
-
|
|
197
|
-
| `--dh-white-filter`
|
|
198
|
-
| `--dh-burgundy-filter` | Icon in burgundy
|
|
199
|
-
| `--dh-filter-blue`
|
|
200
|
-
| `--dh-filter-red`
|
|
201
|
-
| `--dh-filter-gray`
|
|
202
|
-
| `--dh-filter-yellow`
|
|
203
|
-
| `--dh-filter-pink`
|
|
204
|
-
| `--dh-filter-light`
|
|
205
|
-
| `--dh-filter-lighter`
|
|
206
|
-
| `--dh-filter-white`
|
|
209
|
+
| Variable | Use case |
|
|
210
|
+
| ---------------------- | --------------------------------------- |
|
|
211
|
+
| `--dh-white-filter` | Icon as white (e.g. on dark background) |
|
|
212
|
+
| `--dh-burgundy-filter` | Icon in burgundy |
|
|
213
|
+
| `--dh-filter-blue` | Icon in primary blue |
|
|
214
|
+
| `--dh-filter-red` | Icon in danger/red |
|
|
215
|
+
| `--dh-filter-gray` | Icon in gray |
|
|
216
|
+
| `--dh-filter-yellow` | Icon in yellow |
|
|
217
|
+
| `--dh-filter-pink` | Icon in pink |
|
|
218
|
+
| `--dh-filter-light` | Slightly brighter |
|
|
219
|
+
| `--dh-filter-lighter` | Much brighter |
|
|
220
|
+
| `--dh-filter-white` | Force white |
|
|
207
221
|
|
|
208
222
|
### 3.3 Quick lookup by intent
|
|
209
223
|
|
|
210
|
-
| Intent
|
|
211
|
-
|
|
212
|
-
| Primary / links / focus | `--dh-primary` (or `--dh-blue-2`, `--dh-blue-4`, `--dh-blue-6`)
|
|
213
|
-
| Success / positive
|
|
214
|
-
| Danger / error
|
|
215
|
-
| Warning
|
|
216
|
-
| Purple accent
|
|
217
|
-
| Body text
|
|
218
|
-
| Disabled / borders
|
|
219
|
-
| White / light bg
|
|
220
|
-
| Dark text on light
|
|
221
|
-
| Light text on dark
|
|
224
|
+
| Intent | Prefer these variables |
|
|
225
|
+
| ----------------------- | ----------------------------------------------------------------------------------- |
|
|
226
|
+
| Primary / links / focus | `--dh-primary` (or `--dh-blue-2`, `--dh-blue-4`, `--dh-blue-6`) |
|
|
227
|
+
| Success / positive | `--dh-success` (or `--dh-green-3`, `--dh-green-8`, `--dh-green-9`) |
|
|
228
|
+
| Danger / error | `--dh-danger` (or `--dh-red-1`, `--dh-red-10`) |
|
|
229
|
+
| Warning | `--dh-warning` (or `--dh-orange-3`, `--dh-orange-8`, `--dh-orange-10`) |
|
|
230
|
+
| Purple accent | `--dh-purple` (or `--dh-purple-4`, `--dh-purple-9`) |
|
|
231
|
+
| Body text | `--dh-text-primary` (or `--dh-surface-5`), `--dh-text-secondary` (or `--dh-gray-1`) |
|
|
232
|
+
| Disabled / borders | `--dh-text-disabled` (or `--dh-gray-6`) |
|
|
233
|
+
| White / light bg | `--dh-white` (or `--dh-gray-10`), `--dh-bg-primary` (or `--dh-blue-10`) |
|
|
234
|
+
| Dark text on light | `--dh-dark`, `--dh-surface-1` … `--dh-surface-5` |
|
|
235
|
+
| Light text on dark | `--dh-surface-contrast-1` … `--dh-surface-contrast-10` |
|
|
222
236
|
|
|
223
237
|
### 3.4 Usage guidelines (AI & other codebases)
|
|
224
238
|
|
|
@@ -247,54 +261,60 @@ Margin, padding, gap, and size use a shared scale. Values use `!important` by de
|
|
|
247
261
|
|
|
248
262
|
Use these as the **suffix** for margin, padding, gap, width, and height classes:
|
|
249
263
|
|
|
250
|
-
| Size name | Value
|
|
251
|
-
|
|
252
|
-
| `0` | 0
|
|
253
|
-
| `half` | 0.125rem | `14`
|
|
254
|
-
| `1` | 0.25rem
|
|
255
|
-
| `2` | 0.5rem
|
|
256
|
-
| `3` | 0.75rem
|
|
257
|
-
| `4` | 1rem
|
|
258
|
-
| `5` | 1.25rem
|
|
259
|
-
| `6` | 1.5rem
|
|
260
|
-
| `8` | 2rem
|
|
261
|
-
| `10` | 2.5rem
|
|
264
|
+
| Size name | Value | Size name | Value |
|
|
265
|
+
| --------- | -------- | -------------------- | ------ |
|
|
266
|
+
| `0` | 0 | `12` | 3rem |
|
|
267
|
+
| `half` | 0.125rem | `14` | 3.5rem |
|
|
268
|
+
| `1` | 0.25rem | `16` | 4rem |
|
|
269
|
+
| `2` | 0.5rem | `20` | 5rem |
|
|
270
|
+
| `3` | 0.75rem | `24` | 6rem |
|
|
271
|
+
| `4` | 1rem | … up to `86` (24rem) |
|
|
272
|
+
| `5` | 1.25rem | |
|
|
273
|
+
| `6` | 1.5rem | |
|
|
274
|
+
| `8` | 2rem | |
|
|
275
|
+
| `10` | 2.5rem | |
|
|
262
276
|
|
|
263
277
|
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`.
|
|
264
278
|
|
|
265
279
|
### Gap
|
|
280
|
+
|
|
266
281
|
- **Class pattern:** `gap-<size>` (size from spacing scale only)
|
|
267
282
|
- **Examples:** `gap-2`, `gap-4`, `gap-0`
|
|
268
283
|
|
|
269
284
|
### Margin
|
|
285
|
+
|
|
270
286
|
- **Pattern:** `m-<size>`, `mx-<size>`, `my-<size>`, `mt-<size>`, `mr-<size>`, `mb-<size>`, `ml-<size>`
|
|
271
287
|
- **Examples:** `m-2`, `mx-4`, `mt-1`, `mb-3`
|
|
272
288
|
- **Special (auto):** `mx-auto`, `ml-auto`, `mr-auto` (no `m-auto` or `my-auto`)
|
|
273
289
|
|
|
274
290
|
### Padding
|
|
291
|
+
|
|
275
292
|
- **Pattern:** `p-<size>`, `px-<size>`, `py-<size>`, `pt-<size>`, `pr-<size>`, `pb-<size>`, `pl-<size>`
|
|
276
293
|
- **Examples:** `p-4`, `px-2`, `py-3`
|
|
277
294
|
|
|
278
295
|
### Width and height (rem-based)
|
|
296
|
+
|
|
279
297
|
- **Pattern:** `w-<size>`, `h-<size>` with spacing scale
|
|
280
298
|
- **Examples:** `w-40`, `h-8`
|
|
281
299
|
- **Special:** `w-auto`, `h-auto`
|
|
282
300
|
|
|
283
301
|
### Width and height (percentage)
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
|
287
|
-
| `w-
|
|
288
|
-
| `w-
|
|
289
|
-
| `w-
|
|
290
|
-
| `w-
|
|
291
|
-
| `
|
|
292
|
-
| `h-
|
|
293
|
-
| `h-
|
|
294
|
-
| `h-
|
|
295
|
-
| `h-
|
|
302
|
+
|
|
303
|
+
| Class | Effect |
|
|
304
|
+
| ------- | ------------ |
|
|
305
|
+
| `w-100` | width: 100% |
|
|
306
|
+
| `w-75` | width: 75% |
|
|
307
|
+
| `w-50` | width: 50% |
|
|
308
|
+
| `w-25` | width: 25% |
|
|
309
|
+
| `w-0` | width: 0% |
|
|
310
|
+
| `h-100` | height: 100% |
|
|
311
|
+
| `h-75` | height: 75% |
|
|
312
|
+
| `h-50` | height: 50% |
|
|
313
|
+
| `h-25` | height: 25% |
|
|
314
|
+
| `h-0` | height: 0% |
|
|
296
315
|
|
|
297
316
|
**Examples:**
|
|
317
|
+
|
|
298
318
|
```html
|
|
299
319
|
<div class="flex flex-column gap-4 p-4">
|
|
300
320
|
<div class="flex flex-row items-center justify-between mb-2">
|
|
@@ -323,58 +343,66 @@ Full list of keys: `0`, `half`, `1` … `10`, `12`, `14`, `16`, `20`, `24`, `28`
|
|
|
323
343
|
Utility classes for text transform, alignment, weight, decoration, truncation and line clamping. These are intentionally Tailwind-like and **do not use the `dh-` prefix**.
|
|
324
344
|
|
|
325
345
|
### Text transform
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
|
329
|
-
| `
|
|
330
|
-
| `
|
|
331
|
-
| `
|
|
346
|
+
|
|
347
|
+
| Class | Effect |
|
|
348
|
+
| --------------------- | ---------------------------- |
|
|
349
|
+
| `text-transform-none` | `text-transform: none` |
|
|
350
|
+
| `capitalize` | `text-transform: capitalize` |
|
|
351
|
+
| `uppercase` | `text-transform: uppercase` |
|
|
352
|
+
| `lowercase` | `text-transform: lowercase` |
|
|
332
353
|
|
|
333
354
|
### Text alignment
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
|
337
|
-
| `text-
|
|
338
|
-
| `text-
|
|
355
|
+
|
|
356
|
+
| Class | Effect |
|
|
357
|
+
| -------------- | --------------------- |
|
|
358
|
+
| `text-left` | `text-align: left` |
|
|
359
|
+
| `text-center` | `text-align: center` |
|
|
360
|
+
| `text-right` | `text-align: right` |
|
|
339
361
|
| `text-justify` | `text-align: justify` |
|
|
340
362
|
|
|
341
363
|
### Font weight
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
|
345
|
-
| `font-
|
|
346
|
-
| `font-
|
|
364
|
+
|
|
365
|
+
| Class | Effect |
|
|
366
|
+
| ------------- | ------------------ |
|
|
367
|
+
| `font-normal` | `font-weight: 400` |
|
|
368
|
+
| `font-medium` | `font-weight: 500` |
|
|
369
|
+
| `font-bold` | `font-weight: 700` |
|
|
347
370
|
|
|
348
371
|
### Text decoration
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
|
352
|
-
| `
|
|
353
|
-
| `
|
|
372
|
+
|
|
373
|
+
| Class | Effect |
|
|
374
|
+
| -------------- | ------------------------------- |
|
|
375
|
+
| `underline` | `text-decoration: underline` |
|
|
376
|
+
| `line-through` | `text-decoration: line-through` |
|
|
377
|
+
| `no-underline` | `text-decoration: none` |
|
|
354
378
|
|
|
355
379
|
### Truncation & wrapping
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
|
359
|
-
| `
|
|
360
|
-
| `
|
|
380
|
+
|
|
381
|
+
| Class | Effect |
|
|
382
|
+
| ---------- | --------------------------------------------------------------------------------------- |
|
|
383
|
+
| `truncate` | Single-line ellipsis (`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`) |
|
|
384
|
+
| `wrap` | Normal wrapping (`white-space: normal`) |
|
|
385
|
+
| `nowrap` | No wrapping (`white-space: nowrap`) |
|
|
361
386
|
|
|
362
387
|
### Line clamp (multi-line truncation)
|
|
388
|
+
|
|
363
389
|
These rely on `-webkit-line-clamp` and `-webkit-box-orient` for cross-browser support.
|
|
364
390
|
|
|
365
391
|
| Class | Lines shown |
|
|
366
|
-
|
|
392
|
+
| -------------- | ----------- |
|
|
367
393
|
| `line-clamp-1` | 1 line |
|
|
368
394
|
| `line-clamp-2` | 2 lines |
|
|
369
395
|
| `line-clamp-3` | 3 lines |
|
|
370
396
|
|
|
371
397
|
**Example:**
|
|
398
|
+
|
|
372
399
|
```html
|
|
373
400
|
<p class="text-primary font-medium text-center truncate">
|
|
374
401
|
This is a long title that will truncate on a single line.
|
|
375
402
|
</p>
|
|
376
403
|
|
|
377
404
|
<p class="text-secondary line-clamp-2">
|
|
378
|
-
This description will be clamped to two lines with an ellipsis in supporting
|
|
405
|
+
This description will be clamped to two lines with an ellipsis in supporting
|
|
406
|
+
browsers.
|
|
379
407
|
</p>
|
|
380
408
|
```
|
package/README.md
CHANGED
|
@@ -88,12 +88,8 @@ In your **consumer application**, add a workspace-level `.vscode/settings.json`
|
|
|
88
88
|
|
|
89
89
|
```json
|
|
90
90
|
{
|
|
91
|
-
"css.customData": [
|
|
92
|
-
|
|
93
|
-
],
|
|
94
|
-
"html.customData": [
|
|
95
|
-
"../dh-ui/dist/vscode.html-custom-data.json"
|
|
96
|
-
]
|
|
91
|
+
"css.customData": ["../dh-ui/dist/vscode.css-custom-data.json"],
|
|
92
|
+
"html.customData": ["../dh-ui/dist/vscode.html-custom-data.json"]
|
|
97
93
|
}
|
|
98
94
|
```
|
|
99
95
|
|
package/bin/ai-init.cjs
CHANGED