Initial pre-release - Carbon v11 styles

.github/workflows/ci.yml

@@ -9,17 +9,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: actions/cache@v3
-        id: yarn-cache
+        id: npm-cache
         with:
           path: "**/node_modules"
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
 
       - name: Install dependencies, build, test, and lint the codebase
         run: |
-          yarn
-          yarn build:lib
-          yarn test:types
-          yarn lint
+          npm i
+          npm run build:lib
+          npm run test:types
+          npm run lint
 
       - name: Trigger deploy
         if: github.ref == 'refs/heads/master'

CONTRIBUTING.md

@@ -10,15 +10,15 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
   - [Component Format](#component-format)
   - [Editing a component](#editing-a-component)
   - [Creating a component](#creating-a-component)
-  - [Run `yarn build:docs`](#run-yarn-builddocs)
+  - [Run `npm run build:docs`](#run-npm-run-builddocs)
 - [Submit a Pull Request](#submit-a-pull-request)
   - [Sync Your Fork](#sync-your-fork)
   - [Submit a PR](#submit-a-pr)
 
 ## Prerequisites
 
-- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=18)
+- [npm](https://docs.npmjs.com/cli) (bundled with Node.js)
 
 ## Project set-up
 
@@ -43,7 +43,7 @@ Install the project dependencies:
 
 ```sh
 # carbon-components-svelte/
-yarn install
+npm install
 ```
 
 ## Documentation set-up
@@ -54,7 +54,7 @@ First, create a symbolic link at the root of the project folder:
 
 ```sh
 # carbon-components-svelte/
-yarn link
+npm link
 ```
 
 Go into the `docs` folder:
@@ -66,8 +66,8 @@ cd docs
 Link `"carbon-components-svelte"`:
 
 ```sh
-yarn link "carbon-components-svelte"
-yarn install
+npm link "carbon-components-svelte"
+npm install
 ```
 
 If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@@ -87,7 +87,7 @@ Preview changes to components from the `src` folder in the documentation website
 In the `docs` folder, run:
 
 ```sh
-yarn dev
+npm run dev
 ```
 
 The site should be served at `http://localhost:3000/` (or the next available port).
@@ -134,13 +134,13 @@ export {
 } from "./ComposedModal";
 ```
 
-### Run `yarn build:docs`
+### Run `npm run build:docs`
 
 Run the following command to re-generate TypeScript definitions and documentation.
 
 ```sh
 # carbon-components-svelte/
-yarn build:docs
+npm run build:docs
 ```
 
 ## Submit a Pull Request
@@ -171,11 +171,11 @@ The workflow is automatically triggered when pushing a tag that begins with `v`
 
 However, maintainers must perform a few things in preparation for a release.
 
-Locally, while on `master` and the branch is clean, run `yarn release`. This command will:
+Locally, while on `master` and the branch is clean, run `npm run release`. This command will:
 
 - Bump the semantic version in `package.json`
 - Generate notes in `CHANGELOG.md`
-- Run `yarn build:docs` to update the generated documentation
+- Run `npm run build:docs` to update the generated documentation
 
 This command will not create a commit nor tag. Afterwards, perform the following manually:
 

README.md

@@ -45,11 +45,10 @@ pnpm i -D carbon-components-svelte
 
 ### Styling
 
-Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
+Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark).
 
 - **white.css**: Default Carbon theme (light)
 - **g10.css**: Gray 10 theme (light)
-- **g80.css**: Gray 80 theme (dark)
 - **g90.css**: Gray 90 theme (dark)
 - **g100.css**: Gray 100 theme (dark)
 - **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
@@ -60,7 +59,6 @@ The compiled CSS is generated from the following `.scss` files:
 
 - [css/white.scss](css/white.scss)
 - [css/g10.scss](css/g10.scss)
-- [css/g80.scss](css/g80.scss)
 - [css/g90.scss](css/g90.scss)
 - [css/g100.scss](css/g100.scss)
 - [css/all.scss](css/all.scss)
@@ -74,9 +72,6 @@ import "carbon-components-svelte/css/white.css";
 // Gray 10 theme
 import "carbon-components-svelte/css/g10.css";
 
-// Gray 80 theme
-import "carbon-components-svelte/css/g80.css";
-
 // Gray 90 theme
 import "carbon-components-svelte/css/g90.css";
 
@@ -147,7 +142,7 @@ Programmatically switch between each of the five Carbon themes by setting the "t
 
 ```html
 <script>
-  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"
+  let theme = "white"; // "white" | "g10" | "g90" | "g100"
 
   $: document.documentElement.setAttribute("theme", theme);
 </script>