Skip to content

Commit

Permalink
feat: update buttons and add destructive
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomasguillot
thomasguillot committed Apr 18, 2024
1 parent 1c2dcc1 commit ad5d911
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 12 deletions.
52 changes: 45 additions & 7 deletions assets/newspack-ui/scss/elements/forms/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
justify-content: center;
line-height: var( --newspack-ui-line-height-s );
padding: var( --newspack-ui-spacer-2 ) var( --newspack-ui-spacer-4 );
transition: background-color 150ms ease-in-out;
transition: background-color 125ms ease-in-out, outline 125ms ease-in-out;

&:not( :last-child ) {
margin-bottom: var( --newspack-ui-spacer-2 );
Expand All @@ -22,6 +22,7 @@
background: var( --newspack-ui-color-neutral-10 ) !important;
color: var( --newspack-ui-color-neutral-70 ) !important;
cursor: default;
pointer-events: none;
}

&:focus {
Expand All @@ -42,42 +43,79 @@
background: var( --newspack-ui-color-button-bg-hover );
color: var( --newspack-ui-color-button-text-hover );
}

&:disabled {
background: var( --newspack-ui-color-neutral-30 ) !important;
color: var( --newspack-ui-color-neutral-0 ) !important;
}
}

&--branded {
background: var( --newspack-ui-color-primary );
color: var( --newspack-ui-color-against-primary );

&:hover {
background: var( --newspack-ui-color-button-bg-hover );
color: var( --newspack-ui-color-button-text-hover );
background: color-mix(in srgb, var( --newspack-ui-color-primary ) 80%, black);
color: var( --newspack-ui-color-against-primary );
}

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

&:disabled {
background: color-mix(in srgb, var( --newspack-ui-color-primary ) 20%, white) !important;
color: var( --newspack-ui-color-against-primary ) !important;
}
}

&--secondary {
background: var( --newspack-ui-color-neutral-10 );
color: var( --newspack-ui-color-neutral-90 );
padding: calc( var( --newspack-ui-spacer-2 ) - 1px )
calc( var( --newspack-ui-spacer-3 ) - 1px );

&:hover {
background: var( --newspack-ui-color-neutral-30 );
color: var( --newspack-ui-color-neutral-90 );
}

&:disabled {
background: var( --newspack-ui-color-neutral-5 ) !important;
color: var( --newspack-ui-color-neutral-40 ) !important;
}
}

&--tertiary {
&--ghost {
background: transparent;
color: var( ---newspack-ui-color-neutral-90 );

&:hover {
background: var( --newspack-ui-color-neutral-10 );
background: var( --newspack-ui-color-neutral-5 );
color: var( --newspack-ui-color-neutral-90 );
}

&:disabled {
background: transparent !important;
color: var( --newspack-ui-color-neutral-30 ) !important;
}
}

&--destructive {
background: var( --newspack-ui-color-error-50 );
color: var( --newspack-ui-color-neutral-0 );

&:hover {
background: var( --newspack-ui-color-error-60 );
color: var( --newspack-ui-color-neutral-0 );
}

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

&:disabled {
background: var( --newspack-ui-color-error-5 ) !important;
color: var( --newspack-ui-color-neutral-0 ) !important;
}
}
}
}
15 changes: 10 additions & 5 deletions includes/class-newspack-ui.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,18 @@ public static function return_demo_content() {
<hr>

<h2>Buttons</h2>
<p><code>newspack-ui__button--primary</code>, <code>--branded</code>, <code>--secondary</code>, and <code>--tertiary</code> classes for colours/borders, and <code>newspack-ui__button--wide</code> for being 100% wide</p>
<p><code>newspack-ui__button--primary</code>, <code>--branded</code>, <code>--secondary</code>, <code>--ghost</code>, and <code>--destructive</code> classes for colours/borders, and <code>newspack-ui__button--wide</code> for being 100% wide</p>
<button class="newspack-ui__button">Default Theme Button</button><br>
<button class="newspack-ui__button newspack-ui__button--primary">Primary Button</button><br>
<button class="newspack-ui__button newspack-ui__button--primary" disabled>Primary Button Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--branded">Branded Button</button><br>
<button class="newspack-ui__button newspack-ui__button--branded" disabled>Branded Button Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--secondary">Secondary Button</button><br>
<button class="newspack-ui__button newspack-ui__button--tertiary">Tertiary Button</button><br>
<button class="newspack-ui__button newspack-ui__button--tertiary" disabled>Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--secondary" disabled>Secondary Button Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--ghost">Ghost Button</button><br>
<button class="newspack-ui__button newspack-ui__button--ghost" disabled>Ghost Button Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--destructive">Destructive Button</button><br>
<button class="newspack-ui__button newspack-ui__button--destructive" disabled>Destructive Button Disabled</button><br>
<button class="newspack-ui__button newspack-ui__button--secondary">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6 10.227C19.6 9.51801 19.536 8.83701 19.418 8.18201H10V12.05H15.382C15.2706 12.6619 15.0363 13.2448 14.6932 13.7635C14.3501 14.2822 13.9054 14.726 13.386 15.068V17.578H16.618C18.509 15.836 19.6 13.273 19.6 10.228V10.227Z" fill="#4285F4"></path>
Expand All @@ -270,8 +275,8 @@ public static function return_demo_content() {
<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide">Primary Button</button>
<button class="newspack-ui__button newspack-ui__button--branded newspack-ui__button--wide">Branded Button</button>
<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide">Secondary Button</button>
<button class="newspack-ui__button newspack-ui__button--tertiary newspack-ui__button--wide">Tertiary Button</button>
<button class="newspack-ui__button newspack-ui__button--tertiary newspack-ui__button--wide" disabled>Disabled</button>
<button class="newspack-ui__button newspack-ui__button--ghost newspack-ui__button--wide">Ghost Button</button>
<button class="newspack-ui__button newspack-ui__button--destructive newspack-ui__button--wide">Destructive Button</button>
<button class="newspack-ui__button newspack-ui__button--secondary newspack-ui__button--wide">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6 10.227C19.6 9.51801 19.536 8.83701 19.418 8.18201H10V12.05H15.382C15.2706 12.6619 15.0363 13.2448 14.6932 13.7635C14.3501 14.2822 13.9054 14.726 13.386 15.068V17.578H16.618C18.509 15.836 19.6 13.273 19.6 10.228V10.227Z" fill="#4285F4"></path>
Expand Down

0 comments on commit ad5d911

Please sign in to comment.