{"componentChunkName":"component---src-pages-components-ui-shell-left-panel-style-mdx","path":"/components/UI-shell-left-panel/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"UI shell left panel","description":"This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/UI-shell-left-panel/style.mdx","titleType":"prepend","MdxNode":{"id":"834112a3-c3c5-513e-a6a3-1731bc1f36e7","children":[],"parent":"fce979e3-aaeb-5100-b6e7-45cf9a2c661a","internal":{"content":"---\ntitle: UI shell left panel\ndescription: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n_Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the [IBM Design Langauge palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                            | Property         | Color value |\n| -------------------------------- | ---------------- | ----------- |\n| `.bx--side-nav__navigation`      | background color | White       |\n| `.bx--side-nav__link`            | text color       | Gray 70     |\n| `.bx--side-nav__submenu`         | text color       | Gray 70     |\n| `.bx--side-nav__submenu-chevron` | fill             | Gray 70     |\n| `.bx--side-nav__menu-item`       | text color       | Gray 70     |\n| `.bx--side-nav__icon`            | fill             | Gray 70     |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell side-nav example.](images/left-nav-style-1.png)\n\n<Caption>UI shell side-nav example.</Caption>\n\n</Column>\n</Row>\n\n### Link\n\n| Class                          | Property         | Color value   |\n| ------------------------------ | ---------------- | ------------- |\n| `.bx--side-nav__link:hover`    | background color | Gray 10-hover |\n| `.bx--side-nav__link:hover`    | text color       | Gray 100      |\n| `.bx--side-nav__link:focus`    | border           | Blue 60       |\n| `.bx--side-nav__link:active`   | background color | Gray 30       |\n| `.bx--side-nav__link:active`   | text color       | Gray 100      |\n| `.bx--side-nav__link--current` | background color | Gray 30       |\n| `.bx--side-nav__link--current` | text color       | Gray 100      |\n| `:before`                      | background color | Blue 60       |\n\n![Link states](images/left-nav-style-4.png)\n\n<Caption>Link states</Caption>\n\n### Sub-menu\n\n| Class                               | Property         | Color value   |\n| ----------------------------------- | ---------------- | ------------- |\n| `.bx--side-nav__submenu:hover`      | background color | Gray 10-hover |\n| `.bx--side-nav__submenu:hover`      | text color       | Gray 100      |\n| `.bx--side-nav__submenu:focus`      | border           | Blue 60       |\n| `.bx--side-nav__submenu:active`     | background color | Gray 30       |\n| `.bx--side-nav__submenu:active`     | text color       | Gray 100      |\n| `.bx--side-nav__menu-item:hover`    | background color | Gray 30       |\n| `.bx--side-nav__menu-item:hover`    | text color       | Gray 100      |\n| `.bx--side-nav__menu-item:focus`    | border           | Blue 60       |\n| `.bx--side-nav__menu-item:active`   | background color | Gray 30       |\n| `.bx--side-nav__menu-item:active`   | text color       | Gray 100      |\n| `.bx--side-nav__menu-item--current` | background color | Gray 30       |\n| `.bx--side-nav__menu-item--current` | text color       | Gray 100      |\n| `:before`                           | background color | Blue 60       |\n\n![Sub-menu states](images/left-nav-style-4.png)\n\n<Caption>Sub-menu states</Caption>\n\n### Icon\n\n| Class                          | Property | Color value |\n| ------------------------------ | -------- | ----------- |\n| `.bx--side-nav__icon:hover`    | fill     | Gray 100    |\n| `.bx--side-nav__icon:active`   | fill     | Gray 100    |\n| `.bx--side-nav__icon--current` | fill     | Gray 100    |\n\n## Typography\n\nMenu labels and text should be set in sentence case.\n\n| Class                      | Font-size (px/rem) | Font-weight    | Type token       |\n| -------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--side-nav__link`      | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--side-nav__submenu`   | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--side-nav__menu-item` | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n<!--\n### Text overflow\n\n[Guidance for text overflow and wrapping for platform name or labels]\n\n-->\n\n## Structure\n\nThe panel spans the full height of the browser and is fixed to the left edge of the window.\n\n| Class                       | Property                    | px/rem   | Spacing token |\n| --------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--side-nav__navigation` | width                       | 256 / 16 | –             |\n| `.bx--side-nav__link`       | height                      | 32 / 2   | –             |\n| `.bx--side-nav__link`       | padding left, padding right | 16 / 1   | `$spacing-05` |\n| `.bx--side-nav__submenu`    | height                      | 32 / 2   | –             |\n| `.bx--side-nav__submenu`    | padding left, padding right | 16 / 1   | `$spacing-05` |\n| `.bx--side-nav__menu-item`  | height                      | 32 / 2   | –             |\n| `.bx--side-nav__menu-item`  | padding left                | 32 / 2   | `$spacing-07` |\n| `.bx--side-nav__menu-item`  | padding right               | 16 / 1   | `$spacing-05` |\n| `:before`                   | width                       | 4 / 0.25 | –             |\n| `.bx--side-nav__icon`       | size                        | 16 / 1   | –             |\n\n![ui shell side-nav](images/left-nav-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for the side-nav | px | rem.\n</Caption>\n\n![ui shell side-nav with icons](images/left-nav-style-3.png)\n\n<Caption>\n  Structure and spacing measurements for side-nav with icons | px | rem.\n</Caption>\n\n<!--\n### Responsive behavior\n-->\n\n<!--\n### Icon placement\n\n[to do]\n-->\n","type":"Mdx","contentDigest":"bde9a828ddaae2c31a2e742977807b23","counter":1150,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell left panel","description":"This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: UI shell left panel\ndescription: This left panel is part of the Carbon UI shell. A shell is a collection of components shared by all products within a platform.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n_Note: The UI Shell does not currently use the Carbon theme tokens; theming options for the shell will be available in the future. All color used in the UI Shell is from the [IBM Design Langauge palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                            | Property         | Color value |\n| -------------------------------- | ---------------- | ----------- |\n| `.bx--side-nav__navigation`      | background color | White       |\n| `.bx--side-nav__link`            | text color       | Gray 70     |\n| `.bx--side-nav__submenu`         | text color       | Gray 70     |\n| `.bx--side-nav__submenu-chevron` | fill             | Gray 70     |\n| `.bx--side-nav__menu-item`       | text color       | Gray 70     |\n| `.bx--side-nav__icon`            | fill             | Gray 70     |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell side-nav example.](images/left-nav-style-1.png)\n\n<Caption>UI shell side-nav example.</Caption>\n\n</Column>\n</Row>\n\n### Link\n\n| Class                          | Property         | Color value   |\n| ------------------------------ | ---------------- | ------------- |\n| `.bx--side-nav__link:hover`    | background color | Gray 10-hover |\n| `.bx--side-nav__link:hover`    | text color       | Gray 100      |\n| `.bx--side-nav__link:focus`    | border           | Blue 60       |\n| `.bx--side-nav__link:active`   | background color | Gray 30       |\n| `.bx--side-nav__link:active`   | text color       | Gray 100      |\n| `.bx--side-nav__link--current` | background color | Gray 30       |\n| `.bx--side-nav__link--current` | text color       | Gray 100      |\n| `:before`                      | background color | Blue 60       |\n\n![Link states](images/left-nav-style-4.png)\n\n<Caption>Link states</Caption>\n\n### Sub-menu\n\n| Class                               | Property         | Color value   |\n| ----------------------------------- | ---------------- | ------------- |\n| `.bx--side-nav__submenu:hover`      | background color | Gray 10-hover |\n| `.bx--side-nav__submenu:hover`      | text color       | Gray 100      |\n| `.bx--side-nav__submenu:focus`      | border           | Blue 60       |\n| `.bx--side-nav__submenu:active`     | background color | Gray 30       |\n| `.bx--side-nav__submenu:active`     | text color       | Gray 100      |\n| `.bx--side-nav__menu-item:hover`    | background color | Gray 30       |\n| `.bx--side-nav__menu-item:hover`    | text color       | Gray 100      |\n| `.bx--side-nav__menu-item:focus`    | border           | Blue 60       |\n| `.bx--side-nav__menu-item:active`   | background color | Gray 30       |\n| `.bx--side-nav__menu-item:active`   | text color       | Gray 100      |\n| `.bx--side-nav__menu-item--current` | background color | Gray 30       |\n| `.bx--side-nav__menu-item--current` | text color       | Gray 100      |\n| `:before`                           | background color | Blue 60       |\n\n![Sub-menu states](images/left-nav-style-4.png)\n\n<Caption>Sub-menu states</Caption>\n\n### Icon\n\n| Class                          | Property | Color value |\n| ------------------------------ | -------- | ----------- |\n| `.bx--side-nav__icon:hover`    | fill     | Gray 100    |\n| `.bx--side-nav__icon:active`   | fill     | Gray 100    |\n| `.bx--side-nav__icon--current` | fill     | Gray 100    |\n\n## Typography\n\nMenu labels and text should be set in sentence case.\n\n| Class                      | Font-size (px/rem) | Font-weight    | Type token       |\n| -------------------------- | ------------------ | -------------- | ---------------- |\n| `.bx--side-nav__link`      | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--side-nav__submenu`   | 14 / 0.875         | SemiBold / 600 | `$heading-01`    |\n| `.bx--side-nav__menu-item` | 14 / 0.875         | Regular / 400  | `$body-short-01` |\n\n<!--\n### Text overflow\n\n[Guidance for text overflow and wrapping for platform name or labels]\n\n-->\n\n## Structure\n\nThe panel spans the full height of the browser and is fixed to the left edge of the window.\n\n| Class                       | Property                    | px/rem   | Spacing token |\n| --------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--side-nav__navigation` | width                       | 256 / 16 | –             |\n| `.bx--side-nav__link`       | height                      | 32 / 2   | –             |\n| `.bx--side-nav__link`       | padding left, padding right | 16 / 1   | `$spacing-05` |\n| `.bx--side-nav__submenu`    | height                      | 32 / 2   | –             |\n| `.bx--side-nav__submenu`    | padding left, padding right | 16 / 1   | `$spacing-05` |\n| `.bx--side-nav__menu-item`  | height                      | 32 / 2   | –             |\n| `.bx--side-nav__menu-item`  | padding left                | 32 / 2   | `$spacing-07` |\n| `.bx--side-nav__menu-item`  | padding right               | 16 / 1   | `$spacing-05` |\n| `:before`                   | width                       | 4 / 0.25 | –             |\n| `.bx--side-nav__icon`       | size                        | 16 / 1   | –             |\n\n![ui shell side-nav](images/left-nav-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for the side-nav | px | rem.\n</Caption>\n\n![ui shell side-nav with icons](images/left-nav-style-3.png)\n\n<Caption>\n  Structure and spacing measurements for side-nav with icons | px | rem.\n</Caption>\n\n<!--\n### Responsive behavior\n-->\n\n<!--\n### Icon placement\n\n[to do]\n-->\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/UI-shell-left-panel/style.mdx"}}}}