orcs-design-system 3.1.14 → 3.1.16

package/es/components/Badge/index.js

@@ -66,11 +66,7 @@ var Item = styled("span").withConfig({
         bg: themeGet("colors.primaryLight")(props)
       },
       secondary: {
-        color: themeGet("colors.secondaryDarker")(props),
-        bg: themeGet("colors.secondaryLightest")(props)
-      },
-      secondaryPending: {
-        color: themeGet("colors.secondary")(props),
+        color: themeGet("colors.secondaryDarkest")(props),
         bg: themeGet("colors.secondaryEvenLighter")(props)
       }
     }

package/es/components/ButtonGroup/ButtonGroup.stories.js

@@ -3,17 +3,15 @@ import Box from "../Box";
 import { ButtonGroupContainer, ButtonGroupItem } from ".";
 export default {
   title: "Components/ButtonGroup",
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/React.createElement(Box, {
-      bg: "greyDark",
-      p: "r"
-    }, storyFn());
-  }],
   component: ButtonGroupContainer
 };
 export var defaultButtonGroup = function defaultButtonGroup() {
-  return /*#__PURE__*/React.createElement(ButtonGroupContainer, {
-    controlLabel: "View:"
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: "white",
+    p: "r"
+  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
+    controlLabel: "View:",
+    labelDark: true
   }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
     name: "viewMode",
     label: "Chapters",
@@ -27,13 +25,42 @@ export var defaultButtonGroup = function defaultButtonGroup() {
     name: "viewMode",
     label: "Constraints",
     value: "Constraints view"
-  }));
+  })));
 };
 defaultButtonGroup.story = {
   name: "Default button group"
 };
+export var invertedButtonGroup = function invertedButtonGroup() {
+  return /*#__PURE__*/React.createElement(Box, {
+    bg: "greyDark",
+    p: "r"
+  }, /*#__PURE__*/React.createElement(ButtonGroupContainer, {
+    controlLabel: "View:"
+  }, /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Chapters",
+    value: "Chapters view"
+  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Groups",
+    value: "Groups view",
+    checked: true
+  }), /*#__PURE__*/React.createElement(ButtonGroupItem, {
+    name: "viewMode",
+    label: "Constraints",
+    value: "Constraints view"
+  })));
+};
+invertedButtonGroup.story = {
+  name: "Inverted button group"
+};
 defaultButtonGroup.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "defaultButtonGroup"
+};
+invertedButtonGroup.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "invertedButtonGroup"
 };

package/es/components/ButtonGroup/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "theme", "controlLabel"];
+var _excluded = ["children", "theme", "controlLabel", "labelDark"];
 import PropTypes from "prop-types";
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
@@ -12,7 +12,7 @@ var ButtonGroupControlLabel = styled("div").withConfig({
   componentId: "sc-g7627n-0"
 })(function (props) {
   return css({
-    color: themeGet("colors.white")(props),
+    color: props.labelDark ? themeGet("colors.greyDark") : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.1")(props),
     fontWeight: themeGet("fontWeights.1")(props),
     marginRight: themeGet("space.3")(props)
@@ -27,7 +27,8 @@ var ButtonGroupWrapper = styled("div").withConfig({
     alignItems: "center",
     background: themeGet("colors.greyDarker")(props),
     borderRadius: themeGet("radii.2")(props),
-    padding: "2px"
+    padding: "4px",
+    height: themeGet("appScale.inputHeightDefault")(props)
   });
 });
 var ButtonGroupRadio = styled.input.attrs({
@@ -62,10 +63,9 @@ var ButtonGroupLabel = styled("label").withConfig({
   return css({
     height: "100%",
     borderRadius: themeGet("radii.2")(props),
-    margin: "2px",
     display: "flex",
     alignItems: "center",
-    padding: "".concat(themeGet("space.1")(props), " ").concat(themeGet("space.3")(props)),
+    padding: "0 ".concat(themeGet("space.3")(props)),
     transition: themeGet("transition.transitionDefault")(props),
     fontSize: themeGet("fontSizes.1")(props),
     fontWeight: themeGet("fontWeights.2")(props),
@@ -74,6 +74,9 @@ var ButtonGroupLabel = styled("label").withConfig({
     backgroundColor: props.checked ? themeGet("colors.white")(props) : "#5e686d",
     "&:hover": {
       backgroundColor: props.checked ? themeGet("colors.white")(props) : themeGet("colors.primary")(props)
+    },
+    "&:not(:last-of-type)": {
+      marginRight: "4px"
     }
   });
 });
@@ -84,10 +87,13 @@ export var ButtonGroupContainer = function ButtonGroupContainer(_ref) {
   var children = _ref.children,
     theme = _ref.theme,
     controlLabel = _ref.controlLabel,
+    labelDark = _ref.labelDark,
     props = _objectWithoutProperties(_ref, _excluded);
   var component = /*#__PURE__*/React.createElement(Flex, _extends({
     alignItems: "center"
-  }, props), controlLabel && /*#__PURE__*/React.createElement(ButtonGroupControlLabel, null, controlLabel), /*#__PURE__*/React.createElement(ButtonGroupWrapper, null, children));
+  }, props), controlLabel && /*#__PURE__*/React.createElement(ButtonGroupControlLabel, {
+    labelDark: labelDark
+  }, controlLabel), /*#__PURE__*/React.createElement(ButtonGroupWrapper, null, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -116,6 +122,7 @@ export var ButtonGroupItem = function ButtonGroupItem(_ref2) {
 ButtonGroupContainer.propTypes = {
   children: PropTypes.node,
   controlLabel: PropTypes.string,
+  labelDark: PropTypes.bool,
   theme: PropTypes.object
 };
 ButtonGroupItem.propTypes = {
@@ -145,6 +152,13 @@ ButtonGroupContainer.__docgenInfo = {
       },
       "required": false
     },
+    "labelDark": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "theme": {
       "description": "",
       "type": {

package/es/components/Notification/index.js

@@ -56,7 +56,7 @@ var NotificationWrapper = styled("div").withConfig({
       },
       warning: {
         bg: themeGet("colors.warningLight")(props),
-        color: themeGet("colors.black70")(props)
+        color: themeGet("colors.black80")(props)
       },
       "default": {}
     }
@@ -71,7 +71,7 @@ var NotificationWrapper = styled("div").withConfig({
     },
     warning: {
       bg: themeGet("colors.warningLight"),
-      color: themeGet("colors.black70")
+      color: themeGet("colors.black80")
     },
     "default": {
       bg: themeGet("colors.primaryDark")
@@ -114,7 +114,7 @@ var NotificationIcon = styled(Icon).withConfig({
   componentId: "sc-1p26rkq-3"
 })(function (props) {
   return css({
-    color: props.colour === "warning" ? themeGet("colors.black70")(props) : themeGet("colors.white")(props),
+    color: props.colour === "warning" ? themeGet("colors.black80")(props) : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.2")(props),
     mr: "s"
   });
@@ -190,7 +190,7 @@ export default function Notification(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     size: "lg",
-    color: colour === "warning" ? "black70" : "white"
+    color: colour === "warning" ? "black80" : "white"
   })));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme

package/es/components/Tag/index.js

@@ -41,7 +41,7 @@ var TagValue = styled.button.attrs(function (props) {
 }, function (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.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.black80")(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.warningLighter")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
@@ -103,7 +103,7 @@ var TagType = styled.div.withConfig({
 }, function (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.warningDarkest")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.black70")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
 });
 var TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
@@ -117,7 +117,7 @@ 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 ? themeGet("colors.warningDarkest")(props) : 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.black70")(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.primaryDark")(props);
 });

package/es/systemThemeCollapsed.js

@@ -45,7 +45,7 @@ var primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand co
 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 = "#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 successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 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 = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -155,7 +155,7 @@ export var colors = {
   warningLightest: lighten(0.4, warning),
   warningDark: darken(0.1, warningSaturated),
   warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarkest: darken(0.4, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/es/systemtheme.js

@@ -44,7 +44,7 @@ var primary = "#007BC7"; // Potential new colour: #2a5ec1. Base primary brand co
 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 = "#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 successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 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 = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -154,7 +154,7 @@ export var colors = {
   warningLightest: lighten(0.4, warningSaturated),
   warningDark: darken(0.1, warningSaturated),
   warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarkest: darken(0.4, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/package.json

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