wpcom-editor-colors.php 12 KB

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