{"componentChunkName":"component---src-pages-components-date-picker-style-mdx","path":"/components/date-picker/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/date-picker/style.mdx","titleType":"prepend","MdxNode":{"id":"f54ce66f-55b0-538c-a3e7-181abab97bc9","children":[],"parent":"ea00946b-5925-5e50-ab93-dc59fe5507dc","internal":{"content":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\nIf a `min date` is set on the calendar, then any text appearing before that date will be `$disabled-03`, otherwise all text should be `$text-01` (unless the number is selected or highlighted).\n\n| Class                                                    | Property         | Color token                                |\n| -------------------------------------------------------- | ---------------- | ------------------------------------------ |\n| `.bx--label`                                             | text color       | `$text-02`                                 |\n| `.bx--date-picker__input`                                | background-color | `$field-01`                                |\n| `.bx--date-picker__input` <br/> `.bx--text-input--light` | background-color | `$field-02`                                |\n| `.bx--date-picker__input`                                | border-bottom    | `$ui-04`                                   |\n| `.bx--date-picker__input`                                | text color       | `$text-01`                                 |\n| `:placeholder`                                           | text color       | `$text-03`                                 |\n| `.bx--date-picker__icon`                                 | color            | `$icon-01`                                 |\n| `calendar`                                               | background-color | `$ui-01`                                   |\n| `calendar`                                               | box-shadow       | `0 12px 24px 0` <br/> `rgba(0, 0, 0, 0.1)` |\n| `day`                                                    | text color       | `$text-01`                                 |\n| `day.selected`                                           | text color       | `$text-04`                                 |\n| `day.selected`                                           | background-color | `$interactive-01`                          |\n| `day.inRange`                                            | text color       | `$interactive-01`                          |\n| `day.endRange`                                           | border           | `$interactive-01`                          |\n| `day.nextMonthDay`                                       | text color       | `$text-02`                                 |\n| `.today`                                                 | background-color | `$interactive-01`                          |\n\n<div className=\"image--fixed\">\n\n![Example of a date picker](images/date-picker-style-1.png)\n\n</div>\n\n<Caption>\n  Date picker example using both $field-02 (top) and $field-01 (bottom)\n</Caption>\n\n### Interactive states\n\n| Class                       | Property         | Color token    |\n| --------------------------- | ---------------- | -------------- |\n| `input:focus`               | border           | `$focus`       |\n| `input[data-invalid]`       | border-bottom    | `$support-01`  |\n| `.bx--form-requirement`     | text color       | `$support-01`  |\n| `input[data-invalid]:focus` | border-bottom    | `$support-01`  |\n| `day:focus`                 | border           | `$focus`       |\n| `day:hover`                 | background-color | `$hover-ui`    |\n| `.bx--label:disabled`       | text color       | `$disabled-02` |\n| `input:disabled`            | background-color | `$disabled-01` |\n| `input:disabled`            | text color       | `$disabled-02` |\n| `icon:disabled`             | color            | `$disabled-02` |\n\n**Active:** Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing the hint text is replaced with the user input text.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state should have a `.not-allowed` cursor on hover.\n\n## Typography\n\nLabels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.\n\n| Class                     | Font-size  | Font-weight   | Type token       |\n| ------------------------- | ---------- | ------------- | ---------------- |\n| `.bx--label`              | 14 / 0.875 | Regular / 400 | `$label-01`      |\n| `.bx--date-picker__input` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement`   | 12 / 0.75  | Regular / 400 | `$label-01`      |\n\n## Structure\n\n### Simple date pickers\n\n| Class                     | Property                    | px / rem | Spacing token |\n| ------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label`              | padding-bottom              | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__input` | height                      | 40 / 2.5 | –             |\n| `.bx--date-picker__input` | border-bottom               | 1px      | -             |\n| `.bx--date-picker__input` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for simple and single date pickers](images/date-picker-style-4.png)\n\n</div>\n\n<Caption>\n  Structure and spacing for simple and single date pickers | px / rem\n</Caption>\n\n### Single & range date pickers\n\n| Class                        | Property                                 | px / rem | Spacing token |\n| ---------------------------- | ---------------------------------------- | -------- | ------------- |\n| `.bx--label`                 | padding-bottom                           | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__input`    | height                                   | 40 / 2.5 | –             |\n| `.bx--date-picker__input`    | width                                    | 288 / 18 | –             |\n| `.bx--date-picker__input`    | padding-right, padding-left              | 16 / 1   | `$spacing-05` |\n| `.bx--date-picker__calendar` | height                                   | 336 / 21 | –             |\n| `.bx--date-picker__calendar` | width                                    | 288      | –             |\n| `.bx--date-picker__calendar` | padding-top, padding-right, padding-left | 4 / 0.25 | `$spacing-02` |\n| `.bx--date-picker__calendar` | padding-bottom                           | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__icon`     | height, width                            | 16 / 1   | –             |\n| `.bx--date-picker__icon`     | padding-right, padding-left              | 16 / 1   | `$spacing-05` |\n| `.today` dot                 | height & width                           | 4 /0.25  | –             |\n| `day`                        | height & width                           | 40 / 2.5 | –             |\n\n<div className=\"image--fixed\">\n\n![Structure for date picker](images/date-picker-style-2.png)\n\n</div>\n\n<Caption>Structure for date picker | px / rem</Caption>\n\n<div className=\"image--fixed\">\n\n![Spacing for date picker](images/date-picker-style-3.png)\n\n</div>\n\n<Caption>Spacing for date picker | px / rem</Caption>\n\n### Time picker\n\nThere 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.\n\n| Class                           | Property                    | px / rem | Spacing token |\n| ------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label`                    | padding-bottom              | 8 / 0.5  | `$spacing-03` |\n| `.bx--time-picker__input-field` | height                      | 40 / 2.5 | -             |\n| `.bx--time-picker__input-field` | padding-right, padding-left | 16 / 1   | `$spacing-05` |\n| `.bx--select-input`             | padding-right, padding-left | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for a time picker](images/time-picker-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing for a time picker | px / rem</Caption>\n","type":"Mdx","contentDigest":"94a443512ffddfeedc2a14738f58ef84","counter":1447,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Date picker","description":"Date and time pickers allow users to select a single or a range of dates and times.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Date picker\ndescription: Date and time pickers allow users to select a single or a range of dates and times.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nInputs come in two different colors. The default input color is `$field-01` and is used on `$ui-background` and `$ui-02` page backgrounds. The `--light` version input color is `$field-02` and is used on `$ui-01` page backgrounds.\n\nIf a `min date` is set on the calendar, then any text appearing before that date will be `$disabled-03`, otherwise all text should be `$text-01` (unless the number is selected or highlighted).\n\n| Class                                                    | Property         | Color token                                |\n| -------------------------------------------------------- | ---------------- | ------------------------------------------ |\n| `.bx--label`                                             | text color       | `$text-02`                                 |\n| `.bx--date-picker__input`                                | background-color | `$field-01`                                |\n| `.bx--date-picker__input` <br/> `.bx--text-input--light` | background-color | `$field-02`                                |\n| `.bx--date-picker__input`                                | border-bottom    | `$ui-04`                                   |\n| `.bx--date-picker__input`                                | text color       | `$text-01`                                 |\n| `:placeholder`                                           | text color       | `$text-03`                                 |\n| `.bx--date-picker__icon`                                 | color            | `$icon-01`                                 |\n| `calendar`                                               | background-color | `$ui-01`                                   |\n| `calendar`                                               | box-shadow       | `0 12px 24px 0` <br/> `rgba(0, 0, 0, 0.1)` |\n| `day`                                                    | text color       | `$text-01`                                 |\n| `day.selected`                                           | text color       | `$text-04`                                 |\n| `day.selected`                                           | background-color | `$interactive-01`                          |\n| `day.inRange`                                            | text color       | `$interactive-01`                          |\n| `day.endRange`                                           | border           | `$interactive-01`                          |\n| `day.nextMonthDay`                                       | text color       | `$text-02`                                 |\n| `.today`                                                 | background-color | `$interactive-01`                          |\n\n<div className=\"image--fixed\">\n\n![Example of a date picker](images/date-picker-style-1.png)\n\n</div>\n\n<Caption>\n  Date picker example using both $field-02 (top) and $field-01 (bottom)\n</Caption>\n\n### Interactive states\n\n| Class                       | Property         | Color token    |\n| --------------------------- | ---------------- | -------------- |\n| `input:focus`               | border           | `$focus`       |\n| `input[data-invalid]`       | border-bottom    | `$support-01`  |\n| `.bx--form-requirement`     | text color       | `$support-01`  |\n| `input[data-invalid]:focus` | border-bottom    | `$support-01`  |\n| `day:focus`                 | border           | `$focus`       |\n| `day:hover`                 | background-color | `$hover-ui`    |\n| `.bx--label:disabled`       | text color       | `$disabled-02` |\n| `input:disabled`            | background-color | `$disabled-01` |\n| `input:disabled`            | text color       | `$disabled-02` |\n| `icon:disabled`             | color            | `$disabled-02` |\n\n**Active:** Placeholder text should remain when the user clicks into the text input and gets a cursor. Once the user starts typing the hint text is replaced with the user input text.\n\n**Error:** Error messages appear below the input field and are always present while invalid.\n\n**Disabled:** Disabled state should have a `.not-allowed` cursor on hover.\n\n## Typography\n\nLabels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.\n\n| Class                     | Font-size  | Font-weight   | Type token       |\n| ------------------------- | ---------- | ------------- | ---------------- |\n| `.bx--label`              | 14 / 0.875 | Regular / 400 | `$label-01`      |\n| `.bx--date-picker__input` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--form-requirement`   | 12 / 0.75  | Regular / 400 | `$label-01`      |\n\n## Structure\n\n### Simple date pickers\n\n| Class                     | Property                    | px / rem | Spacing token |\n| ------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label`              | padding-bottom              | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__input` | height                      | 40 / 2.5 | –             |\n| `.bx--date-picker__input` | border-bottom               | 1px      | -             |\n| `.bx--date-picker__input` | padding-left, padding-right | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for simple and single date pickers](images/date-picker-style-4.png)\n\n</div>\n\n<Caption>\n  Structure and spacing for simple and single date pickers | px / rem\n</Caption>\n\n### Single & range date pickers\n\n| Class                        | Property                                 | px / rem | Spacing token |\n| ---------------------------- | ---------------------------------------- | -------- | ------------- |\n| `.bx--label`                 | padding-bottom                           | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__input`    | height                                   | 40 / 2.5 | –             |\n| `.bx--date-picker__input`    | width                                    | 288 / 18 | –             |\n| `.bx--date-picker__input`    | padding-right, padding-left              | 16 / 1   | `$spacing-05` |\n| `.bx--date-picker__calendar` | height                                   | 336 / 21 | –             |\n| `.bx--date-picker__calendar` | width                                    | 288      | –             |\n| `.bx--date-picker__calendar` | padding-top, padding-right, padding-left | 4 / 0.25 | `$spacing-02` |\n| `.bx--date-picker__calendar` | padding-bottom                           | 8 / 0.5  | `$spacing-03` |\n| `.bx--date-picker__icon`     | height, width                            | 16 / 1   | –             |\n| `.bx--date-picker__icon`     | padding-right, padding-left              | 16 / 1   | `$spacing-05` |\n| `.today` dot                 | height & width                           | 4 /0.25  | –             |\n| `day`                        | height & width                           | 40 / 2.5 | –             |\n\n<div className=\"image--fixed\">\n\n![Structure for date picker](images/date-picker-style-2.png)\n\n</div>\n\n<Caption>Structure for date picker | px / rem</Caption>\n\n<div className=\"image--fixed\">\n\n![Spacing for date picker](images/date-picker-style-3.png)\n\n</div>\n\n<Caption>Spacing for date picker | px / rem</Caption>\n\n### Time picker\n\nThere 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.\n\n| Class                           | Property                    | px / rem | Spacing token |\n| ------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--label`                    | padding-bottom              | 8 / 0.5  | `$spacing-03` |\n| `.bx--time-picker__input-field` | height                      | 40 / 2.5 | -             |\n| `.bx--time-picker__input-field` | padding-right, padding-left | 16 / 1   | `$spacing-05` |\n| `.bx--select-input`             | padding-right, padding-left | 16 / 1   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for a time picker](images/time-picker-style-1.png)\n\n</div>\n\n<Caption>Structure and spacing for a time picker | px / rem</Caption>\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/date-picker/style.mdx"}}}}