@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.1

package/src/components/Catalog/useCatalog.ts

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 
 import type { Location } from 'react-router-dom';
 
+import { telemetry } from '@portal/telemetry';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import type {
   CatalogItem,
@@ -45,6 +46,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
       }
       return [...prev.slice(0, filterIdx), newFilterOptions, ...prev.slice(filterIdx + 1)];
     });
+    telemetry.send('catalog_filter_changed', { type: 'toggle' });
     window.scrollTo(0, 0);
   }, []);
 
@@ -68,6 +70,7 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
             : f,
         );
       });
+      telemetry.send('catalog_filter_changed', { type: 'select' });
       window.scrollTo(0, 0);
     },
     [filtersWithOptions],
@@ -153,7 +156,16 @@ export function useCatalog(items: ResolvedNavItem[], config: CatalogConfig): Fil
         ? groupByFirstFilter(resolvedFilters, filteredItems)
         : [{ title: 'APIs', items: filteredItems }];
 
-    return { groups, filters: resolvedFilters, setFilterTerm, filterTerm };
+    return {
+      groups,
+      filters: resolvedFilters,
+      setFilterTerm: (newTerm) => {
+        setFilterTerm(newTerm);
+
+        telemetry.send('catalog_filter_changed', { type: 'term' });
+      },
+      filterTerm,
+    };
   }, [
     filtersWithOptions,
     normalizedItems,

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -10,12 +10,13 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-line-height);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-font-size);
+    font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { CodeBlockControlButton } from '@theme/components/CodeBlock';
 import { CollapseIcon, DeselectIcon, ExpandIcon, ReportIcon, SelectIcon } from '@theme/icons';
 import { useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 import { CopyButton } from '../CopyButton';
 
@@ -68,7 +69,10 @@ export function CodeBlockControls({
             toasterDuration={copy.toasterDuration}
             buttonText={copy.label}
             tooltipText={copy.tooltipText}
-            onCopyClick={copy?.onClick}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
           />
         ) : null}
 
@@ -139,6 +143,7 @@ export function CodeBlockControls({
             asIcon={controlsType === 'icon'}
             title={report.tooltipText}
             {...report.props}
+            onClick={() => telemetry.send('code_snippet_reported', {})}
           >
             {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
           </CodeBlockControlButton>

package/src/components/CodeBlock/styledVariables.ts

@@ -28,6 +28,8 @@ export const code = css`
     */
   --code-block-font-size: var(--code-font-size); // @presenter FontSize
   --code-block-font-family: var(--code-font-family); // @presenter FontFamily
+  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
+  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
   --code-block-text-color: var(--text-secondary); // @presenter Color
   --code-block-background-color: var(--bg-raised); // @presenter Color
   --code-block-border-color: var(--border-primary); // @presenter Color
@@ -54,7 +56,7 @@ export const code = css`
     * @tokens Code Block tokens
    */
   --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
-  --code-block-tokens-comment-color: hsl(30, 20%, 50%); // @presenter Color
+  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
   --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
   --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
@@ -64,8 +66,8 @@ export const code = css`
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-gold-8); // @presenter Color
-  --code-block-tokens-property-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
@@ -79,7 +81,7 @@ export const code = css`
   --code-block-tokens-keyword-color: var(--color-magneta-6); // @presenter Color
   --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
-  --code-block-tokens-regex-color: var(--color-gold-4); // @presenter Color
+  --code-block-tokens-regex-color: var(--color-gold-5); // @presenter Color
   --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
   --code-block-tokens-deleted-color: var(--color-red-6); // @presenter Color
 

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { ColorModeIcon } from '@theme/icons/ColorModeIcon';
 import { useMount, useThemeConfig } from '@theme/hooks';
+import { telemetry } from '@portal/telemetry';
 
 interface ColorModeSwitcherProps {
   className?: string;
@@ -34,6 +35,8 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
+
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
   };
 
   return (

package/src/components/Dropdown/Dropdown.tsx

@@ -5,7 +5,7 @@ import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
 export interface DropdownProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   items: JSX.Element[] | string[];
   dataAttributes?: Record<string, string>;
   className?: string;
@@ -14,6 +14,7 @@ export interface DropdownProps {
   placement?: 'top' | 'bottom';
   alignment?: 'start' | 'end';
   onChange?: (value: React.ReactNode | string) => void;
+  icon?: React.ReactNode;
 }
 
 export const Dropdown = ({
@@ -26,6 +27,7 @@ export const Dropdown = ({
   dataAttributes,
   placement,
   alignment,
+  icon,
 }: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -62,6 +64,7 @@ export const Dropdown = ({
     >
       <DropdownHeader>
         {children}
+        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </DropdownHeader>
       {isOpen && (

package/src/components/EditPageButton/EditPageButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
+import { telemetry } from '@portal/telemetry';
 
 export interface EditPageButtonProps {
   text: string;
@@ -11,7 +12,7 @@ export interface EditPageButtonProps {
 
 export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Element => {
   return (
-    <EditButton to={to}>
+    <EditButton to={to} onClick={() => telemetry.send('edit_page_link_clicked', {})}>
       {icon ? <ButtonIcon src={icon} /> : null}
       <ButtonText>{text}</ButtonText>
     </EditButton>
@@ -21,12 +22,16 @@ export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Ele
 const EditButton = styled(Link)`
   margin-left: auto;
   display: inline-flex;
-  color: var(--color-content);
+  color: var(--text-secondary);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
 
+  &:hover {
+    color: var(--text-primary);
+  }
+
   @media print {
     display: none;
   }

package/src/components/Feedback/Comment.tsx

@@ -67,6 +67,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Feedback.tsx

@@ -6,6 +6,7 @@ import type { FeedbackProps } from '@theme/types/portal/src/shared/types/feedbac
 import { Rating, Sentiment, Comment } from '@theme/components/Feedback';
 import { useThemeConfig } from '@theme/hooks';
 import { useSubmitFeedback } from '@portal/Feedback/useSubmitFeedback';
+import { telemetry } from '@portal/telemetry';
 
 export const Feedback = (props: FeedbackProps & { path?: string }) => {
   const { submitFeedback } = useSubmitFeedback();
@@ -20,7 +21,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Rating
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'rating', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'rating', values, path });
+                telemetry.send('feedback_sent', { type: 'rating' });
+              }}
             />
           </Wrapper>
         );
@@ -29,7 +33,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Sentiment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'sentiment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'sentiment', values, path });
+                telemetry.send('feedback_sent', { type: 'sentiment' });
+              }}
             />
           </Wrapper>
         );
@@ -38,7 +45,10 @@ export const Feedback = (props: FeedbackProps & { path?: string }) => {
           <Wrapper>
             <Comment
               settings={settings}
-              onSubmit={(values) => submitFeedback({ type: 'comment', values, path })}
+              onSubmit={(values) => {
+                submitFeedback({ type: 'comment', values, path });
+                telemetry.send('feedback_sent', { type: 'comment' });
+              }}
             />
           </Wrapper>
         );

package/src/components/Feedback/Rating.tsx

@@ -116,5 +116,9 @@ const Star = styled.span`
 
 const Label = styled.h3`
   margin-right: 15px;
-  font-family: var(--font-family-base);
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
 `;

package/src/components/Feedback/Reasons.tsx

@@ -77,6 +77,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Sentiment.tsx

@@ -69,10 +69,18 @@ export const Sentiment = ({ settings, onSubmit, className }: SentimentProps): JS
       <Label data-translation-key={translationKeys.label}>
         {translate(translationKeys.label, label || 'Was this page helpful?')}
       </Label>
-      <Vote onClick={() => setScore(1)}>
+      <Vote
+        onClick={() => {
+          setScore(1);
+        }}
+      >
         <ThumbUp text="Yes" />
       </Vote>
-      <Vote onClick={() => setScore(-1)}>
+      <Vote
+        onClick={() => {
+          setScore(-1);
+        }}
+      >
         <ThumbDown />
       </Vote>
     </Wrapper>
@@ -86,6 +94,11 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
+  font-family: var(--h3-font-family);
+  font-weight: var(--h3-font-weight);
+  font-size: var(--h3-font-size);
+  line-height: var(--h3-line-height);
+  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Thumbs.tsx

@@ -108,12 +108,12 @@ export const ThumbDown = ({ text }: { text?: string }) => {
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-primary);
+  color: var(--color-info-text);
   &:hover {
-    color: var(--color-primary-active);
+    color: var(--color-info-text-active);
     svg {
       > g {
-        fill: var(--color-primary-active);
+        fill: var(--color-info-text-active);
       }
     }
   }
@@ -125,7 +125,7 @@ const Icon = styled.div`
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-primary);
+      fill: var(--color-info-text);
     }
   }
 `;

package/src/components/Filter/Filter.tsx

@@ -139,6 +139,9 @@ const FilterOptionLabel = styled.label`
   font-weight: var(--filter-option-label-font-weight);
   margin: var(--filter-option-label-margin);
   color: var(--filter-option-label-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 const FilterOptionCount = styled.label`
@@ -162,7 +165,7 @@ const FilterTitle = styled.h4`
   margin: var(--filter-title-margin);
 `;
 
-const FilterOption = styled.label`
+const FilterOption = styled.label.attrs({ 'data-cy': 'Filter/FilterOption' })`
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Filter/FilterContent.tsx

@@ -27,6 +27,14 @@ export function FilterContent({
     clearAll: 'theme.catalog.filters.clearAll',
   };
 
+  const hasActiveFilters = filters.some((filter) => {
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
+      return true;
+    }
+  });
+
   const handleClearAll = () => {
     filters.forEach((filter) => filter.selectOption(''));
   };
@@ -45,14 +53,17 @@ export function FilterContent({
           <Filter filter={filter} key={filter.property + '-' + idx} />
         ))}
       </FilterItems>
-      <Button size="small" onClick={handleClearAll}>
-        {translate(translationKeys.placeholder, 'Clear all filters')}
-      </Button>
+      {hasActiveFilters && (
+        <Button size="small" onClick={handleClearAll}>
+          {translate(translationKeys.placeholder, 'Clear all filters')}
+        </Button>
+      )}
     </FilterContentWrapper>
   );
 }
 
 const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+  width: var(--sidebar-width);
   display: none;
 
   ${Button} {

package/src/components/Filter/FilterPopover.tsx

@@ -8,17 +8,23 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 
 interface FilterPopoverProps {
   setIsAddingFilter: (value: boolean) => void;
-  setFilterTerm: (value: string) => void;
   filters: ResolvedFilter[];
-  filterTerm: string;
 }
 
-export function FilterPopover({
-  setIsAddingFilter,
-  setFilterTerm,
-  filters,
-  filterTerm,
-}: FilterPopoverProps) {
+export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps) {
+  const [filterTerm, setFilterTerm] = React.useState('');
+  const filteredFilters = filters
+    .map((filter) => {
+      const options = filter.options.filter((option) => option.value.includes(filterTerm));
+      return options.length
+        ? {
+            ...filter,
+            filteredOptions: options,
+          }
+        : null;
+    })
+    .filter(Boolean) as ResolvedFilter[];
+
   const translationKeys = {
     placeholder: 'theme.catalog.filters.placeholder',
     done: 'theme.catalog.filters.done',
@@ -47,7 +53,7 @@ export function FilterPopover({
         />
       </FilterControls>
       <FilterItems>
-        {filters.map((filter, idx) => (
+        {filteredFilters.map((filter, idx) => (
           <Filter filter={filter} key={filter.property + '-' + idx} />
         ))}
       </FilterItems>
@@ -89,7 +95,9 @@ const FilterPopoverHeaderLabel = styled.div`
   font-weight: var(--filter-popover-header-label-font-weight);
 `;
 
-const FilterPopoverHeaderButton = styled.div`
+const FilterPopoverHeaderButton = styled.div.attrs({
+  'data-cy': 'FilterPopover/DoneButton',
+})`
   color: var(--filter-popover-header-button-color);
   justify-self: end;
   font-size: var(--filter-popover-header-button-font-size);
@@ -98,7 +106,7 @@ const FilterPopoverHeaderButton = styled.div`
   line-height: var(--filter-popover-header-button-height);
 `;
 
-export const StyledInput = styled.input`
+export const StyledInput = styled.input.attrs({ 'data-cy': 'FilterPopover/Input' })`
   border: var(--filter-input-border);
   min-width: var(--filter-input-min-width);
   width: 100%;

package/src/components/Filter/FilterTag.tsx

@@ -17,7 +17,7 @@ export function FilterTag({ label, onClick }: FilterTagProps) {
   );
 }
 
-const TagWrapper = styled.div`
+const TagWrapper = styled.div.attrs({ 'data-cy': 'Filter/FilterTag' })`
   display: flex;
   align-items: center;
   white-space: nowrap;

package/src/components/Footer/FooterColumn.tsx

@@ -5,6 +5,7 @@ import { Link } from '@portal/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 import { useTranslate } from '@portal/hooks';
 import { Image } from '@theme/components/Image/Image';
+import { telemetry } from '@portal/telemetry';
 
 interface FooterColumnProps {
   column: ResolvedNavItem;
@@ -38,6 +39,7 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
               target={columnItem.target}
               data-cy={columnItem.label}
               iconsOnly={iconsOnly}
+              onClick={() => telemetry.send('footer_item_clicked', {})}
             >
               {columnItem.icon || columnItem.srcSet ? (
                 <FooterLinkIcon>

package/src/components/LastUpdated/index.ts

@@ -0,0 +1 @@
+export * from '@theme/components/LastUpdated/styledVariables';

package/src/components/LastUpdated/styledVariables.ts

@@ -0,0 +1,8 @@
+import { css } from "styled-components";
+
+export const lastUpdated = css`
+  --last-updated-text-color: var(--text-secondary);
+  --last-updated-font-size: var(--font-size-sm);
+  --last-updated-font-family: var(--font-family-base);
+  --last-updated-line-height: var(--line-height-base);
+`;

package/src/components/Menu/MenuItemLabel.tsx

@@ -14,6 +14,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
   font-family: var(--sidebar-item-font-family);
   font-size: var(--sidebar-item-font-size);
   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);
@@ -35,6 +36,7 @@ export const MenuItemLabel = styled.li.attrs<{ className?: string }>(({ classNam
 
     ${({ theme }) => theme.mediaQueries.medium} {
       color: var(--sidebar-item-hover-color);
+      background: var(--sidebar-item-hover-background-color);
     }
   }
 

package/src/components/Menu/MenuLinkItem.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { MenuLink } from '@theme/components/Menu/MenuLink';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
+import { telemetry } from '@portal/telemetry';
 
 export function MenuLinkItem({
   item,
@@ -10,7 +11,11 @@ export function MenuLinkItem({
   className,
 }: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
-    <Wrapper data-component-name="Sidebar/MenuLinkItem" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/MenuLinkItem"
+      className={className}
+      onClick={() => telemetry.send('sidebar_item_clicked', { label: item.label, type: item.type })}
+    >
       {item.link ? (
         <MenuLink to={item.link} {...item}>
           {children}

package/src/components/Menu/MobileMenu.tsx

@@ -143,9 +143,9 @@ const ControlButtonLabel = styled.span<{ paddingDirection: 'right' | 'left' }>`
 `;
 
 const ProductNameWrapper = styled.div`
-  color: var(--menu-product-name-color);
-  border-radius: var(--menu-product-name-border-radius);
-  border: 1px solid var(--menu-product-name-border-color);
-  padding: var(--menu-product-name-padding);
-  margin: var(--menu-product-name-margin);
+  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/styledVariables.ts

@@ -5,7 +5,7 @@ export const mobileMenu = css`
       * @tokens Mobile Menu icons
       */
   --mobile-menu-icons-size: var(--spacing-md); // @presenter Spacing
-  --mobile-menu-search-icon-size: calc(var(--spacing-md) - 2px); // @presenter Spacing
+  --mobile-menu-search-icon-size: var(--spacing-md); // @presenter Spacing
 
   /**
       * @tokens Mobile Menu wrapper
@@ -58,9 +58,25 @@ export const mobileMenu = css`
   /**
       * @tokens Mobile Menu Login button
       * */
-  --mobile-menu-login-button-background: var(--color-primary-base); // @presenter Color
+  --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
 `;
 
@@ -79,10 +95,5 @@ export const menu = css`
   --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
   --menu-item-label-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
 
-  --menu-product-name-color: var(--mobile-menu-item-text-color);
-  --menu-product-name-border-radius: var(--mobile-menu-item-radius);
-  --menu-product-name-border-color: 1px solid rgba(0, 0, 0, 0.06);
-  --menu-product-name-padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
-  --menu-product-name-margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-xs);
   // @tokens End
 `;

package/src/components/Navbar/NavbarItem.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@theme/types/portal';
 import { useI18nConfig, useTranslate } from '@portal/hooks';
 import { withPathPrefix } from '@theme/utils';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown } from '@theme/components/Dropdown';
 
 export interface NavbarItemProps {
@@ -34,6 +35,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
         active={isActive}
         data-component-name="Navbar/NavbarItem"
         className={className}
+        onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'link' })}
       >
         <NavbarLink to={item.link} external={item.external} target={item.target} active={isActive}>
           {item.icon ? <NavbarIcon url={item.icon} /> : null}
@@ -58,6 +60,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
           active={false}
           data-component-name="Navbar/NavbarItem"
           className={className}
+          onClick={() => telemetry.send('navbar_menu_item_clicked', { type: 'group' })}
         >
           <NavbarIcon url={item.icon} />
           <NavbarLabel>{translate(item.labelTranslationKey, item.label)}</NavbarLabel>
@@ -92,19 +95,25 @@ export const NavbarMenuItem = styled.li<{ active?: boolean }>`
   padding: var(--navbar-item-padding-vertical) var(--navbar-item-padding-horizontal);
   text-align: center;
   line-height: var(--navbar-item-line-height);
-  border-radius: var(--navbar-item-border-radius);
   font-weight: var(--navbar-item-font-weight);
 
+  border-radius: var(--navbar-item-border-radius);
+  border-bottom: ${({ active }) =>
+    active ? 'var(--navbar-item-active-bottom-border)' : 'var(--navbar-item-bottom-border)'};
+
   background: ${({ active }) => active && 'var(--navbar-item-active-background-color)'};
   color: ${({ active }) =>
     active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)'};
+
   &:hover {
     color: var(--navbar-item-hover-text-color);
     text-decoration: var(--navbar-item-hover-text-decoration);
+    border-bottom: ${({ active }) => !active && 'var(--navbar-item-hover-bottom-border)'};
     background: ${({ active }) =>
       active
         ? 'var(--navbar-item-active-background-color)'
         : 'var(--navbar-item-hover-background-color)'};
+
     ${NavbarLink} {
       color: var(--navbar-item-hover-text-color);
       text-decoration: var(--navbar-item-hover-text-decoration);