Page MenuHomePhabricator

Apply reading themes to native views
Closed, ResolvedPublic

Description

Color palette

ThemeBase backgroundChrome backgroundPaper backgroundPopover BackgroundPrimary TextSecondary TextAccent TextLinkIconMid backgroundBorderShadowHRCard type backgroundCard type iconSecondary action backgroundDestructive action / errorWarning
Default#EAECF0 (Base80)#FFFFFF (Base100)#FFFFFF (Base100)#FFFFFF (Base100)#222222 (Base10)#72777D (Base30)#00AF89 (Green50)#3366CC (Accent50)#54595D (Base20)#F8F9FA (Base90)#C8CCD1 (Base70)#EAECF0 (Base80)#C8CCD1 (Base70)variedvaried#2A4B8D (Accent10)#DD3333 (Red50)#FFCC33 (Yellow50)
Sepia#E1DAD1 (Amate)#F8F1E3 (Parchment)#F8F1E3 (Parchment)#FFFFFF (Base100)#222222 (Base10)#646059 (Masi)#00AF89 (Green50)#3366CC (Accent50)#646059 (Masi)#F0E6D6 (Papyrus)#CBC8C1 (Kraft)#CBC8C1 (Kraft)#CBC8C1 (Kraft)#E1DAD1 (Amate)#646059 (Masi)#2A4B8D (Accent10)#B32424 (Red30)#FF9500 (Osage)
Dark#222222 (Base10)#43464A (Mesophere)#2E3136 (Thermosphere)#222222 (Base10)#F8F9A (Base90)#C8CCD1 (Base 70)#00AF89 (Green50)#6699FF (Stratosphere)#C8CCD1 (Base 70)#27292D (Exosphere)#43464A (Mesophere)#222222 (Base10)#C8CCD1 (Base 70)#43464A (Mesophere)#C8CCD1 (Base 70)#2A4B8D (Accent10)#FF6E6E (Red75)#ffcc33 (Yellow50)

Screens

  • Feed
  • Detail views
  • Places
  • Saved
  • History
  • Search
  • Settings
  • Article TOC

Keyboards

Default and Sepia should use the white iOS keyboard
Dark mode should use the black / dark iOS keyboard

Popovers and dialoges

  • Popovers
  • Dialogues
  • Peek / pop

Color guides

SepiaDark
Sepia mode color palette.png (1×899 px, 98 KB)
Dark mode color palette.png (1×899 px, 107 KB)

Event Timeline

@cmadeo here's the list of other colors I've run into:

  • Secondary action color - used on the share button when swiping on a table view cell
  • Destructive action color - color for delete actions
  • Warning color - for warning text (used in login)
  • Error color - for error text (used in login)
  • Selected cell background (when a cell is tapped) - currently using midBackground but we could add a separate color

@JoeWalsh, thanks!

Just to clarify, the secondary action color would be used exclusively as a background color?

@cmadeo I labeled it "secondaryLink" but it's currently only used as a background color. I could update the naming to indicate it should only be used as a background color.

cmadeo updated the task description. (Show Details)
This comment was removed by JoeWalsh.

@cmadeo I applied the themes to login/signup/forgot password but the colors didn't match 1:1 - let me know if this looks good or if you have any changes. Thanks!

Simulator Screen Shot Jul 13, 2017, 10.56.16 AM.png (1×750 px, 68 KB)

Simulator Screen Shot Jul 13, 2017, 10.56.33 AM.png (1×750 px, 67 KB)

Simulator Screen Shot Jul 13, 2017, 10.56.19 AM.png (1×750 px, 127 KB)

Also, I guessed on Tertiary Text being Base 70 but that may be too light:

Simulator Screen Shot Jul 13, 2017, 10.59.14 AM.png (1×750 px, 576 KB)

Thanks @JoeWalsh!

I labeled it "secondaryLink" but it's currently only used as a background color. I could update the naming to indicate it should only be used as a background color.

It'd be great to only use this as a background color (especially on the Dark and Sepia themes as it won't be AA compatible against our other background colors as a text color.

I applied the themes to login/signup/forgot password but the colors didn't match 1:1 - let me know if this looks good or if you have any changes. Thanks!

These look good! Color match-up problem was my fault I was using a depreciated grey in the original mocks.

Also, I guessed on Tertiary Text being Base 70 but that may be too light

Could we do Base30 #72777d instead? I think this is what we were using before

@JoeWalsh I wonder also if we want to updated the feed cards to use Base10 #222 for the text snippets on Featured article and Random article cards. As we're using Base10 for the text on In the news and On this day. (also it'd be nice to limit our number of text colors on the feed)

@cmadeo so base30 for all of these labels?

Simulator Screen Shot Jul 13, 2017, 11.22.00 AM copy.png (1×750 px, 586 KB)

The darker label with the start of the article text is currently base30, the others are base70 in this screenshot.

@cmadeo scratch the previous comment, I just saw your most recent one. base10 for the snippet, base30 for the others?

@JoeWalsh
Suggesting that we turn the text snippet to Base10

Screen Shot 2017-07-13 at 10.46.42 AM.png (718×556 px, 413 KB)

Did this go through a final design review? I know @cmadeo been paying attention as we go, but just want to make sure she has a final chance to check and signoff.

Thanks, here are a few small updates:

  • Could the dark mode shadow be changed to: #222222 (Base10)
  • Would it be possible to have the overflow popover (eg. on the 'because you read card') on dark mode match the other dark mode popovers?
  • Same as above but for the peek / pop menu

Could the dark mode shadow be changed to: #222222 (Base10)

Yes

Would it be possible to have the overflow popover (eg. on the 'because you read card') on dark mode match the other dark mode popovers?
Same as above but for the peek / pop menu

Sadly there's not an easy non-hacky way to do this.
This is as close as I can get without something very prone to break:

Simulator Screen Shot Jul 22, 2017, 7.46.11 AM.png (1×750 px, 136 KB)

Simulator Screen Shot Jul 22, 2017, 7.46.25 AM.png (1×750 px, 490 KB)

It looks like the tint color is wrong there as well... I can look into that.

@JoeWalsh Ah sorry, I was hopeful that there was something built in that we could use (like dark keyboard). Since this isn't the case I think it's okay to use the standard/default white for the overflow and peek/pop menus. I should have checked on iBooks first. Sorry about that.

With the update of the dark theme shadows, I'm happy to sign-off on theming design-wise! (just putting back in Ready for dev incase you need to make any changes based on feedback above)

Thank you! Very excited for users to be able to have their much anticipated bat mode!

giphy-downsized (8).gif (141×250 px, 542 KB)

Looking really good @JoeWalsh!

Just a few quick questions:

  • Can we update the randomizer button to use #6699FF on dark mode?
  • Can we use the dark keyboard for search inside article on dark mode?

Hi, I'm testing different reading themes when running regressions https://phabricator.wikimedia.org/T172329 so unless there are specific testing steps to recreate I will leave this up to the staff.

JMinor awarded a token.