diff --git a/includes/class-core.php b/includes/class-core.php
index 7e5d2f3c..1900c776 100644
--- a/includes/class-core.php
+++ b/includes/class-core.php
@@ -117,7 +117,7 @@ public static function block_variations( $metadata ) {
if ( $metadata['name'] == 'core/search' ) {
$metadata['attributes']['buttonPosition']['default'] = 'button-inside';
$metadata['attributes']['buttonUseIcon']['default'] = true;
- $metadata['attributes']['placeholder']['default'] = esc_html__( 'Search...', 'newspack-block-theme' );
+ $metadata['attributes']['placeholder']['default'] = esc_html__( 'Search posts, categories, authors, ...', 'newspack-block-theme' );
$metadata['attributes']['showLabel']['default'] = false;
}
if ( $metadata['name'] == 'core/navigation' ) {
diff --git a/parts/mobile-sidebar.html b/parts/mobile-sidebar.html
index 7be29f3d..c2fb015b 100644
--- a/parts/mobile-sidebar.html
+++ b/parts/mobile-sidebar.html
@@ -5,7 +5,7 @@
-
+
-
+
diff --git a/src/scss/_comments-overlay.scss b/src/scss/_comments-overlay.scss
index aa96082a..321d6a2b 100644
--- a/src/scss/_comments-overlay.scss
+++ b/src/scss/_comments-overlay.scss
@@ -44,9 +44,7 @@
}
}
- /* stylelint-disable */
- &:has(#disqus_thread) {
- /* stylelint-enable */
+ &:has(#disqus_thread) { /* stylelint-disable-line selector-id-pattern */
max-width: calc(
(var(--wp--custom--width--medium) - (var(--wp--preset--spacing--50) * 5)) / 6 * 7 +
(var(--wp--preset--spacing--50) * 6)
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index d9ab361f..b9af1bb3 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -35,7 +35,7 @@
@mixin checkbox-radio {
appearance: none;
- background: white;
+ background: white 50% 50% no-repeat;
border: 1px solid var(--wp--preset--color--base-4);
box-shadow: none;
color: white;
@@ -46,7 +46,7 @@
margin: 2px 0 0;
place-content: center;
transition:
- background-color 125ms ease-in-out,
+ background 125ms ease-in-out,
border-color 125ms ease-in-out,
outline 125ms ease-in-out;
width: 20px !important;
@@ -62,6 +62,8 @@
}
&:checked {
+ background-color: var(--wp--preset--color--contrast);
+
&::before {
content: '';
opacity: 1;
@@ -70,12 +72,12 @@
&:focus {
border-color: var(--wp--preset--color--base-4);
- box-shadow: none;
- outline: unset;
+ box-shadow: none !important;
+ outline: unset !important;
}
&:focus-visible {
- outline: 2px solid var(--wp--preset--color--contrast);
+ outline: 2px solid var(--wp--preset--color--contrast) !important;
outline-offset: 1px;
&:not(:checked) {
@@ -103,7 +105,7 @@
}
&:checked {
- background: var(--wp--preset--color--contrast);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E");
border-color: transparent;
}
}
@@ -114,12 +116,12 @@
&::before {
background: var(--newspack-ui-color-neutral-0);
border-radius: 100%;
- height: var(--wp--preset--spacing--20);
- width: var(--wp--preset--spacing--20);
+ height: 8px;
+ width: 8px;
}
&:checked {
- background: var(--wp--preset--color--contrast);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");
border-color: var(--wp--preset--color--contrast);
}
}
@@ -146,11 +148,13 @@
@mixin elevation($size: 1) {
@if $size == 1 {
- box-shadow: 0 1px 10px rgba(0, 0, 0, 0.07);
+ box-shadow: var(--wp--preset--shadow--elevation-1);
} @else if $size == 2 {
- box-shadow: 0 2px 20px rgba(0, 0, 0, 0.14);
+ box-shadow: var(--wp--preset--shadow--elevation-2);
} @else if $size == 3 {
- box-shadow: 0 3px 30px rgba(0, 0, 0, 0.21);
+ box-shadow: var(--wp--preset--shadow--elevation-3);
+ } @else if $size == 4 {
+ box-shadow: var(--wp--preset--shadow--elevation-4);
}
}
diff --git a/src/scss/_sass-utils.scss b/src/scss/_sass-utils.scss
index ff456a39..b9fbc6f9 100644
--- a/src/scss/_sass-utils.scss
+++ b/src/scss/_sass-utils.scss
@@ -39,6 +39,10 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
@media only screen and (min-width: $xlarge-screen) {
@content;
}
+ } @else {
+ @media only screen and (min-width: $class) {
+ @content;
+ }
}
}
diff --git a/src/scss/_search-overlay.scss b/src/scss/_search-overlay.scss
index 3419e665..6ab322fa 100644
--- a/src/scss/_search-overlay.scss
+++ b/src/scss/_search-overlay.scss
@@ -1,4 +1,5 @@
@use 'sass-utils';
+@use 'mixins';
/**
* Search menu styles
@@ -10,7 +11,7 @@
overflow: auto;
padding: var(--wp--preset--spacing--30);
position: fixed !important; // !important to override some styles in the editor.
- transition: opacity 0.125s;
+ transition: opacity 0.125s ease-in-out;
width: 100%;
z-index: sass-utils.$zindex-overlay-menu;
@@ -54,10 +55,581 @@
}
}
-.jetpack-instant-search {
- @include sass-utils.media(large) {
- .jetpack-instant-search__search-results-wrapper {
- max-width: 1020px;
+body .jetpack-instant-search {
+ --jp--color--text: var(--wp--custom--color--neutral-90);
+ --jp--color--text-light: var(--wp--custom--color--neutral-60);
+ --jp--color--background: var(--wp--custom--color--neutral-0);
+ --jp--color--background-light: var(--wp--custom--color--neutral-5);
+ --jp--color--border: var(--wp--custom--color--neutral-30);
+
+ &[class*='--dark'] {
+ --jp--color--text: var(--wp--custom--color--neutral-0);
+ --jp--color--text-light: var(--wp--custom--color--neutral-10);
+ --jp--color--background: var(--wp--custom--color--neutral-100);
+ --jp--color--background-light: var(--wp--custom--color--neutral-90);
+ --jp--color--border: var(--wp--custom--color--neutral-60);
+
+ color: var(--jp--color--text);
+
+ button.jetpack-instant-search__overlay-close {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") !important;
+ }
+
+ .jetpack-instant-search {
+ &__box {
+ &-gridicon {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='white'/%3E%3C/svg%3E");
+ }
+ }
+ }
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ color: inherit;
+ text-decoration: underline;
+ }
+
+ &:focus {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: 1px;
+ }
+ }
+
+ button {
+ cursor: pointer;
+ font-family: inherit;
+
+ jetpack-instant-search__overlay-focus-anchor { /* stylelint-disable-line selector-id-pattern */
+ border-radius: var(--wp--custom--border--radius-medium);
+ border: 1px solid var(--jp--color--border);
+ color: var(--jp--color--text);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ font-weight: 600;
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px)
+ calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px);
+ @include sass-utils.all-transition;
+
+ &:focus {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ &__overlay {
+ background: var(--wp--custom--color--neutral-70) !important;
+ color: var(--jp--color--text);
+ font-family: var(--newspack-ui-font-family, system-ui);
+ font-size: var(--newspack-ui-font-size-s, 16px);
+ line-height: var(--newspack-ui-line-height-s, 1.5);
+ padding: var(--wp--preset--spacing--30);
+
+ @include sass-utils.media('576px') {
+ padding: var(--wp--preset--spacing--80);
+ }
+
+ button.jetpack-instant-search__overlay-close {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='%231E1E1E' stroke-width='1.5'/%3E%3C/svg%3E") !important;
+ background-position: center !important;
+ background-repeat: no-repeat !important;
+ background-size: 24px 24px !important;
+ border-bottom-color: var(--jp--color--border) !important;
+
+ > svg {
+ display: none;
+ }
+
+ &::before {
+ background: var(--jp--color--background);
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ content: '';
+ display: block;
+ height: 36px;
+ position: absolute;
+ width: 36px;
+ z-index: -1;
+ @include sass-utils.all-transition;
+ }
+
+ &:hover {
+ &::before {
+ background: var(--jp--color--background-light);
+ }
+ }
+
+ &:focus {
+ outline: unset !important;
+ }
+
+ &:focus-visible {
+ &::before {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ button[class*='jetpack-instant-search'] {
+ background: none;
+ border-radius: 0;
+ color: inherit;
+ padding: 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__box {
+ border-color: var(--jp--color--border) !important;
+
+ &-label {
+ transition: outline 125ms ease-in-out;
+
+ &:focus-within {
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: -4px;
+ }
+ }
+
+ &-input {
+ &.search-field {
+ color: inherit !important;
+ font-size: inherit !important;
+ letter-spacing: 0 !important;
+ padding: 0 !important;
+ }
+
+ &:focus {
+ border-radius: 0;
+ margin: 0 !important;
+ outline: none !important;
+ }
+ }
+
+ &-gridicon {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='%231E1E1E'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 24px 24px;
+ min-width: var(--wp--custom--spacing--75);
+ width: var(--wp--preset--spacing--80);
+
+ > svg {
+ display: none;
+ }
+ }
+ }
+
+ &__search-results {
+ background: var(--jp--color--background);
+
+ &-wrapper {
+ border-radius: var(--wp--custom--border--radius-medium);
+ max-width: calc(var(--wp--preset--spacing--80) + 632px + var(--wp--preset--spacing--80));
+
+ @include sass-utils.media('992px') {
+ &:has(.jetpack-instant-search__widget-area > *) {
+ max-width: calc(
+ var(--wp--preset--spacing--80) + 632px + var(--wp--preset--spacing--80) + 333px
+ );
+ }
+ }
+ }
+
+ &-filter-button {
+ border-radius: var(--wp--custom--border--radius-medium);
+ border: 1px solid var(--jp--color--border);
+ color: var(--jp--color--text);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ font-weight: 600;
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px)
+ calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px);
+ @include sass-utils.all-transition;
+
+ &:hover {
+ background: var(--jp--color--background-light);
+ text-decoration: none;
+ }
+ }
+
+ &-title {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem));
+ line-height: var(--newspack-ui-line-height-m, 1.6);
+ margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+ }
+
+ &-list {
+ color: inherit;
+ margin: 0 var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ &.is-format-product {
+ display: grid;
+ gap: var(--wp--preset--spacing--30);
+ grid-template-columns: repeat(2, 1fr);
+ margin: 0 var(--wp--preset--spacing--40);
+ padding: 0;
+
+ @include sass-utils.media('576px') {
+ grid-template-columns: repeat(3, 1fr);
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ li {
+ margin: 0;
+ width: 100%;
+
+ h3 {
+ font-size: inherit;
+ line-height: inherit;
+ margin-top: var(--wp--preset--spacing--20);
+ }
+ }
+ }
+ }
+
+ &-expanded {
+ &__image {
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+
+ &-link {
+ margin-left: var(--wp--preset--spacing--50);
+ }
+ }
+ }
+
+ &-pagination {
+ font-weight: 600;
+ margin: var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80)
+ var(--wp--preset--spacing--80);
+ }
+
+ button {
+ background: var(--jp--color--text) !important;
+ border-radius: var(--wp--custom--border--radius-medium) !important;
+ color: var(--jp--color--background) !important;
+ padding: var(--newspack-ui-spacer-2, var(--wp--custom--spacing--25))
+ var(--newspack-ui-spacer-5, var(--wp--preset--spacing--40)) !important;
+ @include sass-utils.all-transition;
+
+ &:hover {
+ background: var(--jp--color--text-light) !important;
+ text-decoration: none !important;
+ }
+
+ &:focus {
+ box-shadow: none;
+ outline: unset !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 1px;
+ }
+
+ &:disabled {
+ background: var(--jp--color--text) !important;
+ cursor: wait;
+ pointer-events: none;
+ }
+ }
+ }
+
+ &-primary {
+ max-width: 100%;
+
+ @include sass-utils.media('992px') {
+ max-width: calc(100% - 333px);
+ }
+ }
+
+ &-secondary {
+ border-color: var(--jp--color--border) !important;
+ color: inherit;
+ padding: 0 var(--wp--preset--spacing--30);
+ width: 333px;
+
+ &.jetpack-instant-search__search-results-secondary--show-as-modal {
+ border-color: var(--jp--color--border);
+ inset: var(--wp--custom--spacing--05) var(--wp--preset--spacing--20) auto;
+ min-width: 1px;
+ padding: 0 var(--wp--preset--spacing--30);
+ @include mixins.elevation(3);
+ }
+ }
+ }
+
+ &__search-result {
+ margin: 0 0 var(--wp--preset--spacing--50);
+
+ &-title {
+ font-size: var(--newspack-ui-font-size-l, clamp(1.25rem, 0.857rem + 0.803vw, 1.5rem));
+ font-weight: 700;
+ line-height: var(--newspack-ui-line-height-l, 1.5);
+ }
+
+ &-expanded {
+ &__title-link {
+ margin: 0 0 var(--wp--preset--spacing--20);
+ }
+
+ &__path {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ margin: 0 0 var(--wp--preset--spacing--20);
+ }
+
+ &__content {
+ color: inherit;
+ font-size: inherit;
+
+ &:empty {
+ margin-bottom: calc(-1 * var(--wp--preset--spacing--20));
+ }
+
+ &-container {
+ gap: var(--wp--preset--spacing--20);
+
+ @include sass-utils.media('576px') {
+ gap: var(--wp--preset--spacing--50);
+ }
+ }
+ }
+
+ &__copy-container {
+ @include sass-utils.media('576px') {
+ width: calc(100% - 128px - var(--wp--preset--spacing--50));
+ }
+ }
+
+ &__image {
+ &-container {
+ &::before {
+ padding-top: 75%;
+
+ @include sass-utils.media('576px') {
+ padding-top: 100%;
+ }
+ }
+ }
+
+ &-link {
+ margin: 0;
+
+ &:has(div:empty) {
+ display: none;
+ }
+ }
+ }
+
+ &__footer {
+ margin-top: var(--wp--preset--spacing--20);
+
+ li {
+ margin-right: var(--wp--preset--spacing--40);
+ }
+
+ &-author,
+ &-date {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ }
+ }
+ }
+
+ &-minimal-cats-and-tags {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ }
+ }
+
+ &__search-filters {
+ > div {
+ margin-top: var(--wp--preset--spacing--30);
+ }
+
+ &-title {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem));
+ line-height: var(--newspack-ui-line-height-m, 1.6);
+ }
+ }
+
+ &__search-filter {
+ &-sub-heading {
+ color: inherit;
+ }
+
+ &-list {
+ > div {
+ align-items: initial;
+ margin-top: var(--wp--preset--spacing--20);
+
+ input[type='checkbox'] {
+ position: relative;
+ @include mixins.checkbox-radio;
+ @include mixins.checkbox;
+
+ margin-top: 1px;
+ }
+ }
+ }
+ }
+
+ &__clear-filters {
+ &-link {
+ color: var(--jp--color--text-light) !important;
+ font-size: var(--newspack-ui-font-size-xs, 14px) !important;
+ height: calc(
+ var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) *
+ var(--newspack-ui-line-height-m, 1.6)
+ );
+ line-height: var(--newspack-ui-line-height-xs, 1.4286) !important;
+
+ &:focus {
+ outline: none !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ }
+ }
+ }
+
+ &__search-sort-with-select {
+ margin-top: 0;
+ }
+
+ &__search-sort-select {
+ border-color: var(--jp--color--border);
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ color: inherit;
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2);
+ transition: outline 125ms ease-in-out;
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: -1px;
+ }
+ }
+
+ &__path-breadcrumb,
+ &__path-breadcrumb-link {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ max-width: 100%;
+ }
+
+ &__sidebar {
+ padding-top: var(--wp--preset--spacing--30);
+ }
+
+ &__search-form-controls {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0;
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ @include sass-utils.media('992px') {
+ height: calc(
+ var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) *
+ var(--newspack-ui-line-height-m, 1.6)
+ );
+ right: 333px;
+ }
+
+ .jetpack-instant-search__search-sort {
+ color: inherit;
+
+ & &-option {
+ color: inherit;
+ }
+ }
+ }
+
+ &__search-sort {
+ &-with-links {
+ font-size: inherit;
+ gap: var(--wp--custom--spacing--10);
+ }
+
+ &-option {
+ color: var(--jp--color--text-light) !important;
+
+ &.is-selected {
+ color: var(--jp--color--text) !important;
+ font-weight: 400 !important;
+ text-decoration: underline !important;
+ }
+
+ &:focus {
+ outline: none !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 2px;
+ }
+ }
+ }
+
+ &__widget-area {
+ &-container {
+ margin-bottom: var(--wp--preset--spacing--30);
+ }
+
+ > div:not(:first-of-type) {
+ margin-top: var(--wp--preset--spacing--30) !important;
+ }
+ }
+
+ &__jetpack-colophon {
+ border-color: var(--jp--color--border) !important;
+
+ &-text {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-2xs, 12px);
+ line-height: var(--newspack-ui-line-height-2xs, 1.3333);
}
}
}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
index c25cf4ac..593b8208 100644
--- a/src/scss/blocks/_blocks.scss
+++ b/src/scss/blocks/_blocks.scss
@@ -24,4 +24,5 @@
@import url('./jetpack/_top-posts.scss');
@import url('./newspack/_author-profile.scss');
@import url('./newspack/_homepage-articles.scss');
+@import url('./newspack/_newsletters-subscribe.scss');
@import url('./newspack/_post-carousel.scss');
diff --git a/src/scss/blocks/newspack/_newsletters-subscribe.scss b/src/scss/blocks/newspack/_newsletters-subscribe.scss
new file mode 100644
index 00000000..fc879a32
--- /dev/null
+++ b/src/scss/blocks/newspack/_newsletters-subscribe.scss
@@ -0,0 +1,13 @@
+@use '../../sass-utils';
+
+.wp-block-newspack-newsletters-subscribe {
+ &.is-style-modern {
+ .submit-button {
+ @include sass-utils.all-transition;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+}
diff --git a/theme.json b/theme.json
index 8e1a2766..5b5128d1 100644
--- a/theme.json
+++ b/theme.json
@@ -76,7 +76,7 @@
{
"name": "Elevation 3",
"slug": "elevation-3",
- "shadow": "0 3px 30px #00000020"
+ "shadow": "0 3px 30px #00000021"
},
{
"name": "Elevation 4",
@@ -320,6 +320,7 @@
},
"spacing": {
"00": "0",
+ "05": "0.125rem",
"10": "0.25rem",
"15": "0.375rem",
"25": "0.75rem",