feat(elements): update colors, layout, and motion packages with experimental Sass Modules (#7546)

* refactor(colors): move Sass Modules to colors/index.scss

* feat(layout): add support for sass modules

* feat(motion): add support for sass modules

* docs(migration): add initial 11.x docs for sass modules

* chore(components): update sass check to ignore vendor files

* chore(colors): update modules test to new location

Co-authored-by: TJ Egan <tw15egan@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: 3 people

docs/migration/11.x-layout.md

@@ -0,0 +1,24 @@
+# Layout
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                               | v11                       |
+| --------------------------------- | ------------------------- |
+| `$carbon--base-font-size`         | `$base-font-size`         |
+| `carbon--rem`                     | `rem`                     |
+| `carbon--em`                      | `em`                      |
+| `$carbon--grid-gutter`            | `$grid-gutter`            |
+| `$carbon--grid-gutter--condensed` | `$grid-gutter--condensed` |
+| `$carbon--grid-breakpoints`       | `$grid-breakpoints`       |
+| `carbon--breakpoint-next`         | `breakpoint-next`         |
+| `carbon--breakpoint-prev`         | `breakpoint-prev`         |
+| `carbon--is-smallest-breakpoint`  | `is-smallest-breakpoint`  |
+| `carbon--largest-breakpoint-name` | `largest-breakpoint-name` |
+| `carbon--breakpoint-infix`        | `breakpoint-infix`        |
+| `carbon--breakpoint-up`           | `breakpoint-up`           |
+| `carbon--breakpoint-down`         | `breakpoint-down`         |
+| `carbon--breakpoint-between`      | `breakpoint-between`      |
+| `carbon--largest-breakpoint`      | `largest-breakpoint`      |
+| `carbon--breakpoint`              | `breakpoint`              |

docs/migration/11.x-motion.md

@@ -0,0 +1,11 @@
+# Motion
+
+**Note: everything in this file is a work-in-progress and will be changed.**
+
+## Changes
+
+| v10                        | v11        |
+| -------------------------- | ---------- |
+| `$carbon--easings`         | `$easings` |
+| `@function carbon--motion` | `motion`   |
+| `@mixin carbon--motion`    | `motion`   |

packages/colors/.gitignore

@@ -1 +1,2 @@
 scss
+index.scss

packages/colors/__tests__/__snapshots__/modules-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`modules.scss Public API 1`] = `
+exports[`@carbon/colors Public API 1`] = `
 Object {
   "black": "#000000",
   "black-100": "#000000",

packages/colors/__tests__/modules-test.js

@@ -13,13 +13,13 @@ const { SassRenderer } = require('@carbon/test-utils/scss');
 
 const { render } = SassRenderer.create(__dirname);
 
-describe('modules.scss', () => {
+describe('@carbon/colors', () => {
   test('Public API', async () => {
     const { getValue } = await render(`
       @use 'sass:meta';
-      @use '../scss/module';
+      @use '../index.scss' as colors;
 
-      $_: get-value(meta.module-variables('module'));
+      $_: get-value(meta.module-variables('colors'));
     `);
 
     const variables = getValue(0);