Merge pull request #1440 from guardian/v5

5.0.0

.changeset/clean-berries-cough.md

@@ -0,0 +1,6 @@
+---
+'@guardian/source-foundations': patch
+'@guardian/source-react-components': patch
+---
+
+Replace deprecated colour tokens with palette

.changeset/clean-rockets-tickle.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': major
+---
+
+Improve Link/ButtonLink accessibility

.changeset/cool-bats-occur.md

@@ -0,0 +1,6 @@
+---
+'@guardian/source-react-components': major
+'@guardian/source-foundations': minor
+---
+
+Add spaced focus halo and apply to buttons

.changeset/gentle-glasses-compete.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': major
+---
+
+Change underline on subdued Button

.changeset/nasty-chicken-divide.md

@@ -0,0 +1,5 @@
+---
+"@guardian/source-react-components": major
+---
+
+Increase spacing between choice cards and label

.changeset/old-plums-roll.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-foundations': major
+---
+
+Update culture and opinion colours for better contrast

.changeset/perfect-rings-try.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': major
+---
+
+Improve accessibility of unselected state of ChoiceCard

.changeset/perfect-wombats-fix.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-foundations': major
+---
+
+Change brand[500] colour token

.changeset/proud-mugs-sleep.md

@@ -0,0 +1,5 @@
+---
+"@guardian/source-foundations": major
+---
+
+update palette.labs.200

.changeset/strange-brooms-talk.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-react-components': major
+---
+
+Improve accessibility of unselected state of checkbox

.changeset/twelve-taxis-nail.md

@@ -0,0 +1,5 @@
+---
+'@guardian/source-foundations': major
+---
+
+Update focusHalo colour

.storybook/preview/backgrounds.ts

@@ -1,31 +1,27 @@
-import {
-	background,
-	brandBackground,
-	brandAltBackground,
-} from '@guardian/source-foundations';
+import { palette } from '@guardian/source-foundations';
 
 export const backgrounds = {
 	default: 'background.primary',
 	values: [
 		{
 			name: 'background.primary',
-			value: background.primary,
+			value: palette.neutral[100],
 		},
 		{
 			name: 'background.secondary',
-			value: background.secondary,
+			value: palette.neutral[97],
 		},
 		{
 			name: 'background.inverse',
-			value: background.inverse,
+			value: palette.neutral[10],
 		},
 		{
 			name: 'brandBackground.primary',
-			value: brandBackground.primary,
+			value: palette.brand[400],
 		},
 		{
 			name: 'brandAltBackground.primary',
-			value: brandAltBackground.primary,
+			value: palette.brandAlt[400],
 		},
 	],
 };

docs/release-notes/v5.stories.mdx

@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta
+	title="Release notes/Source v5"
+	parameters={{ previewTabs: { canvas: { hidden: true } } }}
+/>
+
+# What's new in v5.0.0
+
+_tl;dr_
+
+-	Accessibility improvements (some components look different)
+-   Component APIs have not changed
+-   Functionality and dependencies have not changed
+
+This brings Source closer to WCAG 2.1 Level AA compliance.
+
+## Migrating to v5
+
+From a code perspective, v5 of Source is a drop-in replacement for v4. There are no
+breaking API changes and functionality has not changed.
+
+There are a number of updates that change the way Source components appear. There are
+also some colour changes. Consumers are advised to ensure the Source components
+and colours still look beautiful and accessible within their products.
+
+If a changed component or colour appears in automated visual regression tests (e.g. in
+Chromatic), please review the changes before upgrading Source.
+
+## Changes
+
+### Identifying Links and Buttons
+
+Links and Buttons are distinctively identified as interactive elements by applying
+ an underline to the text.
+
+- Deprecate `subdued` styling in `<Link>` component.
+- Give all links (including now-deprecated `subdued`) an underline.
+- Increase the thickness of the `<Link>` component's underline on hover
+- Give text-only `<Button>` components (`priority="subdued"`) an underline which increases in thickness on hover
+- Add a small amount of spacing between the `<Button>` and the focus outline
+
+### Colour
+
+Our text colours are optimised to have a 4.5:1 contrast ratio against their background.
+
+For graphical objects and user interface components (e.g. icons, infographics and buttons),
+we aim for a 3:1 contrast ratio against its background.
+
+#### Changes
+
+- ChoiceCard border colour `#999999` -> `#707070`
+- Checkbox border colour `#999999` -> `#707070`
+- labs.200 `#4B8878` -> `#0C7A73`
+- opinion.400 `#E05E00` -> `#C74600`
+- culture.400 `#A1845C` -> `#866D50`
+- brand.500  `#007ABC` -> `#0077B6`
+- focus.400 `#007CC4` -> `#0077B6`
+
+#### Additions
+
+- opinion.450 `#E05E00`
+- culture.450 `#A1845C`
+
+#### Deprecations
+
+- Deprecate opinion.300 `#C74600`
+- Deprecate culture.350 `#866D50`
+
+### Other changes
+
+- Increase spacing between `<ChoiceCard />` and the label
+

packages/@guardian/source-foundations/src/accessibility/focus-halo.stories.mdx

@@ -20,3 +20,17 @@ const customButtonStyles = css`
 	${focusHalo};
 `;
 ```
+
+# `focusHaloSpaced`
+
+The blue halo effect with additional spacing between the element and the halo for better visibility of halo on blue-coloured elements.
+
+Apply the `focusHaloSpaced` style to custom interactive elements:
+
+```tsx
+import { focusHaloSpaced } from '@guardian/source-foundations';
+
+const customButtonStyles = css`
+	${focusHaloSpaced};
+`;
+```

packages/@guardian/source-foundations/src/accessibility/focus-halo.ts

@@ -1,4 +1,4 @@
-import { border } from '../colour/palette';
+import { palette } from '../colour/palette';
 
 /**
  * [Storybook](https://guardian.github.io/source/?path=/docs/packages-source-foundations-focushalo--page)
@@ -8,6 +8,14 @@ import { border } from '../colour/palette';
 export const focusHalo = `
  outline: 0;
  html:not(.src-focus-disabled) & {
-	 box-shadow: 0 0 0 5px ${border.focusHalo};
+	 box-shadow: 0 0 0 5px ${palette.focus[400]};
+ }
+`;
+
+export const focusHaloSpaced = `
+ outline: 0;
+ html:not(.src-focus-disabled) & {
+	outline: 5px solid ${palette.focus[400]};
+	outline-offset: 3px;
  }
 `;

packages/@guardian/source-foundations/src/colour/palette.ts

@@ -15,8 +15,8 @@ const colors = {
 	oranges: [
 		'#672005', //opinion-100
 		'#8D2700', //opinion-200
-		'#C74600', //opinion-300
-		'#E05E00', //opinion-400
+		'#C74600', //opinion-400, opinion-300 (deprecated)
+		'#E05E00', //opinion-450
 		'#FF7F0F', //opinion-500
 		'#FF9941', //opinion-550
 		'#F9B376', //opinion-600
@@ -26,25 +26,23 @@ const colors = {
 		'#003C60', //sport-100
 		'#004E7C', //sport-200
 		'#005689', //sport-300
-		'#0077B6', //sport-400
+		'#0077B6', //sport-400, focus-400, brand-500
 		'#00B2FF', //sport-500
 		'#90DCFF', //sport-600
 		'#F1F8FC', //sport-800
 		'#001536', //brand-100
 		'#041F4A', //brand-300
 		'#052962', //brand-400
-		'#007ABC', //brand-500
 		'#506991', //brand-600
 		'#C1D8FC', //brand-800
-		'#0093E0', //focus-400
 	],
 	browns: [
 		'#2B2625', //culture-50
 		'#3E3323', //culture-100
 		'#574835', //culture-200
 		'#6B5840', //culture-300
-		'#866D50', //culture-350
-		'#A1845C', //culture-400
+		'#866D50', //culture-400, culture-350 (deprecated)
+		'#A1845C', //culture-450
 		'#EACCA0', //culture-500
 		'#E7D4B9', //culture-600
 		'#EFE8DD', //culture-700
@@ -68,7 +66,7 @@ const colors = {
 		'#185E36', //green-300
 		'#22874D', //green-400, success-400
 		'#58D08B', //green-500, success-500
-		'#4B8878', //labs-200
+		'#0C7A73', //labs-200
 		'#65A897', //labs-300
 		'#69D1CA', //labs-400
 	],
@@ -106,9 +104,9 @@ export const palette = {
 		100: colors.blues[7],
 		300: colors.blues[8],
 		400: colors.blues[9],
-		500: colors.blues[10],
-		600: colors.blues[11],
-		800: colors.blues[12],
+		500: colors.blues[3],
+		600: colors.blues[10],
+		800: colors.blues[11],
 	},
 	brandAlt: {
 		200: colors.yellows[0],
@@ -148,8 +146,9 @@ export const palette = {
 	opinion: {
 		100: colors.oranges[0],
 		200: colors.oranges[1],
-		300: colors.oranges[2],
-		400: colors.oranges[3],
+		300: colors.oranges[2], // deprecated, use opinion[400]
+		400: colors.oranges[2],
+		450: colors.oranges[3],
 		500: colors.oranges[4],
 		550: colors.oranges[5],
 		600: colors.oranges[6],
@@ -169,8 +168,9 @@ export const palette = {
 		100: colors.browns[1],
 		200: colors.browns[2],
 		300: colors.browns[3],
-		350: colors.browns[4],
-		400: colors.browns[5],
+		350: colors.browns[4], // deprecated, use culture[400]
+		400: colors.browns[4],
+		450: colors.browns[5],
 		500: colors.browns[6],
 		600: colors.browns[7],
 		700: colors.browns[8],
@@ -201,7 +201,7 @@ export const palette = {
 		800: colors.grays[17],
 	},
 	focus: {
-		400: '#007CC4',
+		400: colors.blues[3],
 	},
 };
 

packages/@guardian/source-foundations/src/index.test.ts

@@ -49,6 +49,7 @@ it('Should have exactly these exports', () => {
 		'error',
 		'focus',
 		'focusHalo',
+		'focusHaloSpaced',
 		'fontWeights',
 		'fonts',
 		'from',

packages/@guardian/source-foundations/src/index.ts

@@ -2,7 +2,7 @@ import { palette } from './colour/palette';
 
 // accessibility
 export { descriptionId } from './accessibility/description-id';
-export { focusHalo } from './accessibility/focus-halo';
+export { focusHalo, focusHaloSpaced } from './accessibility/focus-halo';
 export { generateSourceId } from './accessibility/generate-source-id';
 export { visuallyHidden } from './accessibility/visually-hidden';
 

packages/@guardian/source-foundations/src/utils/resets.ts

@@ -1,4 +1,4 @@
-import { background, text } from '../colour/palette';
+import { palette } from '../colour/palette';
 
 ////////////////////////////
 // Element specific resets
@@ -43,8 +43,8 @@ const defaults = `
         font-variant-ligatures: common-ligatures;
     }
     body {
-        background-color: ${background.primary};
-        color: ${text.primary};
+        background-color: ${palette.neutral[100]};
+        color: ${palette.neutral[7]};
     }
     em {
         font-style: italic;

packages/@guardian/source-react-components/README.md

@@ -78,11 +78,11 @@ To extend or override the styles of Source components, pass `SerializedStyles` g
 import { css } from '@emotion/react';
 
 const dangerStyles = css`
-    background-colour: ${error[500]};
-    color: ${text.ctaPrimary};
+    background-colour: ${palette.error[500]};
+    color: ${palette.neutral[100]};
 
     &:hover {
-        background-colour: ${error[400]};
+        background-colour: ${palette.error[400]};
     }
 `;
 

packages/@guardian/source-react-components/src/accordion/theme.ts

@@ -1,8 +1,8 @@
-import { border, text } from '@guardian/source-foundations';
+import { palette } from '@guardian/source-foundations';
 
 export const accordionThemeDefault = {
 	accordion: {
-		textPrimary: text.primary,
-		borderPrimary: border.primary,
+		textPrimary: palette.neutral[7],
+		borderPrimary: palette.neutral[60],
 	},
 };