feat: Newspack UI styles #2810
+1,106
−0
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| import './style.scss'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| .newspack-ui { | ||
| &__modal { | ||
| background: var( --newspack-ui-color-body-bg ); | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
| display: flex; | ||
| flex-direction: column; | ||
| max-height: 90vh; | ||
| max-width: var( --newspack-ui-modal-width-medium ); | ||
|
There was a problem hiding this comment. I remember we've also established a There was a problem hiding this comment. Good call! This has been added in 5089ffe. There was a problem hiding this comment. Thanks! Following the max-height change, shouldn't the overflow change from hidden to auto? There was a problem hiding this comment. @miguelpeixe I think this should be handled by the overflow added to the (Just let me know if I'm missing something here!) There was a problem hiding this comment. Currently the 
This could be fixed through flexboxes, adding There was a problem hiding this comment. OHHHH thank you @miguelpeixe! I was testing the styles with the modal checkout, which was adding an inline height and tricking me into thinking the scrolling was working 😅 I see it now. I went the flexbox route in 210c7ba and works well -- the only bit I'm waffling about is the modal footer. I'm wondering if it should also scroll instead of remaining in place (like it does with the current markup). I'm thinking this may be something we can test/verify in action and see if it works or not. Based on the mockups, the only case a modal with a footer may need to scroll would be on mobile, and maybe not even then. (I kind of faked the issue in the screenshot below, but the modal with a footer in the demo content isn't actually tall enough to cause this issue):
There was a problem hiding this comment. Hmmmm, I believe the footer should scroll along. There was a problem hiding this comment. Yeah, agreed -- it seems weird to treat it with the same importance as the header when it's more of a disclaimer space 🙂 I've made an update in 2331596 that makes the header sticky, and moves the overflow so everything else scrolls but the header stays put! |
||
| overflow: auto; | ||
|
|
||
| // Modal header & footer | ||
| &__header, | ||
| &__footer { | ||
| padding: var( --newspack-ui-spacer-4 ) var( --newspack-ui-spacer-5 ); | ||
| } | ||
|
|
||
| &__header { | ||
| align-items: center; | ||
| background: var( --newspack-ui-color-body-bg ); | ||
| border-bottom: 1px solid var( --newspack-ui-color-border ); | ||
| display: flex; | ||
| justify-content: space-between; | ||
| position: sticky; | ||
| top: 0; | ||
|
|
||
| h2 { | ||
| font-size: var( --newspack-ui-font-size-medium ); | ||
| margin: 0; | ||
| } | ||
|
|
||
| button { // Close button | ||
| background: transparent; | ||
| border: 0; | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
| cursor: pointer; | ||
| margin: -8px; | ||
| padding: 8px; | ||
|
|
||
| &:focus, | ||
| &:hover { | ||
| background: transparent; | ||
| color: var( --newspack-ui-color-text-med-contrast ); | ||
| } | ||
| svg { | ||
| display: block; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__content { | ||
| backface-visibility: visible; | ||
| padding: var( --newspack-ui-spacer-5 ); | ||
| } | ||
laurelfulford marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| &__footer { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| color: var( --newspack-ui-color-text-med-contrast ); | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| line-height: var( --newspack-ui-line-height-small ); | ||
| } | ||
|
|
||
| // Narrow modal | ||
| &__small { | ||
| max-width: var( --newspack-ui-modal-width-small ); | ||
| } | ||
|
|
||
| // Contents | ||
| h3 { | ||
| font-size: var( --newspack-ui-font-size-medium ); | ||
| } | ||
|
|
||
| &__footer, | ||
| &__content { | ||
| > *:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| > *:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| .newspack-ui { | ||
| .newspack-ui { | ||
| &__box { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
| margin-bottom: var( --newspack-ui-spacer-5 ); | ||
| padding: var( --newspack-ui-spacer-5 ); | ||
|
|
||
| // Backgrounds & Borders | ||
| &__success { | ||
| background: var( --newspack-ui-color-alert-green-bg ); | ||
| } | ||
|
|
||
| &__error { | ||
| background: var( --newspack-ui-color-alert-red-bg ); | ||
| } | ||
|
|
||
| &__warning { | ||
| // TODO | ||
| } | ||
|
|
||
| &__border { | ||
| background: transparent; | ||
| border: 1px solid var( --newspack-ui-color-border ); | ||
| } | ||
|
|
||
| // Text alignments | ||
| &__text-center { | ||
| text-align: center; | ||
| } | ||
|
|
||
| // Some style resets. | ||
| h2 { | ||
| font-size: 1em; | ||
| } | ||
|
|
||
| > *:first-child { | ||
| margin-top: 0; | ||
| } | ||
|
|
||
| > *:last-child { | ||
| margin-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| // Thank you SVG | ||
| .newspack-ui { | ||
| &__icon { | ||
| align-items: center; | ||
| border-radius: 100%; | ||
| display: flex; | ||
| height: var( --newspack-ui-spacer-7 ); | ||
| justify-content:center; | ||
| margin: 0 auto var( --newspack-ui-spacer-2 ); | ||
| width: var( --newspack-ui-spacer-7 ); | ||
|
|
||
| &__success { | ||
| background: var( --newspack-ui-color-alert-green ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
|
|
||
| &__error { | ||
| background: var( --newspack-ui-color-alert-red ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
|
|
||
| &__warning { | ||
| background: var( --newspack-ui-color-alert-yellow ); | ||
| color: var( --newspack-ui-color-body-bg ); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| @use 'boxes'; | ||
| @use 'forms'; | ||
| @use 'icons'; | ||
| @use 'misc'; | ||
| @use 'tables'; | ||
| @use 'typography'; | ||
| @use 'woocommerce'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .newspack-ui { | ||
| table { | ||
| border: 0; | ||
| font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size | ||
| line-height: var( --newspack-ui-line-height-large ); | ||
| margin: calc( var( --newspack-ui-spacer-base ) / -2 ) 0; // Offset cell padding. | ||
| th, | ||
| td { | ||
| background: transparent; | ||
| border-color: var( --newspack-ui-color-border ); | ||
| border-width: 0 0 1px; | ||
| font-size: var( --newspack-ui-font-size-small ); // Prevent relative font size | ||
| padding: calc( var( --newspack-ui-spacer-base ) / 2 ) 0; | ||
| vertical-align: top; | ||
| > * { | ||
| white-space: nowrap; | ||
| } | ||
| } | ||
| th { | ||
| font-weight: 600; | ||
| text-align: left; | ||
| } | ||
| tfoot tr:last-child { | ||
| th, | ||
| td { | ||
| border-bottom: 0; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .newspack-ui { | ||
| -webkit-font-smoothing: antialiased; | ||
|
|
||
| p { | ||
| margin: var( --newspack-ui-spacer-2 ) 0; | ||
| } | ||
|
|
||
| strong, | ||
| &__font__bold { | ||
| font-weight: var( --newspack-ui-font-weight-strong ); | ||
| } | ||
|
|
||
| &__font__normal { | ||
| font-weight: normal; | ||
| } | ||
|
|
||
| &__font__small { | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| .newspack-ui { | ||
| // TODO: define some kind of size hierachy for buttons eg. small, medium, large; | ||
| // not needed for RAS, but likely for My Account. | ||
| .button, | ||
| button, | ||
| input[type='button'], | ||
| input[type='reset'], | ||
| input[type='submit'] { | ||
| align-items: center; | ||
| border: 0; | ||
| border-radius: var( --newspack-ui-border-radius-small ); | ||
| display: inline-flex; | ||
| font-family: var( --newspack-ui-font-family); | ||
| font-size: var( --newspack-ui-font-size-small ); | ||
| font-weight: 600; | ||
| gap: var( --newspack-ui-spacer-2 ); | ||
| justify-content: center; | ||
| line-height: var( --newspack-ui-line-height-large ); | ||
| margin-bottom: var( --newspack-ui-spacer-base ); | ||
| padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-3 ); // TODO: correct this | ||
| transition: background-color 150ms ease-in-out; | ||
|
|
||
| &:hover { | ||
| // TODO | ||
| } | ||
|
|
||
| &:focus { | ||
| // TODO | ||
| } | ||
|
|
||
| &:disabled { | ||
| background: var( --newspack-ui-color-gray-100 ) !important; | ||
| color: var( --newspack-ui-color-text-med-contrast ) !important; | ||
| cursor: default; | ||
| } | ||
|
|
||
| &.newspack-ui__button{ | ||
| &__wide { | ||
| display: flex; | ||
| width: 100%; | ||
| } | ||
|
|
||
| &__primary { | ||
| background: var( --newspack-ui-color-button-bg ); | ||
| color: var( --newspack-ui-color-button-text ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-button-bg-hover ); | ||
| } | ||
| } | ||
|
|
||
| &__secondary { | ||
| background: transparent; | ||
| border: 1px solid var( --newspack-ui-color-border ); | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
| padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) calc( var( --newspack-ui-spacer-3 ) - 1px ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| } | ||
| } | ||
|
|
||
| &__tertiary { | ||
| background: transparent; | ||
| color: var( --newspack-ui-color-text-high-contrast ); | ||
|
|
||
| &:hover { | ||
| background: var( --newspack-ui-color-gray-100 ); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| .newspack-ui { | ||
| input[type='checkbox'], | ||
| input[type='radio'] { | ||
| appearance: none; | ||
| background: white; | ||
| border: solid 1px var( --newspack-ui-color-border ); | ||
| color: white; | ||
| cursor: pointer; | ||
| display: inline-grid; | ||
| font: inherit; | ||
| height: var( --newspack-ui-spacer-5 ) !important; | ||
| margin: 0; | ||
| place-content: center; | ||
| width: var( --newspack-ui-spacer-5 ) !important; | ||
|
|
||
| &::before { | ||
| content: ''; | ||
| display: block; | ||
| opacity: 0; | ||
| } | ||
|
|
||
| &:checked { | ||
| &::before { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| &:focus { | ||
| outline: 1.5px solid var( --newspack-ui-color-radio-bg ); | ||
| outline-offset: 1px; | ||
| } | ||
|
|
||
| &:disabled { | ||
| cursor: not-allowed; | ||
| opacity: 0.75; | ||
| } | ||
| } | ||
|
|
||
| input[type='checkbox'] { | ||
| border-radius: var( --newspack-ui-border-radius ); | ||
|
|
||
| &::before { | ||
| background: transparent | ||
| 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" ) | ||
| 0 0 no-repeat; | ||
| height: var( --newspack-ui-spacer-5 ); | ||
| width: var( --newspack-ui-spacer-5 ); | ||
| } | ||
|
|
||
| &:checked { | ||
| background: var( --newspack-ui-color-radio-bg ); | ||
| border-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| input[type='radio'] { | ||
| border-radius: 100%; | ||
|
|
||
| &::before { | ||
| background: var( --newspack-ui-color-radio-bg ); | ||
| border-radius: 100%; | ||
| height: var( --newspack-ui-spacer-3 ); | ||
| margin: 4px; | ||
| width: var( --newspack-ui-spacer-3 ); | ||
| } | ||
|
|
||
| &:checked { | ||
| border-color: var( --newspack-ui-color-radio-bg ); | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we should include the functional bits here for handling the visibility state. Doing so would allow us to establish a common animation for them as well. The prototype in Automattic/newspack-blocks#1602 implements the visibility handling with an
.openclass, which animates the modal.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that would be good! It would help avoid duplication for anything else that needs a similar modal, too! 🙂
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cool! We can address that in the next PR so it doesn't block the foundational changes this PR introduces.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome, thanks Miguel! I'll spin up a separate task to keep track of this one.