Skeleton sass module refactor

[jnm2377]

This issue is for updating the Skeleton component to Sass Modules in the @carbon/styles package. In this refactor, we will:

• Copy over styles for for the component to packages/styles/scss/components/search/_{component}.scss
  • Any additional files will live in the folder packages/styles/scss/components/{component}/
• Create an _index.scss at packages/styles/scss/components/{component}/_index.scss
• Create a test file at packages/styles/scss/components/__tests__/{component}-test.js
• add the storybook stories to @carbon/react

The _index.scss should:

• @forward the mixin and any variables from _{component}.scss
• Include the styles from _{component}.scss by calling the mixin

The search-test.js file should test the following:

• The Public API of the {component}/_index.scss file
• Any configuration options that are present for the file

The _{component}.scss will then need to be refactored to use the new import paths and conventions. You can find common recipes here: #8899 (comment)

Reference

Migration process

• 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()

Common migrations

$prefix

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

type-style

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

...

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

Button reset

-@import '../../globals/scss/helper-mixins';
+@use '../../utilities/button-reset';

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' as *;