wpcom-colors.php 15 KB

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