A few colour tweaks

orchestrated-io · Dec 22, 2023 · 7ede012 · 7ede012
1 parent da34abf
commit 7ede012
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 16 deletions.
diff --git a/lib/components/Badge/index.js b/lib/components/Badge/index.js
@@ -62,11 +62,7 @@ const Item = styled("span")
           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)
         }
       }

diff --git a/lib/components/Notification/index.js b/lib/components/Notification/index.js
@@ -53,7 +53,7 @@ const NotificationWrapper = styled("div")
         },
         warning: {
           bg: themeGet("colors.warningLight")(props),
-          color: themeGet("colors.black70")(props)
+          color: themeGet("colors.black80")(props)
         },
         default: {}
       }
@@ -68,7 +68,7 @@ const NotificationWrapper = styled("div")
       },
       warning: {
         bg: themeGet("colors.warningLight"),
-        color: themeGet("colors.black70")
+        color: themeGet("colors.black80")
       },
       default: {
         bg: themeGet("colors.primaryDark")
@@ -109,7 +109,7 @@ const NotificationIcon = styled(Icon)((props) =>
   css({
     color:
       props.colour === "warning"
-        ? themeGet("colors.black70")(props)
+        ? themeGet("colors.black80")(props)
         : themeGet("colors.white")(props),
     fontSize: themeGet("fontSizes.2")(props),
     mr: "s"
@@ -187,7 +187,7 @@ export default function Notification({
           <Icon
             icon={["fas", "times"]}
             size="lg"
-            color={colour === "warning" ? "black70" : "white"}
+            color={colour === "warning" ? "black80" : "white"}
           />
         </CloseButton>
       )}

diff --git a/lib/components/Tag/index.js b/lib/components/Tag/index.js
@@ -74,7 +74,7 @@ const TagValue = styled.button.attrs((props) => ({
     props.disabled
       ? themeGet("colors.greyDarker")(props)
       : props.selected && props.highlighted
-      ? themeGet("colors.black70")(props)
+      ? themeGet("colors.black80")(props)
       : props.selected
       ? themeGet("colors.white")(props)
       : themeGet("colors.primary")(props)};
@@ -234,7 +234,7 @@ const TagType = styled.div`
     props.disabled
       ? themeGet("colors.white")(props)
       : props.selected && props.highlighted
-      ? themeGet("colors.warningDarkest")(props)
+      ? themeGet("colors.black70")(props)
       : props.selected
       ? themeGet("colors.white")(props)
       : themeGet("colors.primaryDark")(props)};
@@ -265,7 +265,7 @@ const TagAvatar = styled(Avatar)`
       props.disabled
         ? themeGet("colors.grey")(props)
         : props.selected && props.highlighted
-        ? themeGet("colors.warningDarkest")(props)
+        ? themeGet("colors.black70")(props)
         : props.selected
         ? "rgba(0,0,0,0.25)"
         : themeGet("colors.primaryLightest")(props)};

diff --git a/lib/systemThemeCollapsed.js b/lib/systemThemeCollapsed.js
@@ -83,7 +83,7 @@ const primary = "#007ac4"; // Potential new colour: #2a5ec1. Base primary brand
 const 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.
 const success = "#00883b"; // 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 successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 const warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
 const warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
 const danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -193,7 +193,7 @@ export const 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),

diff --git a/lib/systemtheme.js b/lib/systemtheme.js
@@ -82,7 +82,7 @@ const primary = "#007BC7"; // Potential new colour: #2a5ec1. Base primary brand
 const 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.
 const success = "#00883b"; // 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 successDesaturated = desaturate(0.3, success); // This is because the lighter versions of success were too saturated and 'minty' coloured.
 const warning = "#ffb71c"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
 const warningSaturated = saturate(1, warning); // This is because the darker versions of warning were too under saturated and mustard looking.
 const danger = "#d90f27"; // Base brand danger/error colour - Mainly used to indicate error, status=bad, at risk or over due states
@@ -192,7 +192,7 @@ export const 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),