@primer/css 0.0.0-1ea75fe → 0.0.0-202110118627

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 (367) hide show
  1. package/CHANGELOG.md +1225 -132
  2. package/CODE_OF_CONDUCT.md +1 -1
  3. package/CONTRIBUTING.md +85 -0
  4. package/DEVELOP.md +11 -69
  5. package/LICENSE +1 -1
  6. package/README.md +13 -15
  7. package/RELEASING.md +5 -72
  8. package/actionlist/action-list-item-divider.scss +42 -0
  9. package/actionlist/action-list-item.scss +444 -0
  10. package/actionlist/action-list-variables.scss +8 -0
  11. package/actionlist/action-list.scss +33 -0
  12. package/actionlist/index.scss +5 -0
  13. package/alerts/README.md +11 -22
  14. package/alerts/flash.scss +91 -21
  15. package/alerts/index.scss +2 -2
  16. package/autocomplete/README.md +25 -0
  17. package/autocomplete/autocomplete.scss +58 -0
  18. package/autocomplete/index.scss +4 -0
  19. package/autocomplete/suggester.scss +92 -0
  20. package/avatars/README.md +11 -23
  21. package/avatars/avatar-parent-child.scss +4 -3
  22. package/avatars/avatar-stack.scss +21 -13
  23. package/avatars/avatar.scss +31 -3
  24. package/avatars/circle-badge.scss +5 -4
  25. package/avatars/index.scss +5 -5
  26. package/base/README.md +11 -22
  27. package/base/base.scss +5 -4
  28. package/base/index.scss +6 -4
  29. package/base/kbd.scss +20 -0
  30. package/base/normalize.scss +5 -5
  31. package/base/octicons.scss +6 -0
  32. package/base/typography-base.scss +2 -0
  33. package/blankslate/README.md +11 -23
  34. package/blankslate/blankslate.scss +25 -12
  35. package/blankslate/index.scss +2 -2
  36. package/box/README.md +11 -23
  37. package/box/box.scss +52 -44
  38. package/box/index.scss +2 -2
  39. package/branch-name/README.md +11 -23
  40. package/branch-name/branch-name.scss +18 -8
  41. package/branch-name/index.scss +2 -2
  42. package/breadcrumb/README.md +17 -13
  43. package/breadcrumb/breadcrumb.scss +15 -5
  44. package/breadcrumb/index.scss +2 -2
  45. package/buttons/README.md +11 -23
  46. package/buttons/button-group.scss +2 -0
  47. package/buttons/button.scss +243 -143
  48. package/buttons/index.scss +4 -3
  49. package/buttons/misc.scss +222 -0
  50. package/color-modes/index.scss +9 -0
  51. package/color-modes/native.scss +10 -0
  52. package/color-modes/themes/dark.scss +7 -0
  53. package/color-modes/themes/dark_colorblind.scss +7 -0
  54. package/color-modes/themes/dark_dimmed.scss +7 -0
  55. package/color-modes/themes/dark_high_contrast.scss +7 -0
  56. package/color-modes/themes/light.scss +7 -0
  57. package/color-modes/themes/light_colorblind.scss +7 -0
  58. package/core/README.md +11 -23
  59. package/core/index.scss +19 -20
  60. package/deprecations.js +24 -0
  61. package/deprecations.json +539 -0
  62. package/dist/actionlist.css +2 -0
  63. package/dist/actionlist.css.map +1 -0
  64. package/dist/actionlist.js +1 -0
  65. package/dist/alerts.css +1 -2
  66. package/dist/alerts.css.map +1 -1
  67. package/dist/alerts.js +1 -1
  68. package/dist/autocomplete.css +2 -0
  69. package/dist/autocomplete.css.map +1 -0
  70. package/dist/autocomplete.js +1 -0
  71. package/dist/avatars.css +1 -2
  72. package/dist/avatars.css.map +1 -1
  73. package/dist/avatars.js +1 -1
  74. package/dist/base.css +1 -2
  75. package/dist/base.css.map +1 -1
  76. package/dist/base.js +1 -1
  77. package/dist/blankslate.css +1 -2
  78. package/dist/blankslate.css.map +1 -1
  79. package/dist/blankslate.js +1 -1
  80. package/dist/box.css +1 -2
  81. package/dist/box.css.map +1 -1
  82. package/dist/box.js +1 -1
  83. package/dist/branch-name.css +1 -2
  84. package/dist/branch-name.css.map +1 -1
  85. package/dist/branch-name.js +1 -1
  86. package/dist/breadcrumb.css +1 -2
  87. package/dist/breadcrumb.css.map +1 -1
  88. package/dist/breadcrumb.js +1 -1
  89. package/dist/buttons.css +1 -2
  90. package/dist/buttons.css.map +1 -1
  91. package/dist/buttons.js +1 -1
  92. package/dist/color-modes.css +2 -0
  93. package/dist/color-modes.css.map +1 -0
  94. package/dist/color-modes.js +1 -0
  95. package/dist/core.css +3 -4
  96. package/dist/core.css.map +1 -1
  97. package/dist/core.js +1 -1
  98. package/dist/deprecations.json +539 -0
  99. package/dist/dropdown.css +2 -0
  100. package/dist/dropdown.css.map +1 -0
  101. package/dist/dropdown.js +1 -0
  102. package/dist/forms.css +1 -2
  103. package/dist/forms.css.map +1 -1
  104. package/dist/forms.js +1 -1
  105. package/dist/header.css +2 -0
  106. package/dist/header.css.map +1 -0
  107. package/dist/header.js +1 -0
  108. package/dist/labels.css +1 -2
  109. package/dist/labels.css.map +1 -1
  110. package/dist/labels.js +1 -1
  111. package/dist/layout.css +1 -2
  112. package/dist/layout.css.map +1 -1
  113. package/dist/layout.js +1 -1
  114. package/dist/links.css +2 -0
  115. package/dist/links.css.map +1 -0
  116. package/dist/links.js +1 -0
  117. package/dist/loaders.css +2 -0
  118. package/dist/loaders.css.map +1 -0
  119. package/dist/loaders.js +1 -0
  120. package/dist/markdown.css +1 -2
  121. package/dist/markdown.css.map +1 -1
  122. package/dist/markdown.js +1 -1
  123. package/dist/marketing-buttons.css +1 -2
  124. package/dist/marketing-buttons.css.map +1 -1
  125. package/dist/marketing-buttons.js +1 -1
  126. package/dist/marketing-support.css +1 -2
  127. package/dist/marketing-support.js +1 -1
  128. package/dist/marketing-type.css +1 -2
  129. package/dist/marketing-type.css.map +1 -1
  130. package/dist/marketing-type.js +1 -1
  131. package/dist/marketing-utilities.css +1 -2
  132. package/dist/marketing-utilities.css.map +1 -1
  133. package/dist/marketing-utilities.js +1 -1
  134. package/dist/marketing.css +3 -4
  135. package/dist/marketing.css.map +1 -1
  136. package/dist/marketing.js +1 -1
  137. package/dist/meta.json +317 -274
  138. package/dist/navigation.css +1 -2
  139. package/dist/navigation.css.map +1 -1
  140. package/dist/navigation.js +1 -1
  141. package/dist/pagination.css +1 -2
  142. package/dist/pagination.css.map +1 -1
  143. package/dist/pagination.js +1 -1
  144. package/dist/popover.css +1 -2
  145. package/dist/popover.css.map +1 -1
  146. package/dist/popover.js +1 -1
  147. package/dist/primer.css +13 -14
  148. package/dist/primer.css.map +1 -1
  149. package/dist/primer.js +1 -1
  150. package/dist/product.css +3 -4
  151. package/dist/product.css.map +1 -1
  152. package/dist/product.js +1 -1
  153. package/dist/progress.css +1 -2
  154. package/dist/progress.css.map +1 -1
  155. package/dist/progress.js +1 -1
  156. package/dist/select-menu.css +2 -0
  157. package/dist/select-menu.css.map +1 -0
  158. package/dist/select-menu.js +1 -0
  159. package/dist/stats/actionlist.json +1 -0
  160. package/dist/stats/alerts.json +1 -1
  161. package/dist/stats/autocomplete.json +1 -0
  162. package/dist/stats/avatars.json +1 -1
  163. package/dist/stats/base.json +1 -1
  164. package/dist/stats/blankslate.json +1 -1
  165. package/dist/stats/box.json +1 -1
  166. package/dist/stats/branch-name.json +1 -1
  167. package/dist/stats/breadcrumb.json +1 -1
  168. package/dist/stats/buttons.json +1 -1
  169. package/dist/stats/color-modes.json +1 -0
  170. package/dist/stats/core.json +1 -1
  171. package/dist/stats/dropdown.json +1 -0
  172. package/dist/stats/forms.json +1 -1
  173. package/dist/stats/header.json +1 -0
  174. package/dist/stats/labels.json +1 -1
  175. package/dist/stats/layout.json +1 -1
  176. package/dist/stats/links.json +1 -0
  177. package/dist/stats/loaders.json +1 -0
  178. package/dist/stats/markdown.json +1 -1
  179. package/dist/stats/marketing-buttons.json +1 -1
  180. package/dist/stats/marketing-support.json +1 -1
  181. package/dist/stats/marketing-type.json +1 -1
  182. package/dist/stats/marketing-utilities.json +1 -1
  183. package/dist/stats/marketing.json +1 -1
  184. package/dist/stats/navigation.json +1 -1
  185. package/dist/stats/pagination.json +1 -1
  186. package/dist/stats/popover.json +1 -1
  187. package/dist/stats/primer.json +1 -1
  188. package/dist/stats/product.json +1 -1
  189. package/dist/stats/progress.json +1 -1
  190. package/dist/stats/select-menu.json +1 -0
  191. package/dist/stats/subhead.json +1 -1
  192. package/dist/stats/support.json +1 -1
  193. package/dist/stats/table-object.json +1 -1
  194. package/dist/stats/timeline.json +1 -0
  195. package/dist/stats/toasts.json +1 -0
  196. package/dist/stats/tooltips.json +1 -1
  197. package/dist/stats/truncate.json +1 -1
  198. package/dist/stats/utilities.json +1 -1
  199. package/dist/subhead.css +1 -2
  200. package/dist/subhead.css.map +1 -1
  201. package/dist/subhead.js +1 -1
  202. package/dist/support.css +1 -1
  203. package/dist/support.js +1 -1
  204. package/dist/table-object.css +0 -1
  205. package/dist/table-object.css.map +1 -1
  206. package/dist/table-object.js +1 -1
  207. package/dist/timeline.css +2 -0
  208. package/dist/timeline.css.map +1 -0
  209. package/dist/timeline.js +1 -0
  210. package/dist/toasts.css +2 -0
  211. package/dist/toasts.css.map +1 -0
  212. package/dist/toasts.js +1 -0
  213. package/dist/tooltips.css +1 -2
  214. package/dist/tooltips.css.map +1 -1
  215. package/dist/tooltips.js +1 -1
  216. package/dist/truncate.css +1 -2
  217. package/dist/truncate.css.map +1 -1
  218. package/dist/truncate.js +1 -1
  219. package/dist/utilities.css +1 -2
  220. package/dist/utilities.css.map +1 -1
  221. package/dist/utilities.js +1 -1
  222. package/dist/variables.json +1352 -0
  223. package/dropdown/README.md +25 -0
  224. package/dropdown/dropdown.scss +272 -0
  225. package/dropdown/index.scss +2 -0
  226. package/forms/README.md +11 -23
  227. package/forms/form-control.scss +76 -32
  228. package/forms/form-group.scss +83 -46
  229. package/forms/form-select.scss +17 -5
  230. package/forms/form-validation.scss +51 -32
  231. package/forms/index.scss +7 -6
  232. package/forms/input-group.scss +2 -0
  233. package/forms/radio-group.scss +62 -0
  234. package/header/README.md +25 -0
  235. package/header/header.scss +47 -0
  236. package/header/index.scss +2 -0
  237. package/index.scss +7 -4
  238. package/labels/README.md +11 -23
  239. package/labels/counters.scss +24 -13
  240. package/labels/diffstat.scss +37 -0
  241. package/labels/index.scss +8 -4
  242. package/labels/issue-labels.scss +23 -0
  243. package/labels/labels.scss +59 -40
  244. package/labels/mixins.scss +32 -0
  245. package/labels/states.scss +40 -19
  246. package/layout/README.md +11 -23
  247. package/layout/container.scss +0 -8
  248. package/layout/grid-offset.scss +11 -11
  249. package/layout/grid.scss +23 -23
  250. package/layout/index.scss +7 -5
  251. package/layout/layout.scss +185 -0
  252. package/layout/mixins.scss +79 -0
  253. package/links/README.md +25 -0
  254. package/links/index.scss +3 -0
  255. package/links/link.scss +55 -0
  256. package/loaders/README.md +25 -0
  257. package/loaders/index.scss +2 -0
  258. package/loaders/loaders.scss +19 -0
  259. package/markdown/README.md +11 -23
  260. package/markdown/blob-csv.scss +4 -2
  261. package/markdown/code.scss +11 -3
  262. package/markdown/footnotes.scss +37 -0
  263. package/markdown/headings.scss +13 -4
  264. package/markdown/images.scss +15 -4
  265. package/markdown/index.scss +9 -8
  266. package/markdown/lists.scss +19 -5
  267. package/markdown/markdown-body.scss +15 -18
  268. package/markdown/tables.scss +8 -5
  269. package/marketing/README.md +11 -23
  270. package/marketing/buttons/button.scss +82 -61
  271. package/marketing/index.scss +6 -11
  272. package/marketing/support/index.scss +1 -0
  273. package/marketing/support/mixins.scss +66 -0
  274. package/marketing/support/variables.scss +110 -51
  275. package/marketing/type/typography.scss +100 -62
  276. package/marketing/utilities/animations.scss +9 -0
  277. package/marketing/utilities/filters.scss +0 -1
  278. package/marketing/utilities/index.scss +2 -3
  279. package/marketing/utilities/layout.scss +32 -11
  280. package/navigation/README.md +11 -23
  281. package/navigation/filter-list.scss +16 -14
  282. package/navigation/index.scss +7 -6
  283. package/navigation/menu.scss +44 -35
  284. package/navigation/sidenav.scss +108 -0
  285. package/navigation/subnav.scss +28 -21
  286. package/navigation/tabnav.scss +45 -21
  287. package/navigation/underline-nav.scss +36 -22
  288. package/package.json +78 -107
  289. package/pagination/README.md +12 -14
  290. package/pagination/index.scss +2 -2
  291. package/pagination/pagination.scss +61 -37
  292. package/popover/README.md +11 -24
  293. package/popover/index.scss +2 -2
  294. package/popover/popover.scss +18 -9
  295. package/postcss.config.cjs +22 -0
  296. package/prettier.config.cjs +1 -0
  297. package/product/README.md +11 -23
  298. package/product/index.scss +19 -17
  299. package/progress/README.md +11 -23
  300. package/progress/index.scss +2 -2
  301. package/progress/progress.scss +11 -1
  302. package/select-menu/README.md +25 -0
  303. package/select-menu/index.scss +3 -0
  304. package/select-menu/select-menu.scss +464 -0
  305. package/stylelint.config.cjs +16 -0
  306. package/subhead/README.md +11 -25
  307. package/subhead/index.scss +2 -2
  308. package/subhead/subhead.scss +10 -4
  309. package/support/README.md +12 -18
  310. package/support/index.scss +7 -8
  311. package/support/mixins/color-modes.scss +106 -0
  312. package/support/mixins/misc.scss +9 -12
  313. package/support/mixins/typography.scss +1 -1
  314. package/support/variables/layout.scss +106 -11
  315. package/support/variables/misc.scss +7 -30
  316. package/support/variables/typography.scss +4 -4
  317. package/table-object/README.md +11 -24
  318. package/table-object/index.scss +1 -1
  319. package/timeline/README.md +25 -0
  320. package/timeline/index.scss +2 -0
  321. package/timeline/timeline-item.scss +95 -0
  322. package/toasts/README.md +25 -0
  323. package/toasts/index.scss +2 -0
  324. package/toasts/toasts.scss +124 -0
  325. package/tooltips/README.md +11 -24
  326. package/tooltips/index.scss +2 -2
  327. package/tooltips/tooltips.scss +17 -8
  328. package/truncate/README.md +11 -24
  329. package/truncate/index.scss +2 -1
  330. package/truncate/truncate.scss +41 -7
  331. package/utilities/README.md +11 -23
  332. package/utilities/animations.scss +14 -2
  333. package/utilities/borders.scss +29 -65
  334. package/utilities/box-shadow.scss +8 -9
  335. package/utilities/colors.scss +71 -110
  336. package/utilities/details.scss +12 -4
  337. package/utilities/flexbox.scss +14 -14
  338. package/utilities/index.scss +12 -12
  339. package/utilities/layout.scss +28 -22
  340. package/utilities/margin.scss +34 -17
  341. package/utilities/padding.scss +13 -9
  342. package/utilities/typography.scss +54 -25
  343. package/utilities/visibility-display.scss +0 -13
  344. package/.browserslistrc +0 -6
  345. package/.eslintrc.json +0 -13
  346. package/.stylelintrc.json +0 -9
  347. package/MIGRATING.md +0 -70
  348. package/bin/primer-migrate +0 -86
  349. package/build/build.css +0 -23
  350. package/build/build.json +0 -1
  351. package/build/index.js +0 -1
  352. package/dist/marketing-support.css.map +0 -1
  353. package/dist/support.css.map +0 -1
  354. package/fonts/Inter-Medium.woff +0 -0
  355. package/fonts/Inter-Regular.woff +0 -0
  356. package/layout/columns.scss +0 -56
  357. package/marketing/buttons/README.md +0 -39
  358. package/marketing/support/README.md +0 -31
  359. package/marketing/type/README.md +0 -39
  360. package/marketing/utilities/README.md +0 -36
  361. package/marketing/utilities/margin.scss +0 -18
  362. package/marketing/utilities/padding.scss +0 -28
  363. package/postcss.config.js +0 -14
  364. package/prettier.config.js +0 -1
  365. package/support/mixins/buttons.scss +0 -160
  366. package/support/variables/color-system.scss +0 -243
  367. package/support/variables/colors.scss +0 -70
package/buttons/button.scss CHANGED
@@ -1,24 +1,33 @@
1
- // stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors
1
+ // stylelint-disable selector-max-type, no-duplicate-selectors
2
2
 
3
3
  // Base button styles
4
4
  .btn {
5
5
  position: relative;
6
6
  display: inline-block;
7
- padding: 6px 12px;
7
+ // stylelint-disable-next-line primer/spacing
8
+ padding: 5px $spacer-3;
8
9
  font-size: $body-font-size;
9
- font-weight: $font-weight-bold;
10
+ font-weight: $font-weight-semibold;
11
+ // stylelint-disable-next-line primer/typography
10
12
  line-height: 20px; // Specifically not inherit our `<body>` default
11
13
  white-space: nowrap;
12
14
  vertical-align: middle;
13
15
  cursor: pointer;
14
16
  user-select: none;
15
- background-repeat: repeat-x;
16
- background-position: -1px -1px;
17
- background-size: 110% 110%;
18
- border: 1px solid transparentize($black, 0.8);
19
- border-radius: 0.25em;
17
+ border: $border-width $border-style;
18
+ border-radius: $border-radius;
20
19
  appearance: none; // Corrects inability to style clickable `input` types in iOS.
21
20
 
21
+ &:hover {
22
+ text-decoration: none;
23
+ }
24
+
25
+ &:disabled,
26
+ &.disabled,
27
+ &[aria-disabled=true] {
28
+ cursor: default;
29
+ }
30
+
22
31
  i {
23
32
  font-style: normal;
24
33
  font-weight: $font-weight-semibold;
@@ -26,142 +35,271 @@
26
35
  }
27
36
 
28
37
  .octicon {
29
- vertical-align: text-top;
38
+ margin-right: $spacer-1;
39
+ color: var(--color-fg-muted);
40
+ vertical-align: text-bottom;
41
+
42
+ &:only-child {
43
+ margin-right: 0;
44
+ }
30
45
  }
31
46
 
32
- // Darken for just a tad more contrast against the button background
33
47
  .Counter {
34
- color: $gray-600;
48
+ // stylelint-disable-next-line primer/spacing
49
+ margin-left: 2px;
50
+ color: inherit;
35
51
  text-shadow: none;
36
- background-color: rgba($black, 0.1);
52
+ vertical-align: top;
53
+ background-color: var(--color-btn-counter-bg);
37
54
  }
38
55
 
39
- &:hover {
40
- text-decoration: none;
41
- background-repeat: repeat-x;
56
+ .dropdown-caret {
57
+ margin-left: $spacer-1;
58
+ opacity: 0.8;
42
59
  }
60
+ }
43
61
 
44
- &:focus {
45
- outline: 0;
62
+ // Default button
63
+
64
+ .btn {
65
+ color: var(--color-btn-text);
66
+ background-color: var(--color-btn-bg);
67
+ border-color: var(--color-btn-border);
68
+ box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
69
+ transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
70
+ transition-property: color, background-color, border-color;
71
+
72
+ &:hover,
73
+ &.hover,
74
+ [open] > & {
75
+ background-color: var(--color-btn-hover-bg);
76
+ border-color: var(--color-btn-hover-border);
77
+ transition-duration: 0.1s;
78
+ }
79
+
80
+ &:active {
81
+ background-color: var(--color-btn-active-bg);
82
+ border-color: var(--color-btn-active-border);
83
+ transition: none;
84
+ }
85
+
86
+ &.selected,
87
+ &[aria-selected=true] {
88
+ background-color: var(--color-btn-selected-bg);
89
+ box-shadow: var(--color-primer-shadow-inset);
46
90
  }
47
91
 
48
92
  &:disabled,
49
- &.disabled {
50
- cursor: default;
51
- // Repeat `background-position` because `:hover`
52
- background-position: 0 0;
93
+ &.disabled,
94
+ &[aria-disabled=true] {
95
+ color: var(--color-primer-fg-disabled);
96
+ background-color: var(--color-btn-bg);
97
+ border-color: var(--color-btn-border);
98
+
99
+ .octicon {
100
+ color: var(--color-primer-fg-disabled);
101
+ }
53
102
  }
54
103
 
55
- &:active,
56
- &.selected {
57
- background-image: none;
104
+ // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
105
+ &:focus,
106
+ &.focus {
107
+ border-color: var(--color-btn-focus-border);
108
+ outline: none;
109
+ box-shadow: var(--color-btn-focus-shadow);
58
110
  }
59
111
  }
60
112
 
61
- .btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
62
- .btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
63
- .btn-purple { @include btn-solid($text-white, lighten($purple-500, 5%), darken($purple-500, 5%)); }
64
- .btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
65
- .btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
113
+ // Primary button
114
+
115
+ .btn-primary {
116
+ color: var(--color-btn-primary-text);
117
+ background-color: var(--color-btn-primary-bg);
118
+ border-color: var(--color-btn-primary-border);
119
+ box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
120
+
121
+ &:hover,
122
+ &.hover,
123
+ [open] > & {
124
+ background-color: var(--color-btn-primary-hover-bg);
125
+ border-color: var(--color-btn-primary-hover-border);
126
+ }
127
+
128
+ &:active,
129
+ &.selected,
130
+ &[aria-selected=true] {
131
+ background-color: var(--color-btn-primary-selected-bg);
132
+ box-shadow: var(--color-btn-primary-selected-shadow);
133
+ }
134
+
135
+ &:disabled,
136
+ &.disabled,
137
+ &[aria-disabled=true] {
138
+ color: var(--color-btn-primary-disabled-text);
139
+ background-color: var(--color-btn-primary-disabled-bg);
140
+ border-color: var(--color-btn-primary-disabled-border);
141
+
142
+ .octicon {
143
+ color: var(--color-btn-primary-disabled-text);
144
+ }
145
+ }
146
+
147
+ &:focus,
148
+ &.focus {
149
+ background-color: var(--color-btn-primary-focus-bg);
150
+ border-color: var(--color-btn-primary-focus-border);
151
+ box-shadow: var(--color-btn-primary-focus-shadow);
152
+ }
153
+
154
+ .Counter {
155
+ color: inherit;
156
+ background-color: var(--color-btn-primary-counter-bg);
157
+ }
158
+
159
+ .octicon {
160
+ color: var(--color-btn-primary-icon);
161
+ }
162
+ }
66
163
 
67
164
  // Outline button
68
- //
69
- // For when we need a linky-action that's not too heavy in busier
70
- // areas like conversation timelines.
165
+
71
166
  .btn-outline {
72
- @include btn-outline($text-blue);
73
- }
167
+ color: var(--color-btn-outline-text);
74
168
 
75
- // Social button count
76
- .btn-with-count {
77
- float: left;
78
- border-top-right-radius: 0;
79
- border-bottom-right-radius: 0;
80
- }
169
+ &:hover,
170
+ [open] > & {
171
+ color: var(--color-btn-outline-hover-text);
172
+ background-color: var(--color-btn-outline-hover-bg);
173
+ border-color: var(--color-btn-outline-hover-border);
174
+ box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
81
175
 
82
- // Minibutton overrides
83
- //
84
- // Tweak `line-height` to make them smaller.
85
- .btn-sm {
86
- padding: 3px 10px;
87
- font-size: $font-size-small;
88
- line-height: 20px;
89
- }
176
+ .Counter {
177
+ background-color: var(--color-btn-outline-hover-counter-bg);
178
+ }
90
179
 
91
- // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
92
- .btn-large {
93
- padding: $em-spacer-6 1.25em;
94
- font-size: inherit;
95
- border-radius: 6px;
96
- }
180
+ .octicon {
181
+ color: inherit;
182
+ }
183
+ }
97
184
 
98
- // Hidden text button
99
- //
100
- // Use `.hidden-text-expander` to indicate and expand hidden text.
101
- .hidden-text-expander {
102
- display: block;
185
+ &:active,
186
+ &.selected,
187
+ &[aria-selected=true] {
188
+ color: var(--color-btn-outline-selected-text);
189
+ background-color: var(--color-btn-outline-selected-bg);
190
+ border-color: var(--color-btn-outline-selected-border);
191
+ box-shadow: var(--color-btn-outline-selected-shadow);
192
+ }
103
193
 
104
- &.inline {
105
- position: relative;
106
- top: -1px;
107
- display: inline-block;
108
- margin-left: 5px;
109
- line-height: 0;
194
+ &:disabled,
195
+ &.disabled,
196
+ &[aria-disabled=true] {
197
+ color: var(--color-btn-outline-disabled-text);
198
+ background-color: var(--color-btn-outline-disabled-bg);
199
+ border-color: var(--color-btn-border);
200
+ box-shadow: none;
201
+
202
+ .Counter {
203
+ background-color: var(--color-btn-outline-disabled-counter-bg);
204
+ }
205
+ }
206
+
207
+ &:focus {
208
+ border-color: var(--color-btn-outline-focus-border);
209
+ box-shadow: var(--color-btn-outline-focus-shadow);
210
+ }
211
+
212
+ .Counter {
213
+ color: inherit;
214
+ background-color: var(--color-btn-outline-counter-bg);
110
215
  }
111
216
  }
112
217
 
113
- .hidden-text-expander a,
114
- .ellipsis-expander {
115
- display: inline-block;
116
- height: 12px;
117
- padding: 0 5px 5px;
118
- font-size: $font-size-small;
119
- font-weight: $font-weight-bold;
120
- line-height: 6px;
121
- color: $gray-700;
122
- text-decoration: none;
123
- vertical-align: middle;
124
- background: lighten($gray-300, 5%);
125
- border: 0;
126
- border-radius: 1px;
218
+ // Danger button
127
219
 
128
- &:hover {
129
- text-decoration: none;
130
- background-color: darken($gray-300, 4%);
220
+ .btn-danger {
221
+ color: var(--color-btn-danger-text);
222
+
223
+ .octicon {
224
+ color: var(--color-btn-danger-icon);
131
225
  }
132
226
 
133
- &:active {
134
- color: $text-white;
135
- background-color: $blue-400;
227
+ &:hover,
228
+ [open] > & {
229
+ color: var(--color-btn-danger-hover-text);
230
+ background-color: var(--color-btn-danger-hover-bg);
231
+ border-color: var(--color-btn-danger-hover-border);
232
+ box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
233
+
234
+ .Counter {
235
+ background-color: var(--color-btn-danger-hover-counter-bg);
236
+ }
237
+
238
+ .octicon {
239
+ color: var(--color-btn-danger-hover-icon);
240
+ }
241
+ }
242
+
243
+ &:active,
244
+ &.selected,
245
+ &[aria-selected=true] {
246
+ color: var(--color-btn-danger-selected-text);
247
+ background-color: var(--color-btn-danger-selected-bg);
248
+ border-color: var(--color-btn-danger-selected-border);
249
+ box-shadow: var(--color-btn-danger-selected-shadow);
250
+ }
251
+
252
+ &:disabled,
253
+ &.disabled,
254
+ &[aria-disabled=true] {
255
+ color: var(--color-btn-danger-disabled-text);
256
+ background-color: var(--color-btn-danger-disabled-bg);
257
+ border-color: var(--color-btn-border);
258
+ box-shadow: none;
259
+
260
+ .Counter {
261
+ background-color: var(--color-btn-danger-disabled-counter-bg);
262
+ }
263
+
264
+ .octicon {
265
+ color: var(--color-btn-danger-disabled-text);
266
+ }
267
+ }
268
+
269
+ &:focus {
270
+ border-color: var(--color-btn-danger-focus-border);
271
+ box-shadow: var(--color-btn-danger-focus-shadow);
272
+ }
273
+
274
+ .Counter {
275
+ color: inherit;
276
+ background-color: var(--color-btn-danger-counter-bg);
136
277
  }
137
278
  }
138
279
 
139
- // Social count bubble
280
+ // Sizes
140
281
  //
141
- // A container that is used for social bubbles counts.
142
- .social-count {
143
- float: left;
144
- padding: 3px 10px;
282
+ // Tweak `line-height` to make them smaller.
283
+ .btn-sm {
284
+ // stylelint-disable-next-line primer/spacing
285
+ padding: 3px 12px;
145
286
  font-size: $font-size-small;
146
- font-weight: $font-weight-bold;
287
+ // stylelint-disable-next-line primer/typography
147
288
  line-height: 20px;
148
- color: $text-gray-dark;
149
- vertical-align: middle;
150
- background-color: $bg-white;
151
- border: 1px solid transparentize($black, 0.8); // match with .btn
152
- border-left: 0;
153
- border-top-right-radius: 3px;
154
- border-bottom-right-radius: 3px;
155
289
 
156
- &:hover,
157
- &:active {
158
- text-decoration: none;
290
+ .octicon {
291
+ vertical-align: text-top;
159
292
  }
293
+ }
160
294
 
161
- &:hover {
162
- color: $text-blue;
163
- cursor: pointer;
164
- }
295
+ // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
296
+ .btn-large {
297
+ padding: $em-spacer-6 1.5em;
298
+ font-size: inherit;
299
+ line-height: $lh-default;
300
+
301
+ // stylelint-disable-next-line primer/borders
302
+ border-radius: 0.5em;
165
303
  }
166
304
 
167
305
  // Full-width button
@@ -172,41 +310,3 @@
172
310
  width: 100%;
173
311
  text-align: center;
174
312
  }
175
-
176
- // Link-like buttons
177
- //
178
- // This class is for styling <button> and <input> elements to look like links
179
- .btn-link {
180
- display: inline-block;
181
- padding: 0;
182
- font-size: inherit;
183
- color: $text-blue;
184
- text-decoration: none;
185
- white-space: nowrap;
186
- cursor: pointer;
187
- user-select: none;
188
- background-color: transparent;
189
- border: 0;
190
- appearance: none; // Corrects inability to style clickable `input` types in iOS.
191
-
192
- &:hover {
193
- text-decoration: underline;
194
- }
195
-
196
- &:disabled {
197
- &,
198
- &:hover {
199
- color: rgba($gray-600, 0.5);
200
- cursor: default;
201
- }
202
- }
203
- }
204
-
205
- .details-reset {
206
- // Remove marker added by the display: list-item browser default
207
- > summary { list-style: none; }
208
- // Remove marker added by details polyfill
209
- > summary::before { display: none; }
210
- // Remove marker added by Chrome
211
- > summary::-webkit-details-marker { display: none; }
212
- }
package/buttons/index.scss CHANGED
@@ -1,3 +1,4 @@
1
- @import "../support/index.scss";
2
- @import "./button.scss";
3
- @import "./button-group.scss";
1
+ @import '../support/index.scss';
2
+ @import './button.scss';
3
+ @import './button-group.scss';
4
+ @import './misc.scss';
package/buttons/misc.scss ADDED
@@ -0,0 +1,222 @@
1
+ // stylelint-disable selector-max-type
2
+
3
+ // Link-like buttons
4
+ //
5
+ // This class is for styling <button> and <input> elements to look like links
6
+ .btn-link {
7
+ display: inline-block;
8
+ padding: 0;
9
+ font-size: inherit;
10
+ color: var(--color-accent-fg);
11
+ text-decoration: none;
12
+ white-space: nowrap;
13
+ cursor: pointer;
14
+ user-select: none;
15
+ background-color: transparent;
16
+ border: 0;
17
+ appearance: none; // Corrects inability to style clickable `input` types in iOS.
18
+
19
+ &:hover {
20
+ text-decoration: underline;
21
+ }
22
+
23
+ &:disabled,
24
+ &[aria-disabled=true] {
25
+ &,
26
+ &:hover {
27
+ color: var(--color-primer-fg-disabled);
28
+ cursor: default;
29
+ }
30
+ }
31
+ }
32
+
33
+ // Invisible button
34
+ //
35
+ // Typically used as a "cancel" button next to a .btn
36
+ .btn-invisible {
37
+ color: var(--color-accent-fg);
38
+ background-color: transparent; // Reset default gradient backgrounds and colors
39
+ border: 0;
40
+ border-radius: 0;
41
+ box-shadow: none;
42
+
43
+ &:hover,
44
+ &.zeroclipboard-is-hover {
45
+ color: var(--color-accent-fg);
46
+ background: none;
47
+ outline: none;
48
+ box-shadow: none;
49
+ }
50
+
51
+ &:active,
52
+ &:focus,
53
+ &.selected,
54
+ &[aria-selected=true],
55
+ &.zeroclipboard-is-active {
56
+ color: var(--color-accent-fg);
57
+ background: none;
58
+ border-color: var(--color-btn-active-border);
59
+ outline: none;
60
+ box-shadow: var(--color-btn-focus-shadow);
61
+ }
62
+
63
+ &:disabled,
64
+ &.disabled,
65
+ &[aria-disabled=true] {
66
+ color: var(--color-primer-fg-disabled);
67
+ background-color: transparent;
68
+ }
69
+ }
70
+
71
+ // Octicon button
72
+ //
73
+ // Icon-only buttons
74
+ .btn-octicon {
75
+ display: inline-block;
76
+ // stylelint-disable-next-line primer/spacing
77
+ padding: 5px;
78
+ // stylelint-disable-next-line primer/spacing
79
+ margin-left: 5px;
80
+ line-height: $lh-condensed-ultra;
81
+ color: var(--color-fg-muted);
82
+ vertical-align: middle;
83
+
84
+ // For `<button>` elements
85
+ background: transparent;
86
+ border: 0;
87
+ box-shadow: none;
88
+
89
+ &:hover { color: var(--color-accent-fg); }
90
+
91
+ &.disabled,
92
+ &[aria-disabled=true] {
93
+ color: var(--color-primer-fg-disabled);
94
+ cursor: default;
95
+
96
+ &:hover { color: var(--color-primer-fg-disabled); }
97
+ }
98
+ }
99
+
100
+ .btn-octicon-danger:hover {
101
+ color: var(--color-danger-fg);
102
+ }
103
+
104
+ // Close button
105
+ //
106
+ // Typically used with an octicon-x
107
+ .close-button {
108
+ padding: 0;
109
+ color: var(--color-fg-muted);
110
+ background: transparent;
111
+ border: 0;
112
+ outline: none;
113
+
114
+ &:hover {
115
+ color: var(--color-fg-default);
116
+ }
117
+
118
+ &:active,
119
+ &:focus {
120
+ color: var(--color-fg-muted);
121
+ border-color: var(--color-btn-active-border);
122
+ outline: none;
123
+ box-shadow: var(--color-btn-focus-shadow);
124
+ }
125
+ }
126
+
127
+ // Hidden text button
128
+ //
129
+ // Use `.hidden-text-expander` to indicate and expand hidden text.
130
+ .hidden-text-expander {
131
+ display: block;
132
+
133
+ &.inline {
134
+ position: relative;
135
+ top: -1px;
136
+ display: inline-block;
137
+ // stylelint-disable-next-line primer/spacing
138
+ margin-left: 5px;
139
+ line-height: 0;
140
+ }
141
+ }
142
+
143
+ .hidden-text-expander a,
144
+ .ellipsis-expander {
145
+ display: inline-block;
146
+ height: 12px;
147
+ // stylelint-disable-next-line primer/spacing
148
+ padding: 0 5px 5px;
149
+ font-size: $font-size-small;
150
+ font-weight: $font-weight-bold;
151
+ // stylelint-disable-next-line primer/typography
152
+ line-height: 6px;
153
+ color: var(--color-fg-default);
154
+ text-decoration: none;
155
+ vertical-align: middle;
156
+ background: var(--color-neutral-muted);
157
+ border: 0;
158
+ // stylelint-disable-next-line primer/borders
159
+ border-radius: 1px;
160
+
161
+ &:hover {
162
+ text-decoration: none;
163
+ background-color: var(--color-accent-muted);
164
+ }
165
+
166
+ &:active {
167
+ color: var(--color-fg-on-emphasis);
168
+ background-color: var(--color-accent-emphasis);
169
+ }
170
+ }
171
+
172
+ // Social button count
173
+ // TODO: Deprecate? Use BtnGroup instead?
174
+
175
+ .btn-with-count {
176
+ float: left;
177
+ border-top-right-radius: 0;
178
+ border-bottom-right-radius: 0;
179
+
180
+ &:focus {
181
+ z-index: 1;
182
+ }
183
+ }
184
+
185
+ // Social count bubble
186
+ //
187
+ // A container that is used for social bubbles counts.
188
+
189
+ .social-count {
190
+ position: relative;
191
+ float: left;
192
+ // stylelint-disable-next-line primer/spacing
193
+ padding: 3px 12px;
194
+ font-size: $font-size-small;
195
+ font-weight: $font-weight-bold;
196
+ // stylelint-disable-next-line primer/typography
197
+ line-height: 20px;
198
+ color: var(--color-fg-default);
199
+ vertical-align: middle;
200
+ background-color: var(--color-canvas-default);
201
+ border: $border-width $border-style var(--color-btn-border);
202
+ border-left: 0;
203
+ border-top-right-radius: $border-radius;
204
+ border-bottom-right-radius: $border-radius;
205
+ box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
206
+
207
+ &:hover,
208
+ &:active {
209
+ text-decoration: none;
210
+ }
211
+
212
+ &:hover {
213
+ color: var(--color-accent-fg);
214
+ cursor: pointer;
215
+ }
216
+
217
+ &:focus {
218
+ z-index: 1;
219
+ outline: 0;
220
+ box-shadow: var(--color-primer-shadow-focus);
221
+ }
222
+ }
package/color-modes/index.scss ADDED
@@ -0,0 +1,9 @@
1
+ // All themes
2
+
3
+ @import './themes/light.scss';
4
+ @import './themes/light_colorblind.scss';
5
+ @import './themes/dark.scss';
6
+ @import './themes/dark_dimmed.scss';
7
+ @import './themes/dark_high_contrast.scss';
8
+ @import './themes/dark_colorblind.scss';
9
+ @import './native.scss';
package/color-modes/native.scss ADDED
@@ -0,0 +1,10 @@
1
+ // color-scheme
2
+ // Enables color modes for native elements
3
+
4
+ @include color-mode(light) { color-scheme: light; }
5
+ @include color-mode(dark) { color-scheme: dark; }
6
+
7
+ [data-color-mode] {
8
+ color: var(--color-fg-default);
9
+ background-color: var(--color-canvas-default);
10
+ }