wpcom-editor-colors.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. <?php declare( strict_types = 1 ); ?>
  2. <?php
  3. /*
  4. * Custom Editor Colors: Varia
  5. */
  6. // Background Color (White)
  7. // $config-global--color-background-default
  8. add_editor_color_rule( 'bg', '#ffffff', array(
  9. // Background-color
  10. array( '#editor .editor-styles-wrapper,
  11. #editor .editor-styles-wrapper .fse-template-part .main-navigation > div > ul > li > .sub-menu', 'background-color' ),
  12. // Text-color
  13. array( '#editor .editor-styles-wrapper .button,
  14. #editor .editor-styles-wrapper .button.has-focus,
  15. #editor .editor-styles-wrapper .button:focus,
  16. #editor .editor-styles-wrapper .button:hover,
  17. #editor .editor-styles-wrapper .fse-template-part .main-navigation .button,
  18. #editor .editor-styles-wrapper .fse-template-part .main-navigation .button:focus,
  19. #editor .editor-styles-wrapper .fse-template-part .main-navigation .button:hover,
  20. #editor .editor-styles-wrapper .fse-template-part .main-navigation .has-focus.button,
  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 table.is-style-stripes tbody tr:nth-child(odd),
  26. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  27. #editor .editor-styles-wrapper .wp-block-button .wp-block-button__link,
  28. #editor .editor-styles-wrapper .wp-block-button .wp-block-button__link.has-focus,
  29. #editor .editor-styles-wrapper .wp-block-button .wp-block-button__link:focus,
  30. #editor .editor-styles-wrapper .wp-block-button .wp-block-button__link:hover,
  31. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color,
  32. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-image-text,
  33. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover-text,
  34. #editor .editor-styles-wrapper .wp-block-cover-image:not([class*="background-color"]) .wp-block-cover__inner-container,
  35. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-image-text,
  36. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover-text,
  37. #editor .editor-styles-wrapper .wp-block-cover:not([class*="background-color"]) .wp-block-cover__inner-container,
  38. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  39. #editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
  40. #editor .editor-styles-wrapper .wp-block-cover.has-background-dim a,
  41. #editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
  42. #editor .editor-styles-wrapper .has-background a', 'color' ),
  43. /**
  44. * Utility Classes
  45. */
  46. // Text-color
  47. array( '#editor .editor-styles-wrapper .has-primary-background-color,
  48. #editor .editor-styles-wrapper .has-secondary-background-color,
  49. #editor .editor-styles-wrapper .has-foreground-background-color,
  50. #editor .editor-styles-wrapper .has-foreground-dark-background-color,
  51. #editor .editor-styles-wrapper .has-foreground-light-background-color,
  52. #editor .editor-styles-wrapper .has-background-color', 'color' ),
  53. // Background-color
  54. array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
  55. // Text-color darkened
  56. array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1' ),
  57. // Background-color darkened
  58. array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
  59. // Text-color lightened
  60. array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1' ),
  61. // Background-color lightened
  62. array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
  63. /**
  64. * Clean up for nested items
  65. */
  66. // Text-color
  67. array( '#editor .editor-styles-wrapper .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  68. #editor .editor-styles-wrapper [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  69. #editor .editor-styles-wrapper [style*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  70. #editor .editor-styles-wrapper .wp-block-cover[style*="background-image"] .wp-block-quote .wp-block-quote__citation', 'color' ),
  71. // Border-color
  72. array( '#editor .editor-styles-wrapper .has-background:not(.has-background-background-color) .wp-block-quote,
  73. #editor .editor-styles-wrapper [class*="background-color"]:not(.has-background-background-color) .wp-block-quote,
  74. #editor .editor-styles-wrapper [style*="background-color"]:not(.has-background-background-color) .wp-block-quote,
  75. #editor .editor-styles-wrapper .wp-block-cover[style*="background-image"] .wp-block-quote', 'border-color'),
  76. ), __( 'Background Color' ) );
  77. // Link Color (Blue)
  78. // $config-global--color-primary-default
  79. add_editor_color_rule( 'link', '#3E7D98', array(
  80. // Background-color
  81. array( '#editor .editor-styles-wrapper .button,
  82. #editor .editor-styles-wrapper .fse-template-part .main-navigation .button,
  83. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  84. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
  85. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  86. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:focus,
  87. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:hover,
  88. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'background-color' ),
  89. // Text-color
  90. array( '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:not(.has-text-color),
  91. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:not(.has-text-color),
  92. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  93. #editor .editor-styles-wrapper .wp-block-separator.is-style-dots:before,
  94. #editor .editor-styles-wrapper a,
  95. #editor .editor-styles-wrapper hr.is-style-dots:before', 'color' ),
  96. // Border-color (forms)
  97. array( '#editor .editor-styles-wrapper .wp-block-search .wp-block-search__input:focus,
  98. textarea:focus', 'border-color' ),
  99. // Border color top
  100. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color' ),
  101. // Border color bottom
  102. array( '#editor .editor-styles-wrapper .wp-block-pullquote,
  103. #editor .editor-styles-wrapper .wp-block-separator,
  104. #editor .editor-styles-wrapper hr', 'border-bottom-color' ),
  105. // Border color left
  106. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  107. // Border color right
  108. array( '#editor .editor-styles-wrapper .wp-block-separator[style*="text-align: right"],
  109. #editor .editor-styles-wrapper .wp-block-separator[style*="text-align:right"],
  110. #editor .editor-styles-wrapper hr[style*="text-align: right"],
  111. #editor .editor-styles-wrapper hr[style*="text-align:right"]', 'border-right-color' ),
  112. /**
  113. * Utility Classes
  114. */
  115. // Background-color
  116. array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
  117. // Text-color
  118. array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
  119. ), __( 'Link Color' ) );
  120. // Text Color (Gray)
  121. // $config-global--color-foreground-default
  122. add_editor_color_rule( 'txt', '#394d55', array(
  123. // Text-color
  124. array( '#editor .editor-styles-wrapper,
  125. #editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  126. #editor .editor-styles-wrapper .fse-template-part .main-navigation,
  127. #editor .editor-styles-wrapper .fse-template-part .main-navigation a,
  128. #editor .editor-styles-wrapper .fse-template-part .main-navigation a:link,
  129. #editor .editor-styles-wrapper .fse-template-part .main-navigation a:visited,
  130. #editor .editor-styles-wrapper .has-foreground-color[class],
  131. #editor .editor-styles-wrapper .wp-block-pullquote,
  132. #editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
  133. #editor .editor-styles-wrapper .wp-block-pullquote:not(.is-style-solid-color) .wp-block-pullquote__citation,
  134. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:hover,
  135. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:focus,
  136. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline.has-focus,
  137. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:hover,
  138. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:focus,
  139. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link.has-focus', 'color' ),
  140. // Border-color with less opacity (dim)
  141. array( '#editor .editor-styles-wrapper .wp-block-code,
  142. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__input', 'border-color', 0.8 ),
  143. // Background-color
  144. array( '#editor .editor-styles-wrapper .wp-block-cover.has-background-dim,
  145. #editor .editor-styles-wrapper .wp-block-cover-image.has-background-dim,
  146. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  147. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color' ),
  148. /**
  149. * Utility Classes
  150. */
  151. // Text-color
  152. array( '#editor .editor-styles-wrapper .has-background-background-color[class],
  153. #editor .editor-styles-wrapper .has-background-dark-background-color[class],
  154. #editor .editor-styles-wrapper .has-background-light-background-color[class],
  155. #editor .editor-styles-wrapper .has-foreground-color[class],
  156. #editor .editor-styles-wrapper .has-background-background-color[class] a', 'color' ),
  157. // Background-color
  158. array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
  159. // Text-color darkened
  160. array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
  161. // Background-color darkened
  162. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  163. // Text-color brightened
  164. array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
  165. // Background-color brightened
  166. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
  167. ), __( 'Text Color' ) );
  168. // Accent Color (Red)
  169. // $config-global--color-secondary-default
  170. add_editor_color_rule( 'fg1', '#9B6A36', array(
  171. /**
  172. * Utility Classes
  173. */
  174. // Text-color
  175. array( '#editor .editor-styles-wrapper .has-secondary-color[class]', 'color' ),
  176. // Background-color
  177. array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
  178. ), __( 'Secondary Color' ) );