From 21cbf76baf00ac6ce9b15240e51f96832617eb65 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 20:13:05 -0400 Subject: [PATCH 1/7] add 'appearance' to wa-button --- docs/docs/components/button.md | 63 +++++++++------ src/components/button/button.styles.ts | 107 ++++++++++++++++++++----- src/components/button/button.ts | 15 ++-- src/themes/default.css | 4 +- 4 files changed, 136 insertions(+), 53 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index d7f5ed206..6a03f6b7f 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -12,16 +12,53 @@ layout: component.njk ### Variants -Use the `variant` attribute to set the button's variant. +Use the `variant` attribute to set the button's semantic variant. ```html {.example} +Neutral Brand Success -Neutral Warning Danger ``` +### Appearance + +Use the `appearance` attribute to set the button's visual appearance. + +```html {.example} +
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+``` + ### Sizes Use the `size` attribute to change a button's size. @@ -32,18 +69,6 @@ Use the `size` attribute to change a button's size. Large ``` -### Outline Buttons - -Use the `outline` attribute to draw outlined buttons with transparent backgrounds. - -```html {.example} -Brand -Success -Neutral -Warning -Danger -``` - ### Pill Buttons Use the `pill` attribute to give buttons rounded edges. @@ -54,16 +79,6 @@ Use the `pill` attribute to give buttons rounded edges. Large ``` -### Text Buttons - -Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders. - -```html {.example} -Text -Text -Text -``` - ### Link Buttons It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes. diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 15e88dfc6..d2eb0a071 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -14,35 +14,35 @@ export default css` } /* - * Standard buttons + * Solid buttons */ - :host([variant='brand']) { + :host([appearance='solid'][variant='brand']) { --background-color: var(--wa-color-brand-fill-loud); --label-color: var(--wa-color-brand-on-loud); } - :host([variant='success']) { + :host([appearance='solid'][variant='success']) { --background-color: var(--wa-color-success-fill-loud); --label-color: var(--wa-color-success-on-loud); } - :host([variant='warning']) { + :host([appearance='solid'][variant='warning']) { --background-color: var(--wa-color-warning-fill-loud); --label-color: var(--wa-color-warning-on-loud); } - :host([variant='neutral']) { + :host([appearance='solid'][variant='neutral']) { --background-color: var(--wa-color-neutral-fill-loud); --label-color: var(--wa-color-neutral-on-loud); } - :host([variant='danger']) { + :host([appearance='solid'][variant='danger']) { --background-color: var(--wa-color-danger-fill-loud); --label-color: var(--wa-color-danger-on-loud); } - :host(:not([variant='text'])) { + :host([appearance='solid']) { --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); --border-color: initial; @@ -56,33 +56,38 @@ export default css` * Outline buttons */ - :host([variant='brand'][outline]) { + :host([variant='brand'][appearance='outline']) { --background-color-hover: var(--wa-color-brand-fill-quiet); + --border-color: var(--wa-color-brand-border-loud); --label-color: var(--wa-color-brand-on-quiet); } - :host([variant='success'][outline]) { + :host([variant='success'][appearance='outline']) { --background-color-hover: var(--wa-color-success-fill-quiet); + --border-color: var(--wa-color-success-border-loud); --label-color: var(--wa-color-success-on-quiet); } - :host([variant='neutral'][outline]), + :host([variant='neutral'][appearance='outline']), :host(.wa-button-group__button--radio:not([checked])) { --background-color-hover: var(--wa-color-neutral-fill-quiet); + --border-color: var(--wa-color-neutral-border-loud); --label-color: var(--wa-color-neutral-on-quiet); } - :host([variant='warning'][outline]) { + :host([variant='warning'][appearance='outline']) { --background-color-hover: var(--wa-color-warning-fill-quiet); + --border-color: var(--wa-color-warning-border-loud); --label-color: var(--wa-color-warning-on-quiet); } - :host([variant='danger'][outline]) { + :host([variant='danger'][appearance='outline']) { --background-color-hover: var(--wa-color-danger-fill-quiet); + --border-color: var(--wa-color-danger-border-loud); --label-color: var(--wa-color-danger-on-quiet); } - :host([outline]), + :host([appearance='outline']), :host(.wa-button-group__button--radio:not([checked])) { --background-color: transparent; --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); @@ -97,16 +102,78 @@ export default css` * Text buttons */ - :host([variant='text']) { - --background-color: none; - --background-color-active: none; - --background-color-hover: none; + :host([appearance='text']) { + --background-color: transparent; + --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); --border-color: transparent; --border-color-active: transparent; --border-color-hover: transparent; - --label-color: var(--wa-color-text-link); - --label-color-active: var(--wa-color-text-link); - --label-color-hover: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover)); + --label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active)); + --label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover)); + } + + :host([appearance='text'][variant='brand']) { + --label-color: var(--wa-color-brand-on-quiet); + --background-color-hover: var(--wa-color-brand-fill-quiet); + } + + :host([appearance='text'][variant='success']) { + --label-color: var(--wa-color-success-on-quiet); + --background-color-hover: var(--wa-color-success-fill-quiet); + } + + :host([appearance='text'][variant='neutral']) { + --label-color: var(--wa-color-neutral-on-quiet); + --background-color-hover: var(--wa-color-neutral-fill-quiet); + } + + :host([appearance='text'][variant='warning']) { + --label-color: var(--wa-color-warning-on-quiet); + --background-color-hover: var(--wa-color-warning-fill-quiet); + } + + :host([appearance='text'][variant='danger']) { + --label-color: var(--wa-color-danger-on-quiet); + --background-color-hover: var(--wa-color-danger-fill-quiet); + } + + /* + * Subtle buttons + */ + + :host([appearance='subtle'][variant='brand']) { + --background-color: var(--wa-color-brand-fill-normal); + --label-color: var(--wa-color-brand-on-normal); + } + + :host([appearance='subtle'][variant='success']) { + --background-color: var(--wa-color-success-fill-normal); + --label-color: var(--wa-color-success-on-normal); + } + + :host([appearance='subtle'][variant='warning']) { + --background-color: var(--wa-color-warning-fill-normal); + --label-color: var(--wa-color-warning-on-normal); + } + + :host([appearance='subtle'][variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-normal); + --label-color: var(--wa-color-neutral-on-normal); + } + + :host([appearance='subtle'][variant='danger']) { + --background-color: var(--wa-color-danger-fill-normal); + --label-color: var(--wa-color-danger-on-normal); + } + + :host([appearance='subtle']) { + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); + --border-color: initial; + --border-color-hover: initial; + --border-color-active: initial; + --label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover)); + --label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active)); } /* diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 1c269d920..580191907 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -71,7 +71,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { @property() title = ''; // make reactive to pass through /** The button's theme variant. */ - @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'text' = 'neutral'; + @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; + + /** The button's visual appearance. */ + @property({ reflect: true }) appearance: 'solid' | 'subtle' | 'outline' | 'text' = 'solid'; /** The button's size. */ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @@ -85,9 +88,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { /** Draws the button in a loading state. */ @property({ type: Boolean, reflect: true }) loading = false; - /** Draws an outlined button. */ - @property({ type: Boolean, reflect: true }) outline = false; - /** Draws a pill-style button with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; @@ -248,7 +248,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { 'button--neutral': this.variant === 'neutral', 'button--warning': this.variant === 'warning', 'button--danger': this.variant === 'danger', - 'button--text': this.variant === 'text', 'button--small': this.size === 'small', 'button--medium': this.size === 'medium', 'button--large': this.size === 'large', @@ -256,8 +255,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { 'button--disabled': this.disabled, 'button--focused': this.hasFocus, 'button--loading': this.loading, - 'button--standard': !this.outline, - 'button--outline': this.outline, + 'button--solid': this.appearance === 'solid', + 'button--subtle': this.appearance === 'subtle', + 'button--outline': this.appearance === 'outline', + 'button--text': this.appearance === 'text', 'button--pill': this.pill, 'button--rtl': this.localize.dir() === 'rtl' })} diff --git a/src/themes/default.css b/src/themes/default.css index 77c68dfc5..62e6461f9 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -130,8 +130,8 @@ --wa-color-focus: var(--wa-color-blue-60); /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */ - --wa-color-mix-hover: black 16%; - --wa-color-mix-active: black 24%; + --wa-color-mix-hover: black 10%; + --wa-color-mix-active: black 20%; /** * Semantic Colors From 7709a63384993f61e064789feb37e1a1f06bbfe9 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 20:20:20 -0400 Subject: [PATCH 2/7] correct new button appearances --- docs/_includes/base.njk | 2 +- docs/docs/experimental/sandbox.md | 12 ++++++------ src/components/button/button.styles.ts | 5 ++--- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index c3d71266b..1c3f90513 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -43,7 +43,7 @@
{# Nav toggle #} - + diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md index a7056ad81..e3d36acfd 100644 --- a/docs/docs/experimental/sandbox.md +++ b/docs/docs/experimental/sandbox.md @@ -100,13 +100,13 @@ layout: page.njk Warning Danger

-Brand -Success -Neutral -Warning -Danger +Brand +Success +Neutral +Warning +Danger

-Brand +Text

Option 1 diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index d2eb0a071..b03d938e6 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -91,7 +91,6 @@ export default css` :host(.wa-button-group__button--radio:not([checked])) { --background-color: transparent; --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); - --border-color: color-mix(in oklab, var(--label-color), var(--wa-color-surface-default) 30%); --border-color-hover: var(--border-color); --border-color-active: var(--border-color); --label-color-hover: var(--label-color); @@ -167,8 +166,8 @@ export default css` } :host([appearance='subtle']) { - --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); - --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 20%); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 30%); --border-color: initial; --border-color-hover: initial; --border-color-active: initial; From f4f56fc34414ad913bf12e7bedde6f7dad6627f6 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 13 Jun 2024 13:58:05 -0400 Subject: [PATCH 3/7] rename appearance values --- docs/docs/components/button.md | 48 +++---- docs/docs/experimental/themer.md | 2 +- docs/docs/patterns/ecommerce.md | 12 +- src/components/button/button.styles.ts | 168 +++++++++++-------------- src/components/button/button.ts | 8 +- 5 files changed, 109 insertions(+), 129 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 6a03f6b7f..6ae19eb95 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -24,36 +24,36 @@ Use the `variant` attribute to set the button's semantic variant. ### Appearance -Use the `appearance` attribute to set the button's visual appearance. +Use the `appearance` attribute to change the button's visual appearance. ```html {.example}
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
@@ -110,54 +110,54 @@ Use the `prefix` and `suffix` slots to add icons. ```html {.example} - + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open ``` @@ -206,7 +206,7 @@ This example demonstrates how to style buttons using a custom class. This is the