wpcom-colors.php 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <?php
  2. /* Custom Colors: Maywood */
  3. // Background Color
  4. // $config-global--color-background-default
  5. add_color_rule( 'bg', '#FFFFFF', array(
  6. // Background-color
  7. array( '.screen-reader-text:focus,
  8. body,
  9. body .widget_eu_cookie_law_widget #eu-cookie-law,
  10. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept,
  11. .main-navigation > div > ul > li > .sub-menu', 'background-color' ),
  12. // Text-color
  13. array( '.a8c-posts-list-item__featured span,
  14. .wp-block-cover.has-background-dim,
  15. .wp-block-cover-image.has-background-dim,
  16. .sticky-post,
  17. .wp-block-pullquote.is-style-solid-color,
  18. body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'color' ),
  19. // Text-color darkened
  20. array( 'hr.wp-block-separator.is-style-dots:before', 'color', '-1' ),
  21. // Background-color darkened
  22. array( '.wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  23. table.is-style-stripes tbody tr:nth-child(odd)', 'background-color', '-1' ),
  24. // Background-color darkened
  25. array( 'body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept.has-focus,
  26. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:focus,
  27. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept:hover', 'background-color', '-1' ),
  28. // Border-color darkened
  29. array( '.wp-block-code,
  30. body .widget_eu_cookie_law_widget #eu-cookie-law,
  31. input[type="color"],
  32. input[type="date"],
  33. input[type="datetime"],
  34. input[type="datetime-local"],
  35. input[type="email"],
  36. input[type="month"],
  37. input[type="number"],
  38. input[type="password"],
  39. input[type="range"],
  40. input[type="search"],
  41. input[type="tel"],
  42. input[type="text"],
  43. input[type="time"],
  44. input[type="url"],
  45. input[type="week"],
  46. select,
  47. textarea,
  48. .site-header > .main-navigation > div > ul > li > .sub-menu', 'border-color', '-1' ),
  49. // Border-top-color darkened
  50. array( '.comment-list .children > li,
  51. .comment-list > li,
  52. .wp-block-pullquote', 'border-top-color', '-1' ),
  53. // Border-bottom-color darkened
  54. array( '.comment-list,
  55. .wp-block-pullquote,
  56. hr,
  57. hr.wp-block-separator', 'border-bottom-color', '-1' ),
  58. /**
  59. * Utility Classes
  60. */
  61. // Text-color
  62. array( '.has-primary-background-color[class],
  63. .has-primary-background-color.has-background-dim[class],
  64. .has-secondary-background-color[class],
  65. .has-secondary-background-color.has-background-dim[class],
  66. .has-foreground-background-color[class],
  67. .has-foreground-background-color.has-background-dim[class],
  68. .has-foreground-dark-background-color[class],
  69. .has-foreground-dark-background-color.has-background-dim[class],
  70. .has-foreground-light-background-color[class],
  71. .has-foreground-light-background-color.has-background-dim[class],
  72. .has-background-color[class],
  73. .has-background-dark-color[class],
  74. .has-background-light-color[class]', 'color' ),
  75. // Background-color
  76. array( '.has-background-background-color[class],
  77. .has-background-background-color.has-background-dim[class]', 'background-color' ),
  78. // Text-color darkened
  79. array( '.has-background-dark-color[class]', 'color', '-1' ),
  80. // Background-color darkened
  81. array( '.has-background-dark-background-color[class],
  82. .has-foreground-dark-background-color.has-background-dim[class]', 'background-color', '-1' ),
  83. // Text-color lightened
  84. array( '.has-background-light-color[class]', 'color', '+1' ),
  85. // Background-color lightened
  86. array( '.has-background-light-background-color[class],
  87. .has-foreground-light-background-color.has-background-dim[class]', 'background-color', '+1' ),
  88. ), __( 'Background Color' ) );
  89. // Link Color
  90. // $config-global--color-primary-default
  91. add_color_rule( 'link', '#897248', array(
  92. // Text-color
  93. array( '.a8c-posts-list .a8c-posts-list-item__title a:active,
  94. .a8c-posts-list .a8c-posts-list-item__title a:focus,
  95. .a8c-posts-list .a8c-posts-list-item__title a:hover,
  96. .entry-title a:active,
  97. .entry-title a:focus,
  98. .entry-title a:hover,
  99. .main-navigation li a:hover,
  100. .main-navigation li:hover > a,
  101. .main-navigation a:hover,
  102. .page-title a:active,
  103. .page-title a:focus,
  104. .page-title a:hover,
  105. .site-title a:hover,
  106. .social-navigation a:hover,
  107. .wp-block-button.is-style-outline .wp-block-button__link:active,
  108. .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
  109. .wp-block-button.is-style-outline.wp-block-button__link:active,
  110. .wp-block-button.is-style-outline.wp-block-button__link:not(.has-text-color),
  111. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  112. .wp-block-newspack-blocks-homepage-articles article .entry-title a:active,
  113. .wp-block-newspack-blocks-homepage-articles article .entry-title a:focus,
  114. .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
  115. a', 'color'),
  116. // Background-color
  117. array( '.a8c-posts-list-item__featured span,
  118. .a8c-posts-list__view-all,
  119. .button,
  120. .main-navigation #toggle:focus + #toggle-menu,
  121. .sticky-post,
  122. .wp-block-button__link,
  123. .wp-block-file .wp-block-file__button,
  124. .wp-block-file__button,
  125. .wp-block-pullquote.is-style-solid-color,
  126. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
  127. button,
  128. .wp-block-search .wp-block-search__button,
  129. .wp-block-search .wp-block-search__button:hover,
  130. .wp-block-search .wp-block-search__button:not(.has-background):hover,
  131. .wp-block-search .wp-block-search__button:focus,
  132. button[data-load-more-btn],
  133. input[type="submit"]', 'background-color' ),
  134. // Border color left
  135. array( '.wp-block-quote', 'border-left-color' ),
  136. // Border color right
  137. array( '.wp-block-quote[style*="text-align: right"],
  138. .wp-block-quote[style*="text-align:right"]', 'border-right-color' ),
  139. // Text-color darkened
  140. array( '.a8c-posts-list__item .a8c-posts-list-item__meta a:active,
  141. .a8c-posts-list__item .a8c-posts-list-item__meta a:hover,
  142. .comment-meta .comment-metadata a:active,
  143. .comment-meta .comment-metadata a:hover,
  144. .entry-footer a:active,
  145. .entry-footer a:hover,
  146. .entry-meta a:active,
  147. .entry-meta a:hover,
  148. .footer-navigation .footer-menu a:hover,
  149. .site-info a:hover,
  150. .wp-block-button.is-style-outline .wp-block-button__link.has-focus,
  151. .wp-block-button.is-style-outline .wp-block-button__link:focus,
  152. .wp-block-button.is-style-outline .wp-block-button__link:hover,
  153. .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
  154. .wp-block-button.is-style-outline.wp-block-button__link:focus,
  155. .wp-block-button.is-style-outline.wp-block-button__link:hover,
  156. .wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
  157. .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
  158. .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
  159. .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
  160. .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
  161. .wp-block-newspack-blocks-homepage-articles article .more-link:hover,
  162. a:hover', 'color', '-1' ),
  163. // Background-color darkened
  164. array( '.a8c-posts-list__view-all:focus,
  165. .a8c-posts-list__view-all:hover,
  166. .button:focus,
  167. .button:hover,
  168. .has-focus.a8c-posts-list__view-all,
  169. .has-focus.button,
  170. .has-focus.wp-block-button__link,
  171. .has-focus.wp-block-file__button,
  172. .wp-block-button__link:focus,
  173. .wp-block-button__link:hover,
  174. .wp-block-file__button:focus,
  175. .wp-block-file__button:hover,
  176. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus,
  177. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover,
  178. body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept,
  179. button.has-focus,
  180. button:focus,
  181. button:hover,
  182. input.has-focus[type="submit"],
  183. input:focus[type="submit"],
  184. input:hover[type="submit"]', 'background-color', '-1' ),
  185. // Background-color darkened
  186. array( 'input[type="color"]:focus,
  187. input[type="date"]:focus,
  188. input[type="datetime"]:focus,
  189. input[type="datetime-local"]:focus,
  190. input[type="email"]:focus,
  191. input[type="month"]:focus,
  192. input[type="number"]:focus,
  193. input[type="password"]:focus,
  194. input[type="range"]:focus,
  195. input[type="search"]:focus,
  196. input[type="tel"]:focus,
  197. input[type="text"]:focus,
  198. input[type="time"]:focus,
  199. input[type="url"]:focus,
  200. input[type="week"]:focus,
  201. textarea:focus', 'border-color', '-1' ),
  202. /**
  203. * Utility Classes
  204. */
  205. // Text-color
  206. array( '.has-primary-color[class]', 'color' ),
  207. // Background-color
  208. array( '.has-primary-background-color[class],
  209. .has-primary-background-color.has-background-dim[class]', 'background-color' ),
  210. ), __( 'Link Color' ) );
  211. // Text Color
  212. // $config-global--color-foreground-default
  213. add_color_rule( 'txt', '#181818', array(
  214. // Text-color
  215. array( '.comment-meta .comment-metadata,
  216. .main-navigation,
  217. .main-navigation a,
  218. .main-navigation a:link,
  219. .main-navigation a:visited,
  220. .screen-reader-text:focus,
  221. .site-title,
  222. .social-navigation a,
  223. .wp-block-code,
  224. .wp-block-code pre,
  225. .wp-block-pullquote,
  226. .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  227. table.is-style-stripes tbody tr:nth-child(odd),
  228. body,
  229. body .widget_eu_cookie_law_widget #eu-cookie-law,
  230. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept', 'color' ),
  231. // Background-color
  232. array( 'body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color' ),
  233. /**
  234. * Utility Classes
  235. */
  236. // Foreground
  237. array( '.has-foreground-color[class],
  238. .has-background-background-color[class],
  239. .has-background-background-color.has-background-dim[class],
  240. .has-background-dark-background-color[class],
  241. .has-background-dark-background-color.has-background-dim[class],
  242. .has-background-light-background-color[class],
  243. .has-background-light-background-color.has-background-dim[class]', 'color' ),
  244. // Background-color
  245. array( '.has-background-dim[class],
  246. .has-foreground-background-color[class],
  247. .has-foreground-background-color.has-background-dim[class]', 'background-color' ),
  248. // Text-color darkened
  249. array( '.has-foreground-dark-color[class]', 'color', '-1' ),
  250. // Background-color darkened
  251. array( '.has-foreground-dark-background-color[class],
  252. .has-foreground-dark-background-color.has-background-dim[class]', 'background-color', '-1' ),
  253. // Text-color brightened
  254. array( '.has-foreground-light-color[class]', 'color', '+2' ),
  255. // Background-color brightened
  256. array( '.has-foreground-light-background-color[class],
  257. .has-foreground-light-background-color.has-background-dim[class]', 'background-color', '+2' ),
  258. /**
  259. * Gray (Same as text color)
  260. */
  261. // Text-color
  262. array( '.a8c-posts-list__item .a8c-posts-list-item__meta,
  263. .comment-notes,
  264. .entry-footer,
  265. .entry-meta,
  266. .footer-navigation .footer-menu,
  267. .post-navigation .meta-nav,
  268. .site-branding,
  269. .site-info,
  270. .widget_archive ul li,
  271. .widget_categories ul li,
  272. .widget_meta ul li,
  273. .widget_nav_menu ul li,
  274. .widget_pages ul li,
  275. .widget_recent_comments ul li,
  276. .widget_recent_entries ul li,
  277. .widget_rss ul li,
  278. .wp-block-image figcaption,
  279. .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  280. .wp-block-latest-posts .wp-block-latest-posts__post-date,
  281. .wp-block-newspack-blocks-homepage-articles article .cat-links,
  282. .wp-block-newspack-blocks-homepage-articles article .entry-meta,
  283. .wp-block-pullquote .wp-block-pullquote__citation,
  284. .wp-block-pullquote cite,
  285. .wp-block-pullquote footer,
  286. .wp-block-quote .wp-block-quote__citation,
  287. .wp-block-quote cite,
  288. .wp-block-quote footer,
  289. .wp-block-quote.is-large .wp-block-quote__citation,
  290. .wp-block-quote.is-large cite,
  291. .wp-block-quote.is-large footer,
  292. .wp-block-quote.is-style-large .wp-block-quote__citation,
  293. .wp-block-quote.is-style-large cite,
  294. .wp-block-quote.is-style-large footer,
  295. .wp-block-video figcaption,
  296. figcaption', 'color' ),
  297. ), __( 'Text Color' ) );
  298. // Accent Color
  299. // $config-global--color-secondary-default
  300. add_color_rule( 'fg1', '#c4493f', array(
  301. /**
  302. * Utility Classes
  303. */
  304. // Text-color
  305. array( '.has-secondary-color[class]', 'color' ),
  306. // Background-color
  307. array( '.has-secondary-background-color[class],
  308. .has-secondary-background-color.has-background-dim[class]', 'background-color' ),
  309. ), __( 'Secondary Color' ) );
  310. /**
  311. * Custom CSS
  312. */
  313. function maywood_custom_colors_extra_css() {
  314. $colors_array = get_theme_mod( 'colors_manager' );
  315. $txt = $colors_array['colors']['txt'];
  316. ?>
  317. .wp-block-cover[style*="background-image"] h1,
  318. .wp-block-cover[style*="background-image"] h2,
  319. .wp-block-cover[style*="background-image"] h3,
  320. .wp-block-cover[style*="background-image"] h4,
  321. .wp-block-cover[style*="background-image"] h5,
  322. .wp-block-cover[style*="background-image"] h6,
  323. .wp-block-cover video + .wp-block-cover__inner-container h1,
  324. .wp-block-cover video + .wp-block-cover__inner-container h2,
  325. .wp-block-cover video + .wp-block-cover__inner-container h3,
  326. .wp-block-cover video + .wp-block-cover__inner-container h4,
  327. .wp-block-cover video + .wp-block-cover__inner-container h5,
  328. .wp-block-cover video + .wp-block-cover__inner-container h6,
  329. .wp-block-cover-image[style*="background-image"] h1,
  330. .wp-block-cover-image[style*="background-image"] h2,
  331. .wp-block-cover-image[style*="background-image"] h3,
  332. .wp-block-cover-image[style*="background-image"] h4,
  333. .wp-block-cover-image[style*="background-image"] h5,
  334. .wp-block-cover-image[style*="background-image"] h6,
  335. .wp-block-cover-image video + .wp-block-cover__inner-container h1,
  336. .wp-block-cover-image video + .wp-block-cover__inner-container h2,
  337. .wp-block-cover-image video + .wp-block-cover__inner-container h3,
  338. .wp-block-cover-image video + .wp-block-cover__inner-container h4,
  339. .wp-block-cover-image video + .wp-block-cover__inner-container h5,
  340. .wp-block-cover-image video + .wp-block-cover__inner-container h6 {
  341. text-shadow: none;
  342. }
  343. .wp-block-cover[style*="background-image"] p,
  344. .wp-block-cover video + .wp-block-cover__inner-container p,
  345. .wp-block-cover-image[style*="background-image"] p,
  346. .wp-block-cover-image video + .wp-block-cover__inner-container p {
  347. text-shadow: none;
  348. }
  349. <?php }
  350. add_theme_support( 'custom_colors_extra_css', 'maywood_custom_colors_extra_css' );
  351. /**
  352. * Featured Varia Palettes
  353. */
  354. // Light
  355. add_color_palette( array(
  356. '#FFFFFF',
  357. '#1D1E1E',
  358. '#C8133E',
  359. '#4E2F4B',
  360. ), 'Light' );
  361. // Medium
  362. add_color_palette( array(
  363. '#EEF4F7',
  364. '#242527',
  365. '#35845D',
  366. '#233252',
  367. ), 'Medium' );
  368. // Dark
  369. add_color_palette( array(
  370. '#1F2527',
  371. '#FFFFFF',
  372. '#9FD3E8',
  373. '#FBE6AA',
  374. ), 'Dark' );