colibri-ui 0.7.5 → 0.7.7

package/Theme/color.js

@@ -2,57 +2,81 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Color = {
+var tslib = require('tslib');
+
+var Primary = {
+  PRIMARY_1: "#E8F0FE",
+  PRIMARY_2: "#B8D2FF",
+  PRIMARY_3: "#73ABF8",
+  PRIMARY_4: "#067AFF",
+  PRIMARY_5: "#0066DC"
+};
+var Secondary = {
+  SECONDARY_1: "#fff1db",
+  SECONDARY_2: "#ffdaa3",
+  SECONDARY_3: "#ffca79",
+  SECONDARY_4: "#f4b968",
+  SECONDARY_5: "#ffab0f"
+};
+var Tretiary = {
+  TRETIARY_1: "#FFF5F0",
+  TRETIARY_2: "#FFEAE2",
+  TRETIARY_3: "#FFD8CA",
+  TRETIARY_4: "#FFA384 ",
+  TRETIARY_5: "#fc5200"
+};
+var PrimaryBA = {
+  PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
+  PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
+  PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
+  PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
+  PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
+};
+var SecondaryBA = {
+  SECONDARY_BA_1: "#d9d9d9",
+  SECONDARY_BA_2: "#bbb",
+  SECONDARY_BA_3: "#636363",
+  SECONDARY_BA_4: "#313131",
+  SECONDARY_BA_5: "#1a1a1a"
+};
+var TretiaryBA = {
+  TRETIARY_BA_1: "#EDF1F5",
+  TRETIARY_BA_2: "#d3dbe3",
+  TRETIARY_BA_3: "#c5cfda",
+  TRETIARY_BA_4: "#b1bcc8",
+  TRETIARY_BA_5: "#87929d"
+};
+var TextBA = {
+  TEXT_BA_PRIMARY: "#000",
+  TEXT_BA_SECONDARY: "#fffbe9",
+  TEXT_BA_TRETIARY: "#D5D500"
+};
+var Common = {
   WHITE: "#fff",
-  BLACK: "#000",
-  BLUE_1: "#FBFDFF",
-  BLUE_2: "#F5F9FF",
-  BLUE_3: "#E9F3FF",
-  BLUE_4: "#DAECFF",
-  BLUE_5: "#C9E2FF",
-  BLUE_6: "#B4D5FF",
-  BLUE_7: "#9AC3FD",
-  BLUE_8: "#73ABF8",
-  BLUE_9: "#0974EB",
-  BLUE_10: "#0066DC",
-  BLUE_11: "#006DE3",
-  BLUE_12: "#093266",
-  GRAPHITE_1: "#FCFDFE",
-  GRAPHITE_2: "#F8FAFB",
-  GRAPHITE_3: "#EDF0F4",
-  GRAPHITE_4: "#E4E8ED",
-  GRAPHITE_5: "#DBE1E6",
-  GRAPHITE_6: "#D1D8DF",
-  GRAPHITE_7: "#C4CDD6",
-  GRAPHITE_8: "#AFB9C3",
-  GRAPHITE_9: "#24292E",
-  GRAPHITE_10: "#383D42",
-  GRAPHITE_11: "#5E666F",
-  GRAPHITE_12: "#22272B",
-  GRAY_1: "#FCFCFD",
-  GRAY_2: "#F9F9FB",
-  GRAY_3: "#EFF0F3",
-  GRAY_4: "#E7E8EC",
-  GRAY_5: "#E0E1E6",
-  GRAY_6: "#D8D9E0",
-  GRAY_7: "#CDCED7",
-  GRAY_8: "#B9BBC6",
-  GRAY_9: "#8B8D98",
-  GRAY_10: "#80828D",
-  GRAY_11: "#62636C",
-  GRAY_12: "#1E1F24",
-  PURPLE_1: "rgba(38, 49, 129, .07)",
-  PURPLE_2: "rgba(38, 49, 129, .15)",
-  PURPLE_3: "rgba(38, 49, 129, .3)",
-  NEUTRAL_1: "rgba(22,51,0,.05)",
-  NEUTRAL_2: "rgba(22,51,0,.078)",
-  NEUTRAL_3: "rgba(22,51,0,.129)",
-  TYPOGRAPHY_PRIMARY: "#000",
-  TYPOGRAPHY_SECONDARY: "#667799",
-  TYPOGRAPHY_ALERT: "#E6481F",
-  TYPOGRAPHY_SUCCESS: "#23943E",
-  TYPOGRAPHY_LINK: "#0062D1"
+  BLACK: "#000"
+};
+var Backgrounds = {
+  BG_1: "#f2f2f2",
+  BG_2: "#e6e6e6",
+  BG_3: "#dbdbdb",
+  BG_4: "#b3b3b3",
+  BG_5: "#999"
+};
+var Accents = {
+  ALERT: "#ff564e",
+  SUCCESS: "#28bc00"
 };
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), TextBA), Backgrounds), Primary), Secondary), Tretiary), PrimaryBA), SecondaryBA), TretiaryBA);
 
+exports.Accents = Accents;
+exports.Backgrounds = Backgrounds;
 exports.Color = Color;
+exports.Common = Common;
+exports.Primary = Primary;
+exports.PrimaryBA = PrimaryBA;
+exports.Secondary = Secondary;
+exports.SecondaryBA = SecondaryBA;
+exports.TextBA = TextBA;
+exports.Tretiary = Tretiary;
+exports.TretiaryBA = TretiaryBA;
 exports.default = Color;

package/Theme/index.d.ts

@@ -1,25 +1,17 @@
-import type { FC, ReactNode } from "react";
+import { type FC, type ReactNode } from "react";
 import type { ThemeProps } from "./index.props";
 export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -36,26 +28,62 @@ export declare const THEMES: {
                 };
             };
         };
+        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;
+            TEXT_BA_PRIMARY: string;
+            TEXT_BA_SECONDARY: string;
+            TEXT_BA_TRETIARY: string;
+            ALERT: string;
+            SUCCESS: string;
+            WHITE: string;
+            BLACK: string;
+        };
     };
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        checkbox: import("../Checkbox/index.props").CheckboxVariant;
         typography: {
-            primary: {
-                color: string;
-            };
-            secondary: {
-                color: string;
-            };
             alert: {
                 color: string;
             };
             success: {
                 color: string;
             };
-            link: {
-                color: string;
-            };
         };
         switch: {
             circle: {
@@ -72,6 +100,50 @@ export declare const THEMES: {
                 };
             };
         };
+        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;
+            TEXT_BA_PRIMARY: string;
+            TEXT_BA_SECONDARY: string;
+            TEXT_BA_TRETIARY: string;
+            ALERT: string;
+            SUCCESS: string;
+            WHITE: string;
+            BLACK: string;
+        };
     };
 };
 export declare const ThemeProvider: FC<{

package/Theme/index.props.d.ts

@@ -1,10 +1,14 @@
+import type { CheckboxVariant } from "../Checkbox/index.props";
+import type { ColorsTheme } from "./color";
 import type { BreakpointsTheme } from "./breakpoints";
 import type { ButtonBase, ButtonVariant } from "../Button/index.props";
 import type { TypographyVariant } from "../Typography/index.props";
 import type { SwitchStates } from "../Switch/index.props";
 export type ThemeProps = {
     button: ButtonVariant & ButtonBase;
+    checkbox: CheckboxVariant;
     breakpoints: BreakpointsTheme;
     typography: TypographyVariant;
     switch: SwitchStates;
+    palette: ColorsTheme;
 };

package/Theme/themes/buenos_aires.d.ts

@@ -1,21 +1,14 @@
+import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
 export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const CheckboxThemeBA: CheckboxVariant;
 export declare const TypographyThemeBA: {
-    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_BA: {
     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,48 @@ export declare const THEME_BA: {
             };
         };
     };
+    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;
+        TEXT_BA_PRIMARY: string;
+        TEXT_BA_SECONDARY: string;
+        TEXT_BA_TRETIARY: string;
+        ALERT: string;
+        SUCCESS: string;
+        WHITE: string;
+        BLACK: string;
+    };
 };

package/Theme/themes/buenos_aires.js

@@ -9,94 +9,113 @@ var ButtonThemeBA = {
     borderRadius: "26px",
     border: "none"
   },
-  "default": {
+  primary: {
     normal: {
-      backgroundColor: color.Color.GRAPHITE_9,
-      borderColor: color.Color.GRAPHITE_9
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_BA_4,
+      borderColor: color.Color.PRIMARY_BA_4
     },
     hover: {
-      backgroundColor: color.Color.GRAPHITE_10,
-      borderColor: color.Color.GRAPHITE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_BA_5,
+      borderColor: color.Color.PRIMARY_BA_5
     },
     focus: {
-      backgroundColor: color.Color.GRAPHITE_10,
-      borderColor: color.Color.GRAPHITE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_BA_5,
+      borderColor: color.Color.PRIMARY_BA_5
     },
     active: {
-      backgroundColor: color.Color.GRAPHITE_10,
-      borderColor: color.Color.GRAPHITE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_BA_5,
+      borderColor: color.Color.PRIMARY_BA_5
     },
     disabled: {
-      color: color.Color.GRAPHITE_7,
-      backgroundColor: color.Color.GRAPHITE_5,
-      borderColor: color.Color.GRAPHITE_5
+      color: color.Color.PRIMARY_BA_3,
+      backgroundColor: color.Color.PRIMARY_BA_2,
+      borderColor: color.Color.PRIMARY_BA_2
     }
   },
-  primary: {
+  secondary: {
     normal: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.PURPLE_2,
-      borderColor: color.Color.PURPLE_2
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.SECONDARY_BA_4,
+      borderColor: color.Color.SECONDARY_BA_4
     },
     hover: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.PURPLE_3,
-      borderColor: color.Color.PURPLE_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.SECONDARY_BA_5,
+      borderColor: color.Color.SECONDARY_BA_5
     },
     focus: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.PURPLE_3,
-      borderColor: color.Color.PURPLE_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.SECONDARY_BA_5,
+      borderColor: color.Color.SECONDARY_BA_5
     },
     active: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.PURPLE_3,
-      borderColor: color.Color.PURPLE_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.SECONDARY_BA_5,
+      borderColor: color.Color.SECONDARY_BA_5
     },
     disabled: {
-      color: color.Color.PURPLE_3,
-      backgroundColor: color.Color.PURPLE_1,
-      borderColor: color.Color.PURPLE_1
+      color: color.Color.SECONDARY_BA_3,
+      backgroundColor: color.Color.SECONDARY_BA_2,
+      borderColor: color.Color.SECONDARY_BA_2
     }
   },
   clear: {
     normal: {
-      color: color.Color.GRAY_9,
+      color: color.Color.TRETIARY_BA_5,
       backgroundColor: color.Color.WHITE,
       borderColor: color.Color.WHITE
     },
     hover: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      color: color.Color.TRETIARY_BA_5,
+      backgroundColor: color.Color.TRETIARY_BA_2,
+      borderColor: color.Color.TRETIARY_BA_2
     },
     active: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      color: color.Color.TRETIARY_BA_5,
+      backgroundColor: color.Color.TRETIARY_BA_2,
+      borderColor: color.Color.TRETIARY_BA_2
     },
     disabled: {
-      color: color.Color.NEUTRAL_3,
-      backgroundColor: color.Color.NEUTRAL_1,
-      borderColor: color.Color.NEUTRAL_1
+      color: color.Color.TRETIARY_BA_3,
+      backgroundColor: color.Color.TRETIARY_BA_1,
+      borderColor: color.Color.TRETIARY_BA_1
     }
   }
 };
-var TypographyThemeBA = {
+var CheckboxThemeBA = {
   primary: {
-    color: color.Color.TYPOGRAPHY_PRIMARY
-  },
-  secondary: {
-    color: color.Color.TYPOGRAPHY_SECONDARY
-  },
+    normal: {
+      backgroundColor: color.Color.PRIMARY_BA_4
+    },
+    hover: {
+      backgroundColor: color.Color.PRIMARY_BA_4
+    },
+    focus: {
+      boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_BA_1)
+    },
+    checked: {
+      backgroundColor: color.Color.PRIMARY_BA_4
+    },
+    active: {
+      backgroundColor: color.Color.PRIMARY_BA_4,
+      borderColor: color.Color.PRIMARY_BA_4,
+      boxShadow: color.Color.PRIMARY_BA_4
+    },
+    disabled: {
+      backgroundColor: color.Color.BG_1
+    }
+  }
+};
+var TypographyThemeBA = {
   alert: {
-    color: color.Color.TYPOGRAPHY_ALERT
+    color: color.Color.ALERT
   },
   success: {
-    color: color.Color.TYPOGRAPHY_SUCCESS
-  },
-  link: {
-    color: color.Color.TYPOGRAPHY_LINK
+    color: color.Color.SUCCESS
   }
 };
 var SwitchThemeDefault = {
@@ -105,23 +124,26 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: color.Color.GRAPHITE_6,
-      borderColor: color.Color.GRAPHITE_6
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     },
     checked: {
-      backgroundColor: color.Color.GRAPHITE_10,
-      borderColor: color.Color.GRAPHITE_10
+      backgroundColor: color.Color.PRIMARY_BA_5,
+      borderColor: color.Color.PRIMARY_BA_5
     }
   }
 };
 var THEME_BA = {
   breakpoints: breakpoints.default,
   button: ButtonThemeBA,
+  checkbox: CheckboxThemeBA,
   typography: TypographyThemeBA,
-  "switch": SwitchThemeDefault
+  "switch": SwitchThemeDefault,
+  palette: color.Color
 };
 
 exports.ButtonThemeBA = ButtonThemeBA;
+exports.CheckboxThemeBA = CheckboxThemeBA;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_BA = THEME_BA;
 exports.TypographyThemeBA = TypographyThemeBA;

package/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,48 @@ 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;
+        TEXT_BA_PRIMARY: string;
+        TEXT_BA_SECONDARY: string;
+        TEXT_BA_TRETIARY: string;
+        ALERT: string;
+        SUCCESS: string;
+        WHITE: string;
+        BLACK: string;
+    };
 };