orcs-design-system 3.1.15 → 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/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.15",
+  "version": "3.1.16",
   "engines": {
     "node": "18.17.1"
   },