@astral/ui 0.22.0 → 0.23.0-alpha.3

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 (3) hide show
  1. package/ButtonBase/styled.js +8 -8
  2. package/esm/ButtonBase/styled.js +8 -8
  3. package/package.json +2 -2
package/ButtonBase/styled.js CHANGED
@@ -45,13 +45,13 @@ var getColor = function (_a) {
45
45
  error: {
46
46
  default: theme.palette.red['900'],
47
47
  hover: theme.palette.red['900'],
48
- active: theme.palette.red['900'],
48
+ active: theme.palette.red['800'],
49
49
  focus: theme.palette.red['900'],
50
50
  },
51
51
  success: {
52
52
  default: theme.palette.green['900'],
53
53
  hover: theme.palette.green['900'],
54
- active: theme.palette.green['900'],
54
+ active: theme.palette.green['800'],
55
55
  focus: theme.palette.green['900'],
56
56
  },
57
57
  primary: {
@@ -63,7 +63,7 @@ var getColor = function (_a) {
63
63
  warning: {
64
64
  default: theme.palette.yellow['900'],
65
65
  hover: theme.palette.yellow['900'],
66
- active: theme.palette.yellow['900'],
66
+ active: theme.palette.yellow['800'],
67
67
  focus: theme.palette.yellow['900'],
68
68
  },
69
69
  },
@@ -194,7 +194,7 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
194
194
  shouldForwardProp: function (prop) {
195
195
  return prop !== 'customColor' && prop !== 'customVariant';
196
196
  },
197
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n outline: 2px solid ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n"], ["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n outline: 2px solid ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n"])), exports.getButtonHeight, exports.getButtonPadding, function (props) {
197
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n\n &.", " {\n outline: 2px solid ", ";\n }\n"], ["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n\n &.", " {\n outline: 2px solid ", ";\n }\n"])), exports.getButtonHeight, exports.getButtonPadding, function (props) {
198
198
  return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.DEFAULT }));
199
199
  }, function (_a) {
200
200
  var theme = _a.theme;
@@ -215,9 +215,6 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
215
215
  return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
216
216
  }, function (props) {
217
217
  return (0, exports.getBgColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.FOCUS }));
218
- }, function (_a) {
219
- var theme = _a.theme;
220
- return theme.palette.primary['400'];
221
218
  }, function (props) {
222
219
  return (0, exports.getColor)(__assign(__assign({}, props), { buttonState: constants_1.ButtonStates.ACTIVE }));
223
220
  }, function (props) {
@@ -225,5 +222,8 @@ exports.StyledButtonBase = (0, styles_1.styled)(ButtonUnstyled_1.default, {
225
222
  }, ButtonUnstyled_1.buttonUnstyledClasses.disabled, function (_a) {
226
223
  var theme = _a.theme;
227
224
  return theme.palette.grey['500'];
228
- }, exports.getDisabledBgColor);
225
+ }, exports.getDisabledBgColor, ButtonUnstyled_1.buttonUnstyledClasses.focusVisible, function (_a) {
226
+ var theme = _a.theme;
227
+ return theme.palette.primary['400'];
228
+ });
229
229
  var templateObject_1;
package/esm/ButtonBase/styled.js CHANGED
@@ -23,13 +23,13 @@ export var getColor = function (_a) {
23
23
  error: {
24
24
  default: theme.palette.red['900'],
25
25
  hover: theme.palette.red['900'],
26
- active: theme.palette.red['900'],
26
+ active: theme.palette.red['800'],
27
27
  focus: theme.palette.red['900'],
28
28
  },
29
29
  success: {
30
30
  default: theme.palette.green['900'],
31
31
  hover: theme.palette.green['900'],
32
- active: theme.palette.green['900'],
32
+ active: theme.palette.green['800'],
33
33
  focus: theme.palette.green['900'],
34
34
  },
35
35
  primary: {
@@ -41,7 +41,7 @@ export var getColor = function (_a) {
41
41
  warning: {
42
42
  default: theme.palette.yellow['900'],
43
43
  hover: theme.palette.yellow['900'],
44
- active: theme.palette.yellow['900'],
44
+ active: theme.palette.yellow['800'],
45
45
  focus: theme.palette.yellow['900'],
46
46
  },
47
47
  },
@@ -167,7 +167,7 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
167
167
  shouldForwardProp: function (prop) {
168
168
  return prop !== 'customColor' && prop !== 'customVariant';
169
169
  },
170
- })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n outline: 2px solid ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n"], ["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n outline: 2px solid ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n"])), getButtonHeight, getButtonPadding, function (props) {
170
+ })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n\n &.", " {\n outline: 2px solid ", ";\n }\n"], ["\n position: relative;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: ", ";\n padding: ", ";\n\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n font-family: Ubuntu, serif;\n\n background-color: ", ";\n border: none;\n border-radius: ", ";\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:focus {\n color: ", ";\n\n background-color: ", ";\n }\n\n &:active {\n color: ", ";\n\n background-color: ", ";\n outline: none;\n }\n\n &.", " {\n color: ", ";\n\n background-color: ", ";\n cursor: unset;\n }\n\n &.", " {\n outline: 2px solid ", ";\n }\n"])), getButtonHeight, getButtonPadding, function (props) {
171
171
  return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.DEFAULT }));
172
172
  }, function (_a) {
173
173
  var theme = _a.theme;
@@ -188,9 +188,6 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
188
188
  return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
189
189
  }, function (props) {
190
190
  return getBgColor(__assign(__assign({}, props), { buttonState: ButtonStates.FOCUS }));
191
- }, function (_a) {
192
- var theme = _a.theme;
193
- return theme.palette.primary['400'];
194
191
  }, function (props) {
195
192
  return getColor(__assign(__assign({}, props), { buttonState: ButtonStates.ACTIVE }));
196
193
  }, function (props) {
@@ -198,5 +195,8 @@ export var StyledButtonBase = styled(ButtonUnstyled, {
198
195
  }, buttonUnstyledClasses.disabled, function (_a) {
199
196
  var theme = _a.theme;
200
197
  return theme.palette.grey['500'];
201
- }, getDisabledBgColor);
198
+ }, getDisabledBgColor, buttonUnstyledClasses.focusVisible, function (_a) {
199
+ var theme = _a.theme;
200
+ return theme.palette.primary['400'];
201
+ });
202
202
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astral/ui",
3
- "version": "0.22.0",
3
+ "version": "0.23.0-alpha.3",
4
4
  "browser": "./src/index.ts",
5
5
  "jest": {
6
6
  "moduleNameMapper": {
@@ -8,7 +8,7 @@
8
8
  }
9
9
  },
10
10
  "dependencies": {
11
- "@astral/icons": "^0.22.0",
11
+ "@astral/icons": "^0.23.0-alpha.3",
12
12
  "@emotion/cache": "11.7.1",
13
13
  "@emotion/react": "11.8.1",
14
14
  "@emotion/server": "11.4.0",