@primer/css 21.1.1 → 21.2.0-rc.7ce2f01b

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 (47) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/core.css +1 -1
  3. package/dist/core.css.map +1 -1
  4. package/dist/meta.json +31 -31
  5. package/dist/primer.css +1 -1
  6. package/dist/primer.css.map +1 -1
  7. package/dist/stats/alerts.json +1 -1
  8. package/dist/stats/autocomplete.json +1 -1
  9. package/dist/stats/avatars.json +1 -1
  10. package/dist/stats/base.json +1 -1
  11. package/dist/stats/blankslate.json +1 -1
  12. package/dist/stats/box.json +1 -1
  13. package/dist/stats/branch-name.json +1 -1
  14. package/dist/stats/breadcrumb.json +1 -1
  15. package/dist/stats/color-modes.json +1 -1
  16. package/dist/stats/core.json +1 -1
  17. package/dist/stats/dropdown.json +1 -1
  18. package/dist/stats/forms.json +1 -1
  19. package/dist/stats/labels.json +1 -1
  20. package/dist/stats/markdown.json +1 -1
  21. package/dist/stats/marketing-buttons.json +1 -1
  22. package/dist/stats/marketing-links.json +1 -1
  23. package/dist/stats/marketing-support.json +1 -1
  24. package/dist/stats/marketing-type.json +1 -1
  25. package/dist/stats/marketing-utilities.json +1 -1
  26. package/dist/stats/marketing.json +1 -1
  27. package/dist/stats/navigation.json +1 -1
  28. package/dist/stats/overlay.json +1 -1
  29. package/dist/stats/pagination.json +1 -1
  30. package/dist/stats/popover.json +1 -1
  31. package/dist/stats/primer.json +1 -1
  32. package/dist/stats/primitives.json +1 -1
  33. package/dist/stats/product.json +1 -1
  34. package/dist/stats/progress.json +1 -1
  35. package/dist/stats/select-menu.json +1 -1
  36. package/dist/stats/subhead.json +1 -1
  37. package/dist/stats/table-object.json +1 -1
  38. package/dist/stats/timeline.json +1 -1
  39. package/dist/stats/toasts.json +1 -1
  40. package/dist/stats/toggle-switch.json +1 -1
  41. package/dist/stats/tooltips.json +1 -1
  42. package/dist/stats/truncate.json +1 -1
  43. package/dist/stats/utilities.json +1 -1
  44. package/dist/tooltips.css +1 -1
  45. package/dist/tooltips.css.map +1 -1
  46. package/package.json +1 -1
  47. package/tooltips/tooltips.scss +7 -60
package/dist/tooltips.css CHANGED
@@ -1,2 +1,2 @@
1
- .tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:.5em .75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));border-radius:6px;opacity:0}.tooltipped::before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));pointer-events:none;content:"";border:6px solid rgba(0,0,0,0);opacity:0}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in;animation-delay:.4s}.tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after{animation-delay:0s}.tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after{display:table-cell}.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:6px}.tooltipped-s::before,.tooltipped-se::before,.tooltipped-sw::before{top:auto;right:50%;bottom:-7px;margin-right:-6px;border-bottom-color:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus))}.tooltipped-se::after{right:auto;left:50%;margin-left:-16px}.tooltipped-sw::after{margin-right:-16px}.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px}.tooltipped-n::before,.tooltipped-ne::before,.tooltipped-nw::before{top:-7px;right:50%;bottom:auto;margin-right:-6px;border-top-color:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus))}.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px}.tooltipped-nw::after{margin-right:-16px}.tooltipped-s::after,.tooltipped-n::after{transform:translateX(50%)}.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%)}.tooltipped-w::before{top:50%;bottom:50%;left:-7px;margin-top:-6px;border-left-color:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus))}.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%)}.tooltipped-e::before{top:50%;right:-7px;bottom:50%;margin-top:-6px;border-right-color:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus))}.tooltipped-align-right-1::after,.tooltipped-align-right-2::after{right:0;margin-right:0}.tooltipped-align-right-1::before{right:10px}.tooltipped-align-right-2::before{right:15px}.tooltipped-align-left-1::after,.tooltipped-align-left-2::after{left:0;margin-left:0}.tooltipped-align-left-1::before{left:5px}.tooltipped-align-left-2::before{left:10px}.tooltipped-multiline::after{width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after{right:100%}.tooltipped-sticky::before,.tooltipped-sticky::after{display:inline-block}.tooltipped-sticky.tooltipped-multiline::after{display:table-cell}
1
+ .tooltipped{position:relative}.tooltipped::after{position:absolute;z-index:1000000;display:none;padding:var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);font:var(--text-body-shorthand-small, normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji");-webkit-font-smoothing:subpixel-antialiased;color:var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));border-radius:var(--borderRadius-medium,0.375rem);opacity:0}@keyframes tooltip-appear{from{opacity:0}to{opacity:1}}.tooltipped:hover::before,.tooltipped:hover::after,.tooltipped:active::before,.tooltipped:active::after,.tooltipped:focus::before,.tooltipped:focus::after{display:inline-block;text-decoration:none;animation-name:tooltip-appear;animation-duration:.1s;animation-fill-mode:forwards;animation-timing-function:ease-in}.tooltipped-no-delay:hover::before,.tooltipped-no-delay:hover::after,.tooltipped-no-delay:active::before,.tooltipped-no-delay:active::after,.tooltipped-no-delay:focus::before,.tooltipped-no-delay:focus::after{animation-delay:0s}.tooltipped-multiline:hover::after,.tooltipped-multiline:active::after,.tooltipped-multiline:focus::after{display:table-cell}.tooltipped-s::after,.tooltipped-se::after,.tooltipped-sw::after{top:100%;right:50%;margin-top:6px}.tooltipped-se::after{right:auto;left:50%;margin-left:-16px}.tooltipped-sw::after{margin-right:-16px}.tooltipped-n::after,.tooltipped-ne::after,.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px}.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px}.tooltipped-nw::after{margin-right:-16px}.tooltipped-s::after,.tooltipped-n::after{transform:translateX(50%)}.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;transform:translateY(50%)}.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;transform:translateY(50%)}.tooltipped-align-right-1::after,.tooltipped-align-right-2::after{right:0;margin-right:0}.tooltipped-align-right-1::before{right:10px}.tooltipped-align-right-2::before{right:15px}.tooltipped-align-left-1::after,.tooltipped-align-left-2::after{left:0;margin-left:0}.tooltipped-align-left-1::before{left:5px}.tooltipped-align-left-2::before{left:10px}.tooltipped-multiline::after{width:max-content;max-width:var(--overlay-width-small, 20rem);word-wrap:break-word;white-space:pre-line;border-collapse:separate}.tooltipped-multiline.tooltipped-s::after,.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;transform:translateX(-50%)}.tooltipped-multiline.tooltipped-w::after,.tooltipped-multiline.tooltipped-e::after{right:100%}.tooltipped-sticky::before,.tooltipped-sticky::after{display:inline-block}.tooltipped-sticky.tooltipped-multiline::after{display:table-cell}
2
2
  /*# sourceMappingURL=tooltips.css.map */
@@ -1 +1 @@
1
- {"version":3,"sources":["file:///home/runner/work/css/css/src/tooltips/index.scss%23sass"],"names":[],"mappings":"AAgqBA,YAAA,iBAAA,CAAA,mBAAA,iBAAA,CAAA,eAAA,CAAA,YAAA,CAAA,kBAAA,CAAA,mJAAA,CAAA,2CAAA,CAAA,4DAAA,CAAA,iBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,wBAAA,CAAA,sEAAA,CAAA,iBAAA,CAAA,SAAA,CAAA,oBAAA,iBAAA,CAAA,eAAA,CAAA,YAAA,CAAA,OAAA,CAAA,QAAA,CAAA,iEAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,8BAAA,CAAA,SAAA,CAAA,0BAAA,KAAA,SAAA,CAAA,GAAA,SAAA,CAAA,CAAA,2JAAA,oBAAA,CAAA,oBAAA,CAAA,6BAAA,CAAA,sBAAA,CAAA,4BAAA,CAAA,iCAAA,CAAA,mBAAA,CAAA,iNAAA,kBAAA,CAAA,0GAAA,kBAAA,CAAA,iEAAA,QAAA,CAAA,SAAA,CAAA,cAAA,CAAA,oEAAA,QAAA,CAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,+EAAA,CAAA,sBAAA,UAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,sBAAA,kBAAA,CAAA,iEAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,oEAAA,QAAA,CAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,4EAAA,CAAA,sBAAA,UAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,sBAAA,kBAAA,CAAA,0CAAA,yBAAA,CAAA,qBAAA,UAAA,CAAA,UAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,sBAAA,OAAA,CAAA,UAAA,CAAA,SAAA,CAAA,eAAA,CAAA,6EAAA,CAAA,qBAAA,UAAA,CAAA,SAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,sBAAA,OAAA,CAAA,UAAA,CAAA,UAAA,CAAA,eAAA,CAAA,8EAAA,CAAA,kEAAA,OAAA,CAAA,cAAA,CAAA,kCAAA,UAAA,CAAA,kCAAA,UAAA,CAAA,gEAAA,MAAA,CAAA,aAAA,CAAA,iCAAA,QAAA,CAAA,iCAAA,SAAA,CAAA,6BAAA,iBAAA,CAAA,eAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,oFAAA,UAAA,CAAA,QAAA,CAAA,0BAAA,CAAA,oFAAA,UAAA,CAAA,qDAAA,oBAAA,CAAA,+CAAA,kBAAA","file":"tooltips.css"}
1
+ {"version":3,"sources":["file:///home/runner/work/css/css/src/tooltips/index.scss%23sass"],"names":[],"mappings":"AAiqBA,YAAA,iBAAA,CAAA,mBAAA,iBAAA,CAAA,eAAA,CAAA,YAAA,CAAA,+FAAA,CAAA,6LAAA,CAAA,2CAAA,CAAA,4DAAA,CAAA,iBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,qBAAA,CAAA,oBAAA,CAAA,eAAA,CAAA,mBAAA,CAAA,wBAAA,CAAA,sEAAA,CAAA,iDAAA,CAAA,SAAA,CAAA,0BAAA,KAAA,SAAA,CAAA,GAAA,SAAA,CAAA,CAAA,2JAAA,oBAAA,CAAA,oBAAA,CAAA,6BAAA,CAAA,sBAAA,CAAA,4BAAA,CAAA,iCAAA,CAAA,iNAAA,kBAAA,CAAA,0GAAA,kBAAA,CAAA,iEAAA,QAAA,CAAA,SAAA,CAAA,cAAA,CAAA,sBAAA,UAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,sBAAA,kBAAA,CAAA,iEAAA,SAAA,CAAA,WAAA,CAAA,iBAAA,CAAA,sBAAA,UAAA,CAAA,QAAA,CAAA,iBAAA,CAAA,sBAAA,kBAAA,CAAA,0CAAA,yBAAA,CAAA,qBAAA,UAAA,CAAA,UAAA,CAAA,gBAAA,CAAA,yBAAA,CAAA,qBAAA,UAAA,CAAA,SAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,kEAAA,OAAA,CAAA,cAAA,CAAA,kCAAA,UAAA,CAAA,kCAAA,UAAA,CAAA,gEAAA,MAAA,CAAA,aAAA,CAAA,iCAAA,QAAA,CAAA,iCAAA,SAAA,CAAA,6BAAA,iBAAA,CAAA,2CAAA,CAAA,oBAAA,CAAA,oBAAA,CAAA,wBAAA,CAAA,oFAAA,UAAA,CAAA,QAAA,CAAA,0BAAA,CAAA,oFAAA,UAAA,CAAA,qDAAA,oBAAA,CAAA,+CAAA,kBAAA","file":"tooltips.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/css",
3
- "version": "21.1.1",
3
+ "version": "21.2.0-rc.7ce2f01b",
4
4
  "description": "The CSS implementation of GitHub's Primer Design System",
5
5
  "homepage": "https://primer.style/css",
6
6
  "author": "GitHub, Inc.",
@@ -1,3 +1,5 @@
1
+ /* stylelint-disable primer/spacing */
2
+
1
3
  .tooltipped {
2
4
  position: relative;
3
5
  }
@@ -7,8 +9,8 @@
7
9
  position: absolute;
8
10
  z-index: 1000000;
9
11
  display: none;
10
- padding: $em-spacer-5 $em-spacer-6;
11
- font: normal normal 11px/1.5 $body-font;
12
+ padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
13
+ font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
12
14
  -webkit-font-smoothing: subpixel-antialiased;
13
15
  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
14
16
  text-align: center;
@@ -21,22 +23,8 @@
21
23
  pointer-events: none;
22
24
  content: attr(aria-label);
23
25
  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
24
- border-radius: $border-radius;
25
- opacity: 0;
26
- }
27
-
28
- // This is the tooltip arrow
29
- .tooltipped::before {
30
- position: absolute;
31
- z-index: 1000001;
32
- display: none;
33
- width: 0;
34
- height: 0;
35
- color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
36
- pointer-events: none;
37
- content: '';
38
26
  // stylelint-disable-next-line primer/borders
39
- border: 6px $border-style transparent;
27
+ border-radius: var(--borderRadius-medium);
40
28
  opacity: 0;
41
29
  }
42
30
 
@@ -63,7 +51,6 @@
63
51
  animation-duration: $tooltip-duration;
64
52
  animation-fill-mode: forwards;
65
53
  animation-timing-function: ease-in;
66
- animation-delay: $tooltip-delay;
67
54
  }
68
55
  }
69
56
 
@@ -91,18 +78,8 @@
91
78
  &::after {
92
79
  top: 100%;
93
80
  right: 50%;
94
- // stylelint-disable-next-line primer/spacing
95
81
  margin-top: 6px;
96
82
  }
97
-
98
- &::before {
99
- top: auto;
100
- right: 50%;
101
- bottom: -7px;
102
- // stylelint-disable-next-line primer/spacing
103
- margin-right: -6px;
104
- border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
105
- }
106
83
  }
107
84
 
108
85
  .tooltipped-se {
@@ -124,18 +101,8 @@
124
101
  &::after {
125
102
  right: 50%;
126
103
  bottom: 100%;
127
- // stylelint-disable-next-line primer/spacing
128
104
  margin-bottom: 6px;
129
105
  }
130
-
131
- &::before {
132
- top: -7px;
133
- right: 50%;
134
- bottom: auto;
135
- // stylelint-disable-next-line primer/spacing
136
- margin-right: -6px;
137
- border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
138
- }
139
106
  }
140
107
 
141
108
  .tooltipped-ne {
@@ -161,19 +128,9 @@
161
128
  &::after {
162
129
  right: 100%;
163
130
  bottom: 50%;
164
- // stylelint-disable-next-line primer/spacing
165
131
  margin-right: 6px;
166
132
  transform: translateY(50%);
167
133
  }
168
-
169
- &::before {
170
- top: 50%;
171
- bottom: 50%;
172
- left: -7px;
173
- // stylelint-disable-next-line primer/spacing
174
- margin-top: -6px;
175
- border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
176
- }
177
134
  }
178
135
 
179
136
  // tooltipped to the right
@@ -181,19 +138,9 @@
181
138
  &::after {
182
139
  bottom: 50%;
183
140
  left: 100%;
184
- // stylelint-disable-next-line primer/spacing
185
141
  margin-left: 6px;
186
142
  transform: translateY(50%);
187
143
  }
188
-
189
- &::before {
190
- top: 50%;
191
- right: -7px;
192
- bottom: 50%;
193
- // stylelint-disable-next-line primer/spacing
194
- margin-top: -6px;
195
- border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
196
- }
197
144
  }
198
145
 
199
146
  // Tooltip align right and left
@@ -218,7 +165,7 @@
218
165
  }
219
166
 
220
167
  .tooltipped-align-left-1,
221
- .tooltipped-align-left-2, {
168
+ .tooltipped-align-left-2 {
222
169
  &::after {
223
170
  left: 0;
224
171
  margin-left: 0;
@@ -245,7 +192,7 @@
245
192
  .tooltipped-multiline {
246
193
  &::after {
247
194
  width: max-content;
248
- max-width: $tooltip-max-width;
195
+ max-width: var(--overlay-width-small, 20rem);
249
196
  word-wrap: break-word;
250
197
  white-space: pre-line;
251
198
  border-collapse: separate;