feat(theme): Update design tokens and defaultTheme

[masoudmanson]

Summary

Design Tokens
Github issue: #747

Change List

Storybook

• New story Badges in the preview header (Stable, Beta, Needs Revision, Work in progress)
• New story Badges in the sidebar list (Stable, Beta, Needs Revision, Work in progress)
• New categorization for stories (Bases, Components, Data Viz, Deprecated)
• Added Bases category to Storybook to cover Borders, Colors, Corners, Shadows and Spaces

DefaultTheme and Design Tokens

All design tokens have been updated to the latest values based on the Figma Refactor outputs. Token names have been changed to reflect the new semantic structure. DefaultTheme has been created based on new design tokens, and it's ready to implement a multi-theme approach.

Component Styles

All components have been refactored and are now using the latest design tokens from the palette. All hardcoded spacings, colors, borders, etc., have been replaced with corresponding values from the theme Palette, making the whole design system dynamic and ready to use different theme files.

Icons

• All SDS icons have been replaced with newly re-exported icons with larger 16 x 16 and 24 x 24 sizes.
• Loading icons have been re worked to show the animation.
• Icon names are now PascalCase instead of camelCase
• Some icon names have changed (a full list of changes will be included in the migration documentation).

Updated Icon sizes for some components

Since the icons are a bit larger by default now, the s size chevron icon in some components has been replaced with xs size for better visuals.

• Accordion
• ButtonDropdown
• InputDropdown

Storybook Stories

• Component props are excluded from all stories except for the default story.

Updated intent and color props

The accepted values for intent / color props in SDS components has changed to semantic alternates

• primary => accent
• info => info
• error => negative
• warning => notice
• success => positive
• beta => beta

Reworked components

Some SDS components have been reworked and bug-fixed.

• InputCheckbox, InputRadio: Component structure has changed, and this bug (Update InputCheckbox and InputRadio to ensure correct text alignment #441) is resolved.
• InputToggle
• InputSearch: The search icon has been relocated to the left side of the input, and a new Clear icon has been added to the right side.
• SegmentedControl
• Link: The Link component now accepts two new props, sdsSize and fontWeight
• ‍Tag: The color prop is no longer required, and the Tag component will be rendered as a neutral tag if no colors are provided.
• CellBasic: Introducing two additional properties to the CellBasic component, enabling the inclusion of elements either to the right or at the bottom of the primary text (Add Component Slots to the BasicCell #758).

[masoudmanson]

Awesome thanks for updating the PRs and addressing the comments, Masoud! Love this design token driven way so much 🌟 👏 🤩 !

One last request, can you help going through the code to separate storybook only code from the production code like you did in the last commit for some components, so it's consistent too 🙏 ?

I know it's a lot of components to go through, so no rush if you wanna do it in separate PRs too lol

Thanks so much!

Thanks for reviewing the code, @tihuan. 🎉😍

The latest commit organizes Storybook files and breaks down large Storybook files into smaller and manageable stories. Here is the general structure of each SDS component:

Component
 ┣ 📂 __storybook__
 ┃ ┣ 📂 stories
 ┃ ┃ ┣ default.tsx
 ┃ ┃ ┣ livePreview.tsx
 ┃ ┃ ┗ test.tsx
 ┃ ┣ constants.ts
 ┃ ┣ index.stories.tsx
 ┃ ┗ style.ts
 ┣ 📂 __tests__
 ┃ ┣ 📂 __snapshots__
 ┃ ┃ ┗ index.test.tsx.snap
 ┃ ┣ Component.namespace-test.tsx
 ┃ ┗ index.test.tsx
 ┣ 📁 components
 ┣ index.tsx
 ┗ style.tsx

[tihuan]

Wow your new file structure is a piece of art, @masoudmanson ! WE SHOULD FRAME IT 🤩 😆 🖼️ 🥇 👏

You're one of the best engineers I've had the honor to work with. Thanks so much for all the hard work 🙏

LGTM TO THE MAX!! 🚀

[masoudmanson]

Wow your new file structure is a piece of art, @masoudmanson ! WE SHOULD FRAME IT 🤩 😆 🖼️ 🥇 👏

You're one of the best engineers I've had the honor to work with. Thanks so much for all the hard work 🙏

LGTM TO THE MAX!! 🚀

Thank you so much for your kind words! 🤩🥳😍🎉 I appreciate your support.
So excited to keep pushing forward together! 🚀🎉🥳

[clarsen-czi]

Looks so good, @masoudmanson !! Thanks for tackling so many changes! There are only two small things left to fix (font size on the section/column headers in DropdownMenu and XMark icon size on the TagFilter) and then we should be good.

[masoudmanson]

Looks so good, @masoudmanson !! Thanks for tackling so many changes! There are only two small things left to fix (font size on the section/column headers in DropdownMenu and XMark icon size on the TagFilter) and then we should be good.

Awesome! 🥳🎉
Thank you for thoroughly reviewing the components multiple times to verify all the changes.
I really appreciate your attention to detail. 😯✨🎉

Changes have been made!

[clarsen-czi]

Looks great @masoudmanson !! Thanks for the attention to detail getting all these changes implemented 💪