@auth0/quantum-product 1.5.11 → 1.5.13

package/README.md

@@ -4,7 +4,7 @@ Quantum Product is a reusable component library that helps Auth0 teams build UIs
 
 ## Docs
 
-[Quantum Product Storybook](https://main--62de9cdffb68e8a4ec657572.chromatic.com/)
+[Quantum Product Storybook](https://quantum.okta.design/)
 
 ## Packages
 
@@ -18,10 +18,6 @@ Note: The below repos are private for now. The source code will be made public a
 | [@auth0/quantum-codemods](https://github.com/auth0/quantum-product/tree/main/packages/quantum-codemods)           | Codemods to help with migrations    |
 | [@a0/quantum-fonts](https://github.com/auth0/quantum-assets/tree/main/packages/quantum-fonts)                  | Extended Inter font (slashed-zero)  |
 
-## Figma
-
-[Quantum Product Figma](https://www.figma.com/file/H20mOEOZpf5a2DXaUEbmSh/Quantum-Product-UI-Kit?node-id=2120%3A10967)
-
 ## Browser support
 
 Quantum follows Auth0's main browser support for the [management dashboard](https://auth0.com/docs/troubleshoot/customer-support/product-support-matrix#auth0-dashboard-desktop-browsers):

package/alert/alert.d.ts

@@ -99,7 +99,7 @@ export declare const Alert: React.ForwardRefExoticComponent<{
     /**
      * Adds box-shadow based on elecation value. The higher the value the larger the shadow. This maps to `theme.shadows[elevation]`
      */
-    elevation?: 1 | 2 | 3 | 4 | undefined;
+    elevation?: 2 | 1 | 3 | 4 | undefined;
     /**
      * Override the icon displayed before the children.
      * Unless provided, the icon is mapped to the value of the `severity` prop.

package/esm/theme/colors.js

@@ -36,3 +36,23 @@ export var getColorsFromTokens = function (tokens) {
         magenta: getColorFromTokens('magenta', tokens),
     };
 };
+export var getBrandColor = function (colors, mainBrandColor) {
+    return (Object.values(colors).find(function (colorMap) {
+        return Object.values(colorMap).includes(mainBrandColor);
+    }) || colors.purple);
+};
+export var getBrandShadeAliasMap = function (color, mainColor) {
+    var valueList = Object.values(color);
+    var mainIndex = valueList.indexOf(mainColor);
+    var light = valueList[Math.max(mainIndex - 2, 0)];
+    var main = valueList[mainIndex];
+    var dark = valueList[Math.min(mainIndex + 2, valueList.length - 1)];
+    return {
+        light: light,
+        main: main,
+        dark: dark,
+        A200: valueList[Math.max(mainIndex - 1, 0)],
+        A400: main,
+        A700: dark,
+    };
+};

package/esm/theme/create-palette.js

@@ -21,14 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import deepmerge from '@mui/utils/deepmerge';
-import { getColorsFromTokens } from './colors';
+import { getBrandColor, getBrandShadeAliasMap, getColorsFromTokens } from './colors';
 export var createPalette = function (_a, tokens) {
     if (_a === void 0) { _a = {}; }
     var primary = _a.primary, secondary = _a.secondary, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, overrides = __rest(_a, ["primary", "secondary", "mode"]);
     var tokenColors = getColorsFromTokens(tokens);
-    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], 
-            // these colors are secondary specific
-            A400: tokenColors.purple[500], A200: tokenColors.purple[400], A700: tokenColors.purple[600] }), text: {
+    var brandColor = getBrandColor(tokenColors, tokens.color_bg_brand_primary);
+    var brandShadeAlias = getBrandShadeAliasMap(brandColor, tokens.color_bg_brand_primary);
+    var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, brandColor), brandShadeAlias), secondary: secondary || __assign(__assign({}, brandColor), brandShadeAlias), text: {
             primary: tokens.color_fg_bold,
             secondary: tokens.color_fg_default,
             disabled: tokens.color_fg_default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auth0/quantum-product",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {

package/theme/colors.d.ts

@@ -6,3 +6,7 @@ export declare type Shade = 'lightest' | 'lighter' | 'light' | 'base' | 'dark' |
 export declare const shadeMap: Record<Shade, keyof Color>;
 export declare type ColorName = 'blue' | 'green' | 'magenta' | 'purple' | 'red' | 'yellow' | 'neutral';
 export declare const getColorsFromTokens: (tokens: ThemeTokens) => Record<ColorName, Color>;
+export declare const getBrandColor: (colors: Record<ColorName, Color>, mainBrandColor: string) => Color;
+declare type BrandShadeMap = Record<'light' | 'main' | 'dark' | 'A400' | 'A200' | 'A700', string>;
+export declare const getBrandShadeAliasMap: (color: Color, mainColor: string) => BrandShadeMap;
+export {};

package/theme/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColorsFromTokens = exports.shadeMap = void 0;
+exports.getBrandShadeAliasMap = exports.getBrandColor = exports.getColorsFromTokens = exports.shadeMap = void 0;
 /** @deprecated use tokens */
 exports.shadeMap = {
     lightest: 50,
@@ -40,3 +40,25 @@ var getColorsFromTokens = function (tokens) {
     };
 };
 exports.getColorsFromTokens = getColorsFromTokens;
+var getBrandColor = function (colors, mainBrandColor) {
+    return (Object.values(colors).find(function (colorMap) {
+        return Object.values(colorMap).includes(mainBrandColor);
+    }) || colors.purple);
+};
+exports.getBrandColor = getBrandColor;
+var getBrandShadeAliasMap = function (color, mainColor) {
+    var valueList = Object.values(color);
+    var mainIndex = valueList.indexOf(mainColor);
+    var light = valueList[Math.max(mainIndex - 2, 0)];
+    var main = valueList[mainIndex];
+    var dark = valueList[Math.min(mainIndex + 2, valueList.length - 1)];
+    return {
+        light: light,
+        main: main,
+        dark: dark,
+        A200: valueList[Math.max(mainIndex - 1, 0)],
+        A400: main,
+        A700: dark,
+    };
+};
+exports.getBrandShadeAliasMap = getBrandShadeAliasMap;

package/theme/create-palette.js

@@ -32,9 +32,9 @@ var createPalette = function (_a, tokens) {
     if (_a === void 0) { _a = {}; }
     var primary = _a.primary, secondary = _a.secondary, _b = _a.mode, mode = _b === void 0 ? 'light' : _b, overrides = __rest(_a, ["primary", "secondary", "mode"]);
     var tokenColors = (0, colors_1.getColorsFromTokens)(tokens);
-    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], 
-            // these colors are secondary specific
-            A400: tokenColors.purple[500], A200: tokenColors.purple[400], A700: tokenColors.purple[600] }), text: {
+    var brandColor = (0, colors_1.getBrandColor)(tokenColors, tokens.color_bg_brand_primary);
+    var brandShadeAlias = (0, colors_1.getBrandShadeAliasMap)(brandColor, tokens.color_bg_brand_primary);
+    var defaultOptions = __assign(__assign({ mode: mode, primary: primary || __assign(__assign({}, brandColor), brandShadeAlias), secondary: secondary || __assign(__assign({}, brandColor), brandShadeAlias), text: {
             primary: tokens.color_fg_bold,
             secondary: tokens.color_fg_default,
             disabled: tokens.color_fg_default,