Twenty_Twenty_One_Custom_Colors

13class Twenty_Twenty_One_Custom_Colors {14 15	/**16	 * Instantiates the object.17	 *18	 * @since Twenty Twenty-One 1.019	 */20	public function __construct() {21 22		// Enqueue color variables for customizer & frontend.23		add_action( 'wp_enqueue_scripts', array( $this, 'custom_color_variables' ) );24 25		// Enqueue color variables for editor.26		if ( is_admin() ) {27			add_action( 'enqueue_block_assets', array( $this, 'editor_custom_color_variables' ) );28		}29 30		// Add body-class if needed.31		add_filter( 'body_class', array( $this, 'body_class' ) );32	}33 34	/**35	 * Determines the luminance of the given color and then returns #fff or #000 so that the text is always readable.36	 *37	 * @since Twenty Twenty-One 1.038	 *39	 * @param string $background_color The background color.40	 * @return string (hex color)41	 */42	public function custom_get_readable_color( $background_color ) {43		return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';44	}45 46	/**47	 * Generates color variables.48	 *49	 * Adjusts the color value of the CSS variables depending on the background color theme mod.50	 * Both text and link colors needs to be updated.51	 * The code below needs to be updated, because the colors are no longer theme mods.52	 *53	 * @since Twenty Twenty-One 1.054	 *55	 * @param string|null $context Can be "editor" or null.56	 * @return string57	 */58	public function generate_custom_color_variables( $context = null ) {59 60		$theme_css        = 'editor' === $context ? ':root .editor-styles-wrapper{' : ':root{';61		$background_color = get_theme_mod( 'background_color', 'D1E4DD' );62 63		if ( 'd1e4dd' !== strtolower( $background_color ) ) {64			$theme_css .= '--global--color-background: #' . $background_color . ';';65			$theme_css .= '--global--color-primary: ' . $this->custom_get_readable_color( $background_color ) . ';';66			$theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';';67			$theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';';68			$theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';';69 70			if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {71				$theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);';72				$theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';73			}74		}75 76		$theme_css .= '}';77 78		return $theme_css;79	}80 81	/**82	 * Customizer & frontend custom color variables.83	 *84	 * @since Twenty Twenty-One 1.085	 *86	 * @return void87	 */88	public function custom_color_variables() {89		if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {90			wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() );91		}92	}