[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Twenty Nineteen: Color Patterns
   4   *
   5   * @package WordPress
   6   * @subpackage Twenty_Nineteen
   7   * @since Twenty Nineteen 1.0
   8   */
   9  
  10  /**
  11   * Generate the CSS for the current primary color.
  12   */
  13  function twentynineteen_custom_colors_css() {
  14  
  15      $primary_color = 199;
  16      if ( 'default' !== get_theme_mod( 'primary_color', 'default' ) ) {
  17          $primary_color = absint( get_theme_mod( 'primary_color_hue', 199 ) );
  18      }
  19  
  20      /**
  21       * Filters Twenty Nineteen default saturation level.
  22       *
  23       * @since Twenty Nineteen 1.0
  24       *
  25       * @param int $saturation Color saturation level.
  26       */
  27      $saturation = apply_filters( 'twentynineteen_custom_colors_saturation', 100 );
  28      $saturation = absint( $saturation ) . '%';
  29  
  30      /**
  31       * Filters Twenty Nineteen default selection saturation level.
  32       *
  33       * @since Twenty Nineteen 1.0
  34       *
  35       * @param int $saturation_selection Selection color saturation level.
  36       */
  37      $saturation_selection = absint( apply_filters( 'twentynineteen_custom_colors_saturation_selection', 50 ) );
  38      $saturation_selection = $saturation_selection . '%';
  39  
  40      /**
  41       * Filters Twenty Nineteen default lightness level.
  42       *
  43       * @since Twenty Nineteen 1.0
  44       *
  45       * @param int $lightness Color lightness level.
  46       */
  47      $lightness = apply_filters( 'twentynineteen_custom_colors_lightness', 33 );
  48      $lightness = absint( $lightness ) . '%';
  49  
  50      /**
  51       * Filters Twenty Nineteen default hover lightness level.
  52       *
  53       * @since Twenty Nineteen 1.0
  54       *
  55       * @param int $lightness_hover Hover color lightness level.
  56       */
  57      $lightness_hover = apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 );
  58      $lightness_hover = absint( $lightness_hover ) . '%';
  59  
  60      /**
  61       * Filters Twenty Nineteen default selection lightness level.
  62       *
  63       * @since Twenty Nineteen 1.0
  64       *
  65       * @param int $lightness_selection Selection color lightness level.
  66       */
  67      $lightness_selection = apply_filters( 'twentynineteen_custom_colors_lightness_selection', 90 );
  68      $lightness_selection = absint( $lightness_selection ) . '%';
  69  
  70      $theme_css = '
  71          /*
  72           * Set background for:
  73           * - featured image :before
  74           * - featured image :before
  75           * - post thumbnail :before
  76           * - post thumbnail :before
  77           * - Submenu
  78           * - Sticky Post
  79           * - buttons
  80           * - WP Block Button
  81           * - Blocks
  82           */
  83          .image-filters-enabled .site-header.featured-image .site-featured-image:before,
  84          .image-filters-enabled .site-header.featured-image .site-featured-image:after,
  85          .image-filters-enabled .entry .post-thumbnail:before,
  86          .image-filters-enabled .entry .post-thumbnail:after,
  87          .main-navigation .sub-menu,
  88          .sticky-post,
  89          .entry .entry-content .wp-block-button .wp-block-button__link:not(.has-background),
  90          .entry .button, button, input[type="button"], input[type="reset"], input[type="submit"],
  91          .entry .entry-content > .has-primary-background-color,
  92          .entry .entry-content > *[class^="wp-block-"].has-primary-background-color,
  93          .entry .entry-content > *[class^="wp-block-"] .has-primary-background-color,
  94          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color,
  95          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-primary-background-color,
  96          .entry .entry-content .wp-block-file .wp-block-file__button {
  97              background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
  98          }
  99  
 100          /*
 101           * Set Color for:
 102           * - all links
 103           * - main navigation links
 104           * - Post navigation links
 105           * - Post entry meta hover
 106           * - Post entry header more-link hover
 107           * - main navigation svg
 108           * - comment navigation
 109           * - Comment edit link hover
 110           * - Site Footer Link hover
 111           * - Widget links
 112           */
 113          a,
 114          a:visited,
 115          .main-navigation .main-menu > li,
 116          .main-navigation ul.main-menu > li > a,
 117          .post-navigation .post-title,
 118          .entry .entry-meta a:hover,
 119          .entry .entry-footer a:hover,
 120          .entry .entry-content .more-link:hover,
 121          .main-navigation .main-menu > li > a + svg,
 122          .comment .comment-metadata > a:hover,
 123          .comment .comment-metadata .comment-edit-link:hover,
 124          #colophon .site-info a:hover,
 125          .widget a,
 126          .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
 127          .entry .entry-content > .has-primary-color,
 128          .entry .entry-content > *[class^="wp-block-"] .has-primary-color,
 129          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color,
 130          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-primary-color p {
 131              color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 132          }
 133  
 134          /*
 135           * Set border color for:
 136           * wp block quote
 137           * :focus
 138           */
 139          blockquote,
 140          .entry .entry-content blockquote,
 141          .entry .entry-content .wp-block-quote:not(.is-large),
 142          .entry .entry-content .wp-block-quote:not(.is-style-large),
 143          input[type="text"]:focus,
 144          input[type="email"]:focus,
 145          input[type="url"]:focus,
 146          input[type="password"]:focus,
 147          input[type="search"]:focus,
 148          input[type="number"]:focus,
 149          input[type="tel"]:focus,
 150          input[type="range"]:focus,
 151          input[type="date"]:focus,
 152          input[type="month"]:focus,
 153          input[type="week"]:focus,
 154          input[type="time"]:focus,
 155          input[type="datetime"]:focus,
 156          input[type="datetime-local"]:focus,
 157          input[type="color"]:focus,
 158          textarea:focus {
 159              border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 160          }
 161  
 162          .gallery-item > div > a:focus {
 163              box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 164          }
 165  
 166          /* Hover colors */
 167          a:hover, a:active,
 168          .main-navigation .main-menu > li > a:hover,
 169          .main-navigation .main-menu > li > a:hover + svg,
 170          .post-navigation .nav-links a:hover,
 171          .post-navigation .nav-links a:hover .post-title,
 172          .author-bio .author-description .author-link:hover,
 173          .entry .entry-content > .has-secondary-color,
 174          .entry .entry-content > *[class^="wp-block-"] .has-secondary-color,
 175          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color,
 176          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color blockquote.has-secondary-color p,
 177          .comment .comment-author .fn a:hover,
 178          .comment-reply-link:hover,
 179          .comment-navigation .nav-previous a:hover,
 180          .comment-navigation .nav-next a:hover,
 181          #cancel-comment-reply-link:hover,
 182          .widget a:hover {
 183              color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
 184          }
 185  
 186          .main-navigation .sub-menu > li > a:hover,
 187          .main-navigation .sub-menu > li > a:focus,
 188          .main-navigation .sub-menu > li > a:hover:after,
 189          .main-navigation .sub-menu > li > a:focus:after,
 190          .main-navigation .sub-menu > li > .menu-item-link-return:hover,
 191          .main-navigation .sub-menu > li > .menu-item-link-return:focus,
 192          .main-navigation .sub-menu > li > a:not(.submenu-expand):hover,
 193          .main-navigation .sub-menu > li > a:not(.submenu-expand):focus,
 194          .entry .entry-content > .has-secondary-background-color,
 195          .entry .entry-content > *[class^="wp-block-"].has-secondary-background-color,
 196          .entry .entry-content > *[class^="wp-block-"] .has-secondary-background-color,
 197          .entry .entry-content > *[class^="wp-block-"].is-style-solid-color.has-secondary-background-color {
 198              background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
 199          }
 200  
 201          /* Text selection colors */
 202          ::selection {
 203              background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */
 204          }
 205          ::-moz-selection {
 206              background-color: hsl( ' . $primary_color . ', ' . $saturation_selection . ', ' . $lightness_selection . ' ); /* base: #005177; */
 207          }';
 208  
 209      $editor_css = '
 210          /*
 211           * Set colors for:
 212           * - links
 213           * - blockquote
 214           * - pullquote (solid color)
 215           * - buttons, including buttons in the file and search blocks.
 216           */
 217          .editor-styles-wrapper .wp-block a,
 218          .editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__textlink, /* Before 5.8 */
 219          .editor-styles-wrapper .wp-block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), /* Before 5.8 */
 220          .editor-styles-wrapper .wp-block.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
 221          /* Before 5.8, the following hover style is needed to override the default color when the block is selected. */
 222          .editor-styles-wrapper .wp-block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color) {
 223              color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 224          }
 225  
 226          .editor-styles-wrapper .wp-block.wp-block-quote:not(.is-large):not(.is-style-large),
 227          .editor-styles-wrapper .wp-block .wp-block-freeform blockquote, /* Before 5.8 */
 228          .editor-styles-wrapper .wp-block.wp-block-freeform blockquote {
 229              border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 230          }
 231  
 232          /* Pullquote: The solid color variation was removed in 5.9, the CSS is kept for backwards compatibility. */
 233          .editor-styles-wrapper .wp-block .wp-block-pullquote.is-style-solid-color:not(.has-background-color), /* Before 5.8 */
 234          .editor-styles-wrapper .wp-block.wp-block-pullquote.is-style-solid-color:not(.has-background-color),
 235          .editor-styles-wrapper .wp-block .wp-block-file .wp-block-file__button, /* Before 5.8, and when the block is aligned. */
 236          .editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__button,
 237          .editor-styles-wrapper .wp-block .wp-block-button:not(.is-style-outline) .wp-block-button__link,
 238          .editor-styles-wrapper .wp-block .wp-block-search .wp-block-search__button, /* Before 5.8, and when the block is aligned. */
 239          .editor-styles-wrapper .wp-block.wp-block-search .wp-block-search__button {
 240              background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
 241          }
 242  
 243          /* Link hover colors */
 244          .editor-styles-wrapper .wp-block a:hover,
 245          .editor-styles-wrapper .wp-block a:active,
 246          .editor-styles-wrapper .wp-block.wp-block-file .wp-block-file__textlink:hover {
 247              color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
 248          }
 249  
 250          /* Do not overwrite solid color pullquote or cover links */
 251          .editor-styles-wrapper .wp-block .wp-block-pullquote.is-style-solid-color a,  /* Before 5.8 */
 252          .editor-styles-wrapper .wp-block.wp-block-pullquote.is-style-solid-color a,
 253          .editor-styles-wrapper .wp-block.wp-block-cover a {
 254              color: inherit;
 255          }
 256          ';
 257  
 258      if ( function_exists( 'register_block_type' ) && is_admin() ) {
 259          $theme_css = $editor_css;
 260      }
 261  
 262      /**
 263       * Filters Twenty Nineteen custom colors CSS.
 264       *
 265       * @since Twenty Nineteen 1.0
 266       *
 267       * @param string $css           Base theme colors CSS.
 268       * @param int    $primary_color The user's selected color hue.
 269       * @param string $saturation    Filtered theme color saturation level.
 270       */
 271      return apply_filters( 'twentynineteen_custom_colors_css', $theme_css, $primary_color, $saturation );
 272  }