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

Varia: Add a dark option to the background

Browse source
This commit is contained in:
Thomas Guillot 2019-07-29 09:57:07 +01:00
parent 88bfc2ffe1
commit bb3b9ce594
8 changed files with 70 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
varia/functions.php
View file

@ -174,6 +174,11 @@ if ( ! function_exists( 'varia_setup' ) ) :
'slug' => 'foreground-light',
'color' => '#767676',
),
array(
'name' => __( 'Lighter Gray', 'varia' ),
'slug' => 'background-dark',
'color' => '#DDDDDD',
),
array(
'name' => __( 'Subtle Gray', 'varia' ),
'slug' => 'background-light',

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

@ -67,6 +67,7 @@ $config-global: (
"background": (
"default": white,
"light": #FAFAFA, // must be accessible against foreground-default
"dark": #DDDDDD, // must be accessible against foreground-default
),
"border": (
"default": #DDDDDD,

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

@ -39,6 +39,10 @@
color: #{map-deep-get($config-global, "color", "background", "light")} !important;
}
.has-background-dark-color[class] {
color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
}
.has-background-color[class] {
color: #{map-deep-get($config-global, "color", "background", "default")} !important;
}
@ -94,6 +98,14 @@
}
}
.has-background-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "dark")} !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", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};

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

@ -80,6 +80,10 @@
color: #{map-deep-get($config-global, "color", "background", "light")} !important;
}
.has-background-dark-color[class] {
color: #{map-deep-get($config-global, "color", "background", "dark")} !important;
}
.has-background-color[class] {
color: #{map-deep-get($config-global, "color", "background", "default")} !important;
}
@ -135,6 +139,14 @@
}
}
.has-background-dark-background-color[class] {
background-color: #{map-deep-get($config-global, "color", "background", "dark")} !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", "default")} !important;
color: #{map-deep-get($config-global, "color", "foreground", "default")};

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

@ -76,6 +76,7 @@ $config-global: (
"background": (
"default": white,
"light": #FAFAFA, // must be accessible against foreground-default
"dark": #DDDDDD, // must be accessible against foreground-default
),
"border": (
"default": #DDDDDD,

13
varia/style-editor.css
View file

@ -580,6 +580,10 @@ table th,
color: #FAFAFA !important;
}
.has-background-dark-color[class] {
color: #DDDDDD !important;
}
.has-background-color[class] {
color: white !important;
}
@ -638,6 +642,15 @@ table th,
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;

13
varia/style-rtl.css
View file

@ -1921,6 +1921,10 @@ table th,
color: #FAFAFA !important;
}
.has-background-dark-color[class] {
color: #DDDDDD !important;
}
.has-background-color[class] {
color: white !important;
}
@ -1979,6 +1983,15 @@ table th,
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;

13
varia/style.css
View file

@ -1926,6 +1926,10 @@ table th,
color: #FAFAFA !important;
}
.has-background-dark-color[class] {
color: #DDDDDD !important;
}
.has-background-color[class] {
color: white !important;
}
@ -1984,6 +1988,15 @@ table th,
color: currentColor;
}
.has-background-dark-background-color[class] {
background-color: #DDDDDD !important;
color: #444444;
}
.has-background-dark-background-color[class] p, .has-background-dark-background-color[class] h1, .has-background-dark-background-color[class] h2, .has-background-dark-background-color[class] h3, .has-background-dark-background-color[class] h4, .has-background-dark-background-color[class] h5, .has-background-dark-background-color[class] h6 {
color: currentColor;
}
.has-background-background-color[class] {
background-color: white !important;
color: #444444;