public function get_colors() { $color = $this->get_admin_colors(); $config = apply_filters('kirki/config', array()); // Calculate the accent color $this->color_accent = isset($color['colors']) && isset($color['colors'][3]) ? $color['colors'][3] : '#3498DB'; if (isset($config['color_accent'])) { $this->color_accent = Kirki_Color::sanitize_hex($config['color_accent']); } // Calculate the background & font colors $this->color_back = false; $this->color_font = false; if (isset($config['color_back'])) { $this->color_back = Kirki_Color::sanitize_hex($config['color_back']); $this->color_font = 170 > Kirki_Color::get_brightness($this->color_back) ? '#f2f2f2' : '#222'; } $this->border_color = 170 > Kirki_Color::get_brightness($this->color_back) ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.2)'; $this->buttons_color = 170 > Kirki_Color::get_brightness($this->color_back) ? Kirki_Color::adjust_brightness($this->color_back, 80) : Kirki_Color::adjust_brightness($this->color_back, -80); $this->controls_color = 170 > Kirki_Color::get_brightness($this->color_accent) ? '#ffffff;' : '#333333'; $this->arrows_color = 170 > Kirki_Color::get_brightness($this->color_back) ? Kirki_Color::adjust_brightness($this->color_back, 120) : Kirki_Color::adjust_brightness($this->color_back, -120); $this->color_accent_text = 170 > Kirki_Color::get_brightness($this->color_accent) ? Kirki_Color::adjust_brightness($this->color_accent, 120) : Kirki_Color::adjust_brightness($this->color_accent, -120); $this->section_background_color = Kirki_Color::mix_colors($this->color_back, '#ffffff', 10); }
public function test_mix_colors() { $this->assertEquals('#ffffff', Kirki_Color::mix_colors('#ffffff', 'fff', 100)); $this->assertEquals('#ffffff', Kirki_Color::mix_colors('#ffffff', 'fff', 0)); $this->assertEquals('#ffffff', Kirki_Color::mix_colors('#ffffff', 'fff', 37)); $this->assertEquals('#000000', Kirki_Color::mix_colors('#000000', '000', 100)); $this->assertEquals('#000000', Kirki_Color::mix_colors('#000000', '000', 0)); $this->assertEquals('#000000', Kirki_Color::mix_colors('#000000', '0000', 37)); $this->assertEquals('#7f7f7f', Kirki_Color::mix_colors('#ffffff', '000', 50)); $this->assertEquals('#7f7f7f', Kirki_Color::mix_colors('#ffffff', '#000000', 50)); $this->assertEquals('#7f7f7f', Kirki_Color::mix_colors('#000000', '#ffffff', 50)); }
/** * Add custom CSS rules to the head, applying our custom styles */ public function custom_css() { $color = $this->get_admin_colors(); $config = apply_filters('kirki/config', array()); // Calculate the accent color $color_accent = isset($color['icon_colors']) && isset($color['icon_colos']['focus']) ? $color['icon_colors']['focus'] : '#3498DB'; if (isset($config['color_accent'])) { $color_accent = Kirki_Color::sanitize_hex($config['color_accent']); } // Calculate the background & font colors $color_back = false; $color_font = false; if (isset($config['color_back'])) { $color_back = Kirki_Color::sanitize_hex($config['color_back']); $color_font = 170 > Kirki_Color::get_brightness($color_back) ? '#f2f2f2' : '#222'; } $border_color = 170 > Kirki_Color::get_brightness($color_back) ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.2)'; $buttons_color = 170 > Kirki_Color::get_brightness($color_back) ? Kirki_Color::adjust_brightness($color_back, 80) : Kirki_Color::adjust_brightness($color_back, -80); $controls_color = 170 > Kirki_Color::get_brightness($color_accent) ? '#ffffff;' : '#333333'; $arrows_color = 170 > Kirki_Color::get_brightness($color_back) ? Kirki_Color::adjust_brightness($color_back, 120) : Kirki_Color::adjust_brightness($color_back, -120); $color_accent_text = 170 > Kirki_Color::get_brightness($color_accent) ? Kirki_Color::adjust_brightness($color_accent, 120) : Kirki_Color::adjust_brightness($color_accent, -120); $section_background_color = Kirki_Color::mix_colors($color_back, '#ffffff', 10); /** * Initialize the WP_Filesystem */ global $wp_filesystem; if (empty($wp_filesystem)) { require_once ABSPATH . '/wp-admin/includes/file.php'; WP_Filesystem(); } $styles = ''; /** * Include the width CSS if necessary */ if (isset($config['width'])) { $styles .= $wp_filesystem->get_contents(KIRKI_PATH . '/assets/css/customizer-dynamic-css-width.css'); /** * Replace width placeholder with actual value */ $styles = str_replace('WIDTH', $config['width'], $styles); } /** * Include the color modifications CSS if necessary */ if (false !== $color_back && false !== $color_font) { $styles .= $wp_filesystem->get_contents(KIRKI_PATH . '/assets/css/customizer-dynamic-css-colors.css'); } /** * Include generic CSS for controls */ $styles .= $wp_filesystem->get_contents(KIRKI_PATH . '/assets/css/customizer-dynamic-css.css'); /** * replace CSS placeholders with actual values */ $styles = str_replace('COLOR_BACK', $color_back, $styles); $styles = str_replace('COLOR_ACCENT_TEXT', $color_accent_text, $styles); $styles = str_replace('COLOR_ACCENT', $color_accent, $styles); $styles = str_replace('BORDER_COLOR', $border_color, $styles); $styles = str_replace('BUTTONS_COLOR', $buttons_color, $styles); $styles = str_replace('COLOR_FONT', $color_font, $styles); $styles = str_replace('CONTROLS_COLOR', $controls_color, $styles); $styles = str_replace('ARROWS_COLOR', $arrows_color, $styles); $styles = str_replace('SECTION_BACKGROUND_COLOR', $section_background_color, $styles); return $styles; }
/** * Gets the colors used. * * @access public * @return null|void */ public function get_colors() { $config = apply_filters('kirki/config', array()); // No need to proceed if we haven't set any colors. if ((!isset($config['color_back']) || !$config['color_back']) && (!isset($config['color_accent']) || !$config['color_accent'])) { return; } // Set the $process to true. $this->process = true; // Calculate the accent color. if (isset($config['color_accent'])) { $this->color_accent = Kirki_Color::sanitize_hex($config['color_accent']); } // Calculate the background & font colors. if (isset($config['color_back'])) { $this->color_back = Kirki_Color::sanitize_hex($config['color_back']); $this->color_font = 170 > Kirki_Color::get_brightness($this->color_back) ? '#f2f2f2' : '#222'; } if ($this->color_back) { $this->buttons_color = 170 > Kirki_Color::get_brightness($this->color_back) ? Kirki_Color::adjust_brightness($this->color_back, 80) : Kirki_Color::adjust_brightness($this->color_back, -80); $this->border_color = 170 > Kirki_Color::get_brightness($this->color_back) ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.2)'; $this->arrows_color = 170 > Kirki_Color::get_brightness($this->color_back) ? Kirki_Color::adjust_brightness($this->color_back, 120) : Kirki_Color::adjust_brightness($this->color_back, -120); $this->section_background_color = Kirki_Color::mix_colors($this->color_back, '#ffffff', 10); } $this->controls_color = 170 > Kirki_Color::get_brightness($this->color_accent) ? '#ffffff;' : '#333333'; $this->color_accent_text = 170 > Kirki_Color::get_brightness($this->color_accent) ? Kirki_Color::adjust_brightness($this->color_accent, 120) : Kirki_Color::adjust_brightness($this->color_accent, -120); }
/** * Add custom CSS rules to the head, applying our custom styles */ public function custom_css() { $color = $this->get_admin_colors(); $config = apply_filters('kirki/config', array()); // Calculate the accent color $color_accent = isset($color['icon_colors']) && isset($color['icon_colos']['focus']) ? $color['icon_colors']['focus'] : '#3498DB'; if (isset($config['color_accent'])) { $color_accent = Kirki_Color::sanitize_hex($config['color_accent']); } // Calculate the background & font colors $color_back = false; $color_font = false; if (isset($config['color_back'])) { $color_back = Kirki_Color::sanitize_hex($config['color_back']); $color_font = 170 > Kirki_Color::get_brightness($color_back) ? '#f2f2f2' : '#222'; } $styles = ''; // Width if (isset($config['width'])) { $styles .= '.wp-full-overlay-sidebar{width:' . esc_attr($config['width']) . ';}'; $styles .= '.wp-full-overlay.expanded{margin-left:' . esc_attr($config['width']) . ';}'; } if (false !== $color_back && false !== $color_font) { // Generic background color $styles .= '.wp-full-overlay-sidebar{background:' . $color_back . ';}'; // Title background color $styles .= '#customize-controls .customize-info .accordion-section-title, #customize-controls .panel-meta.customize-info .accordion-section-title:hover{background:' . $color_back . ';}'; // Borders $border_color = 170 > Kirki_Color::get_brightness($color_back) ? 'rgba(255,255,255,.2)' : 'rgba(0,0,0,.2)'; $styles .= '#customize-controls .customize-info{border-top-color:' . $border_color . ';border-bottom-color:' . $border_color . ';}'; $styles .= '.customize-section-title{border-bottom-color:' . $border_color . ';}'; $styles .= '.customize-panel-back, .customize-section-back{border-right-color:' . $border_color . ';}'; $styles .= '#customize-header-actions{border-bottom-color:' . $border_color . ';}'; $styles .= '.customize-controls-close, .customize-overlay-close{border-right-color:' . $border_color . '!important;}'; // back & close buttons color if (170 > Kirki_Color::get_brightness($color_back)) { $color = Kirki_Color::adjust_brightness($color_back, 80); } else { $color = Kirki_Color::adjust_brightness($color_back, -80); } $styles .= '.customize-panel-back:focus, .customize-panel-back:hover, .customize-section-back:focus, .customize-section-back:hover, .customize-panel-back, .customize-section-back, .customize-controls-close, .customize-overlay-close{background:' . $color . ';}'; $styles .= '.control-panel-back:focus, .control-panel-back:hover, .customize-controls-close:focus, .customize-controls-close:hover, .customize-controls-preview-toggle:focus, .customize-controls-preview-toggle:hover, .customize-overlay-close:focus, .customize-overlay-close:hover{background:' . $color . '}'; // Sections list titles $styles .= '#customize-theme-controls .accordion-section-title{background:' . $color_back . ';color:' . $color_font . ';}'; $color = 170 > Kirki_Color::get_brightness($color_accent) ? 'color:#ffffff;' : ''; $styles .= '#customize-controls .control-section .accordion-section-title:focus, #customize-controls .control-section .accordion-section-title:hover, #customize-controls .control-section.open .accordion-section-title, #customize-controls .control-section:hover>.accordion-section-title{background:' . $color_accent . ';' . $color . '}'; // Arrows if (170 > Kirki_Color::get_brightness($color_back)) { $color = Kirki_Color::adjust_brightness($color_back, 120); } else { $color = Kirki_Color::adjust_brightness($color_back, -120); } $styles .= '.accordion-section-title:after, .handlediv, .item-edit, .sidebar-name-arrow, .widget-action{color:' . $color . '}'; if (170 > Kirki_Color::get_brightness($color_accent)) { $color = Kirki_Color::adjust_brightness($color_accent, 120); } else { $color = Kirki_Color::adjust_brightness($color_accent, -120); } $styles .= '#customize-theme-controls .control-section .accordion-section-title:focus:after, #customize-theme-controls .control-section .accordion-section-title:hover:after, #customize-theme-controls .control-section.open .accordion-section-title:after, #customize-theme-controls .control-section:hover>.accordion-section-title:after{color:' . $color . '}'; // Title for active section $styles .= '.customize-section-title{background:' . $color_back . ';}'; $styles .= '.customize-section-title h3, h3.customize-section-title{color:' . $color_font . ';}'; // Active section background $styles .= '#customize-theme-controls .accordion-section-content{background:' . Kirki_Color::mix_colors($color_back, '#ffffff', 10) . ';}'; // Title color for active panels etc. $styles .= '#customize-controls .customize-info .preview-notice{color:' . $color_font . ';}'; } // Button styles $color = 170 > Kirki_Color::get_brightness($color_accent) ? '#fff' : '#222'; $styles .= '.wp-core-ui .button-primary-disabled, .wp-core-ui .button-primary.disabled, .wp-core-ui .button-primary:disabled, .wp-core-ui .button-primary[disabled]{background:' . $color_accent . ' !important;color:' . $color . ' !important;border-color:rgba(0,0,0,.1) !important;opacity:.7;}'; $styles .= '.wp-core-ui .button-primary{background-color:' . $color_accent . ';color:' . $color . ';opacity:1;}'; // Tooltip styles $styles .= '#customize-controls .customize-info .customize-help-toggle{color:' . $color_accent . ';}'; // Image-Radio styles $styles .= '.customize-control-radio-image .image.ui-buttonset label.ui-state-active{border:2px solid ' . $color_accent . ';}'; // Buttonset-Radio styles $color = 170 > Kirki_Color::get_brightness($color_accent) ? '#fff;' : '#222'; $styles .= '.customize-control-radio-buttonset label.ui-state-active{background-color:' . $color_accent . ';color:' . $color . ';}'; // Slider Controls $styles .= '.customize-control-slider .ui-slider .ui-slider-handle{background-color:' . $color_accent . ';}'; // Switch Controls $styles .= '.customize-control-switch .fs-checkbox-toggle.fs-checkbox-checked .fs-checkbox-flag{background:' . $color_accent . ';}'; // Toggle Controls $styles .= '.customize-control-toggle .fs-checkbox-toggle.fs-checkbox-checked .fs-checkbox-flag{background:' . $color_accent . ';}'; // Sortable Controls $styles .= '.customize-control-sortable ul.ui-sortable li .dashicons.visibility{color:' . $color_accent . ';}'; // Palette Controls $styles .= '.customize-control-palette label.ui-state-active.ui-button.ui-widget span.ui-button-text{border-color:' . $color_accent . ';}'; return $styles; }