colibri-ui 0.7.6 → 0.7.8

package/esm/Theme/themes/buenos_aires.js

@@ -9,92 +9,111 @@ var ButtonThemeBA = {
   },
   primary: {
     normal: {
-      backgroundColor: Color.GRAPHITE_9,
-      borderColor: Color.GRAPHITE_9
+      color: Color.WHITE,
+      backgroundColor: Color.PRIMARY_BA_4,
+      borderColor: Color.PRIMARY_BA_4
     },
     hover: {
-      backgroundColor: Color.GRAPHITE_10,
-      borderColor: Color.GRAPHITE_10
+      color: Color.WHITE,
+      backgroundColor: Color.PRIMARY_BA_5,
+      borderColor: Color.PRIMARY_BA_5
     },
     focus: {
-      backgroundColor: Color.GRAPHITE_10,
-      borderColor: Color.GRAPHITE_10
+      color: Color.WHITE,
+      backgroundColor: Color.PRIMARY_BA_5,
+      borderColor: Color.PRIMARY_BA_5
     },
     active: {
-      backgroundColor: Color.GRAPHITE_10,
-      borderColor: Color.GRAPHITE_10
+      color: Color.WHITE,
+      backgroundColor: Color.PRIMARY_BA_5,
+      borderColor: Color.PRIMARY_BA_5
     },
     disabled: {
-      color: Color.GRAPHITE_7,
-      backgroundColor: Color.GRAPHITE_5,
-      borderColor: Color.GRAPHITE_5
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   secondary: {
     normal: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_2,
-      borderColor: Color.PURPLE_2
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_BA_4,
+      borderColor: Color.SECONDARY_BA_4
     },
     hover: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_3,
-      borderColor: Color.PURPLE_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_BA_5,
+      borderColor: Color.SECONDARY_BA_5
     },
     focus: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_3,
-      borderColor: Color.PURPLE_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_BA_5,
+      borderColor: Color.SECONDARY_BA_5
     },
     active: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_3,
-      borderColor: Color.PURPLE_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_BA_5,
+      borderColor: Color.SECONDARY_BA_5
     },
     disabled: {
-      color: Color.PURPLE_3,
-      backgroundColor: Color.PURPLE_1,
-      borderColor: Color.PURPLE_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   clear: {
     normal: {
-      color: Color.GRAY_9,
+      color: Color.TRETIARY_BA_5,
       backgroundColor: Color.WHITE,
       borderColor: Color.WHITE
     },
     hover: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_2,
-      borderColor: Color.PURPLE_2
+      color: Color.TRETIARY_BA_5,
+      backgroundColor: Color.TRETIARY_BA_2,
+      borderColor: Color.TRETIARY_BA_2
     },
     active: {
-      color: Color.BLACK,
-      backgroundColor: Color.PURPLE_2,
-      borderColor: Color.PURPLE_2
+      color: Color.TRETIARY_BA_5,
+      backgroundColor: Color.TRETIARY_BA_2,
+      borderColor: Color.TRETIARY_BA_2
     },
     disabled: {
-      color: Color.PURPLE_3,
-      backgroundColor: Color.PURPLE_1,
-      borderColor: Color.PURPLE_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   }
 };
-var TypographyThemeBA = {
+var CheckboxThemeBA = {
   primary: {
-    color: Color.TYPOGRAPHY_PRIMARY
-  },
-  secondary: {
-    color: Color.TYPOGRAPHY_SECONDARY
-  },
+    normal: {
+      backgroundColor: Color.PRIMARY_BA_4
+    },
+    hover: {
+      backgroundColor: Color.PRIMARY_BA_4
+    },
+    focus: {
+      boxShadow: "0 0 0 2px ".concat(Color.PRIMARY_BA_1)
+    },
+    checked: {
+      backgroundColor: Color.PRIMARY_BA_4
+    },
+    active: {
+      backgroundColor: Color.PRIMARY_BA_4,
+      borderColor: Color.PRIMARY_BA_4,
+      boxShadow: Color.PRIMARY_BA_4
+    },
+    disabled: {
+      backgroundColor: Color.BG_1
+    }
+  }
+};
+var TypographyThemeBA = {
   alert: {
-    color: Color.TYPOGRAPHY_ALERT
+    color: Color.ALERT
   },
   success: {
-    color: Color.TYPOGRAPHY_SUCCESS
-  },
-  link: {
-    color: Color.TYPOGRAPHY_LINK
+    color: Color.SUCCESS
   }
 };
 var SwitchThemeDefault = {
@@ -103,20 +122,22 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: Color.GRAPHITE_6,
-      borderColor: Color.GRAPHITE_6
+      backgroundColor: Color.BG_2,
+      borderColor: Color.BG_2
     },
     checked: {
-      backgroundColor: Color.GRAPHITE_10,
-      borderColor: Color.GRAPHITE_10
+      backgroundColor: Color.PRIMARY_BA_5,
+      borderColor: Color.PRIMARY_BA_5
     }
   }
 };
 var THEME_BA = {
   breakpoints: Breakpoints,
   button: ButtonThemeBA,
+  checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
-  "switch": SwitchThemeDefault
+  "switch": SwitchThemeDefault,
+  palette: Color
 };
 
-export { ButtonThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };
+export { ButtonThemeBA, CheckboxThemeBA, SwitchThemeDefault, THEME_BA, TypographyThemeBA };

package/esm/Theme/themes/default.d.ts

@@ -1,21 +1,14 @@
+import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
+export declare const CheckboxThemeDefault: CheckboxVariant;
 export declare const TypographyThemeDefault: {
-    primary: {
-        color: string;
-    };
-    secondary: {
-        color: string;
-    };
     alert: {
         color: string;
     };
     success: {
         color: string;
     };
-    link: {
-        color: string;
-    };
 };
 export declare const SwitchThemeDefault: {
     circle: {
@@ -35,22 +28,14 @@ export declare const SwitchThemeDefault: {
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    checkbox: CheckboxVariant;
     typography: {
-        primary: {
-            color: string;
-        };
-        secondary: {
-            color: string;
-        };
         alert: {
             color: string;
         };
         success: {
             color: string;
         };
-        link: {
-            color: string;
-        };
     };
     switch: {
         circle: {
@@ -67,4 +52,51 @@ export declare const THEME_DEFAULT: {
             };
         };
     };
+    palette: {
+        TRETIARY_BA_1: string;
+        TRETIARY_BA_2: string;
+        TRETIARY_BA_3: string;
+        TRETIARY_BA_4: string;
+        TRETIARY_BA_5: string;
+        SECONDARY_BA_1: string;
+        SECONDARY_BA_2: string;
+        SECONDARY_BA_3: string;
+        SECONDARY_BA_4: string;
+        SECONDARY_BA_5: string;
+        PRIMARY_BA_1: string;
+        PRIMARY_BA_2: string;
+        PRIMARY_BA_3: string;
+        PRIMARY_BA_4: string;
+        PRIMARY_BA_5: string;
+        TRETIARY_1: string;
+        TRETIARY_2: string;
+        TRETIARY_3: string;
+        TRETIARY_4: string;
+        TRETIARY_5: string;
+        SECONDARY_1: string;
+        SECONDARY_2: string;
+        SECONDARY_3: string;
+        SECONDARY_4: string;
+        SECONDARY_5: string;
+        PRIMARY_1: string;
+        PRIMARY_2: string;
+        PRIMARY_3: string;
+        PRIMARY_4: string;
+        PRIMARY_5: string;
+        BG_1: string;
+        BG_2: string;
+        BG_3: string;
+        BG_4: string;
+        BG_5: string;
+        BRAND_BA_1: string;
+        BRAND_BA_2: string;
+        BRAND_BA_3: string;
+        BRAND_DEFAULT_1: string;
+        BRAND_DEFAULT_2: string;
+        BRAND_DEFAULT_3: string;
+        ALERT: string;
+        SUCCESS: string;
+        WHITE: string;
+        BLACK: string;
+    };
 };

package/esm/Theme/themes/default.js

@@ -9,91 +9,110 @@ var ButtonThemeDefault = {
   primary: {
     normal: {
       color: Color.WHITE,
-      backgroundColor: Color.BLUE_9,
-      borderColor: Color.BLUE_9
+      backgroundColor: Color.PRIMARY_4,
+      borderColor: Color.PRIMARY_4
     },
     hover: {
       color: Color.WHITE,
-      backgroundColor: Color.BLUE_10,
-      borderColor: Color.BLUE_10
+      backgroundColor: Color.PRIMARY_5,
+      borderColor: Color.PRIMARY_5
     },
     focus: {
       color: Color.WHITE,
-      backgroundColor: Color.BLUE_10,
-      borderColor: Color.BLUE_10
+      backgroundColor: Color.PRIMARY_5,
+      borderColor: Color.PRIMARY_5
     },
     active: {
       color: Color.WHITE,
-      backgroundColor: Color.BLUE_10,
-      borderColor: Color.BLUE_10
+      backgroundColor: Color.PRIMARY_5,
+      borderColor: Color.PRIMARY_5
     },
     disabled: {
-      color: Color.BLUE_7,
-      backgroundColor: Color.BLUE_4,
-      borderColor: Color.BLUE_4
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   secondary: {
     normal: {
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_4,
+      borderColor: Color.SECONDARY_4
     },
     hover: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_5,
+      borderColor: Color.SECONDARY_5
     },
     focus: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_5,
+      borderColor: Color.SECONDARY_5
     },
     active: {
-      backgroundColor: Color.NEUTRAL_3,
-      borderColor: Color.NEUTRAL_3
+      color: Color.WHITE,
+      backgroundColor: Color.SECONDARY_5,
+      borderColor: Color.SECONDARY_5
     },
     disabled: {
-      color: Color.NEUTRAL_3,
-      backgroundColor: Color.NEUTRAL_1,
-      borderColor: Color.NEUTRAL_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   },
   clear: {
     normal: {
-      color: Color.GRAY_9,
+      color: Color.TRETIARY_5,
       backgroundColor: Color.WHITE,
       borderColor: Color.WHITE
     },
     hover: {
-      color: Color.BLACK,
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
+      color: Color.TRETIARY_5,
+      backgroundColor: Color.TRETIARY_2,
+      borderColor: Color.TRETIARY_2
     },
     active: {
-      color: Color.BLACK,
-      backgroundColor: Color.NEUTRAL_2,
-      borderColor: Color.NEUTRAL_2
+      color: Color.TRETIARY_5,
+      backgroundColor: Color.TRETIARY_2,
+      borderColor: Color.TRETIARY_2
     },
     disabled: {
-      color: Color.NEUTRAL_3,
-      backgroundColor: Color.NEUTRAL_1,
-      borderColor: Color.NEUTRAL_1
+      color: Color.BG_3,
+      backgroundColor: Color.BG_1,
+      borderColor: Color.BG_1
     }
   }
 };
-var TypographyThemeDefault = {
+var CheckboxThemeDefault = {
   primary: {
-    color: Color.TYPOGRAPHY_PRIMARY
-  },
-  secondary: {
-    color: Color.TYPOGRAPHY_SECONDARY
-  },
+    normal: {
+      backgroundColor: Color.PRIMARY_4
+    },
+    hover: {
+      backgroundColor: Color.PRIMARY_4
+    },
+    focus: {
+      boxShadow: "0 0 0 2px ".concat(Color.PRIMARY_1)
+    },
+    checked: {
+      backgroundColor: Color.PRIMARY_4
+    },
+    active: {
+      backgroundColor: Color.PRIMARY_4,
+      borderColor: Color.PRIMARY_4,
+      boxShadow: Color.PRIMARY_4
+    },
+    disabled: {
+      backgroundColor: Color.BG_1
+    }
+  }
+};
+var TypographyThemeDefault = {
   alert: {
-    color: Color.TYPOGRAPHY_ALERT
+    color: Color.ALERT
   },
   success: {
-    color: Color.TYPOGRAPHY_SUCCESS
-  },
-  link: {
-    color: Color.TYPOGRAPHY_LINK
+    color: Color.SUCCESS
   }
 };
 var SwitchThemeDefault = {
@@ -102,20 +121,22 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: Color.BLUE_6,
-      borderColor: Color.BLUE_6
+      backgroundColor: Color.BG_2,
+      borderColor: Color.BG_2
     },
     checked: {
-      backgroundColor: Color.BLUE_10,
-      borderColor: Color.BLUE_10
+      backgroundColor: Color.PRIMARY_5,
+      borderColor: Color.PRIMARY_5
     }
   }
 };
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
+  checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
-  "switch": SwitchThemeDefault
+  "switch": SwitchThemeDefault,
+  palette: Color
 };
 
-export { ButtonThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, CheckboxThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/Typography/index.js

@@ -2,19 +2,17 @@ import { __assign } from 'tslib';
 import { jsx } from '@emotion/react/jsx-runtime';
 import { useMemo, Children } from 'react';
 import { BaseTypography } from './styles.js';
-import { VARIANT } from './index.props.js';
 
 var Typography = function Typography(_a) {
   var _b = _a.tag,
     Element = _b === void 0 ? "span" : _b,
     children = _a.children,
-    _c = _a.variant,
-    variant = _c === void 0 ? VARIANT.PRIMARY : _c,
+    variant = _a.variant,
     size = _a.size,
     fontWeight = _a.fontWeight,
     className = _a.className,
-    _d = _a.nowrap,
-    nowrap = _d === void 0 ? false : _d;
+    _c = _a.nowrap,
+    nowrap = _c === void 0 ? false : _c;
   var isNotComponent = typeof children === "string";
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var child = useMemo(function () {

package/esm/Typography/index.props.d.ts

@@ -1,20 +1,14 @@
 import type { CSSObject } from "@emotion/react";
 export declare enum VARIANT {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
     ALERT = "alert",
-    SUCCESS = "success",
-    LINK = "link"
+    SUCCESS = "success"
 }
 type VariantStyles = {
     color?: CSSObject["color"];
 };
 export type TypographyVariant = {
-    [VARIANT.PRIMARY]: VariantStyles;
-    [VARIANT.SECONDARY]: VariantStyles;
     [VARIANT.ALERT]: VariantStyles;
     [VARIANT.SUCCESS]: VariantStyles;
-    [VARIANT.LINK]: VariantStyles;
 };
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";