color-patterns.php (11014B)
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 thumbmail :before 76 * - post thumbmail :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 216 */ 217 .editor-block-list__layout .editor-block-list__block a, 218 .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), 219 .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color), 220 .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color), 221 .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color), 222 .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__textlink { 223 color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 224 } 225 226 .editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large), 227 .editor-styles-wrapper .editor-block-list__layout .wp-block-freeform blockquote { 228 border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 229 } 230 231 .editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) { 232 background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 233 } 234 235 .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button, 236 .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link, 237 .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active, 238 .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus, 239 .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { 240 background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */ 241 } 242 243 /* Hover colors */ 244 .editor-block-list__layout .editor-block-list__block a:hover, 245 .editor-block-list__layout .editor-block-list__block a:active, 246 .editor-block-list__layout .editor-block-list__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-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color a, 252 .editor-block-list__layout .editor-block-list__block .wp-block-cover a { 253 color: inherit; 254 } 255 '; 256 257 if ( function_exists( 'register_block_type' ) && is_admin() ) { 258 $theme_css = $editor_css; 259 } 260 261 /** 262 * Filters Twenty Nineteen custom colors CSS. 263 * 264 * @since Twenty Nineteen 1.0 265 * 266 * @param string $css Base theme colors CSS. 267 * @param int $primary_color The user's selected color hue. 268 * @param string $saturation Filtered theme color saturation level. 269 */ 270 return apply_filters( 'twentynineteen_custom_colors_css', $theme_css, $primary_color, $saturation ); 271 }