zero-to-app 3.2.1 → 3.2.3

package/dist/utils/contrast-checker.js

@@ -0,0 +1,97 @@
+/**
+ * WCAG 2.1 Contrast Checker
+ * Automated accessibility contrast validation
+ */
+import { contrastRatio } from '../brand/palette-generator';
+/**
+ * WCAG 2.1 contrast requirements
+ * - AAA: 7:1 for normal text, 4.5:1 for large text
+ * - AA: 4.5:1 for normal text, 3:1 for large text
+ */
+export const WCAG_LEVELS = {
+    AAA_NORMAL: 7.0,
+    AAA_LARGE: 4.5,
+    AA_NORMAL: 4.5,
+    AA_LARGE: 3.0,
+};
+/**
+ * Check all critical color pairs in a theme for WCAG compliance
+ * @param colors Color scheme to validate
+ * @param largeText Whether to use large text criteria (default: false)
+ * @returns Array of contrast check results
+ */
+export function checkThemeContrast(colors, largeText = false) {
+    const minRatio = largeText ? WCAG_LEVELS.AA_LARGE : WCAG_LEVELS.AA_NORMAL;
+    const aaaRatio = largeText ? WCAG_LEVELS.AAA_LARGE : WCAG_LEVELS.AAA_NORMAL;
+    const checks = [];
+    // Critical color pairs that must have good contrast
+    const pairs = [
+        { pair: 'primary/onPrimary', fg: colors.onPrimary, bg: colors.primary },
+        { pair: 'primaryContainer/onPrimaryContainer', fg: colors.onPrimaryContainer, bg: colors.primaryContainer },
+        { pair: 'secondary/onSecondary', fg: colors.onSecondary, bg: colors.secondary },
+        { pair: 'secondaryContainer/onSecondaryContainer', fg: colors.onSecondaryContainer, bg: colors.secondaryContainer },
+        { pair: 'tertiary/onTertiary', fg: colors.onTertiary, bg: colors.tertiary },
+        { pair: 'tertiaryContainer/onTertiaryContainer', fg: colors.onTertiaryContainer, bg: colors.tertiaryContainer },
+        { pair: 'error/onError', fg: colors.onError, bg: colors.error },
+        { pair: 'errorContainer/onErrorContainer', fg: colors.onErrorContainer, bg: colors.errorContainer },
+        { pair: 'surface/onSurface', fg: colors.onSurface, bg: colors.surface },
+        { pair: 'surfaceVariant/onSurfaceVariant', fg: colors.onSurfaceVariant, bg: colors.surface },
+        { pair: 'inverseSurface/inverseOnSurface', fg: colors.inverseOnSurface, bg: colors.inverseSurface },
+    ];
+    for (const { pair, fg, bg } of pairs) {
+        const ratio = contrastRatio(fg, bg);
+        const passesAA = ratio >= minRatio;
+        const passesAAA = ratio >= aaaRatio;
+        checks.push({
+            pair,
+            foreground: fg,
+            background: bg,
+            ratio,
+            passes: passesAA,
+            level: passesAAA ? 'AAA' : passesAA ? 'AA' : 'Fail',
+        });
+    }
+    return checks;
+}
+/**
+ * Validate theme and return failing pairs
+ * @param colors Color scheme to validate
+ * @returns Array of failing contrast pairs
+ */
+export function validateThemeContrast(colors) {
+    const checks = checkThemeContrast(colors);
+    return checks.filter(check => !check.passes);
+}
+/**
+ * Generate a contrast report for a theme
+ * @param colors Color scheme to validate
+ * @returns Human-readable report string
+ */
+export function generateContrastReport(colors) {
+    const checks = checkThemeContrast(colors);
+    const failures = checks.filter(check => !check.passes);
+    if (failures.length === 0) {
+        return '✅ All color pairs pass WCAG AA contrast requirements';
+    }
+    let report = `❌ ${failures.length} color pair(s) failing WCAG AA:\n\n`;
+    for (const failure of failures) {
+        report += `  • ${failure.pair}\n`;
+        report += `    Foreground: ${failure.foreground}\n`;
+        report += `    Background: ${failure.background}\n`;
+        report += `    Level: ${failure.level}\n\n`;
+    }
+    return report;
+}
+/**
+ * Assert theme contrast passes WCAG AA
+ * Useful for automated tests
+ * @param colors Color scheme to validate
+ * @throws Error if any pairs fail
+ */
+export function assertThemeContrast(colors) {
+    const failures = validateThemeContrast(colors);
+    if (failures.length > 0) {
+        throw new Error(`Theme contrast validation failed:\n${generateContrastReport(colors)}`);
+    }
+}
+//# sourceMappingURL=contrast-checker.js.map

package/dist/utils/contrast-checker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-checker.js","sourceRoot":"","sources":["../../utils/contrast-checker.ts"],"names":[],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './contrast-checker';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../utils/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC"}

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+// Utility exports
+export * from './contrast-checker';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../utils/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zero-to-app",
-  "version": "3.2.1",
+  "version": "3.2.3",
   "description": "React Native components for building cross-platform apps with Material Design.",
   "license": "MIT",
   "author": "Alex Amayo",