color-patterns.php 11 KB

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