{"componentChunkName":"component---src-pages-components-toggle-style-mdx","path":"/components/toggle/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/toggle/style.mdx","titleType":"prepend","MdxNode":{"id":"3612bf1c-4788-5750-a5b0-b477414e09fb","children":[],"parent":"97a03e74-31f7-51bc-aa4e-dfd1d6a0d1a9","internal":{"content":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------------------------------------------- | ---------------- | ------------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--toggle__text--left` | text color | `$text-01` |\n| `.bx--toggle__appearance:before` | background-color | `$ui-04` |\n| `.bx--toggle__appearance:after` | background-color | `$ui-03` |\n| `.bx--toggle:checked +`
`.bx--toggle__appearance:before` | background-color | `$support-02` |\n| `.bx--toggle:checked +`
`.bx--toggle__appearance:after` | background-color | `$icon-03` |\n| `.bx--toggle:checked` | background-color | `$support-02` |\n| `.bx--toggle__check` | fill | `$support-02` |\n\n\n\n\n\n
\n\n\n Examples of inactive, inactive hover, and active states for a toggle\n\n\n### Interactive states\n\n| Class | Property | Color token |\n| --------------------------------------------------------------- | ---------------- | -------------- |\n| `.bx--toggle__appearance:focus` | border | `$focus` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--toggle__text--left:disabled` | text color | `$disabled-02` |\n| `.bx--toggle:disabled +`
`.bx--toggle__appearance:before` | background-color | `$disabled-01` |\n| `.bx--toggle:disabled +`
`.bx--toggle__appearance:after` | background-color | `$disabled-02` |\n\n## Typography\n\nToggle labels 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 (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--toggle__text--left` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n### Toggle\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------- | ------------------------- | --------- | ------------- |\n| `.bx--toggle__appearance` | width | 48 / 3 | – |\n| `.bx--toggle__appearance` | height | 24 / 1.5 | – |\n| `.bx--toggle__appearance:after` | height, width | 18 / 1.25 | – |\n| `.bx--toggle__label` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--toggle__text--left` | margin-left | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\nStructure and spacing measurements for toggle | px / rem\n\n### Small toggle\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------------------ | ------------------------- | ---------- | ------------- |\n| `.bx--toggle--small` | height | 16 / 1 | – |\n| `.bx--toggle--small` | width | 32 / 2 | – |\n| `.bx--toggle--small +`
`.bx--toggle__appearance:after` | height, width | 10 / 0.625 | – |\n| `.bx--toggle--small` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for small toggle | px / rem\n\n","type":"Mdx","contentDigest":"d551bf51aa8f5e6761897c295bbbc69c","counter":1365,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Toggle","description":"A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Toggle\ndescription: A toggle is a control that is used to quickly switch between two possible states. They are commonly used for “on/off” switches.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class | Property | Color token |\n| -------------------------------------------------------------- | ---------------- | ------------- |\n| `.bx--label` | text color | `$text-02` |\n| `.bx--toggle__text--left` | text color | `$text-01` |\n| `.bx--toggle__appearance:before` | background-color | `$ui-04` |\n| `.bx--toggle__appearance:after` | background-color | `$ui-03` |\n| `.bx--toggle:checked +`
`.bx--toggle__appearance:before` | background-color | `$support-02` |\n| `.bx--toggle:checked +`
`.bx--toggle__appearance:after` | background-color | `$icon-03` |\n| `.bx--toggle:checked` | background-color | `$support-02` |\n| `.bx--toggle__check` | fill | `$support-02` |\n\n\n\n\n\n
\n\n\n Examples of inactive, inactive hover, and active states for a toggle\n\n\n### Interactive states\n\n| Class | Property | Color token |\n| --------------------------------------------------------------- | ---------------- | -------------- |\n| `.bx--toggle__appearance:focus` | border | `$focus` |\n| `.bx--label:disabled` | text color | `$disabled-02` |\n| `.bx--toggle__text--left:disabled` | text color | `$disabled-02` |\n| `.bx--toggle:disabled +`
`.bx--toggle__appearance:before` | background-color | `$disabled-01` |\n| `.bx--toggle:disabled +`
`.bx--toggle__appearance:after` | background-color | `$disabled-02` |\n\n## Typography\n\nToggle labels 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 (px/rem) | Font-weight | Type token |\n| ------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--toggle__text--left` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n### Toggle\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------- | ------------------------- | --------- | ------------- |\n| `.bx--toggle__appearance` | width | 48 / 3 | – |\n| `.bx--toggle__appearance` | height | 24 / 1.5 | – |\n| `.bx--toggle__appearance:after` | height, width | 18 / 1.25 | – |\n| `.bx--toggle__label` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |\n| `.bx--toggle__text--left` | margin-left | 8 / 0.5 | `$spacing-03` |\n\n\n\n\n\n
\n\nStructure and spacing measurements for toggle | px / rem\n\n### Small toggle\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------------------------------------------ | ------------------------- | ---------- | ------------- |\n| `.bx--toggle--small` | height | 16 / 1 | – |\n| `.bx--toggle--small` | width | 32 / 2 | – |\n| `.bx--toggle--small +`
`.bx--toggle__appearance:after` | height, width | 10 / 0.625 | – |\n| `.bx--toggle--small` | margin-top, margin-bottom | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for small toggle | px / rem\n\n","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/toggle/style.mdx"}}}}