wpcom-colors.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <?php
  2. /* Custom Colors: Coutoire */
  3. // Background Color
  4. // $config-global--color-background-default
  5. add_color_rule( 'bg', 'white', array(
  6. // Background-color
  7. array( '.screen-reader-text:focus,
  8. .site-header a:focus,
  9. .site-header a:hover,
  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. // Needs contrast against `link` (primary)
  16. array( '.a8c-posts-list-item__featured span,
  17. .a8c-posts-list__view-all,
  18. .a8c-posts-list__view-all:focus,
  19. .a8c-posts-list__view-all:hover,
  20. .button,
  21. .button:focus,
  22. .button:hover,
  23. .has-focus.a8c-posts-list__view-all,
  24. .has-focus.button,
  25. .has-focus.wp-block-button__link,
  26. .has-focus.wp-block-file__button,
  27. .sticky-post,
  28. .wp-block-button__link,
  29. .wp-block-button__link:focus,
  30. .wp-block-button__link:hover,
  31. .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
  32. .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
  33. .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
  34. .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
  35. .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
  36. .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
  37. .wp-block-file .wp-block-file__button,
  38. .wp-block-file a.wp-block-file__button:active,
  39. .wp-block-file a.wp-block-file__button:focus,
  40. .wp-block-file a.wp-block-file__button:hover,
  41. .wp-block-file a.wp-block-file__button:visited,
  42. .wp-block-file__button,
  43. .wp-block-file__button:focus,
  44. .wp-block-file__button:hover,
  45. .wp-block-gallery .blocks-gallery-image figcaption,
  46. .wp-block-gallery .blocks-gallery-item figcaption,
  47. .wp-block-pullquote.is-style-solid-color,
  48. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
  49. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus,
  50. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover,
  51. body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept,
  52. body .widget_eu_cookie_law_widget #eu-cookie-law.negative,
  53. button,
  54. button.has-focus,
  55. button:focus,
  56. button:hover,
  57. button[data-load-more-btn],
  58. input.has-focus[type="submit"],
  59. input:focus[type="submit"],
  60. input:hover[type="submit"],
  61. input[type="submit"]', 'color', 'link' ),
  62. /**
  63. * Utility Classes
  64. */
  65. // Text-color
  66. // Needs contrast against `link` (primary)
  67. array( '.has-primary-background-color[class]', 'color', 'link' ),
  68. // Text-color
  69. // Needs contrast against `fg1` (secondary)
  70. array( '.has-secondary-background-color[class]', 'color', 'fg1' ),
  71. // Text-color
  72. // Needs contrast against `txt` (foreground)
  73. array( '.has-foreground-background-color[class],
  74. .has-foreground-dark-background-color[class],
  75. .has-foreground-light-background-color[class]', 'color', 'txt', 12 ),
  76. // Text-color
  77. // Needs contrast against `txt` (background)
  78. array( '.has-background-color[class],
  79. .has-background-dark-color[class],
  80. .has-background-light-color[class],
  81. .has-background-background-color[class],
  82. .has-background-dark-background-color[class],
  83. .has-background-light-background-color[class]', 'color', 'bg', 12 ),
  84. // Background-color
  85. array( '.has-background-background-color[class]', 'background-color' ),
  86. // Background-color darkened
  87. array( '.has-background-dark-background-color[class]', 'background-color', '-1' ),
  88. // Background-color lightened
  89. array( '.has-background-light-background-color[class]', 'background-color', '+1' ),
  90. ), __( 'Background Color' ) );
  91. // Link Color
  92. // $config-global--color-primary-default
  93. add_color_rule( 'link', 'black', array(
  94. // Background-color
  95. array( '.a8c-posts-list-item__featured span,
  96. .a8c-posts-list__view-all,
  97. .button,
  98. .sticky-post,
  99. .wp-block-button__link,
  100. .wp-block-file .wp-block-file__button,
  101. .wp-block-file__button,
  102. .wp-block-pullquote.is-style-solid-color,
  103. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
  104. button,
  105. button[data-load-more-btn],
  106. input[type="submit"]', 'background-color' ),
  107. // Text-color
  108. // Needs contrast against `bg`
  109. array( '.has-drop-cap:not(:focus):first-letter,
  110. .main-navigation a,
  111. .main-navigation a:link,
  112. .main-navigation a:visited,
  113. .site-description,
  114. .site-title,
  115. .social-navigation a,
  116. .wp-block-button.is-style-outline .wp-block-button__link,
  117. .wp-block-button.is-style-outline .wp-block-button__link:active,
  118. .wp-block-button.is-style-outline.wp-block-button__link,
  119. .wp-block-button.is-style-outline.wp-block-button__link:active,
  120. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  121. a', 'color', 'bg' ),
  122. // Border color left
  123. // Needs contrast against `bg`
  124. array( '.wp-block-quote', 'border-left-color', 'bg' ),
  125. // Border color right
  126. // Needs contrast against `bg`
  127. array( '.wp-block-quote[style*="text-align: right"],
  128. .wp-block-quote[style*="text-align:right"]', 'border-right-color', 'bg' ),
  129. /**
  130. * Utility Classes
  131. */
  132. // Background-color
  133. array( '.has-primary-background-color[class]', 'background-color' ),
  134. // Text-color
  135. // Needs contrast against `bg`
  136. array( '.has-primary-color[class]', 'color', 'bg' ),
  137. ), __( 'Link Color' ) );
  138. // Text Color
  139. // $config-global--color-foreground-default
  140. add_color_rule( 'txt', '#444444', array(
  141. // Text-color
  142. // Needs contrast against `bg` with more contrast
  143. array( '.comment-meta .comment-metadata,
  144. .main-navigation,
  145. .screen-reader-text:focus,
  146. .wp-block-code,
  147. .wp-block-code pre,
  148. .wp-block-pullquote,
  149. body,
  150. body .widget_eu_cookie_law_widget #eu-cookie-law,
  151. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept,
  152. input[type="color"],
  153. input[type="color"]:focus,
  154. input[type="date"],
  155. input[type="date"]:focus,
  156. input[type="datetime"],
  157. input[type="datetime"]:focus,
  158. input[type="datetime-local"],
  159. input[type="datetime-local"]:focus,
  160. input[type="email"],
  161. input[type="email"]:focus,
  162. input[type="month"],
  163. input[type="month"]:focus,
  164. input[type="number"],
  165. input[type="number"]:focus,
  166. input[type="password"],
  167. input[type="password"]:focus,
  168. input[type="range"],
  169. input[type="range"]:focus,
  170. input[type="search"],
  171. input[type="search"]:focus,
  172. input[type="tel"],
  173. input[type="tel"]:focus,
  174. input[type="text"],
  175. input[type="text"]:focus,
  176. input[type="time"],
  177. input[type="time"]:focus,
  178. input[type="url"],
  179. input[type="url"]:focus,
  180. input[type="week"],
  181. input[type="week"]:focus,
  182. textarea,
  183. textarea:focus', 'color', 'bg', 7 ),
  184. // Background-color
  185. // Needs contrast against `bg` with more contrast
  186. array( '.wp-block-cover,
  187. .wp-block-cover-image,
  188. body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color', 'bg', 7 ),
  189. /**
  190. * Utility Classes
  191. */
  192. // Foreground
  193. // Needs contrast against `bg`
  194. array( '.has-foreground-color[class]', 'color', 'bg' ),
  195. array( '.has-foreground-background-color[class]', 'background-color' ),
  196. // Text-color darkened
  197. array( '.has-foreground-dark-color[class]', 'color', '-1' ),
  198. // Background-color darkened
  199. array( '.has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  200. // Text-color brightened
  201. array( '.has-foreground-light-color[class]', 'color', '+2' ),
  202. // Background-color brightened
  203. array( '.has-foreground-light-background-color[class]', 'background-color', '+2' ),
  204. ), __( 'Text Color' ) );
  205. // Accent Color
  206. // $config-global--color-secondary-default
  207. add_color_rule( 'fg1', '#FF7A5C', array(
  208. // Text-color
  209. // Needs contrast against `bg` with more contrast
  210. array( '.a8c-posts-list__item .a8c-posts-list-item__meta a:active,
  211. .a8c-posts-list__item .a8c-posts-list-item__meta a:hover,
  212. .comment-meta .comment-metadata a:active,
  213. .comment-meta .comment-metadata a:hover,
  214. .entry-footer a:active,
  215. .entry-footer a:hover,
  216. .entry-meta a:active,
  217. .entry-meta a:hover,
  218. .footer-navigation .footer-menu a:hover,
  219. .main-navigation a:hover,
  220. .site-info a:hover,
  221. .site-title a:hover,
  222. .social-navigation a:hover,
  223. .wp-block-button.is-style-outline .wp-block-button__link.has-focus,
  224. .wp-block-button.is-style-outline .wp-block-button__link:focus,
  225. .wp-block-button.is-style-outline .wp-block-button__link:hover,
  226. .wp-block-button.is-style-outline.wp-block-button__link.has-focus,
  227. .wp-block-button.is-style-outline.wp-block-button__link:focus,
  228. .wp-block-button.is-style-outline.wp-block-button__link:hover,
  229. .wp-block-newspack-blocks-homepage-articles article .cat-links a:active,
  230. .wp-block-newspack-blocks-homepage-articles article .cat-links a:hover,
  231. .wp-block-newspack-blocks-homepage-articles article .entry-meta a:active,
  232. .wp-block-newspack-blocks-homepage-articles article .entry-meta a:hover,
  233. .wp-block-newspack-blocks-homepage-articles article .entry-title a:hover,
  234. a:hover', 'color', 'bg', 7 ),
  235. // Background-color
  236. // Needs contrast against `bg` with more contrast
  237. array( '.a8c-posts-list__view-all:focus,
  238. .a8c-posts-list__view-all:hover,
  239. .button:focus,
  240. .button:hover,
  241. .has-focus.a8c-posts-list__view-all,
  242. .has-focus.button,
  243. .has-focus.wp-block-button__link,
  244. .has-focus.wp-block-file__button,
  245. .main-navigation #toggle:focus + #toggle-menu,
  246. .wp-block-button__link:focus,
  247. .wp-block-button__link:hover,
  248. .wp-block-file__button:focus,
  249. .wp-block-file__button:hover,
  250. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus,
  251. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover,
  252. body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept,
  253. button.has-focus,
  254. button:focus,
  255. button:hover,
  256. input.has-focus[type="submit"],
  257. input:focus[type="submit"],
  258. input:hover[type="submit"]', 'bg', 7 ),
  259. // Border-color
  260. // Needs contrast against `bg`
  261. array( 'input[type="color"]:focus,
  262. input[type="date"]:focus,
  263. input[type="datetime"]:focus,
  264. input[type="datetime-local"]:focus,
  265. input[type="email"]:focus,
  266. input[type="month"]:focus,
  267. input[type="number"]:focus,
  268. input[type="password"]:focus,
  269. input[type="range"]:focus,
  270. input[type="search"]:focus,
  271. input[type="tel"]:focus,
  272. input[type="text"]:focus,
  273. input[type="time"]:focus,
  274. input[type="url"]:focus,
  275. input[type="week"]:focus,
  276. textarea:focus', 'bg' ),
  277. // Text-decoration-color
  278. // Needs contrast against `bg` with more contrast
  279. array( '.entry-content a,
  280. .main-navigation > div > ul > li > a,
  281. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  282. a', 'bg', 7 ),
  283. /**
  284. * Utility Classes
  285. */
  286. // Text-color
  287. // Needs contrast against `bg`
  288. array( '.has-secondary-color[class]', 'color', 'bg' ),
  289. // Background-color
  290. array( '.has-secondary-background-color[class]', 'background-color' ),
  291. ), __( 'Secondary Color' ) );