@primer/css 20.4.2-rc.ff3ea4ef → 20.4.2

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 (37) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/alerts.css +1 -1
  3. package/dist/alerts.css.map +1 -1
  4. package/dist/buttons.css +1 -1
  5. package/dist/buttons.css.map +1 -1
  6. package/dist/core.css +1 -1
  7. package/dist/core.css.map +1 -1
  8. package/dist/forms.css +1 -1
  9. package/dist/forms.css.map +1 -1
  10. package/dist/marketing-buttons.css +1 -1
  11. package/dist/marketing-buttons.css.map +1 -1
  12. package/dist/marketing.css +1 -1
  13. package/dist/marketing.css.map +1 -1
  14. package/dist/meta.json +55 -55
  15. package/dist/primer.css +3 -3
  16. package/dist/primer.css.map +1 -1
  17. package/dist/product.css +1 -1
  18. package/dist/product.css.map +1 -1
  19. package/dist/segmented-control.css +1 -1
  20. package/dist/segmented-control.css.map +1 -1
  21. package/dist/stats/alerts.json +1 -1
  22. package/dist/stats/buttons.json +1 -1
  23. package/dist/stats/core.json +1 -1
  24. package/dist/stats/forms.json +1 -1
  25. package/dist/stats/marketing-buttons.json +1 -1
  26. package/dist/stats/marketing.json +1 -1
  27. package/dist/stats/primer.json +1 -1
  28. package/dist/stats/product.json +1 -1
  29. package/dist/stats/segmented-control.json +1 -1
  30. package/dist/stats/toggle-switch.json +1 -1
  31. package/dist/stats/utilities.json +1 -1
  32. package/dist/toggle-switch.css +1 -1
  33. package/dist/toggle-switch.css.map +1 -1
  34. package/dist/utilities.css +1 -1
  35. package/dist/utilities.css.map +1 -1
  36. package/package.json +4 -4
  37. package/segmented-control/segmented-control.scss +14 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/css",
3
- "version": "20.4.2-rc.ff3ea4ef",
3
+ "version": "20.4.2",
4
4
  "description": "The CSS implementation of GitHub's Primer Design System",
5
5
  "homepage": "https://primer.style/css",
6
6
  "author": "GitHub, Inc.",
@@ -49,7 +49,7 @@
49
49
  "@github/prettier-config": "0.0.4",
50
50
  "@koddsson/postcss-sass": "5.0.1",
51
51
  "@primer/stylelint-config": "^12.4.0",
52
- "autoprefixer": "10.4.7",
52
+ "autoprefixer": "10.4.8",
53
53
  "chokidar-cli": "3.0.0",
54
54
  "cssstats": "4.0.5",
55
55
  "eslint": "8.21.0",
@@ -62,7 +62,7 @@
62
62
  "globby": "13.1.2",
63
63
  "jest": "28.1.3",
64
64
  "js-yaml": "4.1.0",
65
- "postcss": "8.4.14",
65
+ "postcss": "8.4.16",
66
66
  "postcss-calc": "8.2.4",
67
67
  "postcss-import": "14.1.0",
68
68
  "postcss-load-config": "4.0.1",
@@ -70,7 +70,7 @@
70
70
  "postcss-simple-vars": "6.0.3",
71
71
  "prettier": "2.7.1",
72
72
  "semver": "7.3.7",
73
- "stylelint": "14.9.1",
73
+ "stylelint": "14.10.0",
74
74
  "table": "6.8.0"
75
75
  },
76
76
  "jest": {
package/segmented-control/segmented-control.scss CHANGED
@@ -1,13 +1,19 @@
1
1
  // SegmentedControl
2
+ // stylelint-disable selector-max-type
2
3
 
3
4
  .SegmentedControl {
4
- position: relative;
5
5
  display: inline-flex;
6
+ list-style: none;
6
7
  background-color: var(--color-segmented-control-bg);
7
8
  // stylelint-disable-next-line primer/borders
8
9
  border-radius: var(--primer-borderRadius-medium, $border-radius);
9
10
  // stylelint-disable-next-line primer/box-shadow
10
11
  box-shadow: var(--primer-borderInset-thin, inset 0 0 0 $border-width) var(--color-border-default);
12
+
13
+ li {
14
+ position: relative;
15
+ display: inline-flex;
16
+ }
11
17
  }
12
18
 
13
19
  // Button -----------------------------------------
@@ -27,19 +33,19 @@
27
33
  // stylelint-disable-next-line primer/borders
28
34
  border-radius: var(--primer-borderRadius-medium, $border-radius);
29
35
 
30
- &:not(.SegmentedControl-button--selected):hover .SegmentedControl-content {
36
+ &[aria-current='false']:hover .SegmentedControl-content {
31
37
  background-color: var(--color-segmented-control-button-hover-bg);
32
38
  transition-duration: var(--primer-duration-fast, 80ms);
33
39
  }
34
40
 
35
- &:not(.SegmentedControl-button--selected):active .SegmentedControl-content {
41
+ &[aria-current='false']:active .SegmentedControl-content {
36
42
  background-color: var(--color-segmented-control-button-active-bg);
37
43
  transition-duration: 0;
38
44
  }
39
45
 
40
46
  // Selected
41
47
 
42
- &.SegmentedControl-button--selected {
48
+ &[aria-current='true'] {
43
49
  // stylelint-disable-next-line primer/typography
44
50
  font-weight: var(--base-text-weight-semibold, $font-weight-bold);
45
51
  background-color: var(--color-btn-bg);
@@ -61,8 +67,8 @@
61
67
  transition: border-color var(--primer-duration-medium, 160ms) cubic-bezier(0.3, 0.1, 0.5, 1);
62
68
  }
63
69
 
64
- &.SegmentedControl-button--selected::before,
65
- &.SegmentedControl-button--selected + .SegmentedControl-button::before {
70
+ &[aria-current='true']::before,
71
+ &[aria-current='true'] + .SegmentedControl-button::before {
66
72
  border-color: transparent;
67
73
  }
68
74
  }
@@ -110,7 +116,8 @@
110
116
  .SegmentedControl--fullWidth {
111
117
  display: flex;
112
118
 
113
- .SegmentedControl-button {
119
+ .SegmentedControl-button,
120
+ li {
114
121
  flex: 1;
115
122
  justify-content: center;
116
123
  }