From 3519d1a800556f04ed7be55faf1a4e7c5f3ee9b0 Mon Sep 17 00:00:00 2001 From: jamesros Date: Mon, 3 Apr 2023 14:06:14 -0400 Subject: [PATCH 01/10] update info dropdown for footer link colors (#55) --- .../customizer/controls/dropdown.controls.php | 40 +++++++------------ .../controls/footer-layout.controls.php | 3 +- 2 files changed, 17 insertions(+), 26 deletions(-) diff --git a/src/includes/configs/customizer/controls/dropdown.controls.php b/src/includes/configs/customizer/controls/dropdown.controls.php index 53dd901c..7ec98d0d 100644 --- a/src/includes/configs/customizer/controls/dropdown.controls.php +++ b/src/includes/configs/customizer/controls/dropdown.controls.php @@ -395,24 +395,24 @@ 'bgtfw_dropdown_footer_colors' => array( 'type' => 'bgtfw-dropdown-menu', 'transport' => 'postMessage', - 'label' => __( 'Background', 'crio' ), - 'active_label' => __( 'Footer Background', 'crio' ), + 'label' => __( 'Link Color', 'crio' ), + 'active_label' => __( 'Footer Links', 'crio' ), 'default' => false, 'settings' => 'bgtfw_dropdown_footer_colors', 'section' => 'bgtfw_footer_colors', 'priority' => -1, - 'help_label' => __( 'Tip - Changing Backgrounds', 'crio' ), + 'help_label' => __( 'Tip - Footer Link Colors', 'crio' ), 'help_text' => sprintf( - /* translators: %1$s = site name, %2$s = site tagline */ __( - 'After changing your Footer Colors, you may need to adjust your %2$sWidget%1$s colors. If you don’t see the color you want to use, please update your %3$sColor Palette%1$s. You may also want to change the %4$sFooter Design%1$s or %5$sSite Background%1$s.', + /* translators: %1$s = closing anchor, %2$s = Widgets link tags, %3$s = Menu link tags */ + 'The color of the links in your footer depend on their location inside your footer. + Attribution links can be changed here, however if the links are inside of a widget, + you will have to change them in the %2$sWidget%1$s panel. If the links are inside a menu, you will have to change them in the %3$sMenu%1$s panel.', 'crio' ), '', '', - '', - '', - '' + '', ), 'additional_controls' => array( array( @@ -421,29 +421,19 @@ 'focus_id' => 'widgets', ), array( - 'label' => __( 'Color Palette', 'crio' ), - 'focus_type' => 'section', - 'focus_id' => 'colors', - ), - array( - 'label' => __( 'Header Background', 'crio' ), - 'focus_type' => 'section', - 'focus_id' => 'header_image', - ), - array( - 'label' => __( 'Site Background', 'crio' ), - 'focus_type' => 'section', - 'focus_id' => 'background_image', + 'label' => __( 'Menu Design', 'crio' ), + 'focus_type' => 'panel', + 'focus_id' => 'bgtfw_menus_panel', ), ), 'faq_links' => array( array( - 'label' => __( 'Change the Site Background', 'crio' ), - 'url' => esc_url( 'https://www.boldgrid.com/support/boldgrid-crio-supertheme-product-guide/changing-your-site-background-in-boldgrid-crio/' ), + 'label' => __( 'Working With Widgets', 'crio' ), + 'url' => esc_url( 'https://www.boldgrid.com/support/boldgrid-crio-supertheme-product-guide/working-with-header-and-footer-widgets-in-boldgrid-crio/' ), ), array( - 'label' => __( 'Choose the Color Palette', 'crio' ), - 'url' => esc_url( 'https://www.boldgrid.com/support/boldgrid-crio-supertheme-product-guide/customizing-the-color-palette/' ), + 'label' => __( 'Changing the Menu Link Colors', 'crio' ), + 'url' => esc_url( 'https://www.boldgrid.com/support/boldgrid-crio-supertheme-product-guide/changing-the-menu-link-styles/' ), ), ), ), diff --git a/src/includes/configs/customizer/controls/footer-layout.controls.php b/src/includes/configs/customizer/controls/footer-layout.controls.php index 11795ca3..75b9710e 100644 --- a/src/includes/configs/customizer/controls/footer-layout.controls.php +++ b/src/includes/configs/customizer/controls/footer-layout.controls.php @@ -132,7 +132,8 @@ 'type' => 'bgtfw-palette-selector', 'transport' => 'postMessage', 'settings' => 'bgtfw_footer_links', - 'label' => esc_attr__( 'Link Color', 'crio' ), + 'label' => esc_attr__( 'Attribution Link Colors', 'crio' ), + 'description' => esc_attr__( 'Change the color of your attribution links if shown.', 'crio' ), 'section' => 'bgtfw_footer_colors', 'priority' => 30, 'default' => '', From aeb89bc530968d69243030df809845f3b2ac3c4e Mon Sep 17 00:00:00 2001 From: jamesros Date: Mon, 3 Apr 2023 14:06:37 -0400 Subject: [PATCH 02/10] add aria-hidden to taglines not shown (#58) --- src/includes/class-boldgrid-framework-api.php | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/includes/class-boldgrid-framework-api.php b/src/includes/class-boldgrid-framework-api.php index 366845a1..eeb0896e 100644 --- a/src/includes/class-boldgrid-framework-api.php +++ b/src/includes/class-boldgrid-framework-api.php @@ -108,8 +108,9 @@ public function site_logo_or_title() { */ public function print_tagline() { // Retrieve blog tagline. - $blog_info = get_bloginfo( 'description' ); - $display = get_theme_mod( 'bgtfw_tagline_display' ) === 'hide' ? ' screen-reader-text' : ''; + $blog_info = get_bloginfo( 'description' ); + $display = get_theme_mod( 'bgtfw_tagline_display' ) === 'hide' ? ' screen-reader-text' : ''; + $aria_hidden = ! in_array( 'description', get_theme_mod( 'bgtfw_header_preset_branding' ) ) ? 'true' : 'false'; if ( $blog_info ) { $classes = $this->configs['template']['tagline-classes'] . $display; @@ -117,7 +118,12 @@ public function print_tagline() { $classes = $this->configs['template']['tagline-classes'] . ' site-description invisible'; } - printf( wp_kses_post( $this->configs['template']['tagline'] ), esc_attr( $classes ), esc_html( $blog_info ) ); + printf( + '

%3$s

', + esc_attr( $classes ), + esc_attr( $aria_hidden ), + esc_html( $blog_info ) + ); } /** From c46697e88a6b347285bca65d25d528b270bfbb49 Mon Sep 17 00:00:00 2001 From: jamesros Date: Mon, 3 Apr 2023 14:06:58 -0400 Subject: [PATCH 03/10] add notice to logo panel (#59) --- .../customizer/header-layout/header-layout.js | 25 ++++++++++++++++++- ...-boldgrid-framework-customizer-presets.php | 20 +++++++++++++++ .../class-boldgrid-framework-customizer.php | 2 ++ 3 files changed, 46 insertions(+), 1 deletion(-) diff --git a/src/assets/js/customizer/header-layout/header-layout.js b/src/assets/js/customizer/header-layout/header-layout.js index 2ba12e16..0eef1788 100644 --- a/src/assets/js/customizer/header-layout/header-layout.js +++ b/src/assets/js/customizer/header-layout/header-layout.js @@ -562,6 +562,18 @@ export class HeaderLayout { } } ); + controlApi.section( 'title_tagline' ).expanded.bind( ( isExpanded ) => { + if ( isExpanded ) { + this.brandingNotices( controlApi( 'bgtfw_header_preset_branding' )(), controlApi.control( 'custom_logo' ) ); + } + } ); + + controlApi( 'custom_logo', ( control ) => { + control.bind( () => { + this.brandingNotices( controlApi( 'bgtfw_header_preset_branding' )(), controlApi.control( 'custom_logo' ) ); + } ); + } ); + /* * bgtfw_header_presets * @@ -1059,7 +1071,9 @@ export class HeaderLayout { * @param {wp.customize.control} control Customizer Control object. */ brandingNotices( value, control ) { - var container = control.container; + var container = control.container, + controlId = control.id; + container.find( '.branding_notice' ).hide(); if ( value.includes( 'logo' ) && ! controlApi( 'custom_logo' )() ) { @@ -1085,6 +1099,15 @@ export class HeaderLayout { controlApi.control( 'blogdescription' ).focus(); } ); } + + if ( 'custom_logo' === controlId && ! value.includes( 'logo' ) && controlApi( 'custom_logo' )() ) { + container.find( '.branding_notice.logo_set' ).show(); + container.find( '.branding_notice.logo_set a' ).off( 'click' ); + container.find( '.branding_notice.logo_set a' ).on( 'click', ( e ) => { + e.preventDefault(); + controlApi.control( 'bgtfw_header_preset_branding' ).focus(); + } ); + } } /** diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-presets.php b/src/includes/customizer/class-boldgrid-framework-customizer-presets.php index 8fd9750b..3a5d9bb0 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer-presets.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer-presets.php @@ -110,6 +110,21 @@ public function starter_content_defaults( $wp_customize ) { } } + /** + * Get logo notice + * + * @since 2.20.0 + * + * @return string Markup of notice + */ + public function get_logo_notice() { + return '

' + . esc_html__( 'Your header layout does not display a logo. ', 'crio' ) + . '' . esc_html__( 'Click Here', 'crio' ) + . ' ' . esc_html__( ' to display your logo.', 'crio' ) + . '

'; + } + /** * Get Branding Notices. * @@ -123,6 +138,11 @@ public function get_branding_notices() { . '' . esc_html__( 'Click Here', 'crio' ) . ' ' . esc_html__( ' to set your logo.', 'crio' ) . '

'; + $markup .= '

' + . esc_html__( 'Your header layout does not display a logo. ', 'crio' ) + . '' . esc_html__( 'Click Here', 'crio' ) + . ' ' . esc_html__( ' to display your logo.', 'crio' ) + . '

'; $markup .= '

' . esc_html__( 'You do not have a site title set. ', 'crio' ) . '' . esc_html__( 'Click Here', 'crio' ) diff --git a/src/includes/customizer/class-boldgrid-framework-customizer.php b/src/includes/customizer/class-boldgrid-framework-customizer.php index 82ab200b..82b8225a 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer.php @@ -838,6 +838,8 @@ public function customizer_reorganization( $wp_customize ) { if ( $wp_customize->get_setting( 'custom_logo' ) ) { $setting = $wp_customize->get_setting( 'custom_logo' ); + $control = $wp_customize->get_control( 'custom_logo' ); + $control->description = $this->presets->get_logo_notice(); $setting->transport = 'refresh'; } From 94d08c755a6c33e6819058ca7e6c1a78f0caaa74 Mon Sep 17 00:00:00 2001 From: jamesros Date: Mon, 3 Apr 2023 15:13:38 -0400 Subject: [PATCH 04/10] Issue 50 - Improve Color Palettes by using color variables instead of SCSS compilation during runtime (#54) * remove runtime compiling of SCSS color palettes * add variable generation to customizer js * append updated colors to head * add css variables to saved palette theme_mod * fix alternative parsing of palette values * footer link color to work like other link controls * add footer link selectors * change footer link color control to new name * set color pallette to postMessage * ensure updated color palette values are available * fix footer color updates * update versions for alpha * update side branch with master changes (#51) * Create pull_request_template.md * Branch 2.19.1 (#47) * set rc release version * Separate top & bottom blog page post margins * Revert "Separate top & bottom blog page post margins" This reverts commit 55585fd95ecda0b6180e6539ce5c03903a952a53. * Salon theme styles (#42) * add salon theme styles * update styles to fix MFW rows * Fix Blog Category links not working - Issue 37 (#43) * fix cats not showing if uncategorized * fix category 404s * Separate Blog Post List Post Margin controls - Issue 38 (#41) * Split blog page post margins into two controls * change title of lower margin control * Fix Submenu Padding for first menu item - Issue 39 (#40) * issue-786 version set * fix left padding of first-item submenus * update version for test-zip * revert version to rc1 * add filters (#45) * re-add letter-spacing (#19) * update readme * revert letter-spacing changes * remove RC1 from version tag * update versions and readme * fix translucency issues * fix SINCEVERSION * fix incorrect '-raw' value in css * add comments * add comments * remove commented out code * add fallback for bgtfw_footer_links * fix footer links. again. * phpcs fixes * fix raised buttons and overlays --- gulpfile.js | 14 +- .../config.php | 2 +- .../js/customizer/color-palette-generate.js | 132 +++++++++ .../js/customizer/color-palette-preview.js | 113 +++++++- src/assets/js/customizer/color-palette.js | 3 + src/assets/js/customizer/color/preview.js | 6 +- src/assets/js/customizer/customizer.js | 4 + .../js/customizer/typography/link-preview.js | 56 ++-- ...color-classes.scss => color-palettes.scss} | 200 +++++--------- .../customizer/controls/_link-colors.scss | 4 +- src/includes/class-boldgrid-framework-api.php | 2 +- ...lass-boldgrid-framework-compile-colors.php | 258 +++++++++++++++++- .../class-boldgrid-framework-links.php | 28 +- .../class-boldgrid-framework-styles.php | 45 +-- .../customizer-options/colors.config.php | 6 - .../controls/footer-layout.controls.php | 9 +- ...s-boldgrid-framework-customizer-colors.php | 2 +- ...dgrid-framework-customizer-widget-meta.php | 2 +- 18 files changed, 686 insertions(+), 200 deletions(-) rename src/assets/scss/custom-color/{color-classes.scss => color-palettes.scss} (50%) diff --git a/gulpfile.js b/gulpfile.js index 41cf7ba4..10c836df 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -429,6 +429,18 @@ gulp.task('bootstrapCompile', function () { // .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) ); }); +// Bootstrap Compile +gulp.task('colorPalettesCompile', function () { + gulp.src(config.dist + '/assets/scss/custom-color/color-palettes.scss') + .pipe(sass()) + .pipe(sass.sync().on('error', sass.logError)) + .pipe(gulp.dest(config.prime_dest + '/css' ) ) + .pipe(cssnano({ discardComments: { removeAll: true }, safe: true })) + .pipe(rename({ suffix: '.min' })) + .pipe(gulp.dest( config.prime_dest + '/css' ) ) + // .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) ); +}); + // Watch for changes and recompile scss gulp.task('sass:watch', function () { gulp.watch( 'src/assets/scss/**/*.scss', function () { @@ -554,7 +566,7 @@ gulp.task( 'build', function( cb ) { ['jsHint', 'jscs', 'frameworkJs', 'svgs', 'tgm'], ['scssDeps', 'jsDeps', 'modernizr', 'fontDeps', 'phpDeps', 'frameworkFiles', 'copyScss'], 'images', - ['scssCompile', 'bootstrapCompile'], + ['scssCompile', 'bootstrapCompile', 'colorPalettesCompile' ], ['fontFamilyCss', 'patterns'], 'hovers', 'hoverColors', diff --git a/prime/inc/boldgrid-theme-framework-config/config.php b/prime/inc/boldgrid-theme-framework-config/config.php index ec9198a4..820647fe 100755 --- a/prime/inc/boldgrid-theme-framework-config/config.php +++ b/prime/inc/boldgrid-theme-framework-config/config.php @@ -220,7 +220,7 @@ function boldgrid_prime_framework_config( $config ) { // Footer specific colors for background, headings, and links. $config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5'; - $config['customizer']['controls']['bgtfw_footer_links']['default'] = 'color-1'; + $config['customizer']['controls']['bgtfw_footer_link_color']['default'] = 'color-1'; // Page title display settings, show by default. $config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show'; diff --git a/src/assets/js/customizer/color-palette-generate.js b/src/assets/js/customizer/color-palette-generate.js index 65f9945f..408b6759 100644 --- a/src/assets/js/customizer/color-palette-generate.js +++ b/src/assets/js/customizer/color-palette-generate.js @@ -93,6 +93,138 @@ BOLDGRID.COLOR_PALETTE.Generate = BOLDGRID.COLOR_PALETTE.Generate || {}; '#1a1a1a' ]; + /** + * Css Variables. + * + * Generate CSS Variables for a color palette. + * + * @ since 2.20.0 + * + * @param {object} colorPalette The Color Palette Object. + * + * @returns string CSS Variables string. + */ + self.cssVariables = function( colorPalette ) { + var css = '', + formattedPalette = {}; + + $.each( colorPalette.colors, function( index, color ) { + var colorIndex = index + 1; + + formattedPalette['color-' + colorIndex ] = color; + } ); + + formattedPalette['color-neutral'] = colorPalette['neutral-color']; + + $.each( formattedPalette, function( variable, color ) { + css += `--${variable}: ${color};`; + css += `--${variable}-raw: ` + color.replace( 'rgb(', '' ).replace( ')', '' ) + ';'; + css += `--${variable}-light:` + net.brehaut.Color( color ).lightenByAmount( 0.1 ).toCSS() + ';'; + css += self.generateHoverVars( formattedPalette, variable, color ); + } ); + + return css; + }; + + /** + * Generates CSS Variables for hover colors. + * + * @since 2.20.0 + * + * @param {object} formattedPalette Formatted colors object. + * @param {string} textVariable Text color variable. + * @param {string} textColor Text color value. + * + * @returns {string} CSS Variables string. + */ + self.generateHoverVars = function( formattedPalette, textVariable, textColor ) { + var textIndex = textVariable.replace( 'color-', '' ), + hoverVars = ''; + + $.each( formattedPalette, function( bgVariable, bgColor ) { + var bgIndex = bgVariable.replace( 'color-', '' ), + hoverColor = self.getHoverColor( + net.brehaut.Color( bgColor ), + net.brehaut.Color( textColor ) + ); + + hoverVars += `--bg-${bgIndex}-text-${textIndex}-hover: ${hoverColor};`; + } ); + + return hoverVars; + }; + + /** + * Get Hover Color. + * + * All the logic for determining the hover color was + * derived from the SCSS functions defined prior to the + * 2.2.0 release in the following file: + * + * src/assets/scss/custom-color/color-palettes.scss + * + * @since 2.20.0 + * + * @param {Color} BgColor Background Color object. + * @param {Color} TextColor Text Color object. + * + * @returns {string} RGB Color value. + */ + self.getHoverColor = function( BgColor, TextColor ) { + var textLightness = TextColor.getLightness(), + bgLightness = BgColor.getLightness(), + hoverColor; + + // White Text + if ( 1 === textLightness ) { + + // Dark Background + if ( 0.9 <= bgLightness ) { + hoverColor = BgColor.darkenByAmount( 0.15 ); + + // Light Background + } else { + hoverColor = BgColor.blend( TextColor, 0.8 ); + } + + // Black Text + } else if ( 0 === textLightness ) { + + // Dark Background + if ( 0.10 > bgLightness ) { + hoverColor = BgColor.lightenByAmount( 0.2 ); + + // Light Background + } else { + hoverColor = BgColor.blend( TextColor, 0.6 ); + } + + // Light Text on Dark Background. + } else if ( bgLightness < textLightness ) { + + // Color is too light to lighten. + if ( 0.9 < textLightness ) { + hoverColor = TextColor.darkenByAmount( 0.2 ); + } else { + hoverColor = TextColor.lightenByAmount( 0.2 ); + } + + // Dark Text on Light Background. + } else { + + // Color is too dark to darken. + if ( 0.15 > textLightness ) { + hoverColor = TextColor.lightenByAmount( 0.2 ); + } else { + hoverColor = TextColor.darkenByAmount( 0.2 ); + } + } + + hoverColor = hoverColor.toRGB(); + + return 'rgb(' + Math.floor( hoverColor.red * 255 ) + ',' + Math.floor( hoverColor.green * 255 ) + ',' + Math.floor( hoverColor.blue * 255 ) + ')'; + }; + /** * Get a random color * Not Used ATM diff --git a/src/assets/js/customizer/color-palette-preview.js b/src/assets/js/customizer/color-palette-preview.js index 3fc25f70..303b5db9 100644 --- a/src/assets/js/customizer/color-palette-preview.js +++ b/src/assets/js/customizer/color-palette-preview.js @@ -22,6 +22,110 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {}; } }); + /** + * Update CSS overlay colors. + * + * CSS Overlay colors are translucent background colors + * added to elements using PPB. These are currently added using head inline CSS + * since the PPB added this feature before we added the --color-x-raw variables. + * + * This method will update the inline CSS to use the --color-x-raw variables when + * the palette is changed. However, in the future, we should update PPB to use + * the --color-x-raw variables instead of inline CSS. + * + * @since 2.20.0 + */ + self.updateOverlayColors = function() { + var $bgColorElements = $( '[class*="-background-color"]' ), + $imgOverlayElements = $( '[data-bg-overlaycolor-class]' ), + $fwrElements = $( '[class*="fwr-"]' ), + rawColorValues = { + 'color-1-raw': $( ':root' ).css( '--color-1-raw' ), + 'color-2-raw': $( ':root' ).css( '--color-2-raw' ), + 'color-3-raw': $( ':root' ).css( '--color-3-raw' ), + 'color-4-raw': $( ':root' ).css( '--color-4-raw' ), + 'color-5-raw': $( ':root' ).css( '--color-5-raw' ), + 'color-neutral-raw': $( ':root' ).css( '--color-neutral-raw' ), + }; + + $bgColorElements.each( ( _, el ) => { + var $bgColorEl = $( el ), + bgUuid = $bgColorEl.attr( 'data-bg-uuid' ), + $fwrInlineStyle = $( `#${bgUuid}-inline-css` ); + + $fwrInlineStyle.each( ( _, el ) => { + self.updateBgColorOverlays( el, rawColorValues ); + } ); + } ); + + $imgOverlayElements.each( ( _, el ) => { + self.updateImageOverlays( el, rawColorValues ); + } ); + + $fwrElements.each( ( _, el ) => { + var $fwr = $( el ), + classList = $fwr.attr( 'class' ), + fwrId = 'fwr-' + classList.match( /fwr-?(\d+)/ )[1], + $fwrInlineStyle = $( `#${fwrId}-inline-css` ); + + $fwrInlineStyle.each( ( _, el ) => { + self.updateBgColorOverlays( el, rawColorValues ); + } ); + } ); + }; + + /** + * Updage Image Overlay colors. + * + * Elements that have a translucent color overlaying the + * background image that uses a color from the palette, + * has the background-image property set in the elements' + * inline styles. + * + * @since 2.20.0 + * + * @param {object} el Image overlay element. + * @param {object} rawColorValues Raw color values. + */ + self.updateImageOverlays = function( el, rawColorValues ) { + var $el = $( el ), + elStyle = $el.attr( 'style' ), + colorIndex = $el.attr( 'data-bg-overlaycolor-class' ), + overlayValue = rawColorValues[`color-${colorIndex}-raw`], + overlayVariable = `var(--color-${colorIndex}-raw)`; + + $el.attr( + 'style', + elStyle.replace( new RegExp( overlayValue, 'g' ), overlayVariable ) + ); + }; + + + /** + * Update BG Color Overlays. + * + * Elements with a translucent background color + * that uses a color from the palette, and does not + * have a background image, has the background properties + * set in the inline style element. This handles + * Full Width Rows as well. + * + * @since 2.20.0 + * + * @param {object} inlineStyleEl inline style element. + * @param {object} rawColorValues Raw color values. + */ + self.updateBgColorOverlays = function( inlineStyleEl, rawColorValues ) { + var $inlineStyleEl = $( inlineStyleEl ), + styleString = $inlineStyleEl.html(); + + _.each( rawColorValues, ( colorRawValue, colorRawVariable ) => { + styleString = styleString.replace( new RegExp( colorRawValue, 'g' ), `var(--${colorRawVariable})` ); + } ); + + $inlineStyleEl.html( styleString ); + }; + /** * Main responsibility of this file * The to parameter, is a json string that is inside of a textarea in the parent window @@ -44,7 +148,11 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {}; // Update styles. style = document.getElementById( 'boldgrid-color-palettes-inline-css' ); - style.innerHTML = modify.compiled_css; + if ( style ) { + style.innerHTML = ':root{' + modify.css_variables + '}'; + } else { + $( 'head' ).append( '' ); + } }; /** @@ -59,6 +167,9 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {}; .val( parent.BOLDGRID.COLOR_PALETTE.Modify.compiled_css ) .change(); } ); + + // Update overlay colors. + self.updateOverlayColors(); } ); wp.customize( 'boldgrid_compiled_css', function( value ) { diff --git a/src/assets/js/customizer/color-palette.js b/src/assets/js/customizer/color-palette.js index 2645abdb..888c8c60 100644 --- a/src/assets/js/customizer/color-palette.js +++ b/src/assets/js/customizer/color-palette.js @@ -1045,6 +1045,9 @@ BOLDGRID.COLOR_PALETTE.Modify = BOLDGRID.COLOR_PALETTE.Modify || {}; * Change the palette settings */ colorPalette.update_palette_settings = function() { + colorPalette.css_variables = BOLDGRID.COLOR_PALETTE.Generate.cssVariables( colorPalette.state.palettes['palette-primary'] ); + colorPalette.state.css_variables = colorPalette.css_variables; + colorPalette.text_area_val = JSON.stringify({ 'state': colorPalette.state }); wp.customize( 'boldgrid_color_palette' ).set( '' ).set( colorPalette.text_area_val ); }; diff --git a/src/assets/js/customizer/color/preview.js b/src/assets/js/customizer/color/preview.js index 86e6274c..d51768d5 100644 --- a/src/assets/js/customizer/color/preview.js +++ b/src/assets/js/customizer/color/preview.js @@ -49,9 +49,9 @@ export class Preview { properties: [ 'color', 'color-hover' ] }, { - name: 'bgtfw_footer_links', - selector: '.footer-content:not(.template-footer)', - properties: [ 'link-color' ] + name: 'bgtfw_footer_link_color', + selector: '#colophon .bgtfw-footer.footer-content:not(.template-footer) .attribution-theme-mods > .link > a:not( .btn ):hover', + properties: [ 'color' ] } ]; } diff --git a/src/assets/js/customizer/customizer.js b/src/assets/js/customizer/customizer.js index d4ff571d..7baf2d56 100644 --- a/src/assets/js/customizer/customizer.js +++ b/src/assets/js/customizer/customizer.js @@ -547,6 +547,10 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) { value.bind( function( to ) { var palettes, colors; + if ( ! to ) { + to = parent.BOLDGRID.COLOR_PALETTE.Modify.text_area_val; + } + palettes = parent.jQuery( '.colors-wrapper' ); colors = BOLDGRID.Customizer.Util.getInitialPalettes( to ); diff --git a/src/assets/js/customizer/typography/link-preview.js b/src/assets/js/customizer/typography/link-preview.js index 59b625d1..927c4a70 100644 --- a/src/assets/js/customizer/typography/link-preview.js +++ b/src/assets/js/customizer/typography/link-preview.js @@ -14,6 +14,7 @@ export class LinkPreview { this.paletteSelector = new PaletteSelector(); this.prefixes = [ 'bgtfw_body', + 'bgtfw_footer', 'bgtfw_posts_date', 'bgtfw_posts_byline', 'bgtfw_posts_tags', @@ -52,6 +53,10 @@ export class LinkPreview { controls.push( `${prefix}_link_color_display` ); } + if ( 'bgtfw_footer' === prefix ) { + controls = [ `${prefix}_link_color` ]; + } + api( ...controls, ( ...args ) => { args.map( control => control.bind( () => this.updateStyles( prefix ) ) ); } ); @@ -83,13 +88,24 @@ export class LinkPreview { updateStyles( prefix ) { let css = ''; if ( false === _.isFunction( api( `${prefix}_link_color_display` ) ) || 'inherit' !== api( `${prefix}_link_color_display` )() ) { - let linkColor = this._getColor( `${prefix}_link_color`, true ), - linkColorHover = api( `${prefix}_link_color_hover` )() || 0, - decoration = this._getDecoration( `${prefix}_link_decoration` ), + let linkColor, linkColorHover, decoration, decorationHover, excludes, selectors, shiftedColorVal; + if ( 'bgtfw_footer' === prefix ) { + linkColor = this._getColor( `${prefix}_link_color`, true ), + linkColorHover = api( 'bgtfw_body_link_color_hover' )() || 0, + decoration = this._getDecoration( 'bgtfw_body_link_decoration' ), + decorationHover = this._getDecoration( 'bgtfw_body_link_decoration_hover' ), + excludes = '', + selectors = this.selectors[ prefix ], + shiftedColorVal; + } else { + linkColor = this._getColor( `${prefix}_link_color`, true ), + linkColorHover = api( `${prefix}_link_color_hover` )() || 0, + decoration = this._getDecoration( `${prefix}_link_decoration` ), decorationHover = this._getDecoration( `${prefix}_link_decoration_hover` ), - excludes = '', - selectors = this.selectors[ prefix ], + excludes = '', + selectors = this.selectors[ prefix ], shiftedColorVal; + } linkColorHover = parseInt( linkColorHover, 10 ) / 100; @@ -104,7 +120,7 @@ export class LinkPreview { } ${selector}:hover, ${selector}:focus { - color: ${shiftedColorVal}; + color: ${shiftedColorVal} !important; text-decoration: ${decorationHover}; } `; @@ -115,14 +131,13 @@ export class LinkPreview { * controlled by the Site Content Link typography controls. */ if ( 'bgtfw_body' === prefix ) { - let footerLinkColor = this._getColor( 'bgtfw_footer_links', true ), - footerLinkColorHover = api( `${prefix}_link_color_hover` )() || 0, - footerShiftedColorVal; - - footerLinkColorHover = parseInt( footerLinkColorHover, 10 ) / 100, - footerShiftedColorVal = colorLib.Color( footerLinkColor ).lightenByAmount( footerLinkColorHover ).toCSS(); + let colorPaletteOption = api( 'boldgrid_color_palette' )(); - let colorPaletteOption = JSON.parse( api( 'boldgrid_color_palette' )() ); + if ( colorPaletteOption ) { + colorPaletteOption = JSON.parse( api( 'boldgrid_color_palette' )() ); + } else { + colorPaletteOption = parent.BOLDGRID.COLOR_PALETTE.Modify; + } let paletteColors = colorPaletteOption.state.palettes['palette-primary'].colors; let paletteNeutral = colorPaletteOption.state.palettes['palette-primary']['neutral-color']; @@ -138,19 +153,8 @@ export class LinkPreview { css += `.sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):hover, .sidebar.color-${sidebarColorClass}-link-color a:not( .btn ):focus { color: ${sidebarAriColor} !important; }`; } ); - css += ` - #colophon .bgtfw-footer.footer-content > a:not( .btn ), - #colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) { - text-decoration: ${decoration}; - } - #colophon .bgtfw-footer.footer-content > a:not( .btn ):hover, - #colophon .bgtfw-footer.footer-content > a:not( .btn ):focus, - #colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):hover, - #colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):focus { - color: ${footerShiftedColorVal}; - text-decoration: ${decorationHover}; - } - `; + // footer Link Color. + this.updateStyles( 'bgtfw_footer' ); } } diff --git a/src/assets/scss/custom-color/color-classes.scss b/src/assets/scss/custom-color/color-palettes.scss similarity index 50% rename from src/assets/scss/custom-color/color-classes.scss rename to src/assets/scss/custom-color/color-palettes.scss index 2953a2b1..be78ec25 100644 --- a/src/assets/scss/custom-color/color-classes.scss +++ b/src/assets/scss/custom-color/color-palettes.scss @@ -1,127 +1,54 @@ -@function hover($background, $color) { - $style: ''; - $hover-color: ''; - $color-lightness: abs(lightness($color)); - $background-lightness: abs(lightness($background)); +$colors: ( var(--color-1), var(--color-2), var(--color-3), var(--color-4), var(--color-5) ); - @if $color-lightness == 100 { - /* White */ - @if $background-lightness >= 90 { - $hover-color: darken($background, 15); - } @else { - $hover-color: mix($color, $background, 80); - } - } @else if $color-lightness == 0 { - /* Black */ - @if $background-lightness < 10 { - $hover-color: lighten($background, 20); - } @else { - $hover-color: mix($color, $background, 60); - } - } @else if $background-lightness < $color-lightness { - /* Light text on dark background */ - $style: 'lighten'; - @if $color-lightness > 90 { - /* Color too light to lighten */ - $hover-color: darken($color, 20); - $style: 'darken'; - } @else { - $hover-color: lighten($color, 20); - } - } @else { - /* Dark text on light background */ - $style: 'darken'; - @if $color-lightness < 15 { - /* Color is too dark to further darken */ - $hover-color: lighten($color, 20); - $style: 'lighten'; - } @else { - $hover-color: darken($color, 20); - } - } - - @return $hover-color; -} +$palette-primary_1: var(--color-1); +$palette-primary_2: var(--color-2); +$palette-primary_3: var(--color-3); +$palette-primary_4: var(--color-4); +$palette-primary_5: var(--color-5); +$palette-primary-neutral-color: var(--color-neutral); $ubtn-colors: (); -@if variable-exists( palette-primary_1 ) { - $ubtn-colors: append($ubtn-colors,('color-1' $palette-primary_1 var(--color-1-text-contrast))); - @if $ubtn-theme-color == 'palette-primary_1' { - $ubtn-bgcolor: $palette-primary_1; - $ubtn-font-color: var(--color-1-text-contrast); - } -} -@if variable-exists( palette-primary_2 ) { - $ubtn-colors: append($ubtn-colors,('color-2' $palette-primary_2 var(--color-2-text-contrast))); - @if $ubtn-theme-color == 'palette-primary_2' { - $ubtn-bgcolor: $palette-primary_2; - $ubtn-font-color: var(--color-2-text-contrast); - } -} -@if variable-exists( palette-primary_3 ) { - $ubtn-colors: append($ubtn-colors,('color-3' $palette-primary_3 var(--color-3-text-contrast))); - @if $ubtn-theme-color == 'palette-primary_3' { - $ubtn-bgcolor: $palette-primary_3; - $ubtn-font-color: var(--color-3-text-contrast); - } -} -@if variable-exists( palette-primary_4 ) { - $ubtn-colors: append($ubtn-colors,('color-4' $palette-primary_4 var(--color-4-text-contrast))); - @if $ubtn-theme-color == 'palette-primary_4' { - $ubtn-bgcolor: $palette-primary_4; - $ubtn-font-color: var(--color-4-text-contrast); - } -} -@if variable-exists( palette-primary_5 ) { - $ubtn-colors: append($ubtn-colors,('color-5' $palette-primary_5 var(--color-5-text-contrast))); - @if $ubtn-theme-color == 'palette-primary_5' { - $ubtn-bgcolor: $palette-primary_5; - $ubtn-font-color: var(--color-5-text-contrast); - } -} -@if variable-exists( palette-primary-neutral-color ) { - $ubtn-colors: append($ubtn-colors,('neutral-color' $palette-primary-neutral-color var(--color-neutral-text-contrast))); - @if $ubtn-theme-color == 'palette-primary-neutral-color' { - $ubtn-bgcolor: $palette-primary-neutral-color; - $ubtn-font-color: var(--color-neutral-text-contrast); - } -} -@if variable-exists( palette-primary-transparent-color ) { - $ubtn-colors: append($ubtn-colors,('transparent-color' $palette-primary-transparent-color var(--color-neutral-text-contrast))); - @if $ubtn-theme-color == 'palette-primary-transparent-color' { - $ubtn-bgcolor: $palette-primary-transparent-color; - $ubtn-font-color: var(--color-neutral-text-contrast); - } -} +$ubtn-colors: append($ubtn-colors,('color-1' var( --color-1 ) var(--color-1-text-contrast) var( --color-1-light ) var( --color-1-dark ) )); + +$ubtn-colors: append($ubtn-colors,('color-2' var( --color-2 ) var(--color-2-text-contrast) var( --color-2-light ) var( --color-2-dark ))); + +$ubtn-colors: append($ubtn-colors,('color-3' var( --color-3 ) var(--color-3-text-contrast) var( --color-3-light ) var( --color-3-dark ))); + +$ubtn-colors: append($ubtn-colors,('color-4' var( --color-4 ) var(--color-4-text-contrast) var( --color-4-light ) var( --color-4-dark ))); + +$ubtn-colors: append($ubtn-colors,('color-5' var( --color-5 ) var(--color-5-text-contrast) var( --color-5-light ) var( --color-5-dark ))); + +$ubtn-colors: append($ubtn-colors,('neutral-color' var( --color-neutral ) var(--color-neutral-text-contrast) var( --color-neutral-light ) var( --color-neutral-dark ))); + /* Create single css classes to apply palettes on universal elements. */ $names: background background-color; .sidebar.transparent-background-color { @for $color from 1 through length( $colors ) { @for $each from 1 through length( $colors ) { - $reference: nth($colors, $color); + $reference: var(--color-#{$color}); &.color-#{$each}-link-color { a:not( .btn ) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } } } @if variable-exists( palette-primary-neutral-color ) { &.color-neutral-link-color { a:not( .btn ) { - color: $palette-primary-neutral-color; + color: var(--color-neutral); } } &.color-neutral-sub-link-color.sm { ul.sub-menu:not( .custom-sub-menu ) { li.menu-item { > a:not(.btn) { - color: $palette-primary-neutral-color; + color: var(--color-neutral); } > a:not(.btn) { &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), $palette-primary-neutral-color ); + color: var(--bg-#{$color}-text-neutral-hover); } } } @@ -130,25 +57,25 @@ $names: background background-color; } &-hover { &:focus, &:hover { - background-color: nth($colors, $color) ! important; + background-color: var(--color-#{$color}) ! important; } } } } @for $i from 1 through length( $names ) { @for $color from 1 through length( $colors ) { - $reference: nth($colors, $color); + $reference: var(--color-#{$color}); .color#{$color}-#{nth( $names, $i )} { @for $each from 1 through length( $colors ) { &.color-#{$each}-link-color { li.menu-item:not( .custom-sub-menu ), .attribution-theme-mods .link { > a:not( .btn ) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } > a:not( .btn ) { &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), nth($colors, $each) ); + color: var(--bg-#{$color}-text-#{$each}-hover); } } } @@ -159,11 +86,11 @@ $names: background background-color; &.panel-footer { &.color-#{$each}-link-color { a:not( .btn ) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } > a:not( .btn ) { &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), nth($colors, $each) ); + color: var(--bg-#{$color}-text-#{$each}-hover); } } } @@ -171,7 +98,7 @@ $names: background background-color; &.sidebar { &.color-#{$each}-link-color { a:not( .btn ) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } } } @@ -189,11 +116,11 @@ $names: background background-color; } li.menu-item:not( .custom-sub-menu ) { > a:not(.btn) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } > a:not(.btn) { &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), nth($colors, $each) ); + color: var(--bg-#{$color}-text-#{$each}-hover); } } } @@ -201,9 +128,9 @@ $names: background background-color; &.color-#{$subeach}-sub-link-color { li.menu-item:not( .custom-sub-menu ) { ul.sub-menu:not( .custom-sub-menu ) > a:not(.btn) { - color: #{nth($colors, $subeach)}; + color: var(--color-#{$subeach}); &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $subeach), nth($colors, $subeach) ); + color: var(--bg-#{$color}-text-#{$subeach}-hover); } } } @@ -216,9 +143,9 @@ $names: background background-color; &.color-neutral-link-color { a { &:not( .in-mega ):not( .btn ) { - color: $palette-primary-neutral-color; + color: var(--color-neutral); &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), $palette-primary-neutral-color ); + color: var(--bg-#{$color}-text-neutral-hover); } } } @@ -227,9 +154,9 @@ $names: background background-color; ul.sub-menu:not( .custom-sub-menu ) { li.menu-item:not( .custom-sub-menu ) { > a:not(.btn) { - color: $palette-primary-neutral-color; + color: var(--color-neutral); &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), $palette-primary-neutral-color ); + color: var(--bg-#{$color}-text-neutral-hover); } } } @@ -240,9 +167,9 @@ $names: background background-color; ul.sub-menu:not( .custom-sub-menu ) { li.menu-item:not( .custom-sub-menu ) { > a:not(.btn) { - color: #{nth($colors, $subEach)}; + color: var(--color-#{$subEach}); &:hover, &:focus, &:active, &.highlighted { - color: hover( nth($colors, $color), nth($colors, $subEach) ); + color: var(--bg-#{$color}-text-#{$subEach}-hover); } } } @@ -262,11 +189,11 @@ $names: background background-color; @for $each from 1 through length( $colors) { &.color-#{$each}-link-color { a { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); } &:not( .sidebar ) { a:hover, a:focus, a:active, a.highlighted { - color: hover( $palette-primary-neutral-color, nth($colors, $each) ); + color: var(--bg-neutral-text-#{$each}-hover); } } } @@ -274,9 +201,9 @@ $names: background background-color; ul.sub-menu:not( .custom-sub-menu ) { li.menu-item:not( .custom-sub-menu ) { > a:not(.btn) { - color: #{nth($colors, $each)}; + color: var(--color-#{$each}); &:hover, &:focus, &:active, &.highlighted { - color: hover( $palette-primary-neutral-color, nth($colors, $each) ); + color: var(--bg-neutral-text-#{$each}-hover); } } } @@ -285,19 +212,19 @@ $names: background background-color; } &.color-neutral-link-color { a { - color: $palette-primary-neutral-color; + color: var(--color-neutral); } a:hover, a:focus, a:active, a.highlighted { - color: hover( $palette-primary-neutral-color, $palette-primary-neutral-color ); + color: var(--bg-neutral-text-neutral-hover); } } &.color-neutral-sub-link-color.sm { ul.sub-menu:not( .custom-sub-menu ) { li.menu-item:not( .custom-sub-menu ) { > a:not(.btn) { - color: $palette-primary-neutral-color; + color: var(--color-neutral); &:hover, &:focus, &:active, &.highlighted { - color: hover( $palette-primary-neutral-color, $palette-primary-neutral-color ); + color: var(--bg-neutral-text-neutral-hover); } } } @@ -317,8 +244,11 @@ $names: background background-color; @each $ubtn-color in $ubtn-colors { $ubtn-name: nth($ubtn-color, 1); $ubtn-background: nth($ubtn-color, 2); + $ubtn-bg-light: nth($ubtn-color, 4); + $ubtn-bg-dark: nth($ubtn-color, 5); $ubtn-color: nth($ubtn-color, 3); + // Crete class for .button-primary // and legacy flat .button-primary-flat .btn-#{$ubtn-name}, @@ -328,6 +258,12 @@ $names: background background-color; background-color: $ubtn-background !important; border-color: $ubtn-background; color: $ubtn-color; + &.btn-raised { + background: linear-gradient( $ubtn-background, $ubtn-bg-light ) !important; + &:hover, &:focus { + background: linear-gradient( $ubtn-bg-light, $ubtn-background ) !important; + } + } a { color: $ubtn-color; } @@ -341,8 +277,8 @@ $names: background background-color; &:hover, &:focus { - background-color: lighten($ubtn-background, 10%) !important; - border-color: lighten($ubtn-background, 10%); + background-color: $ubtn-bg-light !important; + border-color: $ubtn-bg-light; color: $ubtn-color; a { color: $ubtn-color; @@ -352,9 +288,9 @@ $names: background background-color; &:active, &.active, &.is-active { - background-color: desaturate($ubtn-background, 10%) !important; - border-color: desaturate($ubtn-background, 10%); - color: darken($ubtn-background, 10%); + background-color: $ubtn-bg-light !important; + border-color: $ubtn-bg-light; + color: $ubtn-color; a { color: $ubtn-color; } @@ -373,13 +309,13 @@ $names: background background-color; &:hover, &:focus { &.btn-transparent{ - background-color: lighten($ubtn-background, 10%) !important; + background-color: $ubtn-bg-light !important; color: $ubtn-color; a { color: $ubtn-color; } } - border-color: lighten($ubtn-background, 10%) !important; + border-color: $ubtn-bg-light !important; } @@ -387,13 +323,13 @@ $names: background background-color; &.active, &.is-active { &.btn-transparent{ - background-color: lighten($ubtn-background, 10%) !important; - color: darken($ubtn-background, 10%); + background-color: $ubtn-bg-light !important; + color: $ubtn-color; a { color: $ubtn-color; } } - border-color: desaturate($ubtn-background, 10%) !important; + border-color: $ubtn-bg-light !important; } } } diff --git a/src/assets/scss/customizer/controls/_link-colors.scss b/src/assets/scss/customizer/controls/_link-colors.scss index 9ae72f80..bbc39ce5 100644 --- a/src/assets/scss/customizer/controls/_link-colors.scss +++ b/src/assets/scss/customizer/controls/_link-colors.scss @@ -1,7 +1,7 @@ [id^="customize-control-bgtfw_"] { &[id$="_link_color"], &[id$="_link_color_display"] { - &:not( [id$="_link_color_display"] ), + &:not( [id$="_link_color_display"] ):not( [id$="_footer_link_color"] ), ~ [id$="_link_color"], ~ [id$="_link_color_hover"], ~ [id$="_link_decoration"], @@ -22,7 +22,7 @@ padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - &[id$="_link_color"] { + &[id$="_link_color"]:not( [id$="_footer_link_color"] ) { border-top: 1px solid rgba(0, 0, 0, 0.1); } &[id$="_link_color_display"] + &[id$="_link_color"] { diff --git a/src/includes/class-boldgrid-framework-api.php b/src/includes/class-boldgrid-framework-api.php index eeb0896e..6ef90010 100644 --- a/src/includes/class-boldgrid-framework-api.php +++ b/src/includes/class-boldgrid-framework-api.php @@ -371,7 +371,7 @@ public function inner_footer_classes( $classes ) { $classes = array_merge( $classes, $this->get_background_color( 'bgtfw_footer_color' ), - $this->get_link_color( 'bgtfw_footer_links' ) + $this->get_link_color( 'bgtfw_footer_link_color' ) ); } diff --git a/src/includes/class-boldgrid-framework-compile-colors.php b/src/includes/class-boldgrid-framework-compile-colors.php index 718b11f9..23d9ac83 100644 --- a/src/includes/class-boldgrid-framework-compile-colors.php +++ b/src/includes/class-boldgrid-framework-compile-colors.php @@ -172,9 +172,189 @@ public function get_scss_variables() { $color_variables['ubtn-font-color'] = '$text-contrast-' . get_theme_mod( 'boldgrid_palette_class', 'palette-primary' ) . '_' . $this->get_button_default_color() . ';'; $color_variables['ubtn-theme-color'] = get_theme_mod( 'boldgrid_palette_class', 'palette-primary' ) . '_' . $this->get_button_default_color() . ';'; } + return $color_variables; } + /** + * Generate SCSS variables for Hover Colors. + * + * @since 2.20.0 + * + * @param array $formatted_palette Array of formatted palette colors. + * @param string $text_color_name Property to generate hover colors for. + * @param string $text_color_value Value of color. + * + * @return string $scss_variables SCSS variables for hover colors. + */ + public function generate_hover_variables( $formatted_palette, $text_color_name, $text_color_value ) { + $hover_variables = ''; + $text_index = str_replace( 'color-', '', $text_color_name ); + $text_rgba_array = $this->get_rgb_array( $text_color_value ); + $light_hsla_array = $this->rgba_to_hsla( $text_rgba_array, 10 ); + $lighter_hsla_array = $this->rgba_to_hsla( $text_rgba_array, 20 ); + $dark_hsla_array = $this->rgba_to_hsla( $text_rgba_array, -10 ); + $darker_hsla_array = $this->rgba_to_hsla( $text_rgba_array, -20 ); + + foreach ( $formatted_palette as $bg_color_name => $bg_color_value ) { + $bg_index = str_replace( 'color-', '', $bg_color_name ); + $hover_color = $this->get_hover_color( + $this->normalize( $bg_color_value ), + $this->normalize( $text_color_value ) + ); + $hover_variables .= "--bg-$bg_index-text-$text_index-hover: $hover_color;"; + } + + return $hover_variables; + } + + /** + * Get the hover color for a given background and text color. + * + * All the logic for determining the hover color was + * derived from the SCSS functions defined prior to the + * 2.2.0 release in the following file: + * + * src/assets/scss/custom-color/color-palettes.scss + * + * @since 2.20.0 + * + * @param string $bg_color_value Background color value. + * @param string $text_color_value Text color value. + * + * @return string $hover_color Hover color. + */ + public function get_hover_color( $bg_color_value, $text_color_value ) { + $text_lightness = intval( $this->get_luminance( $text_color_value ) ); + $bg_lightness = intval( $this->get_luminance( $bg_color_value ) ); + $bg_rgb_array = $this->get_rgb_array( $bg_color_value ); + $text_rgb_array = $this->get_rgb_array( $text_color_value ); + + if ( 100 === $text_lightness ) { + // White text. + if ( 90 <= $bg_lightness ) { + // Light background. + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $bg_rgb_array, -15 ) + ); + } else { + // Dark background. + $hover_color = $this->rgba_array_to_string( + $this->mix_rbg_colors( $text_rgb_array, $bg_rgb_array, 0.8 ) + ); + } + } elseif ( 0 === $text_lightness ) { + // Black text. + if ( 10 > $bg_lightness ) { + // Dark background. + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $bg_rgb_array, 20 ) + ); + } else { + // Light background. + $hover_color = $this->rgba_array_to_string( + $this->mix_rbg_colors( $text_rgb_array, $bg_rgb_array, 0.6 ) + ); + } + } elseif ( $bg_lightness < $text_lightness ) { + // Light text on dark background. + if ( 90 < $text_lightness ) { + // Color to light to lighten. + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $text_rgb_array, -20 ) + ); + } else { + // Dark background. + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $text_rgb_array, 20 ) + ); + } + } else { + // Dark text on light background. + if ( 15 > $text_lightness ) { + // Color is too dark to darken. + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $text_rgb_array, 20 ) + ); + } else { + $hover_color = $this->hsla_array_to_string( + $this->rgba_to_hsla( $text_rgb_array, -20 ) + ); + } + } + + return $hover_color; + } + + /** + * RGBA array to string. + * + * Convert an RGBA array to a formatted string. + * + * @since 2.20.0 + * + * @param array $rgba_array RGBA array. + * + * @return string $rgba_string RGBA string. + */ + public function rgba_array_to_string( $rgba_array ) { + $r = $rgba_array[0]; + $g = $rgba_array[1]; + $b = $rgba_array[2]; + $a = isset( $rgba_array[3] ) ? $rgba_array[3] : 1; + + $rgba_string = 'rgba(' . $r . ',' . $g . ',' . $b . ',' . $a . ')'; + return $rgba_string; + } + + /** + * HSLA array to string. + * + * Convert an HSLA array to a formatted string. + * + * @since 2.20.0 + * + * @param array $hsla_array HSLA array. + * + * @return string $hsla_string HSLA string. + */ + public function hsla_array_to_string( $hsla_array ) { + $h = $hsla_array[0]; + $s = $hsla_array[1]; + $l = $hsla_array[2]; + $a = isset( $hsla_array[3] ) ? $hsla_array[3] : 1; + + $hsla_string = 'hsla(' . $h . ',' . $s . ',' . $l . ',' . $a . ')'; + return $hsla_string; + } + + /** + * Mix Two RGB Colors. + * + * @since 2.20.0 + * + * @param array $color_1 RGB Color 1. + * @param array $color_2 RGB Color 2. + * @param float $weight Mix Weight. + * + * @return array $mixed_color Mixed Color. + */ + public function mix_rbg_colors( $color_1 = array( 0, 0, 0 ), $color_2 = array( 0, 0, 0 ), $weight = 0.5 ) { + $f = function ( $x ) use ( $weight ) { + return $weight * $x; + }; + + $g = function ( $x ) use ( $weight ) { + return ( 1 - $weight ) * $x; + }; + + $h = function ( $x, $y ) { + return round( $x + $y ); + }; + + return array_map( $h, array_map( $f, $color_1 ), array_map( $g, $color_2 ) ); + } + /** * Converts a hex color into an array of RGB. * @@ -334,7 +514,7 @@ public function get_button_default_color() { */ public function get_button_color_files( $files ) { $s = $this->configs['components']['buttons']['variables']; - $path = $this->configs['customizer-options']['colors']['settings']['scss_directory']['framework_dir'] . '/buttons/'; + $path = $this->configs['framework']['asset_dir'] . 'scss/custom-color/buttons/'; $configs = array(); // Build an array of button-classes that are needed. if ( ! empty( $s['button-primary-classes'] ) ) { @@ -424,6 +604,82 @@ public function normalize( $color ) { return $normalized; } + /** + * Get RGB(A) Array from rgb or rgba string. + * + * Returns an array of R,G,B,A values from a string. + * + * @since 2.20.0 + */ + public function get_rgb_array( $color ) { + $rgba_string = $this->normalize( $color ); + $rgba_string = str_replace( 'rgba(', '', $rgba_string ); + $rgba_string = str_replace( ')', '', $rgba_string ); + + $rgba = explode( ',', $rgba_string ); + return $rgba; + } + + /** + * Convert RGBA to HSLA. + * + * @since 2.20.0 + * + * @param array $rgba_array Array of RGBA values. + * @param int $luminosity_adjust Luminosity to adjust (optional). + * + * @return array $hsla_array HSLA array. + */ + public function rgba_to_hsla( $rgba_array, $luminosity_adjust = 0 ) { + $r = intval( $rgba_array[0] ); + $g = intval( $rgba_array[1] ); + $b = intval( $rgba_array[2] ); + $a = isset( $rgba_array[3] ) ? intval( $rgba_array[3] ) : 1; + + $r /= 255; + $g /= 255; + $b /= 255; + + $max = max( $r, $g, $b ); + $min = min( $r, $g, $b ); + + $h; + $s; + $l = ( $max + $min ) / 2; + $d = $max - $min; + + // If difference is 0, then it's a shade of grey. + if ( 0 == $d ) { + $h = 0; + $s = 0; + } else { + $s = $d / ( 1 - abs( 2 * $l - 1 ) ); + switch ( $max ) { + case $r: + $h = 60 * fmod( ( ( $g - $b ) / $d ), 6 ); + if ( $b > $g ) { + $h += 360; + } + break; + + case $g: + $h = 60 * ( ( $b - $r ) / $d + 2 ); + break; + + case $b: + $h = 60 * ( ( $r - $g ) / $d + 4 ); + break; + } + } + + return array( + round( $h, 2 ), + round( $s, 2 ) * 100 . '%', + ( round( $l, 2 ) * 100 ) + $luminosity_adjust . '%', + $a, + ); + } + /** * Get color class associated with a color passed in. * diff --git a/src/includes/class-boldgrid-framework-links.php b/src/includes/class-boldgrid-framework-links.php index 84d677ff..d03a3818 100644 --- a/src/includes/class-boldgrid-framework-links.php +++ b/src/includes/class-boldgrid-framework-links.php @@ -56,6 +56,15 @@ public function __construct( $configs ) { '.template-sticky-header a:not(.btn)', ); + /** + * Footer Link Selectors. + * + * @var array + */ + public static $footer_link_selectors = array( + '#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn )', + ); + /** * Selectors to use for edit vars. * @@ -162,8 +171,19 @@ public function get_styles( $prefix ) { } if ( 'bgtfw_body' === $prefix ) { - $footer_link_color = explode( ':', get_theme_mod( 'bgtfw_footer_links' ) )[1]; - $footer_ari_color = ariColor::newColor( $color ); + /** + * The footer link theme mod name was changed from + * 'bgtfw_footer_links' to 'bgtfw_footer_link_color' in + * 2.20.0, so we need to check for both to ensure backwards compatibility. + */ + $footer_link_color = explode( + ':', + get_theme_mod( + 'bgtfw_footer_link_color', + get_theme_mod( 'bgtfw_footer_links' ) + ) + )[1]; + $footer_ari_color = ariColor::newColor( $footer_link_color ); $footer_color_hover = get_theme_mod( "${prefix}_link_color_hover" ) ?: 0; $footer_lightness = min( $footer_ari_color->lightness + $footer_color_hover, 100 ); $footer_lightness = max( $footer_lightness, 0 ); @@ -180,8 +200,8 @@ public function get_styles( $prefix ) { $css .= ".sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):hover, .sidebar.color-${sidebar_color_class}-link-color a:not( .btn ):focus { color: ${sidebar_color_hover} !important; }"; } - $css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ) { text-decoration: ${decoration};}"; - $css .= "#colophon .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):hover, .bgtfw-footer.footer-content *:not( .menu-item ) > a:not( .btn ):focus {color: ${footer_color_hover};text-decoration: ${decoration_hover};}"; + $css .= "#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ) { text-decoration: ${decoration};}"; + $css .= "#colophon .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ):hover, .bgtfw-footer.footer-content .attribution-theme-mods > .link > a:not( .btn ):focus {color: ${footer_color_hover};text-decoration: ${decoration_hover};}"; } } } diff --git a/src/includes/class-boldgrid-framework-styles.php b/src/includes/class-boldgrid-framework-styles.php index 7acb485b..cbeb138a 100644 --- a/src/includes/class-boldgrid-framework-styles.php +++ b/src/includes/class-boldgrid-framework-styles.php @@ -303,20 +303,13 @@ public function enqueue_colors( $deps = array() ) { $inline_override = true === $this->configs['framework']['inline_styles']; $is_changeset = ! empty( $_REQUEST['customize_changeset_uuid'] ) && ! is_customize_preview(); - if ( $inline_override || $is_changeset || is_customize_preview() ) { - wp_register_style( $handle, false ); - wp_enqueue_style( $handle ); - $css = get_theme_mod( 'boldgrid_compiled_css', '' ); - wp_add_inline_style( $handle, $css ); - } else { - wp_register_style( - $handle, - Boldgrid_Framework_Customizer_Colors::get_colors_uri( $this->configs ), - $deps, - $last_mod - ); - wp_enqueue_style( $handle ); - } + wp_register_style( + $handle, + Boldgrid_Framework_Customizer_Colors::get_colors_uri( $this->configs ), + $deps, + $last_mod + ); + wp_enqueue_style( $handle ); } if ( true === $this->configs['edit-post-links']['enabled'] ) { @@ -618,15 +611,35 @@ public function get_css_vars( $inline_css = '' ) { $inline_css .= "--light-text:{$light};"; $inline_css .= "--dark-text:{$dark};"; $additional_css = ''; + foreach ( $formatted_palette as $property => $value ) { + $value_rgba_array = $helper->get_rgb_array( $value ); + $light_hsla_array = $helper->rgba_to_hsla( $value_rgba_array, 10 ); + $lighter_hsla_array = $helper->rgba_to_hsla( $value_rgba_array, 20 ); + $dark_hsla_array = $helper->rgba_to_hsla( $value_rgba_array, -10 ); + $darker_hsla_array = $helper->rgba_to_hsla( $value_rgba_array, -20 ); + + $value_raw = str_replace( array( 'rgb(', ')' ), array( '', '' ), $value ); + $value_light = 'hsla(' . implode( ',', $light_hsla_array ) . ')'; + $value_lighter = 'hsla(' . implode( ',', $lighter_hsla_array ) . ')'; + $value_dark = 'hsla(' . implode( ',', $dark_hsla_array ) . ')'; + $value_darker = 'hsla(' . implode( ',', $darker_hsla_array ) . ')'; $contrast_color = $helper->get_luminance( $value ); - $lightness = abs( $contrast_color - $helper->get_luminance( $light ) ); - $darkness = abs( $contrast_color - $helper->get_luminance( $dark ) ); + $lightness = abs( $contrast_color - $helper->get_luminance( $light ) ); + $darkness = abs( $contrast_color - $helper->get_luminance( $dark ) ); $contrast_color = $lightness > $darkness ? 'light' : 'dark'; $contrast_color = "var(--{$contrast_color}-text)"; $inline_css .= "--{$property}:{$value};"; + $inline_css .= "--{$property}-light:{$value_light};"; + $inline_css .= "--{$property}-lighter:{$value_lighter};"; + $inline_css .= "--{$property}-dark:{$value_dark};"; + $inline_css .= "--{$property}-darker:{$value_darker};"; + $inline_css .= "--{$property}-raw:{$value_raw};"; $inline_css .= "--{$property}-text-contrast:{$contrast_color};"; + + $inline_css .= $helper->generate_hover_variables( $formatted_palette, $property, $value ); + $property2 = str_replace( '-', '', $property ); $additional_css .= ".{$property}-text-default, .{$property2}-text-default{color: var(--{$property}-text-contrast);}"; $additional_css .= ".{$property}-text-contrast, .{$property2}-text-contrast, .{$property}-text-contrast-hover:hover, .{$property2}-text-contrast-hover:hover, .{$property}-text-contrast-hover:focus, .{$property2}-text-contrast-hover:focus { color: var(--{$property}-text-contrast) !important;}"; diff --git a/src/includes/configs/customizer-options/colors.config.php b/src/includes/configs/customizer-options/colors.config.php index 249e5434..71743e3c 100644 --- a/src/includes/configs/customizer-options/colors.config.php +++ b/src/includes/configs/customizer-options/colors.config.php @@ -18,12 +18,6 @@ 'light_text' => '#ffffff', 'dark_text' => '#4d4d4d', 'settings' => array( - // Directory that contains SCSS files to be compiled. - 'scss_directory' => array( - 'framework_dir' => $bgtfw_configs['framework']['asset_dir'] . 'scss/custom-color', - 'default' => '/inc/boldgrid-theme-framework-config/scss', - ), - // After the helper compiles the css, where should the css be stored? 'output_css_name' => $bgtfw_configs['framework']['config_directory']['template'] . '/css/color-palettes.css', diff --git a/src/includes/configs/customizer/controls/footer-layout.controls.php b/src/includes/configs/customizer/controls/footer-layout.controls.php index 75b9710e..9f69c265 100644 --- a/src/includes/configs/customizer/controls/footer-layout.controls.php +++ b/src/includes/configs/customizer/controls/footer-layout.controls.php @@ -128,7 +128,7 @@ ), ), ), - 'bgtfw_footer_links' => array( + 'bgtfw_footer_link_color' => array( 'type' => 'bgtfw-palette-selector', 'transport' => 'postMessage', 'settings' => 'bgtfw_footer_links', @@ -136,10 +136,11 @@ 'description' => esc_attr__( 'Change the color of your attribution links if shown.', 'crio' ), 'section' => 'bgtfw_footer_colors', 'priority' => 30, - 'default' => '', + 'default' => get_theme_mod( 'bgtfw_footer_links', '' ), 'choices' => array( - 'colors' => $bgtfw_formatted_palette, - 'size' => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ), + 'selectors' => Boldgrid_Framework_Links::$footer_link_selectors, + 'colors' => $bgtfw_formatted_palette, + 'size' => $bgtfw_palette->get_palette_size( $bgtfw_formatted_palette ), ), 'sanitize_callback' => array( $bgtfw_color_sanitize, 'sanitize_palette_selector' ), ), diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-colors.php b/src/includes/customizer/class-boldgrid-framework-customizer-colors.php index a1413b69..0c21d751 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer-colors.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer-colors.php @@ -185,7 +185,7 @@ public function add_palette_controls() { 'default' => '', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', - 'transport' => 'refresh', + 'transport' => 'postMessage', ) ); $this->wp_customize->add_control( diff --git a/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php b/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php index 022a485d..81487770 100644 --- a/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php +++ b/src/includes/customizer/class-boldgrid-framework-customizer-widget-meta.php @@ -445,7 +445,7 @@ public function get_sidebar_defaults( $sidebar_id, $type = false ) { $settings[ $sidebar_id ]['background_color'] = get_theme_mod( 'bgtfw_footer_color', $this->get_control_default( 'bgtfw_footer_color' ) ); } if ( empty( $settings[ $sidebar_id ]['links_color'] ) ) { - $settings[ $sidebar_id ]['links_color'] = get_theme_mod( 'bgtfw_footer_links', $this->get_control_default( 'bgtfw_footer_links' ) ); + $settings[ $sidebar_id ]['links_color'] = get_theme_mod( 'bgtfw_footer_link_color', $this->get_control_default( 'bgtfw_footer_link_color' ) ); } } From d23c92b15ef490a1f1094249ff0a9a9821ff1f50 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Mon, 3 Apr 2023 15:14:14 -0400 Subject: [PATCH 05/10] set versions to rc1 --- package.json | 2 +- readme.txt | 2 +- src/boldgrid-theme-framework.php | 2 +- style.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 7329dfdd..de055e36 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "boldgrid-theme-framework", - "version": "2.19.2", + "version": "2.20.0-rc1", "description": "BoldGrid Theme Framework", "main": "index.js", "engines": { diff --git a/readme.txt b/readme.txt index c124444e..81ee250e 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: news, blog, e-commerce, sticky-post, theme-options, threaded-comments, ful Requires PHP: 5.6 Requires at least: 4.8 Tested up to: 6.2 -Stable tag: 2.19.2 +Stable tag: 2.20.0-rc1 License: GPL-3.0-or-later License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html diff --git a/src/boldgrid-theme-framework.php b/src/boldgrid-theme-framework.php index e9928842..7d8315f1 100644 --- a/src/boldgrid-theme-framework.php +++ b/src/boldgrid-theme-framework.php @@ -3,7 +3,7 @@ * Plugin Name: BoldGrid Theme Framework * Plugin URI: https://www.boldgrid.com/docs/configuration-file * Description: BoldGrid Theme Framework is a library that allows you to easily make BoldGrid themes. Please see our reference guide for more information: https://www.boldgrid.com/docs/configuration-file - * Version: 2.19.2 + * Version: 2.20.0-rc1 * Author: BoldGrid.com * Author URI: https://www.boldgrid.com/ * Text Domain: bgtfw diff --git a/style.css b/style.css index e689d040..be53dffe 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ Author: BoldGrid Theme URI: https://www.boldgrid.com/themes/crio/ Author URI: https://www.boldgrid.com/ Description: Crio is a WordPress SuperTheme that allows front-end designers, developers and other web professionals to create without bounds or restrictions. Crio's advanced customization options are completely integrated with the WordPress Customizer API, providing you with a powerful, but familiar interface to customize your website. Our integration gives you granular control over many elements straight from the Customizer, and even device previews so you can see how your site looks on different devices. Crio’s unique color palette system keeps colors consistent across your site. Drag and drop colors in your palette to increase or decrease the usage of that color throughout your website. Use the advanced controls to create a custom Header, Footer, or Blog Page layout. Be Bold and stand above the rest with Prime by BoldGrid! -Version: 2.19.2 +Version: 2.20.0-rc1 Requires at least: 5.5 Tested up to: 6.2 Requires PHP: 5.6 From e1b625df0acc222df195c2c0bf478da834924312 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 4 Apr 2023 02:25:15 -0400 Subject: [PATCH 06/10] fixed issues due to merge conflicts --- prime/inc/boldgrid-theme-framework-config/config.php | 4 ++-- .../configs/customizer/controls/footer-layout.controls.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/prime/inc/boldgrid-theme-framework-config/config.php b/prime/inc/boldgrid-theme-framework-config/config.php index 820647fe..33f55774 100755 --- a/prime/inc/boldgrid-theme-framework-config/config.php +++ b/prime/inc/boldgrid-theme-framework-config/config.php @@ -219,8 +219,8 @@ function boldgrid_prime_framework_config( $config ) { $config['customizer']['controls']['bgtfw_header_color']['default'] = 'color-5'; // Footer specific colors for background, headings, and links. - $config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5'; - $config['customizer']['controls']['bgtfw_footer_link_color']['default'] = 'color-1'; + $config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5'; + $config['customizer']['controls']['bgtfw_footer_link_color']['default'] = get_theme_mod( 'bgtfw_footer_links', 'color-1' ); // Page title display settings, show by default. $config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show'; diff --git a/src/includes/configs/customizer/controls/footer-layout.controls.php b/src/includes/configs/customizer/controls/footer-layout.controls.php index 9f69c265..b2ba07d2 100644 --- a/src/includes/configs/customizer/controls/footer-layout.controls.php +++ b/src/includes/configs/customizer/controls/footer-layout.controls.php @@ -131,7 +131,7 @@ 'bgtfw_footer_link_color' => array( 'type' => 'bgtfw-palette-selector', 'transport' => 'postMessage', - 'settings' => 'bgtfw_footer_links', + 'settings' => 'bgtfw_footer_link_color', 'label' => esc_attr__( 'Attribution Link Colors', 'crio' ), 'description' => esc_attr__( 'Change the color of your attribution links if shown.', 'crio' ), 'section' => 'bgtfw_footer_colors', From 2dba0e9e20e0ef9848589bcd257bef13f896d0f4 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Tue, 4 Apr 2023 02:33:07 -0400 Subject: [PATCH 07/10] fix repeated changes not binding --- src/assets/js/customizer/color-palette-preview.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/assets/js/customizer/color-palette-preview.js b/src/assets/js/customizer/color-palette-preview.js index 303b5db9..599f9d54 100644 --- a/src/assets/js/customizer/color-palette-preview.js +++ b/src/assets/js/customizer/color-palette-preview.js @@ -92,7 +92,14 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {}; elStyle = $el.attr( 'style' ), colorIndex = $el.attr( 'data-bg-overlaycolor-class' ), overlayValue = rawColorValues[`color-${colorIndex}-raw`], - overlayVariable = `var(--color-${colorIndex}-raw)`; + overlayVariable = `var(--color-${colorIndex}-raw)`, + colorMatches = elStyle.match( new RegExp( overlayValue, 'g' ) ); + + // If the color value is not found, try removing the spaces. + if ( ! colorMatches ) { + overlayValue = overlayValue.replace( /\s/g, '' ); + colorMatches = elStyle.match( new RegExp( overlayValue, 'g' ) ); + } $el.attr( 'style', From 6a4f0c161415cd0b547e4870fda1035b01d2c93e Mon Sep 17 00:00:00 2001 From: jamesros Date: Wed, 5 Apr 2023 11:24:07 -0400 Subject: [PATCH 08/10] Rc1 fixes (#62) * add colorx-background-alpha styles * fix menu items font color not updating right --- src/assets/scss/boldgrid/_elements.scss | 18 ++++++++++++++++++ .../class-boldgrid-framework-links.php | 2 +- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/src/assets/scss/boldgrid/_elements.scss b/src/assets/scss/boldgrid/_elements.scss index 00cff63b..aa715667 100644 --- a/src/assets/scss/boldgrid/_elements.scss +++ b/src/assets/scss/boldgrid/_elements.scss @@ -366,3 +366,21 @@ body.bgtfw-edit-links-hidden .bgtfw-edit-link a { transform: scale3d(.3, .3, .3); } } + +.palette-primary { + .color1-background-alpha { + background-color: rgba( var(--color-1-raw), 0.7 ); + } + .color2-background-alpha { + background-color: rgba( var(--color-2-raw), 0.7 ); + } + .color3-background-alpha { + background-color: rgba( var(--color-3-raw), 0.7 ); + } + .color4-background-alpha { + background-color: rgba( var(--color-4-raw), 0.7 ); + } + .color5-background-alpha { + background-color: rgba( var(--color-5-raw), 0.7 ); + } +} diff --git a/src/includes/class-boldgrid-framework-links.php b/src/includes/class-boldgrid-framework-links.php index d03a3818..084fd4e4 100644 --- a/src/includes/class-boldgrid-framework-links.php +++ b/src/includes/class-boldgrid-framework-links.php @@ -51,7 +51,7 @@ public function __construct( $configs ) { '.custom-sub-menu a:not(.btn)', '.page-header-wrapper a:not(.btn)', '.mce-content-body *:not( .menu-item ) > a:not(.btn)', - '.template-header a:not(.btn)', + '.template-header *:not( .menu-item ) > a:not(.btn)', '.template-footer a:not(.btn)', '.template-sticky-header a:not(.btn)', ); From 68fe52c5480c7fbe07c1b7cfca3426e2eb4e4c67 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Wed, 5 Apr 2023 11:24:54 -0400 Subject: [PATCH 09/10] update versions for stable --- package.json | 2 +- readme.txt | 2 +- src/boldgrid-theme-framework.php | 2 +- style.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index de055e36..8bff5c6e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "boldgrid-theme-framework", - "version": "2.20.0-rc1", + "version": "2.20.0", "description": "BoldGrid Theme Framework", "main": "index.js", "engines": { diff --git a/readme.txt b/readme.txt index 81ee250e..3e27848f 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: news, blog, e-commerce, sticky-post, theme-options, threaded-comments, ful Requires PHP: 5.6 Requires at least: 4.8 Tested up to: 6.2 -Stable tag: 2.20.0-rc1 +Stable tag: 2.20.0 License: GPL-3.0-or-later License URI: https://www.gnu.org/licenses/gpl-3.0-standalone.html diff --git a/src/boldgrid-theme-framework.php b/src/boldgrid-theme-framework.php index 7d8315f1..4a55edcf 100644 --- a/src/boldgrid-theme-framework.php +++ b/src/boldgrid-theme-framework.php @@ -3,7 +3,7 @@ * Plugin Name: BoldGrid Theme Framework * Plugin URI: https://www.boldgrid.com/docs/configuration-file * Description: BoldGrid Theme Framework is a library that allows you to easily make BoldGrid themes. Please see our reference guide for more information: https://www.boldgrid.com/docs/configuration-file - * Version: 2.20.0-rc1 + * Version: 2.20.0 * Author: BoldGrid.com * Author URI: https://www.boldgrid.com/ * Text Domain: bgtfw diff --git a/style.css b/style.css index be53dffe..53f87a20 100644 --- a/style.css +++ b/style.css @@ -4,7 +4,7 @@ Author: BoldGrid Theme URI: https://www.boldgrid.com/themes/crio/ Author URI: https://www.boldgrid.com/ Description: Crio is a WordPress SuperTheme that allows front-end designers, developers and other web professionals to create without bounds or restrictions. Crio's advanced customization options are completely integrated with the WordPress Customizer API, providing you with a powerful, but familiar interface to customize your website. Our integration gives you granular control over many elements straight from the Customizer, and even device previews so you can see how your site looks on different devices. Crio’s unique color palette system keeps colors consistent across your site. Drag and drop colors in your palette to increase or decrease the usage of that color throughout your website. Use the advanced controls to create a custom Header, Footer, or Blog Page layout. Be Bold and stand above the rest with Prime by BoldGrid! -Version: 2.20.0-rc1 +Version: 2.20.0 Requires at least: 5.5 Tested up to: 6.2 Requires PHP: 5.6 From d13f64f619e564146a2601c53805517705f7ced5 Mon Sep 17 00:00:00 2001 From: James Rosado Date: Wed, 5 Apr 2023 11:30:45 -0400 Subject: [PATCH 10/10] update readme --- README.md | 6 ++++++ readme.txt | 11 +++++++++-- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3579e876..a3bbd3e4 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,12 @@ Crio is a WordPress SuperTheme that allows front-end designers, developers and o ## Changelog ## +### 2.20.0 ### +* Enhancement: Improve Color Palettes by using color variables instead of SCSS compilation during runtime [#50](https://github.com/BoldGrid/crio/issues/50) +* New Feature: Add notice to Design > Footer > Colors to help users [#48](https://github.com/BoldGrid/crio/issues/48) +* New Feature: If I add a logo but my header isn't setup to show it, show a warning [#49](https://github.com/BoldGrid/crio/issues/49) +* Accessibility: Hidden Tagline = Empty Heading Tag = Bad for Accessibility [#52](https://github.com/BoldGrid/crio/issues/52) + ### 2.19.2 ### * Bug Fix: If the first menu item has a dropdown there are padding issues in the dropdown [#39](https://github.com/BoldGrid/crio/issues/39) * Bug Fix: Cannot get even spacing between posts and header/footer on Blog Page [#38](https://github.com/BoldGrid/crio/issues/38) diff --git a/readme.txt b/readme.txt index 3e27848f..c58a4362 100644 --- a/readme.txt +++ b/readme.txt @@ -14,13 +14,20 @@ Crio is a WordPress SuperTheme that allows designers, developers and other web p Crio is a WordPress SuperTheme that allows designers, developers and other web professionals to create without bounds or restrictions. Crio’s advanced customization options are completely integrated with the WordPress Customizer API, providing you with a powerful, but familiar interface to customize your website. Our integration gives you granular control over many elements straight from the Customizer, and even device previews so you can see how your site looks on different devices. Crio’s unique color palette system keeps colors consistent across your site. Drag and drop colors in your palette to increase or decrease the usage of that color throughout your website. Use the advanced controls to create a custom Header, Footer, or Blog Page layout. Be Bold and stand above the rest with Crio by BoldGrid! == Upgrade Notice == -= 2.10.0 = -This version includes CSS fixes for incorrect margin / padding issues. If you are using the Custom CSS as a temporary fix for these issues, this update may possibly conflict with your custom CSS. + += 2.20.0 = +This version changes the way the color palette CSS is generated. If you are using custom CSS to override color palettes, this may cause some conflicts. == Changelog == ## Changelog ## +== 2.20.0 == +* Enhancement: Improve Color Palettes by using color variables instead of SCSS compilation during runtime [#50](https://github.com/BoldGrid/crio/issues/50) +* New Feature: Add notice to Design > Footer > Colors to help users [#48](https://github.com/BoldGrid/crio/issues/48) +* New Feature: If I add a logo but my header isn't setup to show it, show a warning [#49](https://github.com/BoldGrid/crio/issues/49) +* Accessibility: Hidden Tagline = Empty Heading Tag = Bad for Accessibility [#52](https://github.com/BoldGrid/crio/issues/52) + == 2.19.2 == * Bug Fix: If the first menu item has a dropdown there are padding issues in the dropdown [#39](https://github.com/BoldGrid/crio/issues/39) * Bug Fix: Cannot get even spacing between posts and header/footer on Blog Page [#38](https://github.com/BoldGrid/crio/issues/38)