hever refactor
This commit is contained in:
Maggie Cabrera
Ben Dwyer
parent
9fdfff7974
commit
825747be9f
5 changed files with 17 additions and 388 deletions
|
|
@ -9,6 +9,18 @@
|
|||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
if ( ! function_exists( 'varia_default_colors' ) ) {
|
||||
function varia_default_colors() {
|
||||
return array(
|
||||
'background' => '#FFFFFF',
|
||||
'foreground' => '#303030',
|
||||
'primary' => '#1279BE',
|
||||
'secondary' => '#FFB302',
|
||||
'tertiary' => '#C5C5C5',
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if ( ! function_exists( 'hever_setup' ) ) :
|
||||
|
||||
/**
|
||||
|
|
@ -54,74 +66,6 @@ if ( ! function_exists( 'hever_setup' ) ) :
|
|||
)
|
||||
);
|
||||
|
||||
// Editor color palette.
|
||||
$colors_manager = get_theme_mod( 'colors_manager' );
|
||||
if ( $colors_manager ) {
|
||||
$color_annotations = $colors_manager['colors'];
|
||||
}
|
||||
$primary = ( empty( $color_annotations['link'] ) ) ? '#1279BE' : $color_annotations['link'];
|
||||
$secondary = ( empty( $color_annotations['fg1'] ) ) ? '#FFB302' : $color_annotations['fg1'];
|
||||
$foreground = ( empty( $color_annotations['txt'] ) ) ? '#303030' : $color_annotations['txt'];
|
||||
$tertiary = ( empty( $color_annotations['fg2'] ) ) ? '#C5C5C5' : $color_annotations['fg2'];
|
||||
$background = ( empty( $color_annotations['bg'] ) ) ? '#FFFFFF' : $color_annotations['bg'];
|
||||
|
||||
$foreground_low_contrast = change_color_luminescence( $foreground, 10 );
|
||||
$foreground_high_contrast = change_color_luminescence( $foreground, -10 );
|
||||
$background_low_contrast = change_color_luminescence( $background, -10 );
|
||||
$background_high_contrast = change_color_luminescence( $background, 10 );
|
||||
|
||||
// Add child theme editor color pallete to match Sass-map variables in `_config-child-theme-deep.scss`.
|
||||
add_theme_support(
|
||||
'editor-color-palette',
|
||||
array(
|
||||
array(
|
||||
'name' => __( 'Primary', 'hever' ),
|
||||
'slug' => 'primary',
|
||||
'color' => $primary,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Secondary', 'hever' ),
|
||||
'slug' => 'secondary',
|
||||
'color' => $secondary,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Tertiary', 'hever' ),
|
||||
'slug' => 'tertiary',
|
||||
'color' => $tertiary,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Foreground', 'hever' ),
|
||||
'slug' => 'foreground',
|
||||
'color' => $foreground,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Foreground Low Contrast', 'hever' ),
|
||||
'slug' => 'foreground-low-contrast',
|
||||
'color' => $foreground_low_contrast,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Foreground High Contrast', 'hever' ),
|
||||
'slug' => 'foreground-high-contrast',
|
||||
'color' => $foreground_high_contrast,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Background', 'hever' ),
|
||||
'slug' => 'background',
|
||||
'color' => $background,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Background High Contrast', 'hever' ),
|
||||
'slug' => 'background-high-contrast',
|
||||
'color' => $background_high_contrast,
|
||||
),
|
||||
array(
|
||||
'name' => __( 'Background Low Contrast', 'hever' ),
|
||||
'slug' => 'background-low-contrast',
|
||||
'color' => $background_low_contrast,
|
||||
),
|
||||
)
|
||||
);
|
||||
|
||||
// Setup nav on side toggle support.
|
||||
if ( function_exists( 'varia_mobile_nav_on_side_setup' ) ) {
|
||||
varia_mobile_nav_on_side_setup();
|
||||
|
|
|
|||
|
|
@ -1,103 +0,0 @@
|
|||
/**
|
||||
* File wpcom-customize-preview.js.
|
||||
*
|
||||
* Instantly live-update customizer settings in the preview for improved user experience,
|
||||
* targeting the updates needed to hide the page title on the homepage on WordPress.com.
|
||||
*
|
||||
* This file needs to avoid ESNext syntax to work in older browsers
|
||||
*/
|
||||
|
||||
// From https://gist.github.com/xenozauros/f6e185c8de2a04cdfecf
|
||||
function hexToHSL( hex ) {
|
||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
|
||||
r = parseInt( result[1], 16 );
|
||||
g = parseInt( result[2], 16 );
|
||||
b = parseInt( result[3], 16 );
|
||||
r /= 255, g /= 255, b /= 255;
|
||||
var max = Math.max( r, g, b ), min = Math.min( r, g, b );
|
||||
var h, s, l = ( max + min ) / 2;
|
||||
if( max == min ){
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
var d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch( max ){
|
||||
case r: h = ( g - b ) / d + ( g < b ? 6 : 0 ); break;
|
||||
case g: h = ( b - r ) / d + 2; break;
|
||||
case b: h = ( r - g ) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
var HSL = new Object();
|
||||
HSL['h'] = h;
|
||||
HSL['s'] = s;
|
||||
HSL['l'] = l;
|
||||
return HSL;
|
||||
}
|
||||
|
||||
function changeColorLuminescence( hex, amount ) {
|
||||
var hsl = hexToHSL( hex );
|
||||
return 'hsl( ' + hsl.h * 360 + ',' + hsl.s * 100 + '%,' + ( hsl.l * 100 + amount ) + '%)';
|
||||
}
|
||||
|
||||
|
||||
( function( $ ) {
|
||||
// Hide Front Page Title
|
||||
wp.customize( 'hide_front_page_title', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
if ( true === to ) {
|
||||
$( 'body' ).addClass( 'hide-homepage-title' );
|
||||
|
||||
} else {
|
||||
$( 'body' ).removeClass( 'hide-homepage-title' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// Since the plugin handles customizer preview updates via the postMessage transport,
|
||||
// we need to manually override the "extra CSS" when a user selects a different color palette.
|
||||
wp.customize( 'colors_manager[colors]', function( value ) {
|
||||
value.bind( function( to ) {
|
||||
var background = to.bg;
|
||||
var foreground = to.txt;
|
||||
var primary = to.link;
|
||||
var secondary = to.fg1;
|
||||
var border = to.fg2;
|
||||
|
||||
var backgroundLowContrast = changeColorLuminescence( background, -10 );
|
||||
var backgroundHighContrast = changeColorLuminescence( background, 10 );
|
||||
var foregroundLowContrast = changeColorLuminescence( foreground, 10 );
|
||||
var foregroundHighContrast = changeColorLuminescence( foreground, -10 );
|
||||
var borderLowContrast = changeColorLuminescence( border, 10 );
|
||||
var borderHighContrast = changeColorLuminescence( border, -10 );
|
||||
var primaryHover = changeColorLuminescence( primary, 10 );
|
||||
var secondaryHover = changeColorLuminescence( secondary, 10 );
|
||||
const extraCSS = ':root {' +
|
||||
'--wp--preset--color--background: ' + background + ';' +
|
||||
'--wp--preset--color--background-low-contrast: ' + backgroundLowContrast + ';' +
|
||||
'--wp--preset--color--background-high-contrast: ' + backgroundHighContrast + ';' +
|
||||
'--wp--preset--color--foreground: ' + foreground + ';' +
|
||||
'--wp--preset--color--foreground-low-contrast: ' + foregroundLowContrast + ';' +
|
||||
'--wp--preset--color--foreground-high-contrast: ' + foregroundHighContrast + ';' +
|
||||
'--wp--preset--color--primary: ' + primary + ';' +
|
||||
'--wp--preset--color--primary-hover: ' + primaryHover + ';' +
|
||||
'--wp--preset--color--secondary: ' + secondary + ';' +
|
||||
'--wp--preset--color--secondary-hover: ' + secondaryHover + ';' +
|
||||
'--wp--preset--color--border: ' + border + ';' +
|
||||
'--wp--preset--color--border-low-contrast: ' + borderLowContrast + ';' +
|
||||
'--wp--preset--color--border-high-contrast: ' + borderHighContrast + ';' +
|
||||
'}';
|
||||
|
||||
// Append an extra style element that overrides the previous extra CSS
|
||||
if ( $('#custom-colors-extra-css').length ) {
|
||||
$( '#custom-colors-extra-css' ).html( extraCSS );
|
||||
} else {
|
||||
$( 'head' ).append( '<style id="custom-colors-extra-css">' + extraCSS + '</style>' );
|
||||
}
|
||||
|
||||
if ( typeof cssVars !== 'undefined' ) {
|
||||
cssVars( {} );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} )( jQuery );
|
||||
|
|
@ -1,164 +1 @@
|
|||
<?php
|
||||
|
||||
// Custom Colors: Hever
|
||||
function hever_define_color_annotations( $colors ) {
|
||||
// Background Color
|
||||
// --wp--preset--color--background
|
||||
add_color_rule(
|
||||
'bg',
|
||||
$colors['background'],
|
||||
array(
|
||||
|
||||
// This placeholder is needed to make the color annotations work
|
||||
array( '.wp--preset--color--background', 'background-color' ),
|
||||
|
||||
),
|
||||
__( 'Background Color' )
|
||||
);
|
||||
|
||||
// Foreground Color
|
||||
// --wp--preset--color--foreground
|
||||
add_color_rule(
|
||||
'txt',
|
||||
$colors['foreground'],
|
||||
array(
|
||||
|
||||
// This placeholder is needed to make the color annotations work
|
||||
array( '.wp--preset--color--foreground', 'color' ),
|
||||
|
||||
),
|
||||
__( 'Foreground Color' )
|
||||
);
|
||||
|
||||
// Primary Color
|
||||
// --wp--preset--color--primary
|
||||
add_color_rule(
|
||||
'link',
|
||||
$colors['primary'],
|
||||
array(
|
||||
|
||||
// This placeholder is needed to make the color annotations work
|
||||
array( '.wp--preset--color--primary', 'color' ),
|
||||
|
||||
),
|
||||
__( 'Primary Color' )
|
||||
);
|
||||
|
||||
// Secondary Color
|
||||
// --wp--preset--color--secondary
|
||||
add_color_rule(
|
||||
'fg1',
|
||||
$colors['secondary'],
|
||||
array(
|
||||
|
||||
// Text-color
|
||||
array( '.wp--preset--color--secondary', 'color' ),
|
||||
|
||||
),
|
||||
__( 'Secondary Color' )
|
||||
);
|
||||
|
||||
// Tertiary Color
|
||||
// --wp--preset--color--tertiary
|
||||
add_color_rule(
|
||||
'fg2',
|
||||
$colors['tertiary'],
|
||||
array(
|
||||
|
||||
// Text-color
|
||||
array( '.wp--preset--color--tertiary', 'color' ),
|
||||
|
||||
),
|
||||
__( 'Tertiary Color' )
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom CSS.
|
||||
* The plugin takes the body of this function and applies it in a style tag in the document head.
|
||||
*/
|
||||
function hever_custom_colors_extra_css() {
|
||||
$colors_array = get_theme_mod( 'colors_manager' );
|
||||
$background = $colors_array['colors']['bg'];
|
||||
$foreground = $colors_array['colors']['txt'];
|
||||
$primary = $colors_array['colors']['link'];
|
||||
$secondary = $colors_array['colors']['fg1'];
|
||||
$border = $colors_array['colors']['fg2'];
|
||||
|
||||
$foreground_low_contrast = change_color_luminescence( $foreground, 10 );
|
||||
$foreground_high_contrast = change_color_luminescence( $foreground, -10 );
|
||||
$background_low_contrast = change_color_luminescence( $background, -10 );
|
||||
$background_high_contrast = change_color_luminescence( $background, 10 );
|
||||
$primary_hover = change_color_luminescence( $primary, 10 );
|
||||
$secondary_hover = change_color_luminescence( $secondary, 10 );
|
||||
$border_low_contrast = change_color_luminescence( $border, 10 );
|
||||
$border_high_contrast = change_color_luminescence( $border, -10 );
|
||||
?>
|
||||
|
||||
:root,
|
||||
#editor .editor-styles-wrapper {
|
||||
--wp--preset--color--background: <?php echo $background; ?>;
|
||||
--wp--preset--color--background-low-contrast: <?php echo $background_low_contrast; ?>;
|
||||
--wp--preset--color--background-high-contrast: <?php echo $background_high_contrast; ?>;
|
||||
--wp--preset--color--foreground: <?php echo $foreground; ?>;
|
||||
--wp--preset--color--foreground-low-contrast: <?php echo $foreground_low_contrast; ?>;
|
||||
--wp--preset--color--foreground-high-contrast: <?php echo $foreground_high_contrast; ?>;
|
||||
--wp--preset--color--primary: <?php echo $primary; ?>;
|
||||
--wp--preset--color--primary-hover: <?php echo $primary_hover; ?>;
|
||||
--wp--preset--color--secondary: <?php echo $secondary; ?>;
|
||||
--wp--preset--color--secondary-hover: <?php echo $secondary_hover; ?>;
|
||||
--wp--preset--color--border: <?php echo $border; ?>;
|
||||
--wp--preset--color--border-low-contrast: <?php echo $border_low_contrast; ?>;
|
||||
--wp--preset--color--border-high-contrast: <?php echo $border_high_contrast; ?>;
|
||||
}
|
||||
|
||||
<?php
|
||||
}
|
||||
add_theme_support( 'custom_colors_extra_css', 'hever_custom_colors_extra_css' );
|
||||
|
||||
/**
|
||||
* Featured Hever Palettes
|
||||
*/
|
||||
// Light
|
||||
add_color_palette(
|
||||
array(
|
||||
'#FFFFFF',
|
||||
'#1D1E1E',
|
||||
'#C8133E',
|
||||
'#4E2F4B',
|
||||
'#F9F9F9',
|
||||
), /* translators: This is the name for a color scheme */
|
||||
'Light'
|
||||
);
|
||||
// Medium
|
||||
add_color_palette(
|
||||
array(
|
||||
'#EEF4F7',
|
||||
'#242527',
|
||||
'#35845D',
|
||||
'#233252',
|
||||
'#F9F9F9',
|
||||
), /* translators: This is the name for a color scheme */
|
||||
'Medium'
|
||||
);
|
||||
// Dark
|
||||
add_color_palette(
|
||||
array(
|
||||
'#1F2527',
|
||||
'#FFFFFF',
|
||||
'#9FD3E8',
|
||||
'#FBE6AA',
|
||||
'#364043',
|
||||
), /* translators: This is the name for a color scheme */
|
||||
'Dark'
|
||||
);
|
||||
|
||||
hever_define_color_annotations(
|
||||
array(
|
||||
'background' => '#FFFFFF',
|
||||
'foreground' => '#303030',
|
||||
'primary' => '#1279BE',
|
||||
'secondary' => '#FFB302',
|
||||
'tertiary' => '#C5C5C5',
|
||||
)
|
||||
);
|
||||
require_once get_template_directory() . '/inc/wpcom-colors-v2.php';
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<?php
|
||||
/**
|
||||
* WordPress.com-specific functions and definitions.
|
||||
*
|
||||
* This file is centrally included from `wp-content/mu-plugins/wpcom-theme-compat.php`.
|
||||
*
|
||||
* @package Hever
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Bind JS handlers to instantly live-preview changes.
|
||||
*/
|
||||
function hever_wpcom_customize_preview_js() {
|
||||
wp_enqueue_script( 'hever_wpcom_customize_preview', get_theme_file_uri( '/inc/customize-preview-wpcom.js' ), array( 'customize-preview' ), '1.0', true );
|
||||
}
|
||||
add_action( 'customize_preview_init', 'hever_wpcom_customize_preview_js' );
|
||||
|
|
@ -3,6 +3,8 @@
|
|||
* - See: style-child-theme.scss
|
||||
*/
|
||||
|
||||
@import "../../varia/sass/abstracts/config-global";
|
||||
|
||||
/**
|
||||
* Global
|
||||
*/
|
||||
|
|
@ -67,42 +69,6 @@ $config-global: (
|
|||
),
|
||||
),
|
||||
|
||||
/* Colors */
|
||||
"color": (
|
||||
"primary": (
|
||||
"default": var(--wp--preset--color--primary),
|
||||
"hover": var(--wp--preset--color--primary-hover),
|
||||
),
|
||||
"secondary": (
|
||||
"default": var(--wp--preset--color--secondary),
|
||||
"hover": var(--wp--preset--color--secondary-hover),
|
||||
),
|
||||
"foreground": (
|
||||
"default": var(--wp--preset--color--foreground),
|
||||
"light": var(--wp--preset--color--foreground-low-contrast), // must be accessible against background
|
||||
"dark": var(--wp--preset--color--foreground-high-contrast), // must be accessible against background
|
||||
),
|
||||
"background": (
|
||||
"default": var(--wp--preset--color--background),
|
||||
"light": var(--wp--preset--color--background-high-contrast), // must be accessible against foreground-default
|
||||
"dark": var(--wp--preset--color--background-low-contrast), // must be accessible against foreground-default
|
||||
),
|
||||
"border": (
|
||||
"default": var(--wp--preset--color--border),
|
||||
"light": var(--wp--preset--color--border-low-contrast),
|
||||
"dark": var(--wp--preset--color--border-high-contrast),
|
||||
),
|
||||
"alert": (
|
||||
"success": var(--wp--preset--color--alert-success),
|
||||
"info": var(--wp--preset--color--alert-info),
|
||||
"warning": var(--wp--preset--color--alert-warning),
|
||||
"error": var(--wp--preset--color--alert-error),
|
||||
),
|
||||
"text-selection": var(--wp--preset--color--text-selection),
|
||||
"black": var(--wp--preset--color--black),
|
||||
"white": var(--wp--preset--color--white),
|
||||
),
|
||||
|
||||
/* Spacing */
|
||||
"spacing": (
|
||||
"unit": (2 * $baseline-unit), // 16px
|
||||
|
|
@ -139,6 +105,8 @@ $config-global: (
|
|||
),
|
||||
);
|
||||
|
||||
$config-global: map-merge($config-global-parent, $config-global);
|
||||
|
||||
/**
|
||||
* Elements
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in a new issue