carbon-react 104.53.0 → 104.53.3

package/lib/style/themes/base/base-theme.config.d.ts

@@ -5,316 +5,21 @@ declare function _default(palette: any): {
     spacing: number;
     space: string[];
     colors: {
-        base: any;
         primary: any;
         secondary: any;
         tertiary: any;
-        brand: any;
-        disabled: any;
-        whiteMix: any;
-        withOpacity: string;
         loadingBarBackground: any;
-        black: string;
-        slate: string;
         white: string;
-        border: any;
-        dashedBorder: string;
-        dashedButtonText: string;
-        dashedHoverBackground: string;
-        focusedIcon: any;
-        focusedLinkBackground: any;
-        previewBackground: any;
-        hoveredTabKeyline: any;
         error: any;
         focus: any;
         info: any;
-        success: any;
         warning: any;
         destructive: {
             hover: any;
         };
-        asterisk: any;
-    };
-    progressTracker: {
-        background: any;
-        innerBackground: any;
-        trafficNeutral: any;
-    };
-    anchorNavigation: {
-        divider: any;
-        navItemHoverBackground: any;
-    };
-    accordion: {
-        border: any;
-        background: any;
-    };
-    tileSelect: {
-        border: any;
-        disabledBackground: any;
-        hoverBackground: any;
-        descriptionColor: any;
-        disabledText: any;
-    };
-    batchSelection: {
-        lightTheme: any;
-    };
-    hr: {
-        background: any;
-    };
-    editor: {
-        border: any;
-        counter: string;
-        placeholder: string;
-        button: {
-            hover: any;
-        };
-        toolbar: {
-            background: any;
-        };
-    };
-    menu: {
-        focus: any;
-        divider: any;
-        itemColor: any;
-        itemColorDisabled: any;
-        light: {
-            text: string;
-            background: any;
-            selected: any;
-            divider: any;
-            alternate: any;
-            title: any;
-            submenuBackground: string;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        dark: {
-            text: string;
-            background: any;
-            divider: any;
-            submenuBackground: any;
-            selected: any;
-            alternate: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        black: {
-            text: string;
-            background: any;
-            submenuBackground: any;
-            selected: any;
-            divider: any;
-            alternate: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        white: {
-            text: string;
-            background: string;
-            selected: any;
-            divider: any;
-            alternate: any;
-            submenuBackground: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-    };
-    card: {
-        footerBackground: any;
-        footerBorder: any;
-    };
-    carousel: {
-        activeSelectorBackground: any;
-        inactiveSelectorBackground: any;
-    };
-    flatTable: {
-        light: {
-            headerBackground: any;
-            border: any;
-        };
-        dark: {
-            headerBackground: any;
-            border: any;
-        };
-        subRow: {
-            background: any;
-            shadow: string;
-        };
-        transparentWhite: {
-            headerBackground: string;
-            border: string;
-        };
-        transparentBase: {
-            headerBackground: any;
-            border: any;
-        };
-        drawerSidebar: {
-            headerBackground: any;
-            hover: any;
-            highlighted: any;
-            selected: any;
-        };
-        hover: any;
-        headerIconColor: any;
-        headerAlternativeBackground: any;
-        selected: any;
-        highlighted: any;
-    };
-    help: {
-        color: any;
-        hover: any;
-    };
-    text: {
-        color: any;
-        placeholder: any;
-        size: string;
-    };
-    readOnly: {
-        textboxBackground: any;
-        textboxBorder: any;
-        textboxText: any;
-    };
-    content: {
-        secondaryColor: any;
     };
     disabled: {
-        border: any;
-        button: any;
-        disabled: any;
-        input: any;
-        text: any;
-        buttonText: string;
         background: any;
-        switch: any;
-    };
-    draggableItem: {
-        border: any;
-    };
-    checkable: {
-        checked: string;
-    };
-    table: {
-        primary: any;
-        secondary: any;
-        tertiary: any;
-        header: any;
-        hover: any;
-        selected: any;
-        zebra: any;
-        dragging: any;
-    };
-    drawer: {
-        background: any;
-        divider: any;
-    };
-    pager: {
-        active: string;
-        disabled: string;
-        alternate: any;
-    };
-    icon: {
-        default: string;
-        defaultHover: string;
-        onLightBackground: any;
-        onLightBackgroundHover: any;
-        disabled: string;
-    };
-    popoverContainer: {
-        iconColor: string;
-    };
-    navigationBar: {
-        light: {
-            background: any;
-            borderBottom: any;
-        };
-        dark: {
-            background: string;
-            borderBottom: string;
-        };
-        black: {
-            background: any;
-        };
-        white: {
-            borderBottom: any;
-        };
-    };
-    numeralDate: {
-        passive: string;
-        error: string;
-    };
-    portrait: {
-        border: any;
-        background: any;
-        initials: string;
-    };
-    picklist: {
-        locked: any;
-        lockedContent: any;
-        lockedText: any;
-    };
-    pill: {
-        neutral: any;
-        warning: any;
-        neutralBackgroundFocus: any;
-        warningButtonFocus: any;
-        errorButtonFocus: any;
-    };
-    search: {
-        active: any;
-        button: string;
-        passive: any;
-        icon: any;
-        iconHover: any;
-        searchActive: string;
-        darkVariantPlaceholder: any;
-        darkVariantBorder: any;
-        darkVariantText: string;
-        iconDarkVariant: any;
-        iconDarkVariantHover: any;
-    };
-    select: {
-        border: string;
-        selected: any;
-        optionHeader: any;
-        tableHeaderBorder: any;
-    };
-    shadows: {
-        depth1: string;
-        depth2: string;
-        depth3: string;
-        depth4: string;
-        cards: string;
-        cardsIE: string;
-    };
-    stepSequence: {
-        completedText: any;
-    };
-    switch: {
-        off: any;
-        offDisabled: any;
-        offHover: any;
-        on: any;
-        onDisabled: any;
-        onHover: any;
-        disabledFontColor: string;
-    };
-    tile: {
-        border: any;
-        footerBackground: any;
-        separator: any;
-    };
-    tab: {
-        background: any;
-        altHover: any;
-    };
-    editorLinkPreview: {
-        background: any;
-        hoverBackground: any;
-        border: any;
-        url: any;
     };
     zIndex: {
         smallOverlay: number;
@@ -337,7 +42,6 @@ declare function _default(palette: any): {
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
         colorsSemanticInfo500: any;
-        fontSizes100: string;
         metaName: string;
         metaPublic: string;
         colorsLogo: string;
@@ -553,6 +257,7 @@ declare function _default(palette: any): {
         borderWidth300: string;
         borderWidth400: string;
         borderWidth000: string;
+        fontSizes100: string;
         fontSizes200: string;
         fontSizes300: string;
         fontSizes400: string;

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

@@ -7,15 +7,12 @@ exports.default = exports.space = void 0;
 
 var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
-var _atOpacity = _interopRequireDefault(require("../../utils/at-opacity"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const space = ["var(--spacing000)", "var(--spacing100)", "var(--spacing200)", "var(--spacing300)", "var(--spacing400)", "var(--spacing500)", "var(--spacing600)", "var(--spacing700)", "var(--spacing800)", "var(--spacing900)", "var(--spacing1000)"];
 exports.space = space;
 
 var _default = palette => {
-  const baseWithOpacity = (0, _atOpacity.default)(palette.productGreen);
   return {
     name: "base",
     palette,
@@ -23,321 +20,23 @@ var _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,
@@ -361,8 +60,7 @@ var _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
       };
     }