@occmundial/occ-atomic 3.0.0-beta.1 → 3.0.0-beta.11

package/CHANGELOG.md

@@ -1,3 +1,97 @@
+# [3.0.0-beta.11](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.10...v3.0.0-beta.11) (2024-06-07)
+
+
+### Bug Fixes
+
+* Call hoc window size and improve tip text use memo ([840e108](https://github.com/occmundial/occ-atomic/commit/840e1089cb3e80c6b2d2686c56b577166f6bc66f))
+* Resolve conflicts ([23e9ba8](https://github.com/occmundial/occ-atomic/commit/23e9ba8008ffe55e8af6910394580123032aee0e))
+
+# [3.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2024-06-06)
+
+
+### Features
+
+* Checkbox redesigned and documentation created ([48fbc8d](https://github.com/occmundial/occ-atomic/commit/48fbc8d0a912c300324fe244e9692a49f3a152b5))
+* Remove updates to component ([ab71716](https://github.com/occmundial/occ-atomic/commit/ab71716991a7700134dbafe0d8eda63e18ff8eab))
+
+# [3.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2024-06-06)
+
+
+### Bug Fixes
+
+* Move use memo before early return ([3d290c9](https://github.com/occmundial/occ-atomic/commit/3d290c9675fb24e20d131fdbaeef023920f3e439))
+
+# [3.0.0-beta.8](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2024-06-06)
+
+
+### Bug Fixes
+
+* Add border for promote alert ([5050f18](https://github.com/occmundial/occ-atomic/commit/5050f187b60f98118654ecbbe3e2cba7b29790ab))
+* Add min height to tip container ([579d263](https://github.com/occmundial/occ-atomic/commit/579d26306d59ce73b5084f9cd632dd12ed162fc5))
+* Resolve conflicts ([0a15dfa](https://github.com/occmundial/occ-atomic/commit/0a15dfa8d8da38a724d71622809f0e02c5bed0e9))
+
+
+### Features
+
+* Render tip in banner component ([239e2c8](https://github.com/occmundial/occ-atomic/commit/239e2c82c23d79698bd912931b314ceddf252fb4))
+* Update tip component with new design tokens ([b2367fc](https://github.com/occmundial/occ-atomic/commit/b2367fcaade288609df4c841c91fb308841ae4b0))
+
+
+### Performance Improvements
+
+* Memoize text replace in tip text component ([69180ce](https://github.com/occmundial/occ-atomic/commit/69180ce9cb1e812769e31a837257d8c8e6f24199))
+
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
+# [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
+
+
+### Bug Fixes
+
+* Text new emphasis props ([bc3e934](https://github.com/occmundial/occ-atomic/commit/bc3e934299230cb0b3a0fddeb4c8fcd2b72a052f))
+
+# [3.0.0-beta.5](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2024-06-04)
+
+
+### Bug Fixes
+
+* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
+
+# [3.0.0-beta.4](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2024-06-04)
+
+
+### Bug Fixes
+
+* Make toggle unshrinkable inside a flex box ([6067fba](https://github.com/occmundial/occ-atomic/commit/6067fbad2276824bcec0c35748beea0006b73300))
+
+# [3.0.0-beta.3](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2024-05-30)
+
+
+### Bug Fixes
+
+* Remove bg from group pill on focus ([6cdb2f1](https://github.com/occmundial/occ-atomic/commit/6cdb2f1573b6a297810d4e075c462ccc2b9140b1))
+* Remove repeated selectors and change usecallback dependencies ([4d23be0](https://github.com/occmundial/occ-atomic/commit/4d23be0f88672df2e3c39578e3a4638385c23594))
+* Resolve conflicts with beta ([0e51771](https://github.com/occmundial/occ-atomic/commit/0e5177122818b55d51a28d013c10164f18abaf97))
+
+
+### Features
+
+* Disabled all group items when pill disabled prop is true ([922cb8a](https://github.com/occmundial/occ-atomic/commit/922cb8a0146f21a0ad3a49da87321a3ebc6c6feb))
+* Update pill styles with design tokens ([a6caadc](https://github.com/occmundial/occ-atomic/commit/a6caadc0170b290865332278fa4b3850ee452faa))
+
+# [3.0.0-beta.2](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2024-05-28)
+
+
+### Features
+
+* Updated toogle component and documentation ([fad2eca](https://github.com/occmundial/occ-atomic/commit/fad2eca12daa8802b85b5f35bab564b90ce9bd10))
+
 # [3.0.0-beta.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v3.0.0-beta.1) (2024-05-27)
 
 

package/build/Banner/Banner.js

@@ -9,17 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
 var _WindowSize = _interopRequireDefault(require("../WindowSize"));
 
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +21,27 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      winWidth = _ref.winWidth,
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    size: winWidth < _grid["default"].xs ? 'small' : 'large',
+    center: true,
+    type: "banner",
+    cta: cta,
+    theme: theme,
+    icon: true
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,7 +51,14 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote'])
 };
 
 var _default = (0, _WindowSize["default"])(Banner);

package/build/Button/__snapshots__/Button.test.js.snap

@@ -145,10 +145,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {

package/build/Button/styles.js

@@ -346,8 +346,6 @@ var _default = {
     transition: '0.3s all'
   },
   iconRight: {
-    width: 16,
-    height: 16,
     marginLeft: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'

package/build/Checkbox/Checkbox.js

@@ -101,6 +101,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
+        tabIndex: -1,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,

package/build/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -6,67 +6,101 @@ exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
     "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-        "!important",
-      ],
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    },
+    "& $check:before": Object {
+      "background": "#0059CD",
+      "borderColor": "rgba(255,255,255,0.2)",
     },
   },
   "check": Object {
     "&:after": Object {
       "background": "transparent",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 18,
+      "height": 20,
       "left": "50%",
       "marginTop": -1,
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
       "transition": "0.3s all",
-      "width": 18,
+      "width": 20,
     },
     "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
-      "borderRadius": 4,
+      "background": "#fff",
+      "border": "1px solid #D3D4DC",
+      "borderRadius": "4px",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 16,
+      "height": 20,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
-      "width": 16,
+      "width": 20,
     },
-    "height": 24,
+    "height": "24px",
     "position": "relative",
-    "width": 24,
+    "width": "24px",
   },
   "cont": Object {
+    "&$active, &$undetermined": Object {
+      "&:hover $check:before, &:active $check:before": Object {
+        "background": "#083CAE",
+      },
+    },
     "&:after": Object {
       "clear": "both",
       "content": "\\"\\"",
       "display": "table",
     },
-    "&:hover $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNkZGRkZGQiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "&:focus $check:before": Object {
+      "borderWidth": 1,
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:not($active), &:not($undetermined)": Object {
+      "&:active $check:before": Object {
+        "borderWidth": 2,
+      },
+      "&:hover $check:before, &:active $check:before": Object {
+        "borderColor": "#6C6F89",
+      },
     },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "&$active $check:after": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    },
+    "&$active, &$undetermined": Object {
+      "& $check:before": Object {
+        "background": "hsl(221 91.2% 35.7% / 0.1)",
+        "borderColor": "rgba(255,255,255,0.2)",
+      },
+    },
+    "&$undetermined $check:after": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzhEQTVEQSIgLz4KICAgICAgICA8L3N2Zz4=)",
+    },
+    "&:not($active), &:not($undetermined)": Object {
+      "& $check:before": Object {
+        "background": "#EDEDF1",
+        "borderColor": "#D3D4DC",
+      },
+    },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
     "flex": "1",
     "float": "left",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -75,16 +109,17 @@ Object {
   },
   "right": Object {
     "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "undetermined": Object {
     "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzA4M2NhZSIgLz4KICAgICAgICA8L3N2Zz4=)",
-        "!important",
-      ],
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iI2ZmZiIgLz4KICAgICAgICA8L3N2Zz4=)",
       "marginTop": 0,
     },
+    "& $check:before": Object {
+      "background": "#0059CD",
+      "borderColor": "rgba(255,255,255,0.2)",
+    },
   },
 }
 `;

package/build/Checkbox/styles.js

@@ -5,20 +5,24 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var checkbox = _colors["default"].checkbox,
+    icon = _colors["default"].icon;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
@@ -29,30 +33,46 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:hover $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].grey200]))
+    '&:focus $check:before': {
+      boxShadow: _shadows["default"]['focus-bright-blue'],
+      borderWidth: 1
+    },
+    '&$active, &$undetermined': {
+      '&:hover $check:before, &:active $check:before': {
+        background: checkbox['selected']['bg']['hover']
+      }
+    },
+    '&:not($active), &:not($undetermined)': {
+      '&:hover $check:before, &:active $check:before': {
+        borderColor: checkbox['unselected']['border']['hover']
+      },
+      '&:active $check:before': {
+        borderWidth: 2
+      }
     }
   },
   check: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
     position: 'relative',
     '&:before': {
       content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
-      borderRadius: 4,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
+      borderRadius: _borderRadius["default"]['br-xs'],
       position: 'absolute',
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
+      border: "1px solid ".concat(checkbox['unselected']['border']['default']),
+      background: checkbox['unselected']['bg']['default']
     },
     '&:after': {
       content: '""',
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
+      boxSizing: 'border-box',
+      width: 20,
+      height: 20,
       marginTop: -1,
       position: 'absolute',
       top: '50%',
@@ -64,27 +84,52 @@ var _default = {
   },
   active: {
     '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].check.icon([_colors["default"].prim])), '!important']
+      background: _icons["default"].base(_icons["default"].check.icon([icon['inverse']['default']]))
+    },
+    '& $check:before': {
+      borderColor: checkbox['selected']['border']['default'],
+      background: checkbox['selected']['bg']['default']
     }
   },
   undetermined: {
+    '& $check:before': {
+      borderColor: checkbox['selected']['border']['default'],
+      background: checkbox['selected']['bg']['default']
+    },
     '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].minus.icon([_colors["default"].prim])), '!important'],
+      background: _icons["default"].base(_icons["default"].minus.icon([icon['inverse']['default']])),
       marginTop: 0
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '&$active, &$undetermined': {
+      '& $check:before': {
+        borderColor: checkbox['selected']['border']['default'],
+        background: checkbox['selected']['bg']['disabled']
+      }
+    },
+    '&$undetermined $check:after': {
+      background: _icons["default"].base(_icons["default"].minus.icon([icon['brand']['disabled']]))
+    },
+    '&$active $check:after': {
+      background: _icons["default"].base(_icons["default"].check.icon([icon['brand']['disabled']]))
+    },
+    '&:not($active), &:not($undetermined)': {
+      '& $check:before': {
+        borderColor: checkbox['unselected']['border']['default'],
+        background: checkbox['unselected']['bg']['disabled']
+      }
+    }
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     cursor: 'pointer',
     "float": 'left',
     flex: '1'
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-2'],
     "float": 'right'
   },
   overflow: {