Fluid datepicker v2

src/pages/components/date-picker/style.mdx

@@ -28,7 +28,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={8}>
 
-![Date picker input states](images/date-picker-style-7.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Fixed date picker input colors](images/date-picker-style-7.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid date picker input colors](images/date-picker-style-7-fluid.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
@@ -56,7 +70,21 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
 <Row>
 <Column colLg={12}>
 
-![Date picker input states](images/date-picker-style-6.png)
+<Tabs>
+
+<Tab label="Fixed">
+
+![Fixed date picker input states](images/date-picker-style-6.png)
+
+</Tab>
+
+<Tab label="Fluid">
+
+![Fluid date picker input states](images/date-picker-style-6-fluid.png)
+
+</Tab>
+
+</Tabs>
 
 </Column>
 </Row>
@@ -119,6 +147,8 @@ any proper nouns capitalized, and no more than three words.
 
 ### Date inputs
 
+#### Fixed input
+
 The widths of the date inputs may vary based on the grid and layout.
 
 | Element       | Property                    | px / rem | Spacing token |
@@ -136,23 +166,31 @@ The widths of the date inputs may vary based on the grid and layout.
 
 </div>
 
-<Caption>Structure and spacing for date picker inputs | px / rem</Caption>
+<Caption>Structure and spacing for fixed date picker inputs | px / rem</Caption>
 
-### Sizes
+#### Fluid input
 
-| Element | Size        | Height px / rem |
-| ------- | ----------- | --------------- |
-| Field   | Small (sm)  | 32 / 2          |
-|         | Medium (md) | 40 / 2.5        |
-|         | Large (lg)  | 48 / 3          |
+The widths of the date inputs may vary based on the grid and layout.
+
+| Element       | Property                    | px / rem    | Spacing token |
+| ------------- | --------------------------- | ----------- | ------------- |
+| Label         | padding-bottom              | 4 / 0.25    | `$spacing-02` |
+| Field         | height                      | 64 / 4      | `$spacing-10` |
+|               | padding-left, padding-right | 16 / 1      | `$spacing-05` |
+|               | padding-top, padding-bottom | 13 / 0.8125 | –             |
+|               | border-bottom               | 1px         | –             |
+| Calendar icon | height, width               | 16 / 1      | –             |
+|               | padding-left                | 8 / 0.5     | `$spacing-03` |
+| Focus         | border                      | 2px         | –             |
+| Error         | border                      | 2px         | –             |
 
 <div className="image--fixed">
 
-![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)
+![Structure for date picker inputs](images/date-picker-style-4-fluid.png)
 
 </div>
 
-<Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>
+<Caption>Structure and spacing for fluid date picker inputs | px / rem</Caption>
 
 ### Calendar menu
 
@@ -183,15 +221,19 @@ The widths of the date inputs may vary based on the grid and layout.
 
 ### Time picker
 
-There are two types of time pickers; a 12-hour and 24-hour time picker. The
-12-hour Time Picker is accompanied by a time period (am/pm) input, while the
-24-hour clock is not. Refer to [select](/components/select/code) for inline
-select styling.
+The time picker is a combination of a
+[text input](/components/text-input/style#structure) and
+[select](/components/select/style#structure) component. Refer to each component
+page for further details.
+
+#### Fixed input
+
+The widths of the time picker may vary based on the grid and layout.
 
 | Element | Property                    | px / rem | Spacing token |
 | ------- | --------------------------- | -------- | ------------- |
 | Label   | padding-bottom              | 8 / 0.5  | `$spacing-03` |
-| Field   | height                      | 40 / 2.5 | -             |
+| Field   | height                      | 40 / 2.5 | –             |
 |         | padding-right, padding-left | 16 / 1   | `$spacing-05` |
 | Select  | padding-right, padding-left | 16 / 1   | `$spacing-05` |
 
@@ -202,3 +244,57 @@ select styling.
 </div>
 
 <Caption>Structure and spacing for a time picker | px / rem</Caption>
+
+#### Fluid input
+
+The width of each component in the fluid time picker is a percentage of the
+group. Time picker's total width will vary based on the grid and layout
+
+| Element         | Property                    | px / rem   | Spacing token |
+| --------------- | --------------------------- | ---------- | ------------- |
+| Label           | padding-bottom              | 4 / 0.25   | `$spacing-02` |
+| Field           | height                      | 64 / 4     | –             |
+|                 | padding-right, padding-left | 16 / 1     | `$spacing-05` |
+| Divider         | width                       | 1px        | –             |
+| Time input      | width                       | 25% or 50% | –             |
+| Clock select    | width                       | 25% or 50% | –             |
+| Timezone select | width                       | 50%        | –             |
+
+<div className="image--fixed">
+
+![Structure for a time picker](images/time-picker-style-1-fluid-a.png)
+
+</div>
+
+<Caption>Structure and spacing for a time picker | px / rem</Caption>
+
+<div className="image--fixed">
+
+![Structure for a time picker](images/time-picker-style-1-fluid-b.png)
+
+</div>
+
+<Caption>
+  The width of each component in the fluid time picker is a percentage of the
+  group.
+</Caption>
+
+## Sizes
+
+### Fixed inputs
+
+| Element | Size        | Height px / rem |
+| ------- | ----------- | --------------- |
+| Field   | Small (sm)  | 32 / 2          |
+|         | Medium (md) | 40 / 2.5        |
+|         | Large (lg)  | 48 / 3          |
+
+<div className="image--fixed">
+
+![Sizes for simple and single date calendar sizes](images/date-picker-style-size.png)
+
+</div>
+
+<Caption>Sizes for simple and single date calendar sizes | px / rem</Caption>
+
+