@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.2

package/build/TextField/styles.js

@@ -3,27 +3,45 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.objectToFontValue = void 0;
 
-var _hexRgba = _interopRequireDefault(require("hex-rgba"));
+var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts2 = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var placeholder = _fonts2["default"]['text-field-placeholder'];
+var label = _fonts2["default"]['text-field-label'];
+var assistiveText = _fonts2["default"]['text-field-assistive-text'];
+var TRANSITION = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var border = {
+  DEFAULT: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border["default"]),
+  HOVER: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.hover),
+  FOCUS: "inset 0 0 0 2px ".concat(_colors["default"]['text-field'].border.focus),
+  ERROR: "inset 0 0 0 1px ".concat(_colors["default"]['text-field'].border.error)
+};
 
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts["default"].body);
+};
+
+exports.objectToFontValue = objectToFontValue;
 var _default = {
   container: {
-    position: 'relative',
-    marginBottom: _spacing["default"].tiny
+    position: 'relative'
   },
   top: {
-    height: _spacing["default"].base,
+    display: 'flex',
+    marginBottom: _spacing["default"]['size-2'],
     '&:after': {
       content: '""',
       clear: 'both'
@@ -32,75 +50,27 @@ var _default = {
   "default": {},
   disabled: {
     '& $input': {
-      borderColor: _colors["default"].inkLightest,
-      color: _colors["default"].inkLightest,
-      paddingTop: 9
-    },
-    '& $label': {
-      color: _colors["default"].inkLightest
-    },
-    '& $passIcon': {
-      cursor: 'auto'
+      background: _colors["default"]['text-field'].bg.disabled,
+      color: _colors["default"].text.corp.disabled
     }
   },
   focus: {
     '& $input': {
-      borderColor: _colors["default"].prim
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: "".concat(border.FOCUS, ", ").concat(_shadows["default"]['focus-bright-blue'], " !important")
     }
   },
   error: {
     '& $input': {
-      borderColor: _colors["default"].error,
-      color: _colors["default"].errorText,
-      background: (0, _hexRgba["default"])(_colors["default"].errorText, 4)
-    },
-    '& $searchField': {
-      borderWidth: 2,
-      color: _colors["default"].ink,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
-    }
-  },
-  filled: {
-    '& $input': {
-      borderColor: _colors["default"].grey900,
-      borderWidth: 2,
-      paddingLeft: _spacing["default"].tiny - 1
-    },
-    '& $searchFieldHasIcon': {
-      paddingLeft: 41
+      boxShadow: border.ERROR
     }
   },
   label: {
-    fontWeight: 300,
-    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'
-    }
-  },
-  left: {
-    "float": 'left'
-  },
-  right: {
-    "float": 'right'
+    font: objectToFontValue(label),
+    color: _colors["default"].text.corp.primary
   },
   counter: {
-    color: _colors["default"].inkLighter
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
   inputWrap: {
     boxSizing: 'border-box',
@@ -111,24 +81,21 @@ var _default = {
     display: 'flex',
     alignItems: 'center',
     width: '100%',
-    height: 40,
-    color: _colors["default"].ink,
-    fontFamily: _fonts["default"].body,
-    fontWeight: 300,
-    fontSize: 16,
-    lineHeight: 1.5,
-    background: _colors["default"].bgWhite,
-    border: "1px solid ".concat(_colors["default"].grey200),
-    borderRadius: 4,
-    padding: [_spacing["default"].tiny, _spacing["default"].small],
-    boxShadow: 'none',
+    height: 48,
+    color: _colors["default"].text.corp.primary,
+    font: objectToFontValue(placeholder),
+    background: _colors["default"]['text-field'].bg["default"],
+    border: 'none',
+    borderRadius: _borderRadius["default"]['br-xs'],
+    padding: [_spacing["default"]['size-1'], _spacing["default"]['size-4']],
+    boxShadow: border.DEFAULT,
     outline: 'none',
-    transition: '0.3s all',
+    transition: TRANSITION,
     appearance: 'none',
     '-webkit-appearance': 'none',
-    caretColor: _colors["default"].prim,
+    caretColor: _colors["default"].border.brand["default"],
     '&::placeholder': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.secondary
     },
     '&::-webkit-outer-spin-button': {
       '-webkit-appearance': 'none',
@@ -140,6 +107,9 @@ var _default = {
     },
     '&[type=number]': {
       '-moz-appearance': 'textfield'
+    },
+    '&:hover': {
+      boxShadow: border.HOVER
     }
   },
   inputDisabled: {
@@ -147,118 +117,80 @@ var _default = {
     whiteSpace: 'nowrap'
   },
   hasRightIcon: {
-    marginRight: _spacing["default"].small
+    marginRight: _spacing["default"]['size-8']
   },
   select: {
     '&::-ms-expand': {
       display: 'none'
     },
-    paddingRight: 32,
+    paddingRight: _spacing["default"]['size-8'],
     '& optgroup': {
-      fontSize: 14,
-      fontWeight: 'normal',
-      lineHeight: 1.5,
-      color: _colors["default"].inkLight
+      font: objectToFontValue(label),
+      color: _colors["default"].text.corp.secondary
     },
     '& option': {
-      fontSize: 16,
-      lineHeight: 1.5,
-      color: _colors["default"].ink,
+      font: objectToFontValue(placeholder),
+      color: _colors["default"].text.corp.primary,
       '&:disabled': {
-        color: _colors["default"].inkLighter
+        color: _colors["default"].text.corp.disabled
       }
     },
     '&:invalid, & option[value=""]': {
-      color: _colors["default"].inkLighter
+      color: _colors["default"].text.corp.disabled
     }
   },
   textarea: {
     resize: 'none',
+    paddingg: [_spacing["default"]['size-3'], _spacing["default"]['size-4']],
     height: 120,
     alignItems: 'flex-start'
   },
   hasIcon: {
-    paddingLeft: 42
+    paddingLeft: _spacing["default"]['size-8']
   },
   hasPass: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
   icon: {
     position: 'absolute',
-    left: _spacing["default"].small,
+    left: _spacing["default"]['size-4'],
     top: '50%',
     transform: 'translateY(-50%)'
   },
-  passIcon: {
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 3,
-    margin: 0,
+  rightButton: {
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
+    right: _spacing["default"]['size-1'],
+    top: '50%',
+    transform: 'translateY(-50%)',
+    zIndex: 1
   },
   selectIcon: {
-    width: 18,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: '3px 0',
-    margin: 0,
     position: 'absolute',
-    right: 12,
-    top: 8,
-    zIndex: 1,
-    outline: 0,
+    right: _spacing["default"]['size-4'],
+    top: '50%',
+    transform: 'translateY(-50%)',
     pointerEvents: 'none'
   },
   hasClear: {
-    paddingRight: 42
+    paddingRight: _spacing["default"]['size-8']
   },
-  clear: _defineProperty({
-    width: 24,
-    height: 24,
-    background: 'none',
-    border: 0,
-    padding: 0,
-    margin: 0,
-    position: 'absolute',
-    right: 12,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    zIndex: 1,
-    outline: 0,
-    cursor: 'pointer'
-  }, "padding", 3),
   alignRight: {
     textAlign: 'right'
   },
-  assistiveText: {
-    color: _colors["default"].inkLighter,
-    fontSize: 12,
-    fontWeight: 300
+  assistiveTextWrap: {
+    display: 'flex'
   },
-  errorAssistiveText: {
-    color: _colors["default"].errorText
+  assistiveText: {
+    font: objectToFontValue(assistiveText),
+    color: _colors["default"].text.corp.secondary
   },
-  errorIcon: {
-    marginBottom: -2
+  assistiveError: {
+    color: _colors["default"].text.error
   },
   bottom: {
-    height: 20,
-    marginTop: 4
-  },
-  searchField: {
-    height: _spacing["default"].large,
-    borderRadius: _spacing["default"].base,
-    borderColor: _colors["default"].grey600,
-    background: [_colors["default"].bgWhite, '!important']
-  },
-  searchFieldHasIcon: {}
+    display: 'flex',
+    justifyContent: 'space-between',
+    marginTop: _spacing["default"]['size-2']
+  }
 };
 exports["default"] = _default;

package/build/tokens/colors.json

@@ -257,7 +257,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5"
+        "hover": "#083CAE"
       }
     },
     "bg": {
@@ -279,7 +279,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       },
       "border": {
@@ -310,7 +310,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "hsl(221 91.2% 35.7% / 0.1)"
       },
       "border": {
@@ -342,7 +342,7 @@
       "border": "#d7f6e3"
     },
     "info": {
-      "bg": "#f7faff",
+      "bg": "#e3efff",
       "border": "#e3efff"
     },
     "neutral": {
@@ -354,7 +354,7 @@
     "track": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       }
     },
@@ -379,7 +379,7 @@
     "selected": {
       "bg": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
         "disabled": "#8DA5DA"
       },
       "border": {
@@ -401,7 +401,7 @@
       "border": "#fff1d3"
     },
     "info": {
-      "bg": "#f7faff",
+      "bg": "#e3efff",
       "border": "#e3efff"
     },
     "featured": {
@@ -439,6 +439,30 @@
       }
     }
   },
+  "nav": {
+    "bg": {
+      "inverse": "#083CAE",
+      "default": "#fff"
+    }
+  },
+  "pill": {
+    "selected": {
+      "bg": {
+        "default": "#0059CD",
+        "hover": "#083CAE",
+        "active": "#06308A",
+        "disabled": "#8DA5DA"
+      }
+    },
+    "unselected": {
+      "bg": {
+        "default": "hsl(221 91.2% 35.7% / 0.05)",
+        "hover": "hsl(221 91.2% 35.7% / 0.1)",
+        "active": "hsl(221 91.2% 35.7% / 0.2)",
+        "disabled": "hsl(221 91.2% 35.7% / 0.1)"
+      }
+    }
+  },
   "bg": {
     "action": {
       "primary": {
@@ -469,11 +493,13 @@
       },
       "brand": {
         "default": "#0059CD",
-        "hover": "#0047A5",
+        "hover": "#083CAE",
+        "active": "#06308A",
         "disabled": "#8DA5DA",
         "subtle": {
           "default": "#E9EEF8",
-          "hover": "#CAD5EE"
+          "hover": "#CAD5EE",
+          "active": "#ABBDE4"
         }
       },
       "ghost": {
@@ -490,7 +516,7 @@
     "warning": "#fff8e9",
     "error": "#fce8e8",
     "success": "#ebfbf1",
-    "info": "#f7faff",
+    "info": "#e3efff",
     "overlay": "rgba(0,0,0,0.8)",
     "neutral": "#000"
   },
@@ -515,7 +541,8 @@
   },
   "border": {
     "inverse": {
-      "default": "#fff",
+      "bold": "#fff",
+      "default": "rgba(255,255,255,0.5)",
       "subtle": "rgba(255,255,255,0.2)"
     },
     "default": {

package/package.json

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