colibri-ui 0.7.3 → 0.7.5

package/Theme/color.js

@@ -2,53 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Color;
-(function (Color) {
-  Color["WHITE"] = "#fff";
-  Color["BLACK"] = "#000";
-  Color["BLUE_1"] = "#FBFDFF";
-  Color["BLUE_2"] = "#F5F9FF";
-  Color["BLUE_3"] = "#E9F3FF";
-  Color["BLUE_4"] = "#DAECFF";
-  Color["BLUE_5"] = "#C9E2FF";
-  Color["BLUE_6"] = "#B4D5FF";
-  Color["BLUE_7"] = "#9AC3FD";
-  Color["BLUE_8"] = "#73ABF8";
-  Color["BLUE_9"] = "#0974EB";
-  Color["BLUE_10"] = "#0066DC";
-  Color["BLUE_11"] = "#006DE3";
-  Color["BLUE_12"] = "#093266";
-  Color["GRAPHITE_1"] = "#FCFDFE";
-  Color["GRAPHITE_2"] = "#F8FAFB";
-  Color["GRAPHITE_3"] = "#EDF0F4";
-  Color["GRAPHITE_4"] = "#E4E8ED";
-  Color["GRAPHITE_5"] = "#DBE1E6";
-  Color["GRAPHITE_6"] = "#D1D8DF";
-  Color["GRAPHITE_7"] = "#C4CDD6";
-  Color["GRAPHITE_8"] = "#AFB9C3";
-  Color["GRAPHITE_9"] = "#24292E";
-  Color["GRAPHITE_10"] = "#383D42";
-  Color["GRAPHITE_11"] = "#5E666F";
-  Color["GRAPHITE_12"] = "#22272B";
-  Color["GRAY_1"] = "#FCFCFD";
-  Color["GRAY_2"] = "#F9F9FB";
-  Color["GRAY_3"] = "#EFF0F3";
-  Color["GRAY_4"] = "#E7E8EC";
-  Color["GRAY_5"] = "#E0E1E6";
-  Color["GRAY_6"] = "#D8D9E0";
-  Color["GRAY_7"] = "#CDCED7";
-  Color["GRAY_8"] = "#B9BBC6";
-  Color["GRAY_9"] = "#8B8D98";
-  Color["GRAY_10"] = "#80828D";
-  Color["GRAY_11"] = "#62636C";
-  Color["GRAY_12"] = "#1E1F24";
-  Color["PURPLE_1"] = "rgba(38, 49, 129, .07)";
-  Color["PURPLE_2"] = "rgba(38, 49, 129, .15)";
-  Color["PURPLE_3"] = "rgba(38, 49, 129, .3)";
-  Color["NEUTRAL_1"] = "rgba(22,51,0,.05)";
-  Color["NEUTRAL_2"] = "rgba(22,51,0,.078)";
-  Color["NEUTRAL_3"] = "rgba(22,51,0,.129)";
-})(Color || (Color = {}));
-var Color$1 = Color;
+var Color = {
+  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"
+};
 
-exports.default = Color$1;
+exports.Color = Color;
+exports.default = Color;

package/Theme/index.d.ts

@@ -4,10 +4,74 @@ export declare const THEMES: {
     DEFAULT: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        typography: {
+            primary: {
+                color: string;
+            };
+            secondary: {
+                color: string;
+            };
+            alert: {
+                color: string;
+            };
+            success: {
+                color: string;
+            };
+            link: {
+                color: string;
+            };
+        };
+        switch: {
+            circle: {
+                backgroundColor: string;
+            };
+            state: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                checked: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
     };
     BA: {
         breakpoints: import("./breakpoints").BreakpointsTheme;
         button: import("../Button/index.props").ButtonVariant & import("../Button/index.props").ButtonBase;
+        typography: {
+            primary: {
+                color: string;
+            };
+            secondary: {
+                color: string;
+            };
+            alert: {
+                color: string;
+            };
+            success: {
+                color: string;
+            };
+            link: {
+                color: string;
+            };
+        };
+        switch: {
+            circle: {
+                backgroundColor: string;
+            };
+            state: {
+                normal: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+                checked: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
     };
 };
 export declare const ThemeProvider: FC<{

package/Theme/index.props.d.ts

@@ -1,6 +1,10 @@
 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;
     breakpoints: BreakpointsTheme;
+    typography: TypographyVariant;
+    switch: SwitchStates;
 };

package/Theme/themes/buenos_aires.d.ts

@@ -1,6 +1,70 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-export declare const ButtonBA: ButtonVariant & ButtonBase;
+export declare const ButtonThemeBA: ButtonVariant & ButtonBase;
+export declare const TypographyThemeBA: {
+    primary: {
+        color: string;
+    };
+    secondary: {
+        color: string;
+    };
+    alert: {
+        color: string;
+    };
+    success: {
+        color: string;
+    };
+    link: {
+        color: string;
+    };
+};
+export declare const SwitchThemeDefault: {
+    circle: {
+        backgroundColor: string;
+    };
+    state: {
+        normal: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+};
 export declare const THEME_BA: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    typography: {
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        alert: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    switch: {
+        circle: {
+            backgroundColor: string;
+        };
+        state: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            checked: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+    };
 };

package/Theme/themes/buenos_aires.js

@@ -3,89 +3,125 @@
 var color = require('../color.js');
 var breakpoints = require('../breakpoints.js');
 
-var ButtonBA = {
+var ButtonThemeBA = {
   base: {
-    color: color.default.WHITE,
+    color: color.Color.WHITE,
     borderRadius: "26px",
     border: "none"
   },
   "default": {
     normal: {
-      backgroundColor: color.default.GRAPHITE_9,
-      borderColor: color.default.GRAPHITE_9
+      backgroundColor: color.Color.GRAPHITE_9,
+      borderColor: color.Color.GRAPHITE_9
     },
     hover: {
-      backgroundColor: color.default.GRAPHITE_10,
-      borderColor: color.default.GRAPHITE_10
+      backgroundColor: color.Color.GRAPHITE_10,
+      borderColor: color.Color.GRAPHITE_10
     },
     focus: {
-      backgroundColor: color.default.GRAPHITE_10,
-      borderColor: color.default.GRAPHITE_10
+      backgroundColor: color.Color.GRAPHITE_10,
+      borderColor: color.Color.GRAPHITE_10
     },
     active: {
-      backgroundColor: color.default.GRAPHITE_10,
-      borderColor: color.default.GRAPHITE_10
+      backgroundColor: color.Color.GRAPHITE_10,
+      borderColor: color.Color.GRAPHITE_10
     },
     disabled: {
-      color: color.default.GRAPHITE_7,
-      backgroundColor: color.default.GRAPHITE_5,
-      borderColor: color.default.GRAPHITE_5
+      color: color.Color.GRAPHITE_7,
+      backgroundColor: color.Color.GRAPHITE_5,
+      borderColor: color.Color.GRAPHITE_5
     }
   },
   primary: {
     normal: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.PURPLE_2,
-      borderColor: color.default.PURPLE_2
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.PURPLE_2,
+      borderColor: color.Color.PURPLE_2
     },
     hover: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.PURPLE_3,
-      borderColor: color.default.PURPLE_3
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.PURPLE_3,
+      borderColor: color.Color.PURPLE_3
     },
     focus: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.PURPLE_3,
-      borderColor: color.default.PURPLE_3
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.PURPLE_3,
+      borderColor: color.Color.PURPLE_3
     },
     active: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.PURPLE_3,
-      borderColor: color.default.PURPLE_3
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.PURPLE_3,
+      borderColor: color.Color.PURPLE_3
     },
     disabled: {
-      color: color.default.PURPLE_3,
-      backgroundColor: color.default.PURPLE_1,
-      borderColor: color.default.PURPLE_1
+      color: color.Color.PURPLE_3,
+      backgroundColor: color.Color.PURPLE_1,
+      borderColor: color.Color.PURPLE_1
     }
   },
   clear: {
     normal: {
-      color: color.default.GRAY_9,
-      backgroundColor: color.default.WHITE,
-      borderColor: color.default.WHITE
+      color: color.Color.GRAY_9,
+      backgroundColor: color.Color.WHITE,
+      borderColor: color.Color.WHITE
     },
     hover: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.NEUTRAL_2,
-      borderColor: color.default.NEUTRAL_2
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
     },
     active: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.NEUTRAL_2,
-      borderColor: color.default.NEUTRAL_2
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
     },
     disabled: {
-      color: color.default.NEUTRAL_3,
-      backgroundColor: color.default.NEUTRAL_1,
-      borderColor: color.default.NEUTRAL_1
+      color: color.Color.NEUTRAL_3,
+      backgroundColor: color.Color.NEUTRAL_1,
+      borderColor: color.Color.NEUTRAL_1
+    }
+  }
+};
+var TypographyThemeBA = {
+  primary: {
+    color: color.Color.TYPOGRAPHY_PRIMARY
+  },
+  secondary: {
+    color: color.Color.TYPOGRAPHY_SECONDARY
+  },
+  alert: {
+    color: color.Color.TYPOGRAPHY_ALERT
+  },
+  success: {
+    color: color.Color.TYPOGRAPHY_SUCCESS
+  },
+  link: {
+    color: color.Color.TYPOGRAPHY_LINK
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: color.Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: color.Color.GRAPHITE_6,
+      borderColor: color.Color.GRAPHITE_6
+    },
+    checked: {
+      backgroundColor: color.Color.GRAPHITE_10,
+      borderColor: color.Color.GRAPHITE_10
     }
   }
 };
 var THEME_BA = {
   breakpoints: breakpoints.default,
-  button: ButtonBA
+  button: ButtonThemeBA,
+  typography: TypographyThemeBA,
+  "switch": SwitchThemeDefault
 };
 
-exports.ButtonBA = ButtonBA;
+exports.ButtonThemeBA = ButtonThemeBA;
+exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_BA = THEME_BA;
+exports.TypographyThemeBA = TypographyThemeBA;

package/Theme/themes/default.d.ts

@@ -1,6 +1,70 @@
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
-export declare const ButtonDefault: ButtonVariant & ButtonBase;
+export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
+export declare const TypographyThemeDefault: {
+    primary: {
+        color: string;
+    };
+    secondary: {
+        color: string;
+    };
+    alert: {
+        color: string;
+    };
+    success: {
+        color: string;
+    };
+    link: {
+        color: string;
+    };
+};
+export declare const SwitchThemeDefault: {
+    circle: {
+        backgroundColor: string;
+    };
+    state: {
+        normal: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        checked: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+};
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    typography: {
+        primary: {
+            color: string;
+        };
+        secondary: {
+            color: string;
+        };
+        alert: {
+            color: string;
+        };
+        success: {
+            color: string;
+        };
+        link: {
+            color: string;
+        };
+    };
+    switch: {
+        circle: {
+            backgroundColor: string;
+        };
+        state: {
+            normal: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            checked: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+        };
+    };
 };

package/Theme/themes/default.js

@@ -3,88 +3,124 @@
 var color = require('../color.js');
 var breakpoints = require('../breakpoints.js');
 
-var ButtonDefault = {
+var ButtonThemeDefault = {
   base: {
-    color: color.default.BLACK,
+    color: color.Color.BLACK,
     borderRadius: "26px"
   },
   "default": {
     normal: {
-      backgroundColor: color.default.NEUTRAL_2,
-      borderColor: color.default.NEUTRAL_2
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
     },
     hover: {
-      backgroundColor: color.default.NEUTRAL_3,
-      borderColor: color.default.NEUTRAL_3
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
     },
     focus: {
-      backgroundColor: color.default.NEUTRAL_3,
-      borderColor: color.default.NEUTRAL_3
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
     },
     active: {
-      backgroundColor: color.default.NEUTRAL_3,
-      borderColor: color.default.NEUTRAL_3
+      backgroundColor: color.Color.NEUTRAL_3,
+      borderColor: color.Color.NEUTRAL_3
     },
     disabled: {
-      color: color.default.NEUTRAL_3,
-      backgroundColor: color.default.NEUTRAL_1,
-      borderColor: color.default.NEUTRAL_1
+      color: color.Color.NEUTRAL_3,
+      backgroundColor: color.Color.NEUTRAL_1,
+      borderColor: color.Color.NEUTRAL_1
     }
   },
   primary: {
     normal: {
-      color: color.default.WHITE,
-      backgroundColor: color.default.BLUE_9,
-      borderColor: color.default.BLUE_9
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.BLUE_9,
+      borderColor: color.Color.BLUE_9
     },
     hover: {
-      color: color.default.WHITE,
-      backgroundColor: color.default.BLUE_10,
-      borderColor: color.default.BLUE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.BLUE_10,
+      borderColor: color.Color.BLUE_10
     },
     focus: {
-      color: color.default.WHITE,
-      backgroundColor: color.default.BLUE_10,
-      borderColor: color.default.BLUE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.BLUE_10,
+      borderColor: color.Color.BLUE_10
     },
     active: {
-      color: color.default.WHITE,
-      backgroundColor: color.default.BLUE_10,
-      borderColor: color.default.BLUE_10
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.BLUE_10,
+      borderColor: color.Color.BLUE_10
     },
     disabled: {
-      color: color.default.BLUE_7,
-      backgroundColor: color.default.BLUE_4,
-      borderColor: color.default.BLUE_4
+      color: color.Color.BLUE_7,
+      backgroundColor: color.Color.BLUE_4,
+      borderColor: color.Color.BLUE_4
     }
   },
   clear: {
     normal: {
-      color: color.default.GRAY_9,
-      backgroundColor: color.default.WHITE,
-      borderColor: color.default.WHITE
+      color: color.Color.GRAY_9,
+      backgroundColor: color.Color.WHITE,
+      borderColor: color.Color.WHITE
     },
     hover: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.NEUTRAL_2,
-      borderColor: color.default.NEUTRAL_2
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
     },
     active: {
-      color: color.default.BLACK,
-      backgroundColor: color.default.NEUTRAL_2,
-      borderColor: color.default.NEUTRAL_2
+      color: color.Color.BLACK,
+      backgroundColor: color.Color.NEUTRAL_2,
+      borderColor: color.Color.NEUTRAL_2
     },
     disabled: {
-      color: color.default.NEUTRAL_3,
-      backgroundColor: color.default.NEUTRAL_1,
-      borderColor: color.default.NEUTRAL_1
+      color: color.Color.NEUTRAL_3,
+      backgroundColor: color.Color.NEUTRAL_1,
+      borderColor: color.Color.NEUTRAL_1
+    }
+  }
+};
+var TypographyThemeDefault = {
+  primary: {
+    color: color.Color.TYPOGRAPHY_PRIMARY
+  },
+  secondary: {
+    color: color.Color.TYPOGRAPHY_SECONDARY
+  },
+  alert: {
+    color: color.Color.TYPOGRAPHY_ALERT
+  },
+  success: {
+    color: color.Color.TYPOGRAPHY_SUCCESS
+  },
+  link: {
+    color: color.Color.TYPOGRAPHY_LINK
+  }
+};
+var SwitchThemeDefault = {
+  circle: {
+    backgroundColor: color.Color.WHITE
+  },
+  state: {
+    normal: {
+      backgroundColor: color.Color.BLUE_6,
+      borderColor: color.Color.BLUE_6
+    },
+    checked: {
+      backgroundColor: color.Color.BLUE_10,
+      borderColor: color.Color.BLUE_10
     }
   }
 };
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
-  button: ButtonDefault
+  button: ButtonThemeDefault,
+  typography: TypographyThemeDefault,
+  "switch": SwitchThemeDefault
 };
 
-exports.ButtonDefault = ButtonDefault;
+exports.ButtonThemeDefault = ButtonThemeDefault;
+exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
+exports.TypographyThemeDefault = TypographyThemeDefault;

package/Typography/index.d.ts

@@ -0,0 +1,4 @@
+import { type TypographyProps } from "./index.props";
+import type { FC, PropsWithChildren } from "react";
+declare const Typography: FC<PropsWithChildren<TypographyProps>>;
+export default Typography;