orcs-design-system 2.1.11 → 2.1.13

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -294,7 +294,6 @@ export var textButtonActionsMenu = function textButtonActionsMenu() {
     }, /*#__PURE__*/React.createElement(ActionsMenuBody, {
       toggleState: toggleState,
       onToggle: onToggle,
-      direction: "right",
       menuTopPosition: "30px",
       menuLeftPosition: "0",
       menuWidth: "120px",
@@ -326,7 +325,6 @@ export var keepInViewExample = function keepInViewExample() {
     width: "100%",
     flexDirection: "column"
   }, /*#__PURE__*/React.createElement(ActionsMenu, {
-    direction: "right",
     mb: "r"
   }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
     href: "https://orchestrated.io/"
@@ -336,7 +334,6 @@ export var keepInViewExample = function keepInViewExample() {
   }, "Edit")), /*#__PURE__*/React.createElement(ActionsMenuItem, {
     onClick: action("clicked")
   }, "Remove")), /*#__PURE__*/React.createElement(ActionsMenu, {
-    direction: "right",
     menuTopPosition: "30px",
     menuLeftPosition: "0",
     menuWidth: "220px",

package/es/components/ActionsMenu/index.js

@@ -46,7 +46,7 @@ var Icon = styled.div.withConfig({
 var Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "yvbni2-3"
-})(["display:inline-block;position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
+})(["display:block;position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
   return props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px";
 }, function (props) {
   return props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto";
@@ -94,7 +94,7 @@ export var ActionsMenuItem = styled(function (props) {
 }).withConfig({
   displayName: "ActionsMenu__ActionsMenuItem",
   componentId: "yvbni2-5"
-})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}"], function (props) {
+})(["white-space:nowrap;display:block;width:100%;text-align:left;cursor:pointer;margin:0;padding:8px;appearance:none;background-color:", ";border:none;border-bottom:solid 1px ", ";border-radius:0;color:", ";font-size:", ";line-height:", ";font-family:", ";font-weight:", ";text-decoration:none;transition:", ";&:hover,&:focus{outline:0;background-color:", ";}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border:0;border-radius:0 0 ", " ", ";}&:only-child{border-radius:", ";}"], function (props) {
   return props.selected ? themeGet("colors.successDark")(props) : "transparent";
 }, function (props) {
   return themeGet("colors.greyDarkest")(props);
@@ -120,6 +120,8 @@ export var ActionsMenuItem = styled(function (props) {
   return themeGet("radii.2")(props);
 }, function (props) {
   return themeGet("radii.2")(props);
+}, function (props) {
+  return themeGet("radii.2")(props);
 });
 export var ActionsMenuBody = function ActionsMenuBody(_ref) {
   var theme = _ref.theme,

package/es/components/Button/index.js

@@ -56,7 +56,7 @@ var StyledButton = styled("button").withConfig({
     },
     "&:focus": {
       outline: "0",
-      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props)
+      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primaryDarker")(props)
     }
   });
 }, function (props) {
@@ -73,7 +73,7 @@ var StyledButton = styled("button").withConfig({
         },
         "&:focus": {
           outline: "0",
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props)
+          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.successDarker")(props)
         }
       },
       successAlternate: {
@@ -86,7 +86,7 @@ var StyledButton = styled("button").withConfig({
         },
         "&:focus": {
           outline: "0",
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props)
+          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.successLight")(props)
         }
       },
       danger: {
@@ -99,7 +99,7 @@ var StyledButton = styled("button").withConfig({
         },
         "&:focus": {
           outline: "0",
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.danger30")(props)
+          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.dangerDarker")(props)
         }
       },
       dangerAlternate: {
@@ -112,7 +112,7 @@ var StyledButton = styled("button").withConfig({
         },
         "&:focus": {
           outline: "0",
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.danger30")(props)
+          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.dangerLight")(props)
         }
       },
       disabled: {
@@ -136,7 +136,7 @@ var StyledButton = styled("button").withConfig({
         },
         "&:focus": {
           outline: "0",
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary20")(props)
+          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primaryLight")(props)
         }
       }
     }

package/es/components/Checkbox/index.js

@@ -31,7 +31,7 @@ var Control = styled.input.attrs({
   displayName: "Checkbox__Control",
   componentId: "p4d19b-2"
 })(["opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;pointer-events:none;&:focus{+ div{border-radius:2px;box-shadow:", ";}}+ div{transition:", ";&:before{background-color:", ";}> div{color:", ";}}:focus + div div:after{opacity:0.2;}:checked{+ div div:before{box-shadow:0 0 0 10px,10px -10px 0 10px,32px 0px 0 20px,0px 32px 0 20px,-5px 5px 0 10px,20px -12px 0 11px;.animate&{animation:", " 300ms forwards ease-out;}}}&:not(:checked) + div div:before{.animate&{animation:", " 300ms forwards ease-out;}}"], function (props) {
-  return props.colour ? themeGet("shadows.thinOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black20")(props);
+  return props.colour ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors." + props.colour + "30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props);
 }, themeGet("transition.transitionDefault"), function (props) {
   return props.colour ? themeGet("colors.".concat(props.colour))(props) : themeGet("colors.greyDarker")(props);
 }, function (props) {

package/es/components/RadioButton/index.js

@@ -57,7 +57,7 @@ var RadioButtonControl = styled.input.attrs({
       transform: "scale(1)"
     },
     "&:focus + div": {
-      boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black30")(props)
+      boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black30")(props)
     }
   });
 }, function (props) {
@@ -66,27 +66,27 @@ var RadioButtonControl = styled.input.attrs({
       "default": {},
       white: {
         "&:focus + div": {
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.white30")(props)
+          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.white30")(props)
         }
       },
       primary: {
         "&:focus + div": {
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props)
+          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props)
         }
       },
       success: {
         "&:focus + div": {
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props)
+          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props)
         }
       },
       warning: {
         "&:focus + div": {
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.warning30")(props)
+          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.warning30")(props)
         }
       },
       danger: {
         "&:focus + div": {
-          boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.danger30")(props)
+          boxShadow: themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props)
         }
       }
     }

package/es/components/Tabs/index.js

@@ -38,24 +38,19 @@ export var TabItem = styled("div").withConfig({
       textDecoration: "none",
       textAlign: "center",
       textTransform: "uppercase",
-      button: {
-        marginLeft: 2
-      }
-    },
-    "&:hover": {
-      a: {
-        cursor: "pointer",
+      cursor: "pointer",
+      "&:hover": {
         bg: themeGet("colors.greyLight")(props),
         color: themeGet("colors.greyDarker")(props),
         outline: "0"
-      }
-    },
-    "&:focus": {
-      a: {
-        cursor: "pointer",
-        bg: themeGet("colors.greyLight")(props),
+      },
+      "&:focus": {
         color: themeGet("colors.greyDarker")(props),
-        outline: "0"
+        outline: "0",
+        boxShadow: themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.grey")(props)
+      },
+      button: {
+        marginLeft: 2
       }
     },
     "&.active": {

package/es/components/Tag/index.js

@@ -12,7 +12,7 @@ var TagWrapper = styled.div.withConfig({
 var TagValue = styled.button.withConfig({
   displayName: "Tag__TagValue",
   componentId: "sc-1dh2aa8-1"
-})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], function (props) {
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], function (props) {
   return themeGet("fontSizes.1")(props);
 }, function (props) {
   return themeGet("fontWeights.2")(props);
@@ -31,15 +31,15 @@ var TagValue = styled.button.withConfig({
 }, function (props) {
   return props.selected ? themeGet("colors.white")(props) : props.disabled ? themeGet("colors.greyDarker")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}}"], themeGet("colors.primaryDark")(props), function (props) {
+  return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], themeGet("colors.primaryDark")(props), function (props) {
     return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
   }, function (props) {
-    return props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.white")(props);
+    return props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
   }, function (props) {
     return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
+  }, function (props) {
+    return props.selected ? themeGet("colors.primaryDarker")(props) : themeGet("colors.primaryLighter")(props);
   });
-}, function (props) {
-  return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
 });
 var TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
@@ -48,24 +48,18 @@ var TagValueText = styled.div.withConfig({
 var TagEdit = styled(TagValue).withConfig({
   displayName: "Tag__TagEdit",
   componentId: "sc-1dh2aa8-3"
-})(["border-radius:", ";padding:", ";&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
+})(["border-radius:", ";padding:", ";&:focus{z-index:2;}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
 }, function (props) {
   return props.showRemove ? "2px 7px 5px 7px" : "2px 8px 5px 8px";
 }, function (props) {
-  return themeGet("colors.primary30")(props);
-}, function (props) {
-  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props), function (props) {
-    return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
-  }) : css(["border-left:0;&:hover{border-left:0;}"]);
+  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props)) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
 });
 var TagRemove = styled(TagValue).withConfig({
   displayName: "Tag__TagRemove",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
-  return themeGet("colors.primary30")(props);
-}, function (props) {
-  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props), themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props)) : css(["border-left:0;&:hover{border-left:0;}"]);
+})(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;}", ""], function (props) {
+  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props)) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
 });
 var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",

package/es/components/TextArea/index.js

@@ -49,7 +49,7 @@ var Input = styled("textarea").withConfig({
     },
     "&:focus": {
       outline: "0",
-      boxShadow: props.invalid ? themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props),
+      boxShadow: props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props),
       borderColor: props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props)
     }
   });

package/es/components/TextInput/index.js

@@ -65,7 +65,7 @@ var InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-ap
 }, function (props) {
   return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return props.invalid ? themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
+  return props.invalid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.danger30")(props) : props.valid ? themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.success30")(props) : themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.primary30")(props);
 }, function (props) {
   return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.primary")(props);
 }, function (props) {

package/es/systemThemeCollapsed.js

@@ -201,7 +201,8 @@ export var borderWidths = [0, "1px", "2px", "3px"]; // SHADOWS
 
 export var shadows = {
   boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 3px"
+  thinOutline: "0 0 0 1px",
+  thickOutline: "0 0 0 3px"
 }; // ANIMATION
 
 export var transition = {

package/es/systemtheme.js

@@ -200,7 +200,8 @@ export var borderWidths = [0, "1px", "2px", "3px"]; // SHADOWS
 
 export var shadows = {
   boxDefault: "0 2px 5px 0 ".concat(colors.black10),
-  thinOutline: "0 0 0 3px"
+  thinOutline: "0 0 0 1px",
+  thickOutline: "0 0 0 3px"
 }; // ANIMATION
 
 export var transition = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.11",
+  "version": "2.1.13",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",