diff --git a/.changeset/beige-bats-like.md b/.changeset/beige-bats-like.md new file mode 100644 index 0000000000..127177b3cc --- /dev/null +++ b/.changeset/beige-bats-like.md @@ -0,0 +1,6 @@ +--- +"@stackoverflow/stacks": minor +"@stackoverflow/stacks-svelte": minor +--- + +Update button to new Shine styles diff --git a/packages/stacks-classic/lib/components/button/button.a11y.test.ts b/packages/stacks-classic/lib/components/button/button.a11y.test.ts index 9cfecec748..b96005f3bb 100644 --- a/packages/stacks-classic/lib/components/button/button.a11y.test.ts +++ b/packages/stacks-classic/lib/components/button/button.a11y.test.ts @@ -14,8 +14,8 @@ describe("button", () => { /s-btn-(light|dark).*?badge/, // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/, - // matches tests with a badge in highcontrast-light modes, are muted or featured and/or outlined, and are sm or xs - /s-btn-highcontrast-light-(?:muted-|featured-)?(?:outlined-)?(?:sm|xs).*?badge/, + // matches tests with a badge in highcontrast-light modes, are tonal or featured, and are sm or xs + /s-btn-highcontrast-light-(?:tonal-|featured-)?(?:sm|xs).*?badge/, ], }); }); diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index 7b956db17f..300811a31b 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -3,32 +3,39 @@ --_bu-baw: var(--su-static1); --_bu-bc: transparent; // --_bu-bg: inherit; // [1] - --_bu-br: var(--br-md); - --_bu-fc: var(--theme-button-color, var(--theme-secondary-400)); + --_bu-br: var(--br-pill); // TODO: confirm this when we have the correct atomic values - SPARK-91 + --_bu-fc: var(--theme-button-color, var(--theme-secondary-600)); --_bu-fs: var(--fs-body1); - --_bu-p: 0.8em; + --_bu-p: var(--su16); + --_bu-py: 11.7px; // Adjust to reach 40px height + --_bu-fw: 600; // Semibold font weight + --_bu-icon-gap: 8px; // Default spacing between icons and text // Active --_bu-bc-active: var(--_bu-bc); - --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300)); - --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used on purpose + --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-050)); + --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-600)); // Note: hover color used on purpose // Hover --_bu-bc-hover: var(--_bu-bc); - --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200)); - --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500)); + --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-100)); + --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-600)); + + // Focus + --_bu-bg-focus: var(--black-150); + --_bu-fc-focus: var(--black-600); // BASE SELECTED MODIFIER - --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300)); + --_bu-bg-selected: linear-gradient(to bottom, var(--black-100) 0%, var(--black-100) 50%, color-mix(in srgb, var(--black-100) 80%, white 20%) 50%, color-mix(in srgb, var(--black-100) 80%, white 20%) 100%); --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600)); // FILLED VARIANT --_bu-filled-bc: transparent; - --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400)); - --_bu-filled-fc: var(--theme-button-primary-color, var(--white)); + --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-600)); + --_bu-filled-fc: var(--theme-button-primary-color, var(--black-050)); // Filled + Selected --_bu-filled-bc-selected: transparent; - --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500)); + --_bu-filled-bg-selected: linear-gradient(to bottom, var(--theme-secondary-600) 0%, var(--theme-secondary-600) 50%, color-mix(in srgb, var(--theme-secondary-600) 80%, white 20%) 50%, color-mix(in srgb, var(--theme-secondary-600) 80%, white 20%) 100%); --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white)); // Filled + Active --_bu-filled-bc-active: var(--_bu-filled-bc); @@ -38,15 +45,9 @@ --_bu-filled-bc-hover: var(--_bu-filled-bc); --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500)); --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white)); - - // OUTLINED VARIANT - --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400)); - --_bu-outlined-bg: var(--theme-button-outlined-background-color); - --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400)); - // Outlined + Selected - --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400)); - --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300)); - --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600)); + // Filled + Focus + --_bu-filled-bg-focus: var(--black-600); + --_bu-filled-fc-focus: var(--black-50); // CHILD COMPONENT CUSTOM PROPERTIES --_bu-badge-o: 0.5; @@ -58,9 +59,7 @@ // CONTEXTUAL STYLES .highcontrast-mode({ --_bu-bc: currentColor; - --_bu-outlined-bc: var(--_bu-bc); --_bu-fc-selected: var(--white); - --_bu-outlined-fc-selected: var(--white); --_bu-badge-o: 0.8; --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600)); }); @@ -96,6 +95,9 @@ &.is-selected, &--radio:checked + & { background-color: var(--_bu-bg-selected); + background-image: var(--_bu-bg-selected); + background-origin: border-box; + background-clip: border-box; border-color: var(--_bu-bc-selected, transparent); color: var(--_bu-fc-selected); @@ -106,22 +108,11 @@ &.s-btn__filled { // this needs to live here to adapt to radio button-group border-color: var(--_bu-filled-bc-selected); background-color: var(--_bu-filled-bg-selected); + background-image: var(--_bu-filled-bg-selected); + background-origin: border-box; + background-clip: border-box; color: var(--_bu-filled-fc-selected); } - &.s-btn__outlined { // this needs to live here to adapt to radio button-group - border-color: var(--_bu-outlined-bc-selected); - background-color: var(--_bu-outlined-bg-selected); - color: var(--_bu-outlined-fc-selected); - - &.s-btn__muted { - .highcontrast-mode({ - --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected); - --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected); - --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected); - --_bu-number-fc-selected: var(--_bu-filled-bg-selected); - }); - } - } } // MODIFIERS @@ -135,11 +126,6 @@ color: var(--_bu-filled-fc); } - &&__outlined { - border-color: var(--_bu-outlined-bc); - background-color: var(--_bu-outlined-bg, inherit); - } - // Resets &&__link, &&__unset { @@ -214,58 +200,81 @@ margin-top: -0.3em; // [4] margin-bottom: -0.3em; // [4] transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading + + &:not(:last-child) { + margin-right: var(--_bu-icon-gap); + } + + &:not(:first-child) { + margin-left: var(--_bu-icon-gap); + } } } // Size + // TODO: port the below added styles to the size-styles mixin SPARK-91 and SPARK-102 &&__xs { .size-styles(xs; bu; @styles: fs); --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1)); - --_bu-p: 0.6em; + --_bu-p: var(--su12); + --_bu-py: 6.285px; // Adjust to reach 28px height + --_bu-fs: var(--su12); // Override size-styles for custom font size + --_bu-icon-gap: var(--su4); // 4px spacing as per Figma specs } &&__sm { .size-styles(sm; bu; @styles: fs); + --_bu-p: var(--su12); + --_bu-py: 7.7px; // Adjust to reach 32px height + --_bu-fs: calc(var(--su12) + var(--su1)); // Override size-styles for custom font size + --_bu-icon-gap: var(--su6); // 6px spacing as per Figma specs } - &&__md { + &&__lg { .size-styles(md; bu; @styles: br, fs); - --_bu-p: 0.7em; + --_bu-br: var(--br-pill); // TODO: figure out why this isn't automatically applied + --_bu-p: var(--su24); + --_bu-py: 13.98px; // Adjust to reach 48px height + --_bu-fs: var(--su16); // Override size-styles for custom font size } // VARIANTS &&__danger, &&__featured, - &&__muted { + &&__tonal { .highcontrast-mode({ --_bu-filled-bc: transparent; }); } &&__danger { - --_bu-bg-active: var(--red-300); - --_bu-bg-hover: var(--red-200); - --_bu-bg-selected: var(--red-300); - --_bu-fc: var(--red-500); + --focus-theme: #C91D3F; + --_bu-bg-active: var(--black-050); + --_bu-bg-hover: var(--red-100); + --_bu-bg-selected: linear-gradient(to bottom, var(--red-100) 0%, var(--red-100) 50%, color-mix(in srgb, var(--red-100) 80%, white 20%) 50%, color-mix(in srgb, var(--red-100) 80%, white 20%) 100%); + --_bu-bg-focus: var(--black-050); + --_bu-fc: var(--red-400); --_bu-fc-active: var(--_bu-fc); --_bu-fc-hover: var(--red-500); - --_bu-fc-selected: var(--red-600); + --_bu-fc-selected: var(--red-500); + --_bu-fc-focus: var(--red-400); --_bu-filled-bc: transparent; --_bu-filled-bc-selected: var(--_bu-filled-bc); --_bu-filled-bg: var(--red-400); --_bu-filled-bg-active: var(--red-500); --_bu-filled-bg-hover: var(--red-500); - --_bu-filled-bg-selected: var(--red-600); + --_bu-filled-bg-selected: linear-gradient(to bottom, var(--red-500) 0%, var(--red-500) 50%, color-mix(in srgb, var(--red-500) 80%, white 20%) 50%, color-mix(in srgb, var(--red-500) 80%, white 20%) 100%); --_bu-filled-fc: var(--white); + --_bu-filled-bg-focus: var(--red-400); --_bu-filled-fc-active: var(--_bu-filled-fc); --_bu-filled-fc-hover: var(--_bu-filled-fc); --_bu-filled-fc-selected: var(--_bu-filled-fc); - --_bu-outlined-bc: var(--red-400); - --_bu-outlined-bc-selected: var(--red-500); - --_bu-outlined-bg-selected: var(--_bu-bg-selected); - --_bu-outlined-fc-selected: var(--_bu-fc-selected); --_bu-number-fc: var(--white); --_bu-number-fc-filled: var(--black); + + &&__filled { + --focus-theme: var(--red-400); + } } &&__featured { @@ -281,49 +290,31 @@ --_bu-filled-bg: var(--purple-400); --_bu-filled-bg-active: var(--purple-500); --_bu-filled-bg-hover: var(--purple-500); - --_bu-filled-bg-selected: var(--purple-600); + --_bu-filled-bg-selected: linear-gradient(to bottom, var(--purple-500) 0%, var(--purple-500) 50%, color-mix(in srgb, var(--purple-500) 80%, white 20%) 50%, color-mix(in srgb, var(--purple-500) 80%, white 20%) 100%); --_bu-filled-fc: var(--white); --_bu-filled-fc-active: var(--_bu-filled-fc); --_bu-filled-fc-hover: var(--_bu-filled-fc); --_bu-filled-fc-selected: var(--_bu-filled-fc); - --_bu-outlined-bc: var(--purple-400); - --_bu-outlined-bc-selected: var(--purple-500); - --_bu-outlined-bg-selected: var(--_bu-bg-selected); - --_bu-outlined-fc-selected: var(--_bu-fc-selected); + --_bu-filled-bg-focus: var(--purple-400); --_bu-number-fc: var(--white); --_bu-number-fc-filled: var(--black); + --focus-theme: var(--purple-400); } - &&__muted { - --_bu-bc-hover: var(--black-300); - --_bu-bg-active: var(--black-150); - --_bu-bg-hover: var(--black-100); - --_bu-bg-selected: var(--black-200); - --_bu-fc: var(--black-500); + &&__tonal { + --_bu-bg: var(--theme-secondary-150); + --_bu-bc-hover: transparent; + --_bu-bg-active: var(--theme-secondary-150); + --_bu-bg-hover: var(--theme-secondary-200); + --_bu-bg-selected: linear-gradient(to bottom, var(--theme-secondary-200) 0%, var(--theme-secondary-200) 50%, color-mix(in srgb, var(--theme-secondary-200) 80%, white 20%) 50%, color-mix(in srgb, var(--theme-secondary-200) 80%, white 20%) 100%); + --_bu-fc: var(--theme-secondary-600); --_bu-fc-active: var(--_bu-fc); - --_bu-fc-hover: var(--black-500); - --_bu-fc-selected: var(--black-500); - // The filled modifier on the muted button is deprecated and is to be - // removed in Stacks Classic v2 - --_bu-filled-bc: transparent; - --_bu-filled-bc-selected: var(--_bu-filled-bc); - --_bu-filled-bg: var(--black-225); - --_bu-filled-bg-active: var(--black-300); - --_bu-filled-bg-hover: var(--black-250); - --_bu-filled-bg-selected: var(--black-350); - --_bu-filled-fc: var(--black-500); - --_bu-filled-fc-active: var(--_bu-filled-fc); - --_bu-filled-fc-hover: var(--_bu-filled-fc); - --_bu-filled-fc-selected: var(--black-600); - --_bu-outlined-bc: var(--black-300); - --_bu-outlined-bc-selected: var(--black-300); - --_bu-outlined-bg-selected: var(--_bu-bg-selected); - --_bu-outlined-fc-selected: var(--_bu-fc-selected); + --_bu-fc-hover: var(--theme-secondary-600); + --_bu-fc-selected: var(--theme-secondary-600); --_bu-number-fc-filled: var(--white); --_bu-number-fc-selected: var(--white); - --_bu-bg-focus: var(--black-400); - --_bu-fc-focus: var(--white); - --_bu-number-fc-focus: var(--black-500); + --_bu-bg-focus: var(--theme-secondary-150); + --_bu-number-fc-focus: var(--theme-secondary-600); .highcontrast-mode({ --_bu-bc-hover: currentColor; @@ -353,7 +344,7 @@ } &&__facebook { - @_fb-brand: #385499; + @_fb-brand: #1877F2; --_bu-bc: transparent; --_bu-bg: @_fb-brand; --_bu-bg-active: darken(@_fb-brand, 10%); @@ -366,7 +357,7 @@ &&__google { --_bu-bc: var(--bc-medium); - --_bu-bg: var(--white); + --_bu-bg: var(--black-150); --_bu-bg-active: var(--black-150); --_bu-bg-hover: var(--black-100); --_bu-fc: var(--fc-medium); @@ -425,6 +416,11 @@ color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled)); } + &.s-btn__filled { + background-color: var(--_bu-filled-bg-focus, var(--_bu-filled-bg)); + color: var(--_bu-filled-fc-focus, var(--_bu-filled-fc)); + } + background-color: var(--_bu-bg-focus, var(--_bu-filled-bg)); color: var(--_bu-fc-focus, var(--_bu-filled-fc)); } @@ -436,12 +432,12 @@ color: var(--_bu-filled-fc-hover); } - &:not(.s-btn__outlined):not(.s-btn__filled) { + &:not(.s-btn__toned):not(.s-btn__filled) { border-color: var(--_bu-bc-hover); } &:visited:not(:active):not(:focus) { - &:not(.s-btn__outlined) { + &:not(.s-btn__toned) { &.s-btn__filled { background-color: var(--_bu-filled-bg-hover); border-color: var(--_bu-filled-bc-hover); @@ -482,7 +478,7 @@ cursor: pointer; display: inline-block; font-family: inherit; - font-weight: normal; + font-weight: var(--_bu-fw, 600); line-height: var(--lh-sm); position: relative; outline: none; diff --git a/packages/stacks-classic/lib/components/button/button.test.setup.ts b/packages/stacks-classic/lib/components/button/button.test.setup.ts index 3d7445e2de..2ee95779fe 100644 --- a/packages/stacks-classic/lib/components/button/button.test.setup.ts +++ b/packages/stacks-classic/lib/components/button/button.test.setup.ts @@ -16,9 +16,9 @@ const getChild = (child?: string): string => { // TODO test disabled states, interaction pseudo-classes const testArgs: TestVariationArgs = { baseClass: "s-btn", - variants: ["danger", "featured", "muted"], + variants: ["danger", "featured", "tonal"], modifiers: { - primary: ["filled", "outlined"], + primary: ["filled"], secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]], global: ["is-loading"], standalone: [...["link", "unset"], ...["facebook", "github", "google"]], diff --git a/packages/stacks-docs/_data/buttons.json b/packages/stacks-docs/_data/buttons.json index dae9a16333..b218dfe4e9 100644 --- a/packages/stacks-docs/_data/buttons.json +++ b/packages/stacks-docs/_data/buttons.json @@ -6,10 +6,6 @@ { "title": "Clear" }, - { - "title": "Outlined", - "class": "s-btn__outlined" - }, { "title": "Filled", "class": "s-btn__filled" @@ -25,10 +21,6 @@ { "title": "Clear" }, - { - "title": "Outlined", - "class": "s-btn__outlined" - }, { "title": "Filled", "class": "s-btn__filled" @@ -42,13 +34,6 @@ "title": "Featured", "class": "s-btn__featured", "classes": [ - { - "title": "Clear" - }, - { - "title": "Outlined", - "class": "s-btn__outlined" - }, { "title": "Filled", "class": "s-btn__filled" @@ -56,21 +41,13 @@ ] } ], - "muted": [ + "tonal": [ { - "title": "Muted", - "class": "s-btn__muted", + "title": "Tonal", + "class": "s-btn__tonal", "classes": [ { - "title": "Clear" - }, - { - "title": "Outlined", - "class": "s-btn__outlined" - }, - { - "title": "Filled", - "class": "s-btn__filled" + "title": "N/A" } ] } @@ -83,10 +60,6 @@ { "title": "Secondary, Clear" }, - { - "title": "Secondary, Outlined", - "class": "s-btn__outlined" - }, { "title": "Secondary, Filled", "class": "s-btn__filled" @@ -95,38 +68,19 @@ "title": "Danger, Clear", "class": "s-btn__danger" }, - { - "title": "Danger, Outlined", - "class": "s-btn__danger", - "class2": "s-btn__outlined" - }, { "title": "Danger, Filled", "class": "s-btn__danger", "class2": "s-btn__filled" }, - { - "title": "Featured, Clear", - "class": "s-btn__featured" - }, - { - "title": "Featured, Outlined", - "class": "s-btn__featured", - "class2": "s-btn__outlined" - }, { "title": "Featured, Filled", "class": "s-btn__featured", "class2": "s-btn__filled" }, { - "title": "Muted, Clear", - "class": "s-btn__muted" - }, - { - "title": "Muted, Outlined", - "class": "s-btn__muted", - "class2": "s-btn__outlined" + "title": "Tonal", + "class": "s-btn__tonal" } ] } @@ -139,10 +93,6 @@ { "title": "Secondary, Clear" }, - { - "title": "Secondary, Outlined", - "class": "s-btn__outlined" - }, { "title": "Secondary, Filled", "class": "s-btn__filled" @@ -151,38 +101,19 @@ "title": "Danger, Clear", "class": "s-btn__danger" }, - { - "title": "Danger, Outlined", - "class": "s-btn__danger", - "class2": "s-btn__outlined" - }, { "title": "Danger, Filled", "class": "s-btn__danger", "class2": "s-btn__filled" }, - { - "title": "Featured, Clear", - "class": "s-btn__featured" - }, - { - "title": "Featured, Outlined", - "class": "s-btn__featured", - "class2": "s-btn__outlined" - }, { "title": "Featured, Filled", "class": "s-btn__featured", "class2": "s-btn__filled" }, { - "title": "Muted, Clear", - "class": "s-btn__muted" - }, - { - "title": "Muted, Outlined", - "class": "s-btn__muted", - "class2": "s-btn__outlined" + "title": "Tonal", + "class": "s-btn__tonal" } ] } @@ -194,10 +125,6 @@ { "title": "Secondary, Clear" }, - { - "title": "Secondary, Outlined", - "class": "s-btn__outlined" - }, { "title": "Secondary, Filled", "class": "s-btn__filled" @@ -206,38 +133,19 @@ "title": "Danger, Clear", "class": "s-btn__danger" }, - { - "title": "Danger, Outlined", - "class": "s-btn__danger", - "class2": "s-btn__outlined" - }, { "title": "Danger, Filled", "class": "s-btn__danger", "class2": "s-btn__filled" }, - { - "title": "Featured, Clear", - "class": "s-btn__featured" - }, - { - "title": "Featured, Outlined", - "class": "s-btn__featured", - "class2": "s-btn__outlined" - }, { "title": "Featured, Filled", "class": "s-btn__featured", "class2": "s-btn__filled" }, { - "title": "Muted, Clear", - "class": "s-btn__muted" - }, - { - "title": "Muted, Outlined", - "class": "s-btn__muted", - "class2": "s-btn__outlined" + "title": "Tonal", + "class": "s-btn__tonal" } ] } @@ -250,10 +158,6 @@ { "title": "Secondary, Clear" }, - { - "title": "Secondary, Outlined", - "class": "s-btn__outlined" - }, { "title": "Secondary, Filled", "class": "s-btn__filled" @@ -262,38 +166,19 @@ "title": "Danger, Clear", "class": "s-btn__danger" }, - { - "title": "Danger, Outlined", - "class": "s-btn__danger", - "class2": "s-btn__outlined" - }, { "title": "Danger, Filled", "class": "s-btn__danger", "class2": "s-btn__filled" }, - { - "title": "Featured, Clear", - "class": "s-btn__featured" - }, - { - "title": "Featured, Outlined", - "class": "s-btn__featured", - "class2": "s-btn__outlined" - }, { "title": "Featured, Filled", "class": "s-btn__featured", "class2": "s-btn__filled" }, { - "title": "Muted, Clear", - "class": "s-btn__muted" - }, - { - "title": "Muted, Outlined", - "class": "s-btn__muted", - "class2": "s-btn__outlined" + "title": "Tonal", + "class": "s-btn__tonal" } ] } @@ -301,23 +186,23 @@ "sizes": [ { "size": "Extra Small", - "fs": "11px", + "fs": "12px", "class": "s-btn__xs" }, { "size": "Small", - "fs": "12px", + "fs": "13px", "class": "s-btn__sm" }, { "size": "Default", - "fs": "13px", + "fs": "14px", "class": "N/A" }, { - "size": "Medium", - "fs": "17px", - "class": "s-btn__md" + "size": "Large", + "fs": "16px", + "class": "s-btn__lg" } ] } \ No newline at end of file diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json index 5595c9c6a4..db572a5f54 100644 --- a/packages/stacks-docs/_data/site-navigation.json +++ b/packages/stacks-docs/_data/site-navigation.json @@ -227,7 +227,8 @@ }, { "title": "Buttons", - "url": "/product/components/buttons/" + "url": "/product/components/buttons/", + "new": true }, { "title": "Button groups", diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index 06a2b4e734..8f26b6bafd 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -13,7 +13,7 @@
  • Base
  • Danger
  • Featured
    • -
  • Muted
    • +
  • Tonal

    • Each style is explained below, detailing how and where to use these styles.

    @@ -21,14 +21,12 @@

    All buttons, by default, are base buttons. There are three, graduating secondary styles:

    1. Clear (default)
      2. -
    2. Outlined
    3. Filled

    A button’s visual weight should correspond to the importance of the button’s action. The more important the action, the heavier the button’s visual weight.

    {% highlight html %} - {% endhighlight %}
    @@ -77,7 +75,6 @@
    {% highlight html %} - {% endhighlight %}
    @@ -128,8 +125,6 @@
    {% highlight html %} - - {% endhighlight %}
    @@ -176,18 +171,12 @@
    - {% header "h3", "Muted" %} -

    Muted buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.

    - - {% tip, "warning", "mb24" %} - Note: The .s-btn__filled class has been deprecated on the muted button style. Expect it to be fully removed in the next major release. - {% endtip %} + {% header "h3", "Tonal" %} +

    Tonal buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.

    {% highlight html %} - - - + {% endhighlight %}
    @@ -202,7 +191,7 @@ - {% for btn in buttons.muted %} + {% for btn in buttons.tonal %} {% assign types = btn.classes %} {% for class in types %} @@ -674,13 +663,11 @@
    {% highlight html %} - {% endhighlight %}
    -
    @@ -692,14 +679,12 @@ {% highlight html %}
    -
    {% endhighlight %}
    -
    @@ -715,7 +700,6 @@

    Write your respons
    -

    @@ -727,7 +711,6 @@

    Write your respons
    -

    diff --git a/packages/stacks-svelte/src/components/Button/Button.stories.svelte b/packages/stacks-svelte/src/components/Button/Button.stories.svelte index b5319549b2..ebb1d1b5fc 100644 --- a/packages/stacks-svelte/src/components/Button/Button.stories.svelte +++ b/packages/stacks-svelte/src/components/Button/Button.stories.svelte @@ -7,8 +7,8 @@ const ButtonBrands: Brand[] = ["", "facebook", "github", "google"]; const ButtonSizes: Size[] = ["", "xs", "sm", "md"]; - const ButtonVariants: Variant[] = ["", "danger", "featured", "muted"]; - const ButtonWeights: Weight[] = ["", "outlined", "filled"]; + const ButtonVariants: Variant[] = ["", "danger", "featured", "tonal"]; + const ButtonWeights: Weight[] = ["", "filled"]; const titleCase = (str: string) => { return str.toLowerCase().replace(/(?:^|\s)\w/g, (match) => { diff --git a/packages/stacks-svelte/src/components/Button/Button.svelte b/packages/stacks-svelte/src/components/Button/Button.svelte index 6b7f7cd032..c095bd7a16 100644 --- a/packages/stacks-svelte/src/components/Button/Button.svelte +++ b/packages/stacks-svelte/src/components/Button/Button.svelte @@ -4,8 +4,8 @@ export type Brand = "" | "facebook" | "github" | "google"; export type Size = "" | "xs" | "sm" | "md"; - export type Variant = "" | "danger" | "featured" | "muted"; - export type Weight = "" | "outlined" | "filled"; + export type Variant = "" | "danger" | "featured" | "tonal"; + export type Weight = "" | "filled"; export interface Props extends HTMLButtonAttributes { /** @@ -23,13 +23,13 @@ /** * The weight of the button - * @type {"" | "danger" | "featured" | "muted"} + * @type {"" | "danger" | "featured" | "tonal"} */ variant?: Variant; /** * The weight of the button - * @type {"" | "outlined" | "filled"} + * @type {"" | "filled"} */ weight?: Weight; diff --git a/packages/stacks-svelte/src/components/Button/Button.test.ts b/packages/stacks-svelte/src/components/Button/Button.test.ts index 05603c93d2..54795f4594 100644 --- a/packages/stacks-svelte/src/components/Button/Button.test.ts +++ b/packages/stacks-svelte/src/components/Button/Button.test.ts @@ -91,10 +91,10 @@ describe("Button", () => { it("should render the appropriate variant class", () => { render(Button, { - variant: "muted", + variant: "tonal", children, }); - expect(screen.getByRole("button")).to.have.class("s-btn__muted"); + expect(screen.getByRole("button")).to.have.class("s-btn__tonal"); }); it("should render the appropriate weight class", () => { diff --git a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte index 1317bb317a..ccb2d5d882 100644 --- a/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte +++ b/packages/stacks-svelte/src/components/Modal/Modal.stories.svelte @@ -63,7 +63,7 @@ Save changes