npm - @primer/primitives - Versions diffs - 11.4.0-rc.daff2d10 → 11.4.0-rc.e472be0d - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

package/dist/css/functional/themes/dark-dimmed.css CHANGED Viewed

@@ -826,7 +826,7 @@
   --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #cdd9e5; /** 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: #cdd9e5b3;
   --page-header-bgColor: var(--bgColor-default);
   --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -840,7 +840,7 @@
   --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
-  --selection-bgColor: #316dcab3;
+  --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
   --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
   --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
   --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;
@@ -1723,7 +1723,7 @@
     --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #cdd9e5; /** 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: #cdd9e5b3;
     --page-header-bgColor: var(--bgColor-default);
     --progressBar-bgColor-accent: var(--bgColor-accent-emphasis);
@@ -1737,7 +1737,7 @@
     --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
-    --selection-bgColor: #316dcab3;
+    --selection-bgColor: #316dcab3; /** Background color for text selection highlights */
     --shadow-floating-large: 0px 0px 0px 1px #3d444d, 0px 24px 48px 0px #010409; /** Large floating shadow for modals and dialogs */
     --shadow-floating-legacy: 0px 6px 12px -3px #01040966, 0px 6px 18px 0px #01040966;
     --shadow-floating-medium: 0px 0px 0px 1px #3d444d, 0px 8px 16px -4px #01040966, 0px 4px 32px -4px #01040966, 0px 24px 48px -12px #01040966, 0px 48px 96px -24px #01040966;

package/dist/css/functional/themes/dark-high-contrast.css CHANGED Viewed

@@ -759,7 +759,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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);
@@ -791,7 +791,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;
@@ -1656,7 +1656,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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);
@@ -1688,7 +1688,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;

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css CHANGED Viewed

@@ -759,7 +759,7 @@
   --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-white: #ffffff; /** 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);
@@ -791,7 +791,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;
@@ -1656,7 +1656,7 @@
     --fgColor-onEmphasis: #ffffff; /** Text color for use on emphasis backgrounds */
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-white: #ffffff; /** 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);
@@ -1688,7 +1688,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;

package/dist/css/functional/themes/dark-tritanopia.css CHANGED Viewed

@@ -801,7 +801,7 @@
   --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -816,7 +816,7 @@
   --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
-  --selection-bgColor: #1f6febb3;
+  --selection-bgColor: #1f6febb3; /** 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;
@@ -1698,7 +1698,7 @@
     --fgColor-onInverse: #010409; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1713,7 +1713,7 @@
     --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
-    --selection-bgColor: #1f6febb3;
+    --selection-bgColor: #1f6febb3; /** 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;

package/dist/css/functional/themes/dark.css CHANGED Viewed

@@ -799,7 +799,7 @@
   --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --overlay-bgColor: #010409;
   --page-header-bgColor: var(--bgColor-default);
@@ -814,7 +814,7 @@
   --progressBar-track-bgColor: var(--borderColor-default);
   --reactionButton-selected-fgColor-rest: var(--fgColor-link);
   --selectMenu-borderColor: var(--borderColor-default);
-  --selection-bgColor: #1f6febb3;
+  --selection-bgColor: #1f6febb3; /** 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;
@@ -1696,7 +1696,7 @@
     --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --overlay-bgColor: #010409;
     --page-header-bgColor: var(--bgColor-default);
@@ -1711,7 +1711,7 @@
     --progressBar-track-bgColor: var(--borderColor-default);
     --reactionButton-selected-fgColor-rest: var(--fgColor-link);
     --selectMenu-borderColor: var(--borderColor-default);
-    --selection-bgColor: #1f6febb3;
+    --selection-bgColor: #1f6febb3; /** 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;

package/dist/css/functional/themes/light-colorblind-high-contrast.css CHANGED Viewed

@@ -770,7 +770,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -802,7 +802,7 @@
   --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-  --selection-bgColor: #0349b433;
+  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
@@ -1667,7 +1667,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1699,7 +1699,7 @@
     --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-    --selection-bgColor: #0349b433;
+    --selection-bgColor: #0349b433; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #0104090a;
     --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;

package/dist/css/functional/themes/light-colorblind.css CHANGED Viewed

@@ -787,7 +787,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -801,7 +801,7 @@
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --progressBar-track-bgColor: var(--borderColor-default);
-  --selection-bgColor: #0969da33;
+  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
@@ -1684,7 +1684,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1698,7 +1698,7 @@
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --progressBar-track-bgColor: var(--borderColor-default);
-    --selection-bgColor: #0969da33;
+    --selection-bgColor: #0969da33; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
     --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;

package/dist/css/functional/themes/light-high-contrast.css CHANGED Viewed

@@ -770,7 +770,7 @@
   --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -802,7 +802,7 @@
   --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-  --selection-bgColor: #0349b433;
+  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
@@ -1667,7 +1667,7 @@
     --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1699,7 +1699,7 @@
     --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-    --selection-bgColor: #0349b433;
+    --selection-bgColor: #0349b433; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #0104090a;
     --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;

package/dist/css/functional/themes/light-tritanopia-high-contrast.css CHANGED Viewed

@@ -770,7 +770,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -802,7 +802,7 @@
   --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-  --selection-bgColor: #0349b433;
+  --selection-bgColor: #0349b433; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #0104090a;
   --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;
@@ -1667,7 +1667,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --label-auburn-borderColor: var(--label-auburn-fgColor-rest);
@@ -1699,7 +1699,7 @@
     --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
-    --selection-bgColor: #0349b433;
+    --selection-bgColor: #0349b433; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #0104090a;
     --shadow-resting-small: 0px 1px 1px 0px #0104090f, 0px 1px 3px 0px #0104090f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #0104090f;

package/dist/css/functional/themes/light-tritanopia.css CHANGED Viewed

@@ -788,7 +788,7 @@
   --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -802,7 +802,7 @@
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-bgColor-success: var(--bgColor-success-emphasis);
   --progressBar-track-bgColor: var(--borderColor-default);
-  --selection-bgColor: #0969da33;
+  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
@@ -1685,7 +1685,7 @@
     --fgColor-onInverse: #ffffff; /** Text color for use on inverse backgrounds */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1699,7 +1699,7 @@
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-bgColor-success: var(--bgColor-success-emphasis);
     --progressBar-track-bgColor: var(--borderColor-default);
-    --selection-bgColor: #0969da33;
+    --selection-bgColor: #0969da33; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
     --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;

package/dist/css/functional/themes/light.css CHANGED Viewed

@@ -788,7 +788,7 @@
   --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
   --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
   --fgColor-white: #ffffff; /** 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;
   --header-fgColor-logo: #ffffff;
   --overlay-bgColor: #ffffff;
@@ -801,7 +801,7 @@
   --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
   --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
   --progressBar-track-bgColor: var(--borderColor-default);
-  --selection-bgColor: #0969da33;
+  --selection-bgColor: #0969da33; /** Background color for text selection highlights */
   --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
   --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
   --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;
@@ -1685,7 +1685,7 @@
     --fgColor-open: var(--fgColor-success); /** Text color for open state indicators (issues, PRs) */
     --fgColor-upsell: var(--fgColor-done); /** Text color for upsell and promotional content */
     --fgColor-white: #ffffff; /** 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;
     --header-fgColor-logo: #ffffff;
     --overlay-bgColor: #ffffff;
@@ -1698,7 +1698,7 @@
     --progressBar-bgColor-severe: var(--bgColor-severe-emphasis);
     --progressBar-bgColor-sponsors: var(--bgColor-sponsors-emphasis);
     --progressBar-track-bgColor: var(--borderColor-default);
-    --selection-bgColor: #0969da33;
+    --selection-bgColor: #0969da33; /** Background color for text selection highlights */
     --shadow-inset: inset 0px 1px 0px 0px #1f23280a;
     --shadow-resting-small: 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f;
     --shadow-resting-xsmall: 0px 1px 1px 0px #1f23280f;

package/dist/docs/functional/size/size-coarse.json CHANGED Viewed

@@ -1,47 +1,89 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.44}",
       "$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."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
     "value": "2.75rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Minimum touch target size for coarse pointer devices (touch screens)"
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.12}",
       "$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."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
     "attributes": {},
     "path": ["controlStack", "medium", "gap", "auto"],
     "value": "0.75rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in medium density layouts for touch devices"
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-coarse.json5",
     "isSource": true,
     "original": {
       "$value": "{base.size.16}",
       "$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."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",
     "attributes": {},
     "path": ["controlStack", "small", "gap", "auto"],
     "value": "1rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in small density layouts for touch devices"
   }
 }

package/dist/docs/functional/size/size-fine.json CHANGED Viewed

@@ -1,47 +1,89 @@
 {
   "control-minTarget-auto": {
     "key": "{control.minTarget.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$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."
+        }
+      },
       "key": "{control.minTarget.auto}"
     },
     "name": "control-minTarget-auto",
     "attributes": {},
     "path": ["control", "minTarget", "auto"],
     "value": "1rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Minimum target size for fine pointer devices (mouse)"
   },
   "controlStack-medium-gap-auto": {
     "key": "{controlStack.medium.gap.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$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."
+        }
+      },
       "key": "{controlStack.medium.gap.auto}"
     },
     "name": "controlStack-medium-gap-auto",
     "attributes": {},
     "path": ["controlStack", "medium", "gap", "auto"],
     "value": "0.5rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in medium density layouts for mouse interfaces"
   },
   "controlStack-small-gap-auto": {
     "key": "{controlStack.small.gap.auto}",
+    "$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."
+      }
+    },
     "filePath": "src/tokens/functional/size/size-fine.json5",
     "isSource": true,
     "original": {
       "$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."
+        }
+      },
       "key": "{controlStack.small.gap.auto}"
     },
     "name": "controlStack-small-gap-auto",
     "attributes": {},
     "path": ["controlStack", "small", "gap", "auto"],
     "value": "0.5rem",
-    "type": "dimension"
+    "type": "dimension",
+    "description": "Gap between stacked controls in small density layouts for mouse interfaces"
   }
 }