Split SCSS

[andresin87]

@s-ui-components is going to split its SCSS files for helping brands to customize the component tokens between:

• lib/styles/settings.scss: for tokens declaration
• lib/styles/index.scss: for style rules
  It will keep its retrocompatibility using the
• lib/index.scss: legacy
  It's content now will have

// sui-theme
@import '~@s-ui/theme/lib/index';
// others (if needed)
@import '~@s-ui/react-[whatever]/lib/index';
// ...

// inner
@import './styles/settings.scss';
@import './styles/index.scss';

It allows you to simplify and take control of your token declaration and overwrite:

@import '~@s-ui/theme/lib/settings.scss'; 								// sui-theme tokens
@import '@adv-ui/[brand]-theme/lib/settings.scss'; 						// sui-brand tokens
@import '~@s-ui/react-[category]-[component]/lib/styles/settings.scss'; // sui-component tokens <---

@import '~@s-ui/theme/lib/index.scss';									// sui-theme styles
@import '@adv-ui/[brand]-theme/lib/index.scss'; 						// sui-brand styles
@import '~@s-ui/react-[category]-[component]/lib/styles/index.scss'; 	// sui-component styles <---

This is just a first step to tackle a styles transition
- CURRENT: SASS
- MID-TERM: combine sass and custom-properties
- END: POSTCSS + custom-properties

Completed Components

• Atom
  • Action Button
  • Back To Top
  • Badge
  • Button
  • Card
  • Checkbox
  • HelpText
  • Icon
  • Image
  • Input
  • Label
  • Panel
  • Pin Input
  • Popover
  • Progress Bar
  • Radio Button
  • Skeleton
  • Slider
  • Spinner
  • Switch
  • Table
  • Tag
  • Text Area
  • Toast
  • Tooltip
  • Upload
  • Validation Text
• Behavior
  • Sticky
• Layout
  • Grid
• Molecule
  • Accordion
  • AutoSuggest
  • AutoSuggest Field
  • Avatar
  • Badge Counter
  • Breadcrumb
  • Button Group
  • Button Group Field
  • Checkbox Field
  • Collapsible
  • Data Counter
  • Drawer
  • Dropdown List
  • Dropdown Option
  • Field
  • Image Editor
  • Input Field
  • Input Tags
  • Modal
  • Notification
  • Pagination
  • Photo Uploader
  • Progress Steps
  • Quick Action
  • Radio Button Field
  • Radio Button Group
  • Rating
  • Select
  • SelectField
  • Select Popover
  • Tabs
  • Text Area Field
  • Thumbnail
  • Validation Code
• Organism
  • Nested Checkboxes

PRs:

• Split scss #1972
• Split scss #1982
• Split scss #1987
• split scss fix #1990