@auth0/quantum-product 1.5.4 → 1.5.6

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 (16) hide show
  1. package/esm/identicons/common.js +0 -4
  2. package/esm/page/page-header/page-header.js +8 -5
  3. package/esm/promo-banner/promo-banner.js +17 -21
  4. package/esm/theme/create-theme.js +3 -1
  5. package/esm/theme/index.js +1 -0
  6. package/identicons/common.js +0 -4
  7. package/mui-type-overrides.d.ts +13 -23
  8. package/package.json +2 -2
  9. package/page/page-header/page-header.js +8 -5
  10. package/promo-banner/promo-banner.js +17 -21
  11. package/theme/create-mixins.d.ts +24 -1
  12. package/theme/create-theme.js +3 -1
  13. package/theme/create-typography.d.ts +9 -2
  14. package/theme/index.d.ts +3 -0
  15. package/theme/index.js +15 -0
  16. package/theme/tokens.d.ts +11 -8
package/esm/identicons/common.js CHANGED
@@ -8,10 +8,6 @@ export var IdenticonsCustomProperty;
8
8
  })(IdenticonsCustomProperty || (IdenticonsCustomProperty = {}));
9
9
  export var getIdenticonsColorMap = function (color, theme) {
10
10
  if (color === void 0) { color = 'default'; }
11
- /*
12
- These are hardcoded since Identicons does not use palette colors. It was decided by design to keep this divergence for now.
13
- See: https://auth0team.atlassian.net/browse/DXDP-2354
14
- */
15
11
  if (color === 'primary') {
16
12
  return theme.palette.identicons.primary;
17
13
  }
package/esm/page/page-header/page-header.js CHANGED
@@ -32,15 +32,18 @@ import { StackLayout, StackLayoutItem } from '../../stack-layout';
32
32
  import { getPageHeaderUtilityClass, pageHeaderClasses, pageHeaderComponentName, } from './page-header-classes';
33
33
  import clsx from '../../utils/clsx';
34
34
  var Root = styled(RowLayout, { name: pageHeaderComponentName, slot: 'Root' })(function (_a) {
35
+ var _b, _c;
35
36
  var theme = _a.theme, ownerState = _a.ownerState;
36
- return (__assign(__assign({}, (ownerState.fullWidth && {
37
+ return (__assign(__assign(__assign({}, (ownerState.fullWidth && {
37
38
  paddingTop: theme.spacing(3),
38
39
  paddingLeft: theme.spacing(3),
39
40
  paddingRight: theme.spacing(3),
40
- })), (ownerState.compact && {
41
- padding: theme.spacing(2, 3),
42
- borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
43
- })));
41
+ })), (_b = {}, _b["& .".concat(pageHeaderClasses.title)] = __assign({}, theme.tokens.type_preset_page_title), _b)), (ownerState.compact && (_c = {
42
+ padding: theme.spacing(2, 3),
43
+ borderBottom: "1px solid ".concat(theme.tokens.color_border_default)
44
+ },
45
+ _c["& .".concat(pageHeaderClasses.title)] = __assign({}, theme.tokens.type_preset_page_title_compact),
46
+ _c))));
44
47
  });
45
48
  export var Actions = styled('div', {
46
49
  name: pageHeaderComponentName,
package/esm/promo-banner/promo-banner.js CHANGED
@@ -40,38 +40,36 @@ var getBannerBackground = function (primaryColor, secondaryColor, image) {
40
40
  return "\n ".concat(backgroundImages[image], " center/cover,\n linear-gradient(268.9deg, ").concat(secondaryColor, " 0%, ").concat(primaryColor, " 99.86%)\n ");
41
41
  };
42
42
  var getColorMap = function (theme) {
43
- var fullTokens = theme.tokens;
44
43
  return {
45
- dark: fullTokens.color_fg_on_button_primary,
46
- default: fullTokens.color_fg_on_button_primary,
47
- blue: fullTokens.color_fg_on_button_inverse_static,
48
- purple: fullTokens.color_fg_on_button_inverse_static,
49
- magenta: fullTokens.color_fg_on_button_inverse_static,
50
- red: fullTokens.color_fg_on_button_inverse_static,
44
+ dark: theme.tokens.color_fg_on_button_primary,
45
+ default: theme.tokens.color_fg_on_button_primary,
46
+ blue: theme.tokens.color_fg_on_button_inverse_static,
47
+ purple: theme.tokens.color_fg_on_button_inverse_static,
48
+ magenta: theme.tokens.color_fg_on_button_inverse_static,
49
+ red: theme.tokens.color_fg_on_button_inverse_static,
51
50
  };
52
51
  };
53
52
  var Root = styled(Paper, { name: promoBannerComponentName, slot: 'Root' })(function (_a) {
54
53
  var theme = _a.theme, ownerState = _a.ownerState;
55
- var fullTokens = theme.tokens;
56
- var textColor = ownerState.color === 'default' ? fullTokens.color_fg_bold : fullTokens.color_fg_inverse_static;
54
+ var textColor = ownerState.color === 'default' ? theme.tokens.color_fg_bold : theme.tokens.color_fg_inverse_static;
57
55
  var colorDark = {
58
- background: getBannerBackground(fullTokens.color_global_functional_static_neutral_black, fullTokens.color_global_functional_static_neutral_black),
56
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_neutral_black, theme.unsafe_globalTokens.color_global_functional_static_neutral_black),
59
57
  color: textColor,
60
58
  };
61
59
  var colorBlue = {
62
- background: getBannerBackground(fullTokens.color_global_functional_static_blue_100, fullTokens.color_global_functional_static_green_100),
60
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_blue_100, theme.unsafe_globalTokens.color_global_functional_static_green_100),
63
61
  color: textColor,
64
62
  };
65
63
  var colorPurple = {
66
- background: getBannerBackground(fullTokens.color_global_functional_static_purple_100, fullTokens.color_global_functional_static_blue_100),
64
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_purple_100, theme.unsafe_globalTokens.color_global_functional_static_blue_100),
67
65
  color: textColor,
68
66
  };
69
67
  var colorMagenta = {
70
- background: getBannerBackground(fullTokens.color_global_functional_static_magenta_100, fullTokens.color_global_functional_static_purple_100),
68
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_magenta_100, theme.unsafe_globalTokens.color_global_functional_static_purple_100),
71
69
  color: textColor,
72
70
  };
73
71
  var colorRed = {
74
- background: getBannerBackground(fullTokens.color_global_functional_static_red_100, fullTokens.color_global_functional_static_yellow_100),
72
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_red_100, theme.unsafe_globalTokens.color_global_functional_static_yellow_100),
75
73
  color: textColor,
76
74
  };
77
75
  var colorClasses = {
@@ -86,26 +84,24 @@ var Root = styled(Paper, { name: promoBannerComponentName, slot: 'Root' })(funct
86
84
  return __assign({ display: 'flex', borderRadius: 6, background: getBannerBackground(theme.tokens.color_bg_layer_alternate, theme.tokens.color_bg_layer_alternate, theme.mixins.getColorModeValue({
87
85
  light: 'dark',
88
86
  dark: 'light',
89
- })), color: fullTokens.color_fg_bold }, colorClass);
87
+ })), color: theme.tokens.color_fg_bold }, colorClass);
90
88
  });
91
89
  var PrimaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'PrimaryAction' })(function (_a) {
92
90
  var theme = _a.theme, ownerState = _a.ownerState;
93
91
  var colorMap = getColorMap(theme);
94
- var fullTokens = theme.tokens;
95
92
  var buttonColor = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) && colorMap[ownerState.color];
96
93
  var whiteButtonBackground = {
97
- background: fullTokens.color_bg_button_inverse_static,
94
+ background: theme.tokens.color_bg_button_inverse_static,
98
95
  };
99
96
  var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
100
- return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: fullTokens.color_fg_inverse_static })) });
97
+ return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
101
98
  });
102
99
  var SecondaryActionButton = styled(Button, { name: promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
103
100
  var theme = _a.theme, ownerState = _a.ownerState;
104
- var fullTokens = theme.tokens;
105
101
  return {
106
- color: ownerState.color !== 'default' ? fullTokens.color_fg_on_button_primary : fullTokens.color_fg_link_primary,
102
+ color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
107
103
  '&:hover': {
108
- backgroundColor: fullTokens.color_bg_link_inverse_static_hover,
104
+ backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
109
105
  },
110
106
  };
111
107
  });
package/esm/theme/create-theme.js CHANGED
@@ -90,5 +90,7 @@ export var createTheme = function (_a) {
90
90
  '0px 12px 12px rgba(0, 0, 0, 0.1)'
91
91
  ], __read(Array.from({ length: 20 }).map(function () { return '0px 16px 16px rgba(0, 0, 0, 0.1)'; })), false),
92
92
  };
93
- return createMuiTheme(themeOptions);
93
+ var theme = createMuiTheme(themeOptions);
94
+ theme.unsafe_globalTokens = completeThemeTokens;
95
+ return theme;
94
96
  };
package/esm/theme/index.js CHANGED
@@ -3,4 +3,5 @@ export { useTheme } from './use-theme';
3
3
  export { ThemeProvider } from './theme-provider';
4
4
  export { defaultTheme } from './default-theme';
5
5
  export { shadeMap } from './colors';
6
+ export * from './tokens';
6
7
  export { createQuantumTheme } from './create-quantum-theme';
package/identicons/common.js CHANGED
@@ -11,10 +11,6 @@ var IdenticonsCustomProperty;
11
11
  })(IdenticonsCustomProperty = exports.IdenticonsCustomProperty || (exports.IdenticonsCustomProperty = {}));
12
12
  var getIdenticonsColorMap = function (color, theme) {
13
13
  if (color === void 0) { color = 'default'; }
14
- /*
15
- These are hardcoded since Identicons does not use palette colors. It was decided by design to keep this divergence for now.
16
- See: https://auth0team.atlassian.net/browse/DXDP-2354
17
- */
18
14
  if (color === 'primary') {
19
15
  return theme.palette.identicons.primary;
20
16
  }
package/mui-type-overrides.d.ts CHANGED
@@ -15,6 +15,7 @@ declare module '@mui/material/styles' {
15
15
  /** Returns spacing as pc number value without the unit */
16
16
  spacingPX(factor: number): number;
17
17
  tokens: import('./theme/tokens').SemanticThemeTokens;
18
+ unsafe_globalTokens: import('./theme/tokens').GlobalThemeTokens;
18
19
  }
19
20
 
20
21
  interface ThemeOptions {
@@ -204,12 +205,12 @@ declare module '@mui/material/styles' {
204
205
  }
205
206
 
206
207
  interface TypographyVariants {
207
- fontFamilyMonospace: string;
208
- code1: MuiMaterialStyles.TypographyStyle;
209
- code2: MuiMaterialStyles.TypographyStyle;
210
- label: MuiMaterialStyles.TypographyStyle;
211
- input: MuiMaterialStyles.TypographyStyle;
212
- fontWeightSemibold: any;
208
+ fontFamilyMonospace: import('./theme/create-typography').ITypography['fontFamilyMonospace'];
209
+ code1: import('./theme/create-typography').ITypography['code1'];
210
+ code2: import('./theme/create-typography').ITypography['code2'];
211
+ label: import('./theme/create-typography').ITypography['label'];
212
+ input: import('./theme/create-typography').ITypography['input'];
213
+ fontWeightSemibold: import('./theme/create-typography').ITypography['fontWeightSemibold'];
213
214
  }
214
215
 
215
216
  interface TypographyVariantsOptions {
@@ -224,25 +225,14 @@ declare module '@mui/material/styles' {
224
225
 
225
226
  declare module '@mui/material/styles/createMixins' {
226
227
  interface Mixins {
227
- focusRing(options?: { type?: 'default' | 'inset'; color?: string; opacity?: number }): MuiStyles.CSSProperties;
228
+ focusRing: import('./theme/create-mixins').IMixins['focusRing'];
228
229
  /** @deprecated use tokens instead */
229
- shadeOfColor(color: import('./theme/colors').ColorName | 'grey', shade?: import('./theme/colors').Shade): string;
230
+ shadeOfColor: import('./theme/create-mixins').IMixins['shadeOfColor'];
230
231
  /** @deprecated use tokens instead */
231
- textColorForShadeOfColor(
232
- color: import('./theme/colors').ColorName | 'grey',
233
- shade?: import('./theme/colors').Shade
234
- ): string;
235
- borderAsBoxShadow(color: string, width?: number): string;
236
- appBarAction(): {
237
- root: MuiStyles.CSSProperties;
238
- hover: MuiStyles.CSSProperties;
239
- focus: MuiStyles.CSSProperties;
240
- active: MuiStyles.CSSProperties;
241
- };
242
- getColorModeValue<LightModeValue extends string = string, DarkModeValue extends string = string>(colorMap: {
243
- light?: LightModeValue;
244
- dark?: DarkModeValue;
245
- }): LightModeValue | DarkModeValue;
232
+ textColorForShadeOfColor: import('./theme/create-mixins').IMixins['textColorForShadeOfColor'];
233
+ borderAsBoxShadow: import('./theme/create-mixins').IMixins['borderAsBoxShadow'];
234
+ appBarAction: import('./theme/create-mixins').IMixins['appBarAction'];
235
+ getColorModeValue: import('./theme/create-mixins').IMixins['getColorModeValue'];
246
236
  }
247
237
 
248
238
  interface MixinsOptions {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.5.4",
3
+ "version": "1.5.6",
4
4
  "sideEffects": false,
5
5
  "license": "Apache-2.0",
6
6
  "publishConfig": {
@@ -16,7 +16,7 @@
16
16
  "main": "./index.js",
17
17
  "types": "./index.d.ts",
18
18
  "dependencies": {
19
- "@auth0/quantum-tokens": "^1.1.1",
19
+ "@auth0/quantum-tokens": "^1.1.4",
20
20
  "@mui/material": "5.8.7",
21
21
  "@mui/styles": "5.8.7",
22
22
  "@mui/system": "5.8.7",
package/page/page-header/page-header.js CHANGED
@@ -61,15 +61,18 @@ var stack_layout_1 = require("../../stack-layout");
61
61
  var page_header_classes_1 = require("./page-header-classes");
62
62
  var clsx_1 = __importDefault(require("../../utils/clsx"));
63
63
  var Root = (0, styled_1.styled)(row_layout_1.RowLayout, { name: page_header_classes_1.pageHeaderComponentName, slot: 'Root' })(function (_a) {
64
+ var _b, _c;
64
65
  var theme = _a.theme, ownerState = _a.ownerState;
65
- return (__assign(__assign({}, (ownerState.fullWidth && {
66
+ return (__assign(__assign(__assign({}, (ownerState.fullWidth && {
66
67
  paddingTop: theme.spacing(3),
67
68
  paddingLeft: theme.spacing(3),
68
69
  paddingRight: theme.spacing(3),
69
- })), (ownerState.compact && {
70
- padding: theme.spacing(2, 3),
71
- borderBottom: "1px solid ".concat(theme.tokens.color_border_default),
72
- })));
70
+ })), (_b = {}, _b["& .".concat(page_header_classes_1.pageHeaderClasses.title)] = __assign({}, theme.tokens.type_preset_page_title), _b)), (ownerState.compact && (_c = {
71
+ padding: theme.spacing(2, 3),
72
+ borderBottom: "1px solid ".concat(theme.tokens.color_border_default)
73
+ },
74
+ _c["& .".concat(page_header_classes_1.pageHeaderClasses.title)] = __assign({}, theme.tokens.type_preset_page_title_compact),
75
+ _c))));
73
76
  });
74
77
  exports.Actions = (0, styled_1.styled)('div', {
75
78
  name: page_header_classes_1.pageHeaderComponentName,
package/promo-banner/promo-banner.js CHANGED
@@ -69,38 +69,36 @@ var getBannerBackground = function (primaryColor, secondaryColor, image) {
69
69
  return "\n ".concat(backgroundImages[image], " center/cover,\n linear-gradient(268.9deg, ").concat(secondaryColor, " 0%, ").concat(primaryColor, " 99.86%)\n ");
70
70
  };
71
71
  var getColorMap = function (theme) {
72
- var fullTokens = theme.tokens;
73
72
  return {
74
- dark: fullTokens.color_fg_on_button_primary,
75
- default: fullTokens.color_fg_on_button_primary,
76
- blue: fullTokens.color_fg_on_button_inverse_static,
77
- purple: fullTokens.color_fg_on_button_inverse_static,
78
- magenta: fullTokens.color_fg_on_button_inverse_static,
79
- red: fullTokens.color_fg_on_button_inverse_static,
73
+ dark: theme.tokens.color_fg_on_button_primary,
74
+ default: theme.tokens.color_fg_on_button_primary,
75
+ blue: theme.tokens.color_fg_on_button_inverse_static,
76
+ purple: theme.tokens.color_fg_on_button_inverse_static,
77
+ magenta: theme.tokens.color_fg_on_button_inverse_static,
78
+ red: theme.tokens.color_fg_on_button_inverse_static,
80
79
  };
81
80
  };
82
81
  var Root = (0, styled_1.styled)(paper_1.Paper, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'Root' })(function (_a) {
83
82
  var theme = _a.theme, ownerState = _a.ownerState;
84
- var fullTokens = theme.tokens;
85
- var textColor = ownerState.color === 'default' ? fullTokens.color_fg_bold : fullTokens.color_fg_inverse_static;
83
+ var textColor = ownerState.color === 'default' ? theme.tokens.color_fg_bold : theme.tokens.color_fg_inverse_static;
86
84
  var colorDark = {
87
- background: getBannerBackground(fullTokens.color_global_functional_static_neutral_black, fullTokens.color_global_functional_static_neutral_black),
85
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_neutral_black, theme.unsafe_globalTokens.color_global_functional_static_neutral_black),
88
86
  color: textColor,
89
87
  };
90
88
  var colorBlue = {
91
- background: getBannerBackground(fullTokens.color_global_functional_static_blue_100, fullTokens.color_global_functional_static_green_100),
89
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_blue_100, theme.unsafe_globalTokens.color_global_functional_static_green_100),
92
90
  color: textColor,
93
91
  };
94
92
  var colorPurple = {
95
- background: getBannerBackground(fullTokens.color_global_functional_static_purple_100, fullTokens.color_global_functional_static_blue_100),
93
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_purple_100, theme.unsafe_globalTokens.color_global_functional_static_blue_100),
96
94
  color: textColor,
97
95
  };
98
96
  var colorMagenta = {
99
- background: getBannerBackground(fullTokens.color_global_functional_static_magenta_100, fullTokens.color_global_functional_static_purple_100),
97
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_magenta_100, theme.unsafe_globalTokens.color_global_functional_static_purple_100),
100
98
  color: textColor,
101
99
  };
102
100
  var colorRed = {
103
- background: getBannerBackground(fullTokens.color_global_functional_static_red_100, fullTokens.color_global_functional_static_yellow_100),
101
+ background: getBannerBackground(theme.unsafe_globalTokens.color_global_functional_static_red_100, theme.unsafe_globalTokens.color_global_functional_static_yellow_100),
104
102
  color: textColor,
105
103
  };
106
104
  var colorClasses = {
@@ -115,26 +113,24 @@ var Root = (0, styled_1.styled)(paper_1.Paper, { name: promo_banner_classes_1.pr
115
113
  return __assign({ display: 'flex', borderRadius: 6, background: getBannerBackground(theme.tokens.color_bg_layer_alternate, theme.tokens.color_bg_layer_alternate, theme.mixins.getColorModeValue({
116
114
  light: 'dark',
117
115
  dark: 'light',
118
- })), color: fullTokens.color_fg_bold }, colorClass);
116
+ })), color: theme.tokens.color_fg_bold }, colorClass);
119
117
  });
120
118
  var PrimaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'PrimaryAction' })(function (_a) {
121
119
  var theme = _a.theme, ownerState = _a.ownerState;
122
120
  var colorMap = getColorMap(theme);
123
- var fullTokens = theme.tokens;
124
121
  var buttonColor = (ownerState === null || ownerState === void 0 ? void 0 : ownerState.color) && colorMap[ownerState.color];
125
122
  var whiteButtonBackground = {
126
- background: fullTokens.color_bg_button_inverse_static,
123
+ background: theme.tokens.color_bg_button_inverse_static,
127
124
  };
128
125
  var showWhiteButtonBackground = ownerState.color !== 'dark' && ownerState.color !== 'default' && whiteButtonBackground;
129
- return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: fullTokens.color_fg_inverse_static })) });
126
+ return __assign(__assign({}, showWhiteButtonBackground), { color: buttonColor, '&:hover': __assign({}, showWhiteButtonBackground), '&:focus': __assign({}, theme.mixins.focusRing({ color: theme.tokens.color_fg_inverse_static })) });
130
127
  });
131
128
  var SecondaryActionButton = (0, styled_1.styled)(button_1.Button, { name: promo_banner_classes_1.promoBannerComponentName, slot: 'SecondaryAction' })(function (_a) {
132
129
  var theme = _a.theme, ownerState = _a.ownerState;
133
- var fullTokens = theme.tokens;
134
130
  return {
135
- color: ownerState.color !== 'default' ? fullTokens.color_fg_on_button_primary : fullTokens.color_fg_link_primary,
131
+ color: ownerState.color !== 'default' ? theme.tokens.color_fg_on_button_primary : theme.tokens.color_fg_link_primary,
136
132
  '&:hover': {
137
- backgroundColor: fullTokens.color_bg_link_inverse_static_hover,
133
+ backgroundColor: theme.tokens.color_bg_link_inverse_static_hover,
138
134
  },
139
135
  };
140
136
  });
package/theme/create-mixins.d.ts CHANGED
@@ -1,8 +1,31 @@
1
+ import type { ColorName, Shade } from './colors';
2
+ import * as MuiStyles from '@mui/styles';
1
3
  import type { IPalette } from './create-palette';
2
4
  import type { Mixins } from '@mui/material/styles';
3
5
  import type { Breakpoints, Spacing } from '@mui/system';
4
6
  import { ThemeTokens } from './tokens';
5
- export declare type IMixins = Omit<Mixins, 'toolbar'>;
7
+ export interface IMixins extends Omit<Mixins, 'toolbar'> {
8
+ focusRing(options?: {
9
+ type?: 'default' | 'inset';
10
+ color?: string;
11
+ opacity?: number;
12
+ }): MuiStyles.CSSProperties;
13
+ /** @deprecated use tokens instead */
14
+ shadeOfColor(color: ColorName | 'grey', shade?: Shade): string;
15
+ /** @deprecated use tokens instead */
16
+ textColorForShadeOfColor(color: ColorName | 'grey', shade?: Shade): string;
17
+ borderAsBoxShadow(color: string, width?: number): string;
18
+ appBarAction(): {
19
+ root: MuiStyles.CSSProperties;
20
+ hover: MuiStyles.CSSProperties;
21
+ focus: MuiStyles.CSSProperties;
22
+ active: MuiStyles.CSSProperties;
23
+ };
24
+ getColorModeValue<LightModeValue extends string = string, DarkModeValue extends string = string>(colorMap: {
25
+ light?: LightModeValue;
26
+ dark?: DarkModeValue;
27
+ }): LightModeValue | DarkModeValue;
28
+ }
6
29
  export declare type IMixinsOptions = Partial<IMixins>;
7
30
  export interface ICreateMixinsOptions {
8
31
  breakpoints: Breakpoints;
package/theme/create-theme.js CHANGED
@@ -93,6 +93,8 @@ var createTheme = function (_a) {
93
93
  '0px 12px 12px rgba(0, 0, 0, 0.1)'
94
94
  ], __read(Array.from({ length: 20 }).map(function () { return '0px 16px 16px rgba(0, 0, 0, 0.1)'; })), false),
95
95
  };
96
- return (0, styles_1.createTheme)(themeOptions);
96
+ var theme = (0, styles_1.createTheme)(themeOptions);
97
+ theme.unsafe_globalTokens = completeThemeTokens;
98
+ return theme;
97
99
  };
98
100
  exports.createTheme = createTheme;
package/theme/create-typography.d.ts CHANGED
@@ -1,6 +1,13 @@
1
- import type { TypographyVariants as Typography, TypographyVariantsOptions as TypographyOptions } from '@mui/material/styles';
1
+ import type { TypographyVariants as Typography, TypographyVariantsOptions as TypographyOptions, TypographyStyle } from '@mui/material/styles';
2
2
  import { ThemeTokens } from './tokens';
3
3
  export declare type FontWeightKey = 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
4
- export declare type ITypography = Typography;
4
+ export interface ITypography extends Typography {
5
+ fontFamilyMonospace: string;
6
+ code1: TypographyStyle;
7
+ code2: TypographyStyle;
8
+ label: TypographyStyle;
9
+ input: TypographyStyle;
10
+ fontWeightSemibold: any;
11
+ }
5
12
  export declare type ITypographyOptions = TypographyOptions;
6
13
  export declare const createTypography: (overrides: TypographyOptions | undefined, tokens: ThemeTokens) => TypographyOptions;
package/theme/index.d.ts CHANGED
@@ -6,7 +6,10 @@ export { ThemeProvider } from './theme-provider';
6
6
  export type { IThemeProviderProps } from './theme-provider';
7
7
  export { defaultTheme } from './default-theme';
8
8
  export type { ILayout, ILayoutOptions } from './create-layout';
9
+ export type { IMixins } from './create-mixins';
10
+ export type { ITypography } from './create-typography';
9
11
  export { shadeMap } from './colors';
10
12
  export type { ColorName, Shade } from './colors';
13
+ export * from './tokens';
11
14
  export { createQuantumTheme } from './create-quantum-theme';
12
15
  export type { IQuantumTheme, IQuantumThemeOptions } from './create-quantum-theme';
package/theme/index.js CHANGED
@@ -1,4 +1,18 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
2
16
  Object.defineProperty(exports, "__esModule", { value: true });
3
17
  exports.createQuantumTheme = exports.shadeMap = exports.defaultTheme = exports.ThemeProvider = exports.useTheme = exports.createTheme = void 0;
4
18
  var create_theme_1 = require("./create-theme");
@@ -11,5 +25,6 @@ var default_theme_1 = require("./default-theme");
11
25
  Object.defineProperty(exports, "defaultTheme", { enumerable: true, get: function () { return default_theme_1.defaultTheme; } });
12
26
  var colors_1 = require("./colors");
13
27
  Object.defineProperty(exports, "shadeMap", { enumerable: true, get: function () { return colors_1.shadeMap; } });
28
+ __exportStar(require("./tokens"), exports);
14
29
  var create_quantum_theme_1 = require("./create-quantum-theme");
15
30
  Object.defineProperty(exports, "createQuantumTheme", { enumerable: true, get: function () { return create_quantum_theme_1.createQuantumTheme; } });
package/theme/tokens.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { okta, auth0 } from '@auth0/quantum-tokens';
2
+ declare type GlobalTokenPatten = `${string}_global_${string}`;
3
+ declare type ColorTokenPattern = `color_${string}`;
4
+ declare type TypeTokenPattern = `type_${string}`;
2
5
  export declare type ThemeTokens = typeof okta.light | typeof auth0.light;
3
6
  export declare type ThemeTokenName = keyof ThemeTokens;
4
- declare type FilterGlobalTokens<TokenKey extends string> = TokenKey extends `${string}_global_${string}` ? never : TokenKey;
5
- declare type PickColorTokens<TokenKey extends string> = TokenKey extends `color_${string}` ? TokenKey : never;
6
- declare type PickTypeTokens<TokenKey extends string> = TokenKey extends `type_${string}` ? TokenKey : never;
7
+ declare type FilterGlobalTokens<TokenKey extends string> = TokenKey extends GlobalTokenPatten ? never : TokenKey;
8
+ declare type PickTokenType<Pattern extends string, TokenKey extends string> = TokenKey extends Pattern ? TokenKey : never;
9
+ export declare type GlobalThemeTokenName = PickTokenType<GlobalTokenPatten, ThemeTokenName>;
10
+ export declare type GlobalThemeTokens = Pick<ThemeTokens, GlobalThemeTokenName>;
7
11
  export declare type SemanticThemeTokenName = FilterGlobalTokens<ThemeTokenName>;
8
12
  export declare type SemanticThemeTokens = Pick<ThemeTokens, SemanticThemeTokenName>;
9
- export declare type ThemeColorTokenName = FilterGlobalTokens<PickColorTokens<ThemeTokenName>>;
10
- export declare type ThemeColorTokens = FilterGlobalTokens<PickColorTokens<ThemeTokenName>>;
11
- export declare type ThemeTypeTokenName = FilterGlobalTokens<PickTypeTokens<ThemeTokenName>>;
12
- export declare type ThemeTypeTokens = FilterGlobalTokens<PickTypeTokens<ThemeTokenName>>;
13
- export declare type ColorTokenPrefix = 'color_global' | 'color_bg' | 'color_border' | 'color_fg';
13
+ export declare type ThemeColorTokenName = FilterGlobalTokens<PickTokenType<ColorTokenPattern, ThemeTokenName>>;
14
+ export declare type ThemeColorTokens = Pick<ThemeTokens, ThemeColorTokenName>;
15
+ export declare type ThemeTypeTokenName = FilterGlobalTokens<PickTokenType<TypeTokenPattern, ThemeTokenName>>;
16
+ export declare type ThemeTypeTokens = Pick<ThemeTokens, ThemeTypeTokenName>;
14
17
  export {};