carbon-react 104.53.0 → 104.53.3

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

@@ -1,8 +1,6 @@
 import tokens from "@sage/design-tokens/js/base/common";
-import atOpacity from "../../utils/at-opacity";
 export const space = ["var(--spacing000)", "var(--spacing100)", "var(--spacing200)", "var(--spacing300)", "var(--spacing400)", "var(--spacing500)", "var(--spacing600)", "var(--spacing700)", "var(--spacing800)", "var(--spacing900)", "var(--spacing1000)"];
 export default (palette => {
-  const baseWithOpacity = atOpacity(palette.productGreen);
   return {
     name: "base",
     palette,
@@ -10,321 +8,23 @@ export default (palette => {
     space,
     colors: {
       // main
-      base: palette.productGreen,
       primary: palette.genericGreenShade(15),
       secondary: palette.genericGreenShade(35),
       tertiary: palette.genericGreenShade(55),
-      brand: palette.brilliantGreen,
-      disabled: palette.genericGreenTint(40),
-      whiteMix: palette.genericGreenTint(90),
-      withOpacity: baseWithOpacity(0.55),
       loadingBarBackground: palette.genericGreenTint(70),
       // generic
-      black: "#000000",
-      slate: "#003349",
       white: "#FFFFFF",
-      // element
-      border: palette.slateTint(40),
-      dashedBorder: "#99ADB6",
-      dashedButtonText: "rgba(0, 0, 0, 0.9)",
-      dashedHoverBackground: "#CCD6DB",
-      focusedIcon: palette.slateTint(20),
-      focusedLinkBackground: palette.goldTint(50),
-      previewBackground: palette.slateTint(75),
-      hoveredTabKeyline: palette.genericGreenTint(30),
       // status
       error: palette.errorRed,
       focus: palette.gold,
       info: palette.productBlueShade(3),
-      success: palette.brilliantGreenShade(20),
       warning: palette.carrotOrange,
       destructive: {
         hover: palette.errorRedShade(20)
-      },
-      asterisk: palette.errorRed
-    },
-    progressTracker: {
-      background: palette.slateTint(90),
-      innerBackground: palette.slateTint(40),
-      trafficNeutral: palette.productBlueShade(3)
-    },
-    anchorNavigation: {
-      divider: palette.slateTint(80),
-      navItemHoverBackground: palette.slateTint(90)
-    },
-    accordion: {
-      border: palette.slateTint(80),
-      background: palette.slateTint(90)
-    },
-    tileSelect: {
-      border: palette.slateTint(75),
-      disabledBackground: palette.slateTint(90),
-      hoverBackground: palette.slateTint(95),
-      descriptionColor: palette.blackOpacity(0.55),
-      disabledText: palette.blackOpacity(0.3)
-    },
-    batchSelection: {
-      lightTheme: palette.slateTint(70)
-    },
-    hr: {
-      background: palette.slateTint(80)
-    },
-    editor: {
-      border: palette.slateTint(40),
-      counter: "rgba(0,0,0,0.55)",
-      placeholder: "rgba(0,0,0,0.30)",
-      button: {
-        hover: palette.slateTint(80)
-      },
-      toolbar: {
-        background: palette.slateTint(95)
-      }
-    },
-    menu: {
-      focus: palette.slateTint(95),
-      divider: palette.slateTint(90),
-      itemColor: palette.blackOpacity(0.9),
-      itemColorDisabled: palette.blackOpacity(0.3),
-      light: {
-        text: "#000000",
-        background: palette.slateTint(90),
-        selected: palette.slateTint(85),
-        divider: palette.slateTint(80),
-        alternate: palette.slateTint(90),
-        title: palette.slateTint(25),
-        submenuBackground: "#FFFFFF",
-        searchIcon: palette.slateTint(55),
-        searchIconHover: palette.slateTint(75)
-      },
-      dark: {
-        text: "#FFFFFF",
-        background: palette.slate,
-        divider: palette.slateTint(10),
-        submenuBackground: palette.slateShade(50),
-        selected: palette.slateTint(10),
-        alternate: palette.slate,
-        title: palette.slateTint(60),
-        searchIcon: palette.slateTint(55),
-        searchIconHover: palette.slateTint(75)
-      },
-      black: {
-        text: "#FFFFFF",
-        background: palette.black,
-        submenuBackground: palette.black,
-        selected: palette.blackTint(15),
-        divider: palette.blackTint(15),
-        alternate: palette.blackTint(10),
-        title: palette.slateTint(60),
-        searchIcon: palette.slateTint(55),
-        searchIconHover: palette.slateTint(75)
-      },
-      white: {
-        text: "#000000",
-        background: "#FFFFFF",
-        selected: palette.slateTint(95),
-        divider: palette.slateTint(70),
-        alternate: palette.slateTint(80),
-        submenuBackground: palette.slateTint(90),
-        title: palette.slateTint(25),
-        searchIcon: palette.slateTint(55),
-        searchIconHover: palette.slateTint(75)
       }
     },
-    card: {
-      footerBackground: palette.slateTint(95),
-      footerBorder: palette.slateTint(80)
-    },
-    carousel: {
-      activeSelectorBackground: palette.slateTint(40),
-      inactiveSelectorBackground: palette.slateTint(80)
-    },
-    flatTable: {
-      light: {
-        headerBackground: palette.slateTint(80),
-        border: palette.slateTint(70)
-      },
-      dark: {
-        headerBackground: palette.slateTint(20),
-        border: palette.slateTint(40)
-      },
-      subRow: {
-        background: palette.slateTint(98),
-        shadow: "rgba(0, 20, 29, 0.1)"
-      },
-      transparentWhite: {
-        headerBackground: "#fff",
-        border: "#fff"
-      },
-      transparentBase: {
-        headerBackground: palette.slateTint(95),
-        border: palette.slateTint(95)
-      },
-      drawerSidebar: {
-        headerBackground: palette.slateTint(93),
-        hover: palette.slateTint(85),
-        highlighted: palette.slateTint(80),
-        selected: palette.slateTint(70)
-      },
-      hover: palette.slateTint(95),
-      headerIconColor: palette.slateTint(60),
-      headerAlternativeBackground: palette.slateTint(10),
-      selected: palette.slateTint(85),
-      highlighted: palette.slateTint(90)
-    },
-    help: {
-      color: palette.blackOpacity(0.65),
-      hover: palette.blackOpacity(0.9)
-    },
-    text: {
-      color: palette.blackOpacity(0.9),
-      placeholder: palette.blackOpacity(0.55),
-      size: "14px"
-    },
-    readOnly: {
-      textboxBackground: palette.slateTint(98),
-      textboxBorder: palette.slateTint(80),
-      textboxText: palette.blackOpacity(0.74)
-    },
-    content: {
-      secondaryColor: palette.slateTint(40)
-    },
     disabled: {
-      border: palette.slateTint(80),
-      button: palette.slateTint(90),
-      disabled: palette.blackOpacity(0.55),
-      input: palette.slateTint(95),
-      text: palette.blackOpacity(0.3),
-      buttonText: "rgba(0,0,0,.2)",
-      background: palette.slateTint(90),
-      switch: palette.slateTint(89.5)
-    },
-    draggableItem: {
-      border: palette.slateTint(90)
-    },
-    checkable: {
-      checked: "rgba(0,0,0,0.90)"
-    },
-    table: {
-      primary: palette.slateTint(95),
-      secondary: palette.slateTint(80),
-      tertiary: palette.slateTint(10),
-      header: palette.slateTint(20),
-      hover: palette.slateTint(90),
-      selected: palette.slateTint(85),
-      zebra: palette.slateTint(98),
-      dragging: palette.slateTint(90)
-    },
-    drawer: {
-      background: palette.slateTint(93),
-      divider: palette.slateTint(85)
-    },
-    pager: {
-      active: "rgba(0,0,0,0.90)",
-      disabled: "rgba(0,0,0,0.3)",
-      alternate: palette.slateTint(93)
-    },
-    icon: {
-      default: "rgba(0,0,0,0.65)",
-      defaultHover: "rgba(0,0,0,0.90)",
-      onLightBackground: palette.slateTint(40),
-      onLightBackgroundHover: palette.slateTint(20),
-      disabled: "rgba(0,0,0,0.30)"
-    },
-    popoverContainer: {
-      iconColor: "rgba(0,0,0,0.90)"
-    },
-    navigationBar: {
-      light: {
-        background: palette.slateTint(90),
-        borderBottom: palette.slateTint(85)
-      },
-      dark: {
-        background: "#003349",
-        borderBottom: "#003349"
-      },
-      black: {
-        background: palette.blackOpacity(1)
-      },
-      white: {
-        borderBottom: palette.slateTint(85)
-      }
-    },
-    numeralDate: {
-      passive: "#668592",
-      error: "#C7384F"
-    },
-    portrait: {
-      border: palette.slateTint(50),
-      background: palette.slateTint(95),
-      initials: "rgba(0,0,0,0.65)"
-    },
-    picklist: {
-      locked: palette.slateTint(95),
-      lockedContent: palette.slateTint(45),
-      lockedText: palette.blackOpacity(0.6)
-    },
-    pill: {
-      neutral: palette.slateTint(30),
-      warning: palette.carrotOrangeTint(20),
-      neutralBackgroundFocus: palette.slateTint(10),
-      warningButtonFocus: palette.carrotOrange,
-      errorButtonFocus: palette.errorRedShade(20)
-    },
-    search: {
-      active: palette.gold,
-      button: "#255BC7",
-      passive: palette.slateTint(45),
-      icon: palette.slateTint(55),
-      iconHover: palette.slateTint(20),
-      searchActive: "#668592",
-      darkVariantPlaceholder: palette.slateTint(55),
-      darkVariantBorder: palette.slateTint(55),
-      darkVariantText: "#FFFFFF",
-      iconDarkVariant: palette.slateTint(55),
-      iconDarkVariantHover: palette.slateTint(75)
-    },
-    select: {
-      border: "#bfccd2",
-      selected: palette.slateTint(95),
-      optionHeader: palette.blackOpacity(0.55),
-      tableHeaderBorder: palette.slateTint(80)
-    },
-    shadows: {
-      depth1: "0 5px 5px 0 rgba(0,20,29,0.2), 0 10px 10px 0 rgba(0,20,29,0.1)",
-      depth2: "0 10px 20px 0 rgba(0,20,29,0.2), 0 20px 40px 0 rgba(0,20,29,0.1)",
-      depth3: "0 10px 30px 0 rgba(0,20,29,0.1), 0 30px 60px 0 rgba(0,20,29,0.1)",
-      depth4: "0 10px 40px 0 rgba(0,20,29,0.04), 0 50px 80px 0 rgba(0,20,29,0.1)",
-
-      /* no space after comma as it is stripped from the variable when used in the spec */
-      cards: "0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15)",
-      cardsIE: "0 3px 3px 0 rgba(0,20,29,0.2),0 2px 4px 0 rgba(0,20,29,0.15), 0 0 1px 0 rgba(0,20,29,0.15)"
-    },
-    stepSequence: {
-      completedText: palette.genericGreenShade(15)
-    },
-    switch: {
-      off: palette.slateTint(80),
-      offDisabled: palette.slateTint(90),
-      offHover: palette.slateTint(60),
-      on: palette.slateTint(20),
-      onDisabled: palette.slateTint(60),
-      onHover: palette.slateTint(0),
-      disabledFontColor: "rgba(0,0,0,0.30)"
-    },
-    tile: {
-      border: palette.slateTint(80),
-      footerBackground: palette.slateTint(95),
-      separator: palette.slateTint(90)
-    },
-    tab: {
-      background: palette.slateTint(80),
-      altHover: palette.slateTint(85)
-    },
-    editorLinkPreview: {
-      background: palette.slateTint(95),
-      hoverBackground: palette.slateTint(80),
-      border: palette.slateTint(90),
-      url: palette.slateTint(10)
+      background: palette.slateTint(90)
     },
     zIndex: {
       smallOverlay: 10,
@@ -348,8 +48,7 @@ export default (palette => {
         colorsSemanticNegative500: this.colors.error,
         colorsSemanticNegative600: this.colors.destructive.hover,
         colorsSemanticCaution500: this.colors.warning,
-        colorsSemanticInfo500: this.colors.info,
-        fontSizes100: this.text.size
+        colorsSemanticInfo500: this.colors.info
       };
     }
 

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

@@ -11,40 +11,22 @@ type BasePalette = Palette &
   };
 
 export interface Colors {
-  base: string;
   primary: string;
   secondary: string;
   tertiary: string;
-  brand: string;
-  disabled: string;
-  whiteMix: string;
-  withOpacity: string;
+  loadingBarBackground: 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 {
@@ -55,292 +37,8 @@ export interface ThemeObject {
 
   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;
-  };
-
-  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: {

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

@@ -1,18 +1,11 @@
 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;

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

@@ -2,18 +2,11 @@ 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 {