@auth0/quantum-product 1.11.1 → 1.12.0

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 (30) hide show
  1. package/breadcrumbs/breadcrumbs-overrides.d.ts +2 -2
  2. package/breadcrumbs/breadcrumbs-overrides.js +17 -1
  3. package/button/button-overrides.js +16 -2
  4. package/card/card-header/card-header.js +1 -1
  5. package/card/card.js +1 -1
  6. package/checkbox/checkbox-overrides.js +1 -1
  7. package/chip/chip-overrides.js +1 -5
  8. package/chip/chip.js +1 -7
  9. package/dialog/dialog-title/dialog-title.d.ts +1 -1
  10. package/esm/breadcrumbs/breadcrumbs-overrides.js +17 -1
  11. package/esm/button/button-overrides.js +16 -2
  12. package/esm/card/card-header/card-header.js +1 -1
  13. package/esm/card/card.js +1 -1
  14. package/esm/checkbox/checkbox-overrides.js +1 -1
  15. package/esm/chip/chip-overrides.js +1 -5
  16. package/esm/chip/chip.js +1 -7
  17. package/esm/icon-button/icon-button-overrides.js +54 -24
  18. package/esm/input/outlined-input-overrides.js +11 -16
  19. package/esm/radio/radio-overrides.js +1 -1
  20. package/esm/switch/switch-overrides.js +12 -1
  21. package/esm/tabs/tab/tab-override.js +4 -13
  22. package/esm/theme/create-mixins.js +4 -5
  23. package/icon/index.d.ts +343 -343
  24. package/icon-button/icon-button-overrides.js +54 -24
  25. package/input/outlined-input-overrides.js +11 -16
  26. package/package.json +2 -2
  27. package/radio/radio-overrides.js +1 -1
  28. package/switch/switch-overrides.js +12 -1
  29. package/tabs/tab/tab-override.js +4 -13
  30. package/theme/create-mixins.js +3 -4
package/icon-button/icon-button-overrides.js CHANGED
@@ -1,11 +1,22 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
14
  exports.createMuiIconButtonOverrides = void 0;
4
15
  var create_component_overrides_1 = require("../theme/create-component-overrides");
5
16
  var IconButton_1 = require("@mui/material/IconButton");
6
17
  exports.createMuiIconButtonOverrides = (0, create_component_overrides_1.createComponentOverrides)(function (_a) {
7
- var _b;
8
- var typography = _a.typography, tokens = _a.tokens;
18
+ var _b, _c, _d, _e;
19
+ var mixins = _a.mixins, typography = _a.typography, tokens = _a.tokens;
9
20
  return {
10
21
  defaultProps: {},
11
22
  styleOverrides: {
@@ -15,6 +26,9 @@ exports.createMuiIconButtonOverrides = (0, create_component_overrides_1.createCo
15
26
  backgroundColor: tokens.color_bg_button_disabled,
16
27
  borderColor: tokens.color_border_disabled,
17
28
  },
29
+ _b["&:focus,&.Mui-focusVisible"] = {
30
+ outlineOffset: 2,
31
+ },
18
32
  _b),
19
33
  },
20
34
  variants: [
@@ -69,17 +83,21 @@ exports.createMuiIconButtonOverrides = (0, create_component_overrides_1.createCo
69
83
  },
70
84
  {
71
85
  props: { color: 'danger' },
72
- style: {
73
- color: tokens.color_fg_link_danger,
74
- '&:hover,&.Mui-hover': {
75
- color: tokens.color_fg_link_danger_hover,
76
- backgroundColor: tokens.color_bg_link_danger_hover,
77
- },
78
- '&:active,&.Mui-active': {
79
- color: tokens.color_fg_link_danger_pressed,
80
- backgroundColor: tokens.color_bg_link_danger_pressed,
81
- },
82
- },
86
+ style: (_c = {
87
+ color: tokens.color_fg_link_danger,
88
+ '&:hover,&.Mui-hover': {
89
+ color: tokens.color_fg_link_danger_hover,
90
+ backgroundColor: tokens.color_bg_link_danger_hover,
91
+ },
92
+ '&:active,&.Mui-active': {
93
+ color: tokens.color_fg_link_danger_pressed,
94
+ backgroundColor: tokens.color_bg_link_danger_pressed,
95
+ }
96
+ },
97
+ _c["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
98
+ color: tokens.color_border_focus_state_danger,
99
+ })),
100
+ _c),
83
101
  },
84
102
  {
85
103
  props: { variant: 'contained', color: 'primary' },
@@ -98,18 +116,22 @@ exports.createMuiIconButtonOverrides = (0, create_component_overrides_1.createCo
98
116
  },
99
117
  {
100
118
  props: { variant: 'contained', color: 'danger' },
101
- style: {
102
- backgroundColor: tokens.color_bg_button_danger,
103
- color: tokens.color_fg_on_button_danger,
104
- '&:hover,&.Mui-hover': {
105
- color: tokens.color_fg_on_button_danger,
106
- backgroundColor: tokens.color_bg_button_danger_hover,
107
- },
108
- '&:active,&.Mui-active': {
119
+ style: (_d = {
120
+ backgroundColor: tokens.color_bg_button_danger,
109
121
  color: tokens.color_fg_on_button_danger,
110
- backgroundColor: tokens.color_bg_button_danger_pressed,
111
- },
112
- },
122
+ '&:hover,&.Mui-hover': {
123
+ color: tokens.color_fg_on_button_danger,
124
+ backgroundColor: tokens.color_bg_button_danger_hover,
125
+ },
126
+ '&:active,&.Mui-active': {
127
+ color: tokens.color_fg_on_button_danger,
128
+ backgroundColor: tokens.color_bg_button_danger_pressed,
129
+ }
130
+ },
131
+ _d["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
132
+ color: tokens.color_border_focus_state_danger,
133
+ })),
134
+ _d),
113
135
  },
114
136
  {
115
137
  props: { variant: 'contained', color: 'default' },
@@ -165,6 +187,14 @@ exports.createMuiIconButtonOverrides = (0, create_component_overrides_1.createCo
165
187
  },
166
188
  },
167
189
  },
190
+ {
191
+ props: { variant: 'outlined', color: 'danger' },
192
+ style: (_e = {},
193
+ _e["&:focus,&.Mui-focusVisible"] = __assign({ outlineOffset: 2 }, mixins.focusRing({
194
+ color: tokens.color_border_focus_state_danger,
195
+ })),
196
+ _e),
197
+ },
168
198
  {
169
199
  props: { variant: 'link', color: 'default' },
170
200
  style: {
package/input/outlined-input-overrides.js CHANGED
@@ -1,21 +1,10 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  Object.defineProperty(exports, "__esModule", { value: true });
14
3
  exports.createMuiOutlinedInputOverrides = void 0;
15
4
  var OutlinedInput_1 = require("@mui/material/OutlinedInput");
16
5
  var createMuiOutlinedInputOverrides = function (_a) {
17
6
  var _b, _c, _d, _e;
18
- var spacing = _a.spacing, transitions = _a.transitions, mixins = _a.mixins, tokens = _a.tokens;
7
+ var spacing = _a.spacing, transitions = _a.transitions, tokens = _a.tokens;
19
8
  return {
20
9
  defaultProps: {
21
10
  color: 'primary',
@@ -40,13 +29,19 @@ var createMuiOutlinedInputOverrides = function (_a) {
40
29
  _b["&:hover .".concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
41
30
  borderColor: tokens.color_border_input_hover,
42
31
  },
43
- _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderWidth: 2, borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
44
- _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, ":hover .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_focus_bold }, mixins.focusRing()),
32
+ _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
33
+ borderWidth: 2,
34
+ borderColor: tokens.color_border_focus,
35
+ },
36
+ _b["&.".concat(OutlinedInput_1.outlinedInputClasses.focused, ":hover .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
37
+ borderColor: tokens.color_border_focus,
38
+ },
45
39
  _b["&.".concat(OutlinedInput_1.outlinedInputClasses.error, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
46
40
  borderColor: tokens.color_border_state_danger,
47
- borderWidth: 2,
48
41
  },
49
- _b["&.".concat(OutlinedInput_1.outlinedInputClasses.error, "&.").concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = __assign({ borderColor: tokens.color_border_state_danger }, mixins.focusRing({ color: tokens.color_border_focus_state_danger })),
42
+ _b["&.".concat(OutlinedInput_1.outlinedInputClasses.error, "&.").concat(OutlinedInput_1.outlinedInputClasses.focused, " .").concat(OutlinedInput_1.outlinedInputClasses.notchedOutline)] = {
43
+ borderColor: tokens.color_border_focus_state_danger,
44
+ },
50
45
  _b),
51
46
  notchedOutline: {
52
47
  top: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.11.1",
3
+ "version": "1.12.0",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
@@ -12,7 +12,7 @@
12
12
  "types": "./index.d.ts",
13
13
  "dependencies": {
14
14
  "@auth0/quantum-icons": "^1.0.0",
15
- "@auth0/quantum-tokens": "^1.1.5",
15
+ "@auth0/quantum-tokens": "^1.2.0",
16
16
  "@mui/material": "5.15.9",
17
17
  "@mui/styles": "5.15.9",
18
18
  "@mui/system": "5.15.9",
package/radio/radio-overrides.js CHANGED
@@ -27,7 +27,7 @@ var createMuiRadioOverrides = function (_a) {
27
27
  duration: transitions.duration.short,
28
28
  }),
29
29
  color: tokens.color_border_input,
30
- '&:focus-within svg': __assign({ borderRadius: '50%' }, mixins.focusRing()),
30
+ '&:focus-within svg': __assign({ borderRadius: '50%', outlineOffset: 2 }, mixins.focusRing()),
31
31
  // switch base is overriding this. Resetting it here.
32
32
  '&&': {
33
33
  padding: 0,
package/switch/switch-overrides.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
2
13
  Object.defineProperty(exports, "__esModule", { value: true });
3
14
  exports.createMuiSwitchOverrides = void 0;
4
15
  var Switch_1 = require("@mui/material/Switch");
@@ -22,7 +33,7 @@ var createMuiSwitchOverrides = function (_a) {
22
33
  padding: 0,
23
34
  overflow: 'visible',
24
35
  '&:focus-within,&.Mui-focused': (_b = {},
25
- _b["& .".concat(Switch_1.switchClasses.track)] = mixins.focusRing(),
36
+ _b["& .".concat(Switch_1.switchClasses.track)] = __assign({ outlineOffset: 2 }, mixins.focusRing()),
26
37
  _b),
27
38
  },
28
39
  colorPrimary: (_c = {
package/tabs/tab/tab-override.js CHANGED
@@ -1,21 +1,10 @@
1
1
  "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
2
  Object.defineProperty(exports, "__esModule", { value: true });
14
3
  exports.createMuiTabOverrides = void 0;
15
4
  var Tab_1 = require("@mui/material/Tab");
16
5
  var createMuiTabOverrides = function (_a) {
17
6
  var _b, _c;
18
- var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography, mixins = _a.mixins;
7
+ var tokens = _a.tokens, spacing = _a.spacing, breakpoints = _a.breakpoints, typography = _a.typography;
19
8
  return {
20
9
  variants: [
21
10
  {
@@ -48,7 +37,9 @@ var createMuiTabOverrides = function (_a) {
48
37
  _c['&:hover'] = {
49
38
  color: tokens.color_fg_selected,
50
39
  },
51
- _c['&:focus-visible'] = __assign({}, mixins.focusRing({ type: 'inset' })),
40
+ _c['&:focus-visible'] = {
41
+ boxShadow: "0 0 0 2px ".concat(tokens.color_border_focus, " inset"),
42
+ },
52
43
  _c.color = tokens.color_fg_link_subtle,
53
44
  _c.fontWeight = typography.fontWeightRegular,
54
45
  _c),
package/theme/create-mixins.js CHANGED
@@ -40,10 +40,9 @@ var createMixins = function (_a) {
40
40
  };
41
41
  var focusRing = function (options) {
42
42
  if (options === void 0) { options = {}; }
43
- var _a = options.color, color = _a === void 0 ? tokens.color_border_focus_bold : _a, _b = options.type, type = _b === void 0 ? 'default' : _b, _c = options.opacity, opacity = _c === void 0 ? palette.mode === 'light' ? 0.25 : 0.5 : _c;
44
- var shadow = "".concat(opacity === 1 ? color : (0, color_manipulator_1.alpha)(color, opacity), " 0px 0px 0px 0.25em");
43
+ var _a = options.color, color = _a === void 0 ? tokens.color_border_focus : _a;
45
44
  return {
46
- boxShadow: type === 'default' ? shadow : "inset ".concat(shadow),
45
+ outline: "2px solid ".concat(color),
47
46
  };
48
47
  };
49
48
  var borderAsBoxShadow = function (color, width) {
@@ -61,7 +60,7 @@ var createMixins = function (_a) {
61
60
  },
62
61
  hover: hoverStyles,
63
62
  active: hoverStyles,
64
- focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static, opacity: 1 })),
63
+ focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static })),
65
64
  };
66
65
  };
67
66
  var getColorModeValue = function (_a) {