orcs-design-system 3.1.12 → 3.1.14

package/es/components/Avatar/Avatar.stories.js

@@ -83,6 +83,7 @@ export var small = function small() {
       href: "#"
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
@@ -93,7 +94,7 @@ export var large = function large() {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
     sizing: "large",
-    title: "Ayden Lundgre TESTER",
+    title: "Ayden Lundgre",
     titleLevel: "H1",
     subtitle: "Senior Business Analyst",
     initials: "AL"
@@ -109,6 +110,7 @@ export var large = function large() {
       href: "#"
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
@@ -134,6 +136,7 @@ export var subtitleContent = function subtitleContent() {
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Ayden Lundgre"),
+    imageAlt: "Avatar for Ayden Lundgre",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
@@ -146,7 +149,7 @@ export var subtitleContent = function subtitleContent() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre",
+    imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Flex, {
       flexWrap: "wrap"
     }, /*#__PURE__*/React.createElement(Spacer, {
@@ -168,7 +171,7 @@ export var localTime = function localTime() {
     }, "Ayden Lundgre"),
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre",
+    imageAlt: "Avatar for Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
     }, "Senior Business Analyst"),
@@ -196,7 +199,7 @@ export var inverted = function inverted() {
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre"
+    imageAlt: "Avatar for Ayden Lundgre"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     sizing: "small",
@@ -214,7 +217,7 @@ export var inverted = function inverted() {
     subtitle: "Senior Business Analyst",
     initials: "AL",
     image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
-    imageAlt: "Ayden Lundgre"
+    imageAlt: "Avatar for Ayden Lundgre"
   })));
 };
 inverted.storyName = "Inverted";
@@ -228,7 +231,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
-    imageAlt: "Team Photo",
+    imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
@@ -237,7 +240,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
-    imageAlt: "Team Photo"
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
     sizing: "small",
@@ -245,14 +248,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    initials: "IL"
+    initials: "IL",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "square",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Innovation Lab"),
-    subtitle: "15 team members"
+    subtitle: "15 team members",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -260,7 +265,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
-    imageAlt: "Team Photo",
+    imageAlt: "Avatar for Innovation Lab",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
@@ -269,7 +274,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Innovation Lab"),
     subtitle: "15 team members",
     image: "https://images.unsplash.com/photo-1582213782179-e0d53f98f2ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80",
-    imageAlt: "Team Photo"
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     sizing: "small",
@@ -277,14 +282,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Innovation Lab"),
     subtitle: "15 team members",
-    initials: "IL"
+    initials: "IL",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "hexagon",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Innovation Lab"),
-    subtitle: "15 team members"
+    subtitle: "15 team members",
+    imageAlt: "Avatar for Innovation Lab"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -292,7 +299,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Javascript"),
     subtitle: "Tagged 123 times",
     image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
-    imageAlt: "Screen Photo",
+    imageAlt: "Avatar for Javascript",
     sizing: "large"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
@@ -301,7 +308,7 @@ export var alternateShapes = function alternateShapes() {
     }, "Javascript"),
     subtitle: "Tagged 123 times",
     image: "https://images.unsplash.com/photo-1627398242454-45a1465c2479?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2148&q=80",
-    imageAlt: "Screen Photo"
+    imageAlt: "Avatar for Javascript"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     sizing: "small",
@@ -309,14 +316,16 @@ export var alternateShapes = function alternateShapes() {
       href: "#"
     }, "Javascript"),
     subtitle: "Tagged 123 times",
-    initials: "JS"
+    initials: "JS",
+    imageAlt: "Avatar for Javascript"
   }), /*#__PURE__*/React.createElement(Avatar, {
     shape: "tag",
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
       href: "#"
     }, "Javascript"),
-    subtitle: "Tagged 123 times"
+    subtitle: "Tagged 123 times",
+    imageAlt: "Avatar for Javascript"
   }));
 };
 alternateShapes.storyName = "Alternate Shapes";

package/es/components/Avatar/index.js

@@ -197,13 +197,16 @@ var Title = styled(function (_ref) {
   return css({
     fontSize: themeGet("fontSizes.2")(props),
     "> a": {
-      fontSize: themeGet("fontSizes.2")(props)
+      fontSize: themeGet("fontSizes.2")(props),
+      color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
     },
     "> div > a": {
-      fontSize: themeGet("fontSizes.2")(props)
+      fontSize: themeGet("fontSizes.2")(props),
+      color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
     },
     "> div > div > a": {
-      fontSize: themeGet("fontSizes.2")(props)
+      fontSize: themeGet("fontSizes.2")(props),
+      color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
     }
   });
 }, function (props) {
@@ -251,7 +254,7 @@ var Subtitle = styled(Text).withConfig({
   componentId: "sc-1wtet2j-5"
 })(function (props) {
   return css({
-    color: themeGet("colors.grey")(props),
+    color: themeGet("colors.greyDark")(props),
     fontSize: themeGet("fontSizes.1")(props)
   });
 }, function (props) {
@@ -308,7 +311,7 @@ var Avatar = function Avatar(_ref2) {
     if (imageAlt) {
       return imageAlt;
     } else if (typeof title === "string") {
-      return title;
+      return "Avatar for ".concat(title);
     }
   }, [imageAlt, title]);
   var component = /*#__PURE__*/React.createElement(AvatarWrapper, _extends({}, props, {

package/es/components/Badge/index.js

@@ -47,7 +47,7 @@ var Item = styled("span").withConfig({
       },
       warning: {
         color: themeGet("colors.warningDarkest")(props),
-        bg: themeGet("colors.warningLightest")(props)
+        bg: themeGet("colors.warningLighter")(props)
       },
       danger: {
         color: themeGet("colors.dangerDarkest")(props),

package/es/components/Button/index.js

@@ -126,12 +126,12 @@ var StyledButton = styled("button").withConfig({
       },
       ghost: {
         bg: themeGet("colors.primaryLightest")(props),
-        color: themeGet("colors.primary")(props),
+        color: themeGet("colors.primaryDark")(props),
         borderColor: themeGet("colors.primaryLightest")(props),
         "&:hover": {
           bg: themeGet("colors.primaryLighter")(props),
           borderColor: themeGet("colors.primaryLighter")(props),
-          color: themeGet("colors.primaryDark")(props)
+          color: themeGet("colors.primaryDarker")(props)
         },
         "&:focus": {
           outline: "0",

package/es/components/Card/index.js

@@ -6,7 +6,7 @@ import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import Icon from "../Icon/";
 import Box from "../Box/";
-import { H3, H6 } from "../Typography";
+import { H3, H4 } from "../Typography";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 var Item = styled.div.withConfig({
@@ -29,13 +29,13 @@ var Item = styled.div.withConfig({
 }, function (props) {
   return props.center ? css([",> *,> div > *{display:flex;flex-direction:column;align-items:center;}"]) : css([""]);
 }, function (props) {
-  return props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h6{margin-left:auto;float:right;}"]) : css([""]);
+  return props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h4{margin-left:auto;float:right;}"]) : css([""]);
 });
 var ChangeIcon = styled.div.withConfig({
   displayName: "Card__ChangeIcon",
   componentId: "sc-yfq75p-1"
 })(["display:inline-block;width:14px;height:2px;background-size:14px 14px;background-color:", ";margin:0 0 0 ", ";", ""], function (props) {
-  return themeGet("colors.grey")(props);
+  return themeGet("colors.greyDark")(props);
 }, function (props) {
   return themeGet("space.3")(props);
 }, function (props) {
@@ -45,11 +45,11 @@ var ChangeValue = styled.small.withConfig({
   displayName: "Card__ChangeValue",
   componentId: "sc-yfq75p-2"
 })(["display:flex;align-items:center;font-size:", ";font-weight:", ";color:", ";margin:0 0 0 ", ";"], function (props) {
-  return themeGet("fontSizes.3")(props);
+  return themeGet("fontSizes.2")(props);
 }, function (props) {
   return themeGet("fontWeights.0")(props);
 }, function (props) {
-  return themeGet("colors.grey")(props);
+  return themeGet("colors.greyDark")(props);
 }, function (props) {
   return themeGet("space.3")(props);
 });
@@ -88,7 +88,10 @@ export default function Card(_ref) {
     mr: "s"
   }) : null, title ? /*#__PURE__*/React.createElement(H3, null, title) : null, changeIcon ? /*#__PURE__*/React.createElement(ChangeIcon, {
     changeIcon: changeIcon
-  }) : null, changeValue ? /*#__PURE__*/React.createElement(ChangeValue, null, changeValue) : null, subtitle ? /*#__PURE__*/React.createElement(H6, null, subtitle) : null), /*#__PURE__*/React.createElement(Box, null, children));
+  }) : null, changeValue ? /*#__PURE__*/React.createElement(ChangeValue, null, changeValue) : null, subtitle ? /*#__PURE__*/React.createElement(H4, {
+    fontSize: "1",
+    color: "greyDark"
+  }, subtitle) : null), /*#__PURE__*/React.createElement(Box, null, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;

package/es/components/Loading/index.js

@@ -45,7 +45,7 @@ export default function Loading(_ref) {
   var component = /*#__PURE__*/React.createElement(LoadingWrapper, _extends({}, props, {
     centered: centered
   }), /*#__PURE__*/React.createElement(LoadingIcon, {
-    role: "image",
+    role: "img",
     "aria-label": ariaLabel,
     large: large,
     inverted: inverted,

package/es/components/Modal/Modal.stories.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import Button from "../Button";
 import Modal from ".";
 import { H3, P } from "../Typography";
@@ -17,6 +17,7 @@ var Basic = function Basic() {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -29,11 +30,14 @@ var Basic = function Basic() {
     };
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick
   }, "Open basic modal"), /*#__PURE__*/React.createElement(Modal, {
+    ariaLabel: "Modal Name",
     visible: visible,
     handleOnConfirm: handleOnConfirm,
-    onClose: onToggleModal(false)
+    onClose: onToggleModal(false),
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(H3, null, "Modal Title"), /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content."))));
@@ -41,11 +45,19 @@ var Basic = function Basic() {
 export var basicModal = function basicModal() {
   return /*#__PURE__*/React.createElement(Basic, null);
 };
+basicModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var Advanced = function Advanced() {
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     visible = _useState4[0],
     setVisible = _useState4[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -62,6 +74,7 @@ var Advanced = function Advanced() {
     onClick: handleOnConfirm
   }, "Go to full article");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick
   }, "Open advanced modal"), /*#__PURE__*/React.createElement(Modal, {
     maxWidth: "500px",
@@ -72,7 +85,8 @@ var Advanced = function Advanced() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content. This content will be scrollable if it exeeds the height of the modal."), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/React.createElement(P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"))));
@@ -80,11 +94,19 @@ var Advanced = function Advanced() {
 export var advancedModal = function advancedModal() {
   return /*#__PURE__*/React.createElement(Advanced, null);
 };
+advancedModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var BasicDialogue = function BasicDialogue() {
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     visible = _useState6[0],
     setVisible = _useState6[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -106,6 +128,7 @@ var BasicDialogue = function BasicDialogue() {
     onClick: onToggleModal(false)
   }, "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick,
     variant: "danger",
     iconLeft: true
@@ -115,7 +138,8 @@ var BasicDialogue = function BasicDialogue() {
     visible: visible,
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(P, {
@@ -126,11 +150,19 @@ var BasicDialogue = function BasicDialogue() {
 export var basicDialogueModal = function basicDialogueModal() {
   return /*#__PURE__*/React.createElement(BasicDialogue, null);
 };
+basicDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        ref={button}\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 var EditDialogue = function EditDialogue() {
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     visible = _useState8[0],
     setVisible = _useState8[1];
+  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -159,6 +191,7 @@ var EditDialogue = function EditDialogue() {
     icon: ["fas", "times"]
   }), "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: button,
     onClick: handleOnButtonClick,
     iconLeft: true
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -168,7 +201,8 @@ var EditDialogue = function EditDialogue() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter
+    footerContent: modalFooter,
+    triggerRef: button
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -187,6 +221,13 @@ var EditDialogue = function EditDialogue() {
 export var editDialogueModal = function editDialogueModal() {
   return /*#__PURE__*/React.createElement(EditDialogue, null);
 };
+editDialogueModal.parameters = {
+  docs: {
+    source: {
+      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+    }
+  }
+};
 basicModal.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Modal/index.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
-import React from "react";
+var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "triggerRef", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import useOnclickOutside from "react-cool-onclickoutside";
 import PropTypes from "prop-types";
@@ -80,6 +81,7 @@ var Modal = function Modal(_ref) {
     minHeight = _ref.minHeight,
     overflow = _ref.overflow,
     onClose = _ref.onClose,
+    triggerRef = _ref.triggerRef,
     theme = _ref.theme,
     visible = _ref.visible,
     overlayID = _ref.overlayID,
@@ -93,14 +95,56 @@ var Modal = function Modal(_ref) {
   var modalRef = useOnclickOutside(function () {
     onClose();
   }, options);
+  var ariaLabel = useMemo(function () {
+    if (restProps.ariaLabel) {
+      return restProps.ariaLabel;
+    } else if (typeof headerContent === "string") {
+      return headerContent;
+    }
+  }, [restProps.ariaLabel, headerContent]);
   useKeyPress(commonKeys.ESCAPE, onClose, options);
   useKeyPress(commonKeys.ESC, onClose, options);
+
+  // Initial focus point for keyboard navigation
+  var top = useRef();
+
+  // If bottom becomes focused then re-focus the close button
+  var bottom = useRef();
+
+  // Ref to close button
+  var button = useRef();
+
+  // Keep trak on whether its been visible
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasOpened = _useState2[0],
+    setHasOpened = _useState2[1];
+
+  // On becoming visible focus the top
+  useEffect(function () {
+    if (visible) {
+      top.current.focus();
+      setHasOpened(true);
+    } else if (hasOpened) {
+      triggerRef && triggerRef.current.focus();
+    }
+  }, [visible, hasOpened, top, triggerRef]);
   var component = /*#__PURE__*/React.createElement(Overlay, _extends({
     alignItems: "center",
     justifyContent: "center",
     id: overlayID
-  }, restProps), /*#__PURE__*/React.createElement("div", {
-    ref: modalRef
+  }, restProps), /*#__PURE__*/React.createElement("span", {
+    tabIndex: "0",
+    ref: top,
+    onFocus: function onFocus() {
+      return bottom.current.focus();
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: modalRef,
+    role: "dialog",
+    "aria-modal": "true",
+    "aria-label": ariaLabel,
+    tabIndex: "-1"
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
@@ -117,19 +161,23 @@ var Modal = function Modal(_ref) {
     mr: "xl",
     width: "100%"
   }, headerContent), /*#__PURE__*/React.createElement(CloseButton, {
+    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
-    px: "6px"
+    px: "6px",
+    "aria-label": "Close dialog"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     color: "greyDark",
     size: "lg"
   }))) : /*#__PURE__*/React.createElement(CloseButton, {
+    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
-    px: "6px"
+    px: "6px",
+    "aria-label": "Close dialog"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     color: "greyDark",
@@ -137,7 +185,15 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement(ScrollableContent, {
     headerContent: headerContent,
     overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))));
+  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))), /*#__PURE__*/React.createElement("span", {
+    ref: bottom,
+    tabIndex: "-1"
+  }), /*#__PURE__*/React.createElement("span", {
+    tabIndex: "0",
+    onFocus: function onFocus() {
+      return button.current.focus();
+    }
+  }));
   var wrapper = visible && /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component, document.body);
@@ -168,6 +224,10 @@ Modal.propTypes = {
   visible: PropTypes.bool,
   /** Specifies the function to run on clicking X icon. Ensure that this function will close Modal through the `visible` prop */
   onClose: PropTypes.func,
+  /** Required to re-focus keyboard navigation after closing a modal, generally a ref to the button */
+  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
   /** Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`) */
   overflow: PropTypes.string,
   /** Specifies the id of the overlay element for targeting */
@@ -175,7 +235,9 @@ Modal.propTypes = {
   /** Specifies the id of the modal element for targeting */
   modalID: PropTypes.string,
   /** Sets the theme for the Modal */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  /** Specifies the aria-label for the modal. Set this if headerContent is not defined as a string. */
+  ariaLabel: PropTypes.string
 };
 Modal.defaultProps = {
   width: "350px",
@@ -322,6 +384,24 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
+    "triggerRef": {
+      "description": "Required to re-focus keyboard navigation after closing a modal, generally a ref to the button",
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "func"
+        }, {
+          "name": "shape",
+          "value": {
+            "current": {
+              "name": "any",
+              "required": false
+            }
+          }
+        }]
+      },
+      "required": false
+    },
     "overflow": {
       "description": "Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`)",
       "type": {
@@ -335,6 +415,13 @@ Modal.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "ariaLabel": {
+      "description": "Specifies the aria-label for the modal. Set this if headerContent is not defined as a string.",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };

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/index.js

@@ -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.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({
@@ -101,9 +101,9 @@ var TagType = styled.div.withConfig({
 }, 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",
@@ -117,9 +117,9 @@ var TagAvatar = styled(Avatar).withConfig({
 }, function (props) {
   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);
 });
 
 /**
@@ -165,6 +165,7 @@ export default function Tag(_ref) {
     highlighted: highlighted,
     disabled: disabled,
     small: small,
+    imageAlt: "Avatar for ".concat(children),
     image: personEntity.avatarSrc,
     initials: personEntity.initials
   }), /*#__PURE__*/React.createElement(TagValueText, {

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),

package/es/systemtheme.js

@@ -36,29 +36,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 = "#007BC7"; // 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 */
@@ -92,8 +81,8 @@ export var colors = {
   /* Colours */
   primary: primary,
   primaryLight: lighten(0.2, primary),
-  primaryLighter: lighten(0.35, primary),
-  primaryLightest: lighten(0.45, primary),
+  primaryLighter: lighten(0.45, primary),
+  primaryLightest: lighten(0.55, primary),
   primaryDark: darken(0.1, primary),
   primaryDarker: darken(0.25, primary),
   primaryDarkest: darken(0.35, primary),
@@ -109,8 +98,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),
@@ -145,8 +134,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),
@@ -160,12 +149,12 @@ export var colors = {
   success80: rgba(success, 0.8),
   success90: rgba(success, 0.9),
   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),
+  warningLight: lighten(0.15, warningSaturated),
+  warningLighter: lighten(0.25, warningSaturated),
+  warningLightest: lighten(0.4, warningSaturated),
+  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),
@@ -178,7 +167,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),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.12",
+  "version": "3.1.14",
   "engines": {
     "node": "18.17.1"
   },