@primer/primitives 11.4.0-rc.daff2d10 → 11.4.0-rc.e472be0d

package/dist/styleLint/functional/themes/light-colorblind.json

@@ -38256,11 +38256,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#0969da",
     "$type": "color",
+    "$description": "Outline color for focus states on interactive elements",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor", "effectColor"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
     "filePath": "src/tokens/functional/color/focus.json5",
@@ -38268,11 +38273,16 @@
     "original": {
       "$value": "{borderColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Outline color for focus states on interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor", "effectColor"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
       "key": "{focus.outlineColor}"
@@ -47320,6 +47330,7 @@
     "key": "{selection.bgColor}",
     "$value": "#0969da33",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47334,6 +47345,10 @@
           "isSource": true,
           "$type": "color"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["text-selection", "highlighted-text", "selected-content"],
+        "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
       }
     },
     "alpha": 0.2,
@@ -47342,6 +47357,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47356,6 +47372,10 @@
             "isSource": true,
             "$type": "color"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["text-selection", "highlighted-text", "selected-content"],
+          "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
         }
       },
       "alpha": 0.2,

package/dist/styleLint/functional/themes/light-high-contrast.json

@@ -38252,11 +38252,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#0349b4",
     "$type": "color",
+    "$description": "Outline color for focus states on interactive elements",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor", "effectColor"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
     "filePath": "src/tokens/functional/color/focus.json5",
@@ -38264,11 +38269,16 @@
     "original": {
       "$value": "{borderColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Outline color for focus states on interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor", "effectColor"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
       "key": "{focus.outlineColor}"
@@ -47316,6 +47326,7 @@
     "key": "{selection.bgColor}",
     "$value": "#0349b433",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47330,6 +47341,10 @@
           "isSource": true,
           "$type": "color"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["text-selection", "highlighted-text", "selected-content"],
+        "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
       }
     },
     "alpha": 0.2,
@@ -47338,6 +47353,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47352,6 +47368,10 @@
             "isSource": true,
             "$type": "color"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["text-selection", "highlighted-text", "selected-content"],
+          "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
         }
       },
       "alpha": 0.2,

package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json

@@ -38258,11 +38258,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#0349b4",
     "$type": "color",
+    "$description": "Outline color for focus states on interactive elements",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor", "effectColor"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
     "filePath": "src/tokens/functional/color/focus.json5",
@@ -38270,11 +38275,16 @@
     "original": {
       "$value": "{borderColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Outline color for focus states on interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor", "effectColor"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
       "key": "{focus.outlineColor}"
@@ -47322,6 +47332,7 @@
     "key": "{selection.bgColor}",
     "$value": "#0349b433",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47336,6 +47347,10 @@
           "isSource": true,
           "$type": "color"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["text-selection", "highlighted-text", "selected-content"],
+        "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
       }
     },
     "alpha": 0.2,
@@ -47344,6 +47359,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47358,6 +47374,10 @@
             "isSource": true,
             "$type": "color"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["text-selection", "highlighted-text", "selected-content"],
+          "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
         }
       },
       "alpha": 0.2,

package/dist/styleLint/functional/themes/light-tritanopia.json

@@ -38256,11 +38256,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#0969da",
     "$type": "color",
+    "$description": "Outline color for focus states on interactive elements",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor", "effectColor"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
     "filePath": "src/tokens/functional/color/focus.json5",
@@ -38268,11 +38273,16 @@
     "original": {
       "$value": "{borderColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Outline color for focus states on interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor", "effectColor"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
       "key": "{focus.outlineColor}"
@@ -47320,6 +47330,7 @@
     "key": "{selection.bgColor}",
     "$value": "#0969da33",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47334,6 +47345,10 @@
           "isSource": true,
           "$type": "color"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["text-selection", "highlighted-text", "selected-content"],
+        "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
       }
     },
     "alpha": 0.2,
@@ -47342,6 +47357,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47356,6 +47372,10 @@
             "isSource": true,
             "$type": "color"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["text-selection", "highlighted-text", "selected-content"],
+          "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
         }
       },
       "alpha": 0.2,

package/dist/styleLint/functional/themes/light.json

@@ -38250,11 +38250,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#0969da",
     "$type": "color",
+    "$description": "Outline color for focus states on interactive elements",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
         "group": "component (internal)",
         "scopes": ["borderColor", "effectColor"]
+      },
+      "org.primer.llm": {
+        "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+        "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
       }
     },
     "filePath": "src/tokens/functional/color/focus.json5",
@@ -38262,11 +38267,16 @@
     "original": {
       "$value": "{borderColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Outline color for focus states on interactive elements",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
           "group": "component (internal)",
           "scopes": ["borderColor", "effectColor"]
+        },
+        "org.primer.llm": {
+          "usage": ["focus-ring", "keyboard-navigation", "accessibility-indicator"],
+          "rules": "Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements."
         }
       },
       "key": "{focus.outlineColor}"
@@ -47314,6 +47324,7 @@
     "key": "{selection.bgColor}",
     "$value": "#0969da33",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47328,6 +47339,10 @@
           "isSource": true,
           "$type": "color"
         }
+      },
+      "org.primer.llm": {
+        "usage": ["text-selection", "highlighted-text", "selected-content"],
+        "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
       }
     },
     "alpha": 0.2,
@@ -47336,6 +47351,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47350,6 +47366,10 @@
             "isSource": true,
             "$type": "color"
           }
+        },
+        "org.primer.llm": {
+          "usage": ["text-selection", "highlighted-text", "selected-content"],
+          "rules": "Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers."
         }
       },
       "alpha": 0.2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "11.4.0-rc.daff2d10",
+  "version": "11.4.0-rc.e472be0d",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [

package/src/tokens/functional/color/data-vis.json5

@@ -1,5 +1,12 @@
 {
   data: {
+    $description: 'Colors for data visualization including charts, graphs, and diagrams. Use these colors to differentiate data series. Emphasis variants are for lines, bars, and borders. Muted variants are for area fills and backgrounds.',
+    $extensions: {
+      'org.primer.llm': {
+        usage: ['chart-series', 'graph-line', 'bar-fill', 'pie-segment', 'area-chart', 'data-point'],
+        rules: 'Use data colors for visualizations only. Do NOT use for semantic meaning (use bgColor.success/danger instead). When using multiple series, ensure sufficient contrast between adjacent colors. Pair emphasis with muted variants of the same color for cohesive styling.',
+      },
+    },
     blue: {
       color: {
         emphasis: {

package/src/tokens/functional/color/focus.json5

@@ -3,12 +3,17 @@
     outlineColor: {
       $value: '{borderColor.accent.emphasis}',
       $type: 'color',
+      $description: 'Outline color for focus states on interactive elements',
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',
           group: 'component (internal)',
           scopes: ['borderColor', 'effectColor'],
         },
+        'org.primer.llm': {
+          usage: ['focus-ring', 'keyboard-navigation', 'accessibility-indicator'],
+          rules: 'Use for focus outlines on interactive elements like buttons, links, and form controls. MUST be visible for keyboard navigation accessibility. Do NOT use for decorative borders or non-interactive elements.',
+        },
       },
     },
   },

package/src/tokens/functional/color/selection.json5

@@ -3,6 +3,7 @@
     bgColor: {
       $value: '{bgColor.accent.emphasis}',
       $type: 'color',
+      $description: 'Background color for text selection highlights',
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',
@@ -15,6 +16,10 @@
             alpha: 0.7,
           },
         },
+        'org.primer.llm': {
+          usage: ['text-selection', 'highlighted-text', 'selected-content'],
+          rules: 'Use for native text selection (::selection) and programmatic text highlighting. Do NOT use for general emphasis or background colors on containers.',
+        },
       },
       alpha: 0.2,
     },

package/src/tokens/functional/size/size-coarse.json5

@@ -3,7 +3,14 @@
     "minTarget": {
       "auto": {
         "$value": "{base.size.44}",
-        "$type": "dimension"
+        "$type": "dimension",
+        "$description": "Minimum touch target size for coarse pointer devices (touch screens)",
+        "$extensions": {
+          "org.primer.llm": {
+            "usage": ["touch-target", "mobile-button", "tap-area"],
+            "rules": "Use as minimum size for interactive elements on touch devices. Ensures WCAG 2.5.5 compliance (44x44px minimum). Do NOT use for fine pointer (mouse) contexts."
+          }
+        }
       }
     }
   },
@@ -12,7 +19,14 @@
       "gap": {
         "auto": {
           "$value": "{base.size.16}",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$description": "Gap between stacked controls in small density layouts for touch devices",
+          "$extensions": {
+            "org.primer.llm": {
+              "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+              "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
+            }
+          }
         }
       }
     },
@@ -20,7 +34,14 @@
       "gap": {
         "auto": {
           "$value": "{base.size.12}",
-          "$type": "dimension"
+          "$type": "dimension",
+          "$description": "Gap between stacked controls in medium density layouts for touch devices",
+          "$extensions": {
+            "org.primer.llm": {
+              "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
+              "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
+            }
+          }
         }
       }
     }

package/src/tokens/functional/size/size-fine.json5

@@ -1,28 +1,49 @@
 {
-  "control": {
-    "minTarget": {
-      "auto": {
-        "$value": "{base.size.16}",
-        "$type": "dimension"
-      }
-    }
+  control: {
+    minTarget: {
+      auto: {
+        $value: '{base.size.16}',
+        $type: 'dimension',
+        $description: 'Minimum target size for fine pointer devices (mouse)',
+        $extensions: {
+          'org.primer.llm': {
+            usage: ['mouse-target', 'desktop-button', 'click-area'],
+            rules: 'Use as minimum size for interactive elements on desktop/mouse interfaces. Smaller than touch targets for denser layouts. Do NOT use for touch/mobile contexts.',
+          },
+        },
+      },
+    },
   },
-  "controlStack": {
-    "small": {
-      "gap": {
-        "auto": {
-          "$value": "{base.size.8}",
-          "$type": "dimension"
-        }
-      }
+  controlStack: {
+    small: {
+      gap: {
+        auto: {
+          $value: '{base.size.8}',
+          $type: 'dimension',
+          $description: 'Gap between stacked controls in small density layouts for mouse interfaces',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['desktop-control-spacing', 'form-gap', 'stacked-buttons'],
+              rules: 'Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces.',
+            },
+          },
+        },
+      },
+    },
+    medium: {
+      gap: {
+        auto: {
+          $value: '{base.size.8}',
+          $type: 'dimension',
+          $description: 'Gap between stacked controls in medium density layouts for mouse interfaces',
+          $extensions: {
+            'org.primer.llm': {
+              usage: ['desktop-control-spacing', 'form-gap', 'stacked-buttons'],
+              rules: 'Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces.',
+            },
+          },
+        },
+      },
     },
-    "medium": {
-      "gap": {
-        "auto": {
-          "$value": "{base.size.8}",
-          "$type": "dimension"
-        }
-      }
-    }
-  }
+  },
 }