[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Custom Colors Class
   4   *
   5   * @package WordPress
   6   * @subpackage Twenty_Twenty_One
   7   * @since Twenty Twenty-One 1.0
   8   */
   9  
  10  /**
  11   * This class is in charge of color customization via the Customizer.
  12   */
  13  class Twenty_Twenty_One_Custom_Colors {
  14  
  15      /**
  16       * Instantiates the object.
  17       *
  18       * @since Twenty Twenty-One 1.0
  19       */
  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.0
  38       *
  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.0
  54       *
  55       * @param string|null $context Can be "editor" or null.
  56       * @return string
  57       */
  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.0
  85       *
  86       * @return void
  87       */
  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      }
  93  
  94      /**
  95       * Editor custom color variables.
  96       *
  97       * @since Twenty Twenty-One 1.0
  98       *
  99       * @return void
 100       */
 101  	public function editor_custom_color_variables() {
 102          wp_enqueue_style(
 103              'twenty-twenty-one-custom-color-overrides',
 104              get_theme_file_uri( 'assets/css/custom-color-overrides.css' ),
 105              array(),
 106              wp_get_theme()->get( 'Version' )
 107          );
 108  
 109          $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
 110          if ( 'd1e4dd' !== strtolower( $background_color ) ) {
 111              wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
 112          }
 113      }
 114  
 115      /**
 116       * Gets luminance from a HEX color.
 117       *
 118       * @static
 119       *
 120       * @since Twenty Twenty-One 1.0
 121       *
 122       * @param string $hex The HEX color.
 123       * @return int Returns a number (0-255).
 124       */
 125  	public static function get_relative_luminance_from_hex( $hex ) {
 126  
 127          // Remove the "#" symbol from the beginning of the color.
 128          $hex = ltrim( $hex, '#' );
 129  
 130          // Make sure there are 6 digits for the below calculations.
 131          if ( 3 === strlen( $hex ) ) {
 132              $hex = substr( $hex, 0, 1 ) . substr( $hex, 0, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 1, 1 ) . substr( $hex, 2, 1 ) . substr( $hex, 2, 1 );
 133          }
 134  
 135          // Get red, green, blue.
 136          $red   = hexdec( substr( $hex, 0, 2 ) );
 137          $green = hexdec( substr( $hex, 2, 2 ) );
 138          $blue  = hexdec( substr( $hex, 4, 2 ) );
 139  
 140          // Calculate the luminance.
 141          $lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue );
 142          return (int) round( $lum );
 143      }
 144  
 145      /**
 146       * Adds a class to <body> if the background-color is dark.
 147       *
 148       * @since Twenty Twenty-One 1.0
 149       *
 150       * @param array $classes The existing body classes.
 151       * @return array
 152       */
 153  	public function body_class( $classes ) {
 154          $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
 155          $luminance        = self::get_relative_luminance_from_hex( $background_color );
 156  
 157          if ( 127 > $luminance ) {
 158              $classes[] = 'is-dark-theme';
 159          } else {
 160              $classes[] = 'is-light-theme';
 161          }
 162  
 163          if ( 225 <= $luminance ) {
 164              $classes[] = 'has-background-white';
 165          }
 166  
 167          return $classes;
 168      }
 169  }