@appquality/unguess-design-system 2.12.85 → 3.0.0-colors

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

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { ComponentMeta, Story } from "@storybook/react";
 import { TagArgs } from "./_types";
 interface TagStoryProps extends TagArgs {
     canBeClosed: boolean;
@@ -8,20 +6,10 @@ interface TagStoryProps extends TagArgs {
     secondaryTextBold: boolean;
     secondaryTextColor: string;
 }
-export declare const Default: Story<TagStoryProps>;
-export declare const Avatar: Story<TagStoryProps>;
-export declare const Close: Story<TagStoryProps>;
-export declare const Round: Story<TagStoryProps>;
-export declare const Counter: Story<TagStoryProps>;
-declare const _default: ComponentMeta<{
-    ({ isPill, hue, color, size, ...props }: TagArgs): JSX.Element;
-    Avatar: import("styled-components").StyledComponent<{
-        (props: import("react").HTMLAttributes<HTMLElement>): JSX.Element;
-        displayName: string;
-    }, any, {}, never>;
-    Close: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
-    SecondaryText: import("styled-components").StyledComponent<(props: import("../typography/span/_types").SpanArgs) => JSX.Element, any, {
-        color?: string | undefined;
-    }, never>;
-}>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TagStoryProps>;
+export declare const Avatar: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TagStoryProps>;
+export declare const Close: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TagStoryProps>;
+export declare const Round: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TagStoryProps>;
+export declare const Counter: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TagStoryProps>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, TagArgs>;
 export default _default;

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

@@ -3,12 +3,6 @@ interface UnguessChartsTheme extends CompleteTheme {
 }
 export declare const DEFAULT_CHARTS_THEME: UnguessChartsTheme;
 export declare const CHARTS_COLOR_PALETTE: {
-    darkPine: string;
-    lightGrey: string;
-    darkGrey: string;
-    mattone: string;
-    gubbioLight: string;
-    blueRoyal: string;
     greenLight: string;
     blue: string;
     fucsia: string;
@@ -18,7 +12,5 @@ export declare const CHARTS_COLOR_PALETTE: {
 };
 export declare const CHARTS_COLOR_SCHEME_MONO: string[];
 export declare const CHARTS_COLOR_SCHEME_SEMANTIC: string[];
-export declare const CHARTS_COLOR_SCHEME_CATEGORICAL_5: string[];
-export declare const CHARTS_COLOR_SCHEME_CATEGORICAL_8_A: string[];
-export declare const CHARTS_COLOR_SCHEME_CATEGORICAL_8_B: string[];
+export declare const CHARTS_COLOR_SCHEME_CATEGORICAL: string[];
 export {};

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

@@ -1,12 +1,13 @@
 export declare const colors: {
+    base: string;
+    background: string;
+    foreground: string;
     primaryHue: string;
+    dangerHue: string;
     warningHue: string;
     successHue: string;
-    dangerHue: string;
-    accentHue: string;
-    base: "light" | "dark";
-    background: string;
-    foreground: string;
     neutralHue: string;
+    infoHue: string;
     chromeHue: string;
+    accentHue: string;
 };

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

@@ -1,18 +1,28 @@
+import { ButtonArgs } from "../buttons/button/_types";
 export declare const components: {
-    chrome: any;
-    notification: any;
+    "border.neutral": () => string;
+    "background.neutral": () => string;
+    "background.primary.accent": () => string;
+    "background.primary.accent.hover": () => string;
+    "background.primary.accent.active": () => string;
+    "text.neutral": () => string;
+    "text.neutral.bold": () => string;
+    "text.neutral.light": () => string;
+    "colors.danger": () => string;
+    "colors.danger.hover": () => string;
+    "colors.danger.active": () => string;
+    "text.color.accent.hover": () => string;
     "notifications.notification": ({ type, isPrimary, }: {
         type: string;
         isPrimary: boolean;
     }) => {
-        backgroundColor?: string | undefined;
-        svg: {
+        svg?: {
             marginTop: string;
-            color?: undefined;
         } | {
             color: string;
-            marginTop?: undefined;
-        };
+            marginTop: string;
+        } | undefined;
+        backgroundColor?: string | undefined;
     };
     "notifications.notification.close": ({ type, isPrimary, }: {
         type: string;
@@ -48,69 +58,98 @@ 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;
         } | {
             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, }: 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,17 @@ declare const theme: {
         xl: string;
     };
     colors: {
+        base: string;
+        background: string;
+        foreground: string;
         primaryHue: string;
+        dangerHue: string;
         warningHue: string;
         successHue: string;
-        dangerHue: string;
-        accentHue: string;
-        base: "light" | "dark";
-        background: string;
-        foreground: string;
         neutralHue: string;
+        infoHue: string;
         chromeHue: string;
+        accentHue: string;
     };
     palette: {
         black: string;
@@ -44,6 +45,7 @@ declare const theme: {
             "800": string;
         };
         blue: {
+            "50": string;
             "100": string;
             "200": string;
             "300": string;
@@ -62,6 +64,7 @@ declare const theme: {
             "600": string;
             "700": string;
             "800": string;
+            "900": string;
         };
         yellow: {
             "100": string;
@@ -72,8 +75,10 @@ declare const theme: {
             "600": string;
             "700": string;
             "800": string;
+            "900": string;
         };
         green: {
+            "50": string;
             "100": string;
             "200": string;
             "300": string;
@@ -83,7 +88,7 @@ declare const theme: {
             "700": string;
             "800": string;
         };
-        kale: {
+        azure: {
             "100": string;
             "200": string;
             "300": string;
@@ -92,26 +97,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 +127,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 +184,6 @@ declare const theme: {
         black: number;
     };
     gradients: {
-        horizontal: string;
         dark: string;
     };
     borderRadii: {
@@ -204,20 +203,29 @@ declare const theme: {
         xxxl: string;
     };
     components: {
-        chrome: any;
-        notification: any;
+        "border.neutral": () => string;
+        "background.neutral": () => string;
+        "background.primary.accent": () => string;
+        "background.primary.accent.hover": () => string;
+        "background.primary.accent.active": () => string;
+        "text.neutral": () => string;
+        "text.neutral.bold": () => string;
+        "text.neutral.light": () => string;
+        "colors.danger": () => string;
+        "colors.danger.hover": () => string;
+        "colors.danger.active": () => string;
+        "text.color.accent.hover": () => string;
         "notifications.notification": ({ type, isPrimary, }: {
             type: string;
             isPrimary: boolean;
         }) => {
-            backgroundColor?: string | undefined;
-            svg: {
+            svg?: {
                 marginTop: string;
-                color?: undefined;
             } | {
                 color: string;
-                marginTop?: undefined;
-            };
+                marginTop: string;
+            } | undefined;
+            backgroundColor?: string | undefined;
         };
         "notifications.notification.close": ({ type, isPrimary, }: {
             type: string;
@@ -253,74 +261,104 @@ 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;
+        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;
         lg: (offsetY: string, blurRadius: string, color: string) => string;
@@ -333,6 +371,7 @@ declare const theme: {
     };
     rtl: boolean;
     document?: any;
+    window?: any;
     borders: {
         sm: string;
         md: string;
@@ -359,6 +398,7 @@ declare const theme: {
         lg: string;
     };
     shadowWidths: {
+        xs: string;
         sm: string;
         md: 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>>;