@polymorphism-tech/morph-spec 4.10.9 → 4.11.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.
Files changed (145) hide show
  1. package/CLAUDE.md +3 -3
  2. package/LICENSE +71 -71
  3. package/README.md +5 -11
  4. package/bin/morph-spec.js +23 -1
  5. package/bin/task-manager.js +5 -5
  6. package/claude-plugin.json +1 -1
  7. package/docs/CHEATSHEET.md +1 -1
  8. package/docs/QUICKSTART.md +2 -8
  9. package/framework/agents/README.md +14 -14
  10. package/framework/agents/architecture/standards-architect.md +159 -159
  11. package/framework/agents/frontend/css-specialist.md +1 -1
  12. package/framework/agents/infrastructure/azure-architect.md +149 -149
  13. package/framework/agents/infrastructure/azure-deploy-specialist.md +4 -4
  14. package/framework/agents/infrastructure/infra-architect.md +48 -48
  15. package/framework/commands/morph-apply.md +18 -18
  16. package/framework/commands/morph-preflight.md +3 -3
  17. package/framework/commands/morph-proposal.md +15 -15
  18. package/framework/commands/morph-status.md +3 -3
  19. package/framework/commands/morph-troubleshoot.md +1 -1
  20. package/framework/hooks/README.md +204 -204
  21. package/framework/hooks/claude-code/pre-tool-use/task-tracking-guard.js +2 -2
  22. package/framework/hooks/claude-code/session-start/inject-morph-context.js +1 -1
  23. package/framework/hooks/claude-code/teammate-idle/teammate-idle.js +3 -3
  24. package/framework/hooks/claude-code/user-prompt/enrich-prompt.js +2 -2
  25. package/framework/hooks/git/pre-commit/agents.sh +1 -1
  26. package/framework/hooks/shared/phase-utils.js +139 -139
  27. package/framework/rules/csharp-standards.md +13 -13
  28. package/framework/rules/frontend-standards.md +13 -13
  29. package/framework/rules/infrastructure-standards.md +16 -16
  30. package/framework/rules/testing-standards.md +14 -14
  31. package/framework/skills/level-0-meta/morph-brainstorming/SKILL.md +8 -8
  32. package/framework/skills/level-0-meta/morph-checklist/SKILL.md +3 -3
  33. package/framework/skills/level-0-meta/morph-code-review-nextjs/references/review-example-nextjs.md +254 -254
  34. package/framework/skills/level-0-meta/morph-frontend-review/SKILL.md +1 -1
  35. package/framework/skills/level-0-meta/morph-init/SKILL.md +11 -11
  36. package/framework/skills/level-0-meta/morph-post-implementation/SKILL.md +3 -3
  37. package/framework/skills/level-0-meta/morph-replicate/SKILL.md +1 -1
  38. package/framework/skills/level-0-meta/morph-simulation-checklist/SKILL.md +4 -4
  39. package/framework/skills/level-0-meta/morph-tool-usage-guide/references/tools-per-phase.md +25 -25
  40. package/framework/skills/level-0-meta/morph-verification-before-completion/SKILL.md +8 -8
  41. package/framework/skills/level-1-workflows/morph-phase-clarify/SKILL.md +7 -7
  42. package/framework/skills/level-1-workflows/morph-phase-codebase-analysis/SKILL.md +4 -4
  43. package/framework/skills/level-1-workflows/morph-phase-design/SKILL.md +23 -23
  44. package/framework/skills/level-1-workflows/morph-phase-design/references/architecture-analysis-guide.md +1 -1
  45. package/framework/skills/level-1-workflows/morph-phase-implement/.morph/logs/activity.json +38 -0
  46. package/framework/skills/level-1-workflows/morph-phase-implement/SKILL.md +29 -29
  47. package/framework/skills/level-1-workflows/morph-phase-implement/prompts/implementer-prompt.md +4 -4
  48. package/framework/skills/level-1-workflows/morph-phase-plan/SKILL.md +9 -9
  49. package/framework/skills/level-1-workflows/morph-phase-setup/SKILL.md +17 -17
  50. package/framework/skills/level-1-workflows/morph-phase-tasks/.morph/logs/activity.json +14 -0
  51. package/framework/skills/level-1-workflows/morph-phase-tasks/SKILL.md +12 -12
  52. package/framework/skills/level-1-workflows/morph-phase-uiux/SKILL.md +16 -16
  53. package/framework/skills/level-1-workflows/morph-scope-escalation/SKILL.md +5 -5
  54. package/framework/standards/STANDARDS.json +2338 -2041
  55. package/framework/standards/frontend/nextjs/nextjs-patterns.md +17 -17
  56. package/framework/standards/infrastructure/supabase/supabase-custom-jwt.md +206 -0
  57. package/framework/templates/.idea/morph-templates.xml +92 -0
  58. package/framework/templates/.vscode/morph-templates.code-snippets +186 -0
  59. package/framework/templates/README.md +814 -814
  60. package/framework/templates/code/dotnet/contracts/Commands.cs +74 -74
  61. package/framework/templates/code/dotnet/contracts/Entities.cs +25 -25
  62. package/framework/templates/code/dotnet/contracts/Queries.cs +74 -74
  63. package/framework/templates/code/dotnet/contracts/README.md +74 -74
  64. package/framework/templates/code/dotnet/contracts/api-contracts.cs +173 -173
  65. package/framework/templates/code/dotnet/frontend/component.razor +239 -239
  66. package/framework/templates/code/dotnet/jobs/agent.cs +163 -163
  67. package/framework/templates/code/dotnet/jobs/job.cs +171 -171
  68. package/framework/templates/code/dotnet/test.cs +239 -239
  69. package/framework/templates/code/sql/rls-policy.sql +57 -57
  70. package/framework/templates/code/sql/supabase-migration.sql +100 -100
  71. package/framework/templates/code/sql/supabase-migration.template.sql +113 -113
  72. package/framework/templates/code/typescript/contracts.ts +168 -168
  73. package/framework/templates/context/CONTEXT.md +181 -181
  74. package/framework/templates/docs/proposal.md +182 -182
  75. package/framework/templates/docs/user-stories.md +34 -34
  76. package/framework/templates/examples/design-system-examples.md +357 -357
  77. package/framework/templates/examples/spec-examples.md +90 -90
  78. package/framework/templates/feature/decisions.md +187 -187
  79. package/framework/templates/feature/recap.md +146 -146
  80. package/framework/templates/feature/tasks.md +199 -199
  81. package/framework/templates/infrastructure/azure/README.md +286 -286
  82. package/framework/templates/infrastructure/azure/deploy-checklist.md +426 -426
  83. package/framework/templates/infrastructure/azure/parameters.dev.json +29 -29
  84. package/framework/templates/infrastructure/azure/parameters.prod.json +29 -29
  85. package/framework/templates/infrastructure/azure/parameters.staging.json +29 -29
  86. package/framework/templates/infrastructure/docker/docker-compose.template.yml +67 -67
  87. package/framework/templates/infrastructure/docker/dockerfile-api.dockerfile +38 -38
  88. package/framework/templates/infrastructure/docker/dockerfile-web.dockerfile +48 -48
  89. package/framework/templates/infrastructure/docker/easypanel.template.json +54 -54
  90. package/framework/workflows/README.md +18 -18
  91. package/framework/workflows/docs/enforcement-pipeline.md +1 -1
  92. package/framework/workflows/docs/full-morph.md +2 -2
  93. package/package.json +1 -1
  94. package/src/commands/agents/dispatch-agents.js +17 -0
  95. package/src/commands/agents/index.js +13 -13
  96. package/src/commands/agents/project-metrics.js +74 -0
  97. package/src/commands/project/doctor.js +3 -4
  98. package/src/commands/project/install-plugin-cmd.js +28 -28
  99. package/src/commands/project/setup-infra-cmd.js +12 -12
  100. package/src/commands/project/status.js +8 -1
  101. package/src/commands/scope/escalate.js +5 -3
  102. package/src/commands/standards/context-budget.js +89 -0
  103. package/src/commands/tasks/index.js +4 -4
  104. package/src/commands/templates/index.js +5 -5
  105. package/src/commands/utils/index.js +3 -3
  106. package/src/commands/validation/index.js +4 -4
  107. package/src/commands/validation/validate-feature.js +32 -3
  108. package/src/core/state/phase-state-machine.js +217 -217
  109. package/src/lib/agents/metrics-aggregator.js +56 -0
  110. package/src/lib/generators/design-system-generator.js +298 -298
  111. package/src/lib/generators/index.js +10 -10
  112. package/src/lib/generators/metadata-extractor.js +387 -387
  113. package/src/lib/stack-filter.js +65 -65
  114. package/src/lib/standards/digest-builder.js +57 -3
  115. package/src/lib/standards/index.js +7 -7
  116. package/src/lib/standards/standards-context-injector.js +302 -302
  117. package/src/lib/validators/architecture/architecture-validator.js +387 -387
  118. package/src/lib/validators/architecture/index.js +7 -7
  119. package/src/lib/validators/blazor/blazor-concurrency-analyzer.js +316 -316
  120. package/src/lib/validators/blazor/blazor-state-validator.js +279 -279
  121. package/src/lib/validators/blazor/blazor-validator.js +369 -369
  122. package/src/lib/validators/blazor/index.js +9 -9
  123. package/src/lib/validators/content/content-validator.js +287 -287
  124. package/src/lib/validators/content/index.js +7 -7
  125. package/src/lib/validators/contracts/index.js +7 -7
  126. package/src/lib/validators/css/css-validator.js +352 -352
  127. package/src/lib/validators/css/index.js +7 -7
  128. package/src/lib/validators/design-system/design-system-validator.js +231 -231
  129. package/src/lib/validators/design-system/index.js +7 -7
  130. package/src/lib/validators/nextjs/index.js +6 -6
  131. package/src/lib/validators/nextjs/next-component-validator.js +183 -183
  132. package/src/lib/validators/packages/index.js +7 -7
  133. package/src/lib/validators/packages/package-validator.js +360 -360
  134. package/src/lib/validators/shared/index.js +12 -12
  135. package/src/lib/validators/shared/issue-counter.js +18 -18
  136. package/src/lib/validators/shared/result-formatter.js +124 -124
  137. package/src/lib/validators/ui/index.js +7 -7
  138. package/src/lib/validators/ui/ui-contrast-validator.js +422 -422
  139. package/src/scripts/global-install.js +112 -58
  140. package/src/scripts/install-plugin.js +126 -126
  141. package/src/utils/claude-md-injector.js +90 -90
  142. package/src/utils/file-copier.js +200 -200
  143. package/src/utils/logger.js +32 -32
  144. package/src/utils/skills-installer.js +178 -178
  145. package/src/utils/version-checker.js +169 -175
@@ -1,422 +1,422 @@
1
- /**
2
- * UI Contrast Validator
3
- *
4
- * Validates color contrast ratios for WCAG 2.1 AA compliance.
5
- * Ensures text is readable for users with visual impairments.
6
- *
7
- * WCAG 2.1 AA Requirements:
8
- * - Normal text: 4.5:1 minimum
9
- * - Large text (18pt+ or 14pt+ bold): 3:1 minimum
10
- * - UI components: 3:1 minimum
11
- *
12
- * MORPH-SPEC 3.0 - Sprint 4
13
- */
14
-
15
- import { readFileSync } from 'fs';
16
- import { glob } from 'glob';
17
- import chalk from 'chalk';
18
-
19
- /**
20
- * WCAG Contrast Requirements
21
- */
22
- const WCAG_AA = {
23
- normalText: 4.5,
24
- largeText: 3.0,
25
- uiComponents: 3.0
26
- };
27
-
28
- const WCAG_AAA = {
29
- normalText: 7.0,
30
- largeText: 4.5,
31
- uiComponents: 3.0
32
- };
33
-
34
- /**
35
- * UI Contrast Validator Class
36
- */
37
- export class UIContrastValidator {
38
- constructor(projectPath = '.', wcagLevel = 'AA') {
39
- this.projectPath = projectPath;
40
- this.wcagLevel = wcagLevel;
41
- this.requirements = wcagLevel === 'AAA' ? WCAG_AAA : WCAG_AA;
42
- }
43
-
44
- /**
45
- * Validate all CSS files
46
- */
47
- async validateAll() {
48
- const cssFiles = await glob('wwwroot/**/*.css', {
49
- cwd: this.projectPath,
50
- ignore: ['**/node_modules/**', '**/lib/**']
51
- });
52
-
53
- if (cssFiles.length === 0) {
54
- return {
55
- status: 'ok',
56
- message: 'No CSS files found in wwwroot/'
57
- };
58
- }
59
-
60
- const results = [];
61
-
62
- for (const file of cssFiles) {
63
- const result = await this.validateFile(file);
64
- if (result.issues.length > 0) {
65
- results.push({ file, ...result });
66
- }
67
- }
68
-
69
- return {
70
- status: results.length === 0 ? 'ok' : 'warning',
71
- wcagLevel: this.wcagLevel,
72
- totalFiles: cssFiles.length,
73
- filesWithIssues: results.length,
74
- results
75
- };
76
- }
77
-
78
- /**
79
- * Validate single CSS file
80
- */
81
- async validateFile(filePath) {
82
- const content = readFileSync(filePath, 'utf-8');
83
-
84
- // Extract color variables
85
- const colors = this.extractColors(content);
86
-
87
- if (colors.length === 0) {
88
- return {
89
- colors: [],
90
- issues: []
91
- };
92
- }
93
-
94
- // Check common color pairs
95
- const issues = this.checkContrastPairs(colors);
96
-
97
- return {
98
- colors,
99
- totalPairs: issues.length,
100
- issues
101
- };
102
- }
103
-
104
- /**
105
- * Extract colors from CSS
106
- */
107
- extractColors(css) {
108
- const colors = [];
109
-
110
- // Extract CSS variables (--color-name: #hex)
111
- const cssVarPattern = /--([a-zA-Z0-9-]+):\s*(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/g;
112
- let match;
113
-
114
- while ((match = cssVarPattern.exec(css)) !== null) {
115
- const name = match[1];
116
- const value = this.normalizeColor(match[2]);
117
-
118
- if (value) {
119
- colors.push({
120
- name,
121
- value,
122
- type: this.inferColorType(name)
123
- });
124
- }
125
- }
126
-
127
- // Extract regular color declarations
128
- const colorPattern = /(color|background|background-color|border-color):\s*(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/g;
129
-
130
- while ((match = colorPattern.exec(css)) !== null) {
131
- const property = match[1];
132
- const value = this.normalizeColor(match[2]);
133
-
134
- if (value && !colors.some(c => c.value === value)) {
135
- colors.push({
136
- name: `inline-${property}`,
137
- value,
138
- type: property.includes('background') ? 'background' : 'text'
139
- });
140
- }
141
- }
142
-
143
- return colors;
144
- }
145
-
146
- /**
147
- * Normalize color to hex format
148
- */
149
- normalizeColor(colorString) {
150
- const trimmed = colorString.trim();
151
-
152
- // Already hex
153
- if (trimmed.startsWith('#')) {
154
- return this.expandHex(trimmed);
155
- }
156
-
157
- // rgb/rgba to hex
158
- if (trimmed.startsWith('rgb')) {
159
- return this.rgbToHex(trimmed);
160
- }
161
-
162
- return null;
163
- }
164
-
165
- /**
166
- * Expand 3-digit hex to 6-digit
167
- */
168
- expandHex(hex) {
169
- if (hex.length === 4) {
170
- return '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
171
- }
172
- return hex.substring(0, 7); // Remove alpha if present
173
- }
174
-
175
- /**
176
- * Convert rgb/rgba to hex
177
- */
178
- rgbToHex(rgb) {
179
- const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
180
- if (!match) return null;
181
-
182
- const r = parseInt(match[1]);
183
- const g = parseInt(match[2]);
184
- const b = parseInt(match[3]);
185
-
186
- return '#' + [r, g, b].map(x => {
187
- const hex = x.toString(16);
188
- return hex.length === 1 ? '0' + hex : hex;
189
- }).join('');
190
- }
191
-
192
- /**
193
- * Infer color type from variable name
194
- */
195
- inferColorType(name) {
196
- const lowerName = name.toLowerCase();
197
-
198
- if (lowerName.includes('bg') || lowerName.includes('background')) {
199
- return 'background';
200
- }
201
-
202
- if (lowerName.includes('text') || lowerName.includes('color') || lowerName.includes('foreground')) {
203
- return 'text';
204
- }
205
-
206
- if (lowerName.includes('border')) {
207
- return 'border';
208
- }
209
-
210
- return 'unknown';
211
- }
212
-
213
- /**
214
- * Check contrast ratios for common color pairs
215
- */
216
- checkContrastPairs(colors) {
217
- const issues = [];
218
-
219
- const backgrounds = colors.filter(c => c.type === 'background');
220
- const texts = colors.filter(c => c.type === 'text');
221
-
222
- // If no explicit categorization, try all pairs
223
- if (backgrounds.length === 0 || texts.length === 0) {
224
- const allColors = colors;
225
- for (let i = 0; i < allColors.length; i++) {
226
- for (let j = i + 1; j < allColors.length; j++) {
227
- const ratio = this.calculateContrastRatio(allColors[i].value, allColors[j].value);
228
-
229
- if (ratio < this.requirements.normalText) {
230
- issues.push({
231
- level: 'warning',
232
- background: allColors[i].name,
233
- backgroundHex: allColors[i].value,
234
- foreground: allColors[j].name,
235
- foregroundHex: allColors[j].value,
236
- ratio: ratio.toFixed(2),
237
- required: this.requirements.normalText,
238
- wcagLevel: this.wcagLevel,
239
- pass: false,
240
- message: `Low contrast: ${allColors[i].name} + ${allColors[j].name} = ${ratio.toFixed(2)}:1 (need ${this.requirements.normalText}:1)`
241
- });
242
- }
243
- }
244
- }
245
- } else {
246
- // Check explicit bg + text pairs
247
- for (const bg of backgrounds) {
248
- for (const text of texts) {
249
- const ratio = this.calculateContrastRatio(bg.value, text.value);
250
-
251
- if (ratio < this.requirements.normalText) {
252
- issues.push({
253
- level: 'warning',
254
- background: bg.name,
255
- backgroundHex: bg.value,
256
- foreground: text.name,
257
- foregroundHex: text.value,
258
- ratio: ratio.toFixed(2),
259
- required: this.requirements.normalText,
260
- wcagLevel: this.wcagLevel,
261
- pass: false,
262
- message: `Low contrast: ${text.name} on ${bg.name} = ${ratio.toFixed(2)}:1 (need ${this.requirements.normalText}:1 for normal text)`
263
- });
264
- }
265
- }
266
- }
267
- }
268
-
269
- return issues;
270
- }
271
-
272
- /**
273
- * Calculate contrast ratio (WCAG formula)
274
- * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
275
- */
276
- calculateContrastRatio(color1, color2) {
277
- const l1 = this.getLuminance(color1);
278
- const l2 = this.getLuminance(color2);
279
-
280
- const lighter = Math.max(l1, l2);
281
- const darker = Math.min(l1, l2);
282
-
283
- return (lighter + 0.05) / (darker + 0.05);
284
- }
285
-
286
- /**
287
- * Get relative luminance
288
- * https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
289
- */
290
- getLuminance(hex) {
291
- const rgb = this.hexToRgb(hex);
292
- if (!rgb) return 0;
293
-
294
- const [r, g, b] = rgb.map(val => {
295
- val = val / 255;
296
- return val <= 0.03928
297
- ? val / 12.92
298
- : Math.pow((val + 0.055) / 1.055, 2.4);
299
- });
300
-
301
- return 0.2126 * r + 0.7152 * g + 0.0722 * b;
302
- }
303
-
304
- /**
305
- * Convert hex to RGB
306
- */
307
- hexToRgb(hex) {
308
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
309
- return result ? [
310
- parseInt(result[1], 16),
311
- parseInt(result[2], 16),
312
- parseInt(result[3], 16)
313
- ] : null;
314
- }
315
-
316
- /**
317
- * Suggest better color
318
- */
319
- suggestBetterColor(background, foreground, targetRatio) {
320
- // Simple algorithm: lighten or darken foreground to meet ratio
321
- const bgLuminance = this.getLuminance(background);
322
- const fgRgb = this.hexToRgb(foreground);
323
-
324
- if (!fgRgb) return null;
325
-
326
- // If bg is light, darken fg
327
- if (bgLuminance > 0.5) {
328
- const factor = 0.7; // Darken by 30%
329
- const newRgb = fgRgb.map(v => Math.floor(v * factor));
330
- return this.rgbToHex(`rgb(${newRgb.join(', ')})`);
331
- } else {
332
- // If bg is dark, lighten fg
333
- const factor = 1.3; // Lighten by 30%
334
- const newRgb = fgRgb.map(v => Math.min(255, Math.floor(v * factor)));
335
- return this.rgbToHex(`rgb(${newRgb.join(', ')})`);
336
- }
337
- }
338
-
339
- /**
340
- * Format validation results for console output
341
- */
342
- formatResults(results) {
343
- if (results.status === 'ok') {
344
- console.log(chalk.green(`✅ All colors meet WCAG ${results.wcagLevel} contrast requirements`));
345
- return;
346
- }
347
-
348
- console.log(chalk.yellow(`\n⚠️ Found ${results.filesWithIssues} file(s) with contrast issues (WCAG ${results.wcagLevel}):\n`));
349
-
350
- for (const fileResult of results.results) {
351
- console.log(chalk.cyan(`📄 ${fileResult.file}`));
352
- console.log(chalk.gray(` Colors found: ${fileResult.colors.length}`));
353
-
354
- if (fileResult.issues.length > 0) {
355
- console.log(chalk.yellow(` ⚠️ ${fileResult.issues.length} contrast issue(s):`));
356
-
357
- fileResult.issues.forEach(issue => {
358
- console.log(chalk.yellow(`\n ${issue.foreground} on ${issue.background}`));
359
- console.log(chalk.gray(` Ratio: ${issue.ratio}:1 (need ${issue.required}:1)`));
360
- console.log(chalk.gray(` Colors: ${issue.foregroundHex} on ${issue.backgroundHex}`));
361
-
362
- // Suggest fix
363
- const suggestion = this.suggestBetterColor(issue.backgroundHex, issue.foregroundHex, issue.required);
364
- if (suggestion) {
365
- console.log(chalk.green(` Suggested: ${suggestion}`));
366
- }
367
- });
368
- }
369
-
370
- console.log('');
371
- }
372
-
373
- console.log(chalk.blue(`\n💡 Tip: Use tools like https://contrast-ratio.com to fine-tune colors\n`));
374
- }
375
-
376
- /**
377
- * Get compliance summary
378
- */
379
- getComplianceSummary(results) {
380
- if (results.status === 'ok') {
381
- return {
382
- compliant: true,
383
- wcagLevel: results.wcagLevel,
384
- filesChecked: results.totalFiles,
385
- issues: 0
386
- };
387
- }
388
-
389
- const totalIssues = results.results.reduce((sum, r) => sum + r.issues.length, 0);
390
-
391
- return {
392
- compliant: false,
393
- wcagLevel: results.wcagLevel,
394
- filesChecked: results.totalFiles,
395
- filesWithIssues: results.filesWithIssues,
396
- issues: totalIssues,
397
- severity: totalIssues > 10 ? 'high' : totalIssues > 5 ? 'medium' : 'low'
398
- };
399
- }
400
- }
401
-
402
- /**
403
- * Quick validation function (for imports)
404
- */
405
- export async function validateContrast(projectPath = '.', options = {}) {
406
- const wcagLevel = options.wcagLevel || 'AA';
407
- const validator = new UIContrastValidator(projectPath, wcagLevel);
408
- const results = await validator.validateAll();
409
-
410
- if (options.verbose) {
411
- validator.formatResults(results);
412
- }
413
-
414
- if (options.summary) {
415
- return {
416
- ...results,
417
- summary: validator.getComplianceSummary(results)
418
- };
419
- }
420
-
421
- return results;
422
- }
1
+ /**
2
+ * UI Contrast Validator
3
+ *
4
+ * Validates color contrast ratios for WCAG 2.1 AA compliance.
5
+ * Ensures text is readable for users with visual impairments.
6
+ *
7
+ * WCAG 2.1 AA Requirements:
8
+ * - Normal text: 4.5:1 minimum
9
+ * - Large text (18pt+ or 14pt+ bold): 3:1 minimum
10
+ * - UI components: 3:1 minimum
11
+ *
12
+ * MORPH-SPEC 3.0 - Sprint 4
13
+ */
14
+
15
+ import { readFileSync } from 'fs';
16
+ import { glob } from 'glob';
17
+ import chalk from 'chalk';
18
+
19
+ /**
20
+ * WCAG Contrast Requirements
21
+ */
22
+ const WCAG_AA = {
23
+ normalText: 4.5,
24
+ largeText: 3.0,
25
+ uiComponents: 3.0
26
+ };
27
+
28
+ const WCAG_AAA = {
29
+ normalText: 7.0,
30
+ largeText: 4.5,
31
+ uiComponents: 3.0
32
+ };
33
+
34
+ /**
35
+ * UI Contrast Validator Class
36
+ */
37
+ export class UIContrastValidator {
38
+ constructor(projectPath = '.', wcagLevel = 'AA') {
39
+ this.projectPath = projectPath;
40
+ this.wcagLevel = wcagLevel;
41
+ this.requirements = wcagLevel === 'AAA' ? WCAG_AAA : WCAG_AA;
42
+ }
43
+
44
+ /**
45
+ * Validate all CSS files
46
+ */
47
+ async validateAll() {
48
+ const cssFiles = await glob('wwwroot/**/*.css', {
49
+ cwd: this.projectPath,
50
+ ignore: ['**/node_modules/**', '**/lib/**']
51
+ });
52
+
53
+ if (cssFiles.length === 0) {
54
+ return {
55
+ status: 'ok',
56
+ message: 'No CSS files found in wwwroot/'
57
+ };
58
+ }
59
+
60
+ const results = [];
61
+
62
+ for (const file of cssFiles) {
63
+ const result = await this.validateFile(file);
64
+ if (result.issues.length > 0) {
65
+ results.push({ file, ...result });
66
+ }
67
+ }
68
+
69
+ return {
70
+ status: results.length === 0 ? 'ok' : 'warning',
71
+ wcagLevel: this.wcagLevel,
72
+ totalFiles: cssFiles.length,
73
+ filesWithIssues: results.length,
74
+ results
75
+ };
76
+ }
77
+
78
+ /**
79
+ * Validate single CSS file
80
+ */
81
+ async validateFile(filePath) {
82
+ const content = readFileSync(filePath, 'utf-8');
83
+
84
+ // Extract color variables
85
+ const colors = this.extractColors(content);
86
+
87
+ if (colors.length === 0) {
88
+ return {
89
+ colors: [],
90
+ issues: []
91
+ };
92
+ }
93
+
94
+ // Check common color pairs
95
+ const issues = this.checkContrastPairs(colors);
96
+
97
+ return {
98
+ colors,
99
+ totalPairs: issues.length,
100
+ issues
101
+ };
102
+ }
103
+
104
+ /**
105
+ * Extract colors from CSS
106
+ */
107
+ extractColors(css) {
108
+ const colors = [];
109
+
110
+ // Extract CSS variables (--color-name: #hex)
111
+ const cssVarPattern = /--([a-zA-Z0-9-]+):\s*(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/g;
112
+ let match;
113
+
114
+ while ((match = cssVarPattern.exec(css)) !== null) {
115
+ const name = match[1];
116
+ const value = this.normalizeColor(match[2]);
117
+
118
+ if (value) {
119
+ colors.push({
120
+ name,
121
+ value,
122
+ type: this.inferColorType(name)
123
+ });
124
+ }
125
+ }
126
+
127
+ // Extract regular color declarations
128
+ const colorPattern = /(color|background|background-color|border-color):\s*(#[0-9a-fA-F]{3,8}|rgb\([^)]+\)|rgba\([^)]+\))/g;
129
+
130
+ while ((match = colorPattern.exec(css)) !== null) {
131
+ const property = match[1];
132
+ const value = this.normalizeColor(match[2]);
133
+
134
+ if (value && !colors.some(c => c.value === value)) {
135
+ colors.push({
136
+ name: `inline-${property}`,
137
+ value,
138
+ type: property.includes('background') ? 'background' : 'text'
139
+ });
140
+ }
141
+ }
142
+
143
+ return colors;
144
+ }
145
+
146
+ /**
147
+ * Normalize color to hex format
148
+ */
149
+ normalizeColor(colorString) {
150
+ const trimmed = colorString.trim();
151
+
152
+ // Already hex
153
+ if (trimmed.startsWith('#')) {
154
+ return this.expandHex(trimmed);
155
+ }
156
+
157
+ // rgb/rgba to hex
158
+ if (trimmed.startsWith('rgb')) {
159
+ return this.rgbToHex(trimmed);
160
+ }
161
+
162
+ return null;
163
+ }
164
+
165
+ /**
166
+ * Expand 3-digit hex to 6-digit
167
+ */
168
+ expandHex(hex) {
169
+ if (hex.length === 4) {
170
+ return '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
171
+ }
172
+ return hex.substring(0, 7); // Remove alpha if present
173
+ }
174
+
175
+ /**
176
+ * Convert rgb/rgba to hex
177
+ */
178
+ rgbToHex(rgb) {
179
+ const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
180
+ if (!match) return null;
181
+
182
+ const r = parseInt(match[1]);
183
+ const g = parseInt(match[2]);
184
+ const b = parseInt(match[3]);
185
+
186
+ return '#' + [r, g, b].map(x => {
187
+ const hex = x.toString(16);
188
+ return hex.length === 1 ? '0' + hex : hex;
189
+ }).join('');
190
+ }
191
+
192
+ /**
193
+ * Infer color type from variable name
194
+ */
195
+ inferColorType(name) {
196
+ const lowerName = name.toLowerCase();
197
+
198
+ if (lowerName.includes('bg') || lowerName.includes('background')) {
199
+ return 'background';
200
+ }
201
+
202
+ if (lowerName.includes('text') || lowerName.includes('color') || lowerName.includes('foreground')) {
203
+ return 'text';
204
+ }
205
+
206
+ if (lowerName.includes('border')) {
207
+ return 'border';
208
+ }
209
+
210
+ return 'unknown';
211
+ }
212
+
213
+ /**
214
+ * Check contrast ratios for common color pairs
215
+ */
216
+ checkContrastPairs(colors) {
217
+ const issues = [];
218
+
219
+ const backgrounds = colors.filter(c => c.type === 'background');
220
+ const texts = colors.filter(c => c.type === 'text');
221
+
222
+ // If no explicit categorization, try all pairs
223
+ if (backgrounds.length === 0 || texts.length === 0) {
224
+ const allColors = colors;
225
+ for (let i = 0; i < allColors.length; i++) {
226
+ for (let j = i + 1; j < allColors.length; j++) {
227
+ const ratio = this.calculateContrastRatio(allColors[i].value, allColors[j].value);
228
+
229
+ if (ratio < this.requirements.normalText) {
230
+ issues.push({
231
+ level: 'warning',
232
+ background: allColors[i].name,
233
+ backgroundHex: allColors[i].value,
234
+ foreground: allColors[j].name,
235
+ foregroundHex: allColors[j].value,
236
+ ratio: ratio.toFixed(2),
237
+ required: this.requirements.normalText,
238
+ wcagLevel: this.wcagLevel,
239
+ pass: false,
240
+ message: `Low contrast: ${allColors[i].name} + ${allColors[j].name} = ${ratio.toFixed(2)}:1 (need ${this.requirements.normalText}:1)`
241
+ });
242
+ }
243
+ }
244
+ }
245
+ } else {
246
+ // Check explicit bg + text pairs
247
+ for (const bg of backgrounds) {
248
+ for (const text of texts) {
249
+ const ratio = this.calculateContrastRatio(bg.value, text.value);
250
+
251
+ if (ratio < this.requirements.normalText) {
252
+ issues.push({
253
+ level: 'warning',
254
+ background: bg.name,
255
+ backgroundHex: bg.value,
256
+ foreground: text.name,
257
+ foregroundHex: text.value,
258
+ ratio: ratio.toFixed(2),
259
+ required: this.requirements.normalText,
260
+ wcagLevel: this.wcagLevel,
261
+ pass: false,
262
+ message: `Low contrast: ${text.name} on ${bg.name} = ${ratio.toFixed(2)}:1 (need ${this.requirements.normalText}:1 for normal text)`
263
+ });
264
+ }
265
+ }
266
+ }
267
+ }
268
+
269
+ return issues;
270
+ }
271
+
272
+ /**
273
+ * Calculate contrast ratio (WCAG formula)
274
+ * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
275
+ */
276
+ calculateContrastRatio(color1, color2) {
277
+ const l1 = this.getLuminance(color1);
278
+ const l2 = this.getLuminance(color2);
279
+
280
+ const lighter = Math.max(l1, l2);
281
+ const darker = Math.min(l1, l2);
282
+
283
+ return (lighter + 0.05) / (darker + 0.05);
284
+ }
285
+
286
+ /**
287
+ * Get relative luminance
288
+ * https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
289
+ */
290
+ getLuminance(hex) {
291
+ const rgb = this.hexToRgb(hex);
292
+ if (!rgb) return 0;
293
+
294
+ const [r, g, b] = rgb.map(val => {
295
+ val = val / 255;
296
+ return val <= 0.03928
297
+ ? val / 12.92
298
+ : Math.pow((val + 0.055) / 1.055, 2.4);
299
+ });
300
+
301
+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
302
+ }
303
+
304
+ /**
305
+ * Convert hex to RGB
306
+ */
307
+ hexToRgb(hex) {
308
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
309
+ return result ? [
310
+ parseInt(result[1], 16),
311
+ parseInt(result[2], 16),
312
+ parseInt(result[3], 16)
313
+ ] : null;
314
+ }
315
+
316
+ /**
317
+ * Suggest better color
318
+ */
319
+ suggestBetterColor(background, foreground, targetRatio) {
320
+ // Simple algorithm: lighten or darken foreground to meet ratio
321
+ const bgLuminance = this.getLuminance(background);
322
+ const fgRgb = this.hexToRgb(foreground);
323
+
324
+ if (!fgRgb) return null;
325
+
326
+ // If bg is light, darken fg
327
+ if (bgLuminance > 0.5) {
328
+ const factor = 0.7; // Darken by 30%
329
+ const newRgb = fgRgb.map(v => Math.floor(v * factor));
330
+ return this.rgbToHex(`rgb(${newRgb.join(', ')})`);
331
+ } else {
332
+ // If bg is dark, lighten fg
333
+ const factor = 1.3; // Lighten by 30%
334
+ const newRgb = fgRgb.map(v => Math.min(255, Math.floor(v * factor)));
335
+ return this.rgbToHex(`rgb(${newRgb.join(', ')})`);
336
+ }
337
+ }
338
+
339
+ /**
340
+ * Format validation results for console output
341
+ */
342
+ formatResults(results) {
343
+ if (results.status === 'ok') {
344
+ console.log(chalk.green(`✅ All colors meet WCAG ${results.wcagLevel} contrast requirements`));
345
+ return;
346
+ }
347
+
348
+ console.log(chalk.yellow(`\n⚠️ Found ${results.filesWithIssues} file(s) with contrast issues (WCAG ${results.wcagLevel}):\n`));
349
+
350
+ for (const fileResult of results.results) {
351
+ console.log(chalk.cyan(`📄 ${fileResult.file}`));
352
+ console.log(chalk.gray(` Colors found: ${fileResult.colors.length}`));
353
+
354
+ if (fileResult.issues.length > 0) {
355
+ console.log(chalk.yellow(` ⚠️ ${fileResult.issues.length} contrast issue(s):`));
356
+
357
+ fileResult.issues.forEach(issue => {
358
+ console.log(chalk.yellow(`\n ${issue.foreground} on ${issue.background}`));
359
+ console.log(chalk.gray(` Ratio: ${issue.ratio}:1 (need ${issue.required}:1)`));
360
+ console.log(chalk.gray(` Colors: ${issue.foregroundHex} on ${issue.backgroundHex}`));
361
+
362
+ // Suggest fix
363
+ const suggestion = this.suggestBetterColor(issue.backgroundHex, issue.foregroundHex, issue.required);
364
+ if (suggestion) {
365
+ console.log(chalk.green(` Suggested: ${suggestion}`));
366
+ }
367
+ });
368
+ }
369
+
370
+ console.log('');
371
+ }
372
+
373
+ console.log(chalk.blue(`\n💡 Tip: Use tools like https://contrast-ratio.com to fine-tune colors\n`));
374
+ }
375
+
376
+ /**
377
+ * Get compliance summary
378
+ */
379
+ getComplianceSummary(results) {
380
+ if (results.status === 'ok') {
381
+ return {
382
+ compliant: true,
383
+ wcagLevel: results.wcagLevel,
384
+ filesChecked: results.totalFiles,
385
+ issues: 0
386
+ };
387
+ }
388
+
389
+ const totalIssues = results.results.reduce((sum, r) => sum + r.issues.length, 0);
390
+
391
+ return {
392
+ compliant: false,
393
+ wcagLevel: results.wcagLevel,
394
+ filesChecked: results.totalFiles,
395
+ filesWithIssues: results.filesWithIssues,
396
+ issues: totalIssues,
397
+ severity: totalIssues > 10 ? 'high' : totalIssues > 5 ? 'medium' : 'low'
398
+ };
399
+ }
400
+ }
401
+
402
+ /**
403
+ * Quick validation function (for imports)
404
+ */
405
+ export async function validateContrast(projectPath = '.', options = {}) {
406
+ const wcagLevel = options.wcagLevel || 'AA';
407
+ const validator = new UIContrastValidator(projectPath, wcagLevel);
408
+ const results = await validator.validateAll();
409
+
410
+ if (options.verbose) {
411
+ validator.formatResults(results);
412
+ }
413
+
414
+ if (options.summary) {
415
+ return {
416
+ ...results,
417
+ summary: validator.getComplianceSummary(results)
418
+ };
419
+ }
420
+
421
+ return results;
422
+ }