Page MenuHomePhabricator

Add the base lower layer to the UI and font settings
Closed, ResolvedPublic

Description

Based on https://wikimedia.github.io/WikimediaUI-Style-Guide/visual-style.html

And importing https://github.com/wikimedia/wikimedia-ui-base for the colors, font stack, etc

  • Create the lower layer to comply with the style guide using the ui-base variables
  • Set the font styles to comply with the style guide using the ui-base variables
  • Review content styles from the zeplin specs

Seems like this would be fit for src/client/index.css

Event Timeline

Tech details

Hey @Jhernandez

Here's a future font stack that Mobilefrontend will use till we can actually use custom fonts

This fontstack has been reviewed by wikimedia design team. and it is in cue for design debt on mobile frontend. I will reference phab card here later

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Lato, Helvetica Neue, Helvetica, Arial, sans-serif

This font stack uses system preferred typefaces before any custom typefaces. MF uses helvetica neue right now and we need to get rid of it.

@Nirzar Should we update it in the base library?

Change 378015 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[marvin@master] New: Add base colors and typography settings

https://gerrit.wikimedia.org/r/378015

Change 378016 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[wikimedia-ui-base@master] Improve the sans-serif font stack

https://gerrit.wikimedia.org/r/378016

Change 378041 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[wikimedia-ui-base@master] Add typograpy scale variables

https://gerrit.wikimedia.org/r/378041

Change 378015 merged by jenkins-bot:
[marvin@master] New: Add base colors and typography settings

https://gerrit.wikimedia.org/r/378015

Change 378055 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[marvin@master] Chore: Use the new sans-serif font stack until upstreamed

https://gerrit.wikimedia.org/r/378055

Change 378055 merged by jenkins-bot:
[marvin@master] Chore: Use the new sans-serif font stack until upstreamed

https://gerrit.wikimedia.org/r/378055

Change 378231 had a related patch set uploaded (by Jhernandez; owner: Jhernandez):
[marvin@master] New: Add Paper component

https://gerrit.wikimedia.org/r/378231

Change 378231 merged by jenkins-bot:
[marvin@master] New: Add Paper component

https://gerrit.wikimedia.org/r/378231