/** * Returns an array properly formatted for use by the Kirki_Palette control. * * @param $palettes_nr int the number of palettes we want to get * @return array */ public static function get_palettes($palettes_nr = 5) { $palettes = self::parse(); $palettes = array_slice($palettes, 0, $palettes_nr); $i = 0; foreach ($palettes as $palette) { $palettes[$i] = array(); foreach ($palette as $key => $value) { $palettes[$i][$key] = Kirki_Color::sanitize_hex($value); } $i++; } return $palettes; }
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 test_hex_sanitize() { /** * White */ // 1-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('f')); // 2-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('ff')); // 3-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('fff')); // 4-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('ffff')); // 5-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('fffff')); // 6-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('ffffff')); // 7-letter hex $this->assertEquals('#ffffff', Kirki_Color::sanitize_hex('fffffff')); /** * Black */ // 1-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('0')); // 2-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('00')); // 3-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('000')); // 4-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('0000')); // 5-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('00000')); // 6-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('000000')); // 7-letter hex $this->assertEquals('#000000', Kirki_Color::sanitize_hex('0000000')); /** * Invalid color characters */ $this->assertEquals('#ff8855', Kirki_Color::sanitize_hex('fg8p5m')); }
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); }
/** * Get the styles for a single field. */ public function setting_styles($field, $styles = '', $element = '', $property = '', $units = '', $prefix = '', $suffix = '', $callback = false) { $value = kirki_get_option($field['settings_raw']); $value = $callback ? call_user_func($callback, $value) : $value; $element = $prefix . $element; $units = $units . $suffix; // Color controls if ('color' == $field['type']) { $color = Kirki_Color::sanitize_hex($value); $styles[$element][$property] = $color . $units; } elseif ('background' == $field['type']) { if (isset($field['default']['color'])) { $color_mode = false !== strpos($field['default']['color'], 'rgba') ? 'color-alpha' : 'color'; $value = kirki_get_option($field['settings_raw'] . '_color'); if ('color-alpha' == $color_mode) { $bg_color = kirki_sanitize_rgba($value); } else { $bg_color = Kirki_Color::sanitize_hex($value); } } if (isset($field['default']['image'])) { $bg_image = kirki_get_option($field['settings_raw'] . '_image'); $bg_image = esc_url_raw($bg_image); } if (isset($field['default']['repeat'])) { $bg_repeat = kirki_get_option($field['settings_raw'] . '_repeat'); $bg_repeat = kirki_sanitize_bg_repeat($bg_repeat); } if (isset($field['default']['size'])) { $bg_size = kirki_get_option($field['settings_raw'] . '_size'); $bg_size = kirki_sanitize_bg_size($bg_size); } if (isset($field['default']['attach'])) { $bg_attach = kirki_get_option($field['settings_raw'] . '_attach'); $bg_attach = kirki_sanitize_bg_attach($bg_attach); } if (isset($field['default']['position'])) { $bg_position = kirki_get_option($field['settings_raw'] . '_position'); $bg_position = kirki_sanitize_bg_position($bg_position); } if (isset($field['default']['opacity']) && $field['default']['opacity']) { $bg_opacity = kirki_get_option($field['settings_raw'] . '_opacity'); $bg_opacity = kirki_sanitize_number($bg_opacity); if (isset($bg_color)) { // If we're using an opacity other than 100, then convert the color to RGBA. $bg_color = 100 != $bg_opacity ? Kirki_Color::get_rgba($bg_color, $bg_opacity) : $bg_color; } elseif (isset($bg_image)) { $element_opacity = $bg_opacity / 100; } } if (isset($bg_color)) { $styles[$element]['background-color'] = $bg_color . $units; } if (isset($bg_image) && '' != $bg_image) { $styles[$element]['background-image'] = 'url("' . $bg_image . '")' . $units; if (isset($bg_repeat)) { $styles[$element]['background-repeat'] = $bg_repeat . $units; } if (isset($bg_size)) { $styles[$element]['background-size'] = $bg_size . $units; } if (isset($bg_attach)) { $styles[$element]['background-attachment'] = $bg_attach . $units; } if (isset($bg_position)) { $styles[$element]['background-position'] = str_replace('-', ' ', $bg_position) . $units; } } } elseif (array($field['output']) && isset($field['output']['property']) && in_array($field['output']['property'], array('font-family', 'font-size', 'font-weight'))) { $is_font_family = isset($field['output']['property']) && 'font-family' == $field['output']['property'] ? true : false; $is_font_size = isset($field['output']['property']) && 'font-size' == $field['output']['property'] ? true : false; $is_font_weight = isset($field['output']['property']) && 'font-weight' == $field['output']['property'] ? true : false; if ('font-family' == $property) { $styles[$field['output']['element']]['font-family'] = $value . $units; } else { if ('font-size' == $property) { // Get the unit we're going to use for the font-size. $units = empty($units) ? 'px' : $units; $styles[$element]['font-size'] = $value . $units; } else { if ('font-weight' == $property) { $styles[$element]['font-weight'] = $value . $units; } } } } else { $styles[$element][$property] = $value . $units; } return $styles; }
/** * Sanitize RGBA colors * * @since 0.8.5 */ function kirki_sanitize_rgba($value) { // If empty or an array return transparent if (empty($value) || is_array($value)) { return 'rgba(0,0,0,0)'; } // If string does not start with 'rgba', then treat as hex // sanitize the hex color and finally convert hex to rgba if (false === strpos($value, 'rgba')) { return Kirki_Color::get_rgba(Kirki_Color::sanitize_hex($value)); } // By now we know the string is formatted as an rgba color so we need to further sanitize it. $value = str_replace(' ', '', $value); sscanf($value, 'rgba(%d,%d,%d,%f)', $red, $green, $blue, $alpha); return 'rgba(' . $red . ',' . $green . ',' . $blue . ',' . $alpha . ')'; }
/** * Sanitize colors. * Determine if the current value is a hex or an rgba color and call the appropriate method. * * @since 0.8.5 * @return string */ public static function color($value) { // Is this an rgba color or a hex? $mode = false === strpos($value, 'rgba') ? 'rgba' : 'hex'; if ('rgba' == $mode) { return Kirki_Color::sanitize_hex($value); } else { return self::rgba($value); } }
public static function setSection($config_id, $args = array()) { if (!isset($args['fields']) || !isset($args['subsection']) || isset($args['subsection']) && !$args['subsection']) { // This is a panel Kirki::$panels[] = array('id' => isset($args['id']) ? sanitize_key($args['id']) : substr(str_shuffle('abcdefghijklmnopqrstuvwxyz-_'), 0, 7), 'title' => isset($args['title']) ? $args['title'] : '', 'priority' => isset($args['priority']) ? $args['priority'] : 10, 'description' => isset($args['desc']) ? $args['desc'] : ''); } else { // This is a section // Get the section ID if (isset($args['subsection']) && $args['subsection']) { $panel = end(array_values(Kirki::$panels)); $panel_id = $panel['id']; } Kirki::$sections[] = array('id' => isset($args['id']) ? sanitize_key($args['id']) : substr(str_shuffle("abcdefghijklmnopqrstuvwxyz-_"), 0, 7), 'title' => $args['title'], 'priority' => isset($args['priority']) ? $args['priority'] : 10, 'panel' => isset($panel_id) ? $panel_id : '', 'description' => isset($args['desc']) ? $args['desc'] : ''); foreach ($args['fields'] as $field) { $field['section'] = isset($args['id']) ? sanitize_key($args['id']) : substr(str_shuffle("abcdefghijklmnopqrstuvwxyz-_"), 0, 7); $field['settings'] = $field['id']; $field['help'] = isset($field['desc']) ? $field['desc'] : ''; $field['description'] = isset($field['subtitle']) ? $field['subtitle'] : ''; $field['choices'] = isset($field['options']) ? $field['options'] : ''; $field['label'] = isset($field['title']) ? $field['title'] : ''; switch ($field['type']) { case 'ace_editor': $field['type'] = 'textarea'; break; case 'button_set': $field['type'] = 'radio-buttonset'; break; case 'checkbox': if (isset($field['options']) && is_array($field['options'])) { $field['type'] = 'multicheck'; } case 'color_rgba': $field['type'] = 'color-alpha'; if (isset($field['default']) && is_array($field['default'])) { $field['default']['color'] = isset($field['default']['color']) ? Kirki_Color::sanitize_hex($field['default']['color'], true) : '#ffffff'; $field['default']['alpha'] = isset($field['default']['alpha']) ? $field['default']['alpha'] : '1'; $field['default'] = Kirki_Color::get_rgba($field['default']['color'], $field['default']['alpha']); } break; case 'image_select': $field['type'] = 'radio-image'; break; case 'info': $fiel['label'] = ''; $field['help'] = ''; $field['type'] = 'custom'; $background_color = '#fcf8e3'; $border_color = '#faebcc'; $text_color = '#8a6d3b'; if (isset($field['style'])) { if ('success' == $field['style']) { $background_color = '#dff0d8'; $border_color = '#d6e9c6'; $text_color = '#3c763d'; } elseif ('critical' == $field['style']) { $background_color = '#f2dede'; $border_color = '#ebccd1'; $text_color = '#a94442'; } } $field['default'] = '<div style="padding: 10px;background:' . $background_color . ';border-radius:4px;border:1px solid ' . $border_color . ';color:' . $text_color . ';">'; $field['default'] .= isset($field['title']) ? '<h4>' . $field['title'] . '</h4>' : ''; $field['default'] .= isset($field['desc']) ? $field['desc'] : ''; $field['default'] .= '</div>'; break; case 'palette': $field['choices'] = $field['palettes']; break; case 'raw': $field['default'] = $field['content']; break; case 'select': if (is_array($field['choices'])) { foreach ($field['choices'] as $key => $value) { if (is_array($value)) { foreach ($value as $child_key => $child_value) { $field['choices'][$child_key] = $child_value; } unset($field['choices'][$key]); } } } break; case 'slider': $field['choices'] = array('min' => $field['min'], 'max' => $field['max'], 'step' => $field['step']); break; case 'spinner': $field['type'] = 'number'; break; case 'background': case 'border': case 'color_gradient': case 'date': case 'dimensions': case 'divide': case 'gallery': case 'import_export': case 'link_color': case 'media': case 'multi_text': case 'password': case 'section': case 'select_image': case 'sortable': case 'sorter': case 'spacing': case 'spinner': case 'switch': case 'typography': case 'slides': // TODO break; } Kirki::add_field($config_id, $field); } } }
public function test_kirki_sanitize_hex() { $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_sanitize_hex($random_color), Kirki_Color::sanitize_hex($random_color)); }
public static function order_by($palette = array(), $order = 'none') { $palette = empty($palette) ? array() : $palette; if ('none' == $order) { $palette = array(Kirki_Color::sanitize_hex($palette[0]), Kirki_Color::sanitize_hex($palette[1]), Kirki_Color::sanitize_hex($palette[2]), Kirki_Color::sanitize_hex($palette[3]), Kirki_Color::sanitize_hex($palette[4])); } elseif ('brightness' == $order) { // Get the ligtness of all the colors in our palette and arrange them according to it. $colors_array_0b = $palette; $brightest_0_key = Kirki_Color::brightest_color($colors_array_0b, 'key'); $brightest_0_val = Kirki_Color::brightest_color($colors_array_0b, 'value'); $colors_array_1b = kirki_array_delete($brightest_0_key, $colors_array_0b); $brightest_1_key = Kirki_Color::brightest_color($colors_array_1b, 'key'); $brightest_1_val = Kirki_Color::brightest_color($colors_array_1b, 'value'); $colors_array_2b = kirki_array_delete($brightest_1_key, $colors_array_1b); $brightest_2_key = Kirki_Color::brightest_color($colors_array_2b, 'key'); $brightest_2_val = Kirki_Color::brightest_color($colors_array_2b, 'value'); $colors_array_3b = kirki_array_delete($brightest_2_key, $colors_array_2b); $brightest_3_key = Kirki_Color::brightest_color($colors_array_3b, 'key'); $brightest_3_val = Kirki_Color::brightest_color($colors_array_3b, 'value'); $colors_array_4b = kirki_array_delete($brightest_3_key, $colors_array_3b); $brightest_4_key = Kirki_Color::brightest_color($colors_array_4b, 'key'); $brightest_4_val = Kirki_Color::brightest_color($colors_array_4b, 'value'); $palette = array(Kirki_Color::sanitize_hex($brightest_0_val), Kirki_Color::sanitize_hex($brightest_1_val), Kirki_Color::sanitize_hex($brightest_2_val), Kirki_Color::sanitize_hex($brightest_3_val), Kirki_Color::sanitize_hex($brightest_4_val)); } elseif ('saturation' == $order) { // Get the saturation of all the colors in our palette and arrange them according to it. $colors_array_0s = $palette; $most_saturated_0_key = Kirki_Color::most_saturated_color($colors_array_0s, 'key'); $most_saturated_0_val = Kirki_Color::most_saturated_color($colors_array_0s, 'value'); $colors_array_1s = kirki_array_delete($most_saturated_0_key, $colors_array_0s); $most_saturated_1_key = Kirki_Color::most_saturated_color($colors_array_1s, 'key'); $most_saturated_1_val = Kirki_Color::most_saturated_color($colors_array_1s, 'value'); $colors_array_2s = kirki_array_delete($most_saturated_1_key, $colors_array_1s); $most_saturated_2_key = Kirki_Color::most_saturated_color($colors_array_2s, 'key'); $most_saturated_2_val = Kirki_Color::most_saturated_color($colors_array_2s, 'value'); $colors_array_3s = kirki_array_delete($most_saturated_2_key, $colors_array_2s); $most_saturated_3_key = Kirki_Color::most_saturated_color($colors_array_3s, 'key'); $most_saturated_3_val = Kirki_Color::most_saturated_color($colors_array_3s, 'value'); $colors_array_4s = kirki_array_delete($most_saturated_3_key, $colors_array_3s); $most_saturated_3_key = Kirki_Color::most_saturated_color($colors_array_4s, 'key'); $most_saturated_4_val = Kirki_Color::most_saturated_color($colors_array_4s, 'value'); $palette = array(Kirki_Color::sanitize_hex($most_saturated_0_val), Kirki_Color::sanitize_hex($most_saturated_1_val), Kirki_Color::sanitize_hex($most_saturated_2_val), Kirki_Color::sanitize_hex($most_saturated_3_val), Kirki_Color::sanitize_hex($most_saturated_4_val)); } elseif ('intensity' == $order) { // Get the intensity of all the colors in our palette and arrange them according to it. $colors_array_0i = $palette; $most_intense_0_key = Kirki_Color::most_intense_color($colors_array_0i, 'key'); $most_intense_0_val = Kirki_Color::most_intense_color($colors_array_0i, 'value'); $colors_array_1i = kirki_array_delete($most_intense_0_key, $colors_array_0i); $most_intense_1_key = Kirki_Color::most_intense_color($colors_array_1i, 'key'); $most_intense_1_val = Kirki_Color::most_intense_color($colors_array_1i, 'value'); $colors_array_2i = kirki_array_delete($most_intense_1_key, $colors_array_1i); $most_intense_2_key = Kirki_Color::most_intense_color($colors_array_2i, 'key'); $most_intense_2_val = Kirki_Color::most_intense_color($colors_array_2i, 'value'); $colors_array_3i = kirki_array_delete($most_intense_2_key, $colors_array_2i); $most_intense_3_key = Kirki_Color::most_intense_color($colors_array_3i, 'key'); $most_intense_3_val = Kirki_Color::most_intense_color($colors_array_3i, 'value'); $colors_array_4i = kirki_array_delete($most_intense_3_key, $colors_array_3i); $most_intense_3_key = Kirki_Color::most_intense_color($colors_array_4i, 'key'); $most_intense_4_val = Kirki_Color::most_intense_color($colors_array_4i, 'value'); $palette = array(Kirki_Color::sanitize_hex($most_intense_0_val), Kirki_Color::sanitize_hex($most_intense_1_val), Kirki_Color::sanitize_hex($most_intense_2_val), Kirki_Color::sanitize_hex($most_intense_3_val), Kirki_Color::sanitize_hex($most_intense_4_val)); } elseif ('dullness' == $order) { // Get the lightness and "dullness" of all the colors in our palette and arrange them according to it. $colors_array_0d = $palette; $bright_dull_0_key = Kirki_Color::brightest_dull_color($colors_array_0d, 'key'); $bright_dull_0_val = Kirki_Color::brightest_dull_color($colors_array_0d, 'value'); $colors_array_1d = kirki_array_delete($bright_dull_0_key, $colors_array_0d); $bright_dull_1_key = Kirki_Color::brightest_dull_color($colors_array_1d, 'key'); $bright_dull_1_val = Kirki_Color::brightest_dull_color($colors_array_1d, 'value'); $colors_array_2d = kirki_array_delete($bright_dull_1_key, $colors_array_1d); $bright_dull_2_key = Kirki_Color::brightest_dull_color($colors_array_2d, 'key'); $bright_dull_2_val = Kirki_Color::brightest_dull_color($colors_array_2d, 'value'); $colors_array_3d = kirki_array_delete($bright_dull_2_key, $colors_array_2d); $bright_dull_3_key = Kirki_Color::brightest_dull_color($colors_array_3d, 'key'); $bright_dull_3_val = Kirki_Color::brightest_dull_color($colors_array_3d, 'value'); $colors_array_4d = kirki_array_delete($bright_dull_3_key, $colors_array_3d); $bright_dull_3_key = Kirki_Color::brightest_dull_color($colors_array_4d, 'key'); $bright_dull_4_val = Kirki_Color::brightest_dull_color($colors_array_4d, 'value'); $palette = array(Kirki_Color::sanitize_hex($bright_dull_0_val), Kirki_Color::sanitize_hex($bright_dull_1_val), Kirki_Color::sanitize_hex($bright_dull_2_val), Kirki_Color::sanitize_hex($bright_dull_3_val), Kirki_Color::sanitize_hex($bright_dull_4_val)); } return $palette; }
/** * 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_sanitize_hex($color) { return Kirki_Color::sanitize_hex($color); }
/** * 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; }