@primer/components 0.0.0-20219214338 → 0.0.0-202192214359

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 (22) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/browser.esm.js +12 -7
  3. package/dist/browser.esm.js.map +1 -1
  4. package/dist/browser.umd.js +12 -7
  5. package/dist/browser.umd.js.map +1 -1
  6. package/lib/ActionList/Item.js +3 -3
  7. package/lib/Button/Button.js +1 -1
  8. package/lib/Button/ButtonInvisible.js +1 -1
  9. package/lib/Button/ButtonTableList.js +1 -1
  10. package/lib/NewButton/button.js +171 -37
  11. package/lib/Pagination/Pagination.js +1 -1
  12. package/lib/_TextInputWrapper.js +1 -1
  13. package/lib/constants.js +0 -1
  14. package/lib-esm/ActionList/Item.js +3 -3
  15. package/lib-esm/Button/Button.js +1 -1
  16. package/lib-esm/Button/ButtonInvisible.js +1 -1
  17. package/lib-esm/Button/ButtonTableList.js +1 -1
  18. package/lib-esm/NewButton/button.js +168 -34
  19. package/lib-esm/Pagination/Pagination.js +1 -1
  20. package/lib-esm/_TextInputWrapper.js +1 -1
  21. package/lib-esm/constants.js +0 -1
  22. package/package.json +1 -1
package/lib/ActionList/Item.js CHANGED
@@ -71,9 +71,9 @@ const customItemThemes = {
71
71
  const getItemVariant = (variant = 'default', disabled) => {
72
72
  if (disabled) {
73
73
  return {
74
- color: (0, _constants.get)('colors.fg.muted'),
75
- iconColor: (0, _constants.get)('colors.fg.muted'),
76
- annotationColor: (0, _constants.get)('colors.fg.muted'),
74
+ color: (0, _constants.get)('colors.primer.fg.disabled'),
75
+ iconColor: (0, _constants.get)('colors.primer.fg.disabled'),
76
+ annotationColor: (0, _constants.get)('colors.primer.fg.disabled'),
77
77
  hoverCursor: 'default'
78
78
  };
79
79
  }
package/lib/Button/Button.js CHANGED
@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
22
22
  const Button = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
23
23
  displayName: "Button",
24
24
  componentId: "xjtz72-0"
25
- })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
25
+ })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], (0, _constants.get)('colors.btn.text'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), (0, _constants.get)('shadows.btn.shadow'), (0, _constants.get)('shadows.btn.insetShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.hoverBorder'), (0, _constants.get)('colors.btn.focusBorder'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.selectedBg'), (0, _constants.get)('shadows.btn.shadowActive'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.btn.bg'), (0, _constants.get)('colors.btn.border'), _ButtonBase.buttonSystemProps, _sx.default);
26
26
  var _default = Button;
27
27
  exports.default = _default;
package/lib/Button/ButtonInvisible.js CHANGED
@@ -22,6 +22,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
22
22
  const ButtonInvisible = (0, _styledComponents.default)(_ButtonBase.default).withConfig({
23
23
  displayName: "ButtonInvisible",
24
24
  componentId: "sc-1195tpn-0"
25
- })(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('shadows.btn.focusShadow'), _ButtonBase.buttonSystemProps, _sx.default);
25
+ })(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ";", ""], (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('shadows.btn.focusShadow'), (0, _constants.get)('colors.btn.hoverBg'), (0, _constants.get)('colors.btn.selectedBg'), _ButtonBase.buttonSystemProps, _sx.default);
26
26
  var _default = ButtonInvisible;
27
27
  exports.default = _default;
package/lib/Button/ButtonTableList.js CHANGED
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
16
16
  const ButtonTableList = _styledComponents.default.summary.withConfig({
17
17
  displayName: "ButtonTableList",
18
18
  componentId: "sc-1m4q8ia-0"
19
- })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
19
+ })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), _constants.COMMON, _constants.TYPOGRAPHY, _constants.LAYOUT, _sx.default);
20
20
 
21
21
  var _default = ButtonTableList;
22
22
  exports.default = _default;
package/lib/NewButton/button.js CHANGED
@@ -39,61 +39,196 @@ const sizes = (0, _styledSystem.variant)({
39
39
  });
40
40
 
41
41
  const getVariantStyles = (theme, variant = 'default') => {
42
- debugger;
43
42
  const style = {
44
43
  default: `
45
- color: ${(0, _constants.get)('colors.btn.text')(theme)};
46
- background-color: ${(0, _constants.get)('colors.btn.bg')(theme)};
44
+ color: ${(0, _constants.get)('colors.btn.text')({
45
+ theme
46
+ })};
47
+ background-color: ${(0, _constants.get)('colors.btn.bg')({
48
+ theme
49
+ })};
47
50
  border-width: 1px;
48
51
  border-style: solid;
49
- border-color: ${(0, _constants.get)('colors.btn.border')(theme)};
50
- box-shadow: ${((0, _constants.get)('shadows.btn.shadow')(theme), (0, _constants.get)('shadows.btn.insetShadow')(theme))};
52
+ border-color: ${(0, _constants.get)('colors.btn.border')({
53
+ theme
54
+ })};
55
+ box-shadow: ${((0, _constants.get)('shadows.btn.shadow')({
56
+ theme
57
+ }), (0, _constants.get)('shadows.btn.insetShadow')({
58
+ theme
59
+ }))};
51
60
  &:hover {
52
- background-color: ${(0, _constants.get)('colors.btn.hoverBg')(theme)};
61
+ background-color: ${(0, _constants.get)('colors.btn.hoverBg')({
62
+ theme
63
+ })};
53
64
  }
54
65
  // focus must come before :active so that the active box shadow overrides
55
66
  &:focus {
56
- box-shadow: ${(0, _constants.get)('shadows.btn.focusShadow')(theme)};
67
+ box-shadow: ${(0, _constants.get)('shadows.btn.focusShadow')({
68
+ theme
69
+ })};
57
70
  }
58
71
  &:active {
59
- background-color: ${(0, _constants.get)('colors.btn.selectedBg')(theme)};
60
- box-shadow: ${(0, _constants.get)('shadows.btn.shadowActive')(theme)};
72
+ background-color: ${(0, _constants.get)('colors.btn.selectedBg')({
73
+ theme
74
+ })};
75
+ box-shadow: ${(0, _constants.get)('shadows.btn.shadowActive')({
76
+ theme
77
+ })};
61
78
  }
62
79
  &:disabled {
63
- color: ${(0, _constants.get)('colors.primer.fg.disabled')(theme)};
80
+ color: ${(0, _constants.get)('colors.primer.fg.disabled')({
81
+ theme
82
+ })};
64
83
  }
65
84
  `,
66
85
  primary: `
67
- color: ${(0, _constants.get)('colors.btn.primary.text')(theme)},
68
- backgroundColor: ${(0, _constants.get)('colors.btn.primary.bg')(theme)},
69
- borderWidth: '1px',
70
- borderStyle: 'solid',
71
- borderColor: ${(0, _constants.get)('colors.border.subtle')(theme)},
72
- boxShadow: ${(0, _constants.get)('shadows.btn.primary.shadow')(theme)},
73
-
74
- '&:hover': {
75
- color: ${(0, _constants.get)('colors.btn.primary.hoverText')(theme)},
76
- backgroundColor: ${(0, _constants.get)('colors.btn.primary.hoverBg')(theme)}
77
- },
86
+ color: ${(0, _constants.get)('colors.btn.primary.text')({
87
+ theme
88
+ })};
89
+ background-color: ${(0, _constants.get)('colors.btn.primary.bg')({
90
+ theme
91
+ })};
92
+ border-width: 1px;
93
+ border-style: solid;
94
+ border-color: ${(0, _constants.get)('colors.border.subtle')({
95
+ theme
96
+ })};
97
+ box-shadow: ${(0, _constants.get)('shadows.btn.primary.shadow')({
98
+ theme
99
+ })};
100
+
101
+ &:hover {
102
+ color: ${(0, _constants.get)('colors.btn.primary.hoverText')({
103
+ theme
104
+ })};
105
+ background-color: ${(0, _constants.get)('colors.btn.primary.hoverBg')({
106
+ theme
107
+ })};
108
+ }
78
109
  // focus must come before :active so that the active box shadow overrides
79
- '&:focus': {
80
- boxShadow: ${(0, _constants.get)('shadows.btn.primary.focusShadow')(theme)}
81
- },
82
-
83
- '&:active': {
84
- backgroundColor: ${(0, _constants.get)('colors.btn.primary.selectedBg')(theme)},
85
- boxShadow: ${(0, _constants.get)('shadows.btn.primary.selectedShadow')(theme)}
86
- },
87
-
88
- '&:disabled': {
89
- color: ${(0, _constants.get)('colors.btn.primary.disabledText')(theme)},
90
- backgroundColor: ${(0, _constants.get)('colors.btn.primary.disabledBg')(theme)}
110
+ &:focus {
111
+ box-shadow: ${(0, _constants.get)('shadows.btn.primary.focusShadow')({
112
+ theme
113
+ })};
114
+ }
115
+
116
+ &:active {
117
+ background-color: ${(0, _constants.get)('colors.btn.primary.selectedBg')({
118
+ theme
119
+ })};
120
+ box-shadow: ${(0, _constants.get)('shadows.btn.primary.selectedShadow')({
121
+ theme
122
+ })};
123
+ }
124
+
125
+ &:disabled {
126
+ color: ${(0, _constants.get)('colors.btn.primary.disabledText')({
127
+ theme
128
+ })};
129
+ background-color: ${(0, _constants.get)('colors.btn.primary.disabledBg')({
130
+ theme
131
+ })};
91
132
  }`,
92
- danger: ``,
93
- invisible: ``,
133
+ danger: `
134
+ color: ${(0, _constants.get)('colors.btn.danger.text')({
135
+ theme
136
+ })};
137
+ border: 1px solid ${(0, _constants.get)('colors.btn.border')({
138
+ theme
139
+ })};
140
+ background-color: ${(0, _constants.get)('colors.btn.bg')({
141
+ theme
142
+ })};
143
+ box-shadow: ${(0, _constants.get)('shadows.btn.shadow')({
144
+ theme
145
+ })};
146
+
147
+ &:hover {
148
+ color: ${(0, _constants.get)('colors.btn.danger.hoverText')({
149
+ theme
150
+ })};
151
+ background-color: ${(0, _constants.get)('colors.btn.danger.hoverBg')({
152
+ theme
153
+ })};
154
+ border-color: ${(0, _constants.get)('colors.btn.danger.hoverBorder')({
155
+ theme
156
+ })};
157
+ box-shadow: ${(0, _constants.get)('shadows.btn.danger.hoverShadow')({
158
+ theme
159
+ })};
160
+ }
161
+ // focus must come before :active so that the active box shadow overrides
162
+ &:focus {
163
+ border-color: ${(0, _constants.get)('colors.btn.danger.focusBorder')({
164
+ theme
165
+ })};
166
+ box-shadow: ${(0, _constants.get)('shadows.btn.danger.focusShadow')({
167
+ theme
168
+ })};
169
+ }
170
+
171
+ &:active {
172
+ color: ${(0, _constants.get)('colors.btn.danger.selectedText')({
173
+ theme
174
+ })};
175
+ background-color: ${(0, _constants.get)('colors.btn.danger.selectedBg')({
176
+ theme
177
+ })};
178
+ box-shadow: ${(0, _constants.get)('shadows.btn.danger.selectedShadow')({
179
+ theme
180
+ })};
181
+ border-color: ${(0, _constants.get)('colors.btn.danger.selectedBorder')({
182
+ theme
183
+ })};
184
+ }
185
+
186
+ &:disabled {
187
+ color: ${(0, _constants.get)('colors.btn.danger.disabledText')({
188
+ theme
189
+ })};
190
+ background-color: ${(0, _constants.get)('colors.btn.danger.disabledBg')({
191
+ theme
192
+ })};
193
+ border-color: ${(0, _constants.get)('colors.btn.danger.disabledBorder')({
194
+ theme
195
+ })};
196
+ }
197
+ `,
198
+ invisible: `
199
+ color: ${(0, _constants.get)('colors.accent.fg')({
200
+ theme
201
+ })};
202
+ background-color: transparent;
203
+ border: 0;
204
+ border-radius: ${(0, _constants.get)('radii.2')({
205
+ theme
206
+ })};
207
+ box-shadow: none;
208
+
209
+ &:disabled {
210
+ color: ${(0, _constants.get)('colors.primer.fg.disabled')({
211
+ theme
212
+ })};
213
+ }
214
+ &:focus {
215
+ box-shadow: ${(0, _constants.get)('shadows.btn.focusShadow')({
216
+ theme
217
+ })};
218
+ }
219
+ &:hover {
220
+ background-color: ${(0, _constants.get)('colors.btn.hoverBg')({
221
+ theme
222
+ })};
223
+ }
224
+ &:active {
225
+ background-color: ${(0, _constants.get)('colors.btn.selectedBg')({
226
+ theme
227
+ })};
228
+ }
229
+ `,
94
230
  block: ``
95
231
  };
96
- debugger;
97
232
  return style[variant];
98
233
  };
99
234
 
@@ -106,7 +241,6 @@ const Button = ({
106
241
  children,
107
242
  ...props
108
243
  }) => {
109
- debugger;
110
244
  return /*#__PURE__*/_react.default.createElement(ButtonBase, props, children);
111
245
  };
112
246
 
package/lib/Pagination/Pagination.js CHANGED
@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
24
24
  const Page = _styledComponents.default.a.withConfig({
25
25
  displayName: "Pagination__Page",
26
26
  componentId: "b80nss-0"
27
- })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
27
+ })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], (0, _constants.get)('colors.fg.default'), (0, _constants.get)('space.1'), (0, _constants.get)('borderWidths.1'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.border.muted'), (0, _constants.get)('colors.accent.fg'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), _constants.COMMON);
28
28
 
29
29
  function usePaginationPages({
30
30
  theme,
package/lib/_TextInputWrapper.js CHANGED
@@ -45,7 +45,7 @@ const TextInputWrapper = _styledComponents.default.span.withConfig({
45
45
  } else {
46
46
  return (0, _styledComponents.css)(["padding:6px 12px;"]);
47
47
  }
48
- }, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
48
+ }, (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('shadows.primer.shadow.focus'), props => props.contrast && (0, _styledComponents.css)(["background-color:", ";"], (0, _constants.get)('colors.canvas.inset')), props => props.disabled && (0, _styledComponents.css)(["color:", ";background-color:", ";border-color:", ";"], (0, _constants.get)('colors.primer.fg.disabled'), (0, _constants.get)('colors.input.disabledBg'), (0, _constants.get)('colors.border.default')), props => props.block && (0, _styledComponents.css)(["display:block;width:100%;"]), (0, _constants.get)('breakpoints.1'), (0, _constants.get)('fontSizes.1'), _styledSystem.width, _styledSystem.minWidth, _styledSystem.maxWidth, sizeVariants, _sx.default);
49
49
 
50
50
  var _default = TextInputWrapper;
51
51
  exports.default = _default;
package/lib/constants.js CHANGED
@@ -25,7 +25,6 @@ const {
25
25
  } = styledSystem;
26
26
 
27
27
  const get = key => {
28
- debugger;
29
28
  return (0, _themeGet.themeGet)(key, getKey(_theme.default, key));
30
29
  }; // Common props
31
30
 
package/lib-esm/ActionList/Item.js CHANGED
@@ -48,9 +48,9 @@ const customItemThemes = {
48
48
  const getItemVariant = (variant = 'default', disabled) => {
49
49
  if (disabled) {
50
50
  return {
51
- color: get('colors.fg.muted'),
52
- iconColor: get('colors.fg.muted'),
53
- annotationColor: get('colors.fg.muted'),
51
+ color: get('colors.primer.fg.disabled'),
52
+ iconColor: get('colors.primer.fg.disabled'),
53
+ annotationColor: get('colors.primer.fg.disabled'),
54
54
  hoverCursor: 'default'
55
55
  };
56
56
  }
package/lib-esm/Button/Button.js CHANGED
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
5
5
  const Button = styled(ButtonBase).withConfig({
6
6
  displayName: "Button",
7
7
  componentId: "xjtz72-0"
8
- })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.fg.muted'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
8
+ })(["color:", ";background-color:", ";border:1px solid ", ";box-shadow:", ",", "};&:hover{background-color:", ";border-color:", ";}&:focus{border-color:", ";box-shadow:", ";}&:active{background-color:", ";box-shadow:", ";}&:disabled{color:", ";background-color:", ";border-color:", ";}", ";", ";"], get('colors.btn.text'), get('colors.btn.bg'), get('colors.btn.border'), get('shadows.btn.shadow'), get('shadows.btn.insetShadow'), get('colors.btn.hoverBg'), get('colors.btn.hoverBorder'), get('colors.btn.focusBorder'), get('shadows.btn.focusShadow'), get('colors.btn.selectedBg'), get('shadows.btn.shadowActive'), get('colors.primer.fg.disabled'), get('colors.btn.bg'), get('colors.btn.border'), buttonSystemProps, sx);
9
9
  export default Button;
package/lib-esm/Button/ButtonInvisible.js CHANGED
@@ -5,5 +5,5 @@ import ButtonBase, { buttonSystemProps } from './ButtonBase';
5
5
  const ButtonInvisible = styled(ButtonBase).withConfig({
6
6
  displayName: "ButtonInvisible",
7
7
  componentId: "sc-1195tpn-0"
8
- })(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.fg.muted'), get('shadows.btn.focusShadow'), buttonSystemProps, sx);
8
+ })(["color:", ";background-color:transparent;border:0;border-radius:", ";box-shadow:none;&:disabled{color:", ";}&:focus{box-shadow:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}", ";", ""], get('colors.accent.fg'), get('radii.2'), get('colors.primer.fg.disabled'), get('shadows.btn.focusShadow'), get('colors.btn.hoverBg'), get('colors.btn.selectedBg'), buttonSystemProps, sx);
9
9
  export default ButtonInvisible;
package/lib-esm/Button/ButtonTableList.js CHANGED
@@ -4,5 +4,5 @@ import sx from '../sx';
4
4
  const ButtonTableList = styled.summary.withConfig({
5
5
  displayName: "ButtonTableList",
6
6
  componentId: "sc-1m4q8ia-0"
7
- })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:rgba(", ",0.5);cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.fg.muted'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
7
+ })(["display:inline-block;padding:0;font-size:", ";color:", ";text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;background-color:transparent;border:0;appearance:none;&:hover{text-decoration:underline;}&:disabled{&,&:hover{color:", ";cursor:default;}}&:after{display:inline-block;margin-left:", ";width:0;height:0;vertical-align:-2px;content:'';border:4px solid transparent;border-top-color:currentcolor;}", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.muted'), get('colors.primer.fg.disabled'), get('space.1'), COMMON, TYPOGRAPHY, LAYOUT, sx);
8
8
  export default ButtonTableList;
package/lib-esm/NewButton/button.js CHANGED
@@ -23,61 +23,196 @@ const sizes = variant({
23
23
  });
24
24
 
25
25
  const getVariantStyles = (theme, variant = 'default') => {
26
- debugger;
27
26
  const style = {
28
27
  default: `
29
- color: ${get('colors.btn.text')(theme)};
30
- background-color: ${get('colors.btn.bg')(theme)};
28
+ color: ${get('colors.btn.text')({
29
+ theme
30
+ })};
31
+ background-color: ${get('colors.btn.bg')({
32
+ theme
33
+ })};
31
34
  border-width: 1px;
32
35
  border-style: solid;
33
- border-color: ${get('colors.btn.border')(theme)};
34
- box-shadow: ${(get('shadows.btn.shadow')(theme), get('shadows.btn.insetShadow')(theme))};
36
+ border-color: ${get('colors.btn.border')({
37
+ theme
38
+ })};
39
+ box-shadow: ${(get('shadows.btn.shadow')({
40
+ theme
41
+ }), get('shadows.btn.insetShadow')({
42
+ theme
43
+ }))};
35
44
  &:hover {
36
- background-color: ${get('colors.btn.hoverBg')(theme)};
45
+ background-color: ${get('colors.btn.hoverBg')({
46
+ theme
47
+ })};
37
48
  }
38
49
  // focus must come before :active so that the active box shadow overrides
39
50
  &:focus {
40
- box-shadow: ${get('shadows.btn.focusShadow')(theme)};
51
+ box-shadow: ${get('shadows.btn.focusShadow')({
52
+ theme
53
+ })};
41
54
  }
42
55
  &:active {
43
- background-color: ${get('colors.btn.selectedBg')(theme)};
44
- box-shadow: ${get('shadows.btn.shadowActive')(theme)};
56
+ background-color: ${get('colors.btn.selectedBg')({
57
+ theme
58
+ })};
59
+ box-shadow: ${get('shadows.btn.shadowActive')({
60
+ theme
61
+ })};
45
62
  }
46
63
  &:disabled {
47
- color: ${get('colors.primer.fg.disabled')(theme)};
64
+ color: ${get('colors.primer.fg.disabled')({
65
+ theme
66
+ })};
48
67
  }
49
68
  `,
50
69
  primary: `
51
- color: ${get('colors.btn.primary.text')(theme)},
52
- backgroundColor: ${get('colors.btn.primary.bg')(theme)},
53
- borderWidth: '1px',
54
- borderStyle: 'solid',
55
- borderColor: ${get('colors.border.subtle')(theme)},
56
- boxShadow: ${get('shadows.btn.primary.shadow')(theme)},
70
+ color: ${get('colors.btn.primary.text')({
71
+ theme
72
+ })};
73
+ background-color: ${get('colors.btn.primary.bg')({
74
+ theme
75
+ })};
76
+ border-width: 1px;
77
+ border-style: solid;
78
+ border-color: ${get('colors.border.subtle')({
79
+ theme
80
+ })};
81
+ box-shadow: ${get('shadows.btn.primary.shadow')({
82
+ theme
83
+ })};
57
84
 
58
- '&:hover': {
59
- color: ${get('colors.btn.primary.hoverText')(theme)},
60
- backgroundColor: ${get('colors.btn.primary.hoverBg')(theme)}
61
- },
85
+ &:hover {
86
+ color: ${get('colors.btn.primary.hoverText')({
87
+ theme
88
+ })};
89
+ background-color: ${get('colors.btn.primary.hoverBg')({
90
+ theme
91
+ })};
92
+ }
62
93
  // focus must come before :active so that the active box shadow overrides
63
- '&:focus': {
64
- boxShadow: ${get('shadows.btn.primary.focusShadow')(theme)}
65
- },
94
+ &:focus {
95
+ box-shadow: ${get('shadows.btn.primary.focusShadow')({
96
+ theme
97
+ })};
98
+ }
66
99
 
67
- '&:active': {
68
- backgroundColor: ${get('colors.btn.primary.selectedBg')(theme)},
69
- boxShadow: ${get('shadows.btn.primary.selectedShadow')(theme)}
70
- },
100
+ &:active {
101
+ background-color: ${get('colors.btn.primary.selectedBg')({
102
+ theme
103
+ })};
104
+ box-shadow: ${get('shadows.btn.primary.selectedShadow')({
105
+ theme
106
+ })};
107
+ }
71
108
 
72
- '&:disabled': {
73
- color: ${get('colors.btn.primary.disabledText')(theme)},
74
- backgroundColor: ${get('colors.btn.primary.disabledBg')(theme)}
109
+ &:disabled {
110
+ color: ${get('colors.btn.primary.disabledText')({
111
+ theme
112
+ })};
113
+ background-color: ${get('colors.btn.primary.disabledBg')({
114
+ theme
115
+ })};
75
116
  }`,
76
- danger: ``,
77
- invisible: ``,
117
+ danger: `
118
+ color: ${get('colors.btn.danger.text')({
119
+ theme
120
+ })};
121
+ border: 1px solid ${get('colors.btn.border')({
122
+ theme
123
+ })};
124
+ background-color: ${get('colors.btn.bg')({
125
+ theme
126
+ })};
127
+ box-shadow: ${get('shadows.btn.shadow')({
128
+ theme
129
+ })};
130
+
131
+ &:hover {
132
+ color: ${get('colors.btn.danger.hoverText')({
133
+ theme
134
+ })};
135
+ background-color: ${get('colors.btn.danger.hoverBg')({
136
+ theme
137
+ })};
138
+ border-color: ${get('colors.btn.danger.hoverBorder')({
139
+ theme
140
+ })};
141
+ box-shadow: ${get('shadows.btn.danger.hoverShadow')({
142
+ theme
143
+ })};
144
+ }
145
+ // focus must come before :active so that the active box shadow overrides
146
+ &:focus {
147
+ border-color: ${get('colors.btn.danger.focusBorder')({
148
+ theme
149
+ })};
150
+ box-shadow: ${get('shadows.btn.danger.focusShadow')({
151
+ theme
152
+ })};
153
+ }
154
+
155
+ &:active {
156
+ color: ${get('colors.btn.danger.selectedText')({
157
+ theme
158
+ })};
159
+ background-color: ${get('colors.btn.danger.selectedBg')({
160
+ theme
161
+ })};
162
+ box-shadow: ${get('shadows.btn.danger.selectedShadow')({
163
+ theme
164
+ })};
165
+ border-color: ${get('colors.btn.danger.selectedBorder')({
166
+ theme
167
+ })};
168
+ }
169
+
170
+ &:disabled {
171
+ color: ${get('colors.btn.danger.disabledText')({
172
+ theme
173
+ })};
174
+ background-color: ${get('colors.btn.danger.disabledBg')({
175
+ theme
176
+ })};
177
+ border-color: ${get('colors.btn.danger.disabledBorder')({
178
+ theme
179
+ })};
180
+ }
181
+ `,
182
+ invisible: `
183
+ color: ${get('colors.accent.fg')({
184
+ theme
185
+ })};
186
+ background-color: transparent;
187
+ border: 0;
188
+ border-radius: ${get('radii.2')({
189
+ theme
190
+ })};
191
+ box-shadow: none;
192
+
193
+ &:disabled {
194
+ color: ${get('colors.primer.fg.disabled')({
195
+ theme
196
+ })};
197
+ }
198
+ &:focus {
199
+ box-shadow: ${get('shadows.btn.focusShadow')({
200
+ theme
201
+ })};
202
+ }
203
+ &:hover {
204
+ background-color: ${get('colors.btn.hoverBg')({
205
+ theme
206
+ })};
207
+ }
208
+ &:active {
209
+ background-color: ${get('colors.btn.selectedBg')({
210
+ theme
211
+ })};
212
+ }
213
+ `,
78
214
  block: ``
79
215
  };
80
- debugger;
81
216
  return style[variant];
82
217
  };
83
218
 
@@ -90,7 +225,6 @@ const Button = ({
90
225
  children,
91
226
  ...props
92
227
  }) => {
93
- debugger;
94
228
  return /*#__PURE__*/React.createElement(ButtonBase, props, children);
95
229
  };
96
230
 
package/lib-esm/Pagination/Pagination.js CHANGED
@@ -9,7 +9,7 @@ import { buildComponentData, buildPaginationModel } from './model';
9
9
  const Page = styled.a.withConfig({
10
10
  displayName: "Pagination__Page",
11
11
  componentId: "b80nss-0"
12
- })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.fg.muted'), get('space.1'), get('space.1'), COMMON);
12
+ })(["display:inline-block;min-width:32px;padding:5px 10px;font-style:normal;line-height:20px;color:", ";text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;user-select:none;text-decoration:none;margin-right:", ";&:last-child{margin-right:0;}border:", " solid transparent;border-radius:", ";transition:border-color 0.2s cubic-bezier(0.3,0,0.5,1);&:hover,&:focus{text-decoration:none;border-color:", ";outline:0;transition-duration:0.1s;}&:active{border-color:", ";}&[rel='prev'],&[rel='next']{color:", ";}&[aria-current],&[aria-current]:hover{color:", ";background-color:", ";border-color:transparent;}&[aria-disabled],&[aria-disabled]:hover{color:", ";cursor:default;border-color:transparent;}@supports (clip-path:polygon(50% 0,100% 50%,50% 100%)){&[rel='prev']::before,&[rel='next']::after{display:inline-block;width:16px;height:16px;vertical-align:text-bottom;content:'';background-color:currentColor;}&[rel='prev']::before{margin-right:", ";clip-path:polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );}&[rel='next']::after{margin-left:", ";clip-path:polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );}}", ";"], get('colors.fg.default'), get('space.1'), get('borderWidths.1'), get('radii.2'), get('colors.border.default'), get('colors.border.muted'), get('colors.accent.fg'), get('colors.fg.onEmphasis'), get('colors.accent.emphasis'), get('colors.primer.fg.disabled'), get('space.1'), get('space.1'), COMMON);
13
13
 
14
14
  function usePaginationPages({
15
15
  theme,
package/lib-esm/_TextInputWrapper.js CHANGED
@@ -27,5 +27,5 @@ const TextInputWrapper = styled.span.withConfig({
27
27
  } else {
28
28
  return css(["padding:6px 12px;"]);
29
29
  }
30
- }, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.fg.muted'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
30
+ }, get('colors.fg.muted'), get('space.2'), get('colors.accent.emphasis'), get('shadows.primer.shadow.focus'), props => props.contrast && css(["background-color:", ";"], get('colors.canvas.inset')), props => props.disabled && css(["color:", ";background-color:", ";border-color:", ";"], get('colors.primer.fg.disabled'), get('colors.input.disabledBg'), get('colors.border.default')), props => props.block && css(["display:block;width:100%;"]), get('breakpoints.1'), get('fontSizes.1'), width, minWidth, maxWidth, sizeVariants, sx);
31
31
  export default TextInputWrapper;
package/lib-esm/constants.js CHANGED
@@ -8,7 +8,6 @@ const {
8
8
  system
9
9
  } = styledSystem;
10
10
  export const get = key => {
11
- debugger;
12
11
  return themeGet(key, getKey(theme, key));
13
12
  }; // Common props
14
13
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/components",
3
- "version": "0.0.0-20219214338",
3
+ "version": "0.0.0-202192214359",
4
4
  "description": "Primer react components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",