@polymorphism-tech/morph-spec 2.4.0 → 3.0.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 (218) hide show
  1. package/CLAUDE.md +158 -26
  2. package/LICENSE +72 -72
  3. package/bin/detect-agents.js +225 -225
  4. package/bin/morph-spec.js +8 -0
  5. package/bin/render-template.js +302 -302
  6. package/bin/semantic-detect-agents.js +246 -246
  7. package/bin/validate-agents-skills.js +251 -251
  8. package/bin/validate-agents.js +69 -69
  9. package/bin/validate-phase.js +263 -263
  10. package/content/.azure/README.md +293 -293
  11. package/content/.azure/docs/azure-devops-setup.md +454 -454
  12. package/content/.azure/docs/branch-strategy.md +398 -398
  13. package/content/.azure/docs/local-development.md +515 -515
  14. package/content/.azure/pipelines/pipeline-variables.yml +34 -34
  15. package/content/.azure/pipelines/prod-pipeline.yml +319 -319
  16. package/content/.azure/pipelines/staging-pipeline.yml +234 -234
  17. package/content/.azure/pipelines/templates/build-dotnet.yml +75 -75
  18. package/content/.azure/pipelines/templates/deploy-app-service.yml +94 -94
  19. package/content/.azure/pipelines/templates/deploy-container-app.yml +120 -120
  20. package/content/.azure/pipelines/templates/infra-deploy.yml +90 -90
  21. package/content/.claude/commands/morph-archive.md +79 -79
  22. package/content/.claude/commands/morph-deploy.md +529 -0
  23. package/content/.claude/commands/morph-infra.md +209 -209
  24. package/content/.claude/commands/morph-preflight.md +227 -227
  25. package/content/.claude/commands/morph-troubleshoot.md +122 -122
  26. package/content/.claude/settings.local.json +15 -15
  27. package/content/.claude/skills/infra/azure-deploy-specialist.md +699 -0
  28. package/content/.claude/skills/level-0-meta/README.md +7 -0
  29. package/content/.claude/skills/{checklists → level-0-meta}/morph-checklist.md +117 -117
  30. package/content/.claude/skills/level-1-workflows/README.md +7 -0
  31. package/content/.claude/skills/{workflows → level-1-workflows}/morph-replicate.md +213 -213
  32. package/content/.claude/skills/{workflows → level-1-workflows}/phase-clarify.md +131 -131
  33. package/content/.claude/skills/{workflows → level-1-workflows}/phase-design.md +213 -205
  34. package/content/.claude/skills/{workflows → level-1-workflows}/phase-setup.md +106 -92
  35. package/content/.claude/skills/{workflows → level-1-workflows}/phase-tasks.md +164 -164
  36. package/content/.claude/skills/{workflows → level-1-workflows}/phase-uiux.md +169 -138
  37. package/content/.claude/skills/level-2-domains/README.md +14 -0
  38. package/content/.claude/skills/{specialists → level-2-domains/quality}/testing-specialist.md +126 -126
  39. package/content/.claude/skills/level-3-technologies/README.md +7 -0
  40. package/content/.claude/skills/level-4-patterns/README.md +7 -0
  41. package/content/.claude/skills/specialists/prompt-engineer.md +189 -0
  42. package/content/.claude/skills/specialists/seo-growth-hacker.md +320 -0
  43. package/content/.morph/.morphversion +5 -5
  44. package/content/.morph/archive/.gitkeep +25 -25
  45. package/content/.morph/config/agents.json +742 -358
  46. package/content/.morph/config/config.template.json +33 -0
  47. package/content/.morph/docs/STORY-DRIVEN-DEVELOPMENT.md +392 -392
  48. package/content/.morph/docs/workflows/enforcement-pipeline.md +668 -0
  49. package/content/.morph/examples/api-nextjs/README.md +241 -241
  50. package/content/.morph/examples/api-nextjs/contracts.ts +307 -307
  51. package/content/.morph/examples/api-nextjs/spec.md +399 -399
  52. package/content/.morph/examples/api-nextjs/tasks.md +168 -168
  53. package/content/.morph/examples/micro-saas/README.md +125 -125
  54. package/content/.morph/examples/micro-saas/contracts.cs +358 -358
  55. package/content/.morph/examples/micro-saas/decisions.md +246 -246
  56. package/content/.morph/examples/micro-saas/spec.md +236 -236
  57. package/content/.morph/examples/micro-saas/tasks.md +150 -150
  58. package/content/.morph/examples/multi-agent/README.md +309 -309
  59. package/content/.morph/examples/multi-agent/contracts.cs +433 -433
  60. package/content/.morph/examples/multi-agent/spec.md +479 -479
  61. package/content/.morph/examples/multi-agent/tasks.md +185 -185
  62. package/content/.morph/examples/scheduled-reports/decisions.md +158 -158
  63. package/content/.morph/examples/scheduled-reports/proposal.md +95 -95
  64. package/content/.morph/examples/scheduled-reports/spec.md +267 -267
  65. package/content/.morph/examples/state-v3.json +188 -188
  66. package/content/.morph/features/.gitkeep +25 -25
  67. package/content/.morph/hooks/README.md +158 -0
  68. package/content/.morph/hooks/pre-commit-all.sh +48 -48
  69. package/content/.morph/hooks/pre-commit-specs.sh +49 -49
  70. package/content/.morph/hooks/pre-commit-tests.sh +60 -60
  71. package/content/.morph/hooks/task-completed.js +73 -0
  72. package/content/.morph/hooks/teammate-idle.js +68 -0
  73. package/content/.morph/project.md +160 -160
  74. package/content/.morph/schemas/agent.schema.json +296 -296
  75. package/content/.morph/schemas/tasks.schema.json +220 -220
  76. package/content/.morph/specs/.gitkeep +20 -20
  77. package/content/.morph/standards/agent-teams-workflow.md +474 -0
  78. package/content/.morph/standards/coding.md +377 -377
  79. package/content/.morph/standards/fluent-ui-setup.md +590 -590
  80. package/content/.morph/standards/migration-guide.md +514 -514
  81. package/content/.morph/standards/passkeys-auth.md +423 -423
  82. package/content/.morph/standards/vector-search-rag.md +536 -536
  83. package/content/.morph/state.json +17 -17
  84. package/content/.morph/templates/CONTEXT-FEATURE.md +276 -0
  85. package/content/.morph/templates/CONTEXT.md +170 -0
  86. package/content/.morph/templates/FluentDesignTheme.cs +149 -149
  87. package/content/.morph/templates/MudTheme.cs +281 -281
  88. package/content/.morph/templates/clarify-questions.md +159 -159
  89. package/content/.morph/templates/component.razor +239 -239
  90. package/content/.morph/templates/contracts/Commands.cs +74 -74
  91. package/content/.morph/templates/contracts/Entities.cs +25 -25
  92. package/content/.morph/templates/contracts/Queries.cs +74 -74
  93. package/content/.morph/templates/contracts/README.md +74 -74
  94. package/content/.morph/templates/contracts.cs +217 -217
  95. package/content/.morph/templates/design-system.css +226 -226
  96. package/content/.morph/templates/infra/.dockerignore.example +89 -89
  97. package/content/.morph/templates/infra/Dockerfile.example +82 -82
  98. package/content/.morph/templates/infra/README.md +286 -286
  99. package/content/.morph/templates/infra/app-insights.bicep +63 -63
  100. package/content/.morph/templates/infra/app-service.bicep +164 -164
  101. package/content/.morph/templates/infra/azure-pipelines-deploy.yml +480 -0
  102. package/content/.morph/templates/infra/container-app-env.bicep +49 -49
  103. package/content/.morph/templates/infra/container-app.bicep +156 -156
  104. package/content/.morph/templates/infra/deploy-checklist.md +426 -426
  105. package/content/.morph/templates/infra/deploy.ps1 +229 -229
  106. package/content/.morph/templates/infra/deploy.sh +208 -208
  107. package/content/.morph/templates/infra/key-vault.bicep +91 -91
  108. package/content/.morph/templates/infra/main.bicep +189 -189
  109. package/content/.morph/templates/infra/parameters.dev.json +29 -29
  110. package/content/.morph/templates/infra/parameters.prod.json +29 -29
  111. package/content/.morph/templates/infra/parameters.staging.json +29 -29
  112. package/content/.morph/templates/infra/sql-database.bicep +103 -103
  113. package/content/.morph/templates/infra/storage.bicep +106 -106
  114. package/content/.morph/templates/integrations/asaas-client.cs +387 -387
  115. package/content/.morph/templates/integrations/asaas-webhook.cs +351 -351
  116. package/content/.morph/templates/integrations/azure-identity-config.cs +288 -288
  117. package/content/.morph/templates/integrations/clerk-config.cs +258 -258
  118. package/content/.morph/templates/job.cs +171 -171
  119. package/content/.morph/templates/migration.cs +83 -83
  120. package/content/.morph/templates/repository.cs +141 -141
  121. package/content/.morph/templates/saas/subscription.cs +347 -347
  122. package/content/.morph/templates/saas/tenant.cs +338 -338
  123. package/content/.morph/templates/service.cs +139 -139
  124. package/content/.morph/templates/sprint-status.yaml +68 -68
  125. package/content/.morph/templates/story.md +143 -143
  126. package/content/.morph/templates/test.cs +239 -239
  127. package/content/.morph/templates/ui-design-system.md +286 -286
  128. package/content/.morph/templates/ui-flows.md +336 -336
  129. package/content/.morph/templates/ui-mockups.md +133 -133
  130. package/content/.morph/test-infra/example.bicep +59 -59
  131. package/content/README.md +79 -79
  132. package/detectors/config-detector.js +223 -223
  133. package/detectors/conversation-analyzer.js +163 -163
  134. package/detectors/index.js +84 -84
  135. package/detectors/standards-generator.js +275 -275
  136. package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +977 -977
  137. package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1048 -1048
  138. package/docs/api/scripts/collapse.js +38 -38
  139. package/docs/api/scripts/commonNav.js +28 -28
  140. package/docs/api/scripts/linenumber.js +25 -25
  141. package/docs/api/scripts/nav.js +12 -12
  142. package/docs/api/scripts/polyfill.js +3 -3
  143. package/docs/api/scripts/prettify/Apache-License-2.0.txt +202 -202
  144. package/docs/api/scripts/prettify/lang-css.js +2 -2
  145. package/docs/api/scripts/prettify/prettify.js +28 -28
  146. package/docs/api/scripts/search.js +98 -98
  147. package/docs/api/styles/jsdoc.css +776 -776
  148. package/docs/api/styles/prettify.css +80 -80
  149. package/docs/examples.md +328 -328
  150. package/docs/templates.md +418 -418
  151. package/package.json +1 -1
  152. package/scripts/postinstall.js +132 -132
  153. package/src/commands/advance-phase.js +83 -0
  154. package/src/commands/analyze-blazor-concurrency.js +193 -193
  155. package/src/commands/create-story.js +351 -351
  156. package/src/commands/deploy.js +780 -0
  157. package/src/commands/detect-agents.js +34 -6
  158. package/src/commands/detect.js +104 -104
  159. package/src/commands/generate-context.js +40 -0
  160. package/src/commands/generate.js +149 -149
  161. package/src/commands/lint-fluent.js +352 -352
  162. package/src/commands/rollback-phase.js +185 -185
  163. package/src/commands/session-summary.js +291 -291
  164. package/src/commands/shard-spec.js +224 -224
  165. package/src/commands/sprint-status.js +250 -250
  166. package/src/commands/state.js +333 -333
  167. package/src/commands/sync.js +167 -167
  168. package/src/commands/troubleshoot.js +222 -222
  169. package/src/commands/validate-blazor-state.js +210 -210
  170. package/src/commands/validate-blazor.js +156 -156
  171. package/src/commands/validate-css.js +84 -84
  172. package/src/commands/validate-phase.js +221 -221
  173. package/src/lib/blazor-concurrency-analyzer.js +288 -288
  174. package/src/lib/blazor-state-validator.js +291 -291
  175. package/src/lib/blazor-validator.js +374 -374
  176. package/src/lib/context-generator.js +513 -0
  177. package/src/lib/css-validator.js +352 -352
  178. package/src/lib/design-system-detector.js +187 -0
  179. package/src/lib/design-system-generator.js +298 -298
  180. package/src/lib/design-system-scaffolder.js +299 -0
  181. package/src/lib/hook-executor.js +256 -0
  182. package/src/lib/learning-system.js +520 -520
  183. package/src/lib/mockup-generator.js +366 -366
  184. package/src/lib/spec-validator.js +258 -0
  185. package/src/lib/standards-context-injector.js +287 -0
  186. package/src/lib/team-orchestrator.js +322 -0
  187. package/src/lib/troubleshoot-grep.js +194 -194
  188. package/src/lib/troubleshoot-index.js +144 -144
  189. package/src/lib/ui-detector.js +350 -350
  190. package/src/lib/validation-runner.js +65 -13
  191. package/src/lib/validators/architecture-validator.js +387 -387
  192. package/src/lib/validators/design-system-validator.js +231 -0
  193. package/src/lib/validators/package-validator.js +360 -360
  194. package/src/lib/validators/ui-contrast-validator.js +422 -422
  195. package/src/utils/file-copier.js +9 -1
  196. package/src/utils/logger.js +32 -32
  197. package/src/utils/version-checker.js +175 -175
  198. /package/content/.claude/skills/{checklists → level-0-meta}/code-review.md +0 -0
  199. /package/content/.claude/skills/{checklists → level-0-meta}/simulation-checklist.md +0 -0
  200. /package/content/.claude/skills/{specialists → level-2-domains/ai-agents}/ai-system-architect.md +0 -0
  201. /package/content/.claude/skills/{specialists → level-2-domains/architecture}/po-pm-advisor.md +0 -0
  202. /package/content/.claude/skills/{specialists → level-2-domains/architecture}/standards-architect.md +0 -0
  203. /package/content/.claude/skills/{specialists → level-2-domains/backend}/dotnet-senior.md +0 -0
  204. /package/content/.claude/skills/{specialists → level-2-domains/backend}/ef-modeler.md +0 -0
  205. /package/content/.claude/skills/{specialists → level-2-domains/backend}/hangfire-orchestrator.md +0 -0
  206. /package/content/.claude/skills/{specialists → level-2-domains/backend}/ms-agent-expert.md +0 -0
  207. /package/content/.claude/skills/{stacks/dotnet-blazor.md → level-2-domains/frontend/blazor-builder.md} +0 -0
  208. /package/content/.claude/skills/{stacks/dotnet-nextjs.md → level-2-domains/frontend/nextjs-expert.md} +0 -0
  209. /package/content/.claude/skills/{specialists → level-2-domains/frontend}/ui-ux-designer.md +0 -0
  210. /package/content/.claude/skills/{specialists → level-2-domains/infrastructure}/azure-architect.md +0 -0
  211. /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/bicep-architect.md +0 -0
  212. /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/container-specialist.md +0 -0
  213. /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/devops-engineer.md +0 -0
  214. /package/content/.claude/skills/{integrations → level-2-domains/integrations}/asaas-financial.md +0 -0
  215. /package/content/.claude/skills/{integrations → level-2-domains/integrations}/azure-identity.md +0 -0
  216. /package/content/.claude/skills/{integrations → level-2-domains/integrations}/clerk-auth.md +0 -0
  217. /package/content/.claude/skills/{integrations → level-2-domains/integrations}/resend-email.md +0 -0
  218. /package/content/.claude/skills/{specialists → level-2-domains/quality}/code-analyzer.md +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
+ }