colibri-ui 0.7.5 → 0.7.7

package/Theme/themes/default.js

@@ -8,94 +8,113 @@ var ButtonThemeDefault = {
     color: color.Color.BLACK,
     borderRadius: "26px"
   },
-  "default": {
+  primary: {
     normal: {
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_4,
+      borderColor: color.Color.PRIMARY_4
     },
     hover: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_5,
+      borderColor: color.Color.PRIMARY_5
     },
     focus: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_5,
+      borderColor: color.Color.PRIMARY_5
     },
     active: {
-      backgroundColor: color.Color.NEUTRAL_3,
-      borderColor: color.Color.NEUTRAL_3
+      color: color.Color.WHITE,
+      backgroundColor: color.Color.PRIMARY_5,
+      borderColor: color.Color.PRIMARY_5
     },
     disabled: {
-      color: color.Color.NEUTRAL_3,
-      backgroundColor: color.Color.NEUTRAL_1,
-      borderColor: color.Color.NEUTRAL_1
+      color: color.Color.PRIMARY_3,
+      backgroundColor: color.Color.PRIMARY_2,
+      borderColor: color.Color.PRIMARY_2
     }
   },
-  primary: {
+  secondary: {
     normal: {
       color: color.Color.WHITE,
-      backgroundColor: color.Color.BLUE_9,
-      borderColor: color.Color.BLUE_9
+      backgroundColor: color.Color.SECONDARY_4,
+      borderColor: color.Color.SECONDARY_4
     },
     hover: {
       color: color.Color.WHITE,
-      backgroundColor: color.Color.BLUE_10,
-      borderColor: color.Color.BLUE_10
+      backgroundColor: color.Color.SECONDARY_5,
+      borderColor: color.Color.SECONDARY_5
     },
     focus: {
       color: color.Color.WHITE,
-      backgroundColor: color.Color.BLUE_10,
-      borderColor: color.Color.BLUE_10
+      backgroundColor: color.Color.SECONDARY_5,
+      borderColor: color.Color.SECONDARY_5
     },
     active: {
       color: color.Color.WHITE,
-      backgroundColor: color.Color.BLUE_10,
-      borderColor: color.Color.BLUE_10
+      backgroundColor: color.Color.SECONDARY_5,
+      borderColor: color.Color.SECONDARY_5
     },
     disabled: {
-      color: color.Color.BLUE_7,
-      backgroundColor: color.Color.BLUE_4,
-      borderColor: color.Color.BLUE_4
+      color: color.Color.SECONDARY_3,
+      backgroundColor: color.Color.SECONDARY_2,
+      borderColor: color.Color.SECONDARY_2
     }
   },
   clear: {
     normal: {
-      color: color.Color.GRAY_9,
+      color: color.Color.TRETIARY_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_5,
+      backgroundColor: color.Color.TRETIARY_2,
+      borderColor: color.Color.TRETIARY_2
     },
     active: {
-      color: color.Color.BLACK,
-      backgroundColor: color.Color.NEUTRAL_2,
-      borderColor: color.Color.NEUTRAL_2
+      color: color.Color.TRETIARY_5,
+      backgroundColor: color.Color.TRETIARY_2,
+      borderColor: color.Color.TRETIARY_2
     },
     disabled: {
-      color: color.Color.NEUTRAL_3,
-      backgroundColor: color.Color.NEUTRAL_1,
-      borderColor: color.Color.NEUTRAL_1
+      color: color.Color.TRETIARY_3,
+      backgroundColor: color.Color.TRETIARY_1,
+      borderColor: color.Color.TRETIARY_1
     }
   }
 };
-var TypographyThemeDefault = {
+var CheckboxThemeDefault = {
   primary: {
-    color: color.Color.TYPOGRAPHY_PRIMARY
-  },
-  secondary: {
-    color: color.Color.TYPOGRAPHY_SECONDARY
-  },
+    normal: {
+      backgroundColor: color.Color.PRIMARY_4
+    },
+    hover: {
+      backgroundColor: color.Color.PRIMARY_4
+    },
+    focus: {
+      boxShadow: "0 0 0 2px ".concat(color.Color.PRIMARY_1)
+    },
+    checked: {
+      backgroundColor: color.Color.PRIMARY_4
+    },
+    active: {
+      backgroundColor: color.Color.PRIMARY_4,
+      borderColor: color.Color.PRIMARY_4,
+      boxShadow: color.Color.PRIMARY_4
+    },
+    disabled: {
+      backgroundColor: color.Color.BG_1
+    }
+  }
+};
+var TypographyThemeDefault = {
   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 = {
@@ -104,23 +123,26 @@ var SwitchThemeDefault = {
   },
   state: {
     normal: {
-      backgroundColor: color.Color.BLUE_6,
-      borderColor: color.Color.BLUE_6
+      backgroundColor: color.Color.BG_1,
+      borderColor: color.Color.BG_1
     },
     checked: {
-      backgroundColor: color.Color.BLUE_10,
-      borderColor: color.Color.BLUE_10
+      backgroundColor: color.Color.PRIMARY_5,
+      borderColor: color.Color.PRIMARY_5
     }
   }
 };
 var THEME_DEFAULT = {
   breakpoints: breakpoints.default,
   button: ButtonThemeDefault,
+  checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
-  "switch": SwitchThemeDefault
+  "switch": SwitchThemeDefault,
+  palette: color.Color
 };
 
 exports.ButtonThemeDefault = ButtonThemeDefault;
+exports.CheckboxThemeDefault = CheckboxThemeDefault;
 exports.SwitchThemeDefault = SwitchThemeDefault;
 exports.THEME_DEFAULT = THEME_DEFAULT;
 exports.TypographyThemeDefault = TypographyThemeDefault;

package/Typography/index.js

@@ -6,19 +6,17 @@ var tslib = require('tslib');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var react = require('react');
 var styles = require('./styles.js');
-var index_props = require('./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 ? index_props.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 = react.useMemo(function () {

package/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";