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

package/src/components/Sidebar/ApiCallItem.tsx

@@ -12,10 +12,10 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
+          {item.label}
           <HttpTag color={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </HttpTag>
-          {item.label}
         </Label>
       </MenuLinkItem>
 
@@ -25,6 +25,8 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
 }
 
 const Label = styled(MenuItemLabel)`
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -36,7 +38,7 @@ const Wrapper = styled.div``;
 
 export const HttpTag = styled(Tag)`
   flex-shrink: 0;
-  margin-top: 0;
+  margin: var(--sidebar-item-http-tag-margin);
   text-transform: uppercase;
 
   width: var(--sidebar-item-http-tag-width);

package/src/components/Sidebar/SidebarLayout.tsx

@@ -9,6 +9,7 @@ import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButt
 import { MenuContainer } from '@theme/components/Menu/MenuContainer';
 import { SidebarSearch } from '@theme/components/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { telemetry } from '@portal/telemetry';
 
 import { MobileSidebarIcon } from './MobileSidebarIcon';
 
@@ -81,7 +82,11 @@ export function SidebarLayout({
         <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
-            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
+            {header ? (
+              <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>
+                {header}
+              </HeaderWrapper>
+            ) : null}
             {versions ? <>{versions}</> : null}
             <MenuContainer growContent={growContent}>{menu}</MenuContainer>
             {footer && !isOpen ? (

package/src/components/Sidebar/styledVariables.ts

@@ -45,6 +45,7 @@ export const sidebar = css`
   --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
   --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
 
   /**
     * @tokens Sidebar item colors
@@ -54,8 +55,9 @@ export const sidebar = css`
   --sidebar-item-background-color: transparent; // @presenter Color
 
   --sidebar-item-active-color: var(--text-primary); // @presenter Color
-  --sidebar-item-active-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
 
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
   --sidebar-item-hover-color: var(--text-primary); // @presenter Color
 
   /**
@@ -125,21 +127,24 @@ export const sidebar = css`
 
   --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-offset: var(--spacing-lg); // @presenter Spacing
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
   --sidebar-item-separator-border-width: 1px; // @presenter Spacing
   --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
 
   /**
    * @tokens Sidebar item http tag
    */
 
-  --sidebar-item-http-tag-width: 36px;
-  --sidebar-item-http-tag-height: 14px;
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
   --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
-  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
   --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
-  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
 
   /**
     * @tokens Sidebar back button

package/src/components/Sidebar/types.ts

@@ -47,6 +47,7 @@ export interface NavItem {
   requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
   version?: string;
   default?: boolean;
 }

package/src/components/SidebarActions/CollapseSidebarButton.tsx

@@ -31,6 +31,10 @@ const ToggleButton = styled(StyledToggleRightPanelButton)<{ collapsed?: boolean
   fill: var(--sidebar-collapse-button-icon-color);
   margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
   border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
 
   ${({ collapsed }) =>
     collapsed &&

package/src/components/SidebarActions/SidebarActions.tsx

@@ -7,6 +7,7 @@ import {
   ControlsWrap,
   ControlsWrapChangeLayoutButtons,
 } from '@theme/components/SidebarActions/styled';
+import { telemetry } from '@portal/telemetry';
 
 export enum LayoutVariant {
   STACKED = 'stacked',
@@ -54,11 +55,20 @@ export const SidebarActions = ({
           {initialShowRightPanelToggle && (
             <ToggleRightPanelButton
               showRightPanelToggle={showRightPanelToggle}
-              onClick={onChangeRightPanelViewClick}
+              onClick={() => {
+                onChangeRightPanelViewClick();
+                telemetry.send('sidebar_samples_button_clicked', {});
+              }}
             />
           )}
           {showChangeLayoutButton && showRightPanelToggle && (
-            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
+            <ChangeViewButton
+              layout={layout}
+              onClick={() => {
+                onChangeViewClick();
+                telemetry.send('change_layout_button_clicked', {});
+              }}
+            />
           )}
         </ControlsWrapChangeLayoutButtons>
       )}
@@ -66,7 +76,12 @@ export const SidebarActions = ({
       {!hideCollapseSidebarButton && (
         <CollapseSidebarButton
           initialValue={collapsedSidebar}
-          onClick={onChangeCollapseSidebarClick}
+          onClick={() => {
+            onChangeCollapseSidebarClick();
+            collapsedSidebar
+              ? telemetry.send('sidebar_item_expanded', {})
+              : telemetry.send('sidebar_item_collapsed', {});
+          }}
         />
       )}
     </ControlsWrap>

package/src/components/SidebarActions/styled.tsx

@@ -30,11 +30,14 @@ export const StyledToggleRightPanelButton = styled.a`
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius);
-  padding: var(--spacing-unit);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
+  border: 1px solid var(--border-primary);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 
@@ -66,13 +69,16 @@ export const StyledChangeViewButton = styled.a`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
+  background: var(--bg-overlay);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-unit);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 
@@ -114,7 +120,7 @@ export const ControlsWrap = styled.span<{
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   align-items: center;
   margin-left: var(--sidebar-controls-margin-left);
   z-index: 2;
@@ -145,6 +151,6 @@ export const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boole
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -11,6 +11,7 @@ import {
   getDisplayedHeadings,
   getLeastDepth,
 } from '@theme/components/TableOfContent/utils';
+import { telemetry } from '@portal/telemetry';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -64,6 +65,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
                 className={activeHeadingId === heading.id ? 'active' : ''}
                 dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                 data-cy={`toc-${heading.value}`}
+                onClick={() => telemetry.send('toc_item_clicked', {})}
               />
             );
           })}

package/src/components/Tag/Tag.tsx

@@ -24,21 +24,25 @@ interface TagProps {
   children?: React.ReactNode;
   closable?: boolean;
   color?: StatusColor | Color | string;
+  size?: string;
   icon?: React.ReactNode;
+  onClick?: () => void;
 }
 
-export function Tag({ children, className, color = 'default', icon }: TagProps): JSX.Element {
+export function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element {
   return (
-    <TagContainer className={className} color={color}>
+    <TagContainer className={className} color={color} size={size} onClick={onClick}>
       {icon ? icon : null}
       {children}
     </TagContainer>
   );
 }
 
-const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
+const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) => ({
   'data-component-name': 'Tag/Tag',
-  className: className + ` tag-${color}`,
+  className:
+    (className || '') +
+    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 }))<TagProps>`
   display: inline-flex;
   align-items: center;
@@ -47,6 +51,11 @@ const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/src/components/Tag/styledVariables.ts

@@ -38,12 +38,17 @@ export const tag = css`
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: 4px 16px;
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,
   .tag-default {
     --tag-color: var(--text-primary); // @presenter Color
-    --tag-background-color: var(--bg-raised); // @presenter Color
+    --tag-background-color: var(--bg-overlay); // @presenter Color
     --tag-border-color: var(--border-primary); // @presenter Color
   }
 
@@ -51,76 +56,76 @@ export const tag = css`
   .tag-success,
   .tag-approved,
   .tag-get {
-    --tag-color: var(--color-success-base); // @presenter Color
-    --tag-background-color: var(--color-success-bg); // @presenter Color
-    --tag-border-color: var(--color-success-border); // @presenter Color
+    --tag-color: var(--color-success-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
   .tag-red,
   .tag-error,
   .tag-declined,
   .tag-delete {
-    --tag-color: var(--color-error-base); // @presenter Color
+    --tag-color: var(--color-error-active); // @presenter Color
     --tag-background-color: var(--color-error-bg); // @presenter Color
-    --tag-border-color: var(--color-error-border); // @presenter Color
+    --tag-border-color: var(--color-error-active); // @presenter Color
   }
 
   .tag-gold,
   .tag-warning,
   .tag-deprecated,
   .tag-put {
-    --tag-color: var(--color-warning-base); // @presenter Color
-    --tag-background-color: var(--color-warning-bg); // @presenter Color
-    --tag-border-color: var(--color-warning-border); // @presenter Color
+    --tag-color: var(--color-warning-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
   .tag-blue,
   .tag-processing,
   .tag-post {
-    --tag-color: var(--color-info-base); // @presenter Color
-    --tag-background-color: var(--color-info-bg); // @presenter Color
-    --tag-border-color: var(--color-info-border); // @presenter Color
+    --tag-color: var(--color-info-active); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
-    --tag-color: var(--color-purple-6); // @presenter Color
-    --tag-background-color: var(--color-purple-1); // @presenter Color
-    --tag-border-color: var(--color-purple-3); // @presenter Color
+    --tag-color: var(--color-purple-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
-    --tag-color: var(--color-cyan-6); // @presenter Color
-    --tag-background-color: var(--color-cyan-1); // @presenter Color
-    --tag-border-color: var(--color-cyan-3); // @presenter Color
+    --tag-color: var(--color-cyan-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
-    --tag-color: var(--color-yellow-6); // @presenter Color
-    --tag-background-color: var(--color-yellow-1); // @presenter Color
-    --tag-border-color: var(--color-yellow-3); // @presenter Color
+    --tag-color: var(--color-yellow-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
-    --tag-color: var(--color-geekblue-6); // @presenter Color
-    --tag-background-color: var(--color-geekblue-1); // @presenter Color
-    --tag-border-color: var(--color-geekblue-3); // @presenter Color
+    --tag-color: var(--color-geekblue-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
-    --tag-color: var(--color-magneta-6); // @presenter Color
-    --tag-background-color: var(--color-magneta-1); // @presenter Color
-    --tag-border-color: var(--color-magneta-3); // @presenter Color
+    --tag-color: var(--color-magneta-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 
   .tag-lime {
-    --tag-color: var(--color-lime-6); // @presenter Color
-    --tag-background-color: var(--color-lime-1); // @presenter Color
-    --tag-border-color: var(--color-lime-3); // @presenter Color
+    --tag-color: var(--color-lime-7); // @presenter Color
+    --tag-background-color: none; // @presenter Color
+    --tag-border-color: var(--color-lime-7); // @presenter Color
   }
 
   // @tokens End

package/src/components/Tiles/ThinTile.tsx

@@ -10,20 +10,20 @@ import type { TextAlign, TileProps } from '@theme/components/Tiles/types';
 const ThinTileWrapper = styled(Link)<{ bgColor?: string; bgImage?: string }>`
   display: flex;
   flex-direction: column;
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  border-radius: var(--border-radius-lg);
   box-sizing: border-box;
-  transition: box-shadow 0.25s ease;
-  padding: 24px;
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   text-decoration: none;
   width: 100%;
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
   background-color: ${({ bgColor }) => bgColor || 'var(--thin-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
 
   :hover {
-    box-shadow: 0 10px 100px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
 
   ${({ theme }) => theme.mediaQueries.small} {
@@ -57,10 +57,12 @@ const ThinTileIcon = styled.img`
 
 const ThinTileHeader = styled(TileHeader)<{ align?: TextAlign }>`
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'center'};
 `;
 
 const ThinTileText = styled(TileText)<{ icon?: string; align?: TextAlign }>`
+  color: var(--text-secondary);
   font-size: 18px;
   line-height: 1.5;
   flex-shrink: 0;

package/src/components/Tiles/WideTile.tsx

@@ -17,21 +17,21 @@ const WideTileWrapper = styled(Link)<{
 }>`
   display: inline-flex;
   flex-direction: ${({ withIcon }) => (withIcon ? 'column' : 'row')};
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
+  color: var(--text-primary);
+  border: 1px solid var(--border-secondary);
+  border-radius: var(--border-radius-lg);
   background-color: ${({ bgColor }) => bgColor || 'var(--wide-tile-background-color)'};
   background-image: ${({ bgImage }) => (bgImage ? `url(${bgImage})` : 'none')};
   background-repeat: no-repeat;
-  padding: 24px;
+  padding: var(--spacing-lg);
   padding-right: ${({ disableArrow }) => (disableArrow ? '24px' : '56px')};
-  margin-bottom: 32px;
+  margin-bottom: var(--spacing-xl);
   box-sizing: border-box;
   position: relative;
   text-decoration: none;
   width: 100%;
-  transition: box-shadow 0.25s ease;
   :hover {
-    box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.2);
+    border-color: var(--border-primary);
   }
   :before {
     content: ${({ disableArrow }) => (disableArrow ? 'none' : '""')};
@@ -51,8 +51,8 @@ const WideTileWrapper = styled(Link)<{
   
   ${({ theme }) => theme.mediaQueries.medium} {
     width: calc(50% - 2em);
-    padding: 32px;
-    padding-right: ${({ disableArrow }) => (disableArrow ? '32px' : '64px')};
+    padding: var(--spacing-xl);
+    padding-right: ${({ disableArrow }) => (disableArrow ? 'var(--spacing-xl)' : '64px')};
     flex-direction: row;
     max-width: ${({ maxWidth }) => maxWidth};
   }
@@ -60,9 +60,11 @@ const WideTileWrapper = styled(Link)<{
 
 const WideTileHeader = styled(TileHeader)<{ align?: string }>`
   font-size: 24px;
+  font-weight: var(--font-weight-bold);
   text-align: ${({ align }) => align || 'left'};
 `;
 const WideTileText = styled(TileText)<{ align?: string }>`
+  color: var(--text-secondary);
   font-size: 18px;
   text-align: ${({ align }) => align || 'left'};
 `;

package/src/components/Typography/SectionHeader.ts

@@ -4,9 +4,9 @@ export const SectionHeader = styled.h2.attrs<{ className?: string }>(({ classNam
   'data-component-name': 'Typography/SectionHeader',
   className,
 }))`
-  color: var(--h2-color);
+  color: var(--h2-text-color);
   font-size: var(--h2-font-size);
-  font-weight: var(--h2-font-weight);
+  font-weight: var(--font-weight-regular);
   text-align: center;
   margin: 2.65em 0;
   padding: 0 20px;

package/src/config.ts

@@ -254,6 +254,11 @@ const navItemSchema = {
     label: { type: 'string' },
     separator: { type: 'string' },
     separatorLine: { type: 'boolean' },
+    linePosition: {
+      type: 'string',
+      enum: ['top', 'bottom'],
+      default: 'top',
+    },
     version: { type: 'string' },
     menuStyle: { type: 'string', enum: ['drilldown' as MenuStyle] },
     expanded: { type: 'string', const: 'always' },
@@ -368,6 +373,7 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
+    filterValuesCasing: { type: 'string', enum: ['sentence'] },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },
@@ -415,7 +421,19 @@ export const themeConfigSchema = {
       },
       additionalProperties: false,
     },
-    sidebar: hideConfigSchema,
+    sidebar: {
+      type: 'object',
+      properties: {
+        separatorLine: { type: 'boolean' },
+        linePosition: {
+          type: 'string',
+          enum: ['top', 'bottom'],
+          default: 'bottom',
+        },
+        ...hideConfigSchema.properties,
+      },
+      additionalProperties: false,
+    },
     scripts: {
       type: 'object',
       properties: {