@vodafone_de/brix-components 3.1.6 → 3.1.7

package/styles/createGetSelector.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
+var _default = theme => (colorScheme, css) => {
+  const root = theme.rootSelector || ':root';
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === 'class') {
+    rule = '.%s';
+  }
+  if (selector === 'data') {
+    rule = '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    rule = `[${selector}="%s"]`;
+  }
+  if (theme.defaultColorScheme === colorScheme) {
+    if (colorScheme === 'dark') {
+      const excludedVariables = {};
+      (0, _excludeVariablesFromRoot.default)(theme.cssVarPrefix).forEach(cssVar => {
+        excludedVariables[cssVar] = css[cssVar];
+        delete css[cssVar];
+      });
+      if (rule === 'media') {
+        return {
+          [root]: css,
+          [`@media (prefers-color-scheme: dark)`]: {
+            [root]: excludedVariables
+          }
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace('%s', colorScheme)]: excludedVariables,
+          [`${root}, ${rule.replace('%s', colorScheme)}`]: css
+        };
+      }
+      return {
+        [root]: {
+          ...css,
+          ...excludedVariables
+        }
+      };
+    }
+    if (rule && rule !== 'media') {
+      return `${root}, ${rule.replace('%s', String(colorScheme))}`;
+    }
+  } else if (colorScheme) {
+    if (rule === 'media') {
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          [root]: css
+        }
+      };
+    }
+    if (rule) {
+      return rule.replace('%s', String(colorScheme));
+    }
+  }
+  return root;
+};
+exports.default = _default;

package/styles/createMixins.d.ts

@@ -0,0 +1,32 @@
+import * as CSS from 'csstype';
+import { Breakpoints } from '@mui/system';
+export type NormalCssProperties = CSS.Properties<number | string>;
+export type Fontface = CSS.AtRule.FontFace & {
+  fallbacks?: CSS.AtRule.FontFace[];
+};
+
+/**
+ * Allows the user to augment the properties available
+ */
+export interface BaseCSSProperties extends NormalCssProperties {
+  '@font-face'?: Fontface | Fontface[];
+}
+export interface CSSProperties extends BaseCSSProperties {
+  // Allow pseudo selectors and media queries
+  // `unknown` is used since TS does not allow assigning an interface without
+  // an index signature to one with an index signature. This is to allow type safe
+  // module augmentation.
+  // Technically we want any key not typed in `BaseCSSProperties` to be of type
+  // `CSSProperties` but this doesn't work. The index signature needs to cover
+  // BaseCSSProperties as well. Usually you would use `BaseCSSProperties[keyof BaseCSSProperties]`
+  // but this would not allow assigning React.CSSProperties to CSSProperties
+  [k: string]: unknown | CSSProperties;
+}
+export interface Mixins {
+  toolbar: CSSProperties;
+  // ... use interface declaration merging to add custom mixins
+}
+export interface MixinsOptions extends Partial<Mixins> {
+  // ... use interface declaration merging to add custom mixin options
+}
+export default function createMixins(breakpoints: Breakpoints, mixins: MixinsOptions): Mixins;

package/styles/createMixins.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createMixins;
+function createMixins(breakpoints, mixins) {
+  return {
+    toolbar: {
+      minHeight: 56,
+      [breakpoints.up('xs')]: {
+        '@media (orientation: landscape)': {
+          minHeight: 48
+        }
+      },
+      [breakpoints.up('sm')]: {
+        minHeight: 64
+      }
+    },
+    ...mixins
+  };
+}

package/styles/createMuiStrictModeTheme.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createMuiStrictModeTheme;
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _createTheme = _interopRequireDefault(require("./createTheme"));
+function createMuiStrictModeTheme(options, ...args) {
+  return (0, _createTheme.default)((0, _deepmerge.default)({
+    unstable_strictMode: true
+  }, options), ...args);
+}

package/styles/createPalette.d.ts

@@ -0,0 +1,125 @@
+export type PaletteMode = 'light' | 'dark';
+export interface Color {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  A100: string;
+  A200: string;
+  A400: string;
+  A700: string;
+}
+export {};
+// use standalone interface over typeof colors/commons
+// to enable module augmentation
+export interface CommonColors {
+  black: string;
+  white: string;
+}
+export type ColorPartial = Partial<Color>;
+export interface TypeText {
+  primary: string;
+  secondary: string;
+  disabled: string;
+}
+export interface TypeAction {
+  active: string;
+  hover: string;
+  hoverOpacity: number;
+  selected: string;
+  selectedOpacity: number;
+  disabled: string;
+  disabledOpacity: number;
+  disabledBackground: string;
+  focus: string;
+  focusOpacity: number;
+  activatedOpacity: number;
+}
+export interface TypeBackground {
+  default: string;
+  paper: string;
+}
+export type TypeDivider = string;
+export type PaletteColorOptions = SimplePaletteColorOptions | ColorPartial;
+export interface SimplePaletteColorOptions {
+  light?: string;
+  main: string;
+  dark?: string;
+  contrastText?: string;
+}
+export interface PaletteColor {
+  light: string;
+  main: string;
+  dark: string;
+  contrastText: string;
+}
+export interface TypeObject {
+  text: TypeText;
+  action: TypeAction;
+  divider: TypeDivider;
+  background: TypeBackground;
+}
+export type PaletteTonalOffset = number | {
+  light: number;
+  dark: number;
+};
+export const light: TypeObject;
+export const dark: TypeObject;
+export interface PaletteAugmentColorOptions {
+  color: PaletteColorOptions;
+  mainShade?: number | string;
+  lightShade?: number | string;
+  darkShade?: number | string;
+  name?: number | string;
+}
+export interface Palette {
+  common: CommonColors;
+  mode: PaletteMode;
+  contrastThreshold: number;
+  tonalOffset: PaletteTonalOffset;
+  primary: PaletteColor;
+  secondary: PaletteColor;
+  error: PaletteColor;
+  warning: PaletteColor;
+  info: PaletteColor;
+  success: PaletteColor;
+  grey: Color;
+  text: TypeText;
+  divider: TypeDivider;
+  action: TypeAction;
+  background: TypeBackground;
+  getContrastText: (background: string) => string;
+  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
+}
+export interface Channels {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
+export interface PaletteOptions {
+  primary?: PaletteColorOptions;
+  secondary?: PaletteColorOptions;
+  error?: PaletteColorOptions;
+  warning?: PaletteColorOptions;
+  info?: PaletteColorOptions;
+  success?: PaletteColorOptions;
+  mode?: PaletteMode;
+  tonalOffset?: PaletteTonalOffset;
+  contrastThreshold?: number;
+  common?: Partial<CommonColors>;
+  grey?: ColorPartial;
+  text?: Partial<TypeText>;
+  divider?: string;
+  action?: Partial<TypeAction>;
+  background?: Partial<TypeBackground>;
+  getContrastText?: (background: string) => string;
+}
+export default function createPalette(palette: PaletteOptions): Palette;

package/styles/createPalette.js

@@ -0,0 +1,311 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dark = void 0;
+exports.default = createPalette;
+exports.light = void 0;
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
+var _colorManipulator = require("@mui/system/colorManipulator");
+var _common = _interopRequireDefault(require("../colors/common"));
+var _grey = _interopRequireDefault(require("../colors/grey"));
+var _purple = _interopRequireDefault(require("../colors/purple"));
+var _red = _interopRequireDefault(require("../colors/red"));
+var _orange = _interopRequireDefault(require("../colors/orange"));
+var _blue = _interopRequireDefault(require("../colors/blue"));
+var _lightBlue = _interopRequireDefault(require("../colors/lightBlue"));
+var _green = _interopRequireDefault(require("../colors/green"));
+function getLight() {
+  return {
+    // The colors used to style the text.
+    text: {
+      // The most important text.
+      primary: 'rgba(0, 0, 0, 0.87)',
+      // Secondary text.
+      secondary: 'rgba(0, 0, 0, 0.6)',
+      // Disabled text have even lower visual prominence.
+      disabled: 'rgba(0, 0, 0, 0.38)'
+    },
+    // The color used to divide different elements.
+    divider: 'rgba(0, 0, 0, 0.12)',
+    // The background colors used to style the surfaces.
+    // Consistency between these values is important.
+    background: {
+      paper: _common.default.white,
+      default: _common.default.white
+    },
+    // The colors used to style the action elements.
+    action: {
+      // The color of an active action like an icon button.
+      active: 'rgba(0, 0, 0, 0.54)',
+      // The color of an hovered action.
+      hover: 'rgba(0, 0, 0, 0.04)',
+      hoverOpacity: 0.04,
+      // The color of a selected action.
+      selected: 'rgba(0, 0, 0, 0.08)',
+      selectedOpacity: 0.08,
+      // The color of a disabled action.
+      disabled: 'rgba(0, 0, 0, 0.26)',
+      // The background color of a disabled action.
+      disabledBackground: 'rgba(0, 0, 0, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(0, 0, 0, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.12
+    }
+  };
+}
+const light = exports.light = getLight();
+function getDark() {
+  return {
+    text: {
+      primary: _common.default.white,
+      secondary: 'rgba(255, 255, 255, 0.7)',
+      disabled: 'rgba(255, 255, 255, 0.5)',
+      icon: 'rgba(255, 255, 255, 0.5)'
+    },
+    divider: 'rgba(255, 255, 255, 0.12)',
+    background: {
+      paper: '#121212',
+      default: '#121212'
+    },
+    action: {
+      active: _common.default.white,
+      hover: 'rgba(255, 255, 255, 0.08)',
+      hoverOpacity: 0.08,
+      selected: 'rgba(255, 255, 255, 0.16)',
+      selectedOpacity: 0.16,
+      disabled: 'rgba(255, 255, 255, 0.3)',
+      disabledBackground: 'rgba(255, 255, 255, 0.12)',
+      disabledOpacity: 0.38,
+      focus: 'rgba(255, 255, 255, 0.12)',
+      focusOpacity: 0.12,
+      activatedOpacity: 0.24
+    }
+  };
+}
+const dark = exports.dark = getDark();
+function addLightOrDark(intent, direction, shade, tonalOffset) {
+  const tonalOffsetLight = tonalOffset.light || tonalOffset;
+  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === 'light') {
+      intent.light = (0, _colorManipulator.lighten)(intent.main, tonalOffsetLight);
+    } else if (direction === 'dark') {
+      intent.dark = (0, _colorManipulator.darken)(intent.main, tonalOffsetDark);
+    }
+  }
+}
+function getDefaultPrimary(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _blue.default[200],
+      light: _blue.default[50],
+      dark: _blue.default[400]
+    };
+  }
+  return {
+    main: _blue.default[700],
+    light: _blue.default[400],
+    dark: _blue.default[800]
+  };
+}
+function getDefaultSecondary(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _purple.default[200],
+      light: _purple.default[50],
+      dark: _purple.default[400]
+    };
+  }
+  return {
+    main: _purple.default[500],
+    light: _purple.default[300],
+    dark: _purple.default[700]
+  };
+}
+function getDefaultError(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _red.default[500],
+      light: _red.default[300],
+      dark: _red.default[700]
+    };
+  }
+  return {
+    main: _red.default[700],
+    light: _red.default[400],
+    dark: _red.default[800]
+  };
+}
+function getDefaultInfo(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _lightBlue.default[400],
+      light: _lightBlue.default[300],
+      dark: _lightBlue.default[700]
+    };
+  }
+  return {
+    main: _lightBlue.default[700],
+    light: _lightBlue.default[500],
+    dark: _lightBlue.default[900]
+  };
+}
+function getDefaultSuccess(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _green.default[400],
+      light: _green.default[300],
+      dark: _green.default[700]
+    };
+  }
+  return {
+    main: _green.default[800],
+    light: _green.default[500],
+    dark: _green.default[900]
+  };
+}
+function getDefaultWarning(mode = 'light') {
+  if (mode === 'dark') {
+    return {
+      main: _orange.default[400],
+      light: _orange.default[300],
+      dark: _orange.default[700]
+    };
+  }
+  return {
+    main: '#ed6c02',
+    // closest to orange[800] that pass 3:1.
+    light: _orange.default[500],
+    dark: _orange.default[900]
+  };
+}
+function createPalette(palette) {
+  const {
+    mode = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
+  const primary = palette.primary || getDefaultPrimary(mode);
+  const secondary = palette.secondary || getDefaultSecondary(mode);
+  const error = palette.error || getDefaultError(mode);
+  const info = palette.info || getDefaultInfo(mode);
+  const success = palette.success || getDefaultSuccess(mode);
+  const warning = palette.warning || getDefaultWarning(mode);
+
+  // Use the same logic as
+  // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
+  // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
+  function getContrastText(background) {
+    const contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
+    if (process.env.NODE_ENV !== 'production') {
+      const contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
+      if (contrast < 3) {
+        console.error([`MUI: The contrast ratio of ${contrast}:1 for ${contrastText} on ${background}`, 'falls below the WCAG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
+      }
+    }
+    return contrastText;
+  }
+  const augmentColor = ({
+    color,
+    name,
+    mainShade = 500,
+    lightShade = 300,
+    darkShade = 700
+  }) => {
+    color = {
+      ...color
+    };
+    if (!color.main && color[mainShade]) {
+      color.main = color[mainShade];
+    }
+    if (!color.hasOwnProperty('main')) {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `The color object needs to have a \`main\` property or a \`${mainShade}\` property.` : (0, _formatMuiErrorMessage.default)(11, name ? ` (${name})` : '', mainShade));
+    }
+    if (typeof color.main !== 'string') {
+      throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : (0, _formatMuiErrorMessage.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
+    }
+    addLightOrDark(color, 'light', lightShade, tonalOffset);
+    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (!color.contrastText) {
+      color.contrastText = getContrastText(color.main);
+    }
+    return color;
+  };
+  let modeHydrated;
+  if (mode === 'light') {
+    modeHydrated = getLight();
+  } else if (mode === 'dark') {
+    modeHydrated = getDark();
+  }
+  if (process.env.NODE_ENV !== 'production') {
+    if (!modeHydrated) {
+      console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
+    }
+  }
+  const paletteOutput = (0, _deepmerge.default)({
+    // A collection of common colors.
+    common: {
+      ..._common.default
+    },
+    // prevent mutable object.
+    // The palette mode, can be light or dark.
+    mode,
+    // The colors used to represent primary interface elements for a user.
+    primary: augmentColor({
+      color: primary,
+      name: 'primary'
+    }),
+    // The colors used to represent secondary interface elements for a user.
+    secondary: augmentColor({
+      color: secondary,
+      name: 'secondary',
+      mainShade: 'A400',
+      lightShade: 'A200',
+      darkShade: 'A700'
+    }),
+    // The colors used to represent interface elements that the user should be made aware of.
+    error: augmentColor({
+      color: error,
+      name: 'error'
+    }),
+    // The colors used to represent potentially dangerous actions or important messages.
+    warning: augmentColor({
+      color: warning,
+      name: 'warning'
+    }),
+    // The colors used to present information to the user that is neutral and not necessarily important.
+    info: augmentColor({
+      color: info,
+      name: 'info'
+    }),
+    // The colors used to indicate the successful completion of an action that user triggered.
+    success: augmentColor({
+      color: success,
+      name: 'success'
+    }),
+    // The grey colors.
+    grey: _grey.default,
+    // Used by `getContrastText()` to maximize the contrast between
+    // the background and the text.
+    contrastThreshold,
+    // Takes a background color and returns the text color that maximizes the contrast.
+    getContrastText,
+    // Generate a rich color object.
+    augmentColor,
+    // Used by the functions below to shift a color's luminance by approximately
+    // two indexes within its tonal palette.
+    // E.g., shift from Red 500 to Red 300 or Red 700.
+    tonalOffset,
+    // The light and dark mode object.
+    ...modeHydrated
+  }, other);
+  return paletteOutput;
+}

package/styles/createStyles.d.ts

@@ -0,0 +1 @@
+export default function createStyles(styles: any): never;

package/styles/createStyles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createStyles;
+let warnedOnce = false;
+
+// To remove in v6
+function createStyles(styles) {
+  if (!warnedOnce) {
+    console.warn(['MUI: createStyles from @mui/material/styles is deprecated.', 'Please use @mui/styles/createStyles'].join('\n'));
+    warnedOnce = true;
+  }
+  return styles;
+}

package/styles/createTheme.d.ts

@@ -0,0 +1,14 @@
+import { CssVarsThemeOptions } from "./createThemeWithVars.js";
+import { Theme, ThemeOptions } from "./createThemeNoVars.js";
+export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars.js";
+/**
+ * Generate a theme base on the options received.
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @param args Deep merge the arguments with the about to be returned theme.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
+  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+},
+// cast type to skip module augmentation test
+...args: object[]): Theme;