Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix $theme-color CSS variable in template-part/editor #23218

Closed
wants to merge 1 commit into from

Conversation

ItsJonQ
Copy link

@ItsJonQ ItsJonQ commented Jun 16, 2020

This update fixes the node-sass build with the reference to$theme-color. This variable isn't defined, which causes an error in the build. It was replaced with $blue-wordpress-700.

Note: I'm not too sure what $theme-color may be. I used my best guess and picked the "theme" colour used in the Gutenberg editor.

How has this been tested?

Local Gutenberg.

  • Run npm run dev
  • Webpack should build without issues
  • Make sure local Gutenberg editor styles look ok 👍

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

Fixes: #23217

@ItsJonQ ItsJonQ added [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jun 16, 2020
@ItsJonQ ItsJonQ self-assigned this Jun 16, 2020
@noahtallen
Copy link
Member

@ItsJonQ is there a variable which is based on the "color scheme" (I know it's possible to set your own primary colors and whatnot)? That could be considered a "theme", I guess.

@ItsJonQ
Copy link
Author

ItsJonQ commented Jun 16, 2020

@ItsJonQ is there a variable which is based on the "color scheme" (I know it's possible to set your own primary colors and whatnot)? That could be considered a "theme", I guess.

I don't think we have a SCSS variable in the editor.
Looking through the code, it looks like there's a CSS variable that's being used:

var(--wp-admin-theme-color)

I can't confirm, as I haven't worked with these variables yet. But it looks like it's the closest one

It looks like Travis is unhappy with another issue 😅

@epiqueras
Copy link
Contributor

Why was the variable removed?

The value came from the theme values in packages/base-styles/index.js which get injected with @wordpress/postcss-themes I think.

@ItsJonQ
Copy link
Author

ItsJonQ commented Jun 16, 2020

@epiqueras Hmm! I wasn't aware of the PostCSS plugin.

I just raised the issue + PR because I noticed recent builds + npm run dev failing due to this particular variable.

@epiqueras
Copy link
Contributor

Maybe they were swapped for CSS variables?

@epiqueras
Copy link
Contributor

cc @nosolosw @gziolo

@epiqueras
Copy link
Contributor

Yeah, they were. Closing in favor of #23221.

@epiqueras epiqueras closed this Jun 16, 2020
@oandregal oandregal deleted the fix/css-template-part-theme-color branch June 17, 2020 07:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

SCSS: Undefined variable $theme-color (template-part/editor.scss)
3 participants