wpcom-editor-colors.php 9.0 KB

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