@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.
- package/CLAUDE.md +158 -26
- package/LICENSE +72 -72
- package/bin/detect-agents.js +225 -225
- package/bin/morph-spec.js +8 -0
- package/bin/render-template.js +302 -302
- package/bin/semantic-detect-agents.js +246 -246
- package/bin/validate-agents-skills.js +251 -251
- package/bin/validate-agents.js +69 -69
- package/bin/validate-phase.js +263 -263
- package/content/.azure/README.md +293 -293
- package/content/.azure/docs/azure-devops-setup.md +454 -454
- package/content/.azure/docs/branch-strategy.md +398 -398
- package/content/.azure/docs/local-development.md +515 -515
- package/content/.azure/pipelines/pipeline-variables.yml +34 -34
- package/content/.azure/pipelines/prod-pipeline.yml +319 -319
- package/content/.azure/pipelines/staging-pipeline.yml +234 -234
- package/content/.azure/pipelines/templates/build-dotnet.yml +75 -75
- package/content/.azure/pipelines/templates/deploy-app-service.yml +94 -94
- package/content/.azure/pipelines/templates/deploy-container-app.yml +120 -120
- package/content/.azure/pipelines/templates/infra-deploy.yml +90 -90
- package/content/.claude/commands/morph-archive.md +79 -79
- package/content/.claude/commands/morph-deploy.md +529 -0
- package/content/.claude/commands/morph-infra.md +209 -209
- package/content/.claude/commands/morph-preflight.md +227 -227
- package/content/.claude/commands/morph-troubleshoot.md +122 -122
- package/content/.claude/settings.local.json +15 -15
- package/content/.claude/skills/infra/azure-deploy-specialist.md +699 -0
- package/content/.claude/skills/level-0-meta/README.md +7 -0
- package/content/.claude/skills/{checklists → level-0-meta}/morph-checklist.md +117 -117
- package/content/.claude/skills/level-1-workflows/README.md +7 -0
- package/content/.claude/skills/{workflows → level-1-workflows}/morph-replicate.md +213 -213
- package/content/.claude/skills/{workflows → level-1-workflows}/phase-clarify.md +131 -131
- package/content/.claude/skills/{workflows → level-1-workflows}/phase-design.md +213 -205
- package/content/.claude/skills/{workflows → level-1-workflows}/phase-setup.md +106 -92
- package/content/.claude/skills/{workflows → level-1-workflows}/phase-tasks.md +164 -164
- package/content/.claude/skills/{workflows → level-1-workflows}/phase-uiux.md +169 -138
- package/content/.claude/skills/level-2-domains/README.md +14 -0
- package/content/.claude/skills/{specialists → level-2-domains/quality}/testing-specialist.md +126 -126
- package/content/.claude/skills/level-3-technologies/README.md +7 -0
- package/content/.claude/skills/level-4-patterns/README.md +7 -0
- package/content/.claude/skills/specialists/prompt-engineer.md +189 -0
- package/content/.claude/skills/specialists/seo-growth-hacker.md +320 -0
- package/content/.morph/.morphversion +5 -5
- package/content/.morph/archive/.gitkeep +25 -25
- package/content/.morph/config/agents.json +742 -358
- package/content/.morph/config/config.template.json +33 -0
- package/content/.morph/docs/STORY-DRIVEN-DEVELOPMENT.md +392 -392
- package/content/.morph/docs/workflows/enforcement-pipeline.md +668 -0
- package/content/.morph/examples/api-nextjs/README.md +241 -241
- package/content/.morph/examples/api-nextjs/contracts.ts +307 -307
- package/content/.morph/examples/api-nextjs/spec.md +399 -399
- package/content/.morph/examples/api-nextjs/tasks.md +168 -168
- package/content/.morph/examples/micro-saas/README.md +125 -125
- package/content/.morph/examples/micro-saas/contracts.cs +358 -358
- package/content/.morph/examples/micro-saas/decisions.md +246 -246
- package/content/.morph/examples/micro-saas/spec.md +236 -236
- package/content/.morph/examples/micro-saas/tasks.md +150 -150
- package/content/.morph/examples/multi-agent/README.md +309 -309
- package/content/.morph/examples/multi-agent/contracts.cs +433 -433
- package/content/.morph/examples/multi-agent/spec.md +479 -479
- package/content/.morph/examples/multi-agent/tasks.md +185 -185
- package/content/.morph/examples/scheduled-reports/decisions.md +158 -158
- package/content/.morph/examples/scheduled-reports/proposal.md +95 -95
- package/content/.morph/examples/scheduled-reports/spec.md +267 -267
- package/content/.morph/examples/state-v3.json +188 -188
- package/content/.morph/features/.gitkeep +25 -25
- package/content/.morph/hooks/README.md +158 -0
- package/content/.morph/hooks/pre-commit-all.sh +48 -48
- package/content/.morph/hooks/pre-commit-specs.sh +49 -49
- package/content/.morph/hooks/pre-commit-tests.sh +60 -60
- package/content/.morph/hooks/task-completed.js +73 -0
- package/content/.morph/hooks/teammate-idle.js +68 -0
- package/content/.morph/project.md +160 -160
- package/content/.morph/schemas/agent.schema.json +296 -296
- package/content/.morph/schemas/tasks.schema.json +220 -220
- package/content/.morph/specs/.gitkeep +20 -20
- package/content/.morph/standards/agent-teams-workflow.md +474 -0
- package/content/.morph/standards/coding.md +377 -377
- package/content/.morph/standards/fluent-ui-setup.md +590 -590
- package/content/.morph/standards/migration-guide.md +514 -514
- package/content/.morph/standards/passkeys-auth.md +423 -423
- package/content/.morph/standards/vector-search-rag.md +536 -536
- package/content/.morph/state.json +17 -17
- package/content/.morph/templates/CONTEXT-FEATURE.md +276 -0
- package/content/.morph/templates/CONTEXT.md +170 -0
- package/content/.morph/templates/FluentDesignTheme.cs +149 -149
- package/content/.morph/templates/MudTheme.cs +281 -281
- package/content/.morph/templates/clarify-questions.md +159 -159
- package/content/.morph/templates/component.razor +239 -239
- package/content/.morph/templates/contracts/Commands.cs +74 -74
- package/content/.morph/templates/contracts/Entities.cs +25 -25
- package/content/.morph/templates/contracts/Queries.cs +74 -74
- package/content/.morph/templates/contracts/README.md +74 -74
- package/content/.morph/templates/contracts.cs +217 -217
- package/content/.morph/templates/design-system.css +226 -226
- package/content/.morph/templates/infra/.dockerignore.example +89 -89
- package/content/.morph/templates/infra/Dockerfile.example +82 -82
- package/content/.morph/templates/infra/README.md +286 -286
- package/content/.morph/templates/infra/app-insights.bicep +63 -63
- package/content/.morph/templates/infra/app-service.bicep +164 -164
- package/content/.morph/templates/infra/azure-pipelines-deploy.yml +480 -0
- package/content/.morph/templates/infra/container-app-env.bicep +49 -49
- package/content/.morph/templates/infra/container-app.bicep +156 -156
- package/content/.morph/templates/infra/deploy-checklist.md +426 -426
- package/content/.morph/templates/infra/deploy.ps1 +229 -229
- package/content/.morph/templates/infra/deploy.sh +208 -208
- package/content/.morph/templates/infra/key-vault.bicep +91 -91
- package/content/.morph/templates/infra/main.bicep +189 -189
- package/content/.morph/templates/infra/parameters.dev.json +29 -29
- package/content/.morph/templates/infra/parameters.prod.json +29 -29
- package/content/.morph/templates/infra/parameters.staging.json +29 -29
- package/content/.morph/templates/infra/sql-database.bicep +103 -103
- package/content/.morph/templates/infra/storage.bicep +106 -106
- package/content/.morph/templates/integrations/asaas-client.cs +387 -387
- package/content/.morph/templates/integrations/asaas-webhook.cs +351 -351
- package/content/.morph/templates/integrations/azure-identity-config.cs +288 -288
- package/content/.morph/templates/integrations/clerk-config.cs +258 -258
- package/content/.morph/templates/job.cs +171 -171
- package/content/.morph/templates/migration.cs +83 -83
- package/content/.morph/templates/repository.cs +141 -141
- package/content/.morph/templates/saas/subscription.cs +347 -347
- package/content/.morph/templates/saas/tenant.cs +338 -338
- package/content/.morph/templates/service.cs +139 -139
- package/content/.morph/templates/sprint-status.yaml +68 -68
- package/content/.morph/templates/story.md +143 -143
- package/content/.morph/templates/test.cs +239 -239
- package/content/.morph/templates/ui-design-system.md +286 -286
- package/content/.morph/templates/ui-flows.md +336 -336
- package/content/.morph/templates/ui-mockups.md +133 -133
- package/content/.morph/test-infra/example.bicep +59 -59
- package/content/README.md +79 -79
- package/detectors/config-detector.js +223 -223
- package/detectors/conversation-analyzer.js +163 -163
- package/detectors/index.js +84 -84
- package/detectors/standards-generator.js +275 -275
- package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-light-webfont.svg +977 -977
- package/docs/api/fonts/Source-Sans-Pro/sourcesanspro-regular-webfont.svg +1048 -1048
- package/docs/api/scripts/collapse.js +38 -38
- package/docs/api/scripts/commonNav.js +28 -28
- package/docs/api/scripts/linenumber.js +25 -25
- package/docs/api/scripts/nav.js +12 -12
- package/docs/api/scripts/polyfill.js +3 -3
- package/docs/api/scripts/prettify/Apache-License-2.0.txt +202 -202
- package/docs/api/scripts/prettify/lang-css.js +2 -2
- package/docs/api/scripts/prettify/prettify.js +28 -28
- package/docs/api/scripts/search.js +98 -98
- package/docs/api/styles/jsdoc.css +776 -776
- package/docs/api/styles/prettify.css +80 -80
- package/docs/examples.md +328 -328
- package/docs/templates.md +418 -418
- package/package.json +1 -1
- package/scripts/postinstall.js +132 -132
- package/src/commands/advance-phase.js +83 -0
- package/src/commands/analyze-blazor-concurrency.js +193 -193
- package/src/commands/create-story.js +351 -351
- package/src/commands/deploy.js +780 -0
- package/src/commands/detect-agents.js +34 -6
- package/src/commands/detect.js +104 -104
- package/src/commands/generate-context.js +40 -0
- package/src/commands/generate.js +149 -149
- package/src/commands/lint-fluent.js +352 -352
- package/src/commands/rollback-phase.js +185 -185
- package/src/commands/session-summary.js +291 -291
- package/src/commands/shard-spec.js +224 -224
- package/src/commands/sprint-status.js +250 -250
- package/src/commands/state.js +333 -333
- package/src/commands/sync.js +167 -167
- package/src/commands/troubleshoot.js +222 -222
- package/src/commands/validate-blazor-state.js +210 -210
- package/src/commands/validate-blazor.js +156 -156
- package/src/commands/validate-css.js +84 -84
- package/src/commands/validate-phase.js +221 -221
- package/src/lib/blazor-concurrency-analyzer.js +288 -288
- package/src/lib/blazor-state-validator.js +291 -291
- package/src/lib/blazor-validator.js +374 -374
- package/src/lib/context-generator.js +513 -0
- package/src/lib/css-validator.js +352 -352
- package/src/lib/design-system-detector.js +187 -0
- package/src/lib/design-system-generator.js +298 -298
- package/src/lib/design-system-scaffolder.js +299 -0
- package/src/lib/hook-executor.js +256 -0
- package/src/lib/learning-system.js +520 -520
- package/src/lib/mockup-generator.js +366 -366
- package/src/lib/spec-validator.js +258 -0
- package/src/lib/standards-context-injector.js +287 -0
- package/src/lib/team-orchestrator.js +322 -0
- package/src/lib/troubleshoot-grep.js +194 -194
- package/src/lib/troubleshoot-index.js +144 -144
- package/src/lib/ui-detector.js +350 -350
- package/src/lib/validation-runner.js +65 -13
- package/src/lib/validators/architecture-validator.js +387 -387
- package/src/lib/validators/design-system-validator.js +231 -0
- package/src/lib/validators/package-validator.js +360 -360
- package/src/lib/validators/ui-contrast-validator.js +422 -422
- package/src/utils/file-copier.js +9 -1
- package/src/utils/logger.js +32 -32
- package/src/utils/version-checker.js +175 -175
- /package/content/.claude/skills/{checklists → level-0-meta}/code-review.md +0 -0
- /package/content/.claude/skills/{checklists → level-0-meta}/simulation-checklist.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/ai-agents}/ai-system-architect.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/architecture}/po-pm-advisor.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/architecture}/standards-architect.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/backend}/dotnet-senior.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/backend}/ef-modeler.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/backend}/hangfire-orchestrator.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/backend}/ms-agent-expert.md +0 -0
- /package/content/.claude/skills/{stacks/dotnet-blazor.md → level-2-domains/frontend/blazor-builder.md} +0 -0
- /package/content/.claude/skills/{stacks/dotnet-nextjs.md → level-2-domains/frontend/nextjs-expert.md} +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/frontend}/ui-ux-designer.md +0 -0
- /package/content/.claude/skills/{specialists → level-2-domains/infrastructure}/azure-architect.md +0 -0
- /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/bicep-architect.md +0 -0
- /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/container-specialist.md +0 -0
- /package/content/.claude/skills/{infra → level-2-domains/infrastructure}/devops-engineer.md +0 -0
- /package/content/.claude/skills/{integrations → level-2-domains/integrations}/asaas-financial.md +0 -0
- /package/content/.claude/skills/{integrations → level-2-domains/integrations}/azure-identity.md +0 -0
- /package/content/.claude/skills/{integrations → level-2-domains/integrations}/clerk-auth.md +0 -0
- /package/content/.claude/skills/{integrations → level-2-domains/integrations}/resend-email.md +0 -0
- /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
|
+
}
|