Changeset 26021

Timestamp:

11/05/2013 11:28:07 PM (13 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: improvements to Accent Color behavior, including a case where options were published too soon. Props celloexpressions, fixes #25580.

File:

• trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php (modified) (14 diffs)

trunk/src/wp-content/themes/twentyfourteen/inc/customizer.php

@@ -23 +23 @@
         $wp_customize->add_setting( 'accent_color', array(
                 'default'           => '#24890d',
-                'sanitize_callback' => 'twentyfourteen_generate_accent_colors',
+                'sanitize_callback' => 'sanitize_hex_color',
         ) );
 
@@ -31 +31 @@
                 'settings' => 'accent_color',
         ) ) );
+
+        add_filter( 'theme_mod_accent_mid',  'twentyfourteen_accent_mid'  );
+        add_filter( 'theme_mod_accent_light', 'twentyfourteen_accent_light' );
 
         // Add the featured content section.
@@ -68 +71 @@
 
 /**
- * Generate two variants of the accent color, return the original, and
- * save the others as theme mods.
- *
- * @since Twenty Fourteen 1.0
- *
- * @param string $color The original color.
- * @return string $color The original color, sanitized.
- */
-function twentyfourteen_generate_accent_colors( $color ) {
-        $color = sanitize_hex_color( $color );
-
-        set_theme_mod( 'accent_lighter', twentyfourteen_adjust_color( $color, 29 ) );
-        set_theme_mod( 'accent_much_lighter', twentyfourteen_adjust_color( $color, 49 ) );
-
-        return $color;
-}
-
-/**
  * Tweak the brightness of a color by adjusting the RGB values by the given interval.
  *
@@ -107 +92 @@
         $rgb = array( hexdec( substr( $color, 1, 2 ) ), hexdec( substr( $color, 3, 2 ) ), hexdec( substr( $color, 5, 2 ) ) );
 
-        // Adjust color and switch back to hex.
+        // Adjust color and switch back to 6-digit hex.
         $hex = '#';
-        foreach ( $rgb as $c ) {
-                $c += $steps;
-                if ( $c > 255 )
-                        $c = 255;
-                elseif ( $c < 0 )
-                        $c = 0;
-                $hex .= str_pad( dechex( $c ), 2, '0', STR_PAD_LEFT);
+        foreach ( $rgb as $value ) {
+                $value += $steps;
+                if ( $value > 255 )
+                        $value = 255;
+                elseif ( $value < 0 )
+                        $value = 0;
+                $hex .= str_pad( dechex( $value ), 2, '0', STR_PAD_LEFT);
         }
 
@@ -121 +106 @@
 }
 
+ /**
+ * Returns a slightly lighter color than what is set as the theme's
+ * accent color.
+ *
+ * @since Twenty Fourteen 1.0
+ *
+ * @return string
+ */
+function twentyfourteen_accent_mid() {
+        return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 29 );
+}
+
+/**
+ * Returns a lighter color than what is set as the theme's accent color.
+ *
+ * @since Twenty Fourteen 1.0
+ *
+ * @return string
+ */
+function twentyfourteen_accent_light() {
+        return twentyfourteen_adjust_color( get_theme_mod( 'accent_color' ), 49 );
+}
+
+/**
+ * Caches the generated variants of the theme's accent color.
+ *
+ * @since Twenty Fourteen 1.0
+ *
+ * @return void
+ */
+function twentyfourteen_rebuild_accent_colors() {
+        set_theme_mod( 'accent_mid',  twentyfourteen_accent_mid()  );
+        set_theme_mod( 'accent_light', twentyfourteen_accent_light() );
+}
+add_action( 'update_option_theme_mods_twentyfourteen', 'twentyfourteen_rebuild_accent_colors' );
+
 /**
  * Output the CSS for the Theme Customizer options.
@@ -129 +150 @@
  */
 function twentyfourteen_customizer_styles() {
-        $accent_color = get_theme_mod( 'accent_color' );
+        $accent_color = get_theme_mod( 'accent_color', '#24890d' );
 
         // Don't do anything if the current color is the default.
@@ -135 +156 @@
                 return;
 
-        $accent_lighter = get_theme_mod( 'accent_lighter' );
-        $accent_much_lighter = get_theme_mod( 'accent_much_lighter' );
+        $accent_mid = get_theme_mod( 'accent_mid' );
+        $accent_light = get_theme_mod( 'accent_light' );
 
         $css = '/* Custom accent color. */
@@ -193 +214 @@
                 }
 
-                /* Generated variant of custom accent color: slightly lighter. */
+                /* Generated "mid" variant of custom accent color. */
                 button:hover,
                 button:focus,
@@ -221 +242 @@
                 .content-sidebar .widget input[type="submit"]:focus,
                 .slider-control-paging a:hover:before {
-                        background-color: ' . $accent_lighter . ';
+                        background-color: ' . $accent_mid . ';
                 }
 
@@ -246 +267 @@
                 .site-info a:hover,
                 .featured-content a:hover {
-                        color: ' . $accent_lighter . ';
+                        color: ' . $accent_mid . ';
                 }
 
                 .page-links a:hover,
                 .paging-navigation a:hover {
-                        border-color: ' . $accent_lighter . ';
+                        border-color: ' . $accent_mid . ';
                 }
 
                 .tag-links a:hover:before {
-                        border-right-color: ' . $accent_lighter . ';
+                        border-right-color: ' . $accent_mid . ';
                 }
 
@@ -261 +282 @@
                         .primary-navigation ul ul a:hover,
                         .primary-navigation ul ul li.focus > a {
-                                background-color: ' . $accent_lighter . ';
+                                background-color: ' . $accent_mid . ';
                         }
                 }
@@ -268 +289 @@
                         .secondary-navigation ul ul a:hover,
                         .secondary-navigation ul ul li.focus > a {
-                                background-color: ' . $accent_lighter . ';
+                                background-color: ' . $accent_mid . ';
                         }
                 }
 
-                /* Generated variant of custom accent color: much lighter. */
+                /* Generated "light" variant of custom accent color. */
                 button:active,
                 .contributor-posts-link:active,
@@ -284 +305 @@
                 .content-sidebar .widget input[type="reset"]:active,
                 .content-sidebar .widget input[type="submit"]:active {
-                        background-color: ' . $accent_much_lighter . ';
+                        background-color: ' . $accent_light . ';
                 }
 
@@ -291 +312 @@
                 .site-navigation .current-menu-item > a,
                 .site-navigation .current-menu-ancestor > a {
-                        color: ' . $accent_much_lighter . ';
+                        color: ' . $accent_light . ';
                 }';