- 5cf4d48: Update Typescript to v6 (6.0.3):
- Use https://gist.github.com/privatenumber/3d2e80da28f84ee30b77d53e1693378f as a reference to update your own codebase to TS6.
- If you use
ts-jestto run jest tests, update to v29.4.11 minimum to ensure compatibility with TS6.
- 7fb0f8a: bump
@isaacs/brace-expansiontransitive dep
- 71ca777: Update icons and add
SvgClosedCaptionsOffandSvgClosedCaptionsOn - 81de86f: Add textSans 42 presets (
textSans42,textSansBold42,textSansItalic42)
- c31ae0c: Validate
calculateHoverColourinput as hex code and export the function
- 816eebd:
- Peer Dependency: Update
typescriptto5.9.3 - Peer Dependency: Update
tslibto2.8.1
- Peer Dependency: Update
-
56dab8a: no-op
This is a no-op release to test migration to NPM trusted publishing.
- f5e3b0b: Add new icons: AI Indicator, Guess Puzzles and Trophy
- f1cb6e6: Add new palette colours for Labs: 100, 500, 600, 700
- 4186157: Add notificationBlue.400 colour. Fixes previous addition of opinion.700 which was not built
-
f1248c7: Update lifestyle 800 colour
This change improves contrast against the neutral.46 colour, ensuring compliance with WCAG accessibility standards for text and background colour contrast.
-
b574bf9: Add automatic hover colour calculation for Button themes
backgroundPrimaryHover,backgroundSecondaryHoverandbackgroundTertiaryHoverare now optional properties ofThemeButton. If supplied these hover colours will be used, if not then the following rules will be used to create a hover colour based on the lightness of the other colours.Background colour: Very Dark (Luminosity: 0–10) Lighten by 20% on hover. Dark (Luminosity: 11–20) Darken by 8% on hover. Medium (Luminosity: 21–80) Darken by 5% on hover. Light (Luminosity: 81-90) Darken by 7% on hover. Very Light (Luminosity 91-100) Darken by 10% on hover. Borders with transparent backgrounds: Luminosity 0–40 Set border colour opacity to 10%. Luminosity 40–50 Set border colour opacity to 15%. Luminosity 51–100 Set border colour opacity to 20%.
- 65c6eaf: Add new colour shades news.700, sport.700 and opinion.700
- 601cc6e: Adds new icons
SvgCloudSyncandSvgCloudUpload
- 3f1442d: Bump @emotion/react to 11.11.4
- 29e58ba: Adds new icons to source and both renames and removes some existing icons. This is a major bump and consumers using removed icons will need to update their UI.
- The following icons have been added to source:
'add-to-basket': 'Add to basket',
'all-recipes': 'All recipes',
'bookmark-round-filled': 'Bookmarked',
'bookmark-round-outlined': 'Bookmark',
chef: 'Chef',
'chevron-left-single-small': 'Chevron left',
'chevron-right-single-small': 'Chevron right',
'clock-filled': 'Clock',
'clock-outlined': 'Clock',
cuisines: 'Cuisines',
diets: 'Diets',
discover: 'Discover',
'folder-filled': 'Folder',
folder: 'Folder',
'headphones-filled': 'Listening',
'headphones-outlined': 'Listen',
'headphones-round-filled': 'Listening',
'headphones-round-outlined': 'Listen',
list: 'list',
'meal-types': 'Meal types',
'newspaper-archive': 'Newspaper archive',
'newsletter-outlined': 'Newsletter',
'padlock-locked': 'Padlock locked',
'padlock-unlocked': 'Padlock unlocked',
'share-round-filled': 'Share',
'share-round-outline': 'Share',
'shopping-list': 'Shopping list',
'shopping-basket': 'Shopping basket',
sort: 'Sort',
'text-size-round-filled': 'Text size active',
'text-size-round-outline': 'Text size',
'transparent-arrow-left-straight-round': 'Go back',
'white-arrow-left-straight-round': 'Go back',
-
The following icons have been updated in source:
newsletterhas becomenewsletter-filled -
The following icons have been removed in source:
SvgAlertTriangle
SvgDirectDebitWide
- 5de61bb: Fix eslint errors after version bump
- 064c5fb: Fixes for new eslint config
-
33608e2: Disallows direct use of Emotion's
cssprop on Source components.If you need to override the internal styling of Source components, use
cssOverridesinstead.
- 80eea1d: Small refactors to allow Eslint updates
-
238dfd3: Removes deprecated typography API.
In
@guardian/source-foundations@14.2.0(2024-04-07), we added new web typography presets to standardise on the typographic language used by Design, and deprecated the old typography API.This release removes that old API, in order to simplify the ongoing maintenance of the library.
The following exports have been removed:
titlepieceheadlinebodytextSanstitlepieceSizesheadlineSizesbodySizestextSansSizesremTitlepieceSizesremHeadlineSizesremBodySizesremTextSansSizesfontsfontWeightslineHeightsbodyObjectStylesheadlineObjectStylestextSansObjectStylestitlepieceObjectStyles
along with the following
typeexports:ScaleUnitCategoryLineHeightFontWeightFontStyleFontWeightDefinitionOptionTypographySizesTypographyStylesTitlepieceSizesHeadlineSizesBodySizesTextSansSizesFsFontScaleFunctionFontScaleFunctionStrFontScaleArgs
If you cannot map existing uses of the old API to the new presets, please check which preset you should use with a designer.
-
447e6b6: Applies consistent spacing around checkboxes and radio buttons by removing conditional styles and using padding to ensure minimum height of 44px.
The external padding is now consistent regardless of the presence of a label and / or supporting text, and removes any inconsistency when these elements are stacked vertically.
Checkboxes and radio buttons are also now aligned with the first line of text when labels wrap on to multiple lines.
-
7805d16: Brings
remSize,remIconSize,remHeightandremWidthinto line withremSpace, by changing their values from anumber(of rems) to astringthat ends withremunits.pxToRemalso now returns a string withremunits, rather than anumberof rems.The sizes haven't changed, only the way they are exported.
const style = ` top: ${pxToRem(10)}rem; bottom: ${remHeight.ctaSmall}rem; `;
const style = ` top: ${pxToRem(10)}; bottom: ${remHeight.ctaSmall}; `;
If you have been performing calculations with the old number values in JS, you can use the CSS
calcfunction instead:const style = ` bottom: -${remHeight.ctaSmall / 2}rem; `;
const style = ` bottom: calc(-${remHeight.ctaSmall} / 2); `;
-
69ecc3f: Moves design tokens into
@guardian/sourceitself.Allows us to calculate
@guardian/source/foundationsvalues during build, rather than at the point of consumption, which relieves user's devices of this overhead and means the design tokens JSON will no longer be included in consumer's bundles.
- 11c62af: Adds
headlineBold15,headlineLight15,headlineLightItalic15,headlineMedium15andheadlineMediumItalic15to the typography presets
-
d274436: Adds new icons to the icon library and applies updates to existing icons. In addition, some icons have been renamed and others deprecated. Icons that were previously deprecated have now been removed in this update.
These icons have been renamed:
Old name New name SvgBookMarkSvgBookmarkFilledSvgBookMarkCrossSvgBookmarkCrossSvgCrossRoundSvgCrossRoundFilledSvgHouseSvgHomeHouseFilledSvgPersonRoundSvgPersonRoundFilledSvgShareSvgShareWebThese existing deprecated aliases have been removed:
Removed Aliased to SvgOfflineCloudSvgCrossedOutCloudSvgAlertSvgExclamationSvgMessengerSvgFacebookMessengerSvgInfoSvgInfoRoundSvgPlaySvgMediaControlsPlaySvgPayPalSvgPayPalBrandeg. if you are importing
SvgOfflineCloudthis is aliased toSvgCrossedOutCloud. The alias has now been removed so you should importSvgCrossedOutClouddirectly.The following icons have been deprecated and are still available, but will be removed in a future release:
Don't use Use instead SvgAlertTriangleSvgAlertRoundSvgFilterSvgFilterOutlinedWebSvgShareCalloutSvgShareWeb
- e5b15dc: Update TypeScript support to
v5.5.2.
-
dc79048: Adds Guardian Headline 64px typography presets and removes Guardian Headline 70px presets.
headlineBold64 headlineLight64 headlineLightItalic64 headlineMedium64 headlineMediumItalic64 -
490384d: Now has a peer dependency of
@emotion/react@^11.11.3(from^11.11.1).Fixes conflicting types between Emotion's deps, as outlined in emotion-js/emotion#3141.
-
a275431: Removes
SvgSpinnerfrom icon library and replaces with dedicatedSpinnercomponent. Thesizeprop supports the existing set of named icon sizes for backwards compatibility, but also allows setting a custom size in pixels. The default colour scheme can be overridden with thethemeprop.<> <Spinner size="small" /> <Spinner size={40} /> <Spinner theme={{ background: 'transparent', color: 'currentColor' }} /> </>
- 803f111: Adds
success.300to the colour palette
- 637d127:
- Adds
collapseUntiloption toInlinelayout component to allow collapsing into a single column below a given breakpoint. - Text and icons are now horizontally centred within buttons. Visually this is only apparent if a button's styles have been overridden and it is stretched beyond it's natural intrinsic width. (Previously the text and icon would be pushed to the edges of the button.)
- Adds
- 1921d8c: Fixes bug where
space.0was not applied toInlinelayouts and updatesColumnandStackto support all spacing units
- 957cbac: call react hook useId before conditional
- 522b68e: Replaced internal uses of
generateSourceIdwith React'suseId, as it does not change when the component is re-rendered. - 2e48c80: Make
reactand@emotion/reactoptionalpeerDeps(you don't need them if you're not using react components).
- be759ac: Improve README
- e60f79e: third attempt
Combining @guardian/source-foundations@16.0.0 and @guardian/source-react-components@25.0.0 into single package.
import { palette } from '@guardian/source-foundations'
import { Button } from '@guardian/source-react-components'
import { palette } from '@guardian/source/foundations'
import { Button } from '@guardian/source/react-components'
There will be no more updates to the two separate packages. From now on, all updates to Source will come via this single package.