wpcom-colors.php 14 KB

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