@box/blueprint-web 5.31.3

package/lib-esm/basics/small-list-item/small-list.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseGridList } from '../../util-components/base-grid-list-item/base-grid-list.js';
+
+const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef) {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(BaseGridList, {
+    ...rest,
+    ref: forwardedRef,
+    layout: "small-list",
+    children: children
+  });
+});
+
+export { SmallList };

package/lib-esm/basics/small-list-item/types.d.ts

@@ -0,0 +1,6 @@
+import { type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../../util-components/base-grid-list-item';
+export type SmallListHeaderProps = BaseGridListHeaderProps;
+export type SmallListThumbnailProps = BaseGridListThumbnailProps;
+export type SmallListSubtitleProps = BaseGridListSubtitleProps;
+export type SmallListProps = Omit<BaseGridListProps, 'layout'>;
+export type SmallListItemProps = BaseGridListItemProps;

package/lib-esm/basics/text-input/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './text-input';
+export { type TextInputProps } from './types';

package/lib-esm/basics/text-input/text-input.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+/**
+ * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
+ *
+ * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ */
+export declare const TextInput: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & {
+    label: string;
+    type?: "text" | undefined;
+    hideLabel?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    error?: import("react").ReactNode;
+} & Required<Pick<{
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}, keyof {
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}>> & Omit<{
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}, keyof {
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
+} & {
+    label: string;
+    type?: "text" | undefined;
+    hideLabel?: boolean | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+    error?: import("react").ReactNode;
+} & Partial<Record<keyof {
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}, never>> & Omit<{
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}, keyof {
+    loading?: boolean | undefined;
+    loadingAriaLabel?: string | undefined;
+}>, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
+export default TextInput;

package/lib-esm/basics/text-input/text-input.js

@@ -0,0 +1,77 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
+import clsx from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
+import { InlineError } from '../../primitives/inline-error/inline-error.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { useUniqueId } from '../../utils/useUniqueId.js';
+import styles from './text-input.module.js';
+
+/**
+ * This extends a default HTML &lt;input/&gt; and accepts the same props as well as some custom ones listed below.<br/>
+ *
+ * **IMPORTANT **: Since input uses tooltip to display error message, it must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ */
+const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    label,
+    type = 'text',
+    disabled,
+    hideLabel,
+    error,
+    loading = false,
+    loadingAriaLabel,
+    required = false,
+    ...rest
+  } = props;
+  const inputRef = useRef(null);
+  const inputId = useUniqueId('input-');
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+  const hasError = !!error && !disabled;
+  const isLoading = !disabled && loading && loadingAriaLabel;
+  return jsxs(Fragment, {
+    children: [jsxs("div", {
+      className: clsx([styles.textInputContainer], {
+        [styles.disabled]: disabled,
+        [styles.error]: hasError
+      }, className),
+      children: [jsx("label", {
+        className: clsx([styles.label], {
+          [styles.hidden]: hideLabel
+        }),
+        htmlFor: inputId,
+        children: hideLabel ? jsx(VisuallyHidden, {
+          children: label
+        }) : label
+      }), jsx("input", {
+        ...rest,
+        ref: useForkRef(inputRef, forwardedRef),
+        "aria-invalid": hasError,
+        "aria-required": required,
+        className: clsx([styles.textInput], {
+          [styles.error]: hasError,
+          [styles.loading]: isLoading
+        }),
+        disabled: disabled,
+        id: inputId,
+        required: required,
+        type: type
+      }), isLoading && jsx(LoadingIndicator, {
+        "aria-label": loadingAriaLabel,
+        className: styles.loadingIndicator,
+        onClick: focusInput
+      })]
+    }), jsx(InlineError, {
+      className: styles.inlineError,
+      children: error
+    })]
+  });
+});
+TextInput.displayName = 'TextInput';
+
+export { TextInput, TextInput as default };

package/lib-esm/basics/text-input/text-input.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"textInputContainer":"text-input-module_textInputContainer__UJn59","label":"text-input-module_label__rQIWV","hidden":"text-input-module_hidden__mVumP","textInput":"text-input-module_textInput__i84NX","error":"text-input-module_error__8-X6N","loading":"text-input-module_loading__2bK9g","loadingIndicator":"text-input-module_loadingIndicator__QF0cs","disabled":"text-input-module_disabled__FFmmn","inlineError":"text-input-module_inlineError__mQlWE"};
+
+export { styles as default };

package/lib-esm/basics/text-input/types.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { type RequireAllOrNone } from 'type-fest';
+type Loading = {
+    /** When true input is renedered with loading indicator. When this is true `loadingAriaLabel` must also be provided. */
+    loading?: boolean;
+    /** The aria-label for the loading indicator. */
+    loadingAriaLabel?: string;
+};
+export type TextInputProps = React.ComponentPropsWithRef<'input'> & {
+    /** The label for text input */
+    label: string;
+    /** Input type, defaults to 'text' */
+    type?: 'text';
+    /** When true label text is hidden */
+    hideLabel?: boolean;
+    /** When true prevents user interaction with input */
+    disabled?: boolean;
+    /** When true it indicates input field must be filled out */
+    required?: boolean;
+    /** Content of error message */
+    error?: React.ReactNode;
+} & RequireAllOrNone<Loading, keyof Loading>;
+export {};

package/lib-esm/branding-styles/branding-styles.d.ts

@@ -0,0 +1,2 @@
+import { type BrandingStylesProps } from './types';
+export declare const BrandingStyles: ({ brandColor }: BrandingStylesProps) => null;

package/lib-esm/branding-styles/branding-styles.js

@@ -0,0 +1,10 @@
+import { useCustomBranding } from './useCustomBranding.js';
+
+const BrandingStyles = ({
+  brandColor
+}) => {
+  useCustomBranding(brandColor);
+  return null;
+};
+
+export { BrandingStyles };

package/lib-esm/branding-styles/index.d.ts

@@ -0,0 +1,3 @@
+export * from './branding-styles';
+export * from './types';
+export * from './useCustomBranding';

package/lib-esm/branding-styles/types.d.ts

@@ -0,0 +1,4 @@
+export interface BrandingStylesProps {
+    /** Color value used for generating theme color palette */
+    brandColor: string;
+}

package/lib-esm/branding-styles/useCustomBranding.d.ts

@@ -0,0 +1 @@
+export declare const useCustomBranding: (brandColor: string) => void;

package/lib-esm/branding-styles/useCustomBranding.js

@@ -0,0 +1,40 @@
+import { BoxBlue100, Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import { useEnhancedEffect } from '../utils/useEnhancedEffect.js';
+import { createTheme } from './utils/createTheme.js';
+
+const useCustomBranding = brandColor => {
+  useEnhancedEffect(() => {
+    const buieTheme = createTheme(brandColor);
+    const isBrandingEnabled = brandColor.toLowerCase() !== BoxBlue100.toLowerCase();
+    // Create a new stylsheet, insert it into the DOM and add style rules
+    const stylesheet = document.createElement('style');
+    // add data-blueprint property for debugging
+    stylesheet.dataset.blueprint = '';
+    document.head.appendChild(stylesheet);
+    stylesheet.sheet?.insertRule(`:root {
+                /* Button branding tokens */
+                --text-text-brand-on-color: ${buieTheme.primary.buttonForeground};
+                --surface-surface-brand: ${buieTheme.primary.buttonBackground};
+                --surface-surface-brand-hover: ${buieTheme.primary.buttonBackgroundHover};
+                --surface-surface-brand-pressed: ${buieTheme.primary.buttonBackgroundActive};
+                /* BUIE Theme has no token for disabled and busy button. Setting to default TODO: Confirm with designers */
+                --surface-surface-brand-disabled: ${buieTheme.primary.buttonBackground};
+                --surface-surface-brand-busy: ${buieTheme.primary.buttonBackground};
+                  
+                /* Nav branding tokens */
+                --surface-nav-surface-brand-selected-focus: ${buieTheme.primary.backgroundActive};
+                --surface-nav-surface-brand-selected: ${buieTheme.primary.backgroundActive};
+                --surface-nav-surface-brand-focus: ${buieTheme.primary.backgroundActive};
+                --surface-nav-surface-brand-hover: ${buieTheme.primary.backgroundHover};
+                --surface-nav-surface-brand: ${buieTheme.primary.background};
+
+                /* Illustrations branding tokens */
+                --surface-illustration-surface-box-neutral: ${isBrandingEnabled ? Gray65 : BoxBlue100}
+              }`, 0);
+    return () => {
+      document.head.removeChild(stylesheet);
+    };
+  }, [brandColor]);
+};
+
+export { useCustomBranding };

package/lib-esm/branding-styles/utils/createTheme.d.ts

@@ -0,0 +1,69 @@
+export declare const THEME_VERY_DARK = "vDark";
+export declare const THEME_DARK = "dark";
+export declare const THEME_MID_DARK = "midDark";
+export declare const THEME_MIDTONE = "midTone";
+export declare const THEME_MID_LIGHT = "midLight";
+export declare const THEME_VERY_LIGHT = "vLight";
+export declare const MIN_CONTRAST = 4.5;
+declare function createTheme(colorKey: string): {
+    base: {
+        background: string;
+        backgroundHover: string;
+        backgroundActive: string;
+        foreground: string;
+        border: string;
+        buttonForeground: string;
+        buttonBackground: string;
+        buttonBackgroundHover: string;
+        buttonBackgroundActive: string;
+        buttonBorder: string;
+        buttonBorderHover: string;
+        buttonBorderActive: string;
+        progressBarBackground: string;
+        scrollShadowRgba: string;
+        gridUnitPx: number;
+    };
+    primary: {
+        background: string;
+        backgroundActive: string;
+        backgroundGradient: string;
+        backgroundHover: string;
+        border: string;
+        buttonBackground: string;
+        buttonBackgroundActive: string;
+        buttonBackgroundHover: string;
+        buttonBorder: string;
+        buttonBorderActive: string;
+        buttonBorderHover: string;
+        buttonForeground: string;
+        foreground: string;
+        progressBarBackground: string;
+        scrollShadowRgba: string;
+    };
+    modes: {
+        admin: {};
+        dark: {};
+    };
+} & {
+    primary: {
+        _debug: {
+            colorRange: string | undefined;
+        };
+        background: any;
+        backgroundHover: any;
+        backgroundActive: any;
+        backgroundGradient: any;
+        foreground: any;
+        border: any;
+        buttonForeground: any;
+        buttonBackground: any;
+        buttonBackgroundHover: any;
+        buttonBackgroundActive: any;
+        buttonBorder: any;
+        buttonBorderHover: any;
+        buttonBorderActive: any;
+        progressBarBackground: any;
+        scrollShadowRgba: any;
+    };
+};
+export { createTheme };

package/lib-esm/branding-styles/utils/createTheme.js

@@ -0,0 +1,167 @@
+import Color from 'color';
+import mapValues from 'lodash/mapValues';
+import merge from 'lodash/merge';
+import method from 'lodash/method';
+import theme from './theme.js';
+import { white, black, bdlGray10, bdlGray, bdlGray80, bdlGray65, bdlGray50 } from './variables.js';
+
+/* eslint-disable no-restricted-syntax */
+/* ----------------- Theme ---------------------------*/
+const THEME_VERY_DARK = 'vDark';
+const THEME_DARK = 'dark';
+const THEME_MID_DARK = 'midDark';
+const THEME_MIDTONE = 'midTone';
+const THEME_MID_LIGHT = 'midLight';
+const THEME_VERY_LIGHT = 'vLight';
+// When converting from rgb/hsl to hex there is potential for
+// flattening of the color space, so we add an offset factor to account for it.
+const OFFSET_FACTOR = 0.05;
+const MIN_CONTRAST = 4.5;
+// The yiq coefficients in the color library are incorrect
+// http://poynton.ca/notes/colour_and_gamma/ColorFAQ.html#RTFToC9
+function getYiq(color) {
+  const rgb = Color(color).rgb().array();
+  return (rgb[0] * 2126 + rgb[1] * 7152 + rgb[2] * 722) / 10000;
+}
+function adjustLightness(color, amount) {
+  const lightness = color.lightness();
+  return color.lightness(lightness + amount);
+}
+// Given a colorKey, output an accessible Box color palette
+function createTheme(colorKey) {
+  if (!colorKey) {
+    throw new Error('Color key is undefined');
+  }
+  const colorKeyObj = Color(colorKey);
+  const colorKeyYiq = getYiq(colorKey);
+  const colorKeyLightness = colorKeyObj.lightness();
+  const whiteTextContrast = colorKeyObj.contrast(Color(white));
+  const blackTextContrast = colorKeyObj.contrast(Color(black));
+  // Take the greater contrasting foreground color
+  const foreground = whiteTextContrast > blackTextContrast ? white : black;
+  const foregroundObj = Color(foreground);
+  //  vDark dark    midDark   midtone   midLight  vLight
+  // |----|-----|-----------|----|----|-----------|----|
+  // 0    4     20         118  128  168         235  255
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const colorMap = {
+    [THEME_VERY_DARK]: {
+      yiqRange: [0, 4],
+      modifiers: {
+        active: 15,
+        gradient: 10,
+        hover: 10
+      }
+    },
+    [THEME_DARK]: {
+      yiqRange: [4, 20],
+      modifiers: {
+        active: 8,
+        gradient: 5,
+        hover: 4
+      }
+    },
+    [THEME_MID_DARK]: {
+      yiqRange: [20, 118],
+      modifiers: {
+        active: -8,
+        gradient: -5,
+        hover: 4
+      }
+    },
+    [THEME_MIDTONE]: {
+      yiqRange: [118, 168],
+      modifiers: {
+        active: -7,
+        activeInverse: 9,
+        gradient: -7,
+        hover: 7,
+        hoverInverse: -4
+      }
+    },
+    [THEME_MID_LIGHT]: {
+      yiqRange: [168, 235],
+      modifiers: {
+        active: 15,
+        gradient: -10,
+        hover: 10
+      }
+    },
+    [THEME_VERY_LIGHT]: {
+      yiqRange: [235, 256],
+      lightnessThreshold: 90,
+      modifiers: {
+        active: -8,
+        gradient: -5,
+        hover: -4
+      }
+    }
+  };
+  // Filter down the color map to the object that's in the proper YIQ range
+  const colorRange = Object.keys(colorMap).find(key => colorKeyYiq >= colorMap[key].yiqRange[0] && colorKeyYiq < colorMap[key].yiqRange[1] || colorMap[key].lightnessThreshold && colorKeyLightness >= colorMap[key].lightnessThreshold);
+  const colorRangeConfig = {
+    ...colorMap[colorRange || THEME_MIDTONE]
+  };
+  // Modify the primary colorKey with the associated modifiers from the filtered map
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const modifiedColors = {};
+  for (const [key, value] of Object.entries(colorRangeConfig.modifiers)) {
+    // $FlowFixMe
+    modifiedColors[key] = adjustLightness(colorKeyObj, value);
+  }
+  // If the color is too extreme on either end of the spectrum we need to change our rules.
+  const exceedsLightThreshold = colorRange === THEME_VERY_LIGHT || colorRange === THEME_MID_LIGHT;
+  const exceedsDarkThreshold = colorRange === THEME_VERY_DARK || colorRange === THEME_DARK;
+  // Light or dark isn't sufficient for determining how the secondary or accent colors should
+  // be calculated. In addition to that check, we will check the yiq value of the color to ensure
+  // the colorKey is not on the edges of the spectrum.
+  const hoverContrast = modifiedColors.hover.contrast(foregroundObj);
+  // If contrast has reached 21, we have hit the end of the spectrum and want to invert.
+  const hover = hoverContrast >= MIN_CONTRAST + OFFSET_FACTOR && hoverContrast !== 21 ? modifiedColors.hover : modifiedColors.hoverInverse || adjustLightness(colorKeyObj, -colorRangeConfig.modifiers.hover);
+  const activeContrast = modifiedColors.active.contrast(foregroundObj);
+  const active = activeContrast >= MIN_CONTRAST + OFFSET_FACTOR && activeContrast !== 21 ? modifiedColors.active : modifiedColors.activeInverse || adjustLightness(colorKeyObj, -colorRangeConfig.modifiers.active);
+  let scrollShadowRgba = 'rgba(0, 0, 0, 0.12)';
+  if (exceedsLightThreshold) {
+    scrollShadowRgba = 'rgba(0, 0, 0, 0.08)';
+  } else if (exceedsDarkThreshold) {
+    scrollShadowRgba = 'rgba(0, 0, 0, 0.4)';
+  }
+  // Converting color objects to hex for return value
+  const colorKeyHex = colorKeyObj.hex();
+  const hoverHex = hover.hex();
+  const activeHex = active.hex();
+  const gradientHex = modifiedColors.gradient.hex();
+  const colorValues = {
+    background: colorKeyHex,
+    backgroundHover: hoverHex,
+    backgroundActive: activeHex,
+    backgroundGradient: gradientHex,
+    foreground,
+    border: exceedsLightThreshold ? bdlGray10 : colorKeyHex,
+    // Button specific overrides. If the primary color is greater than the lightness threshold
+    // we will override the button styling to be a styling based on vars.bdlGray primary.
+    buttonForeground: exceedsLightThreshold ? white : foreground,
+    buttonBackground: exceedsLightThreshold ? bdlGray : colorKeyHex,
+    buttonBackgroundHover: exceedsLightThreshold ? bdlGray80 : hoverHex,
+    buttonBackgroundActive: exceedsLightThreshold ? bdlGray65 : activeHex,
+    buttonBorder: exceedsLightThreshold ? bdlGray : colorKeyHex,
+    buttonBorderHover: exceedsLightThreshold ? bdlGray80 : hoverHex,
+    buttonBorderActive: exceedsLightThreshold ? bdlGray65 : activeHex,
+    // ProgressBar overrides
+    progressBarBackground: exceedsLightThreshold ? bdlGray50 : hoverHex,
+    // Scroll effect overrides for scrollable themed elements
+    scrollShadowRgba
+  };
+  const dynamicTheme = {
+    // To avoid a mixture of casing, we force all values to lower
+    primary: {
+      ...mapValues(colorValues, method('toLowerCase')),
+      _debug: {
+        colorRange
+      }
+    }
+  };
+  return merge({}, theme, dynamicTheme);
+}
+
+export { MIN_CONTRAST, THEME_DARK, THEME_MIDTONE, THEME_MID_DARK, THEME_MID_LIGHT, THEME_VERY_DARK, THEME_VERY_LIGHT, createTheme };

package/lib-esm/branding-styles/utils/theme.d.ts

@@ -0,0 +1,41 @@
+declare const theme: {
+    base: {
+        background: string;
+        backgroundHover: string;
+        backgroundActive: string;
+        foreground: string;
+        border: string;
+        buttonForeground: string;
+        buttonBackground: string;
+        buttonBackgroundHover: string;
+        buttonBackgroundActive: string;
+        buttonBorder: string;
+        buttonBorderHover: string;
+        buttonBorderActive: string;
+        progressBarBackground: string;
+        scrollShadowRgba: string;
+        gridUnitPx: number;
+    };
+    primary: {
+        background: string;
+        backgroundActive: string;
+        backgroundGradient: string;
+        backgroundHover: string;
+        border: string;
+        buttonBackground: string;
+        buttonBackgroundActive: string;
+        buttonBackgroundHover: string;
+        buttonBorder: string;
+        buttonBorderActive: string;
+        buttonBorderHover: string;
+        buttonForeground: string;
+        foreground: string;
+        progressBarBackground: string;
+        scrollShadowRgba: string;
+    };
+    modes: {
+        admin: {};
+        dark: {};
+    };
+};
+export default theme;

package/lib-esm/branding-styles/utils/theme.js

@@ -0,0 +1,48 @@
+import { white, bdlGray05, bdlGray10, bdlGray, bdlGray30, black, bdlGray40, bdlGridUnitPx, bdlBoxBlue } from './variables.js';
+
+// Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
+const theme = {
+  base: {
+    background: white,
+    backgroundHover: bdlGray05,
+    backgroundActive: bdlGray10,
+    foreground: bdlGray,
+    border: bdlGray30,
+    buttonForeground: black,
+    buttonBackground: white,
+    buttonBackgroundHover: bdlGray05,
+    buttonBackgroundActive: bdlGray10,
+    buttonBorder: bdlGray30,
+    buttonBorderHover: bdlGray30,
+    buttonBorderActive: bdlGray30,
+    progressBarBackground: bdlGray40,
+    scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
+    gridUnitPx: parseInt(bdlGridUnitPx, 10) // grid unit in pixels (as number for computations)
+  },
+
+  // Primary or brand color
+  primary: {
+    background: bdlBoxBlue,
+    backgroundActive: '#004eac',
+    backgroundGradient: '#0055bc',
+    backgroundHover: '#006ae9',
+    border: bdlBoxBlue,
+    buttonBackground: bdlBoxBlue,
+    buttonBackgroundActive: '#004eac',
+    buttonBackgroundHover: '#006ae9',
+    buttonBorder: bdlBoxBlue,
+    buttonBorderActive: '#004eac',
+    buttonBorderHover: '#006ae9',
+    buttonForeground: white,
+    foreground: white,
+    progressBarBackground: '#006ae9',
+    scrollShadowRgba: 'rgba(0, 0, 0, 0.12)'
+  },
+  // TODO: Should be the same keys as the default if applicable
+  modes: {
+    admin: {},
+    dark: {}
+  }
+};
+
+export { theme as default };