wpcom-colors.php 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  1. <?php
  2. /* Custom Colors: Dalston */
  3. // Background Color
  4. // $config-global--color-background-default
  5. add_color_rule( 'bg', '#FFFFFF', array(
  6. // Background-color
  7. array( '.screen-reader-text:focus,
  8. body,
  9. body .widget_eu_cookie_law_widget #eu-cookie-law,
  10. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept,
  11. .main-navigation > div > ul > li > .sub-menu', 'background-color' ),
  12. // Text-color
  13. // Needs contrast against `link` (primary)
  14. array( '.a8c-posts-list-item__featured span,
  15. .a8c-posts-list__view-all,
  16. .a8c-posts-list__view-all:focus,
  17. .a8c-posts-list__view-all:hover,
  18. .button,
  19. .button:focus,
  20. .button:hover,
  21. .entry .entry-content .wp-block-media-text,
  22. .has-focus.a8c-posts-list__view-all,
  23. .has-focus.button,
  24. .has-focus.wp-block-button__link,
  25. .has-focus.wp-block-file__button,
  26. .sticky-post,
  27. .wp-block-button__link,
  28. .wp-block-button__link:focus,
  29. .wp-block-button__link:hover,
  30. .wp-block-file .wp-block-file__button,
  31. .wp-block-file a.wp-block-file__button:active,
  32. .wp-block-file a.wp-block-file__button:focus,
  33. .wp-block-file a.wp-block-file__button:hover,
  34. .wp-block-file a.wp-block-file__button:visited,
  35. .wp-block-file__button,
  36. .wp-block-file__button:focus,
  37. .wp-block-file__button:hover,
  38. .wp-block-pullquote.is-style-solid-color,
  39. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
  40. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus,
  41. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover,
  42. body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept,
  43. body .widget_eu_cookie_law_widget #eu-cookie-law.negative,
  44. button,
  45. button.has-focus,
  46. button:focus,
  47. button:hover,
  48. button[data-load-more-btn],
  49. input.has-focus[type="submit"],
  50. input:focus[type="submit"],
  51. input:hover[type="submit"],
  52. input[type="submit"],
  53. .site-header .main-navigation > div > ul > li.current-menu-item li > a,
  54. .site-header .main-navigation > div > ul > li.focus li > a,
  55. .site-header .main-navigation > div > ul > li:hover li > a', 'color', 'link' ),
  56. // Border-color
  57. array( '.entry .entry-content .wp-block-media-text.is-style-inset-borders:before', 'border-color' ),
  58. /**
  59. * Utility Classes
  60. */
  61. // Text-color
  62. // Needs contrast against `link` (primary)
  63. array( '.has-primary-background-color[class]', 'color', 'link' ),
  64. // Text-color
  65. // Needs contrast against `fg1` (secondary)
  66. array( '.has-secondary-background-color[class]', 'color', 'fg1' ),
  67. // Text-color
  68. // Needs contrast against `txt` (foreground)
  69. array( '.has-foreground-background-color[class],
  70. .has-foreground-dark-background-color[class],
  71. .has-foreground-light-background-color[class]', 'color', 'txt', 12 ),
  72. // Text-color
  73. // Needs contrast against `txt` (background)
  74. array( '.has-background-color[class],
  75. .has-background-dark-color[class],
  76. .has-background-light-color[class],
  77. .has-background-background-color[class],
  78. .has-background-dark-background-color[class],
  79. .has-background-light-background-color[class]', 'color', 'bg', 12 ),
  80. // Background-color
  81. array( '.has-background-background-color[class]', 'background-color' ),
  82. // Background-color darkened
  83. array( '.has-background-dark-background-color[class]', 'background-color', '-1' ),
  84. // Background-color lightened
  85. array( '.has-background-light-background-color[class]', 'background-color', '+1' ),
  86. ), __( 'Background Color' ) );
  87. // Link Color
  88. // $config-global--color-primary-default
  89. add_color_rule( 'link', '#0073AA', array(
  90. // Background-color
  91. array( '.a8c-posts-list-item__featured span,
  92. .a8c-posts-list__view-all,
  93. .button,
  94. .has-primary-background-color[class],
  95. .sticky-post,
  96. .wp-block-button__link,
  97. .wp-block-file .wp-block-file__button,
  98. .wp-block-file__button,
  99. .wp-block-pullquote.is-style-solid-color,
  100. body .widget_eu_cookie_law_widget #eu-cookie-law input.accept,
  101. button,
  102. button[data-load-more-btn],
  103. input[type="submit"],
  104. .site-header .main-navigation > div > ul > li.current-menu-item li > a,
  105. .site-header .main-navigation > div > ul > li.focus li > a,
  106. .site-header .main-navigation > div > ul > li:hover li > a', 'background-color' ),
  107. // Text-color
  108. // Needs contrast against `bg`
  109. array( '.a8c-posts-list-item__featured span,
  110. .has-primary-color[class],
  111. .main-navigation a,
  112. .main-navigation a:link,
  113. .main-navigation a:visited,
  114. .site-title a:hover,
  115. .social-navigation a:hover,
  116. .sticky-post,
  117. .wp-block-button.is-style-outline .wp-block-button__link,
  118. .wp-block-button.is-style-outline .wp-block-button__link:active,
  119. .wp-block-button.is-style-outline.wp-block-button__link,
  120. .wp-block-button.is-style-outline.wp-block-button__link:active,
  121. .wp-block-newspack-blocks-homepage-articles article .entry-title a,
  122. a', 'color', 'bg' ),
  123. // Border color left
  124. // Needs contrast against `bg`
  125. array( '.wp-block-quote', 'border-left-color', 'bg' ),
  126. // Border color right
  127. // Needs contrast against `bg`
  128. array( '.wp-block-quote[style*="text-align: right"],
  129. .wp-block-quote[style*="text-align:right"]', 'border-right-color', 'bg' ),
  130. // Border color bottom
  131. // Needs contrast against `bg`
  132. array( '.site-header .main-navigation > div > ul > li.current-menu-item > ul:before,
  133. .site-header .main-navigation > div > ul > li.focus > ul:before,
  134. .site-header .main-navigation > div > ul > li:hover > ul:before', 'border-bottom-color', 'bg' ),
  135. /**
  136. * Utility Classes
  137. */
  138. // Background-color
  139. array( '.has-primary-background-color[class]', 'background-color' ),
  140. // Text-color
  141. // Needs contrast against `bg`
  142. array( '.has-primary-color[class]', 'color', 'bg' ),
  143. ), __( 'Link Color' ) );
  144. // Text Color
  145. // $config-global--color-foreground-default
  146. add_color_rule( 'txt', '#1e1e1e', array(
  147. // Text-color
  148. // Needs contrast against `bg` with more contrast
  149. array( '.comment-meta .comment-metadata,
  150. .main-navigation,
  151. .screen-reader-text:focus,
  152. .wp-block-code,
  153. .wp-block-code pre,
  154. .wp-block-pullquote,
  155. body,
  156. body .widget_eu_cookie_law_widget #eu-cookie-law,
  157. body .widget_eu_cookie_law_widget #eu-cookie-law.negative input.accept,
  158. input[type="color"],
  159. input[type="color"]:focus,
  160. input[type="date"],
  161. input[type="date"]:focus,
  162. input[type="datetime"],
  163. input[type="datetime"]:focus,
  164. input[type="datetime-local"],
  165. input[type="datetime-local"]:focus,
  166. input[type="email"],
  167. input[type="email"]:focus,
  168. input[type="month"],
  169. input[type="month"]:focus,
  170. input[type="number"],
  171. input[type="number"]:focus,
  172. input[type="password"],
  173. input[type="password"]:focus,
  174. input[type="range"],
  175. input[type="range"]:focus,
  176. input[type="search"],
  177. input[type="search"]:focus,
  178. input[type="tel"],
  179. input[type="tel"]:focus,
  180. input[type="text"],
  181. input[type="text"]:focus,
  182. input[type="time"],
  183. input[type="time"]:focus,
  184. input[type="url"],
  185. input[type="url"]:focus,
  186. input[type="week"],
  187. input[type="week"]:focus,
  188. textarea,
  189. textarea:focus', 'color', 'bg', 7 ),
  190. // Background-color
  191. // Needs contrast against `bg` with more contrast
  192. array( 'body .widget_eu_cookie_law_widget #eu-cookie-law.negative', 'background-color', 'bg', 7 ),
  193. /**
  194. * Utility Classes
  195. */
  196. // Foreground
  197. // Needs contrast against `bg`
  198. array( '.has-foreground-color[class]', 'color', 'bg' ),
  199. array( '.has-foreground-background-color[class]', 'background-color' ),
  200. // Text-color darkened
  201. array( '.has-foreground-dark-color[class]', 'color', '-1' ),
  202. // Background-color darkened
  203. array( '.has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  204. // Text-color brightened
  205. array( '.has-foreground-light-color[class]', 'color', '+2' ),
  206. // Background-color brightened
  207. array( '.has-foreground-light-background-color[class]', 'background-color', '+2' ),
  208. ), __( 'Text Color' ) );
  209. // Accent Color
  210. // $config-global--color-secondary-default
  211. add_color_rule( 'fg1', '#0d1b24', array(
  212. /**
  213. * Utility Classes
  214. */
  215. // Text-color
  216. // Needs contrast against `bg`
  217. array( '.has-secondary-color[class]', 'color', 'bg' ),
  218. // Background-color
  219. array( '.has-secondary-background-color[class]', 'background-color' ),
  220. ), __( 'Secondary Color' ) );