@mintlify/cli 4.0.737 → 4.0.738

package/bin/accessibility.js

@@ -0,0 +1,97 @@
+import Color from 'color';
+export const WCAG_STANDARDS = {
+    AA_NORMAL: 4.5,
+    AA_LARGE: 3,
+    AAA_NORMAL: 7,
+    AAA_LARGE: 4.5,
+};
+export function checkColorContrast(foreground, background) {
+    try {
+        const fg = Color(foreground);
+        const bg = Color(background);
+        const ratio = fg.contrast(bg);
+        const level = fg.level(bg);
+        const meetsAA = level === 'AA' || level === 'AAA';
+        const meetsAAA = level === 'AAA';
+        let recommendation;
+        let message;
+        if (meetsAAA) {
+            recommendation = 'pass';
+            message = `Excellent contrast ratio: ${ratio.toFixed(2)}:1 (meets WCAG AAA)`;
+        }
+        else if (meetsAA) {
+            recommendation = 'warning';
+            message = `Good contrast ratio: ${ratio.toFixed(2)}:1 (meets WCAG AA, consider AAA for better accessibility)`;
+        }
+        else {
+            recommendation = 'fail';
+            message = `Poor contrast ratio: ${ratio.toFixed(2)}:1 (fails WCAG AA, minimum required: ${WCAG_STANDARDS.AA_NORMAL}:1)`;
+        }
+        return {
+            ratio,
+            meetsAA,
+            meetsAAA,
+            recommendation,
+            message,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+}
+export function checkDocsColors(colors, background, navigation) {
+    var _a;
+    const lightBackground = background.lightHex;
+    const darkBackground = background.darkHex;
+    const primaryContrast = colors.primary
+        ? checkColorContrast(colors.primary, lightBackground)
+        : null;
+    const lightContrast = colors.light ? checkColorContrast(colors.light, darkBackground) : null;
+    const darkContrast = colors.dark ? checkColorContrast(colors.dark, darkBackground) : null;
+    const darkOnLightContrast = colors.dark ? checkColorContrast(colors.dark, lightBackground) : null;
+    const anchorResults = [];
+    if ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.global) === null || _a === void 0 ? void 0 : _a.anchors) {
+        for (const anchor of navigation.global.anchors) {
+            if (anchor.color) {
+                const lightContrast = anchor.color.light
+                    ? checkColorContrast(anchor.color.light, lightBackground)
+                    : null;
+                const darkContrast = anchor.color.dark
+                    ? checkColorContrast(anchor.color.dark, darkBackground)
+                    : null;
+                anchorResults.push({
+                    name: anchor.anchor,
+                    lightContrast,
+                    darkContrast,
+                });
+            }
+        }
+    }
+    const results = [
+        primaryContrast,
+        lightContrast,
+        darkContrast,
+        darkOnLightContrast,
+        ...anchorResults.flatMap((anchor) => [anchor.lightContrast, anchor.darkContrast]),
+    ].filter(Boolean);
+    const hasFailure = results.some((result) => result.recommendation === 'fail');
+    const hasWarning = results.some((result) => result.recommendation === 'warning');
+    let overallScore;
+    if (hasFailure) {
+        overallScore = 'fail';
+    }
+    else if (hasWarning) {
+        overallScore = 'warning';
+    }
+    else {
+        overallScore = 'pass';
+    }
+    return {
+        primaryContrast,
+        lightContrast,
+        darkContrast,
+        darkOnLightContrast,
+        anchorResults,
+        overallScore,
+    };
+}

package/bin/accessibilityCheck.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getBackgroundColors } from '@mintlify/common';
+import { getConfigObj, getConfigPath } from '@mintlify/prebuild';
+import { addLog, ErrorLog, WarningLog } from '@mintlify/previewing';
+import { Text } from 'ink';
+import { checkDocsColors } from './accessibility.js';
+import { CMD_EXEC_PATH } from './constants.js';
+import { checkForDocsJson } from './helpers.js';
+export const accessibilityCheck = () => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        yield checkForDocsJson();
+        const docsConfigPath = yield getConfigPath(CMD_EXEC_PATH, 'docs');
+        const mintConfigPath = yield getConfigPath(CMD_EXEC_PATH, 'mint');
+        if (!docsConfigPath && !mintConfigPath) {
+            addLog(_jsx(ErrorLog, { message: "No configuration file found. Please run this command from a directory with a mint.json or docs.json file." }));
+            return 1;
+        }
+        const configType = docsConfigPath ? 'docs' : 'mint';
+        const config = yield getConfigObj(CMD_EXEC_PATH, configType);
+        if (!config.colors) {
+            addLog(_jsx(WarningLog, { message: "No colors section found in configuration file" }));
+            return 0;
+        }
+        const { colors, navigation } = config;
+        const { lightHex, darkHex } = getBackgroundColors(config);
+        const results = checkDocsColors(colors, { lightHex, darkHex }, navigation);
+        const displayContrastResult = (result, label, prefix = '') => {
+            if (!result)
+                return;
+            const { recommendation, message } = result;
+            const icon = recommendation === 'pass' ? 'PASS' : recommendation === 'warning' ? 'WARN' : 'FAIL';
+            const color = recommendation === 'pass' ? 'green' : recommendation === 'warning' ? 'yellow' : 'red';
+            addLog(_jsxs(Text, { children: [_jsxs(Text, { bold: prefix === '', children: [prefix, label, ":", ' '] }), _jsxs(Text, { color: color, children: [icon, " ", message] })] }));
+        };
+        addLog(_jsx(Text, { bold: true, color: "cyan", children: "Checking color accessibility..." }));
+        addLog(_jsx(Text, {}));
+        displayContrastResult(results.primaryContrast, `Primary Color (${colors.primary}) vs Light Background`);
+        displayContrastResult(results.lightContrast, `Light Color (${colors.light}) vs Dark Background`);
+        displayContrastResult(results.darkContrast, `Dark Color (${colors.dark}) vs Dark Background`);
+        displayContrastResult(results.darkOnLightContrast, `Dark Color (${colors.dark}) vs Light Background`);
+        const anchorsWithResults = results.anchorResults.filter((anchor) => anchor.lightContrast || anchor.darkContrast);
+        if (anchorsWithResults.length > 0) {
+            addLog(_jsx(Text, {}));
+            addLog(_jsx(Text, { bold: true, color: "cyan", children: "Navigation Anchors:" }));
+            for (const anchor of anchorsWithResults) {
+                addLog(_jsxs(Text, { bold: true, children: [" ", anchor.name, ":"] }));
+                displayContrastResult(anchor.lightContrast, 'Light variant vs Light Background', '    ');
+                displayContrastResult(anchor.darkContrast, 'Dark variant vs Dark Background', '    ');
+            }
+        }
+        addLog(_jsx(Text, {}));
+        const overallIcon = results.overallScore === 'pass'
+            ? 'PASS'
+            : results.overallScore === 'warning'
+                ? 'WARN'
+                : 'FAIL';
+        const overallColor = results.overallScore === 'pass'
+            ? 'green'
+            : results.overallScore === 'warning'
+                ? 'yellow'
+                : 'red';
+        const overallMessage = results.overallScore === 'pass'
+            ? 'All colors meet accessibility standards!'
+            : results.overallScore === 'warning'
+                ? 'Some colors could be improved for better accessibility'
+                : 'Some colors fail accessibility standards and should be updated';
+        addLog(_jsx(Text, { children: _jsxs(Text, { bold: true, color: overallColor, children: ["Overall Assessment: ", overallIcon, " ", overallMessage] }) }));
+        return results.overallScore === 'fail' ? 1 : 0;
+    }
+    catch (error) {
+        addLog(_jsx(ErrorLog, { message: `Accessibility check failed: ${error instanceof Error ? error.message : 'Unknown error'}` }));
+        return 1;
+    }
+});

package/bin/cli.js

@@ -15,6 +15,7 @@ import { render, Text } from 'ink';
 import path from 'path';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
+import { accessibilityCheck } from './accessibilityCheck.js';
 import { checkPort, checkForMintJson, checkNodeVersion, upgradeConfig, checkForDocsJson, getVersions, suppressConsoleWarnings, terminate, readLocalOpenApiFile, } from './helpers.js';
 import { migrateMdx } from './migrateMdx.js';
 import { update } from './update.js';
@@ -171,6 +172,10 @@ export const cli = ({ packageName = 'mint' }) => {
         .command('migrate-mdx', 'migrate MDX OpenAPI endpoint pages to x-mint extensions and docs.json', () => undefined, () => __awaiter(void 0, void 0, void 0, function* () {
         yield migrateMdx();
         yield terminate(0);
+    }))
+        .command('accessibility-check', false, () => undefined, () => __awaiter(void 0, void 0, void 0, function* () {
+        const terminateCode = yield accessibilityCheck();
+        yield terminate(terminateCode);
     }))
         .command(['version', 'v'], 'display the current version of the CLI and client', () => undefined, () => __awaiter(void 0, void 0, void 0, function* () {
         const { cli, client } = getVersions();