Skip to content

Commit a3a4810

Browse files
kaeizenkaeizen
committed
add colors to default container scheme
1 parent 9890d19 commit a3a4810

File tree

7 files changed

+124
-8
lines changed

7 files changed

+124
-8
lines changed

‎src/plugins/global-settings/color-schemes/editor-loader.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Internal dependencies
33
*/
44
import {
5-
convertToObj, getCSS, schemeHasValue,
5+
convertToObj, getCSS, schemeHasValue, getDefaultColors,
66
} from './utils'
77

88
import { onClassChange } from '../utils'
@@ -72,6 +72,10 @@ const renderGlobalStyles = (
7272
containercss += `.stk-container:where(:not(.stk--no-background):hover), :where(.stk-hover-parent:hover) .stk-container:where(:not(.stk--no-background)){ ${ decls.desktopParentHover.join( '' ) } }\n`
7373
}
7474
css += containercss
75+
// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
76+
} else if ( containerModeColorScheme in colorSchemes && ! schemeHasValue( colorSchemes[ containerModeColorScheme ] ) ) {
77+
const containercss = `.stk-container:where(:not(.stk--no-background)){ ${ getDefaultColors() } }\n`
78+
css += containercss
7579
}
7680

7781
Object.entries( colorSchemes ).forEach( ( [ key, scheme ] ) => {

‎src/plugins/global-settings/color-schemes/index.php‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -274,6 +274,11 @@ public function add_global_color_schemes_styles( $current_css ) {
274274
$styles = $this->generate_color_scheme_styles( $styles, $scheme );
275275
}
276276

277+
// This fixes the issue wherein if there is a background scheme and no container/base scheme, the container inherits the background scheme which may cause the text to be unreadable
278+
if ( isset( $this->color_schemes[ $container_default ] ) && $this->is_scheme_empty( $this->color_schemes[ $container_default ] ) ) {
279+
$styles = $this->getDefaultContainerColors( $styles, $default_color_schemes[ 2 ] );
280+
}
281+
277282
$color_scheme_css = '';
278283
$generated_css = wp_style_engine_get_stylesheet_from_css_rules( $styles );
279284
if ( $generated_css != '' ) {
@@ -402,6 +407,18 @@ public function has_value( $scheme, $property, $state ) {
402407
return true;
403408
}
404409

410+
public function is_scheme_empty( $scheme ) {
411+
foreach( $scheme as $property => $values ) {
412+
if ( is_array( $values ) ) {
413+
foreach( $values as $device_state => $value ) {
414+
if ( $value ) return false;
415+
}
416+
}
417+
}
418+
419+
return true;
420+
}
421+
405422
public function is_gradient( $scheme, $property, $state ) {
406423
if ( ! $this->has_value( $scheme, $property, $state ) ) {
407424
return false;
@@ -410,6 +427,38 @@ public function is_gradient( $scheme, $property, $state ) {
410427
return strpos( $value, 'linear-' ) !== false || strpos( $value, 'radial-' ) !== false;
411428
}
412429

430+
// These colors are used when there are color schemes but the default container scheme is empty
431+
public function getDefaultContainerColors( $styles, $scheme ) {
432+
$selectors = $scheme[ 'selectors' ];
433+
$styles[] = array(
434+
'selector' => $selectors[ 'desktop' ] . ' :where(.stk-subtitle)',
435+
'declarations' => array(
436+
'--stk-accent-color' => 'var(--stk-subtitle-color)',
437+
)
438+
);
439+
$styles[] = array(
440+
'selector' => $selectors[ 'desktop' ] . ' :where(.stk--inner-svg)',
441+
'declarations' => array(
442+
'--stk-accent-color' => 'var(--stk-icon-color)',
443+
)
444+
);
445+
$styles[] = array(
446+
'selector' => $selectors[ 'desktop' ],
447+
'declarations' => array(
448+
'--stk-background-color' => 'var(--stk-default-container-background-color, #fff)',
449+
'--stk-heading-color' => 'var(--stk-default-heading-color, initial)',
450+
'--stk-text-color' => 'var(--stk-container-color, initial)',
451+
'--stk-link-color' => 'var(--stk-default-link-color, var(--stk-text-color, initial))',
452+
'--stk-accent-color' => '#ddd',
453+
'--stk-button-background-color' => 'var(--stk-default-button-background-color, #008de4)',
454+
'--stk-button-text-color' => 'var(--stk-default-button-text-color, #fff)',
455+
'--stk-button-outline-color' => 'var(--stk-default-button-background-color, #008de4)'
456+
)
457+
);
458+
459+
return $styles;
460+
}
461+
413462
/**
414463
* This returns the CSS declarations for the CSS rules.
415464
*

‎src/plugins/global-settings/color-schemes/utils.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,24 @@ export const getCSS = ( scheme, currentHoverState = 'normal', mode = '' ) => {
153153
return addThemeCompatibility( decls, scheme, mode )
154154
}
155155

156+
// These colors are used when there are color schemes but the default container scheme is empty
157+
export const getDefaultColors = () => {
158+
let decls = ''
159+
160+
decls += '--stk-background-color: var(--stk-default-container-background-color, #fff);'
161+
decls += '--stk-heading-color: var(--stk-default-heading-color, initial);'
162+
decls += '--stk-text-color: var(--stk-container-color, initial);'
163+
decls += '--stk-link-color: var(--stk-default-link-color, var(--stk-text-color, initial));'
164+
decls += ':where(.stk-subtitle) { --stk-accent-color: var(--stk-subtitle-color); }'
165+
decls += ':where(.stk--inner-svg) { --stk-accent-color: var(--stk-icon-color); }'
166+
decls += '--stk-accent-color: #ddd;'
167+
decls += '--stk-button-background-color: var(--stk-default-button-background-color, #008de4);'
168+
decls += '--stk-button-text-color: var(--stk-default-button-text-color, #fff);'
169+
decls += '--stk-button-outline-color: var(--stk-default-button-background-color, #008de4);'
170+
171+
return decls
172+
}
173+
156174
const addThemeCompatibility = ( decls, scheme, mode ) => {
157175
const themeRegex = /stk--is-\w+-theme/gm
158176
const theme = document.querySelector( 'body' ).className.match( themeRegex )?.[ 0 ]

‎src/plugins/theme-block-style-inheritance/index.php‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,9 @@ function add_block_style_inheritance( $current_css ) {
180180
// 'columns-gap' => $this->get_value( $styles, ['blocks', 'core/columns', 'spacing', 'blockGap'] ),
181181
'button-group-gap' => $this->get_value( $styles, ['blocks', 'core/buttons', 'spacing', 'blockGap'] ),
182182
'default-gap' => $this->get_value( $styles, ['spacing', 'blockGap'] ),
183-
'container-color' => $this->get_value( $styles, ['color', 'text'] ),
183+
'text-color' => $this->get_value( $styles, ['color', 'text'] ),
184+
'heading-color' => $this->get_value( $styles, [ 'elements', 'heading', 'color', 'text' ] ),
185+
'link-color' => $this->get_value( $styles, [ 'elements', 'link', 'color', 'text' ] )
184186
);
185187

186188
if ( $root_properties[ 'button-group-gap' ] || $root_properties[ 'default-gap' ] ) {
@@ -193,8 +195,22 @@ function add_block_style_inheritance( $current_css ) {
193195
// $style_declarations['root']['declarations'][ '--stk-columns-column-gap' ] = $root_properties[ 'columns-gap' ] ?? $root_properties[ 'default-gap' ];
194196
// }
195197

196-
if ( $root_properties[ 'container-color' ] ) {
197-
$style_declarations['root']['declarations'][ '--stk-container-color' ] = $root_properties[ 'container-color' ];
198+
if ( $root_properties[ 'text-color' ] ) {
199+
$style_declarations['root']['declarations'][ '--stk-container-color' ] = $root_properties[ 'text-color' ];
200+
$style_declarations['root']['declarations'][ '--stk-text-color' ] = $root_properties[ 'text-color' ];
201+
$style_declarations['root']['declarations'][ '--stk-default-text-color' ] = $root_properties[ 'text-color' ];
202+
}
203+
204+
if ( $root_properties[ 'heading-color' ] ) {
205+
$style_declarations['root']['declarations'][ '--stk-default-heading-color' ] = $root_properties[ 'heading-color' ];
206+
} else if ( $root_properties[ 'text-color' ] ) {
207+
$style_declarations['root']['declarations'][ '--stk-default-heading-color' ] = $root_properties[ 'text-color' ];
208+
}
209+
210+
if ( $root_properties[ 'link-color' ] ) {
211+
$style_declarations['root']['declarations'][ '--stk-default-link-color' ] = $root_properties[ 'link-color' ];
212+
} else if ( $root_properties[ 'text-color' ] ) {
213+
$style_declarations['root']['declarations'][ '--stk-default-link-color' ] = $root_properties[ 'text-color' ];
198214
}
199215

200216
/**
@@ -238,8 +254,8 @@ function add_block_style_inheritance( $current_css ) {
238254
),
239255
'get_properties' => array( 'color', 'background', 'background-color' ),
240256
'set_custom_properties' => array(
241-
'color' => '--stk-button-text-color',
242-
'background' => '--stk-button-background-color',
257+
'color' => array('--stk-button-text-color', '--stk-default-button-text-color'),
258+
'background' => array('--stk-button-background-color', '--stk-default-button-background-color'),
243259
),
244260
'custom_properties_selector' => 'root',
245261
'custom_properties_selector_hover' => 'button-default-hover',
@@ -388,7 +404,11 @@ function add_custom_properties( $style_declarations, $custom_properties, $select
388404

389405
// add a CSS custom property from `color`
390406
if ( isset( $custom_properties['color'] ) && isset( $element_declarations['color'] ) ) {
391-
$style_declarations[ $selector ][ 'declarations' ][ $custom_properties['color'] ] = $element_declarations[ 'color' ];
407+
$color_custom_properties = is_array( $custom_properties[ 'color' ] ) ? $custom_properties[ 'color' ] : array( $custom_properties[ 'color' ] );
408+
409+
foreach ($color_custom_properties as $custom_property ) {
410+
$style_declarations[ $selector ][ 'declarations' ][ $custom_property ] = $element_declarations[ 'color' ];
411+
}
392412
}
393413

394414
// add a CSS custom property from `background` or `background-color`
@@ -397,7 +417,11 @@ function add_custom_properties( $style_declarations, $custom_properties, $select
397417
) ) {
398418
$background_value = $element_declarations[ 'background' ] ?? $element_declarations[ 'background-color' ];
399419

400-
$style_declarations[ $selector ][ 'declarations' ][ $custom_properties['background'] ] = $background_value;
420+
$background_custom_properties = is_array( $custom_properties[ 'background' ] ) ? $custom_properties['background'] : array( $custom_properties['background'] );
421+
422+
foreach ($background_custom_properties as $custom_property ) {
423+
$style_declarations[ $selector ][ 'declarations' ][ $custom_property ] = $background_value;
424+
}
401425

402426
unset( $style_declarations[ $element ][ 'declarations' ][ 'background' ] );
403427
unset( $style_declarations[ $element ][ 'declarations' ][ 'background-color' ] );

‎src/styles/block-design-system.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,9 @@
7575
"container-background-color": {
7676
"desktop": "#fff"
7777
},
78+
"default-container-background-color": {
79+
"desktop": "#fff"
80+
},
7881
"container-color": {
7982
"desktop": "#1e1e1e"
8083
}
@@ -163,6 +166,12 @@
163166
"button-text-color": {
164167
"desktop": "#fff"
165168
},
169+
"default-button-background-color": {
170+
"desktop": "#008de4"
171+
},
172+
"default-button-text-color": {
173+
"desktop": "#fff"
174+
},
166175
"icon-button-padding": {
167176
"desktop": {
168177
"top": 12,

‎src/styles/block-design-system.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ public static function get_block_design_system() {
8686
"container-background-color" => array(
8787
"desktop" => "#fff"
8888
),
89+
"default-container-background-color" => array(
90+
"desktop" => "#fff"
91+
),
8992
"container-color" => array(
9093
"desktop" => "#1e1e1e"
9194
),
@@ -168,6 +171,12 @@ public static function get_block_design_system() {
168171
"button-text-color" => array(
169172
"desktop" => "#fff"
170173
),
174+
"default-button-background-color" => array(
175+
"desktop" => "#008de4"
176+
),
177+
"default-button-text-color" => array(
178+
"desktop" => "#fff"
179+
),
171180
"icon-button-padding" => array(
172181
"desktop" => array(
173182
"top" => 12,

‎src/styles/block-design-system.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ $block-design-system: (
4444
container-border-radius: 0px,
4545
container-box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04),
4646
container-background-color: #fff,
47+
default-container-background-color: #fff,
4748
container-color: #1e1e1e,
4849

4950
/**
@@ -81,6 +82,8 @@ $block-design-system: (
8182
button-row-gap: 12px,
8283
button-background-color: #008de4,
8384
button-text-color: #fff,
85+
default-button-background-color: #008de4,
86+
default-button-text-color: #fff,
8487
icon-button-padding: 12px,
8588

8689
/**

0 commit comments

Comments
 (0)