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

Changed CSS and variable handling so that the color of the border and text of a button in 'outline mode' matches the background color of the button when not. (#3972)

Browse source
This commit is contained in:
Jason Crist 2021-05-28 09:19:43 -04:00 committed by GitHub
parent d73f9cd094
commit d657622de2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 39 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
blockbase/assets/ponyfill.css
View file

@ -225,7 +225,7 @@ input[type=checkbox] + label {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -239,6 +239,7 @@ input[type=checkbox] + label {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -279,7 +280,6 @@ input[type=checkbox] + label {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -288,7 +288,7 @@ input[type=checkbox] + label {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@ -301,6 +301,7 @@ input[type=checkbox] + label {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -415,7 +416,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -429,6 +430,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -469,7 +471,6 @@ p.has-drop-cap:not(:focus):first-letter {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -478,7 +479,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@ -491,6 +492,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -552,7 +554,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -567,6 +569,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -666,7 +669,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -680,6 +683,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -720,7 +724,6 @@ p.has-drop-cap:not(:focus):first-letter {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -729,7 +732,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@ -742,6 +745,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -811,7 +815,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -830,6 +834,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -895,7 +900,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -909,6 +914,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -949,7 +955,6 @@ p.has-drop-cap:not(:focus):first-letter {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -958,7 +963,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@ -971,6 +976,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -1024,7 +1030,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
display: inline-block;
}
@ -1040,6 +1046,7 @@ p.has-drop-cap:not(:focus):first-letter {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}

4
blockbase/sass/blocks/_button.scss
View file

@ -14,7 +14,7 @@
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
svg {
fill: var(--wp--custom--button--color--text);
}
@ -41,7 +41,6 @@
//apply outline styles. apply padding that does NOT account for border width (as the border width is applied here).
@mixin button-border-styles {
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -63,6 +62,7 @@
--wp--custom--button--color--background: var(--wp--custom--button--hover--color--background);
--wp--custom--button--border--color: var(--wp--custom--button--hover--border--color);
@include button-color-styles;
border-color: var(--wp--custom--button--border--color);
}
}
//The following styles can ALWAYS be changed, even if the user has set a custom color.

5
blockbase/theme.json
View file

@ -57,7 +57,7 @@
},
"button": {
"border": {
"color": "var(--wp--custom--color--foreground)",
"color": "var(--wp--custom--color--secondary)",
"radius": "4px",
"style": "solid",
"width": "2px"
@ -69,6 +69,9 @@
"hover": {
"color": {
"background": "#006ba1"
},
"border": {
"color": "#006ba1"
}
},
"spacing": {

2
mayland-blocks/theme.json
View file

@ -61,7 +61,7 @@
},
"button": {
"border": {
"color": "var(--wp--custom--color--foreground)",
"color": "var(--wp--custom--color--secondary)",
"radius": "5px",
"style": "solid",
"width": "2px"

8
quadrat/assets/theme.css
View file

@ -230,7 +230,7 @@ ul ul {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
border-radius: var(--wp--custom--button--border--radius);
}
@ -244,6 +244,7 @@ ul ul {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -284,7 +285,6 @@ ul ul {
--wp--custom--button--color--text: var(--wp--custom--button--border--color);
--wp--custom--button--color--background: transparent;
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);
@ -293,7 +293,7 @@ ul ul {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: var(--wp--custom--button--border--color);
border-color: currentColor;
}
.wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):hover, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color):focus, .wp-block-button.is-style-outline.wp-block-button__link:not(.has-background):not(.has-text-color).has-focus,
@ -306,6 +306,7 @@ ul ul {
opacity: 1;
color: var(--wp--custom--button--color--text);
background-color: var(--wp--custom--button--color--background);
border-color: currentColor;
border-color: var(--wp--custom--button--border--color);
}
@ -353,7 +354,6 @@ ul ul {
.wp-block-post-comments .reply a {
--wp--custom--button--typography--font-size: var(--wp--preset--font-size--normal);
border-style: var(--wp--custom--button--border--style);
border-color: currentColor;
border-width: var(--wp--custom--button--border--width);
padding-top: var(--wp--custom--button--spacing--padding--top);
padding-bottom: var(--wp--custom--button--spacing--padding--bottom);

3
quadrat/child-theme.json
View file

@ -45,6 +45,9 @@
"color": {
"text": "var(--wp--custom--color--foreground)",
"background": "var(--wp--custom--color--background)"
},
"border": {
"color": "var(--wp--custom--color--foreground)"
}
},
"typography": {

3
quadrat/theme.json
View file

@ -70,6 +70,9 @@
"color": {
"background": "var(--wp--custom--color--background)",
"text": "var(--wp--custom--color--foreground)"
},
"border": {
"color": "var(--wp--custom--color--foreground)"
}
},
"spacing": {