eha-design-system-ai 0.4.0 → 0.5.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/README.md +1 -39
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eha-design-system-ai
|
|
2
2
|
|
|
3
|
-
AI compatibility layer for EHA Design System
|
|
3
|
+
AI compatibility layer for EHA Design System, enables LLMs to reliably generate UI components without hallucination.
|
|
4
4
|
|
|
5
5
|
## What It Does
|
|
6
6
|
|
|
@@ -64,16 +64,6 @@ This is picked up automatically by Claude Code, opencode, Cursor, and other MCP-
|
|
|
64
64
|
|
|
65
65
|
EHA Design System supports 4 brands. Each brand has its own colour token set and CSS stylesheet. Spacing, typography, border radius, shadows, and z-index are **identical across all brands**.
|
|
66
66
|
|
|
67
|
-
### Available Brands
|
|
68
|
-
|
|
69
|
-
| Brand | Primary | Secondary | Tertiary | Use Case |
|
|
70
|
-
|-------|---------|-----------|----------|----------|
|
|
71
|
-
| `eha` | `#0090FC` | `#EBCB00` | `#003963` | Default — health programmes |
|
|
72
|
-
| `etrac` | `#0090FC` | `#EBCB00` | `#003963` | Vaccination tracking |
|
|
73
|
-
| `lomis` | `#0090FC` | `#EBCB00` | `#1E3A5F` | Logistics Management |
|
|
74
|
-
| `reach` | `#522E1C` | `#E3C934` | `#003963` | Reach Data Portal |
|
|
75
|
-
|
|
76
|
-
> ⚠️ **Reach brand** has a significantly different visual identity — primary is **terracotta brown**, not blue. Links and interactive elements are also brown. Always use `ThemeProvider` and never hardcode colour values.
|
|
77
67
|
|
|
78
68
|
### Setup (Two Steps)
|
|
79
69
|
|
|
@@ -101,34 +91,6 @@ function App() {
|
|
|
101
91
|
}
|
|
102
92
|
```
|
|
103
93
|
|
|
104
|
-
### Brand Colour Differences
|
|
105
|
-
|
|
106
|
-
**eha / etrac** — identical palettes, differ in brand assets only:
|
|
107
|
-
```
|
|
108
|
-
primary: #0090FC (blue)
|
|
109
|
-
secondary: #EBCB00 (yellow)
|
|
110
|
-
tertiary: #003963 (dark navy)
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
**lomis** — different tertiary scale (navy blues):
|
|
114
|
-
```
|
|
115
|
-
primary: #0090FC (blue)
|
|
116
|
-
secondary: #EBCB00 (yellow)
|
|
117
|
-
tertiary: #1E3A5F (deep navy)
|
|
118
|
-
tertiary scale: #EFF6FF → #1E3A5F (blue/indigo range)
|
|
119
|
-
interactive.tertiary: #3B82F6
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
**reach** — completely different visual identity:
|
|
123
|
-
```
|
|
124
|
-
primary: #522E1C (terracotta brown)
|
|
125
|
-
secondary: #E3C934 (golden yellow)
|
|
126
|
-
primary scale: earthy browns (#E4C2B1 → #311C11)
|
|
127
|
-
links: #422516 (brown, not blue)
|
|
128
|
-
focus ring: #6F4C3A (dark brown)
|
|
129
|
-
info colour: #6F4C3A / infoBg: #E4C2B1
|
|
130
|
-
```
|
|
131
|
-
|
|
132
94
|
---
|
|
133
95
|
|
|
134
96
|
## Agent Workflow
|
package/package.json
CHANGED