driftdetect-detectors 0.1.0

package/dist/styling/design-tokens.js

@@ -0,0 +1,748 @@
+/**
+ * Design Tokens Detector - Token usage detection
+ *
+ * Detects design token usage patterns including:
+ * - Imports from design-tokens/ directory
+ * - CSS custom properties (--token-name)
+ * - Theme object usage (theme.colors, theme.spacing, etc.)
+ * - Token variable usage in styled-components, emotion, etc.
+ *
+ * Flags hardcoded values that should use design tokens:
+ * - Hardcoded colors (hex, rgb, hsl)
+ * - Hardcoded spacing values (px, rem, em)
+ * - Hardcoded font sizes
+ * - Hardcoded border radius
+ *
+ * @requirements 9.1 - THE Styling_Detector SHALL detect design token usage vs hardcoded values
+ */
+import { RegexDetector } from '../base/index.js';
+// ============================================================================
+// Constants
+// ============================================================================
+/**
+ * Regex patterns for detecting design token imports
+ */
+export const DESIGN_TOKEN_IMPORT_PATTERNS = [
+    // Import from design-tokens directory
+    /import\s+(?:\{[^}]+\}|\*\s+as\s+\w+|\w+)\s+from\s+['"](?:@\/|\.\.?\/)*design-tokens(?:\/[^'"]*)?['"]/g,
+    // Import from tokens directory
+    /import\s+(?:\{[^}]+\}|\*\s+as\s+\w+|\w+)\s+from\s+['"](?:@\/|\.\.?\/)*tokens(?:\/[^'"]*)?['"]/g,
+    // Import from theme directory
+    /import\s+(?:\{[^}]+\}|\*\s+as\s+\w+|\w+)\s+from\s+['"](?:@\/|\.\.?\/)*theme(?:\/[^'"]*)?['"]/g,
+    // Import from styles/tokens
+    /import\s+(?:\{[^}]+\}|\*\s+as\s+\w+|\w+)\s+from\s+['"](?:@\/|\.\.?\/)*styles\/tokens(?:\/[^'"]*)?['"]/g,
+];
+/**
+ * Regex pattern for CSS custom properties
+ */
+export const CSS_CUSTOM_PROPERTY_PATTERN = /var\(\s*--([a-zA-Z0-9_-]+)\s*(?:,\s*[^)]+)?\)/g;
+/**
+ * Regex patterns for theme object usage
+ */
+export const THEME_OBJECT_PATTERNS = [
+    // theme.colors.*, theme.spacing.*, etc.
+    /theme\.(?:colors?|spacing|typography|fontSizes?|borderRadius|shadows?|zIndex|breakpoints?)\.[a-zA-Z0-9_.[\]]+/g,
+    // ${theme.colors.*} in template literals
+    /\$\{theme\.(?:colors?|spacing|typography|fontSizes?|borderRadius|shadows?|zIndex|breakpoints?)\.[a-zA-Z0-9_.[\]]+\}/g,
+    // props.theme.* pattern
+    /props\.theme\.(?:colors?|spacing|typography|fontSizes?|borderRadius|shadows?|zIndex|breakpoints?)\.[a-zA-Z0-9_.[\]]+/g,
+];
+/**
+ * Regex patterns for hardcoded color values
+ */
+export const HARDCODED_COLOR_PATTERNS = {
+    // Hex colors: #fff, #ffffff, #ffffffff (with alpha)
+    hex: /#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/g,
+    // RGB colors: rgb(255, 255, 255)
+    rgb: /rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/gi,
+    // RGBA colors: rgba(255, 255, 255, 0.5)
+    rgba: /rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*[\d.]+\s*\)/gi,
+    // HSL colors: hsl(0, 0%, 100%)
+    hsl: /hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\)/gi,
+    // HSLA colors: hsla(0, 0%, 100%, 0.5)
+    hsla: /hsla\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*,\s*[\d.]+\s*\)/gi,
+};
+/**
+ * Regex patterns for hardcoded spacing values
+ */
+export const HARDCODED_SPACING_PATTERNS = {
+    // Pixel values: 10px, 20px (excluding 0px and 1px which are often intentional)
+    px: /(?<![a-zA-Z0-9_-])(?:[2-9]|[1-9]\d+)px\b/g,
+    // Rem values: 1rem, 2rem (excluding common values like 0rem)
+    rem: /(?<![a-zA-Z0-9_-])(?:0?\.\d+|\d+(?:\.\d+)?)rem\b/g,
+    // Em values: 1em, 2em
+    em: /(?<![a-zA-Z0-9_-])(?:0?\.\d+|\d+(?:\.\d+)?)em\b/g,
+};
+/**
+ * CSS properties that commonly use design tokens
+ */
+export const TOKEN_PROPERTIES = [
+    // Color properties
+    'color',
+    'background-color',
+    'background',
+    'border-color',
+    'border',
+    'outline-color',
+    'fill',
+    'stroke',
+    'box-shadow',
+    'text-shadow',
+    // Spacing properties
+    'margin',
+    'margin-top',
+    'margin-right',
+    'margin-bottom',
+    'margin-left',
+    'padding',
+    'padding-top',
+    'padding-right',
+    'padding-bottom',
+    'padding-left',
+    'gap',
+    'row-gap',
+    'column-gap',
+    // Typography properties
+    'font-size',
+    'line-height',
+    'letter-spacing',
+    // Border properties
+    'border-radius',
+    'border-width',
+    // Z-index
+    'z-index',
+];
+/**
+ * Allowed hardcoded values (common exceptions)
+ * Note: Values are stored in lowercase for case-insensitive comparison
+ */
+export const ALLOWED_HARDCODED_VALUES = new Set([
+    '0',
+    '0px',
+    '1px',
+    '100%',
+    'inherit',
+    'initial',
+    'unset',
+    'auto',
+    'none',
+    'transparent',
+    'currentcolor', // lowercase for case-insensitive comparison
+    '#000',
+    '#000000',
+    '#fff',
+    '#ffffff',
+    'black',
+    'white',
+]);
+/**
+ * File patterns to exclude from hardcoded value detection
+ */
+export const EXCLUDED_FILE_PATTERNS = [
+    /\.test\.[jt]sx?$/,
+    /\.spec\.[jt]sx?$/,
+    /\.stories\.[jt]sx?$/,
+    /design-tokens?\//,
+    /tokens?\//,
+    /theme\//,
+    /\.config\.[jt]s$/,
+    /tailwind\.config/,
+];
+// ============================================================================
+// Helper Functions
+// ============================================================================
+/**
+ * Check if a file should be excluded from hardcoded value detection
+ */
+export function shouldExcludeFile(filePath) {
+    return EXCLUDED_FILE_PATTERNS.some(pattern => pattern.test(filePath));
+}
+/**
+ * Check if a value is in the allowed hardcoded values list
+ */
+export function isAllowedHardcodedValue(value) {
+    return ALLOWED_HARDCODED_VALUES.has(value.toLowerCase().trim());
+}
+/**
+ * Detect design token imports in content
+ */
+export function detectTokenImports(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    for (const pattern of DESIGN_TOKEN_IMPORT_PATTERNS) {
+        // Reset regex lastIndex
+        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: 'design-tokens-import',
+                file,
+                line: lineNumber,
+                column,
+                matchedText: match[0],
+                tokenName: extractImportPath(match[0]),
+                context: lines[lineNumber - 1] || '',
+            });
+        }
+    }
+    return results;
+}
+/**
+ * Extract import path from import statement
+ */
+function extractImportPath(importStatement) {
+    const match = importStatement.match(/from\s+['"]([^'"]+)['"]/);
+    return match ? match[1] || '' : '';
+}
+/**
+ * Detect CSS custom property usage in content
+ */
+export function detectCSSCustomProperties(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const regex = new RegExp(CSS_CUSTOM_PROPERTY_PATTERN.source, CSS_CUSTOM_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-custom-property',
+            file,
+            line: lineNumber,
+            column,
+            matchedText: match[0],
+            tokenName: match[1] || '',
+            context: lines[lineNumber - 1] || '',
+        });
+    }
+    return results;
+}
+/**
+ * Detect theme object usage in content
+ */
+export function detectThemeObjectUsage(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    for (const pattern of THEME_OBJECT_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-object',
+                file,
+                line: lineNumber,
+                column,
+                matchedText: match[0],
+                tokenName: match[0],
+                context: lines[lineNumber - 1] || '',
+            });
+        }
+    }
+    return results;
+}
+/**
+ * Detect hardcoded color values in content
+ */
+export function detectHardcodedColors(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    // Check each color pattern type
+    const colorPatterns = [
+        { pattern: HARDCODED_COLOR_PATTERNS.hex, type: 'color-hex' },
+        { pattern: HARDCODED_COLOR_PATTERNS.rgb, type: 'color-rgb' },
+        { pattern: HARDCODED_COLOR_PATTERNS.rgba, type: 'color-rgba' },
+        { pattern: HARDCODED_COLOR_PATTERNS.hsl, type: 'color-hsl' },
+        { pattern: HARDCODED_COLOR_PATTERNS.hsla, type: 'color-hsla' },
+    ];
+    for (const { pattern, type } of colorPatterns) {
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const value = match[0];
+            // Skip allowed values
+            if (isAllowedHardcodedValue(value)) {
+                continue;
+            }
+            // Skip if inside a CSS custom property definition
+            const beforeMatch = content.slice(0, match.index);
+            const lineNumber = beforeMatch.split('\n').length;
+            const lineContent = lines[lineNumber - 1] || '';
+            // Skip CSS custom property definitions (--color-name: #fff)
+            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 column = match.index - lastNewline;
+            const endColumn = column + value.length;
+            const property = extractCSSProperty(lineContent);
+            const hardcodedInfo = {
+                type,
+                file,
+                line: lineNumber,
+                column,
+                endLine: lineNumber,
+                endColumn,
+                value,
+                suggestedToken: suggestColorToken(value),
+                lineContent,
+            };
+            if (property !== undefined) {
+                hardcodedInfo.property = property;
+            }
+            results.push(hardcodedInfo);
+        }
+    }
+    return results;
+}
+/**
+ * Detect hardcoded spacing values in content
+ */
+export function detectHardcodedSpacing(content, file) {
+    const results = [];
+    const lines = content.split('\n');
+    const spacingPatterns = [
+        { pattern: HARDCODED_SPACING_PATTERNS.px, type: 'spacing-px' },
+        { pattern: HARDCODED_SPACING_PATTERNS.rem, type: 'spacing-rem' },
+        { pattern: HARDCODED_SPACING_PATTERNS.em, type: 'spacing-em' },
+    ];
+    for (const { pattern, type } of spacingPatterns) {
+        const regex = new RegExp(pattern.source, pattern.flags);
+        let match;
+        while ((match = regex.exec(content)) !== null) {
+            const value = match[0];
+            // Skip allowed values
+            if (isAllowedHardcodedValue(value)) {
+                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;
+            }
+            // Skip if it's part of a media query breakpoint
+            if (/@media.*\(.*\d+px/.test(lineContent)) {
+                continue;
+            }
+            const lastNewline = beforeMatch.lastIndexOf('\n');
+            const column = match.index - lastNewline;
+            const endColumn = column + value.length;
+            const property = extractCSSProperty(lineContent);
+            const hardcodedInfo = {
+                type,
+                file,
+                line: lineNumber,
+                column,
+                endLine: lineNumber,
+                endColumn,
+                value,
+                suggestedToken: suggestSpacingToken(value),
+                lineContent,
+            };
+            if (property !== undefined) {
+                hardcodedInfo.property = property;
+            }
+            results.push(hardcodedInfo);
+        }
+    }
+    return results;
+}
+/**
+ * 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;
+}
+/**
+ * Suggest a token name for a color value
+ */
+function suggestColorToken(value) {
+    // Normalize the value
+    const normalized = value.toLowerCase();
+    // Common color mappings
+    if (normalized === '#000' || normalized === '#000000') {
+        return 'colors.black or --color-black';
+    }
+    if (normalized === '#fff' || normalized === '#ffffff') {
+        return 'colors.white or --color-white';
+    }
+    // Generic suggestion
+    return 'Use a design token from your color palette (e.g., colors.primary, --color-primary)';
+}
+/**
+ * Suggest a token name for a spacing value
+ */
+function suggestSpacingToken(value) {
+    // Extract numeric value
+    const numMatch = value.match(/^(\d+(?:\.\d+)?)/);
+    if (!numMatch) {
+        return 'Use a spacing token (e.g., spacing.md, --spacing-4)';
+    }
+    const num = parseFloat(numMatch[1] || '0');
+    // Common spacing scale suggestions
+    if (value.endsWith('px')) {
+        if (num <= 4)
+            return 'spacing.xs or --spacing-1';
+        if (num <= 8)
+            return 'spacing.sm or --spacing-2';
+        if (num <= 16)
+            return 'spacing.md or --spacing-4';
+        if (num <= 24)
+            return 'spacing.lg or --spacing-6';
+        if (num <= 32)
+            return 'spacing.xl or --spacing-8';
+        return 'spacing.2xl or --spacing-10';
+    }
+    if (value.endsWith('rem')) {
+        if (num <= 0.25)
+            return 'spacing.xs or --spacing-1';
+        if (num <= 0.5)
+            return 'spacing.sm or --spacing-2';
+        if (num <= 1)
+            return 'spacing.md or --spacing-4';
+        if (num <= 1.5)
+            return 'spacing.lg or --spacing-6';
+        if (num <= 2)
+            return 'spacing.xl or --spacing-8';
+        return 'spacing.2xl or --spacing-10';
+    }
+    return 'Use a spacing token (e.g., spacing.md, --spacing-4)';
+}
+/**
+ * Analyze design token patterns in a file
+ */
+export function analyzeDesignTokens(content, file) {
+    // Skip excluded files for hardcoded value detection
+    const skipHardcodedDetection = shouldExcludeFile(file);
+    // Detect token usages
+    const tokenImports = detectTokenImports(content, file);
+    const cssCustomProperties = detectCSSCustomProperties(content, file);
+    const themeObjectUsages = detectThemeObjectUsage(content, file);
+    const tokenUsages = [
+        ...tokenImports,
+        ...cssCustomProperties,
+        ...themeObjectUsages,
+    ];
+    // Detect hardcoded values (unless file is excluded)
+    let hardcodedValues = [];
+    if (!skipHardcodedDetection) {
+        const hardcodedColors = detectHardcodedColors(content, file);
+        const hardcodedSpacing = detectHardcodedSpacing(content, file);
+        hardcodedValues = [...hardcodedColors, ...hardcodedSpacing];
+    }
+    // Calculate confidence
+    const hasTokenUsage = tokenUsages.length > 0;
+    const hasHardcodedValues = hardcodedValues.length > 0;
+    let tokenUsageConfidence = 0;
+    if (hasTokenUsage && !hasHardcodedValues) {
+        tokenUsageConfidence = 1.0;
+    }
+    else if (hasTokenUsage && hasHardcodedValues) {
+        const ratio = tokenUsages.length / (tokenUsages.length + hardcodedValues.length);
+        tokenUsageConfidence = ratio;
+    }
+    else if (!hasTokenUsage && hasHardcodedValues) {
+        tokenUsageConfidence = 0;
+    }
+    else {
+        tokenUsageConfidence = 0.5; // No styling detected
+    }
+    return {
+        tokenUsages,
+        hardcodedValues,
+        hasDesignTokenImport: tokenImports.length > 0,
+        usesCSSCustomProperties: cssCustomProperties.length > 0,
+        usesThemeObject: themeObjectUsages.length > 0,
+        tokenUsageConfidence,
+    };
+}
+// ============================================================================
+// Design Tokens Detector Class
+// ============================================================================
+/**
+ * Detector for design token usage patterns
+ *
+ * Identifies design token usage and flags hardcoded values that should
+ * use design tokens instead.
+ *
+ * @requirements 9.1 - THE Styling_Detector SHALL detect design token usage vs hardcoded values
+ */
+export class DesignTokensDetector extends RegexDetector {
+    id = 'styling/design-tokens';
+    category = 'styling';
+    subcategory = 'design-tokens';
+    name = 'Design Tokens Detector';
+    description = 'Detects design token usage patterns and flags hardcoded values that should use tokens';
+    supportedLanguages = ['typescript', 'javascript', 'css'];
+    /**
+     * Detect design token patterns and violations
+     */
+    async detect(context) {
+        const patterns = [];
+        const violations = [];
+        // Analyze the file
+        const analysis = analyzeDesignTokens(context.content, context.file);
+        // Create pattern matches for token usages
+        if (analysis.hasDesignTokenImport) {
+            patterns.push(this.createTokenImportPattern(context.file, analysis));
+        }
+        if (analysis.usesCSSCustomProperties) {
+            patterns.push(this.createCSSCustomPropertyPattern(context.file, analysis));
+        }
+        if (analysis.usesThemeObject) {
+            patterns.push(this.createThemeObjectPattern(context.file, analysis));
+        }
+        // Create violations for hardcoded values
+        for (const hardcoded of analysis.hardcodedValues) {
+            violations.push(this.createHardcodedValueViolation(hardcoded));
+        }
+        return this.createResult(patterns, violations, analysis.tokenUsageConfidence);
+    }
+    /**
+     * Create a pattern match for design token imports
+     */
+    createTokenImportPattern(file, analysis) {
+        const tokenImports = analysis.tokenUsages.filter(t => t.type === 'design-tokens-import');
+        const firstImport = tokenImports[0];
+        return {
+            patternId: `${this.id}/import`,
+            location: {
+                file,
+                line: firstImport?.line || 1,
+                column: firstImport?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a pattern match for CSS custom property usage
+     */
+    createCSSCustomPropertyPattern(file, analysis) {
+        const cssProps = analysis.tokenUsages.filter(t => t.type === 'css-custom-property');
+        const firstProp = cssProps[0];
+        return {
+            patternId: `${this.id}/css-custom-property`,
+            location: {
+                file,
+                line: firstProp?.line || 1,
+                column: firstProp?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a pattern match for theme object usage
+     */
+    createThemeObjectPattern(file, analysis) {
+        const themeUsages = analysis.tokenUsages.filter(t => t.type === 'theme-object');
+        const firstUsage = themeUsages[0];
+        return {
+            patternId: `${this.id}/theme-object`,
+            location: {
+                file,
+                line: firstUsage?.line || 1,
+                column: firstUsage?.column || 1,
+            },
+            confidence: 1.0,
+            isOutlier: false,
+        };
+    }
+    /**
+     * Create a violation for a hardcoded value
+     */
+    createHardcodedValueViolation(hardcoded) {
+        const typeDescriptions = {
+            'color-hex': 'hex color',
+            'color-rgb': 'RGB color',
+            'color-rgba': 'RGBA color',
+            'color-hsl': 'HSL color',
+            'color-hsla': 'HSLA color',
+            'spacing-px': 'pixel spacing value',
+            'spacing-rem': 'rem spacing value',
+            'spacing-em': 'em spacing value',
+            'font-size': 'font size',
+            'border-radius': 'border radius',
+            'z-index': 'z-index value',
+        };
+        const typeDescription = typeDescriptions[hardcoded.type] || 'hardcoded value';
+        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: `Hardcoded ${typeDescription} '${hardcoded.value}'${propertyInfo} should use a design token`,
+            explanation: `Using hardcoded values instead of design tokens makes it difficult to maintain consistent styling across the application. Design tokens provide a single source of truth for colors, spacing, and other design values.`,
+            expected: hardcoded.suggestedToken || 'A design token',
+            actual: hardcoded.value,
+            aiExplainAvailable: true,
+            aiFixAvailable: true,
+            firstSeen: new Date(),
+            occurrences: 1,
+        };
+        const quickFix = this.createQuickFixForHardcodedValue(hardcoded);
+        if (quickFix !== undefined) {
+            violation.quickFix = quickFix;
+        }
+        return violation;
+    }
+    /**
+     * Create a quick fix for replacing a hardcoded value with a token
+     */
+    createQuickFixForHardcodedValue(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, '-').replace('colors', 'color').replace('spacing', 'spacing')})`;
+        }
+        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 design 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 hardcoded value violation
+        if (!violation.message.includes('Hardcoded')) {
+            return null;
+        }
+        // Extract the value from the message
+        const valueMatch = violation.message.match(/Hardcoded [^']+ '([^']+)'/);
+        if (!valueMatch || !valueMatch[1]) {
+            return null;
+        }
+        const value = valueMatch[1];
+        const isColor = violation.message.includes('color');
+        const isSpacing = violation.message.includes('spacing');
+        let suggestedToken;
+        if (isColor) {
+            suggestedToken = suggestColorToken(value);
+        }
+        else if (isSpacing) {
+            suggestedToken = suggestSpacingToken(value);
+        }
+        else {
+            return null;
+        }
+        const firstSuggestion = suggestedToken.split(' or ')[0] || suggestedToken;
+        return {
+            title: `Replace with design 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 DesignTokensDetector instance
+ */
+export function createDesignTokensDetector() {
+    return new DesignTokensDetector();
+}
+//# sourceMappingURL=design-tokens.js.map