@primer/css 20.0.0-rc.7668517e → 20.0.0-rc.cea74927

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 (169) hide show
  1. package/CHANGELOG.md +156 -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 +213 -129
  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 +50 -1
  12. package/avatars/avatar-stack.scss +1 -0
  13. package/base/base.scss +63 -3
  14. package/base/kbd.scss +0 -1
  15. package/base/normalize.scss +13 -53
  16. package/base/typography-base.scss +3 -2
  17. package/blankslate/blankslate.scss +20 -1
  18. package/box/box.scss +0 -3
  19. package/branch-name/branch-name.scss +1 -0
  20. package/buttons/button.scss +55 -27
  21. package/buttons/misc.scss +25 -19
  22. package/color-modes/index.scss +2 -0
  23. package/color-modes/native.scss +11 -0
  24. package/color-modes/themes/dark_tritanopia.scss +6 -0
  25. package/color-modes/themes/light_tritanopia.scss +6 -0
  26. package/dist/actionlist.css +1 -1
  27. package/dist/actionlist.css.map +1 -1
  28. package/dist/alerts.css +1 -1
  29. package/dist/alerts.css.map +1 -1
  30. package/dist/autocomplete.css +1 -1
  31. package/dist/autocomplete.css.map +1 -1
  32. package/dist/avatars.css +1 -1
  33. package/dist/avatars.css.map +1 -1
  34. package/dist/base.css +1 -1
  35. package/dist/base.css.map +1 -1
  36. package/dist/blankslate.css +1 -1
  37. package/dist/blankslate.css.map +1 -1
  38. package/dist/box.css.map +1 -1
  39. package/dist/branch-name.css +1 -1
  40. package/dist/branch-name.css.map +1 -1
  41. package/dist/breadcrumb.css.map +1 -1
  42. package/dist/buttons.css +1 -1
  43. package/dist/buttons.css.map +1 -1
  44. package/dist/color-modes.css +1 -1
  45. package/dist/color-modes.css.map +1 -1
  46. package/dist/core.css +1 -1
  47. package/dist/core.css.map +1 -1
  48. package/dist/dropdown.css +1 -1
  49. package/dist/dropdown.css.map +1 -1
  50. package/dist/forms.css +1 -1
  51. package/dist/forms.css.map +1 -1
  52. package/dist/header.css.map +1 -1
  53. package/dist/labels.css +1 -1
  54. package/dist/labels.css.map +1 -1
  55. package/dist/layout.css +1 -1
  56. package/dist/layout.css.map +1 -1
  57. package/dist/links.css +1 -1
  58. package/dist/links.css.map +1 -1
  59. package/dist/loaders.css.map +1 -1
  60. package/dist/markdown.css +1 -1
  61. package/dist/markdown.css.map +1 -1
  62. package/dist/marketing-buttons.css +1 -1
  63. package/dist/marketing-buttons.css.map +1 -1
  64. package/dist/marketing-links.css +1 -1
  65. package/dist/marketing-links.css.map +1 -1
  66. package/dist/marketing-type.css.map +1 -1
  67. package/dist/marketing-utilities.css.map +1 -1
  68. package/dist/marketing.css +1 -1
  69. package/dist/marketing.css.map +1 -1
  70. package/dist/meta.json +84 -84
  71. package/dist/navigation.css +1 -1
  72. package/dist/navigation.css.map +1 -1
  73. package/dist/pagination.css +1 -1
  74. package/dist/pagination.css.map +1 -1
  75. package/dist/popover.css +1 -1
  76. package/dist/popover.css.map +1 -1
  77. package/dist/primer.css +4 -4
  78. package/dist/primer.css.map +1 -1
  79. package/dist/product.css +1 -1
  80. package/dist/product.css.map +1 -1
  81. package/dist/progress.css.map +1 -1
  82. package/dist/select-menu.css.map +1 -1
  83. package/dist/stats/actionlist.json +1 -1
  84. package/dist/stats/alerts.json +1 -1
  85. package/dist/stats/autocomplete.json +1 -1
  86. package/dist/stats/avatars.json +1 -1
  87. package/dist/stats/base.json +1 -1
  88. package/dist/stats/blankslate.json +1 -1
  89. package/dist/stats/branch-name.json +1 -1
  90. package/dist/stats/buttons.json +1 -1
  91. package/dist/stats/color-modes.json +1 -1
  92. package/dist/stats/core.json +1 -1
  93. package/dist/stats/dropdown.json +1 -1
  94. package/dist/stats/forms.json +1 -1
  95. package/dist/stats/labels.json +1 -1
  96. package/dist/stats/layout.json +1 -1
  97. package/dist/stats/links.json +1 -1
  98. package/dist/stats/markdown.json +1 -1
  99. package/dist/stats/marketing-buttons.json +1 -1
  100. package/dist/stats/marketing-links.json +1 -1
  101. package/dist/stats/marketing.json +1 -1
  102. package/dist/stats/navigation.json +1 -1
  103. package/dist/stats/pagination.json +1 -1
  104. package/dist/stats/popover.json +1 -1
  105. package/dist/stats/primer.json +1 -1
  106. package/dist/stats/product.json +1 -1
  107. package/dist/stats/subhead.json +1 -1
  108. package/dist/stats/toasts.json +1 -1
  109. package/dist/stats/tooltips.json +1 -1
  110. package/dist/stats/utilities.json +1 -1
  111. package/dist/subhead.css +1 -1
  112. package/dist/subhead.css.map +1 -1
  113. package/dist/table-object.css.map +1 -1
  114. package/dist/timeline.css.map +1 -1
  115. package/dist/toasts.css +1 -1
  116. package/dist/toasts.css.map +1 -1
  117. package/dist/tooltips.css +1 -1
  118. package/dist/tooltips.css.map +1 -1
  119. package/dist/truncate.css.map +1 -1
  120. package/dist/utilities.css +1 -1
  121. package/dist/utilities.css.map +1 -1
  122. package/dist/variables.json +7 -7
  123. package/dropdown/dropdown.scss +0 -2
  124. package/forms/form-control.scss +24 -5
  125. package/forms/form-group.scss +47 -13
  126. package/forms/form-validation.scss +1 -1
  127. package/forms/input-group.scss +18 -0
  128. package/labels/labels.scss +11 -1
  129. package/labels/mixins.scss +7 -2
  130. package/labels/states.scss +2 -2
  131. package/layout/grid-offset.scss +1 -0
  132. package/layout/grid.scss +1 -0
  133. package/layout/index.scss +1 -0
  134. package/layout/layout.scss +5 -4
  135. package/layout/mixins.scss +27 -1
  136. package/layout/page-layout.scss +384 -0
  137. package/links/link.scss +6 -1
  138. package/markdown/code.scss +5 -0
  139. package/markdown/footnotes.scss +38 -26
  140. package/markdown/headings.scss +17 -0
  141. package/markdown/images.scss +1 -1
  142. package/markdown/markdown-body.scss +0 -8
  143. package/marketing/buttons/button.scss +32 -26
  144. package/marketing/links/link.scss +5 -5
  145. package/marketing/utilities/layout.scss +1 -0
  146. package/navigation/filter-list.scss +18 -0
  147. package/navigation/menu.scss +6 -8
  148. package/navigation/sidenav.scss +1 -10
  149. package/navigation/subnav.scss +18 -0
  150. package/navigation/tabnav.scss +7 -2
  151. package/navigation/underline-nav.scss +51 -45
  152. package/package.json +31 -23
  153. package/pagination/pagination.scss +62 -4
  154. package/popover/popover.scss +1 -2
  155. package/select-menu/select-menu.scss +1 -1
  156. package/subhead/subhead.scss +3 -0
  157. package/support/mixins/misc.scss +28 -5
  158. package/support/variables/layout.scss +2 -3
  159. package/table-object/table-object.scss +3 -0
  160. package/timeline/timeline-item.scss +0 -1
  161. package/toasts/toasts.scss +7 -4
  162. package/tooltips/tooltips.scss +0 -7
  163. package/utilities/colors.scss +16 -0
  164. package/utilities/details.scss +81 -4
  165. package/utilities/layout.scss +1 -1
  166. package/utilities/margin.scss +4 -1
  167. package/utilities/padding.scss +3 -1
  168. package/utilities/visibility-display.scss +52 -3
  169. package/table-object/README.md +0 -25
@@ -36,6 +36,7 @@
36
36
  border-right: $border-width $border-style var(--color-canvas-default);
37
37
  // stylelint-disable-next-line primer/borders
38
38
  border-radius: $border-radius-1;
39
+ box-shadow: none;
39
40
  transition: margin 0.1s ease-in-out;
40
41
 
41
42
  &:first-child {
package/base/base.scss CHANGED
@@ -1,4 +1,4 @@
1
- // stylelint-disable selector-max-type
1
+ // stylelint-disable selector-max-type, selector-no-qualifying-type
2
2
  * {
3
3
  box-sizing: border-box;
4
4
  }
@@ -77,10 +77,70 @@ button {
77
77
  }
78
78
 
79
79
  details {
80
- summary { cursor: pointer; }
80
+ summary {
81
+ cursor: pointer;
82
+ }
81
83
 
82
84
  &:not([open]) {
83
85
  // Set details content hidden by default for browsers that don't do this
84
- > *:not(summary) { display: none !important; }
86
+ > *:not(summary) {
87
+ display: none !important;
88
+ }
89
+ }
90
+ }
91
+
92
+ // global focus styles
93
+
94
+ a,
95
+ button,
96
+ [role='button'],
97
+ input[type='radio'],
98
+ input[type='checkbox'] {
99
+ transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
100
+ transition-property: color, background-color, box-shadow, border-color;
101
+ // fallback :focus state
102
+ &:focus {
103
+ @include focusOutline;
104
+
105
+ // remove fallback :focus if :focus-visible is supported
106
+ &:not(:focus-visible) {
107
+ outline: solid 1px transparent;
108
+ }
109
+ }
110
+
111
+ // default focus state
112
+ &:focus-visible {
113
+ @include focusOutline;
114
+ }
115
+ }
116
+
117
+ a:not([class]),
118
+ input[type='radio'],
119
+ input[type='checkbox'] {
120
+ &:focus,
121
+ &:focus-visible {
122
+ outline-offset: 0;
123
+ }
124
+ }
125
+
126
+ // for handling focus conditionally
127
+ .focus {
128
+ @include focusBoxShadowInset;
129
+ }
130
+
131
+ // Windows High Contrast mode
132
+ @media (forced-colors: active) {
133
+ *:focus,
134
+ *:focus-visible {
135
+ outline: solid 1px transparent;
136
+ }
137
+
138
+ input:not([type='radio'], [type='checkbox']),
139
+ textarea,
140
+ select {
141
+ &:focus,
142
+ &:focus-visible {
143
+ outline-offset: 2px;
144
+ }
85
145
  }
86
146
  }
package/base/kbd.scss CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  kbd {
5
5
  display: inline-block;
6
- // stylelint-disable-next-line primer/spacing
7
6
  padding: ($spacer-1 - 1) ($spacer-1 + 1);
8
7
  font: 11px $mono-font;
9
8
  // stylelint-disable-next-line primer/typography
@@ -39,7 +39,8 @@ header,
39
39
  main, /* 2 */
40
40
  menu,
41
41
  nav,
42
- section { /* 1 */
42
+ section {
43
+ /* 1 */
43
44
  display: block;
44
45
  }
45
46
 
@@ -96,16 +97,6 @@ a {
96
97
  background-color: transparent; /* 1 */
97
98
  }
98
99
 
99
- /**
100
- * Remove the outline on focused links when they are also active or hovered
101
- * in all browsers (opinionated).
102
- */
103
-
104
- a:active,
105
- a:hover {
106
- outline-width: 0;
107
- }
108
-
109
100
  /* Text-level semantics
110
101
  ========================================================================== */
111
102
 
@@ -225,7 +216,7 @@ code,
225
216
  kbd,
226
217
  pre,
227
218
  samp {
228
- font-family: monospace, monospace; /* 1 */
219
+ font-family: monospace; /* 1 */
229
220
  font-size: 1em; /* 2 */
230
221
  }
231
222
 
@@ -278,7 +269,8 @@ optgroup {
278
269
  */
279
270
 
280
271
  button,
281
- input { /* 1 */
272
+ input {
273
+ /* 1 */
282
274
  overflow: visible;
283
275
  }
284
276
 
@@ -288,7 +280,8 @@ input { /* 1 */
288
280
  */
289
281
 
290
282
  button,
291
- select { /* 1 */
283
+ select {
284
+ /* 1 */
292
285
  text-transform: none;
293
286
  }
294
287
 
@@ -305,29 +298,6 @@ html [type="button"], /* 1 */
305
298
  -webkit-appearance: button; /* 2 */
306
299
  }
307
300
 
308
- /**
309
- * Remove the inner border and padding in Firefox.
310
- */
311
-
312
- button::-moz-focus-inner,
313
- [type="button"]::-moz-focus-inner,
314
- [type="reset"]::-moz-focus-inner,
315
- [type="submit"]::-moz-focus-inner {
316
- border-style: none;
317
- padding: 0;
318
- }
319
-
320
- /**
321
- * Restore the focus styles unset by the previous rule.
322
- */
323
-
324
- button:-moz-focusring,
325
- [type="button"]:-moz-focusring,
326
- [type="reset"]:-moz-focusring,
327
- [type="submit"]:-moz-focusring {
328
- outline: 1px dotted ButtonText;
329
- }
330
-
331
301
  /**
332
302
  * Change the border, margin, and padding in all browsers (opinionated).
333
303
  */
@@ -367,8 +337,8 @@ textarea {
367
337
  * 2. Remove the padding in IE 10-.
368
338
  */
369
339
 
370
- [type="checkbox"],
371
- [type="radio"] {
340
+ [type='checkbox'],
341
+ [type='radio'] {
372
342
  box-sizing: border-box; /* 1 */
373
343
  padding: 0; /* 2 */
374
344
  }
@@ -377,27 +347,17 @@ textarea {
377
347
  * Correct the cursor style of increment and decrement buttons in Chrome.
378
348
  */
379
349
 
380
- [type="number"]::-webkit-inner-spin-button,
381
- [type="number"]::-webkit-outer-spin-button {
350
+ [type='number']::-webkit-inner-spin-button,
351
+ [type='number']::-webkit-outer-spin-button {
382
352
  height: auto;
383
353
  }
384
354
 
385
- /**
386
- * 1. Correct the odd appearance in Chrome and Safari.
387
- * 2. Correct the outline style in Safari.
388
- */
389
-
390
- [type="search"] {
391
- -webkit-appearance: textfield; /* 1 */
392
- outline-offset: -2px; /* 2 */
393
- }
394
-
395
355
  /**
396
356
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
397
357
  */
398
358
 
399
- [type="search"]::-webkit-search-cancel-button,
400
- [type="search"]::-webkit-search-decoration {
359
+ [type='search']::-webkit-search-cancel-button,
360
+ [type='search']::-webkit-search-decoration {
401
361
  -webkit-appearance: none;
402
362
  }
403
363
 
@@ -62,11 +62,12 @@ dd {
62
62
  margin-left: 0;
63
63
  }
64
64
 
65
- // Code
65
+ // Monospaced
66
66
  // --------------------------------------------------
67
67
 
68
68
  tt,
69
- code {
69
+ code,
70
+ samp {
70
71
  font-family: $mono-font;
71
72
  font-size: $font-size-small;
72
73
  }
@@ -30,12 +30,31 @@
30
30
  color: var(--color-fg-muted);
31
31
  }
32
32
 
33
+ .blankslate-image {
34
+ margin-bottom: $spacer-3;
35
+ }
36
+
37
+ .blankslate-heading {
38
+ margin-bottom: $spacer-1;
39
+ }
40
+
41
+ .blankslate-action {
42
+ margin-top: $spacer-3;
43
+
44
+ &:first-of-type {
45
+ margin-top: $spacer-4;
46
+ }
47
+
48
+ &:last-of-type {
49
+ margin-bottom: $spacer-2;
50
+ }
51
+ }
52
+
33
53
  .blankslate-capped {
34
54
  border-radius: 0 0 $border-radius $border-radius;
35
55
  }
36
56
 
37
57
  .blankslate-spacious {
38
- // stylelint-disable-next-line primer/spacing
39
58
  padding: ($spacer-6 * 2) $spacer-6;
40
59
  }
41
60
 
package/box/box.scss CHANGED
@@ -28,7 +28,6 @@
28
28
  .Box-btn-octicon {
29
29
  &.btn-octicon {
30
30
  padding: $spacer-2 $spacer-3;
31
- // stylelint-disable-next-line primer/spacing
32
31
  margin: (-$spacer-2) (-$spacer-3);
33
32
  line-height: $lh-condensed;
34
33
  }
@@ -60,7 +59,6 @@
60
59
  .Box-btn-octicon {
61
60
  &.btn-octicon {
62
61
  padding: $spacer-4;
63
- // stylelint-disable-next-line primer/spacing
64
62
  margin: (-$spacer-4) (-$spacer-4);
65
63
  }
66
64
  }
@@ -285,7 +283,6 @@
285
283
  // Increase specificity when btn-octicon is used because comes after .Box in the cascade
286
284
  &.btn-octicon {
287
285
  padding: $spacer-3 $spacer-3;
288
- // stylelint-disable-next-line primer/spacing
289
286
  margin: (-$spacer-3) (-$spacer-3);
290
287
  line-height: $lh-default; // override btn-octicon line-height
291
288
  }
@@ -8,6 +8,7 @@
8
8
  padding: 2px 6px;
9
9
  font: 12px $mono-font;
10
10
  color: var(--color-fg-muted);
11
+ word-break: break-all;
11
12
  background-color: var(--color-accent-subtle);
12
13
  border-radius: $border-radius;
13
14
 
@@ -66,8 +66,8 @@
66
66
  background-color: var(--color-btn-bg);
67
67
  border-color: var(--color-btn-border);
68
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;
69
+ transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
70
+ transition-property: color, background-color, box-shadow, border-color;
71
71
 
72
72
  &:hover,
73
73
  &.hover,
@@ -100,14 +100,6 @@
100
100
  color: var(--color-primer-fg-disabled);
101
101
  }
102
102
  }
103
-
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);
110
- }
111
103
  }
112
104
 
113
105
  // Primary button
@@ -125,6 +117,22 @@
125
117
  border-color: var(--color-btn-primary-hover-border);
126
118
  }
127
119
 
120
+ // fallback :focus state
121
+ &:focus {
122
+ @include focusOutlineOnEmphasis;
123
+
124
+ // remove fallback :focus if :focus-visible is supported
125
+ &:not(:focus-visible) {
126
+ outline: solid 1px transparent;
127
+ box-shadow: none;
128
+ }
129
+ }
130
+
131
+ // default focus state
132
+ &:focus-visible {
133
+ @include focusOutlineOnEmphasis;
134
+ }
135
+
128
136
  &:active,
129
137
  &.selected,
130
138
  &[aria-selected='true'] {
@@ -144,13 +152,6 @@
144
152
  }
145
153
  }
146
154
 
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
155
  .Counter {
155
156
  color: inherit;
156
157
  background-color: var(--color-btn-primary-counter-bg);
@@ -161,6 +162,26 @@
161
162
  }
162
163
  }
163
164
 
165
+ // ensure links styled as button primary gets proper focus style
166
+ // stylelint-disable-next-line selector-no-qualifying-type
167
+ a.btn-primary {
168
+ // fallback :focus state
169
+ &:focus {
170
+ @include focusOutlineOnEmphasis;
171
+
172
+ // remove fallback :focus if :focus-visible is supported
173
+ &:not(:focus-visible) {
174
+ outline: solid 1px transparent;
175
+ box-shadow: none;
176
+ }
177
+ }
178
+
179
+ // default focus state
180
+ &:focus-visible {
181
+ @include focusOutlineOnEmphasis;
182
+ }
183
+ }
184
+
164
185
  // Outline button
165
186
 
166
187
  .btn-outline {
@@ -189,6 +210,22 @@
189
210
  background-color: var(--color-btn-outline-selected-bg);
190
211
  border-color: var(--color-btn-outline-selected-border);
191
212
  box-shadow: var(--color-btn-outline-selected-shadow);
213
+
214
+ // fallback :focus state
215
+ &:focus {
216
+ @include focusOutlineOnEmphasis;
217
+
218
+ // remove fallback :focus if :focus-visible is supported
219
+ &:not(:focus-visible) {
220
+ outline: solid 1px transparent;
221
+ box-shadow: none;
222
+ }
223
+ }
224
+
225
+ // default focus state
226
+ &:focus-visible {
227
+ @include focusOutlineOnEmphasis;
228
+ }
192
229
  }
193
230
 
194
231
  &:disabled,
@@ -204,11 +241,6 @@
204
241
  }
205
242
  }
206
243
 
207
- &:focus {
208
- border-color: var(--color-btn-outline-focus-border);
209
- box-shadow: var(--color-btn-outline-focus-shadow);
210
- }
211
-
212
244
  .Counter {
213
245
  color: inherit;
214
246
  background-color: var(--color-btn-outline-counter-bg);
@@ -266,11 +298,6 @@
266
298
  }
267
299
  }
268
300
 
269
- &:focus {
270
- border-color: var(--color-btn-danger-focus-border);
271
- box-shadow: var(--color-btn-danger-focus-shadow);
272
- }
273
-
274
301
  .Counter {
275
302
  color: inherit;
276
303
  background-color: var(--color-btn-danger-counter-bg);
@@ -294,6 +321,7 @@
294
321
 
295
322
  // 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
323
  .btn-large {
324
+ // stylelint-disable-next-line primer/spacing
297
325
  padding: $em-spacer-6 1.5em;
298
326
  font-size: inherit;
299
327
  line-height: $lh-default;
package/buttons/misc.scss CHANGED
@@ -28,6 +28,14 @@
28
28
  cursor: default;
29
29
  }
30
30
  }
31
+
32
+ &:not(.dropdown-item) {
33
+ &:focus,
34
+ &:focus-visible {
35
+ border-radius: $border-radius;
36
+ outline-offset: 0;
37
+ }
38
+ }
31
39
  }
32
40
 
33
41
  // Invisible button
@@ -37,6 +45,7 @@
37
45
  color: var(--color-accent-fg);
38
46
  background-color: transparent; // Reset default gradient backgrounds and colors
39
47
  border: 0;
48
+ border-radius: $border-radius;
40
49
  box-shadow: none;
41
50
 
42
51
  &:hover,
@@ -48,15 +57,14 @@
48
57
  }
49
58
 
50
59
  &:active,
51
- &:focus,
52
60
  &.selected,
53
61
  &[aria-selected='true'],
54
62
  &.zeroclipboard-is-active {
55
63
  color: var(--color-accent-fg);
56
- background-color: none;
64
+ background: none;
57
65
  border-color: var(--color-btn-active-border);
58
- outline: none;
59
- box-shadow: var(--color-btn-focus-shadow);
66
+
67
+ @include focusOutline;
60
68
  }
61
69
 
62
70
  &:active &.zeroclipboard-is-active {
@@ -89,14 +97,23 @@
89
97
  border: 0;
90
98
  box-shadow: none;
91
99
 
92
- &:hover { color: var(--color-accent-fg); }
100
+ &:hover {
101
+ color: var(--color-accent-fg);
102
+ }
103
+
104
+ &:focus,
105
+ &:focus-visible {
106
+ border-radius: $border-radius;
107
+ }
93
108
 
94
109
  &.disabled,
95
110
  &[aria-disabled='true'] {
96
111
  color: var(--color-primer-fg-disabled);
97
112
  cursor: default;
98
113
 
99
- &:hover { color: var(--color-primer-fg-disabled); }
114
+ &:hover {
115
+ color: var(--color-primer-fg-disabled);
116
+ }
100
117
  }
101
118
  }
102
119
 
@@ -112,18 +129,13 @@
112
129
  color: var(--color-fg-muted);
113
130
  background: transparent;
114
131
  border: 0;
115
- outline: none;
116
132
 
117
133
  &:hover {
118
134
  color: var(--color-fg-default);
119
135
  }
120
136
 
121
- &:active,
122
- &:focus {
123
- color: var(--color-fg-muted);
124
- border-color: var(--color-btn-active-border);
125
- outline: none;
126
- box-shadow: var(--color-btn-focus-shadow);
137
+ &:active {
138
+ @include focusOutline;
127
139
  }
128
140
  }
129
141
 
@@ -216,10 +228,4 @@
216
228
  color: var(--color-accent-fg);
217
229
  cursor: pointer;
218
230
  }
219
-
220
- &:focus {
221
- z-index: 1;
222
- outline: 0;
223
- box-shadow: var(--color-primer-shadow-focus);
224
- }
225
231
  }
@@ -3,8 +3,10 @@
3
3
  @import './themes/light.scss';
4
4
  @import './themes/light_colorblind.scss';
5
5
  @import './themes/light_high_contrast.scss';
6
+ @import './themes/light_tritanopia.scss';
6
7
  @import './themes/dark.scss';
7
8
  @import './themes/dark_dimmed.scss';
8
9
  @import './themes/dark_high_contrast.scss';
9
10
  @import './themes/dark_colorblind.scss';
11
+ @import './themes/dark_tritanopia.scss';
10
12
  @import './native.scss';
@@ -9,3 +9,14 @@
9
9
  color: var(--color-fg-default);
10
10
  background-color: var(--color-canvas-default);
11
11
  }
12
+
13
+ // Windows High Contrast mode
14
+
15
+ // Improves focus state for various components when Windows High Contrast mode is enabled
16
+ // stylelint-disable selector-max-type
17
+ @media (forced-colors: active) {
18
+ body {
19
+ --color-accent-emphasis: Highlight;
20
+ --color-fg-on-emphasis: LinkText;
21
+ }
22
+ }
@@ -0,0 +1,6 @@
1
+ @import '../../support/index.scss';
2
+ @import '@primer/primitives/dist/scss/colors/_dark_tritanopia.scss';
3
+
4
+ @include color-mode-theme(dark_tritanopia) {
5
+ @include primer-colors-dark_tritanopia;
6
+ }
@@ -0,0 +1,6 @@
1
+ @import '../../support/index.scss';
2
+ @import '@primer/primitives/dist/scss/colors/_light_tritanopia.scss';
3
+
4
+ @include color-mode-theme(light_tritanopia) {
5
+ @include primer-colors-light_tritanopia;
6
+ }
@@ -1,2 +1,2 @@
1
- .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}.ActionList-item:hover .ActionList-content,.ActionList-item:active .ActionList-content{text-decoration:none}.ActionList-item:not(.ActionList-item--hasSubItem):hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active{background:var(--color-action-list-item-default-active-bg)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 0 0 rgba(0,0,0,.04);transform:scale(1)}100%{box-shadow:inset 0 3px 9px rgba(0,0,0,.04);transform:scale(0.97)}}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-item[aria-expanded=true] .ActionList--subGroup{display:block}.ActionList-item[aria-expanded=true].ActionList-item--hasActiveSubItem>.ActionList-content>.ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-item[aria-expanded=false] .ActionList--subGroup{display:none}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::before,.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-item[aria-expanded=false].ActionList-item--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}to{-webkit-clip-path:inset(16px 0 0 0);clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover)and (pointer: fine){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item[aria-disabled=true] .ActionList-item-label,.ActionList-item[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-item[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover)and (pointer: fine){.ActionList-item[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;padding:6px 8px;font-weight:400;color:var(--color-fg-default);-webkit-user-select:none;user-select:none;border-radius:6px;transition:background 33.333ms linear;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(min-content, auto) min-content min-content;align-items:center}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:focus-visible{position:relative;z-index:1;outline:none;box-shadow:0 0 0 2px var(--color-accent-fg)}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList--subGroup .ActionList-item--subItem{padding-left:16px}.ActionList-content--visual16+.ActionList--subGroup .ActionList-item--subItem{padding-left:24px}.ActionList-content--visual20+.ActionList--subGroup .ActionList-item--subItem{padding-left:28px}.ActionList-content--visual24+.ActionList--subGroup .ActionList-item--subItem{padding-left:32px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
1
+ .ActionList{padding:8px}.ActionList--full{padding:0}.ActionList--subGroup{padding:0}.ActionList--divided .ActionList-item-label::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline::before{position:absolute;top:-6px;display:block;width:100%;height:1px;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--divided .ActionList-item-descriptionWrap--inline .ActionList-item-label::before{content:unset}.ActionList--divided .ActionList-item--navActive .ActionList-item-label::before,.ActionList--divided .ActionList-item--navActive+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-label::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:first-of-type .ActionList-item-descriptionWrap--inline::before,.ActionList-sectionDivider+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}.ActionList--tree{--ActionList-tree-depth: 1}.ActionList--tree .ActionList-item--subItem>.ActionList-content{font-size:14px}.ActionList--tree .ActionList-item.ActionList-item--singleton .ActionList-content{padding-left:32px}.ActionList--tree .ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:400}.ActionList--tree .ActionList-content[aria-expanded]+.ActionList--subGroup{position:relative}.ActionList--tree .ActionList-content[aria-expanded]+.ActionList--subGroup .ActionList-content{padding-left:calc(8px * var(--ActionList-tree-depth))}.ActionList--tree .ActionList-content[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(0deg)}.ActionList--tree .ActionList-content[aria-expanded=true].ActionList-content--hasActiveSubItem>.ActionList-item-label{font-weight:400}.ActionList--tree .ActionList-content[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:rotate(-90deg)}.ActionList--tree .ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem>.ActionList-item-label{font-weight:400}.ActionList--tree .ActionList-item--hasSubItem .ActionList-item--subItem:not(.ActionList-item--hasSubItem) .ActionList-content>span:first-child{padding-left:24px}.ActionList--tree>[aria-level="1"].ActionList-item--hasSubItem>.ActionList--subGroup::before{position:absolute;left:16px;width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList--tree .ActionList-item--hasSubItem:not([aria-level="1"])>.ActionList--subGroup::before{position:absolute;left:calc(8px * (var(--ActionList-tree-depth)) + 7px);width:1px;height:100%;content:"";background:var(--color-action-list-item-inline-divider)}.ActionList-item{position:relative;list-style:none;background-color:transparent;border-radius:6px}.ActionList-item:hover,.ActionList-item:active{cursor:pointer}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{cursor:pointer;background-color:var(--color-action-list-item-default-hover-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):hover:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}}.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background:var(--color-action-list-item-default-active-bg)}.ActionList-item:not(.ActionList-item--hasSubItem):active:not(.ActionList-item--navActive),.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active:not(.ActionList-item--navActive){outline:solid 1px transparent;outline-offset:-1px;box-shadow:inset 0 0 0 2px var(--color-action-list-item-default-active-border)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item:not(.ActionList-item--hasSubItem):active,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{animation:ActionList-item-active-bg 4s forwards cubic-bezier(0.33, 1, 0.68, 1)}}@keyframes ActionList-item-active-bg{50%{box-shadow:inset 0 2px 12px 6px rgba(var(--color-canvas-default), 0.4);transform:scale(1)}100%{transform:scale(0.97)}}@media(hover: hover){.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item:not(.ActionList-item--hasSubItem):hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item:not(.ActionList-item--hasSubItem):hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover .ActionList-item-descriptionWrap--inline::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover+.ActionList-item .ActionList-item-descriptionWrap--inline::before{visibility:hidden}}.ActionList-item:not(.ActionList-item--hasSubItem):active .ActionList-item-label::before,.ActionList-item:not(.ActionList-item--hasSubItem):active+.ActionList-item .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active .ActionList-item-label::before,.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active+.ActionList-item .ActionList-item-label::before{visibility:hidden}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content{z-index:1}@media(hover: hover){.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--hasSubItem>.ActionList-content:active{background-color:var(--color-action-list-item-default-active-bg)}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--subItem) .ActionList-item-label{font-weight:600}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger){background:var(--color-action-list-item-default-selected-bg)}@media(hover: hover){.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger):hover{background-color:var(--color-action-list-item-default-hover-bg)}}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::before,.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)+.ActionList-item::before{visibility:hidden}.ActionList-item.ActionList-item--navActive:not(.ActionList-item--danger)::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectCheckmark{visibility:visible;opacity:1;transition:visibility 0 linear 0,opacity 50ms}.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{visibility:visible}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=true] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-singleSelectCheckmark{animation:checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-accent-fg);stroke:var(--color-accent-fg);stroke-width:1px}.ActionList-item[aria-checked=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=true] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectCheckmark{fill:var(--color-fg-on-emphasis)}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectCheckmark{visibility:hidden;opacity:0;transition:visibility 0 linear 50ms,opacity 50ms}.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{visibility:hidden;transition:visibility 0s linear 200ms;clip-path:inset(16px 0 0 0)}@media screen and (prefers-reduced-motion: no-preference){.ActionList-item[aria-checked=false] .ActionList-item-singleSelectCheckmark,.ActionList-item[aria-selected=false] .ActionList-item-singleSelectCheckmark{animation:checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards}}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIcon .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);stroke:var(--color-border-default);stroke-width:1px}.ActionList-item[aria-checked=false] .ActionList-item-multiSelectIconRect,.ActionList-item[aria-selected=false] .ActionList-item-multiSelectIconRect{fill:var(--color-canvas-default);border:1px solid var(--color-border-default)}@keyframes checkmarkIn{from{clip-path:inset(16px 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(16px 0 0 0)}}.ActionList-item.ActionList-item--danger .ActionList-item-label{color:var(--color-danger-fg)}.ActionList-item.ActionList-item--danger .ActionList-item-visual{color:var(--color-danger-fg)}@media(hover: hover){.ActionList-item.ActionList-item--danger:hover{background:var(--color-action-list-item-danger-hover-bg)}.ActionList-item.ActionList-item--danger:hover .ActionList-item-label{color:var(--color-action-list-item-danger-hover-text)}}.ActionList-item.ActionList-item--danger .ActionList-content:active{background:var(--color-action-list-item-danger-active-bg)}.ActionList-item .ActionList{padding:unset}.ActionList-content{position:relative;display:grid;width:100%;padding:6px 8px;font-size:14px;font-weight:400;color:var(--color-fg-default);text-align:left;-webkit-user-select:none;user-select:none;background-color:transparent;border:none;border-radius:6px;transition:background 33.333ms linear;touch-action:manipulation;touch-action:manipulation;-webkit-tap-highlight-color:transparent;grid-template-rows:min-content;grid-template-areas:"leadingAction leadingVisual label trailingVisual trailingAction";grid-template-columns:min-content min-content minmax(0, auto) min-content min-content;align-items:start}.ActionList-content>:not(:last-child){margin-right:8px}.ActionList-content:hover{text-decoration:none}.ActionList-content:focus{outline:2px solid var(--color-accent-fg);outline-offset:-2px;box-shadow:none}.ActionList-content:focus:not(:focus-visible){outline:solid 1px transparent}.ActionList-content:focus-visible{outline:2px solid var(--color-accent-fg);outline-offset:-2px;box-shadow:none}.ActionList-content[aria-disabled=true] .ActionList-item-label,.ActionList-content[aria-disabled=true] .ActionList-item-description{color:var(--color-primer-fg-disabled)}.ActionList-content[aria-disabled=true] .ActionList-item-visual{fill:var(--color-primer-fg-disabled)}@media(hover: hover){.ActionList-content[aria-disabled=true]:hover{cursor:not-allowed;background-color:transparent}}@media screen and (prefers-reduced-motion: no-preference){.ActionList-content[aria-expanded]+.ActionList--subGroup{transition:opacity 160ms cubic-bezier(0.25, 1, 0.5, 1),transform 160ms cubic-bezier(0.25, 1, 0.5, 1)}}.ActionList-content[aria-expanded]+.ActionList--subGroup .ActionList-content{padding-left:24px}.ActionList-content[aria-expanded].ActionList-content--visual16+.ActionList--subGroup .ActionList-content{padding-left:32px}.ActionList-content[aria-expanded].ActionList-content--visual20+.ActionList--subGroup .ActionList-content{padding-left:36px}.ActionList-content[aria-expanded].ActionList-content--visual24+.ActionList--subGroup .ActionList-content{padding-left:40px}.ActionList-content[aria-expanded=true] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(-1)}.ActionList-content[aria-expanded=true]+.ActionList--subGroup{height:auto;overflow:visible;visibility:visible;opacity:1;transform:translateY(0)}.ActionList-content[aria-expanded=true].ActionList-content--hasActiveSubItem>.ActionList-item-label{font-weight:600}.ActionList-content[aria-expanded=false] .ActionList-item-collapseIcon{transition:transform 120ms linear;transform:scaleY(1)}.ActionList-content[aria-expanded=false]+.ActionList--subGroup{height:0;overflow:hidden;visibility:hidden;opacity:0;transform:translateY(-16px)}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem{background:var(--color-action-list-item-default-selected-bg)}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem .ActionList-item-label{font-weight:600}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem::before,.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem+.ActionList-item::before{visibility:hidden}.ActionList-content[aria-expanded=false].ActionList-content--hasActiveSubItem::after{position:absolute;top:calc(50% - 12px);left:-8px;width:4px;height:24px;content:"";background:var(--color-accent-fg);border-radius:6px}.ActionList-content.ActionList-content--sizeMedium{padding:10px 8px}.ActionList-content.ActionList-content--sizeLarge{padding:14px 8px}.ActionList-content.ActionList-content--fontSmall{font-size:12px}@media(pointer: coarse){.ActionList-content{padding:14px 8px}}.ActionList-content.ActionList-content--blockDescription .ActionList-item-visual{place-self:start}.ActionList-item-action--leading{grid-area:leadingAction}.ActionList-item-visual--leading{grid-area:leadingVisual}.ActionList-item-label{grid-area:label}.ActionList-item-visual--trailing{grid-area:trailingVisual}.ActionList-item-action--trailing{grid-area:trailingAction}.ActionList-item-descriptionWrap{grid-area:label;display:flex;flex-direction:column}.ActionList-item-descriptionWrap .ActionList-item-description{margin-top:4px}.ActionList-item-descriptionWrap .ActionList-item-label{font-weight:600}.ActionList-item-descriptionWrap--inline{position:relative;flex-direction:row;align-items:baseline}.ActionList-item-descriptionWrap--inline .ActionList-item-description{margin-left:8px}.ActionList-item-description{font-size:12px;font-weight:400;line-height:1.5;color:var(--color-fg-muted)}.ActionList-item-visual,.ActionList-item-action{display:flex;min-height:20px;color:var(--color-fg-muted);pointer-events:none;fill:var(--color-fg-muted);align-items:center}.ActionList-item-label{position:relative;font-weight:400;line-height:20px;color:var(--color-fg-default)}.ActionList-item-label--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ActionList-item--subItem>.ActionList-content{font-size:12px}.ActionList-sectionDivider:not(:empty){display:flex;padding:6px 8px;font-size:12px;font-weight:600;color:var(--color-fg-muted);flex-direction:column}.ActionList-sectionDivider:empty{display:block;height:1px;padding:0;margin:7px -8px 8px;list-style:none;background:var(--color-action-list-item-inline-divider);border:0}.ActionList-sectionDivider .ActionList-sectionDivider-title{font-size:12px;font-weight:600;color:var(--color-fg-muted)}.ActionList-sectionDivider--filled{margin:8px -8px;background:var(--color-canvas-subtle);border-top:1px solid var(--color-action-list-item-inline-divider);border-bottom:1px solid var(--color-action-list-item-inline-divider)}.ActionList-sectionDivider--filled:empty{height:8px;box-sizing:border-box}.ActionList-sectionDivider--filled:first-child{margin-top:0}
2
2
  /*# sourceMappingURL=actionlist.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/actionlist/index.scss%23sass"],"names":[],"mappings":"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","file":"actionlist.css"}