Skip to content

Commit 94d08c7

Browse files
jamesros161jamesros161
authored
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 55585fd. * 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
1 parent c46697e commit 94d08c7

18 files changed

+686
-200
lines changed

‎gulpfile.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -429,6 +429,18 @@ gulp.task('bootstrapCompile', function () {
429429
// .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
430430
});
431431

432+
// Bootstrap Compile
433+
gulp.task('colorPalettesCompile', function () {
434+
gulp.src(config.dist + '/assets/scss/custom-color/color-palettes.scss')
435+
.pipe(sass())
436+
.pipe(sass.sync().on('error', sass.logError))
437+
.pipe(gulp.dest(config.prime_dest + '/css' ) )
438+
.pipe(cssnano({ discardComments: { removeAll: true }, safe: true }))
439+
.pipe(rename({ suffix: '.min' }))
440+
.pipe(gulp.dest( config.prime_dest + '/css' ) )
441+
// .pipe( notify( { message: 'SCSS compile complete', onLast: true } ) );
442+
});
443+
432444
// Watch for changes and recompile scss
433445
gulp.task('sass:watch', function () {
434446
gulp.watch( 'src/assets/scss/**/*.scss', function () {
@@ -554,7 +566,7 @@ gulp.task( 'build', function( cb ) {
554566
['jsHint', 'jscs', 'frameworkJs', 'svgs', 'tgm'],
555567
['scssDeps', 'jsDeps', 'modernizr', 'fontDeps', 'phpDeps', 'frameworkFiles', 'copyScss'],
556568
'images',
557-
['scssCompile', 'bootstrapCompile'],
569+
['scssCompile', 'bootstrapCompile', 'colorPalettesCompile' ],
558570
['fontFamilyCss', 'patterns'],
559571
'hovers',
560572
'hoverColors',

‎prime/inc/boldgrid-theme-framework-config/config.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ function boldgrid_prime_framework_config( $config ) {
220220

221221
// Footer specific colors for background, headings, and links.
222222
$config['customizer']['controls']['bgtfw_footer_color']['default'] = 'color-5';
223-
$config['customizer']['controls']['bgtfw_footer_links']['default'] = 'color-1';
223+
$config['customizer']['controls']['bgtfw_footer_link_color']['default'] = 'color-1';
224224

225225
// Page title display settings, show by default.
226226
$config['customizer']['controls']['bgtfw_pages_title_display']['default'] = 'show';

‎src/assets/js/customizer/color-palette-generate.js

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,138 @@ BOLDGRID.COLOR_PALETTE.Generate = BOLDGRID.COLOR_PALETTE.Generate || {};
9393
'#1a1a1a'
9494
];
9595

96+
/**
97+
* Css Variables.
98+
*
99+
* Generate CSS Variables for a color palette.
100+
*
101+
* @ since 2.20.0
102+
*
103+
* @param {object} colorPalette The Color Palette Object.
104+
*
105+
* @returns string CSS Variables string.
106+
*/
107+
self.cssVariables = function( colorPalette ) {
108+
var css = '',
109+
formattedPalette = {};
110+
111+
$.each( colorPalette.colors, function( index, color ) {
112+
var colorIndex = index + 1;
113+
114+
formattedPalette['color-' + colorIndex ] = color;
115+
} );
116+
117+
formattedPalette['color-neutral'] = colorPalette['neutral-color'];
118+
119+
$.each( formattedPalette, function( variable, color ) {
120+
css += `--${variable}: ${color};`;
121+
css += `--${variable}-raw: ` + color.replace( 'rgb(', '' ).replace( ')', '' ) + ';';
122+
css += `--${variable}-light:` + net.brehaut.Color( color ).lightenByAmount( 0.1 ).toCSS() + ';';
123+
css += self.generateHoverVars( formattedPalette, variable, color );
124+
} );
125+
126+
return css;
127+
};
128+
129+
/**
130+
* Generates CSS Variables for hover colors.
131+
*
132+
* @since 2.20.0
133+
*
134+
* @param {object} formattedPalette Formatted colors object.
135+
* @param {string} textVariable Text color variable.
136+
* @param {string} textColor Text color value.
137+
*
138+
* @returns {string} CSS Variables string.
139+
*/
140+
self.generateHoverVars = function( formattedPalette, textVariable, textColor ) {
141+
var textIndex = textVariable.replace( 'color-', '' ),
142+
hoverVars = '';
143+
144+
$.each( formattedPalette, function( bgVariable, bgColor ) {
145+
var bgIndex = bgVariable.replace( 'color-', '' ),
146+
hoverColor = self.getHoverColor(
147+
net.brehaut.Color( bgColor ),
148+
net.brehaut.Color( textColor )
149+
);
150+
151+
hoverVars += `--bg-${bgIndex}-text-${textIndex}-hover: ${hoverColor};`;
152+
} );
153+
154+
return hoverVars;
155+
};
156+
157+
/**
158+
* Get Hover Color.
159+
*
160+
* All the logic for determining the hover color was
161+
* derived from the SCSS functions defined prior to the
162+
* 2.2.0 release in the following file:
163+
*
164+
* src/assets/scss/custom-color/color-palettes.scss
165+
*
166+
* @since 2.20.0
167+
*
168+
* @param {Color} BgColor Background Color object.
169+
* @param {Color} TextColor Text Color object.
170+
*
171+
* @returns {string} RGB Color value.
172+
*/
173+
self.getHoverColor = function( BgColor, TextColor ) {
174+
var textLightness = TextColor.getLightness(),
175+
bgLightness = BgColor.getLightness(),
176+
hoverColor;
177+
178+
// White Text
179+
if ( 1 === textLightness ) {
180+
181+
// Dark Background
182+
if ( 0.9 <= bgLightness ) {
183+
hoverColor = BgColor.darkenByAmount( 0.15 );
184+
185+
// Light Background
186+
} else {
187+
hoverColor = BgColor.blend( TextColor, 0.8 );
188+
}
189+
190+
// Black Text
191+
} else if ( 0 === textLightness ) {
192+
193+
// Dark Background
194+
if ( 0.10 > bgLightness ) {
195+
hoverColor = BgColor.lightenByAmount( 0.2 );
196+
197+
// Light Background
198+
} else {
199+
hoverColor = BgColor.blend( TextColor, 0.6 );
200+
}
201+
202+
// Light Text on Dark Background.
203+
} else if ( bgLightness < textLightness ) {
204+
205+
// Color is too light to lighten.
206+
if ( 0.9 < textLightness ) {
207+
hoverColor = TextColor.darkenByAmount( 0.2 );
208+
} else {
209+
hoverColor = TextColor.lightenByAmount( 0.2 );
210+
}
211+
212+
// Dark Text on Light Background.
213+
} else {
214+
215+
// Color is too dark to darken.
216+
if ( 0.15 > textLightness ) {
217+
hoverColor = TextColor.lightenByAmount( 0.2 );
218+
} else {
219+
hoverColor = TextColor.darkenByAmount( 0.2 );
220+
}
221+
}
222+
223+
hoverColor = hoverColor.toRGB();
224+
225+
return 'rgb(' + Math.floor( hoverColor.red * 255 ) + ',' + Math.floor( hoverColor.green * 255 ) + ',' + Math.floor( hoverColor.blue * 255 ) + ')';
226+
};
227+
96228
/**
97229
* Get a random color
98230
* Not Used ATM

‎src/assets/js/customizer/color-palette-preview.js

Lines changed: 112 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,110 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
2222
}
2323
});
2424

25+
/**
26+
* Update CSS overlay colors.
27+
*
28+
* CSS Overlay colors are translucent background colors
29+
* added to elements using PPB. These are currently added using head inline CSS
30+
* since the PPB added this feature before we added the --color-x-raw variables.
31+
*
32+
* This method will update the inline CSS to use the --color-x-raw variables when
33+
* the palette is changed. However, in the future, we should update PPB to use
34+
* the --color-x-raw variables instead of inline CSS.
35+
*
36+
* @since 2.20.0
37+
*/
38+
self.updateOverlayColors = function() {
39+
var $bgColorElements = $( '[class*="-background-color"]' ),
40+
$imgOverlayElements = $( '[data-bg-overlaycolor-class]' ),
41+
$fwrElements = $( '[class*="fwr-"]' ),
42+
rawColorValues = {
43+
'color-1-raw': $( ':root' ).css( '--color-1-raw' ),
44+
'color-2-raw': $( ':root' ).css( '--color-2-raw' ),
45+
'color-3-raw': $( ':root' ).css( '--color-3-raw' ),
46+
'color-4-raw': $( ':root' ).css( '--color-4-raw' ),
47+
'color-5-raw': $( ':root' ).css( '--color-5-raw' ),
48+
'color-neutral-raw': $( ':root' ).css( '--color-neutral-raw' ),
49+
};
50+
51+
$bgColorElements.each( ( _, el ) => {
52+
var $bgColorEl = $( el ),
53+
bgUuid = $bgColorEl.attr( 'data-bg-uuid' ),
54+
$fwrInlineStyle = $( `#${bgUuid}-inline-css` );
55+
56+
$fwrInlineStyle.each( ( _, el ) => {
57+
self.updateBgColorOverlays( el, rawColorValues );
58+
} );
59+
} );
60+
61+
$imgOverlayElements.each( ( _, el ) => {
62+
self.updateImageOverlays( el, rawColorValues );
63+
} );
64+
65+
$fwrElements.each( ( _, el ) => {
66+
var $fwr = $( el ),
67+
classList = $fwr.attr( 'class' ),
68+
fwrId = 'fwr-' + classList.match( /fwr-?(\d+)/ )[1],
69+
$fwrInlineStyle = $( `#${fwrId}-inline-css` );
70+
71+
$fwrInlineStyle.each( ( _, el ) => {
72+
self.updateBgColorOverlays( el, rawColorValues );
73+
} );
74+
} );
75+
};
76+
77+
/**
78+
* Updage Image Overlay colors.
79+
*
80+
* Elements that have a translucent color overlaying the
81+
* background image that uses a color from the palette,
82+
* has the background-image property set in the elements'
83+
* inline styles.
84+
*
85+
* @since 2.20.0
86+
*
87+
* @param {object} el Image overlay element.
88+
* @param {object} rawColorValues Raw color values.
89+
*/
90+
self.updateImageOverlays = function( el, rawColorValues ) {
91+
var $el = $( el ),
92+
elStyle = $el.attr( 'style' ),
93+
colorIndex = $el.attr( 'data-bg-overlaycolor-class' ),
94+
overlayValue = rawColorValues[`color-${colorIndex}-raw`],
95+
overlayVariable = `var(--color-${colorIndex}-raw)`;
96+
97+
$el.attr(
98+
'style',
99+
elStyle.replace( new RegExp( overlayValue, 'g' ), overlayVariable )
100+
);
101+
};
102+
103+
104+
/**
105+
* Update BG Color Overlays.
106+
*
107+
* Elements with a translucent background color
108+
* that uses a color from the palette, and does not
109+
* have a background image, has the background properties
110+
* set in the <head> inline style element. This handles
111+
* Full Width Rows as well.
112+
*
113+
* @since 2.20.0
114+
*
115+
* @param {object} inlineStyleEl <head> inline style element.
116+
* @param {object} rawColorValues Raw color values.
117+
*/
118+
self.updateBgColorOverlays = function( inlineStyleEl, rawColorValues ) {
119+
var $inlineStyleEl = $( inlineStyleEl ),
120+
styleString = $inlineStyleEl.html();
121+
122+
_.each( rawColorValues, ( colorRawValue, colorRawVariable ) => {
123+
styleString = styleString.replace( new RegExp( colorRawValue, 'g' ), `var(--${colorRawVariable})` );
124+
} );
125+
126+
$inlineStyleEl.html( styleString );
127+
};
128+
25129
/**
26130
* Main responsibility of this file
27131
* 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 || {};
44148

45149
// Update styles.
46150
style = document.getElementById( 'boldgrid-color-palettes-inline-css' );
47-
style.innerHTML = modify.compiled_css;
151+
if ( style ) {
152+
style.innerHTML = ':root{' + modify.css_variables + '}';
153+
} else {
154+
$( 'head' ).append( '<style id="boldgrid-color-palettes-inline-css" type="text/css">:root{' + modify.css_variables + '}</style>' );
155+
}
48156
};
49157

50158
/**
@@ -59,6 +167,9 @@ BOLDGRID.COLOR_PALETTE.Preview = BOLDGRID.COLOR_PALETTE.Preview || {};
59167
.val( parent.BOLDGRID.COLOR_PALETTE.Modify.compiled_css )
60168
.change();
61169
} );
170+
171+
// Update overlay colors.
172+
self.updateOverlayColors();
62173
} );
63174

64175
wp.customize( 'boldgrid_compiled_css', function( value ) {

‎src/assets/js/customizer/color-palette.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1045,6 +1045,9 @@ BOLDGRID.COLOR_PALETTE.Modify = BOLDGRID.COLOR_PALETTE.Modify || {};
10451045
* Change the palette settings
10461046
*/
10471047
colorPalette.update_palette_settings = function() {
1048+
colorPalette.css_variables = BOLDGRID.COLOR_PALETTE.Generate.cssVariables( colorPalette.state.palettes['palette-primary'] );
1049+
colorPalette.state.css_variables = colorPalette.css_variables;
1050+
10481051
colorPalette.text_area_val = JSON.stringify({ 'state': colorPalette.state });
10491052
wp.customize( 'boldgrid_color_palette' ).set( '' ).set( colorPalette.text_area_val );
10501053
};

‎src/assets/js/customizer/color/preview.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ export class Preview {
4949
properties: [ 'color', 'color-hover' ]
5050
},
5151
{
52-
name: 'bgtfw_footer_links',
53-
selector: '.footer-content:not(.template-footer)',
54-
properties: [ 'link-color' ]
52+
name: 'bgtfw_footer_link_color',
53+
selector: '#colophon .bgtfw-footer.footer-content:not(.template-footer) .attribution-theme-mods > .link > a:not( .btn ):hover',
54+
properties: [ 'color' ]
5555
}
5656
];
5757
}

‎src/assets/js/customizer/customizer.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -547,6 +547,10 @@ BOLDGRID.Customizer.Util.getInitialPalettes = function( option ) {
547547
value.bind( function( to ) {
548548
var palettes, colors;
549549

550+
if ( ! to ) {
551+
to = parent.BOLDGRID.COLOR_PALETTE.Modify.text_area_val;
552+
}
553+
550554
palettes = parent.jQuery( '.colors-wrapper' );
551555
colors = BOLDGRID.Customizer.Util.getInitialPalettes( to );
552556

0 commit comments

Comments
 (0)