Get WordPress

Make WordPress Core

source: branches/5.0/src/wp-content/themes/twentynineteen/inc/color-patterns.php @ 43892

Last change on this file since 43892 was 43892, checked in by allancole, 6 years ago

Updating Twenty Nineteen, our new default theme for 2019, set for 5.0.

This update applies the following changes:

  • Improve menu UI to support keyboard, click and touch interactions
  • Improve variable scoping and js performance in menu interaction javascript
  • Improve custom-colors for selected text, buttons and menu hover styles
  • Improve margins structure for more consistency between editor and frontend
  • Improve discussion avatars for simpler wording and better performance
  • Improve fonts in list widgets and list blocks
  • Improve comment responsive spacing and avatar display
  • Improve various block styles to make them consistent between the editor and frontend
  • Add tabbed browsing support for ie11
  • Add backwards compatibility support for older versions of WordPress
  • Add fallback styles for older versions of WP where Gutenberg is activated and then deactivated (backwards compatibility)
  • Add sizes attribute for featured images to improve responsive performance
  • Add focus-within polyfill
  • Add a footer menu for secondary page links
  • Fix editor styles to prevent conflicts with plugins that add meta boxes to the editor
  • Fix columns block issues on small screens
  • Fix empty-space font text cursor issue in Gutenberg editor
  • Fix RTL floating styles so that left/right floats are honored
  • Fix cover image block margins/padding
  • Fix invalid rgba style
  • Fix php warning when returning attributes
  • Fix gallery widget margins to improve gallery grids
  • Fix .entry-content selectors to prevent shortcodes, plugins and other unknown content from breaking the layout
  • Remove translation escaping to follow code standards in previous default themes
  • Remove custom color output in the fronten header when default color is selected
  • Remove fly-out sub-sub-sub-menu behavior on desktop to prevent sub-menus from falling off the screen
  • General code clean up and coding standards improvements

Initial development occurred on GitHub. See: ​https://github.com/WordPress/twentynineteen

Props allancole, karmatosed, kjellr, yingling017, mrasharirfan, milana_cap, fabiankaegy, westonruter, aaronjorbin, netweb, b-07, khleomix, blowery, dereksmart, jasmussen, audrasjb, nielslange, mmaumio, dimadin, joyously, anevins12, peterwilsoncc, dannycooper, icaleb, siriokun, technosiren, travel_girl, azchughtai, ianbelanger, nadim1992, ismailelkorchi, nativeinside, chetan200891, icaleb, grapplerulrich, ocean90, joshfeck, frankew, abdulwahab610, mendezcode, eliorivero, melchoyce, joen, laurelfulford, mdawaffe, kraftbj, dsmart, mukeshpanchal27, burhandodhy, crunnells, Ismail-elkorchi, aryaprakasa, @tlxo, @themeroots, @whizbangik, @yingles, @youthkee, @brentswisher, @smy315, @ahmadawais, @desi-developer.
File size: 9.3 KB
Line 
1<?php
2/**
3 * Twenty Nineteen: Color Patterns
4 *
5 * @package WordPress
6 * @subpackage TwentyNineteen
7 * @since 1.0
8 */
9
10/**
11 * Generate the CSS for the current custom color scheme.
12 */
13function twentynineteen_custom_colors_css() {
14
15        if ( 'default' === get_theme_mod( 'colorscheme', 'default' ) ) {
16                $primary_color = 199;
17        } else {
18                $primary_color = absint( get_theme_mod( 'colorscheme_primary_hue', 199 ) );
19        }
20
21        /**
22         * Filter Twenty Nineteen default saturation level.
23         *
24         * @since Twenty Nineteen 1.0
25         *
26         * @param int $saturation Color saturation level.
27         */
28
29        $saturation          = absint( apply_filters( 'twentynineteen_custom_colors_saturation', 100 ) );
30        $saturation          = $saturation . '%';
31
32        $lightness           = absint( apply_filters( 'twentynineteen_custom_colors_lightness', 33 ) );
33        $lightness           = $lightness . '%';
34
35        $lightness_hover     = absint( apply_filters( 'twentynineteen_custom_colors_lightness_hover', 23 ) );
36        $lightness_hover     = $lightness_hover . '%';
37
38        $lightness_selection = absint( apply_filters( 'twentynineteen_custom_colors_lightness_selection', 90 ) );
39        $lightness_selection = $lightness_selection . '%';
40
41        $theme_css = '
42                /*
43                 * Set background for:
44                 * - featured image :before
45                 * - featured image :before
46                 * - post thumbmail :before
47                 * - post thumbmail :before
48                 * - Submenu
49                 * - Sticky Post
50                 * - buttons
51                 * - WP Block Button
52                 * - Blocks
53                 */
54                .image-filters-enabled .site-header.featured-image .site-featured-image:before,
55                .image-filters-enabled .site-header.featured-image .site-featured-image:after,
56                .image-filters-enabled .entry .post-thumbnail:before,
57                .image-filters-enabled .entry .post-thumbnail:after,
58                .main-navigation .sub-menu,
59                .sticky-post,
60                .entry .entry-content .wp-block-button .wp-block-button__link,
61                .entry .button, button, input[type="button"], input[type="reset"], input[type="submit"],
62                .entry .entry-content > .has-primary-background-color,
63                .entry .entry-content > *[class^="wp-block-"].has-primary-background-color,
64                .entry .entry-content > *[class^="wp-block-"] .has-primary-background-color,
65                .entry .entry-content > *[class^="wp-block-"].is-style-solid-color,
66                .entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-background-color,
67                .entry .entry-content .wp-block-file .wp-block-file__button {
68                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
69                }
70
71                /*
72                 * Set Color for:
73                 * - all links
74                 * - main navigation links
75                 * - Post navigation links
76                 * - Post entry meta hover
77                 * - Post entry header more-link hover
78                 * - main navigation svg
79                 * - comment navigation
80                 * - Comment edit link hover
81                 * - Site Footer Link hover
82                 * - Widget links
83                 */
84                a,
85                a:visited,
86                .main-navigation .main-menu > li,
87                .main-navigation ul.main-menu > li > a,
88                .post-navigation .post-title,
89                .entry .entry-meta a:hover,
90                .entry .entry-footer a:hover,
91                .entry .entry-content .more-link:hover,
92                .main-navigation .main-menu > li > a + svg,
93                .comment .comment-metadata > a:hover,
94                .comment .comment-metadata .comment-edit-link:hover,
95                #colophon .site-info a:hover,
96                .widget a,
97                .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
98                .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
99                .entry .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
100                .entry .entry-content > *[class^="wp-block-"] .has-primary-color,
101                .entry .entry-content > *[class^="wp-block-"].is-style-solid-color .has-primary-color {
102                        color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
103                }
104
105                /*
106                 * Set left border color for:
107                 * wp block quote
108                 */
109                blockquote,
110                .entry .entry-content blockquote,
111                .entry .entry-content .wp-block-quote:not(.is-large),
112                .entry .entry-content .wp-block-quote:not(.is-style-large) {
113                        border-left-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
114                }
115
116                /*
117                 * Set border color for:
118                 * :focus
119                 */
120                input[type="text"]:focus,
121                input[type="email"]:focus,
122                input[type="url"]:focus,
123                input[type="password"]:focus,
124                input[type="search"]:focus,
125                input[type="number"]:focus,
126                input[type="tel"]:focus,
127                input[type="range"]:focus,
128                input[type="date"]:focus,
129                input[type="month"]:focus,
130                input[type="week"]:focus,
131                input[type="time"]:focus,
132                input[type="datetime"]:focus,
133                input[type="datetime-local"]:focus,
134                input[type="color"]:focus,
135                textarea:focus {
136                        border-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
137                }
138
139                .gallery-item > div > a:focus {
140                        box-shadow: 0 0 0 2px hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
141                }
142
143                /* Hover colors */
144                a:hover, a:active,
145                .main-navigation .main-menu > li > a:hover,
146                .main-navigation .main-menu > li > a:hover + svg,
147                .post-navigation .nav-links a:hover .post-title,
148                .author-bio .author-description .author-link:hover,
149                .comment .comment-author .fn a:hover,
150                .comment-reply-link:hover,
151                .comment-navigation .nav-previous a:hover,
152                .comment-navigation .nav-next a:hover,
153                #cancel-comment-reply-link:hover,
154                .widget a:hover {
155                        color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
156                }
157
158                .main-navigation .sub-menu > li > a:hover,
159                .main-navigation .sub-menu > li > a:focus,
160                .main-navigation .sub-menu > li > a:hover:after,
161                .main-navigation .sub-menu > li > a:focus:after,
162                .main-navigation .sub-menu > li > .menu-item-link-return:hover,
163                .main-navigation .sub-menu > li > .menu-item-link-return:focus,
164                .main-navigation .sub-menu > li > a:not(.submenu-expand):hover,
165                .main-navigation .sub-menu > li > a:not(.submenu-expand):focus {
166                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
167                }
168
169                /* Text selection colors */
170                ::selection {
171                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */
172                }
173                ::-moz-selection {
174                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_selection . ' ); /* base: #005177; */
175                }';
176
177        $editor_css = '
178                /*
179                 * Set colors for:
180                 * - links
181                 * - blockquote
182                 * - pullquote (solid color)
183                 * - buttons
184                 */
185                .editor-block-list__layout .editor-block-list__block a,
186                .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
187                .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:hover .wp-block-button__link:not(.has-text-color),
188                .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:focus .wp-block-button__link:not(.has-text-color),
189                .editor-block-list__layout .editor-block-list__block .wp-block-button.is-style-outline:active .wp-block-button__link:not(.has-text-color) {
190                        color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
191                }
192
193                .editor-block-list__layout .editor-block-list__block .wp-block-quote:not(.is-large):not(.is-style-large),
194                .editor-styles-wrapper .editor-block-list__layout .wp-block-freeform blockquote {
195                        border-left: 2px solid hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
196                }
197
198                .editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color:not(.has-background-color) {
199                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
200                }
201
202                .editor-block-list__layout .editor-block-list__block .wp-block-file .wp-block-file__button,
203                .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link,
204                .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
205                .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
206                .editor-block-list__layout .editor-block-list__block .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
207                        background-color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness . ' ); /* base: #0073a8; */
208                }
209
210                /* Hover colors */
211                .editor-block-list__layout .editor-block-list__block a:hover,
212                .editor-block-list__layout .editor-block-list__block a:active {
213                        color: hsl( ' . $primary_color . ', ' . $saturation . ', ' . $lightness_hover . ' ); /* base: #005177; */
214                }
215
216                /* Do not overwrite solid color pullquote or cover links */
217                .editor-block-list__layout .editor-block-list__block .wp-block-pullquote.is-style-solid-color a,
218                .editor-block-list__layout .editor-block-list__block .wp-block-cover a {
219                        color: inherit;
220                }
221                ';
222        $css = '';
223        if ( function_exists( 'register_block_type' ) && is_admin() ) {
224                $css .= $editor_css;
225        } else if ( ! is_admin() ) {
226                $css = $theme_css;
227        }
228
229        /**
230         * Filters Twenty Nineteen custom colors CSS.
231         *
232         * @since Twenty Nineteen 1.0
233         *
234         * @param string $css           Base theme colors CSS.
235         * @param int    $primary_color The user's selected color hue.
236         * @param string $saturation    Filtered theme color saturation level.
237         */
238        return apply_filters( 'twentynineteen_custom_colors_css', $css, $primary_color, $saturation );
239}
Note: See TracBrowser for help on using the repository browser.