@lifeonlars/prime-yggdrasil 0.2.6 → 0.3.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/agents/accessibility.md +581 -0
- package/.ai/agents/block-composer.md +909 -0
- package/.ai/agents/drift-validator.md +784 -0
- package/.ai/agents/interaction-patterns.md +465 -0
- package/.ai/agents/primeflex-guard.md +815 -0
- package/.ai/agents/semantic-token-intent.md +739 -0
- package/README.md +139 -12
- package/cli/bin/yggdrasil.js +134 -0
- package/cli/commands/audit.js +425 -0
- package/cli/commands/init.js +288 -0
- package/cli/commands/validate.js +405 -0
- package/cli/templates/.ai/yggdrasil/README.md +308 -0
- package/docs/AESTHETICS.md +168 -0
- package/docs/PRIMEFLEX-POLICY.md +737 -0
- package/package.json +6 -1
- package/docs/Fixes.md +0 -258
- package/docs/archive/README.md +0 -27
- package/docs/archive/SEMANTIC-MIGRATION-PLAN.md +0 -177
- package/docs/archive/YGGDRASIL_THEME.md +0 -264
- package/docs/archive/agentic_policy.md +0 -216
- package/docs/contrast-report.md +0 -9
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lifeonlars/prime-yggdrasil",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "AI-agent-friendly PrimeReact design system for component-driven development with semantic tokens and dark mode support",
|
|
6
6
|
"keywords": [
|
|
@@ -39,9 +39,14 @@
|
|
|
39
39
|
"./typography.css": "./dist/typography.css",
|
|
40
40
|
"./docs/*": "./docs/*"
|
|
41
41
|
},
|
|
42
|
+
"bin": {
|
|
43
|
+
"yggdrasil": "./cli/bin/yggdrasil.js"
|
|
44
|
+
},
|
|
42
45
|
"files": [
|
|
43
46
|
"dist",
|
|
44
47
|
"docs",
|
|
48
|
+
"cli",
|
|
49
|
+
".ai",
|
|
45
50
|
"README.md",
|
|
46
51
|
"LICENSE"
|
|
47
52
|
],
|
package/docs/Fixes.md
DELETED
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
# Prime Yggdrasil npm Package Issues - Testing Report
|
|
2
|
-
|
|
3
|
-
## Version History
|
|
4
|
-
|
|
5
|
-
### v0.1.1 - Initial Test
|
|
6
|
-
|
|
7
|
-
**Status:** ❌ BROKEN - Missing 4 critical CSS files
|
|
8
|
-
|
|
9
|
-
### v0.1.2 - After First Fix
|
|
10
|
-
|
|
11
|
-
**Status:** ⚠️ PARTIALLY FIXED - Missing 1 critical file (prime-palette.css)
|
|
12
|
-
|
|
13
|
-
### v0.1.3 - After Second Fix
|
|
14
|
-
|
|
15
|
-
**Status:** ❌ BROKEN - CSS syntax error in misc.css
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
|
-
## Issue #1: Missing CSS Files (v0.1.1) ✅ RESOLVED
|
|
20
|
-
|
|
21
|
-
### Problem
|
|
22
|
-
|
|
23
|
-
The `yggdrasil-light.css` and `yggdrasil-dark.css` files contain `@import` statements that reference CSS files that don't exist in the published package.
|
|
24
|
-
|
|
25
|
-
**Status:** ✅ FIXED in v0.1.2
|
|
26
|
-
|
|
27
|
-
---
|
|
28
|
-
|
|
29
|
-
## Issue #2: Missing prime-palette.css (v0.1.2) ✅ RESOLVED
|
|
30
|
-
|
|
31
|
-
### Problem
|
|
32
|
-
|
|
33
|
-
Both `semantic-light.css` and `semantic-dark.css` import `prime-palette.css` which didn't exist in dist folder.
|
|
34
|
-
|
|
35
|
-
**Status:** ✅ FIXED in v0.1.3 - File is now present (8.1KB)
|
|
36
|
-
|
|
37
|
-
---
|
|
38
|
-
|
|
39
|
-
## Issue #3: CSS Syntax Error in misc.css (v0.1.3) ❌ CURRENT ISSUE
|
|
40
|
-
|
|
41
|
-
### Problem (NEW in v0.1.3)
|
|
42
|
-
|
|
43
|
-
The file `dist/components/misc.css` has a CSS syntax error - an extra closing brace `}` at line 606.
|
|
44
|
-
|
|
45
|
-
**Build Error:**
|
|
46
|
-
|
|
47
|
-
```
|
|
48
|
-
[vite:css] [postcss] postcss-import:
|
|
49
|
-
S:\...\dist\components\misc.css:606:1: Unexpected }
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
**Location:** `components/misc.css` line 606
|
|
53
|
-
|
|
54
|
-
**Analysis:**
|
|
55
|
-
|
|
56
|
-
- Lines 1-606 contain:
|
|
57
|
-
- **Opening braces:** 127
|
|
58
|
-
- **Closing braces:** 128
|
|
59
|
-
- **Extra closing braces:** 1
|
|
60
|
-
|
|
61
|
-
**Context around line 606:**
|
|
62
|
-
|
|
63
|
-
```css
|
|
64
|
-
.border-round-right-lg {
|
|
65
|
-
border-top-right-radius: var(--radius-lg) !important;
|
|
66
|
-
border-bottom-right-radius: var(--radius-lg) !important;
|
|
67
|
-
}
|
|
68
|
-
} ← Line 606: EXTRA CLOSING BRACE
|
|
69
|
-
|
|
70
|
-
.p-inplace .p-inplace-display {
|
|
71
|
-
padding: 0.75rem 0.75rem;
|
|
72
|
-
```
|
|
73
|
-
|
|
74
|
-
**Impact:**
|
|
75
|
-
|
|
76
|
-
- ❌ Production build fails completely
|
|
77
|
-
- ❌ Cannot deploy application
|
|
78
|
-
- ❌ PostCSS parsing error prevents CSS compilation
|
|
79
|
-
|
|
80
|
-
**Root Cause:**
|
|
81
|
-
There's an unmatched closing brace at line 606. This appears to be a leftover from editing or a merge conflict. The brace doesn't close any open block.
|
|
82
|
-
|
|
83
|
-
---
|
|
84
|
-
|
|
85
|
-
## Recommended Fix for v0.1.4
|
|
86
|
-
|
|
87
|
-
### Fix: Remove Extra Closing Brace
|
|
88
|
-
|
|
89
|
-
**In `dist/components/misc.css` line 606:**
|
|
90
|
-
|
|
91
|
-
```diff
|
|
92
|
-
.border-round-right-lg {
|
|
93
|
-
border-top-right-radius: var(--radius-lg) !important;
|
|
94
|
-
border-bottom-right-radius: var(--radius-lg) !important;
|
|
95
|
-
}
|
|
96
|
-
- }
|
|
97
|
-
|
|
98
|
-
.p-inplace .p-inplace-display {
|
|
99
|
-
padding: 0.75rem 0.75rem;
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
**OR** - Check the source file before build:
|
|
103
|
-
|
|
104
|
-
If this error is coming from the source, fix it in the source file (likely `src/theme/components/misc.css` or similar) and rebuild.
|
|
105
|
-
|
|
106
|
-
### Validation Step
|
|
107
|
-
|
|
108
|
-
After fixing, validate the CSS:
|
|
109
|
-
|
|
110
|
-
```bash
|
|
111
|
-
# Count braces - should be equal
|
|
112
|
-
grep -c "{" dist/components/misc.css
|
|
113
|
-
grep -c "}" dist/components/misc.css
|
|
114
|
-
|
|
115
|
-
# OR use a CSS linter
|
|
116
|
-
npx stylelint dist/components/misc.css
|
|
117
|
-
```
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## Files Status in v0.1.3
|
|
122
|
-
|
|
123
|
-
All required files are now present:
|
|
124
|
-
|
|
125
|
-
- ✅ `components.css` (469 bytes)
|
|
126
|
-
- ✅ `foundations.css` (6.1KB)
|
|
127
|
-
- ✅ `prime-palette.css` (8.1KB) - **FIXED in v0.1.3**
|
|
128
|
-
- ✅ `radius.css` (1.6KB)
|
|
129
|
-
- ✅ `semantic-dark.css` (9.0KB)
|
|
130
|
-
- ✅ `semantic-light.css` (8.8KB)
|
|
131
|
-
- ✅ `yggdrasil-dark.css` (399 bytes)
|
|
132
|
-
- ✅ `yggdrasil-light.css` (401 bytes)
|
|
133
|
-
- ✅ `components/` directory with individual component CSS files
|
|
134
|
-
- ❌ `components/misc.css` has syntax error
|
|
135
|
-
|
|
136
|
-
---
|
|
137
|
-
|
|
138
|
-
## Testing Checklist for v0.1.4
|
|
139
|
-
|
|
140
|
-
When the package is updated, verify:
|
|
141
|
-
|
|
142
|
-
- [ ] Remove extra closing brace from misc.css line 606
|
|
143
|
-
- [ ] CSS linting passes (`npx stylelint dist/**/*.css`)
|
|
144
|
-
- [ ] Brace count matches (opening === closing)
|
|
145
|
-
- [ ] `npm run build` succeeds in consumer project
|
|
146
|
-
- [ ] No PostCSS parsing errors
|
|
147
|
-
- [ ] `yggdrasil-light.css` loads without errors
|
|
148
|
-
- [ ] `yggdrasil-dark.css` loads without errors
|
|
149
|
-
- [ ] All semantic tokens available in browser
|
|
150
|
-
- [ ] Production build succeeds
|
|
151
|
-
- [ ] Dark mode switching works
|
|
152
|
-
|
|
153
|
-
---
|
|
154
|
-
|
|
155
|
-
## Test Commands
|
|
156
|
-
|
|
157
|
-
To reproduce the issue in v0.1.3:
|
|
158
|
-
|
|
159
|
-
```bash
|
|
160
|
-
# Install the package
|
|
161
|
-
npm install @lifeonlars/prime-yggdrasil@0.1.3
|
|
162
|
-
|
|
163
|
-
# Import in your app (src/main.tsx)
|
|
164
|
-
import '@lifeonlars/prime-yggdrasil/yggdrasil-light.css'
|
|
165
|
-
|
|
166
|
-
# Try to build
|
|
167
|
-
npm run build
|
|
168
|
-
|
|
169
|
-
# Expected error:
|
|
170
|
-
# [postcss] postcss-import: ...misc.css:606:1: Unexpected }
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
---
|
|
174
|
-
|
|
175
|
-
## Progress Summary
|
|
176
|
-
|
|
177
|
-
### v0.1.1 → v0.1.2
|
|
178
|
-
|
|
179
|
-
✅ **Fixed:** Added 4 missing CSS files
|
|
180
|
-
|
|
181
|
-
- radius.css
|
|
182
|
-
- semantic-light.css
|
|
183
|
-
- semantic-dark.css
|
|
184
|
-
- components.css
|
|
185
|
-
|
|
186
|
-
### v0.1.2 → v0.1.3
|
|
187
|
-
|
|
188
|
-
✅ **Fixed:** Added prime-palette.css (8.1KB)
|
|
189
|
-
❌ **New Issue:** CSS syntax error in components/misc.css
|
|
190
|
-
|
|
191
|
-
### v0.1.3 → v0.1.4 (Required)
|
|
192
|
-
|
|
193
|
-
❌ **Remaining Issue:** Extra closing brace in misc.css line 606
|
|
194
|
-
|
|
195
|
-
- Single character fix
|
|
196
|
-
- Blocking all production builds
|
|
197
|
-
|
|
198
|
-
---
|
|
199
|
-
|
|
200
|
-
## Additional Notes
|
|
201
|
-
|
|
202
|
-
### Good Progress Overall!
|
|
203
|
-
|
|
204
|
-
- v0.1.2: Fixed the main missing files issue
|
|
205
|
-
- v0.1.3: Fixed the nested import issue (prime-palette.css)
|
|
206
|
-
- **Remaining:** Just one syntax error (extra `}` character)
|
|
207
|
-
|
|
208
|
-
### Build Process Recommendations
|
|
209
|
-
|
|
210
|
-
To prevent CSS syntax errors in future releases:
|
|
211
|
-
|
|
212
|
-
1. **Add CSS Linting to CI/CD:**
|
|
213
|
-
|
|
214
|
-
```json
|
|
215
|
-
{
|
|
216
|
-
"scripts": {
|
|
217
|
-
"lint:css": "stylelint \"dist/**/*.css\"",
|
|
218
|
-
"test:css": "postcss dist/**/*.css --syntax postcss"
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
```
|
|
222
|
-
|
|
223
|
-
2. **Validate Build Output:**
|
|
224
|
-
|
|
225
|
-
```bash
|
|
226
|
-
# After build, before publish
|
|
227
|
-
npm run lint:css
|
|
228
|
-
npm run test:css
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
3. **Test in Consumer Project:**
|
|
232
|
-
```bash
|
|
233
|
-
# Link locally and test build
|
|
234
|
-
npm link
|
|
235
|
-
cd ../test-project
|
|
236
|
-
npm link @lifeonlars/prime-yggdrasil
|
|
237
|
-
npm run build
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
### CSS File Generation
|
|
241
|
-
|
|
242
|
-
The misc.css file is likely generated from source. Check:
|
|
243
|
-
|
|
244
|
-
- Is there a build script that concatenates CSS files?
|
|
245
|
-
- Is there a template or generator that might have introduced the extra brace?
|
|
246
|
-
- Did a recent merge introduce the syntax error?
|
|
247
|
-
|
|
248
|
-
---
|
|
249
|
-
|
|
250
|
-
## Quick Fix Summary
|
|
251
|
-
|
|
252
|
-
**The fix is simple - just remove one character:**
|
|
253
|
-
|
|
254
|
-
**File:** `dist/components/misc.css`
|
|
255
|
-
**Line:** 606
|
|
256
|
-
**Action:** Delete the standalone `}` on this line
|
|
257
|
-
|
|
258
|
-
After this fix, the package should work correctly! ✨
|
package/docs/archive/README.md
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
# Documentation Archive
|
|
2
|
-
|
|
3
|
-
This folder contains outdated or superseded documentation kept for historical reference.
|
|
4
|
-
|
|
5
|
-
## Archived Files
|
|
6
|
-
|
|
7
|
-
### SEMANTIC-MIGRATION-PLAN.md
|
|
8
|
-
**Status**: ✅ Completed
|
|
9
|
-
**Date Archived**: 2026-01-05
|
|
10
|
-
**Reason**: Migration successfully completed. 727 colors replaced with semantic tokens (96% coverage).
|
|
11
|
-
**Superseded By**: Work is complete, no replacement doc needed.
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
Files in this directory are kept for reference only and should not be used for current development.
|
|
16
|
-
|
|
17
|
-
### YGGDRASIL_THEME.md
|
|
18
|
-
**Status**: ⚠️ Superseded
|
|
19
|
-
**Date Archived**: 2026-01-05
|
|
20
|
-
**Reason**: Outdated theme documentation from early project stage.
|
|
21
|
-
**Superseded By**: `src/theme/README.md` and `docs/README.md`
|
|
22
|
-
|
|
23
|
-
### agentic_policy.md
|
|
24
|
-
**Status**: ⚠️ Superseded
|
|
25
|
-
**Date Archived**: 2026-01-05
|
|
26
|
-
**Reason**: Early agentic development policy, now replaced with comprehensive guide.
|
|
27
|
-
**Superseded By**: `docs/AI-AGENT-GUIDE.md`
|
|
@@ -1,177 +0,0 @@
|
|
|
1
|
-
# Semantic Token Migration Plan
|
|
2
|
-
|
|
3
|
-
**Generated:** 2026-01-04
|
|
4
|
-
**Status:** In Progress
|
|
5
|
-
**Total Hardcoded Colors:** 755
|
|
6
|
-
**Components Affected:** 67
|
|
7
|
-
|
|
8
|
-
## Migration Strategy
|
|
9
|
-
|
|
10
|
-
### Phase 1: High-Impact Components (Priority)
|
|
11
|
-
Components with most hardcoded colors that are commonly used:
|
|
12
|
-
|
|
13
|
-
1. **Button** (72 colors) - ⚠️ CRITICAL - Most used component
|
|
14
|
-
2. **DataTable** (32 colors) - ⚠️ HIGH - Complex data display
|
|
15
|
-
3. **Menu Components** (166 colors total across 6 menu types)
|
|
16
|
-
- Menubar (49)
|
|
17
|
-
- Megamenu (47)
|
|
18
|
-
- Menu (20)
|
|
19
|
-
- Slidemenu (20)
|
|
20
|
-
- Tieredmenu (19)
|
|
21
|
-
- Contextmenu (17)
|
|
22
|
-
|
|
23
|
-
### Phase 2: Form & Input Components
|
|
24
|
-
4. **Dropdown/Select Components** (31 colors)
|
|
25
|
-
- TreeSelect (19)
|
|
26
|
-
- CascadeSelect (12)
|
|
27
|
-
5. **Lists & Selection** (46 colors)
|
|
28
|
-
- Listbox (16)
|
|
29
|
-
- OrderList (16)
|
|
30
|
-
- PickList (14)
|
|
31
|
-
6. **Date/Time** (22 colors)
|
|
32
|
-
- DatePicker (22)
|
|
33
|
-
7. **Autocomplete** (8 colors)
|
|
34
|
-
|
|
35
|
-
### Phase 3: Navigation & Layout
|
|
36
|
-
8. **Accordion** (15 colors)
|
|
37
|
-
9. **TabView** (13 colors)
|
|
38
|
-
10. **Panel Components** (22 colors)
|
|
39
|
-
- Panel (12)
|
|
40
|
-
- Fieldset (10)
|
|
41
|
-
11. **Stepper** (12 colors)
|
|
42
|
-
12. **TabMenu** (10 colors)
|
|
43
|
-
13. **Breadcrumb** (7 colors)
|
|
44
|
-
|
|
45
|
-
### Phase 4: Data Display
|
|
46
|
-
14. **TreeTable** (28 colors)
|
|
47
|
-
15. **Tree** (13 colors)
|
|
48
|
-
16. **DataView** (8 colors)
|
|
49
|
-
17. **DataScroller** (9 colors)
|
|
50
|
-
18. **Galleria** (9 colors)
|
|
51
|
-
19. **Carousel** (5 colors)
|
|
52
|
-
20. **Timeline** (2 colors)
|
|
53
|
-
|
|
54
|
-
### Phase 5: Misc Components
|
|
55
|
-
21. **SplitButton** (23 colors)
|
|
56
|
-
22. **PanelMenu** (30 colors)
|
|
57
|
-
23. **OrganizationChart** (11 colors)
|
|
58
|
-
24. **ToggleButton** (13 colors)
|
|
59
|
-
25. **OverlayPanel** (8 colors)
|
|
60
|
-
26. **Remaining** (< 10 colors each)
|
|
61
|
-
|
|
62
|
-
## Required Semantic Tokens
|
|
63
|
-
|
|
64
|
-
Based on analysis, we need to ensure these semantic tokens exist:
|
|
65
|
-
|
|
66
|
-
### Button Variants
|
|
67
|
-
- `--button-primary-background`
|
|
68
|
-
- `--button-primary-text`
|
|
69
|
-
- `--button-primary-border`
|
|
70
|
-
- `--button-primary-hover-background`
|
|
71
|
-
- `--button-primary-active-background`
|
|
72
|
-
- `--button-secondary-*` (full set)
|
|
73
|
-
- `--button-help-*` (full set - purple variant)
|
|
74
|
-
- `--button-contrast-*` (full set - dark variant)
|
|
75
|
-
- `--button-outlined-*` (full set)
|
|
76
|
-
- `--button-text-*` (full set)
|
|
77
|
-
|
|
78
|
-
### Menu/Navigation
|
|
79
|
-
- `--menu-background`
|
|
80
|
-
- `--menu-item-background`
|
|
81
|
-
- `--menu-item-hover-background`
|
|
82
|
-
- `--menu-item-active-background`
|
|
83
|
-
- `--menu-text-default`
|
|
84
|
-
- `--menu-text-hover`
|
|
85
|
-
- `--menu-separator-border`
|
|
86
|
-
|
|
87
|
-
### Data Display
|
|
88
|
-
- `--table-header-background`
|
|
89
|
-
- `--table-header-text`
|
|
90
|
-
- `--table-row-background`
|
|
91
|
-
- `--table-row-alt-background` (striping)
|
|
92
|
-
- `--table-row-hover-background`
|
|
93
|
-
- `--table-row-selected-background`
|
|
94
|
-
- `--table-cell-border`
|
|
95
|
-
|
|
96
|
-
### Form Controls (extend existing)
|
|
97
|
-
- Need to verify all input states are covered
|
|
98
|
-
- Add any missing variant tokens
|
|
99
|
-
|
|
100
|
-
## Migration Workflow
|
|
101
|
-
|
|
102
|
-
### For Each Component:
|
|
103
|
-
|
|
104
|
-
1. **Analyze** - Review hardcoded colors in context
|
|
105
|
-
2. **Map** - Create semantic token mappings
|
|
106
|
-
3. **Add Tokens** - Add any missing tokens to both semantic-light.css and semantic-dark.css
|
|
107
|
-
4. **Replace** - Use targeted replacement script
|
|
108
|
-
5. **Test** - Verify in Storybook (light + dark)
|
|
109
|
-
6. **Contrast** - Run APCA tests for new tokens
|
|
110
|
-
7. **Document** - Update if new token categories added
|
|
111
|
-
|
|
112
|
-
### Example: Button Migration
|
|
113
|
-
|
|
114
|
-
```css
|
|
115
|
-
/* BEFORE */
|
|
116
|
-
.p-button {
|
|
117
|
-
background: #3b82f6;
|
|
118
|
-
color: #ffffff;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
/* AFTER */
|
|
122
|
-
.p-button {
|
|
123
|
-
background: var(--button-primary-background);
|
|
124
|
-
color: var(--button-primary-text);
|
|
125
|
-
}
|
|
126
|
-
```
|
|
127
|
-
|
|
128
|
-
## Current Status
|
|
129
|
-
|
|
130
|
-
### ✅ Completed Components
|
|
131
|
-
- Dialog
|
|
132
|
-
- Checkbox
|
|
133
|
-
- RadioButton
|
|
134
|
-
- Card (partial - uses semantic tokens)
|
|
135
|
-
|
|
136
|
-
### 🚧 In Progress
|
|
137
|
-
- None currently
|
|
138
|
-
|
|
139
|
-
### 📋 Next Up
|
|
140
|
-
1. Button (highest priority)
|
|
141
|
-
2. Menu components (second highest)
|
|
142
|
-
3. DataTable
|
|
143
|
-
|
|
144
|
-
## Token Addition Checklist
|
|
145
|
-
|
|
146
|
-
When adding new semantic tokens:
|
|
147
|
-
|
|
148
|
-
1. ☐ Add to `semantic-light.css`
|
|
149
|
-
2. ☐ Add to `semantic-dark.css`
|
|
150
|
-
3. ☐ Test contrast (APCA)
|
|
151
|
-
4. ☐ Document in theme README if new category
|
|
152
|
-
5. ☐ Update this migration plan
|
|
153
|
-
|
|
154
|
-
## Estimated Completion
|
|
155
|
-
|
|
156
|
-
- **Phase 1:** 3-4 sessions (~270 colors)
|
|
157
|
-
- **Phase 2:** 2-3 sessions (~107 colors)
|
|
158
|
-
- **Phase 3:** 2 sessions (~79 colors)
|
|
159
|
-
- **Phase 4:** 2 sessions (~89 colors)
|
|
160
|
-
- **Phase 5:** 2-3 sessions (~210 colors)
|
|
161
|
-
|
|
162
|
-
**Total:** 11-15 focused sessions
|
|
163
|
-
|
|
164
|
-
## Success Metrics
|
|
165
|
-
|
|
166
|
-
- ✅ All 755 hardcoded colors replaced
|
|
167
|
-
- ✅ 100% APCA contrast pass rate maintained
|
|
168
|
-
- ✅ Full dark mode support for all components
|
|
169
|
-
- ✅ Consistent theming across component library
|
|
170
|
-
|
|
171
|
-
## Notes for AI Agents
|
|
172
|
-
|
|
173
|
-
- Always work on one component at a time
|
|
174
|
-
- Test thoroughly in both themes before moving on
|
|
175
|
-
- Maintain contrast requirements
|
|
176
|
-
- Follow existing naming patterns for tokens
|
|
177
|
-
- Update this document after each component completion
|