{"componentChunkName":"component---src-pages-components-modal-style-mdx","path":"/components/modal/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Modal","description":"Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/modal/style.mdx","titleType":"prepend","MdxNode":{"id":"6963eab8-5240-5014-9027-1683a8044f8a","children":[],"parent":"e072af14-41ba-5331-8f0f-5a91af302512","internal":{"content":"---\ntitle: Modal\ndescription: Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nRefer to the [button](/components/button/style) for primary and secondary button styling in the transactional modal.\n\n| Class | Property | Color token |\n| ---------------------------- | ---------------- | ------------- |\n| `.bx--modal-container` | background-color | `$ui-01` |\n| `.bx--modal-header__label` | text color | `$text-02` |\n| `.bx--modal-header__heading` | text color | `$text-01` |\n| `.bx--modal-content` | text color | `$text-01` |\n| `.bx--modal-close__icon` | fill | `$icon-01` |\n| `.bx--modal-close:hover` | background-color | `$hover-ui` |\n| Overlay | color | `$overlay-01` |\n\n## Typography\n\nModal titles and labels should be set in sentence case. Keep all titles and labels concise and to the point. Modal labels are optional.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--modal-header__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--modal-header__heading` | 20 / 1.25 | Regular / 400 | `$heading-03` |\n| `.bx--modal-content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------------------- | -------- | ------------- |\n| `.bx--modal-close` | height, width | 48 x 48 | – |\n| `.bx--modal-close__icon` | height, width | 16 x 16 | – |\n| `.bx--modal-header__label` | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| `.bx--modal-header` | padding top, padding left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-header` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--modal-content` | width | 75% | – |\n| `.bx--modal-content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | margin-bottom | 48 / 3 | `$spacing-09` |\n| `.bx--btn--primary` | width | 50% | – |\n| `.bx--btn--secondary` | width | 50% | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a passive modal | px / rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a transactional modal | px / rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a input modal | px / rem\n\n\n### Mobile\n\nModals should be full screen on mobile.\n\n\n\n\n\n
\n\nExample of a modal on a mobile screen\n","type":"Mdx","contentDigest":"aa95c7d45b1cf74ba49cd730be14452d","counter":1133,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Modal","description":"Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Modal\ndescription: Modals communicate information via a secondary window and allow the user to maintain the context of a particular task. Modals interrupt user workflow by design.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nRefer to the [button](/components/button/style) for primary and secondary button styling in the transactional modal.\n\n| Class | Property | Color token |\n| ---------------------------- | ---------------- | ------------- |\n| `.bx--modal-container` | background-color | `$ui-01` |\n| `.bx--modal-header__label` | text color | `$text-02` |\n| `.bx--modal-header__heading` | text color | `$text-01` |\n| `.bx--modal-content` | text color | `$text-01` |\n| `.bx--modal-close__icon` | fill | `$icon-01` |\n| `.bx--modal-close:hover` | background-color | `$hover-ui` |\n| Overlay | color | `$overlay-01` |\n\n## Typography\n\nModal titles and labels should be set in sentence case. Keep all titles and labels concise and to the point. Modal labels are optional.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ---------------------------- | ------------------ | ------------- | --------------- |\n| `.bx--modal-header__label` | 12 / 0.75 | Regular / 400 | `$label-01` |\n| `.bx--modal-header__heading` | 20 / 1.25 | Regular / 400 | `$heading-03` |\n| `.bx--modal-content` | 14 / 0.875 | Regular / 400 | `$body-long-01` |\n\n## Structure\n\n| Class | Property | px / rem | Spacing token |\n| -------------------------- | ------------------------- | -------- | ------------- |\n| `.bx--modal-close` | height, width | 48 x 48 | – |\n| `.bx--modal-close__icon` | height, width | 16 x 16 | – |\n| `.bx--modal-header__label` | margin-bottom | 4 / 0.25 | `$spacing-02` |\n| `.bx--modal-header` | padding top, padding left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-header` | margin-bottom | 8 / 0.5 | `$spacing-03` |\n| `.bx--modal-content` | width | 75% | – |\n| `.bx--modal-content` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--modal-content` | margin-bottom | 48 / 3 | `$spacing-09` |\n| `.bx--btn--primary` | width | 50% | – |\n| `.bx--btn--secondary` | width | 50% | – |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a passive modal | px / rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a transactional modal | px / rem\n\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for a input modal | px / rem\n\n\n### Mobile\n\nModals should be full screen on mobile.\n\n\n\n\n\n
\n\nExample of a modal on a mobile screen\n","fileAbsolutePath":"/tmp/42b44a0/src/pages/components/modal/style.mdx"}}}}