From 02a0aba7ab23a311c021f69a081a68b0f23f7144 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 17 Nov 2025 18:53:59 -0500 Subject: [PATCH 1/3] Button styles refactor --- .../lib/components/button/button.less | 642 +++++++----------- packages/stacks-docs/_data/buttons.json | 164 +---- packages/stacks-docs/_includes/header.html | 2 +- .../product/components/buttons.html | 225 +++--- 4 files changed, 360 insertions(+), 673 deletions(-) diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index 0a5a21c410..7b32d59ecc 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -1,163 +1,180 @@ .s-btn { // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES --_bu-baw: var(--su-static1); - --_bu-bc: transparent; - // --_bu-bg: inherit; // [1] - --_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-br: var(--br-pill); --_bu-fs: var(--fs-body1); - --_bu-p: var(--su16); - --_bu-py: 11.2px; // 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-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-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); - - // Disabled - --_bu-bg-disabled: var(--black-050); - --_bu-fc-disabled: var(--black-300); - // Filled + Disabled - --_bu-filled-bg-disabled: var(--black-300); - --_bu-filled-fc-disabled: var(--black-050); - - // BASE SELECTED MODIFIER - --_bu-bg-selected: linear-gradient(to bottom, var(--theme-secondary-100) 0%, var(--theme-secondary-100) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 50%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 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-600)); - --_bu-filled-fc: var(--theme-button-primary-color, var(--black-050)); - // Filled + Selected - --_bu-filled-bc-selected: transparent; - --_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); - --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600)); - --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white)); - // Filled + Hover - --_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)); - // 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; - --_bu-badge-bg: currentColor; + --_bu-lh: var(--lh-base); + --_bu-g: var(--su8); + --_bu-px: var(--su16); + --_bu-py: calc(var(--su8) + var(--su2)); // 10px --_bu-dropdown-bw: var(--su-static4); - --_bu-number-fc: var(--white); - --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600)); - --_bu-number-fc-selected: var(--white); - + // CONTEXTUAL STYLES - .highcontrast-mode({ - --_bu-bc: var(--black-300); - --_bu-bc-selected: var(--black-300); - --_bu-badge-o: 0.8; - --_bu-number-fc-selected: var(--white); - }); - - .dark-mode({ - --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 0%, color-mix(in srgb, var(--theme-secondary-100) 60%, var(--black-050) 40%) 50%, var(--theme-secondary-100) 50%, var(--theme-secondary-100) 100%); - --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--theme-secondary-600) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--theme-secondary-600) 85%, var(--black-050) 15%) 50%, var(--theme-secondary-600) 50%, var(--theme-secondary-600) 100%); - }); - - // STATES - fieldset[disabled] &, - &[disabled], - &[aria-disabled="true"] { - pointer-events: none; - text-decoration: none; - - background-color: var(--_bu-bg-disabled); - color: var(--_bu-fc-disabled); - - &.s-btn__filled { - background-color: var(--_bu-filled-bg-disabled); - color: var(--_bu-filled-fc-disabled); + // TODO add high contrast mode styles + + // VARIANTS + // Base + &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants + --_bu-bg: var(--theme-button-color, var(--theme-secondary)); + --_bu-fc: var(--white); + --_bu-bg-disabled: var(--theme-secondary-400); // TODO SHINE do we need a disabled bg theme value? + --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500)); + --_bu-fc-hover: var(--theme-button-hover-color, var(--white)); + --_bu-bg-selected: + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--theme-secondary-500) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--theme-secondary-500) 50% + ) border-box; + --_bu-badge-bg: var(--theme-secondary-500); + --_bu-badge-bg-selected: var(--theme-secondary-500); + --_bu-badge-bg-hover: var(--theme-secondary-600); + --_bu-badge-bg-disabled: var(--theme-secondary-300); + + &.s-btn__clear { + --_bu-bg: var(--black-050); + --_bu-fc: var(--black-600); + --_bu-bg-disabled: var(--_bu-bg); + --_bu-bg-hover: var(--black-100); + --_bu-fc-hover: var(--_bu-fc); + --_bu-bg-selected: // TODO SHINE verify selected colors (see https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ?node-id=126-1248&m=dev#1517970436) + linear-gradient(0deg, + var(--black-100) 50%, + var(--black-150) 50% + ) padding-box, + linear-gradient(0deg, + var(--black-100) 50%, + var(--black-150) 50% + ) border-box; + --_bu-badge-bg: var(--theme-secondary-100); + --_bu-badge-bg-selected: var(--theme-secondary-200); + --_bu-badge-bg-hover: var(--theme-secondary-200); + --_bu-badge-bg-disabled: var(--theme-secondary-100); } } - button &, - button[type="submit"] &, - button[type="reset"] & { - -webkit-appearance: button; // [2] + &&__danger { + --_bu-bg: var(--red-400); + --_bu-fc: var(--white); + --_bu-bg-disabled: var(--red-200); + --_bu-bg-hover: var(--red-500); + --_bu-fc-selected: var(--_bu-fc); + --_bu-bg-selected: + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--red-500) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--red-500) 50% + ) border-box; + --_bu-badge-bg: var(--red-500); + --_bu-badge-bg-selected: var(--red-500); + --_bu-badge-bg-hover: var(--red-600); + --_bu-badge-bg-disabled: var(--red-200); + + &.s-btn__clear { + --_bu-bg: var(--black-050); + --_bu-fc: var(--red-400); + --_bu-bg-disabled: var(--_bu-bg); + --_bu-fc-disabled: var(--_bu-fc); + --_bu-bg-hover: var(--red-100); + --_bu-fc-hover: var(--red-500); + --_bu-fc-selected: var(--red-500); + --_bu-bg-selected: // TODO SHINE verify selected colors (see https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ?node-id=126-1248&m=dev#1517965709) + linear-gradient(0deg, + var(--red-100) 50%, + var(--red-200) 50% + ) padding-box, + linear-gradient(0deg, + var(--red-100) 50%, + var(--red-200) 50% + ) border-box; + --_bu-badge-bg: var(--red-100); + --_bu-badge-bg-selected: var(--red-200); + --_bu-badge-bg-hover: var(--red-200); + --_bu-badge-bg-disabled: var(--red-100); + } } - &.grid { - display: flex; // Override &&__danger buttons having inline-block by default + &&__featured { + --_bu-bg: var(--purple-400); + --_bu-fc: var(--white); + --_bu-bg-disabled: var(--purple-200); + --_bu-bg-hover: var(--purple-500); + --_bu-fc-selected: var(--_bu-fc); + --_bu-bg-selected: + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--purple-500) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--purple-500) 50% + ) border-box; + + --_bu-badge-bg: var(--purple-500); + --_bu-badge-bg-selected: var(--purple-500); + --_bu-badge-bg-hover: var(--purple-600); + --_bu-badge-bg-disabled: var(--purple-300); } - &.is-loading { - .svg-icon:first-child { - margin-left: calc((var(--su-static24) - var(--su-static1)) * -1); // -23px - opacity: 0; // [3] - } + &&__tonal { + --_bu-bg: var(--black-150); + --_bu-fc: var(--black); + --_bu-bg-disabled: var(--black-100); + --_bu-fc-disabled: var(--black-300); + --_bu-bg-hover: var(--black-200); + --_bu-fc-selected: var(--_bu-fc); + --_bu-bg-selected: + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--black-200) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg) 50%, + var(--black-200) 50% + ) border-box; + --_bu-badge-bg: var(--black-200); + --_bu-badge-bg-selected: var(--black-200); + --_bu-badge-bg-hover: var(--black-300); + --_bu-badge-bg-disabled: var(--black-200); - padding-left: 2.2em; } - &.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); - - .s-btn--number { - color: var(--_bu-number-fc-selected); - } - - &.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); - } + // Social + &&__facebook { + @_fb-brand: #1877F2; + --_bu-bg: @_fb-brand; + --_bu-bg-hover: darken(@_fb-brand, 5%); + --_bu-fc: #fff; + --_bu-fc-hover: var(--_bu-fc); + --_bu-hc-bc: transparent; } - // MODIFIERS - &&__filled { - .s-btn--number { - color: var(--_bu-number-fc-filled); - } - - border-color: var(--_bu-filled-bc); - background-color: var(--_bu-filled-bg); - color: var(--_bu-filled-fc); + &&__google { + --_bu-bg: var(--black-150); + --_bu-bg-hover: var(--black-200); + --_bu-fc: var(--black-600); + } - &.s-btn__danger { - .highcontrast-mode({ - --_bu-badge-bg: currentColor; - }); - } + &&__github { + --_bu-bg: var(--black-600); + --_bu-bg-hover: var(--black-500); + --_bu-fc: var(--white); } + // MODIFIERS // Resets &&__link, &&__unset { --_bu-baw: 0; --_bu-br: 0; - --_bu-p: 0; + --_bu-px: 0; + --_bu-py: 0; &:focus, &:focus-visible { @@ -191,6 +208,11 @@ &:hover, &:active, &:focus { + --_bu-baw: 0; + --_bu-br: unset; + --_bu-fs: inherit; + --_bu-lh: inherit; + --_bu-g: unset; --_bu-bg: none; --_bu-fc: unset; @@ -202,7 +224,6 @@ outline: initial; } - // Pseudo-elements and child-based modifiers &&__dropdown { &:after { border-color: currentColor transparent; @@ -210,229 +231,42 @@ border-width: var(--_bu-dropdown-bw); border-bottom-width: 0; content: ""; - pointer-events: none; - position: absolute; - right: var(--_bu-px, var(--_bu-p)); - top: calc(50% - var(--su-static2)); - z-index: var(--zi-active); } - - padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5); } - &&__icon { - .svg-icon { - vertical-align: baseline; - margin-top: -0.3em; // [4] - margin-bottom: -0.3em; // [4] - transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading + &.is-selected, + .s-btn--radio:checked + & { + &:not(:hover) { + .s-btn--badge { + .s-btn--number { + color: var(--_bu-badge-fc-selected, var(--_bu-fc-selected)); + } - &:not(:last-child) { - margin-right: var(--_bu-icon-gap); - } - - &:not(:first-child) { - margin-left: var(--_bu-icon-gap); + background-color: var(--_bu-badge-bg-selected, var(--_bu-badge-bg)); } - } - } - - // 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: 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 - } - - &&__lg { - .size-styles(md; bu; @styles: br, fs); - --_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, - &&__tonal { - .highcontrast-mode({ - --_bu-filled-bc: transparent; - }); - } - - &&__danger { - --_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) 50%, white 50%) 50%, color-mix(in srgb, var(--red-100) 50%, white 50%) 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-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: 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-bg-disabled: var(--black-050); - --_bu-fc-disabled: var(--red-200); - --_bu-filled-bg-disabled: var(--red-200); - --_bu-filled-fc-disabled: var(--black-050); - --_bu-number-fc: var(--white); - --_bu-number-fc-filled: var(--black); - .highcontrast-mode({ - --_bu-bc: var(--red-300); - --_bu-bc-selected: var(--red-300); - --_bu-badge-bg: var(--red-500); - }); - .dark-mode({ - --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--red-100) 50%, var(--black-050) 50%) 0%, color-mix(in srgb, var(--red-100) 50%, var(--black-050) 50%) 50%, var(--red-100) 50%, var(--red-100) 100%); - --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--red-500) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--red-500) 85%, var(--black-050) 15%) 50%, var(--red-500) 50%, var(--red-500) 100%); - }); - } - &&__featured { - --_bu-bg-active: var(--purple-300); - --_bu-bg-hover: var(--purple-200); - --_bu-bg-selected: var(--purple-300); - --_bu-fc: var(--purple-500); - --_bu-fc-active: var(--_bu-fc); - --_bu-fc-hover: var(--purple-500); - --_bu-fc-selected: var(--purple-600); - --_bu-filled-bc: transparent; - --_bu-filled-bc-selected: var(--_bu-filled-bc); - --_bu-filled-bg: var(--purple-400); - --_bu-filled-bg-active: var(--purple-500); - --_bu-filled-bg-hover: var(--purple-500); - --_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-filled-bg-focus: var(--purple-400); - --_bu-filled-bg-disabled: var(--purple-200); - --_bu-filled-fc-disabled: var(--black-050); - --_bu-number-fc: var(--white); - --_bu-number-fc-filled: var(--black); - .dark-mode({ - --_bu-filled-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--purple-500) 85%, var(--black-050) 15%) 0%, color-mix(in srgb, var(--purple-500) 85%, var(--black-050) 15%) 50%, var(--purple-500) 50%, var(--purple-500) 100%); - }); - } - - &&__tonal { - --_bu-bg: var(--black-150); - --_bu-bc-hover: transparent; - --_bu-bg-active: var(--black-150); - --_bu-bg-hover: var(--black-200); - --_bu-bg-selected: linear-gradient(to bottom, var(--black-200) 0%, var(--black-200) 50%, color-mix(in srgb, var(--black-200) 60%, var(--black-050) 40%) 50%, color-mix(in srgb, var(--black-200) 60%, var(--black-050) 40%) 100%); - --_bu-fc: var(--black-600); - --_bu-fc-active: var(--_bu-fc); - --_bu-fc-hover: var(--black-600); - --_bu-fc-selected: var(--black-600); - --_bu-bg-disabled: var(--black-100); - --_bu-fc-disabled: var(--black-300); - --_bu-number-fc-filled: var(--white); - --_bu-number-fc-selected: var(--white); - --_bu-number-fc-focus: var(--black-600); - - .highcontrast-mode({ - --_bu-bc-hover: currentColor; - --_bu-bg-hover: var(--black-225); - // // The filled modifier on the muted button is deprecated and is to be - // // removed in Stacks Classic v2 - --_bu-filled-bg: var(--black-400); - --_bu-filled-bg-active: var(--black-500); - --_bu-filled-bg-hover: var(--black-400); - --_bu-filled-bg-selected: var(--black-500); - --_bu-filled-fc: var(--white); - --_bu-filled-fc-selected: var(--_bu-filled-fc); - --_bu-bc-selected: currentColor; - --_bu-fc-selected: var(--black); - --_bu-number-fc: var(--white); - --_bu-number-fc-filled: var(--black); - --_bu-number-fc-selected: var(--white); - }); - - .dark-mode({ - --_bu-bg-selected: linear-gradient(to bottom, color-mix(in srgb, var(--black-200) 70%, var(--black-050) 30%) 0%, color-mix(in srgb, var(--black-200) 70%, var(--black-050) 30%) 50%, var(--black-200) 50%, var(--black-200) 100%); - }); - } - - // Social - &&__facebook, - &&__github { - .highcontrast-mode({ - --_bu-bc: transparent; - }); - } - - &&__facebook { - @_fb-brand: #1877F2; - --_bu-bc: transparent; - --_bu-bg: @_fb-brand; - --_bu-bg-active: darken(@_fb-brand, 10%); - --_bu-bg-hover: darken(@_fb-brand, 5%); - --_bu-fc: #fff; - --_bu-fc-active: var(--_bu-fc); - --_bu-fc-hover: var(--_bu-fc); - --_bu-hc-bc: transparent; - } - - &&__google { - --_bu-bc: var(--bc-medium); - --_bu-bg: var(--black-150); - --_bu-bg-active: var(--black-150); - --_bu-bg-hover: var(--black-100); - --_bu-fc: var(--fc-medium); - --_bu-fc-active: var(--fc-dark); - --_bu-fc-hover: var(--black-600); - } - - &&__github { - --_bu-bg: var(--black-600); - --_bu-bg-active: var(--black); - --_bu-bg-hover: var(--black-600); - --_bu-fc: var(--white); - --_bu-fc-active: var(--white); - --_bu-fc-hover: var(--white); - --_bu-hc-bc: transparent; + background: var(--_bu-bg-selected, var(--_bu-bg)); + color: var(--_bu-fc-selected, var(--_bu-fc)); + } } // CHILD ELEMENTS + // TODO SHINE fine-tune badge styles & &--badge { - opacity: var(--_bu-badge-o); + background-color: var(--_bu-badge-bg); + border-radius: var(--br-pill); display: inline-block; - border-radius: var(--br-md); - padding: var(--su2) calc(var(--su4) - var(--su1)); font-size: var(--fs-caption); - line-height: var(--lh-xs); - background-color: var(--_bu-badge-bg); + line-height: inherit; + opacity: var(--_bu-badge-o); + padding: var(--su2) var(--su4) 0; } & &--number { - color: var(--_bu-number-fc); + color: var(--_bu-badge-fc, var(--_bu-fc)); } + // TODO SHINE do we still need this? &--radio { // This lives alongside a .s-btn element. These styles are the equivelent of `.v-visible-sr` border: 0; clip-path: inset(50%); @@ -446,98 +280,86 @@ width: var(--su-static1); } + // Sizes + &&__xs, + &&__sm { + --_bu-lh: var(--lh-sm); + --_bu-px: var(--su12); + } + &&__xs { + --_bu-gap: var(--su4); + --_bu-fs: var(--fs-fine); + --_bu-py: var(--su6); + } + &&__sm { + --_bu-gap: var(--su6); + --_bu-fs: var(--fs-caption); + --_bu-py: var(--su8); + } + &&__lg { + --_bu-fs: var(--fs-body2); + --_bu-px: var(--su24); + --_bu-py: calc(var(--su12) + var(--su1)); // 13px + } + // INTERACTION &:not(&__link):not(&__unset):focus-visible, &--radio:focus-visible + & { - .focus-styles(true, true); + .focus-styles(false, true); } - &:not(&--radio:checked + label):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google):not(.is-selected) { - &:focus-visible, - &.focus-inset-bordered { - &:not(:hover) .s-btn--number { - 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)); + &:hover { + .s-btn--badge { + .s-btn--number { + color: var(--_bu-badge-fc-hover, var(--_bu-fc-hover)); } - background-color: var(--_bu-bg-focus, var(--_bu-filled-bg)); - color: var(--_bu-fc-focus, var(--_bu-filled-fc)); + background-color: var(--_bu-badge-bg-hover, var(--_bu-badge-bg)); } - &:hover { - &.s-btn__filled { - background-color: var(--_bu-filled-bg-hover); - border-color: var(--_bu-filled-bc-hover); - color: var(--_bu-filled-fc-hover); - } - - &:not(.s-btn__toned):not(.s-btn__filled) { - border-color: var(--_bu-bc-hover); - } + background: var(--_bu-bg-hover, var(--_bu-bg)); + color: var(--_bu-fc-hover, var(--_bu-fc)); + } - &:visited:not(:active):not(:focus) { - &:not(.s-btn__toned) { - &.s-btn__filled { - background-color: var(--_bu-filled-bg-hover); - border-color: var(--_bu-filled-bc-hover); - color: var(--_bu-filled-fc-hover); - } - - background-color: var(--_bu-bg); - border-color: var(--_bu-bc); - color: var(--_bu-fc); + fieldset[disabled] &, + &[disabled], + &[aria-disabled="true"] { + &, + &:hover { + .s-btn--badge { + .s-btn--number { + color: var(--_bu-badge-fc-disabled, var(--_bu-fc-disabled)); } - } - - background-color: var(--_bu-bg-hover); - color: var(--_bu-fc-hover); - } - &:active { - &.s-btn__filled { - background-color: var(--_bu-filled-bg-active); - border-color: var(--_bu-filled-bc-active); - color: var(--_bu-filled-fc-active); + background-color: var(--_bu-badge-bg-disabled, var(--_bu-badge-bg)); } - background-color: var(--_bu-bg-active); - border-color: var(--_bu-bc-active); - color: var(--_bu-fc-active); + background: var(--_bu-bg-disabled, var(--theme-secondary-400)); + color: var(--_bu-fc-disabled, var(--_bu-fc)); } + + cursor: auto; + // TODO SHINE add cursor styles } - background-color: var(--_bu-bg, inherit); // [1] - border: var(--_bu-baw) solid var(--_bu-bc); - border-radius: var(--_bu-br); - box-shadow: none; + background: var(--_bu-bg); + border-color: transparent; + border-width: var(--_bu-baw); color: var(--_bu-fc); font-size: var(--_bu-fs); - padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p)); + gap: var(--_bu-g); + padding: var(--_bu-py) var(--_bu-px); + align-items: center; + border-radius: var(--_bu-br); + border-style: solid; cursor: pointer; - display: inline-block; - font-family: inherit; - font-weight: var(--_bu-fw, 600); - line-height: var(--lh-sm); + display: inline-flex; + font-weight: 600; // TODO SHINE verify weight + justify-content: center; + line-height: var(--_bu-lh); position: relative; - outline: none; text-align: center; text-decoration: none; user-select: none; } - -// [1] Passing `inherit` as a custom property value has no effect, instead we -// provide it as a fallback value for when --_bu-bg is not defined -// For more info, see https://stackoverflow.com/a/53239881/652353 -// [2] Guard against the difference in configurable resets -// Eric Meyer's reset does not include this, while normalize.css does -// Correct the inability to style buttons in iOS and Safari. -// [3] If the first thing in the button is an icon, let's hide it on loading -// We only want to modify the visibility, since we still want it to have shape and keep the same layout. -// [4] Most svg icons are 18px tall, but the button's line-height is 1 (13px). -// This means we need to off set the margin y-axis so we don't add -// additional height to the button. \ No newline at end of file diff --git a/packages/stacks-docs/_data/buttons.json b/packages/stacks-docs/_data/buttons.json index b218dfe4e9..a26062cb88 100644 --- a/packages/stacks-docs/_data/buttons.json +++ b/packages/stacks-docs/_data/buttons.json @@ -4,11 +4,11 @@ "title": "Base", "classes": [ { - "title": "Clear" + "title": "Base" }, { - "title": "Filled", - "class": "s-btn__filled" + "title": "Clear", + "class": "s-btn__clear" } ] } @@ -19,11 +19,11 @@ "class": "s-btn__danger", "classes": [ { - "title": "Clear" + "title": "Base" }, { - "title": "Filled", - "class": "s-btn__filled" + "title": "Clear", + "class": "s-btn__clear" } ] } @@ -35,8 +35,7 @@ "class": "s-btn__featured", "classes": [ { - "title": "Filled", - "class": "s-btn__filled" + "title": "Base" } ] } @@ -47,140 +46,35 @@ "class": "s-btn__tonal", "classes": [ { - "title": "N/A" + "title": "Base" } ] } ], - "loading": [ + "variants": [ { - "title": "Loaders", - "class": "is-loading", - "classes": [ - { - "title": "Secondary, Clear" - }, - { - "title": "Secondary, Filled", - "class": "s-btn__filled" - }, - { - "title": "Danger, Clear", - "class": "s-btn__danger" - }, - { - "title": "Danger, Filled", - "class": "s-btn__danger", - "class2": "s-btn__filled" - }, - { - "title": "Featured, Filled", - "class": "s-btn__featured", - "class2": "s-btn__filled" - }, - { - "title": "Tonal", - "class": "s-btn__tonal" - } - ] - } - ], - "dropdown": [ + "title": "Base" + }, { - "title": "Dropdown", - "class": "s-btn__dropdown", - "classes": [ - { - "title": "Secondary, Clear" - }, - { - "title": "Secondary, Filled", - "class": "s-btn__filled" - }, - { - "title": "Danger, Clear", - "class": "s-btn__danger" - }, - { - "title": "Danger, Filled", - "class": "s-btn__danger", - "class2": "s-btn__filled" - }, - { - "title": "Featured, Filled", - "class": "s-btn__featured", - "class2": "s-btn__filled" - }, - { - "title": "Tonal", - "class": "s-btn__tonal" - } - ] - } - ], - "anchor": [ + "title": "Base, Clear", + "modifier": "s-btn__clear" + }, { - "title": "Anchors", - "classes": [ - { - "title": "Secondary, Clear" - }, - { - "title": "Secondary, Filled", - "class": "s-btn__filled" - }, - { - "title": "Danger, Clear", - "class": "s-btn__danger" - }, - { - "title": "Danger, Filled", - "class": "s-btn__danger", - "class2": "s-btn__filled" - }, - { - "title": "Featured, Filled", - "class": "s-btn__featured", - "class2": "s-btn__filled" - }, - { - "title": "Tonal", - "class": "s-btn__tonal" - } - ] - } - ], - "badges": [ + "title": "Tonal", + "variant": "s-btn__tonal" + }, { - "title": "Badge", - "class": "s-btn--badge", - "classes": [ - { - "title": "Secondary, Clear" - }, - { - "title": "Secondary, Filled", - "class": "s-btn__filled" - }, - { - "title": "Danger, Clear", - "class": "s-btn__danger" - }, - { - "title": "Danger, Filled", - "class": "s-btn__danger", - "class2": "s-btn__filled" - }, - { - "title": "Featured, Filled", - "class": "s-btn__featured", - "class2": "s-btn__filled" - }, - { - "title": "Tonal", - "class": "s-btn__tonal" - } - ] + "title": "Danger", + "variant": "s-btn__danger" + }, + { + "title": "Danger, Clear", + "variant": "s-btn__danger", + "modifier": "s-btn__clear" + }, + { + "title": "Featured", + "variant": "s-btn__featured" } ], "sizes": [ @@ -201,7 +95,7 @@ }, { "size": "Large", - "fs": "16px", + "fs": "17px", "class": "s-btn__lg" } ] diff --git a/packages/stacks-docs/_includes/header.html b/packages/stacks-docs/_includes/header.html index deacf4a47a..753c322033 100644 --- a/packages/stacks-docs/_includes/header.html +++ b/packages/stacks-docs/_includes/header.html @@ -60,7 +60,7 @@
  • - - + {% endhighlight %}
    @@ -49,12 +45,12 @@ {{ class.title }}
    - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
    @@ -71,11 +67,12 @@
    {% header "h3", "Danger" %} +

    Danger buttons are a secondary button style, used to visually communicate destructive actions such as deleting content, accounts, or canceling services.

    {% highlight html %} - + {% endhighlight %}
    @@ -97,12 +94,12 @@ {{ class.title }}
    - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
    @@ -120,12 +117,12 @@ {% header "h3", "Featured" %} -

    Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.

    {% highlight html %} - + + {% endhighlight %}
    @@ -149,12 +146,10 @@
    - .s-btn - {% if btn.class != nil %} - .{{ btn.class }} - {% endif %} + .s-btn + .s-btn__featured {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
    @@ -172,11 +167,12 @@ {% 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 %}
    @@ -197,20 +193,15 @@ {{ class.title }} - {% if class.title == "Filled" %} -
    - Deprecated -
    - {% endif %}
    - .s-btn + .s-btn {% if btn.class != nil %} - .{{ btn.class }} + .{{ btn.class }} {% endif %} {% if class.class != nil %} - .{{ class.class }} + .{{ class.class }} {% endif %}
    @@ -249,30 +240,25 @@ - {% for btn in buttons.anchor %} - {% assign types = btn.classes %} - {% for class in types %} + {% for btn in buttons.variants %} - {{ class.title }} + {{ btn.title }}
    - .s-btn - {% if class.class != nil %} - .{{ class.class }} + .s-btn + {% if btn.variant != nil %} + .{{ btn.variant }} {% endif %} - {% if class.class2 != nil %} - .{{ class.class2 }} - {% endif %} - {% if btn.class != nil %} - .{{ btn.class }} + {% if btn.modifier != nil %} + .{{ btn.modifier }} {% endif %} + .is-loading
    - Ask question - Ask question - Ask question + Ask question + Ask question + Ask question - {% endfor %} {% endfor %} @@ -301,30 +287,25 @@ - {% for btn in buttons.loading %} - {% assign types = btn.classes %} - {% for class in types %} + {% for btn in buttons.variants %} - {{ class.title }} + {{ btn.title }}
    - .s-btn - {% if class.class != nil %} - .{{ class.class }} + .s-btn + {% if btn.variant != nil %} + .{{ btn.variant }} {% endif %} - {% if class.class2 != nil %} - .{{ class.class2 }} - {% endif %} - {% if btn.class != nil %} - .{{ btn.class }} + {% if btn.modifier != nil %} + .{{ btn.modifier }} {% endif %} + .is-loading
    - - - + + + - {% endfor %} {% endfor %} @@ -353,30 +334,25 @@ - {% for btn in buttons.dropdown %} - {% assign types = btn.classes %} - {% for class in types %} + {% for btn in buttons.variants %} - {{ class.title }} + {{ btn.title }}
    - .s-btn - {% if class.class != nil %} - .{{ class.class }} + .s-btn + {% if btn.variant != nil %} + .{{ btn.variant }} {% endif %} - {% if class.class2 != nil %} - .{{ class.class2 }} - {% endif %} - {% if btn.class != nil %} - .{{ btn.class }} + {% if btn.modifier != nil %} + .{{ btn.modifier }} {% endif %} + .s-btn__dropdown
    - - - + + + - {% endfor %} {% endfor %} @@ -411,42 +387,37 @@ - {% for btn in buttons.badges %} - {% assign types = btn.classes %} - {% for class in types %} + {% for btn in buttons.variants %} - {{ class.title }} + {{ btn.title }}
    - .s-btn - {% if class.class != nil %} - .{{ class.class }} - {% endif %} - {% if class.class2 != nil %} - .{{ class.class2 }} + .s-btn + {% if btn.variant != nil %} + .{{ btn.variant }} {% endif %} - {% if btn.class != nil %} - .{{ btn.class }} + {% if btn.modifier != nil %} + .{{ btn.modifier }} {% endif %} + .s-btn--badge
    - - - - {% endfor %} {% endfor %} @@ -477,11 +448,11 @@ {% if size.class == "N/A" %} {{ size.class }} {% else %} - {{ size.class }} + {{ size.class }} {% endif %} {{ size.fs }} - + {% endfor %} @@ -510,8 +481,8 @@ {% endhighlight %}
    - - + +
    @@ -539,7 +510,7 @@ [aria-disabled="true"] Adds disabled styling to any element with .s-btn applied. - Ask question + Ask question @@ -560,7 +531,7 @@ Unset - .s-btn__unset + .s-btn__unset Removes all styling from a button and reverts focus states to browser default. @@ -568,7 +539,7 @@ Link - .s-btn__link + .s-btn__link Styles a button element as though it were a link. Instead of transforming an s-btn to a link, you most likely want to style a button as a link. @@ -592,12 +563,12 @@ Icon - .s-btn__icon + .s-btn__icon Adds some margin overrides that apply to an icon within a button - - + @@ -622,31 +593,31 @@ Facebook - .s-btn__facebook + .s-btn__facebook Styles a button consistent with Facebook’s branding - + Google - .s-btn__google + .s-btn__google Styles a button consistent with Google’s branding - + GitHub - .s-btn__github + .s-btn__github Styles a button consistent with GitHub’s branding - + @@ -662,13 +633,13 @@

    Most button groups should be ordered from the most important to the least important action, left to right.

    {% highlight html %} - - + + {% endhighlight %}
    - - + +
    @@ -678,14 +649,14 @@
    {% highlight html %}
    - - + +
    {% endhighlight %}
    - - + +
    @@ -696,22 +667,22 @@ {% highlight html %}
    -

    Write your response

    +

    Write your response

    - - + +
    {% endhighlight %}
    -

    Write your response

    +

    Write your response

    - - + +
    From c86f01f14399ab29629a20cc4b96cc488dfdc5b7 Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Mon, 17 Nov 2025 19:32:01 -0500 Subject: [PATCH 2/3] minor tweaks --- .../lib/components/button/button.less | 29 ++++++++++++------- packages/stacks-docs/brand/typography.html | 4 +-- .../email/guidelines/getting-started.html | 6 ++-- .../product/components/sidebar-widgets.html | 4 +-- 4 files changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index 7b32d59ecc..5ae3bade0c 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -8,9 +8,6 @@ --_bu-px: var(--su16); --_bu-py: calc(var(--su8) + var(--su2)); // 10px --_bu-dropdown-bw: var(--su-static4); - - // CONTEXTUAL STYLES - // TODO add high contrast mode styles // VARIANTS // Base @@ -22,12 +19,12 @@ --_bu-fc-hover: var(--theme-button-hover-color, var(--white)); --_bu-bg-selected: linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--theme-secondary-500) 50% + var(--theme-secondary-500) 50%, + var(--_bu-bg) 50% ) padding-box, linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--theme-secondary-500) 50% + var(--theme-secondary-500) 50%, + var(--_bu-bg) 50% ) border-box; --_bu-badge-bg: var(--theme-secondary-500); --_bu-badge-bg-selected: var(--theme-secondary-500); @@ -35,7 +32,7 @@ --_bu-badge-bg-disabled: var(--theme-secondary-300); &.s-btn__clear { - --_bu-bg: var(--black-050); + --_bu-bg: transparent; --_bu-fc: var(--black-600); --_bu-bg-disabled: var(--_bu-bg); --_bu-bg-hover: var(--black-100); @@ -53,6 +50,10 @@ --_bu-badge-bg-selected: var(--theme-secondary-200); --_bu-badge-bg-hover: var(--theme-secondary-200); --_bu-badge-bg-disabled: var(--theme-secondary-100); + + .highcontrast-mode({ + --_bu-bc-disabled: var(--theme-secondary-600); + }); } } @@ -97,6 +98,10 @@ --_bu-badge-bg-selected: var(--red-200); --_bu-badge-bg-hover: var(--red-200); --_bu-badge-bg-disabled: var(--red-100); + + .highcontrast-mode({ + --_bu-bc-disabled: var(--red-300); + }); } } @@ -143,6 +148,10 @@ --_bu-badge-bg-hover: var(--black-300); --_bu-badge-bg-disabled: var(--black-200); + .highcontrast-mode({ + --_bu-bc: var(--black-300); + }); + } // Social @@ -335,6 +344,7 @@ } background: var(--_bu-bg-disabled, var(--theme-secondary-400)); + border-color: var(--_bu-bc-disabled, var(--_bu-bc, transparent)); color: var(--_bu-fc-disabled, var(--_bu-fc)); } @@ -343,8 +353,7 @@ } background: var(--_bu-bg); - border-color: transparent; - border-width: var(--_bu-baw); + border: var(--_bu-baw) solid var(--_bu-bc, transparent); color: var(--_bu-fc); font-size: var(--_bu-fs); gap: var(--_bu-g); diff --git a/packages/stacks-docs/brand/typography.html b/packages/stacks-docs/brand/typography.html index da2cc7e44c..49d0e16dbb 100644 --- a/packages/stacks-docs/brand/typography.html +++ b/packages/stacks-docs/brand/typography.html @@ -9,7 +9,7 @@ {% header "h2", "Headers" %}

    Roboto Slab is an open-source slab serif with geometric forms and friendly and open curves. We use it for headings and numerical call outs.

    - + {% icon "Share", "mr2" %} Download at Google Fonts @@ -19,7 +19,7 @@ {% header "h2", "Paragraphs & subheadings" %}

    Source Sans Pro is an open-source sans serif that works well for legibility in UI environments.

    - + {% icon "Share", "mr2" %} Download at Google Fonts diff --git a/packages/stacks-docs/email/guidelines/getting-started.html b/packages/stacks-docs/email/guidelines/getting-started.html index 48b3830a16..9392e9a637 100644 --- a/packages/stacks-docs/email/guidelines/getting-started.html +++ b/packages/stacks-docs/email/guidelines/getting-started.html @@ -66,7 +66,7 @@

    Knowledge and resources<

    Design best practices

    Emails don’t need to look the same in every email client, but there are some things to keep in mind when working on emails.

    -

    View design best practices

    +

    View design best practices

    FAQ

    @@ -76,7 +76,7 @@

    FAQWhat is preview text?

  • How should images be prepared?
    • -

    View all FAQs

    +

    View all FAQs

    @@ -245,7 +245,7 @@

    Email client breakdown

    -

    Tools for testing

    +

    Tools for testing

    diff --git a/packages/stacks-docs/product/components/sidebar-widgets.html b/packages/stacks-docs/product/components/sidebar-widgets.html index 5390894991..f08a84b3a8 100644 --- a/packages/stacks-docs/product/components/sidebar-widgets.html +++ b/packages/stacks-docs/product/components/sidebar-widgets.html @@ -320,10 +320,10 @@

    - + Job preferences - + Save as PDF
    From c2c09949df0c3999525d700c94ae2334a8deea3a Mon Sep 17 00:00:00 2001 From: Dan Cormier Date: Tue, 18 Nov 2025 15:22:46 -0500 Subject: [PATCH 3/3] Styles and such --- .../lib/components/button/button.less | 207 ++++++++---------- .../product/components/buttons.html | 1 - 2 files changed, 88 insertions(+), 120 deletions(-) diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less index 5ae3bade0c..cbfc439a6d 100644 --- a/packages/stacks-classic/lib/components/button/button.less +++ b/packages/stacks-classic/lib/components/button/button.less @@ -1,5 +1,4 @@ .s-btn { - // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES --_bu-baw: var(--su-static1); --_bu-br: var(--br-pill); --_bu-fs: var(--fs-body1); @@ -13,46 +12,30 @@ // Base &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants --_bu-bg: var(--theme-button-color, var(--theme-secondary)); - --_bu-fc: var(--white); - --_bu-bg-disabled: var(--theme-secondary-400); // TODO SHINE do we need a disabled bg theme value? + --_bu-bg-disabled: var(--theme-secondary-300); --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500)); + --_bu-fc: var(--white); --_bu-fc-hover: var(--theme-button-hover-color, var(--white)); - --_bu-bg-selected: - linear-gradient(0deg, - var(--theme-secondary-500) 50%, - var(--_bu-bg) 50% - ) padding-box, - linear-gradient(0deg, - var(--theme-secondary-500) 50%, - var(--_bu-bg) 50% - ) border-box; - --_bu-badge-bg: var(--theme-secondary-500); - --_bu-badge-bg-selected: var(--theme-secondary-500); - --_bu-badge-bg-hover: var(--theme-secondary-600); - --_bu-badge-bg-disabled: var(--theme-secondary-300); + --_bu-badge-bg: var(--theme-secondary-200); + --_bu-badge-fc: var(--theme-secondary-600); + --_bu-badge-bg-disabled: var(--theme-secondary-200); + --_bu-badge-fc-disabled: var(--theme-secondary-300); &.s-btn__clear { --_bu-bg: transparent; - --_bu-fc: var(--black-600); --_bu-bg-disabled: var(--_bu-bg); - --_bu-bg-hover: var(--black-100); + --_bu-bg-hover: var(--theme-secondary-100); + --_bu-bg-selected: var(--theme-secondary-100); + --_bu-fc: var(--theme-secondary-600); + --_bu-fc-disabled: var(--theme-secondary-300); --_bu-fc-hover: var(--_bu-fc); - --_bu-bg-selected: // TODO SHINE verify selected colors (see https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ?node-id=126-1248&m=dev#1517970436) - linear-gradient(0deg, - var(--black-100) 50%, - var(--black-150) 50% - ) padding-box, - linear-gradient(0deg, - var(--black-100) 50%, - var(--black-150) 50% - ) border-box; - --_bu-badge-bg: var(--theme-secondary-100); - --_bu-badge-bg-selected: var(--theme-secondary-200); - --_bu-badge-bg-hover: var(--theme-secondary-200); - --_bu-badge-bg-disabled: var(--theme-secondary-100); + --_bu-badge-bg: var(--theme-secondary-500); + --_bu-badge-fc: var(--white); + --_bu-badge-bg-disabled: var(--theme-secondary-300); + --_bu-badge-fc-disabled: var(--white); .highcontrast-mode({ - --_bu-bc-disabled: var(--theme-secondary-600); + --_bu-bc: var(--theme-secondary-600); }); } } @@ -62,42 +45,27 @@ --_bu-fc: var(--white); --_bu-bg-disabled: var(--red-200); --_bu-bg-hover: var(--red-500); + --_bu-bg-selected: var(--red-500); --_bu-fc-selected: var(--_bu-fc); - --_bu-bg-selected: - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--red-500) 50% - ) padding-box, - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--red-500) 50% - ) border-box; - --_bu-badge-bg: var(--red-500); - --_bu-badge-bg-selected: var(--red-500); - --_bu-badge-bg-hover: var(--red-600); - --_bu-badge-bg-disabled: var(--red-200); + --_bu-badge-bg: var(--red-100); + --_bu-badge-fc: var(--red-400); + --_bu-badge-bg-disabled: var(--white); + --_bu-badge-fc-disabled: var(--red-200); &.s-btn__clear { - --_bu-bg: var(--black-050); - --_bu-fc: var(--red-400); + --_bu-bg: transparent; --_bu-bg-disabled: var(--_bu-bg); - --_bu-fc-disabled: var(--_bu-fc); --_bu-bg-hover: var(--red-100); + --_bu-bg-selected: var(--red-100); + --_bu-fc: var(--red-400); + --_bu-fc-disabled: var(--red-200); --_bu-fc-hover: var(--red-500); --_bu-fc-selected: var(--red-500); - --_bu-bg-selected: // TODO SHINE verify selected colors (see https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ?node-id=126-1248&m=dev#1517965709) - linear-gradient(0deg, - var(--red-100) 50%, - var(--red-200) 50% - ) padding-box, - linear-gradient(0deg, - var(--red-100) 50%, - var(--red-200) 50% - ) border-box; - --_bu-badge-bg: var(--red-100); - --_bu-badge-bg-selected: var(--red-200); - --_bu-badge-bg-hover: var(--red-200); - --_bu-badge-bg-disabled: var(--red-100); + --_bu-badge-bg: var(--red-400); + --_bu-badge-bg-selected: var(--red-400); + --_bu-badge-fc: var(--red-100); + --_bu-badge-bg-disabled: var(--red-200); + --_bu-badge-fc-disabled: var(--white); .highcontrast-mode({ --_bu-bc-disabled: var(--red-300); @@ -107,46 +75,28 @@ &&__featured { --_bu-bg: var(--purple-400); - --_bu-fc: var(--white); --_bu-bg-disabled: var(--purple-200); --_bu-bg-hover: var(--purple-500); + --_bu-bg-selected: var(--purple-500); + --_bu-fc: var(--white); --_bu-fc-selected: var(--_bu-fc); - --_bu-bg-selected: - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--purple-500) 50% - ) padding-box, - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--purple-500) 50% - ) border-box; - - --_bu-badge-bg: var(--purple-500); - --_bu-badge-bg-selected: var(--purple-500); - --_bu-badge-bg-hover: var(--purple-600); - --_bu-badge-bg-disabled: var(--purple-300); + --_bu-badge-bg: var(--purple-100); + --_bu-badge-fc: var(--purple-400); + --_bu-badge-bg-disabled: var(--white); + --_bu-badge-fc-disabled: var(--purple-200); } &&__tonal { --_bu-bg: var(--black-150); - --_bu-fc: var(--black); --_bu-bg-disabled: var(--black-100); - --_bu-fc-disabled: var(--black-300); --_bu-bg-hover: var(--black-200); + --_bu-fc: var(--black); + --_bu-fc-disabled: var(--black-300); --_bu-fc-selected: var(--_bu-fc); - --_bu-bg-selected: - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--black-200) 50% - ) padding-box, - linear-gradient(0deg, - var(--_bu-bg) 50%, - var(--black-200) 50% - ) border-box; - --_bu-badge-bg: var(--black-200); - --_bu-badge-bg-selected: var(--black-200); - --_bu-badge-bg-hover: var(--black-300); - --_bu-badge-bg-disabled: var(--black-200); + --_bu-badge-bg: var(--black-500); + --_bu-badge-fc: var(--white); + --_bu-badge-bg-disabled: var(--black-300); + --_bu-badge-fc-disabled: var(--white); .highcontrast-mode({ --_bu-bc: var(--black-300); @@ -161,7 +111,6 @@ --_bu-bg-hover: darken(@_fb-brand, 5%); --_bu-fc: #fff; --_bu-fc-hover: var(--_bu-fc); - --_bu-hc-bc: transparent; } &&__google { @@ -218,12 +167,12 @@ &:active, &:focus { --_bu-baw: 0; + --_bu-bg: none; --_bu-br: unset; + --_bu-fc: unset; --_bu-fs: inherit; - --_bu-lh: inherit; --_bu-g: unset; - --_bu-bg: none; - --_bu-fc: unset; + --_bu-lh: inherit; cursor: default; font: unset; @@ -245,18 +194,30 @@ &.is-selected, .s-btn--radio:checked + & { - &:not(:hover) { - .s-btn--badge { - .s-btn--number { - color: var(--_bu-badge-fc-selected, var(--_bu-fc-selected)); - } + --_bu-bg-selected-overlay: color-mix( + in srgb, + var(--_bu-bg-selected, var(--_bu-bg)), + var(--white) 25% + ); - background-color: var(--_bu-badge-bg-selected, var(--_bu-badge-bg)); + .s-btn--badge { + .s-btn--number { + color: var(--_bu-badge-fc, var(--_bu-fc)); } - background: var(--_bu-bg-selected, var(--_bu-bg)); - color: var(--_bu-fc-selected, var(--_bu-fc)); + background-color: var(--_bu-badge-bg); } + + background: + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, + var(--_bu-bg-selected, var(--_bu-bg)) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, + var(--_bu-bg-selected, var(--_bu-bg)) 50% + ) border-box; + color: var(--_bu-fc-selected, var(--_bu-fc)); } // CHILD ELEMENTS @@ -268,7 +229,7 @@ font-size: var(--fs-caption); line-height: inherit; opacity: var(--_bu-badge-o); - padding: var(--su2) var(--su4) 0; + padding: var(--su1) var(--su4) 0; } & &--number { @@ -296,12 +257,12 @@ --_bu-px: var(--su12); } &&__xs { - --_bu-gap: var(--su4); + --_bu-g: var(--su4); --_bu-fs: var(--fs-fine); --_bu-py: var(--su6); } &&__sm { - --_bu-gap: var(--su6); + --_bu-g: var(--su6); --_bu-fs: var(--fs-caption); --_bu-py: var(--su8); } @@ -318,15 +279,15 @@ } &:hover { - .s-btn--badge { - .s-btn--number { - color: var(--_bu-badge-fc-hover, var(--_bu-fc-hover)); - } - - background-color: var(--_bu-badge-bg-hover, var(--_bu-badge-bg)); - } - - background: var(--_bu-bg-hover, var(--_bu-bg)); + background: + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, + var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, + var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50% + ) border-box; color: var(--_bu-fc-hover, var(--_bu-fc)); } @@ -337,10 +298,10 @@ &:hover { .s-btn--badge { .s-btn--number { - color: var(--_bu-badge-fc-disabled, var(--_bu-fc-disabled)); + color: var(--_bu-badge-fc-disabled); } - background-color: var(--_bu-badge-bg-disabled, var(--_bu-badge-bg)); + background-color: var(--_bu-badge-bg-disabled); } background: var(--_bu-bg-disabled, var(--theme-secondary-400)); @@ -349,10 +310,17 @@ } cursor: auto; - // TODO SHINE add cursor styles } - background: var(--_bu-bg); + background: + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, + var(--_bu-bg) 50% + ) padding-box, + linear-gradient(0deg, + var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, + var(--_bu-bg) 50% + ) border-box; border: var(--_bu-baw) solid var(--_bu-bc, transparent); color: var(--_bu-fc); font-size: var(--_bu-fs); @@ -364,6 +332,7 @@ border-style: solid; cursor: pointer; display: inline-flex; + font-family: inherit; font-weight: 600; // TODO SHINE verify weight justify-content: center; line-height: var(--_bu-lh); diff --git a/packages/stacks-docs/product/components/buttons.html b/packages/stacks-docs/product/components/buttons.html index ec9047f9cd..24e2a8a96e 100644 --- a/packages/stacks-docs/product/components/buttons.html +++ b/packages/stacks-docs/product/components/buttons.html @@ -252,7 +252,6 @@ {% if btn.modifier != nil %} .{{ btn.modifier }} {% endif %} - .is-loading Ask question