Header & Footer tokenization

[gfellerph]

Create and implement color tokens for header and footer. The header and footer are quite complex components, therefore it makes sense to incrementally create tokens for them. In the first iteration, the goal is to make them dark scheme capable and create color tokens.

Tokens

TBD - keep it to a minimum to support light/dark schemes. Paddings, gaps, and nitty gritty details are possibly subject to change

Global header (yellow section)

• Background/foreground color

Local header (white section)

• Background/foreground color

Main navigation (desktop & mobile)

• Background/foreground color of mobile dropdown, desktop is transparent and should show local header background
• Foreground color on hover

Meta navigation (about, jobs)

• Background/foreground color

Megadropdown

• Background/foreground color

Language switch

Footer

Tasks

Preview Give feedback

1. Define token names for all components listed above
2. Create tokens in Token Studio
3. Implement tokens in the component and styles packages