wpcom-editor-colors.php 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <?php
  2. /*
  3. * Custom Editor Colors
  4. */
  5. // Background Color
  6. // $config-global--color-background-default
  7. add_editor_color_rule( 'bg', '#FFFFFF', array(
  8. // Text-color
  9. array( '.wp-block-pullquote.is-style-solid-color', 'color' ),
  10. // Background-color
  11. array( '#editor .editor-styles-wrapper,
  12. #editor .editor-styles-wrapper .fse-template-part .main-navigation > div > ul > li > .sub-menu', 'background-color' ),
  13. // Text-color darkened
  14. array( '#editor .editor-styles-wrapper .wp-block-separator.is-style-dots', 'color', '-1' ),
  15. // Border-color darkened
  16. array( '#editor .editor-styles-wrapper .wp-block-code', 'border-color', '-1' ),
  17. // Border-top-color darkened
  18. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color', '-1' ),
  19. // Border-bottom-color darkened
  20. array( '#editor .editor-styles-wrapper .wp-block-pullquote,
  21. #editor .editor-styles-wrapper .wp-block-separator', 'border-bottom-color', '-1' ),
  22. /**
  23. * Utility Classes
  24. */
  25. // Text-color
  26. array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
  27. #editor .editor-styles-wrapper .wp-block .has-primary-background-color[class],
  28. #editor .editor-styles-wrapper .has-secondary-background-color[class],
  29. #editor .editor-styles-wrapper .wp-block .has-secondary-background-color[class],
  30. #editor .editor-styles-wrapper .has-foreground-background-color[class],
  31. #editor .editor-styles-wrapper .wp-block .has-foreground-background-color[class],
  32. #editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
  33. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color[class],
  34. #editor .editor-styles-wrapper .has-foreground-light-background-color[class],
  35. #editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color[class],
  36. #editor .editor-styles-wrapper .has-background-color[class],
  37. #editor .editor-styles-wrapper .wp-block .has-background-color[class]', 'color' ),
  38. // Background-color
  39. array( '#editor .editor-styles-wrapper .has-background-background-color[class],
  40. #editor .editor-styles-wrapper .wp-block .has-background-background-color[class]', 'background-color' ),
  41. // Text-color darkened
  42. array( '#editor .editor-styles-wrapper .has-background-dark-color[class],
  43. #editor .editor-styles-wrapper .wp-block .has-background-dark-color[class]', 'color', '-1' ),
  44. // Background-color darkened
  45. array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class],
  46. #editor .editor-styles-wrapper .wp-block .has-background-dark-background-color[class]', 'background-color', '-1' ),
  47. // Text-color lightened
  48. array( '#editor .editor-styles-wrapper .has-background-light-color[class],
  49. #editor .editor-styles-wrapper .wp-block .has-background-light-color[class]', 'color', '+1' ),
  50. // Background-color lightened
  51. array( '#editor .editor-styles-wrapper .has-background-light-background-color[class],
  52. #editor .editor-styles-wrapper .wp-block .has-background-light-background-color[class]', 'background-color', '+1' ),
  53. ), __( 'Background Color' ) );
  54. // Link Color
  55. // $config-global--color-primary-default
  56. add_editor_color_rule( 'link', '#897248', array(
  57. // Text-color
  58. array( '#editor .editor-styles-wrapper .fse-template-part .main-navigation a:hover,
  59. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  60. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link,
  61. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline,
  62. #editor .editor-styles-wrapper a', 'color' ),
  63. // Background-color
  64. array( '#editor .editor-styles-wrapper .button,
  65. #editor .editor-styles-wrapper .fse-template-part .main-navigation #toggle:focus + #toggle-menu,
  66. #editor .editor-styles-wrapper .fse-template-part .main-navigation .button,
  67. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  68. #editor .editor-styles-wrapper .wp-block-button__link,
  69. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'background-color' ),
  70. // Border color left
  71. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  72. // Border color right
  73. array( '#editor .editor-styles-wrapper .wp-block-quote[style*="text-align: right"],
  74. #editor .editor-styles-wrapper .wp-block-quote[style*="text-align:right"]', 'border-right-color' ),
  75. /**
  76. * Utility Classes
  77. */
  78. // Text-color
  79. array( '#editor .editor-styles-wrapper .has-primary-color[class],
  80. #editor .editor-styles-wrapper .wp-block .has-primary-color[class]', 'color' ),
  81. // Background-color
  82. array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
  83. #editor .editor-styles-wrapper .wp-block .has-primary-background-color[class]', 'background-color' ),
  84. ), __( 'Link Color' ) );
  85. // Text Color
  86. // $config-global--color-foreground-default
  87. add_editor_color_rule( 'txt', '#181818', array(
  88. // Text-color
  89. array( '#editor .editor-styles-wrapper,
  90. #editor .editor-styles-wrapper .wp-block-pullquote,
  91. #editor .editor-styles-wrapper .wp-block-pullquote,
  92. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  93. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  94. #editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  95. #editor .editor-styles-wrapper .fse-template-part .main-navigation,
  96. #editor .editor-styles-wrapper .fse-template-part .main-navigation a,
  97. #editor .editor-styles-wrapper .fse-template-part .main-navigation a:link,
  98. #editor .editor-styles-wrapper .fse-template-part .main-navigation a:visited', 'color' ),
  99. /**
  100. * Utility Classes
  101. */
  102. // Text-color
  103. array( '#editor .editor-styles-wrapper .has-background-background-color[class],
  104. #editor .editor-styles-wrapper .wp-block .has-background-background-color[class],
  105. #editor .editor-styles-wrapper .has-background-dark-background-color[class],
  106. #editor .editor-styles-wrapper .wp-block .has-background-dark-background-color[class],
  107. #editor .editor-styles-wrapper .has-background-light-background-color[class],
  108. #editor .editor-styles-wrapper .wp-block .has-background-light-background-color[class],
  109. #editor .editor-styles-wrapper .has-foreground-color[class],
  110. #editor .editor-styles-wrapper .wp-block .has-foreground-color[class]', 'color' ),
  111. // Background-color
  112. array( '#editor .editor-styles-wrapper .has-foreground-background-color[class],
  113. #editor .editor-styles-wrapper .wp-block .has-foreground-background-color[class]', 'background-color' ),
  114. // Text-color darkened
  115. array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class],
  116. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-color[class]', 'color', '-1' ),
  117. // Background-color darkened
  118. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
  119. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  120. // Text-color brightened
  121. array( '#editor .editor-styles-wrapper .has-foreground-light-color[class],
  122. #editor .editor-styles-wrapper .wp-block .has-foreground-light-color[class]', 'color', '+2' ),
  123. // Background-color brightened
  124. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class],
  125. #editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color[class]', 'background-color', '+2' ),
  126. /**
  127. * Grays
  128. * Same as text color
  129. */
  130. // Text-color
  131. array( '#editor .editor-styles-wrapper .a8c-posts-list__item .a8c-posts-list-item__meta,
  132. #editor .editor-styles-wrapper .wp-block-image figcaption,
  133. #editor .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  134. #editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,
  135. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .cat-links,
  136. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .entry-meta,
  137. #editor .editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation,
  138. #editor .editor-styles-wrapper .wp-block-pullquote cite,
  139. #editor .editor-styles-wrapper .wp-block-pullquote footer,
  140. #editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
  141. #editor .editor-styles-wrapper .wp-block-quote cite,
  142. #editor .editor-styles-wrapper .wp-block-quote footer,
  143. #editor .editor-styles-wrapper .wp-block-quote.is-large .wp-block-quote__citation,
  144. #editor .editor-styles-wrapper .wp-block-quote.is-large cite,
  145. #editor .editor-styles-wrapper .wp-block-quote.is-large footer,
  146. #editor .editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
  147. #editor .editor-styles-wrapper .wp-block-quote.is-style-large cite,
  148. #editor .editor-styles-wrapper .wp-block-quote.is-style-large footer,
  149. #editor .editor-styles-wrapper .wp-block-video figcaption,
  150. #editor .editor-styles-wrapper figcaption', 'color' ),
  151. ), __( 'Text Color' ) );
  152. // Accent Color (Red)
  153. // $config-global--color-secondary-default
  154. add_editor_color_rule( 'fg1', '#c4493f', array(
  155. /**
  156. * Utility Classes
  157. */
  158. // Text-color
  159. array( '#editor .editor-styles-wrapper .has-secondary-color[class],
  160. #editor .editor-styles-wrapper .wp-block .has-secondary-color[class]', 'color' ),
  161. // Background-color
  162. array( '#editor .editor-styles-wrapper .has-secondary-background-color[class],
  163. #editor .editor-styles-wrapper .wp-block .has-secondary-background-color[class]', 'background-color' ),
  164. ), __( 'Secondary Color' ) );