diff --git a/lib/components/Typography/Typography.stories.mdx b/lib/components/Typography/Typography.stories.mdx index 9771c4fb..c920acc0 100644 --- 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 -

Grey-coloured text

+

Grey-coloured text

Success-coloured text

-

Warning-coloured text

Danger-coloured text

White text for dark backgrounds

diff --git a/lib/components/Typography/index.js b/lib/components/Typography/index.js index 2df5ab3b..49fadab2 100644 --- 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 index 04548b58..bb5742cf 100644 --- 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 index b18677c0..fed37be5 100644 --- 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),