wpcom-colors.php 12 KB

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