feat: upgrade to Carbon 11 (carbon-design-system#10196)

* chore(cwc): install @carbon/styles * chore(cwc): update global @carbon/styles imports * chore: begin carbon v11 upgrade * chore(deps): upgrade yarn to v3 * fix(storybook): resolve broken imports * refactor: hard code prefix in global settings * fix(v11): update accordion styles and storybook theme * fix(button): update button icon styles * fix(notifications): fix styles for notifications * chore(yarn): commit install state * fix(v11): update styles for textarea * fix(v11): update skip-to-content and structured-list * fix(sass): update to latest * fix(sass): update to latest * fix(storybook): theme switcher * chore(sb): add bgcolor to storybook content frame * chore(git): update git and stylelint ignore files * chore(yarn): remove install-state.gz * Update packages/carbon-web-components/src/components/accordion/accordion.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/button/button.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/accordion/accordion.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/accordion/accordion.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * fix(inline-loading): update v11 styles * fix(component): fix content-switcher styles * fix(component): update data-table v11 styles * Update packages/carbon-web-components/src/components/content-switcher/content-switcher.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/data-table.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/content-switcher/content-switcher.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/content-switcher/content-switcher.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-core.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-sizes.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-sizes.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-sizes.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-sizes.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/data-table/_table-sizes.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * Update packages/carbon-web-components/src/components/content-switcher/content-switcher.scss * fix(sass): revert back to 1.40 * Update packages/carbon-web-components/.storybook/_container.scss Co-authored-by: andrew <emyarod@users.noreply.github.com> * docs(checkbox): update story * refactor(checkbox): update prefix * refactor(date-picker): update prefix * fix(dropdown): update prefix * Update packages/carbon-web-components/package.json Co-authored-by: kennylam <kennylam@proton.me> * fix(toggle): fixed toggle styles * fix(tile): fixed tile styles * fix(tile): fixed some more * feat(ordered-list): add native option * fix(unordered-list): update nested spacing * docs(list): separate list stories * fix(components): added toggletip and tooltip * fix(tile): fixed styles * fix(modal): update prefix * fix(modal): resolve danger modal issues * fix(breadcrumb): missing slashes * fix(accoridion): update styles with new props * fix(progress-indicator): update styles and icons to v11 spec * Update accordion.ts * Update accordion-story.ts * chore(copy-button): update styles for copy-button * chore(copy-button): adjusting tooltip class * fix(combo-box): include assistive utility * fix(v11): addressed comments * fix(v11): addressed comments * fix(tooltip): readd styles * chore(v11): update number-input styles * fix(defs): fdata-table and progress-indicator def fixes * fix(components): file uploader and input styles * fix(tooltip): remove tooltip-icon export * fix(tabs): render normal styles * fix(tabs): using proper font now * fix(multiselect): adjustt filterable input spacing * docs(storybook): update listbox width * fix(multiselect): update to v11 prefix * fix(loading): replace WITH_OVERLAY type with boolean property * fix(tabs): remove some code * fix(tabs): remove some code * refactor(loading): update prop name and reflect to attr * docs(search): fix typo * refactor(loading): import prefix * refactor(listbox): use decorators for listbox wrapper widths * fix(wc): update lerna and use workspaces * fix(skeleton-text): implement line generator * docs(skeleton-text): update prop descriptions * docs(skeleton-text): update story decorators * fix(skeleton-text): update random width generator * Update lerna.json * chore: update dependencies * refactor(breadcrumb): remove unused styles * fix(data-table-story): correct tag mismatch * chore: update imports * chore: update package versions * refactor: update prefixes * fix: revert fixes * chore: remove yarn offline mirror * chore(project): upgrade yarn to v3 (carbon-design-system#9948) Upgrade to use latest version of Yarn. **New** - `cache` dir for zero-install **Changed** - upgrade Yarn to 3.3.1 - update package build scripts **Removed** - Yarn's offline-mirror folder --------- Co-authored-by: Kenny Lam <kennylam@proton.me> Co-authored-by: ariellalgilmore <ariellalgilmore@gmail.com> Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com> Co-authored-by: Ignacio Becerra Aguilar <i1becerr@ucsd.edu>
kennylam · Mar 8, 2023 · 6a3ddea · 6a3ddea
1 parent 019a8b1
commit 6a3ddea
Show file tree

Hide file tree

Showing 262 changed files with 3,678 additions and 3,005 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/_container.scss b/web-components/packages/carbon-web-components/.storybook/_container.scss
@@ -1,53 +1,54 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/css--font-face';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/tag/tag';
-@import 'carbon-components/src/components/notification/inline-notification';
-@import 'carbon-components/src/components/notification/toast-notification';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/fonts';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+
+@import '@carbon/type/scss/type';
+@import '@carbon/type/scss/font-face/mono';
+@import '@carbon/type/scss/font-face/sans';
+@import '@carbon/type/scss/font-face/serif';
+
+@include carbon--type-reset();
+@include carbon--font-face-mono();
+@include carbon--font-face-sans();
+@include carbon--font-face-serif();
 
 // The default theme is "white" (White)
 :root {
-  @include carbon--theme($carbon--theme--white, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme($white);
 }
-
 // Set the <html> theme attribute to "g10" to use the Gray 10 theme
 // <html theme="g10">
 :root[storybook-carbon-theme='g10'] {
-  @include carbon--theme($carbon--theme--g10, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme($g10);
 }
 
 // Set the <html> theme attribute to "g90" to use the Gray 90 theme
 // <html theme="g90">
 :root[storybook-carbon-theme='g90'] {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme($g90);
 }
 
 // Set the <html> theme attribute to "g100" to use the Gray 100 theme
 // <html theme="g100">
 :root[storybook-carbon-theme='g100'] {
-  @include carbon--theme($carbon--theme--g100, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme($g100);
+}
+
+body {
+  background-color: $background;
+  color: $text-primary;
 }
 
 html,
@@ -70,22 +71,23 @@ body,
   }
 }
 
-.bx-ce-demo-devenv--container {
+.#{$prefix}-ce-demo-devenv--container {
   padding: 3em;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 }
 
-.bx--content.bx-ce-demo-devenv--ui-shell-content {
-  background-color: $ui-01;
+.#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content {
+  background-color: $layer-01;
   margin: 0;
   height: 100vh;
   width: 100%;
 
   h2 {
     font-weight: 800;
+    /* stylelint-disable declaration-property-unit-whitelist */
     margin: 30px 0;
     font-size: 20px;
   }

diff --git a/web-components/packages/carbon-web-components/.storybook/container.ts b/web-components/packages/carbon-web-components/.storybook/container.ts
@@ -8,6 +8,7 @@
  */
 
 import { html, TemplateResult } from 'lit';
+import { prefix } from '../src/globals/settings';
 import containerStyles from './_container.scss'; // eslint-disable-line import/first
 
 /**
@@ -26,12 +27,13 @@ const container = ({
   <style>
     ${containerStyles}
   </style>
+  <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
     name="main-content"
     data-floating-menu-container
     role="${hasMainTag ? 'none' : 'main'}"
-    class="bx--body bx-ce-demo-devenv--container">
+    class="${prefix}-ce-demo-devenv--container">
     ${children}
   </div>
 `;

diff --git a/web-components/packages/carbon-web-components/.storybook/main.js b/web-components/packages/carbon-web-components/.storybook/main.js
@@ -156,7 +156,10 @@ module.exports = {
               implementation: sass,
               webpackImporter: false,
               sassOptions: {
-                includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+                includePaths: [
+                  path.resolve(__dirname, '..', 'node_modules'),
+                  path.resolve(__dirname, '../../../', 'node_modules'),
+                ],
               },
             },
           },

diff --git a/web-components/packages/carbon-web-components/docs/styling-story.mdx b/web-components/packages/carbon-web-components/docs/styling-story.mdx
@@ -4,9 +4,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # Using custom styles in components
 
-As Shadow DOM (one of the Web Components specs that `carbon-web-components` uses) promises, styles that `carbon-web-components` defines does not affect styles in your application, or vice versa.
+As Shadow DOM (one of the Web Components specs that `carbon-web-components`
+uses) promises, styles that `carbon-web-components` defines does not affect
+styles in your application, or vice versa.
 
-However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options.
+However, in cases where your application or a Carbon-derived style guide wants
+to change the styles of our components, there are a few options.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -20,14 +23,19 @@ However, in cases where your application or a Carbon-derived style guide wants t
 
 ## Using CSS Custom Properties
 
-Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components:
+Changes to CSS Custom Properties of the Carbon theme are reflected in the color
+scheme of `carbon-web-components` components:
 
 <iframe
   src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/theme-zoning?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '700px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
+  style={{
+    width: '100%',
+    height: '700px',
+    border: 'solid rgba(0,0,0,0.1) 1px',
+    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
+  }}
   title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 For example, if you add CSS like below:
 
@@ -37,30 +45,42 @@ footer {
 }
 ```
 
-The color of the button in the code below changes to the one in the `g100` theme:
+The color of the button in the code below changes to the one in the `g100`
+theme:
 
 ```html
 <footer>
   <bx-btn kind="secondary">Secondary button</bx-btn>
 </footer>
 ```
 
-The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
+The names of CSS Custom Properties you can use are the Carbon theme tokens
+prefixed with `--cds-`. The list of Carbon theme tokens can be found at
+[here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
 
-With CSS Custom Properties approach, you can switch the entire theme under the specific element by:
+With CSS Custom Properties approach, you can switch the entire theme under the
+specific element by:
 
 ```css
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins';
 
 footer {
-  @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties
+  @include carbon--theme(
+    $carbon--theme--g100,
+    true
+  ); // Emits all theme tokens in CSS Custom Properties
 }
 ```
 
 ## Dependency injection
 
-You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version:
+You can let our custom elements modules load alternate `CSSResult` module. Below
+example uses
+[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/)
+to let our custom elements modules load RTL version of `CSSResult` module that
+is shipped alongside with default `CSSResult` modules, instead of loading the
+default version:
 
 ```javascript
 const reCssBundle = /\.css\.js$/i;
@@ -81,14 +101,20 @@ module.exports = {
 
 <iframe
   src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/rtl?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
+  style={{
+    width: '100%',
+    height: '500px',
+    border: 'solid rgba(0,0,0,0.1) 1px',
+    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
+  }}
   title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 ## Creating derived components with different style
 
-You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like:
+You can create a derived class of our component and override
+[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles),
+like:
 
 ```javascript
 import { css, customElement } from 'lit-element';
@@ -108,11 +134,18 @@ class MyDropdown extends BXDropdown {
 
 <iframe
   src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
+  style={{
+    width: '100%',
+    height: '500px',
+    border: 'solid rgba(0,0,0,0.1) 1px',
+    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
+  }}
   title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 ## CSS Shadow Parts
 
-In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner.
+In the future, we'd like to support
+[CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can
+use your application's CSS to affect `carbon-web-components` styles in a more
+flexible manner.
diff --git a/web-components/packages/carbon-web-components/docs/styling.md b/web-components/packages/carbon-web-components/docs/styling.md
@@ -1,8 +1,11 @@
 # Using custom styles in components
 
-As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa.
+As Shadow DOM (one of the Web Components specs that `carbon-web-components`
+uses) promises, styles that `carbon-web-components` defines does not affect
+styles in your application, or vice versa.
 
-However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options.
+However, in cases where your application or a Carbon-derived style guide wants
+to change the styles of our components, there are a few options.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -16,7 +19,8 @@ However, in cases where your application or a Carbon-derived style guide wants t
 
 ## Using CSS Custom Properties
 
-Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components:
+Changes to CSS Custom Properties of the Carbon theme are reflected in the color
+scheme of `carbon-web-components` components:
 
 [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/theme-zoning)
 
@@ -28,32 +32,41 @@ footer {
 }
 ```
 
-The color of the button in the code below changes to the one in the `g100` theme:
+The color of the button in the code below changes to the one in the `g100`
+theme:
 
 ```html
 <footer>
   <bx-btn kind="secondary">Secondary button</bx-btn>
 </footer>
 ```
 
-The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
+The names of CSS Custom Properties you can use are the Carbon theme tokens
+prefixed with `--cds-`. The list of Carbon theme tokens can be found at
+[here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
 
-With CSS Custom Properties approach, you can switch the entire theme under the specific element by:
+With CSS Custom Properties approach, you can switch the entire theme under the
+specific element by:
 
 ```css
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins';
 
 footer {
-  @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties
+  @include carbon--theme(
+    $carbon--theme--g100,
+    true
+  ); // Emits all theme tokens in CSS Custom Properties
 }
 ```
 
-Some components such as `Notification` and `Tag` have specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+Some components such as `Notification` and `Tag` have specific tokens per theme
+that need to emitted in the styles. You can do this for example by adding the
+following:
 
 ```css
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
+@use '@carbon/styles/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/component-tokens';
 @import 'carbon-components/src/components/tag/tag';
 .dds-theme-zone-g90 {
   @include carbon--theme($carbon--theme--g90, true) {
@@ -64,7 +77,12 @@ Some components such as `Notification` and `Tag` have specific tokens per theme
 
 ## Dependency injection
 
-You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version:
+You can let our custom elements modules load alternate `CSSResult` module. Below
+example uses
+[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/)
+to let our custom elements modules load RTL version of `CSSResult` module that
+is shipped alongside with default `CSSResult` modules, instead of loading the
+default version:
 
 [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/rtl)
 
@@ -87,7 +105,9 @@ module.exports = {
 
 ## Creating derived components with different style
 
-You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like:
+You can create a derived class of our component and override
+[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles),
+like:
 
 [![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style)
 
@@ -109,4 +129,7 @@ class MyDropdown extends BXDropdown {
 
 ## CSS Shadow Parts
 
-In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner.
+In the future, we'd like to support
+[CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can
+use your application's CSS to affect `carbon-web-components` styles in a more
+flexible manner.