@primer/primitives 11.4.1-rc.eb8ee149 → 11.5.0-rc.14eaeb12

package/dist/build/formats/markdownLlmGuidelines.js

@@ -296,6 +296,239 @@ function outputPatternCompressedCategory(category, tokens, config, lines) {
         lines.push('');
     }
 }
+/**
+ * Outputs pattern-compressed display color tokens
+ * Extracts unique colors and properties to show as display-[color]-[property] pattern
+ */
+function outputDisplayColorPattern(tokens, lines) {
+    const tokenNames = tokens.map(t => t.name);
+    // Extract unique colors and properties
+    const colors = new Set();
+    const properties = new Set();
+    const hasScale = new Set();
+    for (const name of tokenNames) {
+        // Parse: display-{color}-{property} or display-{color}-scale-{n}
+        const parts = name.replace('display-', '').split('-');
+        if (parts.length < 2)
+            continue;
+        const color = parts[0];
+        colors.add(color);
+        // Check for scale tokens (display-blue-scale-0)
+        if (parts[1] === 'scale' && parts.length >= 3) {
+            hasScale.add(parts[2]);
+        }
+        else {
+            // Property tokens (display-blue-bgColor-emphasis, display-blue-fgColor)
+            const property = parts.slice(1).join('-');
+            properties.add(property);
+        }
+    }
+    // Sort colors alphabetically
+    const sortedColors = [...colors].sort();
+    const sortedProperties = [...properties].sort((a, b) => {
+        // Sort by type first (bgColor, borderColor, fgColor)
+        const typeOrder = ['bgColor-emphasis', 'bgColor-muted', 'borderColor-emphasis', 'borderColor-muted', 'fgColor'];
+        const aIdx = typeOrder.indexOf(a);
+        const bIdx = typeOrder.indexOf(b);
+        if (aIdx !== -1 && bIdx !== -1)
+            return aIdx - bIdx;
+        if (aIdx !== -1)
+            return -1;
+        if (bIdx !== -1)
+            return 1;
+        return a.localeCompare(b);
+    });
+    // Output pattern with variables
+    lines.push('**Pattern:** `display-[color]-[property]`');
+    lines.push('');
+    lines.push('**Variables:**');
+    lines.push(`- **color:** ${sortedColors.join(' | ')}`);
+    lines.push(`- **property:** ${sortedProperties.join(' | ')}`);
+    lines.push('');
+    // Output scale pattern if present
+    if (hasScale.size > 0) {
+        const sortedScales = [...hasScale].sort((a, b) => parseInt(a) - parseInt(b));
+        lines.push('**Scale pattern:** `display-[color]-scale-[n]`');
+        lines.push(`- **n:** ${sortedScales.join(' | ')}`);
+        lines.push('');
+        lines.push('*Scale 0-2: lighter (backgrounds), 3-5: mid-tones, 6-9: darker (foregrounds/borders)*');
+        lines.push('');
+    }
+}
+/**
+ * Outputs pattern-compressed data visualization tokens
+ * Extracts unique colors and variants to show as data-[color]-color-[variant] pattern
+ */
+function outputDataVisColorPattern(tokens, lines) {
+    const tokenNames = tokens.map(t => t.name);
+    // Extract unique colors and variants
+    const colors = new Set();
+    const variants = new Set();
+    for (const name of tokenNames) {
+        // Parse: data-{color}-color-{variant}
+        const parts = name.replace('data-', '').split('-');
+        if (parts.length < 3)
+            continue;
+        const color = parts[0];
+        colors.add(color);
+        // Variant is the last part (emphasis, muted)
+        // Format: color-color-variant -> parts[1] is 'color', parts[2] is variant
+        if (parts[1] === 'color' && parts.length >= 3) {
+            variants.add(parts[2]);
+        }
+    }
+    // Sort colors alphabetically
+    const sortedColors = [...colors].sort();
+    const sortedVariants = [...variants].sort((a, b) => {
+        // emphasis first, then muted
+        const order = ['emphasis', 'muted'];
+        return order.indexOf(a) - order.indexOf(b);
+    });
+    // Output pattern with variables
+    lines.push('**Pattern:** `data-[color]-color-[variant]`');
+    lines.push('');
+    lines.push('**Variables:**');
+    lines.push(`- **color:** ${sortedColors.join(' | ')}`);
+    lines.push(`- **variant:** ${sortedVariants.join(' | ')}`);
+    lines.push('');
+    // Add usage guidance
+    lines.push('**Variant usage:**');
+    lines.push('- **emphasis:** Lines, bars, borders, data points');
+    lines.push('- **muted:** Area fills, backgrounds, subtle regions');
+    lines.push('');
+    lines.push('*Pair emphasis with muted variants of the same color for cohesive chart styling.*');
+    lines.push('');
+}
+/**
+ * Outputs pattern-compressed ANSI color tokens
+ * Extracts unique colors and variants (default/bright) to show as color-ansi-[color]-[variant] pattern
+ */
+function outputAnsiColorPattern(tokens, lines) {
+    const tokenNames = tokens.map(t => t.name);
+    // Extract unique colors and variants
+    const colors = new Set();
+    const hasVariants = new Set();
+    for (const name of tokenNames) {
+        // Parse: color-ansi-{color} or color-ansi-{color}-bright
+        const parts = name.replace('color-ansi-', '').split('-');
+        if (parts.length < 1)
+            continue;
+        const color = parts[0];
+        colors.add(color);
+        // Check for bright variant
+        if (parts.length > 1 && parts[1] === 'bright') {
+            hasVariants.add('bright');
+        }
+        else {
+            hasVariants.add('default');
+        }
+    }
+    // Sort colors in ANSI order
+    const ansiOrder = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white', 'gray'];
+    const sortedColors = [...colors].sort((a, b) => {
+        const aIdx = ansiOrder.indexOf(a);
+        const bIdx = ansiOrder.indexOf(b);
+        if (aIdx !== -1 && bIdx !== -1)
+            return aIdx - bIdx;
+        if (aIdx !== -1)
+            return -1;
+        if (bIdx !== -1)
+            return 1;
+        return a.localeCompare(b);
+    });
+    // Output pattern with variables
+    lines.push('**Pattern:** `color-ansi-[color]` or `color-ansi-[color]-bright`');
+    lines.push('');
+    lines.push('**Variables:**');
+    lines.push(`- **color:** ${sortedColors.join(' | ')}`);
+    if (hasVariants.has('bright')) {
+        lines.push('- **variant:** default (no suffix) | bright');
+    }
+    lines.push('');
+}
+/**
+ * Outputs pattern-compressed prettylights syntax tokens using prefix grouping
+ * Groups tokens by their primary element category
+ */
+function outputPrettylightsPattern(tokens, lines) {
+    const tokenNames = tokens.map(t => t.name);
+    // Common single-word elements (no sub-variants)
+    const simpleElements = [];
+    // Grouped elements with sub-variants (markup-*, brackethighlighter-*, etc.)
+    const groupedElements = new Map();
+    // Elements with bg/text variants - track the base name and which suffixes exist
+    const bgTextVariants = new Map();
+    for (const name of tokenNames) {
+        // Parse: color-prettylights-syntax-{element} or color-prettylights-syntax-{group}-{sub}
+        const element = name.replace('color-prettylights-syntax-', '');
+        const parts = element.split('-');
+        if (parts.length === 1) {
+            // Simple element: comment, constant, entity, keyword, string, variable
+            simpleElements.push(parts[0]);
+        }
+        else {
+            const group = parts[0];
+            const rest = parts.slice(1).join('-');
+            // Check for bg/text suffix patterns (e.g., markup-changed-bg, markup-changed-text)
+            if (rest.endsWith('-bg') || rest.endsWith('-text')) {
+                const baseName = rest.replace(/-bg$/, '').replace(/-text$/, '');
+                const suffix = rest.endsWith('-bg') ? 'bg' : 'text';
+                const key = `${group}:${baseName}`; // Use colon to separate group from base
+                if (!bgTextVariants.has(key)) {
+                    bgTextVariants.set(key, new Set());
+                }
+                bgTextVariants.get(key).add(suffix);
+            }
+            else {
+                // Regular grouped element
+                if (!groupedElements.has(group)) {
+                    groupedElements.set(group, new Set());
+                }
+                groupedElements.get(group).add(rest);
+            }
+        }
+    }
+    // Output pattern
+    lines.push('**Pattern:** `color-prettylights-syntax-[element]`');
+    lines.push('');
+    // Output simple elements
+    if (simpleElements.length > 0) {
+        const sorted = [...new Set(simpleElements)].sort();
+        lines.push(`**Core elements:** ${sorted.join(', ')}`);
+    }
+    // Merge bg/text variants into grouped elements for cleaner output
+    // Group bg/text variants by their prefix group
+    const bgTextByGroup = new Map();
+    for (const [key] of bgTextVariants) {
+        const [group, baseName] = key.split(':');
+        if (!bgTextByGroup.has(group)) {
+            bgTextByGroup.set(group, []);
+        }
+        bgTextByGroup.get(group).push(baseName);
+    }
+    // Output grouped elements
+    if (groupedElements.size > 0 || bgTextByGroup.size > 0) {
+        lines.push('');
+        lines.push('**Compound elements:**');
+        // Get all groups (both regular and bg/text)
+        const allGroups = new Set([...groupedElements.keys(), ...bgTextByGroup.keys()]);
+        for (const group of [...allGroups].sort()) {
+            const regularSubs = groupedElements.get(group) || new Set();
+            const bgTextBases = bgTextByGroup.get(group) || [];
+            // Combine regular subs
+            if (regularSubs.size > 0) {
+                const uniqueSubs = [...regularSubs].sort();
+                lines.push(`- \`${group}-[${uniqueSubs.join(', ')}]\``);
+            }
+            // Output bg/text variants separately for clarity
+            if (bgTextBases.length > 0) {
+                const uniqueBases = [...new Set(bgTextBases)].sort();
+                lines.push(`- \`${group}-[${uniqueBases.join(', ')}]-[bg, text]\``);
+            }
+        }
+    }
+    lines.push('');
+}
 // Human-readable category names and descriptions
 const CATEGORY_INFO = {
     bgColor: {
@@ -330,6 +563,10 @@ const CATEGORY_INFO = {
         name: 'Data Visualization',
         description: 'Color tokens for charts, graphs, and diagrams. Use emphasis variants for lines/bars, muted variants for fills.',
     },
+    display: {
+        name: 'Display Colors',
+        description: 'Decorative colors for categorization without semantic meaning. Use for labels, tags, avatars, and user-assigned colors. Do NOT use for success/error/warning—use semantic colors instead.',
+    },
     easing: { name: 'Easing', description: 'Animation easing function tokens.' },
     focus: { name: 'Focus', description: 'Focus ring and outline tokens for keyboard navigation accessibility.' },
     fontStack: { name: 'Font Stacks', description: 'Font family tokens.' },
@@ -555,6 +792,8 @@ export const markdownLlmGuidelines = (_a) => __awaiter(void 0, [_a], void 0, fun
     const lines = [
         '# Primer Design Token Guidelines',
         '',
+        '> Metadata: This file is a Dictionary of tokens. For usage rules, contrast requirements, and motion logic, refer to DESIGN_TOKENS_GUIDE.md.',
+        '',
         'Reference for using GitHub Primer design tokens.',
         '',
         '## Legend',
@@ -675,6 +914,116 @@ export const markdownLlmGuidelines = (_a) => __awaiter(void 0, [_a], void 0, fun
             outputTypographyByRole(nonSemanticTokens, lines);
             continue;
         }
+        // Special handling for data visualization colors - use pattern compression
+        if (category === 'data') {
+            const categoryDesc = getCategoryDescription(category);
+            if (categoryDesc) {
+                lines.push('');
+                lines.push(categoryDesc);
+            }
+            lines.push('');
+            // Get usage and rules from the first token with LLM metadata
+            const firstWithMeta = nonSemanticTokens.find(t => t.usage || t.rules);
+            if (firstWithMeta) {
+                if (firstWithMeta.usage && firstWithMeta.usage.length > 0) {
+                    lines.push(`**U:** ${firstWithMeta.usage.join(', ')}`);
+                }
+                if (firstWithMeta.rules) {
+                    lines.push(`**R:** ${firstWithMeta.rules}`);
+                }
+                lines.push('');
+            }
+            outputDataVisColorPattern(nonSemanticTokens, lines);
+            continue;
+        }
+        // Special handling for display colors - use pattern compression
+        if (category === 'display') {
+            const categoryDesc = getCategoryDescription(category);
+            if (categoryDesc) {
+                lines.push('');
+                lines.push(categoryDesc);
+            }
+            lines.push('');
+            // Get usage and rules from the first token with LLM metadata
+            const firstWithMeta = nonSemanticTokens.find(t => t.usage || t.rules);
+            if (firstWithMeta) {
+                if (firstWithMeta.usage && firstWithMeta.usage.length > 0) {
+                    lines.push(`**U:** ${firstWithMeta.usage.join(', ')}`);
+                }
+                if (firstWithMeta.rules) {
+                    lines.push(`**R:** ${firstWithMeta.rules}`);
+                }
+                lines.push('');
+            }
+            outputDisplayColorPattern(nonSemanticTokens, lines);
+            continue;
+        }
+        // Special handling for color category (ansi, prettylights subcategories)
+        if (category === 'color') {
+            // Separate tokens by subcategory
+            const ansiTokens = nonSemanticTokens.filter(t => t.name.startsWith('color-ansi-'));
+            const prettylightsTokens = nonSemanticTokens.filter(t => t.name.startsWith('color-prettylights-'));
+            const otherTokens = nonSemanticTokens.filter(t => !t.name.startsWith('color-ansi-') && !t.name.startsWith('color-prettylights-'));
+            // Output ANSI tokens with pattern compression
+            if (ansiTokens.length > 0) {
+                lines.push('### ANSI Terminal Colors');
+                lines.push('');
+                const ansiMeta = ansiTokens.find(t => t.description);
+                if (ansiMeta === null || ansiMeta === void 0 ? void 0 : ansiMeta.description) {
+                    lines.push(ansiMeta.description);
+                    lines.push('');
+                }
+                const ansiWithMeta = ansiTokens.find(t => t.usage || t.rules);
+                if (ansiWithMeta) {
+                    if (ansiWithMeta.usage && ansiWithMeta.usage.length > 0) {
+                        lines.push(`**U:** ${ansiWithMeta.usage.join(', ')}`);
+                    }
+                    if (ansiWithMeta.rules) {
+                        lines.push(`**R:** ${ansiWithMeta.rules}`);
+                    }
+                    lines.push('');
+                }
+                outputAnsiColorPattern(ansiTokens, lines);
+            }
+            // Output prettylights tokens with prefix grouping
+            if (prettylightsTokens.length > 0) {
+                lines.push('### Syntax Highlighting (prettylights)');
+                lines.push('');
+                const plMeta = prettylightsTokens.find(t => t.description);
+                if (plMeta === null || plMeta === void 0 ? void 0 : plMeta.description) {
+                    lines.push(plMeta.description);
+                    lines.push('');
+                }
+                const plWithMeta = prettylightsTokens.find(t => t.usage || t.rules);
+                if (plWithMeta) {
+                    if (plWithMeta.usage && plWithMeta.usage.length > 0) {
+                        lines.push(`**U:** ${plWithMeta.usage.join(', ')}`);
+                    }
+                    if (plWithMeta.rules) {
+                        lines.push(`**R:** ${plWithMeta.rules}`);
+                    }
+                    lines.push('');
+                }
+                outputPrettylightsPattern(prettylightsTokens, lines);
+            }
+            // Output any other color tokens normally
+            if (otherTokens.length > 0) {
+                for (const token of otherTokens) {
+                    lines.push(`### ${token.name}`);
+                    if (token.description) {
+                        lines.push(token.description);
+                    }
+                    if (token.usage && token.usage.length > 0) {
+                        lines.push(`**U:** ${token.usage.join(', ')}`);
+                    }
+                    if (token.rules) {
+                        lines.push(`**R:** ${token.rules}`);
+                    }
+                    lines.push('');
+                }
+            }
+            continue;
+        }
         // Special handling for pattern-compressed categories (control, overlay, stack, spinner)
         if (category in PATTERN_COMPRESSED_CATEGORIES) {
             const categoryDesc = getCategoryDescription(category);

package/dist/build/schemas/borderToken.d.ts

@@ -1,6 +1,27 @@
 import { z } from 'zod';
 export declare const borderValue: z.ZodObject<{
-    color: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+    color: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+        colorSpace: z.ZodEnum<{
+            "display-p3": "display-p3";
+            srgb: "srgb";
+            rec2020: "rec2020";
+            "srgb-linear": "srgb-linear";
+            hsl: "hsl";
+            hwb: "hwb";
+            lab: "lab";
+            lch: "lch";
+            oklab: "oklab";
+            oklch: "oklch";
+            "a98-rgb": "a98-rgb";
+            "prophoto-rgb": "prophoto-rgb";
+            xyz: "xyz";
+            "xyz-d50": "xyz-d50";
+            "xyz-d65": "xyz-d65";
+        }>;
+        components: z.ZodTuple<[z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>], null>;
+        alpha: z.ZodOptional<z.ZodNumber>;
+        hex: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>, z.ZodString]>;
     style: z.ZodEnum<{
         inset: "inset";
         solid: "solid";
@@ -11,13 +32,41 @@ export declare const borderValue: z.ZodObject<{
         ridge: "ridge";
         outset: "outset";
     }>;
-    width: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
+    width: z.ZodUnion<readonly [z.ZodObject<{
+        value: z.ZodNumber;
+        unit: z.ZodEnum<{
+            em: "em";
+            px: "px";
+            rem: "rem";
+        }>;
+    }, z.core.$strict>, z.ZodString]>;
 }, z.core.$strip>;
 export declare const borderToken: z.ZodObject<{
     $description: z.ZodOptional<z.ZodString>;
     $deprecated: z.ZodOptional<z.ZodUnion<readonly [z.ZodString, z.ZodBoolean]>>;
     $value: z.ZodUnion<readonly [z.ZodObject<{
-        color: z.ZodUnion<readonly [z.ZodString, z.ZodString]>;
+        color: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+            colorSpace: z.ZodEnum<{
+                "display-p3": "display-p3";
+                srgb: "srgb";
+                rec2020: "rec2020";
+                "srgb-linear": "srgb-linear";
+                hsl: "hsl";
+                hwb: "hwb";
+                lab: "lab";
+                lch: "lch";
+                oklab: "oklab";
+                oklch: "oklch";
+                "a98-rgb": "a98-rgb";
+                "prophoto-rgb": "prophoto-rgb";
+                xyz: "xyz";
+                "xyz-d50": "xyz-d50";
+                "xyz-d65": "xyz-d65";
+            }>;
+            components: z.ZodTuple<[z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>, z.ZodUnion<readonly [z.ZodNumber, z.ZodLiteral<"none">]>], null>;
+            alpha: z.ZodOptional<z.ZodNumber>;
+            hex: z.ZodOptional<z.ZodString>;
+        }, z.core.$strict>, z.ZodString]>;
         style: z.ZodEnum<{
             inset: "inset";
             solid: "solid";
@@ -28,9 +77,16 @@ export declare const borderToken: z.ZodObject<{
             ridge: "ridge";
             outset: "outset";
         }>;
-        width: z.ZodUnion<readonly [z.ZodUnion<readonly [z.ZodString, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodString]>;
+        width: z.ZodUnion<readonly [z.ZodObject<{
+            value: z.ZodNumber;
+            unit: z.ZodEnum<{
+                em: "em";
+                px: "px";
+                rem: "rem";
+            }>;
+        }, z.core.$strict>, z.ZodString]>;
     }, z.core.$strip>, z.ZodString]>;
-    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "dimension" | "duration" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+    $type: z.ZodLiteral<"number" | "border" | "color" | "fontFamily" | "fontWeight" | "transition" | "duration" | "dimension" | "gradient" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange" | "custom-string">;
     $extensions: z.ZodOptional<z.ZodObject<{
         'org.primer.llm': z.ZodOptional<z.ZodObject<{
             usage: z.ZodOptional<z.ZodArray<z.ZodString>>;

package/dist/build/schemas/borderToken.js

@@ -2,11 +2,12 @@ import { z } from 'zod';
 import { baseToken } from './baseToken.js';
 import { referenceValue } from './referenceValue.js';
 import { colorHexValue } from './colorHexValue.js';
+import { colorW3cValue } from './colorW3cValue.js';
 import { dimensionValue } from './dimensionValue.js';
 import { tokenType } from './tokenType.js';
 import { llmExtension } from './llmExtension.js';
 export const borderValue = z.object({
-    color: z.union([colorHexValue, referenceValue]),
+    color: z.union([colorHexValue, colorW3cValue, referenceValue]),
     style: z.enum(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'outset', 'inset']),
     width: z.union([dimensionValue, referenceValue]),
 });