beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix issue in dark theme in Seedlet

Browse source
This commit is contained in:
Ben Dwyer 2020-09-25 18:25:22 +01:00
parent 8b13e448e3
commit e6c2e76099
3 changed files with 52 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
seedlet/inc/wpcom-colors.php
View file

@ -464,9 +464,19 @@ add_color_rule( 'fg2', '#FAFBF6', array(
function seedlet_custom_colors_extra_css() {
$colors_array = get_theme_mod( 'colors_manager' );
$color_bg = $colors_array['colors']['bg'];
$color_bg = $colors_array['colors']['txt'];
$color_bg = $colors_array['colors']['link'];
$color_fg1 = $colors_array['colors']['fg1'];
$color_fg2 = $colors_array['colors']['fg2']; ?>
:root {
--global--color-background: <?php echo $colors_array['colors']['bg']; ?>;
--global--color-foreground: <?php echo $colors_array['colors']['txt']; ?>;
--global--color-primary: <?php echo $colors_array['colors']['link']; ?>;
--global--color-secondary: <?php echo $colors_array['colors']['fg1']; ?>;
--global--color-tertiary: <?php echo $colors_array['colors']['fg2']; ?>;
}
/*
* Site title text shadow.
*/

14
seedlet/inc/wpcom-customize-preview.js
View file

@ -22,10 +22,16 @@
// we need to manually override the "extra CSS" when a user selects a different color palette.
wp.customize( 'colors_manager[colors]', function( value ) {
value.bind( function( to ) {
const { bg, fg1, fg2 } = to;
const extraCSS = `/*
* Site title text shadow.
*/
const { bg, fg1, fg2, txt, link } = to;
const extraCSS = `
:root {
--global--color-background: ${ bg };
--global--color-foreground: ${ txt };
--global--color-primary: ${ link };
--global--color-secondary: ${ fg1 };
--global--color-tertiary: ${ fg2 };
}
.site-title a {
background-image: linear-gradient(to right, ${ fg1 } 100%, transparent 100%);
text-shadow: 1px 0px ${ bg },

37
seedlet/inc/wpcom-editor-colors.php
View file

@ -4,7 +4,7 @@
* Custom Editor Colors: Seedlet
*/
// Background Color
// Background Color
// --global--color-background
add_color_rule( 'bg', '#FFFFFF', array(
@ -67,7 +67,7 @@ add_color_rule( 'bg', '#FFFFFF', array(
), __( 'Background Color' ) );
// Foreground Color
// --global--color-background
// --global--color-foreground-light
add_color_rule( 'txt', '#444444', array(
// Text-color
@ -175,7 +175,7 @@ add_color_rule( 'fg1', '#3C8067', array(
// border-bottom-color
array( '#editor .editor-styles-wrapper .wp-block-file .wp-block-file__textlink,
#editor .editor-styles-wrapper a', 'border-bottom-color' ),
// border-left-color
array( '#editor .editor-styles-wrapper .wp-block-quote,
#editor .editor-styles-wrapper .wp-block-quote.is-large,
@ -226,10 +226,37 @@ add_color_rule( 'fg2', '#FAFBF6', array(
function seedlet_custom_colors_extra_css() {
$colors_array = get_theme_mod( 'colors_manager' );
$color_bg = $colors_array['colors']['bg'];
$color_bg = $colors_array['colors']['txt'];
$color_bg = $colors_array['colors']['link'];
$color_fg1 = $colors_array['colors']['fg1'];
$color_fg2 = $colors_array['colors']['fg2']; ?>
/*
:root {
--global--color-background: <?php echo $colors_array['colors']['bg']; ?>;
--global--color-foreground: <?php echo $colors_array['colors']['txt']; ?>;
--global--color-primary: <?php echo $colors_array['colors']['link']; ?>;
--global--color-secondary: <?php echo $colors_array['colors']['fg1']; ?>;
--global--color-tertiary: <?php echo $colors_array['colors']['fg2']; ?>;
}
/*
* Site title text shadow.
*/
.site-title a {
background-image: linear-gradient(to right, <?php echo $color_fg1; ?> 100%, transparent 100%);
text-shadow: 1px 0px <?php echo $color_bg; ?>,
-1px 0px <?php echo $color_bg; ?>,
-2px 0px <?php echo $color_bg; ?>,
2px 0px <?php echo $color_bg; ?>,
-3px 0px <?php echo $color_bg; ?>,
3px 0px <?php echo $color_bg; ?>,
-4px 0px <?php echo $color_bg; ?>,
4px 0px <?php echo $color_bg; ?>,
-5px 0px <?php echo $color_bg; ?>,
5px 0px <?php echo $color_bg; ?>;
}
/*
* Custom gradients.
*/
#editor .editor-styles-wrapper .has-hard-diagonal-gradient-background {
@ -268,4 +295,4 @@ function seedlet_custom_colors_extra_css() {
background: linear-gradient(to bottom, transparent 20%, <?php echo $color_fg1; ?> 20%, <?php echo $color_fg1; ?> 80%, transparent 80%);
}
<?php }
add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );
add_theme_support( 'custom_colors_extra_css', 'seedlet_custom_colors_extra_css' );