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

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 (138) hide show
  1. package/DESIGN_TOKENS_SPEC.md +14 -5
  2. package/dist/build/schemas/borderToken.d.ts +45 -3
  3. package/dist/build/schemas/borderToken.js +2 -1
  4. package/dist/build/schemas/colorToken.d.ts +639 -30
  5. package/dist/build/schemas/colorToken.js +3 -2
  6. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  7. package/dist/build/schemas/colorW3cValue.js +42 -0
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +1 -1
  10. package/dist/build/schemas/durationToken.d.ts +1 -1
  11. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  12. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  13. package/dist/build/schemas/gradientToken.d.ts +23 -2
  14. package/dist/build/schemas/gradientToken.js +2 -1
  15. package/dist/build/schemas/numberToken.d.ts +1 -1
  16. package/dist/build/schemas/shadowToken.d.ts +1079 -43
  17. package/dist/build/schemas/shadowToken.js +8 -2
  18. package/dist/build/schemas/stringToken.d.ts +1 -1
  19. package/dist/build/schemas/tokenType.d.ts +1 -1
  20. package/dist/build/schemas/transitionToken.d.ts +1 -1
  21. package/dist/build/schemas/typographyToken.d.ts +1 -1
  22. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  23. package/dist/build/transformers/borderToCss.js +3 -1
  24. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  25. package/dist/build/transformers/colorToHex.js +5 -2
  26. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  27. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  28. package/dist/build/transformers/durationToCss.js +4 -4
  29. package/dist/build/transformers/gradientToCss.js +2 -1
  30. package/dist/build/transformers/shadowToCss.js +4 -1
  31. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  32. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  33. package/dist/build/types/borderTokenValue.d.ts +2 -1
  34. package/dist/build/types/shadowTokenValue.d.ts +2 -1
  35. package/dist/css/base/motion/motion.css +1 -1
  36. package/dist/css/functional/size/radius.css +1 -1
  37. package/dist/css/functional/size/size-coarse.css +1 -0
  38. package/dist/css/functional/size/size-fine.css +1 -0
  39. package/dist/css/functional/size/size.css +5 -0
  40. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +22 -10
  41. package/dist/css/functional/themes/dark-colorblind.css +22 -10
  42. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +22 -10
  43. package/dist/css/functional/themes/dark-dimmed.css +22 -10
  44. package/dist/css/functional/themes/dark-high-contrast.css +22 -10
  45. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +22 -10
  46. package/dist/css/functional/themes/dark-tritanopia.css +22 -10
  47. package/dist/css/functional/themes/dark.css +22 -10
  48. package/dist/css/functional/themes/light-colorblind-high-contrast.css +14 -2
  49. package/dist/css/functional/themes/light-colorblind.css +20 -8
  50. package/dist/css/functional/themes/light-high-contrast.css +14 -2
  51. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +14 -2
  52. package/dist/css/functional/themes/light-tritanopia.css +20 -8
  53. package/dist/css/functional/themes/light.css +20 -8
  54. package/dist/docs/functional/size/radius.json +2 -2
  55. package/dist/docs/functional/size/size-coarse.json +55 -2
  56. package/dist/docs/functional/size/size-fine.json +55 -2
  57. package/dist/docs/functional/size/size.json +135 -0
  58. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2502 -372
  59. package/dist/docs/functional/themes/dark-colorblind.json +2492 -370
  60. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2355 -205
  61. package/dist/docs/functional/themes/dark-dimmed.json +2382 -212
  62. package/dist/docs/functional/themes/dark-high-contrast.json +2507 -373
  63. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2517 -375
  64. package/dist/docs/functional/themes/dark-tritanopia.json +2499 -353
  65. package/dist/docs/functional/themes/dark.json +2501 -371
  66. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2354 -204
  67. package/dist/docs/functional/themes/light-colorblind.json +2344 -202
  68. package/dist/docs/functional/themes/light-high-contrast.json +2359 -205
  69. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2359 -205
  70. package/dist/docs/functional/themes/light-tritanopia.json +2354 -204
  71. package/dist/docs/functional/themes/light.json +2359 -205
  72. package/dist/fallbacks/functional/size/size-coarse.json +2 -1
  73. package/dist/fallbacks/functional/size/size-fine.json +2 -1
  74. package/dist/fallbacks/functional/size/size.json +5 -0
  75. package/dist/figma/dimension/dimension.json +56 -1
  76. package/dist/figma/themes/dark-colorblind.json +49 -1
  77. package/dist/figma/themes/dark-dimmed.json +51 -3
  78. package/dist/figma/themes/dark-high-contrast.json +49 -1
  79. package/dist/figma/themes/dark-tritanopia.json +49 -1
  80. package/dist/figma/themes/dark.json +49 -1
  81. package/dist/figma/themes/light-colorblind.json +49 -1
  82. package/dist/figma/themes/light-high-contrast.json +49 -1
  83. package/dist/figma/themes/light-tritanopia.json +49 -1
  84. package/dist/figma/themes/light.json +49 -1
  85. package/dist/internalCss/dark-colorblind-high-contrast.css +22 -10
  86. package/dist/internalCss/dark-colorblind.css +22 -10
  87. package/dist/internalCss/dark-dimmed-high-contrast.css +22 -10
  88. package/dist/internalCss/dark-dimmed.css +22 -10
  89. package/dist/internalCss/dark-high-contrast.css +22 -10
  90. package/dist/internalCss/dark-tritanopia-high-contrast.css +22 -10
  91. package/dist/internalCss/dark-tritanopia.css +22 -10
  92. package/dist/internalCss/dark.css +22 -10
  93. package/dist/internalCss/light-colorblind-high-contrast.css +14 -2
  94. package/dist/internalCss/light-colorblind.css +20 -8
  95. package/dist/internalCss/light-high-contrast.css +14 -2
  96. package/dist/internalCss/light-tritanopia-high-contrast.css +14 -2
  97. package/dist/internalCss/light-tritanopia.css +20 -8
  98. package/dist/internalCss/light.css +20 -8
  99. package/dist/styleLint/functional/size/radius.json +2 -2
  100. package/dist/styleLint/functional/size/size-coarse.json +57 -4
  101. package/dist/styleLint/functional/size/size-fine.json +57 -4
  102. package/dist/styleLint/functional/size/size.json +135 -0
  103. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2491 -349
  104. package/dist/styleLint/functional/themes/dark-colorblind.json +2481 -347
  105. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2516 -354
  106. package/dist/styleLint/functional/themes/dark-dimmed.json +2543 -361
  107. package/dist/styleLint/functional/themes/dark-high-contrast.json +2496 -350
  108. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2506 -352
  109. package/dist/styleLint/functional/themes/dark-tritanopia.json +2511 -353
  110. package/dist/styleLint/functional/themes/dark.json +2491 -349
  111. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2514 -352
  112. package/dist/styleLint/functional/themes/light-colorblind.json +2505 -351
  113. package/dist/styleLint/functional/themes/light-high-contrast.json +2371 -205
  114. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2519 -353
  115. package/dist/styleLint/functional/themes/light-tritanopia.json +2515 -353
  116. package/dist/styleLint/functional/themes/light.json +2520 -354
  117. package/package.json +4 -3
  118. package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
  119. package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
  120. package/src/tokens/base/color/dark/dark.json5 +475 -95
  121. package/src/tokens/base/color/dark/display-dark.json5 +960 -192
  122. package/src/tokens/base/color/light/display-light.json5 +960 -192
  123. package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
  124. package/src/tokens/base/color/light/light.json5 +475 -95
  125. package/src/tokens/base/size/size.json5 +194 -194
  126. package/src/tokens/component/button.json5 +368 -65
  127. package/src/tokens/component/reactionButton.json5 +20 -4
  128. package/src/tokens/functional/border/border.json5 +29 -1
  129. package/src/tokens/functional/color/bgColor.json5 +10 -2
  130. package/src/tokens/functional/color/borderColor.json5 +8 -1
  131. package/src/tokens/functional/color/control.json5 +160 -32
  132. package/src/tokens/functional/color/fgColor.json5 +5 -1
  133. package/src/tokens/functional/color/syntax.json5 +10 -2
  134. package/src/tokens/functional/shadow/shadow.json5 +576 -0
  135. package/src/tokens/functional/size/radius.json5 +1 -1
  136. package/src/tokens/functional/size/size-coarse.json5 +15 -0
  137. package/src/tokens/functional/size/size-fine.json5 +15 -0
  138. package/src/tokens/functional/size/size.json5 +50 -0
@@ -351,7 +351,7 @@
351
351
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
352
352
  --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
353
353
  --borderColor-success-muted: var(--base-color-blue-3); /** Subtle success border for positive feedback elements */
354
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
354
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
355
355
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
356
356
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
357
357
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -952,6 +952,7 @@
952
952
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
953
953
  --border-success-emphasis: 0.0625rem solid #0349b4;
954
954
  --border-success-muted: 0.0625rem solid #368cf9;
955
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
955
956
  --border-transparent: 0.0625rem solid #ffffff00;
956
957
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
957
958
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -1113,6 +1114,8 @@
1113
1114
  --avatar-borderColor: var(--borderColor-emphasis);
1114
1115
  --border-closed-emphasis: var(--border-danger-emphasis);
1115
1116
  --border-closed-muted: var(--border-danger-muted);
1117
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1118
+ --border-draft-muted: 0.0625rem solid #454c54;
1116
1119
  --border-emphasis: 0.0625rem solid #454c54;
1117
1120
  --border-muted: 0.0625rem solid #454c54;
1118
1121
  --border-open-emphasis: var(--border-success-emphasis);
@@ -1123,16 +1126,19 @@
1123
1126
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
1124
1127
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
1125
1128
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
1129
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
1126
1130
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
1127
1131
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
1128
1132
  --button-default-borderColor-active: var(--control-borderColor-rest);
1129
1133
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1130
1134
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1135
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1131
1136
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
1132
1137
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1133
1138
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1134
1139
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1135
1140
  --button-primary-fgColor-rest: var(--fgColor-white);
1141
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1136
1142
  --button-primary-iconColor-rest: #ffffffcc;
1137
1143
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1138
1144
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -1547,7 +1553,7 @@
1547
1553
  --borderColor-sponsors-muted: var(--base-color-pink-3); /** Subtle border for GitHub Sponsors content */
1548
1554
  --borderColor-success-emphasis: var(--base-color-blue-5); /** Strong success border for prominent positive elements */
1549
1555
  --borderColor-success-muted: var(--base-color-blue-3); /** Subtle success border for positive feedback elements */
1550
- --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements */
1556
+ --borderColor-translucent: var(--base-color-neutral-9); /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1551
1557
  --borderColor-transparent: var(--base-color-transparent); /** Fully transparent border */
1552
1558
  --borderWidth-default: var(--borderWidth-thin); /** Default border width for most UI elements. Alias of borderWidth.thin (1px) */
1553
1559
  --boxShadow-thick: inset 0 0 0 var(--borderWidth-thick); /** Thick shadow (2px) used instead of a border for emphasis without layout shift */
@@ -2148,6 +2154,7 @@
2148
2154
  --border-sponsors-muted: 0.0625rem solid #ed4baf;
2149
2155
  --border-success-emphasis: 0.0625rem solid #0349b4;
2150
2156
  --border-success-muted: 0.0625rem solid #368cf9;
2157
+ --border-translucent: 0.0625rem solid #59636e; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2151
2158
  --border-transparent: 0.0625rem solid #ffffff00;
2152
2159
  --borderColor-closed-muted: var(--borderColor-default); /** Subtle border for closed state indicators */
2153
2160
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
@@ -2309,6 +2316,8 @@
2309
2316
  --avatar-borderColor: var(--borderColor-emphasis);
2310
2317
  --border-closed-emphasis: var(--border-danger-emphasis);
2311
2318
  --border-closed-muted: var(--border-danger-muted);
2319
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2320
+ --border-draft-muted: 0.0625rem solid #454c54;
2312
2321
  --border-emphasis: 0.0625rem solid #454c54;
2313
2322
  --border-muted: 0.0625rem solid #454c54;
2314
2323
  --border-open-emphasis: var(--border-success-emphasis);
@@ -2319,16 +2328,19 @@
2319
2328
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
2320
2329
  --button-danger-bgColor-disabled: var(--control-bgColor-disabled);
2321
2330
  --button-danger-borderColor-rest: var(--control-borderColor-rest);
2331
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2322
2332
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2323
2333
  --button-default-bgColor-disabled: var(--control-bgColor-disabled);
2324
2334
  --button-default-borderColor-active: var(--control-borderColor-rest);
2325
2335
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2326
2336
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2337
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2327
2338
  --button-invisible-borderColor-hover: var(--control-transparent-borderColor-hover);
2328
2339
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2329
2340
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2330
2341
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2331
2342
  --button-primary-fgColor-rest: var(--fgColor-white);
2343
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2332
2344
  --button-primary-iconColor-rest: #ffffffcc;
2333
2345
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2334
2346
  --buttonKeybindingHint-danger-fgColor-active: var(--fgColor-onEmphasis);
@@ -980,13 +980,14 @@
980
980
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
981
981
  --borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
982
982
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
983
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
983
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
984
984
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
985
985
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
986
986
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
987
987
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
988
988
  --button-danger-fgColor-active: var(--base-color-neutral-0);
989
989
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
990
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
990
991
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
991
992
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
992
993
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -1112,9 +1113,12 @@
1112
1113
  --avatar-borderColor: var(--borderColor-translucent);
1113
1114
  --border-closed-emphasis: var(--border-danger-emphasis);
1114
1115
  --border-closed-muted: var(--border-danger-muted);
1116
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1117
+ --border-draft-muted: 0.0625rem solid #d1d9e066;
1115
1118
  --border-muted: 0.0625rem solid #d1d9e0b3;
1116
1119
  --border-open-emphasis: var(--border-success-emphasis);
1117
1120
  --border-open-muted: var(--border-success-muted);
1121
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1118
1122
  --border-upsell-emphasis: 0.0625rem solid #8250df;
1119
1123
  --border-upsell-muted: 0.0625rem solid #c297ff66;
1120
1124
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -1124,11 +1128,13 @@
1124
1128
  --button-default-borderColor-active: var(--control-borderColor-rest);
1125
1129
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1126
1130
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1131
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1127
1132
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1128
1133
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1129
1134
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1130
1135
  --button-primary-borderColor-rest: var(--borderColor-translucent);
1131
1136
  --button-primary-fgColor-rest: var(--fgColor-white);
1137
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1132
1138
  --button-primary-iconColor-rest: #ffffffcc;
1133
1139
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1134
1140
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -1186,10 +1192,10 @@
1186
1192
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1193
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1194
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --shadow-floating-medium: 0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1195
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1196
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1191
1197
  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1192
- --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1198
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1193
1199
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1200
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1201
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2176,13 +2182,14 @@
2176
2182
  --borderColor-draft-emphasis: var(--borderColor-neutral-emphasis); /** Strong border for draft state badges */
2177
2183
  --borderColor-draft-muted: #d1d9e066; /** Subtle border for draft state indicators */
2178
2184
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
2179
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
2185
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2180
2186
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
2181
2187
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
2182
2188
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
2183
2189
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2184
2190
  --button-danger-fgColor-active: var(--base-color-neutral-0);
2185
2191
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
2192
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2186
2193
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
2187
2194
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2188
2195
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -2308,9 +2315,12 @@
2308
2315
  --avatar-borderColor: var(--borderColor-translucent);
2309
2316
  --border-closed-emphasis: var(--border-danger-emphasis);
2310
2317
  --border-closed-muted: var(--border-danger-muted);
2318
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2319
+ --border-draft-muted: 0.0625rem solid #d1d9e066;
2311
2320
  --border-muted: 0.0625rem solid #d1d9e0b3;
2312
2321
  --border-open-emphasis: var(--border-success-emphasis);
2313
2322
  --border-open-muted: var(--border-success-muted);
2323
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2314
2324
  --border-upsell-emphasis: 0.0625rem solid #8250df;
2315
2325
  --border-upsell-muted: 0.0625rem solid #c297ff66;
2316
2326
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -2320,11 +2330,13 @@
2320
2330
  --button-default-borderColor-active: var(--control-borderColor-rest);
2321
2331
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2322
2332
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2333
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2323
2334
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2324
2335
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2325
2336
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2326
2337
  --button-primary-borderColor-rest: var(--borderColor-translucent);
2327
2338
  --button-primary-fgColor-rest: var(--fgColor-white);
2339
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2328
2340
  --button-primary-iconColor-rest: #ffffffcc;
2329
2341
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2330
2342
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -2382,10 +2394,10 @@
2382
2394
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2395
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2396
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --shadow-floating-medium: 0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2397
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2398
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2387
2399
  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2388
- --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2400
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2389
2401
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2402
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2403
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -979,13 +979,14 @@
979
979
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
980
980
  --borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
981
981
  --borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
982
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
982
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
983
983
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
984
984
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
985
985
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
986
986
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
987
987
  --button-danger-fgColor-active: var(--base-color-neutral-0);
988
988
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
989
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
989
990
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
990
991
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
991
992
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -1111,9 +1112,11 @@
1111
1112
  --avatar-borderColor: var(--borderColor-translucent);
1112
1113
  --border-closed-emphasis: var(--border-danger-emphasis);
1113
1114
  --border-closed-muted: var(--border-danger-muted);
1115
+ --border-draft-emphasis: 0.0625rem solid #59636e;
1114
1116
  --border-muted: 0.0625rem solid #d1d9e0b3;
1115
1117
  --border-open-emphasis: var(--border-success-emphasis);
1116
1118
  --border-open-muted: var(--border-success-muted);
1119
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
1117
1120
  --border-upsell-emphasis: 0.0625rem solid #8250df;
1118
1121
  --border-upsell-muted: 0.0625rem solid #c297ff66;
1119
1122
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -1123,11 +1126,13 @@
1123
1126
  --button-default-borderColor-active: var(--control-borderColor-rest);
1124
1127
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
1125
1128
  --button-default-borderColor-rest: var(--control-borderColor-rest);
1129
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
1126
1130
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
1127
1131
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
1128
1132
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
1129
1133
  --button-primary-borderColor-rest: var(--borderColor-translucent);
1130
1134
  --button-primary-fgColor-rest: var(--fgColor-white);
1135
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
1131
1136
  --button-primary-iconColor-rest: #ffffffcc;
1132
1137
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
1133
1138
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -1186,10 +1191,11 @@
1186
1191
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
1187
1192
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
1188
1193
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
1189
- --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1190
- --shadow-floating-medium: 0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1194
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
1195
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
1191
1196
  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
1192
- --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1197
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
1198
+ --border-draft-muted: 0.0625rem solid #d1d9e0b3;
1193
1199
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1194
1200
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
1195
1201
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -2175,13 +2181,14 @@
2175
2181
  --borderColor-muted: #d1d9e0b3; /** Subtle border for secondary elements and light separators */
2176
2182
  --borderColor-open-emphasis: var(--borderColor-success-emphasis); /** Strong border for open state badges */
2177
2183
  --borderColor-open-muted: var(--borderColor-success-muted); /** Subtle border for open state indicators */
2178
- --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements */
2184
+ --borderColor-translucent: #1f232826; /** Semi-transparent border for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2179
2185
  --borderColor-upsell-emphasis: var(--borderColor-done-emphasis); /** Strong border for prominent upsell elements */
2180
2186
  --borderColor-upsell-muted: var(--borderColor-done-muted); /** Subtle border for upsell and promotional content */
2181
2187
  --button-danger-bgColor-hover: var(--bgColor-danger-emphasis);
2182
2188
  --button-danger-bgColor-rest: var(--control-bgColor-rest);
2183
2189
  --button-danger-fgColor-active: var(--base-color-neutral-0);
2184
2190
  --button-danger-fgColor-hover: var(--base-color-neutral-0);
2191
+ --button-danger-iconColor-disabled: var(--button-danger-fgColor-disabled);
2185
2192
  --button-danger-iconColor-hover: var(--base-color-neutral-0);
2186
2193
  --button-danger-iconColor-rest: var(--button-danger-fgColor-rest);
2187
2194
  --button-default-bgColor-active: var(--control-bgColor-active);
@@ -2307,9 +2314,11 @@
2307
2314
  --avatar-borderColor: var(--borderColor-translucent);
2308
2315
  --border-closed-emphasis: var(--border-danger-emphasis);
2309
2316
  --border-closed-muted: var(--border-danger-muted);
2317
+ --border-draft-emphasis: 0.0625rem solid #59636e;
2310
2318
  --border-muted: 0.0625rem solid #d1d9e0b3;
2311
2319
  --border-open-emphasis: var(--border-success-emphasis);
2312
2320
  --border-open-muted: var(--border-success-muted);
2321
+ --border-translucent: 0.0625rem solid #1f232826; /** Semi-transparent border shorthand for overlays and layered elements. Border-specific token — no bgColor-translucent counterpart exists by design. */
2313
2322
  --border-upsell-emphasis: 0.0625rem solid #8250df;
2314
2323
  --border-upsell-muted: 0.0625rem solid #c297ff66;
2315
2324
  --borderColor-neutral-muted: var(--borderColor-muted); /** Subtle neutral semantic border */
@@ -2319,11 +2328,13 @@
2319
2328
  --button-default-borderColor-active: var(--control-borderColor-rest);
2320
2329
  --button-default-borderColor-disabled: var(--control-borderColor-disabled);
2321
2330
  --button-default-borderColor-rest: var(--control-borderColor-rest);
2331
+ --button-default-fgColor-disabled: var(--control-fgColor-disabled);
2322
2332
  --button-invisible-fgColor-disabled: var(--control-fgColor-disabled);
2323
2333
  --button-invisible-iconColor-disabled: var(--control-fgColor-disabled);
2324
2334
  --button-outline-bgColor-disabled: var(--control-bgColor-disabled);
2325
2335
  --button-primary-borderColor-rest: var(--borderColor-translucent);
2326
2336
  --button-primary-fgColor-rest: var(--fgColor-white);
2337
+ --button-primary-iconColor-disabled: var(--button-primary-fgColor-disabled);
2327
2338
  --button-primary-iconColor-rest: #ffffffcc;
2328
2339
  --buttonKeybindingHint-danger-bgColor-disabled: var(--buttonKeybindingHint-default-bgColor-disabled);
2329
2340
  --buttonKeybindingHint-danger-borderColor-hover: var(--borderColor-translucent);
@@ -2382,10 +2393,11 @@
2382
2393
  --buttonKeybindingHint-danger-borderColor-disabled: var(--buttonKeybindingHint-default-borderColor-disabled);
2383
2394
  --buttonKeybindingHint-danger-borderColor-rest: var(--buttonKeybindingHint-default-borderColor-rest);
2384
2395
  --buttonKeybindingHint-danger-fgColor-disabled: var(--buttonKeybindingHint-default-fgColor-disabled);
2385
- --shadow-floating-large: 0 0 0 1px #d1d9e0, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2386
- --shadow-floating-medium: 0 0 0 1px #d1d9e0, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2396
+ --shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d; /** Large floating shadow for modals and dialogs */
2397
+ --shadow-floating-medium: 0 0 0 1px #d1d9e000, 0 8px 16px -4px #25292e14, 0 4px 32px -4px #25292e14, 0 24px 48px -12px #25292e14, 0 48px 96px -24px #25292e14; /** Medium floating shadow for popovers and action menus */
2387
2398
  --shadow-floating-small: 0 0 0 1px #d1d9e080, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f; /** Small floating shadow for dropdowns, tooltips, and small overlays */
2388
- --shadow-floating-xlarge: 0 0 0 1px #d1d9e0, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2399
+ --shadow-floating-xlarge: 0 0 0 1px #d1d9e000, 0 56px 112px 0 #25292e52; /** Extra large floating shadow for full-screen overlays and sheets */
2400
+ --border-draft-muted: 0.0625rem solid #d1d9e0b3;
2389
2401
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
2390
2402
  --button-outline-borderColor-hover: var(--button-primary-borderColor-hover);
2391
2403
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
@@ -83,7 +83,7 @@
83
83
  "borderRadius-large": {
84
84
  "key": "{borderRadius.large}",
85
85
  "$value": ["0.75rem", "12px"],
86
- "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
86
+ "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
87
87
  "$type": "dimension",
88
88
  "$extensions": {
89
89
  "org.primer.figma": {
@@ -105,7 +105,7 @@
105
105
  "value": 12,
106
106
  "unit": "px"
107
107
  },
108
- "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired. Always use this for buttons.",
108
+ "$description": "Large border radius (12px). Use for larger containers, dialogs, or when more visual softness is desired.",
109
109
  "$type": "dimension",
110
110
  "$extensions": {
111
111
  "org.primer.figma": {
@@ -28,12 +28,52 @@
28
28
  "attributes": {},
29
29
  "path": ["control", "minTarget", "auto"]
30
30
  },
31
+ "controlStack-large-gap-auto": {
32
+ "key": "{controlStack.large.gap.auto}",
33
+ "$value": ["0.75rem", "12px"],
34
+ "$type": "dimension",
35
+ "$extensions": {
36
+ "org.primer.figma": {
37
+ "collection": "pattern/size",
38
+ "scopes": ["gap"]
39
+ },
40
+ "org.primer.llm": {
41
+ "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
42
+ "rules": "Use for spacing between interactive controls on touch devices in large layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
43
+ }
44
+ },
45
+ "filePath": "src/tokens/functional/size/size-coarse.json5",
46
+ "isSource": true,
47
+ "$description": "Gap between stacked controls in large density layouts for touch devices",
48
+ "original": {
49
+ "$value": "{base.size.12}",
50
+ "$type": "dimension",
51
+ "$extensions": {
52
+ "org.primer.figma": {
53
+ "collection": "pattern/size",
54
+ "scopes": ["gap"]
55
+ },
56
+ "org.primer.llm": {
57
+ "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
58
+ "rules": "Use for spacing between interactive controls on touch devices in large layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
59
+ }
60
+ },
61
+ "$description": "Gap between stacked controls in large density layouts for touch devices",
62
+ "key": "{controlStack.large.gap.auto}"
63
+ },
64
+ "name": "controlStack-large-gap-auto",
65
+ "attributes": {},
66
+ "path": ["controlStack", "large", "gap", "auto"]
67
+ },
31
68
  "controlStack-medium-gap-auto": {
32
69
  "key": "{controlStack.medium.gap.auto}",
33
70
  "$value": ["0.75rem", "12px"],
34
71
  "$type": "dimension",
35
- "$description": "Gap between stacked controls in medium density layouts for touch devices",
36
72
  "$extensions": {
73
+ "org.primer.figma": {
74
+ "collection": "pattern/size",
75
+ "scopes": ["gap"]
76
+ },
37
77
  "org.primer.llm": {
38
78
  "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
39
79
  "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
@@ -41,16 +81,21 @@
41
81
  },
42
82
  "filePath": "src/tokens/functional/size/size-coarse.json5",
43
83
  "isSource": true,
84
+ "$description": "Gap between stacked controls in medium density layouts for touch devices",
44
85
  "original": {
45
86
  "$value": "{base.size.12}",
46
87
  "$type": "dimension",
47
- "$description": "Gap between stacked controls in medium density layouts for touch devices",
48
88
  "$extensions": {
89
+ "org.primer.figma": {
90
+ "collection": "pattern/size",
91
+ "scopes": ["gap"]
92
+ },
49
93
  "org.primer.llm": {
50
94
  "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
51
95
  "rules": "Use for spacing between interactive controls on touch devices in standard layouts. Do NOT use for desktop/mouse interfaces."
52
96
  }
53
97
  },
98
+ "$description": "Gap between stacked controls in medium density layouts for touch devices",
54
99
  "key": "{controlStack.medium.gap.auto}"
55
100
  },
56
101
  "name": "controlStack-medium-gap-auto",
@@ -61,8 +106,11 @@
61
106
  "key": "{controlStack.small.gap.auto}",
62
107
  "$value": ["1rem", "16px"],
63
108
  "$type": "dimension",
64
- "$description": "Gap between stacked controls in small density layouts for touch devices",
65
109
  "$extensions": {
110
+ "org.primer.figma": {
111
+ "collection": "pattern/size",
112
+ "scopes": ["gap"]
113
+ },
66
114
  "org.primer.llm": {
67
115
  "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
68
116
  "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
@@ -70,16 +118,21 @@
70
118
  },
71
119
  "filePath": "src/tokens/functional/size/size-coarse.json5",
72
120
  "isSource": true,
121
+ "$description": "Gap between stacked controls in small density layouts for touch devices",
73
122
  "original": {
74
123
  "$value": "{base.size.16}",
75
124
  "$type": "dimension",
76
- "$description": "Gap between stacked controls in small density layouts for touch devices",
77
125
  "$extensions": {
126
+ "org.primer.figma": {
127
+ "collection": "pattern/size",
128
+ "scopes": ["gap"]
129
+ },
78
130
  "org.primer.llm": {
79
131
  "usage": ["touch-control-spacing", "mobile-form-gap", "stacked-buttons"],
80
132
  "rules": "Use for spacing between interactive controls on touch devices in compact layouts. Provides adequate touch separation. Do NOT use for desktop/mouse interfaces."
81
133
  }
82
134
  },
135
+ "$description": "Gap between stacked controls in small density layouts for touch devices",
83
136
  "key": "{controlStack.small.gap.auto}"
84
137
  },
85
138
  "name": "controlStack-small-gap-auto",
@@ -28,12 +28,52 @@
28
28
  "attributes": {},
29
29
  "path": ["control", "minTarget", "auto"]
30
30
  },
31
+ "controlStack-large-gap-auto": {
32
+ "key": "{controlStack.large.gap.auto}",
33
+ "$value": ["0.5rem", "8px"],
34
+ "$type": "dimension",
35
+ "$extensions": {
36
+ "org.primer.figma": {
37
+ "collection": "pattern/size",
38
+ "scopes": ["gap"]
39
+ },
40
+ "org.primer.llm": {
41
+ "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
42
+ "rules": "Use for spacing between interactive controls on desktop in large layouts. Do NOT use for mobile/touch interfaces."
43
+ }
44
+ },
45
+ "filePath": "src/tokens/functional/size/size-fine.json5",
46
+ "isSource": true,
47
+ "$description": "Gap between stacked controls in large density layouts for mouse interfaces",
48
+ "original": {
49
+ "$value": "{base.size.8}",
50
+ "$type": "dimension",
51
+ "$extensions": {
52
+ "org.primer.figma": {
53
+ "collection": "pattern/size",
54
+ "scopes": ["gap"]
55
+ },
56
+ "org.primer.llm": {
57
+ "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
58
+ "rules": "Use for spacing between interactive controls on desktop in large layouts. Do NOT use for mobile/touch interfaces."
59
+ }
60
+ },
61
+ "$description": "Gap between stacked controls in large density layouts for mouse interfaces",
62
+ "key": "{controlStack.large.gap.auto}"
63
+ },
64
+ "name": "controlStack-large-gap-auto",
65
+ "attributes": {},
66
+ "path": ["controlStack", "large", "gap", "auto"]
67
+ },
31
68
  "controlStack-medium-gap-auto": {
32
69
  "key": "{controlStack.medium.gap.auto}",
33
70
  "$value": ["0.5rem", "8px"],
34
71
  "$type": "dimension",
35
- "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
36
72
  "$extensions": {
73
+ "org.primer.figma": {
74
+ "collection": "pattern/size",
75
+ "scopes": ["gap"]
76
+ },
37
77
  "org.primer.llm": {
38
78
  "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
39
79
  "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
@@ -41,16 +81,21 @@
41
81
  },
42
82
  "filePath": "src/tokens/functional/size/size-fine.json5",
43
83
  "isSource": true,
84
+ "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
44
85
  "original": {
45
86
  "$value": "{base.size.8}",
46
87
  "$type": "dimension",
47
- "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
48
88
  "$extensions": {
89
+ "org.primer.figma": {
90
+ "collection": "pattern/size",
91
+ "scopes": ["gap"]
92
+ },
49
93
  "org.primer.llm": {
50
94
  "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
51
95
  "rules": "Use for spacing between interactive controls on desktop in standard layouts. Do NOT use for mobile/touch interfaces."
52
96
  }
53
97
  },
98
+ "$description": "Gap between stacked controls in medium density layouts for mouse interfaces",
54
99
  "key": "{controlStack.medium.gap.auto}"
55
100
  },
56
101
  "name": "controlStack-medium-gap-auto",
@@ -61,8 +106,11 @@
61
106
  "key": "{controlStack.small.gap.auto}",
62
107
  "$value": ["0.5rem", "8px"],
63
108
  "$type": "dimension",
64
- "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
65
109
  "$extensions": {
110
+ "org.primer.figma": {
111
+ "collection": "pattern/size",
112
+ "scopes": ["gap"]
113
+ },
66
114
  "org.primer.llm": {
67
115
  "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
68
116
  "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
@@ -70,16 +118,21 @@
70
118
  },
71
119
  "filePath": "src/tokens/functional/size/size-fine.json5",
72
120
  "isSource": true,
121
+ "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
73
122
  "original": {
74
123
  "$value": "{base.size.8}",
75
124
  "$type": "dimension",
76
- "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
77
125
  "$extensions": {
126
+ "org.primer.figma": {
127
+ "collection": "pattern/size",
128
+ "scopes": ["gap"]
129
+ },
78
130
  "org.primer.llm": {
79
131
  "usage": ["desktop-control-spacing", "form-gap", "stacked-buttons"],
80
132
  "rules": "Use for spacing between interactive controls on desktop in compact layouts. Tighter spacing than touch devices. Do NOT use for mobile/touch interfaces."
81
133
  }
82
134
  },
135
+ "$description": "Gap between stacked controls in small density layouts for mouse interfaces",
83
136
  "key": "{controlStack.small.gap.auto}"
84
137
  },
85
138
  "name": "controlStack-small-gap-auto",