wpcom-colors.php 13 KB

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