@commonsku/styles 1.13.6 → 1.14.1

package/dist/styles/Theme.d.ts

@@ -1,291 +1,105 @@
 import React from "react";
-export declare const colors: {
-    primary1: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        65: string;
-        70: string;
-        75: string;
-        80: string;
-        85: string;
-        90: string;
-        main: string;
-        'main-hover': string;
-        light: string;
-        lightest: string;
-        dark: string;
-        'dark-hover': string;
-        darkest: string;
-    };
-    secondary1: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    secondary2: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    secondary3: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    secondary4: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    pink: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    yellow: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
-    };
-    green: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
+import { AdditionalStyles } from "./globalStyles";
+import colors from "./colors";
+export { colors };
+export declare const fontFamilies: {
+    skuFontRegular: string;
+    skuFontDemibold: string;
+    skuFontBold: string;
+    skuFontMedium: string;
+    regular: string;
+    demibold: string;
+    bold: string;
+    medium: string;
+    fallbacks: string[];
+};
+export declare const fonts: string[];
+export declare const fontStyles: {
+    h1: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
     };
-    navy: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
+    h2: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
     };
-    neutrals: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        100: string;
-        main: string;
-        darkest: string;
-        bodyText: string;
-        bg1: string;
-        white: string;
+    h3: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
     };
-    errors: {
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        main: string;
-        lightest: string;
-        light: string;
-        dark: string;
-        darkest: string;
+    h4: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
     };
-    orders: {
-        OPPORTUNITY: {
-            main: string;
+    p: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        PRESENTATION: {
-            main: string;
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        ESTIMATE: {
-            main: string;
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        'PRE-SALES': {
-            main: string;
+    };
+    button: {
+        huge: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        'SALES ORDER': {
-            main: string;
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        INVOICE: {
-            main: string;
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        TARGET: {
-            main: string;
-        };
-    };
-    notes: {
-        main: string;
-    };
-    calls: {
-        main: string;
-    };
-    meetings: {
-        main: string;
-    };
-    left_nav: {
-        main: string;
-        sub_menu: {
-            bg: string;
-            link: {
-                bg: string;
-                text: string;
-            };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
-        link: {
-            text: string;
+        tiny: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
         };
     };
-    text: {
-        main: string;
-        bold: string;
-        body: string;
-        title: string;
-        label: string;
-        placeholder: string;
+    label: {
+        fontSize: string;
+        lineHeight: string;
+        fontFamily: string;
     };
-    white: string;
-    black: string;
-    primary: string;
-    cta: string;
-    primary0: string;
-    primary10: string;
-    primary100: string;
-    disabledButton: string;
-    disabledButtonBorder: string;
-    texttitle: string;
-    textlabel: string;
-    textbody: string;
-    textplaceholder: string;
-    bggray: string;
-    bgblue: string;
-    inputBorder: string;
-    special1: string;
-    special2: string;
-    special3: string;
-    primaryBg: string;
-    special2Bg: string;
-    transparent: string;
-    error: string;
-    primary2: string;
-    primary20: string;
-    primary200: string;
-    tableHeaderBg: string;
-    tableBorder: string;
-};
-export declare const fonts: string[];
-export declare const fontSizes: {
-    tiny: string;
-    small: string;
-    medium: string;
-    large: string;
 };
 export declare const themeOptions: {
     colors: {
         primary1: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            65: string;
-            70: string;
-            75: string;
-            80: string;
-            85: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '65': string;
+            '70': string;
+            '75': string;
+            '80': string;
+            '85': string;
+            '90': string;
             main: string;
             'main-hover': string;
             light: string;
@@ -295,15 +109,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         secondary1: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -311,15 +125,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         secondary2: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -327,15 +141,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         secondary3: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -343,31 +157,52 @@ export declare const themeOptions: {
             darkest: string;
         };
         secondary4: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
             dark: string;
             darkest: string;
         };
+        teal: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '65': string;
+            '70': string;
+            '75': string;
+            '80': string;
+            '85': string;
+            '90': string;
+            main: string;
+            'main-hover': string;
+            light: string;
+            lightest: string;
+            dark: string;
+            'dark-hover': string;
+            darkest: string;
+        };
         pink: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -375,15 +210,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         yellow: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -391,15 +226,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         green: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -407,15 +242,15 @@ export declare const themeOptions: {
             darkest: string;
         };
         navy: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -423,32 +258,33 @@ export declare const themeOptions: {
             darkest: string;
         };
         neutrals: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
-            100: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
+            '100': string;
             main: string;
             darkest: string;
+            dark: string;
             bodyText: string;
             bg1: string;
             white: string;
         };
         errors: {
-            10: string;
-            20: string;
-            30: string;
-            40: string;
-            50: string;
-            60: string;
-            70: string;
-            80: string;
-            90: string;
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
+            '80': string;
+            '90': string;
             main: string;
             lightest: string;
             light: string;
@@ -470,6 +306,8 @@ export declare const themeOptions: {
             };
             'SALES ORDER': {
                 main: string;
+                current: string;
+                previous: string;
             };
             INVOICE: {
                 main: string;
@@ -506,7 +344,10 @@ export declare const themeOptions: {
             body: string;
             title: string;
             label: string;
-            placeholder: string;
+            placeholder: {
+                default: string;
+                hover: string;
+            };
         };
         white: string;
         black: string;
@@ -536,34 +377,189 @@ export declare const themeOptions: {
         primary200: string;
         tableHeaderBg: string;
         tableBorder: string;
+        input: {
+            background: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            active: {
+                border: string;
+                text: string;
+            };
+            hover: {
+                border: string;
+                placeholder: string;
+            };
+            error: {
+                border: string;
+            };
+            disabled: {
+                text: string;
+                background: string;
+            };
+            iconWrapper: {
+                background: string;
+                active: {
+                    background: string;
+                };
+                hover: {
+                    background: string;
+                };
+                disabled: {
+                    background: string;
+                };
+            };
+            icon: {
+                fill: string;
+                active: {
+                    fill: string;
+                };
+                hover: {
+                    fill: string;
+                };
+                disabled: {
+                    fill: string;
+                };
+            };
+        };
+        select: {
+            background: string;
+            border: string;
+            text: string;
+            placeholder: string;
+            active: {
+                border: string;
+                text: string;
+            };
+            hover: {
+                border: string;
+                placeholder: string;
+            };
+            error: {
+                border: string;
+            };
+            disabled: {
+                background: string;
+                border: string;
+            };
+            dropdownIcon: {
+                color: string;
+                error: {
+                    color: string;
+                };
+                disabled: string;
+            };
+            clearIcon: {
+                color: string;
+            };
+        };
     };
     fonts: string[];
     fontFamily: string;
-    fontSizes: {
-        tiny: string;
-        small: string;
+    fontFamilies: {
+        skuFontRegular: string;
+        skuFontDemibold: string;
+        skuFontBold: string;
+        skuFontMedium: string;
+        regular: string;
+        demibold: string;
+        bold: string;
         medium: string;
-        large: string;
+        fallbacks: string[];
+    };
+    fontStyles: {
+        h1: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h2: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h3: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        h4: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
+        p: {
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        button: {
+            huge: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            medium: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+            tiny: {
+                fontSize: string;
+                lineHeight: string;
+                fontFamily: string;
+            };
+        };
+        label: {
+            fontSize: string;
+            lineHeight: string;
+            fontFamily: string;
+        };
     };
     space: {
-        0: string;
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-        7: string;
-        8: string;
-        9: string;
-        10: string;
+        '0': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
     };
 };
 export declare function getColor(color?: string, def?: string): string;
-export declare function getFontSize(value?: string, def?: string): string;
+export declare function getFontStyle(value?: string, def?: string): string;
 export declare function getThemeColor(props: {
     [key: string]: any;
 }, color: string, fallbackColor?: string): string;
+export declare function getThemeFontStyle(props: {
+    [key: string]: any;
+}, value: string, fallbackValue?: string): string;
 export declare function getThemeFontSize(props: {
     [key: string]: any;
 }, value: string, fallbackValue?: string): string;
@@ -573,9 +569,10 @@ export declare function getThemeFontFamily(props: {
 export declare function getThemeProperty(props: {
     [key: string]: any;
 }, prop: string, value?: string, fallbackValue?: string): string;
-declare const Theme: ({ theme, globalStyles, children }: React.PropsWithChildren<{
+declare const Theme: ({ theme, globalStyles, additionalGlobalStyles, children }: React.PropsWithChildren<{
     theme?: object | undefined;
     globalStyles?: boolean | undefined;
+    additionalGlobalStyles?: AdditionalStyles | undefined;
 }>) => JSX.Element;
 export default Theme;
 //# sourceMappingURL=Theme.d.ts.map