Page Comparison

1

Must be able to deliver for multiple brands

• Brands can change CSS variables

• Brands can choose to use component variants that align more to their brand style

2

Internationalisation

• Each component supports RTL via HTML lang tag and has supporting css.

  • But if a developer uses right or left instead of start and end the browser will honour the explicit declaration and the lang tag has no effect

• Components that need internationalisation also have props for alignment

3

Theming - Changes that affect the whole site

Theming is currently handled by changing CSS variables and the ability to add CSS classes which group multiple CSS variable changes together.

1. Brands must decide in advance what colours they want within within their sites and where the colours are used.

2. A developer is required to take these decisions and create new CSS files which override the base design system component css declarations

3. The developer imports the relevant CSS files into specific page and component JS files to override any styles.

• The ability to allow users to switch between light and dark mode needs to be investigated.

4

Context - Style part of a site differently than the rest

• This is handled the same way as theme

  • Developers create CSS classes which override one or more base CSS variables

  • This class is passed to the component via the className prop.

Work out what the process is for the 3 levels of overrides.

• We’re not using theme provider we’re using css variables

• We are confusing mode and theme again - Nick to follow up

5

Maintenance

• All aspects of theming requires manual intervention by developers.

“There are a lot of tokens, it will take several days to recolour everything…”

• There probably are ways to add automation outside of the theming capability of the MVP

  • Exporting tokens from CSS

  • Excel macros

  • custom scripts

• Automation comes next.

• There is no automation.

  • Automation will depend on where the source of truth is.

6

Propagation

• Propagation is done manually.

• The design system team need to communicate deprecated components and tokens in release notes and other sources.

• Brands will need to request developer intervention to update component versions.

• All versions of components are kept in external registry, even depreciated versions to avoid build failures.

• Propagation and maintenance is a back end responsibility.

• We can’t force any changes that fix security or accessibility issues without a brand initiating and paying for those changes.

7

Performance & accessibility