Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-03-12 22:59:24 +01:00
Code Issues Projects Releases Wiki Activity

Twenty Twenty-One: Clean up Button styles.

Browse Source 
This change restructures the Button element styles for better a11y and expected color behaviors. Here what has changed:

- The `button-style()` mixin is now the ''single source or truth'' for how Button should look site-wide.
  - Button Block, File Block, and Search form Blocks all rely on this one mixin.
  - The same styles is also applied to the `<button>` element which appears in widgets, the 404 search form and comments form.
- Improves expected button styles for various conditions and contexts as follows: 
  - User color palette selections for Buttons are retained regardless of a parent block’s color settings or dark-mode.
  - Supports both Default/Filled styles and Outline styles.
  - More consistent `:hover` and `:active` styles.
  - `:focus` styles are now always visible and legible.
- Adds a `--local-color` color variable to scope color relationships to nested blocks.
- Reduces selectors in `style.css` output.
- 1:1 experience between editor and front end button styles.
- Properly supports Dark-mode.

Props allancole, poena, scruffian, megphillips91.
Fixes #51927.
Built from https://develop.svn.wordpress.org/trunk@49987


git-svn-id: http://core.svn.wordpress.org/trunk@49688 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2021-01-20 05:51:02 +00:00
parent ce5a508734
commit b3bb99b3d7
15 changed files with 2046 additions and 2071 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

780
wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View File

File diff suppressed because it is too large Load Diff

856
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

File diff suppressed because it is too large Load Diff

576
wp-content/themes/twentytwentyone/assets/css/style-editor.css
View File

@ -524,33 +524,50 @@ a:hover {
} }
.wp-block-button__link { .wp-block-button__link {
line-height: var(--button--line-height); border: var(--button--border-width) solid transparent;
color: var(--button--color-text); border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-button__link:hover,
.wp-block-button__link:active {
background-color: transparent;
border-color: currentColor;
color: inherit;
} }
.wp-block-button__link:focus { .wp-block-button__link:focus {
background: transparent;
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.is-dark-theme .wp-block-button__link:focus {
color: var(--button--color-background);
}
.wp-block-button__link:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-button__link:disabled { .wp-block-button__link:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
@ -573,69 +590,81 @@ a:hover {
margin-bottom: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical);
} }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-background));
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
color: var(--button--color-text-active) !important; border-color: currentColor !important;
background: transparent !important; background-color: transparent !important;
border-color: var(--button--color-background); color: inherit !important;
} }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--button--color-text-hover) !important; outline-offset: inherit;
background: transparent !important; outline: inherit;
border-color: var(--button--color-background);
} }
.wp-block-button.is-style-outline .wp-block-button__link { .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
color: var(--button--color-background); .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
background: transparent; .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
border: var(--button--border-width) solid currentColor;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button.is-style-outline .wp-block-button__link:active,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
border-color: var(--button--color-background);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background {
border-color: var(--button--color-background);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
background-color: var(--button--color-background) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: var(--global--color-dark-gray);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
color: var(--global--color-dark-gray);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
border-color: currentColor; border-color: currentColor;
} }
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active, .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover { color: var(--global--color-primary);
color: var(--button--color-text) !important; }
border-color: var(--button--color-background);
.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-primary, var(--global--color-primary));
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: inherit;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active {
background-color: var(--global--color-primary) !important;
border-color: transparent !important;
color: var(--global--color-background) !important;
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--local--color-background, var(--global--color-background)) !important;
}
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
color: var(--local--color-background, var(--global--color-background)) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:focus {
outline-offset: inherit;
outline: inherit;
} }
.wp-block-button.is-style-squared { .wp-block-button.is-style-squared {
@ -848,43 +877,60 @@ a:hover {
} }
.wp-block-file .wp-block-file__button { .wp-block-file .wp-block-file__button {
line-height: var(--button--line-height); border: var(--button--border-width) solid transparent;
color: var(--button--color-text); border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
display: inline-block; display: inline-block;
} }
.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-file .wp-block-file__button:hover,
.wp-block-file .wp-block-file__button:active {
background-color: transparent;
border-color: currentColor;
color: inherit;
}
.wp-block-file .wp-block-file__button:focus { .wp-block-file .wp-block-file__button:focus {
background: transparent;
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.is-dark-theme .wp-block-file .wp-block-file__button:focus {
color: var(--button--color-background);
}
.wp-block-file .wp-block-file__button:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-file .wp-block-file__button:disabled { .wp-block-file .wp-block-file__button:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
color: var(--button--color-text-active); color: var(--button--color-text-active);
} }
.wp-block-file .wp-block-file__button:hover { .wp-block-file .wp-block-file__button:focus {
color: var(--button--color-text-hover); outline-offset: inherit;
background: transparent; outline: inherit;
} }
.wp-block-gallery figcaption { .wp-block-gallery figcaption {
@ -1747,6 +1793,7 @@ pre.wp-block-preformatted {
margin-bottom: calc(var(--global--spacing-vertical) / 3); margin-bottom: calc(var(--global--spacing-vertical) / 3);
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search .wp-block-search__input { .wp-block-search .wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color); border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius); border-radius: var(--form--border-radius);
@ -1758,71 +1805,72 @@ pre.wp-block-preformatted {
padding: var(--form--spacing-unit); padding: var(--form--spacing-unit);
} }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.is-dark-theme .wp-block-search .wp-block-search__input { .is-dark-theme .wp-block-search .wp-block-search__input {
background: var(--global--color-white-90); background: var(--global--color-white-90);
} }
.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input, .has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input, .has-background .wp-block-search .wp-block-search__input {
.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input, border-color: var(--local--color-primary, var(--global--color-primary)) !important;
.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
border-color: var(--form--color-text);
}
.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
border-color: var(--global--color-white);
} }
.wp-block-search .wp-block-search__button { .wp-block-search .wp-block-search__button {
line-height: var(--button--line-height); border: var(--button--border-width) solid transparent;
color: var(--button--color-text); border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
box-shadow: none; box-shadow: none;
margin-left: 0; margin-left: 0;
}
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active {
background-color: transparent; background-color: transparent;
color: var(--button--color-text-hover); border-color: currentColor;
color: inherit;
} }
.wp-block-search .wp-block-search__button:focus { .wp-block-search .wp-block-search__button:focus {
background: transparent;
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.is-dark-theme .wp-block-search .wp-block-search__button:focus {
color: var(--button--color-background);
}
.wp-block-search .wp-block-search__button:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-search .wp-block-search__button:disabled { .wp-block-search .wp-block-search__button:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
color: var(--button--color-text-active); color: var(--button--color-text-active);
} }
.wp-block-search .wp-block-search__button:hover {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
.wp-block-search .wp-block-search__button.has-icon { .wp-block-search .wp-block-search__button.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
display: inherit;
} }
.wp-block-search .wp-block-search__button.has-icon svg { .wp-block-search .wp-block-search__button.has-icon svg {
@ -1830,119 +1878,50 @@ pre.wp-block-preformatted {
height: 40px; height: 40px;
} }
.has-background.has-gray-background-color .wp-block-search .wp-block-search__button, .has-background .wp-block-search .wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button, .has-background .wp-block-search .wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search .wp-block-search__button { background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--global--color-white); color: var(--local--color-primary, var(--global--color-primary)) !important;
border-color: currentColor;
} }
.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover, .has-text-color .wp-block-search .wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover, .has-text-color .wp-block-search .wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--global--color-white);
} }
.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover, .wp-block-search .wp-block-search__button:focus {
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover, outline-offset: inherit;
.is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { outline: inherit;
color: var(--button--color-text);
background-color: var(--button--color-background);
} }
.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover, padding: var(--form--border-width);
.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
.has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
color: var(--global--color-white);
background-color: var(--form--border-color);
border-color: var(--form--border-color);
} }
.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
color: var(--form--color-text);
border-color: currentColor;
}
.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
.is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
border: none; border: none;
} }
.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
color: var(--global--color-dark-gray);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button,
.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
color: var(--global--color-dark-gray);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white);
}
.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
} }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
color: var(--button--color-text);
border-color: currentColor;
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
color: var(--button--color-text-hover);
border-color: currentColor;
}
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--button--color-background);
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
color: var(--button--color-text);
border-color: currentColor;
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
.wp-block[data-align=center] > * { .wp-block[data-align=center] > * {
text-align: center; text-align: center;
} }
@ -2350,42 +2329,92 @@ a {
color: var(--global--color-black); color: var(--global--color-black);
} }
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] { .has-gray-color[class] {
color: var(--global--color-gray); color: var(--global--color-gray);
} }
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] { .has-dark-gray-color[class] {
color: var(--global--color-dark-gray); color: var(--global--color-dark-gray);
} }
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] { .has-green-color[class] {
color: var(--global--color-green); color: var(--global--color-green);
} }
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] { .has-blue-color[class] {
color: var(--global--color-blue); color: var(--global--color-blue);
} }
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] { .has-purple-color[class] {
color: var(--global--color-purple); color: var(--global--color-purple);
} }
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] { .has-red-color[class] {
color: var(--global--color-red); color: var(--global--color-red);
} }
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] { .has-orange-color[class] {
color: var(--global--color-orange); color: var(--global--color-orange);
} }
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] { .has-yellow-color[class] {
color: var(--global--color-yellow); color: var(--global--color-yellow);
} }
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] { .has-white-color[class] {
color: var(--global--color-white); color: var(--global--color-white);
} }
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a, .has-background a,
.has-background p, .has-background p,
.has-background h1, .has-background h1,
@ -2401,56 +2430,133 @@ a {
background-color: var(--global--color-black); background-color: var(--global--color-black);
} }
.has-gray-background-color[class] { .has-black-background-color[class] [class*=__inner-container] {
background-color: var(--global--color-gray); --local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
} }
.has-dark-gray-background-color[class] { .has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray); background-color: var(--global--color-dark-gray);
} }
.has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
.has-light-gray-background-color[class] {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
.has-green-background-color[class] { .has-green-background-color[class] {
background-color: var(--global--color-green); background-color: var(--global--color-green);
} }
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] { .has-blue-background-color[class] {
background-color: var(--global--color-blue); background-color: var(--global--color-blue);
} }
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] { .has-purple-background-color[class] {
background-color: var(--global--color-purple); background-color: var(--global--color-purple);
} }
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] { .has-red-background-color[class] {
background-color: var(--global--color-red); background-color: var(--global--color-red);
} }
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] { .has-orange-background-color[class] {
background-color: var(--global--color-orange); background-color: var(--global--color-orange);
} }
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] { .has-yellow-background-color[class] {
background-color: var(--global--color-yellow); background-color: var(--global--color-yellow);
} }
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] { .has-white-background-color[class] {
background-color: var(--global--color-white); background-color: var(--global--color-white);
} }
:not(.has-text-color).has-black-background-color[class], .has-white-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-gray-background-color[class], --local--color-background: var(--global--color-white, #fff);
:not(.has-text-color).has-dark-gray-background-color[class] { background-color: var(--local--color-background);
color: var(--global--color-white);
} }
:not(.has-text-color).has-green-background-color[class], .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-blue-background-color[class], .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-purple-background-color[class], .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-red-background-color[class], --local--color-primary: var(--global--color-background, #fff);
:not(.has-text-color).has-orange-background-color[class], color: var(--local--color-primary, var(--global--color-primary));
:not(.has-text-color).has-yellow-background-color[class], }
:not(.has-text-color).has-white-background-color[class] {
color: var(--global--color-dark-gray); .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
} }
.has-purple-to-yellow-gradient-background { .has-purple-to-yellow-gradient-background {

54
wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss
View File

@ -20,32 +20,60 @@
// Button style // Button style
// - Applies button styles to blocks and elements that share them. // - Applies button styles to blocks and elements that share them.
@mixin button-style() { @mixin button-style() {
line-height: var(--button--line-height); border: var(--button--border-width) solid transparent;
color: var(--button--color-text); border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
&:focus { // Standard Button Color Relationship Logic
background: transparent; &:not(:hover):not(:active) {
outline-offset: -6px;
outline: 2px dotted currentColor;
.is-dark-theme & { // Text colors
color: var(--button--color-background); &:not(.has-text-color) {
color: var(--global--color-background);
// Nested
.has-background & {
color: var(--local--color-background, var(--global--color-primary));
&.has-background {
color: var(--global--color-primary);
}
}
} }
// Background-colors
&:not(.has-background) { &:not(.has-background) {
color: var(--button--color-text-hover); background-color: var(--global--color-primary);
// Nested
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary));
}
} }
} }
// Hover Button color should match parent element foreground color
&:hover,
&:active {
background-color: transparent;
border-color: currentColor;
color: inherit;
}
// Focus Button outline color should always match the current text color
&:focus {
outline-offset: -6px;
outline: 2px dotted currentColor;
}
// Disabled Button colors
&:disabled { &:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);

133
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss
View File

@ -27,82 +27,105 @@
// Target the default and filled button states. // Target the default and filled button states.
&:not(.is-style-outline) { &:not(.is-style-outline) {
.wp-block-button__link { .wp-block-button__link:not(:hover):not(:active) {
&:active { // Text colors
color: var(--button--color-text-active) !important; &:not(.has-text-color) {
background: transparent !important; color: var(--global--color-background);
border-color: var(--button--color-background);
// Nested
.has-background & {
color: var(--local--color-background, var(--global--color-background));
&.has-background {
color: var(--global--color-primary);
}
}
} }
&:hover { // Background-colors
color: var(--button--color-text-hover) !important; &:not(.has-background) {
background: transparent !important; background-color: var(--global--color-primary);
border-color: var(--button--color-background);
// Nested
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary));
}
} }
} }
// Hover Button color should match parent element foreground color
.wp-block-button__link:hover,
.wp-block-button__link:active {
border-color: currentColor !important;
background-color: transparent !important;
color: inherit !important;
}
// Remove :focus styles in the editor
.wp-block-button__link:focus {
outline-offset: inherit;
outline: inherit;
}
} }
// Outline Style. // Outline Style.
&.is-style-outline { &.is-style-outline {
.wp-block-button__link { .wp-block-button__link:not(:hover):not(:active) {
color: var(--button--color-background);
background: transparent;
border: var(--button--border-width) solid currentColor;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:active, // Border colors
&:hover { &:not(.has-text-color),
background-color: var(--button--color-background); &:not(.has-background),
color: var(--button--color-text); &.has-background {
border-color: var(--button--color-background); border-color: currentColor;
}
// Text colors
&:not(.has-text-color) {
color: var(--global--color-primary);
// Nested
.has-background & {
color: var(--local--color-primary, var(--global--color-primary));
}
} }
&.has-background { &.has-background {
border-color: var(--button--color-background); // Nested
.has-background &:not(.has-text-color) {
&:active, color: inherit;
&:hover {
background-color: var(--button--color-background) !important;
} }
} }
&.has-background:not(.has-text-color) { // Background-colors
color: var(--global--color-dark-gray); &:not(.has-background) {
background-color: transparent;
}
}
// Hover Button color should match default button style
.wp-block-button__link:hover,
.wp-block-button__link:active {
background-color: var(--global--color-primary) !important;
border-color: transparent !important;
color: var(--global--color-background) !important;
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--local--color-background, var(--global--color-background)) !important;
} }
&.has-background.has-gray-background-color:not(.has-text-color), .has-text-color & {
&.has-background.has-dark-gray-background-color:not(.has-text-color), color: var(--local--color-background, var(--global--color-background)) !important;
&.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
} }
}
.is-dark-theme & { // Remove :focus styles in the editor
.wp-block-button__link:focus {
&:not(.has-text-color) { outline-offset: inherit;
outline: inherit;
&.has-background.has-white-background-color,
&.has-background.has-green-background-color,
&.has-background.has-blue-background-color,
&.has-background.has-purple-background-color,
&.has-background.has-red-background-color,
&.has-background.has-orange-background-color,
&.has-background.has-yellow-background-color {
color: var(--global--color-dark-gray);
}
}
}
&.has-text-color {
border-color: currentColor;
&:active,
&:hover {
color: var(--button--color-text) !important;
border-color: var(--button--color-background);
}
}
} }
} }

151
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss
View File

@ -4,29 +4,13 @@
.site .button, .site .button,
input[type="submit"], input[type="submit"],
input[type="reset"], input[type="reset"],
.wp-block-search__button, .wp-block-search .wp-block-search__button,
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link,
.wp-block-file a.wp-block-file__button {
// Extend button style // Extend button style
@include button-style(); @include button-style();
} }
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search .wp-block-search__button,
.wp-block-file .wp-block-file__button {
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
&:hover {
color: var(--button--color-text-hover);
background: transparent;
}
}
/** /**
* Block Options * Block Options
*/ */
@ -35,88 +19,91 @@ input[type="reset"],
// Target the default and filled button states. // Target the default and filled button states.
&:not(.is-style-outline) { &:not(.is-style-outline) {
.wp-block-button__link { .wp-block-button__link:not(:hover):not(:active) {
&:active { // Text colors
color: var(--button--color-text-active) !important; &:not(.has-text-color) {
background: transparent !important; color: var(--global--color-background);
border-color: var(--button--color-background);
// Nested
.has-background & {
color: var(--local--color-background, var(--global--color-background));
&.has-background {
color: var(--global--color-primary);
}
}
} }
&:hover { // Background-colors
color: var(--button--color-text-hover) !important; &:not(.has-background) {
background: transparent !important; background-color: var(--global--color-primary);
border-color: var(--button--color-background);
}
&:focus { // Nested
color: var(--button--color-text) !important; .has-background & {
background: var(--button--color-background) !important; background-color: var(--local--color-primary, var(--global--color-primary));
}
} }
} }
// Hover Button color should match parent element foreground color
.wp-block-button__link:hover,
.wp-block-button__link:active {
border-color: currentColor !important;
background-color: transparent !important;
color: inherit !important;
}
} }
// Outline Style. // Outline Style.
&.is-style-outline { &.is-style-outline {
.wp-block-button__link { .wp-block-button__link:not(:hover):not(:active) {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:not(.has-background) { // Border colors
background: transparent; &:not(.has-text-color),
} &:not(.has-background),
&.has-background {
&:not(.has-background):not(.has-text-color) {
background: transparent;
color: var(--button--color-background);
border-color: var(--button--color-background);
}
&.has-background:not(.has-text-color) {
color: currentColor;
}
&.has-background.has-gray-background-color:not(.has-text-color),
&.has-background.has-dark-gray-background-color:not(.has-text-color),
&.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme & {
&:not(.has-text-color) {
&.has-background {
color: var(--global--color-dark-gray);
}
&.has-background.has-gray-background-color,
&.has-background.has-dark-gray-background-color,
&.has-background.has-black-background-color {
color: var(--global--color-white);
}
}
}
&.has-text-color,
&.has-background.has-text-color {
border-color: currentColor; border-color: currentColor;
} }
&:active, // Text colors
&:hover { &:not(.has-text-color) {
color: var(--button--color-text) !important; color: var(--global--color-primary);
background: var(--button--color-background) !important;
border-color: var(--button--color-background);
&.has-text-color { // Nested
border-color: var(--button--color-background); .has-background & {
color: var(--local--color-primary, var(--global--color-primary));
} }
} }
&:focus { &.has-background {
color: var(--button--color-background) !important; // Nested
background: transparent !important; .has-background &:not(.has-text-color) {
color: inherit;
}
}
// Background-colors
&:not(.has-background) {
background-color: transparent;
}
}
.wp-block-button__link:hover,
.wp-block-button__link:active {
border-color: transparent !important;
background-color: var(--global--color-primary) !important;
color: var(--global--color-background) !important;
.has-background & {
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--local--color-background, var(--global--color-background)) !important;
}
.has-text-color & {
color: var(--local--color-background, var(--global--color-background)) !important;
} }
} }
} }

9
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss
View File

@ -15,10 +15,11 @@
// Extend button style // Extend button style
@include button-style(); @include button-style();
display: inline-block; display: inline-block;
&:hover { // Remove :focus styles in the editor
color: var(--button--color-text-hover); &:focus {
background: transparent; outline-offset: inherit;
outline: inherit;
} }
} }
} }

13
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss
View File

@ -4,21 +4,10 @@
a.wp-block-file__button:active, a.wp-block-file__button:active,
a.wp-block-file__button:focus, a.wp-block-file__button:focus,
a.wp-block-file__button:hover { a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit; opacity: inherit;
} }
a.wp-block-file__button:visited { a.wp-block-file__button {
color: var(--button--color-text);
&:hover {
color: var(--button--color-text-hover);
}
}
.wp-block-file__button {
// Extend button style
@include button-style();
display: inline-block; display: inline-block;
} }
} }

133
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss
View File

@ -7,6 +7,7 @@
margin-bottom: calc(var(--global--spacing-vertical) / 3); margin-bottom: calc(var(--global--spacing-vertical) / 3);
} }
&.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search__input { .wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color); border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius); border-radius: var(--form--border-radius);
@ -21,23 +22,8 @@
background: var(--global--color-white-90); background: var(--global--color-white-90);
} }
.has-background.has-white-background-color &, .has-background & {
.has-background.has-green-background-color &, border-color: var(--local--color-primary, var(--global--color-primary)) !important;
.has-background.has-blue-background-color &,
.has-background.has-purple-background-color &,
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
.is-dark-theme & {
border-color: var(--form--color-text);
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--global--color-white);
} }
} }
@ -45,16 +31,10 @@
@include button-style(); @include button-style();
box-shadow: none; box-shadow: none;
margin-left: 0; margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
&:hover {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
&.has-icon { &.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
display: inherit;
svg { svg {
width: 40px; width: 40px;
@ -62,109 +42,60 @@
} }
} }
.has-background.has-gray-background-color &, &:hover,
.has-background.has-dark-gray-background-color &, &:active {
.has-background.has-black-background-color & {
color: var(--global--color-white);
border-color: currentColor;
&:hover { .has-background & {
color: var(--global--color-white); background-color: var(--local--color-background, var(--global--color-background)) !important;
background-color: var(--button--color-background); color: var(--local--color-primary, var(--global--color-primary)) !important;
border-color: var(--global--color-white); }
.is-dark-theme & { .has-text-color & {
color: var(--button--color-text); color: var(--local--color-primary, var(--global--color-primary)) !important;
background-color: var(--button--color-background);
}
} }
} }
.has-background.has-white-background-color &, // Remove :focus styles in the editor
.has-background.has-green-background-color &, &:focus {
.has-background.has-blue-background-color &, outline-offset: inherit;
.has-background.has-purple-background-color &, outline: inherit;
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
&:hover {
color: var(--global--color-white);
background-color: var(--form--border-color);
border-color: var(--form--border-color);
}
.is-dark-theme & {
color: var(--form--color-text);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
} }
} }
&.wp-block-search__button-inside { &.wp-block-search__button-inside {
.wp-block-search__input, .wp-block-search__inside-wrapper {
.has-background.has-white-background-color & .wp-block-search__input, padding: var(--form--border-width);
.has-background.has-green-background-color & .wp-block-search__input, }
.has-background.has-blue-background-color & .wp-block-search__input,
.has-background.has-purple-background-color & .wp-block-search__input, .wp-block-search__input {
.has-background.has-red-background-color & .wp-block-search__input,
.has-background.has-orange-background-color & .wp-block-search__input,
.has-background.has-yellow-background-color & .wp-block-search__input {
border: none; border: none;
} }
&.wp-block-search__text-button { &.wp-block-search__text-button,
&.wp-block-search__icon-button {
.wp-block-search__button { .wp-block-search__button {
// Match the text button size with the icon button. // Search button always needs black contrast against white form background
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
}
.wp-block-search__button {
.is-dark-theme & {
color: var(--button--color-text);
border-color: currentColor;
&:hover { &:hover {
color: var(--global--color-white); color: var(--global--color-dark-gray);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
color: var(--button--color-text-hover);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--button--color-background);
} }
.is-dark-theme & { .is-dark-theme & {
color: var(--button--color-text); color: var(--global--color-dark-gray);
border-color: currentColor;
&:hover { &:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white); color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
} }
} }
} }
} }
&.wp-block-search__text-button .wp-block-search__button {
// Match the text button size with the icon button.
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
} }
} }

108
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss
View File

@ -28,31 +28,15 @@
border-color: var(--form--border-color); border-color: var(--form--border-color);
} }
.has-background &, .has-background & {
[class*="background-color"] &, border-color: var(--local--color-primary, var(--global--color-primary)) !important;
[style*="background-color"] &,
.wp-block-cover[style*="background-image"] & {
border-color: currentColor;
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--global--color-white);
} }
} }
button.wp-block-search__button { button.wp-block-search__button {
margin-left: 0; margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1; line-height: 1;
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
&.has-icon { &.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal)); padding: 6px calc(0.5 * var(--button--padding-horizontal));
@ -63,43 +47,16 @@
} }
} }
.has-background.has-gray-background-color &, &:hover,
.has-background.has-dark-gray-background-color &, &:active {
.has-background.has-black-background-color & {
color: var(--global--color-white);
border-color: currentColor;
&:hover { .has-background & {
background-color: var(--button--color-background); background-color: var(--local--color-background, var(--global--color-background)) !important;
border-color: var(--global--color-white); color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--global--color-white);
.is-dark-theme & {
color: var(--button--color-text);
}
} }
}
.has-background.has-white-background-color &, .has-text-color & {
.has-background.has-green-background-color &, color: var(--local--color-primary, var(--global--color-primary)) !important;
.has-background.has-blue-background-color &,
.has-background.has-purple-background-color &,
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
border-color: currentColor;
color: currentColor;
&:hover {
background-color: var(--form--border-color);
border-color: var(--form--border-color);
color: var(--global--color-white);
.is-dark-theme & {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
}
} }
} }
} }
@ -110,59 +67,44 @@
background-color: var(--global--color-white); background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color); border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius); border-radius: var(--form--border-radius);
padding: var(--form--border-width);
.has-background & {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
}
.wp-block-search__input { .wp-block-search__input {
margin-left: 0;
margin-right: 0; margin-right: 0;
padding-left: var(--form--spacing-unit);
// Add outline for focus styles to override default
&:focus { &:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color); outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
.is-dark-theme & {
outline-color: currentColor;
}
} }
} }
}
&.wp-block-search__text-button {
button.wp-block-search__button { button.wp-block-search__button {
// Match the text button size with the icon button.
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
}
button.wp-block-search__button {
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--button--color-background);
color: var(--button--color-background);
// Search button always needs black contrast against white form background
&:hover { &:hover {
color: var(--global--color-white); color: var(--global--color-dark-gray);
} }
.is-dark-theme & { .is-dark-theme & {
border-color: var(--button--color-text); color: var(--global--color-dark-gray);
color: var(--button--color-text);
&:hover { &:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white); color: var(--global--color-white);
} }
} }
}
.is-dark-theme & { &.has-icon {
border-color: var(--button--color-text); padding: 6px calc(0.5 * var(--button--padding-horizontal));
color: var(--button--color-text);
&:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
} }
} }
} }

7
wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss
View File

@ -117,14 +117,7 @@
.search-submit { .search-submit {
margin-left: 0; margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical)); margin-bottom: calc(0.5 * var(--global--spacing-vertical));
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
} }
} }

139
wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss
View File

@ -1,42 +1,92 @@
// Gutenberg text color options // Gutenberg text color options
.has-black-color[class] { .has-black-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-black, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-black); color: var(--global--color-black);
} }
.has-gray-color[class] { .has-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-gray); color: var(--global--color-gray);
} }
.has-dark-gray-color[class] { .has-dark-gray-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-dark-gray, #000000);
color: var(--local--color-primary);
}
color: var(--global--color-dark-gray); color: var(--global--color-dark-gray);
} }
.has-green-color[class] { .has-green-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-green, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-green); color: var(--global--color-green);
} }
.has-blue-color[class] { .has-blue-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-blue, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-blue); color: var(--global--color-blue);
} }
.has-purple-color[class] { .has-purple-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-purple, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-purple); color: var(--global--color-purple);
} }
.has-red-color[class] { .has-red-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-red, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-red); color: var(--global--color-red);
} }
.has-orange-color[class] { .has-orange-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-orange, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-orange); color: var(--global--color-orange);
} }
.has-yellow-color[class] { .has-yellow-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-yellow, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-yellow); color: var(--global--color-yellow);
} }
.has-white-color[class] { .has-white-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-white, #FFFFFF);
color: var(--local--color-primary);
}
color: var(--global--color-white); color: var(--global--color-white);
} }
@ -56,51 +106,118 @@
} }
.has-black-background-color[class] { .has-black-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-black, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-black); background-color: var(--global--color-black);
} }
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
}
.has-dark-gray-background-color[class] { .has-dark-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-dark-gray, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-dark-gray); background-color: var(--global--color-dark-gray);
} }
.has-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-gray, #000000);
background-color: var(--local--color-background);
}
background-color: var(--global--color-gray);
}
.has-light-gray-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-light-gray, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-light-gray);
}
.has-green-background-color[class] { .has-green-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-green, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-green); background-color: var(--global--color-green);
} }
.has-blue-background-color[class] { .has-blue-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-blue, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-blue); background-color: var(--global--color-blue);
} }
.has-purple-background-color[class] { .has-purple-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-purple, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-purple); background-color: var(--global--color-purple);
} }
.has-red-background-color[class] { .has-red-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-red, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-red); background-color: var(--global--color-red);
} }
.has-orange-background-color[class] { .has-orange-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-orange, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-orange); background-color: var(--global--color-orange);
} }
.has-yellow-background-color[class] { .has-yellow-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-yellow, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-yellow); background-color: var(--global--color-yellow);
} }
.has-white-background-color[class] { .has-white-background-color[class] {
// Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-background: var(--global--color-white, #FFFFFF);
background-color: var(--local--color-background);
}
background-color: var(--global--color-white); background-color: var(--global--color-white);
} }
:not(.has-text-color) { .has-background:not(.has-text-color) {
&.has-black-background-color[class], &.has-black-background-color[class],
&.has-gray-background-color[class], &.has-gray-background-color[class],
&.has-dark-gray-background-color[class] { &.has-dark-gray-background-color[class] {
color: var(--global--color-white); // Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-background, #FFFFFF);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
--local--color-primary: var(--global--color-primary, #000000);
}
color: var(--local--color-primary, var(--global--color-primary));
}
} }
&.has-green-background-color[class], &.has-green-background-color[class],
@ -110,7 +227,15 @@
&.has-orange-background-color[class], &.has-orange-background-color[class],
&.has-yellow-background-color[class], &.has-yellow-background-color[class],
&.has-white-background-color[class] { &.has-white-background-color[class] {
color: var(--global--color-dark-gray); // Localize CSS-variables to limit relationship scope
[class*="__inner-container"] {
--local--color-primary: var(--global--color-primary, #000000);
// Reverse the local foreground color in darkmode
.is-dark-theme & {
--local--color-primary: var(--global--color-background, #FFFFFF);
}
color: var(--local--color-primary, var(--global--color-primary));
}
} }
} }

578
wp-content/themes/twentytwentyone/style-rtl.css
View File

@ -1707,149 +1707,172 @@ a:hover {
.site .button, .site .button,
input[type=submit], input[type=submit],
input[type=reset], input[type=reset],
.wp-block-search__button, .wp-block-search .wp-block-search__button,
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link,
line-height: var(--button--line-height); .wp-block-file a.wp-block-file__button {
color: var(--button--color-text); border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.site .button:not(:hover):not(:active):not(.has-text-color),
input[type=submit]:not(:hover):not(:active):not(.has-text-color),
input[type=reset]:not(:hover):not(:active):not(.has-text-color),
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.site .button:not(:hover):not(:active):not(.has-background),
input[type=submit]:not(:hover):not(:active):not(.has-background),
input[type=reset]:not(:hover):not(:active):not(.has-background),
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .site .button:not(:hover):not(:active):not(.has-background),
.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.site .button:hover,
.site .button:active,
input[type=submit]:hover,
input[type=submit]:active,
input[type=reset]:hover,
input[type=reset]:active,
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:active,
.wp-block-file a.wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:active {
background-color: transparent;
border-color: currentColor;
color: inherit;
} }
.site .button:focus, .site .button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=reset]:focus, input[type=reset]:focus,
.wp-block-search__button:focus, .wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus { .wp-block-button .wp-block-button__link:focus,
background: transparent; .wp-block-file a.wp-block-file__button:focus {
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.is-dark-theme .site .button:focus,
.is-dark-theme input[type=submit]:focus,
.is-dark-theme input[type=reset]:focus,
.is-dark-theme .wp-block-search__button:focus,
.is-dark-theme .wp-block-button .wp-block-button__link:focus {
color: var(--button--color-background);
}
.site .button:focus:not(.has-background),
input[type=submit]:focus:not(.has-background),
input[type=reset]:focus:not(.has-background),
.wp-block-search__button:focus:not(.has-background),
.wp-block-button .wp-block-button__link:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.site .button:disabled, .site .button:disabled,
input[type=submit]:disabled, input[type=submit]:disabled,
input[type=reset]:disabled, input[type=reset]:disabled,
.wp-block-search__button:disabled, .wp-block-search .wp-block-search__button:disabled,
.wp-block-button .wp-block-button__link:disabled { .wp-block-button .wp-block-button__link:disabled,
.wp-block-file a.wp-block-file__button:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
color: var(--button--color-text-active); color: var(--button--color-text-active);
} }
.site .button:active,
input[type=submit]:active,
input[type=reset]:active,
.wp-block-search .wp-block-search__button:active,
.wp-block-file .wp-block-file__button:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
.site .button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-hover);
background: transparent;
}
/** /**
* Block Options * Block Options
*/ */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-background));
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
color: var(--button--color-text-active) !important; border-color: currentColor !important;
background: transparent !important; background-color: transparent !important;
border-color: var(--button--color-background); color: inherit !important;
} }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
color: var(--button--color-text-hover) !important; .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
background: transparent !important; .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
border-color: var(--button--color-background);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
background: transparent;
color: var(--button--color-background);
border-color: var(--button--color-background);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
color: var(--global--color-dark-gray);
}
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
color: var(--global--color-white);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
border-color: currentColor; border-color: currentColor;
} }
.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--global--color-primary);
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
border-color: var(--button--color-background);
} }
.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color, .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color { color: var(--local--color-primary, var(--global--color-primary));
border-color: var(--button--color-background);
} }
.wp-block-button.is-style-outline .wp-block-button__link:focus { .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: var(--button--color-background) !important; color: inherit;
background: transparent !important; }
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active {
border-color: transparent !important;
background-color: var(--global--color-primary) !important;
color: var(--global--color-background) !important;
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--local--color-background, var(--global--color-background)) !important;
}
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
color: var(--local--color-background, var(--global--color-background)) !important;
} }
.wp-block-button .is-style-squared .wp-block-button__link { .wp-block-button .is-style-squared .wp-block-button__link {
@ -2118,53 +2141,13 @@ input[type=reset]:hover,
.wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover { .wp-block-file a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit; opacity: inherit;
} }
.wp-block-file a.wp-block-file__button:visited { .wp-block-file a.wp-block-file__button {
color: var(--button--color-text);
}
.wp-block-file a.wp-block-file__button:visited:hover {
color: var(--button--color-text-hover);
}
.wp-block-file .wp-block-file__button {
line-height: var(--button--line-height);
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
display: inline-block; display: inline-block;
} }
.wp-block-file .wp-block-file__button:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
}
.is-dark-theme .wp-block-file .wp-block-file__button:focus {
color: var(--button--color-background);
}
.wp-block-file .wp-block-file__button:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-file .wp-block-file__button:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
.wp-block-gallery { .wp-block-gallery {
margin: 0 auto; margin: 0 auto;
} }
@ -3266,31 +3249,15 @@ pre.wp-block-preformatted {
border-color: var(--form--border-color); border-color: var(--form--border-color);
} }
.has-background .wp-block-search .wp-block-search__input, .has-background .wp-block-search .wp-block-search__input {
[class*=background-color] .wp-block-search .wp-block-search__input, border-color: var(--local--color-primary, var(--global--color-primary)) !important;
[style*=background-color] .wp-block-search .wp-block-search__input,
.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
border-color: currentColor;
}
.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
border-color: var(--global--color-white);
} }
.wp-block-search button.wp-block-search__button { .wp-block-search button.wp-block-search__button {
margin-right: 0; margin-right: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1; line-height: 1;
} }
.wp-block-search button.wp-block-search__button:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.wp-block-search button.wp-block-search__button.has-icon { .wp-block-search button.wp-block-search__button.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal)); padding: 6px calc(0.5 * var(--button--padding-horizontal));
} }
@ -3301,120 +3268,59 @@ pre.wp-block-preformatted {
fill: currentColor; fill: currentColor;
} }
.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button, .has-background .wp-block-search button.wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button, .has-background .wp-block-search button.wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search button.wp-block-search__button { background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--global--color-white); color: var(--local--color-primary, var(--global--color-primary)) !important;
border-color: currentColor;
} }
.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-text-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-text-color .wp-block-search button.wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { color: var(--local--color-primary, var(--global--color-primary)) !important;
background-color: var(--button--color-background);
border-color: var(--global--color-white);
color: var(--global--color-white);
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
color: var(--button--color-text);
}
.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
border-color: currentColor;
color: currentColor;
}
.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
background-color: var(--form--border-color);
border-color: var(--form--border-color);
color: var(--global--color-white);
}
.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: var(--global--color-white); background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color); border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius); border-radius: var(--form--border-radius);
padding: var(--form--border-width);
}
.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin-right: 0;
margin-left: 0; margin-left: 0;
padding-right: var(--form--spacing-unit);
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color); outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
} }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
outline-color: currentColor;
}
.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
} }
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, color: var(--global--color-dark-gray);
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-background);
color: var(--button--color-background);
} }
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, color: var(--global--color-dark-gray);
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white); color: var(--global--color-white);
} }
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, padding: 6px calc(0.5 * var(--button--padding-horizontal));
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-text);
color: var(--button--color-text);
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
color: var(--global--color-white);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-text);
color: var(--button--color-text);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
} }
.wp-block-search__button { .wp-block-search__button {
@ -5562,16 +5468,9 @@ h1.page-title {
.widget_search > .search-form .search-submit { .widget_search > .search-form .search-submit {
margin-right: 0; margin-right: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical)); margin-bottom: calc(0.5 * var(--global--spacing-vertical));
} }
.widget_search > .search-form .search-submit:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.widget_rss a.rsswidget .rss-widget-icon { .widget_rss a.rsswidget .rss-widget-icon {
display: none; display: none;
} }
@ -5630,42 +5529,92 @@ h1.page-title {
color: var(--global--color-black); color: var(--global--color-black);
} }
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] { .has-gray-color[class] {
color: var(--global--color-gray); color: var(--global--color-gray);
} }
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] { .has-dark-gray-color[class] {
color: var(--global--color-dark-gray); color: var(--global--color-dark-gray);
} }
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] { .has-green-color[class] {
color: var(--global--color-green); color: var(--global--color-green);
} }
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] { .has-blue-color[class] {
color: var(--global--color-blue); color: var(--global--color-blue);
} }
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] { .has-purple-color[class] {
color: var(--global--color-purple); color: var(--global--color-purple);
} }
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] { .has-red-color[class] {
color: var(--global--color-red); color: var(--global--color-red);
} }
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] { .has-orange-color[class] {
color: var(--global--color-orange); color: var(--global--color-orange);
} }
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] { .has-yellow-color[class] {
color: var(--global--color-yellow); color: var(--global--color-yellow);
} }
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] { .has-white-color[class] {
color: var(--global--color-white); color: var(--global--color-white);
} }
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a, .has-background a,
.has-background p, .has-background p,
.has-background h1, .has-background h1,
@ -5681,56 +5630,133 @@ h1.page-title {
background-color: var(--global--color-black); background-color: var(--global--color-black);
} }
.has-gray-background-color[class] { .has-black-background-color[class] [class*=__inner-container] {
background-color: var(--global--color-gray); --local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
} }
.has-dark-gray-background-color[class] { .has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray); background-color: var(--global--color-dark-gray);
} }
.has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
.has-light-gray-background-color[class] {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
.has-green-background-color[class] { .has-green-background-color[class] {
background-color: var(--global--color-green); background-color: var(--global--color-green);
} }
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] { .has-blue-background-color[class] {
background-color: var(--global--color-blue); background-color: var(--global--color-blue);
} }
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] { .has-purple-background-color[class] {
background-color: var(--global--color-purple); background-color: var(--global--color-purple);
} }
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] { .has-red-background-color[class] {
background-color: var(--global--color-red); background-color: var(--global--color-red);
} }
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] { .has-orange-background-color[class] {
background-color: var(--global--color-orange); background-color: var(--global--color-orange);
} }
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] { .has-yellow-background-color[class] {
background-color: var(--global--color-yellow); background-color: var(--global--color-yellow);
} }
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] { .has-white-background-color[class] {
background-color: var(--global--color-white); background-color: var(--global--color-white);
} }
:not(.has-text-color).has-black-background-color[class], .has-white-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-gray-background-color[class], --local--color-background: var(--global--color-white, #fff);
:not(.has-text-color).has-dark-gray-background-color[class] { background-color: var(--local--color-background);
color: var(--global--color-white);
} }
:not(.has-text-color).has-green-background-color[class], .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-blue-background-color[class], .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-purple-background-color[class], .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-red-background-color[class], --local--color-primary: var(--global--color-background, #fff);
:not(.has-text-color).has-orange-background-color[class], color: var(--local--color-primary, var(--global--color-primary));
:not(.has-text-color).has-yellow-background-color[class], }
:not(.has-text-color).has-white-background-color[class] {
color: var(--global--color-dark-gray); .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
} }
.has-purple-to-yellow-gradient-background { .has-purple-to-yellow-gradient-background {

578
wp-content/themes/twentytwentyone/style.css
View File

@ -1717,149 +1717,172 @@ a:hover {
.site .button, .site .button,
input[type=submit], input[type=submit],
input[type=reset], input[type=reset],
.wp-block-search__button, .wp-block-search .wp-block-search__button,
.wp-block-button .wp-block-button__link { .wp-block-button .wp-block-button__link,
line-height: var(--button--line-height); .wp-block-file a.wp-block-file__button {
color: var(--button--color-text); border: var(--button--border-width) solid transparent;
border-radius: var(--button--border-radius);
cursor: pointer; cursor: pointer;
display: block;
font-weight: var(--button--font-weight); font-weight: var(--button--font-weight);
font-family: var(--button--font-family); font-family: var(--button--font-family);
font-size: var(--button--font-size); font-size: var(--button--font-size);
background-color: var(--button--color-background); line-height: var(--button--line-height);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
text-decoration: none;
}
.site .button:not(:hover):not(:active):not(.has-text-color),
input[type=submit]:not(:hover):not(:active):not(.has-text-color),
input[type=reset]:not(:hover):not(:active):not(.has-text-color),
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-primary));
}
.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.site .button:not(:hover):not(:active):not(.has-background),
input[type=submit]:not(:hover):not(:active):not(.has-background),
input[type=reset]:not(:hover):not(:active):not(.has-background),
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .site .button:not(:hover):not(:active):not(.has-background),
.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.site .button:hover,
.site .button:active,
input[type=submit]:hover,
input[type=submit]:active,
input[type=reset]:hover,
input[type=reset]:active,
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:active,
.wp-block-file a.wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:active {
background-color: transparent;
border-color: currentColor;
color: inherit;
} }
.site .button:focus, .site .button:focus,
input[type=submit]:focus, input[type=submit]:focus,
input[type=reset]:focus, input[type=reset]:focus,
.wp-block-search__button:focus, .wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus { .wp-block-button .wp-block-button__link:focus,
background: transparent; .wp-block-file a.wp-block-file__button:focus {
outline-offset: -6px; outline-offset: -6px;
outline: 2px dotted currentColor; outline: 2px dotted currentColor;
} }
.is-dark-theme .site .button:focus,
.is-dark-theme input[type=submit]:focus,
.is-dark-theme input[type=reset]:focus,
.is-dark-theme .wp-block-search__button:focus,
.is-dark-theme .wp-block-button .wp-block-button__link:focus {
color: var(--button--color-background);
}
.site .button:focus:not(.has-background),
input[type=submit]:focus:not(.has-background),
input[type=reset]:focus:not(.has-background),
.wp-block-search__button:focus:not(.has-background),
.wp-block-button .wp-block-button__link:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.site .button:disabled, .site .button:disabled,
input[type=submit]:disabled, input[type=submit]:disabled,
input[type=reset]:disabled, input[type=reset]:disabled,
.wp-block-search__button:disabled, .wp-block-search .wp-block-search__button:disabled,
.wp-block-button .wp-block-button__link:disabled { .wp-block-button .wp-block-button__link:disabled,
.wp-block-file a.wp-block-file__button:disabled {
background-color: var(--global--color-white-50); background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50); border-color: var(--global--color-white-50);
color: var(--button--color-text-active); color: var(--button--color-text-active);
} }
.site .button:active,
input[type=submit]:active,
input[type=reset]:active,
.wp-block-search .wp-block-search__button:active,
.wp-block-file .wp-block-file__button:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
.site .button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
color: var(--button--color-text-hover);
background: transparent;
}
/** /**
* Block Options * Block Options
*/ */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--global--color-background);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
color: var(--local--color-background, var(--global--color-background));
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
color: var(--global--color-primary);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--global--color-primary);
}
.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: var(--local--color-primary, var(--global--color-primary));
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { .wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
color: var(--button--color-text-active) !important; border-color: currentColor !important;
background: transparent !important; background-color: transparent !important;
border-color: var(--button--color-background); color: inherit !important;
} }
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
color: var(--button--color-text-hover) !important; .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
background: transparent !important; .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
border-color: var(--button--color-background);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
background: transparent;
color: var(--button--color-background);
border-color: var(--button--color-background);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
color: currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
color: var(--global--color-dark-gray);
}
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
color: var(--global--color-white);
}
.wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
border-color: currentColor; border-color: currentColor;
} }
.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--global--color-primary);
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
border-color: var(--button--color-background);
} }
.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color, .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
.wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color { color: var(--local--color-primary, var(--global--color-primary));
border-color: var(--button--color-background);
} }
.wp-block-button.is-style-outline .wp-block-button__link:focus { .has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
color: var(--button--color-background) !important; color: inherit;
background: transparent !important; }
.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
background-color: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:active {
border-color: transparent !important;
background-color: var(--global--color-primary) !important;
color: var(--global--color-background) !important;
}
.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
background-color: var(--local--color-primary, var(--global--color-primary)) !important;
color: var(--local--color-background, var(--global--color-background)) !important;
}
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
color: var(--local--color-background, var(--global--color-background)) !important;
} }
.wp-block-button .is-style-squared .wp-block-button__link { .wp-block-button .is-style-squared .wp-block-button__link {
@ -2128,53 +2151,13 @@ input[type=reset]:hover,
.wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:active,
.wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:focus,
.wp-block-file a.wp-block-file__button:hover { .wp-block-file a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit; opacity: inherit;
} }
.wp-block-file a.wp-block-file__button:visited { .wp-block-file a.wp-block-file__button {
color: var(--button--color-text);
}
.wp-block-file a.wp-block-file__button:visited:hover {
color: var(--button--color-text-hover);
}
.wp-block-file .wp-block-file__button {
line-height: var(--button--line-height);
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
display: inline-block; display: inline-block;
} }
.wp-block-file .wp-block-file__button:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
}
.is-dark-theme .wp-block-file .wp-block-file__button:focus {
color: var(--button--color-background);
}
.wp-block-file .wp-block-file__button:focus:not(.has-background) {
color: var(--button--color-text-hover);
}
.wp-block-file .wp-block-file__button:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
.wp-block-gallery { .wp-block-gallery {
margin: 0 auto; margin: 0 auto;
} }
@ -3276,31 +3259,15 @@ pre.wp-block-preformatted {
border-color: var(--form--border-color); border-color: var(--form--border-color);
} }
.has-background .wp-block-search .wp-block-search__input, .has-background .wp-block-search .wp-block-search__input {
[class*=background-color] .wp-block-search .wp-block-search__input, border-color: var(--local--color-primary, var(--global--color-primary)) !important;
[style*=background-color] .wp-block-search .wp-block-search__input,
.wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
border-color: currentColor;
}
.has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
.has-background.has-black-background-color .wp-block-search .wp-block-search__input {
border-color: var(--global--color-white);
} }
.wp-block-search button.wp-block-search__button { .wp-block-search button.wp-block-search__button {
margin-left: 0; margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1; line-height: 1;
} }
.wp-block-search button.wp-block-search__button:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.wp-block-search button.wp-block-search__button.has-icon { .wp-block-search button.wp-block-search__button.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal)); padding: 6px calc(0.5 * var(--button--padding-horizontal));
} }
@ -3311,120 +3278,59 @@ pre.wp-block-preformatted {
fill: currentColor; fill: currentColor;
} }
.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button, .has-background .wp-block-search button.wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button, .has-background .wp-block-search button.wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search button.wp-block-search__button { background-color: var(--local--color-background, var(--global--color-background)) !important;
color: var(--global--color-white); color: var(--local--color-primary, var(--global--color-primary)) !important;
border-color: currentColor;
} }
.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-text-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-text-color .wp-block-search button.wp-block-search__button:active {
.has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { color: var(--local--color-primary, var(--global--color-primary)) !important;
background-color: var(--button--color-background);
border-color: var(--global--color-white);
color: var(--global--color-white);
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
color: var(--button--color-text);
}
.has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
border-color: currentColor;
color: currentColor;
}
.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
background-color: var(--form--border-color);
border-color: var(--form--border-color);
color: var(--global--color-white);
}
.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
background-color: var(--global--color-white); background-color: var(--global--color-white);
border: var(--form--border-width) solid var(--form--border-color); border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius); border-radius: var(--form--border-radius);
padding: var(--form--border-width);
}
.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
border-color: var(--local--color-primary, var(--global--color-primary)) !important;
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
margin-left: 0;
margin-right: 0; margin-right: 0;
padding-left: var(--form--spacing-unit);
} }
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
color: var(--form--color-text);
outline-offset: -2px;
outline: 2px dotted var(--form--border-color); outline: 2px dotted var(--form--border-color);
outline-offset: -5px;
} }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
outline-color: currentColor;
}
.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
padding: var(--button--padding-vertical) var(--button--padding-horizontal); padding: var(--button--padding-vertical) var(--button--padding-horizontal);
} }
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, color: var(--global--color-dark-gray);
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-background);
color: var(--button--color-background);
} }
.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, color: var(--global--color-dark-gray);
.has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { }
.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
background-color: var(--global--color-dark-gray);
color: var(--global--color-white); color: var(--global--color-white);
} }
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, padding: 6px calc(0.5 * var(--button--padding-horizontal));
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-text);
color: var(--button--color-text);
}
.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
.is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
color: var(--global--color-white);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
border-color: var(--button--color-text);
color: var(--button--color-text);
}
.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
} }
.wp-block-search__button { .wp-block-search__button {
@ -5598,16 +5504,9 @@ h1.page-title {
.widget_search > .search-form .search-submit { .widget_search > .search-form .search-submit {
margin-left: 0; margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
margin-bottom: calc(0.5 * var(--global--spacing-vertical)); margin-bottom: calc(0.5 * var(--global--spacing-vertical));
} }
.widget_search > .search-form .search-submit:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
.widget_rss a.rsswidget .rss-widget-icon { .widget_rss a.rsswidget .rss-widget-icon {
display: none; display: none;
} }
@ -5666,42 +5565,92 @@ h1.page-title {
color: var(--global--color-black); color: var(--global--color-black);
} }
.has-black-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-black, #000);
color: var(--local--color-primary);
}
.has-gray-color[class] { .has-gray-color[class] {
color: var(--global--color-gray); color: var(--global--color-gray);
} }
.has-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-gray, #000);
color: var(--local--color-primary);
}
.has-dark-gray-color[class] { .has-dark-gray-color[class] {
color: var(--global--color-dark-gray); color: var(--global--color-dark-gray);
} }
.has-dark-gray-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-dark-gray, #000);
color: var(--local--color-primary);
}
.has-green-color[class] { .has-green-color[class] {
color: var(--global--color-green); color: var(--global--color-green);
} }
.has-green-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-green, #fff);
color: var(--local--color-primary);
}
.has-blue-color[class] { .has-blue-color[class] {
color: var(--global--color-blue); color: var(--global--color-blue);
} }
.has-blue-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-blue, #fff);
color: var(--local--color-primary);
}
.has-purple-color[class] { .has-purple-color[class] {
color: var(--global--color-purple); color: var(--global--color-purple);
} }
.has-purple-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-purple, #fff);
color: var(--local--color-primary);
}
.has-red-color[class] { .has-red-color[class] {
color: var(--global--color-red); color: var(--global--color-red);
} }
.has-red-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-red, #fff);
color: var(--local--color-primary);
}
.has-orange-color[class] { .has-orange-color[class] {
color: var(--global--color-orange); color: var(--global--color-orange);
} }
.has-orange-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-orange, #fff);
color: var(--local--color-primary);
}
.has-yellow-color[class] { .has-yellow-color[class] {
color: var(--global--color-yellow); color: var(--global--color-yellow);
} }
.has-yellow-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-yellow, #fff);
color: var(--local--color-primary);
}
.has-white-color[class] { .has-white-color[class] {
color: var(--global--color-white); color: var(--global--color-white);
} }
.has-white-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-white, #fff);
color: var(--local--color-primary);
}
.has-background a, .has-background a,
.has-background p, .has-background p,
.has-background h1, .has-background h1,
@ -5717,56 +5666,133 @@ h1.page-title {
background-color: var(--global--color-black); background-color: var(--global--color-black);
} }
.has-gray-background-color[class] { .has-black-background-color[class] [class*=__inner-container] {
background-color: var(--global--color-gray); --local--color-background: var(--global--color-black, #000);
background-color: var(--local--color-background);
} }
.has-dark-gray-background-color[class] { .has-dark-gray-background-color[class] {
background-color: var(--global--color-dark-gray); background-color: var(--global--color-dark-gray);
} }
.has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-dark-gray, #000);
background-color: var(--local--color-background);
}
.has-gray-background-color[class] {
background-color: var(--global--color-gray);
}
.has-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-gray, #000);
background-color: var(--local--color-background);
}
.has-light-gray-background-color[class] {
background-color: var(--global--color-light-gray);
}
.has-light-gray-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-light-gray, #fff);
background-color: var(--local--color-background);
}
.has-green-background-color[class] { .has-green-background-color[class] {
background-color: var(--global--color-green); background-color: var(--global--color-green);
} }
.has-green-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-green, #fff);
background-color: var(--local--color-background);
}
.has-blue-background-color[class] { .has-blue-background-color[class] {
background-color: var(--global--color-blue); background-color: var(--global--color-blue);
} }
.has-blue-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-blue, #fff);
background-color: var(--local--color-background);
}
.has-purple-background-color[class] { .has-purple-background-color[class] {
background-color: var(--global--color-purple); background-color: var(--global--color-purple);
} }
.has-purple-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-purple, #fff);
background-color: var(--local--color-background);
}
.has-red-background-color[class] { .has-red-background-color[class] {
background-color: var(--global--color-red); background-color: var(--global--color-red);
} }
.has-red-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-red, #fff);
background-color: var(--local--color-background);
}
.has-orange-background-color[class] { .has-orange-background-color[class] {
background-color: var(--global--color-orange); background-color: var(--global--color-orange);
} }
.has-orange-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-orange, #fff);
background-color: var(--local--color-background);
}
.has-yellow-background-color[class] { .has-yellow-background-color[class] {
background-color: var(--global--color-yellow); background-color: var(--global--color-yellow);
} }
.has-yellow-background-color[class] [class*=__inner-container] {
--local--color-background: var(--global--color-yellow, #fff);
background-color: var(--local--color-background);
}
.has-white-background-color[class] { .has-white-background-color[class] {
background-color: var(--global--color-white); background-color: var(--global--color-white);
} }
:not(.has-text-color).has-black-background-color[class], .has-white-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-gray-background-color[class], --local--color-background: var(--global--color-white, #fff);
:not(.has-text-color).has-dark-gray-background-color[class] { background-color: var(--local--color-background);
color: var(--global--color-white);
} }
:not(.has-text-color).has-green-background-color[class], .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-blue-background-color[class], .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
:not(.has-text-color).has-purple-background-color[class], .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
:not(.has-text-color).has-red-background-color[class], --local--color-primary: var(--global--color-background, #fff);
:not(.has-text-color).has-orange-background-color[class], color: var(--local--color-primary, var(--global--color-primary));
:not(.has-text-color).has-yellow-background-color[class], }
:not(.has-text-color).has-white-background-color[class] {
color: var(--global--color-dark-gray); .is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
}
.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-primary, #000);
color: var(--local--color-primary, var(--global--color-primary));
}
.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
--local--color-primary: var(--global--color-background, #fff);
} }
.has-purple-to-yellow-gradient-background { .has-purple-to-yellow-gradient-background {

2
wp-includes/version.php
View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.7-alpha-49986'; $wp_version = '5.7-alpha-49987';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.