driftdetect-detectors 0.1.0

package/dist/styling/typography.js

@@ -0,0 +1,1004 @@
+/**
+ * Typography Detector - Typography scale detection
+ *
+ * Detects typography scale patterns including:
+ * - CSS custom properties for typography (--font-size-*, --line-height-*, --font-weight-*)
+ * - Theme typography objects (theme.typography.*, theme.fontSizes.*, etc.)
+ * - Tailwind typography classes (text-sm, text-lg, font-bold, leading-tight, etc.)
+ * - Typography scale values (12px, 14px, 16px, 18px, 20px, 24px, etc.)
+ *
+ * Flags hardcoded typography values:
+ * - Arbitrary font sizes (13px, 17px, etc.)
+ * - Arbitrary line heights (1.3, 1.7, etc.)
+ * - Arbitrary font weights (450, 550, etc.)
+ * - Hardcoded font families
+ *
+ * @requirements 9.4 - THE Styling_Detector SHALL detect typography scale adherence
+ */
+import { RegexDetector } from '../base/index.js';
+// ============================================================================
+// Constants
+// ============================================================================
+/**
+ * Standard typography scale font sizes (in px)
+ */
+export const TYPOGRAPHY_SCALE_PX = [10, 11, 12, 13, 14, 16, 18, 20, 24, 28, 30, 32, 36, 40, 48, 56, 64, 72, 80, 96];
+/**
+ * Standard typography scale font sizes (in rem, based on 16px base)
+ */
+export const TYPOGRAPHY_SCALE_REM = [0.625, 0.6875, 0.75, 0.8125, 0.875, 1, 1.125, 1.25, 1.5, 1.75, 1.875, 2, 2.25, 2.5, 3, 3.5, 4, 4.5, 5, 6];
+/**
+ * Standard line height values
+ */
+export const LINE_HEIGHT_SCALE = [1, 1.25, 1.375, 1.5, 1.625, 1.75, 2];
+/**
+ * Standard font weight values
+ */
+export const FONT_WEIGHT_SCALE = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+/**
+ * Regex pattern for CSS custom properties for typography
+ */
+export const CSS_TYPOGRAPHY_PROPERTY_PATTERN = /var\(\s*--(?:font-size|fs|text|line-height|lh|font-weight|fw|font-family|ff|typography|type)[-_]?([a-zA-Z0-9_-]*)\s*(?:,\s*[^)]+)?\)/g;
+/**
+ * Regex patterns for theme typography object usage
+ */
+export const THEME_TYPOGRAPHY_PATTERNS = [
+    // theme.typography.*, theme.fontSizes.*, theme.lineHeights.*, theme.fontWeights.*
+    /theme\.(?:typography|fontSizes?|lineHeights?|fontWeights?|fonts?)\.([a-zA-Z0-9_.[\]]+)/g,
+    // ${theme.typography.*} in template literals
+    /\$\{theme\.(?:typography|fontSizes?|lineHeights?|fontWeights?|fonts?)\.([a-zA-Z0-9_.[\]]+)\}/g,
+    // props.theme.typography.*
+    /props\.theme\.(?:typography|fontSizes?|lineHeights?|fontWeights?|fonts?)\.([a-zA-Z0-9_.[\]]+)/g,
+    // typography.*, fontSizes.* (standalone typography object)
+    /\b(?:typography|fontSizes?|lineHeights?|fontWeights?)\.([a-zA-Z0-9_.[\]]+)/g,
+];
+/**
+ * Tailwind typography class patterns
+ */
+export const TAILWIND_TYPOGRAPHY_PATTERNS = [
+    // Font size classes: text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, etc.
+    /\btext-(?:xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)\b/g,
+    // Font weight classes: font-thin, font-light, font-normal, font-medium, font-semibold, font-bold, font-extrabold, font-black
+    /\bfont-(?:thin|extralight|light|normal|medium|semibold|bold|extrabold|black)\b/g,
+    // Line height classes: leading-none, leading-tight, leading-snug, leading-normal, leading-relaxed, leading-loose
+    /\bleading-(?:none|tight|snug|normal|relaxed|loose|\d+)\b/g,
+    // Letter spacing classes: tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest
+    /\btracking-(?:tighter|tight|normal|wide|wider|widest)\b/g,
+    // Font family classes: font-sans, font-serif, font-mono
+    /\bfont-(?:sans|serif|mono)\b/g,
+];
+/**
+ * Tailwind arbitrary typography value patterns
+ */
+export const TAILWIND_ARBITRARY_TYPOGRAPHY_PATTERN = /\b(?:text|font|leading|tracking)-\[([^\]]+)\]/g;
+/**
+ * Hardcoded font size patterns
+ */
+export const HARDCODED_FONT_SIZE_PATTERNS = {
+    // Pixel font sizes: 13px, 17px, etc.
+    px: /(?<![a-zA-Z0-9_-])(\d+)px\b/g,
+    // Rem font sizes: 0.9rem, 1.1rem, etc.
+    rem: /(?<![a-zA-Z0-9_-])(\d+(?:\.\d+)?)rem\b/g,
+    // Em font sizes: 0.9em, 1.1em, etc.
+    em: /(?<![a-zA-Z0-9_-])(\d+(?:\.\d+)?)em\b/g,
+};
+/**
+ * Hardcoded line height pattern (unitless values like 1.3, 1.7)
+ */
+export const HARDCODED_LINE_HEIGHT_PATTERN = /line-height\s*:\s*(\d+(?:\.\d+)?)\s*[;}\n]/g;
+/**
+ * Hardcoded font weight pattern (non-standard values like 450, 550)
+ */
+export const HARDCODED_FONT_WEIGHT_PATTERN = /font-weight\s*:\s*(\d+)\s*[;}\n]/g;
+/**
+ * Hardcoded font family pattern
+ */
+export const HARDCODED_FONT_FAMILY_PATTERN = /font-family\s*:\s*(['"]?)([^;}\n'"]+)\1\s*[;}\n]/g;
+/**
+ * CSS properties that commonly use typography values
+ */
+export const TYPOGRAPHY_PROPERTIES = [
+    'font-size',
+    'line-height',
+    'font-weight',
+    'font-family',
+    'letter-spacing',
+    'text-transform',
+];
+/**
+ * Allowed hardcoded typography values (common exceptions)
+ */
+export const ALLOWED_TYPOGRAPHY_VALUES = new Set([
+    'inherit',
+    'initial',
+    'unset',
+    'normal',
+    'none',
+    '0',
+    '100%',
+]);
+/**
+ * Allowed font families (system fonts and common stacks)
+ */
+export const ALLOWED_FONT_FAMILIES = new Set([
+    'inherit',
+    'initial',
+    'unset',
+    'system-ui',
+    '-apple-system',
+    'BlinkMacSystemFont',
+    'sans-serif',
+    'serif',
+    'monospace',
+    'cursive',
+    'fantasy',
+]);
+/**
+ * File patterns to exclude from hardcoded typography detection
+ */
+export const EXCLUDED_FILE_PATTERNS = [
+    /\.test\.[jt]sx?$/,
+    /\.spec\.[jt]sx?$/,
+    /\.stories\.[jt]sx?$/,
+    /design-tokens?\//,
+    /tokens?\//,
+    /theme\//,
+    /\.config\.[jt]s$/,
+    /tailwind\.config/,
+    /typography\.[jt]s$/,
+    /fonts?\.[jt]s$/,
+];
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Check if a file should be excluded from hardcoded typography detection
+ */
+export function shouldExcludeFile(filePath) {
+    return EXCLUDED_FILE_PATTERNS.some(pattern => pattern.test(filePath));
+}
+/**
+ * Check if a value is in the allowed typography values list
+ */
+export function isAllowedTypographyValue(value) {
+    return ALLOWED_TYPOGRAPHY_VALUES.has(value.toLowerCase().trim());
+}
+/**
+ * Check if a font family is allowed
+ */
+export function isAllowedFontFamily(value) {
+    const normalized = value.toLowerCase().trim().replace(/['"]/g, '');
+    // Check if any part of the font stack is a system font
+    const parts = normalized.split(',').map(p => p.trim());
+    return parts.some(part => ALLOWED_FONT_FAMILIES.has(part));
+}
+/**
+ * Check if a font size is on the typography scale
+ */
+export function isOnTypographyScale(value, unit) {
+    if (unit === 'px') {
+        return TYPOGRAPHY_SCALE_PX.includes(value);
+    }
+    // For rem/em, check with some tolerance for floating point
+    return TYPOGRAPHY_SCALE_REM.some(v => Math.abs(v - value) < 0.001);
+}
+/**
+ * Check if a line height is on the standard scale
+ */
+export function isOnLineHeightScale(value) {
+    return LINE_HEIGHT_SCALE.some(v => Math.abs(v - value) < 0.001);
+}
+/**
+ * Check if a font weight is on the standard scale
+ */
+export function isOnFontWeightScale(value) {
+    return FONT_WEIGHT_SCALE.includes(value);
+}
+/**
+ * Find the nearest font size on the typography scale
+ */
+export function findNearestFontSize(value, unit) {
+    const scale = unit === 'px' ? TYPOGRAPHY_SCALE_PX : TYPOGRAPHY_SCALE_REM;
+    let nearest = scale[0];
+    let minDiff = Math.abs(value - nearest);
+    for (const scaleValue of scale) {
+        const diff = Math.abs(value - scaleValue);
+        if (diff < minDiff) {
+            minDiff = diff;
+            nearest = scaleValue;
+        }
+    }
+    return nearest;
+}
+/**
+ * Find the nearest line height on the scale
+ */
+export function findNearestLineHeight(value) {
+    let nearest = LINE_HEIGHT_SCALE[0];
+    let minDiff = Math.abs(value - nearest);
+    for (const scaleValue of LINE_HEIGHT_SCALE) {
+        const diff = Math.abs(value - scaleValue);
+        if (diff < minDiff) {
+            minDiff = diff;
+            nearest = scaleValue;
+        }
+    }
+    return nearest;
+}
+/**
+ * Find the nearest font weight on the scale
+ */
+export function findNearestFontWeight(value) {
+    let nearest = FONT_WEIGHT_SCALE[0];
+    let minDiff = Math.abs(value - nearest);
+    for (const scaleValue of FONT_WEIGHT_SCALE) {
+        const diff = Math.abs(value - scaleValue);
+        if (diff < minDiff) {
+            minDiff = diff;
+            nearest = scaleValue;
+        }
+    }
+    return nearest;
+}
+/**
+ * Check if a position is inside a comment
+ */
+function isInsideComment(content, index) {
+    const beforeIndex = content.slice(0, index);
+    // Check for single-line comment
+    const lastNewline = beforeIndex.lastIndexOf('\n');
+    const currentLine = beforeIndex.slice(lastNewline + 1);
+    if (currentLine.includes('//')) {
+        const commentStart = currentLine.indexOf('//');
+        const positionInLine = index - lastNewline - 1;
+        if (positionInLine > commentStart) {
+            return true;
+        }
+    }
+    // Check for multi-line comment
+    const lastBlockCommentStart = beforeIndex.lastIndexOf('/*');
+    const lastBlockCommentEnd = beforeIndex.lastIndexOf('*/');
+    if (lastBlockCommentStart > lastBlockCommentEnd) {
+        return true;
+    }
+    return false;
+}
+/**
+ * Extract CSS property name from a line
+ */
+function extractCSSProperty(line) {
+    // Match CSS property: property-name: value
+    const cssMatch = line.match(/([a-zA-Z-]+)\s*:/);
+    if (cssMatch && cssMatch[1]) {
+        return cssMatch[1];
+    }
+    // Match JS object property: propertyName: value
+    const jsMatch = line.match(/([a-zA-Z]+)\s*:/);
+    if (jsMatch && jsMatch[1]) {
+        // Convert camelCase to kebab-case
+        return jsMatch[1].replace(/([A-Z])/g, '-$1').toLowerCase();
+    }
+    return undefined;
+}
+/**
+ * Detect CSS custom property usage for typography
+ */
+export function detectCSSTypographyProperties(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(CSS_TYPOGRAPHY_PROPERTY_PATTERN.source, CSS_TYPOGRAPHY_PROPERTY_PATTERN.flags);
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const beforeMatch = content.slice(0, match.index);
+        const lineNumber = beforeMatch.split('\n').length;
+        const lastNewline = beforeMatch.lastIndexOf('\n');
+        const column = match.index - lastNewline;
+        results.push({
+            type: 'css-typography-property',
+            file,
+            line: lineNumber,
+            column,
+            matchedText: match[0],
+            typographyValue: match[1] || '',
+            context: lines[lineNumber - 1] || '',
+        });
+    }
+    return results;
+}
+/**
+ * Detect theme typography object usage
+ */
+export function detectThemeTypography(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    for (const pattern of THEME_TYPOGRAPHY_PATTERNS) {
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const beforeMatch = content.slice(0, match.index);
+            const lineNumber = beforeMatch.split('\n').length;
+            const lastNewline = beforeMatch.lastIndexOf('\n');
+            const column = match.index - lastNewline;
+            results.push({
+                type: 'theme-typography',
+                file,
+                line: lineNumber,
+                column,
+                matchedText: match[0],
+                typographyValue: match[1] || match[0],
+                context: lines[lineNumber - 1] || '',
+            });
+        }
+    }
+    return results;
+}
+/**
+ * Detect Tailwind typography classes
+ */
+export function detectTailwindTypography(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    for (const pattern of TAILWIND_TYPOGRAPHY_PATTERNS) {
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const beforeMatch = content.slice(0, match.index);
+            const lineNumber = beforeMatch.split('\n').length;
+            const lastNewline = beforeMatch.lastIndexOf('\n');
+            const column = match.index - lastNewline;
+            results.push({
+                type: 'tailwind-typography',
+                file,
+                line: lineNumber,
+                column,
+                matchedText: match[0],
+                typographyValue: match[0],
+                context: lines[lineNumber - 1] || '',
+            });
+        }
+    }
+    return results;
+}
+/**
+ * Detect Tailwind arbitrary typography values
+ */
+export function detectTailwindArbitraryTypography(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(TAILWIND_ARBITRARY_TYPOGRAPHY_PATTERN.source, TAILWIND_ARBITRARY_TYPOGRAPHY_PATTERN.flags);
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const value = match[1] || '';
+        // Skip allowed values
+        if (isAllowedTypographyValue(value)) {
+            continue;
+        }
+        const beforeMatch = content.slice(0, match.index);
+        const lineNumber = beforeMatch.split('\n').length;
+        const lastNewline = beforeMatch.lastIndexOf('\n');
+        const column = match.index - lastNewline;
+        const endColumn = column + match[0].length;
+        // Determine the type based on the prefix
+        const prefix = match[0].split('-[')[0] || '';
+        let type = 'arbitrary-font-size';
+        if (prefix === 'font') {
+            type = 'arbitrary-font-weight';
+        }
+        else if (prefix === 'leading') {
+            type = 'arbitrary-line-height';
+        }
+        results.push({
+            type,
+            file,
+            line: lineNumber,
+            column,
+            endLine: lineNumber,
+            endColumn,
+            value: match[0],
+            suggestedToken: suggestTypographyToken(value, type),
+            lineContent: lines[lineNumber - 1] || '',
+        });
+    }
+    return results;
+}
+/**
+ * Detect arbitrary font size values
+ */
+export function detectArbitraryFontSizes(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    // Check each font size pattern type
+    const fontSizePatterns = [
+        { pattern: HARDCODED_FONT_SIZE_PATTERNS.px, unit: 'px' },
+        { pattern: HARDCODED_FONT_SIZE_PATTERNS.rem, unit: 'rem' },
+        { pattern: HARDCODED_FONT_SIZE_PATTERNS.em, unit: 'em' },
+    ];
+    for (const { pattern, unit } of fontSizePatterns) {
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const numValue = parseFloat(match[1] || '0');
+            const value = `${numValue}${unit}`;
+            // Skip allowed values
+            if (isAllowedTypographyValue(value)) {
+                continue;
+            }
+            const beforeMatch = content.slice(0, match.index);
+            const lineNumber = beforeMatch.split('\n').length;
+            const lineContent = lines[lineNumber - 1] || '';
+            // Only flag if this is a font-size property
+            const property = extractCSSProperty(lineContent);
+            if (property && !['font-size', 'font'].includes(property)) {
+                continue;
+            }
+            // Skip CSS custom property definitions
+            if (/^\s*--[a-zA-Z0-9_-]+\s*:/.test(lineContent)) {
+                continue;
+            }
+            // Skip if inside a comment
+            if (isInsideComment(content, match.index)) {
+                continue;
+            }
+            // Check if value is on the typography scale
+            if (isOnTypographyScale(numValue, unit)) {
+                continue;
+            }
+            const lastNewline = beforeMatch.lastIndexOf('\n');
+            const column = match.index - lastNewline;
+            const endColumn = column + value.length;
+            const hardcodedInfo = {
+                type: 'arbitrary-font-size',
+                file,
+                line: lineNumber,
+                column,
+                endLine: lineNumber,
+                endColumn,
+                value,
+                suggestedToken: suggestFontSizeToken(numValue, unit),
+                lineContent,
+            };
+            if (property !== undefined) {
+                hardcodedInfo.property = property;
+            }
+            results.push(hardcodedInfo);
+        }
+    }
+    return results;
+}
+/**
+ * Detect arbitrary line height values
+ */
+export function detectArbitraryLineHeights(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(HARDCODED_LINE_HEIGHT_PATTERN.source, HARDCODED_LINE_HEIGHT_PATTERN.flags);
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const numValue = parseFloat(match[1] || '0');
+        // Skip allowed values
+        if (isAllowedTypographyValue(match[1] || '')) {
+            continue;
+        }
+        const beforeMatch = content.slice(0, match.index);
+        const lineNumber = beforeMatch.split('\n').length;
+        const lineContent = lines[lineNumber - 1] || '';
+        // Skip CSS custom property definitions
+        if (/^\s*--[a-zA-Z0-9_-]+\s*:/.test(lineContent)) {
+            continue;
+        }
+        // Skip if inside a comment
+        if (isInsideComment(content, match.index)) {
+            continue;
+        }
+        // Check if value is on the line height scale
+        if (isOnLineHeightScale(numValue)) {
+            continue;
+        }
+        const lastNewline = beforeMatch.lastIndexOf('\n');
+        const valueStart = lineContent.indexOf(match[1] || '');
+        const column = valueStart >= 0 ? valueStart + 1 : match.index - lastNewline;
+        const endColumn = column + (match[1] || '').length;
+        results.push({
+            type: 'arbitrary-line-height',
+            file,
+            line: lineNumber,
+            column,
+            endLine: lineNumber,
+            endColumn,
+            value: match[1] || '',
+            property: 'line-height',
+            suggestedToken: suggestLineHeightToken(numValue),
+            lineContent,
+        });
+    }
+    return results;
+}
+/**
+ * Detect arbitrary font weight values
+ */
+export function detectArbitraryFontWeights(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(HARDCODED_FONT_WEIGHT_PATTERN.source, HARDCODED_FONT_WEIGHT_PATTERN.flags);
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const numValue = parseInt(match[1] || '0', 10);
+        // Skip allowed values
+        if (isAllowedTypographyValue(match[1] || '')) {
+            continue;
+        }
+        const beforeMatch = content.slice(0, match.index);
+        const lineNumber = beforeMatch.split('\n').length;
+        const lineContent = lines[lineNumber - 1] || '';
+        // Skip CSS custom property definitions
+        if (/^\s*--[a-zA-Z0-9_-]+\s*:/.test(lineContent)) {
+            continue;
+        }
+        // Skip if inside a comment
+        if (isInsideComment(content, match.index)) {
+            continue;
+        }
+        // Check if value is on the font weight scale
+        if (isOnFontWeightScale(numValue)) {
+            continue;
+        }
+        const lastNewline = beforeMatch.lastIndexOf('\n');
+        const valueStart = lineContent.indexOf(match[1] || '');
+        const column = valueStart >= 0 ? valueStart + 1 : match.index - lastNewline;
+        const endColumn = column + (match[1] || '').length;
+        results.push({
+            type: 'arbitrary-font-weight',
+            file,
+            line: lineNumber,
+            column,
+            endLine: lineNumber,
+            endColumn,
+            value: match[1] || '',
+            property: 'font-weight',
+            suggestedToken: suggestFontWeightToken(numValue),
+            lineContent,
+        });
+    }
+    return results;
+}
+/**
+ * Detect hardcoded font family values
+ */
+export function detectHardcodedFontFamilies(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(HARDCODED_FONT_FAMILY_PATTERN.source, HARDCODED_FONT_FAMILY_PATTERN.flags);
+    let match;
+    while ((match = regex.exec(content)) !== null) {
+        const fontFamily = match[2] || '';
+        // Skip allowed font families
+        if (isAllowedFontFamily(fontFamily)) {
+            continue;
+        }
+        const beforeMatch = content.slice(0, match.index);
+        const lineNumber = beforeMatch.split('\n').length;
+        const lineContent = lines[lineNumber - 1] || '';
+        // Skip CSS custom property definitions
+        if (/^\s*--[a-zA-Z0-9_-]+\s*:/.test(lineContent)) {
+            continue;
+        }
+        // Skip if inside a comment
+        if (isInsideComment(content, match.index)) {
+            continue;
+        }
+        const lastNewline = beforeMatch.lastIndexOf('\n');
+        const valueStart = lineContent.indexOf(fontFamily);
+        const column = valueStart >= 0 ? valueStart + 1 : match.index - lastNewline;
+        const endColumn = column + fontFamily.length;
+        results.push({
+            type: 'hardcoded-font-family',
+            file,
+            line: lineNumber,
+            column,
+            endLine: lineNumber,
+            endColumn,
+            value: fontFamily,
+            property: 'font-family',
+            suggestedToken: 'Use a font token from your design system (e.g., --font-family-sans, theme.fonts.body)',
+            lineContent,
+        });
+    }
+    return results;
+}
+/**
+ * Suggest a typography token for a hardcoded value
+ */
+export function suggestTypographyToken(value, type) {
+    switch (type) {
+        case 'arbitrary-font-size': {
+            const match = value.match(/^(\d+(?:\.\d+)?)(px|rem|em)?$/);
+            if (match) {
+                const num = parseFloat(match[1] || '0');
+                const unit = (match[2] || 'px');
+                return suggestFontSizeToken(num, unit);
+            }
+            return 'Use a font size token (e.g., text-base, --font-size-md)';
+        }
+        case 'arbitrary-line-height': {
+            const num = parseFloat(value);
+            if (!isNaN(num)) {
+                return suggestLineHeightToken(num);
+            }
+            return 'Use a line height token (e.g., leading-normal, --line-height-base)';
+        }
+        case 'arbitrary-font-weight': {
+            const num = parseInt(value, 10);
+            if (!isNaN(num)) {
+                return suggestFontWeightToken(num);
+            }
+            return 'Use a font weight token (e.g., font-medium, --font-weight-medium)';
+        }
+        case 'hardcoded-font-family':
+            return 'Use a font family token (e.g., font-sans, --font-family-sans)';
+        default:
+            return 'Use a typography token from your design system';
+    }
+}
+/**
+ * Suggest a font size token
+ */
+function suggestFontSizeToken(value, unit) {
+    const nearest = findNearestFontSize(value, unit);
+    const tailwindSizes = {
+        10: 'text-[10px]',
+        12: 'text-xs',
+        14: 'text-sm',
+        16: 'text-base',
+        18: 'text-lg',
+        20: 'text-xl',
+        24: 'text-2xl',
+        30: 'text-3xl',
+        36: 'text-4xl',
+        48: 'text-5xl',
+        64: 'text-6xl',
+    };
+    if (unit === 'px' && tailwindSizes[nearest]) {
+        return `${tailwindSizes[nearest]} or --font-size-${nearest}`;
+    }
+    return `${nearest}${unit} or use --font-size-* token`;
+}
+/**
+ * Suggest a line height token
+ */
+function suggestLineHeightToken(value) {
+    const nearest = findNearestLineHeight(value);
+    const tailwindLineHeights = {
+        1: 'leading-none',
+        1.25: 'leading-tight',
+        1.375: 'leading-snug',
+        1.5: 'leading-normal',
+        1.625: 'leading-relaxed',
+        1.75: 'leading-relaxed',
+        2: 'leading-loose',
+    };
+    if (tailwindLineHeights[nearest]) {
+        return `${tailwindLineHeights[nearest]} or --line-height-${nearest}`;
+    }
+    return `${nearest} or use --line-height-* token`;
+}
+/**
+ * Suggest a font weight token
+ */
+function suggestFontWeightToken(value) {
+    const nearest = findNearestFontWeight(value);
+    const tailwindWeights = {
+        100: 'font-thin',
+        200: 'font-extralight',
+        300: 'font-light',
+        400: 'font-normal',
+        500: 'font-medium',
+        600: 'font-semibold',
+        700: 'font-bold',
+        800: 'font-extrabold',
+        900: 'font-black',
+    };
+    if (tailwindWeights[nearest]) {
+        return `${tailwindWeights[nearest]} or --font-weight-${nearest}`;
+    }
+    return `${nearest} or use --font-weight-* token`;
+}
+/**
+ * Analyze typography patterns in a file
+ */
+export function analyzeTypography(content, file) {
+    // Skip excluded files for hardcoded typography detection
+    const skipHardcodedDetection = shouldExcludeFile(file);
+    // Detect typography patterns
+    const cssTypographyProperties = detectCSSTypographyProperties(content, file);
+    const themeTypography = detectThemeTypography(content, file);
+    const tailwindTypography = detectTailwindTypography(content, file);
+    const typographyPatterns = [
+        ...cssTypographyProperties,
+        ...themeTypography,
+        ...tailwindTypography,
+    ];
+    // Detect hardcoded values (unless file is excluded)
+    let hardcodedValues = [];
+    if (!skipHardcodedDetection) {
+        const tailwindArbitrary = detectTailwindArbitraryTypography(content, file);
+        const arbitraryFontSizes = detectArbitraryFontSizes(content, file);
+        const arbitraryLineHeights = detectArbitraryLineHeights(content, file);
+        const arbitraryFontWeights = detectArbitraryFontWeights(content, file);
+        const hardcodedFontFamilies = detectHardcodedFontFamilies(content, file);
+        hardcodedValues = [
+            ...tailwindArbitrary,
+            ...arbitraryFontSizes,
+            ...arbitraryLineHeights,
+            ...arbitraryFontWeights,
+            ...hardcodedFontFamilies,
+        ];
+    }
+    // Calculate confidence
+    const hasTypographyPatterns = typographyPatterns.length > 0;
+    const hasHardcodedValues = hardcodedValues.length > 0;
+    let typographyTokenConfidence = 0;
+    if (hasTypographyPatterns && !hasHardcodedValues) {
+        typographyTokenConfidence = 1.0;
+    }
+    else if (hasTypographyPatterns && hasHardcodedValues) {
+        const ratio = typographyPatterns.length / (typographyPatterns.length + hardcodedValues.length);
+        typographyTokenConfidence = ratio;
+    }
+    else if (!hasTypographyPatterns && hasHardcodedValues) {
+        typographyTokenConfidence = 0;
+    }
+    else {
+        typographyTokenConfidence = 0.5; // No typography styling detected
+    }
+    return {
+        typographyPatterns,
+        hardcodedValues,
+        usesCSSTypographyProperties: cssTypographyProperties.length > 0,
+        usesThemeTypography: themeTypography.length > 0,
+        usesTailwindTypography: tailwindTypography.length > 0,
+        typographyTokenConfidence,
+    };
+}
+// ============================================================================
+// Typography Detector Class
+// ============================================================================
+/**
+ * Detector for typography scale adherence patterns
+ *
+ * Identifies typography token usage and flags hardcoded typography values
+ * that should use design tokens instead.
+ *
+ * @requirements 9.4 - THE Styling_Detector SHALL detect typography scale adherence
+ */
+export class TypographyDetector extends RegexDetector {
+    id = 'styling/typography';
+    category = 'styling';
+    subcategory = 'typography';
+    name = 'Typography Detector';
+    description = 'Detects typography scale adherence and flags hardcoded typography values';
+    supportedLanguages = ['typescript', 'javascript', 'css'];
+    /**
+     * Detect typography patterns and violations
+     */
+    async detect(context) {
+        const patterns = [];
+        const violations = [];
+        // Analyze the file
+        const analysis = analyzeTypography(context.content, context.file);
+        // Create pattern matches for typography patterns
+        if (analysis.usesCSSTypographyProperties) {
+            patterns.push(this.createCSSTypographyPropertyPattern(context.file, analysis));
+        }
+        if (analysis.usesThemeTypography) {
+            patterns.push(this.createThemeTypographyPattern(context.file, analysis));
+        }
+        if (analysis.usesTailwindTypography) {
+            patterns.push(this.createTailwindTypographyPattern(context.file, analysis));
+        }
+        // Create violations for hardcoded values
+        for (const hardcoded of analysis.hardcodedValues) {
+            violations.push(this.createHardcodedTypographyViolation(hardcoded));
+        }
+        return this.createResult(patterns, violations, analysis.typographyTokenConfidence);
+    }
+    /**
+     * Create a pattern match for CSS typography property usage
+     */
+    createCSSTypographyPropertyPattern(file, analysis) {
+        const cssPatterns = analysis.typographyPatterns.filter(p => p.type === 'css-typography-property');
+        const firstPattern = cssPatterns[0];
+        return {
+            patternId: `${this.id}/css-property`,
+            location: {
+                file,
+                line: firstPattern?.line || 1,
+                column: firstPattern?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a pattern match for theme typography usage
+     */
+    createThemeTypographyPattern(file, analysis) {
+        const themePatterns = analysis.typographyPatterns.filter(p => p.type === 'theme-typography');
+        const firstPattern = themePatterns[0];
+        return {
+            patternId: `${this.id}/theme`,
+            location: {
+                file,
+                line: firstPattern?.line || 1,
+                column: firstPattern?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a pattern match for Tailwind typography usage
+     */
+    createTailwindTypographyPattern(file, analysis) {
+        const tailwindPatterns = analysis.typographyPatterns.filter(p => p.type === 'tailwind-typography');
+        const firstPattern = tailwindPatterns[0];
+        return {
+            patternId: `${this.id}/tailwind`,
+            location: {
+                file,
+                line: firstPattern?.line || 1,
+                column: firstPattern?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a violation for a hardcoded typography value
+     */
+    createHardcodedTypographyViolation(hardcoded) {
+        const typeDescriptions = {
+            'arbitrary-font-size': 'arbitrary font size',
+            'arbitrary-line-height': 'arbitrary line height',
+            'arbitrary-font-weight': 'arbitrary font weight',
+            'hardcoded-font-family': 'hardcoded font family',
+        };
+        const typeDescription = typeDescriptions[hardcoded.type] || 'hardcoded typography';
+        const propertyInfo = hardcoded.property ? ` in '${hardcoded.property}'` : '';
+        const violation = {
+            id: `${this.id}-${hardcoded.file}-${hardcoded.line}-${hardcoded.column}`,
+            patternId: this.id,
+            severity: 'warning',
+            file: hardcoded.file,
+            range: {
+                start: { line: hardcoded.line - 1, character: hardcoded.column - 1 },
+                end: { line: hardcoded.endLine - 1, character: hardcoded.endColumn - 1 },
+            },
+            message: `${typeDescription.charAt(0).toUpperCase() + typeDescription.slice(1)} '${hardcoded.value}'${propertyInfo} doesn't follow the typography scale`,
+            explanation: `Using hardcoded typography values instead of design tokens makes it difficult to maintain consistent typography across the application. Use values from your typography scale (Tailwind classes, CSS custom properties, or theme tokens).`,
+            expected: hardcoded.suggestedToken || 'A typography token',
+            actual: hardcoded.value,
+            aiExplainAvailable: true,
+            aiFixAvailable: true,
+            firstSeen: new Date(),
+            occurrences: 1,
+        };
+        const quickFix = this.createQuickFixForHardcodedTypography(hardcoded);
+        if (quickFix !== undefined) {
+            violation.quickFix = quickFix;
+        }
+        return violation;
+    }
+    /**
+     * Create a quick fix for replacing a hardcoded typography value with a token
+     */
+    createQuickFixForHardcodedTypography(hardcoded) {
+        // Only provide quick fix if we have a suggested token
+        if (!hardcoded.suggestedToken) {
+            return undefined;
+        }
+        // Extract the first suggested token (before "or")
+        const suggestedToken = hardcoded.suggestedToken.split(' or ')[0] || hardcoded.suggestedToken;
+        // Determine the replacement based on context
+        let replacement;
+        if (hardcoded.lineContent.includes('var(')) {
+            // Already using CSS custom properties, suggest a different custom property
+            replacement = `var(${suggestedToken.replace(/\./g, '-')})`;
+        }
+        else if (hardcoded.lineContent.includes('${') || hardcoded.lineContent.includes('`')) {
+            // Template literal context (styled-components, emotion)
+            replacement = `\${${suggestedToken}}`;
+        }
+        else {
+            // Default: suggest the token directly
+            replacement = suggestedToken;
+        }
+        return {
+            title: `Replace with typography token: ${suggestedToken}`,
+            kind: 'quickfix',
+            edit: {
+                changes: {
+                    [hardcoded.file]: [
+                        {
+                            range: {
+                                start: { line: hardcoded.line - 1, character: hardcoded.column - 1 },
+                                end: { line: hardcoded.endLine - 1, character: hardcoded.endColumn - 1 },
+                            },
+                            newText: replacement,
+                        },
+                    ],
+                },
+            },
+            isPreferred: true,
+            confidence: 0.7,
+            preview: `Replace '${hardcoded.value}' with '${replacement}'`,
+        };
+    }
+    /**
+     * Generate a quick fix for a violation
+     */
+    generateQuickFix(violation) {
+        // Check if this is a typography violation
+        if (!violation.message.includes('typography') &&
+            !violation.message.includes('font') &&
+            !violation.message.includes('line height')) {
+            return null;
+        }
+        // Extract the value from the message
+        const valueMatch = violation.message.match(/['"]([^'"]+)['"]/);
+        if (!valueMatch || !valueMatch[1]) {
+            return null;
+        }
+        const value = valueMatch[1];
+        let suggestedToken;
+        // Determine the type and suggest replacement
+        if (violation.message.includes('font size')) {
+            const match = value.match(/^(\d+(?:\.\d+)?)(px|rem|em)?$/);
+            if (match) {
+                suggestedToken = suggestTypographyToken(value, 'arbitrary-font-size');
+            }
+            else {
+                return null;
+            }
+        }
+        else if (violation.message.includes('line height')) {
+            suggestedToken = suggestTypographyToken(value, 'arbitrary-line-height');
+        }
+        else if (violation.message.includes('font weight')) {
+            suggestedToken = suggestTypographyToken(value, 'arbitrary-font-weight');
+        }
+        else if (violation.message.includes('font family')) {
+            suggestedToken = suggestTypographyToken(value, 'hardcoded-font-family');
+        }
+        else {
+            return null;
+        }
+        const firstSuggestion = suggestedToken.split(' or ')[0] || suggestedToken;
+        return {
+            title: `Replace with typography token: ${firstSuggestion}`,
+            kind: 'quickfix',
+            edit: {
+                changes: {
+                    [violation.file]: [
+                        {
+                            range: violation.range,
+                            newText: firstSuggestion,
+                        },
+                    ],
+                },
+            },
+            isPreferred: true,
+            confidence: 0.7,
+            preview: `Replace '${value}' with '${firstSuggestion}'`,
+        };
+    }
+}
+// ============================================================================
+// Factory Function
+// ============================================================================
+/**
+ * Create a new TypographyDetector instance
+ */
+export function createTypographyDetector() {
+    return new TypographyDetector();
+}
+//# sourceMappingURL=typography.js.map