WordPress.org
Get WordPress

Make WordPress Core

Changeset 49987


Ignore:
Timestamp:
01/20/2021 05:49:28 AM (4 years ago)
Author:
SergeyBiryukov
Message:

Twenty Twenty-One: Clean up Button styles.

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.

Location:
trunk/src/wp-content/themes/twentytwentyone
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css

    r49980 r49987  
    385385
    386386.wp-block-button__link {
     387    border: 3px solid transparent;
     388    border-radius: 0;
     389    cursor: pointer;
     390    display: block;
     391    font-weight: 500;
     392    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     393    font-size: 1.25rem;
    387394    line-height: 1.5;
     395    padding: 15px 30px;
     396    text-decoration: none;
     397}
     398
     399.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
    388400    color: #d1e4dd;
    389     cursor: pointer;
    390     font-weight: 500;
    391     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    392     font-size: 1.25rem;
    393     background-color: #39414d;
    394     border-radius: 0;
    395     border: 3px solid #39414d;
    396     text-decoration: none;
    397     padding: 15px 30px;
     401}
     402
     403.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     404    color: #28303d;
     405}
     406
     407.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     408    color: #28303d;
     409}
     410
     411.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     412    background-color: #28303d;
     413}
     414
     415.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     416    background-color: #28303d;
     417}
     418
     419.wp-block-button__link:hover,
     420.wp-block-button__link:active {
     421    background-color: transparent;
     422    border-color: currentColor;
     423    color: inherit;
    398424}
    399425
    400426.wp-block-button__link:focus {
    401     background: transparent;
    402427    outline-offset: -6px;
    403428    outline: 2px dotted currentColor;
    404 }
    405 
    406 .is-dark-theme .wp-block-button__link:focus {
    407     color: #39414d;
    408 }
    409 
    410 .wp-block-button__link:focus:not(.has-background) {
    411     color: #39414d;
    412429}
    413430
    … …  
    434451}
    435452
     453.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     454    color: #d1e4dd;
     455}
     456
     457.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     458    color: #d1e4dd;
     459}
     460
     461.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     462    color: #28303d;
     463}
     464
     465.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     466    background-color: #28303d;
     467}
     468
     469.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     470    background-color: #28303d;
     471}
     472
     473.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    436474.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    437     color: #39414d !important;
    438     background: transparent !important;
    439     border-color: #39414d;
    440 }
    441 
    442 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    443     color: #39414d !important;
    444     background: transparent !important;
    445     border-color: #39414d;
    446 }
    447 
    448 .wp-block-button.is-style-outline .wp-block-button__link {
    449     color: #39414d;
    450     background: transparent;
    451     border: 3px solid currentColor;
    452     padding: 15px 30px;
     475    border-color: currentColor !important;
     476    background-color: transparent !important;
     477    color: inherit !important;
     478}
     479
     480.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
     481    outline-offset: inherit;
     482    outline: inherit;
     483}
     484
     485.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     486.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     487.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
     488    border-color: currentColor;
     489}
     490
     491.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     492    color: #28303d;
     493}
     494
     495.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     496    color: #28303d;
     497}
     498
     499.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
     500    color: inherit;
     501}
     502
     503.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     504    background-color: transparent;
     505}
     506
     507.wp-block-button.is-style-outline .wp-block-button__link:hover {
     508    background-color: #28303d !important;
     509    border-color: transparent !important;
     510    color: #d1e4dd !important;
    453511}
    454512
    455513.wp-block-button.is-style-outline .wp-block-button__link:active {
    456     background-color: #39414d;
    457     color: #d1e4dd;
    458     border-color: #39414d;
    459 }
    460 
    461 .wp-block-button.is-style-outline .wp-block-button__link:hover {
    462     background-color: #39414d;
    463     color: #d1e4dd;
    464     border-color: #39414d;
    465 }
    466 
    467 .wp-block-button.is-style-outline .wp-block-button__link.has-background {
    468     border-color: #39414d;
    469 }
    470 
    471 .wp-block-button.is-style-outline .wp-block-button__link.has-background:active {
    472     background-color: #39414d !important;
    473 }
    474 
    475 .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    476     background-color: #39414d !important;
    477 }
    478 
    479 .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    480     color: #28303d;
    481 }
    482 
    483 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
    484     color: #fff;
    485 }
    486 
    487 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
    488     color: #fff;
    489 }
    490 
    491 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    492     color: #fff;
    493 }
    494 
    495 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color {
    496     color: #28303d;
    497 }
    498 
    499 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color {
    500     color: #28303d;
    501 }
    502 
    503 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color {
    504     color: #28303d;
    505 }
    506 
    507 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color {
    508     color: #28303d;
    509 }
    510 
    511 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color {
    512     color: #28303d;
    513 }
    514 
    515 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color {
    516     color: #28303d;
    517 }
    518 
    519 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
    520     color: #28303d;
    521 }
    522 
    523 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
    524     border-color: currentColor;
    525 }
    526 
    527 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active {
     514    background-color: #28303d !important;
     515    border-color: transparent !important;
    528516    color: #d1e4dd !important;
    529     border-color: #39414d;
    530 }
    531 
    532 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
     517}
     518
     519.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
     520    background-color: #28303d !important;
    533521    color: #d1e4dd !important;
    534     border-color: #39414d;
     522}
     523
     524.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
     525    background-color: #28303d !important;
     526    color: #d1e4dd !important;
     527}
     528
     529.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
     530    color: #d1e4dd !important;
     531}
     532
     533.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
     534    color: #d1e4dd !important;
     535}
     536
     537.wp-block-button.is-style-outline .wp-block-button__link:focus {
     538    outline-offset: inherit;
     539    outline: inherit;
    535540}
    536541
    … …  
    879884
    880885.wp-block-file .wp-block-file__button {
     886    border: 3px solid transparent;
     887    border-radius: 0;
     888    cursor: pointer;
     889    display: block;
     890    font-weight: 500;
     891    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     892    font-size: 1.25rem;
    881893    line-height: 1.5;
     894    padding: 15px 30px;
     895    text-decoration: none;
     896    display: inline-block;
     897}
     898
     899.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
    882900    color: #d1e4dd;
    883     cursor: pointer;
    884     font-weight: 500;
    885     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    886     font-size: 1.25rem;
    887     background-color: #39414d;
    888     border-radius: 0;
    889     border: 3px solid #39414d;
    890     text-decoration: none;
    891     padding: 15px 30px;
    892     display: inline-block;
     901}
     902
     903.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     904    color: #28303d;
     905}
     906
     907.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
     908    color: #28303d;
     909}
     910
     911.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     912    background-color: #28303d;
     913}
     914
     915.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     916    background-color: #28303d;
     917}
     918
     919.wp-block-file .wp-block-file__button:hover,
     920.wp-block-file .wp-block-file__button:active {
     921    background-color: transparent;
     922    border-color: currentColor;
     923    color: inherit;
    893924}
    894925
    895926.wp-block-file .wp-block-file__button:focus {
    896     background: transparent;
    897927    outline-offset: -6px;
    898928    outline: 2px dotted currentColor;
    899 }
    900 
    901 .is-dark-theme .wp-block-file .wp-block-file__button:focus {
    902     color: #39414d;
    903 }
    904 
    905 .wp-block-file .wp-block-file__button:focus:not(.has-background) {
    906     color: #39414d;
    907929}
    908930
    … …  
    913935}
    914936
    915 .wp-block-file .wp-block-file__button:hover {
    916     color: #39414d;
    917     background: transparent;
     937.wp-block-file .wp-block-file__button:focus {
     938    outline-offset: inherit;
     939    outline: inherit;
    918940}
    919941
    … …  
    22462268}
    22472269
    2248 .wp-block-search .wp-block-search__input {
     2270.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    22492271    border: 3px solid #39414d;
    22502272    border-radius: 0;
    … …  
    22572279}
    22582280
     2281.wp-block-search .wp-block-search__input {
     2282    border: 3px solid #39414d;
     2283    border-radius: 0;
     2284    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2285    font-size: 1.125rem;
     2286    line-height: 1.7;
     2287    max-width: inherit;
     2288    margin-right: -3px;
     2289    padding: 10px;
     2290}
     2291
     2292.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     2293    background: rgba(255, 255, 255, 0.9);
     2294}
     2295
    22592296.is-dark-theme .wp-block-search .wp-block-search__input {
    22602297    background: rgba(255, 255, 255, 0.9);
    22612298}
    22622299
    2263 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input {
    2264     border-color: #28303d;
    2265 }
    2266 
    2267 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input {
    2268     border-color: #28303d;
    2269 }
    2270 
    2271 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input {
    2272     border-color: #28303d;
    2273 }
    2274 
    2275 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input {
    2276     border-color: #28303d;
    2277 }
    2278 
    2279 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input {
    2280     border-color: #28303d;
    2281 }
    2282 
    2283 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input {
    2284     border-color: #28303d;
    2285 }
    2286 
    2287 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
    2288     border-color: #28303d;
    2289 }
    2290 
    2291 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
    2292     border-color: #fff;
    2293 }
    2294 
    2295 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
    2296     border-color: #fff;
    2297 }
    2298 
    2299 .has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    2300     border-color: #fff;
     2300.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     2301    border-color: #28303d !important;
     2302}
     2303
     2304.has-background .wp-block-search .wp-block-search__input {
     2305    border-color: #28303d !important;
    23012306}
    23022307
    23032308.wp-block-search .wp-block-search__button {
     2309    border: 3px solid transparent;
     2310    border-radius: 0;
     2311    cursor: pointer;
     2312    display: block;
     2313    font-weight: 500;
     2314    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2315    font-size: 1.25rem;
    23042316    line-height: 1.5;
    2305     color: #d1e4dd;
    2306     cursor: pointer;
    2307     font-weight: 500;
    2308     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    2309     font-size: 1.25rem;
    2310     background-color: #39414d;
    2311     border-radius: 0;
    2312     border: 3px solid #39414d;
     2317    padding: 15px 30px;
    23132318    text-decoration: none;
    2314     padding: 15px 30px;
    23152319    box-shadow: none;
    23162320    margin-left: 0;
     2321}
     2322
     2323.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2324    color: #d1e4dd;
     2325}
     2326
     2327.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2328    color: #28303d;
     2329}
     2330
     2331.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
     2332    color: #28303d;
     2333}
     2334
     2335.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2336    background-color: #28303d;
     2337}
     2338
     2339.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2340    background-color: #28303d;
     2341}
     2342
     2343.wp-block-search .wp-block-search__button:hover,
     2344.wp-block-search .wp-block-search__button:active {
    23172345    background-color: transparent;
    2318     color: #39414d;
     2346    border-color: currentColor;
     2347    color: inherit;
    23192348}
    23202349
    23212350.wp-block-search .wp-block-search__button:focus {
    2322     background: transparent;
    23232351    outline-offset: -6px;
    23242352    outline: 2px dotted currentColor;
    2325 }
    2326 
    2327 .is-dark-theme .wp-block-search .wp-block-search__button:focus {
    2328     color: #39414d;
    2329 }
    2330 
    2331 .wp-block-search .wp-block-search__button:focus:not(.has-background) {
    2332     color: #39414d;
    23332353}
    23342354
    … …  
    23392359}
    23402360
    2341 .wp-block-search .wp-block-search__button:hover {
    2342     color: #d1e4dd;
    2343     background-color: #39414d;
    2344 }
    2345 
    23462361.wp-block-search .wp-block-search__button.has-icon {
    23472362    padding: 30px 15px;
     2363    display: inherit;
    23482364}
    23492365
    … …  
    23532369}
    23542370
    2355 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button {
     2371.has-background .wp-block-search .wp-block-search__button:hover {
     2372    background-color: #d1e4dd !important;
     2373    color: #28303d !important;
     2374}
     2375
     2376.has-background .wp-block-search .wp-block-search__button:active {
     2377    background-color: #d1e4dd !important;
     2378    color: #28303d !important;
     2379}
     2380
     2381.has-text-color .wp-block-search .wp-block-search__button:hover {
     2382    color: #28303d !important;
     2383}
     2384
     2385.has-text-color .wp-block-search .wp-block-search__button:active {
     2386    color: #28303d !important;
     2387}
     2388
     2389.wp-block-search .wp-block-search__button:focus {
     2390    outline-offset: inherit;
     2391    outline: inherit;
     2392}
     2393
     2394.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     2395    padding: 3px;
     2396}
     2397
     2398.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
     2399    border: none;
     2400}
     2401
     2402.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
     2403    color: #28303d;
     2404}
     2405
     2406.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
     2407    color: #28303d;
     2408}
     2409
     2410.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
     2411    color: #28303d;
     2412}
     2413
     2414.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
     2415    color: #28303d;
     2416}
     2417
     2418.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover {
     2419    background-color: #28303d;
    23562420    color: #fff;
    2357     border-color: currentColor;
    2358 }
    2359 
    2360 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button {
     2421}
     2422
     2423.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
     2424    background-color: #28303d;
    23612425    color: #fff;
    2362     border-color: currentColor;
    2363 }
    2364 
    2365 .has-background.has-black-background-color .wp-block-search .wp-block-search__button {
    2366     color: #fff;
    2367     border-color: currentColor;
    2368 }
    2369 
    2370 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2371     color: #fff;
    2372     background-color: #39414d;
    2373     border-color: #fff;
    2374 }
    2375 
    2376 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2377     color: #fff;
    2378     background-color: #39414d;
    2379     border-color: #fff;
    2380 }
    2381 
    2382 .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2383     color: #fff;
    2384     background-color: #39414d;
    2385     border-color: #fff;
    2386 }
    2387 
    2388 .is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2389     color: #d1e4dd;
    2390     background-color: #39414d;
    2391 }
    2392 
    2393 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover {
    2394     color: #d1e4dd;
    2395     background-color: #39414d;
    2396 }
    2397 
    2398 .is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    2399     color: #d1e4dd;
    2400     background-color: #39414d;
    2401 }
    2402 
    2403 .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2404     color: #fff;
    2405     background-color: #39414d;
    2406     border-color: #39414d;
    2407 }
    2408 
    2409 .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2410     color: #fff;
    2411     background-color: #39414d;
    2412     border-color: #39414d;
    2413 }
    2414 
    2415 .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2416     color: #fff;
    2417     background-color: #39414d;
    2418     border-color: #39414d;
    2419 }
    2420 
    2421 .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2422     color: #fff;
    2423     background-color: #39414d;
    2424     border-color: #39414d;
    2425 }
    2426 
    2427 .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2428     color: #fff;
    2429     background-color: #39414d;
    2430     border-color: #39414d;
    2431 }
    2432 
    2433 .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2434     color: #fff;
    2435     background-color: #39414d;
    2436     border-color: #39414d;
    2437 }
    2438 
    2439 .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2440     color: #fff;
    2441     background-color: #39414d;
    2442     border-color: #39414d;
    2443 }
    2444 
    2445 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button {
    2446     color: #28303d;
    2447     border-color: currentColor;
    2448 }
    2449 
    2450 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button {
    2451     color: #28303d;
    2452     border-color: currentColor;
    2453 }
    2454 
    2455 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button {
    2456     color: #28303d;
    2457     border-color: currentColor;
    2458 }
    2459 
    2460 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button {
    2461     color: #28303d;
    2462     border-color: currentColor;
    2463 }
    2464 
    2465 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button {
    2466     color: #28303d;
    2467     border-color: currentColor;
    2468 }
    2469 
    2470 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button {
    2471     color: #28303d;
    2472     border-color: currentColor;
    2473 }
    2474 
    2475 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
    2476     color: #28303d;
    2477     border-color: currentColor;
    2478 }
    2479 
    2480 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover {
    2481     color: #fff;
    2482     background-color: #d1e4dd;
    2483     border-color: #d1e4dd;
    2484 }
    2485 
    2486 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover {
    2487     color: #fff;
    2488     background-color: #d1e4dd;
    2489     border-color: #d1e4dd;
    2490 }
    2491 
    2492 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover {
    2493     color: #fff;
    2494     background-color: #d1e4dd;
    2495     border-color: #d1e4dd;
    2496 }
    2497 
    2498 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover {
    2499     color: #fff;
    2500     background-color: #d1e4dd;
    2501     border-color: #d1e4dd;
    2502 }
    2503 
    2504 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover {
    2505     color: #fff;
    2506     background-color: #d1e4dd;
    2507     border-color: #d1e4dd;
    2508 }
    2509 
    2510 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover {
    2511     color: #fff;
    2512     background-color: #d1e4dd;
    2513     border-color: #d1e4dd;
    2514 }
    2515 
    2516 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    2517     color: #fff;
    2518     background-color: #d1e4dd;
    2519     border-color: #d1e4dd;
    2520 }
    2521 
    2522 .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2523 .has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2524 .has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2525 .has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2526 .has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2527 .has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2528 .has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    2529 .has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
    2530     border: none;
    25312426}
    25322427
    25332428.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
    25342429    padding: 15px 30px;
    2535 }
    2536 
    2537 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2538     color: #d1e4dd;
    2539     border-color: currentColor;
    2540 }
    2541 
    2542 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2543     color: #fff;
    2544     background-color: #d1e4dd;
    2545     border-color: #d1e4dd;
    2546 }
    2547 
    2548 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2549     color: #39414d;
    2550     border-color: currentColor;
    2551 }
    2552 
    2553 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2554     color: #39414d;
    2555     border-color: currentColor;
    2556 }
    2557 
    2558 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2559     color: #39414d;
    2560     border-color: currentColor;
    2561 }
    2562 
    2563 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2564     color: #fff;
    2565     background-color: #39414d;
    2566     border-color: #39414d;
    2567 }
    2568 
    2569 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2570     color: #fff;
    2571     background-color: #39414d;
    2572     border-color: #39414d;
    2573 }
    2574 
    2575 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2576     color: #fff;
    2577     background-color: #39414d;
    2578     border-color: #39414d;
    2579 }
    2580 
    2581 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2582     color: #d1e4dd;
    2583     border-color: currentColor;
    2584 }
    2585 
    2586 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2587     color: #d1e4dd;
    2588     border-color: currentColor;
    2589 }
    2590 
    2591 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    2592     color: #d1e4dd;
    2593     border-color: currentColor;
    2594 }
    2595 
    2596 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2597     color: #fff;
    2598     background-color: #d1e4dd;
    2599     border-color: #d1e4dd;
    2600 }
    2601 
    2602 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2603     color: #fff;
    2604     background-color: #d1e4dd;
    2605     border-color: #d1e4dd;
    2606 }
    2607 
    2608 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    2609     color: #fff;
    2610     background-color: #d1e4dd;
    2611     border-color: #d1e4dd;
    26122430}
    26132431
    … …  
    32613079}
    32623080
     3081.has-black-color[class] [class*=__inner-container] {
     3082    color: #000;
     3083}
     3084
    32633085.has-gray-color[class] {
    32643086    color: #39414d;
    32653087}
    32663088
     3089.has-gray-color[class] [class*=__inner-container] {
     3090    color: #39414d;
     3091}
     3092
    32673093.has-dark-gray-color[class] {
     3094    color: #28303d;
     3095}
     3096
     3097.has-dark-gray-color[class] [class*=__inner-container] {
    32683098    color: #28303d;
    32693099}
    … …  
    32733103}
    32743104
     3105.has-green-color[class] [class*=__inner-container] {
     3106    color: #d1e4dd;
     3107}
     3108
    32753109.has-blue-color[class] {
    32763110    color: #d1dfe4;
    32773111}
    32783112
     3113.has-blue-color[class] [class*=__inner-container] {
     3114    color: #d1dfe4;
     3115}
     3116
    32793117.has-purple-color[class] {
    32803118    color: #d1d1e4;
    32813119}
    32823120
     3121.has-purple-color[class] [class*=__inner-container] {
     3122    color: #d1d1e4;
     3123}
     3124
    32833125.has-red-color[class] {
    32843126    color: #e4d1d1;
    32853127}
    32863128
     3129.has-red-color[class] [class*=__inner-container] {
     3130    color: #e4d1d1;
     3131}
     3132
    32873133.has-orange-color[class] {
    32883134    color: #e4dad1;
    32893135}
    32903136
     3137.has-orange-color[class] [class*=__inner-container] {
     3138    color: #e4dad1;
     3139}
     3140
    32913141.has-yellow-color[class] {
    32923142    color: #eeeadd;
    32933143}
    32943144
     3145.has-yellow-color[class] [class*=__inner-container] {
     3146    color: #eeeadd;
     3147}
     3148
    32953149.has-white-color[class] {
     3150    color: #fff;
     3151}
     3152
     3153.has-white-color[class] [class*=__inner-container] {
    32963154    color: #fff;
    32973155}
    … …  
    33123170}
    33133171
     3172.has-black-background-color[class] [class*=__inner-container] {
     3173    background-color: #000;
     3174}
     3175
     3176.has-dark-gray-background-color[class] {
     3177    background-color: #28303d;
     3178}
     3179
     3180.has-dark-gray-background-color[class] [class*=__inner-container] {
     3181    background-color: #28303d;
     3182}
     3183
    33143184.has-gray-background-color[class] {
    33153185    background-color: #39414d;
    33163186}
    33173187
    3318 .has-dark-gray-background-color[class] {
    3319     background-color: #28303d;
     3188.has-gray-background-color[class] [class*=__inner-container] {
     3189    background-color: #39414d;
     3190}
     3191
     3192.has-light-gray-background-color[class] {
     3193    background-color: #f0f0f0;
     3194}
     3195
     3196.has-light-gray-background-color[class] [class*=__inner-container] {
     3197    background-color: #f0f0f0;
    33203198}
    33213199
    … …  
    33243202}
    33253203
     3204.has-green-background-color[class] [class*=__inner-container] {
     3205    background-color: #d1e4dd;
     3206}
     3207
    33263208.has-blue-background-color[class] {
    33273209    background-color: #d1dfe4;
    33283210}
    33293211
     3212.has-blue-background-color[class] [class*=__inner-container] {
     3213    background-color: #d1dfe4;
     3214}
     3215
    33303216.has-purple-background-color[class] {
    33313217    background-color: #d1d1e4;
    33323218}
    33333219
     3220.has-purple-background-color[class] [class*=__inner-container] {
     3221    background-color: #d1d1e4;
     3222}
     3223
    33343224.has-red-background-color[class] {
    33353225    background-color: #e4d1d1;
    33363226}
    33373227
     3228.has-red-background-color[class] [class*=__inner-container] {
     3229    background-color: #e4d1d1;
     3230}
     3231
    33383232.has-orange-background-color[class] {
    33393233    background-color: #e4dad1;
    33403234}
    33413235
     3236.has-orange-background-color[class] [class*=__inner-container] {
     3237    background-color: #e4dad1;
     3238}
     3239
    33423240.has-yellow-background-color[class] {
    33433241    background-color: #eeeadd;
    33443242}
    33453243
     3244.has-yellow-background-color[class] [class*=__inner-container] {
     3245    background-color: #eeeadd;
     3246}
     3247
    33463248.has-white-background-color[class] {
    33473249    background-color: #fff;
    33483250}
    33493251
    3350 :not(.has-text-color).has-black-background-color[class] {
    3351     color: #fff;
    3352 }
    3353 
    3354 :not(.has-text-color).has-gray-background-color[class] {
    3355     color: #fff;
    3356 }
    3357 
    3358 :not(.has-text-color).has-dark-gray-background-color[class] {
    3359     color: #fff;
    3360 }
    3361 
    3362 :not(.has-text-color).has-green-background-color[class] {
    3363     color: #28303d;
    3364 }
    3365 
    3366 :not(.has-text-color).has-blue-background-color[class] {
    3367     color: #28303d;
    3368 }
    3369 
    3370 :not(.has-text-color).has-purple-background-color[class] {
    3371     color: #28303d;
    3372 }
    3373 
    3374 :not(.has-text-color).has-red-background-color[class] {
    3375     color: #28303d;
    3376 }
    3377 
    3378 :not(.has-text-color).has-orange-background-color[class] {
    3379     color: #28303d;
    3380 }
    3381 
    3382 :not(.has-text-color).has-yellow-background-color[class] {
    3383     color: #28303d;
    3384 }
    3385 
    3386 :not(.has-text-color).has-white-background-color[class] {
     3252.has-white-background-color[class] [class*=__inner-container] {
     3253    background-color: #fff;
     3254}
     3255
     3256.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
     3257    color: #28303d;
     3258}
     3259
     3260.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
     3261    color: #28303d;
     3262}
     3263
     3264.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     3265    color: #28303d;
     3266}
     3267
     3268.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
     3269    color: #28303d;
     3270}
     3271
     3272.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
     3273    color: #28303d;
     3274}
     3275
     3276.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
     3277    color: #28303d;
     3278}
     3279
     3280.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
     3281    color: #28303d;
     3282}
     3283
     3284.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
     3285    color: #28303d;
     3286}
     3287
     3288.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
     3289    color: #28303d;
     3290}
     3291
     3292.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
    33873293    color: #28303d;
    33883294}

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css

    r49980 r49987  
    22452245 */
    22462246.site .button {
    2247     line-height: 1.5;
    2248     color: #d1e4dd;
     2247    border: 3px solid transparent;
     2248    border-radius: 0;
    22492249    cursor: pointer;
     2250    display: block;
    22502251    font-weight: 500;
    22512252    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    22522253    font-size: 1.25rem;
    2253     background-color: #39414d;
     2254    line-height: 1.5;
     2255    padding: 15px 30px;
     2256    text-decoration: none;
     2257}
     2258
     2259input[type=submit] {
     2260    border: 3px solid transparent;
    22542261    border-radius: 0;
    2255     border: 3px solid #39414d;
    2256     text-decoration: none;
    2257     padding: 15px 30px;
    2258 }
    2259 
    2260 input[type=submit] {
    2261     line-height: 1.5;
    2262     color: #d1e4dd;
    22632262    cursor: pointer;
     2263    display: block;
    22642264    font-weight: 500;
    22652265    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    22662266    font-size: 1.25rem;
    2267     background-color: #39414d;
     2267    line-height: 1.5;
     2268    padding: 15px 30px;
     2269    text-decoration: none;
     2270}
     2271
     2272input[type=reset] {
     2273    border: 3px solid transparent;
    22682274    border-radius: 0;
    2269     border: 3px solid #39414d;
    2270     text-decoration: none;
    2271     padding: 15px 30px;
    2272 }
    2273 
    2274 input[type=reset] {
    2275     line-height: 1.5;
    2276     color: #d1e4dd;
    22772275    cursor: pointer;
     2276    display: block;
    22782277    font-weight: 500;
    22792278    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    22802279    font-size: 1.25rem;
    2281     background-color: #39414d;
     2280    line-height: 1.5;
     2281    padding: 15px 30px;
     2282    text-decoration: none;
     2283}
     2284
     2285.wp-block-search .wp-block-search__button {
     2286    border: 3px solid transparent;
    22822287    border-radius: 0;
    2283     border: 3px solid #39414d;
    2284     text-decoration: none;
    2285     padding: 15px 30px;
    2286 }
    2287 
    2288 .wp-block-search__button {
    2289     line-height: 1.5;
    2290     color: #d1e4dd;
    22912288    cursor: pointer;
     2289    display: block;
    22922290    font-weight: 500;
    22932291    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    22942292    font-size: 1.25rem;
    2295     background-color: #39414d;
     2293    line-height: 1.5;
     2294    padding: 15px 30px;
     2295    text-decoration: none;
     2296}
     2297
     2298.wp-block-button .wp-block-button__link {
     2299    border: 3px solid transparent;
    22962300    border-radius: 0;
    2297     border: 3px solid #39414d;
    2298     text-decoration: none;
    2299     padding: 15px 30px;
    2300 }
    2301 
    2302 .wp-block-button .wp-block-button__link {
    2303     line-height: 1.5;
    2304     color: #d1e4dd;
    23052301    cursor: pointer;
     2302    display: block;
    23062303    font-weight: 500;
    23072304    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    23082305    font-size: 1.25rem;
    2309     background-color: #39414d;
     2306    line-height: 1.5;
     2307    padding: 15px 30px;
     2308    text-decoration: none;
     2309}
     2310
     2311.wp-block-file a.wp-block-file__button {
     2312    border: 3px solid transparent;
    23102313    border-radius: 0;
    2311     border: 3px solid #39414d;
     2314    cursor: pointer;
     2315    display: block;
     2316    font-weight: 500;
     2317    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     2318    font-size: 1.25rem;
     2319    line-height: 1.5;
     2320    padding: 15px 30px;
    23122321    text-decoration: none;
    2313     padding: 15px 30px;
     2322}
     2323
     2324.site .button:not(:hover):not(:active):not(.has-text-color) {
     2325    color: #d1e4dd;
     2326}
     2327
     2328input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
     2329    color: #d1e4dd;
     2330}
     2331
     2332input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
     2333    color: #d1e4dd;
     2334}
     2335
     2336.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2337    color: #d1e4dd;
     2338}
     2339
     2340.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2341    color: #d1e4dd;
     2342}
     2343
     2344.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     2345    color: #d1e4dd;
     2346}
     2347
     2348.has-background .site .button:not(:hover):not(:active):not(.has-text-color) {
     2349    color: #28303d;
     2350}
     2351
     2352.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color) {
     2353    color: #28303d;
     2354}
     2355
     2356.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color) {
     2357    color: #28303d;
     2358}
     2359
     2360.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     2361    color: #28303d;
     2362}
     2363
     2364.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2365    color: #28303d;
     2366}
     2367
     2368.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     2369    color: #28303d;
     2370}
     2371
     2372.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background {
     2373    color: #28303d;
     2374}
     2375
     2376.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background {
     2377    color: #28303d;
     2378}
     2379
     2380.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background {
     2381    color: #28303d;
     2382}
     2383
     2384.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
     2385    color: #28303d;
     2386}
     2387
     2388.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     2389    color: #28303d;
     2390}
     2391
     2392.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
     2393    color: #28303d;
     2394}
     2395
     2396.site .button:not(:hover):not(:active):not(.has-background) {
     2397    background-color: #28303d;
     2398}
     2399
     2400input[type=submit]:not(:hover):not(:active):not(.has-background) {
     2401    background-color: #28303d;
     2402}
     2403
     2404input[type=reset]:not(:hover):not(:active):not(.has-background) {
     2405    background-color: #28303d;
     2406}
     2407
     2408.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2409    background-color: #28303d;
     2410}
     2411
     2412.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     2413    background-color: #28303d;
     2414}
     2415
     2416.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     2417    background-color: #28303d;
     2418}
     2419
     2420.has-background .site .button:not(:hover):not(:active):not(.has-background) {
     2421    background-color: #28303d;
     2422}
     2423
     2424.has-background input[type=submit]:not(:hover):not(:active):not(.has-background) {
     2425    background-color: #28303d;
     2426}
     2427
     2428.has-background input[type=reset]:not(:hover):not(:active):not(.has-background) {
     2429    background-color: #28303d;
     2430}
     2431
     2432.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     2433    background-color: #28303d;
     2434}
     2435
     2436.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     2437    background-color: #28303d;
     2438}
     2439
     2440.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     2441    background-color: #28303d;
     2442}
     2443
     2444.site .button:hover,
     2445.site .button:active,
     2446input[type=submit]:hover,
     2447input[type=submit]:active,
     2448input[type=reset]:hover,
     2449input[type=reset]:active,
     2450.wp-block-search .wp-block-search__button:hover,
     2451.wp-block-search .wp-block-search__button:active,
     2452.wp-block-button .wp-block-button__link:hover,
     2453.wp-block-button .wp-block-button__link:active,
     2454.wp-block-file a.wp-block-file__button:hover,
     2455.wp-block-file a.wp-block-file__button:active {
     2456    background-color: transparent;
     2457    border-color: currentColor;
     2458    color: inherit;
    23142459}
    23152460
    … …  
    23172462input[type=submit]:focus,
    23182463input[type=reset]:focus,
    2319 .wp-block-search__button:focus,
    2320 .wp-block-button .wp-block-button__link:focus {
    2321     background: transparent;
     2464.wp-block-search .wp-block-search__button:focus,
     2465.wp-block-button .wp-block-button__link:focus,
     2466.wp-block-file a.wp-block-file__button:focus {
    23222467    outline-offset: -6px;
    23232468    outline: 2px dotted currentColor;
    2324 }
    2325 
    2326 .is-dark-theme .site .button:focus {
    2327     color: #39414d;
    2328 }
    2329 
    2330 .is-dark-theme input[type=submit]:focus {
    2331     color: #39414d;
    2332 }
    2333 
    2334 .is-dark-theme input[type=reset]:focus {
    2335     color: #39414d;
    2336 }
    2337 
    2338 .is-dark-theme .wp-block-search__button:focus {
    2339     color: #39414d;
    2340 }
    2341 
    2342 .is-dark-theme .wp-block-button .wp-block-button__link:focus {
    2343     color: #39414d;
    2344 }
    2345 
    2346 .site .button:focus:not(.has-background) {
    2347     color: #39414d;
    2348 }
    2349 
    2350 input[type=submit]:focus:not(.has-background) {
    2351     color: #39414d;
    2352 }
    2353 
    2354 input[type=reset]:focus:not(.has-background) {
    2355     color: #39414d;
    2356 }
    2357 
    2358 .wp-block-search__button:focus:not(.has-background) {
    2359     color: #39414d;
    2360 }
    2361 
    2362 .wp-block-button .wp-block-button__link:focus:not(.has-background) {
    2363     color: #39414d;
    23642469}
    23652470
    … …  
    23822487}
    23832488
    2384 .wp-block-search__button:disabled {
     2489.wp-block-search .wp-block-search__button:disabled {
    23852490    background-color: rgba(255, 255, 255, 0.5);
    23862491    border-color: rgba(255, 255, 255, 0.5);
    … …  
    23942499}
    23952500
    2396 .site .button:active {
     2501.wp-block-file a.wp-block-file__button:disabled {
     2502    background-color: rgba(255, 255, 255, 0.5);
     2503    border-color: rgba(255, 255, 255, 0.5);
    23972504    color: #39414d;
    2398     background-color: #d1e4dd;
    2399 }
    2400 
    2401 input[type=submit]:active {
    2402     color: #39414d;
    2403     background-color: #d1e4dd;
    2404 }
    2405 
    2406 input[type=reset]:active {
    2407     color: #39414d;
    2408     background-color: #d1e4dd;
    2409 }
    2410 
    2411 .wp-block-search .wp-block-search__button:active {
    2412     color: #39414d;
    2413     background-color: #d1e4dd;
    2414 }
    2415 
    2416 .wp-block-file .wp-block-file__button:active {
    2417     color: #39414d;
    2418     background-color: #d1e4dd;
    2419 }
    2420 
    2421 .site .button:hover {
    2422     color: #39414d;
    2423     background: transparent;
    2424 }
    2425 
    2426 input[type=submit]:hover {
    2427     color: #39414d;
    2428     background: transparent;
    2429 }
    2430 
    2431 input[type=reset]:hover {
    2432     color: #39414d;
    2433     background: transparent;
    2434 }
    2435 
    2436 .wp-block-search .wp-block-search__button:hover {
    2437     color: #39414d;
    2438     background: transparent;
    2439 }
    2440 
    2441 .wp-block-file .wp-block-file__button:hover {
    2442     color: #39414d;
    2443     background: transparent;
    24442505}
    24452506
    … …  
    24472508 * Block Options
    24482509 */
     2510.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2511    color: #d1e4dd;
     2512}
     2513
     2514.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2515    color: #d1e4dd;
     2516}
     2517
     2518.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     2519    color: #28303d;
     2520}
     2521
     2522.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     2523    background-color: #28303d;
     2524}
     2525
     2526.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     2527    background-color: #28303d;
     2528}
     2529
     2530.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    24492531.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    2450     color: #39414d !important;
    2451     background: transparent !important;
    2452     border-color: #39414d;
    2453 }
    2454 
    2455 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    2456     color: #39414d !important;
    2457     background: transparent !important;
    2458     border-color: #39414d;
    2459 }
    2460 
    2461 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
     2532    border-color: currentColor !important;
     2533    background-color: transparent !important;
     2534    color: inherit !important;
     2535}
     2536
     2537.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     2538.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     2539.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
     2540    border-color: currentColor;
     2541}
     2542
     2543.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2544    color: #28303d;
     2545}
     2546
     2547.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     2548    color: #28303d;
     2549}
     2550
     2551.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
     2552    color: inherit;
     2553}
     2554
     2555.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     2556    background-color: transparent;
     2557}
     2558
     2559.wp-block-button.is-style-outline .wp-block-button__link:hover {
     2560    border-color: transparent !important;
     2561    background-color: #28303d !important;
    24622562    color: #d1e4dd !important;
    2463     background: #39414d !important;
    2464 }
    2465 
    2466 .wp-block-button.is-style-outline .wp-block-button__link {
    2467     padding: 15px 30px;
    2468 }
    2469 
    2470 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
    2471     background: transparent;
    2472 }
    2473 
    2474 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    2475     background: transparent;
    2476     color: #39414d;
    2477     border-color: #39414d;
    2478 }
    2479 
    2480 .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    2481     color: currentColor;
    2482 }
    2483 
    2484 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) {
    2485     color: #fff;
    2486 }
    2487 
    2488 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) {
    2489     color: #fff;
    2490 }
    2491 
    2492 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    2493     color: #fff;
    2494 }
    2495 
    2496 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
    2497     color: #28303d;
    2498 }
    2499 
    2500 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color {
    2501     color: #fff;
    2502 }
    2503 
    2504 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color {
    2505     color: #fff;
    2506 }
    2507 
    2508 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
    2509     color: #fff;
    2510 }
    2511 
    2512 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
    2513 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
    2514     border-color: currentColor;
    25152563}
    25162564
    25172565.wp-block-button.is-style-outline .wp-block-button__link:active {
     2566    border-color: transparent !important;
     2567    background-color: #28303d !important;
    25182568    color: #d1e4dd !important;
    2519     background: #39414d !important;
    2520     border-color: #39414d;
    2521 }
    2522 
    2523 .wp-block-button.is-style-outline .wp-block-button__link:hover {
     2569}
     2570
     2571.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover {
     2572    background-color: #28303d !important;
    25242573    color: #d1e4dd !important;
    2525     background: #39414d !important;
    2526     border-color: #39414d;
    2527 }
    2528 
    2529 .wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color {
    2530     border-color: #39414d;
    2531 }
    2532 
    2533 .wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
    2534     border-color: #39414d;
    2535 }
    2536 
    2537 .wp-block-button.is-style-outline .wp-block-button__link:focus {
    2538     color: #39414d !important;
    2539     background: transparent !important;
     2574}
     2575
     2576.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
     2577    background-color: #28303d !important;
     2578    color: #d1e4dd !important;
     2579}
     2580
     2581.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
     2582    color: #d1e4dd !important;
     2583}
     2584
     2585.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
     2586    color: #d1e4dd !important;
    25402587}
    25412588
    … …  
    29923039}
    29933040
    2994 .wp-block-file a.wp-block-file__button:active {
    2995     color: #39414d;
     3041.wp-block-file a.wp-block-file__button:active,
     3042.wp-block-file a.wp-block-file__button:focus,
     3043.wp-block-file a.wp-block-file__button:hover {
    29963044    opacity: inherit;
    29973045}
    29983046
    2999 .wp-block-file a.wp-block-file__button:focus {
    3000     color: #39414d;
    3001     opacity: inherit;
    3002 }
    3003 
    3004 .wp-block-file a.wp-block-file__button:hover {
    3005     color: #39414d;
    3006     opacity: inherit;
    3007 }
    3008 
    3009 .wp-block-file a.wp-block-file__button:visited {
    3010     color: #d1e4dd;
    3011 }
    3012 
    3013 .wp-block-file a.wp-block-file__button:visited:hover {
    3014     color: #39414d;
    3015 }
    3016 
    3017 .wp-block-file .wp-block-file__button {
    3018     line-height: 1.5;
    3019     color: #d1e4dd;
    3020     cursor: pointer;
    3021     font-weight: 500;
    3022     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    3023     font-size: 1.25rem;
    3024     background-color: #39414d;
    3025     border-radius: 0;
    3026     border: 3px solid #39414d;
    3027     text-decoration: none;
    3028     padding: 15px 30px;
     3047.wp-block-file a.wp-block-file__button {
    30293048    display: inline-block;
    3030 }
    3031 
    3032 .wp-block-file .wp-block-file__button:focus {
    3033     background: transparent;
    3034     outline-offset: -6px;
    3035     outline: 2px dotted currentColor;
    3036 }
    3037 
    3038 .is-dark-theme .wp-block-file .wp-block-file__button:focus {
    3039     color: #39414d;
    3040 }
    3041 
    3042 .wp-block-file .wp-block-file__button:focus:not(.has-background) {
    3043     color: #39414d;
    3044 }
    3045 
    3046 .wp-block-file .wp-block-file__button:disabled {
    3047     background-color: rgba(255, 255, 255, 0.5);
    3048     border-color: rgba(255, 255, 255, 0.5);
    3049     color: #39414d;
    30503049}
    30513050
    … …  
    45584557}
    45594558
    4560 .has-background .wp-block-search .wp-block-search__input,
    4561 [class*=background-color] .wp-block-search .wp-block-search__input,
    4562 [style*=background-color] .wp-block-search .wp-block-search__input,
    4563 .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    4564     border-color: currentColor;
    4565 }
    4566 
    4567 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input {
    4568     border-color: #fff;
    4569 }
    4570 
    4571 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input {
    4572     border-color: #fff;
    4573 }
    4574 
    4575 .has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    4576     border-color: #fff;
     4559.has-background .wp-block-search .wp-block-search__input {
     4560    border-color: #28303d !important;
    45774561}
    45784562
    45794563.wp-block-search button.wp-block-search__button {
    45804564    margin-left: 0;
    4581     background-color: transparent;
    4582     color: #39414d;
    45834565    line-height: 1;
    4584 }
    4585 
    4586 .wp-block-search button.wp-block-search__button:hover {
    4587     background-color: #39414d;
    4588     color: #d1e4dd;
    45894566}
    45904567
    … …  
    45994576}
    46004577
    4601 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button {
    4602     color: #fff;
    4603     border-color: currentColor;
    4604 }
    4605 
    4606 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button {
    4607     color: #fff;
    4608     border-color: currentColor;
    4609 }
    4610 
    4611 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
    4612     color: #fff;
    4613     border-color: currentColor;
    4614 }
    4615 
    4616 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4617     background-color: #39414d;
    4618     border-color: #fff;
    4619     color: #fff;
    4620 }
    4621 
    4622 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4623     background-color: #39414d;
    4624     border-color: #fff;
    4625     color: #fff;
    4626 }
    4627 
    4628 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    4629     background-color: #39414d;
    4630     border-color: #fff;
    4631     color: #fff;
    4632 }
    4633 
    4634 .is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4635     color: #d1e4dd;
    4636 }
    4637 
    4638 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover {
    4639     color: #d1e4dd;
    4640 }
    4641 
    4642 .is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    4643     color: #d1e4dd;
    4644 }
    4645 
    4646 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
    4647 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
    4648 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
    4649 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
    4650 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
    4651 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
    4652 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
    4653     border-color: currentColor;
    4654     color: currentColor;
    4655 }
    4656 
    4657 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
    4658     background-color: #39414d;
    4659     border-color: #39414d;
    4660     color: #fff;
    4661 }
    4662 
    4663 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
    4664     background-color: #39414d;
    4665     border-color: #39414d;
    4666     color: #fff;
    4667 }
    4668 
    4669 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
    4670     background-color: #39414d;
    4671     border-color: #39414d;
    4672     color: #fff;
    4673 }
    4674 
    4675 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
    4676     background-color: #39414d;
    4677     border-color: #39414d;
    4678     color: #fff;
    4679 }
    4680 
    4681 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
    4682     background-color: #39414d;
    4683     border-color: #39414d;
    4684     color: #fff;
    4685 }
    4686 
    4687 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
    4688     background-color: #39414d;
    4689     border-color: #39414d;
    4690     color: #fff;
    4691 }
    4692 
    4693 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    4694     background-color: #39414d;
    4695     border-color: #39414d;
    4696     color: #fff;
    4697 }
    4698 
    4699 .is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover {
    4700     border-color: #d1e4dd;
    4701     background-color: #d1e4dd;
    4702     color: #39414d;
    4703 }
    4704 
    4705 .is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover {
    4706     border-color: #d1e4dd;
    4707     background-color: #d1e4dd;
    4708     color: #39414d;
    4709 }
    4710 
    4711 .is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover {
    4712     border-color: #d1e4dd;
    4713     background-color: #d1e4dd;
    4714     color: #39414d;
    4715 }
    4716 
    4717 .is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover {
    4718     border-color: #d1e4dd;
    4719     background-color: #d1e4dd;
    4720     color: #39414d;
    4721 }
    4722 
    4723 .is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover {
    4724     border-color: #d1e4dd;
    4725     background-color: #d1e4dd;
    4726     color: #39414d;
    4727 }
    4728 
    4729 .is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover {
    4730     border-color: #d1e4dd;
    4731     background-color: #d1e4dd;
    4732     color: #39414d;
    4733 }
    4734 
    4735 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    4736     border-color: #d1e4dd;
    4737     background-color: #d1e4dd;
    4738     color: #39414d;
     4578.has-background .wp-block-search button.wp-block-search__button:hover {
     4579    background-color: #d1e4dd !important;
     4580    color: #28303d !important;
     4581}
     4582
     4583.has-background .wp-block-search button.wp-block-search__button:active {
     4584    background-color: #d1e4dd !important;
     4585    color: #28303d !important;
     4586}
     4587
     4588.has-text-color .wp-block-search button.wp-block-search__button:hover {
     4589    color: #28303d !important;
     4590}
     4591
     4592.has-text-color .wp-block-search button.wp-block-search__button:active {
     4593    color: #28303d !important;
    47394594}
    47404595
    … …  
    47434598    border: 3px solid #39414d;
    47444599    border-radius: 0;
     4600    padding: 3px;
     4601}
     4602
     4603.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     4604    border-color: #28303d !important;
    47454605}
    47464606
    47474607.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     4608    margin-left: 0;
    47484609    margin-right: 0;
     4610    padding-left: 10px;
    47494611}
    47504612
    47514613.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     4614    color: #28303d;
     4615    outline-offset: -2px;
    47524616    outline: 2px dotted #39414d;
    4753     outline-offset: -5px;
    4754 }
    4755 
    4756 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
    4757     outline-color: currentColor;
    4758 }
    4759 
    4760 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
     4617}
     4618
     4619.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
    47614620    padding: 15px 30px;
    47624621}
    47634622
    4764 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4765     border-color: #39414d;
    4766     color: #39414d;
    4767 }
    4768 
    4769 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4770     border-color: #39414d;
    4771     color: #39414d;
    4772 }
    4773 
    4774 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4775     border-color: #39414d;
    4776     color: #39414d;
    4777 }
    4778 
    4779 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
     4623.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     4624    color: #28303d;
     4625}
     4626
     4627.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
     4628    color: #28303d;
     4629}
     4630
     4631.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     4632    background-color: #28303d;
    47804633    color: #fff;
    47814634}
    47824635
    4783 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4784     color: #fff;
    4785 }
    4786 
    4787 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4788     color: #fff;
    4789 }
    4790 
    4791 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4792     border-color: #d1e4dd;
    4793     color: #d1e4dd;
    4794 }
    4795 
    4796 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4797     border-color: #d1e4dd;
    4798     color: #d1e4dd;
    4799 }
    4800 
    4801 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4802     border-color: #d1e4dd;
    4803     color: #d1e4dd;
    4804 }
    4805 
    4806 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4807     color: #fff;
    4808 }
    4809 
    4810 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4811     color: #fff;
    4812 }
    4813 
    4814 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4815     color: #fff;
    4816 }
    4817 
    4818 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    4819     border-color: #d1e4dd;
    4820     color: #d1e4dd;
    4821 }
    4822 
    4823 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    4824     border-color: #d1e4dd;
    4825     background-color: #d1e4dd;
    4826     color: #39414d;
     4636.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
     4637    padding: 6px 15px;
    48274638}
    48284639
    … …  
    75657376.widget_search > .search-form .search-submit {
    75667377    margin-left: 0;
    7567     background-color: transparent;
    7568     color: #39414d;
    75697378    margin-bottom: 15px;
    7570 }
    7571 
    7572 .widget_search > .search-form .search-submit:hover {
    7573     background-color: #39414d;
    7574     color: #d1e4dd;
    75757379}
    75767380
    … …  
    76337437}
    76347438
     7439.has-black-color[class] [class*=__inner-container] {
     7440    color: #000;
     7441}
     7442
    76357443.has-gray-color[class] {
    76367444    color: #39414d;
    76377445}
    76387446
     7447.has-gray-color[class] [class*=__inner-container] {
     7448    color: #39414d;
     7449}
     7450
    76397451.has-dark-gray-color[class] {
     7452    color: #28303d;
     7453}
     7454
     7455.has-dark-gray-color[class] [class*=__inner-container] {
    76407456    color: #28303d;
    76417457}
    … …  
    76457461}
    76467462
     7463.has-green-color[class] [class*=__inner-container] {
     7464    color: #d1e4dd;
     7465}
     7466
    76477467.has-blue-color[class] {
    76487468    color: #d1dfe4;
    76497469}
    76507470
     7471.has-blue-color[class] [class*=__inner-container] {
     7472    color: #d1dfe4;
     7473}
     7474
    76517475.has-purple-color[class] {
    76527476    color: #d1d1e4;
    76537477}
    76547478
     7479.has-purple-color[class] [class*=__inner-container] {
     7480    color: #d1d1e4;
     7481}
     7482
    76557483.has-red-color[class] {
    76567484    color: #e4d1d1;
    76577485}
    76587486
     7487.has-red-color[class] [class*=__inner-container] {
     7488    color: #e4d1d1;
     7489}
     7490
    76597491.has-orange-color[class] {
    76607492    color: #e4dad1;
    76617493}
    76627494
     7495.has-orange-color[class] [class*=__inner-container] {
     7496    color: #e4dad1;
     7497}
     7498
    76637499.has-yellow-color[class] {
    76647500    color: #eeeadd;
    76657501}
    76667502
     7503.has-yellow-color[class] [class*=__inner-container] {
     7504    color: #eeeadd;
     7505}
     7506
    76677507.has-white-color[class] {
     7508    color: #fff;
     7509}
     7510
     7511.has-white-color[class] [class*=__inner-container] {
    76687512    color: #fff;
    76697513}
    … …  
    76847528}
    76857529
     7530.has-black-background-color[class] [class*=__inner-container] {
     7531    background-color: #000;
     7532}
     7533
     7534.has-dark-gray-background-color[class] {
     7535    background-color: #28303d;
     7536}
     7537
     7538.has-dark-gray-background-color[class] [class*=__inner-container] {
     7539    background-color: #28303d;
     7540}
     7541
    76867542.has-gray-background-color[class] {
    76877543    background-color: #39414d;
    76887544}
    76897545
    7690 .has-dark-gray-background-color[class] {
    7691     background-color: #28303d;
     7546.has-gray-background-color[class] [class*=__inner-container] {
     7547    background-color: #39414d;
     7548}
     7549
     7550.has-light-gray-background-color[class] {
     7551    background-color: #f0f0f0;
     7552}
     7553
     7554.has-light-gray-background-color[class] [class*=__inner-container] {
     7555    background-color: #f0f0f0;
    76927556}
    76937557
    … …  
    76967560}
    76977561
     7562.has-green-background-color[class] [class*=__inner-container] {
     7563    background-color: #d1e4dd;
     7564}
     7565
    76987566.has-blue-background-color[class] {
    76997567    background-color: #d1dfe4;
    77007568}
    77017569
     7570.has-blue-background-color[class] [class*=__inner-container] {
     7571    background-color: #d1dfe4;
     7572}
     7573
    77027574.has-purple-background-color[class] {
    77037575    background-color: #d1d1e4;
    77047576}
    77057577
     7578.has-purple-background-color[class] [class*=__inner-container] {
     7579    background-color: #d1d1e4;
     7580}
     7581
    77067582.has-red-background-color[class] {
    77077583    background-color: #e4d1d1;
    77087584}
    77097585
     7586.has-red-background-color[class] [class*=__inner-container] {
     7587    background-color: #e4d1d1;
     7588}
     7589
    77107590.has-orange-background-color[class] {
    77117591    background-color: #e4dad1;
    77127592}
    77137593
     7594.has-orange-background-color[class] [class*=__inner-container] {
     7595    background-color: #e4dad1;
     7596}
     7597
    77147598.has-yellow-background-color[class] {
    77157599    background-color: #eeeadd;
    77167600}
    77177601
     7602.has-yellow-background-color[class] [class*=__inner-container] {
     7603    background-color: #eeeadd;
     7604}
     7605
    77187606.has-white-background-color[class] {
    77197607    background-color: #fff;
    77207608}
    77217609
    7722 :not(.has-text-color).has-black-background-color[class] {
    7723     color: #fff;
    7724 }
    7725 
    7726 :not(.has-text-color).has-gray-background-color[class] {
    7727     color: #fff;
    7728 }
    7729 
    7730 :not(.has-text-color).has-dark-gray-background-color[class] {
    7731     color: #fff;
    7732 }
    7733 
    7734 :not(.has-text-color).has-green-background-color[class] {
    7735     color: #28303d;
    7736 }
    7737 
    7738 :not(.has-text-color).has-blue-background-color[class] {
    7739     color: #28303d;
    7740 }
    7741 
    7742 :not(.has-text-color).has-purple-background-color[class] {
    7743     color: #28303d;
    7744 }
    7745 
    7746 :not(.has-text-color).has-red-background-color[class] {
    7747     color: #28303d;
    7748 }
    7749 
    7750 :not(.has-text-color).has-orange-background-color[class] {
    7751     color: #28303d;
    7752 }
    7753 
    7754 :not(.has-text-color).has-yellow-background-color[class] {
    7755     color: #28303d;
    7756 }
    7757 
    7758 :not(.has-text-color).has-white-background-color[class] {
     7610.has-white-background-color[class] [class*=__inner-container] {
     7611    background-color: #fff;
     7612}
     7613
     7614.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container] {
     7615    color: #28303d;
     7616}
     7617
     7618.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container] {
     7619    color: #28303d;
     7620}
     7621
     7622.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     7623    color: #28303d;
     7624}
     7625
     7626.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container] {
     7627    color: #28303d;
     7628}
     7629
     7630.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container] {
     7631    color: #28303d;
     7632}
     7633
     7634.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container] {
     7635    color: #28303d;
     7636}
     7637
     7638.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container] {
     7639    color: #28303d;
     7640}
     7641
     7642.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container] {
     7643    color: #28303d;
     7644}
     7645
     7646.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container] {
     7647    color: #28303d;
     7648}
     7649
     7650.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
    77597651    color: #28303d;
    77607652}

  • trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css

    r49864 r49987  
    525525
    526526.wp-block-button__link {
    527     line-height: var(--button--line-height);
    528     color: var(--button--color-text);
     527    border: var(--button--border-width) solid transparent;
     528    border-radius: var(--button--border-radius);
    529529    cursor: pointer;
     530    display: block;
    530531    font-weight: var(--button--font-weight);
    531532    font-family: var(--button--font-family);
    532533    font-size: var(--button--font-size);
    533     background-color: var(--button--color-background);
    534     border-radius: var(--button--border-radius);
    535     border: var(--button--border-width) solid var(--button--color-background);
     534    line-height: var(--button--line-height);
     535    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    536536    text-decoration: none;
    537     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     537}
     538
     539.wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     540    color: var(--global--color-background);
     541}
     542
     543.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     544    color: var(--local--color-background, var(--global--color-primary));
     545}
     546
     547.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     548    color: var(--global--color-primary);
     549}
     550
     551.wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     552    background-color: var(--global--color-primary);
     553}
     554
     555.has-background .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     556    background-color: var(--local--color-primary, var(--global--color-primary));
     557}
     558
     559.wp-block-button__link:hover,
     560.wp-block-button__link:active {
     561    background-color: transparent;
     562    border-color: currentColor;
     563    color: inherit;
    538564}
    539565
    540566.wp-block-button__link:focus {
    541     background: transparent;
    542567    outline-offset: -6px;
    543568    outline: 2px dotted currentColor;
    544 }
    545 
    546 .is-dark-theme .wp-block-button__link:focus {
    547     color: var(--button--color-background);
    548 }
    549 
    550 .wp-block-button__link:focus:not(.has-background) {
    551     color: var(--button--color-text-hover);
    552569}
    553570
    … …  
    574591}
    575592
     593.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     594    color: var(--global--color-background);
     595}
     596
     597.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     598    color: var(--local--color-background, var(--global--color-background));
     599}
     600
     601.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     602    color: var(--global--color-primary);
     603}
     604
     605.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     606    background-color: var(--global--color-primary);
     607}
     608
     609.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     610    background-color: var(--local--color-primary, var(--global--color-primary));
     611}
     612
     613.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    576614.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    577     color: var(--button--color-text-active) !important;
    578     background: transparent !important;
    579     border-color: var(--button--color-background);
    580 }
    581 
    582 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    583     color: var(--button--color-text-hover) !important;
    584     background: transparent !important;
    585     border-color: var(--button--color-background);
    586 }
    587 
    588 .wp-block-button.is-style-outline .wp-block-button__link {
    589     color: var(--button--color-background);
    590     background: transparent;
    591     border: var(--button--border-width) solid currentColor;
    592     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    593 }
    594 
    595 .wp-block-button.is-style-outline .wp-block-button__link:active,
    596 .wp-block-button.is-style-outline .wp-block-button__link:hover {
    597     background-color: var(--button--color-background);
    598     color: var(--button--color-text);
    599     border-color: var(--button--color-background);
    600 }
    601 
    602 .wp-block-button.is-style-outline .wp-block-button__link.has-background {
    603     border-color: var(--button--color-background);
    604 }
    605 
    606 .wp-block-button.is-style-outline .wp-block-button__link.has-background:active,
    607 .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover {
    608     background-color: var(--button--color-background) !important;
    609 }
    610 
    611 .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    612     color: var(--global--color-dark-gray);
    613 }
    614 
    615 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
    616 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    617 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    618     color: var(--global--color-white);
    619 }
    620 
    621 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color,
    622 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color,
    623 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color,
    624 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color,
    625 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color,
    626 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color,
    627 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color {
    628     color: var(--global--color-dark-gray);
    629 }
    630 
    631 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
     615    border-color: currentColor !important;
     616    background-color: transparent !important;
     617    color: inherit !important;
     618}
     619
     620.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
     621    outline-offset: inherit;
     622    outline: inherit;
     623}
     624
     625.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     626.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     627.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
    632628    border-color: currentColor;
    633629}
    634630
    635 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active,
    636 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover {
    637     color: var(--button--color-text) !important;
    638     border-color: var(--button--color-background);
     631.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     632    color: var(--global--color-primary);
     633}
     634
     635.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     636    color: var(--local--color-primary, var(--global--color-primary));
     637}
     638
     639.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
     640    color: inherit;
     641}
     642
     643.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     644    background-color: transparent;
     645}
     646
     647.wp-block-button.is-style-outline .wp-block-button__link:hover,
     648.wp-block-button.is-style-outline .wp-block-button__link:active {
     649    background-color: var(--global--color-primary) !important;
     650    border-color: transparent !important;
     651    color: var(--global--color-background) !important;
     652}
     653
     654.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
     655.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
     656    background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     657    color: var(--local--color-background, var(--global--color-background)) !important;
     658}
     659
     660.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
     661.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
     662    color: var(--local--color-background, var(--global--color-background)) !important;
     663}
     664
     665.wp-block-button.is-style-outline .wp-block-button__link:focus {
     666    outline-offset: inherit;
     667    outline: inherit;
    639668}
    640669
    … …  
    849878
    850879.wp-block-file .wp-block-file__button {
    851     line-height: var(--button--line-height);
    852     color: var(--button--color-text);
     880    border: var(--button--border-width) solid transparent;
     881    border-radius: var(--button--border-radius);
    853882    cursor: pointer;
     883    display: block;
    854884    font-weight: var(--button--font-weight);
    855885    font-family: var(--button--font-family);
    856886    font-size: var(--button--font-size);
    857     background-color: var(--button--color-background);
    858     border-radius: var(--button--border-radius);
    859     border: var(--button--border-width) solid var(--button--color-background);
     887    line-height: var(--button--line-height);
     888    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    860889    text-decoration: none;
    861     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    862890    display: inline-block;
    863891}
    864892
     893.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     894    color: var(--global--color-background);
     895}
     896
     897.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     898    color: var(--local--color-background, var(--global--color-primary));
     899}
     900
     901.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
     902    color: var(--global--color-primary);
     903}
     904
     905.wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     906    background-color: var(--global--color-primary);
     907}
     908
     909.has-background .wp-block-file .wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     910    background-color: var(--local--color-primary, var(--global--color-primary));
     911}
     912
     913.wp-block-file .wp-block-file__button:hover,
     914.wp-block-file .wp-block-file__button:active {
     915    background-color: transparent;
     916    border-color: currentColor;
     917    color: inherit;
     918}
     919
    865920.wp-block-file .wp-block-file__button:focus {
    866     background: transparent;
    867921    outline-offset: -6px;
    868922    outline: 2px dotted currentColor;
    869 }
    870 
    871 .is-dark-theme .wp-block-file .wp-block-file__button:focus {
    872     color: var(--button--color-background);
    873 }
    874 
    875 .wp-block-file .wp-block-file__button:focus:not(.has-background) {
    876     color: var(--button--color-text-hover);
    877923}
    878924
    … …  
    883929}
    884930
    885 .wp-block-file .wp-block-file__button:hover {
    886     color: var(--button--color-text-hover);
    887     background: transparent;
     931.wp-block-file .wp-block-file__button:focus {
     932    outline-offset: inherit;
     933    outline: inherit;
    888934}
    889935
    … …  
    17481794}
    17491795
     1796.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
    17501797.wp-block-search .wp-block-search__input {
    17511798    border: var(--form--border-width) solid var(--form--border-color);
    … …  
    17591806}
    17601807
     1808.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
    17611809.is-dark-theme .wp-block-search .wp-block-search__input {
    17621810    background: var(--global--color-white-90);
    17631811}
    17641812
    1765 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input,
    1766 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input,
    1767 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input,
    1768 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input,
    1769 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input,
    1770 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input,
    1771 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input {
    1772     border-color: var(--form--color-text);
    1773 }
    1774 
    1775 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
    1776 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    1777 .has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    1778     border-color: var(--global--color-white);
     1813.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper,
     1814.has-background .wp-block-search .wp-block-search__input {
     1815    border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    17791816}
    17801817
    17811818.wp-block-search .wp-block-search__button {
    1782     line-height: var(--button--line-height);
    1783     color: var(--button--color-text);
     1819    border: var(--button--border-width) solid transparent;
     1820    border-radius: var(--button--border-radius);
    17841821    cursor: pointer;
     1822    display: block;
    17851823    font-weight: var(--button--font-weight);
    17861824    font-family: var(--button--font-family);
    17871825    font-size: var(--button--font-size);
    1788     background-color: var(--button--color-background);
    1789     border-radius: var(--button--border-radius);
    1790     border: var(--button--border-width) solid var(--button--color-background);
     1826    line-height: var(--button--line-height);
     1827    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    17911828    text-decoration: none;
    1792     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    17931829    box-shadow: none;
    17941830    margin-left: 0;
     1831}
     1832
     1833.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     1834    color: var(--global--color-background);
     1835}
     1836
     1837.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color) {
     1838    color: var(--local--color-background, var(--global--color-primary));
     1839}
     1840
     1841.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background {
     1842    color: var(--global--color-primary);
     1843}
     1844
     1845.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     1846    background-color: var(--global--color-primary);
     1847}
     1848
     1849.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background) {
     1850    background-color: var(--local--color-primary, var(--global--color-primary));
     1851}
     1852
     1853.wp-block-search .wp-block-search__button:hover,
     1854.wp-block-search .wp-block-search__button:active {
    17951855    background-color: transparent;
    1796     color: var(--button--color-text-hover);
     1856    border-color: currentColor;
     1857    color: inherit;
    17971858}
    17981859
    17991860.wp-block-search .wp-block-search__button:focus {
    1800     background: transparent;
    18011861    outline-offset: -6px;
    18021862    outline: 2px dotted currentColor;
    1803 }
    1804 
    1805 .is-dark-theme .wp-block-search .wp-block-search__button:focus {
    1806     color: var(--button--color-background);
    1807 }
    1808 
    1809 .wp-block-search .wp-block-search__button:focus:not(.has-background) {
    1810     color: var(--button--color-text-hover);
    18111863}
    18121864
    … …  
    18171869}
    18181870
    1819 .wp-block-search .wp-block-search__button:hover {
    1820     color: var(--button--color-text);
    1821     background-color: var(--button--color-background);
    1822 }
    1823 
    18241871.wp-block-search .wp-block-search__button.has-icon {
    18251872    padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     1873    display: inherit;
    18261874}
    18271875
    … …  
    18311879}
    18321880
    1833 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button,
    1834 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button,
    1835 .has-background.has-black-background-color .wp-block-search .wp-block-search__button {
     1881.has-background .wp-block-search .wp-block-search__button:hover,
     1882.has-background .wp-block-search .wp-block-search__button:active {
     1883    background-color: var(--local--color-background, var(--global--color-background)) !important;
     1884    color: var(--local--color-primary, var(--global--color-primary)) !important;
     1885}
     1886
     1887.has-text-color .wp-block-search .wp-block-search__button:hover,
     1888.has-text-color .wp-block-search .wp-block-search__button:active {
     1889    color: var(--local--color-primary, var(--global--color-primary)) !important;
     1890}
     1891
     1892.wp-block-search .wp-block-search__button:focus {
     1893    outline-offset: inherit;
     1894    outline: inherit;
     1895}
     1896
     1897.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     1898    padding: var(--form--border-width);
     1899}
     1900
     1901.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
     1902    border: none;
     1903}
     1904
     1905.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
     1906.wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
     1907    color: var(--global--color-dark-gray);
     1908}
     1909
     1910.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button,
     1911.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button {
     1912    color: var(--global--color-dark-gray);
     1913}
     1914
     1915.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button:hover,
     1916.is-dark-theme .wp-block-search.wp-block-search__button-inside.wp-block-search__icon-button .wp-block-search__button:hover {
     1917    background-color: var(--global--color-dark-gray);
    18361918    color: var(--global--color-white);
    1837     border-color: currentColor;
    1838 }
    1839 
    1840 .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
    1841 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
    1842 .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    1843     color: var(--global--color-white);
    1844     background-color: var(--button--color-background);
    1845     border-color: var(--global--color-white);
    1846 }
    1847 
    1848 .is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover,
    1849 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover,
    1850 .is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover {
    1851     color: var(--button--color-text);
    1852     background-color: var(--button--color-background);
    1853 }
    1854 
    1855 .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
    1856 .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
    1857 .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
    1858 .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
    1859 .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
    1860 .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
    1861 .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    1862     color: var(--global--color-white);
    1863     background-color: var(--form--border-color);
    1864     border-color: var(--form--border-color);
    1865 }
    1866 
    1867 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button,
    1868 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button,
    1869 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button,
    1870 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button,
    1871 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button,
    1872 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button,
    1873 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button {
    1874     color: var(--form--color-text);
    1875     border-color: currentColor;
    1876 }
    1877 
    1878 .is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover,
    1879 .is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover,
    1880 .is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover,
    1881 .is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover,
    1882 .is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover,
    1883 .is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover,
    1884 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover {
    1885     color: var(--global--color-white);
    1886     background-color: var(--button--color-text);
    1887     border-color: var(--button--color-text);
    1888 }
    1889 
    1890 .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1891 .has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1892 .has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1893 .has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1894 .has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1895 .has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1896 .has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input,
    1897 .has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input {
    1898     border: none;
    18991919}
    19001920
    19011921.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button {
    19021922    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    1903 }
    1904 
    1905 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    1906     color: var(--button--color-text);
    1907     border-color: currentColor;
    1908 }
    1909 
    1910 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    1911     color: var(--global--color-white);
    1912     background-color: var(--button--color-text);
    1913     border-color: var(--button--color-text);
    1914 }
    1915 
    1916 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
    1917 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
    1918 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    1919     color: var(--button--color-text-hover);
    1920     border-color: currentColor;
    1921 }
    1922 
    1923 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    1924 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    1925 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    1926     color: var(--global--color-white);
    1927     background-color: var(--button--color-background);
    1928     border-color: var(--button--color-background);
    1929 }
    1930 
    1931 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
    1932 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button,
    1933 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button {
    1934     color: var(--button--color-text);
    1935     border-color: currentColor;
    1936 }
    1937 
    1938 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    1939 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover,
    1940 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover {
    1941     color: var(--global--color-white);
    1942     background-color: var(--button--color-text);
    1943     border-color: var(--button--color-text);
    19441923}
    19451924
    … …  
    23512330}
    23522331
     2332.has-black-color[class] [class*=__inner-container] {
     2333    --local--color-primary: var(--global--color-black, #000);
     2334    color: var(--local--color-primary);
     2335}
     2336
    23532337.has-gray-color[class] {
    23542338    color: var(--global--color-gray);
    23552339}
    23562340
     2341.has-gray-color[class] [class*=__inner-container] {
     2342    --local--color-primary: var(--global--color-gray, #000);
     2343    color: var(--local--color-primary);
     2344}
     2345
    23572346.has-dark-gray-color[class] {
    23582347    color: var(--global--color-dark-gray);
    23592348}
    23602349
     2350.has-dark-gray-color[class] [class*=__inner-container] {
     2351    --local--color-primary: var(--global--color-dark-gray, #000);
     2352    color: var(--local--color-primary);
     2353}
     2354
    23612355.has-green-color[class] {
    23622356    color: var(--global--color-green);
    23632357}
    23642358
     2359.has-green-color[class] [class*=__inner-container] {
     2360    --local--color-primary: var(--global--color-green, #fff);
     2361    color: var(--local--color-primary);
     2362}
     2363
    23652364.has-blue-color[class] {
    23662365    color: var(--global--color-blue);
    23672366}
    23682367
     2368.has-blue-color[class] [class*=__inner-container] {
     2369    --local--color-primary: var(--global--color-blue, #fff);
     2370    color: var(--local--color-primary);
     2371}
     2372
    23692373.has-purple-color[class] {
    23702374    color: var(--global--color-purple);
    23712375}
    23722376
     2377.has-purple-color[class] [class*=__inner-container] {
     2378    --local--color-primary: var(--global--color-purple, #fff);
     2379    color: var(--local--color-primary);
     2380}
     2381
    23732382.has-red-color[class] {
    23742383    color: var(--global--color-red);
    23752384}
    23762385
     2386.has-red-color[class] [class*=__inner-container] {
     2387    --local--color-primary: var(--global--color-red, #fff);
     2388    color: var(--local--color-primary);
     2389}
     2390
    23772391.has-orange-color[class] {
    23782392    color: var(--global--color-orange);
    23792393}
    23802394
     2395.has-orange-color[class] [class*=__inner-container] {
     2396    --local--color-primary: var(--global--color-orange, #fff);
     2397    color: var(--local--color-primary);
     2398}
     2399
    23812400.has-yellow-color[class] {
    23822401    color: var(--global--color-yellow);
    23832402}
    23842403
     2404.has-yellow-color[class] [class*=__inner-container] {
     2405    --local--color-primary: var(--global--color-yellow, #fff);
     2406    color: var(--local--color-primary);
     2407}
     2408
    23852409.has-white-color[class] {
    23862410    color: var(--global--color-white);
     2411}
     2412
     2413.has-white-color[class] [class*=__inner-container] {
     2414    --local--color-primary: var(--global--color-white, #fff);
     2415    color: var(--local--color-primary);
    23872416}
    23882417
    … …  
    24022431}
    24032432
     2433.has-black-background-color[class] [class*=__inner-container] {
     2434    --local--color-background: var(--global--color-black, #000);
     2435    background-color: var(--local--color-background);
     2436}
     2437
     2438.has-dark-gray-background-color[class] {
     2439    background-color: var(--global--color-dark-gray);
     2440}
     2441
     2442.has-dark-gray-background-color[class] [class*=__inner-container] {
     2443    --local--color-background: var(--global--color-dark-gray, #000);
     2444    background-color: var(--local--color-background);
     2445}
     2446
    24042447.has-gray-background-color[class] {
    24052448    background-color: var(--global--color-gray);
    24062449}
    24072450
    2408 .has-dark-gray-background-color[class] {
    2409     background-color: var(--global--color-dark-gray);
     2451.has-gray-background-color[class] [class*=__inner-container] {
     2452    --local--color-background: var(--global--color-gray, #000);
     2453    background-color: var(--local--color-background);
     2454}
     2455
     2456.has-light-gray-background-color[class] {
     2457    background-color: var(--global--color-light-gray);
     2458}
     2459
     2460.has-light-gray-background-color[class] [class*=__inner-container] {
     2461    --local--color-background: var(--global--color-light-gray, #fff);
     2462    background-color: var(--local--color-background);
    24102463}
    24112464
    … …  
    24142467}
    24152468
     2469.has-green-background-color[class] [class*=__inner-container] {
     2470    --local--color-background: var(--global--color-green, #fff);
     2471    background-color: var(--local--color-background);
     2472}
     2473
    24162474.has-blue-background-color[class] {
    24172475    background-color: var(--global--color-blue);
    24182476}
    24192477
     2478.has-blue-background-color[class] [class*=__inner-container] {
     2479    --local--color-background: var(--global--color-blue, #fff);
     2480    background-color: var(--local--color-background);
     2481}
     2482
    24202483.has-purple-background-color[class] {
    24212484    background-color: var(--global--color-purple);
    24222485}
    24232486
     2487.has-purple-background-color[class] [class*=__inner-container] {
     2488    --local--color-background: var(--global--color-purple, #fff);
     2489    background-color: var(--local--color-background);
     2490}
     2491
    24242492.has-red-background-color[class] {
    24252493    background-color: var(--global--color-red);
    24262494}
    24272495
     2496.has-red-background-color[class] [class*=__inner-container] {
     2497    --local--color-background: var(--global--color-red, #fff);
     2498    background-color: var(--local--color-background);
     2499}
     2500
    24282501.has-orange-background-color[class] {
    24292502    background-color: var(--global--color-orange);
    24302503}
    24312504
     2505.has-orange-background-color[class] [class*=__inner-container] {
     2506    --local--color-background: var(--global--color-orange, #fff);
     2507    background-color: var(--local--color-background);
     2508}
     2509
    24322510.has-yellow-background-color[class] {
    24332511    background-color: var(--global--color-yellow);
    24342512}
    24352513
     2514.has-yellow-background-color[class] [class*=__inner-container] {
     2515    --local--color-background: var(--global--color-yellow, #fff);
     2516    background-color: var(--local--color-background);
     2517}
     2518
    24362519.has-white-background-color[class] {
    24372520    background-color: var(--global--color-white);
    24382521}
    24392522
    2440 :not(.has-text-color).has-black-background-color[class],
    2441 :not(.has-text-color).has-gray-background-color[class],
    2442 :not(.has-text-color).has-dark-gray-background-color[class] {
    2443     color: var(--global--color-white);
    2444 }
    2445 
    2446 :not(.has-text-color).has-green-background-color[class],
    2447 :not(.has-text-color).has-blue-background-color[class],
    2448 :not(.has-text-color).has-purple-background-color[class],
    2449 :not(.has-text-color).has-red-background-color[class],
    2450 :not(.has-text-color).has-orange-background-color[class],
    2451 :not(.has-text-color).has-yellow-background-color[class],
    2452 :not(.has-text-color).has-white-background-color[class] {
    2453     color: var(--global--color-dark-gray);
     2523.has-white-background-color[class] [class*=__inner-container] {
     2524    --local--color-background: var(--global--color-white, #fff);
     2525    background-color: var(--local--color-background);
     2526}
     2527
     2528.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     2529.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     2530.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     2531    --local--color-primary: var(--global--color-background, #fff);
     2532    color: var(--local--color-primary, var(--global--color-primary));
     2533}
     2534
     2535.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     2536.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     2537.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     2538    --local--color-primary: var(--global--color-primary, #000);
     2539}
     2540
     2541.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     2542.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     2543.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     2544.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     2545.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     2546.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     2547.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     2548    --local--color-primary: var(--global--color-primary, #000);
     2549    color: var(--local--color-primary, var(--global--color-primary));
     2550}
     2551
     2552.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     2553.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     2554.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     2555.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     2556.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     2557.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     2558.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     2559    --local--color-primary: var(--global--color-background, #fff);
    24542560}
    24552561

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss

    r49726 r49987  
    2121// - Applies button styles to blocks and elements that share them.
    2222@mixin button-style() {
    23     line-height: var(--button--line-height);
    24     color: var(--button--color-text);
     23    border: var(--button--border-width) solid transparent;
     24    border-radius: var(--button--border-radius);
    2525    cursor: pointer;
     26    display: block;
    2627    font-weight: var(--button--font-weight);
    2728    font-family: var(--button--font-family);
    2829    font-size: var(--button--font-size);
    29     background-color: var(--button--color-background);
    30     border-radius: var(--button--border-radius);
    31     border: var(--button--border-width) solid var(--button--color-background);
     30    line-height: var(--button--line-height);
     31    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    3232    text-decoration: none;
    33     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    3433
    35     &:focus {
    36         background: transparent;
    37         outline-offset: -6px;
    38         outline: 2px dotted currentColor;
     34    // Standard Button Color Relationship Logic
     35    &:not(:hover):not(:active) {
    3936
    40         .is-dark-theme & {
    41             color: var(--button--color-background);
     37        // Text colors
     38        &:not(.has-text-color) {
     39            color: var(--global--color-background);
     40
     41            // Nested
     42            .has-background & {
     43                color: var(--local--color-background, var(--global--color-primary));
     44
     45                &.has-background {
     46                    color: var(--global--color-primary);
     47                }
     48            }
    4249        }
    4350
     51        // Background-colors
    4452        &:not(.has-background) {
    45             color: var(--button--color-text-hover);
     53            background-color: var(--global--color-primary);
     54
     55            // Nested
     56            .has-background & {
     57                background-color: var(--local--color-primary, var(--global--color-primary));
     58            }
    4659        }
    4760    }
    4861
     62    // Hover Button color should match parent element foreground color
     63    &:hover,
     64    &:active {
     65        background-color: transparent;
     66        border-color: currentColor;
     67        color: inherit;
     68    }
     69
     70    // Focus Button outline color should always match the current text color
     71    &:focus {
     72        outline-offset: -6px;
     73        outline: 2px dotted currentColor;
     74    }
     75
     76    // Disabled Button colors
    4977    &:disabled {
    5078        background-color: var(--global--color-white-50);

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss

    r49574 r49987  
    2828    &:not(.is-style-outline) {
    2929
    30         .wp-block-button__link {
     30        .wp-block-button__link:not(:hover):not(:active) {
    3131
    32             &:active {
    33                 color: var(--button--color-text-active) !important;
    34                 background: transparent !important;
    35                 border-color: var(--button--color-background);
     32            // Text colors
     33            &:not(.has-text-color) {
     34                color: var(--global--color-background);
     35
     36                // Nested
     37                .has-background & {
     38                    color: var(--local--color-background, var(--global--color-background));
     39
     40                    &.has-background {
     41                        color: var(--global--color-primary);
     42                    }
     43                }
    3644            }
    3745
    38             &:hover {
    39                 color: var(--button--color-text-hover) !important;
    40                 background: transparent !important;
    41                 border-color: var(--button--color-background);
     46            // Background-colors
     47            &:not(.has-background) {
     48                background-color: var(--global--color-primary);
     49
     50                // Nested
     51                .has-background & {
     52                    background-color: var(--local--color-primary, var(--global--color-primary));
     53                }
    4254            }
     55        }
     56
     57        // Hover Button color should match parent element foreground color
     58        .wp-block-button__link:hover,
     59        .wp-block-button__link:active {
     60            border-color: currentColor !important;
     61            background-color: transparent !important;
     62            color: inherit !important;
     63        }
     64       
     65        // Remove :focus styles in the editor
     66        .wp-block-button__link:focus {
     67            outline-offset: inherit;
     68            outline: inherit;
    4369        }
    4470    }
    … …  
    4773    &.is-style-outline {
    4874
    49         .wp-block-button__link {
    50             color: var(--button--color-background);
    51             background: transparent;
    52             border: var(--button--border-width) solid currentColor;
    53             padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     75        .wp-block-button__link:not(:hover):not(:active) {
    5476
    55             &:active,
    56             &:hover {
    57                 background-color: var(--button--color-background);
    58                 color: var(--button--color-text);
    59                 border-color: var(--button--color-background);
     77            // Border colors
     78            &:not(.has-text-color),
     79            &:not(.has-background),
     80            &.has-background {
     81                border-color: currentColor;
     82            }
     83
     84            // Text colors
     85            &:not(.has-text-color) {
     86                color: var(--global--color-primary);
     87
     88                // Nested
     89                .has-background & {
     90                    color: var(--local--color-primary, var(--global--color-primary));
     91                }
    6092            }
    6193
    6294            &.has-background {
    63                 border-color: var(--button--color-background);
    64 
    65                 &:active,
    66                 &:hover {
    67                     background-color: var(--button--color-background) !important;
     95                // Nested
     96                .has-background &:not(.has-text-color) {
     97                    color: inherit;
    6898                }
    6999            }
    70100
    71             &.has-background:not(.has-text-color) {
    72                 color: var(--global--color-dark-gray);
     101            // Background-colors
     102            &:not(.has-background) {
     103                background-color: transparent;
     104            }
     105        }
     106
     107        // Hover Button color should match default button style
     108        .wp-block-button__link:hover,
     109        .wp-block-button__link:active {
     110
     111            background-color: var(--global--color-primary) !important;
     112            border-color: transparent !important;
     113            color: var(--global--color-background) !important;
     114
     115            .has-background & {
     116                background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     117                color: var(--local--color-background, var(--global--color-background)) !important;
    73118            }
    74119
    75             &.has-background.has-gray-background-color:not(.has-text-color),
    76             &.has-background.has-dark-gray-background-color:not(.has-text-color),
    77             &.has-background.has-black-background-color:not(.has-text-color) {
    78                 color: var(--global--color-white);
     120            .has-text-color & {
     121                color: var(--local--color-background, var(--global--color-background)) !important;
    79122            }
     123        }
    80124
    81             .is-dark-theme & {
    82 
    83                 &:not(.has-text-color) {
    84 
    85                     &.has-background.has-white-background-color,
    86                     &.has-background.has-green-background-color,
    87                     &.has-background.has-blue-background-color,
    88                     &.has-background.has-purple-background-color,
    89                     &.has-background.has-red-background-color,
    90                     &.has-background.has-orange-background-color,
    91                     &.has-background.has-yellow-background-color {
    92                         color: var(--global--color-dark-gray);
    93                     }
    94                 }
    95             }
    96 
    97             &.has-text-color {
    98                 border-color: currentColor;
    99 
    100                 &:active,
    101                 &:hover {
    102                     color: var(--button--color-text) !important;
    103                     border-color: var(--button--color-background);
    104                 }
    105             }
     125        // Remove :focus styles in the editor
     126        .wp-block-button__link:focus {
     127            outline-offset: inherit;
     128            outline: inherit;
    106129        }
    107130    }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss

    r49574 r49987  
    55input[type="submit"],
    66input[type="reset"],
    7 .wp-block-search__button,
    8 .wp-block-button .wp-block-button__link {
     7.wp-block-search .wp-block-search__button,
     8.wp-block-button .wp-block-button__link,
     9.wp-block-file a.wp-block-file__button {
    910    // Extend button style
    1011    @include button-style();
    11 }
    12 
    13 .site .button,
    14 input[type="submit"],
    15 input[type="reset"],
    16 .wp-block-search .wp-block-search__button,
    17 .wp-block-file .wp-block-file__button {
    18 
    19     &:active {
    20         color: var(--button--color-text-active);
    21         background-color: var(--button--color-background-active);
    22     }
    23 
    24     &:hover {
    25         color: var(--button--color-text-hover);
    26         background: transparent;
    27     }
    2812}
    2913
    … …  
    3620    &:not(.is-style-outline) {
    3721
    38         .wp-block-button__link {
     22        .wp-block-button__link:not(:hover):not(:active) {
    3923
    40             &:active {
    41                 color: var(--button--color-text-active) !important;
    42                 background: transparent !important;
    43                 border-color: var(--button--color-background);
     24            // Text colors
     25            &:not(.has-text-color) {
     26                color: var(--global--color-background);
     27
     28                // Nested
     29                .has-background & {
     30                    color: var(--local--color-background, var(--global--color-background));
     31
     32                    &.has-background {
     33                        color: var(--global--color-primary);
     34                    }
     35                }
    4436            }
    4537
    46             &:hover {
    47                 color: var(--button--color-text-hover) !important;
    48                 background: transparent !important;
    49                 border-color: var(--button--color-background);
     38            // Background-colors
     39            &:not(.has-background) {
     40                background-color: var(--global--color-primary);
     41
     42                // Nested
     43                .has-background & {
     44                    background-color: var(--local--color-primary, var(--global--color-primary));
     45                }
    5046            }
     47        }
    5148
    52             &:focus {
    53                 color: var(--button--color-text) !important;
    54                 background: var(--button--color-background) !important;
    55             }
     49        // Hover Button color should match parent element foreground color
     50        .wp-block-button__link:hover,
     51        .wp-block-button__link:active {
     52            border-color: currentColor !important;
     53            background-color: transparent !important;
     54            color: inherit !important;
    5655        }
    5756    }
    … …  
    6059    &.is-style-outline {
    6160
    62         .wp-block-button__link {
    63             padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     61        .wp-block-button__link:not(:hover):not(:active) {
    6462
    65             &:not(.has-background) {
    66                 background: transparent;
     63            // Border colors
     64            &:not(.has-text-color),
     65            &:not(.has-background),
     66            &.has-background {
     67                border-color: currentColor;
    6768            }
    6869
    69             &:not(.has-background):not(.has-text-color) {
    70                 background: transparent;
    71                 color: var(--button--color-background);
    72                 border-color: var(--button--color-background);
    73             }
     70            // Text colors
     71            &:not(.has-text-color) {
     72                color: var(--global--color-primary);
    7473
    75             &.has-background:not(.has-text-color) {
    76                 color: currentColor;
    77             }
    78 
    79             &.has-background.has-gray-background-color:not(.has-text-color),
    80             &.has-background.has-dark-gray-background-color:not(.has-text-color),
    81             &.has-background.has-black-background-color:not(.has-text-color) {
    82                 color: var(--global--color-white);
    83             }
    84 
    85             .is-dark-theme & {
    86 
    87                 &:not(.has-text-color) {
    88 
    89                     &.has-background {
    90                         color: var(--global--color-dark-gray);
    91                     }
    92 
    93                     &.has-background.has-gray-background-color,
    94                     &.has-background.has-dark-gray-background-color,
    95                     &.has-background.has-black-background-color {
    96                         color: var(--global--color-white);
    97                     }
     74                // Nested
     75                .has-background & {
     76                    color: var(--local--color-primary, var(--global--color-primary));
    9877                }
    9978            }
    10079
    101             &.has-text-color,
    102             &.has-background.has-text-color {
    103                 border-color: currentColor;
    104             }
    105 
    106             &:active,
    107             &:hover {
    108                 color: var(--button--color-text) !important;
    109                 background: var(--button--color-background) !important;
    110                 border-color: var(--button--color-background);
    111 
    112                 &.has-text-color {
    113                     border-color: var(--button--color-background);
     80            &.has-background {
     81                // Nested
     82                .has-background &:not(.has-text-color) {
     83                    color: inherit;
    11484                }
    11585            }
    11686
    117             &:focus {
    118                 color: var(--button--color-background) !important;
    119                 background: transparent !important;
     87            // Background-colors
     88            &:not(.has-background) {
     89                background-color: transparent;
     90            }
     91        }
     92
     93        .wp-block-button__link:hover,
     94        .wp-block-button__link:active {
     95
     96            border-color: transparent !important;
     97            background-color: var(--global--color-primary) !important;
     98            color: var(--global--color-background) !important;
     99
     100            .has-background & {
     101                background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     102                color: var(--local--color-background, var(--global--color-background)) !important;
     103            }
     104
     105            .has-text-color & {
     106                color: var(--local--color-background, var(--global--color-background)) !important;
    120107            }
    121108        }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss

    r49574 r49987  
    1616        @include button-style();
    1717        display: inline-block;
    18 
    19         &:hover {
    20             color: var(--button--color-text-hover);
    21             background: transparent;
     18       
     19        // Remove :focus styles in the editor
     20        &:focus {
     21            outline-offset: inherit;
     22            outline: inherit;
    2223        }
    2324    }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss

    r49574 r49987  
    55    a.wp-block-file__button:focus,
    66    a.wp-block-file__button:hover {
    7         color: var(--button--color-text-hover);
    87        opacity: inherit;
    98    }
    109
    11     a.wp-block-file__button:visited {
    12         color: var(--button--color-text);
    13 
    14         &:hover {
    15             color: var(--button--color-text-hover);
    16         }
    17     }
    18 
    19     .wp-block-file__button {
    20         // Extend button style
    21         @include button-style();
     10    a.wp-block-file__button {
    2211        display: inline-block;
    2312    }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss

    r49574 r49987  
    88    }
    99
     10    &.wp-block-search__button-inside .wp-block-search__inside-wrapper,
    1011    .wp-block-search__input {
    1112        border: var(--form--border-width) solid var(--form--border-color);
    … …  
    2223        }
    2324
    24         .has-background.has-white-background-color &,
    25         .has-background.has-green-background-color &,
    26         .has-background.has-blue-background-color &,
    27         .has-background.has-purple-background-color &,
    28         .has-background.has-red-background-color &,
    29         .has-background.has-orange-background-color &,
    30         .has-background.has-yellow-background-color & {
    31 
    32             .is-dark-theme & {
    33                 border-color: var(--form--color-text);
    34             }
    35         }
    36 
    37         .has-background.has-gray-background-color &,
    38         .has-background.has-dark-gray-background-color &,
    39         .has-background.has-black-background-color & {
    40             border-color: var(--global--color-white);
     25        .has-background & {
     26            border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    4127        }
    4228    }
    … …  
    4632        box-shadow: none;
    4733        margin-left: 0;
    48         background-color: transparent;
    49         color: var(--button--color-text-hover);
    50 
    51         &:hover {
    52             color: var(--button--color-text);
    53             background-color: var(--button--color-background);
    54         }
    5534
    5635        &.has-icon {
    5736            padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
     37            display: inherit;
    5838
    5939            svg {
    … …  
    6343        }
    6444
    65         .has-background.has-gray-background-color &,
    66         .has-background.has-dark-gray-background-color &,
    67         .has-background.has-black-background-color & {
    68             color: var(--global--color-white);
    69             border-color: currentColor;
     45        &:hover,
     46        &:active {
    7047
    71             &:hover {
    72                 color: var(--global--color-white);
    73                 background-color: var(--button--color-background);
    74                 border-color: var(--global--color-white);
     48            .has-background & {
     49                background-color: var(--local--color-background, var(--global--color-background)) !important;
     50                color: var(--local--color-primary, var(--global--color-primary)) !important;
     51            }
    7552
    76                 .is-dark-theme & {
    77                     color: var(--button--color-text);
    78                     background-color: var(--button--color-background);
    79                 }
     53            .has-text-color & {
     54                color: var(--local--color-primary, var(--global--color-primary)) !important;
    8055            }
    8156        }
    8257
    83         .has-background.has-white-background-color &,
    84         .has-background.has-green-background-color &,
    85         .has-background.has-blue-background-color &,
    86         .has-background.has-purple-background-color &,
    87         .has-background.has-red-background-color &,
    88         .has-background.has-orange-background-color &,
    89         .has-background.has-yellow-background-color & {
    90 
    91             &:hover {
    92                 color: var(--global--color-white);
    93                 background-color: var(--form--border-color);
    94                 border-color: var(--form--border-color);
    95             }
    96 
    97             .is-dark-theme & {
    98                 color: var(--form--color-text);
    99                 border-color: currentColor;
    100 
    101                 &:hover {
    102                     color: var(--global--color-white);
    103                     background-color: var(--button--color-text);
    104                     border-color: var(--button--color-text);
    105                 }
    106             }
     58        // Remove :focus styles in the editor
     59        &:focus {
     60            outline-offset: inherit;
     61            outline: inherit;
    10762        }
    10863    }
    … …  
    11065    &.wp-block-search__button-inside {
    11166
    112         .wp-block-search__input,
    113         .has-background.has-white-background-color & .wp-block-search__input,
    114         .has-background.has-green-background-color & .wp-block-search__input,
    115         .has-background.has-blue-background-color & .wp-block-search__input,
    116         .has-background.has-purple-background-color & .wp-block-search__input,
    117         .has-background.has-red-background-color & .wp-block-search__input,
    118         .has-background.has-orange-background-color & .wp-block-search__input,
    119         .has-background.has-yellow-background-color & .wp-block-search__input {
     67        .wp-block-search__inside-wrapper {
     68            padding: var(--form--border-width);
     69        }
     70
     71        .wp-block-search__input {
    12072            border: none;
    12173        }
    12274
    123         &.wp-block-search__text-button {
     75        &.wp-block-search__text-button,
     76        &.wp-block-search__icon-button {
    12477
    12578            .wp-block-search__button {
    126                 // Match the text button size with the icon button.
    127                 padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     79                // Search button always needs black contrast against white form background
     80                &:hover {
     81                    color: var(--global--color-dark-gray);
     82                }
     83
     84                .is-dark-theme & {
     85                    color: var(--global--color-dark-gray);
     86
     87                    &:hover {
     88                        background-color: var(--global--color-dark-gray);
     89                        color: var(--global--color-white);
     90                    }
     91                }
    12892            }
    12993        }
    13094
    131         .wp-block-search__button {
    132 
    133             .is-dark-theme & {
    134                 color: var(--button--color-text);
    135                 border-color: currentColor;
    136 
    137                 &:hover {
    138                     color: var(--global--color-white);
    139                     background-color: var(--button--color-text);
    140                     border-color: var(--button--color-text);
    141                 }
    142             }
    143 
    144             .has-background.has-gray-background-color &,
    145             .has-background.has-dark-gray-background-color &,
    146             .has-background.has-black-background-color & {
    147                 color: var(--button--color-text-hover);
    148                 border-color: currentColor;
    149 
    150                 &:hover {
    151                     color: var(--global--color-white);
    152                     background-color: var(--button--color-background);
    153                     border-color: var(--button--color-background);
    154                 }
    155 
    156                 .is-dark-theme & {
    157                     color: var(--button--color-text);
    158                     border-color: currentColor;
    159 
    160                     &:hover {
    161                         color: var(--global--color-white);
    162                         background-color: var(--button--color-text);
    163                         border-color: var(--button--color-text);
    164                     }
    165                 }
    166             }
     95        &.wp-block-search__text-button .wp-block-search__button {
     96            // Match the text button size with the icon button.
     97            padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    16798        }
    16899    }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss

    r49726 r49987  
    2929        }
    3030
    31         .has-background &,
    32         [class*="background-color"] &,
    33         [style*="background-color"] &,
    34         .wp-block-cover[style*="background-image"] & {
    35             border-color: currentColor;
    36         }
    37 
    38         .has-background.has-gray-background-color &,
    39         .has-background.has-dark-gray-background-color &,
    40         .has-background.has-black-background-color & {
    41             border-color: var(--global--color-white);
     31        .has-background & {
     32            border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    4233        }
    4334    }
    … …  
    4536    button.wp-block-search__button {
    4637        margin-left: 0;
    47         background-color: transparent;
    48         color: var(--button--color-text-hover);
    4938        line-height: 1;
    50 
    51         &:hover {
    52             background-color: var(--button--color-background);
    53             color: var(--button--color-text);
    54         }
    5539
    5640        &.has-icon {
    … …  
    6448        }
    6549
    66         .has-background.has-gray-background-color &,
    67         .has-background.has-dark-gray-background-color &,
    68         .has-background.has-black-background-color & {
    69             color: var(--global--color-white);
    70             border-color: currentColor;
     50        &:hover,
     51        &:active {
    7152
    72             &:hover {
    73                 background-color: var(--button--color-background);
    74                 border-color: var(--global--color-white);
    75                 color: var(--global--color-white);
     53            .has-background & {
     54                background-color: var(--local--color-background, var(--global--color-background)) !important;
     55                color: var(--local--color-primary, var(--global--color-primary)) !important;
     56            }
    7657
    77                 .is-dark-theme & {
    78                     color: var(--button--color-text);
    79                 }
    80             }
    81         }
    82 
    83         .has-background.has-white-background-color &,
    84         .has-background.has-green-background-color &,
    85         .has-background.has-blue-background-color &,
    86         .has-background.has-purple-background-color &,
    87         .has-background.has-red-background-color &,
    88         .has-background.has-orange-background-color &,
    89         .has-background.has-yellow-background-color & {
    90             border-color: currentColor;
    91             color: currentColor;
    92 
    93             &:hover {
    94                 background-color: var(--form--border-color);
    95                 border-color: var(--form--border-color);
    96                 color: var(--global--color-white);
    97 
    98                 .is-dark-theme & {
    99                     border-color: var(--button--color-text);
    100                     background-color: var(--button--color-text);
    101                     color: var(--button--color-background);
    102                 }
     58            .has-text-color & {
     59                color: var(--local--color-primary, var(--global--color-primary)) !important;
    10360            }
    10461        }
    … …  
    11168            border: var(--form--border-width) solid var(--form--border-color);
    11269            border-radius: var(--form--border-radius);
     70            padding: var(--form--border-width);
     71
     72            .has-background & {
     73                border-color: var(--local--color-primary, var(--global--color-primary)) !important;
     74            }
    11375
    11476            .wp-block-search__input {
     77                margin-left: 0;
    11578                margin-right: 0;
     79                padding-left: var(--form--spacing-unit);
    11680
     81                // Add outline for focus styles to override default
    11782                &:focus {
     83                    color: var(--form--color-text);
     84                    outline-offset: -2px;
    11885                    outline: 2px dotted var(--form--border-color);
    119                     outline-offset: -5px;
    120 
    121                     .is-dark-theme & {
    122                         outline-color: currentColor;
    123                     }
    12486                }
    12587            }
    126         }
    127 
    128         &.wp-block-search__text-button {
    12988
    13089            button.wp-block-search__button {
    131                 // Match the text button size with the icon button.
    13290                padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    133             }
    134         }
    13591
    136         button.wp-block-search__button {
    137 
    138             .has-background.has-gray-background-color &,
    139             .has-background.has-dark-gray-background-color &,
    140             .has-background.has-black-background-color & {
    141                 border-color: var(--button--color-background);
    142                 color: var(--button--color-background);
    143 
     92                // Search button always needs black contrast against white form background
    14493                &:hover {
    145                     color: var(--global--color-white);
     94                    color: var(--global--color-dark-gray);
    14695                }
    14796
    14897                .is-dark-theme & {
    149                     border-color: var(--button--color-text);
    150                     color: var(--button--color-text);
     98                    color: var(--global--color-dark-gray);
    15199
    152100                    &:hover {
     101                        background-color: var(--global--color-dark-gray);
    153102                        color: var(--global--color-white);
    154103                    }
    155104                }
    156             }
    157105
    158             .is-dark-theme & {
    159                 border-color: var(--button--color-text);
    160                 color: var(--button--color-text);
    161 
    162                 &:hover {
    163                     border-color: var(--button--color-text);
    164                     background-color: var(--button--color-text);
    165                     color: var(--button--color-background);
     106                &.has-icon {
     107                    padding: 6px calc(0.5 * var(--button--padding-horizontal));
    166108                }
    167109            }

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss

    r49726 r49987  
    118118    .search-submit {
    119119        margin-left: 0;
    120         background-color: transparent;
    121         color: var(--button--color-text-hover);
    122120        margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    123 
    124         &:hover {
    125             background-color: var(--button--color-background);
    126             color: var(--button--color-text);
    127         }
    128121    }
    129122}

  • trunk/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss

    r49726 r49987  
    22
    33.has-black-color[class] {
     4    // Localize CSS-variables to limit relationship scope
     5    [class*="__inner-container"] {
     6        --local--color-primary: var(--global--color-black, #000000);
     7        color: var(--local--color-primary);
     8    }
    49    color: var(--global--color-black);
    510}
    611
    712.has-gray-color[class] {
     13    // Localize CSS-variables to limit relationship scope
     14    [class*="__inner-container"] {
     15        --local--color-primary: var(--global--color-gray, #000000);
     16        color: var(--local--color-primary);
     17    }
    818    color: var(--global--color-gray);
    919}
    1020
    1121.has-dark-gray-color[class] {
     22    // Localize CSS-variables to limit relationship scope
     23    [class*="__inner-container"] {
     24        --local--color-primary: var(--global--color-dark-gray, #000000);
     25        color: var(--local--color-primary);
     26    }
    1227    color: var(--global--color-dark-gray);
    1328}
    1429
    1530.has-green-color[class] {
     31    // Localize CSS-variables to limit relationship scope
     32    [class*="__inner-container"] {
     33        --local--color-primary: var(--global--color-green, #FFFFFF);
     34        color: var(--local--color-primary);
     35    }
    1636    color: var(--global--color-green);
    1737}
    1838
    1939.has-blue-color[class] {
     40    // Localize CSS-variables to limit relationship scope
     41    [class*="__inner-container"] {
     42        --local--color-primary: var(--global--color-blue, #FFFFFF);
     43        color: var(--local--color-primary);
     44    }
    2045    color: var(--global--color-blue);
    2146}
    2247
    2348.has-purple-color[class] {
     49    // Localize CSS-variables to limit relationship scope
     50    [class*="__inner-container"] {
     51        --local--color-primary: var(--global--color-purple, #FFFFFF);
     52        color: var(--local--color-primary);
     53    }
    2454    color: var(--global--color-purple);
    2555}
    2656
    2757.has-red-color[class] {
     58    // Localize CSS-variables to limit relationship scope
     59    [class*="__inner-container"] {
     60        --local--color-primary: var(--global--color-red, #FFFFFF);
     61        color: var(--local--color-primary);
     62    }
    2863    color: var(--global--color-red);
    2964}
    3065
    3166.has-orange-color[class] {
     67    // Localize CSS-variables to limit relationship scope
     68    [class*="__inner-container"] {
     69        --local--color-primary: var(--global--color-orange, #FFFFFF);
     70        color: var(--local--color-primary);
     71    }
    3272    color: var(--global--color-orange);
    3373}
    3474
    3575.has-yellow-color[class] {
     76    // Localize CSS-variables to limit relationship scope
     77    [class*="__inner-container"] {
     78        --local--color-primary: var(--global--color-yellow, #FFFFFF);
     79        color: var(--local--color-primary);
     80    }
    3681    color: var(--global--color-yellow);
    3782}
    3883
    3984.has-white-color[class] {
     85    // Localize CSS-variables to limit relationship scope
     86    [class*="__inner-container"] {
     87        --local--color-primary: var(--global--color-white, #FFFFFF);
     88        color: var(--local--color-primary);
     89    }
    4090    color: var(--global--color-white);
    4191}
    … …  
    57107
    58108.has-black-background-color[class] {
     109    // Localize CSS-variables to limit relationship scope
     110    [class*="__inner-container"] {
     111        --local--color-background: var(--global--color-black, #000000);
     112        background-color: var(--local--color-background);
     113    }
    59114    background-color: var(--global--color-black);
    60115}
    61116
     117.has-dark-gray-background-color[class] {
     118    // Localize CSS-variables to limit relationship scope
     119    [class*="__inner-container"] {
     120        --local--color-background: var(--global--color-dark-gray, #000000);
     121        background-color: var(--local--color-background);
     122    }
     123    background-color: var(--global--color-dark-gray);
     124}
     125
    62126.has-gray-background-color[class] {
     127    // Localize CSS-variables to limit relationship scope
     128    [class*="__inner-container"] {
     129        --local--color-background: var(--global--color-gray, #000000);
     130        background-color: var(--local--color-background);
     131    }
    63132    background-color: var(--global--color-gray);
    64133}
    65134
    66 .has-dark-gray-background-color[class] {
    67     background-color: var(--global--color-dark-gray);
     135.has-light-gray-background-color[class] {
     136    // Localize CSS-variables to limit relationship scope
     137    [class*="__inner-container"] {
     138        --local--color-background: var(--global--color-light-gray, #FFFFFF);
     139        background-color: var(--local--color-background);
     140    }
     141    background-color: var(--global--color-light-gray);
    68142}
    69143
    70144.has-green-background-color[class] {
     145    // Localize CSS-variables to limit relationship scope
     146    [class*="__inner-container"] {
     147        --local--color-background: var(--global--color-green, #FFFFFF);
     148        background-color: var(--local--color-background);
     149    }
    71150    background-color: var(--global--color-green);
    72151}
    73152
    74153.has-blue-background-color[class] {
     154    // Localize CSS-variables to limit relationship scope
     155    [class*="__inner-container"] {
     156        --local--color-background: var(--global--color-blue, #FFFFFF);
     157        background-color: var(--local--color-background);
     158    }
    75159    background-color: var(--global--color-blue);
    76160}
    77161
    78162.has-purple-background-color[class] {
     163    // Localize CSS-variables to limit relationship scope
     164    [class*="__inner-container"] {
     165        --local--color-background: var(--global--color-purple, #FFFFFF);
     166        background-color: var(--local--color-background);
     167    }
    79168    background-color: var(--global--color-purple);
    80169}
    81170
    82171.has-red-background-color[class] {
     172    // Localize CSS-variables to limit relationship scope
     173    [class*="__inner-container"] {
     174        --local--color-background: var(--global--color-red, #FFFFFF);
     175        background-color: var(--local--color-background);
     176    }
    83177    background-color: var(--global--color-red);
    84178}
    85179
    86180.has-orange-background-color[class] {
     181    // Localize CSS-variables to limit relationship scope
     182    [class*="__inner-container"] {
     183        --local--color-background: var(--global--color-orange, #FFFFFF);
     184        background-color: var(--local--color-background);
     185    }
    87186    background-color: var(--global--color-orange);
    88187}
    89188
    90189.has-yellow-background-color[class] {
     190    // Localize CSS-variables to limit relationship scope
     191    [class*="__inner-container"] {
     192        --local--color-background: var(--global--color-yellow, #FFFFFF);
     193        background-color: var(--local--color-background);
     194    }
    91195    background-color: var(--global--color-yellow);
    92196}
    93197
    94198.has-white-background-color[class] {
     199    // Localize CSS-variables to limit relationship scope
     200    [class*="__inner-container"] {
     201        --local--color-background: var(--global--color-white, #FFFFFF);
     202        background-color: var(--local--color-background);
     203    }
    95204    background-color: var(--global--color-white);
    96205}
    97206
    98 :not(.has-text-color) {
     207.has-background:not(.has-text-color) {
    99208
    100209    &.has-black-background-color[class],
    101210    &.has-gray-background-color[class],
    102211    &.has-dark-gray-background-color[class] {
    103         color: var(--global--color-white);
     212        // Localize CSS-variables to limit relationship scope
     213        [class*="__inner-container"] {
     214            --local--color-primary: var(--global--color-background, #FFFFFF);
     215            // Reverse the local foreground color in darkmode
     216            .is-dark-theme & {
     217                --local--color-primary: var(--global--color-primary, #000000);
     218            }
     219            color: var(--local--color-primary, var(--global--color-primary));
     220        }
    104221    }
    105222
    … …  
    111228    &.has-yellow-background-color[class],
    112229    &.has-white-background-color[class] {
    113         color: var(--global--color-dark-gray);
     230        // Localize CSS-variables to limit relationship scope
     231        [class*="__inner-container"] {
     232            --local--color-primary: var(--global--color-primary, #000000);
     233            // Reverse the local foreground color in darkmode
     234            .is-dark-theme & {
     235                --local--color-primary: var(--global--color-background, #FFFFFF);
     236            }
     237            color: var(--local--color-primary, var(--global--color-primary));
     238        }
    114239    }
    115240}

  • trunk/src/wp-content/themes/twentytwentyone/style-rtl.css

    r49914 r49987  
    17081708input[type=submit],
    17091709input[type=reset],
    1710 .wp-block-search__button,
    1711 .wp-block-button .wp-block-button__link {
    1712     line-height: var(--button--line-height);
    1713     color: var(--button--color-text);
     1710.wp-block-search .wp-block-search__button,
     1711.wp-block-button .wp-block-button__link,
     1712.wp-block-file a.wp-block-file__button {
     1713    border: var(--button--border-width) solid transparent;
     1714    border-radius: var(--button--border-radius);
    17141715    cursor: pointer;
     1716    display: block;
    17151717    font-weight: var(--button--font-weight);
    17161718    font-family: var(--button--font-family);
    17171719    font-size: var(--button--font-size);
    1718     background-color: var(--button--color-background);
    1719     border-radius: var(--button--border-radius);
    1720     border: var(--button--border-width) solid var(--button--color-background);
     1720    line-height: var(--button--line-height);
     1721    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    17211722    text-decoration: none;
    1722     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1723}
     1724
     1725.site .button:not(:hover):not(:active):not(.has-text-color),
     1726input[type=submit]:not(:hover):not(:active):not(.has-text-color),
     1727input[type=reset]:not(:hover):not(:active):not(.has-text-color),
     1728.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
     1729.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1730.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     1731    color: var(--global--color-background);
     1732}
     1733
     1734.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
     1735.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
     1736.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
     1737.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
     1738.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1739.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     1740    color: var(--local--color-background, var(--global--color-primary));
     1741}
     1742
     1743.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
     1744.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
     1745.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
     1746.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
     1747.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
     1748.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
     1749    color: var(--global--color-primary);
     1750}
     1751
     1752.site .button:not(:hover):not(:active):not(.has-background),
     1753input[type=submit]:not(:hover):not(:active):not(.has-background),
     1754input[type=reset]:not(:hover):not(:active):not(.has-background),
     1755.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
     1756.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1757.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     1758    background-color: var(--global--color-primary);
     1759}
     1760
     1761.has-background .site .button:not(:hover):not(:active):not(.has-background),
     1762.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
     1763.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
     1764.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
     1765.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1766.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     1767    background-color: var(--local--color-primary, var(--global--color-primary));
     1768}
     1769
     1770.site .button:hover,
     1771.site .button:active,
     1772input[type=submit]:hover,
     1773input[type=submit]:active,
     1774input[type=reset]:hover,
     1775input[type=reset]:active,
     1776.wp-block-search .wp-block-search__button:hover,
     1777.wp-block-search .wp-block-search__button:active,
     1778.wp-block-button .wp-block-button__link:hover,
     1779.wp-block-button .wp-block-button__link:active,
     1780.wp-block-file a.wp-block-file__button:hover,
     1781.wp-block-file a.wp-block-file__button:active {
     1782    background-color: transparent;
     1783    border-color: currentColor;
     1784    color: inherit;
    17231785}
    17241786
    … …  
    17261788input[type=submit]:focus,
    17271789input[type=reset]:focus,
    1728 .wp-block-search__button:focus,
    1729 .wp-block-button .wp-block-button__link:focus {
    1730     background: transparent;
     1790.wp-block-search .wp-block-search__button:focus,
     1791.wp-block-button .wp-block-button__link:focus,
     1792.wp-block-file a.wp-block-file__button:focus {
    17311793    outline-offset: -6px;
    17321794    outline: 2px dotted currentColor;
    1733 }
    1734 
    1735 .is-dark-theme .site .button:focus,
    1736 .is-dark-theme input[type=submit]:focus,
    1737 .is-dark-theme input[type=reset]:focus,
    1738 .is-dark-theme .wp-block-search__button:focus,
    1739 .is-dark-theme .wp-block-button .wp-block-button__link:focus {
    1740     color: var(--button--color-background);
    1741 }
    1742 
    1743 .site .button:focus:not(.has-background),
    1744 input[type=submit]:focus:not(.has-background),
    1745 input[type=reset]:focus:not(.has-background),
    1746 .wp-block-search__button:focus:not(.has-background),
    1747 .wp-block-button .wp-block-button__link:focus:not(.has-background) {
    1748     color: var(--button--color-text-hover);
    17491795}
    17501796
    … …  
    17521798input[type=submit]:disabled,
    17531799input[type=reset]:disabled,
    1754 .wp-block-search__button:disabled,
    1755 .wp-block-button .wp-block-button__link:disabled {
     1800.wp-block-search .wp-block-search__button:disabled,
     1801.wp-block-button .wp-block-button__link:disabled,
     1802.wp-block-file a.wp-block-file__button:disabled {
    17561803    background-color: var(--global--color-white-50);
    17571804    border-color: var(--global--color-white-50);
    … …  
    17591806}
    17601807
    1761 .site .button:active,
    1762 input[type=submit]:active,
    1763 input[type=reset]:active,
    1764 .wp-block-search .wp-block-search__button:active,
    1765 .wp-block-file .wp-block-file__button:active {
    1766     color: var(--button--color-text-active);
    1767     background-color: var(--button--color-background-active);
    1768 }
    1769 
    1770 .site .button:hover,
    1771 input[type=submit]:hover,
    1772 input[type=reset]:hover,
    1773 .wp-block-search .wp-block-search__button:hover,
    1774 .wp-block-file .wp-block-file__button:hover {
    1775     color: var(--button--color-text-hover);
    1776     background: transparent;
    1777 }
    1778 
    17791808/**
    17801809 * Block Options
    17811810 */
     1811.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1812    color: var(--global--color-background);
     1813}
     1814
     1815.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1816    color: var(--local--color-background, var(--global--color-background));
     1817}
     1818
     1819.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     1820    color: var(--global--color-primary);
     1821}
     1822
     1823.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1824    background-color: var(--global--color-primary);
     1825}
     1826
     1827.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1828    background-color: var(--local--color-primary, var(--global--color-primary));
     1829}
     1830
     1831.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    17821832.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    1783     color: var(--button--color-text-active) !important;
    1784     background: transparent !important;
    1785     border-color: var(--button--color-background);
    1786 }
    1787 
    1788 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    1789     color: var(--button--color-text-hover) !important;
    1790     background: transparent !important;
    1791     border-color: var(--button--color-background);
    1792 }
    1793 
    1794 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
    1795     color: var(--button--color-text) !important;
    1796     background: var(--button--color-background) !important;
    1797 }
    1798 
    1799 .wp-block-button.is-style-outline .wp-block-button__link {
    1800     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    1801 }
    1802 
    1803 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
    1804     background: transparent;
    1805 }
    1806 
    1807 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    1808     background: transparent;
    1809     color: var(--button--color-background);
    1810     border-color: var(--button--color-background);
    1811 }
    1812 
    1813 .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    1814     color: currentColor;
    1815 }
    1816 
    1817 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
    1818 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    1819 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    1820     color: var(--global--color-white);
    1821 }
    1822 
    1823 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
    1824     color: var(--global--color-dark-gray);
    1825 }
    1826 
    1827 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
    1828 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
    1829 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
    1830     color: var(--global--color-white);
    1831 }
    1832 
    1833 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
    1834 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
     1833    border-color: currentColor !important;
     1834    background-color: transparent !important;
     1835    color: inherit !important;
     1836}
     1837
     1838.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1839.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1840.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
    18351841    border-color: currentColor;
    18361842}
    18371843
    1838 .wp-block-button.is-style-outline .wp-block-button__link:active,
    1839 .wp-block-button.is-style-outline .wp-block-button__link:hover {
    1840     color: var(--button--color-text) !important;
    1841     background: var(--button--color-background) !important;
    1842     border-color: var(--button--color-background);
    1843 }
    1844 
    1845 .wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
    1846 .wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
    1847     border-color: var(--button--color-background);
    1848 }
    1849 
    1850 .wp-block-button.is-style-outline .wp-block-button__link:focus {
    1851     color: var(--button--color-background) !important;
    1852     background: transparent !important;
     1844.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1845    color: var(--global--color-primary);
     1846}
     1847
     1848.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1849    color: var(--local--color-primary, var(--global--color-primary));
     1850}
     1851
     1852.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
     1853    color: inherit;
     1854}
     1855
     1856.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1857    background-color: transparent;
     1858}
     1859
     1860.wp-block-button.is-style-outline .wp-block-button__link:hover,
     1861.wp-block-button.is-style-outline .wp-block-button__link:active {
     1862    border-color: transparent !important;
     1863    background-color: var(--global--color-primary) !important;
     1864    color: var(--global--color-background) !important;
     1865}
     1866
     1867.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
     1868.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
     1869    background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     1870    color: var(--local--color-background, var(--global--color-background)) !important;
     1871}
     1872
     1873.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
     1874.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
     1875    color: var(--local--color-background, var(--global--color-background)) !important;
    18531876}
    18541877
    … …  
    21192142.wp-block-file a.wp-block-file__button:focus,
    21202143.wp-block-file a.wp-block-file__button:hover {
    2121     color: var(--button--color-text-hover);
    21222144    opacity: inherit;
    21232145}
    21242146
    2125 .wp-block-file a.wp-block-file__button:visited {
    2126     color: var(--button--color-text);
    2127 }
    2128 
    2129 .wp-block-file a.wp-block-file__button:visited:hover {
    2130     color: var(--button--color-text-hover);
    2131 }
    2132 
    2133 .wp-block-file .wp-block-file__button {
    2134     line-height: var(--button--line-height);
    2135     color: var(--button--color-text);
    2136     cursor: pointer;
    2137     font-weight: var(--button--font-weight);
    2138     font-family: var(--button--font-family);
    2139     font-size: var(--button--font-size);
    2140     background-color: var(--button--color-background);
    2141     border-radius: var(--button--border-radius);
    2142     border: var(--button--border-width) solid var(--button--color-background);
    2143     text-decoration: none;
    2144     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     2147.wp-block-file a.wp-block-file__button {
    21452148    display: inline-block;
    2146 }
    2147 
    2148 .wp-block-file .wp-block-file__button:focus {
    2149     background: transparent;
    2150     outline-offset: -6px;
    2151     outline: 2px dotted currentColor;
    2152 }
    2153 
    2154 .is-dark-theme .wp-block-file .wp-block-file__button:focus {
    2155     color: var(--button--color-background);
    2156 }
    2157 
    2158 .wp-block-file .wp-block-file__button:focus:not(.has-background) {
    2159     color: var(--button--color-text-hover);
    2160 }
    2161 
    2162 .wp-block-file .wp-block-file__button:disabled {
    2163     background-color: var(--global--color-white-50);
    2164     border-color: var(--global--color-white-50);
    2165     color: var(--button--color-text-active);
    21662149}
    21672150
    … …  
    32673250}
    32683251
    3269 .has-background .wp-block-search .wp-block-search__input,
    3270 [class*=background-color] .wp-block-search .wp-block-search__input,
    3271 [style*=background-color] .wp-block-search .wp-block-search__input,
    3272 .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    3273     border-color: currentColor;
    3274 }
    3275 
    3276 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
    3277 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    3278 .has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    3279     border-color: var(--global--color-white);
     3252.has-background .wp-block-search .wp-block-search__input {
     3253    border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    32803254}
    32813255
    32823256.wp-block-search button.wp-block-search__button {
    32833257    margin-right: 0;
    3284     background-color: transparent;
    3285     color: var(--button--color-text-hover);
    32863258    line-height: 1;
    3287 }
    3288 
    3289 .wp-block-search button.wp-block-search__button:hover {
    3290     background-color: var(--button--color-background);
    3291     color: var(--button--color-text);
    32923259}
    32933260
    … …  
    33023269}
    33033270
    3304 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
    3305 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
    3306 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
    3307     color: var(--global--color-white);
    3308     border-color: currentColor;
    3309 }
    3310 
    3311 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3312 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3313 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    3314     background-color: var(--button--color-background);
    3315     border-color: var(--global--color-white);
    3316     color: var(--global--color-white);
    3317 }
    3318 
    3319 .is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3320 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3321 .is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    3322     color: var(--button--color-text);
    3323 }
    3324 
    3325 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
    3326 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
    3327 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
    3328 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
    3329 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
    3330 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
    3331 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
    3332     border-color: currentColor;
    3333     color: currentColor;
    3334 }
    3335 
    3336 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
    3337 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
    3338 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
    3339 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
    3340 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
    3341 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    3342 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    3343     background-color: var(--form--border-color);
    3344     border-color: var(--form--border-color);
    3345     color: var(--global--color-white);
    3346 }
    3347 
    3348 .is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
    3349 .is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
    3350 .is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
    3351 .is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
    3352 .is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
    3353 .is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    3354 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    3355     border-color: var(--button--color-text);
    3356     background-color: var(--button--color-text);
    3357     color: var(--button--color-background);
     3271.has-background .wp-block-search button.wp-block-search__button:hover,
     3272.has-background .wp-block-search button.wp-block-search__button:active {
     3273    background-color: var(--local--color-background, var(--global--color-background)) !important;
     3274    color: var(--local--color-primary, var(--global--color-primary)) !important;
     3275}
     3276
     3277.has-text-color .wp-block-search button.wp-block-search__button:hover,
     3278.has-text-color .wp-block-search button.wp-block-search__button:active {
     3279    color: var(--local--color-primary, var(--global--color-primary)) !important;
    33583280}
    33593281
    … …  
    33623284    border: var(--form--border-width) solid var(--form--border-color);
    33633285    border-radius: var(--form--border-radius);
     3286    padding: var(--form--border-width);
     3287}
     3288
     3289.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     3290    border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    33643291}
    33653292
    33663293.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     3294    margin-right: 0;
    33673295    margin-left: 0;
     3296    padding-right: var(--form--spacing-unit);
    33683297}
    33693298
    33703299.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3300    color: var(--form--color-text);
     3301    outline-offset: -2px;
    33713302    outline: 2px dotted var(--form--border-color);
    3372     outline-offset: -5px;
    3373 }
    3374 
    3375 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
    3376     outline-color: currentColor;
    3377 }
    3378 
    3379 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
     3303}
     3304
     3305.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
    33803306    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    33813307}
    33823308
    3383 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3384 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3385 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3386     border-color: var(--button--color-background);
    3387     color: var(--button--color-background);
    3388 }
    3389 
    3390 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3391 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3392 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
     3309.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     3310    color: var(--global--color-dark-gray);
     3311}
     3312
     3313.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
     3314    color: var(--global--color-dark-gray);
     3315}
     3316
     3317.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     3318    background-color: var(--global--color-dark-gray);
    33933319    color: var(--global--color-white);
    33943320}
    33953321
    3396 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3397 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3398 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3399     border-color: var(--button--color-text);
    3400     color: var(--button--color-text);
    3401 }
    3402 
    3403 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3404 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3405 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    3406     color: var(--global--color-white);
    3407 }
    3408 
    3409 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3410     border-color: var(--button--color-text);
    3411     color: var(--button--color-text);
    3412 }
    3413 
    3414 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    3415     border-color: var(--button--color-text);
    3416     background-color: var(--button--color-text);
    3417     color: var(--button--color-background);
     3322.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
     3323    padding: 6px calc(0.5 * var(--button--padding-horizontal));
    34183324}
    34193325
    … …  
    55635469.widget_search > .search-form .search-submit {
    55645470    margin-right: 0;
    5565     background-color: transparent;
    5566     color: var(--button--color-text-hover);
    55675471    margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    5568 }
    5569 
    5570 .widget_search > .search-form .search-submit:hover {
    5571     background-color: var(--button--color-background);
    5572     color: var(--button--color-text);
    55735472}
    55745473
    … …  
    56315530}
    56325531
     5532.has-black-color[class] [class*=__inner-container] {
     5533    --local--color-primary: var(--global--color-black, #000);
     5534    color: var(--local--color-primary);
     5535}
     5536
    56335537.has-gray-color[class] {
    56345538    color: var(--global--color-gray);
    56355539}
    56365540
     5541.has-gray-color[class] [class*=__inner-container] {
     5542    --local--color-primary: var(--global--color-gray, #000);
     5543    color: var(--local--color-primary);
     5544}
     5545
    56375546.has-dark-gray-color[class] {
    56385547    color: var(--global--color-dark-gray);
    56395548}
    56405549
     5550.has-dark-gray-color[class] [class*=__inner-container] {
     5551    --local--color-primary: var(--global--color-dark-gray, #000);
     5552    color: var(--local--color-primary);
     5553}
     5554
    56415555.has-green-color[class] {
    56425556    color: var(--global--color-green);
    56435557}
    56445558
     5559.has-green-color[class] [class*=__inner-container] {
     5560    --local--color-primary: var(--global--color-green, #fff);
     5561    color: var(--local--color-primary);
     5562}
     5563
    56455564.has-blue-color[class] {
    56465565    color: var(--global--color-blue);
    56475566}
    56485567
     5568.has-blue-color[class] [class*=__inner-container] {
     5569    --local--color-primary: var(--global--color-blue, #fff);
     5570    color: var(--local--color-primary);
     5571}
     5572
    56495573.has-purple-color[class] {
    56505574    color: var(--global--color-purple);
    56515575}
    56525576
     5577.has-purple-color[class] [class*=__inner-container] {
     5578    --local--color-primary: var(--global--color-purple, #fff);
     5579    color: var(--local--color-primary);
     5580}
     5581
    56535582.has-red-color[class] {
    56545583    color: var(--global--color-red);
    56555584}
    56565585
     5586.has-red-color[class] [class*=__inner-container] {
     5587    --local--color-primary: var(--global--color-red, #fff);
     5588    color: var(--local--color-primary);
     5589}
     5590
    56575591.has-orange-color[class] {
    56585592    color: var(--global--color-orange);
    56595593}
    56605594
     5595.has-orange-color[class] [class*=__inner-container] {
     5596    --local--color-primary: var(--global--color-orange, #fff);
     5597    color: var(--local--color-primary);
     5598}
     5599
    56615600.has-yellow-color[class] {
    56625601    color: var(--global--color-yellow);
    56635602}
    56645603
     5604.has-yellow-color[class] [class*=__inner-container] {
     5605    --local--color-primary: var(--global--color-yellow, #fff);
     5606    color: var(--local--color-primary);
     5607}
     5608
    56655609.has-white-color[class] {
    56665610    color: var(--global--color-white);
     5611}
     5612
     5613.has-white-color[class] [class*=__inner-container] {
     5614    --local--color-primary: var(--global--color-white, #fff);
     5615    color: var(--local--color-primary);
    56675616}
    56685617
    … …  
    56825631}
    56835632
     5633.has-black-background-color[class] [class*=__inner-container] {
     5634    --local--color-background: var(--global--color-black, #000);
     5635    background-color: var(--local--color-background);
     5636}
     5637
     5638.has-dark-gray-background-color[class] {
     5639    background-color: var(--global--color-dark-gray);
     5640}
     5641
     5642.has-dark-gray-background-color[class] [class*=__inner-container] {
     5643    --local--color-background: var(--global--color-dark-gray, #000);
     5644    background-color: var(--local--color-background);
     5645}
     5646
    56845647.has-gray-background-color[class] {
    56855648    background-color: var(--global--color-gray);
    56865649}
    56875650
    5688 .has-dark-gray-background-color[class] {
    5689     background-color: var(--global--color-dark-gray);
     5651.has-gray-background-color[class] [class*=__inner-container] {
     5652    --local--color-background: var(--global--color-gray, #000);
     5653    background-color: var(--local--color-background);
     5654}
     5655
     5656.has-light-gray-background-color[class] {
     5657    background-color: var(--global--color-light-gray);
     5658}
     5659
     5660.has-light-gray-background-color[class] [class*=__inner-container] {
     5661    --local--color-background: var(--global--color-light-gray, #fff);
     5662    background-color: var(--local--color-background);
    56905663}
    56915664
    … …  
    56945667}
    56955668
     5669.has-green-background-color[class] [class*=__inner-container] {
     5670    --local--color-background: var(--global--color-green, #fff);
     5671    background-color: var(--local--color-background);
     5672}
     5673
    56965674.has-blue-background-color[class] {
    56975675    background-color: var(--global--color-blue);
    56985676}
    56995677
     5678.has-blue-background-color[class] [class*=__inner-container] {
     5679    --local--color-background: var(--global--color-blue, #fff);
     5680    background-color: var(--local--color-background);
     5681}
     5682
    57005683.has-purple-background-color[class] {
    57015684    background-color: var(--global--color-purple);
    57025685}
    57035686
     5687.has-purple-background-color[class] [class*=__inner-container] {
     5688    --local--color-background: var(--global--color-purple, #fff);
     5689    background-color: var(--local--color-background);
     5690}
     5691
    57045692.has-red-background-color[class] {
    57055693    background-color: var(--global--color-red);
    57065694}
    57075695
     5696.has-red-background-color[class] [class*=__inner-container] {
     5697    --local--color-background: var(--global--color-red, #fff);
     5698    background-color: var(--local--color-background);
     5699}
     5700
    57085701.has-orange-background-color[class] {
    57095702    background-color: var(--global--color-orange);
    57105703}
    57115704
     5705.has-orange-background-color[class] [class*=__inner-container] {
     5706    --local--color-background: var(--global--color-orange, #fff);
     5707    background-color: var(--local--color-background);
     5708}
     5709
    57125710.has-yellow-background-color[class] {
    57135711    background-color: var(--global--color-yellow);
    57145712}
    57155713
     5714.has-yellow-background-color[class] [class*=__inner-container] {
     5715    --local--color-background: var(--global--color-yellow, #fff);
     5716    background-color: var(--local--color-background);
     5717}
     5718
    57165719.has-white-background-color[class] {
    57175720    background-color: var(--global--color-white);
    57185721}
    57195722
    5720 :not(.has-text-color).has-black-background-color[class],
    5721 :not(.has-text-color).has-gray-background-color[class],
    5722 :not(.has-text-color).has-dark-gray-background-color[class] {
    5723     color: var(--global--color-white);
    5724 }
    5725 
    5726 :not(.has-text-color).has-green-background-color[class],
    5727 :not(.has-text-color).has-blue-background-color[class],
    5728 :not(.has-text-color).has-purple-background-color[class],
    5729 :not(.has-text-color).has-red-background-color[class],
    5730 :not(.has-text-color).has-orange-background-color[class],
    5731 :not(.has-text-color).has-yellow-background-color[class],
    5732 :not(.has-text-color).has-white-background-color[class] {
    5733     color: var(--global--color-dark-gray);
     5723.has-white-background-color[class] [class*=__inner-container] {
     5724    --local--color-background: var(--global--color-white, #fff);
     5725    background-color: var(--local--color-background);
     5726}
     5727
     5728.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     5729.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     5730.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     5731    --local--color-primary: var(--global--color-background, #fff);
     5732    color: var(--local--color-primary, var(--global--color-primary));
     5733}
     5734
     5735.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     5736.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     5737.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     5738    --local--color-primary: var(--global--color-primary, #000);
     5739}
     5740
     5741.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     5742.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     5743.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     5744.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     5745.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     5746.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     5747.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     5748    --local--color-primary: var(--global--color-primary, #000);
     5749    color: var(--local--color-primary, var(--global--color-primary));
     5750}
     5751
     5752.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     5753.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     5754.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     5755.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     5756.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     5757.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     5758.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     5759    --local--color-primary: var(--global--color-background, #fff);
    57345760}
    57355761

  • trunk/src/wp-content/themes/twentytwentyone/style.css

    r49914 r49987  
    17181718input[type=submit],
    17191719input[type=reset],
    1720 .wp-block-search__button,
    1721 .wp-block-button .wp-block-button__link {
    1722     line-height: var(--button--line-height);
    1723     color: var(--button--color-text);
     1720.wp-block-search .wp-block-search__button,
     1721.wp-block-button .wp-block-button__link,
     1722.wp-block-file a.wp-block-file__button {
     1723    border: var(--button--border-width) solid transparent;
     1724    border-radius: var(--button--border-radius);
    17241725    cursor: pointer;
     1726    display: block;
    17251727    font-weight: var(--button--font-weight);
    17261728    font-family: var(--button--font-family);
    17271729    font-size: var(--button--font-size);
    1728     background-color: var(--button--color-background);
    1729     border-radius: var(--button--border-radius);
    1730     border: var(--button--border-width) solid var(--button--color-background);
     1730    line-height: var(--button--line-height);
     1731    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    17311732    text-decoration: none;
    1732     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     1733}
     1734
     1735.site .button:not(:hover):not(:active):not(.has-text-color),
     1736input[type=submit]:not(:hover):not(:active):not(.has-text-color),
     1737input[type=reset]:not(:hover):not(:active):not(.has-text-color),
     1738.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
     1739.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1740.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     1741    color: var(--global--color-background);
     1742}
     1743
     1744.has-background .site .button:not(:hover):not(:active):not(.has-text-color),
     1745.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color),
     1746.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color),
     1747.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color),
     1748.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1749.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color) {
     1750    color: var(--local--color-background, var(--global--color-primary));
     1751}
     1752
     1753.has-background .site .button:not(:hover):not(:active):not(.has-text-color).has-background,
     1754.has-background input[type=submit]:not(:hover):not(:active):not(.has-text-color).has-background,
     1755.has-background input[type=reset]:not(:hover):not(:active):not(.has-text-color).has-background,
     1756.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-text-color).has-background,
     1757.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background,
     1758.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-text-color).has-background {
     1759    color: var(--global--color-primary);
     1760}
     1761
     1762.site .button:not(:hover):not(:active):not(.has-background),
     1763input[type=submit]:not(:hover):not(:active):not(.has-background),
     1764input[type=reset]:not(:hover):not(:active):not(.has-background),
     1765.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
     1766.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1767.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     1768    background-color: var(--global--color-primary);
     1769}
     1770
     1771.has-background .site .button:not(:hover):not(:active):not(.has-background),
     1772.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
     1773.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
     1774.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
     1775.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1776.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
     1777    background-color: var(--local--color-primary, var(--global--color-primary));
     1778}
     1779
     1780.site .button:hover,
     1781.site .button:active,
     1782input[type=submit]:hover,
     1783input[type=submit]:active,
     1784input[type=reset]:hover,
     1785input[type=reset]:active,
     1786.wp-block-search .wp-block-search__button:hover,
     1787.wp-block-search .wp-block-search__button:active,
     1788.wp-block-button .wp-block-button__link:hover,
     1789.wp-block-button .wp-block-button__link:active,
     1790.wp-block-file a.wp-block-file__button:hover,
     1791.wp-block-file a.wp-block-file__button:active {
     1792    background-color: transparent;
     1793    border-color: currentColor;
     1794    color: inherit;
    17331795}
    17341796
    … …  
    17361798input[type=submit]:focus,
    17371799input[type=reset]:focus,
    1738 .wp-block-search__button:focus,
    1739 .wp-block-button .wp-block-button__link:focus {
    1740     background: transparent;
     1800.wp-block-search .wp-block-search__button:focus,
     1801.wp-block-button .wp-block-button__link:focus,
     1802.wp-block-file a.wp-block-file__button:focus {
    17411803    outline-offset: -6px;
    17421804    outline: 2px dotted currentColor;
    1743 }
    1744 
    1745 .is-dark-theme .site .button:focus,
    1746 .is-dark-theme input[type=submit]:focus,
    1747 .is-dark-theme input[type=reset]:focus,
    1748 .is-dark-theme .wp-block-search__button:focus,
    1749 .is-dark-theme .wp-block-button .wp-block-button__link:focus {
    1750     color: var(--button--color-background);
    1751 }
    1752 
    1753 .site .button:focus:not(.has-background),
    1754 input[type=submit]:focus:not(.has-background),
    1755 input[type=reset]:focus:not(.has-background),
    1756 .wp-block-search__button:focus:not(.has-background),
    1757 .wp-block-button .wp-block-button__link:focus:not(.has-background) {
    1758     color: var(--button--color-text-hover);
    17591805}
    17601806
    … …  
    17621808input[type=submit]:disabled,
    17631809input[type=reset]:disabled,
    1764 .wp-block-search__button:disabled,
    1765 .wp-block-button .wp-block-button__link:disabled {
     1810.wp-block-search .wp-block-search__button:disabled,
     1811.wp-block-button .wp-block-button__link:disabled,
     1812.wp-block-file a.wp-block-file__button:disabled {
    17661813    background-color: var(--global--color-white-50);
    17671814    border-color: var(--global--color-white-50);
    … …  
    17691816}
    17701817
    1771 .site .button:active,
    1772 input[type=submit]:active,
    1773 input[type=reset]:active,
    1774 .wp-block-search .wp-block-search__button:active,
    1775 .wp-block-file .wp-block-file__button:active {
    1776     color: var(--button--color-text-active);
    1777     background-color: var(--button--color-background-active);
    1778 }
    1779 
    1780 .site .button:hover,
    1781 input[type=submit]:hover,
    1782 input[type=reset]:hover,
    1783 .wp-block-search .wp-block-search__button:hover,
    1784 .wp-block-file .wp-block-file__button:hover {
    1785     color: var(--button--color-text-hover);
    1786     background: transparent;
    1787 }
    1788 
    17891818/**
    17901819 * Block Options
    17911820 */
     1821.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1822    color: var(--global--color-background);
     1823}
     1824
     1825.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1826    color: var(--local--color-background, var(--global--color-background));
     1827}
     1828
     1829.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-text-color).has-background {
     1830    color: var(--global--color-primary);
     1831}
     1832
     1833.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1834    background-color: var(--global--color-primary);
     1835}
     1836
     1837.has-background .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1838    background-color: var(--local--color-primary, var(--global--color-primary));
     1839}
     1840
     1841.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
    17921842.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
    1793     color: var(--button--color-text-active) !important;
    1794     background: transparent !important;
    1795     border-color: var(--button--color-background);
    1796 }
    1797 
    1798 .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    1799     color: var(--button--color-text-hover) !important;
    1800     background: transparent !important;
    1801     border-color: var(--button--color-background);
    1802 }
    1803 
    1804 .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus {
    1805     color: var(--button--color-text) !important;
    1806     background: var(--button--color-background) !important;
    1807 }
    1808 
    1809 .wp-block-button.is-style-outline .wp-block-button__link {
    1810     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    1811 }
    1812 
    1813 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
    1814     background: transparent;
    1815 }
    1816 
    1817 .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
    1818     background: transparent;
    1819     color: var(--button--color-background);
    1820     border-color: var(--button--color-background);
    1821 }
    1822 
    1823 .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) {
    1824     color: currentColor;
    1825 }
    1826 
    1827 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color),
    1828 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color),
    1829 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) {
    1830     color: var(--global--color-white);
    1831 }
    1832 
    1833 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background {
    1834     color: var(--global--color-dark-gray);
    1835 }
    1836 
    1837 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color,
    1838 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color,
    1839 .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color {
    1840     color: var(--global--color-white);
    1841 }
    1842 
    1843 .wp-block-button.is-style-outline .wp-block-button__link.has-text-color,
    1844 .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color {
     1843    border-color: currentColor !important;
     1844    background-color: transparent !important;
     1845    color: inherit !important;
     1846}
     1847
     1848.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color),
     1849.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background),
     1850.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background {
    18451851    border-color: currentColor;
    18461852}
    18471853
    1848 .wp-block-button.is-style-outline .wp-block-button__link:active,
    1849 .wp-block-button.is-style-outline .wp-block-button__link:hover {
    1850     color: var(--button--color-text) !important;
    1851     background: var(--button--color-background) !important;
    1852     border-color: var(--button--color-background);
    1853 }
    1854 
    1855 .wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color,
    1856 .wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color {
    1857     border-color: var(--button--color-background);
    1858 }
    1859 
    1860 .wp-block-button.is-style-outline .wp-block-button__link:focus {
    1861     color: var(--button--color-background) !important;
    1862     background: transparent !important;
     1854.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1855    color: var(--global--color-primary);
     1856}
     1857
     1858.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-text-color) {
     1859    color: var(--local--color-primary, var(--global--color-primary));
     1860}
     1861
     1862.has-background .wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active).has-background:not(.has-text-color) {
     1863    color: inherit;
     1864}
     1865
     1866.wp-block-button.is-style-outline .wp-block-button__link:not(:hover):not(:active):not(.has-background) {
     1867    background-color: transparent;
     1868}
     1869
     1870.wp-block-button.is-style-outline .wp-block-button__link:hover,
     1871.wp-block-button.is-style-outline .wp-block-button__link:active {
     1872    border-color: transparent !important;
     1873    background-color: var(--global--color-primary) !important;
     1874    color: var(--global--color-background) !important;
     1875}
     1876
     1877.has-background .wp-block-button.is-style-outline .wp-block-button__link:hover,
     1878.has-background .wp-block-button.is-style-outline .wp-block-button__link:active {
     1879    background-color: var(--local--color-primary, var(--global--color-primary)) !important;
     1880    color: var(--local--color-background, var(--global--color-background)) !important;
     1881}
     1882
     1883.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
     1884.has-text-color .wp-block-button.is-style-outline .wp-block-button__link:active {
     1885    color: var(--local--color-background, var(--global--color-background)) !important;
    18631886}
    18641887
    … …  
    21292152.wp-block-file a.wp-block-file__button:focus,
    21302153.wp-block-file a.wp-block-file__button:hover {
    2131     color: var(--button--color-text-hover);
    21322154    opacity: inherit;
    21332155}
    21342156
    2135 .wp-block-file a.wp-block-file__button:visited {
    2136     color: var(--button--color-text);
    2137 }
    2138 
    2139 .wp-block-file a.wp-block-file__button:visited:hover {
    2140     color: var(--button--color-text-hover);
    2141 }
    2142 
    2143 .wp-block-file .wp-block-file__button {
    2144     line-height: var(--button--line-height);
    2145     color: var(--button--color-text);
    2146     cursor: pointer;
    2147     font-weight: var(--button--font-weight);
    2148     font-family: var(--button--font-family);
    2149     font-size: var(--button--font-size);
    2150     background-color: var(--button--color-background);
    2151     border-radius: var(--button--border-radius);
    2152     border: var(--button--border-width) solid var(--button--color-background);
    2153     text-decoration: none;
    2154     padding: var(--button--padding-vertical) var(--button--padding-horizontal);
     2157.wp-block-file a.wp-block-file__button {
    21552158    display: inline-block;
    2156 }
    2157 
    2158 .wp-block-file .wp-block-file__button:focus {
    2159     background: transparent;
    2160     outline-offset: -6px;
    2161     outline: 2px dotted currentColor;
    2162 }
    2163 
    2164 .is-dark-theme .wp-block-file .wp-block-file__button:focus {
    2165     color: var(--button--color-background);
    2166 }
    2167 
    2168 .wp-block-file .wp-block-file__button:focus:not(.has-background) {
    2169     color: var(--button--color-text-hover);
    2170 }
    2171 
    2172 .wp-block-file .wp-block-file__button:disabled {
    2173     background-color: var(--global--color-white-50);
    2174     border-color: var(--global--color-white-50);
    2175     color: var(--button--color-text-active);
    21762159}
    21772160
    … …  
    32773260}
    32783261
    3279 .has-background .wp-block-search .wp-block-search__input,
    3280 [class*=background-color] .wp-block-search .wp-block-search__input,
    3281 [style*=background-color] .wp-block-search .wp-block-search__input,
    3282 .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input {
    3283     border-color: currentColor;
    3284 }
    3285 
    3286 .has-background.has-gray-background-color .wp-block-search .wp-block-search__input,
    3287 .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input,
    3288 .has-background.has-black-background-color .wp-block-search .wp-block-search__input {
    3289     border-color: var(--global--color-white);
     3262.has-background .wp-block-search .wp-block-search__input {
     3263    border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    32903264}
    32913265
    32923266.wp-block-search button.wp-block-search__button {
    32933267    margin-left: 0;
    3294     background-color: transparent;
    3295     color: var(--button--color-text-hover);
    32963268    line-height: 1;
    3297 }
    3298 
    3299 .wp-block-search button.wp-block-search__button:hover {
    3300     background-color: var(--button--color-background);
    3301     color: var(--button--color-text);
    33023269}
    33033270
    … …  
    33123279}
    33133280
    3314 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button,
    3315 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button,
    3316 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button {
    3317     color: var(--global--color-white);
    3318     border-color: currentColor;
    3319 }
    3320 
    3321 .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3322 .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3323 .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    3324     background-color: var(--button--color-background);
    3325     border-color: var(--global--color-white);
    3326     color: var(--global--color-white);
    3327 }
    3328 
    3329 .is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3330 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover,
    3331 .is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover {
    3332     color: var(--button--color-text);
    3333 }
    3334 
    3335 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button,
    3336 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button,
    3337 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button,
    3338 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button,
    3339 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button,
    3340 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button,
    3341 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button {
    3342     border-color: currentColor;
    3343     color: currentColor;
    3344 }
    3345 
    3346 .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
    3347 .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
    3348 .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
    3349 .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
    3350 .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
    3351 .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    3352 .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    3353     background-color: var(--form--border-color);
    3354     border-color: var(--form--border-color);
    3355     color: var(--global--color-white);
    3356 }
    3357 
    3358 .is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover,
    3359 .is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover,
    3360 .is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover,
    3361 .is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover,
    3362 .is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover,
    3363 .is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover,
    3364 .is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover {
    3365     border-color: var(--button--color-text);
    3366     background-color: var(--button--color-text);
    3367     color: var(--button--color-background);
     3281.has-background .wp-block-search button.wp-block-search__button:hover,
     3282.has-background .wp-block-search button.wp-block-search__button:active {
     3283    background-color: var(--local--color-background, var(--global--color-background)) !important;
     3284    color: var(--local--color-primary, var(--global--color-primary)) !important;
     3285}
     3286
     3287.has-text-color .wp-block-search button.wp-block-search__button:hover,
     3288.has-text-color .wp-block-search button.wp-block-search__button:active {
     3289    color: var(--local--color-primary, var(--global--color-primary)) !important;
    33683290}
    33693291
    … …  
    33723294    border: var(--form--border-width) solid var(--form--border-color);
    33733295    border-radius: var(--form--border-radius);
     3296    padding: var(--form--border-width);
     3297}
     3298
     3299.has-background .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
     3300    border-color: var(--local--color-primary, var(--global--color-primary)) !important;
    33743301}
    33753302
    33763303.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
     3304    margin-left: 0;
    33773305    margin-right: 0;
     3306    padding-left: var(--form--spacing-unit);
    33783307}
    33793308
    33803309.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
     3310    color: var(--form--color-text);
     3311    outline-offset: -2px;
    33813312    outline: 2px dotted var(--form--border-color);
    3382     outline-offset: -5px;
    3383 }
    3384 
    3385 .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus {
    3386     outline-color: currentColor;
    3387 }
    3388 
    3389 .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button {
     3313}
     3314
     3315.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
    33903316    padding: var(--button--padding-vertical) var(--button--padding-horizontal);
    33913317}
    33923318
    3393 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3394 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3395 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3396     border-color: var(--button--color-background);
    3397     color: var(--button--color-background);
    3398 }
    3399 
    3400 .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3401 .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3402 .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
     3319.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     3320    color: var(--global--color-dark-gray);
     3321}
     3322
     3323.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button {
     3324    color: var(--global--color-dark-gray);
     3325}
     3326
     3327.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button:hover {
     3328    background-color: var(--global--color-dark-gray);
    34033329    color: var(--global--color-white);
    34043330}
    34053331
    3406 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3407 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button,
    3408 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3409     border-color: var(--button--color-text);
    3410     color: var(--button--color-text);
    3411 }
    3412 
    3413 .is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3414 .is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover,
    3415 .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    3416     color: var(--global--color-white);
    3417 }
    3418 
    3419 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button {
    3420     border-color: var(--button--color-text);
    3421     color: var(--button--color-text);
    3422 }
    3423 
    3424 .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover {
    3425     border-color: var(--button--color-text);
    3426     background-color: var(--button--color-text);
    3427     color: var(--button--color-background);
     3332.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper button.wp-block-search__button.has-icon {
     3333    padding: 6px calc(0.5 * var(--button--padding-horizontal));
    34283334}
    34293335
    … …  
    55995505.widget_search > .search-form .search-submit {
    56005506    margin-left: 0;
    5601     background-color: transparent;
    5602     color: var(--button--color-text-hover);
    56035507    margin-bottom: calc(0.5 * var(--global--spacing-vertical));
    5604 }
    5605 
    5606 .widget_search > .search-form .search-submit:hover {
    5607     background-color: var(--button--color-background);
    5608     color: var(--button--color-text);
    56095508}
    56105509
    … …  
    56675566}
    56685567
     5568.has-black-color[class] [class*=__inner-container] {
     5569    --local--color-primary: var(--global--color-black, #000);
     5570    color: var(--local--color-primary);
     5571}
     5572
    56695573.has-gray-color[class] {
    56705574    color: var(--global--color-gray);
    56715575}
    56725576
     5577.has-gray-color[class] [class*=__inner-container] {
     5578    --local--color-primary: var(--global--color-gray, #000);
     5579    color: var(--local--color-primary);
     5580}
     5581
    56735582.has-dark-gray-color[class] {
    56745583    color: var(--global--color-dark-gray);
    56755584}
    56765585
     5586.has-dark-gray-color[class] [class*=__inner-container] {
     5587    --local--color-primary: var(--global--color-dark-gray, #000);
     5588    color: var(--local--color-primary);
     5589}
     5590
    56775591.has-green-color[class] {
    56785592    color: var(--global--color-green);
    56795593}
    56805594
     5595.has-green-color[class] [class*=__inner-container] {
     5596    --local--color-primary: var(--global--color-green, #fff);
     5597    color: var(--local--color-primary);
     5598}
     5599
    56815600.has-blue-color[class] {
    56825601    color: var(--global--color-blue);
    56835602}
    56845603
     5604.has-blue-color[class] [class*=__inner-container] {
     5605    --local--color-primary: var(--global--color-blue, #fff);
     5606    color: var(--local--color-primary);
     5607}
     5608
    56855609.has-purple-color[class] {
    56865610    color: var(--global--color-purple);
    56875611}
    56885612
     5613.has-purple-color[class] [class*=__inner-container] {
     5614    --local--color-primary: var(--global--color-purple, #fff);
     5615    color: var(--local--color-primary);
     5616}
     5617
    56895618.has-red-color[class] {
    56905619    color: var(--global--color-red);
    56915620}
    56925621
     5622.has-red-color[class] [class*=__inner-container] {
     5623    --local--color-primary: var(--global--color-red, #fff);
     5624    color: var(--local--color-primary);
     5625}
     5626
    56935627.has-orange-color[class] {
    56945628    color: var(--global--color-orange);
    56955629}
    56965630
     5631.has-orange-color[class] [class*=__inner-container] {
     5632    --local--color-primary: var(--global--color-orange, #fff);
     5633    color: var(--local--color-primary);
     5634}
     5635
    56975636.has-yellow-color[class] {
    56985637    color: var(--global--color-yellow);
    56995638}
    57005639
     5640.has-yellow-color[class] [class*=__inner-container] {
     5641    --local--color-primary: var(--global--color-yellow, #fff);
     5642    color: var(--local--color-primary);
     5643}
     5644
    57015645.has-white-color[class] {
    57025646    color: var(--global--color-white);
     5647}
     5648
     5649.has-white-color[class] [class*=__inner-container] {
     5650    --local--color-primary: var(--global--color-white, #fff);
     5651    color: var(--local--color-primary);
    57035652}
    57045653
    … …  
    57185667}
    57195668
     5669.has-black-background-color[class] [class*=__inner-container] {
     5670    --local--color-background: var(--global--color-black, #000);
     5671    background-color: var(--local--color-background);
     5672}
     5673
     5674.has-dark-gray-background-color[class] {
     5675    background-color: var(--global--color-dark-gray);
     5676}
     5677
     5678.has-dark-gray-background-color[class] [class*=__inner-container] {
     5679    --local--color-background: var(--global--color-dark-gray, #000);
     5680    background-color: var(--local--color-background);
     5681}
     5682
    57205683.has-gray-background-color[class] {
    57215684    background-color: var(--global--color-gray);
    57225685}
    57235686
    5724 .has-dark-gray-background-color[class] {
    5725     background-color: var(--global--color-dark-gray);
     5687.has-gray-background-color[class] [class*=__inner-container] {
     5688    --local--color-background: var(--global--color-gray, #000);
     5689    background-color: var(--local--color-background);
     5690}
     5691
     5692.has-light-gray-background-color[class] {
     5693    background-color: var(--global--color-light-gray);
     5694}
     5695
     5696.has-light-gray-background-color[class] [class*=__inner-container] {
     5697    --local--color-background: var(--global--color-light-gray, #fff);
     5698    background-color: var(--local--color-background);
    57265699}
    57275700
    … …  
    57305703}
    57315704
     5705.has-green-background-color[class] [class*=__inner-container] {
     5706    --local--color-background: var(--global--color-green, #fff);
     5707    background-color: var(--local--color-background);
     5708}
     5709
    57325710.has-blue-background-color[class] {
    57335711    background-color: var(--global--color-blue);
    57345712}
    57355713
     5714.has-blue-background-color[class] [class*=__inner-container] {
     5715    --local--color-background: var(--global--color-blue, #fff);
     5716    background-color: var(--local--color-background);
     5717}
     5718
    57365719.has-purple-background-color[class] {
    57375720    background-color: var(--global--color-purple);
    57385721}
    57395722
     5723.has-purple-background-color[class] [class*=__inner-container] {
     5724    --local--color-background: var(--global--color-purple, #fff);
     5725    background-color: var(--local--color-background);
     5726}
     5727
    57405728.has-red-background-color[class] {
    57415729    background-color: var(--global--color-red);
    57425730}
    57435731
     5732.has-red-background-color[class] [class*=__inner-container] {
     5733    --local--color-background: var(--global--color-red, #fff);
     5734    background-color: var(--local--color-background);
     5735}
     5736
    57445737.has-orange-background-color[class] {
    57455738    background-color: var(--global--color-orange);
    57465739}
    57475740
     5741.has-orange-background-color[class] [class*=__inner-container] {
     5742    --local--color-background: var(--global--color-orange, #fff);
     5743    background-color: var(--local--color-background);
     5744}
     5745
    57485746.has-yellow-background-color[class] {
    57495747    background-color: var(--global--color-yellow);
    57505748}
    57515749
     5750.has-yellow-background-color[class] [class*=__inner-container] {
     5751    --local--color-background: var(--global--color-yellow, #fff);
     5752    background-color: var(--local--color-background);
     5753}
     5754
    57525755.has-white-background-color[class] {
    57535756    background-color: var(--global--color-white);
    57545757}
    57555758
    5756 :not(.has-text-color).has-black-background-color[class],
    5757 :not(.has-text-color).has-gray-background-color[class],
    5758 :not(.has-text-color).has-dark-gray-background-color[class] {
    5759     color: var(--global--color-white);
    5760 }
    5761 
    5762 :not(.has-text-color).has-green-background-color[class],
    5763 :not(.has-text-color).has-blue-background-color[class],
    5764 :not(.has-text-color).has-purple-background-color[class],
    5765 :not(.has-text-color).has-red-background-color[class],
    5766 :not(.has-text-color).has-orange-background-color[class],
    5767 :not(.has-text-color).has-yellow-background-color[class],
    5768 :not(.has-text-color).has-white-background-color[class] {
    5769     color: var(--global--color-dark-gray);
     5759.has-white-background-color[class] [class*=__inner-container] {
     5760    --local--color-background: var(--global--color-white, #fff);
     5761    background-color: var(--local--color-background);
     5762}
     5763
     5764.has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     5765.has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     5766.has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     5767    --local--color-primary: var(--global--color-background, #fff);
     5768    color: var(--local--color-primary, var(--global--color-primary));
     5769}
     5770
     5771.is-dark-theme .has-background:not(.has-text-color).has-black-background-color[class] [class*=__inner-container],
     5772.is-dark-theme .has-background:not(.has-text-color).has-gray-background-color[class] [class*=__inner-container],
     5773.is-dark-theme .has-background:not(.has-text-color).has-dark-gray-background-color[class] [class*=__inner-container] {
     5774    --local--color-primary: var(--global--color-primary, #000);
     5775}
     5776
     5777.has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     5778.has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     5779.has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     5780.has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     5781.has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     5782.has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     5783.has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     5784    --local--color-primary: var(--global--color-primary, #000);
     5785    color: var(--local--color-primary, var(--global--color-primary));
     5786}
     5787
     5788.is-dark-theme .has-background:not(.has-text-color).has-green-background-color[class] [class*=__inner-container],
     5789.is-dark-theme .has-background:not(.has-text-color).has-blue-background-color[class] [class*=__inner-container],
     5790.is-dark-theme .has-background:not(.has-text-color).has-purple-background-color[class] [class*=__inner-container],
     5791.is-dark-theme .has-background:not(.has-text-color).has-red-background-color[class] [class*=__inner-container],
     5792.is-dark-theme .has-background:not(.has-text-color).has-orange-background-color[class] [class*=__inner-container],
     5793.is-dark-theme .has-background:not(.has-text-color).has-yellow-background-color[class] [class*=__inner-container],
     5794.is-dark-theme .has-background:not(.has-text-color).has-white-background-color[class] [class*=__inner-container] {
     5795    --local--color-primary: var(--global--color-background, #fff);
    57705796}
    57715797
Note: See TracChangeset for help on using the changeset viewer.