feat(button) - update button base styles for SHINE #2008

ttaylor-stack · 2025-10-17T15:33:04Z

PR to update button component to match the new SHINE base styles

Ticket: https://stackoverflow.atlassian.net/browse/SPARK-55
Figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=4272-20325&m=dev

NOTE: I haven't pushed the visual regression tests yet (there's over 2.5k) that's why the visual regression tests are failing

Questions/Concerns:

I've used decimal pixel values to get the button height exactly as specified however in the refinement meeting yesterday it was mentioned that this might not be necessary. Should I round these values up/down to make use of the static pixel values? cc: @dancormier
I have updated the badge background color to be red-500 within the danger variant in high contrast mode in order to keep the 7:1 ratio. Let me know if that is okay or needs updating cc: @CGuindon @dancormier

changeset-bot · 2025-10-17T15:33:08Z

🦋 Changeset detected

Latest commit: 850fdf3

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-10-17T15:33:10Z

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`850fdf3`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/691761e27d3bc50008bf0760
😎 Deploy Preview	https://deploy-preview-2008--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

netlify · 2025-10-17T15:33:10Z

✅ Deploy Preview for stacks-svelte ready!

Name	Link
🔨 Latest commit	`850fdf3`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/691761e27d3bc50008bf075c
😎 Deploy Preview	https://deploy-preview-2008--stacks-svelte.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

dancormier

Hey @ttaylor-stack I looked it over and made a few broad suggestions that might help out. I'm happy to discuss more while we pair on Monday. Thanks for taking on this beastly redesign 🙂

dancormier · 2025-10-17T18:07:35Z

packages/stacks-classic/lib/components/button/button.less

            transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
+
+            &:not(:last-child) {
+                margin-right: var(--_bu-icon-gap, 8px);


No need for the fallback 8px value here. Since --_bu-icon-gap is defined in a broader scope, it should always have a value.

dancormier · 2025-10-17T18:07:49Z

packages/stacks-classic/lib/components/button/button.less

+            }
+
+            &:not(:first-child) {
+                margin-left: var(--_bu-icon-gap, 8px);


Same here. No need for the fallback 8px value.

dancormier · 2025-10-17T18:20:48Z

packages/stacks-classic/lib/components/button/button.less

    --_bu-bc: transparent;
    // --_bu-bg: inherit; // [1]
-    --_bu-br: var(--br-md);
+    --_bu-br: 20px;


Instead of using a hardcoded value here, I suggest using a border radius variable (I think --br-pill would be best).

Extra context: Design plans on simplifying our border radii to something like none (0), round (10px I think), pill (1000px), and potentially circle (100%).

I suggest adding a todo here to convert this value to an atomic value once border radius is updated in our libraries (see SPARK-91).

dancormier · 2025-10-17T18:28:06Z

packages/stacks-classic/lib/components/button/button.less

+    --_bu-p: 10px;
+    --_bu-px: 16px;
+    --_bu-py: 10px;


When reasonably possible, I'd like to stick to sizing variables instead of hardcoded values. For example, 10px would be represented using a calc(var(--su8) + var(--su2)).

Extra context: We have sizing units that are variable and static. Check out this ADR for more info about this approach.

dancormier · 2025-10-17T18:44:57Z

packages/stacks-classic/lib/components/button/button.less

-        --_bu-p: 0.6em;
+        --_bu-fs: 12px; // Override size-styles for custom font size
+        --_bu-px: 12px; // 12px padding as per Figma specs
+        --_bu-py: 10px;
+        --_bu-icon-gap: 4px; // 4px spacing as per Figma specs


This sort of stuff will be tricky until we have base styles updates like typography figured out. You'll see a .size-styles mixin a couple of lines up. This mixin allows us apply the same styles for a given size across multiple components. We could modify that mixin to account for that but I'm leaning towards just adding a few todos to port things over to that mixin.

dancormier · 2025-10-17T18:52:12Z

packages/stacks-classic/lib/components/button/button.less

+        --_bu-fs: 13px; // Override size-styles for custom font size
+        --_bu-px: 12px; // 12px padding as per Figma specs
+        --_bu-py: 10px; // Calculated to achieve 32px height: (32 - 12) / 2 = 10px
+        --_bu-icon-gap: 6px; // 6px spacing as per Figma specs


In order to achieve the desired button height with the suggested padding, we'll probably need to adjust line-height pretty significantly. For instance, the xs button can hit ~28px height with line-height: .5, but this is a very tight line height that would result in some rough display if it ever needs to wrap.

Example images

line-height: .5 single line

line-height: .5 multi-line

For the button sizes in general, I suggest asking via a comment on the Figma asking if the overall height is the goal over specific padding values. I suspect hitting ~28px height is more important. If that's true, I'd ignore the recommended padding values in favor of hitting the height while ensuring the text is vertically centered.

Ignore padding specified in Figma and target height OR do recommendation above

dancormier · 2025-10-17T18:52:37Z

packages/stacks-classic/lib/components/button/button.less

    display: inline-block;
    font-family: inherit;
-    font-weight: normal;
+    font-weight: var(--_bu-fw, 600);


No need for the fallback value here

CGuindon · 2025-10-24T19:15:24Z

Discussion in this slack thread

It's missing the Tonal button (replacing Muted I think?)
I updated the Facbook icon a month ago and I probably broke something in this Facebook button (extra color class in there maybe?). Can we fix this as part of the new buttons? (nobody has noticed yet — I don't think we use this button in a lot of places)

…thub.com/StackExchange/Stacks into spark-55/shine-update-button-base-styles

ttaylor-stack · 2025-10-29T14:47:47Z

packages/stacks-classic/lib/components/button/button.less

        --_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


round 6.285 down or up

CGuindon

We're going to keep the focus ring Black on all components so it won't match the featured and danger state button colors. Sorry I thought this was handled by the focus ring component we have (currently blue) and not the buttons. Just updated the figma file to reflect this — buttons in the Figma were out of date from this decision. We're keeping existing logic that the focus is always the same color — black-600.

s-btn and s-btn__tonal shouldn't get a background fill for the focus state (one is getting black fill so the text disappears and the other is getting a light fill that makes it look tonal). We should just have the outer ring appear (making it look like an outlined button) — same as .s-btn .s-btn__danger but black.

The selected state on the clear buttons seem to be missing the gradient/two-toned styling? And the tonal selected button state has a gradient that looks much less noticeable than Figma (I'm not sure how to grab the values from the browser). Bottom grey in Figma is HLS 220, 8, 93 and top darker grey is black-200 (HLS 216, 8, 88).

Can we try to get the default button size to match closer to 40px in height? By reducing the top/bottom padding a bit. I know the other ones aren't exact but it's over 41px right now. This will be a component that gets aligned with other components often and I've made other elements match the 40px height as well so they all line up nice.

.s-btn .s-btn__filled in dark mode doesn't have the two toned/gradient selected state. Is there a way to use color stops to make this gradient or is it using hard coded values? Looping in @dancormier for thoughts on how to approach this. Ideally we use the color stop values so we don't need to update this in the future if we change any color values.

.s-btn .s-btn__featured .s-btn__filled also seems very low contrast between the two tones. That might be dark mode colors. Wondering what approach you took to making all these gradients now.

CGuindon · 2025-11-12T21:17:01Z

I think we might need a call to talk through the selected state options — I'll set that up.

ttaylor-stack · 2025-11-14T10:59:25Z

packages/stacks-classic/lib/components/button/button.less

+    });
+
+    .dark-mode({
+        --_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%, black 40%) 50%, color-mix(in srgb, var(--theme-secondary-600) 80%, black 40%) 100%);


@CGuindon by reversed I'm assuming you meant use black instead of white for the gradient instead of flipping the colors.

CGuindon · 2025-11-14T15:38:24Z

@ttaylor-stack I'll have a separate ticket for button badges — so leaving the change you made for HC mode is fine and great for now in this PR.

CGuindon

Tonal seems to have lost it's tone. The default (non-selected) state should have a background color of black-150. We don't have an instance of tonal__clear the tonal__filled is the only version. So filled should appear as the default for s-btn .s-btn__tonal

I think it's because it's pulling from theme-secondary. Wondering if for the tonal styles we need to stick to the black color stops — @dancormier thoughts?

CGuindon · 2025-11-14T17:34:39Z

For the .s-btn .s-btn__danger selected let's tweak one value on the gradient (60% to 50% on the bottom color):
linear-gradient(to bottom, var(--red-100) 0%, var(--red-100) 50%, color-mix(in srgb, var(--red-100) 50%, white 40%) 50%, color-mix(in srgb, var(--red-100) 50%, white 40%) 100%)

CGuindon · 2025-11-14T18:10:03Z

For dark mode, I think the gradients are using the wrong white or black value or ordering in some cases. I mocked them up in Figma and added notes for what I changed on the gradient where it differs from the Light mode. Ultimatley, all of the selected states should have the darker tone on the top layer and light tone on the bottom layer. I'm not sure how the figma gradient values correlate to the code values but hoping this helps.

Figma dark mode

ttaylor-stack added 3 commits October 15, 2025 10:53

Merge branch 'develop' into spark-55/shine-update-button-base-styles

81048cb

update default and xs

643ba84

Update button.less

775b57e

ttaylor-stack changed the base branch from develop to beta October 17, 2025 15:33

dancormier requested changes Oct 17, 2025

View reviewed changes

ttaylor-stack requested review from CGuindon, giamir and mukunku October 20, 2025 15:53

ttaylor-stack added 4 commits October 28, 2025 15:42

Update based on changes

1c40dc1

Merge branch 'spark-55/shine-update-button-base-styles' of https://gi…

cf1c920

…thub.com/StackExchange/Stacks into spark-55/shine-update-button-base-styles

fix duplicate

7f2cde6

Merge branch 'beta' into spark-55/shine-update-button-base-styles

f2bafc7

ttaylor-stack commented Oct 29, 2025

View reviewed changes

dancormier mentioned this pull request Nov 4, 2025

chore(colors): update color palettes #2015

Merged

16 tasks

ttaylor-stack added 5 commits November 7, 2025 10:09

Merge branch 'beta' into spark-55/shine-update-button-base-styles

03be402

Update button.less

7836b23

update docs

4aa9ee4

update button svelte files

908c113

add changeset

553be5f

ttaylor-stack changed the title ~~Spark 55/shine update button base styles~~ feat(button) - update button base styles for SHINE Nov 10, 2025

ttaylor-stack added 5 commits November 10, 2025 14:46

update dependent svelte files

5bacf2a

update to theme secondary

3864d59

Update accessibility tests

ecda33e

remove contextual styles

0cff80e

reintroduce contextual styles

c43816f

CGuindon requested changes Nov 12, 2025

View reviewed changes

ttaylor-stack added 5 commits November 14, 2025 08:10

Merge branch 'beta' into spark-55/shine-update-button-base-styles

dfd0139

Update based on figma update and pr comments

16d5cde

Update badge background color for danger clear variant

965c54c

add breaking changes

9db5f52

Update docs

69ec77a

ttaylor-stack commented Nov 14, 2025

View reviewed changes

correct gradients

a9b255e

ttaylor-stack marked this pull request as ready for review November 14, 2025 11:11

use color instead of opacity

850fdf3

CGuindon requested changes Nov 14, 2025

View reviewed changes

feat(button) - update button base styles for SHINE #2008

Are you sure you want to change the base?

feat(button) - update button base styles for SHINE #2008

Uh oh!

Conversation

ttaylor-stack commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks ready!

Uh oh!

netlify bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for stacks-svelte ready!

Uh oh!

dancormier left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

line-height: .5 single line

line-height: .5 multi-line

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon commented Oct 24, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon left a comment

Choose a reason for hiding this comment

Uh oh!

CGuindon commented Nov 12, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon commented Nov 14, 2025

Uh oh!

CGuindon left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

CGuindon commented Nov 14, 2025

Uh oh!

CGuindon commented Nov 14, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ttaylor-stack commented Oct 17, 2025 •

edited

Loading

changeset-bot bot commented Oct 17, 2025 •

edited

Loading

netlify bot commented Oct 17, 2025 •

edited

Loading

netlify bot commented Oct 17, 2025 •

edited

Loading

CGuindon left a comment •

edited

Loading