Telefonica
Navigation Bars variants (brand / white / alternative)
Description
Include these variants for navigation bars in figma
Also, create the following tokens:
- navigationBarBackground (white)
- navigationBarBackgroundBrand (color marca)
- navigationBarBackgroundAlternative (grey)
- navigationBarDivider (?) is it necessary?
- navigationBarDividerBrand (?) is it necessary?
- navigationBarDividerAlternative (?) is it necessary?
- textNavigationBarPrimary
- textNavigationBarPrimaryBrand
- textNavigationBarPrimaryAlternative
- textNavigationBarSecondary
- textNavigationBarSecondaryBrand
- textNavigationBarSecondaryAlternative
- textNavigationSearchBarHint (?) is it necessary?
- textNavigationSearchBarHintBrand (?) is it necessary?
- textNavigationSearchBarHintAlternative (?) is it necessary?
- textNavigationSearchBarText (?) is it necessary?
- textNavigationSearchBarTextBrand (?) is it necessary?
- textNavigationSearchBarTextAlternative (?) is it necessary?
‼️ Maybe these names are not the correct names, just to visualize how many tokens are need created
Tasks
- [x] Update specs
- [ ] Add to mobile library
- [x] Add to desktop library
- [ ] Add to UI Kit
- [x] Web ticket
It would be necessary (minimum tokens based on specs):
For the background:
Actually we can reuse the background colors:
background
backgroundBrand
backgroundAlternative
In case we want to differentiate somehow the navbar we could use:
navigationBarBackground
navigationBarBackgroundInverse
navigationBarBackgroundAlternative
For the text and icons:
The same question...do we need this colors if we can use textPrimary, textSecondary and their inverse variants?
textNavigationBarPrimary (used for default and alternative)
textNavigationBarPrimaryInverse
textNavigationBarSecondary (used for default and alternative)
textNavigationBarSecondaryInverse
For the divider:
navigationBarDivider (in alternative the divider will be the same color as the bg)
navigationBarDividerInverse
