refactor(css / components)!: stabilize token contracts, layout mechan…#334
Open
ascartabelli wants to merge 1 commit into
Open
refactor(css / components)!: stabilize token contracts, layout mechan…#334ascartabelli wants to merge 1 commit into
ascartabelli wants to merge 1 commit into
Conversation
…ics and component anatomy - restructured Storybook titles to mirror the design system taxonomy (`Display`, `Feedback`, `Interactive` and `Layout`) `@duskit/css`: - **BREAKING CHANGE**: renamed icon size contracts in `display.css` as they weren't following the naming rules - tweaked icon sizing - made icon sizes follow the optical scale instead of the macro one - tweaked headings scale - added fluid typography for all headings - added new contracts in `display.css` for headings - tweaked paddings of interactive components - tweaked sizes of toggle indicators - added missing contracts for main background and text colors in `layout.css` - tweaked text size of headings and titles in `layout.css` - added contracts for boundary colours in `layout.css` `@duskit/components`: - updated styles of `Banner` and `Icon` to use the new icon size contracts - updated `Drawer` and `NotificationFeed` to use the new layout boundary contracts - added `Heading` component - tweaked paddings of interactive components - buttons in the "naked" variant now have a default padding - added a more distinct style to toggle buttons while pressed - gave a fixed line height of `1.5` to `Agreement`, `Button`, `ContentSwitch`, `ExclusiveChoice`, `Select`, `Tabs` and `Textbox` instead of inheriting it - icon buttons are now guaranteed to be square - updated `ContentSwitch` to use standard padding and font size - added missing `min-block-size` in `ContentSwitch` and `Tabs` interactive elements - updated `Tabs` to used the "naked" variant for scroll buttons - stabilized header height in `Notification` by deriving minimum block size from interactive density tokens - added a defensive layout rule to ensure card structural slots always stretch to the full available width, preventing parent flex alignment from affecting the component layout - added `flex: 1` to `Banner`'s content wrapper to ensure it spans the full remaining width next to the icon - prevented layout blowout in `Banner` and text overflow when handling long unbreakable strings
🦋 Changeset detectedLatest commit: 87d0212 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…ics and component anatomy
Display,Feedback,InteractiveandLayout)@duskit/css:display.cssas they weren't following the naming rulesdisplay.cssfor headingslayout.csslayout.csslayout.css@duskit/components:BannerandIconto use the new icon size contractsDrawerandNotificationFeedto use the new layout boundary contractsHeadingcomponent1.5toAgreement,Button,ContentSwitch,ExclusiveChoice,Select,TabsandTextboxinstead of inheriting itContentSwitchto use standard padding and font sizemin-block-sizeinContentSwitchandTabsinteractive elementsTabsto used the "naked" variant for scroll buttonsNotificationby deriving minimum block size from interactive density tokensflex: 1toBanner's content wrapper to ensure it spans the full remaining width next to the iconBannerand text overflow when handling long unbreakable strings