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

package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json

@@ -38292,11 +38292,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#409eff",
     "$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",
@@ -38304,11 +38309,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}"
@@ -47364,6 +47374,7 @@
     "key": "{selection.bgColor}",
     "$value": "#194fb1b3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47378,6 +47389,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.7,
@@ -47386,6 +47401,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47400,6 +47416,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.7,

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

@@ -38292,11 +38292,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#1f6feb",
     "$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",
@@ -38304,11 +38309,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}"
@@ -47364,6 +47374,7 @@
     "key": "{selection.bgColor}",
     "$value": "#1f6febb3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47378,6 +47389,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.7,
@@ -47386,6 +47401,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47400,6 +47416,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.7,

package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json

@@ -38282,11 +38282,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#6cb6ff",
     "$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",
@@ -38294,11 +38299,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}"
@@ -47354,6 +47364,7 @@
     "key": "{selection.bgColor}",
     "$value": "#1b4b91b3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47368,6 +47379,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.7,
@@ -47376,6 +47391,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47390,6 +47406,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.7,

package/dist/styleLint/functional/themes/dark-dimmed.json

@@ -38282,11 +38282,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#316dca",
     "$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",
@@ -38294,11 +38299,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}"
@@ -47354,6 +47364,7 @@
     "key": "{selection.bgColor}",
     "$value": "#316dcab3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47368,6 +47379,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.7,
@@ -47376,6 +47391,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47390,6 +47406,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.7,

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

@@ -38288,11 +38288,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#409eff",
     "$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",
@@ -38300,11 +38305,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}"
@@ -47360,6 +47370,7 @@
     "key": "{selection.bgColor}",
     "$value": "#194fb1b3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47374,6 +47385,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.7,
@@ -47382,6 +47397,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47396,6 +47412,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.7,

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

@@ -38288,11 +38288,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#409eff",
     "$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",
@@ -38300,11 +38305,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}"
@@ -47360,6 +47370,7 @@
     "key": "{selection.bgColor}",
     "$value": "#194fb1b3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47374,6 +47385,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.7,
@@ -47382,6 +47397,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47396,6 +47412,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.7,

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

@@ -38290,11 +38290,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#1f6feb",
     "$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",
@@ -38302,11 +38307,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}"
@@ -47362,6 +47372,7 @@
     "key": "{selection.bgColor}",
     "$value": "#1f6febb3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47376,6 +47387,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.7,
@@ -47384,6 +47399,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47398,6 +47414,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.7,

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

@@ -38278,11 +38278,16 @@
     "key": "{focus.outlineColor}",
     "$value": "#1f6feb",
     "$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",
@@ -38290,11 +38295,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}"
@@ -47350,6 +47360,7 @@
     "key": "{selection.bgColor}",
     "$value": "#1f6febb3",
     "$type": "color",
+    "$description": "Background color for text selection highlights",
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -47364,6 +47375,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.7,
@@ -47372,6 +47387,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47386,6 +47402,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.7,

package/dist/styleLint/functional/themes/light-colorblind-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,