Convert initial set of components to Sass Modules in @carbon/styles

[joshblack]

This issue is for converting an initial set of components to Sass Modules to be authored in @carbon/styles. This work should involve any explorations needed for what is the ideal setup for authoring component files with sass modules and, ideally, should incorporate whatever we think is necessary in terms of tests.

These components include (but can change):

• Accordion feat(styles): add component stylesheets #8798
• Breadcrumb
• Link feat(styles): add component stylesheets #8798
• List feat(styles): add component stylesheets #8798
• Loading feat(styles): add component stylesheets #8798

[joshblack]

Some of the steps I've been following:

• Find the component SCSS file from packages/components
• Create an _index.scss file for this component over in packages/styles/scss/components/<component>/_index.scss
• Copy over on the *.scss files, ignore the JS/HBS/md files for the most part, into this folder
• Update the _<component>.scss file with the following changes:
  • Remove the import-once import
  • Remove the exports mixin that is used
  • Update _index.scss to @use '<component>'; and include the mixin afterwards

@use 'example-component';

@include example-component.example-component;

• Update the imports of the file from @import to @use
  • css--reset -> utilities/component-reset
  • Duration tokens coming from _motion.scss and have a name change
  • rem and em helpers come from ../utilities/convert
  • carbon--spacing -> spacing
  • carbon--breakpoint -> breakpoint
  • Update tokens to use CSS Custom Properties
• Update scss/components/_index.scss entrypoint
• Update any calculations on tokens to use calc()

$prefix

+@use '../../config' as *;

type-style

+@use '../../type';

...

.#{$prefix}--component {
-  @include type-style('body-short-01');
+  @include type.type-style('body-short-01');
}

Component reset

-@import '../../globals/scss/css--reset';
+@use '../../utilities/component-reset';

Tokens

-@import '../../globals/scss/vars';
+@use '../../theme' as *;

duration--*

-@import '../../globals/scss/vars';
@use '../../motion' as *;

...

.#{$prefix}--my-component {
-  transition: color $duration--fast-01 motion(standard, productive);
+  transition: color $duration-fast-01 motion(standard, productive);
}

helper mixins

-@import '../../globals/scss/helper-mixins';

// Focus outline
+@use '../../utilities/focus-outline' as *;

spacing

-@import '../../globals/scss/vars';
+@use '../../spacing' as *;

rem

+@use '../../utilities/convert';

...

-margin: rem(24px);
+margin: convert.rem(24px);

---

Some style guide ideas:

Ordering of imports

When bringing in imports, the order should be:

• Any @forward rules`
• Any sass native imports (@use 'sass:map')
• Alphabetical order