@redocly/theme 0.18.6 → 0.19.0

package/src/components/Markdown/Admonition.tsx

@@ -31,18 +31,20 @@ export function Admonition({
       data-hash={dataHash}
     >
       <AlertIcon type={type} />
-      {name ? <Heading type={type}>{name}</Heading> : null}
-      <Content>{children}</Content>
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        <Content>{children}</Content>
+      </TextContainer>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div<AdmonitionTypeProps>`
-  position: relative;
-  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
-  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -58,10 +60,13 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   `}
 `;
 
-const Heading = styled.h5<AdmonitionTypeProps>`
-  display: block;
-  margin: 0 0 10px;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
 
+const Heading = styled.div<AdmonitionTypeProps>`
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/src/components/Markdown/MarkdownLayout.tsx

@@ -8,7 +8,6 @@ import { EditPageButton } from '@theme/components/EditPageButton';
 import { LastUpdated } from '@theme/components/LastUpdated/LastUpdated';
 import { useThemeConfig } from '@theme/hooks';
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-import { useTranslate } from '@portal/hooks';
 import { Breadcrumbs as ThemeBreadcrumbs } from '@theme/components/Breadcrumbs';
 
 type MarkdownLayoutProps = {
@@ -17,8 +16,6 @@ type MarkdownLayoutProps = {
   feedback: React.ReactNode;
   editPage?: {
     to: string;
-    text: string;
-    icon?: string;
   };
   /** String in ISO format */
   lastModified?: string | null;
@@ -38,10 +35,7 @@ export function MarkdownLayout({
   className,
 }: MarkdownLayoutProps): JSX.Element {
   const { markdown } = useThemeConfig();
-  const { translate } = useTranslate();
-  const translationKeys = {
-    text: 'theme.markdown.editPage.text',
-  };
+
   const { editPage: themeEditPage } = markdown || {};
 
   const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
@@ -52,14 +46,7 @@ export function MarkdownLayout({
         <Breadcrumbs />
         <LayoutTop>
           {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-          {mergedConf && (
-            <EditPageButton
-              text={translate(translationKeys.text, mergedConf.text)}
-              to={mergedConf.to}
-              icon={mergedConf.icon}
-              data-translation-key={translationKeys.text}
-            />
-          )}
+          {mergedConf && <EditPageButton to={mergedConf.to} />}
         </LayoutTop>
         {markdownWrapper}
         <LayoutBottom>{feedback}</LayoutBottom>

package/src/components/Markdown/MarkdownWrapper.tsx

@@ -149,7 +149,7 @@ export const MarkdownWrapper = styled.main.attrs<{
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-color);
+  color: var(--text-secondary);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -207,7 +207,7 @@ export const MarkdownWrapper = styled.main.attrs<{
     margin: 1.125em 0;
 
     summary {
-      color: var(--text-color);
+      color: var(--text-secondary);
       font-weight: var(--font-weight-regular);
       outline: 0;
       padding: 0;
@@ -317,8 +317,6 @@ export const MarkdownWrapper = styled.main.attrs<{
     padding: calc(var(--spacing-unit) * 2);
     overflow-x: auto;
     line-height: normal;
-    border-radius: var(--code-block-border-radius);
-    border: 1px solid var(--code-block-border-color);
 
     code {
       background-color: transparent;

package/src/components/Markdown/Mermaid.tsx

@@ -28,8 +28,11 @@ export function Mermaid({
 }
 
 const Wrapper = styled.div`
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
   .mermaid > svg {
-    font-size: 14px !important;
+    font-size: var(--font-size-base) !important;
     max-width: 100%;
   }
 `;

package/src/components/Markdown/index.ts

@@ -7,3 +7,4 @@ export * from '@theme/components/Markdown/MarkdownWrapper';
 export * from '@theme/components/Markdown/Mermaid';
 export * from '@theme/components/Markdown/PageWrapper';
 export * from '@theme/components/Markdown/Sup';
+export * from '@theme/components/Markdown/styledVariables';

package/src/components/Markdown/styledVariables.ts

@@ -0,0 +1,230 @@
+import { css } from "styled-components";
+
+export const admonition = css`
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
+  --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-transform: uppercase;
+
+  /**
+  * @tokens Admonition spacing
+  * @presenter Spacing
+  */
+
+  --admonition-margin-horizontal: 0;
+  --admonition-margin-vertical: var(--spacing-lg);
+  --admonition-padding-horizontal: var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
+  --admonition-icon-size: 25px;
+
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: 0; // @presenter BorderRadius
+  --admonition-border-style: var(--border-style);
+  --admonition-border-width: var(--border-width);
+
+  /**
+  * @tokens Admonition type info
+  */
+
+  --admonition-info-background-color: var(--color-info-bg); // @presenter Color
+  --admonition-info-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-info-text-color: var(--text-secondary); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-border-color: inherit; // @presenter Color
+  --admonition-info-border-style: var(--admonition-border-style);
+  --admonition-info-border-width: var(--admonition-border-width);
+  --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style)
+    var(--admonition-info-border-color); // @presenter Border
+  --admonition-info-icon: none;
+
+  /**
+  * @tokens Admonition type attention
+  * @presenter Color
+  */
+
+  --admonition-attention-background-color: var(--color-yellow-1); // @presenter Color
+  --admonition-attention-text-color: var(--text-secondary); // @presenter Color
+  --admonition-attention-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-attention-icon-color: var(--color-yellow-6); // @presenter Color
+  --admonition-attention-border-color: inherit; // @presenter Color
+  --admonition-attention-border-style: var(--admonition-border-style);
+  --admonition-attention-border-width: var(--admonition-border-width);
+  --admonition-attention-border: var(--admonition-attention-border-width)
+    var(--admonition-attention-border-style) var(--admonition-attention-border-color); // @presenter Border
+  --admonition-attention-icon: none;
+
+  /**
+  * @tokens Admonition type warning
+  */
+
+  /* warning */
+  --admonition-warning-background-color: var(--color-warning-bg); // @presenter Color
+  --admonition-warning-text-color: var(--text-secondary); // @presenter Color
+  --admonition-warning-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-border-color: inherit; // @presenter Color
+  --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-warning-border: var(--admonition-warning-border-width)
+    var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
+  --admonition-warning-icon: none;
+
+  /**
+  * @tokens Admonition type danger
+  */
+
+  --admonition-danger-background-color: var(--color-error-bg); // @presenter Color
+  --admonition-danger-text-color: var(--text-secondary); // @presenter Color
+  --admonition-danger-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-border-color: inherit; // @presenter Color
+  --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-danger-border: var(--admonition-danger-border-width)
+    var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
+  --admonition-danger-icon: none;
+
+  /**
+  * @tokens Admonition type success
+  */
+
+  --admonition-success-background-color: var(--color-success-bg); // @presenter Color
+  --admonition-success-text-color: var(--text-secondary); // @presenter Color
+  --admonition-success-heading-text-color: var(--text-primary); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-border-color: inherit; // @presenter Color
+  --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-success-border: var(--admonition-success-border-width)
+    var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-icon: none;
+
+  // @tokens End
+`;
+
+export const markdown = css`
+  /**
+  * @tokens Markdown Container
+  */
+
+  --md-container-max-width: 910px;
+  --md-container-padding-vertical: 25px; // @presenter Spacing
+  --md-container-padding-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Blockquote
+  */
+
+  --md-blockquote-margin-vertical: 1.5em; // @presenter Spacing
+  --md-blockquote-margin-horizontal: 0; // @presenter Spacing
+  --md-blockquote-padding-vertical: 0; // @presenter Spacing
+  --md-blockquote-padding-horizontal: var(--spacing-base); // @presenter Spacing
+  --md-blockquote-border-color: var(--border-primary); // @presenter Color
+  --md-blockquote-background-color: transparent; // @presenter Color
+  --md-blockquote-border-left: 4px solid var(--md-blockquote-border-color); // @presenter Border
+  --md-blockquote-text-color: var(--text-secondary); // @presenter Color
+  --md-blockquote-box-shadow: none; // @presenter Shadow
+
+  /**
+  * @tokens Markdown Paragraph
+  */
+
+  --md-paragraph-margin-vertical: 10px; // @presenter Spacing
+  --md-paragraph-margin-horizontal: 0px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown Table
+  */
+
+  --md-table-font-size: var(--font-size-sm); // @presenter FontSize
+  --md-table-margin-vertical: 20px; // @presenter Spacing
+  --md-table-background-color: transparent; // @presenter Color
+
+  --md-table-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --md-table-border-width: 1px;
+  --md-table-border-color: var(--border-primary); // @presenter Color
+
+  --md-table-stripe-background-color: var(--md-table-background-color); // @presenter Color
+
+  --md-table-cell-text-color: var(--text-secondary); // @presenter Color
+  --md-table-cell-padding: var(--spacing-sm); // @presenter Spacing
+
+  --md-table-head-background-color: var(--bg-overlay); // @presenter Color
+  --md-table-head-text-color: var(--text-primary); // @presenter Color
+  --md-table-head-font-weight: var(--font-weight-bold); // @presenter FontWeight
+
+  /**
+  * @tokens Markdown Horizontal Rule
+  */
+
+  --md-hr-background-color: transparent; // @presenter Color
+  --md-hr-border-color: var(--border-primary); // @presenter Color
+  --md-hr-height: unset;
+  --md-hr-margin-vertical: 20px; // @presenter Spacing
+
+  /**
+  * @tokens Markdown List
+  */
+
+  --md-list-left-padding: 2rem; // @presenter Spacing
+  --md-list-margin: 1rem; // @presenter Spacing
+  --md-list-item-margin: 0.25rem; // @presenter Spacing
+  --md-list-item-style: inherit;
+
+
+  /**
+  * @tokens Markdown Checkbox List
+  */
+
+  --md-checkbox-list-item-style: none;
+
+  /**
+  * @tokens Markdown Numbered List
+  */
+
+  --md-numbered-list-number-display: none;
+  --md-numbered-list-item-style: var(--md-list-item-style);
+  --md-numbered-list-number-text-color: var(--text-secondary); // @presenter Color
+  --md-numbered-list-number-font-size: var(--font-size-base); // @presenter FontSize
+  --md-numbered-list-number-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-numbered-list-number-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --md-numbered-list-number-background-color: var(--bg-raised); // @presenter Color
+  --md-numbered-list-number-border-radius: 10px; // @presenter BorderRadius
+  --md-numbered-list-number-margin-right: 5px; // @presenter Spacing
+  --md-numbered-list-number-padding: 0 5px; // @presenter Spacing
+
+  // @tokens End
+
+  /**
+  * @tokens Markdown Tabs
+  */
+
+  --md-tabs-tab-text-color: var(--text-secondary); // @presenter Color
+  --md-tabs-active-tab-border-color: var(--border-primary); // @presenter Color
+  --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
+
+  // @tokens End
+`;
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/components/Menu/Menu.tsx

@@ -2,8 +2,7 @@ import styled from 'styled-components';
 import React from 'react';
 
 import type { ItemState } from '@portal/Sidebar/types';
-
-import { MenuItemSwitch } from './MenuItemSwitch';
+import { MenuItemSwitch } from '@theme/components/Menu/MenuItemSwitch';
 
 export interface MenuListProps {
   items: ItemState[];
@@ -39,11 +38,9 @@ export function Menu({ depth = 0, items, className, isMobile }: MenuListProps) {
 export const ThemeMenu = styled.ul.attrs(() => ({
   'data-component-name': 'Menu/Menu',
 }))`
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  color: var(--sidebar-item-text-color);
-  ${({ theme }) => theme.mediaQueries.medium} {
-    position: relative;
-  }
+  padding: var(--menu-padding);
+  margin: var(--menu-margin);
+  list-style: var(--menu-list-style);
+  color: var(--menu-text-color);
+  position: relative;
 `;

package/src/components/Menu/MenuGroup.tsx

@@ -49,10 +49,13 @@ export function MenuGroup({
           isAlwaysExpanded={item.expanded === 'always'}
           active={item.active}
           role={!item.link ? 'link' : 'none'}
+          expanded={isExpanded}
         >
-          {!!item.items.length && <MenuGroupArrow direction={isExpanded ? 'down' : 'right'} />}
           {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
+          {!!item.items.length && (
+            <ArrowIcon direction={isExpanded ? 'down' : 'right'} weight="thin" />
+          )}
         </MenuGroupLabel>
       </MenuLinkItem>
 
@@ -76,7 +79,7 @@ const MenuWrapper = styled.div<{ isExpanded?: boolean }>`
 	      transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;`};
 `;
 
-const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
+const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean; expanded?: boolean }>`
   padding-left: var(--sidebar-item-padding-horizontal);
   cursor: ${(props) => (props.isAlwaysExpanded ? 'default' : 'pointer')};
   font-family: var(--sidebar-item-group-font-family);
@@ -84,13 +87,18 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ isAlwaysExpanded?: boolean }>`
   text-transform: var(--sidebar-text-group-transform);
   color: var(--sidebar-item-group-text-color);
   background: var(--sidebar-item-group-background-color);
-  ${(props) =>
-    props.active
+  display: flex;
+  justify-content: space-between;
+
+  ${({ active }) =>
+    active
       ? `color: var(--sidebar-item-group-active-text-color);
         background-color: var(--sidebar-item-group-active-background-color);`
       : null};
-`;
 
-const MenuGroupArrow = styled(ArrowIcon)`
-  margin-right: calc(var(--sidebar-spacing-unit) / 2);
+  ${({ expanded }) =>
+    expanded &&
+    `
+    color: var(--sidebar-item-group-active-text-color);
+  `}
 `;

package/src/components/Menu/MenuItem.tsx

@@ -17,7 +17,7 @@ export function MenuItem({ item, className }: MenuItemProps): JSX.Element {
         <Label active={item.active}>
           {item.icon ? <SidebarItemIcon src={item.icon} /> : null}
           {translate(item.labelTranslationKey, item.label)}
-          {item.external ? <ExternalIcon dataComponentName="Sidebar/ExternalIcon" /> : null}
+          {item.external ? <ExternalIcon /> : null}
         </Label>
       </MenuLinkItem>
 

package/src/components/Menu/MenuItemLabel.tsx

@@ -5,29 +5,25 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
   className,
 }))<{ active?: boolean }>`
   display: flex;
-  align-items: center;
+  align-items: var(--menu-item-label-align-items);
   cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
-  word-break: break-word;
-  margin-bottom: 1px;
+  transition: var(--menu-item-label-transition);
+  word-break: var(--menu-item-label-word-break);
 
   background-color: var(--sidebar-item-background-color);
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
-  font-weight: var(--font-weight-regular);
-  margin-left: var(--sidebar-offset-left);
-  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  padding-left: calc(
-    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +
-      var(--sidebar-spacing-unit) * 0.5
-  );
+  font-weight: var(--sidebar-item-font-weight);
+  line-height: var(--sidebar-item-line-height);
+  margin: var(--menu-item-label-margin);
+  padding: var(--menu-item-label-padding);
   border-radius: var(--sidebar-item-border-radius);
 
   ${({ active, theme }) =>
     active &&
     `
     color: var(--mobile-menu-item-active-text-color);
-    background-color: var(--mobile-menu-item-active-color);
+    background-color: var(--mobile-menu-item-active-background-color);
     
     ${theme.mediaQueries.medium} {
       color: var(--sidebar-item-active-color);
@@ -40,7 +36,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
-      background-color: var(--sidebar-item-hover-background-color);
+      background: var(--sidebar-item-hover-background-color);
     }
   }
 

package/src/components/Menu/MenuItemSwitch.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { MenuItem, ApiCallItem, Separator } from '@theme';
 
 import type { PropsWithChildren } from 'react';
-import type { MenuItemProps } from '../Sidebar/types';
 
+import { ApiCallItem, type MenuItemProps } from '@theme/components/Sidebar';
 import { MenuType } from '@portal/Sidebar/types';
 import { getMenuType } from '@portal/Sidebar/getMenuType';
 import { useDrilldown } from '@portal/Sidebar/useDrilldown';
 import { useMenuGroup } from '@portal/Sidebar/useMenuGroup';
 import { MobileMenuGroup } from '@theme/components/Menu/MobileMenuGroup';
+import { Separator } from '@theme/components/Separator/Separator';
+import { MenuItem } from '@theme/components/Menu/MenuItem';
 
 export function MenuItemSwitch(props: PropsWithChildren<MenuItemProps>) {
   const type = getMenuType(props.item);

package/src/components/Menu/MobileMenu.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import type { MobileMenuProps } from '@theme/components/Menu/types';
 import { MenuType } from '@theme/components/Menu/constants';
 import { Menu, MenuItemLabel } from '@theme/components/Menu/index';
-import { MobileUserProfile } from '@theme/components/Navbar/MobileUserProfile';
+import { MobileUserProfile } from '@theme/components/Profile/MobileUserProfile';
 import { useCurrentProduct } from '@portal/hooks';
 import { ArrowIcon } from '@theme/icons';
 import { Product } from '@theme/components/Product/Product';
@@ -71,17 +71,17 @@ export function MobileMenu({ className }: MobileMenuProps): JSX.Element | null {
   );
 }
 const MobileMenuWrapper = styled.div`
-  height: calc(100vh - var(--navbar-height));
-  width: 100%;
+  height: var(--mobile-menu-wrapper-height);
+  width: var(--mobile-menu-wrapper-width);
   position: fixed;
-  z-index: var(--z-index-raised);
-  left: 0;
-  top: var(--navbar-height);
+  z-index: var(--mobile-menu-wrapper-z-index);
+  left: var(--mobile-menu-wrapper-left);
+  top: var(--mobile-menu-wrapper-top);
   overflow-x: hidden;
-  transition: 0.5s;
+  transition: var(--mobile-menu-wrapper-transition);
   display: flex;
   flex-direction: column;
-  background: var(--mobile-menu-background);
+  background: var(--mobile-menu-wrapper-background);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
@@ -102,27 +102,23 @@ const ScrollableArea = styled.div`
 `;
 
 const MenuWrapper = styled.div`
-  margin: 0 var(--mobile-menu-horizontal-margin);
-  margin-top: var(--mobile-menu-items-margin-top);
-  line-height: 22px;
+  margin: var(--mobile-menu-margin);
+  line-height: var(--mobile-menu-line-height);
   background: var(--mobile-menu-background);
 
   ${MenuItemLabel} {
-    margin: 0;
+    margin: var(--mobile-menu-item-margin);
     border-radius: var(--mobile-menu-item-radius);
-    padding-left: var(--sidebar-item-padding-horizontal);
   }
 `;
 
 export const ControlButton = styled.li`
   display: inline-block;
-  padding: var(--mobile-menu-control-button-padding-vertical)
-    var(--mobile-menu-control-button-padding-horizontal);
-  margin: var(--mobile-menu-control-button-margin-vertical)
-    var(--mobile-menu-control-button-margin-horizontal);
-  text-align: center;
+  padding: var(--mobile-menu-control-button-padding);
+  margin: var(--mobile-menu-control-button-margin);
+  text-align: var(--mobile-menu-control-button-text-align);
   font-size: var(--mobile-menu-control-button-font-size);
-  line-height: 22px;
+  line-height: var(--mobile-menu-control-button-line-height);
   font-weight: var(--mobile-menu-control-button-weight);
   color: var(--mobile-menu-control-button-color);
   cursor: pointer;
@@ -147,10 +143,9 @@ const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
 `;
 
 const ProductNameWrapper = styled.div`
-  color: var(--mobile-menu-item-text-color);
-  border-radius: var(--mobile-menu-item-radius);
-  padding-left: var(--sidebar-item-padding-horizontal);
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  padding: 8px 7px;
-  margin: 12px 8px 0 8px;
+  color: var(--mobile-menu-product-name-color);
+  border-radius: var(--mobile-menu-product-name-border-radius);
+  border: var(--mobile-menu-product-name-border);
+  padding: var(--mobile-menu-product-name-padding);
+  margin: var(--mobile-menu-product-name-margin);
 `;

package/src/components/Menu/MobileMenuGroup.tsx

@@ -66,7 +66,7 @@ const MenuGroupLabel = styled(MenuItemLabel)<{ active?: boolean; expanded?: bool
     active &&
     `
     color: var(--mobile-menu-item-active-text-color);
-    background-color: var(--mobile-menu-item-active-color);
+    background-color: var(--mobile-menu-item-active-background-color);
   `}
 
   ${({ expanded }) =>

package/src/components/Menu/index.ts

@@ -3,6 +3,11 @@ export * from '@theme/components/Menu/MenuItem';
 export * from '@theme/components/Menu/MenuGroup';
 export * from '@theme/components/Menu/MenuContainer';
 export * from '@theme/components/Menu/MenuItemLabel';
+export * from '@theme/components/Menu/MenuItemSwitch';
 export * from '@theme/components/Menu/MenuLink';
 export * from '@theme/components/Menu/MenuLinkItem';
+export * from '@theme/components/Menu/MobileMenu';
 export * from '@theme/components/Menu/MobileMenuGroup';
+export * from '@theme/components/Menu/styledVariables';
+export * from '@theme/components/Menu/types';
+export * from '@theme/components/Menu/constants';