wpcom-colors.php 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <?php
  2. /* Custom Colors: Apostrophe 2 */
  3. // Background
  4. add_color_rule( 'bg', '#ffffff', array(
  5. array( 'body', 'background-color' ),
  6. array( '.infinite-container', 'background-color' ),
  7. ) );
  8. // Primary accent color
  9. add_color_rule( 'txt', '#117bb8', array(
  10. // Needs contrast against content background (opaque white)
  11. array( 'a, .main-navigation a:hover, .apostrophe-2-social li:hover a::before, .archive .entry-title a, .blog .entry-title a, .search .entry-title a,
  12. .site-title a:hover',
  13. 'color', '#ffffff' ),
  14. // Primary sidebar background needs only enough contrast to stand out a smidge (from background)
  15. array( '.widget-area .sidebar-primary aside',
  16. 'background-color', '#ffffff', 1 ),
  17. // Links and tags should stand out a bit more, since they're smaller
  18. array( '.entry-meta .posted-on,
  19. .entry-meta .byline,
  20. .sticky .entry-meta,
  21. .comment-reply-link,
  22. .entry-footer a[rel="tag"],
  23. #infinite-handle span', 'background-color', '#ffffff', 2 ),
  24. array( 'button,
  25. input[type="button"],
  26. input[type="reset"],
  27. input[type="submit"]', 'color', '#ffffff' ),
  28. array( 'button,
  29. input[type="button"],
  30. input[type="reset"],
  31. input[type="submit"],
  32. .button-primary,
  33. .button,
  34. .button-secondary,
  35. .apostrophe-2-navigation .current_page_item a,
  36. .apostrophe-2-navigation .current-menu-item a,
  37. .apostrophe-2-navigation .current-post-ancestor a,
  38. .apostrophe-2-navigation .current-menu-ancestor a,
  39. .apostrophe-2-navigation .current-menu-parent a,
  40. .apostrophe-2-navigation .current-post-parent a', 'border-color', 2 ),
  41. array( 'input[type="text"]:focus,
  42. input[type="email"]:focus,
  43. input[type="url"]:focus,
  44. input[type="password"]:focus,
  45. input[type="search"]:focus,
  46. textarea:focus', 'color' ),
  47. array( 'input[type="text"]:focus,
  48. input[type="email"]:focus,
  49. input[type="url"]:focus,
  50. input[type="password"]:focus,
  51. input[type="search"]:focus,
  52. textarea:focus', 'border-color' ),
  53. array( '.sidebar-primary button,
  54. .sidebar-primary input[type="button"],
  55. .sidebar-primary input[type="reset"],
  56. .sidebar-primary input[type="submit"]', 'color', 'link', 10 ),
  57. array( '.sidebar-primary button:hover,
  58. .sidebar-primary button:focus,
  59. .sidebar-primary input[type="button"]:focus,
  60. .sidebar-primary input[type="button"]:hover,
  61. .sidebar-primary input[type="reset"]:focus,
  62. .sidebar-primary input[type="reset"]:hover,
  63. .sidebar-primary input[type="submit"]:focus,
  64. .sidebar-primary input[type="submit"]:hover,
  65. #subscribe-blog input[type="submit"]:focus,
  66. #subscribe-blog input[type="submit"]:hover', 'color', 'txt', 10 ),
  67. array( '.sidebar-primary button:hover,
  68. .sidebar-primary input[type="button"]:hover,
  69. .sidebar-primary input[type="reset"]:hover,
  70. .sidebar-primary input[type="submit"]:hover', 'border-color', 'link' ),
  71. array( '.sidebar-primary button:hover,
  72. .sidebar-primary input[type="button"]:hover,
  73. .sidebar-primary input[type="reset"]:hover,
  74. .sidebar-primary input[type="submit"]:hover', 'background-color', '1' ),
  75. // Needs contrast against #F8F8F8 (secondary sidebar)
  76. array( '.sidebar-secondary a',
  77. 'color', '#f8f8f8' ),
  78. array( '.sidebar-secondary button,
  79. .sidebar-secondary input[type="button"],
  80. .sidebar-secondary input[type="reset"],
  81. .sidebar-secondary input[type="submit"]', 'color', '#f8f8f8' ),
  82. array( '.sidebar-secondary button:hover,
  83. .sidebar-secondary input[type="button"]:hover,
  84. .sidebar-secondary input[type="reset"]:hover,
  85. .sidebar-secondary input[type="submit"]:hover', 'border-color', '#f8f8f8' ),
  86. // Needs contrast against #FFFFFF (tertiary sidebar)
  87. array( '.sidebar-tertiary button,
  88. .sidebar-tertiary input[type="button"],
  89. .sidebar-tertiary input[type="reset"],
  90. .sidebar-tertiary input[type="submit"]', 'color', '#ffffff' ),
  91. array( '.sidebar-tertiary button:hover,
  92. .sidebar-tertiary input[type="button"]:hover,
  93. .sidebar-tertiary input[type="reset"]:hover,
  94. .sidebar-tertiary input[type="submit"]:hover,
  95. .site-footer button:hover,
  96. .site-footer input[type="button"]:hover,
  97. .site-footer input[type="reset"]:hover,
  98. .site-footer input[type="submit"]:hover', 'border-color', '#ffffff' ),
  99. array( '.sidebar-secondary button:hover,
  100. .sidebar-secondary input[type="button"]:hover,
  101. .sidebar-secondary input[type="reset"]:hover,
  102. .sidebar-secondary input[type="submit"]:hover,
  103. .sidebar-tertiary button:hover,
  104. .sidebar-tertiary input[type="button"]:hover,
  105. .sidebar-tertiary input[type="reset"]:hover,
  106. .sidebar-tertiary input[type="submit"]:hover,
  107. .site-footer button:hover,
  108. .site-footer input[type="button"]:hover,
  109. .site-footer input[type="reset"]:hover,
  110. .site-footer input[type="submit"]:hover', 'background-color', 0.25 ),
  111. ),
  112. __( 'Links and Buttons' ) );
  113. // Secondary accent color
  114. add_color_rule( 'link', '#362e77', array(
  115. // No contrast
  116. array ( '.widget-area .sidebar-primary aside',
  117. 'border-color' ),
  118. // Needs contrast against content background (opaque white)
  119. array( 'a:hover, a:focus, a:active,
  120. .blog .featured-content .entry-title a, .blog .sticky .entry-title a',
  121. 'color', '#ffffff' ),
  122. // Site title needs some contrast, but less
  123. array( 'a:hover, a:focus, a:active, .site-title a',
  124. 'color', '#ffffff', 2 ),
  125. // Category tag background needs some contrast, and a bit more than the tags
  126. array ( '.entry-footer a[rel="category tag"], .sticky .entry-meta, .blog .featured-content .entry-meta .posted-on',
  127. 'background-color', '#ffffff', 3 ),
  128. ),
  129. __( 'Accents' ) );
  130. // White text on blue background
  131. add_color_rule( 'extra', '#ffffff', array(
  132. // Contrast against blue background (txt)
  133. array( '.entry-meta a, .entry-meta span, .edit-link a, .comment-reply-link a, .entry-footer a[rel="tag"] a,
  134. .entry-footer a[rel="category tag"] a, #infinite-handle span a,
  135. .widget-area .sidebar-primary aside .widgettitle,
  136. .widget-area .sidebar-primary aside .widget-title,
  137. .widget-area .sidebar-primary aside .widget-title label,
  138. .widget-area .sidebar-primary aside,
  139. .widget-area .sidebar-primary aside a',
  140. 'color', 'txt' ),
  141. array( '.widget-area .sidebar-primary aside.widget_goodreads a', 'color', '#ffffff'),
  142. array( '.widget-area .sidebar-primary aside.jetpack_widget_social_icons ul a:hover', 'color', 'link' ),
  143. array( '.sticky .entry-meta a, .sticky .entry-meta::before, .featured-content .entry-meta .posted-on a', 'color', 'link', 10 ),
  144. ) );
  145. // Color palettes
  146. add_color_palette( array(
  147. '#271e3a',
  148. '#548854',
  149. '#0b5144',
  150. '',
  151. '',
  152. ), 'Purple & Green' );
  153. add_color_palette( array(
  154. '#c5ccd6',
  155. '#6b101c',
  156. '#213055',
  157. '',
  158. '',
  159. ), 'Navy & Burgundy' );
  160. add_color_palette( array(
  161. '#dfeae4',
  162. '#7e5f6a',
  163. '#d3a3a5',
  164. '',
  165. '',
  166. ), 'Green & Pastel Pink' );
  167. add_color_palette( array(
  168. '#dbd2c3',
  169. '#123926',
  170. '#3a6551',
  171. '',
  172. '',
  173. ), 'Beige & Green' );
  174. add_color_palette( array(
  175. '#230f2b',
  176. '#f21d41',
  177. '#c2031d',
  178. '',
  179. '',
  180. ), 'Purple & Crimson' );
  181. add_color_palette( array(
  182. '#ecebe8',
  183. '#00272b',
  184. '#e0ff4f',
  185. '',
  186. '',
  187. ), 'Neon Green & Black' );