🦋 Changeset detected

Latest commit: ca6b261

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

Preview deployments for this pull request:

storybook - 8. Sep 2025 - 14:23

www - 8. Sep 2025 - 14:25

This looks really good. We'll have a deeper look at this once more people are back from vacation

Could you add a changeset?
We'll also have to wait until Chromatic usage resets

Something funky is going on with the rounding here that causes md and lg to have same size?

https://codepen.io/Oddbj-rn-vernes/pen/jEbdVPX?editors=1100

scroll down to line 70 here where it says @supports (width: round(down, .1em, 1px)) and rename it to @slupports for example to disable the line to see the raw numbers. Then re-enable it and change down to nearest which different but also wrong results (not nearest 1px)

Edit: i tested with the earlier version not-simplified by multiplying everything with --size-1 and that works correctly

Edit2: ok its not so funky but rather makes sense if you look at the numbers more closely

Something funky is going on with the rounding here that causes md and lg to have same size?

https://codepen.io/Oddbj-rn-vernes/pen/jEbdVPX?editors=1100
...

I was a bit confused about what you meant at first @oddvernes , but you're totally right. In the "simplified" version, when rounding is supported, the resulting values for "md" and "lg" are the same! Also, the "sm" sizes increase less per size than before. So I'll have to revert this 🤔

Looking really good now! 👍

Interestingly --ds-size-30 in data-size="lg" is 139px in chrome and 140px in firefox. There is a couple of other places it is off by 1. But I guess this is a difference in how round() is implemented/behaves and not really an issue

Looking really good now! 👍

Nice 🎉

Interestingly --ds-size-30 in data-size="lg" is 139px in chrome and 140px in firefox. There is a couple of other places it is off by 1. But I guess this is a difference in how round() is implemented/behaves and not really an issue

Interesting! For instance this...

--ds-size-30: round(down, 139.999999px, 1px);

...rounds to 140px in Firefox, but 139px in Safari. I guess floating point gonna float 🤷‍♀️

This is looking good to me! I've tested a bit and can't find any glaring issues

This is looking good to me! I've tested a bit and can't find any glaring issues

I went through the visual diff thoroughly now, and discovered that Chip is larger than before. This is the only unexpected diff, though. Looking into it now!

I went through the visual diff thoroughly now, and discovered that Chip is larger than before.

@Barsnes
The sizes are the same in main and this PR when size mode is set directly, but in main the default Chip size was "sm" (height 28px). Also, in main, this:

<div data-size="sm">
  <Chip.Radio>Label</Chip.Radio>
</div>

...would result in a 24px height Chip, while this:

<div>
  <Chip.Radio data-size="sm">Label</Chip.Radio>
</div>

...would result in a 28px height chip 🤯

The new Chip size behavior in this PR matches Chip sizes in Figma "Designsystemet - Core UI Kit" — sm = 28px, md = 32px, lg = 37px — so I'm concluding that this is a bugfix 🎉

I went through the visual diff thoroughly now, and discovered that Chip is larger than before.

@Barsnes The sizes are the same in main and this PR when size mode is set directly, but in main the default Chip size was "sm" (height 28px). Also, in main, this:

<div data-size="sm">
  <Chip.Radio>Label</Chip.Radio>
</div>

...would result in a 24px height Chip, while this:

<div>
  <Chip.Radio data-size="sm">Label</Chip.Radio>
</div>

...would result in a 28px height chip 🤯

The new Chip size behavior in this PR matches Chip sizes in Figma "Designsystemet - Core UI Kit" — sm = 28px, md = 32px, lg = 37px — so I'm concluding that this is a bugfix 🎉

well spotted, I have not gone through the visual tests yet.
Could you go through the tests, and I'll go through the review?