wpcom-colors.php 13 KB

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