@auth0/quantum-product 1.5.10 → 1.5.12

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 (7) hide show
  1. package/alert/alert.d.ts +1 -1
  2. package/esm/theme/colors.js +20 -0
  3. package/esm/theme/create-palette.js +4 -4
  4. package/package.json +2 -2
  5. package/theme/colors.d.ts +4 -0
  6. package/theme/colors.js +23 -1
  7. package/theme/create-palette.js +3 -3
package/alert/alert.d.ts CHANGED
@@ -99,7 +99,7 @@ export declare const Alert: React.ForwardRefExoticComponent<{
99
99
  /**
100
100
  * Adds box-shadow based on elecation value. The higher the value the larger the shadow. This maps to `theme.shadows[elevation]`
101
101
  */
102
- elevation?: 1 | 2 | 3 | 4 | undefined;
102
+ elevation?: 2 | 1 | 3 | 4 | undefined;
103
103
  /**
104
104
  * Override the icon displayed before the children.
105
105
  * Unless provided, the icon is mapped to the value of the `severity` prop.
package/esm/theme/colors.js CHANGED
@@ -36,3 +36,23 @@ export var getColorsFromTokens = function (tokens) {
36
36
  magenta: getColorFromTokens('magenta', tokens),
37
37
  };
38
38
  };
39
+ export var getBrandColor = function (colors, mainBrandColor) {
40
+ return (Object.values(colors).find(function (colorMap) {
41
+ return Object.values(colorMap).includes(mainBrandColor);
42
+ }) || colors.purple);
43
+ };
44
+ export var getBrandShadeAliasMap = function (color, mainColor) {
45
+ var valueList = Object.values(color);
46
+ var mainIndex = valueList.indexOf(mainColor);
47
+ var light = valueList[Math.max(mainIndex - 2, 0)];
48
+ var main = valueList[mainIndex];
49
+ var dark = valueList[Math.min(mainIndex + 2, valueList.length - 1)];
50
+ return {
51
+ light: light,
52
+ main: main,
53
+ dark: dark,
54
+ A200: valueList[Math.max(mainIndex - 1, 0)],
55
+ A400: main,
56
+ A700: dark,
57
+ };
58
+ };
package/esm/theme/create-palette.js CHANGED
@@ -21,14 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import deepmerge from '@mui/utils/deepmerge';
24
- import { getColorsFromTokens } from './colors';
24
+ import { getBrandColor, getBrandShadeAliasMap, getColorsFromTokens } from './colors';
25
25
  export var createPalette = function (_a, tokens) {
26
26
  if (_a === void 0) { _a = {}; }
27
27
  var primary = _a.primary, secondary = _a.secondary, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, overrides = __rest(_a, ["primary", "secondary", "mode"]);
28
28
  var tokenColors = getColorsFromTokens(tokens);
29
- var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, tokenColors.purple), { light: tokenColors.purple[300], main: tokenColors.purple[500], dark: tokenColors.purple[600] }), secondary: secondary || __assign(__assign({}, tokenColors.purple), { light: tokenColors.purple[300], main: tokenColors.purple[500], dark: tokenColors.purple[600],
30
- // these colors are secondary specific
31
- A400: tokenColors.purple[500], A200: tokenColors.purple[400], A700: tokenColors.purple[600] }), text: {
29
+ var brandColor = getBrandColor(tokenColors, tokens.color_bg_brand_primary);
30
+ var brandShadeAlias = getBrandShadeAliasMap(brandColor, tokens.color_bg_brand_primary);
31
+ var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, brandColor), brandShadeAlias), secondary: secondary || __assign(__assign({}, brandColor), brandShadeAlias), text: {
32
32
  primary: tokens.color_fg_bold,
33
33
  secondary: tokens.color_fg_default,
34
34
  disabled: tokens.color_fg_default,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@auth0/quantum-product",
3
- "version": "1.5.10",
3
+ "version": "1.5.12",
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.4",
19
+ "@auth0/quantum-tokens": "^1.1.5",
20
20
  "@mui/material": "5.8.7",
21
21
  "@mui/styles": "5.8.7",
22
22
  "@mui/system": "5.8.7",
package/theme/colors.d.ts CHANGED
@@ -6,3 +6,7 @@ export declare type Shade = 'lightest' | 'lighter' | 'light' | 'base' | 'dark' |
6
6
  export declare const shadeMap: Record<Shade, keyof Color>;
7
7
  export declare type ColorName = 'blue' | 'green' | 'magenta' | 'purple' | 'red' | 'yellow' | 'neutral';
8
8
  export declare const getColorsFromTokens: (tokens: ThemeTokens) => Record<ColorName, Color>;
9
+ export declare const getBrandColor: (colors: Record<ColorName, Color>, mainBrandColor: string) => Color;
10
+ declare type BrandShadeMap = Record<'light' | 'main' | 'dark' | 'A400' | 'A200' | 'A700', string>;
11
+ export declare const getBrandShadeAliasMap: (color: Color, mainColor: string) => BrandShadeMap;
12
+ export {};
package/theme/colors.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getColorsFromTokens = exports.shadeMap = void 0;
3
+ exports.getBrandShadeAliasMap = exports.getBrandColor = exports.getColorsFromTokens = exports.shadeMap = void 0;
4
4
  /** @deprecated use tokens */
5
5
  exports.shadeMap = {
6
6
  lightest: 50,
@@ -40,3 +40,25 @@ var getColorsFromTokens = function (tokens) {
40
40
  };
41
41
  };
42
42
  exports.getColorsFromTokens = getColorsFromTokens;
43
+ var getBrandColor = function (colors, mainBrandColor) {
44
+ return (Object.values(colors).find(function (colorMap) {
45
+ return Object.values(colorMap).includes(mainBrandColor);
46
+ }) || colors.purple);
47
+ };
48
+ exports.getBrandColor = getBrandColor;
49
+ var getBrandShadeAliasMap = function (color, mainColor) {
50
+ var valueList = Object.values(color);
51
+ var mainIndex = valueList.indexOf(mainColor);
52
+ var light = valueList[Math.max(mainIndex - 2, 0)];
53
+ var main = valueList[mainIndex];
54
+ var dark = valueList[Math.min(mainIndex + 2, valueList.length - 1)];
55
+ return {
56
+ light: light,
57
+ main: main,
58
+ dark: dark,
59
+ A200: valueList[Math.max(mainIndex - 1, 0)],
60
+ A400: main,
61
+ A700: dark,
62
+ };
63
+ };
64
+ exports.getBrandShadeAliasMap = getBrandShadeAliasMap;
package/theme/create-palette.js CHANGED
@@ -32,9 +32,9 @@ var createPalette = function (_a, tokens) {
32
32
  if (_a === void 0) { _a = {}; }
33
33
  var primary = _a.primary, secondary = _a.secondary, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, overrides = __rest(_a, ["primary", "secondary", "mode"]);
34
34
  var tokenColors = (0, colors_1.getColorsFromTokens)(tokens);
35
- var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, tokenColors.purple), { light: tokenColors.purple[300], main: tokenColors.purple[500], dark: tokenColors.purple[600] }), secondary: secondary || __assign(__assign({}, tokenColors.purple), { light: tokenColors.purple[300], main: tokenColors.purple[500], dark: tokenColors.purple[600],
36
- // these colors are secondary specific
37
- A400: tokenColors.purple[500], A200: tokenColors.purple[400], A700: tokenColors.purple[600] }), text: {
35
+ var brandColor = (0, colors_1.getBrandColor)(tokenColors, tokens.color_bg_brand_primary);
36
+ var brandShadeAlias = (0, colors_1.getBrandShadeAliasMap)(brandColor, tokens.color_bg_brand_primary);
37
+ var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, brandColor), brandShadeAlias), secondary: secondary || __assign(__assign({}, brandColor), brandShadeAlias), text: {
38
38
  primary: tokens.color_fg_bold,
39
39
  secondary: tokens.color_fg_default,
40
40
  disabled: tokens.color_fg_default,