Change out colors to use block theme colors about wprig HOT 4 OPEN

Change out the variable names to have --wp--preset--<PRESET_TYPE>--<PRESET_SLUG>

Create elements that override core colors by

:root {
    --wp--preset--color--cyan-bluish-gray: <new_value>;
    --wp--preset--color--pale-pink: <new_value>;
}

change out colors in the inc/Editor/Component.php to have plain names with theme- prefixed except for where custom theme colors are in place

from wprig.

Couldn't all of this just be managed by adding a theme.json to the theme? Or do you have something else in mind here?

from wprig.

@robruiz this definitely can be managed by adding a theme.json file to the theme. I think part of the reason i put this in there was to make sure it got on the to do list.

Steps to take:

1. Add theme.json file to theme
2. Add theme.json to watch file for browsersync
3. Remove the custom colors from the /inc/editor/component.php file.

   wprig/inc/Editor/Component.php

   Lines 61 to 120 in 220580b

   	add_theme_support(
   	'editor-color-palette',
   	array(
   	array(
   	'name' => __( 'Primary', 'wp-rig' ),
   	'slug' => 'theme-primary',
   	'color' => '#e36d60',
   	),
   	array(
   	'name' => __( 'Secondary', 'wp-rig' ),
   	'slug' => 'theme-secondary',
   	'color' => '#41848f',
   	),
   	array(
   	'name' => __( 'Red', 'wp-rig' ),
   	'slug' => 'theme-red',
   	'color' => '#C0392B',
   	),
   	array(
   	'name' => __( 'Green', 'wp-rig' ),
   	'slug' => 'theme-green',
   	'color' => '#27AE60',
   	),
   	array(
   	'name' => __( 'Blue', 'wp-rig' ),
   	'slug' => 'theme-blue',
   	'color' => '#2980B9',
   	),
   	array(
   	'name' => __( 'Yellow', 'wp-rig' ),
   	'slug' => 'theme-yellow',
   	'color' => '#F1C40F',
   	),
   	array(
   	'name' => __( 'Black', 'wp-rig' ),
   	'slug' => 'theme-black',
   	'color' => '#1C2833',
   	),
   	array(
   	'name' => __( 'Grey', 'wp-rig' ),
   	'slug' => 'theme-grey',
   	'color' => '#95A5A6',
   	),
   	array(
   	'name' => __( 'White', 'wp-rig' ),
   	'slug' => 'theme-white',
   	'color' => '#ECF0F1',
   	),
   	array(
   	'name' => __( 'Dusty daylight', 'wp-rig' ),
   	'slug' => 'custom-daylight',
   	'color' => '#97c0b7',
   	),
   	array(
   	'name' => __( 'Dusty sun', 'wp-rig' ),
   	'slug' => 'custom-sun',
   	'color' => '#eee9d1',
   	),
   	)
   	);

4. While we're at it we should remove custom font size from the same file and add it to the theme.json file.
5. Remove the css support for the custom colors

   wprig/assets/css/src/_custom-properties.css

   Lines 34 to 45 in 220580b

   	/* Custom editor colors */
   	--color-theme-primary: #e36d60;
   	--color-theme-secondary: #41848f;
   	--color-theme-red: #c0392b;
   	--color-theme-green: #27ae60;
   	--color-theme-blue: #2980b9;
   	--color-theme-yellow: #f1c40f;
   	--color-theme-black: #1c2833;
   	--color-theme-grey: #95a5a6;
   	--color-theme-white: #ecf0f1;
   	--color-custom-daylight: #97c0b7;
   	--color-custom-sun: #eee9d1;

6. Remove the css support for the custom fonts

   wprig/assets/css/src/_custom-properties.css

   Lines 18 to 22 in 220580b

   	/* Custom editor font sizes */
   	--font-size-small: calc(16 / var(--global-font-size) * 1rem);
   	--font-size-regular: calc(var(--global-font-size) / 16 * 1rem);
   	--font-size-large: calc(36 / var(--global-font-size) * 1rem);
   	--font-size-larger: calc(48 / var(--global-font-size) * 1rem);

7. Change out the css file to incorporate new variable names.

Side note we can probably get rid of almost all of the custom properties css file and plug those into the theme.json file. The only thing I have found that is definitely needed to stay has been the --content-width variable. This change will most likely end up breaking existing themes that does use the custom variables though.

from wprig.

As I'm going down the list this pretty much addresses making wp-rig into a universal theme #777 . I guess if we're not looking into doing that this is probably inconsequential but at least this can lend itself to a guide.

from wprig.