wpcom-editor-colors.php 12 KB

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