{"componentChunkName":"component---src-pages-components-ui-shell-right-panel-style-mdx","path":"/components/UI-shell-right-panel/style/","webpackCompilationHash":"aaa6c4cbb44f8ca938e9","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":"46dbbc3e-ea5f-5ba7-87a4-3125c06c8967","children":[],"parent":"6ae7cf63-c1ef-5d4e-8030-adf584568f62","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":"42aab75e98e8dec8ea07ccc743ed8160","counter":1087,"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/42b44a0/src/pages/components/UI-shell-right-panel/style.mdx"}}}}