diff --git a/projects/plugins/boost/app/assets/src/css/main/mixins.scss b/projects/plugins/boost/app/assets/src/css/main/mixins.scss index c92e905b7668..355fa8539034 100644 --- a/projects/plugins/boost/app/assets/src/css/main/mixins.scss +++ b/projects/plugins/boost/app/assets/src/css/main/mixins.scss @@ -42,3 +42,10 @@ max-inline-size: var(--wpds-dimension-surface-width-xl); margin-inline: auto; } + +@mixin settings-well($padding: var(--wpds-dimension-padding-lg)) { + padding: $padding; + background: var(--wpds-color-background-surface-neutral); + border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); + border-radius: var(--wpds-border-radius-lg); +} diff --git a/projects/plugins/boost/app/assets/src/js/features/critical-css/critical-css-meta/modern-critical-css-status.module.scss b/projects/plugins/boost/app/assets/src/js/features/critical-css/critical-css-meta/modern-critical-css-status.module.scss index c2695fc44257..6a03ae38e067 100644 --- a/projects/plugins/boost/app/assets/src/js/features/critical-css/critical-css-meta/modern-critical-css-status.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/critical-css/critical-css-meta/modern-critical-css-status.module.scss @@ -1,8 +1,8 @@ +@use "$css/main/mixins"; + .well { - padding: var(--wpds-dimension-padding-lg); - border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); - border-radius: var(--wpds-border-radius-lg); - background: var(--wpds-color-background-surface-neutral); + + @include mixins.settings-well(); } .description { diff --git a/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.module.scss b/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.module.scss index 1b0af7963918..a1fdb475b4fb 100644 --- a/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/image-cdn/image-cdn-liar/image-cdn-liar.module.scss @@ -1,3 +1,5 @@ +@use "$css/main/mixins"; + .wrapper { margin-bottom: 10px; } @@ -23,10 +25,9 @@ } .well { - padding: var(--wpds-dimension-padding-lg); - border-radius: var(--wpds-border-radius-lg); - background: var(--wpds-color-background-surface-neutral); - border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); + + @include mixins.settings-well(); + font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); } diff --git a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.module.scss b/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.module.scss index 2a3548c473ef..e19f01c366aa 100644 --- a/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/image-cdn/quality-settings/quality-settings.module.scss @@ -1,3 +1,5 @@ +@use "$css/main/mixins"; + .section-title { display: flex; font-weight: 700; @@ -32,10 +34,9 @@ } .well { - padding: var(--wpds-dimension-padding-lg); - border-radius: var(--wpds-border-radius-lg); - background: var(--wpds-color-background-surface-neutral); - border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); + + @include mixins.settings-well(); + font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); } diff --git a/projects/plugins/boost/app/assets/src/js/features/lcp/status/status.module.scss b/projects/plugins/boost/app/assets/src/js/features/lcp/status/status.module.scss index 3fe8b44d7501..6eb671b05c39 100644 --- a/projects/plugins/boost/app/assets/src/js/features/lcp/status/status.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/lcp/status/status.module.scss @@ -37,14 +37,13 @@ } .well { + + @include mixins.settings-well(); + display: flex; flex-wrap: wrap; align-items: center; gap: var(--wpds-dimension-gap-md); - padding: var(--wpds-dimension-padding-lg); - border-radius: var(--wpds-border-radius-lg); - background: var(--wpds-color-background-surface-neutral); - border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); font-size: var(--wpds-typography-font-size-md); line-height: var(--wpds-typography-line-height-sm); diff --git a/projects/plugins/boost/app/assets/src/js/features/ui/collapsible-meta/except-panel.module.scss b/projects/plugins/boost/app/assets/src/js/features/ui/collapsible-meta/except-panel.module.scss index af2208035172..884b1307d1a6 100644 --- a/projects/plugins/boost/app/assets/src/js/features/ui/collapsible-meta/except-panel.module.scss +++ b/projects/plugins/boost/app/assets/src/js/features/ui/collapsible-meta/except-panel.module.scss @@ -1,7 +1,9 @@ +@use "$css/main/mixins"; + .panel { - background: var(--wpds-color-background-surface-neutral); - border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak); - border-radius: var(--wpds-border-radius-lg); + + @include mixins.settings-well( $padding: null ); + margin-block-end: var(--wpds-dimension-gap-md); .toggle { diff --git a/projects/plugins/boost/changelog/boost-shared-settings-well b/projects/plugins/boost/changelog/boost-shared-settings-well new file mode 100644 index 000000000000..a718b72dbe7e --- /dev/null +++ b/projects/plugins/boost/changelog/boost-shared-settings-well @@ -0,0 +1,4 @@ +Significance: patch +Type: changed +Comment: Share modern Settings well styles without changing their appearance. +