| Info |
|---|
Notes in blue to be expanded. |
What are we trying to achieve?
...
The design system must be flexible and work with any brand.
Changing CSS variables (not tokens) in manual way
2. Internationalisation
The design system must support internationalisation
RTL
Long languages
Character based languages
...
Dettol Germany offers both a German version and an English version. Because German has longer words, they want to reduce the heading sizes on the German language but not on the English language.
Vanish Arabia offers both English and Arabic language versions, but on the Arabic site the text size is larger and we don’t allow bolding.
Each component supports RTL via HTML lang tag and has supporting css
See direction in storybook
3. Theming - Changes that affect the whole site
...
Finish wants to support a “Dark Mode” theme which changes all of the colours across the entire site to darker versions – but still maintains “green” for Eco, etc (see context).
Brand creates new CSS file with new css values, hands to a developer to implement
mode and context are delivered through component prop.
Theme is delivered by overriding tokens. “Dark switch needs to be investigated“
4. Context (not to be confused with theme) - Style part of a site differently than the rest
...
Schiff Vitamins is a multi-brand site which has pages for Neuriva and Mucinex. The Mucinex content needs to reflect the Mucinex brand; the Neuriva pages need to reflect the Neuriva brand
Finish wants to apply a specific colour palette for each product range. So a teaser for “Eco” has different token values to a teaser for “Quantum Ultimate”
Dettol Germany offers both a German version and an English version. Because German has longer words, they want to reduce the heading sizes on the German language but not on the English language.
CSS Class name overrides. Use the theme/mode prop to pass string for pre-defined css values
Work out what the process is for the 3 levels of overrides.
We’re not using theme provider we’re using css variables
5. Maintenance
Brands must be able to adjust their themes & sites (on initial setup and in-life) with cost and time efficiencies. I.e minimise hands on effort.
Developer's time must be protected by reducing the amount of manual effort required for theming and automating as much as possible.
Manual intervention is done by developers. There are a lot of tokens, it will take several days to apply tokens. There is no automation. Automation comes next.
6. Propagation
When new components and tokens are available. Brands must have a way to obtain these new items with no breaking changes.
When the Design System Team decide a component or token is no longer needed, we must be able to depreciate that item and propagate that decision to all websites with no breaking changes.
All brands must have the ability to make use of any new component or token we create. I.e We don’t create brand specific components and tokens in the base design system.
Manual developer intervention to update component versions + tokens
Brands can react, but don’t need to, and then get a developer to make the change.
This is a back end responsibility
7. Performance & accessibility
Theming must meet Reckitt’s performance and accessibility standards
Enter text…