{"componentChunkName":"component---src-pages-components-ui-shell-right-panel-style-mdx","path":"/components/UI-shell-right-panel/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"UI shell right panel","description":"This right 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-right-panel/style.mdx","titleType":"prepend","MdxNode":{"id":"5f26d05c-d4f5-5f94-a081-61ff545415f0","children":[],"parent":"02225533-1fa4-5e47-b192-26aa321f30d0","internal":{"content":"---\ntitle: UI shell right panel\ndescription: This right 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 Language palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                         | Property                  | Color value |\n| ----------------------------- | ------------------------- | ----------- |\n| `.bx--header-panel`           | background color          | Gray 100    |\n| `.bx--header-panel`           | border-left               | Gray 80     |\n| `.bx--header__action--active` | border-left, border-right | Gray 80     |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell right panel example.](images/right-panel-style-1.png)\n\n<Caption>UI shell switcher example</Caption>\n\n</Column>\n</Row>\n\n### Context switcher\n\n| Class                                | Property         | Color value    |\n| ------------------------------------ | ---------------- | -------------- |\n| `.bx--switcher__item`                | text color       | Gray 30        |\n| `.bx--switcher__item:hover`          | background color | Gray 100-hover |\n| `.bx--switcher__item:hover`          | text color       | Gray 10        |\n| `.bx--switcher__item:focus`          | border           | White          |\n| `.bx--switcher__item:active`         | background color | Gray 80        |\n| `.bx--switcher__item:active`         | text color       | Gray 10        |\n| `.bx--switcher__item-link--selected` | background color | Gray 90        |\n| `.bx--switcher__item-link--selected` | text color       | Gray 10        |\n| `.bx--switcher__item:disabled`       | text color       | Gray 30        |\n\n## Typography\n\n| Class                 | Font-size (px/rem) | Font-weight    | Type token    |\n| --------------------- | ------------------ | -------------- | ------------- |\n| `.bx--switcher__item` | 14 / 0.875         | SemiBold / 600 | `$heading-01` |\n\n## Structure\n\nThe panel spans the full height of the browser and is fixed to the right edge of the window.\n\n| Class                 | Property                    | px/rem    | Spacing token |\n| --------------------- | --------------------------- | --------- | ------------- |\n| `.bx--header-panel`   | width                       | 256 / 16  | –             |\n| `.bx--switcher__item` | height                      | 32 / 2    | –             |\n| `.bx--switcher__item` | padding left, padding right | 16 / 1    | `$spacing-05` |\n| `.bx--header__action` | height, width               | 48 / 8    | –             |\n| `.bx--header__action` | svg                         | 20 / 1.25 | –             |\n\n![UI shell right panel example.](images/right-panel-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for right panel | px | rem.\n</Caption>\n","type":"Mdx","contentDigest":"74c43412ca97f910b47fa52d2aaf3fa8","counter":1154,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"UI shell right panel","description":"This right 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 right panel\ndescription: This right 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 Language palette](https://www.ibm.com/design/language/elements/color#specifications)._\n\n| Class                         | Property                  | Color value |\n| ----------------------------- | ------------------------- | ----------- |\n| `.bx--header-panel`           | background color          | Gray 100    |\n| `.bx--header-panel`           | border-left               | Gray 80     |\n| `.bx--header__action--active` | border-left, border-right | Gray 80     |\n\n<Row>\n<Column colLg={8}>\n\n![UI shell right panel example.](images/right-panel-style-1.png)\n\n<Caption>UI shell switcher example</Caption>\n\n</Column>\n</Row>\n\n### Context switcher\n\n| Class                                | Property         | Color value    |\n| ------------------------------------ | ---------------- | -------------- |\n| `.bx--switcher__item`                | text color       | Gray 30        |\n| `.bx--switcher__item:hover`          | background color | Gray 100-hover |\n| `.bx--switcher__item:hover`          | text color       | Gray 10        |\n| `.bx--switcher__item:focus`          | border           | White          |\n| `.bx--switcher__item:active`         | background color | Gray 80        |\n| `.bx--switcher__item:active`         | text color       | Gray 10        |\n| `.bx--switcher__item-link--selected` | background color | Gray 90        |\n| `.bx--switcher__item-link--selected` | text color       | Gray 10        |\n| `.bx--switcher__item:disabled`       | text color       | Gray 30        |\n\n## Typography\n\n| Class                 | Font-size (px/rem) | Font-weight    | Type token    |\n| --------------------- | ------------------ | -------------- | ------------- |\n| `.bx--switcher__item` | 14 / 0.875         | SemiBold / 600 | `$heading-01` |\n\n## Structure\n\nThe panel spans the full height of the browser and is fixed to the right edge of the window.\n\n| Class                 | Property                    | px/rem    | Spacing token |\n| --------------------- | --------------------------- | --------- | ------------- |\n| `.bx--header-panel`   | width                       | 256 / 16  | –             |\n| `.bx--switcher__item` | height                      | 32 / 2    | –             |\n| `.bx--switcher__item` | padding left, padding right | 16 / 1    | `$spacing-05` |\n| `.bx--header__action` | height, width               | 48 / 8    | –             |\n| `.bx--header__action` | svg                         | 20 / 1.25 | –             |\n\n![UI shell right panel example.](images/right-panel-style-2.png)\n\n<Caption>\n  Structure and spacing measurements for right panel | px | rem.\n</Caption>\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/UI-shell-right-panel/style.mdx"}}}}