Fluid pattern v2

.github/workflows/deploy.yml

@@ -14,38 +14,6 @@ on:
       - main
 
 jobs:
-  build:
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v2-beta
-        with:
-          node-version: 16.x
-
-      - name: Install packages
-        run: yarn install --frozen-lockfile --network-timeout 300000
-
-      - name: Build site
-        run: yarn build:clean
-
-      - name: Install IBM Cloud CLI
-        run: curl -fsSL https://clis.cloud.ibm.com/install/osx | sh
-
-      - name: Install Cloud Foundry CLI
-        run: ibmcloud cf install -v 6.51.0
-
-      - name: Login to ibmcloud
-        env:
-          API_KEY: ${{ secrets.API_KEY }}
-        run:
-          ibmcloud login -a "https://cloud.ibm.com" -u apikey -p "$API_KEY" -o
-          "carbon-design-system" -s "production" -r "us-south"
-
-      - name: Deploy website
-        run: |
-          ibmcloud cf v3-zdt-push carbon-website -b https://github.com/cloudfoundry/nginx-buildpack.git
-
   gh-pages:
     if: github.repository == 'carbon-design-system/carbon-website'
     runs-on: ubuntu-latest

.github/workflows/sync-platform-branch.yml

@@ -0,0 +1,38 @@
+name: Sync Platform Branch
+on:
+  schedule:
+    # Runs on Fridays 6:00 UTC (-6 CT, -5 EST)
+    #       ┌───────────── minute (0 - 59)
+    #       │ ┌───────────── hour (0 - 23)
+    #       │ │ ┌───────────── day of the month (1 - 31)
+    #       │ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
+    #       │ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
+    #       │ │ │ │ │
+    #       │ │ │ │ │
+    #       │ │ │ │ │
+    - cron: 0 6 * * 5
+
+  # Enable running this workflow manually from the Actions tab
+  workflow_dispatch: # Allow for running this manually.
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/sync-branches@1.4.0
+        with:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          FROM_BRANCH: "main"
+          TO_BRANCH: "carbon-platform"
+          PULL_REQUEST_BODY: "Platform Sync, pulling in new content from main into carbon-platform branch"
+          CONTENT_COMPARISON: true
+          REVIEWERS: '["francinelucca","andreancardona","alisonjoseph"]'

.kodiak.toml

@@ -2,5 +2,6 @@
 version = 1
 
 [merge]
-automerge_label = "status: ready to merge 🎉"
+automerge_label = ["status: ready to merge 🎉", "status: enable automerge 🟠"]
+notify_on_conflict = "false"
 method = "squash"

package.json

@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.18.0-rc.0",
-    "@carbon/icons-react": "^11.15.0-rc.0",
-    "@carbon/pictograms": "^12.11.0",
-    "@carbon/pictograms-react": "^11.37.0",
-    "@carbon/react": "^1.21.0-rc.0",
+    "@carbon/elements": "^11.19.0",
+    "@carbon/icons-react": "^11.16.0",
+    "@carbon/pictograms": "^12.12.0",
+    "@carbon/pictograms-react": "^11.38.0",
+    "@carbon/react": "^1.22.0",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",

src/components/ColorGrid/ColorGrid.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {
   colors,
   black100,
-  green60,
+  green50,
   orange40,
   red60,
   white0,
@@ -34,7 +34,7 @@ export default function ColorGrid({ colorFamily, ...rest }) {
         <ColorSwatch hex={red60} />
         <ColorSwatch hex={orange40} />
         <ColorSwatch hex={yellow20} />
-        <ColorSwatch hex={green60} />
+        <ColorSwatch hex={green50} />
       </div>
     );
   }

src/components/MdxIcon/index.js

@@ -6,6 +6,7 @@ import { mdxIcon, iconInverse } from './MdxIcon.module.scss';
 import sketch from './icons/sketch.svg';
 import ase from './icons/ase.png';
 import codesandbox from './icons/codesandbox.svg';
+import stackblitz from './icons/stackblitz.svg';
 import codepen from './icons/codepen.svg';
 import illustrator from './icons/illustrator.svg';
 import react from './icons/react.png';
@@ -23,6 +24,7 @@ const localIcons = {
   sketch,
   ase,
   codesandbox,
+  stackblitz,
   codepen,
   illustrator,
   react,

src/data/guidelines/color-tokens.js

@@ -1922,12 +1922,12 @@ const colorTokens = {
       role: ['Success', 'On'],
       value: {
         white: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g10: {
-          name: 'Green 60',
-          hex: '#198038',
+          name: 'Green 50',
+          hex: '#24a148',
         },
         g90: {
           name: 'Green 40',

src/data/nav-items.yaml

@@ -198,6 +198,8 @@
       path: /patterns/empty-states-pattern/
     - title: Filtering
       path: /patterns/filtering/
+    - title: Fluid styles
+      path: /patterns/fluid-styles/
     - title: Forms
       path: /patterns/forms-pattern/
     - title: Global header

src/data/status-indicators/palettes.js

@@ -5,21 +5,32 @@ export const statusLight = [
     light: true,
   },
   {
-    name: 'Green 60',
-    hex: '198038',
+    name: 'Green 50',
+    hex: '24A148',
     light: true,
   },
   {
-    name: 'Orange 50',
-    hex: 'eb6200',
+    name: 'Orange 40',
+    hex: 'ff832b',
     light: false,
   },
-  { name: 'Blue 60', hex: '0f62fe', light: true },
+  {
+    name: 'Orange 60 (outline)',
+    hex: 'ba4e00',
+    light: true,
+  },
+
   {
     name: 'Yellow 30',
     hex: 'f1c21b',
     light: false,
   },
+  {
+    name: 'Yellow 60 (outline)',
+    hex: '8e6a00',
+    light: true,
+  },
+  { name: 'Blue 70', hex: '0043ce', light: true },
   { name: 'Purple 60', hex: '8a3ffc', light: true },
   {
     name: 'Gray 60',
@@ -35,8 +46,8 @@ export const statusDark = [
     light: false,
   },
   {
-    name: 'Green 50',
-    hex: '24a148',
+    name: 'Green 40',
+    hex: '42be65',
     light: false,
   },
   {