carbon-react 104.34.0 → 104.36.0

package/esm/style/themes/base/index.d.ts

@@ -0,0 +1,376 @@
+import { Palette } from "../../palette";
+
+export interface ColorsWithHex {
+  [key: string]: string;
+}
+
+type BasePalette = Palette &
+  ColorsWithHex & {
+    blackOpacity: (opacity: number) => string;
+    whiteOpacity: (opacity: number) => string;
+  };
+
+export interface Colors {
+  base: string;
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  brand: string;
+  disabled: string;
+  whiteMix: string;
+  withOpacity: string;
+
+  // generic
+  black: "#000000";
+  slate: "#003349";
+  white: "#FFFFFF";
+
+  // element
+  border: string;
+  dashedBorder: string;
+  dashedButtonText: string;
+  dashedHoverBackground: string;
+  focusedIcon: string;
+  focusedLinkBackground: string;
+  previewBackground: string;
+  hoveredTabKeyline: string;
+
+  // status
+  error: string;
+  focus: string;
+  info: string;
+  success: string;
+  warning: string;
+  destructive: {
+    hover: string;
+  };
+  asterisk: string;
+}
+
+export interface ThemeObject {
+  name: string;
+  palette: BasePalette;
+  spacing: number;
+  space: number[];
+
+  colors: Colors;
+
+  anchorNavigation: {
+    divider: string;
+    navItemHoverBackground: string;
+  };
+
+  accordion: {
+    border: string;
+    background: string;
+  };
+
+  tileSelect: {
+    border: string;
+    disabledBackground: string;
+    hoverBackground: string;
+    descriptionColor: string;
+    disabledText: string;
+  };
+
+  batchSelection: {
+    lightTheme: string;
+  };
+
+  hr: {
+    background: string;
+  };
+
+  editor: {
+    border: string;
+    counter: string;
+    placeholder: string;
+    button: {
+      hover: string;
+    };
+    toolbar: {
+      background: string;
+    };
+  };
+
+  menu: {
+    focus: string;
+    divider: string;
+    itemColor: string;
+    itemColorDisabled: string;
+
+    light: {
+      background: string;
+      selected: string;
+      divider: string;
+      title: string;
+    };
+
+    dark: {
+      divider: string;
+      submenuBackground: string;
+      selected: string;
+      title: string;
+      searchIcon: string;
+      searchIconHover: string;
+    };
+  };
+
+  form: {
+    invalid: string;
+  };
+
+  card: {
+    footerBackground: string;
+    footerBorder: string;
+  };
+
+  carousel: {
+    activeSelectorBackground: string;
+    inactiveSelectorBackground: string;
+  };
+
+  flatTable: {
+    light: {
+      headerBackground: string;
+      border: string;
+    };
+
+    dark: {
+      headerBackground: string;
+      border: string;
+    };
+
+    subRow: {
+      background: string;
+      shadow: string;
+    };
+
+    transparentWhite: {
+      headerBackground: string;
+      border: string;
+    };
+
+    transparentBase: {
+      headerBackground: string;
+      border: string;
+    };
+
+    drawerSidebar: {
+      headerBackground: string;
+      hover: string;
+      highlighted: string;
+      selected: string;
+    };
+
+    hover: string;
+    headerIconColor: string;
+    selected: string;
+    highlighted: string;
+  };
+
+  help: {
+    color: string;
+    hover: string;
+  };
+
+  pod: {
+    border: string;
+    secondaryBackground: string;
+    tertiaryBackground: string;
+    tileBackground: string;
+    footerBackground: string;
+    hoverBackground: string;
+  };
+
+  text: {
+    color: string;
+    placeholder: string;
+    size: string;
+  };
+
+  readOnly: {
+    textboxBackground: string;
+    textboxBorder: string;
+    textboxText: string;
+  };
+
+  content: {
+    secondaryColor: string;
+  };
+
+  disabled: {
+    border: string;
+    button: string;
+    disabled: string;
+    input: string;
+    text: string;
+    buttonText: string;
+    background: string;
+    switch: string;
+  };
+
+  draggableItem: {
+    border: string;
+  };
+
+  checkable: {
+    checked: string;
+  };
+
+  table: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    header: string;
+    hover: string;
+    selected: string;
+    zebra: string;
+    dragging: string;
+  };
+
+  drawer: {
+    background: string;
+    divider: string;
+  };
+
+  pager: {
+    active: string;
+    disabled: string;
+    alternate: string;
+  };
+
+  icon: {
+    default: string;
+    defaultHover: string;
+    onLightBackground: string;
+    onLightBackgroundHover: string;
+    disabled: string;
+  };
+
+  popoverContainer: {
+    iconColor: string;
+  };
+
+  navigationBar: {
+    light: {
+      background: string;
+      borderBottom: string;
+    };
+    dark: {
+      background: string;
+      borderBottom: string;
+    };
+    black: {
+      background: string;
+    };
+    white: {
+      borderBottom: string;
+    };
+  };
+
+  numeralDate: {
+    passive: string;
+    error: string;
+  };
+
+  portrait: {
+    border: string;
+    background: string;
+    initials: string;
+  };
+
+  picklist: {
+    locked: string;
+    lockedContent: string;
+    lockedText: string;
+  };
+
+  pill: {
+    neutral: string;
+    warning: string;
+    neutralBackgroundFocus: string;
+    warningButtonFocus: string;
+    errorButtonFocus: string;
+  };
+
+  scrollbar: {
+    light: {
+      thumb: string;
+      track: string;
+    };
+
+    dark: {
+      thumb: string;
+      track: string;
+    };
+  };
+
+  search: {
+    active: string;
+    button: string;
+    passive: string;
+    icon: string;
+    iconHover: string;
+    searchActive: string;
+    darkVariantPlaceholder: string;
+    darkVariantBorder: string;
+    darkVariantText: string;
+    iconDarkVariant: string;
+    iconDarkVariantHover: string;
+  };
+
+  select: {
+    border: string;
+    selected: string;
+    optionHeader: string;
+    tableHeaderBorder: string;
+  };
+
+  shadows: {
+    depth1: string;
+    depth2: string;
+    depth3: string;
+    depth4: string;
+    cards: string;
+    cardsIE: string;
+  };
+
+  switch: {
+    off: string;
+  };
+
+  tile: {
+    border: string;
+    footerBackground: string;
+    separator: string;
+  };
+
+  tab: {
+    background: string;
+    altHover: string;
+  };
+
+  note: {
+    timeStamp: string;
+  };
+
+  zIndex: {
+    smallOverlay: number;
+    overlay: number;
+    popover: number;
+    nav: number;
+    modal: number;
+    header: number;
+    fullScreenModal: number;
+    notification: number;
+    aboveAll: number;
+  };
+}
+
+declare const baseTheme: ThemeObject;
+
+declare function mergeWithBase(configureTheme: ThemeObject): ThemeObject;
+
+export default baseTheme;
+export { mergeWithBase };

package/esm/style/themes/base/index.js

@@ -0,0 +1,23 @@
+import configureBase from "./base-theme.config";
+import baseColors from "../../color-config";
+import atOpacity from "../../utils/at-opacity";
+import { mergeDeep } from "../../utils/merge-deep";
+import generatePalette from "../../palette";
+import addHexSymbols from "../../utils/add-hex-symbols";
+const colors = generatePalette(baseColors);
+const colorsWithHex = addHexSymbols(baseColors);
+const blackOpacity = atOpacity("#000000");
+const whiteOpacity = atOpacity("#FFFFFF");
+const palette = { ...colors,
+  blackOpacity,
+  whiteOpacity,
+  ...colorsWithHex
+};
+const baseTheme = configureBase(palette);
+export default baseTheme;
+export const mergeWithBase = configureTheme => {
+  const themeToMergeWithBase = configureTheme(palette);
+  return { ...mergeDeep(baseTheme, themeToMergeWithBase),
+    palette
+  };
+};

package/esm/style/themes/index.d.ts

@@ -0,0 +1,11 @@
+import mintTheme from "./mint";
+import aegeanTheme from "./aegean";
+import sageTheme from "./sage";
+import { ThemeObject } from "./base";
+
+declare const carbonThemeList: ThemeObject[];
+
+export { default as noTheme } from "./none";
+export { default as baseTheme } from "./base";
+export { mintTheme, aegeanTheme, sageTheme };
+export { carbonThemeList };

package/esm/style/themes/index.js

@@ -0,0 +1,7 @@
+import mintTheme from "./mint";
+import aegeanTheme from "./aegean";
+import sageTheme from "./sage";
+export { default as noTheme } from "./none";
+export { default as baseTheme } from "./base";
+export { mintTheme, aegeanTheme, sageTheme };
+export const carbonThemeList = [mintTheme, aegeanTheme, sageTheme];

package/esm/style/themes/medium/index.d.ts

@@ -0,0 +1,2 @@
+declare var _default: import("../base").ThemeObject;
+export default _default;

package/esm/style/themes/medium/index.js

@@ -0,0 +1,7 @@
+import { aegeanTheme } from "..";
+export default (() => {
+  console.warn(`"Medium Theme" has been renamed to "Aegean".
+All references to that theme should be updated to:
+import { aegeanTheme } from "carbon-react/lib/style/themes"`);
+  return aegeanTheme;
+})();

package/esm/style/themes/mint/index.d.ts

@@ -0,0 +1,5 @@
+import { ThemeObject } from "../base";
+
+declare const mintTheme: ThemeObject;
+
+export default mintTheme;

package/esm/style/themes/mint/index.js

@@ -0,0 +1,3 @@
+import configureTheme from "./mint-theme.config";
+import { mergeWithBase } from "../base";
+export default mergeWithBase(configureTheme);

package/esm/style/themes/mint/mint-theme.config.d.ts

@@ -0,0 +1,32 @@
+declare function _default(palette: any): {
+    name: string;
+    colors: {
+        base: any;
+        primary: any;
+        secondary: any;
+        tertiary: any;
+        whiteMix: any;
+        hoveredTabKeyline: any;
+        disabled: any;
+        loadingBarBackground: any;
+    };
+    stepSequence: {
+        completedText: any;
+    };
+    readonly compatibility: {
+        colorsActionMajor500: any;
+        colorsActionMajor600: any;
+        colorsActionMajor150: any;
+        colorsComponentsMenuAutumnStandard600: any;
+        colorsComponentsMenuSpringChild600: any;
+        colorsComponentsMenuAutumnChild600: any;
+        colorsComponentsMenuSummerChild600: any;
+        colorsComponentsMenuWinterChild600: any;
+        colorsComponentsMenuSpringChildAlt600: any;
+        colorsComponentsMenuAutumnChildAlt600: any;
+        colorsComponentsMenuWinterChildAlt600: any;
+        colorsComponentsMenuSummerChildAlt600: any;
+        colorsBaseTheme: any;
+    };
+};
+export default _default;

package/esm/style/themes/mint/mint-theme.config.js

@@ -0,0 +1,37 @@
+export default (palette => {
+  return {
+    name: "mint",
+    colors: {
+      base: palette.productGreen,
+      primary: palette.productGreenShade(23.5),
+      secondary: palette.productGreenShade(41),
+      tertiary: palette.productGreenShade(61),
+      whiteMix: palette.productGreenTint(90),
+      hoveredTabKeyline: palette.productGreenTint(30),
+      disabled: palette.productGreenTint(40),
+      loadingBarBackground: palette.productGreenTint(70)
+    },
+    stepSequence: {
+      completedText: palette.productGreenShade(23)
+    },
+
+    get compatibility() {
+      return {
+        colorsActionMajor500: this.colors.primary,
+        colorsActionMajor600: this.colors.secondary,
+        colorsActionMajor150: this.colors.loadingBarBackground,
+        colorsComponentsMenuAutumnStandard600: this.colors.primary,
+        colorsComponentsMenuSpringChild600: this.colors.primary,
+        colorsComponentsMenuAutumnChild600: this.colors.primary,
+        colorsComponentsMenuSummerChild600: this.colors.primary,
+        colorsComponentsMenuWinterChild600: this.colors.primary,
+        colorsComponentsMenuSpringChildAlt600: this.colors.primary,
+        colorsComponentsMenuAutumnChildAlt600: this.colors.primary,
+        colorsComponentsMenuWinterChildAlt600: this.colors.primary,
+        colorsComponentsMenuSummerChildAlt600: this.colors.primary,
+        colorsBaseTheme: this.colors.primary
+      };
+    }
+
+  };
+});

package/esm/style/themes/none/index.d.ts

@@ -0,0 +1,5 @@
+import { ThemeObject } from "../base";
+
+declare const noneTheme: ThemeObject;
+
+export default noneTheme;

package/esm/style/themes/none/index.js

@@ -0,0 +1,3 @@
+import configureTheme from "./none-theme.config";
+import { mergeWithBase } from "../base";
+export default mergeWithBase(configureTheme);

package/esm/style/themes/none/none-theme.config.d.ts

@@ -0,0 +1,4 @@
+declare function _default(): {
+    name: string;
+};
+export default _default;

package/esm/style/themes/none/none-theme.config.js

@@ -0,0 +1,5 @@
+export default (() => {
+  return {
+    name: "none"
+  };
+});