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

package/build/Tag/styles.js

@@ -13,77 +13,109 @@ var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
 var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
 
+var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+
 var _hexRgba = _interopRequireDefault(require("hex-rgba"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var info = _colors["default"].info,
+var infoLight = _colors["default"].infoLight,
     infoText = _colors["default"].infoText,
-    success = _colors["default"].success,
+    successLight = _colors["default"].successLight,
     successText = _colors["default"].successText,
-    warning = _colors["default"].warning,
+    warningLight = _colors["default"].warningLight,
     warningText = _colors["default"].warningText,
-    error = _colors["default"].error,
+    errorLight = _colors["default"].errorLight,
     errorText = _colors["default"].errorText,
     grey900 = _colors["default"].grey900,
     grey100 = _colors["default"].grey100,
-    textLink = _colors["default"].textLink;
+    textLink = _colors["default"].textLink,
+    bgWhite = _colors["default"].bgWhite;
 var xTiny = _spacing["default"].xTiny,
     tiny = _spacing["default"].tiny,
     small = _spacing["default"].small,
-    gutter = _spacing["default"].gutter;
-var iconHeight = 13;
+    gutter = _spacing["default"].gutter,
+    medium = _spacing["default"].medium;
+var smallIcon = _iconSizes["default"].small;
+var paddingStandardTag = [1, tiny, 3, tiny],
+    paddingMediumTag = [5, gutter, 7, gutter],
+    paddingBigTag = [tiny, small],
+    tagTextLineHeight = 1.5,
+    tagTextStandardSize = 10,
+    tagTextMediumSize = 16,
+    tagTextBigSize = 16,
+    bigTagHeight = 40;
 var _default = {
   tag: {
     boxSizing: 'border-box',
     lineHeight: '12px',
     textAlign: 'center',
     borderRadius: small,
-    paddingRight: tiny,
-    paddingLeft: tiny,
-    height: small,
     position: 'relative',
     overflow: 'hidden',
-    display: 'inline-block',
-    paddingTop: 1,
-    paddingBottom: 2
+    display: 'inline-block'
+  },
+  standard: {
+    padding: paddingStandardTag,
+    height: small
+  },
+  medium: {
+    padding: paddingMediumTag,
+    height: medium
+  },
+  big: {
+    padding: paddingBigTag,
+    height: bigTagHeight,
+    borderRadius: medium
   },
   tagText: {
     boxSizing: 'border-box',
     fontFamily: _fonts["default"].body,
-    fontWeight: '600',
+    fontWeight: '400',
     fontStyle: 'normal',
     fontStretch: 'normal',
-    lineHeight: "".concat(iconHeight, "px"),
     letterSpacing: 'normal',
     textAlign: 'center',
     position: 'relative',
     overflow: 'hidden',
     display: 'inline-block',
-    fontSize: 10,
+    lineHeight: tagTextLineHeight,
     paddingRight: function paddingRight(props) {
       return props.iconName ? xTiny : 0;
     }
   },
+  standardTagText: {
+    fontSize: tagTextStandardSize
+  },
+  mediumTagText: {
+    fontSize: tagTextMediumSize
+  },
+  bigTagText: {
+    fontSize: tagTextBigSize
+  },
   "default": {
     color: grey900,
     background: grey100
   },
+  basic: {
+    color: grey900,
+    background: bgWhite
+  },
   info: {
     color: infoText,
-    backgroundColor: (0, _hexRgba["default"])(info, 10)
+    backgroundColor: infoLight
   },
   success: {
     color: successText,
-    background: (0, _hexRgba["default"])(success, 10)
+    background: successLight
   },
   warning: {
     color: warningText,
-    background: (0, _hexRgba["default"])(warning, 10)
+    background: warningLight
   },
   error: {
     color: errorText,
-    background: (0, _hexRgba["default"])(error, 10)
+    background: errorLight
   },
   link: {
     color: textLink,
@@ -95,27 +127,40 @@ var _default = {
     display: 'inline-block',
     marginRight: xTiny,
     content: '""',
-    width: gutter,
-    height: iconHeight,
     paddingBottom: 0,
-    position: 'relative',
-    top: 0,
     left: 0,
     backgroundRepeat: 'no-repeat'
   },
+  standardIcon: {
+    width: gutter,
+    height: gutter
+  },
+  mediumIcon: {
+    width: smallIcon,
+    height: smallIcon
+  },
+  bigIcon: {
+    width: smallIcon,
+    height: smallIcon
+  },
   defaultIcon: {
     background: function background(props) {
       return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([grey900])) : '';
     }
   },
+  basicIcon: {
+    background: function background(props) {
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([grey900])) : '';
+    }
+  },
   infoIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([info])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([infoText])) : '';
     }
   },
   successIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([success])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([successText])) : '';
     }
   },
   warningIcon: {
@@ -125,7 +170,7 @@ var _default = {
   },
   errorIcon: {
     background: function background(props) {
-      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([error])) : '';
+      return props.iconName ? _icons["default"].base(_icons["default"][props.iconName].icon([errorText])) : '';
     }
   },
   linkIcon: {