Audit and consolidate styles between carbon-components and @carbon/styles

[tay1orjones]

Leading up to v11 we have migrated styles from carbon-components over into @carbon/styles and in the process converted the styles to be configured as sass modules.

Since then, there have been bug fixes and new features made to carbon-components changing the styles. These changes need to be found and ensure they have been ported over to @carbon/styles. In addition there have been purposeful changes made in @carbon/styles for v11 that are breaking changes and should not be ported back to carbon-components.

Moving forward:

• Changes to carbon-components should also be made to @carbon/styles, or tracked here to be migrated to @carbon/styles at a later date during a final audit to take place closer to v11 stable release.
• Purposeful (breaking) changes made only to @carbon/styles for v11 can be noted on this issue in attempt to ensure these changes are retained during the final audit.

Steps to take for each component are outlined in the comment below ↓

Checklist

• Audit accordion styles #10481
• Audit breadcrumb styles #10482
• Audit button styles #10483
• Audit checkbox styles #10484
• Audit code-snippet styles #10567
• Audit combo-box styles #10568
• Audit content-switcher styles #10569
• Audit copy-button styles #10570
• Audit data-table styles #10571
• Audit date-picker styles #10572
• Audit dropdown styles #10573
• Audit file-uploader styles #10574
• Audit form styles #10575
• Audit inline-loading styles #10576
• Audit link styles #10577
• Audit list-box styles #10578
• Audit list styles #10579
• Audit loading styles #10580
• Audit menu styles #10581
• Audit modal styles #10582
• Audit multi-select styles #10583
• Audit inline-notification styles #10585
• Audit toast-notification styles #10586
• Audit number-input styles #10584
• Audit overflow-menu styles #10587
• Audit pagination-nav styles #10630
• Audit pagination styles #10631
• Audit progress-bar styles #10632
• Audit progress-indicator styles #10633
• Audit radio-button styles #10660
• Audit search styles #10661
• Audit select styles #10675
• Audit skeleton styles #10718
• Audit slider styles #10719
• Audit structured-list styles #10720
• Audit tabs styles #10721
• Audit tag styles #10722
• Audit text-area styles #10723
• Audit text-input styles #10724
• Audit tile styles #10725
• Audit time-picker styles #10726
• Audit toggle styles #10727
• Audit toolbar styles #10728
• Audit tooltip styles #10729
• Audit unstable_pagination styles #10730
• Audit ui-shell styles #10731
• Audit treeview styles #10732

[tay1orjones]

It appears the progress Indicator styles are incorrect in v11

[tay1orjones]

Steps for each component

1. Find differences between v10/v11 components
   • Diff the two style files, identify any meaningful differences other than tokens/sass modules syntax
   • Visually review the component in existing storybook and new storybook
2. Identify if the change should be present in v10, v11, or both.
   • Look at git history of those changes
   • Review related PRs
   • Ask PR authors?
3. Mirror changes from v10 to v11 if applicable

[tay1orjones]

Complete 🎉