few more fixes

orchestrated-io · Dec 20, 2023 · c56584b · c56584b
1 parent d9266e3
commit c56584b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 10 deletions.
diff --git a/lib/components/Typography/Typography.stories.mdx b/lib/components/Typography/Typography.stories.mdx
@@ -149,9 +149,8 @@ To apply colour to text, use the `color` property in the `Text` component. Usage
 <Canvas>
   <Story name="Styling/Colours">
     <Spacer my={2}>
-      <P color="grey">Grey-coloured text</P>
+      <P color="greyDark">Grey-coloured text</P>
       <P color="success">Success-coloured text</P>
-      <P color="warning">Warning-coloured text</P>
       <P color="danger">Danger-coloured text</P>
       <Box bg="greyDarker" p="r">
         <P color="white">White text for dark backgrounds</P>

diff --git a/lib/components/Typography/index.js b/lib/components/Typography/index.js
@@ -333,7 +333,7 @@ export const Quote = styled("blockquote")(
         display: "block",
         fontStyle: "italic",
         fontSize: themeGet("fontSizes.2")(props),
-        color: themeGet("colors.grey")(props)
+        color: themeGet("colors.greyDark")(props)
       }
     }),
   typeStyles

diff --git a/lib/systemThemeCollapsed.js b/lib/systemThemeCollapsed.js
@@ -75,7 +75,7 @@ sizes.xl = sizes[6];
 sizes.xxl = sizes[7];
 sizes.xxxl = sizes[8];
 
-// NEW COLOUR PALETTE
+// NEW ACCESSIBLE 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
@@ -84,7 +84,7 @@ const secondary = "#8714f2"; // Change to #7211ED with new colour palette. Poten
 //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 warning = "#f28a00"; // Base brand warning colour - Mainly used to indicate warnings, slipping or near due states
+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
 
@@ -191,7 +191,7 @@ export const colors = {
   warningLight: lighten(0.15, warning),
   warningLighter: lighten(0.25, warning),
   warningLightest: lighten(0.4, warning),
-  warningDark: darken(0.14, warningSaturated),
+  warningDark: darken(0.1, warningSaturated),
   warningDarker: darken(0.2, warningSaturated),
   warningDarkest: darken(0.3, warningSaturated),
   warning10: rgba(warning, 0.1),

diff --git a/lib/systemtheme.js b/lib/systemtheme.js
@@ -74,7 +74,7 @@ sizes.xl = sizes[6];
 sizes.xxl = sizes[7];
 sizes.xxxl = sizes[8];
 
-// NEW COLOUR PALETTE
+// NEW ACCESSIBLE 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
@@ -187,9 +187,9 @@ export const colors = {
   success80: rgba(success, 0.8),
   success90: rgba(success, 0.9),
   warning,
-  warningLight: lighten(0.15, warning),
-  warningLighter: lighten(0.25, warning),
-  warningLightest: lighten(0.4, warning),
+  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),