{"componentChunkName":"component---src-pages-components-search-style-mdx","path":"/components/search/style/","result":{"pageContext":{"frontmatter":{"title":"Search","description":"Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/search/style.mdx","titleType":"prepend","MdxNode":{"id":"49d9aa4f-f625-5f81-85de-98ee09b9aafc","children":[],"parent":"d7dd3d1a-6ab9-5d00-8f61-f4ab18674581","internal":{"content":"---\ntitle: Search\ndescription: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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\n| Class | Property | Color token |\n| -------------------------------- | ---------------- | ----------- |\n| `.bx--search-input` | background-color | `$field-01` |\n| `.bx--search--light` | background-color | `$field-02` |\n| `.bx--search-input` | border-bottom | `$ui-04` |\n| `.bx--search-input` | text color | `$text-01` |\n| `.bx--search-input::placeholder` | text color | `$text-03` |\n| `.bx--search-magnifier` | fill | `$icon-01` |\n\n\n\n\n\n
\n\nExample of Search using $field-01\n\n### Interactive colors\n\n| Class | Property | Color token |\n| -------------------------------- | ---------------- | -------------- |\n| `.bx--search-input:focus` | border | `$focus` |\n| `.bx--search-input:disabled` | background-color | `$disabled-01` |\n| `.bx--search-input:disabled` | text color | `$disabled-02` |\n| `.bx--search-magnifier:disabled` | fill | `$disabled-02` |\n\n\n\n\n\n
\n\nExamples of enabled, focus, and disabled search states\n\n## Typography\n\nSearch text should be set in sentence case, with only the first letter of the first word capitalized.\n\n| Property | Font-size | Font-weight | Type token |\n| ----------------- | ---------- | ------------- | ---------------- |\n| `.bx--search--lg` | 16 / 1 | Regular / 400 | `$body-short-02` |\n| `.bx--search--sm` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of the search field should appropriately fit the design and layout of content.\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--search--lg` | height | 48 / 3 | – |\n| `.bx--search--sm` | height | 32 / 2 | – |\n| `.bx--search-magnifier`
`.bx--search-close` | height, width | 16 / 1 | – |\n| `.bx--search--lg` | padding-left, padding-right | 48 / 3 | `$spacing-09` |\n| `.bx--search--sm` | padding-left, padding-right | 32 / 2 | `$spacing-07` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for large search | px | rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for small search | px | rem\n\n","type":"Mdx","contentDigest":"6bd5dfd72be8f8305c02d2aa151eeb12","counter":1565,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Search","description":"Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Search\ndescription: Search enables users to specify a word or a phrase to find relevant pieces of content without the use of navigation.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\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\n| Class | Property | Color token |\n| -------------------------------- | ---------------- | ----------- |\n| `.bx--search-input` | background-color | `$field-01` |\n| `.bx--search--light` | background-color | `$field-02` |\n| `.bx--search-input` | border-bottom | `$ui-04` |\n| `.bx--search-input` | text color | `$text-01` |\n| `.bx--search-input::placeholder` | text color | `$text-03` |\n| `.bx--search-magnifier` | fill | `$icon-01` |\n\n\n\n\n\n
\n\nExample of Search using $field-01\n\n### Interactive colors\n\n| Class | Property | Color token |\n| -------------------------------- | ---------------- | -------------- |\n| `.bx--search-input:focus` | border | `$focus` |\n| `.bx--search-input:disabled` | background-color | `$disabled-01` |\n| `.bx--search-input:disabled` | text color | `$disabled-02` |\n| `.bx--search-magnifier:disabled` | fill | `$disabled-02` |\n\n\n\n\n\n
\n\nExamples of enabled, focus, and disabled search states\n\n## Typography\n\nSearch text should be set in sentence case, with only the first letter of the first word capitalized.\n\n| Property | Font-size | Font-weight | Type token |\n| ----------------- | ---------- | ------------- | ---------------- |\n| `.bx--search--lg` | 16 / 1 | Regular / 400 | `$body-short-02` |\n| `.bx--search--sm` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nThe width of the search field should appropriately fit the design and layout of content.\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--search--lg` | height | 48 / 3 | – |\n| `.bx--search--sm` | height | 32 / 2 | – |\n| `.bx--search-magnifier`
`.bx--search-close` | height, width | 16 / 1 | – |\n| `.bx--search--lg` | padding-left, padding-right | 48 / 3 | `$spacing-09` |\n| `.bx--search--sm` | padding-left, padding-right | 32 / 2 | `$spacing-07` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for large search | px | rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for small search | px | rem\n\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/search/style.mdx"}}}}