diff --git a/docs/migration/11.x-carbon-components.md b/docs/migration/11.x-carbon-components.md new file mode 100644 index 000000000000..fa87de0ac179 --- /dev/null +++ b/docs/migration/11.x-carbon-components.md @@ -0,0 +1,65 @@ +# `carbon-components` + +**Note: everything in this file is a work-in-progress and will be changed.** + +## Overview + +- Carbon now uses [Dart Sass](https://npmjs.com/package/sass) along with Sass + Modules +- File paths have been renamed to provide shorter paths and more intuitive ways + to get access to common variables, mixins, functions, and more. +- Prefixed variables, functions, and mixins have been renamed as part of our + migration to Sass Modules + +## Files + +| Filename | v11 | +| --------------------------------------------------------------- | --------------------------------------- | +| `scss/globals` | | +| `scss/globals/fonts/*` | Removed | +| `scss/globals/grid/_grid.scss` | `scss/_grid.scss` | +| `scss/globals/scss` | `scss` | +| `scss/globals/scss/vendor/*` | Removed | +| `scss/globals/scss/_colors.scss` | `scss/_colors.scss` | +| `scss/globals/scss/_component-tokens.scss` | | +| `scss/globals/scss/_css--body.scss` | | +| `scss/globals/scss/_css--font-face.scss` | | +| `scss/globals/scss/_css--helpers.scss` | | +| `scss/globals/scss/_css--reset.scss` | | +| `scss/globals/scss/_deprecate.scss` | | +| `scss/globals/scss/_feature-flags.scss` | | +| `scss/globals/scss/_functions.scss` | | +| `scss/globals/scss/_helper-classes.scss` | | +| `scss/globals/scss/_helper-mixins.scss` | | +| `scss/globals/scss/_import-once.scss` | | +| `scss/globals/scss/_keyframes.scss` | | +| `scss/globals/scss/_layer.scss` | | +| `scss/globals/scss/_layout.scss` | | +| `scss/globals/scss/_mixins.scss` | | +| [`scss/globals/scss/_motion.scss`](#scssglobalsscss_motionscss) | `scss/_motion.scss` | +| `scss/globals/scss/_spacing.scss` | | +| `scss/globals/scss/_theme-tokens.scss` | | +| `scss/globals/scss/_theme.scss` | | +| `scss/globals/scss/_tooltip.scss` | | +| `scss/globals/scss/_typography.scss` | | +| `scss/globals/scss/_vars.scss` | | +| `scss/globals/scss/styles.scss` | `/index.scss`, require package directly | +| `scss/components` | | + +### `scss/globals/scss/_motion.scss` + +| v10 | v11 | +| :------------------------- | :-- | +| `$carbon--ease-in` | | +| `$carbon--ease-out` | | +| `$carbon--standard-easing` | | +| `$transition--base` | | +| `$transition--expansion` | | +| `$duration--fast-01` | | +| `$duration--fast-02` | | +| `$duration--moderate-01` | | +| `$duration--moderate-02` | | +| `$duration--slow-01` | | +| `$duration--slow-02` | | +| `@function motion` | | +| `@mixin motion` | |