feat(tabs): support contextual layout tokens (size & density)

[janhassel]

Ref #13923

Adds support for contextual layout tokens to Tabs.

Changelog

Changed

• Updated tabs styles to support size and density groups

Testing / Reviewing

Locally run storybook

• Line tabs
  • should support layout.size with sm, md, lg (default: md)
  • padding-inline should adapt to layout.density
• Icon only tabs
  • should support layout.size with sm, md, lg (default: md)
  • should be square
• Contained tabs
  • should support layout.size with sm, md, lg, xl (default: lg)
  • padding-inline should adapt to layout.density
  • spacing between label and icon should adapt to layout.density
• Tabs with two lines
  • should support layout.size with lg, xl (default: xl)
• Tab content
  • padding should adapt to layout.density
• <Tab iconSize="lg">
  • should result in the tabs being locked to lg
• Tab horizontal overflow buttons should share same size as tabs

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b92c1dc
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/64abad6fc51ac400086bb1d3
😎 Deploy Preview	https://deploy-preview-13951--carbon-components-react.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 site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	b92c1dc
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/64abad6ff6115d0008731627
😎 Deploy Preview	https://deploy-preview-13951--carbon-elements.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 site configuration.

[janhassel]

@aagonzales I want to tag you here as well as there are some differences percy reported. It looks like the labels in line tabs are not 100% centered in main right now due to a difference in padding:

The visual specs on carbondesignsystem.com show that equal padding is desired though:

Would love it if you could have a look at the implementation of this PR and see whether this achieves the desired visuals.

[aagonzales]

The Percey screenshots aren't showing but when I manually compare it to the spec this PR still seems slightly off (1px maybe). The foreground is a Figma asset, the background is a code asset. (I could live with it though)

I also think the 8px top and bottom isn't true. Not sure where that number came from looking at the assets. They should just be vertically centered.

[janhassel]

@aagonzales I pushed an update positioning the label 1px lower. Checking with the latest Figma library I see an exact overlay now. Let me know if this works!

[aagonzales]

@janhassel yup that's it! Matches up perfectly now. 👍

[tw15egan]

Sorry, missed this review! LGTM once merge conflict is resolved 👍🏻 ✅

[janhassel]

@tw15egan I just resolved the merge conflict. I think the percy approval is the last failing check now.