mobile-html: consolidate and rename CSS colors
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	JoeWalsh
	May 28 2020, 10:47 AM

Description

Background information

As part of the transition to LESS, color naming was left as a future TODO due to additional clarification needed

What

Coordinate with @schoenbaechler and @cmadeo to define color names and consolidate similar colors

Acceptance criteria

Color names are defined and are updated in the CSS

Proposed color names

Utilize the style guide as the base definitions, then add

Accent70 - #6699FF - formerly Stratosphere

DarkBase05 - #101418 - formerly Pitch Black
DarkBase10 - #27292D - formerly Exosphere
DarkBase20 - #2E3136 - formerly Thermosphere
DarkBase30 - #43464A - formerly Mesosphere
DarkBase90 - #E8E9EB - formerly LightBlueGray

SepiaBase85- #E1DAD1 - formerly Amate
SepiaBase90- #F0E6D6 - formerly Papyrus
SepiaBase100- #F8F1E3 - formerly Parchment

SepiaBorder- #E8DCCA - formerly Sand

SepiaGray40- #646059 - formerly Masi
SepiaGray80- #CBC8C1 - formerly Kraft

Related Objects

Mentioned In: T254020: Update iOS theme colors to match the upstream definitions in PCS and the Wikimedia style guide

Event Timeline

JoeWalsh created this task.May 28 2020, 10:47 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 28 2020, 10:47 AM

JoeWalsh added a project: Page Content Service.May 28 2020, 10:47 AM

JoeWalsh updated the task description. (Show Details)May 28 2020, 1:06 PM

Looks good to me! Much easier than the former names!
Thanks!

• scblr awarded a token.May 29 2020, 7:43 AM

+1 → added a todo to also update the names on the Android theme guidelines page. Thx @JoeWalsh...

JoeWalsh mentioned this in T254020: Update iOS theme colors to match the upstream definitions in PCS and the Wikimedia style guide.May 29 2020, 4:13 PM

In the transition to using LESS and the Wikimedia Base UI library, most colors in-use in the application were able to be translated directly to existing variables. A couple were not directly translated, and were instead changed to similar existing variables rather than maintain one-off colors. Here is that list:

CollapseTable.less
    116 #222 -> base10 (202122) (1.01:1)
    192 #222 -> base10 (202122) (1.01:1)

EditTransform.less
    132 #eee -> base80 (eaecf0) (1.01:1)
    153 #777d84 -> base30 (72777d) (1.08:1)

FooterContainer.less
    36 #222 -> base10 (202122) (1.01:1)
    67 #222 -> base10 (202122) (1.01:1)

FooterMenu.less
    25 #222 -> base10 (202122) (1.01:1)

FooterReadMore.less
    21 #222 -> base10 (202122) (1.01:1)

ThemeTransform.less
    19 #222 -> base10 (202122) (1.01:1)
    91 #222 -> base10 (202122) (1.01:1)
    102 #222 -> base10 (202122) (1.01:1)
    123 #222 -> base10 (202122) (1.01:1)
    155 #ccc -> base70 (c8ccd1) (1:1)
    196 #ccc -> base70 (c8ccd1) (1:1)

WidenImage.less
    31 768px -> width-breakpoint-tablet (720px)

• dcipoletti added projects: Wikipedia-Android-App-Backlog, Wikipedia-iOS-App-Backlog.Jun 3 2020, 4:00 PM

• dcipoletti moved this task from Needs triage to Tracking on the Product-Infrastructure-Team-Backlog-Deprecated board.Jun 3 2020, 5:34 PM

JoeWalsh assigned this task to Robocel.Jun 3 2020, 5:49 PM

JoeWalsh triaged this task as Medium priority.

JoeWalsh edited projects, added Product-Infrastructure-Team-Backlog-Deprecated (Kanban); removed Wikipedia-iOS-App-Backlog, Wikipedia-Android-App-Backlog, Product-Infrastructure-Team-Backlog-Deprecated.

JoeWalsh moved this task from To Do to Doing on the Product-Infrastructure-Team-Backlog-Deprecated (Kanban) board.

JoeWalsh moved this task from Doing to To Deploy on the Product-Infrastructure-Team-Backlog-Deprecated (Kanban) board.Jun 23 2020, 3:37 PM

• bearND closed this task as Resolved.Jun 24 2020, 9:57 PM

• bearND moved this task from To Deploy to Sign off on the Product-Infrastructure-Team-Backlog-Deprecated (Kanban) board.