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

package/dist/docs/functional/themes/light-colorblind-high-contrast.json

@@ -38261,6 +38261,10 @@
         "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 +38272,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}"
@@ -38281,7 +38290,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47334,6 +47344,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 +47356,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47356,6 +47371,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,
@@ -47365,7 +47384,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0349b433",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

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

@@ -38259,6 +38259,10 @@
         "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",
@@ -38266,11 +38270,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}"
@@ -38279,7 +38288,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0969da",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47332,6 +47342,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,
@@ -47340,6 +47354,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47354,6 +47369,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,
@@ -47363,7 +47382,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0969da33",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

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

@@ -38255,6 +38255,10 @@
         "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 +38266,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}"
@@ -38275,7 +38284,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47328,6 +47338,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 +47350,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47350,6 +47365,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,
@@ -47359,7 +47378,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0349b433",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

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

@@ -38261,6 +38261,10 @@
         "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 +38272,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}"
@@ -38281,7 +38290,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0349b4",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47334,6 +47344,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 +47356,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47356,6 +47371,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,
@@ -47365,7 +47384,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0349b433",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

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

@@ -38259,6 +38259,10 @@
         "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",
@@ -38266,11 +38270,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}"
@@ -38279,7 +38288,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0969da",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47332,6 +47342,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,
@@ -47340,6 +47354,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47354,6 +47369,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,
@@ -47363,7 +47382,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0969da33",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

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

@@ -38253,6 +38253,10 @@
         "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",
@@ -38260,11 +38264,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}"
@@ -38273,7 +38282,8 @@
     "attributes": {},
     "path": ["focus", "outlineColor"],
     "value": "#0969da",
-    "type": "color"
+    "type": "color",
+    "description": "Outline color for focus states on interactive elements"
   },
   "header-bgColor": {
     "key": "{header.bgColor}",
@@ -47326,6 +47336,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,
@@ -47334,6 +47348,7 @@
     "original": {
       "$value": "{bgColor.accent.emphasis}",
       "$type": "color",
+      "$description": "Background color for text selection highlights",
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -47348,6 +47363,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,
@@ -47357,7 +47376,8 @@
     "attributes": {},
     "path": ["selection", "bgColor"],
     "value": "#0969da33",
-    "type": "color"
+    "type": "color",
+    "description": "Background color for text selection highlights"
   },
   "shadow-floating-large": {
     "key": "{shadow.floating.large}",

package/dist/figma/themes/dark-colorblind.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8495,6 +8496,7 @@
     },
     "type": "COLOR",
     "alpha": 0.7,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/dark-dimmed.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8488,6 +8489,7 @@
     },
     "type": "COLOR",
     "alpha": 0.7,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/dark-high-contrast.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8484,6 +8485,7 @@
     },
     "type": "COLOR",
     "alpha": 0.7,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/dark-tritanopia.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8494,6 +8495,7 @@
     },
     "type": "COLOR",
     "alpha": 0.7,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/dark.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8489,6 +8490,7 @@
     },
     "type": "COLOR",
     "alpha": 0.7,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/light-colorblind.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8486,6 +8487,7 @@
     },
     "type": "COLOR",
     "alpha": 0.2,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/light-high-contrast.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8479,6 +8480,7 @@
     },
     "type": "COLOR",
     "alpha": 0.2,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/light-tritanopia.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8485,6 +8486,7 @@
     },
     "type": "COLOR",
     "alpha": 0.2,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/figma/themes/light.json

@@ -908,6 +908,7 @@
       "a": 1
     },
     "type": "COLOR",
+    "description": "Outline color for focus states on interactive elements",
     "refId": "mode/focus/outlineColor",
     "reference": "mode/borderColor/accent-emphasis",
     "collection": "mode",
@@ -8481,6 +8482,7 @@
     },
     "type": "COLOR",
     "alpha": 0.2,
+    "description": "Background color for text selection highlights",
     "refId": "mode/selection/bgColor",
     "reference": "mode/bgColor/accent-emphasis",
     "collection": "mode",

package/dist/internalCss/dark-colorblind-high-contrast.css

@@ -1058,7 +1058,7 @@
   --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
   --fgColor-white: var(--base-color-neutral-13); /** Pure white text */
-  --focus-outlineColor: var(--borderColor-accent-emphasis);
+  --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
   --header-fgColor-default: #ffffffb3;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
   --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -1090,7 +1090,7 @@
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
-  --selection-bgColor: #194fb1b3;
+  --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-inset: inset 0px 1px 0px 0px #0104093d;
   --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;
@@ -2254,7 +2254,7 @@
     --fgColor-onEmphasis: var(--base-color-neutral-13); /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: var(--base-color-neutral-0); /** Text color for use on inverse backgrounds */
     --fgColor-white: var(--base-color-neutral-13); /** Pure white text */
-    --focus-outlineColor: var(--borderColor-accent-emphasis);
+    --focus-outlineColor: var(--borderColor-accent-emphasis); /** Outline color for focus states on interactive elements */
     --header-fgColor-default: #ffffffb3;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
     --label-blue-borderColor: var(--label-blue-fgColor-rest);
@@ -2286,7 +2286,7 @@
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
-    --selection-bgColor: #194fb1b3;
+    --selection-bgColor: #194fb1b3; /** Background color for text selection highlights */
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --shadow-inset: inset 0px 1px 0px 0px #0104093d;
     --shadow-resting-medium: 0px 1px 1px 0px #01040966, 0px 3px 6px 0px #010409cc;