wpcom-colors.php 12 KB

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