feat(styles): merge v10 and v11 for compat themes (#9677)

* chore(project): update sass to v1.41

* feat(styles): merge v10 and v11 for compat themes

* docs(styles): update docs for compat theme

packages/carbon-react/package.json

@@ -85,7 +85,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-strip-banner": "^2.0.0",
     "rtlcss": "^3.1.2",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "10",
     "style-loader": "^2.0.0",
     "webpack": "^4.41.5"

packages/cli/package.json

@@ -48,7 +48,7 @@
     "remark": "^10.0.1",
     "replace-in-file": "^6.1.0",
     "rollup": "^2.46.0",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sassdoc": "^2.7.3",
     "yargs": "^17.0.1"
   }

packages/components/package.json

@@ -163,7 +163,7 @@
     "rollup": "^2.46.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-terser": "^7.0.2",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "^8.0.2",
     "serve-static": "^1.13.0",
     "style-loader": "^1.1.3",

packages/react/package.json

@@ -129,7 +129,7 @@
     "rollup-plugin-strip-banner": "^2.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rtlcss": "^2.4.0",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "sass-loader": "^10.1.1",
     "storybook-readme": "^5.0.9",
     "string-replace-loader": "^2.1.0",

packages/styles/__tests__/compat-test.js

@@ -51,7 +51,6 @@ describe('@carbon/styles/scss/compat', () => {
       @use '../scss/themes';
       @use '../scss/compat/themes' as compat;
       @use '../scss/compat/theme' with (
-        $fallback: themes.$g100,
         $theme: compat.$g100,
       );
 

packages/styles/docs/sass.md

@@ -383,9 +383,7 @@ you're using from `scss/compat/themes` and set that as your theme.
 
 ```scss
 @use '@carbon/styles/scss/compat/themes' as compat;
-@use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/compat/theme' with (
-  $fallback: themes.$g100,
   $theme: compat.$g100,
 );
 ```

packages/styles/scss/compat/_themes.scss

@@ -5,4 +5,31 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@forward '@carbon/themes/scss/compat/themes' show $white, $g10, $g90, $g100;
+@use 'sass:map';
+@use '@carbon/themes/scss/compat/themes' as compat;
+@use '../themes';
+
+// For our compatability themes, we will merge the themes from v10 and v11 and
+// provide this combination as one of our four default themes.
+//
+// This is useful for situations where a user is trying to use the compatability
+// theme, for example:
+//
+// ```scss
+// @use '@carbon/styles/scss/reset';
+// @use '@carbon/styles/scss/compat/themes';
+// @use '@carbon/styles/scss/compat/theme' with (
+//   $theme: themes.$g100
+// );
+// ```
+//
+// Without merging these themes, then the value of a token in v11 would default
+// to our $white theme. As a result, the user would need to specify both the
+// `$theme` and the `$fallback` to the `scss/compat/theme` module.
+//
+// Now that we merge the themes, this code snippet will function as expected.
+
+$white: map.merge(themes.$white, compat.$white);
+$g10: map.merge(themes.$g10, compat.$g10);
+$g90: map.merge(themes.$g90, compat.$g90);
+$g100: map.merge(themes.$g100, compat.$g100);

packages/test-utils/package.json

@@ -29,7 +29,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "resolve": "^1.12.0",
-    "sass": "^1.36.0",
+    "sass": "^1.41.0",
     "tabbable": "^4.0.0"
   },
   "devDependencies": {

yarn.lock

@@ -1736,7 +1736,7 @@ __metadata:
     remark: ^10.0.1
     replace-in-file: ^6.1.0
     rollup: ^2.46.0
-    sass: ^1.36.0
+    sass: ^1.41.0
     sassdoc: ^2.7.3
     yargs: ^17.0.1
   bin:
@@ -2029,7 +2029,7 @@ __metadata:
     rollup: ^2.46.0
     rollup-plugin-strip-banner: ^2.0.0
     rtlcss: ^3.1.2
-    sass: ^1.36.0
+    sass: ^1.41.0
     sass-loader: 10
     style-loader: ^2.0.0
     webpack: ^4.41.5
@@ -2113,7 +2113,7 @@ __metadata:
     react: ^17.0.1
     react-dom: ^16.9.0
     resolve: ^1.12.0
-    sass: ^1.36.0
+    sass: ^1.41.0
     tabbable: ^4.0.0
   peerDependencies:
     node-sass: ^4.13.1
@@ -10376,7 +10376,7 @@ __metadata:
     rollup-plugin-strip-banner: ^2.0.0
     rollup-plugin-terser: ^7.0.2
     rtlcss: ^2.4.0
-    sass: ^1.36.0
+    sass: ^1.41.0
     sass-loader: ^10.1.1
     storybook-readme: ^5.0.9
     string-replace-loader: ^2.1.0
@@ -10518,7 +10518,7 @@ __metadata:
     rollup: ^2.46.0
     rollup-plugin-filesize: ^9.1.1
     rollup-plugin-terser: ^7.0.2
-    sass: ^1.36.0
+    sass: ^1.41.0
     sass-loader: ^8.0.2
     serve-static: ^1.13.0
     style-loader: ^1.1.3
@@ -29668,14 +29668,14 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.36.0":
-  version: 1.36.0
-  resolution: "sass@npm:1.36.0"
+"sass@npm:^1.41.0":
+  version: 1.41.0
+  resolution: "sass@npm:1.41.0"
   dependencies:
     chokidar: ">=3.0.0 <4.0.0"
   bin:
     sass: sass.js
-  checksum: fdb03deed1769f182900c1b5505bc22e50cf1d3ce4d5253fc907865f784c430236937bd391d91ef714e59995584f13ff31d3776d5283e730f5172ac227585754
+  checksum: 12f791d1d336c304a75f69e54212ea840661a054b4d13b9c8a1a3ad9e44b7656e5eaf6d0372a826612ef08f8da9433159315c3ea1df5eed9832efaf8cb26358e
   languageName: node
   linkType: hard