wpcom-colors.php 12 KB

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