Make WordPress Core

Ticket #29988: 29988.js.2.patch

File 29988.js.2.patch, 26.4 KB (added by bradyvercher, 9 years ago)
  • src/wp-content/themes/twentyfifteen/css/admin-custom-header.css

    diff --git src/wp-content/themes/twentyfifteen/css/admin-custom-header.css src/wp-content/themes/twentyfifteen/css/admin-custom-header.css
    index b5474d1..878b2c3 100644
    Description: Used to style the header image displayed on the Appearance > Header 
    3535}
    3636
    3737/* Hide the header text color option */
    38 .appearance_page_custom-header tr.displaying-header-text {
     38.appearance_page_custom-header tr.displaying-header-text,
     39.appearance_page_custom-header tr.displaying-header-text td,
     40.appearance_page_custom-header tr.displaying-header-text th {
    3941        display: none;
    4042}
    4143
  • src/wp-content/themes/twentyfifteen/inc/customizer.php

    diff --git src/wp-content/themes/twentyfifteen/inc/customizer.php src/wp-content/themes/twentyfifteen/inc/customizer.php
    index 4b9c2c7..99bc051 100644
    function twentyfifteen_customize_register( $wp_customize ) { 
    1919
    2020        $wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
    2121        $wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
    22         $wp_customize->get_setting( 'background_color' )->transport = 'refresh';
    2322
    2423        // Add color scheme setting and control.
    2524        $wp_customize->add_setting( 'color_scheme', array(
    2625                'default'           => 'default',
    2726                'sanitize_callback' => 'twentyfifteen_sanitize_color_scheme',
     27                'transport'         => 'postMessage',
     28        ) );
     29
     30        $wp_customize->add_setting( 'color_scheme_css', array(
     31                'default'           => '',
     32                'sanitize_callback' => 'esc_html',
     33                'transport'         => 'postMessage',
    2834        ) );
    2935
    3036        $wp_customize->add_control( 'color_scheme', array(
    function twentyfifteen_customize_register( $wp_customize ) { 
    3945        $wp_customize->add_setting( 'sidebar_textcolor', array(
    4046                'default'           => $color_scheme[4],
    4147                'sanitize_callback' => 'sanitize_hex_color',
     48                'transport'         => 'postMessage',
    4249        ) );
    4350
    4451        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_textcolor', array(
    function twentyfifteen_customize_register( $wp_customize ) { 
    5461        $wp_customize->add_setting( 'header_background_color', array(
    5562                'default'           => $color_scheme[1],
    5663                'sanitize_callback' => 'sanitize_hex_color',
     64                'transport'         => 'postMessage',
    5765        ) );
    5866
    5967        $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_background_color', array(
    endif; // twentyfifteen_sanitize_color_scheme 
    222230 */
    223231function twentyfifteen_color_scheme_css() {
    224232        $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
     233        $color_scheme_css    = get_theme_mod( 'color_scheme_css', '' );
    225234
    226235        // Don't do anything if the default color scheme is selected.
    227         if ( 'default' === $color_scheme_option ) {
     236        if ( 'default' === $color_scheme_option || empty( $color_scheme_css ) ) {
    228237                return;
    229238        }
    230239
    231         // If we get this far, we have custom styles. Let's do this.
    232         $color_scheme = twentyfifteen_get_color_scheme();
     240        wp_add_inline_style( 'twentyfifteen-style', $color_scheme_css );
     241}
     242add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    233243
    234         // Convert main and sidebar text hex color to rgba.
    235         $color_main_text_rgb        = twentyfifteen_hex2rgb( $color_scheme[3] );
    236         $color_sidebar_link_rgb     = twentyfifteen_hex2rgb( $color_scheme[4] );
    237 
    238         $color_background           = $color_scheme[0];
    239         $color_sidebar_background   = $color_scheme[1];
    240         $color_box_background       = $color_scheme[2];
    241         $color_main_text            = $color_scheme[3];
    242         $color_secondary_text       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_main_text_rgb );
    243         $color_border               = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_main_text_rgb );
    244         $color_border_focus         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_main_text_rgb );
    245         $color_sidebar_link         = $color_scheme[4];
    246         $color_sidebar_text         = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $color_sidebar_link_rgb );
    247         $color_sidebar_border       = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $color_sidebar_link_rgb );
    248         $color_sidebar_border_focus = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $color_sidebar_link_rgb );
    249         $color_meta_box             = $color_scheme[5];
    250 
    251         $css = '
    252                 /* Color Scheme */
    253 
    254                 /* Background Color */
    255                 body {
    256                         background-color: %1$s;
    257                 }
     244/**
     245 * Binds JS listener to make Customizer color_scheme control.
     246 * Passes color scheme data as colorScheme global.
     247 *
     248 * @since Twenty Fifteen 1.0
     249 */
     250function twentyfifteen_customize_control_js() {
     251        wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true  );
     252        wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
     253}
     254add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    258255
    259                 /* Sidebar Background Color */
    260                 body:before,
    261                 .site-header {
    262                         background-color: %2$s;
    263                 }
     256/**
     257 * Binds JS handlers to make Customizer preview reload changes asynchronously.
     258 *
     259 * @since Twenty Fifteen 1.0
     260 */
     261function twentyfifteen_customize_preview_js() {
     262        wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
     263}
     264add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
     265
     266/**
     267 * Output an Underscore template for generating CSS for the color scheme.
     268 *
     269 * @since Twenty Fifteen 1.0
     270 */
     271function twentyfifteen_color_scheme_css_template() {
     272        ?>
     273        <script type="text/html" id="tmpl-twentyfifteen-color-scheme">
     274        /* Color Scheme */
     275
     276        /* Background Color */
     277        body {
     278                background-color: {{ data.background_color }};
     279        }
     280
     281        /* Sidebar Background Color */
     282        body:before,
     283        .site-header {
     284                background-color: {{ data.header_background_color }};
     285        }
     286
     287        /* Box Background Color */
     288        .post-navigation,
     289        .pagination,
     290        .secondary,
     291        .site-footer,
     292        .hentry,
     293        .page-header,
     294        .page-content,
     295        .comments-area {
     296                background-color: {{ data.box_background_color }};
     297        }
     298
     299        /* Box Background Color */
     300        button,
     301        input[type="button"],
     302        input[type="reset"],
     303        input[type="submit"],
     304        .pagination .prev,
     305        .pagination .next,
     306        .pagination .prev:before,
     307        .pagination .next:before,
     308        .widget_calendar tbody a,
     309        .widget_calendar tbody a:hover,
     310        .widget_calendar tbody a:focus,
     311        .entry-content .page-links a,
     312        .entry-content .page-links a:hover,
     313        .entry-content .page-links a:focus,
     314        .sticky-post {
     315                color: {{ data.box_background_color }};
     316        }
     317
     318        /* Main Text Color */
     319        button,
     320        input[type="button"],
     321        input[type="reset"],
     322        input[type="submit"],
     323        .pagination .prev,
     324        .pagination .next,
     325        .widget_calendar tbody a,
     326        .page-links a,
     327        .sticky-post {
     328                background-color: {{ data.textcolor }};
     329        }
     330
     331        /* Main Text Color */
     332        body,
     333        blockquote cite,
     334        blockquote small,
     335        a,
     336        .dropdown-toggle:after,
     337        .image-navigation a:hover,
     338        .image-navigation a:focus,
     339        .comment-navigation a:hover,
     340        .comment-navigation a:focus,
     341        .widget-title,
     342        .entry-footer a:hover,
     343        .entry-footer a:focus,
     344        .comment-metadata a:hover,
     345        .comment-metadata a:focus,
     346        .pingback .edit-link a:hover,
     347        .pingback .edit-link a:focus,
     348        .comment-list .reply a:hover,
     349        .comment-list .reply a:focus,
     350        .site-info a:hover,
     351        .site-info a:focus {
     352                color: {{ data.textcolor }};
     353        }
     354
     355        /* Main Text Color */
     356        .entry-content a,
     357        .entry-summary a,
     358        .page-content a,
     359        .comment-content a,
     360        .pingback .comment-body > a,
     361        .author-description a,
     362        .taxonomy-description a,
     363        .textwidget a,
     364        .entry-footer a:hover,
     365        .comment-metadata a:hover,
     366        .pingback .edit-link a:hover,
     367        .comment-list .reply a:hover,
     368        .site-info a:hover {
     369                border-color: {{ data.textcolor }};
     370        }
     371
     372        /* Secondary Text Color */
     373        button:hover,
     374        button:focus,
     375        input[type="button"]:hover,
     376        input[type="button"]:focus,
     377        input[type="reset"]:hover,
     378        input[type="reset"]:focus,
     379        input[type="submit"]:hover,
     380        input[type="submit"]:focus,
     381        .pagination .prev:hover,
     382        .pagination .prev:focus,
     383        .pagination .next:hover,
     384        .pagination .next:focus,
     385        .widget_calendar tbody a:hover,
     386        .widget_calendar tbody a:focus,
     387        .page-links a:hover,
     388        .page-links a:focus {
     389                background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     390                background-color: {{ data.secondary_textcolor }};
     391        }
     392
     393        /* Secondary Text Color */
     394        blockquote,
     395        a:hover,
     396        a:focus,
     397        .main-navigation .menu-item-description,
     398        .post-navigation .meta-nav,
     399        .post-navigation a:hover .post-title,
     400        .post-navigation a:focus .post-title,
     401        .image-navigation,
     402        .image-navigation a,
     403        .comment-navigation,
     404        .comment-navigation a,
     405        .widget,
     406        .author-heading,
     407        .entry-footer,
     408        .entry-footer a,
     409        .taxonomy-description,
     410        .page-links > .page-links-title,
     411        .entry-caption,
     412        .comment-author,
     413        .comment-metadata,
     414        .comment-metadata a,
     415        .pingback .edit-link,
     416        .pingback .edit-link a,
     417        .post-password-form label,
     418        .comment-form label,
     419        .comment-notes,
     420        .comment-awaiting-moderation,
     421        .logged-in-as,
     422        .form-allowed-tags,
     423        .no-comments,
     424        .site-info,
     425        .site-info a,
     426        .wp-caption-text,
     427        .gallery-caption,
     428        .comment-list .reply a {
     429                color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     430                color: {{ data.secondary_textcolor }};
     431        }
     432
     433        /* Secondary Text Color */
     434        blockquote,
     435        .logged-in-as a:hover,
     436        .comment-author a:hover {
     437                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     438                border-color: {{ data.secondary_textcolor }};
     439        }
     440
     441        /* Border Color */
     442        hr,
     443        .dropdown-toggle:hover,
     444        .dropdown-toggle:focus {
     445                background-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     446                background-color: {{ data.border_color }};
     447        }
     448
     449        /* Border Color */
     450        pre,
     451        abbr[title],
     452        table,
     453        th,
     454        td,
     455        input,
     456        textarea,
     457        .main-navigation ul,
     458        .main-navigation li,
     459        .post-navigation,
     460        .pagination,
     461        .comment-navigation,
     462        .widget li,
     463        .widget_categories .children,
     464        .widget_nav_menu .sub-menu,
     465        .widget_pages .children,
     466        .site-header,
     467        .site-footer,
     468        .hentry .hentry,
     469        .author-info,
     470        .entry-content .page-links a,
     471        .page-links > span,
     472        .page-header,
     473        .comments-area,
     474        .comment-list .comment-respond,
     475        .comment-list article,
     476        .comment-list .pingback,
     477        .comment-list .trackback,
     478        .comment-list .reply a,
     479        .no-comments {
     480                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     481                border-color: {{ data.border_color }};
     482        }
     483
     484        .post-navigation .nav-previous:not(.has-post-thumbnail) .nav-next:not(.has-post-thumbnail) {
     485                border-color: {{ data.border_color }};
     486        }
     487
     488        /* Border Focus Color */
     489        a:focus,
     490        button:focus,
     491        input:focus {
     492                outline-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     493                outline-color: {{ data.border_focus_color }};
     494        }
     495
     496        input:focus,
     497        textarea:focus {
     498                border-color: {{ data.textcolor }}; /* Fallback for IE7 and IE8 */
     499                border-color: {{ data.border_focus_color }};
     500        }
     501
     502        /* Sidebar Link Color */
     503        .secondary-toggle:before {
     504                color: {{ data.sidebar_textcolor }};
     505        }
     506
     507        .site-title a,
     508        .site-description {
     509                color: {{ data.sidebar_textcolor }};
     510        }
     511
     512        /* Sidebar Text Color */
     513        .site-title a:hover,
     514        .site-title a:focus {
     515                color: {{ data.sidebar_textcolor2 }};
     516        }
     517
     518        /* Sidebar Border Color */
     519        .secondary-toggle {
     520                border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     521                border-color: {{ data.sidebar_border_color }};
     522        }
     523
     524        /* Sidebar Border Focus Color */
     525        .secondary-toggle:hover,
     526        .secondary-toggle:focus {
     527                border-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     528                border-color: {{ data.sidebar_border_focus_color }};
     529        }
     530
     531        .site-title a {
     532                outline-color: {{ data.sidebar_textcolor }}; /* Fallback for IE7 and IE8 */
     533                outline-color: {{ data.sidebar_border_focus_color }};
     534        }
     535
     536        /* Meta Background Color */
     537        .entry-footer {
     538                background-color: {{ data.meta_box_background_color }};
     539        }
    264540
    265                 /* Box Background Color */
    266                 .post-navigation,
    267                 .pagination,
    268                 .secondary,
    269                 .site-footer,
    270                 .hentry,
    271                 .page-header,
    272                 .page-content,
    273                 .comments-area {
    274                         background-color: %3$s;
     541        @media screen and (min-width: 38.75em) {
     542                /* Main Text Color */
     543                .page-header {
     544                        border-color: {{ data.textcolor }};
    275545                }
     546        }
    276547
    277                 /* Box Background Color */
    278                 button,
    279                 input[type="button"],
    280                 input[type="reset"],
    281                 input[type="submit"],
    282                 .pagination .prev,
    283                 .pagination .next,
    284                 .pagination .prev:before,
    285                 .pagination .next:before,
    286                 .widget_calendar tbody a,
    287                 .widget_calendar tbody a:hover,
    288                 .widget_calendar tbody a:focus,
    289                 .entry-content .page-links a,
    290                 .entry-content .page-links a:hover,
    291                 .entry-content .page-links a:focus,
    292                 .sticky-post {
    293                         color: %3$s;
     548        @media screen and (min-width: 59.6875em) {
     549                /* Make sure its transparent on desktop */
     550                .site-header,
     551                .secondary {
     552                        background-color: transparent;
    294553                }
    295554
    296                 /* Main Text Color */
    297                 button,
    298                 input[type="button"],
    299                 input[type="reset"],
    300                 input[type="submit"],
    301                 .pagination .prev,
    302                 .pagination .next,
     555                /* Sidebar Background Color */
     556                .widget button,
     557                .widget input[type="button"],
     558                .widget input[type="reset"],
     559                .widget input[type="submit"],
    303560                .widget_calendar tbody a,
    304                 .page-links a,
    305                 .sticky-post {
    306                         background-color: %4$s;
     561                .widget_calendar tbody a:hover,
     562                .widget_calendar tbody a:focus {
     563                        color: {{ data.header_background_color }};
    307564                }
    308565
    309                 /* Main Text Color */
    310                 body,
    311                 blockquote cite,
    312                 blockquote small,
    313                 a,
     566                /* Sidebar Link Color */
     567                .secondary a,
    314568                .dropdown-toggle:after,
    315                 .image-navigation a:hover,
    316                 .image-navigation a:focus,
    317                 .comment-navigation a:hover,
    318                 .comment-navigation a:focus,
    319569                .widget-title,
    320                 .entry-footer a:hover,
    321                 .entry-footer a:focus,
    322                 .comment-metadata a:hover,
    323                 .comment-metadata a:focus,
    324                 .pingback .edit-link a:hover,
    325                 .pingback .edit-link a:focus,
    326                 .comment-list .reply a:hover,
    327                 .comment-list .reply a:focus,
    328                 .site-info a:hover,
    329                 .site-info a:focus {
    330                         color: %4$s;
     570                .widget blockquote cite,
     571                .widget blockquote small {
     572                        color: {{ data.sidebar_textcolor }};
    331573                }
    332574
    333                 /* Main Text Color */
    334                 .entry-content a,
    335                 .entry-summary a,
    336                 .page-content a,
    337                 .comment-content a,
    338                 .pingback .comment-body > a,
    339                 .author-description a,
    340                 .taxonomy-description a,
    341                 .textwidget a,
    342                 .entry-footer a:hover,
    343                 .comment-metadata a:hover,
    344                 .pingback .edit-link a:hover,
    345                 .comment-list .reply a:hover,
    346                 .site-info a:hover {
    347                         border-color: %4$s;
     575                .widget button,
     576                .widget input[type="button"],
     577                .widget input[type="reset"],
     578                .widget input[type="submit"],
     579                .widget_calendar tbody a {
     580                        background-color: {{ data.sidebar_textcolor }};
    348581                }
    349582
    350                 /* Secondary Text Color */
    351                 button:hover,
    352                 button:focus,
    353                 input[type="button"]:hover,
    354                 input[type="button"]:focus,
    355                 input[type="reset"]:hover,
    356                 input[type="reset"]:focus,
    357                 input[type="submit"]:hover,
    358                 input[type="submit"]:focus,
    359                 .pagination .prev:hover,
    360                 .pagination .prev:focus,
    361                 .pagination .next:hover,
    362                 .pagination .next:focus,
    363                 .widget_calendar tbody a:hover,
    364                 .widget_calendar tbody a:focus,
    365                 .page-links a:hover,
    366                 .page-links a:focus {
    367                         background-color: %4$s; /* Fallback for IE7 and IE8 */
    368                         background-color: %5$s;
     583                .textwidget a {
     584                        border-color: {{ data.sidebar_textcolor }};
    369585                }
    370586
    371                 /* Secondary Text Color */
    372                 blockquote,
    373                 a:hover,
    374                 a:focus,
     587                /* Sidebar Text Color */
     588                .secondary a:hover,
     589                .secondary a:focus,
    375590                .main-navigation .menu-item-description,
    376                 .post-navigation .meta-nav,
    377                 .post-navigation a:hover .post-title,
    378                 .post-navigation a:focus .post-title,
    379                 .image-navigation,
    380                 .image-navigation a,
    381                 .comment-navigation,
    382                 .comment-navigation a,
    383591                .widget,
    384                 .author-heading,
    385                 .entry-footer,
    386                 .entry-footer a,
    387                 .taxonomy-description,
    388                 .page-links > .page-links-title,
    389                 .entry-caption,
    390                 .comment-author,
    391                 .comment-metadata,
    392                 .comment-metadata a,
    393                 .pingback .edit-link,
    394                 .pingback .edit-link a,
    395                 .post-password-form label,
    396                 .comment-form label,
    397                 .comment-notes,
    398                 .comment-awaiting-moderation,
    399                 .logged-in-as,
    400                 .form-allowed-tags,
    401                 .no-comments,
    402                 .site-info,
    403                 .site-info a,
    404                 .wp-caption-text,
    405                 .gallery-caption,
    406                 .comment-list .reply a {
    407                         color: %4$s; /* Fallback for IE7 and IE8 */
    408                         color: %5$s;
     592                .widget blockquote,
     593                .widget .wp-caption-text,
     594                .widget .gallery-caption {
     595                        color: {{ data.sidebar_textcolor2 }};
    409596                }
    410597
    411                 /* Secondary Text Color */
    412                 blockquote,
    413                 .logged-in-as a:hover,
    414                 .comment-author a:hover {
    415                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    416                         border-color: %5$s;
     598                .widget button:hover,
     599                .widget button:focus,
     600                .widget input[type="button"]:hover,
     601                .widget input[type="button"]:focus,
     602                .widget input[type="reset"]:hover,
     603                .widget input[type="reset"]:focus,
     604                .widget input[type="submit"]:hover,
     605                .widget input[type="submit"]:focus,
     606                .widget_calendar tbody a:hover,
     607                .widget_calendar tbody a:focus {
     608                        background-color: {{ data.sidebar_textcolor2 }};
    417609                }
    418610
    419                 /* Border Color */
    420                 hr,
    421                 .dropdown-toggle:hover,
    422                 .dropdown-toggle:focus {
    423                         background-color: %4$s; /* Fallback for IE7 and IE8 */
    424                         background-color: %6$s;
     611                .widget blockquote {
     612                        border-color: {{ data.sidebar_textcolor2 }};
    425613                }
    426614
    427                 /* Border Color */
    428                 pre,
    429                 abbr[title],
    430                 table,
    431                 th,
    432                 td,
    433                 input,
    434                 textarea,
     615                /* Sidebar Border Color */
    435616                .main-navigation ul,
    436617                .main-navigation li,
    437                 .post-navigation,
    438                 .pagination,
    439                 .comment-navigation,
     618                .widget input,
     619                .widget textarea,
     620                .widget table,
     621                .widget th,
     622                .widget td,
     623                .widget pre,
    440624                .widget li,
    441625                .widget_categories .children,
    442626                .widget_nav_menu .sub-menu,
    443627                .widget_pages .children,
    444                 .site-header,
    445                 .site-footer,
    446                 .hentry + .hentry,
    447                 .author-info,
    448                 .entry-content .page-links a,
    449                 .page-links > span,
    450                 .page-header,
    451                 .comments-area,
    452                 .comment-list + .comment-respond,
    453                 .comment-list article,
    454                 .comment-list .pingback,
    455                 .comment-list .trackback,
    456                 .comment-list .reply a,
    457                 .no-comments {
    458                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    459                         border-color: %6$s;
    460                 }
    461 
    462                 .post-navigation .nav-previous:not(.has-post-thumbnail) + .nav-next:not(.has-post-thumbnail) {
    463                         border-color: %6$s;
    464                 }
    465 
    466                 /* Border Focus Color */
    467                 a:focus,
    468                 button:focus,
    469                 input:focus {
    470                         outline-color: %4$s; /* Fallback for IE7 and IE8 */
    471                         outline-color: %7$s;
     628                .widget abbr[title] {
     629                        border-color: {{ data.sidebar_border_color }};
    472630                }
    473631
    474                 input:focus,
    475                 textarea:focus {
    476                         border-color: %4$s; /* Fallback for IE7 and IE8 */
    477                         border-color: %7$s;
    478                 }
    479 
    480                 /* Sidebar Link Color */
    481                 .secondary-toggle:before {
    482                         color: %8$s;
    483                 }
    484 
    485                 .site-title a,
    486                 .site-description {
    487                         color: %8$s;
    488                 }
    489 
    490                 /* Sidebar Text Color */
    491                 .site-title a:hover,
    492                 .site-title a:focus {
    493                         color: %9$s;
    494                 }
    495 
    496                 /* Sidebar Border Color */
    497                 .secondary-toggle {
    498                         border-color: %8$s; /* Fallback for IE7 and IE8 */
    499                         border-color: %10$s;
    500                 }
    501 
    502                 /* Sidebar Border Focus Color */
    503                 .secondary-toggle:hover,
    504                 .secondary-toggle:focus {
    505                         border-color: %8$s; /* Fallback for IE7 and IE8 */
    506                         border-color: %11$s;
    507                 }
    508 
    509                 .site-title a {
    510                         outline-color: %8$s; /* Fallback for IE7 and IE8 */
    511                         outline-color: %11$s;
    512                 }
    513 
    514                 /* Meta Background Color */
    515                 .entry-footer {
    516                         background-color: %12$s;
     632                .dropdown-toggle:hover,
     633                .dropdown-toggle:focus,
     634                .widget hr {
     635                        background-color: {{ data.sidebar_border_color }};
    517636                }
    518637
    519                 @media screen and (min-width: 38.75em) {
    520                         /* Main Text Color */
    521                         .page-header {
    522                                 border-color: %4$s;
    523                         }
     638                .widget input:focus,
     639                .widget textarea:focus {
     640                        border-color: {{ data.sidebar_border_focus_color }};
    524641                }
    525642
    526                 @media screen and (min-width: 59.6875em) {
    527                         /* Make sure its transparent on desktop */
    528                         .site-header,
    529                         .secondary {
    530                                 background-color: transparent;
    531                         }
    532 
    533                         /* Sidebar Background Color */
    534                         .widget button,
    535                         .widget input[type="button"],
    536                         .widget input[type="reset"],
    537                         .widget input[type="submit"],
    538                         .widget_calendar tbody a,
    539                         .widget_calendar tbody a:hover,
    540                         .widget_calendar tbody a:focus {
    541                                 color: %2$s;
    542                         }
    543 
    544                         /* Sidebar Link Color */
    545                         .secondary a,
    546                         .dropdown-toggle:after,
    547                         .widget-title,
    548                         .widget blockquote cite,
    549                         .widget blockquote small {
    550                                 color: %8$s;
    551                         }
    552 
    553                         .widget button,
    554                         .widget input[type="button"],
    555                         .widget input[type="reset"],
    556                         .widget input[type="submit"],
    557                         .widget_calendar tbody a {
    558                                 background-color: %8$s;
    559                         }
    560 
    561                         .textwidget a {
    562                                 border-color: %8$s;
    563                         }
    564 
    565                         /* Sidebar Text Color */
    566                         .secondary a:hover,
    567                         .secondary a:focus,
    568                         .main-navigation .menu-item-description,
    569                         .widget,
    570                         .widget blockquote,
    571                         .widget .wp-caption-text,
    572                         .widget .gallery-caption {
    573                                 color: %9$s;
    574                         }
    575 
    576                         .widget button:hover,
    577                         .widget button:focus,
    578                         .widget input[type="button"]:hover,
    579                         .widget input[type="button"]:focus,
    580                         .widget input[type="reset"]:hover,
    581                         .widget input[type="reset"]:focus,
    582                         .widget input[type="submit"]:hover,
    583                         .widget input[type="submit"]:focus,
    584                         .widget_calendar tbody a:hover,
    585                         .widget_calendar tbody a:focus {
    586                                 background-color: %9$s;
    587                         }
    588 
    589                         .widget blockquote {
    590                                 border-color: %9$s;
    591                         }
    592 
    593                         /* Sidebar Border Color */
    594                         .main-navigation ul,
    595                         .main-navigation li,
    596                         .widget input,
    597                         .widget textarea,
    598                         .widget table,
    599                         .widget th,
    600                         .widget td,
    601                         .widget pre,
    602                         .widget li,
    603                         .widget_categories .children,
    604                         .widget_nav_menu .sub-menu,
    605                         .widget_pages .children,
    606                         .widget abbr[title] {
    607                                 border-color: %10$s;
    608                         }
    609 
    610                         .dropdown-toggle:hover,
    611                         .dropdown-toggle:focus,
    612                         .widget hr {
    613                                 background-color: %10$s;
    614                         }
    615 
    616                         .widget input:focus,
    617                         .widget textarea:focus {
    618                                 border-color: %11$s;
    619                         }
    620 
    621                         .sidebar a:focus,
    622                         .dropdown-toggle:focus {
    623                                 outline-color: %11$s;
    624                         }
     643                .sidebar a:focus,
     644                .dropdown-toggle:focus {
     645                        outline-color: {{ data.sidebar_border_focus_color }};
    625646                }
    626         ';
    627 
    628         wp_add_inline_style( 'twentyfifteen-style', sprintf( $css,
    629                 $color_background,
    630                 $color_sidebar_background,
    631                 $color_box_background,
    632                 $color_main_text,
    633                 $color_secondary_text,
    634                 $color_border,
    635                 $color_border_focus,
    636                 $color_sidebar_link,
    637                 $color_sidebar_text,
    638                 $color_sidebar_border,
    639                 $color_sidebar_border_focus,
    640                 $color_meta_box
    641         ) );
    642 }
    643 add_action( 'wp_enqueue_scripts', 'twentyfifteen_color_scheme_css' );
    644 
    645 /**
    646  * Binds JS listener to make Customizer color_scheme control.
    647  * Passes color scheme data as colorScheme global.
    648  *
    649  * @since Twenty Fifteen 1.0
    650  */
    651 function twentyfifteen_customize_control_js() {
    652         wp_enqueue_script( 'color-scheme-control', get_template_directory_uri() . '/js/color-scheme-control.js', array( 'customize-controls' ), '', true  );
    653         wp_localize_script( 'color-scheme-control', 'colorScheme', twentyfifteen_get_color_schemes() );
    654 }
    655 add_action( 'customize_controls_enqueue_scripts', 'twentyfifteen_customize_control_js' );
    656 
    657 /**
    658  * Binds JS handlers to make Customizer preview reload changes asynchronously.
    659  *
    660  * @since Twenty Fifteen 1.0
    661  */
    662 function twentyfifteen_customize_preview_js() {
    663         wp_enqueue_script( 'twentyfifteen-customize-preview', get_template_directory_uri() . '/js/customize-preview.js', array( 'customize-preview' ), '20141029', true );
     647        }
     648        </script>
     649        <?php
    664650}
    665 add_action( 'customize_preview_init', 'twentyfifteen_customize_preview_js' );
    666  No newline at end of file
     651add_action( 'customize_controls_print_footer_scripts', 'twentyfifteen_color_scheme_css_template' );
  • src/wp-content/themes/twentyfifteen/js/color-scheme-control.js

    diff --git src/wp-content/themes/twentyfifteen/js/color-scheme-control.js src/wp-content/themes/twentyfifteen/js/color-scheme-control.js
    index c045c40..7b0f05c 100644
     
    44 */
    55
    66( function( api ) {
     7        var cssTemplate = wp.template( 'twentyfifteen-color-scheme' ),
     8                colorSchemeKeys = [
     9                        'background_color',
     10                        'header_background_color',
     11                        'box_background_color',
     12                        'textcolor',
     13                        'sidebar_textcolor',
     14                        'meta_box_background_color'
     15                ],
     16                colorSettings = [
     17                        'background_color',
     18                        'header_background_color',
     19                        'sidebar_textcolor'
     20                ];
     21
    722        api.controlConstructor.select = api.Control.extend( {
    823                ready: function() {
    924                        if ( 'color_scheme' === this.id ) {
     
    2944                        }
    3045                }
    3146        } );
     47
     48        function getCSS() {
     49                var scheme = api( 'color_scheme' )(),
     50                        colors = _.object( colorSchemeKeys, colorScheme[ scheme ].colors );
     51
     52                // Merge in color scheme overrides.
     53                _.each( colorSettings, function( setting ) {
     54                        colors[ setting ] = api( setting )();
     55                });
     56
     57                // Add additional colors.
     58                colors['secondary_textcolor'] = Color( colors.textcolor ).toCSS( 'rgba', 0.7 );
     59                colors['border_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.1 );
     60                colors['border_focus_color'] = Color( colors.textcolor ).toCSS( 'rgba', 0.3 );
     61                colors['sidebar_textcolor2'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.7 );
     62                colors['sidebar_border_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.1 );
     63                colors['sidebar_border_focus_color'] = Color( colors.sidebar_textcolor ).toCSS( 'rgba', 0.3 );
     64
     65                return cssTemplate( colors );
     66        }
     67
     68        // Update the CSS whenever a color setting is changed.
     69        _.each( colorSettings, function( setting ) {
     70                api( setting, function( setting ) {
     71                        setting.bind( _.throttle( function( value ) {
     72                                api( 'color_scheme_css' ).set( getCSS() );
     73                        }, 250 ) );
     74                } );
     75        } );
    3276} )( wp.customize );
  • src/wp-content/themes/twentyfifteen/js/customize-preview.js

    diff --git src/wp-content/themes/twentyfifteen/js/customize-preview.js src/wp-content/themes/twentyfifteen/js/customize-preview.js
    index 7bfbf5d..5add8eb 100644
     
    33 */
    44
    55( function( $ ) {
     6        var $style = $( '#twentyfifteen-color-scheme-css' );
     7
     8        if ( ! $style.length ) {
     9                $style = $( 'head' ).append( '<style type="text/css" id="twentyfifteen-color-scheme-css" />' )
     10                                    .find( '#twentyfifteen-color-scheme-css' );
     11        }
     12
    613        // Site title and description.
    714        wp.customize( 'blogname', function( value ) {
    815                value.bind( function( to ) {
    916                        $( '.site-title a' ).text( to );
    1017                } );
    1118        } );
     19
    1220        wp.customize( 'blogdescription', function( value ) {
    1321                value.bind( function( to ) {
    1422                        $( '.site-description' ).text( to );
    1523                } );
    1624        } );
    17 } )( jQuery );
    18  No newline at end of file
     25
     26        wp.customize( 'color_scheme_css', function( value ) {
     27                value.bind( function( to ) {
     28                        $style.html( to );
     29                } );
     30        } );
     31} )( jQuery );