Fluid form

package.json

@@ -40,11 +40,11 @@
   "dependencies": {
     "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.16.0",
-    "@carbon/icons-react": "^11.13.0",
-    "@carbon/pictograms": "^12.10.0",
-    "@carbon/pictograms-react": "^11.36.0",
-    "@carbon/react": "^1.19.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",
     "@loadable/component": "^5.15.2",
     "@slack/web-api": "^5.11.0",
     "babel-preset-env": "^1.7.0",

src/data/guidelines/color-tokens.js

@@ -242,19 +242,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
         g100: {
           name: 'Gray 90 hover',
-          hex: '#353535',
+          hex: '#333333',
         },
       },
     },
@@ -263,19 +263,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 70 hover',
-          hex: '#656565',
+          hex: '#636363',
         },
         g100: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
       },
     },
@@ -284,19 +284,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 60 hover',
           hex: '#5e5e5e',
         },
         g100: {
           name: 'Gray 70 hover',
-          hex: '#656565',
+          hex: '#636363',
         },
       },
     },
@@ -792,19 +792,19 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 80 hover',
-          hex: '#4c4c4c',
+          hex: '#474747',
         },
         g100: {
           name: 'Gray 90 hover',
-          hex: '#353535',
+          hex: '#333333',
         },
       },
     },
@@ -813,11 +813,11 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 70 hover',
@@ -834,11 +834,11 @@ const colorTokens = {
       value: {
         white: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g10: {
           name: 'Gray 10 hover',
-          hex: '#e5e5e5',
+          hex: '#e8e8e8',
         },
         g90: {
           name: 'Gray 60 hover',
@@ -2266,4 +2266,4 @@ const colorTokens = {
   },
 };
 
-export default colorTokens;
+export default colorTokens;

src/pages/components/form/style.mdx

@@ -20,11 +20,6 @@ for specific typography details on each component.
 
 </div>
 
-<Caption>
-  Example of light fields with $field-02 (left) and the default version with
-  $field-01 (right)
-</Caption>
-
 ## Typography
 
 Form headings and labels should be set in sentence case with the first letter of
@@ -47,20 +42,20 @@ for specific typography details on each component.
 
 Forms are made up of several different components. The order in which these
 elements are arranged is flexible and by default the vertical spacing between
-elements should follow the guidelines below. The vertical spacing in a form can
+elements follow the guidelines below. The vertical spacing in a fixed form can
 be adjusted to be smaller than the default depending on the use case or layout.
 
 Forms can be one column or two. The width of each column varies based on the
 content and layout of the design. On mobile, forms can only have one column.
 
-### Recommended
+### Recommended for fixed forms
 
 | Element              | Property      | px / rem | Spacing token |
 | -------------------- | ------------- | -------- | ------------- |
 | Form items           | margin-bottom | 32 / 2   | `$spacing-07` |
-| Title area           | margin-bottom | 32 / 2   | `$spacing-07` |
+| Title area           | margin-bottom | 40 / 2.5   | `$spacing-08` |
 | Gutter between items | –             | 32 / 2   | `$spacing-07` |
-| Buttons              | margin-top    | 32 / 2   | `$spacing-07` |
+| Buttons              | margin-top    | 48 / 3   | `$spacing-09` |
 
 <div className="image--fixed">
 
@@ -72,9 +67,18 @@ content and layout of the design. On mobile, forms can only have one column.
   Structure and spacing measurements for a double column form | px / rem
 </Caption>
 
+### Recommended for fluid forms
+
+| Element              | Property      | px / rem | Spacing token |
+| -------------------- | ------------- | -------- | ------------- |
+| Form items           | margin-bottom | 0 px     | –             |
+| Title area           | margin-bottom | 40 / 2.5   | `$spacing-08` |
+| Gutter between items | –             | 1 px     | –             |
+| Buttons              | margin-top    | 48 / 3   | `$spacing-09` |
+
 <div className="image--fixed">
 
-![Structure and spacing measurements for a single column form](images/form-style-2.png)
+![Structure and spacing measurements for a single column form](images/form-style-4.png)
 
 </div>