wpcom-colors.php 11 KB

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