Pick up Calypso Colors via NPM, Alter CSS build

blowery commented 5 years ago

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 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. 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 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

sirreal commented 5 years ago

https://github.com/Automattic/wp-calypso/pull/30933 has landed and the package can be published any time

simison commented 5 years ago

FYI @Automattic/jetpack-crew — we'll likely bring this dependency over to Jetpack repo together with blocks within a week or so. It'll be used only by blocks at that point in a way that CSS colour variables (--color-loremipsum etc) get stripped out, but it's a good mid-step towards actually using those colour variables next up if needed.

jeherve commented 1 year ago

Related discussion: p1693905134182179-slack-CDLH4C1UZ

Automattic / jetpack