[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       * Instantiate 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          add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) );
  27  
  28          // Add body-class if needed.
  29          add_filter( 'body_class', array( $this, 'body_class' ) );
  30      }
  31  
  32      /**
  33       * Determine the luminance of the given color and then return #fff or #000 so that the text is always readable.
  34       *
  35       * @since Twenty Twenty-One 1.0
  36       *
  37       * @param string $background_color The background color.
  38       * @return string (hex color)
  39       */
  40  	public function custom_get_readable_color( $background_color ) {
  41          return ( 127 < self::get_relative_luminance_from_hex( $background_color ) ) ? '#000' : '#fff';
  42      }
  43  
  44      /**
  45       * Generate color variables.
  46       *
  47       * Adjust the color value of the CSS variables depending on the background color theme mod.
  48       * Both text and link colors needs to be updated.
  49       * The code below needs to be updated, because the colors are no longer theme mods.
  50       *
  51       * @since Twenty Twenty-One 1.0
  52       *
  53       * @param string|null $context Can be "editor" or null.
  54       * @return string
  55       */
  56  	public function generate_custom_color_variables( $context = null ) {
  57  
  58          $theme_css        = 'editor' === $context ? ':root .editor-styles-wrapper{' : ':root{';
  59          $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
  60  
  61          if ( 'd1e4dd' !== strtolower( $background_color ) ) {
  62              $theme_css .= '--global--color-background: #' . $background_color . ';';
  63              $theme_css .= '--global--color-primary: ' . $this->custom_get_readable_color( $background_color ) . ';';
  64              $theme_css .= '--global--color-secondary: ' . $this->custom_get_readable_color( $background_color ) . ';';
  65              $theme_css .= '--button--color-background: ' . $this->custom_get_readable_color( $background_color ) . ';';
  66              $theme_css .= '--button--color-text-hover: ' . $this->custom_get_readable_color( $background_color ) . ';';
  67  
  68              if ( '#fff' === $this->custom_get_readable_color( $background_color ) ) {
  69                  $theme_css .= '--table--stripes-border-color: rgba(240, 240, 240, 0.15);';
  70                  $theme_css .= '--table--stripes-background-color: rgba(240, 240, 240, 0.15);';
  71              }
  72          }
  73  
  74          $theme_css .= '}';
  75  
  76          return $theme_css;
  77      }
  78  
  79      /**
  80       * Customizer & frontend custom color variables.
  81       *
  82       * @since Twenty Twenty-One 1.0
  83       *
  84       * @return void
  85       */
  86  	public function custom_color_variables() {
  87          if ( 'd1e4dd' !== strtolower( get_theme_mod( 'background_color', 'D1E4DD' ) ) ) {
  88              wp_add_inline_style( 'twenty-twenty-one-style', $this->generate_custom_color_variables() );
  89          }
  90      }
  91  
  92      /**
  93       * Editor custom color variables.
  94       *
  95       * @since Twenty Twenty-One 1.0
  96       *
  97       * @return void
  98       */
  99  	public function editor_custom_color_variables() {
 100          wp_enqueue_style(
 101              'twenty-twenty-one-custom-color-overrides',
 102              get_theme_file_uri( 'assets/css/custom-color-overrides.css' ),
 103              array(),
 104              wp_get_theme()->get( 'Version' )
 105          );
 106  
 107          $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
 108          if ( 'd1e4dd' !== strtolower( $background_color ) ) {
 109              wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
 110          }
 111      }
 112  
 113      /**
 114       * Get luminance from a HEX color.
 115       *
 116       * @static
 117       *
 118       * @since Twenty Twenty-One 1.0
 119       *
 120       * @param string $hex The HEX color.
 121       * @return int Returns a number (0-255).
 122       */
 123  	public static function get_relative_luminance_from_hex( $hex ) {
 124  
 125          // Remove the "#" symbol from the beginning of the color.
 126          $hex = ltrim( $hex, '#' );
 127  
 128          // Make sure there are 6 digits for the below calculations.
 129          if ( 3 === strlen( $hex ) ) {
 130              $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 );
 131          }
 132  
 133          // Get red, green, blue.
 134          $red   = hexdec( substr( $hex, 0, 2 ) );
 135          $green = hexdec( substr( $hex, 2, 2 ) );
 136          $blue  = hexdec( substr( $hex, 4, 2 ) );
 137  
 138          // Calculate the luminance.
 139          $lum = ( 0.2126 * $red ) + ( 0.7152 * $green ) + ( 0.0722 * $blue );
 140          return (int) round( $lum );
 141      }
 142  
 143      /**
 144       * Adds a class to <body> if the background-color is dark.
 145       *
 146       * @since Twenty Twenty-One 1.0
 147       *
 148       * @param array $classes The existing body classes.
 149       * @return array
 150       */
 151  	public function body_class( $classes ) {
 152          $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
 153          $luminance        = self::get_relative_luminance_from_hex( $background_color );
 154  
 155          if ( 127 > $luminance ) {
 156              $classes[] = 'is-dark-theme';
 157          } else {
 158              $classes[] = 'is-light-theme';
 159          }
 160  
 161          if ( 225 <= $luminance ) {
 162              $classes[] = 'has-background-white';
 163          }
 164  
 165          return $classes;
 166      }
 167  }