docs: clarify yarn install purpose in README

README.md

@@ -30,7 +30,7 @@ src
 - 🗺
   [Navigation guidelines](https://gatsby-theme-carbon.now.sh/guides/navigation/sidebar)
 
-- `yarn install` – install dependencies
+- `yarn install` – installs all project dependencies listed in `package.json`
 - `yarn dev` – start the development server
 - `yarn dev:clean` – use this if you have cache issues
 - `lint:js` – lint your JavaScript files
@@ -48,3 +48,19 @@ Running the build command generates all the files and places them in the
 ```
 yarn build
 ```
+
+## 👩‍💻 Getting Started as a First-Time Contributor
+
+Welcome! 🎉 If you're new to contributing to this project, here’s a quick guide
+to get you started smoothly.
+
+### 1. Prerequisites
+
+- **Node.js (v16 or higher recommended)**  
+  [Install Node.js](https://nodejs.org/) or use a version manager like
+  [`nvm`](https://github.com/nvm-sh/nvm).
+- **Yarn package manager**  
+  Install Yarn globally (if not already installed):
+  ```bash
+  npm install --global yarn
+  ```

gatsby-config.js

@@ -73,5 +73,16 @@ module.exports = {
         directory: path.resolve(__dirname, './src/data/chart-index'),
       },
     },
+    // Fix for Sass legacy JS API deprecation warnings:
+    {
+      resolve: 'gatsby-plugin-sass',
+      options: {
+        implementation: require('sass'), // Use Dart Sass explicitly
+        sassOptions: {
+          // No need for 'api' here as Dart Sass is default now, but you can silence warnings:
+          quietDeps: true,
+        },
+      },
+    },
   ],
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "carbondesignsystem",
   "private": true,
-  "version": "2.0,0",
+  "version": "2.0.0",
   "license": "MIT",
   "workspaces": {
     "packages": [
@@ -10,6 +10,7 @@
   },
   "scripts": {
     "dev": "NODE_OPTIONS='--max-old-space-size=8192' gatsby develop -H 0.0.0.0",
+    "develop": "yarn dev",
     "dev:clean": "gatsby clean && yarn dev",
     "clean": "gatsby clean",
     "build": "node --max-old-space-size=8192 ./node_modules/.bin/gatsby build",
@@ -46,6 +47,7 @@
     "codesandbox": "^2.2.3",
     "d3": "^7.9.0",
     "gatsby": "^5.13.5",
+    "gatsby-plugin-sass": "^6.14.0",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-theme-carbon": "^4.3.6",
     "markdown-it": "^14.1.0",
@@ -69,6 +71,7 @@
     "markdown-loader": "^8.0.0",
     "netlify-cli": "^18.1.0",
     "prettier": "^2.0.2",
+    "sass": "^1.89.2",
     "typescript": "^4.8.4"
   },
   "lint-staged": {

yarn.lock

@@ -8752,6 +8752,7 @@ __metadata:
     eslint-config-carbon: "npm:3.15.0"
     gatsby: "npm:^5.13.5"
     gatsby-plugin-lodash: "npm:^6.13.1"
+    gatsby-plugin-sass: "npm:^6.14.0"
     gatsby-plugin-sharp: "npm:^5.13.1"
     gatsby-plugin-sitemap: "npm:^6.13.1"
     gatsby-source-filesystem: "npm:^5.13.1"
@@ -8768,6 +8769,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-dom: "npm:^18.2.0"
+    sass: "npm:^1.89.2"
     typescript: "npm:^4.8.4"
   languageName: unknown
   linkType: soft
@@ -24726,6 +24728,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sass@npm:^1.89.2":
+  version: 1.89.2
+  resolution: "sass@npm:1.89.2"
+  dependencies:
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
+  bin:
+    sass: sass.js
+  checksum: 10c0/752ccc7581b0c6395f63918116c20924e99943a86d79e94f5c4a0d41b1e981fe1f0ecd1ee82fff21496f81dbc91f68fb35a498166562ec8ec53e7aad7c3dbd9d
+  languageName: node
+  linkType: hard
+
 "sax@npm:>=0.6.0, sax@npm:^1.2.4":
   version: 1.4.1
   resolution: "sax@npm:1.4.1"