@primer/css 20.0.0-rc.58205059 → 20.0.0-rc.784a65b8

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/CHANGELOG.md +170 -3
  2. package/CONTRIBUTING.md +6 -4
  3. package/DEVELOP.md +26 -21
  4. package/README.md +2 -2
  5. package/actionlist/action-list-item-divider.scss +8 -2
  6. package/actionlist/action-list-item.scss +214 -130
  7. package/actionlist/action-list-tree.scss +118 -0
  8. package/actionlist/action-list.scss +29 -0
  9. package/actionlist/index.scss +1 -0
  10. package/alerts/flash.scss +6 -2
  11. package/autocomplete/autocomplete.scss +51 -2
  12. package/avatars/avatar-stack.scss +1 -0
  13. package/base/base.scss +64 -3
  14. package/base/index.scss +0 -1
  15. package/base/kbd.scss +0 -1
  16. package/base/normalize.scss +13 -53
  17. package/base/typography-base.scss +3 -2
  18. package/blankslate/blankslate.scss +20 -1
  19. package/blankslate/index.scss +0 -1
  20. package/box/box-overlay.scss +2 -0
  21. package/box/box.scss +0 -3
  22. package/branch-name/branch-name.scss +1 -0
  23. package/breadcrumb/breadcrumb.scss +1 -1
  24. package/buttons/button-group.scss +3 -2
  25. package/buttons/button.scss +64 -36
  26. package/buttons/misc.scss +30 -25
  27. package/color-modes/index.scss +2 -0
  28. package/color-modes/native.scss +12 -0
  29. package/color-modes/themes/dark.scss +0 -1
  30. package/color-modes/themes/dark_colorblind.scss +0 -1
  31. package/color-modes/themes/dark_dimmed.scss +0 -1
  32. package/color-modes/themes/dark_high_contrast.scss +0 -1
  33. package/color-modes/themes/dark_tritanopia.scss +6 -0
  34. package/color-modes/themes/light.scss +0 -1
  35. package/color-modes/themes/light_colorblind.scss +0 -1
  36. package/color-modes/themes/light_high_contrast.scss +0 -1
  37. package/color-modes/themes/light_tritanopia.scss +6 -0
  38. package/dist/actionlist.css +1 -1
  39. package/dist/actionlist.css.map +1 -1
  40. package/dist/alerts.css +1 -1
  41. package/dist/alerts.css.map +1 -1
  42. package/dist/autocomplete.css +1 -1
  43. package/dist/autocomplete.css.map +1 -1
  44. package/dist/avatars.css +1 -1
  45. package/dist/avatars.css.map +1 -1
  46. package/dist/base.css +1 -1
  47. package/dist/base.css.map +1 -1
  48. package/dist/blankslate.css +1 -1
  49. package/dist/blankslate.css.map +1 -1
  50. package/dist/box.css.map +1 -1
  51. package/dist/branch-name.css +1 -1
  52. package/dist/branch-name.css.map +1 -1
  53. package/dist/breadcrumb.css.map +1 -1
  54. package/dist/buttons.css +1 -1
  55. package/dist/buttons.css.map +1 -1
  56. package/dist/color-modes.css +1 -1
  57. package/dist/color-modes.css.map +1 -1
  58. package/dist/core.css +1 -1
  59. package/dist/core.css.map +1 -1
  60. package/dist/dropdown.css +1 -1
  61. package/dist/dropdown.css.map +1 -1
  62. package/dist/forms.css +1 -1
  63. package/dist/forms.css.map +1 -1
  64. package/dist/header.css.map +1 -1
  65. package/dist/labels.css +1 -1
  66. package/dist/labels.css.map +1 -1
  67. package/dist/layout.css +1 -1
  68. package/dist/layout.css.map +1 -1
  69. package/dist/links.css +1 -1
  70. package/dist/links.css.map +1 -1
  71. package/dist/loaders.css.map +1 -1
  72. package/dist/markdown.css +1 -1
  73. package/dist/markdown.css.map +1 -1
  74. package/dist/marketing-buttons.css +1 -1
  75. package/dist/marketing-buttons.css.map +1 -1
  76. package/dist/marketing-links.css +1 -1
  77. package/dist/marketing-links.css.map +1 -1
  78. package/dist/marketing-type.css.map +1 -1
  79. package/dist/marketing-utilities.css.map +1 -1
  80. package/dist/marketing.css +1 -1
  81. package/dist/marketing.css.map +1 -1
  82. package/dist/meta.json +73 -73
  83. package/dist/navigation.css +1 -1
  84. package/dist/navigation.css.map +1 -1
  85. package/dist/pagination.css +1 -1
  86. package/dist/pagination.css.map +1 -1
  87. package/dist/popover.css +1 -1
  88. package/dist/popover.css.map +1 -1
  89. package/dist/primer.css +4 -4
  90. package/dist/primer.css.map +1 -1
  91. package/dist/product.css +1 -1
  92. package/dist/product.css.map +1 -1
  93. package/dist/progress.css.map +1 -1
  94. package/dist/select-menu.css.map +1 -1
  95. package/dist/stats/actionlist.json +1 -1
  96. package/dist/stats/alerts.json +1 -1
  97. package/dist/stats/autocomplete.json +1 -1
  98. package/dist/stats/avatars.json +1 -1
  99. package/dist/stats/base.json +1 -1
  100. package/dist/stats/blankslate.json +1 -1
  101. package/dist/stats/branch-name.json +1 -1
  102. package/dist/stats/buttons.json +1 -1
  103. package/dist/stats/color-modes.json +1 -1
  104. package/dist/stats/core.json +1 -1
  105. package/dist/stats/dropdown.json +1 -1
  106. package/dist/stats/forms.json +1 -1
  107. package/dist/stats/labels.json +1 -1
  108. package/dist/stats/layout.json +1 -1
  109. package/dist/stats/links.json +1 -1
  110. package/dist/stats/markdown.json +1 -1
  111. package/dist/stats/marketing-buttons.json +1 -1
  112. package/dist/stats/marketing-links.json +1 -1
  113. package/dist/stats/marketing.json +1 -1
  114. package/dist/stats/navigation.json +1 -1
  115. package/dist/stats/pagination.json +1 -1
  116. package/dist/stats/popover.json +1 -1
  117. package/dist/stats/primer.json +1 -1
  118. package/dist/stats/product.json +1 -1
  119. package/dist/stats/subhead.json +1 -1
  120. package/dist/stats/toasts.json +1 -1
  121. package/dist/stats/tooltips.json +1 -1
  122. package/dist/stats/utilities.json +1 -1
  123. package/dist/subhead.css +1 -1
  124. package/dist/subhead.css.map +1 -1
  125. package/dist/table-object.css.map +1 -1
  126. package/dist/timeline.css.map +1 -1
  127. package/dist/toasts.css +1 -1
  128. package/dist/toasts.css.map +1 -1
  129. package/dist/tooltips.css +1 -1
  130. package/dist/tooltips.css.map +1 -1
  131. package/dist/truncate.css.map +1 -1
  132. package/dist/utilities.css +1 -1
  133. package/dist/utilities.css.map +1 -1
  134. package/dist/variables.json +34 -34
  135. package/dropdown/dropdown.scss +0 -2
  136. package/forms/form-control.scss +26 -5
  137. package/forms/form-group.scss +48 -13
  138. package/forms/form-validation.scss +1 -1
  139. package/forms/input-group.scss +18 -0
  140. package/labels/counters.scss +1 -1
  141. package/labels/index.scss +0 -1
  142. package/labels/labels.scss +12 -1
  143. package/labels/mixins.scss +7 -2
  144. package/labels/states.scss +2 -2
  145. package/layout/grid-offset.scss +1 -0
  146. package/layout/grid.scss +1 -0
  147. package/layout/index.scss +1 -1
  148. package/layout/layout.scss +8 -11
  149. package/layout/mixins.scss +30 -4
  150. package/layout/page-layout.scss +384 -0
  151. package/links/link.scss +6 -1
  152. package/markdown/code.scss +5 -0
  153. package/markdown/footnotes.scss +38 -26
  154. package/markdown/headings.scss +17 -0
  155. package/markdown/images.scss +3 -3
  156. package/markdown/markdown-body.scss +0 -8
  157. package/marketing/buttons/button.scss +32 -26
  158. package/marketing/links/link.scss +5 -5
  159. package/marketing/type/typography.scss +21 -0
  160. package/marketing/utilities/layout.scss +1 -0
  161. package/navigation/filter-list.scss +20 -2
  162. package/navigation/menu.scss +8 -10
  163. package/navigation/sidenav.scss +3 -12
  164. package/navigation/subnav.scss +21 -2
  165. package/navigation/tabnav.scss +9 -4
  166. package/navigation/underline-nav.scss +79 -28
  167. package/package.json +32 -26
  168. package/pagination/pagination.scss +65 -7
  169. package/popover/popover.scss +2 -2
  170. package/select-menu/select-menu.scss +3 -3
  171. package/stylelint.config.cjs +2 -11
  172. package/subhead/subhead.scss +3 -0
  173. package/support/mixins/color-modes.scss +5 -0
  174. package/support/mixins/layout.scss +1 -0
  175. package/support/mixins/misc.scss +48 -1
  176. package/support/mixins/typography.scss +3 -2
  177. package/support/variables/layout.scss +3 -3
  178. package/table-object/table-object.scss +3 -0
  179. package/timeline/timeline-item.scss +2 -1
  180. package/toasts/toasts.scss +7 -4
  181. package/tooltips/tooltips.scss +0 -7
  182. package/utilities/colors.scss +16 -0
  183. package/utilities/details.scss +81 -4
  184. package/utilities/layout.scss +1 -1
  185. package/utilities/margin.scss +4 -1
  186. package/utilities/padding.scss +3 -1
  187. package/utilities/visibility-display.scss +52 -3
  188. package/table-object/README.md +0 -25
package/CHANGELOG.md CHANGED
@@ -4,7 +4,170 @@
4
4
 
5
5
  ### Major Changes
6
6
 
7
- - [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
7
+ - [#1744](https://github.com/primer/css/pull/1744) [`942f65a4`](https://github.com/primer/css/commit/942f65a45a18b7042ba1ce2703688b62d874cf18) Thanks [@langermank](https://github.com/langermank)! - Global CSS focus styles
8
+
9
+ * [#1767](https://github.com/primer/css/pull/1767) [`7e01db97`](https://github.com/primer/css/commit/7e01db97f3f2b9d9383f66385ca16f0bdc06abd1) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Remove unused pullquote selector
10
+
11
+ - [#1821](https://github.com/primer/css/pull/1821) [`daa2685c`](https://github.com/primer/css/commit/daa2685c596d894b3bae1896bf97c3319cd9816c) Thanks [@jonrohan](https://github.com/jonrohan)! - UnderlineNav `:focus` styles
12
+ Refactor selected state and spacing
13
+ Add selected bold state override from github/github
14
+
15
+ ### Patch Changes
16
+
17
+ - [#2041](https://github.com/primer/css/pull/2041) [`20550bbf`](https://github.com/primer/css/commit/20550bbfaa236ac197ca58805542eaab0bf38fd4) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading to stylelint-config-12.4.0
18
+
19
+ ## 19.8.2
20
+
21
+ ### Patch Changes
22
+
23
+ - [#2019](https://github.com/primer/css/pull/2019) [`57be2d50`](https://github.com/primer/css/commit/57be2d50212b71f87ce612039375bcd5273eca53) Thanks [@langermank](https://github.com/langermank)! - [Bug] TreeView animation and padding fix
24
+
25
+ ## 19.8.1
26
+
27
+ ### Patch Changes
28
+
29
+ - [#1996](https://github.com/primer/css/pull/1996) [`a4293bf9`](https://github.com/primer/css/commit/a4293bf921ebcb74c6973e3f50f07e470f495bd0) Thanks [@langermank](https://github.com/langermank)! - TreeView: remove bold active items + markup changes
30
+
31
+ ## 19.8.0
32
+
33
+ ### Minor Changes
34
+
35
+ - [#1997](https://github.com/primer/css/pull/1997) [`9806b54b`](https://github.com/primer/css/commit/9806b54b3829219c9ad141efd2fcd99fc5c08751) Thanks [@simurai](https://github.com/simurai)! - Add Tritanopia theme
36
+
37
+ ### Patch Changes
38
+
39
+ - [#2002](https://github.com/primer/css/pull/2002) [`a3bc51f6`](https://github.com/primer/css/commit/a3bc51f6c4af0d45a9ce39f00c3cf3297b090067) Thanks [@simurai](https://github.com/simurai)! - Always break long `branch-name`s
40
+
41
+ ## 19.7.1
42
+
43
+ ### Patch Changes
44
+
45
+ - [#2001](https://github.com/primer/css/pull/2001) [`47cec404`](https://github.com/primer/css/commit/47cec40472173b412df59e6990c0ac1b1ed43d04) Thanks [@jdanyow](https://github.com/jdanyow)! - Remove IE11 support in tooltip
46
+
47
+ * [#1995](https://github.com/primer/css/pull/1995) [`557b100a`](https://github.com/primer/css/commit/557b100a77a4befe6d07fac14cb48b08bed18356) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add narrow/regular/wide viewport range utilities
48
+
49
+ - [#2000](https://github.com/primer/css/pull/2000) [`264a89a5`](https://github.com/primer/css/commit/264a89a51a75eefa6a371e6ad11518519cd98b36) Thanks [@khiga8](https://github.com/khiga8)! - More CSS updates to `Autocomplete`
50
+
51
+ ## 19.7.0
52
+
53
+ ### Minor Changes
54
+
55
+ - [#1994](https://github.com/primer/css/pull/1994) [`69fe8c65`](https://github.com/primer/css/commit/69fe8c6512a3f0bbdbfdf7080b916a39173c2df9) Thanks [@khiga8](https://github.com/khiga8)! - Add support for inline, stack label in autocomplete
56
+
57
+ ### Patch Changes
58
+
59
+ - [#1991](https://github.com/primer/css/pull/1991) [`5e87effa`](https://github.com/primer/css/commit/5e87effa671b194e188f699a79b246bdf61bd191) Thanks [@simurai](https://github.com/simurai)! - Fix `btn-primary` in flash alerts
60
+
61
+ ## 19.6.0
62
+
63
+ ### Minor Changes
64
+
65
+ - [#1989](https://github.com/primer/css/pull/1989) [`f544ef85`](https://github.com/primer/css/commit/f544ef8574a4d6e12cccf94d534ad66df3e9249a) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Make `pane` an optional region for PageLayout component
66
+
67
+ ### Patch Changes
68
+
69
+ - [#1988](https://github.com/primer/css/pull/1988) [`e3443f1a`](https://github.com/primer/css/commit/e3443f1a69ba5a23d3e3804bf4e22d384783c443) Thanks [@simurai](https://github.com/simurai)! - Fix color-fg utilities in links
70
+
71
+ * [#1985](https://github.com/primer/css/pull/1985) [`c2bd6bc9`](https://github.com/primer/css/commit/c2bd6bc9bf90686f258af11c102097d7da000a5b) Thanks [@cheshire137](https://github.com/cheshire137)! - Adding .color-bg-transparent utility class
72
+
73
+ ## 19.5.1
74
+
75
+ ### Patch Changes
76
+
77
+ - [#1983](https://github.com/primer/css/pull/1983) [`07bc069e`](https://github.com/primer/css/commit/07bc069ec0faae9c0e4530e5171e3346fa643a10) Thanks [@simurai](https://github.com/simurai)! - Bump `primer/primitives` to `^7.5.1`
78
+
79
+ ## 19.5.0
80
+
81
+ ### Minor Changes
82
+
83
+ - [#1948](https://github.com/primer/css/pull/1948) [`6a83a92b`](https://github.com/primer/css/commit/6a83a92b4332d577cdd72eee084e3f2c41b588ee) Thanks [@simurai](https://github.com/simurai)! - Add `open` and `closed` color roles
84
+
85
+ * [#1961](https://github.com/primer/css/pull/1961) [`a35a8bdc`](https://github.com/primer/css/commit/a35a8bdcc17906848fcb486842d2345db0441c7c) Thanks [@jonrohan](https://github.com/jonrohan)! - Default .PageLayout to display block
86
+
87
+ ### Patch Changes
88
+
89
+ - [#1954](https://github.com/primer/css/pull/1954) [`30f29d38`](https://github.com/primer/css/commit/30f29d383256a7d4023a859fdeee44471307159d) Thanks [@simurai](https://github.com/simurai)! - Fix `input-block` in `form-group`
90
+
91
+ * [#1956](https://github.com/primer/css/pull/1956) [`39063461`](https://github.com/primer/css/commit/3906346182ed983d9725fd95da41b21424378b3e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.2
92
+
93
+ - [#1931](https://github.com/primer/css/pull/1931) [`e5c5312e`](https://github.com/primer/css/commit/e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Page layout api updates renaming spacing options in storybook
94
+
95
+ * [#1950](https://github.com/primer/css/pull/1950) [`7c85c500`](https://github.com/primer/css/commit/7c85c500569fe6e1b29665c2eed37d58625ab06f) Thanks [@hectahertz](https://github.com/hectahertz)! - Fix sequence of content in Subhead
96
+
97
+ - [#1942](https://github.com/primer/css/pull/1942) [`0450ccbb`](https://github.com/primer/css/commit/0450ccbb86104564c7d4038eb68989f370014fa1) Thanks [@reeceatkinson](https://github.com/reeceatkinson)! - Added line break to docs
98
+
99
+ * [#1953](https://github.com/primer/css/pull/1953) [`3a91a29a`](https://github.com/primer/css/commit/3a91a29a822a28ea9679fbbb90250fc039057f23) Thanks [@hectahertz](https://github.com/hectahertz)! - Use `<h2>` instead of `<div>` on Subhead-heading docs
100
+
101
+ - [#1949](https://github.com/primer/css/pull/1949) [`dab83198`](https://github.com/primer/css/commit/dab83198c3bf1c7e03826b8cd498b8c48c9a2869) Thanks [@heiskr](https://github.com/heiskr)! - Render headings inline when in a `<summary>`
102
+
103
+ * [#1978](https://github.com/primer/css/pull/1978) [`a00e6bce`](https://github.com/primer/css/commit/a00e6bce01b368d9cb6da5ec2af1d833f4d785c1) Thanks [@langermank](https://github.com/langermank)! - Handle pointer-events on ActionList visuals
104
+
105
+ - [#1977](https://github.com/primer/css/pull/1977) [`80bf9d9d`](https://github.com/primer/css/commit/80bf9d9dea6fe7fbb0837fea265ec95cbbbd75d6) Thanks [@jonrohan](https://github.com/jonrohan)! - [Bug Fix] Adding white-space nowrap to Labels
106
+
107
+ ## 19.4.0
108
+
109
+ ### Minor Changes
110
+
111
+ - [#1937](https://github.com/primer/css/pull/1937) [`67f08009`](https://github.com/primer/css/commit/67f08009ef458088b9fda6267ab25ad6d0a514aa) Thanks [@langermank](https://github.com/langermank)! - TreeView single item nesting
112
+
113
+ * [#1905](https://github.com/primer/css/pull/1905) [`50221a54`](https://github.com/primer/css/commit/50221a5486d28c54dc1f578b459addd867bd01d3) Thanks [@langermank](https://github.com/langermank)! - Refactors NavigationList to better handle accessibility. Backwards compatible for TreeView CSS.
114
+
115
+ - [#1936](https://github.com/primer/css/pull/1936) [`c53ecdff`](https://github.com/primer/css/commit/c53ecdff5442cf4ac5da0d1e2ba45871ab662855) Thanks [@khiga8](https://github.com/khiga8)! - Deprecating `.tooltipped` CSS classes
116
+
117
+ ### Patch Changes
118
+
119
+ - [#1928](https://github.com/primer/css/pull/1928) [`0fb67895`](https://github.com/primer/css/commit/0fb6789555652860cfa5178b60433eb2c3d2575c) Thanks [@simurai](https://github.com/simurai)! - Fix `<sup><a>` from getting wrapped with `[ ]`
120
+
121
+ ## 19.3.0
122
+
123
+ ### Minor Changes
124
+
125
+ - [#1876](https://github.com/primer/css/pull/1876) [`bcf447ab`](https://github.com/primer/css/commit/bcf447ab226e6043dd47c1fcc395ba104af866d4) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Add mono font stack to <samp> tag
126
+
127
+ * [#1919](https://github.com/primer/css/pull/1919) [`21085f5c`](https://github.com/primer/css/commit/21085f5c6cc538b5014a47de76642554a4291cc6) Thanks [@hectahertz](https://github.com/hectahertz)! - Add blankslate classes to replace utilities
128
+
129
+ ### Patch Changes
130
+
131
+ - [#1892](https://github.com/primer/css/pull/1892) [`55bd498b`](https://github.com/primer/css/commit/55bd498b7357e86659ac574f0f745f7b420fb6d3) Thanks [@langermank](https://github.com/langermank)! - Patch: Fix ActionList--divided for label with inline description scenarios
132
+
133
+ * [#1906](https://github.com/primer/css/pull/1906) [`f02d9a3e`](https://github.com/primer/css/commit/f02d9a3e4e86c2659a9f507995bcb90c5226e34e) Thanks [@jonrohan](https://github.com/jonrohan)! - Upgrading @primer/stylelint-config@12.3.0 and fixing violations
134
+
135
+ - [#1908](https://github.com/primer/css/pull/1908) [`84581e96`](https://github.com/primer/css/commit/84581e96aee50ff3883907dfe1069701edd1c24a) Thanks [@simurai](https://github.com/simurai)! - Reduce size of `Label--inline`
136
+
137
+ * [#1890](https://github.com/primer/css/pull/1890) [`74d0438b`](https://github.com/primer/css/commit/74d0438bd4dbaed447b553c5d3c8b945da282836) Thanks [@andrialexandrou](https://github.com/andrialexandrou)! - Adds --color-accent-emphasis and --color-fg-on-emphasis rules for Windows High Contrast Mode
138
+
139
+ - [#1882](https://github.com/primer/css/pull/1882) [`4a06aba1`](https://github.com/primer/css/commit/4a06aba1d3f80bcc228ff4360d0e02d5ace158ff) Thanks [@tqwewe](https://github.com/tqwewe)! - Fix layout gutter none styles
140
+
141
+ * [#1894](https://github.com/primer/css/pull/1894) [`d1adf595`](https://github.com/primer/css/commit/d1adf595308afb97f83c5ca172222944189a5961) Thanks [@simurai](https://github.com/simurai)! - Make `pagination` responsive by default
142
+
143
+ ## 19.2.0
144
+
145
+ ### Minor Changes
146
+
147
+ - [#1737](https://github.com/primer/css/pull/1737) [`6b4089d8`](https://github.com/primer/css/commit/6b4089d8b37174ca061762c56b5e4134a54cf4ef) Thanks [@vdepizzol](https://github.com/vdepizzol)! - Adds new PageLayout component CSS with Storybook documentation
148
+
149
+ ### Patch Changes
150
+
151
+ - [#1855](https://github.com/primer/css/pull/1855) [`8f2e7534`](https://github.com/primer/css/commit/8f2e7534ecbdb3d0e773d60c725b55dc4bb263e2) Thanks [@simurai](https://github.com/simurai)! - Bump primer/primitives to `7.4.0`
152
+
153
+ * [#1869](https://github.com/primer/css/pull/1869) [`868f61a1`](https://github.com/primer/css/commit/868f61a199df14862922d52905de66cdb1e1c192) Thanks [@jdanyow](https://github.com/jdanyow)! - Minor bugfix for AvatarStack. Removing the box-shadow from the AvatarStack-body on hover.
154
+
155
+ - [#1856](https://github.com/primer/css/pull/1856) [`cbe3fb56`](https://github.com/primer/css/commit/cbe3fb56e4c7ee6bfe803eb0c15e15ab95d84157) Thanks [@langermank](https://github.com/langermank)! - ActionList item outlines for high contrast theme
156
+
157
+ * [#1870](https://github.com/primer/css/pull/1870) [`815daff9`](https://github.com/primer/css/commit/815daff9f07d8096d572cf75bee17284f36492f6) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [ActionList] Add hover to `aria-current` elements and other micro interactions
158
+
159
+ ## 19.1.1
160
+
161
+ ### Patch Changes
162
+
163
+ - [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for `max-width` media queries
164
+
165
+ * [#1803](https://github.com/primer/css/pull/1803) [`c46fe918`](https://github.com/primer/css/commit/c46fe9186efbcf6e4a482685529bdb0bda28aa9f) Thanks [@langermank](https://github.com/langermank)! - - Adds ActionList tree-view specific CSS
166
+ - Minor bug fixes for ActionList default
167
+
168
+ - [#1827](https://github.com/primer/css/pull/1827) [`69e1fc53`](https://github.com/primer/css/commit/69e1fc539e4bb2fdf78d34a18fc591ebdfddd2f5) Thanks [@simurai](https://github.com/simurai)! - Support fractional viewport sizes for the `hide` utilities
169
+
170
+ ## 19.1.0
8
171
 
9
172
  ### Minor Changes
10
173
 
@@ -24,7 +187,11 @@
24
187
 
25
188
  * [#1768](https://github.com/primer/css/pull/1768) [`4abb1af9`](https://github.com/primer/css/commit/4abb1af95b9b3c8c38512fa5e1e4fae9e7d01f4f) Thanks [@tobiasahlin](https://github.com/tobiasahlin)! - Marketing: Add disabled states for buttons (and tweak hover)
26
189
 
27
- - [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
190
+ - [#1792](https://github.com/primer/css/pull/1792) [`b1c43f1f`](https://github.com/primer/css/commit/b1c43f1f8d9b07b58b275665ca69abd5d4f7a5fc) Thanks [@simurai](https://github.com/simurai)! - Use `counter-border` for LHC
191
+
192
+ * [#1808](https://github.com/primer/css/pull/1808) [`ee27583f`](https://github.com/primer/css/commit/ee27583f594248bd44122ea5dc81b12382c02b09) Thanks [@manuelpuyol](https://github.com/manuelpuyol)! - Add hover and active states to btn-invisible
193
+
194
+ - [#1818](https://github.com/primer/css/pull/1818) [`22c29e7a`](https://github.com/primer/css/commit/22c29e7a8b1b6a0df1dd61d400cc0dd132e0c909) Thanks [@vdepizzol](https://github.com/vdepizzol)! - [Layout component] Avoid resizing `main` while loading
28
195
 
29
196
  ## 19.0.0
30
197
 
@@ -226,7 +393,7 @@
226
393
 
227
394
  ### Patch Changes
228
395
 
229
- - [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecyle milestones for statuses.
396
+ - [#1540](https://github.com/primer/css/pull/1540) [`6b6e89a8`](https://github.com/primer/css/commit/6b6e89a8bff2319ef75d25217dafc272a5e597f0) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Use standard lifecycle milestones for statuses.
230
397
 
231
398
  * [#1528](https://github.com/primer/css/pull/1528) [`303cacae`](https://github.com/primer/css/commit/303cacae77244a9e0de02b4caee2a8c01097aced) Thanks [@koddsson](https://github.com/koddsson)! - Convert package to a ES module
232
399
 
package/CONTRIBUTING.md CHANGED
@@ -58,13 +58,15 @@ Anyone can open a pull request on Primer CSS. You do not need to work at GitHub
58
58
  2. Configure and install the dependencies: `npm install`
59
59
  3. Create a new branch from main `git checkout -b my-branch-name`
60
60
  4. Make your changes and commit them.
61
- 5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
62
- 6. Wait for CI tests to finish.
61
+ 5. Create a changeset for your changes: `npx changeset`
62
+ - See [changesets/changesets](https://github.com/changesets/changesets) for more information.
63
+ 6. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/css-reviewers`.
64
+ 7. Wait for CI tests to finish.
63
65
  - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
64
66
  - If the tests fail, review the logs and address any issues.
65
67
  - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
66
- 7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
67
- 8. Pat yourself on the back and wait for your pull request to be reviewed.
68
+ 8. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
69
+ 9. Pat yourself on the back and wait for your pull request to be reviewed.
68
70
 
69
71
  Here are a few things you can do that will increase the likelihood of your pull request being accepted:
70
72
 
package/DEVELOP.md CHANGED
@@ -3,29 +3,32 @@
3
3
  If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
4
4
 
5
5
  ## Structure
6
+
6
7
  Primer CSS is published to [npm] as [@primer/css]. Each of Primer CSS's "modules" lives in a subfolder under `src/` with an `index.scss` in it. Generally speaking, the styles are divided into three primary themes:
7
8
 
8
- * **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
9
- * **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
10
- * **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
9
+ - **Core** styles (in `core/`) are common dependencies, which include support variables, native element and typography styles, buttons, navigation, tooltips, etc.
10
+ - **Product** styles (in `product/`) are specific to github.com, and include components such as avatars, labels, markdown styles, popovers, and progress indicators.
11
+ - **Marketing** styles (in `marketing/`) are specific to GitHub marketing efforts, including international and event-focused sites as well as the more design-heavy feature pages on github.com. Marketing styles include new colors and button styles, and extend the core typography and whitespace scales.
11
12
 
12
13
  ### Paths
13
- Here's what you need to know about how the files are structured in both git and in the published npm module:
14
14
 
15
- * In git, all of the SCSS source files live in the `src/` directory.
16
- * When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
15
+ Here's what you need to know about how the files are structured in both git and in the published npm module:
17
16
 
18
- ```scss
19
- @import "@primer/css/utilities/index.scss";
20
- ```
17
+ - In git, all of the SCSS source files live in the `src/` directory.
18
+ - When published, all of the files in `src/` are "hoisted" to the package root so that you can import, say, utilities with:
21
19
 
22
- * All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
20
+ ```scss
21
+ @import '@primer/css/utilities/index.scss';
22
+ ```
23
23
 
24
+ - All bundle interdependencies within Primer CSS are defined as relative imports (e.g. with `../`), so everything should work fine as long as the `@primer/css` directory is in one of your Sass include paths (i.e. `node_modules`).
24
25
 
25
26
  ## Install
27
+
26
28
  Run `npm install` to install the npm dependencies.
27
29
 
28
30
  ## Docs site
31
+
29
32
  The Primer CSS docs are built with React using [Doctocat](https://primer.style/doctocat) and automatically deployed on every push to this repo with [Now]. You can run the server locally with:
30
33
 
31
34
  ```sh
@@ -35,41 +38,43 @@ npm start
35
38
  Then visit http://localhost:8000 to view the site.
36
39
 
37
40
  ### The docs directory
38
- The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
39
41
 
42
+ The [docs directory](../docs/) contains all of the documentation files in our docs site. Files are nested in the `/content` folder.
40
43
 
41
44
  ### Code blocks
45
+
42
46
  All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
43
47
 
44
48
  ## Storybook
45
49
 
46
- Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
50
+ Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
47
51
 
48
52
  ```sh
49
53
  npm run storybook
50
54
  ```
51
55
 
52
56
  ### The Storybook directory
57
+
53
58
  Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
54
59
 
55
60
  ### Stories
61
+
56
62
  Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
57
63
 
58
64
  ## Scripts
65
+
59
66
  Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
60
67
 
61
- * `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
62
- * `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
63
- * `stylelint` lints the CSS source files.
64
- * `eslint` lints the JavaScript source files.
65
- * `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
66
- * `start` runs the documentation site locally (alias: `dev`).
67
- * `test` runs our test suite.
68
- * `storybook` runs storybook local development server.
68
+ - `dist` runs `script/dist`, which creates CSS bundles of all the `index.scss` files in `src/`.
69
+ - `check-links` runs a link checker on your local development server (`localhost:3000`, started with `npm start`).
70
+ - `stylelint` lints the CSS source files.
71
+ - `eslint` lints the JavaScript source files.
72
+ - `start` runs the documentation site locally (alias: `dev`).
73
+ - `test` runs our test suite.
74
+ - `storybook` runs storybook local development server.
69
75
 
70
76
  The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.
71
77
 
72
-
73
78
  [@primer/css]: https://www.npmjs.com/package/@primer/css
74
79
  [run-scripts]: https://docs.npmjs.com/cli/run-script
75
80
  [now]: https://zeit.co/now
package/README.md CHANGED
@@ -1,5 +1,5 @@
1
1
  <p align="center">
2
- <img width="300px" src="./docs/src/readme.png">
2
+ <img width="300px" alt="" src="./docs/src/readme.png">
3
3
  </p>
4
4
 
5
5
  <h1 align="center">Primer CSS</h1>
@@ -14,7 +14,7 @@
14
14
  <img alt="" src="https://github.com/primer/css/actions/workflows/ci.yml/badge.svg">
15
15
  </a>
16
16
  <a aria-label="contributors graph" href="https://github.com/primer/css/graphs/contributors">
17
- <img src="https://img.shields.io/github/contributors/primer/css.svg">
17
+ <img alt="" src="https://img.shields.io/github/contributors/primer/css.svg">
18
18
  </a>
19
19
  <a aria-label="last commit" href="https://github.com/primer/css/commits/main">
20
20
  <img alt="" src="https://img.shields.io/github/last-commit/primer/css.svg">
@@ -1,10 +1,9 @@
1
- // emtpy divider
1
+ // empty divider
2
2
 
3
3
  .ActionList-sectionDivider {
4
4
  // has children
5
5
  &:not(:empty) {
6
6
  display: flex;
7
- // stylelint-disable-next-line primer/spacing
8
7
  padding: ($spacer-1 * 1.5) $spacer-2;
9
8
  font-size: $font-size-small;
10
9
  font-weight: $font-weight-bold;
@@ -14,6 +13,7 @@
14
13
 
15
14
  // no children
16
15
  &:empty {
16
+ display: block;
17
17
  height: 1px;
18
18
  padding: 0;
19
19
  // stylelint-disable-next-line primer/spacing
@@ -22,6 +22,12 @@
22
22
  background: var(--color-action-list-item-inline-divider);
23
23
  border: 0;
24
24
  }
25
+
26
+ .ActionList-sectionDivider-title {
27
+ font-size: $font-size-small;
28
+ font-weight: $font-weight-bold;
29
+ color: var(--color-fg-muted);
30
+ }
25
31
  }
26
32
 
27
33
  .ActionList-sectionDivider--filled {