@bolio-ui/core 1.0.7 → 1.0.9

package/dist/Capacity/index.js

@@ -226,7 +226,7 @@ var defaultLayout = {
   pageWidthWithMargin: '930pt',
   breakpointMobile: defaultBreakpoints.xs.max,
   breakpointTablet: defaultBreakpoints.sm.max,
-  radius: '6px',
+  radius: '10px',
   unit: '16px'
 };
 
@@ -241,32 +241,32 @@ var palette$1 = {
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
-  selection: '#cee4fe',
+  selection: 'rgba(206,228,254, 0.5)',
   code: '#C25FFF',
   border: '#eaeaea',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -308,32 +308,32 @@ var palette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
-  selection: '#f81ce5',
+  selection: 'rgba(248,28,229, 0.5)',
   code: '#C25FFF',
   border: '#333',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -346,9 +346,9 @@ var expressiveness = {
   dropdownBoxShadow: '0 0 0 1px #333',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 0 0 1px #333',
-  shadowMedium: '0 0 0 1px #333',
-  shadowLarge: '0 0 0 1px #333',
+  shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
+  shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
+  shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
   portalOpacity: 0.75
 };
 var font = defaultFont;

package/dist/Card/Card.d.ts

@@ -3,6 +3,7 @@ import { CardTypes } from "../utils/prop-types";
 interface Props {
     hoverable?: boolean;
     rounded?: boolean;
+    bordered?: boolean;
     shadow?: boolean;
     className?: string;
     type?: CardTypes;

package/dist/Card/index.js

@@ -268,7 +268,7 @@ var defaultLayout = {
   pageWidthWithMargin: '930pt',
   breakpointMobile: defaultBreakpoints.xs.max,
   breakpointTablet: defaultBreakpoints.sm.max,
-  radius: '6px',
+  radius: '10px',
   unit: '16px'
 };
 
@@ -283,32 +283,32 @@ var palette$1 = {
   accents_6: '#444',
   accents_7: '#333',
   accents_8: '#111',
-  selection: '#cee4fe',
+  selection: 'rgba(206,228,254, 0.5)',
   code: '#C25FFF',
   border: '#eaeaea',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -350,32 +350,32 @@ var palette = {
   accents_6: '#999',
   accents_7: '#eaeaea',
   accents_8: '#fafafa',
-  selection: '#f81ce5',
+  selection: 'rgba(248,28,229, 0.5)',
   code: '#C25FFF',
   border: '#333',
   primary: '#0072F6',
-  primaryLight: '#96C1F3',
-  primaryLighter: '#CEE4FF',
+  primaryLight: '#CEE4FF',
+  primaryLighter: '#96C1F3',
   primaryDark: '#00254E',
   secondary: '#7828C9',
-  secondaryLighter: '#D1B1F1',
   secondaryLight: '#EADCF9',
+  secondaryLighter: '#D1B1F1',
   secondaryDark: '#290E45',
   error: '#F31261',
-  errorLight: '#FAA8C6',
-  errorLighter: '#FDD8E6',
+  errorLight: '#FDD8E6',
+  errorLighter: '#FAA8C6',
   errorDark: '#4E041F',
   success: '#17C965',
-  successLight: '#ADF5CD',
-  successLighter: '#DAFBE9',
+  successLight: '#DAFBE9',
+  successLighter: '#ADF5CD',
   successDark: '#06371C',
   warning: '#F5A525',
-  warningLight: '#FBDBA8',
-  warningLighter: '#FDEFD9',
+  warningLight: '#FDEFD9',
+  warningLighter: '#FBDBA8',
   warningDark: '#4E3105',
   info: '#06B7DC',
-  infoLighter: '#A5EEFE',
   infoLight: '#D7F8FF',
+  infoLighter: '#A5EEFE',
   infoDark: '#053B49',
   purple: '#f81ce5',
   alert: '#ff0080',
@@ -388,9 +388,9 @@ var expressiveness = {
   dropdownBoxShadow: '0 0 0 1px #333',
   scrollerStart: 'rgba(255, 255, 255, 1)',
   scrollerEnd: 'rgba(255, 255, 255, 0)',
-  shadowSmall: '0 0 0 1px #333',
-  shadowMedium: '0 0 0 1px #333',
-  shadowLarge: '0 0 0 1px #333',
+  shadowSmall: '0 5px 10px rgba(255, 255, 255, 0.12)',
+  shadowMedium: '0 8px 30px rgba(255, 255, 255, 0.12)',
+  shadowLarge: '0 30px 60px rgba(255, 255, 255, 0.12)',
   portalOpacity: 0.75
 };
 var font = defaultFont;
@@ -504,39 +504,48 @@ var getStyles = function getStyles(type, palette, isShadow) {
   var colors = {
     "default": {
       color: palette.foreground,
-      bgColor: palette.accents_2
-    },
-    dark: {
-      color: palette.background,
-      bgColor: palette.foreground
+      bgColor: palette.accents_1,
+      borderColor: palette.accents_2
     },
     primary: {
-      color: palette.background,
-      bgColor: palette.primary
+      color: palette.primaryDark,
+      bgColor: palette.primaryLighter,
+      borderColor: palette.primaryDark
     },
     secondary: {
-      color: palette.background,
-      bgColor: palette.secondary
+      color: palette.secondaryDark,
+      bgColor: palette.secondaryLighter,
+      borderColor: palette.secondaryDark
     },
     success: {
-      color: palette.background,
-      bgColor: palette.success
+      color: palette.successDark,
+      bgColor: palette.successLighter,
+      borderColor: palette.successDark
     },
     warning: {
-      color: palette.background,
-      bgColor: palette.warning
+      color: palette.warningDark,
+      bgColor: palette.warningLighter,
+      borderColor: palette.warningDark
     },
     error: {
+      color: palette.errorDark,
+      bgColor: palette.errorLighter,
+      borderColor: palette.errorDark
+    },
+    info: {
+      color: palette.infoDark,
+      bgColor: palette.infoLighter,
+      borderColor: palette.infoDark
+    },
+    dark: {
       color: palette.background,
-      bgColor: palette.error
+      bgColor: palette.foreground,
+      borderColor: palette.foreground
     },
     lite: {
       color: palette.foreground,
-      bgColor: palette.background
-    },
-    info: {
-      color: palette.background,
-      bgColor: palette.info
+      bgColor: palette.background,
+      borderColor: palette.foreground
     }
   };
   var showBorder = type === 'default' && !isShadow;
@@ -1211,10 +1220,11 @@ var ImageBrowser$1 = ImageBrowser;
 
 Image$1.Browser = ImageBrowser$1;
 
-var _excluded = ["children", "hoverable", "rounded", "className", "shadow", "type"];
+var _excluded = ["children", "hoverable", "rounded", "bordered", "className", "shadow", "type"];
 var defaultProps = {
   type: 'default',
   hoverable: false,
+  bordered: false,
   shadow: false,
   className: ''
 };
@@ -1223,8 +1233,8 @@ function CardComponent(_ref) {
   var children = _ref.children,
       hoverable = _ref.hoverable,
       rounded = _ref.rounded,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
+      bordered = _ref.bordered,
+      className = _ref.className,
       shadow = _ref.shadow,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'default' : _ref$type,
@@ -1259,11 +1269,11 @@ function CardComponent(_ref) {
 
   var hasContent = hasChild(withoutImageChildren, CardContent$1);
   return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: styledJsx_cjs.style.dynamic([["1209748169", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
+    className: styledJsx_cjs.style.dynamic([["3321159247", [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]]]) + " " + (props && props.className != null && props.className || useClasses$1('card', className) || "")
   }), imageChildren, hasContent ? withoutImageChildren : /*#__PURE__*/React__default["default"].createElement(CardContent$1, null, withoutImageChildren), footerChildren, /*#__PURE__*/React__default["default"].createElement(styledJsx_cjs.style, {
-    id: "1209748169",
-    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, borderColor, SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
-  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:none;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
+    id: "3321159247",
+    dynamic: [theme.palette.background, rounded ? '25px' : theme.layout.radius, shadow ? theme.expressiveness.shadowSmall : 'none', color, bgColor, bordered ? '1px solid' + borderColor : 'none', SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverShadow]
+  }, ".card.__jsx-style-dynamic-selector{background:".concat(theme.palette.background, ";-webkit-transition:all 0.2s ease;transition:all 0.2s ease;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";box-shadow:").concat(shadow ? theme.expressiveness.shadowSmall : 'none', ";box-sizing:border-box;color:").concat(color, ";background-color:").concat(bgColor, ";border:").concat(bordered ? '1px solid' + borderColor : 'none', ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.card.__jsx-style-dynamic-selector:hover{box-shadow:").concat(hoverShadow, ";}.card.__jsx-style-dynamic-selector img{width:100%;}.card.__jsx-style-dynamic-selector .image{border-bottom-left-radius:0;border-bottom-right-radius:0;}")));
 }
 
 CardComponent.defaultProps = defaultProps;