wpcom-editor-colors.php 10.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <?php
  2. /*
  3. * Custom Editor Colors
  4. */
  5. // Background Color
  6. // $config-global--color-background-default
  7. add_editor_color_rule(
  8. 'bg',
  9. '#060f29',
  10. array(
  11. // Background-color
  12. array( '#editor .editor-styles-wrapper', 'background-color' ),
  13. // Text-color
  14. array(
  15. '#editor .editor-styles-wrapper .button,
  16. #editor .editor-styles-wrapper .button.has-focus,
  17. #editor .editor-styles-wrapper .button:focus,
  18. #editor .editor-styles-wrapper .button:hover,
  19. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  20. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  21. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  22. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
  23. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
  24. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
  25. #editor .editor-styles-wrapper .wp-block-button__link,
  26. #editor .editor-styles-wrapper .wp-block-button__link.has-focus,
  27. #editor .editor-styles-wrapper .wp-block-button__link:focus,
  28. #editor .editor-styles-wrapper .wp-block-button__link:hover,
  29. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color,
  30. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  31. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
  32. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
  33. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
  34. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
  35. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
  36. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container
  37. #editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
  38. #editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim',
  39. 'color',
  40. ),
  41. /**
  42. * Utility Classes
  43. */
  44. // Text-color
  45. array(
  46. '#editor .editor-styles-wrapper .has-primary-background-color[class],
  47. #editor .editor-styles-wrapper .has-secondary-background-color[class],
  48. #editor .editor-styles-wrapper .has-foreground-background-color[class],
  49. #editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
  50. #editor .editor-styles-wrapper .has-foreground-light-background-color[class],
  51. #editor .editor-styles-wrapper .has-background-color[class]',
  52. 'color',
  53. ),
  54. // Background-color
  55. array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
  56. // Text-color darkened
  57. array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1' ),
  58. // Background-color darkened
  59. array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
  60. // Text-color lightened
  61. array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1' ),
  62. // Background-color lightened
  63. array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
  64. /**
  65. * Grays
  66. * Uses a slightly darker color
  67. */
  68. // Color
  69. array( '#editor .editor-styles-wrapper .wp-block-separator.is-style-dots', 'color', '-1' ),
  70. // Border-color
  71. array( '#editor .editor-styles-wrapper .wp-block-code', 'border-color', '-1' ),
  72. // Border-top-color
  73. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color', '-1' ),
  74. // Border-bottom-color
  75. array(
  76. '#editor .editor-styles-wrapper .wp-block-pullquote,
  77. #editor .editor-styles-wrapper .wp-block-separator',
  78. 'border-bottom-color',
  79. '-1',
  80. ),
  81. ),
  82. __( 'Background Color' )
  83. );
  84. // Link Color
  85. // $config-global--color-primary-default
  86. add_editor_color_rule(
  87. 'link',
  88. '#CAAB57',
  89. array(
  90. // Background-color
  91. array(
  92. '#editor .editor-styles-wrapper .button,
  93. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  94. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
  95. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  96. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:focus,
  97. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:hover,
  98. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color',
  99. 'background-color',
  100. ),
  101. // Text-color
  102. array(
  103. '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:not(.has-text-color),
  104. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:not(.has-text-color),
  105. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  106. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  107. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:active,
  108. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:focus,
  109. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:hover,
  110. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline,
  111. #editor .editor-styles-wrapper a',
  112. 'color',
  113. ),
  114. // Border-color (forms)
  115. array( '#editor .editor-styles-wrapper .wp-block-search .wp-block-search__input:focus, textarea:focus', 'border-color' ),
  116. // Border color left
  117. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  118. // Border color right
  119. array(
  120. '#editor .editor-styles-wrapper .wp-block-quote[style*="text-align: right"],
  121. #editor .editor-styles-wrapper .wp-block-quote[style*="text-align:right"]',
  122. 'border-right-color',
  123. ),
  124. /**
  125. * Utility Classes
  126. */
  127. // Background-color
  128. array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
  129. // Text-color
  130. array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
  131. ),
  132. __( 'Link Color' )
  133. );
  134. // Text Color
  135. // $config-global--color-foreground-default
  136. add_editor_color_rule(
  137. 'txt',
  138. '#f2f2f2',
  139. array(
  140. // Text-color
  141. array(
  142. '#editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  143. #editor .editor-styles-wrapper .wp-block-pullquote,
  144. #editor .editor-styles-wrapper',
  145. 'color',
  146. ),
  147. // Background-color
  148. array(
  149. '#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
  150. #editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
  151. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  152. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)',
  153. 'background-color',
  154. ),
  155. /**
  156. * Utility Classes
  157. */
  158. // Text-color
  159. array(
  160. '#editor .editor-styles-wrapper .has-foreground-color[class],
  161. #editor .editor-styles-wrapper .has-background-background-color[class],
  162. #editor .editor-styles-wrapper .has-background-dark-background-color[class],
  163. #editor .editor-styles-wrapper .has-background-light-background-color[class]',
  164. 'color',
  165. ),
  166. // Background-color
  167. array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
  168. // Text-color darkened
  169. array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
  170. // Background-color darkened
  171. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  172. // Text-color brightened
  173. array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
  174. // Background-color brightened
  175. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
  176. // Border-color with less opacity (dim)
  177. array(
  178. '#editor .editor-styles-wrapper .wp-block-code,
  179. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__input',
  180. 'border-color',
  181. 0.8,
  182. ),
  183. /**
  184. * Grays
  185. * Same as text color
  186. */
  187. // Text-color
  188. array(
  189. '#editor .editor-styles-wrapper .a8c-posts-list__item .a8c-posts-list-item__meta,
  190. #editor .editor-styles-wrapper .wp-block-image figcaption,
  191. #editor .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  192. #editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,
  193. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .cat-links,
  194. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .entry-meta,
  195. #editor .editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation,
  196. #editor .editor-styles-wrapper .wp-block-pullquote cite,
  197. #editor .editor-styles-wrapper .wp-block-pullquote footer,
  198. #editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
  199. #editor .editor-styles-wrapper .wp-block-quote cite,
  200. #editor .editor-styles-wrapper .wp-block-quote footer,
  201. #editor .editor-styles-wrapper .wp-block-quote.is-large .wp-block-quote__citation,
  202. #editor .editor-styles-wrapper .wp-block-quote.is-large cite,
  203. #editor .editor-styles-wrapper .wp-block-quote.is-large footer,
  204. #editor .editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
  205. #editor .editor-styles-wrapper .wp-block-quote.is-style-large cite,
  206. #editor .editor-styles-wrapper .wp-block-quote.is-style-large footer,
  207. #editor .editor-styles-wrapper .wp-block-video figcaption,
  208. #editor .editor-styles-wrapper figcaption',
  209. 'color',
  210. ),
  211. ),
  212. __( 'Text Color' )
  213. );
  214. // Accent Color (Red)
  215. // $config-global--color-secondary-default
  216. add_editor_color_rule(
  217. 'fg1',
  218. '#EE4266',
  219. array(
  220. /**
  221. * Utility Classes
  222. */
  223. // Text-color
  224. array( '#editor .editor-styles-wrapper .has-secondary-color[class]', 'color' ),
  225. // Background-color
  226. array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
  227. ),
  228. __( 'Secondary Color' )
  229. );