@gataca/design-system 4.1.0 → 4.3.0

package/dist/assets/{fonts~tMhwBATi.css → fonts~dmfyEwwg.css}

@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 
-/*# sourceMappingURL=fonts~tMhwBATi.css.map */
+/*# sourceMappingURL=fonts~dmfyEwwg.css.map */

package/dist/assets/fonts~dmfyEwwg.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/styles/fonts.css"],"names":[],"mappings":"AAAA,2GAA2G;AAC3G,wGAAwG;AACxG,uGAAuG;AACvG,yGAAyG;AACzG,6JAA6J","file":"fonts~dmfyEwwg.css","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@100;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');\n@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');\n"]}

package/dist/components/native/TextField/TextField/textField_config.d.ts

@@ -12,6 +12,6 @@ export declare const inputBorder: {
     success: string;
     error: string;
 };
-export declare const inputColor: (state: TextFieldState, value?: string) => "neutral600" | "neutral1000";
-export declare const inputBackgroundColor: (state: TextFieldState) => "neutral100" | "neutral300";
-export declare const helperTextColor: (state: TextFieldState) => "neutral600" | "success300" | "alert300";
+export declare const inputColor: (state: TextFieldState, value?: string) => "neutral1000" | "neutral600";
+export declare const inputBackgroundColor: (state: TextFieldState) => "neutral300" | "fundationWhite";
+export declare const helperTextColor: (state: TextFieldState) => "success300" | "alert300" | "neutral600";

package/dist/components/web/Alerts/Alert/Alert_config.web.d.ts

@@ -1,4 +1,4 @@
-import { ColorsType } from '../../../../styles';
+import { ThemeColorsType } from '../../../../styles';
 export declare const iconsByState: {
     alert: (props: {
         id?: string;
@@ -29,19 +29,19 @@ export declare const iconsByState: {
         style?: import("../../Icons/icon_types").IconStyle;
     }) => import("react/jsx-runtime").JSX.Element;
 };
-export declare const iconColor: (colors: ColorsType) => {
+export declare const iconColor: (themeColors: ThemeColorsType) => {
     alert: string;
     warning: string;
     info: string;
     success: string;
 };
-export declare const borderColor: (colors: ColorsType) => {
+export declare const borderColor: (themeColors: ThemeColorsType) => {
     alert: string;
     warning: string;
     info: string;
     success: string;
 };
-export declare const bgColor: (colors: ColorsType) => {
+export declare const bgColor: (themeColors: ThemeColorsType) => {
     alert: string;
     warning: string;
     info: string;

package/dist/components/web/Avatars/Avatar/Avatar.config.web.d.ts

@@ -1,190 +1,6 @@
-import { ColorsType, StyleType } from '../../../../utils/theming';
+import { StyleType, ThemeColorsType } from '../../../../utils/theming';
 import { AvatarType } from './Avatar.types.web';
-export declare const createColorMap: (Colors: ColorsType) => {
-    white: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    black: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    purple: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    lightPurple: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    red: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    green: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    yellow: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    blue: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    teal: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    lightTeal: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    grey: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    pink: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-    lightPink: {
-        enable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        hover: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-        disable: {
-            backgroundColor: string;
-            iconColor: string;
-        };
-    };
-};
-export declare const avatarBgColorMap: (Colors: ColorsType) => {
+export declare const avatarBgColorMap: (themeColors: ThemeColorsType) => {
     black: string;
     purple: string;
     pink: string;
@@ -202,7 +18,7 @@ export declare const avatarFontsMap: (fonts: StyleType) => {
 };
 export declare const avatarIndicatorSizeMap: Record<string, string>;
 export declare const avatarButtonIconSizeMap: Record<string, string>;
-export declare const getAvatarGeneralStyles: (colors: ColorsType, size: string, color: string, type?: AvatarType, image?: string) => {
+export declare const getAvatarGeneralStyles: (themeColors: ThemeColorsType, size: string, color: string, type?: AvatarType, image?: string) => {
     backgroundColor: any;
     backgroundImage: any;
     borderRadius: any;
@@ -211,5 +27,5 @@ export declare const getAvatarGeneralStyles: (colors: ColorsType, size: string,
 };
 export declare const getAvatarPaddings: (size: string) => "8px" | "12px";
 export declare const getAvatarMinSize: (size: string) => 48 | 40 | 32;
-export declare const getAvatarTextStyles: (fontStyles: StyleType, colors: ColorsType, size: string) => any;
+export declare const getAvatarTextStyles: (fontStyles: StyleType, themeColors: ThemeColorsType, size: string) => any;
 export declare function getInitials(text: string): string;

package/dist/components/web/Buttons/Button/Button.config.web.d.ts

@@ -1,5 +1,5 @@
-import { ColorsType, StyleType } from '../../../../utils/theming';
-export declare const createColorMap: (Colors: ColorsType) => {
+import { ColorsType, ThemeColorsType, StyleType } from '../../../../utils/theming';
+export declare const createColorMap: (Theme: ThemeColorsType) => {
     white: {
         fill: {
             enable: {
@@ -82,11 +82,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -121,6 +124,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
             focus: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
                 backgroundColor: string;
@@ -135,11 +139,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -185,14 +192,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
             enable: {
                 iconColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -242,11 +253,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -296,11 +310,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -350,9 +367,11 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
                 bordersColor: string;
@@ -406,11 +425,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -455,16 +477,20 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             focus: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -487,7 +513,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
         };
     };
 };
-export declare const getButtonGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, textSize: string, hasIcon?: boolean) => {
+export declare const getButtonGeneralStyles: (colors: ColorsType, themeColors: ThemeColorsType, color: string, style: string, state: string, textSize: string, hasIcon?: boolean) => {
     minHeight: number;
     boxShadow: string | undefined;
     padding: string;
@@ -502,7 +528,7 @@ export declare const getButtonPaddings: (textSize: string, style: string) => {
     padding: string;
 };
 export declare const getButtonMinHeight: (textSize: string, hasIcon?: boolean) => 34 | 48 | 40 | 42;
-export declare const getButtonContentStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, textSize: string) => {
+export declare const getButtonContentStyles: (fontStyles: StyleType, themeColors: ThemeColorsType, color: string, style: string, state: string, textSize: string) => {
     styles: {
         lineHeight: string;
         color: any;

package/dist/components/web/Buttons/SegmentedButton/SegmentedButton.config.web.d.ts

@@ -1,11 +1,11 @@
-import { ColorsType } from '../../../../utils/theming';
+import { ThemeColorsType } from '../../../../utils/theming';
 import { SelectedColor, Size } from './SegmentedButton.types.web';
-export declare const getContainerStyle: (colors: ColorsType, size: Size) => {
+export declare const getContainerStyle: (themeColors: ThemeColorsType, size: Size, selectedColor: SelectedColor) => {
     backgroundColor: string;
     padding: string;
     minHeight: string;
 };
-export declare const getSliderStyle: (colors: ColorsType, size: Size, selectedColor: SelectedColor, itemsLength: number, sliderTranslateX: any, sliderOpacity: any) => {
+export declare const getSliderStyle: (themeColors: ThemeColorsType, size: Size, selectedColor: SelectedColor, itemsLength: number, sliderTranslateX: any, sliderOpacity: any) => {
     backgroundColor: string;
     width: string;
     transform: string;

package/dist/components/web/Buttons/SegmentedButton/styles.web.d.ts

@@ -1,5 +1,5 @@
-import { ColorsType } from '../../../../styles';
-export declare const styles: (colors: ColorsType) => {
+import { ThemeColorsType } from '../../../../styles';
+export declare const styles: (themeColors: ThemeColorsType) => {
     container: React.CSSProperties;
     slider: React.CSSProperties;
     item: React.CSSProperties;

package/dist/components/web/Chips/Chip/Chip.config.web.d.ts

@@ -1,4 +1,4 @@
-import { ColorsType, StyleType } from '../../../../utils/theming';
+import { ColorsType, ThemeColorsType, StyleType } from '../../../../utils/theming';
 import { IconSize } from '../../Icons/icon_types';
 export declare const leadingIconMap: {
     [key: string]: React.FC<{
@@ -12,7 +12,7 @@ export declare const trailingIconMap: {
         color: string;
     }>;
 };
-export declare const createColorMap: (Colors: ColorsType) => {
+export declare const createColorMap: (Colors: ColorsType, Theme: ThemeColorsType) => {
     white: {
         filled: {
             enable: {
@@ -26,6 +26,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
             active: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
                 backgroundColor: string;
@@ -70,14 +71,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -104,14 +109,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -138,14 +147,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -172,14 +185,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -206,14 +223,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -240,14 +261,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -274,14 +299,18 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -367,6 +396,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
             active: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
                 backgroundColor: string;
@@ -380,6 +410,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 backgroundColor: string;
@@ -387,6 +418,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
                 bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
@@ -404,6 +436,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
             active: {
                 backgroundColor: string;
                 textColor: string;
+                bordersColor: string;
             };
             disable: {
                 backgroundColor: string;
@@ -413,22 +446,26 @@ export declare const createColorMap: (Colors: ColorsType) => {
         outline: {
             enable: {
                 textColor: string;
+                bordersColor: string;
             };
             hover: {
                 textColor: string;
+                bordersColor: string;
             };
             active: {
                 textColor: string;
                 bordersColor: string;
             };
             disable: {
+                bordersColor: string;
                 textColor: string;
             };
         };
     };
 };
-export declare const getChipGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, form: string, chipSize: string) => {
+export declare const getChipGeneralStyles: (colors: ColorsType, themeColors: ThemeColorsType, color: string, style: string, state: string, form: string, chipSize: string) => {
     backgroundColor: any;
+    border: string | undefined;
     borderColor: any;
     borderWidth: number;
     borderRadius: number;
@@ -441,7 +478,7 @@ export declare enum chipPadding {
     'medium' = "3px 6px",
     'small' = "2px 5px"
 }
-export declare const getChipTextStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, chipSize: string) => {
+export declare const getChipTextStyles: (fontStyles: StyleType, colors: ColorsType, themeColors: ThemeColorsType, color: string, style: string, state: string, chipSize: string) => {
     lineHeight: number | undefined;
     color: any;
     fontFamily?: string;

package/dist/components/web/Icons/icons/checkbox.d.ts

@@ -1,11 +1,11 @@
-import { ColorsType } from '../../../../styles';
+import { ThemeColorsType } from '../../../../styles';
 import { CheckboxSize, CheckboxState } from '../../Checkbox/Checkbox/checkbox_types.web';
 import { IconStyle } from '../icon_types';
 type ChekboxIconProps = {
     id?: string;
     className?: string;
     size: CheckboxSize;
-    colors: ColorsType;
+    themeColors: ThemeColorsType;
     state: CheckboxState;
     style?: IconStyle;
 };