@redocly/theme 0.18.2 → 0.18.3-patch.1

package/lib/components/Markdown/styledVariables.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdown = exports.admonition = void 0;
+const styled_components_1 = require("styled-components");
+exports.admonition = (0, styled_components_1.css) `
+  /* === Admonitions === */
+
+  /**
+  * @tokens Admonition typography
+  */
+
+  --admonition-font-size: var(--font-size-base); // @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-bold); // @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-xs);
+  --admonition-padding-horizontal: var(--spacing-base);
+  --admonition-padding-vertical:  var(--spacing-base);
+  --admonition-icon-size: 25px;
+
+  /**
+  * @tokens Admonition border
+  */
+
+  --admonition-border-radius: var(--border-radius-lg); // @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
+`;
+exports.markdown = (0, styled_components_1.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-base); // @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
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Menu/Menu.js

@@ -19,12 +19,10 @@ exports.Menu = Menu;
 exports.ThemeMenu = styled_components_1.default.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;
 `;
 //# sourceMappingURL=Menu.js.map

package/lib/components/Menu/MenuGroup.js

@@ -55,10 +55,10 @@ function MenuGroup({ item, isExpanded, toggleExpanded, children, className, }) {
     }, [isExpanded]);
     return (react_1.default.createElement(Wrapper, { "data-component-name": "Menu/MenuGroup", className: className },
         react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
-            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none' },
-                !!item.items.length && react_1.default.createElement(MenuGroupArrow, { direction: isExpanded ? 'down' : 'right' }),
+            react_1.default.createElement(MenuGroupLabel, { onClick: toggleExpanded, isAlwaysExpanded: item.expanded === 'always', active: item.active, role: !item.link ? 'link' : 'none', expanded: isExpanded },
                 item.icon ? react_1.default.createElement(SidebarItemIcon_1.SidebarItemIcon, { src: item.icon }) : null,
-                translate(item.labelTranslationKey, item.label))),
+                translate(item.labelTranslationKey, item.label),
+                !!item.items.length && (react_1.default.createElement(ArrowIcon_1.ArrowIcon, { direction: isExpanded ? 'down' : 'right', weight: "thin" })))),
         react_1.default.createElement(MenuWrapper, { isExpanded: isExpanded }, showChildren ? children : null),
         item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
 }
@@ -81,12 +81,17 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   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 = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon) `
-  margin-right: calc(var(--sidebar-spacing-unit) / 2);
+
+  ${({ expanded }) => expanded &&
+    `
+    color: var(--sidebar-item-group-active-text-color);
+  `}
 `;
 //# sourceMappingURL=MenuGroup.js.map

package/lib/components/Menu/MenuItemLabel.js

@@ -10,28 +10,24 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
     className,
 })) `
   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);
@@ -44,7 +40,7 @@ exports.MenuItemLabel = styled_components_1.default.li.attrs(({ className }) =>
 
     ${({ 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/lib/components/Menu/MenuLinkItem.js

@@ -7,8 +7,9 @@ exports.MenuLinkItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const MenuLink_1 = require("../../components/Menu/MenuLink");
+const telemetry_1 = require("../../mocks/telemetry");
 function MenuLinkItem({ item, children, className, }) {
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/MenuLinkItem", className: className, onClick: () => telemetry_1.telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type }) }, item.link ? (react_1.default.createElement(MenuLink_1.MenuLink, Object.assign({ to: item.link }, item), children)) : (children)));
 }
 exports.MenuLinkItem = MenuLinkItem;
 const Wrapper = styled_components_1.default.span ``;

package/lib/components/Menu/MobileMenu.js

@@ -32,7 +32,7 @@ const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../components/Menu/constants");
 const index_1 = require("../../components/Menu/index");
-const MobileUserProfile_1 = require("../../components/Navbar/MobileUserProfile");
+const MobileUserProfile_1 = require("../../components/Profile/MobileUserProfile");
 const hooks_1 = require("../../mocks/hooks");
 const icons_1 = require("../../icons");
 const Product_1 = require("../../components/Product/Product");
@@ -69,17 +69,17 @@ function MobileMenu({ className }) {
 }
 exports.MobileMenu = MobileMenu;
 const MobileMenuWrapper = styled_components_1.default.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;
@@ -97,26 +97,22 @@ const ScrollableArea = styled_components_1.default.div `
   flex-grow: 1;
 `;
 const MenuWrapper = styled_components_1.default.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);
 
   ${index_1.MenuItemLabel} {
-    margin: 0;
+    margin: var(--mobile-menu-item-margin);
     border-radius: var(--mobile-menu-item-radius);
-    padding-left: var(--sidebar-item-padding-horizontal);
   }
 `;
 exports.ControlButton = styled_components_1.default.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;
@@ -139,11 +135,10 @@ const ControlButtonLabel = styled_components_1.default.span `
   ${({ paddingDirection }) => paddingDirection === 'right' && 'padding-right: 8px'};
 `;
 const ProductNameWrapper = styled_components_1.default.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);
 `;
 //# sourceMappingURL=MobileMenu.js.map

package/lib/components/Menu/MobileMenuGroup.js

@@ -44,7 +44,7 @@ const MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItem
   ${({ active }) => 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 }) => expanded &&

package/lib/components/Menu/index.d.ts

@@ -6,3 +6,4 @@ export * from '../../components/Menu/MenuItemLabel';
 export * from '../../components/Menu/MenuLink';
 export * from '../../components/Menu/MenuLinkItem';
 export * from '../../components/Menu/MobileMenuGroup';
+export * from '../../components/Menu/styledVariables';

package/lib/components/Menu/index.js

@@ -22,4 +22,5 @@ __exportStar(require("../../components/Menu/MenuItemLabel"), exports);
 __exportStar(require("../../components/Menu/MenuLink"), exports);
 __exportStar(require("../../components/Menu/MenuLinkItem"), exports);
 __exportStar(require("../../components/Menu/MobileMenuGroup"), exports);
+__exportStar(require("../../components/Menu/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Menu/styledVariables.d.ts

@@ -0,0 +1,2 @@
+export declare const mobileMenu: import("styled-components").FlattenSimpleInterpolation;
+export declare const menu: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Menu/styledVariables.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menu = exports.mobileMenu = void 0;
+const styled_components_1 = require("styled-components");
+exports.mobileMenu = (0, styled_components_1.css) `
+  /**
+      * @tokens Mobile Menu icons
+      */
+  --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
+
+  /**
+      * @tokens Mobile Menu wrapper
+      * */
+  --mobile-menu-wrapper-height: calc(100vh - var(--navbar-height));
+  --mobile-menu-wrapper-width: 100%;
+  --mobile-menu-wrapper-z-index: var(--z-index-raised);
+  --mobile-menu-wrapper-left: 0;
+  --mobile-menu-wrapper-top: var(--navbar-height);
+  --mobile-menu-wrapper-transition: 0.5s;
+  --mobile-menu-wrapper-background: var(--bg-base); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu
+      * */
+  --mobile-menu-margin: var(--mobile-menu-items-margin-top) var(--mobile-menu-horizontal-margin) 0
+    var(--mobile-menu-horizontal-margin);
+  --mobile-menu-line-height: var(--line-height-base); // @presenter LineHeight
+  --mobile-menu-padding-top: var(--spacing-sm); // @presenter Spacing
+  --mobile-menu-items-margin-top: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-burger-button-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-background: var(--bg-base); // @presenter Color
+  --mobile-menu-profile-border-color: var(--border-secondary); // @presenter Color
+  --mobile-menu-group-padding-right: var(--spacing-base); // @presenter Spacing
+  --mobile-menu-horizontal-margin: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-margin: 0; // @presenter Spacing
+  --mobile-menu-item-nested-offset: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-item-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-item-text-color: var(--text-secondary); // @presenter Color
+  --mobile-menu-item-active-background-color: var(--bg-raised); // @presenter Color
+  --mobile-menu-item-active-text-color: var(--text-primary); // @presenter Color
+
+  /**
+      * @tokens Mobile Menu control button
+      * */
+  --mobile-menu-control-button-padding-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-padding-horizontal: var(--spacing-xxs); // @presenter Spacing
+  --mobile-menu-control-button-padding: var(--mobile-menu-control-button-padding-vertical) var(--mobile-menu-control-button-padding-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-margin-vertical: 0; // @presenter Spacing
+  --mobile-menu-control-button-margin-horizontal: var(--spacing-xs); // @presenter Spacing
+  --mobile-menu-control-button-margin: var(--mobile-menu-control-button-margin-vertical) var(--mobile-menu-control-button-margin-horizontal); // @presenter Spacing
+  --mobile-menu-control-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-control-button-weight: var(--font-weight-regular); // @presenter FontWeight
+  --mobile-menu-control-button-color: var(--mobile-menu-item-text-color); // @presenter Color
+  --mobile-menu-control-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-control-button-text-align: center;
+  --mobile-menu-control-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Login button
+      * */
+  --mobile-menu-login-button-background: var(--color-primary-bg); // @presenter Color
+  --mobile-menu-login-button-color: var(--color-primary-text); // @presenter Color
+  --mobile-menu-login-button-hover-color: var(--text-primary); // @presenter Color
+  --mobile-menu-login-button-border-color: var(--color-primary-border); // @presenter Color
+  --mobile-menu-login-button-border-radius: var(--border-radius-md); // @presenter Spacing
+  --mobile-menu-login-button-font-size: var(--font-size-base); // @presenter FontSize
+  --mobile-menu-login-button-font-family: inherit; // @presenter FontFamily
+  --mobile-menu-login-button-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --mobile-menu-login-button-line-height: var(--line-height-base); // @presenter LineHeight
+
+  /**
+      * @tokens Mobile Menu Product
+      * */
+  --mobile-menu-product-name-color: var(--mobile-menu-item-text-color);
+  --mobile-menu-product-name-border-radius: var(--mobile-menu-item-radius);
+  --mobile-menu-product-name-border: 1px solid var(--border-secondary);
+  --mobile-menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  --mobile-menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
+  
+  // @tokens End
+`;
+exports.menu = (0, styled_components_1.css) `
+  /**
+    * @tokens Menu
+    */
+  --menu-padding: 0;
+  --menu-margin: 0;
+  --menu-list-style: none;
+  --menu-text-color: var(--sidebar-item-text-color);
+
+  --menu-item-label-align-items: center;
+  --menu-item-label-transition: background-color 0.3s, color 0.3s;
+  --menu-item-label-word-break: break-word;
+  --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
+  --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+
+  // @tokens End
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/Navbar/Navbar.js

@@ -88,11 +88,11 @@ function NavbarPresentational(props) {
             react_1.default.createElement(Product_1.ProductPicker, null),
             react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
             hideSearch ? null : react_1.default.createElement(Search_1.Search, null),
-            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage }),
-            hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
-                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))),
+            react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, onlyIcon: true }),
             react_1.default.createElement(ColorModeSwitcherWrapper, { isVisible: isOpen },
-                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)))));
+                react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null)),
+            hideUserProfile ? null : (react_1.default.createElement(AuthUserProfileWrapper, null,
+                react_1.default.createElement(AuthUserProfile_1.AuthUserProfile, null))))));
 }
 exports.NavbarPresentational = NavbarPresentational;
 const ColorModeSwitcherWrapper = styled_components_1.default.div `
@@ -110,6 +110,8 @@ const AuthUserProfileWrapper = styled_components_1.default.div `
   }
 `;
 exports.NavbarContainer = styled_components_1.default.nav `
+  border: var(--navbar-border);
+
   --text-color: var(--navbar-text-color);
 
   height: var(--navbar-height);
@@ -118,17 +120,13 @@ exports.NavbarContainer = styled_components_1.default.nav `
   align-items: center;
   flex-shrink: 0;
 
-  font-size: 0.875rem;
+  font-size: var(--navbar-font-size);
   position: sticky;
   top: 0;
   z-index: var(--z-index-raised);
-  padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
+  padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal);
   background: var(--navbar-background-color);
-  font-family: var(--navbar-item-font-family);
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    font-size: 1rem;
-  }
+  font-family: var(--navbar-font-family);
 
   ${({ theme }) => theme.mediaQueries.print} {
     background: transparent;
@@ -149,6 +147,7 @@ exports.NavbarRow = styled_components_1.default.div `
   margin: 0 auto;
   width: 100%;
 
+  gap: var(--navbar-menu-items-gap);
   max-width: var(--navbar-container-max-width);
 `;
 //# sourceMappingURL=Navbar.js.map

package/lib/components/Navbar/NavbarItem.d.ts

@@ -6,7 +6,7 @@ export interface NavbarItemProps {
     className?: string;
 }
 export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
-export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
+export declare const NavbarMenuItemDropdown: import("styled-components").StyledComponent<({ children, className, items, withArrow, triggerEvent, onChange, dataAttributes, placement, alignment, icon, }: import("../../components/Dropdown").DropdownProps) => JSX.Element, any, {
     dataAttributes: {
         'data-component-name': string;
     };