@auth0/quantum-product 1.5.1

package/theme/create-components.js

@@ -0,0 +1,160 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createComponents = void 0;
+var utils_1 = require("@mui/utils");
+var alert_title_overrides_1 = require("../alert/alert-title/alert-title-overrides");
+var app_bar_overrides_1 = require("../app-bar/app-bar-overrides");
+var autocomplete_overrides_1 = require("../autocomplete/autocomplete-overrides");
+var backdrop_overrides_1 = require("../backdrop/backdrop-overrides");
+var badge_overrides_1 = require("../badge/badge-overrides");
+var breadcrumbs_overrides_1 = require("../breadcrumbs/breadcrumbs-overrides");
+var button_overrides_1 = require("../button/button-overrides");
+var card_header_overrides_1 = require("../card/card-header/card-header-overrides");
+var card_overrides_1 = require("../card/card-overrides");
+var chip_overrides_1 = require("../chip/chip-overrides");
+var css_baseline_overrides_1 = require("../css-baseline/css-baseline-overrides");
+var dialog_actions_overrides_1 = require("../dialog/dialog-actions/dialog-actions-overrides");
+var dialog_content_overrides_1 = require("../dialog/dialog-content/dialog-content-overrides");
+var dialog_overrides_1 = require("../dialog/dialog-overrides");
+var dialog_title_overrides_1 = require("../dialog/dialog-title/dialog-title-overrides");
+var divider_overrides_1 = require("../divider/divider-overrides");
+var form_control_overrides_1 = require("../form/form-control-label/form-control-overrides");
+var form_control_overrides_2 = require("../form/form-control/form-control-overrides");
+var form_helper_text_overrides_1 = require("../form/form-helper-text/form-helper-text-overrides");
+var form_label_overrides_1 = require("../form/form-label/form-label-overrides");
+var icon_button_overrides_1 = require("../icon-button/icon-button-overrides");
+var input_adornment_overrides_1 = require("../input/input-adornment/input-adornment-overrides");
+var input_base_overrides_1 = require("../input/input-base-overrides");
+var input_label_overrides_1 = require("../input/input-label/input-label-overrides");
+var list_item_overrides_1 = require("../list/list-item/list-item-overrides");
+var list_item_text_overrides_1 = require("../list/list-item-text/list-item-text-overrides");
+var list_overrides_1 = require("../list/list-overrides");
+var list_subheader_overrides_1 = require("../list/list-subheader/list-subheader-overrides");
+var menu_item_overrides_1 = require("../menu/menu-item/menu-item-overrides");
+var menu_overrides_1 = require("../menu/menu-overrides");
+var outlined_input_overrides_1 = require("../input/outlined-input-overrides");
+var radio_overrides_1 = require("../radio/radio-overrides");
+var tooltip_overrides_1 = require("../tooltip/tooltip-overrides");
+var text_overrides_1 = require("../text/text-overrides");
+var checkbox_overrides_1 = require("../checkbox/checkbox-overrides");
+var select_overrides_1 = require("../select/select-overrides");
+var switch_overrides_1 = require("../switch/switch-overrides");
+var toast_overrides_1 = require("../toast/toast-overrides");
+var ToggleButton_1 = require("@mui/material/ToggleButton");
+var text_field_overrides_1 = require("../text-field/text-field-overrides");
+var tabs_overrides_1 = require("../tabs/tabs-overrides");
+var tab_override_1 = require("../tabs/tab/tab-override");
+var table_overrides_1 = require("../table/table-overrides");
+var table_cell_overrides_1 = require("../table/table-cell/table-cell-overrides");
+var table_container_overrides_1 = require("../table/table-container/table-container-overrides");
+var table_row_overrides_1 = require("../table/table-row/table-row-overrides");
+var table_sort_label_overrides_1 = require("../table/table-sort-label/table-sort-label-overrides");
+var createComponents = function (_a) {
+    var _b;
+    var components = _a.components, options = __rest(_a, ["components"]);
+    var defaultOptions = {
+        MuiAlertTitle: (0, alert_title_overrides_1.createMuiAlertTitleOverrides)(options),
+        MuiAppBar: (0, app_bar_overrides_1.createMuiAppBarOverrides)(options),
+        MuiAutocomplete: (0, autocomplete_overrides_1.createMuiAutocompleteOverrides)(options),
+        MuiBackdrop: (0, backdrop_overrides_1.createMuiBackdropOverrides)(options),
+        MuiBadge: (0, badge_overrides_1.createMuiBadgeOverrides)(options),
+        MuiBreadcrumbs: (0, breadcrumbs_overrides_1.createMuiBreadcrumbsOverrides)(options),
+        MuiButtonBase: {
+            defaultProps: {
+                disableRipple: true,
+                disableTouchRipple: true,
+            },
+        },
+        MuiButton: (0, button_overrides_1.createMuiButtonOverrides)(options),
+        MuiButtonGroup: {
+            defaultProps: {
+                disableRipple: true,
+                disableElevation: true,
+            },
+        },
+        MuiCard: (0, card_overrides_1.createMuiCardOverrides)(options),
+        MuiCardHeader: (0, card_header_overrides_1.createMuiCardHeaderOverrides)(options),
+        MuiCheckbox: (0, checkbox_overrides_1.createMuiCheckboxOverrides)(options),
+        MuiChip: (0, chip_overrides_1.createMuiChipOverrides)(options),
+        MuiCssBaseline: (0, css_baseline_overrides_1.createMuiCssBaselineOverrides)(options),
+        MuiDialog: (0, dialog_overrides_1.createMuiDialogOverrides)(options),
+        MuiDialogActions: (0, dialog_actions_overrides_1.createMuiDialogActionsOverrides)(options),
+        MuiDialogContent: (0, dialog_content_overrides_1.createMuiDialogContentOverrides)(options),
+        MuiDialogTitle: (0, dialog_title_overrides_1.createMuiDialogTitleOverrides)(options),
+        MuiDivider: (0, divider_overrides_1.createMuiDividerOverrides)(options),
+        MuiFormControl: (0, form_control_overrides_2.createMuiFormControlOverrides)(options),
+        MuiFormControlLabel: (0, form_control_overrides_1.createMuiFormControlLabelOverrides)(options),
+        MuiFormHelperText: (0, form_helper_text_overrides_1.createMuiFormHelperTextOverrides)(options),
+        MuiFormLabel: (0, form_label_overrides_1.createMuiFormLabelOverrides)(options),
+        MuiIconButton: (0, icon_button_overrides_1.createMuiIconButtonOverrides)(options),
+        MuiInputAdornment: (0, input_adornment_overrides_1.createMuiInputAdornmentOverrides)(options),
+        MuiInputBase: (0, input_base_overrides_1.createMuiInputBaseOverrides)(options),
+        MuiInputLabel: (0, input_label_overrides_1.createMuiInputLabelOverrides)(options),
+        MuiList: (0, list_overrides_1.createMuiListOverrides)(options),
+        MuiListItem: (0, list_item_overrides_1.createMuiListItemOverrides)(options),
+        MuiListItemText: (0, list_item_text_overrides_1.createMuiListItemTextOverrides)(options),
+        MuiListSubheader: (0, list_subheader_overrides_1.createMuiListSubheaderOverrides)(options),
+        MuiMenu: (0, menu_overrides_1.createMuiMenuOverrides)(options),
+        MuiMenuItem: (0, menu_item_overrides_1.createMuiMenuItemOverrides)(options),
+        MuiOutlinedInput: (0, outlined_input_overrides_1.createMuiOutlinedInputOverrides)(options),
+        MuiRadio: (0, radio_overrides_1.createMuiRadioOverrides)(options),
+        MuiSelect: (0, select_overrides_1.createMuiSelectOverrides)(options),
+        MuiSnackbar: (0, toast_overrides_1.createMuiSnackbarOverrides)(options),
+        MuiSwitch: (0, switch_overrides_1.createMuiSwitchOverrides)(options),
+        MuiTable: (0, table_overrides_1.createMuiTableOverrides)(options),
+        MuiTableCell: (0, table_cell_overrides_1.createMuiTableCellOverrides)(options),
+        MuiTableContainer: (0, table_container_overrides_1.createMuiTableContainerOverrides)(options),
+        MuiTableRow: (0, table_row_overrides_1.createMuiTableRowOverrides)(options),
+        MuiTableSortLabel: (0, table_sort_label_overrides_1.createMuiTableSortLabelOverrides)(options),
+        MuiTabs: (0, tabs_overrides_1.createMuiTabsOverrides)(options),
+        MuiTab: (0, tab_override_1.createMuiTabOverrides)(options),
+        MuiTextField: (0, text_field_overrides_1.createMuiTextFieldOverrides)(options),
+        MuiToggleButton: {
+            styleOverrides: {
+                root: (_b = {
+                        borderColor: options.palette.neutral[200],
+                        '& > *:first-child > svg': {
+                            stroke: options.palette.neutral[900],
+                        }
+                    },
+                    _b["".concat(ToggleButton_1.toggleButtonClasses.selected)] = {
+                        backgroundColor: options.palette.neutral[50],
+                        '& > *:first-child > svg': {
+                            stroke: options.palette.primary.main,
+                        },
+                    },
+                    _b["".concat(ToggleButton_1.toggleButtonClasses.disabled)] = {
+                        '& > *:first-child > svg': {
+                            stroke: options.palette.neutral[200],
+                        },
+                    },
+                    _b),
+                sizeSmall: {
+                    minWidth: 'unset',
+                    fontSize: options.typography.button.fontSize,
+                    padding: options.spacing(1.25, 1.125),
+                    '& > *:first-child': {
+                        fontSize: '1rem',
+                        height: '1em',
+                        width: '1em',
+                    },
+                },
+            },
+        },
+        MuiTooltip: (0, tooltip_overrides_1.createMuiTooltipOverrides)(options),
+        MuiTypography: (0, text_overrides_1.createMuiTypographyOverrides)(options),
+    };
+    return (0, utils_1.deepmerge)(defaultOptions, typeof components === 'function' ? components(options) : components);
+};
+exports.createComponents = createComponents;

package/theme/create-layout.d.ts

@@ -0,0 +1,12 @@
+import { ThemeTokens } from './tokens';
+export interface ILayout {
+    /** offset app top to support 3rd party banners (e.g. heroku) */
+    appTop: number;
+    appBarHeight: number;
+    sidebarWidth: number;
+    sidebarWidthCollapsed: number;
+}
+export declare type ILayoutOptions = Partial<ILayout> & {
+    tokens?: ThemeTokens;
+};
+export declare const createLayout: (options?: ILayoutOptions) => ILayout;

package/theme/create-layout.js

@@ -0,0 +1,22 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createLayout = void 0;
+var createLayout = function (options) {
+    var _a, _b, _c, _d;
+    if (options === void 0) { options = {}; }
+    return (__assign({ 
+        // support 3rd party banners like heroku,
+        appTop: ((_a = options.tokens) === null || _a === void 0 ? void 0 : _a.size_layout_app_top) || 0, appBarHeight: ((_b = options.tokens) === null || _b === void 0 ? void 0 : _b.size_layout_app_bar_height) || 56, sidebarWidth: ((_c = options.tokens) === null || _c === void 0 ? void 0 : _c.size_layout_sidebar_width) || 265, sidebarWidthCollapsed: ((_d = options.tokens) === null || _d === void 0 ? void 0 : _d.size_layout_sidebar_width_collapsed) || 68 }, options));
+};
+exports.createLayout = createLayout;

package/theme/create-mixins.d.ts

@@ -0,0 +1,14 @@
+import type { IPalette } from './create-palette';
+import type { Mixins } from '@mui/material/styles';
+import type { Breakpoints, Spacing } from '@mui/system';
+import { ThemeTokens } from './tokens';
+export declare type IMixins = Omit<Mixins, 'toolbar'>;
+export declare type IMixinsOptions = Partial<IMixins>;
+export interface ICreateMixinsOptions {
+    breakpoints: Breakpoints;
+    spacing: Spacing;
+    palette: IPalette;
+    tokens: ThemeTokens;
+    overrides?: IMixinsOptions;
+}
+export declare const createMixins: ({ palette, tokens, overrides }: ICreateMixinsOptions) => Pick<IMixins, "focusRing" | "shadeOfColor" | "textColorForShadeOfColor" | "borderAsBoxShadow" | "appBarAction" | "getColorModeValue">;

package/theme/create-mixins.js

@@ -0,0 +1,77 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createMixins = void 0;
+var color_manipulator_1 = require("../styles/color-manipulator");
+var colors_1 = require("./colors");
+var createMixins = function (_a) {
+    var palette = _a.palette, tokens = _a.tokens, _b = _a.overrides, overrides = _b === void 0 ? {} : _b;
+    var shadeOfColor = function (color, shade) {
+        if (shade === void 0) { shade = 'base'; }
+        var shadeValue = colors_1.shadeMap[shade];
+        return palette[color][shadeValue];
+    };
+    // `${color}:${shade}`: value
+    var textColorCache = {};
+    var textColorForShadeOfColor = function (color, shade) {
+        if (shade === 'lightest') {
+            return shadeOfColor(color, 'darkest');
+        }
+        var cacheKey = "".concat(color, ":").concat(shade);
+        if (textColorCache[cacheKey]) {
+            return textColorCache[cacheKey];
+        }
+        var bgColor = shadeOfColor(color, shade);
+        var textPrimaryContrastRatio = (0, color_manipulator_1.getContrastRatio)(palette.text.primary, bgColor);
+        var whiteContrastRatio = (0, color_manipulator_1.getContrastRatio)(palette.common.white, bgColor);
+        var textColor = whiteContrastRatio >= textPrimaryContrastRatio ? palette.common.white : palette.text.primary;
+        textColorCache[cacheKey] = textColor;
+        return textColor;
+    };
+    var focusRing = function (options) {
+        if (options === void 0) { options = {}; }
+        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;
+        var shadow = "".concat(opacity === 1 ? color : (0, color_manipulator_1.alpha)(color, opacity), " 0px 0px 0px 0.25em");
+        return {
+            boxShadow: type === 'default' ? shadow : "inset ".concat(shadow),
+        };
+    };
+    var borderAsBoxShadow = function (color, width) {
+        if (width === void 0) { width = 1; }
+        return "inset 0px 0px 0px ".concat(width, "px ").concat(color);
+    };
+    var appBarAction = function () {
+        var hoverStyles = {
+            color: tokens.color_fg_inverse_static,
+            backgroundColor: tokens.color_bg_link_inverse_static_hover,
+        };
+        return {
+            root: {
+                backgroundColor: 'transparent',
+            },
+            hover: hoverStyles,
+            active: hoverStyles,
+            focus: __assign({ color: tokens.color_fg_inverse_static }, focusRing({ color: tokens.color_border_focus_inverse_static, opacity: 1 })),
+        };
+    };
+    var getColorModeValue = function (_a) {
+        var light = _a.light, dark = _a.dark;
+        if (palette.mode === 'dark') {
+            return dark || '';
+        }
+        return light || '';
+    };
+    var mixins = __assign({ borderAsBoxShadow: borderAsBoxShadow, shadeOfColor: shadeOfColor, textColorForShadeOfColor: textColorForShadeOfColor, focusRing: focusRing, appBarAction: appBarAction, getColorModeValue: getColorModeValue }, overrides);
+    return mixins;
+};
+exports.createMixins = createMixins;

package/theme/create-palette.d.ts

@@ -0,0 +1,12 @@
+import { Palette, PaletteColor, PaletteOptions } from '@mui/material/styles';
+import type { PropTypes, PaletteMode } from '@mui/material';
+import { ThemeTokens } from './tokens';
+export type { PaletteColor, PaletteMode };
+export declare type IPalette = Palette;
+export declare type IPaletteOptions = PaletteOptions;
+export declare type ColorType = BaseColorType | ThemeColorType | StatusColorType | PaletteColor | 'danger';
+export declare type PickColorType<Color extends ColorType = ColorType> = Color;
+export declare type StatusColorType = keyof Pick<IPalette, 'warning' | 'danger' | 'success' | 'info'>;
+export declare type ThemeColorType = keyof Pick<IPalette, 'primary'>;
+export declare type BaseColorType = PropTypes.Color;
+export declare const createPalette: ({ primary, secondary, mode, ...overrides }: PaletteOptions | undefined, tokens: ThemeTokens) => PaletteOptions;

package/theme/create-palette.js

@@ -0,0 +1,97 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPalette = void 0;
+var deepmerge_1 = __importDefault(require("@mui/utils/deepmerge"));
+var colors_1 = require("./colors");
+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: {
+            primary: tokens.color_fg_bold,
+            secondary: tokens.color_fg_default,
+            disabled: tokens.color_fg_default,
+        }, default: {
+            light: tokens.color_bg_state_neutral_subtle,
+            main: tokens.color_bg_state_neutral,
+            dark: tokens.color_fg_on_state_neutral_subtle,
+        }, warning: {
+            light: tokens.color_bg_state_caution_subtle,
+            main: tokens.color_bg_state_caution,
+            dark: tokens.color_fg_on_state_caution_subtle,
+        }, error: {
+            light: tokens.color_bg_state_danger_subtle,
+            main: tokens.color_bg_state_danger,
+            dark: tokens.color_fg_on_state_danger_subtle,
+        }, danger: {
+            light: tokens.color_bg_state_danger_subtle,
+            main: tokens.color_bg_state_danger,
+            dark: tokens.color_fg_on_state_danger_subtle,
+        }, success: {
+            light: tokens.color_bg_state_success_subtle,
+            main: tokens.color_bg_state_success,
+            dark: tokens.color_fg_on_state_success_subtle,
+        }, info: {
+            light: tokens.color_bg_state_info_subtle,
+            main: tokens.color_bg_state_info,
+            dark: tokens.color_fg_on_state_info_subtle,
+        }, action: {
+            disabledOpacity: 0.5,
+            disabledBackground: tokens.color_bg_disabled,
+            //TODO: This needs some work. It might not be used anywhere and we dont have a semantictoken for it.
+            hover: mode === 'light'
+                ? tokens.color_global_functional_light_neutral_400
+                : tokens.color_global_functional_dark_neutral_300,
+            hoverBackground: tokens.color_bg_interactive_hover,
+            activeBackground: tokens.color_bg_interactive_pressed,
+        }, background: {
+            default: tokens.color_bg_page,
+            paper: tokens.color_bg_layer,
+            surface: tokens.color_bg_layer,
+        }, border: {
+            primary: tokens.color_border_bold,
+            secondary: tokens.color_border_default,
+            light: tokens.color_border_default,
+            dark: tokens.color_border_bold,
+        }, divider: tokens.color_border_default, grey: tokenColors.neutral, identicons: {
+            default: {
+                light: tokens.color_fg_identicon_subtlest,
+                base: tokens.color_fg_identicon_subtle,
+                dark: tokens.color_fg_identicon,
+            },
+            primary: {
+                light: tokens.color_fg_identicon_highlight_subtlest,
+                base: tokens.color_fg_identicon_highlight_subtle,
+                dark: tokens.color_fg_identicon_highlight,
+            },
+        } }, tokenColors), tokens);
+    return (0, deepmerge_1.default)(defaultOptions, overrides);
+};
+exports.createPalette = createPalette;

package/theme/create-quantum-theme.d.ts

@@ -0,0 +1,12 @@
+import { PaletteMode } from '@mui/material';
+import { IThemeOptions, ITheme } from './create-theme';
+import { ThemeTokens } from './tokens';
+export interface IQuantumThemeOptions {
+    tokens?: Record<PaletteMode, ThemeTokens>;
+    themeOptions?: Omit<IThemeOptions, 'tokens'>;
+}
+export interface IQuantumTheme {
+    light: ITheme;
+    dark: ITheme;
+}
+export declare const createQuantumTheme: ({ tokens, themeOptions }: IQuantumThemeOptions) => IQuantumTheme;

package/theme/create-quantum-theme.js

@@ -0,0 +1,26 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createQuantumTheme = void 0;
+var quantum_tokens_1 = require("@auth0/quantum-tokens");
+var create_theme_1 = require("./create-theme");
+var createQuantumTheme = function (_a) {
+    var _b = _a.tokens, tokens = _b === void 0 ? quantum_tokens_1.okta : _b, themeOptions = _a.themeOptions;
+    var light = (0, create_theme_1.createTheme)(__assign(__assign({}, themeOptions), { tokens: tokens.light, palette: __assign({ mode: 'light' }, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.palette) }));
+    var dark = (0, create_theme_1.createTheme)(__assign(__assign({}, themeOptions), { tokens: tokens.dark, palette: __assign({ mode: 'dark' }, themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.palette) }));
+    return {
+        dark: dark,
+        light: light,
+    };
+};
+exports.createQuantumTheme = createQuantumTheme;

package/theme/create-theme.d.ts

@@ -0,0 +1,12 @@
+import { Palette, Theme, ThemeOptions, Breakpoints } from '@mui/material/styles';
+import { IComponentsOptions } from './create-components';
+import { ITypographyOptions } from './create-typography';
+export declare type IThemeOptions = Omit<ThemeOptions, 'typography'> & {
+    components?: IComponentsOptions['components'];
+    typography?: ((partialTheme: {
+        palette: Palette;
+        breakpoints: Breakpoints;
+    }) => ITypographyOptions) | ITypographyOptions;
+};
+export declare type ITheme = Theme;
+export declare const createTheme: ({ layout: layoutOptions, components: componentsOptions, palette: paletteOptions, typography: typographyOptions, breakpoints: breakpointsOptions, tokens, ...options }?: IThemeOptions) => ITheme;

package/theme/create-theme.js

@@ -0,0 +1,98 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = void 0;
+var styles_1 = require("@mui/material/styles");
+var system_1 = require("@mui/system");
+var create_layout_1 = require("./create-layout");
+var create_components_1 = require("./create-components");
+var create_mixins_1 = require("./create-mixins");
+var create_palette_1 = require("./create-palette");
+var create_typography_1 = require("./create-typography");
+var quantum_tokens_1 = require("@auth0/quantum-tokens");
+var defaultThemeTokens = quantum_tokens_1.auth0;
+var createTheme = function (_a) {
+    if (_a === void 0) { _a = {}; }
+    var layoutOptions = _a.layout, componentsOptions = _a.components, paletteOptions = _a.palette, typographyOptions = _a.typography, _b = _a.breakpoints, breakpointsOptions = _b === void 0 ? {} : _b, tokens = _a.tokens, options = __rest(_a, ["layout", "components", "palette", "typography", "breakpoints", "tokens"]);
+    var colorMode = (paletteOptions === null || paletteOptions === void 0 ? void 0 : paletteOptions.mode) || 'light';
+    // Ensure we have all global tokens as well. Not exposing global to the consumer at this time.
+    var completeThemeTokens = __assign(__assign({}, defaultThemeTokens[colorMode]), tokens);
+    var breakpoints = (0, system_1.createBreakpoints)(breakpointsOptions);
+    var baseTheme = (0, styles_1.createTheme)(__assign({ palette: (0, create_palette_1.createPalette)(paletteOptions, completeThemeTokens), tokens: completeThemeTokens, breakpoints: breakpoints, typography: function (p) {
+            return (0, create_typography_1.createTypography)(typeof typographyOptions === 'function' ? typographyOptions({ palette: p, breakpoints: breakpoints }) : typographyOptions, completeThemeTokens);
+        } }, options));
+    var mixins = (0, create_mixins_1.createMixins)({
+        palette: baseTheme.palette,
+        spacing: baseTheme.spacing,
+        breakpoints: baseTheme.breakpoints,
+        overrides: baseTheme.mixins,
+        tokens: completeThemeTokens,
+    });
+    var layout = (0, create_layout_1.createLayout)(__assign(__assign({}, layoutOptions), { tokens: completeThemeTokens }));
+    var components = (0, create_components_1.createComponents)(__assign(__assign({}, baseTheme), { mixins: mixins, layout: layout, components: componentsOptions }));
+    var themeOptions = {
+        palette: __assign({}, baseTheme.palette),
+        typography: baseTheme.typography,
+        breakpoints: baseTheme.breakpoints,
+        mixins: mixins,
+        components: components,
+        layout: layout,
+        spacingPX: function (factor) { return factor * 8; },
+        // flatten this internally to make reference easier
+        tokens: completeThemeTokens,
+        shadows: __spreadArray([
+            'none',
+            '0px 2px 4px rgba(0, 0, 0, 0.12)',
+            '0px 6px 8px rgba(0, 0, 0, 0.1)',
+            '0px 12px 12px rgba(0, 0, 0, 0.1)'
+        ], __read(Array.from({ length: 20 }).map(function () { return '0px 16px 16px rgba(0, 0, 0, 0.1)'; })), false),
+    };
+    return (0, styles_1.createTheme)(themeOptions);
+};
+exports.createTheme = createTheme;

package/theme/create-typography.d.ts

@@ -0,0 +1,6 @@
+import type { TypographyVariants as Typography, TypographyVariantsOptions as TypographyOptions } from '@mui/material/styles';
+import { ThemeTokens } from './tokens';
+export declare type FontWeightKey = 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+export declare type ITypography = Typography;
+export declare type ITypographyOptions = TypographyOptions;
+export declare const createTypography: (overrides: TypographyOptions | undefined, tokens: ThemeTokens) => TypographyOptions;

package/theme/create-typography.js

@@ -0,0 +1,55 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTypography = void 0;
+var utils_1 = require("@mui/utils");
+var createTypography = function (overrides, tokens) {
+    if (overrides === void 0) { overrides = {}; }
+    var fontFamily = overrides.fontFamily || tokens.type_body_100.fontFamily;
+    var fontFamilyMonospace = overrides.fontFamilyMonospace || tokens.type_global_monospace_10.fontFamily;
+    var fontWeightMapping = {
+        light: overrides.fontWeightLight || 300,
+        regular: overrides.fontWeightRegular || 400,
+        medium: overrides.fontWeightMedium || 500,
+        semibold: overrides.fontWeightSemibold || 600,
+        bold: overrides.fontWeightBold || 700,
+    };
+    var defaultOptions = {
+        fontWeightMedium: fontWeightMapping.medium,
+        fontWeightBold: fontWeightMapping.bold,
+        fontWeightLight: fontWeightMapping.light,
+        fontWeightRegular: fontWeightMapping.regular,
+        fontWeightSemibold: fontWeightMapping.semibold,
+        fontFamily: fontFamily,
+        fontFamilyMonospace: fontFamilyMonospace,
+        h1: tokens.type_heading_500,
+        h2: tokens.type_heading_400,
+        h3: tokens.type_heading_300,
+        h4: tokens.type_heading_200,
+        h5: tokens.type_heading_100,
+        h6: tokens.type_body_300_emphasis,
+        subtitle1: tokens.type_body_200_emphasis,
+        subtitle2: tokens.type_body_100_emphasis,
+        body1: tokens.type_body_200,
+        body2: tokens.type_body_100,
+        button: __assign(__assign({}, tokens.type_preset_button), { textTransform: 'capitalize' }),
+        caption: tokens.type_preset_caption,
+        overline: tokens.type_preset_overline,
+        code1: tokens.type_code_100,
+        code2: tokens.type_code_50,
+        label: tokens.type_preset_form_label,
+        input: tokens.type_preset_form_text,
+    };
+    return (0, utils_1.deepmerge)(defaultOptions, overrides);
+};
+exports.createTypography = createTypography;

package/theme/default-theme.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultTheme: import("@mui/material").Theme;
+export declare const defaultQuantumTheme: import("./create-quantum-theme").IQuantumTheme;

package/theme/default-theme.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultQuantumTheme = exports.defaultTheme = void 0;
+var quantum_tokens_1 = require("@auth0/quantum-tokens");
+var create_quantum_theme_1 = require("./create-quantum-theme");
+var create_theme_1 = require("./create-theme");
+exports.defaultTheme = (0, create_theme_1.createTheme)();
+exports.defaultQuantumTheme = (0, create_quantum_theme_1.createQuantumTheme)({
+    tokens: quantum_tokens_1.auth0,
+});

package/theme/index.d.ts

@@ -0,0 +1,12 @@
+export { createTheme } from './create-theme';
+export type { ITheme, IThemeOptions } from './create-theme';
+export type { PaletteColor, IPalette, IPaletteOptions, PickColorType, StatusColorType, ThemeColorType, BaseColorType, PaletteMode, } from './create-palette';
+export { useTheme } from './use-theme';
+export { ThemeProvider } from './theme-provider';
+export type { IThemeProviderProps } from './theme-provider';
+export { defaultTheme } from './default-theme';
+export type { ILayout, ILayoutOptions } from './create-layout';
+export { shadeMap } from './colors';
+export type { ColorName, Shade } from './colors';
+export { createQuantumTheme } from './create-quantum-theme';
+export type { IQuantumTheme, IQuantumThemeOptions } from './create-quantum-theme';