Gets the brightness of the $hex color.
| public static get_brightness ( string $hex ) : integer | ||
| $hex | string | The hex value of a color. |
| Résultat | integer | Value between 0 and 255. |
/**
* 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 test()
{
$this->assertEquals(kirki_get_option(), Kirki::get_option());
$this->assertEquals(kirki_sanitize_hex('#ffffff'), Kirki_Color::sanitize_hex('#ffffff'));
$this->assertEquals(kirki_get_rgb('#ffffff'), Kirki_Color::get_rgb('#ffffff'));
$this->assertEquals(kirki_get_rgba('#ffffff'), Kirki_Color::get_rgba('#ffffff'));
$this->assertEquals(kirki_get_brightness('#ffffff'), Kirki_Color::get_brightness('#ffffff'));
$font_registry = Kirki_Toolkit::fonts();
$this->assertEquals(Kirki_Fonts::get_all_fonts(), $font_registry->get_all_fonts());
$this->assertEquals(Kirki_Fonts::get_font_choices(), $font_registry->get_font_choices());
$this->assertEquals(Kirki_Fonts::is_google_font('foo'), $font_registry->is_google_font('foo'));
$this->assertEquals(Kirki_Fonts::get_google_font_uri(array('foo')), $font_registry->get_google_font_uri(array('foo')));
$this->assertEquals(Kirki_Fonts::get_google_font_subsets(), $font_registry->get_google_font_subsets());
$this->assertEquals(Kirki_Fonts::choose_google_font_variants('Roboto'), $font_registry->choose_google_font_variants('Roboto'));
$this->assertEquals(Kirki_Fonts::get_standard_fonts(), $font_registry->get_standard_fonts());
$this->assertEquals(Kirki_Fonts::get_font_stack('foo'), $font_registry->get_font_stack('foo'));
$this->assertEquals(Kirki_Fonts::sanitize_font_choice('foo'), $font_registry->sanitize_font_choice('foo'));
$this->assertEquals(Kirki_Fonts::get_google_fonts(), $font_registry->get_google_fonts());
}
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_kirki_get_brightness()
{
$random_color = str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT) . str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT) . str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT);
$this->assertEquals(kirki_get_brightness($random_color), Kirki_Color::get_brightness($random_color));
}
public function test_get_brightness()
{
$this->assertEquals('0', Kirki_Color::get_brightness('#000000'));
$this->assertEquals('255', Kirki_Color::get_brightness('#ffffff'));
$this->assertEquals(127, Kirki_Color::get_brightness('#7f7f7f'));
$this->assertEquals(105, Kirki_Color::get_brightness('#ff00ff'));
}
/**
* 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);
}
function kirki_get_brightness($hex)
{
return Kirki_Color::get_brightness($hex);
}
/**
* 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);
}
