Spark 55/shine update button base styles #2008

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

No description provided.

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

⚠️ No Changeset found

Latest commit: f2bafc7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

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

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	`f2bafc7`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks/deploys/6900e9f0d8dead000838ace9
😎 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	`f2bafc7`
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-svelte/deploys/6900e9f0c3884500088395b5
😎 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

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

Uh oh!

Spark 55/shine update button base styles #2008

Are you sure you want to change the base?

Spark 55/shine update button base styles #2008

Conversation

ttaylor-stack commented Oct 17, 2025

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!

⚠️ No Changeset found

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

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