@primer/primitives 7.15.4-rc.b720f44 → 7.15.5-rc.2aa7771

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 (188) hide show
  1. package/dist/css/base/size/size.css +19 -0
  2. package/dist/css/base/typography/typography.css +6 -0
  3. package/dist/css/functional/motion/motion.css +5 -0
  4. package/dist/css/functional/size/border.css +14 -0
  5. package/dist/css/functional/size/breakpoints.css +8 -0
  6. package/dist/css/functional/size/size-coarse.css +7 -0
  7. package/dist/css/functional/size/size-fine.css +7 -0
  8. package/dist/css/functional/size/size.css +73 -0
  9. package/dist/css/functional/size/viewport.css +6 -0
  10. package/dist/css/functional/themes/dark-colorblind.css +841 -0
  11. package/dist/css/functional/themes/dark-dimmed.css +841 -0
  12. package/dist/css/functional/themes/dark-high-contrast.css +841 -0
  13. package/dist/css/functional/themes/dark-tritanopia.css +841 -0
  14. package/dist/css/functional/themes/dark.css +841 -0
  15. package/dist/css/functional/themes/light-colorblind.css +841 -0
  16. package/dist/css/functional/themes/light-high-contrast.css +841 -0
  17. package/dist/css/functional/themes/light-tritanopia.css +841 -0
  18. package/dist/css/functional/themes/light.css +841 -0
  19. package/dist/css/functional/typography/typography.css +47 -0
  20. package/dist/docs/base/size/size.json +427 -0
  21. package/dist/docs/base/typography/typography.json +54 -0
  22. package/dist/docs/functional/motion/motion.json +47 -0
  23. package/dist/docs/functional/size/border.json +234 -0
  24. package/dist/docs/functional/size/breakpoints.json +152 -0
  25. package/dist/docs/functional/size/size-coarse.json +41 -0
  26. package/dist/docs/functional/size/size-fine.json +41 -0
  27. package/dist/docs/functional/size/size.json +1813 -0
  28. package/dist/docs/functional/size/viewport.json +80 -0
  29. package/dist/docs/functional/themes/dark-colorblind.json +11230 -0
  30. package/dist/docs/functional/themes/dark-dimmed.json +11234 -0
  31. package/dist/docs/functional/themes/dark-high-contrast.json +11252 -0
  32. package/dist/docs/functional/themes/dark-tritanopia.json +11236 -0
  33. package/dist/docs/functional/themes/dark.json +11234 -0
  34. package/dist/docs/functional/themes/light-colorblind.json +11182 -0
  35. package/dist/docs/functional/themes/light-high-contrast.json +11184 -0
  36. package/dist/docs/functional/themes/light-tritanopia.json +11174 -0
  37. package/dist/docs/functional/themes/light.json +11172 -0
  38. package/dist/docs/functional/typography/typography.json +663 -0
  39. package/dist/fallbacks/base/size/size.json +19 -0
  40. package/dist/fallbacks/base/typography/typography.json +6 -0
  41. package/dist/fallbacks/functional/motion/motion.json +5 -0
  42. package/dist/fallbacks/functional/size/border.json +14 -0
  43. package/dist/fallbacks/functional/size/breakpoints.json +8 -0
  44. package/dist/fallbacks/functional/size/size-coarse.json +5 -0
  45. package/dist/fallbacks/functional/size/size-fine.json +5 -0
  46. package/dist/fallbacks/functional/size/size.json +73 -0
  47. package/dist/fallbacks/functional/size/viewport.json +8 -0
  48. package/dist/fallbacks/functional/typography/typography.json +47 -0
  49. package/dist/figma/dimension/dimension.json +1058 -0
  50. package/dist/figma/figma.json +64 -0
  51. package/dist/figma/scales/dark.json +1398 -0
  52. package/dist/figma/scales/light.json +1398 -0
  53. package/dist/figma/themes/dark.json +5180 -0
  54. package/dist/figma/themes/light.json +5150 -0
  55. package/dist/js/colors/dark.js +15 -15
  56. package/dist/js/colors/light.js +1 -1
  57. package/dist/js/colors/light_colorblind.js +1 -1
  58. package/dist/js/colors/light_high_contrast.js +1 -1
  59. package/dist/js/colors/light_tritanopia.js +1 -1
  60. package/dist/json/colors/dark.json +15 -15
  61. package/dist/json/colors/light.json +1 -1
  62. package/dist/json/colors/light_colorblind.json +1 -1
  63. package/dist/json/colors/light_high_contrast.json +1 -1
  64. package/dist/json/colors/light_tritanopia.json +1 -1
  65. package/dist/removed/color.json +421 -0
  66. package/dist/scss/base/size/size.scss +17 -0
  67. package/dist/scss/base/typography/typography.scss +4 -0
  68. package/dist/scss/colors/_dark.scss +15 -15
  69. package/dist/scss/colors/_light.scss +1 -1
  70. package/dist/scss/colors/_light_colorblind.scss +1 -1
  71. package/dist/scss/colors/_light_high_contrast.scss +1 -1
  72. package/dist/scss/colors/_light_tritanopia.scss +1 -1
  73. package/dist/scss/functional/motion/motion.scss +3 -0
  74. package/dist/scss/functional/size/border.scss +12 -0
  75. package/dist/scss/functional/size/breakpoints.scss +6 -0
  76. package/dist/scss/functional/size/size-coarse.scss +3 -0
  77. package/dist/scss/functional/size/size-fine.scss +3 -0
  78. package/dist/scss/functional/size/size.scss +71 -0
  79. package/dist/scss/functional/size/viewport.scss +6 -0
  80. package/dist/scss/functional/themes/dark-colorblind.scss +417 -0
  81. package/dist/scss/functional/themes/dark-dimmed.scss +417 -0
  82. package/dist/scss/functional/themes/dark-high-contrast.scss +417 -0
  83. package/dist/scss/functional/themes/dark-tritanopia.scss +417 -0
  84. package/dist/scss/functional/themes/dark.scss +417 -0
  85. package/dist/scss/functional/themes/light-colorblind.scss +417 -0
  86. package/dist/scss/functional/themes/light-high-contrast.scss +417 -0
  87. package/dist/scss/functional/themes/light-tritanopia.scss +417 -0
  88. package/dist/scss/functional/themes/light.scss +417 -0
  89. package/dist/scss/functional/typography/typography.scss +45 -0
  90. package/dist/ts/colors/dark.ts +15 -15
  91. package/dist/ts/colors/light.ts +1 -1
  92. package/dist/ts/colors/light_colorblind.ts +1 -1
  93. package/dist/ts/colors/light_high_contrast.ts +1 -1
  94. package/dist/ts/colors/light_tritanopia.ts +1 -1
  95. package/package.json +1 -1
  96. package/tokens-next-private/css/functional/size/breakpoints.css +1 -1
  97. package/tokens-next-private/css/functional/size/viewport.css +1 -1
  98. package/tokens-next-private/css/functional/themes/dark-colorblind.css +22 -22
  99. package/tokens-next-private/css/functional/themes/dark-dimmed.css +22 -22
  100. package/tokens-next-private/css/functional/themes/dark-high-contrast.css +2 -2
  101. package/tokens-next-private/css/functional/themes/dark-tritanopia.css +22 -22
  102. package/tokens-next-private/css/functional/themes/dark.css +22 -22
  103. package/tokens-next-private/css/functional/themes/light-colorblind.css +4 -4
  104. package/tokens-next-private/css/functional/themes/light-high-contrast.css +2 -2
  105. package/tokens-next-private/css/functional/themes/light-tritanopia.css +4 -4
  106. package/tokens-next-private/css/functional/themes/light.css +4 -4
  107. package/tokens-next-private/docs/functional/size/border.json +32 -8
  108. package/tokens-next-private/docs/functional/size/breakpoints.json +2 -2
  109. package/tokens-next-private/docs/functional/size/size.json +48 -12
  110. package/tokens-next-private/docs/functional/size/viewport.json +1 -1
  111. package/tokens-next-private/docs/functional/themes/dark-colorblind.json +463 -127
  112. package/tokens-next-private/docs/functional/themes/dark-dimmed.json +463 -127
  113. package/tokens-next-private/docs/functional/themes/dark-high-contrast.json +450 -114
  114. package/tokens-next-private/docs/functional/themes/dark-tritanopia.json +463 -127
  115. package/tokens-next-private/docs/functional/themes/dark.json +463 -127
  116. package/tokens-next-private/docs/functional/themes/light-colorblind.json +453 -117
  117. package/tokens-next-private/docs/functional/themes/light-high-contrast.json +450 -114
  118. package/tokens-next-private/docs/functional/themes/light-tritanopia.json +453 -117
  119. package/tokens-next-private/docs/functional/themes/light.json +453 -117
  120. package/tokens-next-private/fallbacks/functional/size/breakpoints.json +1 -1
  121. package/tokens-next-private/fallbacks/functional/size/viewport.json +1 -1
  122. package/tokens-next-private/figma/dimension/dimension.json +41 -11
  123. package/tokens-next-private/figma/themes/dark.json +254 -86
  124. package/tokens-next-private/figma/themes/light.json +230 -62
  125. package/tokens-next-private/scss/functional/size/breakpoints.scss +1 -1
  126. package/tokens-next-private/scss/functional/size/viewport.scss +1 -1
  127. package/tokens-next-private/scss/functional/themes/dark-colorblind.scss +11 -11
  128. package/tokens-next-private/scss/functional/themes/dark-dimmed.scss +11 -11
  129. package/tokens-next-private/scss/functional/themes/dark-high-contrast.scss +1 -1
  130. package/tokens-next-private/scss/functional/themes/dark-tritanopia.scss +11 -11
  131. package/tokens-next-private/scss/functional/themes/dark.scss +11 -11
  132. package/tokens-next-private/scss/functional/themes/light-colorblind.scss +2 -2
  133. package/tokens-next-private/scss/functional/themes/light-high-contrast.scss +1 -1
  134. package/tokens-next-private/scss/functional/themes/light-tritanopia.scss +2 -2
  135. package/tokens-next-private/scss/functional/themes/light.scss +2 -2
  136. package/tokens-v2-private/css/tokens/base/size/size.css +1 -1
  137. package/tokens-v2-private/css/tokens/base/typography/typography.css +1 -1
  138. package/tokens-v2-private/css/tokens/functional/size/border.css +1 -1
  139. package/tokens-v2-private/css/tokens/functional/size/breakpoints.css +1 -1
  140. package/tokens-v2-private/css/tokens/functional/size/size-coarse.css +1 -1
  141. package/tokens-v2-private/css/tokens/functional/size/size-fine.css +1 -1
  142. package/tokens-v2-private/css/tokens/functional/size/size.css +1 -1
  143. package/tokens-v2-private/css/tokens/functional/typography/typography.css +1 -1
  144. package/tokens-v2-private/js/module/tokens/base/size/size.js +1 -1
  145. package/tokens-v2-private/js/module/tokens/base/typography/typography.js +1 -1
  146. package/tokens-v2-private/js/module/tokens/functional/size/border.js +1 -1
  147. package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js +1 -1
  148. package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js +1 -1
  149. package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js +1 -1
  150. package/tokens-v2-private/js/module/tokens/functional/size/size.js +1 -1
  151. package/tokens-v2-private/js/module/tokens/functional/size/viewport.js +1 -1
  152. package/tokens-v2-private/js/module/tokens/functional/typography/typography.js +1 -1
  153. package/tokens-v2-private/js/tokens/base/size/size.js +1 -1
  154. package/tokens-v2-private/js/tokens/base/typography/typography.js +1 -1
  155. package/tokens-v2-private/js/tokens/functional/size/border.js +1 -1
  156. package/tokens-v2-private/js/tokens/functional/size/breakpoints.js +1 -1
  157. package/tokens-v2-private/js/tokens/functional/size/size-coarse.js +1 -1
  158. package/tokens-v2-private/js/tokens/functional/size/size-fine.js +1 -1
  159. package/tokens-v2-private/js/tokens/functional/size/size.js +1 -1
  160. package/tokens-v2-private/js/tokens/functional/size/viewport.js +1 -1
  161. package/tokens-v2-private/js/tokens/functional/typography/typography.js +1 -1
  162. package/tokens-v2-private/scss/tokens/base/size/size.scss +1 -1
  163. package/tokens-v2-private/scss/tokens/base/typography/typography.scss +1 -1
  164. package/tokens-v2-private/scss/tokens/functional/size/border.scss +1 -1
  165. package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss +1 -1
  166. package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss +1 -1
  167. package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss +1 -1
  168. package/tokens-v2-private/scss/tokens/functional/size/size.scss +1 -1
  169. package/tokens-v2-private/scss/tokens/functional/size/viewport.scss +1 -1
  170. package/tokens-v2-private/scss/tokens/functional/typography/typography.scss +1 -1
  171. package/tokens-v2-private/ts/tokens/base/size/size.d.ts +1 -1
  172. package/tokens-v2-private/ts/tokens/base/size/size.js +1 -1
  173. package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts +1 -1
  174. package/tokens-v2-private/ts/tokens/base/typography/typography.js +1 -1
  175. package/tokens-v2-private/ts/tokens/functional/size/border.d.ts +1 -1
  176. package/tokens-v2-private/ts/tokens/functional/size/border.js +1 -1
  177. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  178. package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js +1 -1
  179. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  180. package/tokens-v2-private/ts/tokens/functional/size/size-coarse.js +1 -1
  181. package/tokens-v2-private/ts/tokens/functional/size/size-fine.d.ts +1 -1
  182. package/tokens-v2-private/ts/tokens/functional/size/size-fine.js +1 -1
  183. package/tokens-v2-private/ts/tokens/functional/size/size.d.ts +1 -1
  184. package/tokens-v2-private/ts/tokens/functional/size/size.js +1 -1
  185. package/tokens-v2-private/ts/tokens/functional/size/viewport.d.ts +1 -1
  186. package/tokens-v2-private/ts/tokens/functional/size/viewport.js +1 -1
  187. package/tokens-v2-private/ts/tokens/functional/typography/typography.d.ts +1 -1
  188. package/tokens-v2-private/ts/tokens/functional/typography/typography.js +1 -1
@@ -0,0 +1,19 @@
1
+ :root {
2
+ --base-size-4: 0.25rem;
3
+ --base-size-8: 0.5rem;
4
+ --base-size-12: 0.75rem;
5
+ --base-size-16: 1rem;
6
+ --base-size-20: 1.25rem;
7
+ --base-size-24: 1.5rem;
8
+ --base-size-28: 1.75rem;
9
+ --base-size-32: 2rem;
10
+ --base-size-36: 2.25rem;
11
+ --base-size-40: 2.5rem;
12
+ --base-size-44: 2.75rem;
13
+ --base-size-48: 3rem;
14
+ --base-size-64: 4rem;
15
+ --base-size-80: 5rem;
16
+ --base-size-96: 6rem;
17
+ --base-size-112: 7rem;
18
+ --base-size-128: 8rem;
19
+ }
@@ -0,0 +1,6 @@
1
+ :root {
2
+ --base-text-weight-light: 300;
3
+ --base-text-weight-normal: 400;
4
+ --base-text-weight-medium: 500;
5
+ --base-text-weight-semibold: 600;
6
+ }
@@ -0,0 +1,5 @@
1
+ :root {
2
+ --motion-skeletonLoader-shimmer-duration-scale: 1s;
3
+ --motion-spinner-duration-rotation: 1s;
4
+ --motion-loading-delay-default: 1s;
5
+ }
@@ -0,0 +1,14 @@
1
+ :root {
2
+ --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
3
+ --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
4
+ --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
5
+ --borderWidth-thin: max(1px, 0.0625rem);
6
+ --borderWidth-thick: max(2px, 0.125rem);
7
+ --borderWidth-thicker: max(4px, 0.25rem);
8
+ --borderRadius-small: 0.1875rem;
9
+ --borderRadius-medium: 0.375rem;
10
+ --borderRadius-large: 0.75rem;
11
+ --borderRadius-full: 624.9375rem;
12
+ --outline-focus-offset: -0.125rem;
13
+ --outline-focus-width: 0.125rem;
14
+ }
@@ -0,0 +1,8 @@
1
+ :root {
2
+ --breakpoint-xsmall: 20rem;
3
+ --breakpoint-small: 34rem;
4
+ --breakpoint-medium: 48rem;
5
+ --breakpoint-large: 63.25rem;
6
+ --breakpoint-xlarge: 80rem;
7
+ --breakpoint-xxlarge: 87.5rem;
8
+ }
@@ -0,0 +1,7 @@
1
+ @media (pointer: coarse) {
2
+ :root {
3
+ --control-minTarget-auto: 2.75rem;
4
+ --controlStack-small-gap-auto: 1rem;
5
+ --controlStack-medium-gap-auto: 0.75rem;
6
+ }
7
+ }
@@ -0,0 +1,7 @@
1
+ @media (pointer: fine) {
2
+ :root {
3
+ --control-minTarget-auto: 1rem;
4
+ --controlStack-small-gap-auto: 0.5rem;
5
+ --controlStack-medium-gap-auto: 0.5rem;
6
+ }
7
+ }
@@ -0,0 +1,73 @@
1
+ :root {
2
+ --control-minTarget-fine: 1rem;
3
+ --control-minTarget-coarse: 2.75rem;
4
+ --control-xsmall-size: 1.5rem;
5
+ --control-xsmall-lineBoxHeight: 1.25rem;
6
+ --control-xsmall-paddingBlock: 0.125rem;
7
+ --control-xsmall-paddingInline-condensed: 0.25rem;
8
+ --control-xsmall-paddingInline-normal: 0.5rem;
9
+ --control-xsmall-paddingInline-spacious: 0.75rem;
10
+ --control-xsmall-gap: 0.25rem;
11
+ --control-small-size: 1.75rem;
12
+ --control-small-lineBoxHeight: 1.25rem;
13
+ --control-small-paddingBlock: 0.25rem;
14
+ --control-small-paddingInline-condensed: 0.5rem;
15
+ --control-small-paddingInline-normal: 0.75rem;
16
+ --control-small-gap: 0.25rem;
17
+ --control-medium-size: 2rem;
18
+ --control-medium-lineBoxHeight: 1.25rem;
19
+ --control-medium-paddingBlock: 0.375rem;
20
+ --control-medium-paddingInline-condensed: 0.5rem;
21
+ --control-medium-paddingInline-normal: 0.75rem;
22
+ --control-medium-paddingInline-spacious: 1rem;
23
+ --control-medium-gap: 0.5rem;
24
+ --control-large-size: 2.5rem;
25
+ --control-large-lineBoxHeight: 1.25rem;
26
+ --control-large-paddingBlock: 0.625rem;
27
+ --control-large-paddingInline-normal: 0.75rem;
28
+ --control-large-paddingInline-spacious: 1rem;
29
+ --control-large-gap: 0.5rem;
30
+ --control-xlarge-size: 3rem;
31
+ --control-xlarge-lineBoxHeight: 1.25rem;
32
+ --control-xlarge-paddingBlock: 0.875rem;
33
+ --control-xlarge-paddingInline-normal: 0.75rem;
34
+ --control-xlarge-paddingInline-spacious: 1rem;
35
+ --control-xlarge-gap: 0.5rem;
36
+ --controlStack-small-gap-condensed: 0.5rem;
37
+ --controlStack-small-gap-spacious: 1rem;
38
+ --controlStack-medium-gap-condensed: 0.5rem;
39
+ --controlStack-medium-gap-spacious: 0.75rem;
40
+ --controlStack-large-gap-auto: 0.5rem;
41
+ --controlStack-large-gap-condensed: 0.5rem;
42
+ --controlStack-large-gap-spacious: 0.75rem;
43
+ --space-xxsmall: 0.125rem;
44
+ --space-xsmall: 0.25rem;
45
+ --space-small: 0.375rem;
46
+ --space-medium: 0.5rem;
47
+ --space-large: 0.75rem;
48
+ --space-xlarge: 1rem;
49
+ --spinner-strokeWidth-default: 0.125rem;
50
+ --spinner-size-small: 1rem;
51
+ --spinner-size-medium: 2rem;
52
+ --spinner-size-large: 4rem;
53
+ --stack-padding-condensed: 0.5rem;
54
+ --stack-padding-normal: 1rem;
55
+ --stack-padding-spacious: 1.5rem;
56
+ --stack-gap-condensed: 0.5rem;
57
+ --stack-gap-normal: 1rem;
58
+ --stack-gap-spacious: 1.5rem;
59
+ --overlay-width-xsmall: 12rem;
60
+ --overlay-width-small: 20rem;
61
+ --overlay-width-medium: 30rem;
62
+ --overlay-width-large: 40rem;
63
+ --overlay-width-xlarge: 60rem;
64
+ --overlay-height-small: 16rem;
65
+ --overlay-height-medium: 20rem;
66
+ --overlay-height-large: 27rem;
67
+ --overlay-height-xlarge: 37.5rem;
68
+ --overlay-padding-normal: 1rem;
69
+ --overlay-padding-condensed: 0.5rem;
70
+ --overlay-paddingBlock-condensed: 0.25rem;
71
+ --overlay-paddingBlock-normal: 0.75rem;
72
+ --overlay-borderRadius: 0.375rem;
73
+ }
@@ -0,0 +1,6 @@
1
+ @custom-media --viewportRange-narrow (max-width: calc(48rem - 0.02px));
2
+ @custom-media --viewportRange-narrowLandscape (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
3
+ @custom-media --viewportRange-regular (min-width: 48rem);
4
+ @custom-media --viewportRange-wide (min-width: 87.5rem);
5
+ @custom-media --viewportRange-portrait (orientation: portrait);
6
+ @custom-media --viewportRange-landscape (orientation: landscape);