Adjusts brightness of the $hex color.
/** * Add custom CSS rules to the head, applying our custom styles */ function custom_css() { $color = $this->get_admin_colors(); $config = Kirki::config(); $color_font = false; $color_accent = $config->get('color_accent', $color['icon_colors']['focus']); $color_back = $config->get('color_back', '#ffffff'); $color_font = 170 > \Kirki_Color::get_brightness($color_back) ? '#f2f2f2' : '#222'; $styles = '<style>'; // Background styles $styles .= '#customize-controls .wp-full-overlay-sidebar-content{background-color:' . $color_back . ';}'; $styles .= '#customize-theme-controls .accordion-section-title, #customize-info .accordion-section-title,#customize-info .accordion-section-title:hover,#customize-info.open .accordion-section-title{background-color:' . $color_back . ';color:' . $color_font . ';}'; $styles .= '#customize-theme-controls .control-section .accordion-section-title:hover,#customize-theme-controls .control-section .accordion-section-title:focus,.control-section.control-panel>.accordion-section-title:after{background-color:' . \Kirki_Color::adjust_brightness($color_back, -10) . ';color:' . $color_font . ';}'; $styles .= '#customize-theme-controls .control-section.control-panel>h3.accordion-section-title:focus:after, #customize-theme-controls .control-section.control-panel>h3.accordion-section-title:hover:after{background-color:' . \Kirki_Color::adjust_brightness($color_back, -20) . ';color:' . $color_font . ';}'; $styles .= '#customize-theme-controls .control-section.open .accordion-section-title{background-color:' . $color_accent . ' !important;color:' . $color_font . ' !important;}'; // Tooltip styles // $styles .= 'li.customize-control a.button.tooltip.hint--left {color:' . $color_accent . ';}'; // Image-Radio styles $styles .= '.customize-control-radio-image .image.ui-buttonset label.ui-state-active {border-color:' . $color_accent . ';}'; // Buttonset-Radio styles $styles .= '.customize-control-radio-buttonset label.ui-state-active{background-color:' . $color_accent . ';color:' . $color_font . ';}'; // Slider Controls $styles .= '.customize-control-slider .ui-slider .ui-slider-handle{background-color:' . $color_accent . ';border-color:' . $color_accent . ';}'; // Switch Controls $styles .= '.customize-control-switch .Switch .On, .customize-control-toggle .Switch .On{color:' . $color_accent . ';}'; // Toggle Controls $styles .= '.customize-control-switch .Switch.Round.On, .customize-control-toggle .Switch.Round.On{background-color:' . \Kirki_Color::adjust_brightness($color_accent, -10) . ';}'; // 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 . ';}'; $styles .= '</style>'; echo $styles; }
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_adjust_brightness() { $this->assertEquals('#ffffff', Kirki_Color::adjust_brightness('#000000', 255)); $this->assertEquals('#000000', Kirki_Color::adjust_brightness('#000000', 0)); $this->assertEquals('#ffffff', Kirki_Color::adjust_brightness('#fff', 0)); $this->assertEquals('#000000', Kirki_Color::adjust_brightness('#fff', -255)); $this->assertEquals('#7f7f7f', Kirki_Color::adjust_brightness('#fff', 0 - 255 / 2)); }
/** * 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'; } $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; }
/** * 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; }
/** * Calculate some extra CSS styles and attach them to the main stylesheet */ public function extra_styles() { $css = ''; $color = get_theme_mod('accent_color', '#a46497'); $color = false !== strpos($color, 'rgba') ? Kirki_Color::rgba2hex($color) : $color; if (127 < Kirki_Color::get_brightness($color)) { $text_color = '#515151'; $hover_color = Kirki_Color::adjust_brightness($color, 10); } else { $text_color = '#ffffff'; $hover_color = Kirki_Color::adjust_brightness($color, -10); } /** * Header Styles */ $color = get_theme_mod('header_background_color', '#111111'); $color = false !== strpos($color, 'rgb') ? Kirki_Color::rgba2hex($color) : $color; $header_textcolor = 127 < Kirki_Color::get_brightness($color) ? '#222222' : '#ffffff'; $header_border_color = 127 < Kirki_Color::get_brightness($color) ? 'rgba(0,0,0,.1)' : 'rgba(255,255,255,.08)'; $css .= '.horizontal-menu a, .horizontal-menu a:visited, #header-wrapper .dashicons, #header-wrapper .breadcrumbs .woocommerce-breadcrumb, #header-wrapper .breadcrumbs a, #header-wrapper .breadcrumbs .woocommerce-breadbrumb a, h1.site-title a, #header-wrapper .search-wrapper input { color:' . $header_textcolor . ';}'; $css .= '#ffffff' == $header_textcolor ? 'body .horizontal-menu a:hover{color: rgba(255,255,255,.75);}' : 'body .horizontal-menu a:hover{color: rgba(0,0,0,.75);}'; $css .= '#header-wrapper .sidebar-button svg { fill:' . $header_textcolor . ';}'; $css .= '.horizontal-menu{border-top-color:' . $header_border_color . ';}'; /** * Sidebar alignment */ $css .= 'l' == get_theme_mod('sidebar_position', 'l') ? '#content.site-content{flex-direction:row-reverse;}' : ''; /** * If we are not on a full-width layout, then add some extra CSS to fix grid spacing * depending on the sidebar's location (left/right) */ if (get_theme_mod('sidebar_width', 3)) { $css .= 'l' == get_theme_mod('sidebar_position', 'l') ? '#primary{margin-right:0;}' : '#secondary{margin-right:0;}'; } /** * Product Category background image. * This image is set as background on the product description area. */ if (get_theme_mod('product_cat_image_height')) { if (is_tax(array('product_cat', 'product_tag')) && get_query_var('paged') == 0) { global $wp_query; $term = $wp_query->get_queried_object(); $thumbnail_id = get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true); $image = wp_get_attachment_url($thumbnail_id); if ($image) { $css .= '.woocommerce .term-description.has-term-image{background-image: url(' . $image . ');}'; } } } /** * OffCanvas menu. * Default is white color, so we'll only override this if needed. */ $color = get_theme_mod('offcanvas_menu_background_color', '#a46497'); $color = false !== strpos($color, 'rgba') ? Kirki_Color::rgba2hex($color) : $color; if (127 < Kirki_Color::get_brightness($color)) { $css .= '.left-offcanvas-menu ul li a, .left-offcanvas-menu .close{color:#222222;}'; } /** * OffCanvas sidebar */ $color = get_theme_mod('offcanvas_sidebar_background_color', '#a46497'); $color = false !== strpos($color, 'rgba') ? Kirki_Color::rgba2hex($color) : $color; if (127 < Kirki_Color::get_brightness($color)) { $offcanvas_sidebar_color = '#222222'; } else { $offcanvas_sidebar_color = '#ffffff'; } $css .= 'body .offcanvas-sidebar, body .offcanvas-sidebar a, body .offcanvas-sidebar a:visited, body .offcanvas-sidebar a:hover.offcanvas-sidebar .close{color:' . $offcanvas_sidebar_color . ';}'; /** * Button mods */ $css .= 'button, input[type="button"], input[type="reset"], input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{font-weight:' . get_theme_mod('font_base_weight', 700) . ';}'; $css .= 'button, input[type="button"], input[type="reset"], input[type="submit"] {background-color:' . get_theme_mod('accent_color', '#a46497') . '; color:' . $text_color . '}'; $css .= 'button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { background-color:' . $hover_color . ';}'; // Attach our custom styles to the main stylesheet using wp_add_inline_style // See http://codex.wordpress.org/Function_Reference/wp_add_inline_style for documentation wp_add_inline_style('ornea-styles', $css); }