@polymorphism-tech/morph-spec 3.0.0 → 3.0.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.
Files changed (160) hide show
  1. package/CLAUDE.md +75 -371
  2. package/LICENSE +72 -72
  3. package/bin/detect-agents.js +225 -225
  4. package/bin/render-template.js +302 -302
  5. package/bin/semantic-detect-agents.js +246 -246
  6. package/bin/validate-agents-skills.js +251 -251
  7. package/bin/validate-agents.js +69 -69
  8. package/bin/validate-phase.js +263 -263
  9. package/content/.azure/README.md +293 -293
  10. package/content/.azure/docs/azure-devops-setup.md +454 -454
  11. package/content/.azure/docs/branch-strategy.md +398 -398
  12. package/content/.azure/docs/local-development.md +515 -515
  13. package/content/.azure/pipelines/pipeline-variables.yml +34 -34
  14. package/content/.azure/pipelines/prod-pipeline.yml +319 -319
  15. package/content/.azure/pipelines/staging-pipeline.yml +234 -234
  16. package/content/.azure/pipelines/templates/build-dotnet.yml +75 -75
  17. package/content/.azure/pipelines/templates/deploy-app-service.yml +94 -94
  18. package/content/.azure/pipelines/templates/deploy-container-app.yml +120 -120
  19. package/content/.azure/pipelines/templates/infra-deploy.yml +90 -90
  20. package/content/.claude/commands/morph-archive.md +79 -79
  21. package/content/.claude/commands/morph-deploy.md +529 -529
  22. package/content/.claude/commands/morph-infra.md +209 -209
  23. package/content/.claude/commands/morph-preflight.md +227 -227
  24. package/content/.claude/commands/morph-troubleshoot.md +122 -122
  25. package/content/.claude/settings.local.json +15 -15
  26. package/content/.claude/skills/{specialists → level-2-domains/architecture}/prompt-engineer.md +189 -189
  27. package/content/.claude/skills/{specialists → level-2-domains/architecture}/seo-growth-hacker.md +320 -320
  28. package/content/.claude/skills/{infra → level-2-domains/infrastructure}/azure-deploy-specialist.md +699 -699
  29. package/content/.morph/.morphversion +5 -5
  30. package/content/.morph/archive/.gitkeep +25 -25
  31. package/content/.morph/config/agents.json +7 -5
  32. package/content/.morph/docs/STORY-DRIVEN-DEVELOPMENT.md +392 -392
  33. package/content/.morph/examples/api-nextjs/README.md +241 -241
  34. package/content/.morph/examples/api-nextjs/contracts.ts +307 -307
  35. package/content/.morph/examples/api-nextjs/spec.md +399 -399
  36. package/content/.morph/examples/api-nextjs/tasks.md +168 -168
  37. package/content/.morph/examples/micro-saas/README.md +125 -125
  38. package/content/.morph/examples/micro-saas/contracts.cs +358 -358
  39. package/content/.morph/examples/micro-saas/decisions.md +246 -246
  40. package/content/.morph/examples/micro-saas/spec.md +236 -236
  41. package/content/.morph/examples/micro-saas/tasks.md +150 -150
  42. package/content/.morph/examples/multi-agent/README.md +309 -309
  43. package/content/.morph/examples/multi-agent/contracts.cs +433 -433
  44. package/content/.morph/examples/multi-agent/spec.md +479 -479
  45. package/content/.morph/examples/multi-agent/tasks.md +185 -185
  46. package/content/.morph/examples/state-v3.json +188 -188
  47. package/content/.morph/features/.gitkeep +25 -25
  48. package/content/.morph/hooks/pre-commit-all.sh +48 -48
  49. package/content/.morph/hooks/pre-commit-specs.sh +49 -49
  50. package/content/.morph/hooks/pre-commit-tests.sh +60 -60
  51. package/content/.morph/project.md +160 -160
  52. package/content/.morph/schemas/agent.schema.json +296 -296
  53. package/content/.morph/specs/.gitkeep +20 -20
  54. package/content/.morph/standards/coding.md +377 -377
  55. package/content/.morph/standards/fluent-ui-setup.md +590 -590
  56. package/content/.morph/standards/migration-guide.md +514 -514
  57. package/content/.morph/standards/passkeys-auth.md +423 -423
  58. package/content/.morph/standards/vector-search-rag.md +536 -536
  59. package/content/.morph/state.json +17 -17
  60. package/content/.morph/templates/FluentDesignTheme.cs +149 -149
  61. package/content/.morph/templates/MudTheme.cs +281 -281
  62. package/content/.morph/templates/component.razor +239 -239
  63. package/content/.morph/templates/contracts.cs +217 -217
  64. package/content/.morph/templates/design-system.css +226 -226
  65. package/content/.morph/templates/infra/.dockerignore.example +89 -89
  66. package/content/.morph/templates/infra/Dockerfile.example +82 -82
  67. package/content/.morph/templates/infra/README.md +286 -286
  68. package/content/.morph/templates/infra/app-insights.bicep +63 -63
  69. package/content/.morph/templates/infra/app-service.bicep +164 -164
  70. package/content/.morph/templates/infra/azure-pipelines-deploy.yml +480 -480
  71. package/content/.morph/templates/infra/container-app-env.bicep +49 -49
  72. package/content/.morph/templates/infra/container-app.bicep +156 -156
  73. package/content/.morph/templates/infra/deploy-checklist.md +426 -426
  74. package/content/.morph/templates/infra/deploy.ps1 +229 -229
  75. package/content/.morph/templates/infra/deploy.sh +208 -208
  76. package/content/.morph/templates/infra/key-vault.bicep +91 -91
  77. package/content/.morph/templates/infra/main.bicep +189 -189
  78. package/content/.morph/templates/infra/parameters.dev.json +29 -29
  79. package/content/.morph/templates/infra/parameters.prod.json +29 -29
  80. package/content/.morph/templates/infra/parameters.staging.json +29 -29
  81. package/content/.morph/templates/infra/sql-database.bicep +103 -103
  82. package/content/.morph/templates/infra/storage.bicep +106 -106
  83. package/content/.morph/templates/integrations/asaas-client.cs +387 -387
  84. package/content/.morph/templates/integrations/asaas-webhook.cs +351 -351
  85. package/content/.morph/templates/integrations/azure-identity-config.cs +288 -288
  86. package/content/.morph/templates/integrations/clerk-config.cs +258 -258
  87. package/content/.morph/templates/job.cs +171 -171
  88. package/content/.morph/templates/migration.cs +83 -83
  89. package/content/.morph/templates/repository.cs +141 -141
  90. package/content/.morph/templates/saas/subscription.cs +347 -347
  91. package/content/.morph/templates/saas/tenant.cs +338 -338
  92. package/content/.morph/templates/service.cs +139 -139
  93. package/content/.morph/templates/sprint-status.yaml +68 -68
  94. package/content/.morph/templates/story.md +143 -143
  95. package/content/.morph/templates/test.cs +239 -239
  96. package/content/.morph/templates/ui-design-system.md +286 -286
  97. package/content/.morph/templates/ui-flows.md +336 -336
  98. package/content/.morph/templates/ui-mockups.md +133 -133
  99. package/content/.morph/test-infra/example.bicep +59 -59
  100. package/content/README.md +79 -79
  101. package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +977 -977
  102. package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1048 -1048
  103. package/docs/api/scripts/collapse.js +38 -38
  104. package/docs/api/scripts/commonNav.js +28 -28
  105. package/docs/api/scripts/linenumber.js +25 -25
  106. package/docs/api/scripts/nav.js +12 -12
  107. package/docs/api/scripts/polyfill.js +3 -3
  108. package/docs/api/scripts/prettify/Apache-License-2.0.txt +202 -202
  109. package/docs/api/scripts/prettify/lang-css.js +2 -2
  110. package/docs/api/scripts/prettify/prettify.js +28 -28
  111. package/docs/api/scripts/search.js +98 -98
  112. package/docs/api/styles/jsdoc.css +776 -776
  113. package/docs/api/styles/prettify.css +80 -80
  114. package/docs/examples.md +328 -328
  115. package/docs/templates.md +418 -418
  116. package/package.json +1 -2
  117. package/scripts/postinstall.js +132 -132
  118. package/scripts/reorganize-skills.cjs +175 -0
  119. package/scripts/validate-agents-structure.cjs +52 -0
  120. package/scripts/validate-skills.cjs +180 -0
  121. package/src/commands/analyze-blazor-concurrency.js +193 -193
  122. package/src/commands/create-story.js +351 -351
  123. package/src/commands/deploy.js +780 -780
  124. package/src/commands/detect-agents.js +9 -0
  125. package/src/commands/detect.js +104 -104
  126. package/src/commands/generate.js +149 -149
  127. package/src/commands/lint-fluent.js +352 -352
  128. package/src/commands/rollback-phase.js +185 -185
  129. package/src/commands/session-summary.js +291 -291
  130. package/src/commands/shard-spec.js +224 -224
  131. package/src/commands/sprint-status.js +250 -250
  132. package/src/commands/state.js +334 -333
  133. package/src/commands/sync.js +167 -167
  134. package/src/commands/troubleshoot.js +222 -222
  135. package/src/commands/update.js +13 -1
  136. package/src/commands/validate-blazor-state.js +210 -210
  137. package/src/commands/validate-blazor.js +156 -156
  138. package/src/commands/validate-css.js +84 -84
  139. package/src/commands/validate-phase.js +221 -221
  140. package/src/lib/blazor-concurrency-analyzer.js +288 -288
  141. package/src/lib/blazor-state-validator.js +291 -291
  142. package/src/lib/blazor-validator.js +374 -374
  143. package/src/lib/css-validator.js +352 -352
  144. package/src/lib/design-system-generator.js +298 -298
  145. package/{detectors → src/lib/detectors}/config-detector.js +223 -223
  146. package/{detectors → src/lib/detectors}/conversation-analyzer.js +163 -163
  147. package/{detectors → src/lib/detectors}/index.js +84 -84
  148. package/{detectors → src/lib/detectors}/standards-generator.js +275 -275
  149. package/src/lib/learning-system.js +520 -520
  150. package/src/lib/mockup-generator.js +366 -366
  151. package/src/lib/state-manager.js +21 -4
  152. package/src/lib/troubleshoot-grep.js +194 -194
  153. package/src/lib/troubleshoot-index.js +144 -144
  154. package/src/lib/ui-detector.js +350 -350
  155. package/src/lib/validators/architecture-validator.js +387 -387
  156. package/src/lib/validators/package-validator.js +360 -360
  157. package/src/lib/validators/ui-contrast-validator.js +422 -422
  158. package/src/utils/logger.js +32 -32
  159. package/src/utils/version-checker.js +175 -175
  160. /package/{detectors → src/lib/detectors}/structure-detector.js +0 -0
@@ -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
+ }