@appquality/unguess-design-system 3.0.12-alpha → 3.1.0

package/build/stories/theme/components.d.ts

@@ -1,6 +1,39 @@
+import { ButtonArgs } from "../buttons/button/_types";
 export declare const components: {
-    chrome: any;
-    notification: any;
+    "text.primary": () => {
+        color: string | undefined;
+    };
+    "text.success": () => {
+        color: string | undefined;
+    };
+    "text.warning": () => {
+        color: string | undefined;
+    };
+    "text.danger": () => {
+        color: string | undefined;
+    };
+    "navigation.hoverableItem": ({ isCurrent }: {
+        isCurrent: boolean;
+    }) => {
+        color: string | undefined;
+        "font-weight": number;
+        "background-color"?: string | undefined;
+        "border-top-left-radius": string;
+        "border-bottom-left-radius": string;
+        "&:hover, &.hover": {
+            "background-color": string | undefined;
+            color: string | undefined;
+        };
+        "&:active, &.active": {
+            "background-color": string | undefined;
+            color: string | undefined;
+        };
+        "&.isCurrent": {
+            color: string | undefined;
+            "font-weight": number;
+            "background-color": string | undefined;
+        };
+    };
     "notifications.notification": ({ type, isPrimary, }: {
         type: string;
         isPrimary: boolean;
@@ -47,69 +80,110 @@ export declare const components: {
     }) => {
         fontWeight: number;
     } | undefined;
-    "forms.input": ({ isFocused }: {
-        isFocused: boolean;
-    }) => {
-        boxShadow: string;
-    } | undefined;
     "dropdowns.item": ({ addable, checked, ...rest }: {
         addable: boolean;
         checked: boolean;
     }) => {
-        "&:hover": {
-            backgroundColor: string;
-        };
         fontWeight?: number | undefined;
         color?: string | undefined;
         cursor?: string | undefined;
     };
-    "buttons.icon_button": ({ isDanger, isBasic, isPrimary, isHovered, isNeutral, isBright, disabled, }: {
-        isBasic: boolean;
-        isDanger: boolean;
-        isPrimary: boolean;
-        isHovered: boolean;
-        isNeutral: boolean;
-        isBright: boolean;
-        disabled: boolean;
-    }) => {
+    "buttons.icon_button": ({ disabled, isBright, isAccent, isPrimary, isBasic, }: ButtonArgs) => {
         pointerEvents?: string | undefined;
         backgroundColor?: string | undefined;
         color?: string | undefined;
+        border?: string | undefined;
         "&:hover"?: {
+            borderColor: string | undefined;
+            color: string | undefined;
             backgroundColor: string;
-            color?: undefined;
+            "& svg"?: undefined;
+        } | {
+            backgroundColor: string;
+            color: string | undefined;
+            borderColor?: undefined;
+            "& svg"?: undefined;
+        } | {
+            backgroundColor: string | undefined;
+            color: string;
+            borderColor?: undefined;
+            "& svg"?: undefined;
         } | {
             backgroundColor: string;
             color: string;
+            "& svg": {
+                color: string;
+            };
+            borderColor?: undefined;
         } | undefined;
         "&:active"?: {
+            borderColor: string | undefined;
+            color: string | undefined;
+            backgroundColor: string;
+            "& svg"?: undefined;
+        } | {
+            backgroundColor: string;
+            color: string | undefined;
+            borderColor?: undefined;
+            "& svg"?: undefined;
+        } | {
+            backgroundColor: string | undefined;
+            color: string;
+            borderColor?: undefined;
+            "& svg"?: undefined;
+        } | {
             backgroundColor: string;
             color: string;
+            "& svg": {
+                color: string;
+            };
+            borderColor?: undefined;
         } | undefined;
+        borderColor?: string | undefined;
     };
-    "buttons.button": ({ isDanger, isPrimary, isHovered, isNeutral, isBright, }: {
-        isDanger: boolean;
-        isPrimary: boolean;
-        isHovered: boolean;
-        isNeutral: boolean;
-        isBright: boolean;
-    }) => {
-        backgroundColor: string;
-        color: string;
-        border: string;
-        "&:hover": {
+    "buttons.button": ({ isAccent, isBright, isPrimary, isBasic, isLink, }: ButtonArgs) => {
+        backgroundColor?: string | undefined;
+        color?: string | undefined;
+        border?: string | undefined;
+        "&:hover"?: {
+            borderColor: string | undefined;
+            color: string | undefined;
             backgroundColor: string;
-            color: string;
-        };
-        "&:active": {
+        } | {
+            backgroundColor: string | undefined;
+            borderColor?: undefined;
+            color?: undefined;
+        } | {
             backgroundColor: string;
-            color: string;
-        };
-    } | {
-        backgroundColor?: undefined;
-        color?: undefined;
-        border?: undefined;
-        "&:hover"?: undefined;
-        "&:active"?: undefined;
+            color: string | undefined;
+            borderColor?: undefined;
+        } | {
+            color: string | undefined;
+            borderColor?: undefined;
+            backgroundColor?: undefined;
+        } | undefined;
+        "&:active"?: {
+            borderColor: string | undefined;
+            color: string | undefined;
+            backgroundColor: string;
+        } | {
+            backgroundColor: string | undefined;
+            borderColor?: undefined;
+            color?: undefined;
+        } | {
+            backgroundColor: string;
+            color: string | undefined;
+            borderColor?: undefined;
+        } | {
+            color: string | undefined;
+            borderColor?: undefined;
+            backgroundColor?: undefined;
+        } | undefined;
+        borderColor?: string | undefined;
+    };
+    "cards.card": {
+        border: string;
     };
+    chrome: any;
+    notification: any;
 };

package/build/stories/theme/gradients.d.ts

@@ -1,4 +1,3 @@
 export declare const gradients: {
-    horizontal: string;
     dark: string;
 };

package/build/stories/theme/index.d.ts

@@ -8,16 +8,18 @@ declare const theme: {
         xl: string;
     };
     colors: {
-        primaryHue: string;
-        warningHue: string;
-        successHue: string;
-        dangerHue: string;
-        accentHue: string;
         base: "light" | "dark";
         background: string;
         foreground: string;
+        primaryHue: string;
+        dangerHue: string;
+        warningHue: string;
+        successHue: string;
         neutralHue: string;
         chromeHue: string;
+    } & {
+        infoHue: string;
+        accentHue: string;
     };
     palette: {
         black: string;
@@ -44,6 +46,7 @@ declare const theme: {
             "800": string;
         };
         blue: {
+            "50": string;
             "100": string;
             "200": string;
             "300": string;
@@ -62,6 +65,7 @@ declare const theme: {
             "600": string;
             "700": string;
             "800": string;
+            "900": string;
         };
         yellow: {
             "100": string;
@@ -72,8 +76,10 @@ declare const theme: {
             "600": string;
             "700": string;
             "800": string;
+            "900": string;
         };
         green: {
+            "50": string;
             "100": string;
             "200": string;
             "300": string;
@@ -83,7 +89,7 @@ declare const theme: {
             "700": string;
             "800": string;
         };
-        kale: {
+        azure: {
             "100": string;
             "200": string;
             "300": string;
@@ -92,26 +98,29 @@ declare const theme: {
             "600": string;
             "700": string;
             "800": string;
+            "900": string;
         };
-        fuschia: {
-            "400": string;
+        kale: {
+            "100": string;
+            "200": string;
+            "300": string;
             "600": string;
-            M400: string;
-            M600: string;
+            "700": string;
+            "800": string;
         };
         pink: {
-            "400": string;
             "600": string;
-            M400: string;
-            M600: string;
+            "700": string;
+            "800": string;
+            "900": string;
         };
         crimson: {
+            "200": string;
+            "300": string;
             "400": string;
-            "600": string;
-            M400: string;
-            M600: string;
+            "500": string;
         };
-        orange: {
+        fuschia: {
             "400": string;
             "600": string;
             M400: string;
@@ -119,54 +128,46 @@ declare const theme: {
         };
         lemon: {
             "400": string;
+            "500": string;
             "600": string;
-            M400: string;
-            M600: string;
+            "700": string;
         };
-        lime: {
+        teal: {
             "400": string;
+            "500": string;
             "600": string;
-            M400: string;
-            M600: string;
+            "700": string;
         };
-        mint: {
-            "400": string;
+        royal: {
             "600": string;
-            M400: string;
-            M600: string;
+            "700": string;
+            "800": string;
+            "900": string;
         };
-        teal: {
+        purple: {
+            "200": string;
+            "300": string;
             "400": string;
-            "600": string;
-            M400: string;
-            M600: string;
+            "500": string;
         };
-        azure: {
+        lime: {
             "400": string;
             "600": string;
             M400: string;
             M600: string;
         };
-        royal: {
+        mint: {
             "400": string;
             "600": string;
             M400: string;
             M600: string;
         };
-        purple: {
+        orange: {
             "400": string;
             "600": string;
             M400: string;
             M600: string;
         };
-        water: {
-            100: string;
-            200: string;
-            300: string;
-            600: string;
-            700: string;
-            800: string;
-        };
     };
     fonts: {
         system: string;
@@ -184,7 +185,6 @@ declare const theme: {
         black: number;
     };
     gradients: {
-        horizontal: string;
         dark: string;
     };
     borderRadii: {
@@ -204,8 +204,28 @@ declare const theme: {
         xxxl: string;
     };
     components: {
-        chrome: any;
-        notification: any;
+        "navigation.hoverableItem": ({ isCurrent }: {
+            isCurrent: boolean;
+        }) => {
+            color: string | undefined;
+            "font-weight": number;
+            "background-color"?: string | undefined;
+            "border-top-left-radius": string;
+            "border-bottom-left-radius": string;
+            "&:hover, &.hover": {
+                "background-color": string | undefined;
+                color: string | undefined;
+            };
+            "&:active, &.active": {
+                "background-color": string | undefined;
+                color: string | undefined;
+            };
+            "&.isCurrent": {
+                color: string | undefined;
+                "font-weight": number;
+                "background-color": string | undefined;
+            };
+        };
         "notifications.notification": ({ type, isPrimary, }: {
             type: string;
             isPrimary: boolean;
@@ -252,74 +272,106 @@ declare const theme: {
         }) => {
             fontWeight: number;
         } | undefined;
-        "forms.input": ({ isFocused }: {
-            isFocused: boolean;
-        }) => {
-            boxShadow: string;
-        } | undefined;
         "dropdowns.item": ({ addable, checked, ...rest }: {
             addable: boolean;
             checked: boolean;
         }) => {
-            "&:hover": {
-                backgroundColor: string;
-            };
             fontWeight?: number | undefined;
             color?: string | undefined;
             cursor?: string | undefined;
         };
-        "buttons.icon_button": ({ isDanger, isBasic, isPrimary, isHovered, isNeutral, isBright, disabled, }: {
-            isBasic: boolean;
-            isDanger: boolean;
-            isPrimary: boolean;
-            isHovered: boolean;
-            isNeutral: boolean;
-            isBright: boolean;
-            disabled: boolean;
-        }) => {
+        "buttons.icon_button": ({ disabled, isBright, isAccent, isPrimary, isBasic, }: import("../buttons/button/_types").ButtonArgs) => {
             pointerEvents?: string | undefined;
             backgroundColor?: string | undefined;
             color?: string | undefined;
+            border?: string | undefined;
             "&:hover"?: {
+                borderColor: string | undefined;
+                color: string | undefined;
                 backgroundColor: string;
-                color?: undefined;
             } | {
                 backgroundColor: string;
+                color: string | undefined;
+                borderColor?: undefined;
+            } | {
+                backgroundColor: string | undefined;
                 color: string;
+                borderColor?: undefined;
+            } | {
+                backgroundColor: string;
+                borderColor?: undefined;
+                color?: undefined;
             } | undefined;
             "&:active"?: {
+                borderColor: string | undefined;
+                color: string | undefined;
+                backgroundColor: string;
+            } | {
                 backgroundColor: string;
+                color: string | undefined;
+                borderColor?: undefined;
+            } | {
+                backgroundColor: string | undefined;
                 color: string;
+                borderColor?: undefined;
+            } | {
+                backgroundColor: string;
+                borderColor?: undefined;
+                color?: undefined;
             } | undefined;
+            borderColor?: string | undefined;
         };
-        "buttons.button": ({ isDanger, isPrimary, isHovered, isNeutral, isBright, }: {
-            isDanger: boolean;
-            isPrimary: boolean;
-            isHovered: boolean;
-            isNeutral: boolean;
-            isBright: boolean;
-        }) => {
-            backgroundColor: string;
-            color: string;
-            border: string;
-            "&:hover": {
+        "buttons.button": ({ isAccent, isBright, isPrimary, isBasic, isLink, }: import("../buttons/button/_types").ButtonArgs) => {
+            backgroundColor?: string | undefined;
+            color?: string | undefined;
+            border?: string | undefined;
+            "&:hover"?: {
+                borderColor: string | undefined;
+                color: string | undefined;
                 backgroundColor: string;
-                color: string;
-            };
-            "&:active": {
+            } | {
+                backgroundColor: string | undefined;
+                borderColor?: undefined;
+                color?: undefined;
+            } | {
                 backgroundColor: string;
-                color: string;
-            };
-        } | {
-            backgroundColor?: undefined;
-            color?: undefined;
-            border?: undefined;
-            "&:hover"?: undefined;
-            "&:active"?: undefined;
+                color: string | undefined;
+                borderColor?: undefined;
+            } | {
+                color: string | undefined;
+                borderColor?: undefined;
+                backgroundColor?: undefined;
+            } | undefined;
+            "&:active"?: {
+                borderColor: string | undefined;
+                color: string | undefined;
+                backgroundColor: string;
+            } | {
+                backgroundColor: string | undefined;
+                borderColor?: undefined;
+                color?: undefined;
+            } | {
+                backgroundColor: string;
+                color: string | undefined;
+                borderColor?: undefined;
+            } | {
+                color: string | undefined;
+                borderColor?: undefined;
+                backgroundColor?: undefined;
+            } | undefined;
+            borderColor?: string | undefined;
+        };
+        "cards.card": {
+            border: string;
         };
+        chrome: any;
+        colors: {
+            primaryText: string;
+        };
+        notification: any;
     };
     shadows: {
-        boxShadow: (theme: import("@zendeskgarden/react-theming").IGardenTheme) => string;
+        boxShadow: (theme: import("styled-components").DefaultTheme) => string;
         xs: (color: string) => string;
         sm: (color: string) => string;
         md: (color: string) => string;

package/build/stories/theme/mixins.d.ts

@@ -1,4 +1,4 @@
 export declare const flexCenter: import("styled-components").FlattenSimpleInterpolation;
 export declare const flexColumnCenter: import("styled-components").FlattenSimpleInterpolation;
-export declare const flexStart: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const cardStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
+export declare const flexStart: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;
+export declare const cardStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("styled-components").DefaultTheme>>;