@dxc-technology/halstack-react 0.0.0-9bd9511 → 0.0.0-9c20370

package/common/coreTokens.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var CORE_TOKENS = {
+  inherit: "inherit",
+  // Color
+  // Absolutes
+  color_black: "#000000",
+  color_white: "#ffffff",
+  color_transparent: "transparent",
+  // Greyscale
+  // Solid variants
+  color_grey_50: "#fafafa",
+  color_grey_100: "#f2f2f2",
+  color_grey_200: "#e6e6e6",
+  color_grey_300: "#cccccc",
+  color_grey_400: "#bfbfbf",
+  color_grey_500: "#999999",
+  color_grey_600: "#808080",
+  color_grey_700: "#666666",
+  color_grey_800: "#4d4d4d",
+  color_grey_900: "#333333",
+  // Transparent variants
+  color_grey_50_a: "#00000005",
+  color_grey_100_a: "#0000000d",
+  color_grey_200_a: "#0000001a",
+  color_grey_300_a: "#00000033",
+  color_grey_400_a: "#0000004d",
+  color_grey_500_a: "#00000066",
+  color_grey_600_a: "#00000080",
+  color_grey_700_a: "#00000099",
+  color_grey_800_a: "#000000b3",
+  color_grey_900_a: "#000000cc",
+  // Purple
+  color_purple_50: "#faf7fd",
+  color_purple_100: "#f2eafa",
+  color_purple_200: "#e5d5f6",
+  color_purple_300: "#cbacec",
+  color_purple_400: "#b182e3",
+  color_purple_500: "#a46ede",
+  color_purple_600: "#7d2fd0",
+  color_purple_700: "#5f249f",
+  color_purple_800: "#4b1c7d",
+  color_purple_900: "#321353",
+  // Blue
+  color_blue_50: "#f5fbff",
+  color_blue_100: "#e6f4ff",
+  color_blue_200: "#cceaff",
+  color_blue_300: "#99d5ff",
+  color_blue_400: "#66bfff",
+  color_blue_500: "#33aaff",
+  color_blue_600: "#0095ff",
+  color_blue_700: "#0086e6",
+  color_blue_800: "#0067b3",
+  color_blue_900: "#003c66",
+  // Red
+  color_red_50: "#fff5f6",
+  color_red_100: "#ffe6e9",
+  color_red_200: "#ffccd3",
+  color_red_300: "#fe9aa7",
+  color_red_400: "#fe677b",
+  color_red_500: "#fe344f",
+  color_red_600: "#fe0123",
+  color_red_700: "#d0011b",
+  color_red_800: "#980115",
+  color_red_900: "#65010e",
+  // Green
+  color_green_50: "#f7fdf9",
+  color_green_100: "#eafaef",
+  color_green_200: "#d5f6df",
+  color_green_300: "#acecbe",
+  color_green_400: "#82e39e",
+  color_green_500: "#59d97d",
+  color_green_600: "#2fd05d",
+  color_green_700: "#24a148",
+  color_green_800: "#1c7d38",
+  color_green_900: "#135325",
+  // Yellow
+  color_yellow_50: "#fffdf5",
+  color_yellow_100: "#fef9e6",
+  color_yellow_200: "#fdf4ce",
+  color_yellow_300: "#fbe89d",
+  color_yellow_400: "#fadd6b",
+  color_yellow_500: "#f7cf2b",
+  color_yellow_600: "#f6c709",
+  color_yellow_700: "#c59f07",
+  color_yellow_800: "#947705",
+  color_yellow_900: "#624f04",
+  // Orange
+  color_orange_50: "#fefaf5",
+  color_orange_100: "#fef3e7",
+  color_orange_200: "#fce7cf",
+  color_orange_300: "#facf9e",
+  color_orange_400: "#f7b76e",
+  color_orange_500: "#f59f3d",
+  color_orange_600: "#f38f20",
+  color_orange_700: "#c26c0a",
+  color_orange_800: "#915108",
+  color_orange_900: "#613605",
+  // Typography
+  type_sans: "Open Sans, sans-serif",
+  type_scale_root: "16px",
+  type_scale_08: "3.75rem",
+  type_scale_07: "2.5rem",
+  type_scale_06: "2rem",
+  type_scale_05: "1.5rem",
+  type_scale_04: "1.25rem",
+  type_scale_03: "1rem",
+  type_scale_02: "0.875rem",
+  type_scale_01: "0.75rem",
+  type_light: "300",
+  type_regular: "400",
+  type_semibold: "600",
+  type_bold: "bold",
+  type_italic: "italic",
+  type_normal: "normal",
+  type_spacing_tight_02: "-0.05em",
+  type_spacing_tight_01: "-0.025em",
+  type_spacing_normal: "0em",
+  type_spacing_wide_01: "0.025em",
+  type_spacing_wide_02: "0.05em",
+  type_spacing_wide_03: "0.1em",
+  type_initial: "initial",
+  type_uppercase: "uppercase",
+  type_no_line: "none",
+  type_underline: "underline",
+  type_line_through: "line-through",
+  type_leading_compact_03: "1em",
+  type_leading_compact_02: "1.25em",
+  type_leading_compact_01: "1.365em",
+  type_leading_normal: "1.5em",
+  type_leading_loose_01: "1.715em",
+  type_leading_loose_02: "2em",
+  // Spacing
+  spacing_0: "0rem",
+  spacing_2: "0.125rem",
+  spacing_4: "0.25rem",
+  spacing_8: "0.5rem",
+  spacing_12: "0.75rem",
+  spacing_16: "1rem",
+  spacing_24: "1.5rem",
+  spacing_32: "2rem",
+  spacing_40: "2.5rem",
+  spacing_48: "3rem",
+  spacing_56: "3.5rem",
+  spacing_64: "4rem",
+  spacing_80: "5rem",
+  spacing_96: "6rem",
+  spacing_112: "7rem",
+  // Border
+  border_width_0: "0px",
+  border_width_1: "1px",
+  border_width_2: "2px",
+  border_width_4: "4px",
+  border_radius_none: "0rem",
+  border_radius_small: "0.125rem",
+  border_radius_medium: "0.25rem",
+  border_radius_large: "0.375rem",
+  border_solid: "solid",
+  border_dashed: "dashed",
+  border_none: "none"
+};
+var _default = CORE_TOKENS;
+exports["default"] = _default;

package/common/utils.d.ts

@@ -0,0 +1 @@
+export declare const getMargin: (marginProp: string | object, side: string) => any;

package/common/utils.js

@@ -1,17 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getMargin = void 0;
+
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
 var _variables = require("./variables");
+
 var getMargin = function getMargin(marginProp, side) {
   if (marginProp && (0, _typeof2["default"])(marginProp) === "object") {
     return marginProp[side] && _variables.spaces[marginProp[side]] || "0px";
-  } else {
-    return marginProp && _variables.spaces[marginProp] || "0px";
-  }
+  } else if (marginProp && typeof marginProp === "string") {
+    return _variables.spaces[marginProp];
+  } else return "0px";
 };
+
 exports.getMargin = getMargin;

package/common/variables.d.ts

@@ -1,147 +1,3 @@
-import TranslatedLabelsContextTypes from "../translatedLabelsType";
-export declare const globalTokens: {
-    inherit: string;
-    transparent: string;
-    hal_white: string;
-    hal_grey_l_95: string;
-    hal_grey_l_90: string;
-    hal_grey_l_80: string;
-    hal_grey_l_75: string;
-    hal_grey_l_60: string;
-    hal_grey_s_40: string;
-    hal_black: string;
-    color_grey_800: string;
-    color_grey_600: string;
-    color_grey_50: string;
-    color_grey_a_100: string;
-    color_grey_a_200: string;
-    color_grey_a_300: string;
-    color_grey_a_800: string;
-    color_grey_a_900: string;
-    hal_purple_l_95: string;
-    hal_purple_l_90: string;
-    hal_purple_l_65: string;
-    hal_purple_s_38: string;
-    hal_purple_d_30: string;
-    hal_purple_d_20: string;
-    hal_purple_d_70: string;
-    color_purple_600: string;
-    color_purple_300: string;
-    hal_blue_l_95: string;
-    hal_blue_l_80: string;
-    hal_blue_l_50: string;
-    hal_blue_l_45: string;
-    hal_blue_s_35: string;
-    hal_blue_d_20: string;
-    color_blue_200: string;
-    color_blue_500: string;
-    color_blue_50: string;
-    hal_red_l_95: string;
-    hal_red_l_80: string;
-    hal_red_l_60: string;
-    hal_red_s_41: string;
-    hal_red_d_30: string;
-    hal_red_d_20: string;
-    color_red_700: string;
-    color_red_50: string;
-    color_red_600: string;
-    hal_green_l_95: string;
-    hal_green_l_80: string;
-    hal_green_s_39: string;
-    hal_green_d_30: string;
-    hal_green_d_20: string;
-    hal_yellow_l_95: string;
-    hal_yellow_l_80: string;
-    hal_yellow_s_57: string;
-    hal_yellow_d_40: string;
-    hal_yellow_d_30: string;
-    hal_orange_s_54: string;
-    lightBlack: string;
-    yellow: string;
-    lightGrey: string;
-    lightRed: string;
-    lightBlue: string;
-    lightYellow: string;
-    lightPink: string;
-    lightGreen: string;
-    blue: string;
-    lighterGrey: string;
-    violet: string;
-    darkBlue: string;
-    purple: string;
-    mediumPurple: string;
-    lightPurple: string;
-    lighterPurple: string;
-    mediumWhite: string;
-    softBlue: string;
-    darkWhite: string;
-    lighterBlack: string;
-    mediumBlack: string;
-    mediumGreyBlack: string;
-    softGrey: string;
-    softBlack: string;
-    type_sans: string;
-    type_scale_root: string;
-    type_scale_08: string;
-    type_scale_07: string;
-    type_scale_06: string;
-    type_scale_05: string;
-    type_scale_04: string;
-    type_scale_03: string;
-    type_scale_02: string;
-    type_scale_01: string;
-    type_light: string;
-    type_regular: string;
-    type_semibold: string;
-    type_bold: string;
-    type_italic: string;
-    type_normal: string;
-    type_spacing_tight_02: string;
-    type_spacing_tight_01: string;
-    type_spacing_normal: string;
-    type_spacing_wide_01: string;
-    type_spacing_wide_02: string;
-    type_spacing_wide_03: string;
-    type_initial: string;
-    type_uppercase: string;
-    type_no_line: string;
-    type_underline: string;
-    type_line_through: string;
-    type_leading_compact_03: string;
-    type_leading_compact_02: string;
-    type_leading_compact_01: string;
-    type_leading_normal: string;
-    type_leading_loose_01: string;
-    type_leading_loose_02: string;
-    fontSize10: string;
-    spacing_00: string;
-    spacing_01: string;
-    spacing_02: string;
-    spacing_03: string;
-    spacing_04: string;
-    spacing_05: string;
-    spacing_06: string;
-    spacing_07: string;
-    spacing_08: string;
-    spacing_09: string;
-    spacing_10: string;
-    spacing_11: string;
-    spacing_12: string;
-    spacing_13: string;
-    spacing_14: string;
-    border_width_0: string;
-    border_width_1: string;
-    border_width_2: string;
-    border_width_4: string;
-    border_radius_none: string;
-    border_radius_small: string;
-    border_radius_medium: string;
-    border_radius_large: string;
-    border_radius_full: string;
-    border_solid: string;
-    border_dashed: string;
-    border_none: string;
-};
 export declare const componentTokens: {
     accordion: {
         backgroundColor: string;
@@ -231,7 +87,6 @@ export declare const componentTokens: {
     };
     box: {
         backgroundColor: string;
-        letterSpacing: string;
         borderRadius: string;
         borderThickness: string;
         borderStyle: string;
@@ -439,9 +294,6 @@ export declare const componentTokens: {
         boxShadowOffsetY: string;
         boxShadowBlur: string;
         boxShadowColor: string;
-        fontFamily: string;
-        fontSize: string;
-        fontWeight: string;
     };
     dropdown: {
         buttonBackgroundColor: string;
@@ -647,7 +499,7 @@ export declare const componentTokens: {
         underlineSpacing: string;
         underlineStyle: string;
         underlineThickness: string;
-        disabledColor: string;
+        disabledFontColor: string;
         hoverFontColor: string;
         hoverUnderlineColor: string;
         visitedFontColor: string;
@@ -1380,6 +1232,153 @@ export declare const componentTokens: {
         focusColor: string;
     };
 };
+export declare type AdvancedTheme = typeof componentTokens;
+export declare type OpinionatedTheme = {
+    accordion: {
+        accentColor: string;
+        titleFontColor: string;
+        assistiveTextFontColor: string;
+    };
+    alert: {
+        baseColor: string;
+        accentColor: string;
+        overlayColor: string;
+    };
+    box: {
+        baseColor: string;
+    };
+    button: {
+        baseColor: string;
+        primaryFontColor: string;
+        secondaryHoverFontColor: string;
+    };
+    checkbox: {
+        baseColor: string;
+        checkColor: string;
+        fontColor: string;
+    };
+    chip: {
+        baseColor: string;
+        fontColor: string;
+        iconColor: string;
+    };
+    dateInput: {
+        baseColor: string;
+        selectedFontColor: string;
+    };
+    dialog: {
+        baseColor: string;
+        closeIconColor: string;
+        overlayColor: string;
+    };
+    dropdown: {
+        baseColor: string;
+        fontColor: string;
+        optionFontColor: string;
+    };
+    fileInput: {
+        fontColor: string;
+    };
+    footer: {
+        baseColor: string;
+        fontColor: string;
+        accentColor: string;
+        logo: string;
+    };
+    header: {
+        baseColor: string;
+        accentColor: string;
+        fontColor: string;
+        menuBaseColor: string;
+        hamburguerColor: string;
+        logo: string;
+        logoResponsive: string;
+        contentColor: string;
+        overlayColor: string;
+    };
+    link: {
+        baseColor: string;
+    };
+    navTabs: {
+        baseColor: string;
+        accentColor: string;
+    };
+    paginator: {
+        baseColor: string;
+        fontColor: string;
+    };
+    progressBar: {
+        accentColor: string;
+        baseColor: string;
+        fontColor: string;
+        overlayColor: string;
+        overlayFontColor: string;
+    };
+    quickNav: {
+        fontColor: string;
+        accentColor: string;
+    };
+    radioGroup: {
+        baseColor: string;
+        fontColor: string;
+    };
+    select: {
+        selectedOptionBackgroundColor: string;
+        fontColor: string;
+        optionFontColor: string;
+        hoverBorderColor: string;
+    };
+    sidenav: {
+        baseColor: string;
+    };
+    slider: {
+        baseColor: string;
+        fontColor: string;
+        totalLineColor: string;
+    };
+    spinner: {
+        accentColor: string;
+        baseColor: string;
+        fontColor: string;
+        overlayColor: string;
+        overlayFontColor: string;
+    };
+    switch: {
+        checkedBaseColor: string;
+        fontColor: string;
+    };
+    table: {
+        baseColor: string;
+        headerFontColor: string;
+        cellFontColor: string;
+    };
+    tabs: {
+        baseColor: string;
+    };
+    tag: {
+        fontColor: string;
+        iconColor: string;
+    };
+    textarea: {
+        fontColor: string;
+        hoverBorderColor: string;
+    };
+    textInput: {
+        fontColor: string;
+        hoverBorderColor: string;
+    };
+    toggleGroup: {
+        selectedBaseColor: string;
+        selectedFontColor: string;
+        unselectedBaseColor: string;
+        unselectedFontColor: string;
+    };
+    wizard: {
+        baseColor: string;
+        fontColor: string;
+        selectedStepFontColor: string;
+    };
+};
 export declare const spaces: {
     xxsmall: string;
     xsmall: string;
@@ -1396,36 +1395,88 @@ export declare const responsiveSizes: {
     large: string;
     xlarge: string;
 };
-export declare const typeface: {
-    body: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+export declare const defaultTranslatedComponentLabels: {
+    formFields: {
+        optionalLabel: string;
+        requiredSelectionErrorMessage: string;
+        requiredValueErrorMessage: string;
+        formatRequestedErrorMessage: string;
+        lengthErrorMessage: (minLength?: number, maxLength?: number) => string;
+        logoAlternativeText: string;
     };
-    altBody: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+    applicationLayout: {
+        visibilityToggleTitle: string;
     };
-    subtitle: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+    alert: {
+        infoTitleText: string;
+        successTitleText: string;
+        warningTitleText: string;
+        errorTitleText: string;
     };
-    altSubtitle: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+    dateInput: {
+        invalidDateErrorMessage: string;
     };
-    caption: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+    dialog: {
+        closeIconAriaLabel: string;
     };
-    overline: {
-        fontSize: string;
-        letterSpacing: string;
-        textTransform: string;
+    fileInput: {
+        fileSizeGreaterThanErrorMessage: string;
+        fileSizeLessThanErrorMessage: string;
+        multipleButtonLabelDefault: string;
+        singleButtonLabelDefault: string;
+        dropAreaButtonLabelDefault: string;
+        multipleDropAreaLabelDefault: string;
+        singleDropAreaLabelDefault: string;
+        deleteFileActionTitle: string;
+    };
+    footer: {
+        copyrightText: (year: number) => string;
+    };
+    header: {
+        closeIcon: string;
+        hamburguerTitle: string;
+    };
+    numberInput: {
+        valueGreaterThanOrEqualToErrorMessage: (value: number) => string;
+        valueLessThanOrEqualToErrorMessage: (value: number) => string;
+        decrementValueTitle: string;
+        incrementValueTitle: string;
+    };
+    paginator: {
+        itemsPerPageText: string;
+        minToMaxOfText: (minNumberOfItems: number, maxNumberOfItems: number, totalItems: number) => string;
+        goToPageText: string;
+        pageOfText: (pageNumber: number, totalPagesNumber: number) => string;
+    };
+    passwordInput: {
+        inputShowPasswordTitle: string;
+        inputHidePasswordTitle: string;
+    };
+    quickNav: {
+        contentTitle: string;
+    };
+    radioGroup: {
+        optionalItemLabelDefault: string;
+    };
+    select: {
+        noMatchesErrorMessage: string;
+        actionClearSelectionTitle: string;
+        actionClearSearchTitle: string;
+    };
+    tabs: {
+        scrollLeft: string;
+        scrollRight: string;
+    };
+    textInput: {
+        clearFieldActionTitle: string;
+        searchingMessage: string;
+        fetchingDataErrorMessage: string;
+    };
+    calendar: {
+        daysShort: string[];
+        months: string[];
+        previousMonthTitle: string;
+        nextMonthTitle: string;
     };
 };
-export declare const defaultTranslatedComponentLabels: TranslatedLabelsContextTypes;
+export declare type TranslatedLabels = typeof defaultTranslatedComponentLabels;