carbon-design-system · aledavila · Mar 3, 2022 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
@@ -17,6 +17,7 @@
           "composes"
         ]
       }
-    ]
+    ],
+    "no-descending-specificity": null
   }
 }
@@ -1,3 +1,6 @@
+## [3.0.0-next.1](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v3.0.0-next.0...v3.0.0-next.1) (2022-01-10)
+
+## [3.0.0-next.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4...v3.0.0-next.0) (2021-10-22)
 ## [2.3.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.2.0...v2.3.0) (2022-02-17)
 
 
@@ -14,8 +17,6 @@
 * do dont component updates ([#1220](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1220)) ([67fc11c](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/67fc11c1df4a450fc6011d0696cc92fb2685e34b))
 * update the references to the new homepage ([#1212](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1212)) ([57d3e88](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/57d3e886b8ef260481414ef8b7d20c9668f81fc9))
 
-## [3.0.0-next.1](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v3.0.0-next.0...v3.0.0-next.1) (2022-01-10)
-
 ## [2.2.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.6...v2.2.0) (2022-01-10)
 
 
@@ -37,9 +38,6 @@
 
 * grid alignment at max breakpoint ([#1181](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1181)) ([9a44a87](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/9a44a87b8958c5a790e1c5726a341e31e4a5ae63))
 * medium post image aspect ratio closes [#1176](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1176) ([#1185](https://github.com/carbon-design-system/gatsby-theme-carbon/issues/1185)) ([566cfe7](https://github.com/carbon-design-system/gatsby-theme-carbon/commit/566cfe77f4a7489e5f300eb0e94f64aebf3ee2f6))
->>>>>>> 5257408683f56b4a9709111325455e201c4f0584
-
-## [3.0.0-next.0](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4...v3.0.0-next.0) (2021-10-22)
 
 ### [2.1.4](https://github.com/carbon-design-system/gatsby-theme-carbon/compare/v2.1.4-next.0...v2.1.4) (2021-10-19)
 

@@ -92,7 +92,7 @@
     "husky": "^4.2.3",
     "lerna": "^3.22.1",
     "lint-staged": "^10.0.9",
-    "prettier": "^2.0.2",
+    "prettier": "^2.5.1",
     "prettier-config-carbon": "^0.2.0",
     "release-it": "^14.6.1",
     "release-it-yarn-workspaces": "^2.0.1",

@@ -1,5 +1,5 @@
 .callout-link {
-  @include carbon--type-style('body-long-02');
+  @include type-style('body-long-02');
   display: table-cell; // like display block, but the width fits to content rather than 100%
   position: relative;
   top: $spacing-06; //margin-top doesn't work on table-cell, and padding-top looks weird on focus

@@ -19,9 +19,8 @@ It should only be used within a `<Column>` component with specific parameters.
 **Warning:** If you use more than one `<Aside>` component on a single page, you
 need to provide an accessibility label so that someone using assistive
 technology can quickly understand the purpose of the landmark. See
-[Mozilla Developer Network’s documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Complementary_role#Labeling_landmarks)
-for more information. Props for accessibility labels are described in the
-[Props section](#props) below.
+Mozilla Developer Network’s documentation for more information. Props for accessibility labels are described in the
+props below.
 
 </InlineNotification>
 

@@ -6,8 +6,7 @@ description: Usage instructions for the DoDontExample component
 <InlineNotification kind="warning">
 
 **Warning:** This component will be deprecated in a future release. Please use
-the [DoDontRow](/components/DoDontRow) and [DoDont](/components/DoDontRow)
-component instead.
+the `<DoDontRow>` and `<DoDont>`component instead.
 
 </InlineNotification>
 

@@ -15,7 +15,7 @@ repo.
 
 ## Row
 
-The `<Row>` component is a wrapper that adds the `bx--row` class to a wrapper
+The `<Row>` component is a wrapper that adds the `cds--row` class to a wrapper
 div. You will want to use this to define rows that you will place `<Column>`
 components inside of.
 

@@ -6,7 +6,7 @@ description: Usage instructions for the Inline notification component
 <PageDescription>
 
 The `<InlineNotification>` component is used to communicate important
-information to a user.
+information to a user. For accessibility reasons, `<InlineNotification>` content cannot include interactive elements, just text.
 
 </PageDescription>
 
@@ -16,8 +16,7 @@ information to a user.
 
 <InlineNotification>
 
-**Lorem ipsum:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Lorem ipsum:** dolor sit amet elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -29,8 +28,7 @@ non vel quam.
 
 <InlineNotification kind="error">
 
-**Error:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Error:** dolor sit amet elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -42,8 +40,7 @@ non vel quam.
 
 <InlineNotification kind="success">
 
-**Success:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Success:** dolor sit amet elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -55,8 +52,7 @@ non vel quam.
 
 <InlineNotification kind="warning">
 
-**Warning:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Warning:** dolor sit amet, elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -71,8 +67,7 @@ non vel quam.
 
 <InlineNotification>
 
-**Lorem ipsum:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Lorem ipsum:** dolor sit amet, elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -84,8 +79,7 @@ non vel quam.
 
 <InlineNotification kind="error">
 
-**Error:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Error:** dolor sit amet, elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -97,8 +91,7 @@ non vel quam.
 
 <InlineNotification kind="success">
 
-**Success:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Success:** dolor sit amet, elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
@@ -110,8 +103,7 @@ non vel quam.
 
 <InlineNotification kind="warning">
 
-**Warning:** dolor sit amet,
-[consectetur adipiscing](/components/InlineNotification) elit. Curabitur ac odio
+**Warning:** dolor sit amet, elit. Curabitur ac odio
 arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
 pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
 dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit

@@ -177,8 +177,8 @@ with the
 [global selector](https://github.com/css-modules/css-modules#exceptions).
 
 ```scss
-:global(.bx--grid) .codeBlock {
-  @include carbon--type-style('code-01');
+:global(.cds--grid) .codeBlock {
+  @include type-style('code-01');
 }
 ```
 

@@ -25,12 +25,12 @@ for you to share your component with other theme consumers down the line.
 Every Sass file in your project automatically has access to the the following
 carbon resources:
 
-- colors – `background: carbon--gray-10;`
+- colors – `background: gray-10;`
 - spacing - `margin: $spacing-05;`
 - theme-tokens - `color: $text-01;`
 - motion -
-  `transition: all $duration--moderate-01 motion(entrance, productive);`
-- typography - `@include carbon--type-style('body-long-01');`
+  `transition: all $duration-moderate-01 motion(entrance, productive);`
+- typography - `@include type-style('body-long-01');`
 
 ## Targeting theme components
 

@@ -24,17 +24,14 @@
   "dependencies": {
     "@babel/core": "^7.14.6",
     "@carbon/elements": "^10.38.0",
-    "@carbon/icons-react": "^10.35.0",
     "@carbon/pictograms-react": "^11.14.0",
+    "@carbon/react": "^0.15.1",
     "@carbon/themes": "^10.38.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@reach/router": "^1.2.1",
     "@vimeo/player": "^2.9.1",
     "beautiful-react-hooks": "^0.23.1",
-    "carbon-components": "^10.39.0",
-    "carbon-components-react": "^7.39.0",
-    "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "focus-trap-react": "^8.4.2",
@@ -58,13 +55,13 @@
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^1.0.3",
-    "node-sass": "^6.0.1",
     "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-helmet": "^6.0.0-beta",
     "react-transition-group": "^4.4.2",
     "react-use": "^15.3.4",
     "remark-slug": "^6.0.0",
+    "sass": "^1.49.0",
     "slugify": "^1.3.4",
     "smooth-scroll": "^16.1.3",
     "use-media": "^1.4.0"

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Accordion as CarbonAccordion } from 'carbon-components-react';
+import { Accordion as CarbonAccordion } from '@carbon/react';
 import { accordion } from './Accordion.module.scss';
 import { Row, Column } from '../Grid';
 

@@ -1,17 +1,17 @@
-.accordion :global(.bx--accordion__content) {
+.accordion :global(.cds--accordion__content) {
   padding-right: 4rem;
 }
 
-.accordion :global(.bx--accordion__heading) {
+.accordion :global(.cds--accordion__heading) {
   padding-top: $spacing-04;
   padding-bottom: $spacing-04;
 }
 
-.accordion :global(.bx--accordion__title) {
-  @include carbon--type-style('heading-02');
+.accordion :global(.cds--accordion__title) {
+  @include type-style('heading-02');
   padding-right: $spacing-07;
 }
 
-.accordion :global(.bx--accordion__content) p {
-  @include carbon--type-style('body-long-02');
+.accordion :global(.cds--accordion__content) p {
+  @include type-style('body-long-02');
 }
@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { AccordionItem as CarbonAccordionItem } from 'carbon-components-react';
+import { AccordionItem as CarbonAccordionItem } from '@carbon/react';
 
 const AccordionItem = ({ className, children, ...rest }) => (
   <CarbonAccordionItem {...rest} className={cx(className)}>

@@ -1,24 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
-import { ArrowRight20, Information20 } from '@carbon/icons-react';
+import { ArrowRight, Information } from '@carbon/react/icons';
 
 const AlertBanner = ({ alertText, buttonText }) => (
   <aside aria-label="alert banner" className="website-alert">
-    <Information20 className="website-alert__icon" />
+    <Information size={20} className="website-alert__icon" />
     <p className="website-alert__text">{alertText}</p>
     <Link
       className="website-alert__button"
       tabIndex="-1"
       to="/updates/v10-migration/overview">
-      <button className="bx--btn bx--btn--secondary bx--btn--sm" type="button">
+      <button
+        className="cds--btn cds--btn--secondary cds--btn--sm"
+        type="button">
         {buttonText}
-        <ArrowRight20 />
+        <ArrowRight size={20} />
       </button>
     </Link>
   </aside>
 );
-
 AlertBanner.propTypes = {
   alertText: PropTypes.string.isRequired,
   buttonText: PropTypes.string.isRequired,

@@ -2,7 +2,7 @@
   width: 100%;
   --space: 32px;
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     width: 66.67%;
   }
 }
@@ -12,10 +12,10 @@
 }
 
 .link {
-  @include carbon--type-style('expressive-heading-03', true);
+  @include type-style('expressive-heading-03', true);
   position: relative;
   display: inline-block;
-  transition: color $transition--base;
+  transition: color $transition-base;
   color: currentColor;
   text-decoration: none;
   margin-bottom: $spacing-03;
@@ -35,13 +35,13 @@
 }
 
 .list--small .link {
-  @include carbon--type-style('body-long-02');
+  @include type-style('body-long-02');
   margin-bottom: 0;
 }
 
 // Multiple Columns
 .multiple-columns {
-  @include carbon--breakpoint('md') {
+  @include breakpoint('md') {
     column-count: 2;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,6 +17,7 @@ @@
               "composes"
             ]
           }
-        ]
+        ],
+        "no-descending-specificity": null
       }
     }