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

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [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/Pill/Choice/Choice.js

@@ -7,103 +7,93 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var Choice = /*#__PURE__*/function (_React$Component) {
-  _inherits(Choice, _React$Component);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-  var _super = _createSuper(Choice);
-
-  function Choice(props) {
-    var _this;
+var getStylesByStatus = function getStylesByStatus(selected, disabled) {
+  if (selected) {
+    if (disabled) {
+      return {
+        iconColor: _colors["default"].icon.inverse.disabled,
+        button: 'selectedDisabled',
+        text: 'textSelectedDisabled'
+      };
+    }
 
-    _classCallCheck(this, Choice);
+    return {
+      iconColor: _colors["default"].icon.inverse["default"],
+      button: 'selected',
+      text: 'textSelected'
+    };
+  }
 
-    _this = _super.call(this, props);
-    _this.handleOnClick = _this.handleOnClick.bind(_assertThisInitialized(_this));
-    return _this;
+  if (disabled) {
+    return {
+      iconColor: _colors["default"].icon.brand.disabled,
+      button: 'disabled',
+      text: 'textDisabled'
+    };
   }
 
-  _createClass(Choice, [{
-    key: "handleOnClick",
-    value: function handleOnClick() {
-      var _this$props = this.props,
-          id = _this$props.id,
-          onClick = _this$props.onClick;
-      if (onClick) onClick(id);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          children = _this$props2.children,
-          selected = _this$props2.selected,
-          disabled = _this$props2.disabled,
-          idPrefix = _this$props2.idPrefix,
-          testId = _this$props2.testId,
-          leftIcon = _this$props2.leftIcon,
-          rightIcon = _this$props2.rightIcon,
-          id = _this$props2.id;
-      var iconColor = disabled ? _colors["default"].grey200 : selected ? _colors["default"].prim : _colors["default"].grey900;
-      return /*#__PURE__*/_react["default"].createElement("button", {
-        className: "".concat(classes.pill).concat(selected ? " ".concat(classes.selected) : disabled ? " ".concat(classes.disabled) : ''),
-        onClick: this.handleOnClick,
-        id: idPrefix ? "".concat(idPrefix).concat(id) : null,
-        "data-testid": testId ? "".concat(testId).concat(id) : null
-      }, leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: leftIcon,
-        colors: [iconColor],
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small
-      }), children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-        tag: "span",
-        className: classes.text,
-        primary: selected,
-        disabled: disabled
-      }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: rightIcon,
-        colors: [iconColor],
-        width: _iconSizes["default"].small,
-        height: _iconSizes["default"].small
-      }));
-    }
-  }]);
+  return {
+    iconColor: _colors["default"].icon.brand["default"],
+    button: 'enabled',
+    text: 'textEnabled'
+  };
+};
 
-  return Choice;
-}(_react["default"].Component);
+var Choice = function Choice(props) {
+  var classes = props.classes,
+      children = props.children,
+      selected = props.selected,
+      disabled = props.disabled,
+      idPrefix = props.idPrefix,
+      testId = props.testId,
+      leftIcon = props.leftIcon,
+      rightIcon = props.rightIcon,
+      onClick = props.onClick,
+      id = props.id;
+  var handleOnClick = (0, _react.useCallback)(function () {
+    return onClick(id);
+  }, [onClick, id]);
+  var conditionedStyles = (0, _react.useMemo)(function () {
+    return getStylesByStatus(!!selected, !!disabled);
+  }, [selected, disabled]);
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({
+    className: "".concat(classes.pill, " ").concat(classes[conditionedStyles.button])
+  }, onClick && {
+    onClick: handleOnClick
+  }, {
+    disabled: disabled,
+    id: idPrefix ? "".concat(idPrefix).concat(id) : null,
+    "data-testid": testId ? "".concat(testId).concat(id) : null
+  }), leftIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: leftIcon,
+    colors: [conditionedStyles.iconColor],
+    width: 18,
+    height: 18
+  }), children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text, " ").concat(classes[conditionedStyles.text])
+  }, children), rightIcon && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    iconName: rightIcon,
+    colors: [conditionedStyles.iconColor],
+    width: 18,
+    height: 18
+  }));
+};
 
 Choice.propTypes = {
   classes: _propTypes["default"].object.isRequired,

package/build/Pill/Choice/styles.js

@@ -5,55 +5,96 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
-    outline: 0,
+    border: 0,
     transition: '0.3s all',
     cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
+    borderRadius: _borderRadius["default"]['br-md'],
     maxWidth: '100%',
+    outline: 0,
     display: 'inline-flex',
     alignItems: 'center',
     minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
+      marginRight: _spacing["default"]['size-2']
+    }
+  },
+  enabled: {
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: _colors["default"].pill.unselected.bg["default"]
     }
   },
+  disabled: {
+    background: _colors["default"].pill.unselected.bg.disabled,
+    pointerEvents: 'none'
+  },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
     zIndex: 1,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary,
+    '&:hover': {
+      background: _colors["default"].pill.selected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.selected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
-  disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+  selectedDisabled: {
+    background: _colors["default"].pill.selected.bg.disabled,
     pointerEvents: 'none'
   },
   text: {
     flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']],
+    marginLeft: _spacing["default"]['size-1'],
+    marginRight: _spacing["default"]['size-1']
+  },
+  textSelectedDisabled: {
+    color: _colors["default"].text.white.secondary
+  },
+  textSelected: {
+    color: _colors["default"].text.white.primary
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  textEnabled: {
+    color: _colors["default"].text.indigo.primary
   }
 };
 exports["default"] = _default;

package/build/Pill/Group/Group.js

@@ -17,7 +17,8 @@ var Group = function Group(_ref) {
       selected = _ref.selected,
       onSelect = _ref.onSelect,
       idPrefix = _ref.idPrefix,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      disabled = _ref.disabled;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.pillGroup
   }, items.map(function (item, index) {
@@ -25,7 +26,8 @@ var Group = function Group(_ref) {
       key: item.id,
       id: idPrefix ? "".concat(idPrefix).concat(item.id) : null,
       "data-testid": testId ? "".concat(testId).concat(index) : null,
-      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : item.disabled ? " ".concat(classes.disabled) : ''),
+      disabled: disabled || item.disabled,
+      className: "".concat(classes.pill).concat(selected == item.id ? " ".concat(classes.selected) : disabled || item.disabled ? " ".concat(classes.disabled) : ''),
       onClick: selected != item.id ? function () {
         onSelect(item.id, index);
       } : null
@@ -38,6 +40,7 @@ Group.propTypes = {
   items: _propTypes["default"].array,
   onSelect: _propTypes["default"].func,
   selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  disabled: _propTypes["default"].bool,
   idPrefix: _propTypes["default"].string,
   testId: _propTypes["default"].string
 };

package/build/Pill/Group/styles.js

@@ -5,62 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pillGroup: {
-    display: 'flex'
+    display: 'flex',
+    background: _colors["default"].pill.unselected.bg["default"],
+    borderRadius: _borderRadius["default"]['br-full'],
+    marginBottom: _spacing["default"]['size-2']
   },
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontSize: 15,
-    fontWeight: 400,
-    lineHeight: "".concat(_spacing["default"].base, "px"),
-    height: _spacing["default"].medium,
-    padding: [0, _spacing["default"].small],
+    color: _colors["default"].text.indigo.primary,
+    background: 'none',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    height: _spacing["default"]['size-6'],
+    padding: [0, _spacing["default"]['size-4']],
+    outline: 0,
+    borderRadius: _borderRadius["default"]['br-md'],
     position: 'relative',
     zIndex: 1,
-    outline: 0,
+    border: 0,
     flex: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     transition: '0.3s all',
     cursor: 'pointer',
-    '&:first-child': {
-      borderTopLeftRadius: _spacing["default"].small,
-      borderBottomLeftRadius: _spacing["default"].small
-    },
-    '&:last-child': {
-      borderTopRightRadius: _spacing["default"].small,
-      borderBottomRightRadius: _spacing["default"].small
-    },
-    '&:not(:first-child)': {
-      marginLeft: -1
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: 'none'
     },
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
     }
   },
   selected: {
-    background: "".concat(_colors["default"].primLighter, " !important"),
+    background: "".concat(_colors["default"].pill.selected.bg["default"], " !important"),
     zIndex: 2,
-    borderColor: _colors["default"].prim,
-    color: _colors["default"].prim
+    color: _colors["default"].text.white.primary
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    color: _colors["default"].text.indigo.secondary,
     zIndex: 0,
     pointerEvents: 'none'
   }

package/build/Pill/Pill.js

@@ -144,16 +144,17 @@ var Pill = /*#__PURE__*/function (_Component) {
       var errorStatus = error && (touched || allowError);
       if (disabled) realStatus = 'disabled';else if (errorStatus) realStatus = 'error';
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(classes.container).concat(realStatus == 'disabled' ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
+        className: "".concat(classes.container).concat(className ? " ".concat(className) : ''),
         id: id,
         style: style
       }, (label || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.top
       }, label && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left)
+        className: classes.label
       }, label)), group ? /*#__PURE__*/_react["default"].createElement(_Group["default"], {
         items: group,
         onSelect: this.handleGroupOnSelect,
+        disabled: disabled,
         selected: selected,
         idPrefix: idPrefix,
         testId: testId
@@ -186,7 +187,7 @@ var Pill = /*#__PURE__*/function (_Component) {
       })) : null, (assistiveText || lockHeight) && /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.bottom
       }, assistiveText && /*#__PURE__*/_react["default"].createElement("label", {
-        className: "".concat(classes.label, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.assistiveText)
+        className: "".concat(classes.assistiveText, " ").concat(classes.left, " ").concat(realStatus == 'error' ? classes.errorAssistiveText : classes.validAssistiveText)
       }, realStatus == 'error' ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         iconName: "warningSolid",
         width: 14,

package/build/Pill/Stack/Stack.js

@@ -9,13 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Text = _interopRequireDefault(require("../../Text"));
-
 var _Icon = _interopRequireDefault(require("../../Icon"));
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
-
-var _iconSizes = _interopRequireDefault(require("../../subatomic/iconSizes"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -39,15 +35,14 @@ var Stack = function Stack(_ref) {
       testId = _ref.testId;
   return /*#__PURE__*/_react["default"].createElement("button", {
     className: "".concat(classes.pill).concat(disabled ? " ".concat(classes.disabled) : ''),
+    disabled: disabled,
     onClick: function onClick() {
       handleOnClick(id, _onClick);
     },
     id: idPrefix ? "".concat(idPrefix).concat(id) : null,
     "data-testid": testId ? "".concat(testId).concat(id) : null
-  }, children && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    className: classes.text,
-    tag: "span",
-    disabled: disabled
+  }, children && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "".concat(classes.text).concat(disabled ? " ".concat(classes.textDisabled) : '')
   }, children), onClose && /*#__PURE__*/_react["default"].createElement("span", {
     className: classes.closeCont,
     onClick: function onClick(e) {
@@ -56,9 +51,9 @@ var Stack = function Stack(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     className: classes.close,
     iconName: "cross",
-    colors: [_colors["default"].grey300],
-    width: _iconSizes["default"].small,
-    height: _iconSizes["default"].small
+    colors: [disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.brand["default"]],
+    width: 18,
+    height: 18
   })));
 };
 

package/build/Pill/Stack/styles.js

@@ -5,63 +5,76 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _styles = require("../../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pill: {
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    maxWidth: '100%',
     height: 32,
-    padding: "0 ".concat(_spacing["default"].gutter, "px"),
-    marginBottom: _spacing["default"].tiny,
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-2']],
+    marginBottom: _spacing["default"]['size-2'],
     position: 'relative',
     zIndex: 0,
+    border: 0,
+    transition: '0.3s all',
+    cursor: 'pointer',
+    borderRadius: _borderRadius["default"]['br-md'],
+    maxWidth: '100%',
     outline: 0,
-    flex: 1,
     display: 'inline-flex',
     alignItems: 'center',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    borderRadius: _spacing["default"].small,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
+    minWidth: 'auto',
     '&:not(:last-child)': {
-      marginRight: _spacing["default"].tiny
-    },
-    '&:not(:first-child)': {
-      marginLeft: -1
+      marginRight: _spacing["default"]['size-2']
     },
+    background: _colors["default"].pill.unselected.bg["default"],
     '&:hover': {
-      background: _colors["default"].grey50
+      background: _colors["default"].pill.unselected.bg.hover
+    },
+    '&:active, &:focus': {
+      background: _colors["default"].pill.unselected.bg.active
+    },
+    '&:not(:active):focus-visible': {
+      boxShadow: _shadows["default"]['focus-indigo'],
+      background: _colors["default"].pill.unselected.bg["default"]
     }
   },
   disabled: {
-    background: _colors["default"].white,
-    borderColor: _colors["default"].grey100,
-    color: _colors["default"].grey200,
+    background: _colors["default"].pill.unselected.bg.disabled,
     pointerEvents: 'none'
   },
-  closeCont: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: -_spacing["default"].xTiny,
-    marginLeft: -_spacing["default"].xTiny
-  },
   text: {
+    flex: 1,
     overflow: 'hidden',
+    font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
+    color: _colors["default"].text.indigo.primary,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    marginLeft: _spacing["default"].xTiny,
-    marginRight: _spacing["default"].xTiny
+    padding: [0, _spacing["default"]['size-1']],
+    marginRight: _spacing["default"]['size-1']
+  },
+  textDisabled: {
+    color: _colors["default"].text.indigo.secondary
+  },
+  closeCont: {
+    width: _spacing["default"]['size-5'],
+    height: _spacing["default"]['size-5'],
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -_spacing["default"]['size-1'],
+    marginLeft: -_spacing["default"]['size-1']
   }
 };
 exports["default"] = _default;

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

@@ -9,52 +9,42 @@ exports[`Pill matches the stack snapshot 1`] = `ShallowWrapper {}`;
 exports[`Pill styles matches the snapshot 1`] = `
 Object {
   "assistiveText": Object {
-    "color": "#aaaaaa",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "transition": "0.3s all",
   },
   "bottom": Object {
-    "height": 20,
-    "marginTop": 4,
+    "height": 21,
   },
   "choiceGroup": Object {
     "display": "flex",
     "flexWrap": "wrap",
   },
   "container": Object {
-    "marginBottom": 8,
+    "display": "flex",
+    "flexDirection": "column",
+    "marginBottom": "8px",
     "position": "relative",
   },
-  "disabled": Object {
-    "& $label": Object {
-      "color": "#dddddd",
-    },
-  },
   "errorAssistiveText": Object {
-    "color": "#db3737",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "marginBottom": -2,
   },
   "label": Object {
-    "& a": Object {
-      "color": "#1476fb",
-      "outline": "none",
-      "textDecoration": "none",
-    },
-    "color": "#222222",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 14,
-    "lineHeight": 1.5,
+    "color": "#080D39",
+    "font": "400 14px/1.5 'OccText', sans-serif",
     "transition": "0.3s all",
   },
   "left": Object {
     "float": "left",
   },
   "top": Object {
-    "&:after": Object {
-      "clear": "both",
-      "content": "\\"\\"",
-    },
-    "height": 24,
+    "height": 21,
+    "marginBottom": "8px",
+  },
+  "validAssistiveText": Object {
+    "color": "#5A5D7B",
   },
 }
 `;

package/build/Pill/styles.js

@@ -5,53 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// import colors from '../subatomic/colors';
 var _default = {
   container: {
     position: 'relative',
-    marginBottom: 8
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: _spacing["default"]['size-2']
   },
   top: {
-    height: 24,
-    '&:after': {
-      content: '""',
-      clear: 'both'
-    }
+    height: 21,
+    marginBottom: _spacing["default"]['size-2']
   },
   label: {
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.primary,
+    transition: '0.3s all'
   },
   left: {
     "float": 'left'
   },
-  disabled: {
-    '& $label': {
-      color: _colors["default"].inkLightest
-    }
-  },
   bottom: {
-    height: 20,
-    marginTop: 4
+    height: 21
   },
   assistiveText: {
-    color: _colors["default"].inkLighter
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-assistive-text']),
+    transition: '0.3s all'
+  },
+  validAssistiveText: {
+    color: _colors["default"].text.corp.secondary
   },
   errorAssistiveText: {
-    color: _colors["default"].errorText
+    color: _colors["default"].text.error
   },
   errorIcon: {
     marginBottom: -2

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

@@ -19,7 +19,7 @@ Object {
     "&$active": Object {
       "&:active": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
@@ -29,11 +29,11 @@ Object {
       },
       "&:focus $radio:before": Object {
         "borderColor": "#0059CD",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
@@ -49,7 +49,7 @@ Object {
       },
       "&:focus $radio:before": Object {
         "borderColor": "#D3D4DC",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover $radio:before": Object {
         "borderColor": "#6C6F89",

package/build/Radio/styles.js

@@ -9,6 +9,8 @@ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var radio = _colors["default"].radio;
@@ -24,7 +26,7 @@ var _default = {
     '&$active': {
       '&:focus $radio:before': {
         borderColor: radio['selected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
+        boxShadow: _shadows["default"]['focus-bright-blue']
       },
       '&:hover': {
         '& $radio:before': {
@@ -49,7 +51,7 @@ var _default = {
     '&:not($active)': {
       '&:focus $radio:before': {
         borderColor: radio['unselected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
+        boxShadow: _shadows["default"]['focus-bright-blue']
       },
       '&:hover $radio:before': {
         borderColor: radio['unselected']['border']['hover'],

package/build/SlideToggle/SlideToggle.js

@@ -95,6 +95,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2.testId;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
+        tabIndex: -1,
         className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         style: style
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({

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

@@ -6,38 +6,57 @@ exports[`SlideToggle styles matches the snapshot 1`] = `
 Object {
   "checked": Object {
     "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
     },
     "& $slider": Object {
       "left": 16,
     },
-    "background": "#083cae",
+    "background": "#0059CD",
   },
   "cont": Object {
+    "&:focus $switch$checked": Object {
+      "background": "#0059CD",
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:focus $switch:not($checked)": Object {
+      "background": "#E9EEF8",
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
+    "&:hover $switch$checked, &:active $switch$checked": Object {
+      "background": "#083CAE",
+    },
+    "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
+      "background": "#CAD5EE",
+    },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": 0,
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $icon": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    },
+    "& $switch": Object {
+      "background": "#EDEDF1",
+    },
     "pointerEvents": "none",
   },
   "icon": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNhYWFhYWEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
     "display": "block",
     "height": "100%",
     "transition": "0.3s all",
     "width": "100%",
   },
   "label": Object {
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "slider": Object {
-    "background": "#ffffff",
+    "background": "#fff",
     "borderRadius": "50%",
     "cursor": "pointer",
     "height": 20,
@@ -48,10 +67,10 @@ Object {
     "width": 20,
   },
   "switch": Object {
-    "background": "#dddddd",
+    "background": "#E9EEF8",
     "borderRadius": 34,
     "display": "inline-block",
-    "height": 24,
+    "height": "24px",
     "position": "relative",
     "transition": "0.3s all",
     "width": 38,

package/build/SlideToggle/styles.js

@@ -5,40 +5,58 @@ 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 _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var toggle = _colors["default"]["switch"],
+    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',
     cursor: 'pointer',
-    outline: 0
+    outline: 0,
+    '&:hover $switch$checked, &:active $switch$checked': {
+      background: toggle['selected']['bg']['hover']
+    },
+    '&:focus $switch$checked': {
+      boxShadow: _shadows["default"]['focus-bright-blue'],
+      background: toggle['selected']['bg']['default']
+    },
+    '&:hover $switch:not($checked), &:active $switch:not($checked)': {
+      background: toggle['unselected']['bg']['hover']
+    },
+    '&:focus $switch:not($checked)': {
+      background: toggle['unselected']['bg']['default'],
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
   "switch": {
     position: 'relative',
     display: 'inline-block',
     width: 38,
-    height: _spacing["default"].base,
-    background: _colors["default"].grey200,
+    height: _spacing["default"]['size-5'],
+    background: toggle['unselected']['bg']['default'],
     borderRadius: 34,
     transition: '0.3s all'
   },
   checked: {
-    background: _colors["default"].prim,
+    background: toggle['selected']['bg']['default'],
     '& $slider': {
       left: 16
     },
     '& $icon': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].prim]))
+      background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
     }
   },
   slider: {
@@ -49,22 +67,27 @@ var _default = {
     width: 20,
     height: 20,
     borderRadius: '50%',
-    background: _colors["default"].bgWhite,
+    background: toggle['bg']['default'],
     transition: '0.3s all'
   },
   icon: {
     width: '100%',
     height: '100%',
     display: 'block',
-    background: _icons["default"].base(_icons["default"].cross.icon([_colors["default"].grey400])),
+    background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
     transition: '0.3s all'
   },
   disabled: {
-    opacity: 0.4,
+    '& $switch': {
+      background: toggle['bg']['disabled']
+    },
+    '& $icon': {
+      background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
+    },
     pointerEvents: 'none'
   },
   label: {
-    marginLeft: _spacing["default"].tiny
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.3",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",