@wordpress/edit-site 5.29.0 → 5.31.0

package/build-style/style.css

@@ -96,6 +96,7 @@
   --wp-admin-border-width-focus: 2px;
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
+  --wp-bound-block-color: #9747ff;
 }
 @media (min-resolution: 192dpi) {
   :root {
@@ -438,38 +439,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.interface-more-menu-dropdown {
-  margin-left: -4px;
-}
-.interface-more-menu-dropdown .components-button {
-  width: auto;
-  padding: 0 2px;
-}
-@media (min-width: 600px) {
-  .interface-more-menu-dropdown {
-    margin-left: 0;
-  }
-  .interface-more-menu-dropdown .components-button {
-    padding: 0 4px;
-  }
-}
-
-.interface-more-menu-dropdown__content .components-popover__content {
-  min-width: 300px;
-}
-@media (min-width: 480px) {
-  .interface-more-menu-dropdown__content .components-popover__content {
-    max-width: 480px;
-  }
-}
-.interface-more-menu-dropdown__content .components-popover__content .components-dropdown-menu__menu {
-  padding: 0;
-}
-
-.components-popover.interface-more-menu-dropdown__content {
-  z-index: 99998;
-}
-
 .interface-pinned-items {
   display: flex;
   gap: 8px;
@@ -492,32 +461,32 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-wrapper {
-  width: 100%;
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
   scroll-padding-bottom: 64px;
 }
-.dataviews-wrapper > div {
-  min-height: 100%;
-}
 
 .dataviews-filters__view-actions {
+  box-sizing: border-box;
   padding: 12px 32px 0;
-}
-.dataviews-filters__view-actions .components-search-control {
-  flex-grow: 1;
+  margin-bottom: 12px;
+  flex-shrink: 0;
+  position: sticky;
+  left: 0;
 }
 .dataviews-filters__view-actions .components-search-control .components-base-control__field {
   max-width: 240px;
 }
 
 .dataviews-filters__container {
-  padding: 0 32px;
+  padding-right: 32px;
 }
-
-.dataviews-filters__view-actions.components-h-stack {
-  align-items: center;
+.dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true], .dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:hover {
+  opacity: 0;
+}
+.dataviews-filters__container .dataviews-filters__reset-button[aria-disabled=true]:focus {
+  opacity: 1;
 }
 
 .dataviews-filters-button {
@@ -525,23 +494,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-pagination {
-  margin-top: auto;
   position: sticky;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.8);
-  -webkit-backdrop-filter: blur(6px);
-          backdrop-filter: blur(6px);
+  left: 0;
+  background-color: #fff;
   padding: 12px 32px;
   border-top: 1px solid #f0f0f0;
   color: #757575;
+  flex-shrink: 0;
 }
 
-.dataviews-filters-options {
-  margin: 32px 0 16px;
+.dataviews-pagination__page-selection {
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+  color: #1e1e1e;
 }
 
-.dataviews-view-table-wrapper {
-  overflow-x: auto;
+.dataviews-filters-options {
+  margin: 32px 0 16px;
 }
 
 .dataviews-view-table {
@@ -603,16 +574,22 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-view-table tr:hover {
+.dataviews-view-table tr.is-hovered {
   background-color: #f8f8f8;
 }
-.dataviews-view-table tr .components-checkbox-control__input {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
   opacity: 0;
 }
-.dataviews-view-table tr .components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input:focus {
+.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
   opacity: 1;
 }
-.dataviews-view-table tr:focus-within .components-checkbox-control__input, .dataviews-view-table tr:hover .components-checkbox-control__input {
+.dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
+  opacity: 0;
+}
+.dataviews-view-table tr:focus-within .components-checkbox-control__input,
+.dataviews-view-table tr:focus-within .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr.is-hovered .components-checkbox-control__input,
+.dataviews-view-table tr.is-hovered .dataviews-item-actions .components-button:not(.dataviews-all-actions-button), .dataviews-view-table tr:hover .components-checkbox-control__input,
+.dataviews-view-table tr:hover .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
   opacity: 1;
 }
 .dataviews-view-table tr.is-selected {
@@ -622,17 +599,19 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table tr.is-selected:hover {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
+.dataviews-view-table thead {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
 .dataviews-view-table thead tr {
   border: 0;
 }
 .dataviews-view-table thead th {
-  position: sticky;
-  top: -1px;
   background-color: #fff;
   box-shadow: inset 0 -1px 0 #f0f0f0;
   padding-top: 8px;
   padding-bottom: 8px;
-  z-index: 1;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 500;
@@ -670,6 +649,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table .dataviews-view-table__actions-column {
   width: 1%;
 }
+.dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
+  opacity: 1;
+}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -679,7 +661,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: #1e1e1e;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
   display: block;
   width: 100%;
 }
@@ -699,6 +680,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-view-table__primary-field a:hover {
   color: #1e1e1e;
 }
+.dataviews-view-list__primary-field a:focus,
+.dataviews-view-grid__primary-field a:focus,
+.dataviews-view-table__primary-field a:focus {
+  color: var(--wp-admin-theme-color--rgb);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+  border-radius: 2px;
+}
 .dataviews-view-list__primary-field button.components-button.is-link,
 .dataviews-view-grid__primary-field button.components-button.is-link,
 .dataviews-view-table__primary-field button.components-button.is-link {
@@ -900,6 +888,10 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-no-results,
 .dataviews-loading {
   padding: 0 32px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .dataviews-view-table-selection-checkbox label {
@@ -927,10 +919,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-left: 8px;
 }
 
-.dataviews-view-grid__card.has-no-pointer-events * {
-  pointer-events: none;
-}
-
 .dataviews-filter-summary__popover .components-popover__content {
   width: 230px;
   padding: 0;
@@ -943,7 +931,17 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   overflow: auto;
   border-top: 1px solid #e0e0e0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item {
+.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
+  font-weight: 600;
+}
+
+.dataviews-search-widget-listbox {
+  max-height: 184px;
+  padding: 4px;
+  overflow: auto;
+}
+
+.dataviews-search-widget-listitem {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -953,28 +951,25 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   cursor: default;
   margin-block-end: 2px;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:last-child {
+.dataviews-search-widget-listitem:last-child {
   margin-block-end: 0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item], .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus {
+.dataviews-search-widget-listitem:hover, .dataviews-search-widget-listitem[data-active-item], .dataviews-search-widget-listitem:focus {
   background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-check, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-check {
+.dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-check, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-check {
   fill: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:hover .dataviews-search-widget-filter-combobox-item-description, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item[data-active-item] .dataviews-search-widget-filter-combobox-item-description, .dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item:focus .dataviews-search-widget-filter-combobox-item-description {
+.dataviews-search-widget-listitem:hover .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem[data-active-item] .dataviews-search-widget-listitem-description, .dataviews-search-widget-listitem:focus .dataviews-search-widget-listitem-description {
   color: #fff;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-check {
+.dataviews-search-widget-listitem .dataviews-search-widget-listitem-check {
   width: 24px;
   height: 24px;
   flex-shrink: 0;
 }
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-value [data-user-value] {
-  font-weight: 600;
-}
-.dataviews-search-widget-filter-combobox-list .dataviews-search-widget-filter-combobox-item .dataviews-search-widget-filter-combobox-item-description {
+.dataviews-search-widget-listitem .dataviews-search-widget-listitem-description {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1064,8 +1059,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .dataviews-filter-summary__operators-container {
-  padding: 8px 8px 4px;
-  padding-bottom: 0;
+  padding: 8px 8px 0;
+}
+.dataviews-filter-summary__operators-container:has(+ .dataviews-search-widget-listbox) {
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 8px;
 }
 .dataviews-filter-summary__operators-container:empty {
   display: none;
@@ -1093,7 +1091,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-reset {
   padding-inline-end: 28px;
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip[aria-expanded=true] {
   background: #e0e0e0;
   color: #1e1e1e;
 }
@@ -1101,8 +1099,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   color: var(--wp-admin-theme-color);
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover {
-  background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+.dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values:hover, .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip.has-values[aria-expanded=true] {
+  background: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 .dataviews-filter-summary__chip-container .dataviews-filter-summary__chip:focus-visible {
   outline: none;
@@ -1342,7 +1340,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   position: relative;
   height: 100%;
   display: block;
-  overflow: hidden;
   background-color: #ddd;
   align-items: center;
 }
@@ -1368,7 +1365,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .edit-site-visual-editor .components-resizable-box__container {
   margin: 0 auto;
-  overflow: auto;
 }
 .edit-site-visual-editor.is-view-mode {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
@@ -1583,8 +1579,10 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
 }
 
 .edit-site-global-styles-preview__iframe {
-  max-width: 100%;
+  border-radius: 2px;
   display: block;
+  max-width: 100%;
+  width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -1664,31 +1662,6 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin: 0;
 }
 
-.edit-site-global-styles-variations_item {
-  box-sizing: border-box;
-  border-radius: 2px;
-}
-.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
-  padding: 2px;
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px #e0e0e0;
-  outline: 1px solid transparent;
-}
-.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
-  box-shadow: 0 0 0 1px #1e1e1e;
-  outline-width: 3px;
-}
-.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
-  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-}
-.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.edit-site-global-styles-variations_item:focus-visible {
-  outline: 3px solid transparent;
-  outline-offset: 0;
-}
-
 .edit-site-global-styles-icon-with-current-color {
   fill: currentColor;
 }
@@ -2132,180 +2105,8 @@ textarea.edit-site-code-editor-text-area.edit-site-code-editor-text-area:-ms-inp
   margin-left: 2px;
 }
 
-.edit-site-list-header {
-  position: relative;
-  align-items: center;
-  display: flex;
-  height: 60px;
-  box-sizing: border-box;
-  width: 100%;
-  justify-content: flex-end;
-  padding-right: 16px;
-}
-body.is-fullscreen-mode .edit-site-list-header {
-  padding-left: 60px;
-  transition: padding-left 20ms linear;
-  transition-delay: 80ms;
-}
-@media (prefers-reduced-motion: reduce) {
-  body.is-fullscreen-mode .edit-site-list-header {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.edit-site-list-header .edit-site-list-header__title {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  text-align: center;
-  font-size: 20px;
-  padding: 0;
-  margin: 0;
-}
-
-.edit-site-list-header__right {
-  position: relative;
-}
-
-.edit-site .edit-site-list {
-  flex-grow: 1;
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-}
-.edit-site .edit-site-list .interface-interface-skeleton__editor {
-  min-width: 100%;
-}
-@media (min-width: 782px) {
-  .edit-site .edit-site-list .interface-interface-skeleton__editor {
-    min-width: 0;
-  }
-}
-.edit-site .edit-site-list .interface-interface-skeleton__content {
-  background: #fff;
-  padding: 16px;
-  align-items: center;
-}
-@media (min-width: 782px) {
-  .edit-site .edit-site-list .interface-interface-skeleton__content {
-    padding: 72px;
-  }
-}
-
-.edit-site-list-table {
-  min-width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  margin: 0 auto;
-  overflow: hidden;
-  border-spacing: 0;
-  max-width: 960px;
-}
-.edit-site-list-table tr {
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  box-sizing: border-box;
-  border-top: 1px solid #f0f0f0;
-  margin: 0;
-}
-.edit-site-list-table tr:first-child {
-  border-top: 0;
-}
-@media (min-width: 782px) {
-  .edit-site-list-table tr {
-    padding: 24px 32px;
-  }
-}
-.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) {
-  width: calc(60% - 18px);
-  padding-right: 24px;
-}
-.edit-site-list-table tr .edit-site-list-table-column:nth-child(1) a {
-  display: inline-block;
-  text-decoration: none;
-  font-weight: 500;
-  margin-bottom: 4px;
-}
-.edit-site-list-table tr .edit-site-list-table-column:nth-child(2) {
-  width: calc(40% - 18px);
-  word-break: break-word;
-}
-.edit-site-list-table tr .edit-site-list-table-column:nth-child(3) {
-  min-width: 36px;
-  flex-shrink: 0;
-}
-.edit-site-list-table tr.edit-site-list-table-head {
-  font-size: 16px;
-  font-weight: 600;
-  text-align: left;
-  color: #1e1e1e;
-  border-top: none;
-  border-bottom: 1px solid #ddd;
-}
-.edit-site-list-table tr.edit-site-list-table-head th {
-  font-weight: inherit;
-}
-
-@media (min-width: 782px) {
-  .edit-site-list.is-navigation-open .components-snackbar-list {
-    margin-left: 360px;
-  }
-}
-
-.edit-site-list__rename-modal {
-  z-index: 1000001;
-}
-@media (min-width: 782px) {
-  .edit-site-list__rename-modal .components-base-control {
-    width: 320px;
-  }
-}
-
-.edit-site-template__actions button:not(:last-child) {
-  margin-right: 8px;
-}
-
-.edit-site-list-added-by__icon {
-  display: flex;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-}
-.edit-site-list-added-by__icon svg {
-  fill: currentColor;
-}
-
-.edit-site-list-added-by__avatar {
-  flex-shrink: 0;
-  overflow: hidden;
-  width: 24px;
-  height: 24px;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-}
-.edit-site-list-added-by__avatar img {
-  width: 20px;
-  height: 20px;
-  object-fit: cover;
-  opacity: 0;
-  transition: opacity 0.1s linear;
-  border-radius: 100%;
-}
-@media (prefers-reduced-motion: reduce) {
-  .edit-site-list-added-by__avatar img {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
-.edit-site-list-added-by__avatar.is-loaded img {
-  opacity: 1;
-}
-
-.edit-site-list-added-by__customized-info {
-  display: block;
-  color: #757575;
+.components-popover.more-menu-dropdown__content {
+  z-index: 99998;
 }
 
 .edit-site-page {
@@ -2559,6 +2360,52 @@ body.is-fullscreen-mode .edit-site-list-header {
   z-index: 2;
 }
 
+.page-templates-author-field__avatar {
+  flex-shrink: 0;
+  overflow: hidden;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+.page-templates-author-field__avatar img {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.1s linear;
+  border-radius: 100%;
+}
+@media (prefers-reduced-motion: reduce) {
+  .page-templates-author-field__avatar img {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.page-templates-author-field__avatar.is-loaded img {
+  opacity: 1;
+}
+
+.page-templates-author-field__icon {
+  display: flex;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+}
+.page-templates-author-field__icon svg {
+  fill: currentColor;
+}
+
+.edit-site-list__rename-modal {
+  z-index: 1000001;
+}
+@media (min-width: 782px) {
+  .edit-site-list__rename-modal .components-base-control {
+    width: 320px;
+  }
+}
+
 .edit-site-table-wrapper {
   width: 100%;
   padding: 32px;
@@ -2737,37 +2584,33 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
-.edit-site-sidebar-card {
-  display: flex;
-  align-items: flex-start;
-}
 .edit-site-sidebar-card__content {
   flex-grow: 1;
-  margin-bottom: 4px;
 }
 .edit-site-sidebar-card__title {
-  font-weight: 500;
-  line-height: 24px;
+  width: 100%;
 }
 .edit-site-sidebar-card__title.edit-site-sidebar-card__title {
-  font-size: 13px;
-  line-height: 1.4;
+  font-size: 16px;
+  line-height: 24px;
   margin: 0;
-  padding: 3px 0;
 }
 .edit-site-sidebar-card__description {
   font-size: 13px;
+  color: #757575;
 }
 .edit-site-sidebar-card__icon {
   flex: 0 0 24px;
-  margin-right: 12px;
   width: 24px;
   height: 24px;
 }
 .edit-site-sidebar-card__header {
   display: flex;
   justify-content: space-between;
-  margin: 0 0 4px;
+  margin: 0 0 12px;
+}
+.edit-site-sidebar-card .edit-site-template-card__actions {
+  flex-shrink: 0;
 }
 
 .edit-site-template-card__template-areas {
@@ -3533,10 +3376,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 }
 
 @media (min-width: 782px) {
-  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+  .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
     max-width: 292px;
   }
 }
+
+.edit-site-global-styles-variation-title {
+  color: #ddd;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
   box-shadow: 0 0 0 1px #1e1e1e;
 }
@@ -3681,15 +3532,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   fill: #4ab866;
 }
 
-.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
-  text-transform: uppercase;
-  color: #e0e0e0;
-  padding: 24px 6px 16px 16px;
-  border-top: 1px solid #2f2f2f;
-  font-size: 11px;
-  font-weight: 500;
-}
-
 .edit-site-sidebar-navigation-details-screen-panel {
   margin: 24px 0;
 }
@@ -4125,7 +3967,13 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   font-weight: 500;
   font-size: 11px;
 }
+.font-library-modal .components-navigator-screen {
+  padding: 3px;
+}
 
+.font-library-modal__tabpanel-layout {
+  margin-top: 32px;
+}
 .font-library-modal__tabpanel-layout .font-library-modal__tabpanel-layout__footer {
   border-top: 1px solid #ddd;
   margin: 0 -32px -32px;
@@ -4148,6 +3996,9 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   margin-top: -1px;
   /* To collapse the margin with the previous element */
 }
+.font-library-modal__font-card:hover {
+  background-color: #f0f0f0;
+}
 .font-library-modal__font-card .font-library-modal__font-card__name {
   font-weight: bold;
 }
@@ -4155,13 +4006,6 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   color: #757575;
 }
 
-.font-library-modal__library-font-variant {
-  border: 1px solid #e0e0e0;
-  padding: 16px;
-  margin-top: -1px;
-  /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
   display: block;
   height: 24px;
@@ -4219,14 +4063,22 @@ button.font-library-modal__upload-area {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-top: 64px;
 }
-.font-library__google-fonts-confirm h3 {
-  font-size: 1.4rem;
+.font-library__google-fonts-confirm p {
+  line-height: 1.4;
+}
+.font-library__google-fonts-confirm h2 {
+  font-size: 1.2rem;
+  font-weight: 400;
 }
 .font-library__google-fonts-confirm .components-card {
-  width: 50%;
-  min-width: 250px;
-  max-width: 350px;
+  padding: 16px;
+  width: 400px;
+}
+.font-library__google-fonts-confirm .components-button {
+  width: 100%;
+  justify-content: center;
 }
 
 .edit-site-pagination .components-button.is-tertiary {
@@ -4235,6 +4087,35 @@ button.font-library-modal__upload-area {
   justify-content: center;
 }
 
+.edit-site-global-styles-variations_item {
+  box-sizing: border-box;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
+  padding: 2px;
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px #e0e0e0;
+  outline: 1px solid transparent;
+}
+.edit-site-global-styles-color-variations .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {
+  padding: 8px;
+}
+.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
+  box-shadow: 0 0 0 1px #1e1e1e;
+  outline-width: 3px;
+}
+.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
+  box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
+}
+.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.edit-site-global-styles-variations_item:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: 0;
+}
+
 body.js #wpadminbar {
   display: none;
 }
@@ -4316,7 +4197,7 @@ body.js.site-editor-php {
   display: none;
 }
 .edit-site .interface-interface-skeleton__content {
-  background-color: #1e1e1e;
+  background-color: #ddd;
 }
 
 /**