Automattic / Automattic/jetpack
Pick up Calypso Colors via NPM, Alter CSS build
- Dominant language
- PHP
- Stars
- 1.8k
- Forks
- 898
- Avg merge
- 1d 18h
- Merged PRs (30d)
- 774
Description
#### Is your feature request related to a problem? Please describe.
Jetpack offers the Calypsoify plugin, which restyles various pages inside wp-admin to look more like WordPress.com's Calypso. Calypso recently added the [ability to pick a color theme](https://en.blog.wordpress.com/2019/01/08/customize-your-wordpress-com-dashboard/) inside Calypso and we would like to update Calypsoify to use those themes.
#### Describe the solution you'd like
Discussing the optimal solution is what this issue is about.
Calypso uses CSS Custom Properties (nee CSS Variables) to change the colors of the UI. This only works in modern browsers that support Custom Properties; older browsers use a fallback to the default colors. This fallback is provided via a [PostCSS plugin](https://github.com/postcss/postcss-custom-properties). Ideally Calypsoify would use this same system, which would give us development consistency. It would also let Calypsoify pick up new themes by updating the new [@automattic/calypso-color-schemes](https://github.com/Automattic/wp-calypso/pull/30933) NPM package. The downside is that would requires changes to how Jetpack builds CSS from SCSS.
#### Describe alternatives you've considered
The original attempt in #10992 tried to add class overrides for each new theme. This is a pretty straight-forward way to integrate, but requires new work for each added or updated theme.
#### Additional context
Related to #11410, Carry-on from #10992 and #11115
Contributor guide
Research direction
Start with the Calypsoify plugin and Jetpack's CSS-from-SCSS build path, then review the @automattic/calypso-color-schemes NPM package and the referenced PostCSS custom-properties plugin. Compare this approach with the class overrides discussed in #10992 and the related issues. Done should be a decided integration approach that supports Calypso color themes and the older-browser fallback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, scss
- Domain
- build-system, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100