Skip to content

Commit

Permalink
feat: update button styles, font size, Woo checkout tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@laurelfulford
laurelfulford committed Apr 16, 2024
1 parent 39ca220 commit d714dac
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 17 deletions.
4 changes: 0 additions & 4 deletions assets/newspack-ui/scss/_modals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,10 +110,6 @@
}
}
&__modal {
// CSS Variables - update button background, with fallbacks to the Newspack UI defaults
--newspack-ui-color-button-bg: var( --newspack-ui-color-primary, var( --newspack-ui-color-neutral-90 ) );
--newspack-ui-color-button-text: var( --newspack-ui-color-against-primary, var( --newspack-ui-color-neutral-0 ) );

// Modal styles
background: var( --newspack-ui-color-body-bg );
border-radius: var( --newspack-ui-border-radius-m );
Expand Down
2 changes: 1 addition & 1 deletion assets/newspack-ui/scss/elements/_boxes.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

&--warning {
// TODO
background: var( --newspack-ui-color-warning-0 );
}

&--border {
Expand Down
17 changes: 9 additions & 8 deletions assets/newspack-ui/scss/elements/forms/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,17 @@
margin-bottom: var( --newspack-ui-spacer-2 );
}

&:hover {
color: inherit;
}

&:focus {
// TODO
}

&:disabled {
background: var( --newspack-ui-color-neutral-10 ) !important;
color: var( --newspack-ui-color-neutral-70 ) !important;
cursor: default;
}

&:focus {
outline: 2px solid var( --newspack-ui-color-button-bg );
outline-offset: 2px;
}

&--wide {
display: flex;
width: 100%;
Expand All @@ -56,6 +53,10 @@
background: var( --newspack-ui-color-button-bg-hover );
color: var( --newspack-ui-color-button-text-hover );
}

&:focus {
outline-color: var( --newspack-ui-color-primary );
}
}

&--secondary {
Expand Down
2 changes: 1 addition & 1 deletion assets/newspack-ui/scss/elements/forms/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
// Form response inline error text.
&__inline-error,
&__inline-info {
font-size: var( --newspack-ui-font-size-s );
font-size: var( --newspack-ui-font-size-xs );
line-height: var( --newspack-ui-line-height-s );
margin: var( --newspack-ui-spacer-base ) 0 var( --newspack-ui-spacer-5 );
a {
Expand Down
29 changes: 29 additions & 0 deletions assets/newspack-ui/scss/elements/woocommerce/_overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,4 +147,33 @@
display: flex !important;
}
}

// Stripe inputs
.wc-credit-card-form {
.form-row-wide {
margin-bottom: var( --newspack-ui-spacer-base );
}
.wc-stripe-elements-field,
.wc-stripe-iban-element-field {
border: 1px solid var( --newspack-ui-color-input-border );
border-radius: var( --newspack-ui-border-radius-m );
display: block;
font-family: var( --newspack-ui-font-family);
font-size: var( --newspack-ui-font-size-s );
line-height: var( --newspack-ui-line-height-l );
padding: calc( var( --newspack-ui-spacer-2 ) - 1px ) calc( var( --newspack-ui-spacer-3 ) - 1px );
}
}

.wc_payment_methods label[for="payment_method_stripe"].newspack-ui__input-list {
padding: var( --newspack-ui-spacer-5 ) !important;
}

// Errors
.woocommerce-invalid {
input,
textarea {
border-color: var( --newspack-ui-color-error-50 );
}
}
}
7 changes: 5 additions & 2 deletions assets/newspack-ui/scss/variables/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,11 @@
--newspack-ui-color-warning-40: #bd8600;

// Theme variables - from the classic theme; overridden in class-newspack-ui.php for block theme.
--newspack-ui-color-primary: var( --newspack-theme-color-primary );
--newspack-ui-color-against-primary: var( --newspack-theme-color-against-primary );
// TODO: commented out for now with the assumption all should be blue when used.
// --newspack-ui-color-primary: var( --newspack-theme-color-primary, var( --newspack-ui-color-neutral-90 ) );
// --newspack-ui-color-against-primary: var( --newspack-theme-color-against-primary, var( --newspack-ui-color-neutral-0 ) );
--newspack-ui-color-primary: var( --newspack-ui-color-primary-60 );
--newspack-ui-color-against-primary: var( --newspack-ui-color-neutral-0 );

// Specific assignments - general:
--newspack-ui-color-border: var( --newspack-ui-color-neutral-30 );
Expand Down
24 changes: 23 additions & 1 deletion includes/class-newspack-ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,33 @@ public static function return_demo_content() {
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
</svg>
</span>

<p>
<strong>Success box style, plus icon + <code>newspack-ui__box--text-center</code> class.</strong>
</p>
<p>Plus a little bit of text below it.</p>
</div>

<div class="newspack-ui__box newspack-ui__box--warning newspack-ui__box--text-center">
<span class="newspack-ui__icon newspack-ui__icon--warning">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
</svg>
</span>
<p>
<strong>Warning box style, plus icon + <code>newspack-ui__box--text-center</code> class.</strong>
</p>
<p>Plus a little bit of text below it.</p>
</div>

<div class="newspack-ui__box newspack-ui__box--error newspack-ui__box--text-center">
<span class="newspack-ui__icon newspack-ui__icon--error">
<svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
</svg>
</span>
<p>
<strong>Error box style, plus icon + <code>newspack-ui__box--text-center</code> class.</strong>
</p>
<p>Plus a little bit of text below it.</p>
</div>

Expand Down

0 comments on commit d714dac

Please sign in to comment.