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

Varia: Rework light background option by adding new $var to background

Browse source
This commit is contained in:
Thomas Guillot 2019-07-29 09:51:25 +01:00
parent cd1457be24
commit 88bfc2ffe1
19 changed files with 100 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
varia/functions.php
View file

@ -175,8 +175,8 @@ if ( ! function_exists( 'varia_setup' ) ) :
'color' => '#767676',
),
array(
'name' => __( 'Lighter Gray', 'varia' ),
'slug' => 'foreground-lighter',
'name' => __( 'Subtle Gray', 'varia' ),
'slug' => 'background-light',
'color' => '#FAFAFA',
),
array(

6
varia/sass/abstracts/_config-global.scss
View file

@ -63,9 +63,11 @@ $config-global: (
"default": #444444,
"light": #767676, // must be accessible against background
"dark": #111111, // must be accessible against background
"lighter": #FAFAFA, // must be accessible against foreground-default
),
"background": white,
"background": (
"default": white,
"light": #FAFAFA, // must be accessible against foreground-default
),
"border": (
"default": #DDDDDD,
"light": #FAFAFA,

2
varia/sass/base/_accessibility.scss
View file

@ -12,7 +12,7 @@
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
&:focus {
background-color: #{map-deep-get($config-global, "color", "background")};
background-color: #{map-deep-get($config-global, "color", "background", "default")};
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;

2
varia/sass/base/_editor.scss
View file

@ -1,6 +1,6 @@
body {
color: #{map-deep-get($config-global, "color", "foreground", "default")};
background-color: #{map-deep-get($config-global, "color", "background")};
background-color: #{map-deep-get($config-global, "color", "background", "default")};
font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
font-size: #{map-deep-get($config-global, "font", "size", "root")};
font-weight: normal;

2
varia/sass/base/_reset.scss
View file

@ -76,7 +76,7 @@ body {
font-weight: normal;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
text-align: left;
background-color: #{map-deep-get($config-global, "color", "background")};
background-color: #{map-deep-get($config-global, "color", "background", "default")};
}
/**

4
varia/sass/blocks/button/_config.scss
View file

@ -4,8 +4,8 @@
$config-button: (
// Colors
"color": (
"text": map-deep-get($config-global, "color", "background"),
"text-hover": map-deep-get($config-global, "color", "background"),
"text": map-deep-get($config-global, "color", "background", "default"),
"text-hover": map-deep-get($config-global, "color", "background", "default"),
"background": map-deep-get($config-global, "color", "primary", "default"),
"background-hover": map-deep-get($config-global, "color", "primary", "hover"),
),

2
varia/sass/blocks/cover/_editor.scss
View file

@ -7,7 +7,7 @@
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text {
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
a {
color: currentColor;

2
varia/sass/blocks/cover/_style.scss
View file

@ -9,7 +9,7 @@
.wp-block-cover-image-text,
.wp-block-cover-text {
width: calc(100% - #{2 * map-deep-get($config-global, "spacing", "horizontal")});
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
margin-top: #{map-deep-get($config-global, "spacing", "vertical")};
margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};

2
varia/sass/blocks/posts-list/_style.scss
View file

@ -9,7 +9,7 @@
}
.a8c-posts-list-item__featured span {
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
background-color: #{map-deep-get($config-global, "color", "primary", "default")};
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-weight: bold;

2
varia/sass/blocks/pullquote/_editor.scss
View file

@ -43,7 +43,7 @@
&.is-style-solid-color {
background-color: #{map-deep-get($config-pullquote, "color", "background")};
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
&:not(.alignleft):not(.alignright) blockquote {
// max-width: calc( var(--global--width-content) - (2 * calc( var(--global--width-content) / 12 )) );

2
varia/sass/blocks/pullquote/_style.scss
View file

@ -50,7 +50,7 @@
&.is-style-solid-color {
background-color: #{map-deep-get($config-pullquote, "color", "background")};
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
&:not(.alignleft):not(.alignright) blockquote {
@extend %responsive-align-container;

28
varia/sass/blocks/utilities/_editor.scss
View file

@ -35,8 +35,12 @@
color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
}
.has-background-light-color[class] {
color: #{map-deep-get($config-global, "color", "background", "light")} !important;
}
.has-background-color[class] {
color: #{map-deep-get($config-global, "color", "background")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")} !important;
}
// Gutenberg background-color options
@ -44,7 +48,7 @@
.has-primary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -52,7 +56,7 @@
.has-secondary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -60,7 +64,7 @@
.has-foreground-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -68,7 +72,7 @@
.has-foreground-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -76,14 +80,22 @@
.has-foreground-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background")} !important;
background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
@ -121,4 +133,4 @@
font-family: #{map-deep-get($config-heading, "font", "family")};
font-size: calc(2 * #{strip-unit(map-deep-get($config-heading, "font", "size", "h1")) + 0em});
font-weight: #{map-deep-get($config-heading, "font", "weight")};
}
}

38
varia/sass/blocks/utilities/_style.scss
View file

@ -68,10 +68,6 @@
color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
}
.has-foreground-lighter-color[class] {
color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
}
.has-foreground-light-color[class] {
color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
}
@ -80,8 +76,12 @@
color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
}
.has-background-light-color[class] {
color: #{map-deep-get($config-global, "color", "background", "light")} !important;
}
.has-background-color[class] {
color: #{map-deep-get($config-global, "color", "background")} !important;
color: #{map-deep-get($config-global, "color", "background", "default")} !important;
}
// Gutenberg background-color options
@ -89,7 +89,7 @@
.has-primary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "primary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -97,7 +97,7 @@
.has-secondary-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "secondary", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -105,15 +105,7 @@
.has-foreground-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "default")} !important;
color: #{map-deep-get($config-global, "color", "background")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-foreground-lighter-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "lighter")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -121,7 +113,7 @@
.has-foreground-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "light")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
@ -129,14 +121,22 @@
.has-foreground-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "foreground", "dark")} !important;
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-light-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "light")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;
}
}
.has-background-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background")} !important;
background-color: #{map-deep-get($config-global, "color", "background", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};
p, h1, h2, h3, h4, h5, h6 {
color: currentColor;

6
varia/sass/child-theme/_config-child-theme-deep.scss
View file

@ -72,9 +72,11 @@ $config-global: (
"default": #444444,
"light": #767676, // must be accessible against background
"dark": #111111, // must be accessible against background
"lighter": #FAFAFA, // must be accessible against foreground-default
),
"background": white,
"background": (
"default": white,
"light": #FAFAFA, // must be accessible against foreground-default
),
"border": (
"default": #DDDDDD,
"light": #FAFAFA,

2
varia/sass/components/header/_site-main-navigation.scss
View file

@ -107,7 +107,7 @@
position: relative;
@include media(mobile) {
background: map-deep-get($config-global, "color", "background");
background: map-deep-get($config-global, "color", "background", "default");
box-shadow: map-deep-get($config-global, "elevation", "4dp");
left: 0;
top: 100%;

2
varia/sass/pages/_posts-and-pages.scss
View file

@ -3,7 +3,7 @@
}
.sticky-post {
color: #{map-deep-get($config-global, "color", "background")};
color: #{map-deep-get($config-global, "color", "background", "default")};
background-color: #{map-deep-get($config-global, "color", "primary", "default")};
font-family: #{map-deep-get($config-global, "font", "family", "primary")};
font-weight: bold;

13
varia/style-editor.css
View file

@ -576,6 +576,10 @@ table th,
color: #111111 !important;
}
.has-background-light-color[class] {
color: #FAFAFA !important;
}
.has-background-color[class] {
color: white !important;
}
@ -625,6 +629,15 @@ table th,
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;

26
varia/style-rtl.css
View file

@ -1909,10 +1909,6 @@ table th,
color: #444444 !important;
}
.has-foreground-lighter-color[class] {
color: #FAFAFA !important;
}
.has-foreground-light-color[class] {
color: #767676 !important;
}
@ -1921,6 +1917,10 @@ table th,
color: #111111 !important;
}
.has-background-light-color[class] {
color: #FAFAFA !important;
}
.has-background-color[class] {
color: white !important;
}
@ -1952,15 +1952,6 @@ table th,
color: currentColor;
}
.has-foreground-lighter-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-foreground-lighter-background-color[class] p, .has-foreground-lighter-background-color[class] h1, .has-foreground-lighter-background-color[class] h2, .has-foreground-lighter-background-color[class] h3, .has-foreground-lighter-background-color[class] h4, .has-foreground-lighter-background-color[class] h5, .has-foreground-lighter-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
@ -1979,6 +1970,15 @@ table th,
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;

26
varia/style.css
View file

@ -1914,10 +1914,6 @@ table th,
color: #444444 !important;
}
.has-foreground-lighter-color[class] {
color: #FAFAFA !important;
}
.has-foreground-light-color[class] {
color: #767676 !important;
}
@ -1926,6 +1922,10 @@ table th,
color: #111111 !important;
}
.has-background-light-color[class] {
color: #FAFAFA !important;
}
.has-background-color[class] {
color: white !important;
}
@ -1957,15 +1957,6 @@ table th,
color: currentColor;
}
.has-foreground-lighter-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-foreground-lighter-background-color[class] p, .has-foreground-lighter-background-color[class] h1, .has-foreground-lighter-background-color[class] h2, .has-foreground-lighter-background-color[class] h3, .has-foreground-lighter-background-color[class] h4, .has-foreground-lighter-background-color[class] h5, .has-foreground-lighter-background-color[class] h6 {
color: currentColor;
}
.has-foreground-light-background-color[class] {
background-color: #767676 !important;
color: white;
@ -1984,6 +1975,15 @@ table th,
color: currentColor;
}
.has-background-light-background-color[class] {
background-color: #FAFAFA !important;
color: #444444;
}
.has-background-light-background-color[class] p, .has-background-light-background-color[class] h1, .has-background-light-background-color[class] h2, .has-background-light-background-color[class] h3, .has-background-light-background-color[class] h4, .has-background-light-background-color[class] h5, .has-background-light-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;