wpcom-editor-colors.php 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
  1. <?php
  2. /*
  3. * Custom Editor Colors: Barnsbury
  4. */
  5. // Background Color (White)
  6. // $config-global--color-background-default
  7. add_editor_color_rule( 'bg', '#FFFDF6', 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-search .wp-block-search__button,
  18. #editor .editor-styles-wrapper .wp-block-button__link:not(.has-text-color),
  19. #editor .editor-styles-wrapper .wp-block-button__link.has-focus:not(.has-text-color),
  20. #editor .editor-styles-wrapper .wp-block-button__link:not(.has-text-color):focus,
  21. #editor .editor-styles-wrapper .wp-block-button__link:not(.has-text-color):hover,
  22. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
  23. // Background-color
  24. array( '#editor .editor-styles-wrapper', 'background-color' ),
  25. /**
  26. * Utility Classes
  27. */
  28. // Text-color
  29. array( '#editor .editor-styles-wrapper .has-primary-background-color,
  30. #editor .editor-styles-wrapper .wp-block .has-primary-background-color,
  31. #editor .editor-styles-wrapper .has-secondary-background-color,
  32. #editor .editor-styles-wrapper .wp-block .has-secondary-background-color,
  33. #editor .editor-styles-wrapper .has-foreground-background-color,
  34. #editor .editor-styles-wrapper .wp-block .has-foreground-background-color,
  35. #editor .editor-styles-wrapper .has-foreground-dark-background-color,
  36. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color,
  37. #editor .editor-styles-wrapper .has-foreground-light-background-color,
  38. #editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color,
  39. #editor .editor-styles-wrapper .has-background-color,
  40. #editor .editor-styles-wrapper .wp-block .has-background-color', 'color' ),
  41. // Background-color
  42. array( '#editor .editor-styles-wrapper .has-background-background-color,
  43. #editor .editor-styles-wrapper .wp-block .has-background-background-color', 'background-color' ),
  44. // Text-color darkened
  45. array( '#editor .editor-styles-wrapper .has-background-dark-color,
  46. #editor .editor-styles-wrapper .wp-block .has-background-dark-color', 'color', '-1' ),
  47. // Background-color darkened
  48. array( '#editor .editor-styles-wrapper .has-background-dark-background-color,
  49. #editor .editor-styles-wrapper .wp-block .has-background-dark-background-color', 'background-color', '-1' ),
  50. // Text-color lightened
  51. array( '#editor .editor-styles-wrapper .has-background-light-color,
  52. #editor .editor-styles-wrapper .wp-block .has-background-light-color', 'color', '+1' ),
  53. // Background-color lightened
  54. array( '#editor .editor-styles-wrapper .has-background-light-background-color,
  55. #editor .editor-styles-wrapper .wp-block .has-background-light-background-color', 'background-color', '+1' ),
  56. ), __( 'Background Color' ) );
  57. // Link Color (Blue)
  58. // $config-global--color-primary-default
  59. add_editor_color_rule( 'link', '#20603C', array(
  60. // Text-color
  61. array( '#editor .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
  62. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:not(.has-text-color),
  63. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  64. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:active,
  65. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:focus,
  66. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:hover,
  67. #editor .editor-styles-wrapper .wp-block-latest-posts > li > a:active,
  68. #editor .editor-styles-wrapper .wp-block-latest-posts > li > a:focus,
  69. #editor .editor-styles-wrapper .wp-block-latest-posts > li > a:hover', 'color' ),
  70. // Background-color
  71. array( '#editor .editor-styles-wrapper .button,
  72. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  73. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:focus,
  74. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button:hover,
  75. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  76. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
  77. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline,
  78. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'background-color' ),
  79. // Border-color (forms)
  80. // Needs contrast against `bg` with less contrast
  81. array( '#editor .editor-styles-wrapper .wp-block-search .wp-block-search__input:focus,
  82. textarea:focus', 'border-color' ),
  83. // Border-left-color
  84. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  85. /**
  86. * Utility Classes
  87. */
  88. // Background-color
  89. array( '#editor .editor-styles-wrapper .has-primary-background-color,
  90. #editor .editor-styles-wrapper .wp-block .has-primary-background-color', 'background-color' ),
  91. // Text-color
  92. array( '#editor .editor-styles-wrapper .has-primary-color,
  93. #editor .editor-styles-wrapper .wp-block .has-primary-color', 'color' ),
  94. ), __( 'Link Color' ) );
  95. // Text Color
  96. // $config-global--color-foreground-default
  97. add_editor_color_rule( 'txt', '#3C2323', array(
  98. // Text-color
  99. array( '#editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  100. #editor .editor-styles-wrapper .wp-block-latest-posts > li > a,
  101. #editor .editor-styles-wrapper .wp-block-pullquote,
  102. #editor .editor-styles-wrapper .wp-block-separator.is-style-dots:before,
  103. #editor .editor-styles-wrapper hr.is-style-dots:before,
  104. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  105. #editor .editor-styles-wrapper', 'color' ),
  106. // Border-top-color
  107. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color' ),
  108. // Border-bottom-color
  109. array( '#editor .editor-styles-wrapper .wp-block-pullquote,
  110. #editor .editor-styles-wrapper .wp-block-separator,
  111. #editor .editor-styles-wrapper hr', 'border-bottom-color' ),
  112. // Border-right-color
  113. array( '#editor .editor-styles-wrapper .wp-block-separator[style*="text-align: right"],
  114. #editor .editor-styles-wrapper .wp-block-separator[style*="text-align:right"],
  115. #editor .editor-styles-wrapper hr[style*="text-align: right"],
  116. #editor .editor-styles-wrapper hr[style*="text-align:right"]', 'border-right-color' ),
  117. /**
  118. * Utility Classes
  119. */
  120. // Text-color
  121. array( '#editor .editor-styles-wrapper .has-background-background-color,
  122. #editor .editor-styles-wrapper .wp-block .has-background-background-color,
  123. #editor .editor-styles-wrapper .has-background-dark-background-color,
  124. #editor .editor-styles-wrapper .wp-block .has-background-dark-background-color,
  125. #editor .editor-styles-wrapper .has-background-light-background-color,
  126. #editor .editor-styles-wrapper .wp-block .has-background-light-background-color,
  127. #editor .editor-styles-wrapper .has-foreground-color,
  128. #editor .editor-styles-wrapper .wp-block .has-foreground-color', 'color' ),
  129. // Background-color
  130. array( '#editor .editor-styles-wrapper .has-foreground-background-color,
  131. #editor .editor-styles-wrapper .wp-block .has-foreground-background-color', 'background-color' ),
  132. // Text-color darkened
  133. array( '#editor .editor-styles-wrapper .has-foreground-dark-color,
  134. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-color', 'color', '-1' ),
  135. // Background-color darkened
  136. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color,
  137. #editor .editor-styles-wrapper .wp-block .has-foreground-dark-background-color', 'background-color', '-1' ),
  138. // Text-color brightened
  139. array( '#editor .editor-styles-wrapper .has-foreground-light-color,
  140. #editor .editor-styles-wrapper .wp-block .has-foreground-light-color', 'color', '+2' ),
  141. // Background-color brightened
  142. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color,
  143. #editor .editor-styles-wrapper .wp-block .has-foreground-light-background-color', 'background-color', '+2' ),
  144. ), __( 'Text Color' ) );
  145. // Accent Color
  146. // $config-global--color-secondary-default
  147. add_editor_color_rule( 'fg1', '#655441', array(
  148. /**
  149. * Utility Classes
  150. */
  151. // Text-color
  152. array( '#editor .editor-styles-wrapper .has-secondary-color,
  153. #editor .editor-styles-wrapper .wp-block .has-secondary-color', 'color' ),
  154. // Background-color
  155. array( '#editor .editor-styles-wrapper .has-secondary-background-color,
  156. #editor .editor-styles-wrapper .wp-block .has-secondary-background-color', 'background-color' ),
  157. ), __( 'Secondary Color' ) );