WordPress.org
Get WordPress

Make WordPress Core

Changeset 49987


Ignore:
Timestamp:
01/20/2021 05:49:28 AM (6 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.