Basic housekeeping for all of the component CSS

[justintemps]

The CSS is a bit unruly in many of the components in the Design System. We need to clean up and organise the files so they're more consistent and easier to reason around. This should ultimately make the styles and themes packages more maintainable and ideally reduce the main css bundle size, albeit probably by only a little.

For each component, I think we should:

• Replace explicit instances of ilo with the $prefix variable to enable theming later on
• Make sure classnames conform to modified BEM convention (block--element__modifier)
• Remove local variables that should instead use standard ones from the theme
• Delete any theme values that are specific to only one component
• Explain any local variables that have to be used for special cases
• Remove any unneeded rules
• Replace map-get invocations with the name of the css variable exported by the themes package
• Use LTR/RTL agnostic css (Example padding-inline-start instead of padding-left)
• Where necessary, break up the CSS for very big components into logical sub-components, that could potentially be exported from the Design System by themselves

I've done this with the Accordion component and made a Pull Request to show an example for what I have in mind.

Stylesheets to tidy

• [x] _accordion.scss
• [x] _breadcrumb.scss
• [x] _button.scss
• [x] _callout.scss
• [ ] _card.scss
• [ ] _cardgroup.scss
• [ ] _checkbox.scss
• [ ] _container.scss
• [ ] _contextmenu.scss
• [ ] _credit.scss
• [ ] _datacard.scss
• [ ] _datepicker.scss
• [ ] _detailcard.scss
• [ ] _dropdown.scss
• [ ] _empty.scss
• [ ] _factlistcard.scss
• [ ] _featurecard.scss
• [ ] _fieldset.scss
• [ ] _file-upload.scss
• [ ] _footer.scss
• [ ] _form.scss
• [ ] _formcontrol.scss
• [ ] _heading.scss
• [ ] _hero.scss
• [ ] _herocard.scss
• [ ] _icon.scss
• [ ] _image.scss
• [ ] _input.scss
• [ ] _link.scss
• [ ] _linklist.scss
• [ ] _list.scss
• [ ] _loading.scss
• [ ] _logo.scss
• [ ] _logogrid.scss
• [ ] _modal.scss
• [ ] _multilinkcard.scss
• [ ] _navigation.scss
• [ ] _notification.scss
• [ ] _pagination.scss
• [ ] _profile.scss
• [ ] _promocard.scss
• [ ] _radio.scss
• [ ] _readmore.scss
• [ ] _richtext.scss
• [ ] _searchfield.scss
• [ ] _socialmedia.scss
• [ ] _statcard.scss
• [ ] _table.scss
• [ ] _tableofcontents.scss
• [ ] _tabs.scss
• [ ] _tag.scss
• [ ] _textarea.scss
• [ ] _textcard.scss
• [ ] _textinput.scss
• [ ] _toggle.scss
• [ ] _tooltip.scss
• [ ] _video.scss

[Shashika6]

Gonna pick up the button @justintemps :)