orcs-design-system 3.1.11 → 3.1.13

package/es/components/Notification/Notification.stories.js

@@ -2,7 +2,6 @@ import React from "react";
 import Notification from ".";
 import Spacer from "../Spacer";
 import Box from "../Box";
-import { themeGet } from "@styled-system/theme-get";
 export default {
   title: "Components/Notification",
   component: Notification,
@@ -34,17 +33,6 @@ export var colourNotification = function colourNotification() {
   }, "Red error notification e.g. Update failed! Please try again."));
 };
 colourNotification.storyName = "Alternate Colours";
-export var iconNotification = function iconNotification() {
-  return /*#__PURE__*/React.createElement(Notification, {
-    colour: "warning",
-    icon: ["fas", "sync"],
-    iconProps: {
-      spin: true,
-      color: themeGet("colors.primary")
-    }
-  }, "Notification with icon and iconProps specified");
-};
-iconNotification.storyName = "With Icon";
 export var textOnlyNotification = function textOnlyNotification() {
   return /*#__PURE__*/React.createElement(Notification, null, "Text-only notification");
 };
@@ -59,12 +47,17 @@ export var loadingNotification = function loadingNotification() {
   return /*#__PURE__*/React.createElement(Spacer, {
     m: "r"
   }, /*#__PURE__*/React.createElement(Notification, {
+    loading: true
+  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
     loading: true,
-    closable: false
-  }, "In progress notification with disabled close. E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
+    colour: "success"
+  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
     loading: true,
     colour: "warning"
-  }, "In progress notification with enabled close and specified colour."));
+  }, "In progress notification E.g. Importing data..."), /*#__PURE__*/React.createElement(Notification, {
+    loading: true,
+    colour: "danger"
+  }, "In progress notification E.g. Importing data..."));
 };
 loadingNotification.storyName = "Loading";
 export var floatingNotification = function floatingNotification() {
@@ -94,11 +87,6 @@ colourNotification.__docgenInfo = {
   "methods": [],
   "displayName": "colourNotification"
 };
-iconNotification.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "iconNotification"
-};
 textOnlyNotification.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Notification/index.js

@@ -6,6 +6,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import Icon from "../Icon";
+import Loading from "../Loading";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
 import { space, layout, position, variant, compose } from "styled-system";
@@ -54,7 +55,8 @@ var NotificationWrapper = styled("div").withConfig({
         bg: themeGet("colors.dangerDark")(props)
       },
       warning: {
-        bg: themeGet("colors.warningDark")(props)
+        bg: themeGet("colors.warningLight")(props),
+        color: themeGet("colors.black70")(props)
       },
       "default": {}
     }
@@ -68,7 +70,8 @@ var NotificationWrapper = styled("div").withConfig({
       bg: themeGet("colors.dangerDark")
     },
     warning: {
-      bg: themeGet("colors.warningDark")
+      bg: themeGet("colors.warningLight"),
+      color: themeGet("colors.black70")
     },
     "default": {
       bg: themeGet("colors.primaryDark")
@@ -84,18 +87,20 @@ var NotificationContent = styled("p").withConfig({
     pr: props.closable === false ? "0" : "s"
   });
 });
-var Close = styled("button").withConfig({
-  displayName: "Notification__Close",
+var CloseButton = styled("button").withConfig({
+  displayName: "Notification__CloseButton",
   componentId: "sc-1p26rkq-2"
 })(function (props) {
   return css({
     appearance: "none",
     bg: "transparent",
     p: "0",
+    paddingLeft: "1",
+    paddingRight: "1",
     border: "none",
     ml: "auto",
     cursor: "pointer",
-    opacity: "0.6",
+    opacity: "0.7",
     transition: themeGet("transition.transitionDefault")(props),
     color: themeGet("colors.white")(props),
     "&:hover, &:focus": {
@@ -109,27 +114,11 @@ var NotificationIcon = styled(Icon).withConfig({
   componentId: "sc-1p26rkq-3"
 })(function (props) {
   return css({
-    color: themeGet("colors.white")(props),
+    color: props.colour === "warning" ? themeGet("colors.black70")(props) : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.2")(props),
     mr: "s"
   });
 });
-var LoadingIcon = function LoadingIcon() {
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "circle-notch"],
-    color: "white",
-    marginRight: "s",
-    fontSize: themeGet("fontSizes.2"),
-    spin: true
-  });
-};
-var CloseIcon = function CloseIcon() {
-  return /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "times"],
-    size: "lg",
-    color: "white"
-  });
-};
 export default function Notification(_ref) {
   var icon = _ref.icon,
     colour = _ref.colour,
@@ -187,14 +176,22 @@ export default function Notification(_ref) {
   }, props), icon && /*#__PURE__*/React.createElement(NotificationIcon, _extends({
     colour: colour,
     icon: icon
-  }, iconProps)), loading && /*#__PURE__*/React.createElement(LoadingIcon, null), /*#__PURE__*/React.createElement(NotificationContent, {
+  }, iconProps)), loading && /*#__PURE__*/React.createElement(Loading, {
+    small: true,
+    inverted: colour != "warning",
+    mr: "s"
+  }), /*#__PURE__*/React.createElement(NotificationContent, {
     closable: closable
-  }, children), closable && /*#__PURE__*/React.createElement(Close, {
+  }, children), closable && /*#__PURE__*/React.createElement(CloseButton, {
     className: "close-button",
     tabIndex: "0",
     onClick: onToggle,
     "aria-label": "Close Notification"
-  }, /*#__PURE__*/React.createElement(CloseIcon, null)));
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "times"],
+    size: "lg",
+    color: colour === "warning" ? "black70" : "white"
+  })));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;

package/es/components/Select/index.js

@@ -128,6 +128,23 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
             theme: theme
           })
         },
+        "&:focus-within": {
+          outline: "0",
+          borderColor: props.invalid ? themeGet("colors.danger")({
+            theme: theme
+          }) : themeGet("colors.primary")({
+            theme: theme
+          }),
+          boxShadow: props.invalid ? themeGet("shadows.thickOutline")({
+            theme: theme
+          }) + " " + themeGet("colors.danger30")({
+            theme: theme
+          }) : themeGet("shadows.thickOutline")({
+            theme: theme
+          }) + " " + themeGet("colors.primary30")({
+            theme: theme
+          })
+        },
         borderColor: state.isFocused ? themeGet("colors.primary")({
           theme: theme
         }) : props.inverted ? themeGet("colors.white30")({

package/es/components/SideNav/index.js

@@ -403,7 +403,7 @@ var NavItem = function NavItem(_ref) {
   return item.actionType === "link" ? /*#__PURE__*/React.createElement(SideNavItemPopover, {
     text: item.name,
     textAlign: "center",
-    width: "110px",
+    width: "124px",
     active: item.index === activeItem,
     bottomAligned: item.bottomAligned
     // showItemNames={showItemNames}
@@ -421,7 +421,7 @@ var NavItem = function NavItem(_ref) {
   })))) : /*#__PURE__*/React.createElement(SideNavItemPopover, {
     text: item.name,
     textAlign: "center",
-    width: "110px",
+    width: "124px",
     active: item.index === activeItem,
     bottomAligned: item.bottomAligned
     // showItemNames={showItemNames}

package/es/components/StatusDot/index.js

@@ -1,12 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["theme", "icon", "children"];
+var _excluded = ["icon", "children"];
 import React from "react";
 import PropTypes from "prop-types";
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import { space, layout, color, compose, variant } from "styled-system";
 import { css } from "@styled-system/css";
-import systemtheme from "../../systemtheme";
 import { themeGet } from "@styled-system/theme-get";
 var StatusDotStyles = compose(space, layout, color);
 var StatusDotItem = styled("div").withConfig({
@@ -41,15 +40,12 @@ var StatusDotItem = styled("div").withConfig({
   });
 }, StatusDotStyles);
 export default function StatusDot(_ref) {
-  var theme = _ref.theme,
-    icon = _ref.icon,
+  var icon = _ref.icon,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(StatusDotItem, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(StatusDotItem, _extends({}, props, {
     icon: icon
-  }), children));
+  }), children);
 }
 StatusDot.propTypes = {
   /** Specifies StatusDot colour. Colours are taken from the standard design system colours. */
@@ -61,25 +57,11 @@ StatusDot.propTypes = {
   /** Specifies the system design theme. */
   theme: PropTypes.object
 };
-StatusDot.defaultProps = {
-  theme: systemtheme
-};
 StatusDot.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "StatusDot",
   "props": {
-    "theme": {
-      "defaultValue": {
-        "value": "systemtheme",
-        "computed": true
-      },
-      "description": "Specifies the system design theme.",
-      "type": {
-        "name": "object"
-      },
-      "required": false
-    },
     "variant": {
       "description": "Specifies StatusDot colour. Colours are taken from the standard design system colours.",
       "type": {
@@ -110,6 +92,13 @@ StatusDot.__docgenInfo = {
         "name": "node"
       },
       "required": false
+    },
+    "theme": {
+      "description": "Specifies the system design theme.",
+      "type": {
+        "name": "object"
+      },
+      "required": false
     }
   }
 };

package/es/components/StyledLink/StyledLink.stories.js

@@ -35,7 +35,7 @@ export var boldStyledLink = function boldStyledLink() {
 boldStyledLink.storyName = "Bold";
 export var invertedStyledLink = function invertedStyledLink() {
   return /*#__PURE__*/React.createElement(Box, {
-    bg: "greyDarker",
+    bg: "greyDarkest",
     p: "r"
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "center"

package/es/components/Tabs/index.js

@@ -32,7 +32,7 @@ export var TabItem = styled("div").withConfig({
       py: 3,
       fontSize: themeGet("fontSizes.1")(props),
       fontWeight: themeGet("fontWeights.2")(props),
-      color: themeGet("colors.greyDark")(props),
+      color: themeGet("colors.greyDarker")(props),
       display: "flex",
       alignItems: "center",
       position: "relative",

package/es/components/Tag/Tag.stories.js

@@ -201,13 +201,11 @@ export var smallVariant = function smallVariant() {
   }, "Agile Coach");
 };
 export var highlightedVariant = function highlightedVariant() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     highlighted: true,
     tagType: "specialist"
-  }, "Agile Coach"));
+  }, "Agile Coach");
 };
 export var personTag = function personTag() {
   return /*#__PURE__*/React.createElement(Spacer, {

package/es/components/Tag/index.js

@@ -13,7 +13,7 @@ var TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
 })(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, function (props) {
-  return props.small ? "26px" : "30px";
+  return props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault");
 });
 var TagValue = styled.button.attrs(function (props) {
   return {
@@ -35,24 +35,24 @@ var TagValue = styled.button.attrs(function (props) {
 }, function (props) {
   return props.showEdit || props.showInfo || props.showRemove ? "15px 0 0 15px" : "15px";
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return (props.showEdit || props.showInfo || props.showRemove) && props.small ? "2px 4px 2px 6px" : props.showEdit || props.showInfo || props.showRemove ? "3px 4px 3px 10px" : props.small ? "2px 6px 2px 6px" : "3px 10px 3px 10px";
+  return props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault");
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
+  return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningLight")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
 }, function (props) {
   return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], function (props) {
-    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
   }, function (props) {
-    return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
+    return props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
   }, function (props) {
-    return props.selected && props.highlighted ? themeGet("colors.warningDarker")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
+    return props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
   }, function (props) {
-    return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
+    return props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
   }, function (props) {
-    return props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primaryLighter")(props);
+    return props.selected && props.highlighted ? "rgba(255,255,255,0.3)" : props.selected ? "rgba(0,0,0,0.3)" : themeGet("colors.primary20")(props);
   });
 });
 var TagValueText = styled.div.withConfig({
@@ -69,7 +69,7 @@ var TagActionIconWrapper = styled(TagValue).withConfig({
 })(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
 }, function (props) {
-  return props.showRemove ? "0 7px 0 7px" : props.showInfo ? "0 12px 0 11px" : "0 8px 0 8px";
+  return props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px";
 }, function (props) {
   return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
     return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
@@ -80,7 +80,9 @@ var TagActionIconWrapper = styled(TagValue).withConfig({
 var TagRemoveIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagRemoveIconWrapper",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;}", ""], function (props) {
+})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], function (props) {
+  return props.small ? "0 8px 3px 7px" : "0 10px 3px 9px";
+}, function (props) {
   return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
     return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
   }, function (props) {
@@ -93,31 +95,31 @@ var TagType = styled.div.withConfig({
 })(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
   return props.small ? "6px" : "10px";
 }, function (props) {
-  return props.small ? themeGet("space.1")(props) : themeGet("space.2")(props);
+  return props.small ? themeGet("space.2")(props) : themeGet("space.2")(props);
 }, function (props) {
   return themeGet("radii.1")(props);
 }, function (props) {
   return props.small ? "1rem" : themeGet("fontSizes.0")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
+  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningLighter")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
 });
 var TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
   componentId: "sc-1dh2aa8-6"
 })(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], function (props) {
-  return props.small ? "20px" : "22px";
+  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
 }, function (props) {
-  return props.small ? "20px" : "22px";
+  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
 }, themeGet("space.xs"), function (props) {
-  return props.small ? "-4px" : "-7px";
+  return props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault");
 }, function (props) {
-  return props.small ? "0.9rem" : "1rem";
+  return props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault");
 }, function (props) {
-  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
+  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
 }, function (props) {
-  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
 });
 
 /**
@@ -155,12 +157,15 @@ export default function Tag(_ref) {
     showInfo: showInfo,
     showRemove: showRemove,
     onClick: onSelect,
-    small: small
+    small: small,
+    "aria-label": "Navigate to tag",
+    title: "Navigate to tag"
   }, personEntity && /*#__PURE__*/React.createElement(TagAvatar, {
     selected: selected,
     highlighted: highlighted,
     disabled: disabled,
     small: small,
+    imageAlt: "Avatar for ".concat(children),
     image: personEntity.avatarSrc,
     initials: personEntity.initials
   }), /*#__PURE__*/React.createElement(TagValueText, {
@@ -180,7 +185,10 @@ export default function Tag(_ref) {
     highlighted: highlighted,
     disabled: disabled,
     showRemove: showRemove,
-    onClick: onEdit
+    onClick: onEdit,
+    small: small,
+    "aria-label": "Edit tag",
+    title: "Edit tag"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "pen"],
     size: "xs"
@@ -189,7 +197,10 @@ export default function Tag(_ref) {
     highlighted: highlighted,
     disabled: disabled,
     onClick: onInfo,
-    showInfo: showInfo
+    showInfo: showInfo,
+    small: small,
+    "aria-label": "View tag details",
+    title: "View tag details"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "info"],
     size: "xs"
@@ -197,7 +208,10 @@ export default function Tag(_ref) {
     selected: selected,
     highlighted: highlighted,
     disabled: disabled,
-    onClick: onRemove
+    onClick: onRemove,
+    small: small,
+    "aria-label": "Remove tag",
+    title: "Remove tag"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     size: "xs"

package/es/components/TextInput/index.js

@@ -115,7 +115,7 @@ var Label = styled.label.withConfig({
     var inputHeight = themeGet("appScale.inputHeightLarge")(props);
     return "calc(".concat(inputHeight, " / 3)");
   }, function (props) {
-    return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.grey")(props);
+    return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.greyDark")(props);
   }) : css([""]);
 }, function (props) {
   return props.mandatory ? css(["&:after{content:\" *\";color:", ";}"], themeGet("colors.danger")(props)) : css([""]);

package/es/components/Toggle/index.js

@@ -10,7 +10,7 @@ var Group = styled.div.withConfig({
   displayName: "Toggle__Group",
   componentId: "sc-f6l22k-0"
 })(["", " ", " display:flex;align-items:center;", ";"], space, layout, function (props) {
-  return props.inverted ? css(["input{&:focus{+ label{box-shadow:", ";}}}label{&:first-of-type{background:", ";}}"], themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black30")(props), themeGet("colors.greyDark")(props)) : css([""]);
+  return props.inverted ? css(["input{&:focus{+ label{box-shadow:", ";}}}label{&:first-of-type{background:", ";}}"], themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black")(props), themeGet("colors.greyDark")(props)) : css([""]);
 });
 var Input = styled.input.attrs({
   type: "checkbox"
@@ -20,7 +20,7 @@ var Input = styled.input.attrs({
 })(["opacity:0;position:absolute;visibility:", ";margin:0;z-index:-1;width:0;height:0;pointer-events:none;&:focus{+ label{box-shadow:", ";}}:checked{+ label{background:", ";&:after{left:calc(100% - 3px);transform:translateX(-100%);}}&:focus{+ label{box-shadow:", ";}}}"], function (props) {
   return props.srHide ? "hidden" : "visible";
 }, function (props) {
-  return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.black30")(props);
+  return themeGet("shadows.thickOutline")(props) + " " + themeGet("colors.black20")(props);
 }, function (props) {
   return themeGet("colors.success")(props);
 }, function (props) {

package/es/components/Typography/index.js

@@ -327,7 +327,7 @@ export var Quote = styled("blockquote").withConfig({
       display: "block",
       fontStyle: "italic",
       fontSize: themeGet("fontSizes.2")(props),
-      color: themeGet("colors.grey")(props)
+      color: themeGet("colors.greyDark")(props)
     }
   });
 }, typeStyles);

package/es/systemThemeCollapsed.js

@@ -23,7 +23,7 @@ space.l = space[5];
 space.xl = space[6];
 space.xxl = space[7];
 space.xxxl = space[8];
-space.between = "10px";
+space.between = "8px";
 
 // SIZES (for LAYOUT properties)
 // Half these values - Done
@@ -37,29 +37,18 @@ sizes.xl = sizes[6];
 sizes.xxl = sizes[7];
 sizes.xxxl = sizes[8];
 
-// OLD COLOUR PALETTE
-// const black = "#000";
-// const white = "#fff";
-// const grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
-// const primary = "#30ABD6"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
-// const secondary = "#8E41F0"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
-// const success = "#ACD036"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
-// // const successDesaturated = desaturate(0.1, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
-// const warning = "#EDC652"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
-// const danger = "#D42A59"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
-
-// NEW COLOUR PALETTE
+// NEW ACCESSIBLE COLOUR PALETTE
 var black = "#000";
 var white = "#fff";
 var grey = "#90979A"; // Base grey - Mainly used for UI elements like backgrounds, muted text, icons, dividers or borders
-var primary = "#0091EA"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
-var secondary = "#9B51E0"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
+var primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand colour (blue) - Mainly used for buttons, links and selected states
+var secondary = "#8714f2"; // Change to #7211ED with new colour palette. Potential new purple colour. Introduce new secondary colour maybe purple when we re-design our colour palette
 //const tertiary = "#FF9E44"; // A tertiary colour for limited use. Not sure if needed.
-var success = "#1BC363"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
+var success = "#00883b"; // Base brand success colour (green) - Mainly used to indicate success, status=good, valid, add, or save states
 var successDesaturated = desaturate(0.1, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
-var warning = "#ffbc00"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
+var warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
 var warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
-var danger = "#EC465A"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
+var danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
 
 export var colors = {
   /* Greyscale */
@@ -94,7 +83,7 @@ export var colors = {
   primary: primary,
   primaryLight: lighten(0.2, primary),
   primaryLighter: lighten(0.35, primary),
-  primaryLightest: lighten(0.45, primary),
+  primaryLightest: lighten(0.55, primary),
   primaryDark: darken(0.1, primary),
   primaryDarker: darken(0.25, primary),
   primaryDarkest: darken(0.35, primary),
@@ -110,8 +99,8 @@ export var colors = {
   secondary: secondary,
   secondaryLight: lighten(0.1, secondary),
   secondaryLighter: lighten(0.2, secondary),
-  secondaryLightest: lighten(0.3, secondary),
-  secondaryEvenLighter: lighten(0.35, secondary),
+  secondaryLightest: lighten(0.35, secondary),
+  secondaryEvenLighter: lighten(0.4, secondary),
   secondaryDark: darken(0.1, secondary),
   secondaryDarker: darken(0.2, secondary),
   secondaryDarkest: darken(0.3, secondary),
@@ -146,8 +135,8 @@ export var colors = {
   // successLightest: lighten(0.35, success),
   successLight: lighten(0.11, successDesaturated),
   successLighter: lighten(0.25, successDesaturated),
-  successLightest: lighten(0.3, successDesaturated),
-  successEvenLighter: lighten(0.45, successDesaturated),
+  successLightest: lighten(0.5, successDesaturated),
+  successEvenLighter: lighten(0.55, successDesaturated),
   successDark: darken(0.1, success),
   successDarker: darken(0.2, success),
   successDarkest: darken(0.3, success),
@@ -163,10 +152,10 @@ export var colors = {
   warning: warning,
   warningLight: lighten(0.15, warning),
   warningLighter: lighten(0.25, warning),
-  warningLightest: lighten(0.3, warning),
-  warningDark: darken(0.03, warningSaturated),
-  warningDarker: darken(0.08, warningSaturated),
-  warningDarkest: darken(0.25, warningSaturated),
+  warningLightest: lighten(0.4, warning),
+  warningDark: darken(0.1, warningSaturated),
+  warningDarker: darken(0.2, warningSaturated),
+  warningDarkest: darken(0.3, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),
@@ -179,7 +168,7 @@ export var colors = {
   danger: danger,
   dangerLight: lighten(0.1, danger),
   dangerLighter: lighten(0.2, danger),
-  dangerLightest: lighten(0.25, danger),
+  dangerLightest: lighten(0.35, danger),
   dangerDark: darken(0.1, danger),
   dangerDarker: darken(0.25, danger),
   dangerDarkest: darken(0.35, danger),
@@ -235,6 +224,18 @@ export var appScale = {
   inputHeightDefault: "32px",
   inputHeightLarge: "52px"
 };
+export var tagScale = {
+  tagHeightDefault: "22px",
+  tagHeightSmall: "18px",
+  tagPaddingDefault: "0 8px",
+  tagPaddingSmall: "0 6px",
+  tagAvatarSizeDefault: "16px",
+  tagAvatarSizeSmall: "14px",
+  tagAvatarMarginLeftDefault: "-6px",
+  tagAvatarMarginLeftSmall: "-5px",
+  tagAvatarFontSizeDefault: "0.8rem",
+  tagAvatarFontSizeSmall: "0.7rem"
+};
 export default {
   fonts: fonts,
   font: font,
@@ -251,5 +252,6 @@ export default {
   breakpoints: breakpoints,
   transition: transition,
   zIndices: zIndices,
-  appScale: appScale
+  appScale: appScale,
+  tagScale: tagScale
 };