@redocly/theme 0.82.2-rc.1 → 0.82.2-rc.3

package/src/components/Catalog/CatalogCard.tsx

@@ -16,7 +16,6 @@ type CatalogCardProps = { item: CatalogItem };
 export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
-  const hasTags = item.scorecardLevel || item.tags?.length;
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
@@ -34,28 +33,26 @@ export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
           </CardDescription>
         </CardContent>
         <CardFooter>
-          {hasTags && (
-            <CardTags>
-              {((item.tags as string[]) || []).map((tag, index) => (
-                <CardTag key={tag + index} color={slug(tag)}>
-                  <CatalogHighlight>{capitalize(tag)}</CatalogHighlight>
-                </CardTag>
-              ))}
-              {(item.scorecardLevel && (
-                <Tag
-                  borderless
-                  withStatusDot
-                  statusDotColor={`var(${getScorecardColorVariable(
-                    item.scorecardLevelIdx || 0,
-                    Object.keys(item.scorecardLevels || {}).length,
-                  )})`}
-                >
-                  <CatalogHighlight>{item.scorecardLevel}</CatalogHighlight>
-                </Tag>
-              )) ||
-                null}
-            </CardTags>
-          )}
+          <CardTags>
+            {((item.tags as string[]) || []).map((tag, index) => (
+              <CardTag key={tag + index} color={slug(tag)}>
+                <CatalogHighlight>{capitalize(tag)}</CatalogHighlight>
+              </CardTag>
+            ))}
+            {(item.scorecardLevel && (
+              <Tag
+                borderless
+                withStatusDot
+                statusDotColor={`var(${getScorecardColorVariable(
+                  item.scorecardLevelIdx || 0,
+                  Object.keys(item.scorecardLevels || {}).length,
+                )})`}
+              >
+                <CatalogHighlight>{item.scorecardLevel}</CatalogHighlight>
+              </Tag>
+            )) ||
+              null}
+          </CardTags>
           <SelectButton size="medium" variant="secondary" icon={<ArrowRightIcon />} />
         </CardFooter>
       </StyledCard>

package/src/components/CodeBlock/CodeBlock.tsx

@@ -69,7 +69,7 @@ export function CodeBlock({
     (source || externalSource?.sample?.get?.(externalSource)) ?? '',
   );
 
-  const highlightedCode = highlightedHtml || children ? null : highlight(sourceCode, lang);
+  const highlightedCode = highlightedHtml || (children ? null : highlight(sourceCode, lang));
 
   // The same initial value should be returned for ssr and frontend to avoid issues
   // Because we don't have session storage in ssr and can't get the security details there

package/src/components/Dropdown/Dropdown.tsx

@@ -44,15 +44,21 @@ export function Dropdown({
     setIsOpen(false);
   };
 
-  const handleToggle = () => {
+  const handleChildClick = (event: React.UIEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    handleClose();
+  };
+
+  const handleToggle = (event: React.UIEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
     setIsOpen(!isOpen);
   };
 
-  const handleKeyDown = (event: KeyboardEvent) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' || event.key === ' ') {
-      handleToggle();
-      event.stopPropagation();
-      event.preventDefault();
+      handleToggle(event);
     }
   };
 
@@ -85,7 +91,7 @@ export function Dropdown({
         <ChildrenWrapper
           placement={placement}
           alignment={alignment}
-          onClick={closeOnClick ? handleClose : undefined}
+          onClick={closeOnClick ? handleChildClick : undefined}
         >
           {children}
         </ChildrenWrapper>

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -53,6 +53,8 @@ export function DropdownMenuItem({
     }
   };
 
+  className = className || '' + (active ? ' active' : '');
+
   if (to) {
     return (
       <DropdownMenuItemWrapper
@@ -139,8 +141,21 @@ const DropdownMenuItemWrapper = styled.li<{
     `}
 
   background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  ${({ active }) =>
+    active &&
+    css`
+      background-color: var(--dropdown-menu-item-bg-color-active);
+      color: var(--dropdown-menu-item-color-active);
+      svg {
+        fill: var(--dropdown-menu-item-color-active);
+      }
+    `}
+
   &:hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
+    color: var(--dropdown-menu-item-color-hover);
   }
 
   ${({ disabled }) =>
@@ -148,9 +163,10 @@ const DropdownMenuItemWrapper = styled.li<{
     css`
       cursor: default;
       pointer-events: none;
-      color: var(--dropdown-menu-color-disabled);
+      background-color: var(--dropdown-menu-item-bg-color-disabled);
+      color: var(--dropdown-menu-item-color-disabled);
       svg {
-        fill: var(--dropdown-menu-color-disabled);
+        fill: var(--dropdown-menu-item-color-disabled);
       }
     `}
 
@@ -171,9 +187,12 @@ const DropdownMenuItemWrapper = styled.li<{
   ${({ dangerous }) =>
     dangerous &&
     css`
-      color: var(--dropdown-menu-item-color-dangerous);
-      svg {
-        fill: var(--dropdown-menu-item-color-dangerous);
+      &:hover,
+      & {
+        color: var(--dropdown-menu-item-color-dangerous);
+        svg {
+          fill: var(--dropdown-menu-item-color-dangerous);
+        }
       }
     `}
 `;

package/src/components/Dropdown/variables.ts

@@ -15,7 +15,6 @@ export const dropdown = css`
   --dropdown-menu-padding: var(--spacing-xxs); // @presenter Spacing
   --dropdown-menu-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --dropdown-menu-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
-  --dropdown-menu-color-disabled: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-border-color: var(--border-color-secondary); // @presenter Color
   --dropdown-menu-bg-color: var(--bg-color-raised); // @presenter Color
 
@@ -28,11 +27,16 @@ export const dropdown = css`
   --dropdown-menu-item-bg-color: transparent;
   --dropdown-menu-item-bg-color-active: var(--bg-color-hover); // @presenter Color
   --dropdown-menu-item-bg-color-hover: var(--bg-color-hover); // @presenter Color
+  --dropdown-menu-item-bg-color-disabled: var(--dropdown-menu-item-bg-color); // @presenter Color
   --dropdown-menu-item-separator-border-color: var(--border-color-primary); // @presenter Color
   --dropdown-menu-item-separator-font-size: var(--font-size-sm); // @presenter FontSize
   --dropdown-menu-item-separator-line-height: var(--line-height-sm); // @presenter LineHeight
   --dropdown-menu-item-separator-text-color: var(--text-color-disabled); // @presenter Color
   --dropdown-menu-item-justify-content: flex-start;
+  --dropdown-menu-item-color: var(--dropdown-menu-text-color); // @presenter Color
+  --dropdown-menu-item-color-hover: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-active: var(--dropdown-menu-item-color); // @presenter Color
+  --dropdown-menu-item-color-disabled: var(--text-color-disabled); // @presenter Color
 
   --dropdown-menu-item-color-dangerous: var(--color-error-base);
 

package/src/components/Feedback/Comment.tsx

@@ -93,7 +93,7 @@ export function Comment({
           <Button
             data-translation-key="theme.feedback.settings.comment.send"
             onClick={send}
-            variant="primary"
+            variant="secondary"
             size="small"
           >
             {translate('theme.feedback.settings.comment.send', 'Send')}

package/src/components/Feedback/Mood.tsx

@@ -125,8 +125,9 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             <>
               <Button
                 type="button"
-                disabled={score === MOOD_STATES.DISSATISFIED}
                 size="medium"
+                variant={score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary'}
+                tone={score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default'}
                 onClick={() => {
                   setScore(MOOD_STATES.DISSATISFIED);
                 }}
@@ -134,7 +135,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               />
               <Button
                 type="button"
-                disabled={score === MOOD_STATES.NEUTRAL}
+                variant={score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary'}
                 size="medium"
                 onClick={() => {
                   setScore(MOOD_STATES.NEUTRAL);
@@ -143,7 +144,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
               />
               <Button
                 type="button"
-                disabled={score === MOOD_STATES.SATISFIED}
+                variant={score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary'}
                 size="medium"
                 onClick={() => {
                   setScore(MOOD_STATES.SATISFIED);
@@ -180,7 +181,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
             <Button onClick={onCancelMoodForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onCancelMoodForm} variant="primary" size="small">
+            <Button onClick={onSubmitMoodForm} variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>

package/src/components/Feedback/Rating.tsx

@@ -123,7 +123,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
             <Button onClick={onCancelRatingForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onCancelRatingForm} variant="primary" size="small">
+            <Button onClick={onCancelRatingForm} variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>

package/src/components/Feedback/Scale.tsx

@@ -163,7 +163,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
             <Button
               data-translation-key="theme.feedback.settings.scale.send"
               onClick={onSubmitScaleForm}
-              variant="primary"
+              variant="secondary"
               size="small"
             >
               {translate('theme.feedback.settings.scale.send', 'Submit')}

package/src/components/Feedback/Sentiment.tsx

@@ -101,7 +101,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             <Button
               type="button"
               size="medium"
-              disabled={score === 1}
+              variant={score === 1 ? 'primary' : 'secondary'}
               onClick={() => {
                 setScore(1);
               }}
@@ -111,7 +111,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             <Button
               size="medium"
               type="button"
-              disabled={score === -1}
+              variant={score === -1 ? 'primary' : 'secondary'}
+              tone={score === -1 ? 'danger' : 'default'}
               onClick={() => {
                 setScore(-1);
               }}
@@ -147,7 +148,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
             <Button onClick={onCancelSentimentForm} variant="text" size="small">
               Cancel
             </Button>
-            <Button onClick={onSubmitSentimentForm} variant="primary" size="small">
+            <Button onClick={onSubmitSentimentForm} variant="secondary" size="small">
               Submit
             </Button>
           </ButtonsContainer>

package/src/components/Filter/FilterContent.tsx

@@ -46,7 +46,7 @@ export function FilterContent({
           {translate('theme.catalog.filters.title', 'Filters')}
         </FiltersTitle>
         {hasActiveFilters ? (
-          <Button size="medium" variant="ghost" onClick={handleClearAll}>
+          <Button size="medium" tone="danger" variant="ghost" onClick={handleClearAll}>
             {translate('theme.catalog.filters.clearAll', 'Clear filters')}
           </Button>
         ) : null}

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -67,7 +67,7 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   }
 
   --dropdown-menu-item-justify-content: space-between;
-
+  --dropdown-menu-item-gap: var(--spacing-xxs);
   --dropdown-menu-font-size: var(--language-picker-dropdown-font-size);
   --dropdown-menu-font-weight: var(--language-picker-dropdown-font-weight);
   --dropdown-menu-line-height: var(--language-picker-dropdown-line-height);
@@ -78,7 +78,6 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--language-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--language-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--language-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--language-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--language-picker-dropdown-border-color);
   --dropdown-menu-bg-color: var(--language-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--language-picker-dropdown-item-padding-horizontal);
@@ -92,8 +91,12 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--language-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--language-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--language-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--language-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --language-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--language-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--language-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--language-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--language-picker-dropdown-item-color-hover);
 `;

package/src/components/LanguagePicker/variables.ts

@@ -15,7 +15,6 @@ export const languagePicker = css`
   --language-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --language-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --language-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --language-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --language-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --language-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -26,8 +25,12 @@ export const languagePicker = css`
   --language-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --language-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --language-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --language-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --language-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --language-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --language-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --language-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --language-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --language-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/src/components/Markdown/Markdown.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
-import { typography } from '@redocly/theme/core/utils/theme-helpers';
 
+import { typography } from '@redocly/theme/core/utils/theme-helpers';
 import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
 import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
@@ -103,37 +103,37 @@ export const Markdown = styled.main.attrs<{
   }
 
   h1.md {
-    ${typography('h1', 'h')};
+    ${typography('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h2.md {
-    ${typography('h2', 'h')};
+    ${typography('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h3.md {
-    ${typography('h3', 'h')};
+    ${typography('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h4.md {
-    ${typography('h4', 'h')};
+    ${typography('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h5.md {
-    ${typography('h5', 'h')};
+    ${typography('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${headingAnchorCss()};
   }
 
   h6.md {
-    ${typography('h6', 'h')};
+    ${typography('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${headingAnchorCss()};
   }

package/src/components/Product/ProductPicker.tsx

@@ -66,7 +66,6 @@ const ProductDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--product-picker-dropdown-padding);
   --dropdown-menu-border-radius: var(--product-picker-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--product-picker-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--product-picker-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--product-picker-dropdow--border-color);
   --dropdown-menu-bg-color: var(--product-picker-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--product-picker-dropdown-item-padding-horizontal);
@@ -80,8 +79,12 @@ const ProductDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--product-picker-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--product-picker-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--product-picker-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--product-picker-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --product-picker-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--product-picker-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--product-picker-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--product-picker-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--product-picker-dropdown-item-color-hover);
 `;

package/src/components/Product/variables.ts

@@ -18,7 +18,6 @@ export const productPicker = css`
   --product-picker-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --product-picker-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --product-picker-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --product-picker-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --product-picker-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -29,8 +28,12 @@ export const productPicker = css`
   --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --product-picker-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --product-picker-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --product-picker-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --product-picker-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
 `;

package/src/components/Search/SearchDialog.tsx

@@ -1,8 +1,8 @@
 import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import type { SearchDocument } from '@redocly/theme/core/types';
 import type { MouseEvent } from 'react';
+import type { SearchDocument } from '@redocly/theme/core/types';
 
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';

package/src/components/Segmented/Segmented.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
 
 import type { ReactElement } from 'react';
 import type { SelectOption } from '@redocly/theme/core/types/select-option';
 
+import { typedMemo } from '@redocly/theme/core/hoc/typedMemo';
+
 type SegmentedProps<T> = {
   options: SelectOption<T>[];
   value: T;

package/src/components/Sidebar/Sidebar.tsx

@@ -50,7 +50,6 @@ export function Sidebar({
   return (
     <SidebarContent
       data-component-name="Sidebar/Sidebar"
-      animate={true}
       opened={isOpen}
       className={className}
       collapsed={mappedCollapsed}
@@ -73,7 +72,7 @@ export function Sidebar({
   );
 }
 
-const SidebarContent = styled.aside<{ opened?: boolean; animate?: boolean; collapsed?: boolean }>`
+const SidebarContent = styled.aside<{ opened?: boolean; collapsed?: boolean }>`
   border-right: 1px solid var(--sidebar-border-color);
   position: fixed;
   left: 0;
@@ -91,14 +90,8 @@ const SidebarContent = styled.aside<{ opened?: boolean; animate?: boolean; colla
   top: var(--navbar-height);
   height: calc(100vh - var(--navbar-height));
   overflow-x: hidden;
-  ${({ opened, animate }) => `
-    opacity: ${opened ? '1' : '0'};
-    pointer-events: ${opened ? 'auto' : 'none'};
-
-    & > * {
-      transform: ${opened ? 'translate(0, 0)' : 'translate(0, 40px)'};
-      transition: ${animate ? 'transform 0.65s ease, opacity 0.25s ease;' : 'none'};
-    }
+  ${({ opened }) => `
+    display: ${opened ? 'flex' : 'none'}
   `};
 
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/components/Tooltip/Tooltip.tsx

@@ -168,8 +168,8 @@ const TooltipBody = styled.span<
   position: absolute;
   text-align: center;
 
-  padding: 10px 20px;
-  max-width: 250px;
+  padding: var(--tooltip-padding);
+  max-width: var(--tooltip-max-width);
   white-space: normal;
   overflow-wrap: break-word;
 

package/src/components/Tooltip/variables.ts

@@ -8,6 +8,10 @@ export const tooltip = css`
 
   --tooltip-text-color: var(--text-color-secondary);
   --tooltip-bg-color: var(--bg-color-raised);
+  --tooltip-padding-vertical: var(--spacing-xs);
+  --tooltip-padding-horizontal: var(--spacing-sm);
+  --tooltip-padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);
+  --tooltip-max-width: 250px;
 
   .tooltip-copy-button {
     --tooltip-text-color: var(--text-color-secondary);

package/src/components/Typography/H1.ts

@@ -9,5 +9,5 @@ export const H1 = styled.h1.attrs<{ className?: string }>(({ className }) => ({
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
 
-  ${typography('h1', 'h')};
+  ${typography('h1')};
 `;

package/src/components/Typography/H2.ts

@@ -9,5 +9,5 @@ export const H2 = styled.h2.attrs<{ className?: string }>(({ className }) => ({
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
 
-  ${typography('h2', 'h')};
+  ${typography('h2')};
 `;

package/src/components/Typography/H3.ts

@@ -9,5 +9,5 @@ export const H3 = styled.h3.attrs<{ className?: string }>(({ className }) => ({
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
 
-  ${typography('h3', 'h')};
+  ${typography('h3')};
 `;

package/src/components/Typography/H4.ts

@@ -9,5 +9,5 @@ export const H4 = styled.h4.attrs<{ className?: string }>(({ className }) => ({
   color: var(--h4-text-color);
   margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
 
-  ${typography('h4', 'h')};
+  ${typography('h4')};
 `;

package/src/components/UserMenu/UserMenu.tsx

@@ -111,7 +111,6 @@ const StyledDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--user-menu-dropdown-padding);
   --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--user-menu-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
   --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
@@ -123,8 +122,12 @@ const StyledDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --user-menu-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
 `;

package/src/components/UserMenu/variables.ts

@@ -42,7 +42,6 @@ export const userMenu = css`
   --user-menu-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --user-menu-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --user-menu-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --user-menu-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --user-menu-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --user-menu-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -53,8 +52,12 @@ export const userMenu = css`
   --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --user-menu-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --user-menu-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --user-menu-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --user-menu-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --user-menu-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --user-menu-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/src/core/styles/global.ts

@@ -1,6 +1,6 @@
 import { createGlobalStyle, css } from 'styled-components';
-import { darkMode } from '@redocly/theme/core/styles/dark';
 
+import { darkMode } from '@redocly/theme/core/styles/dark';
 import { languagePicker } from '@redocly/theme/components/LanguagePicker/variables';
 import { scorecard } from '@redocly/theme/components/Scorecard/variables';
 import { feedback } from '@redocly/theme/components/Feedback/variables';
@@ -987,10 +987,9 @@ const error = css`
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
 
-  --detailed-error-modal-width: 70%;
-  --detailed-error-modal-height: calc(100vh - 100px - var(--navbar-height));
-  --detailed-error-modal-top: calc(50px + var(--navbar-height));
-  --detailed-error-modal-left: 15%;
+  --detailed-error-modal-width: calc(100% - var(--spacing-lg) * 2);
+  --detailed-error-modal-height: calc(100vh - var(--navbar-height) - var(--spacing-lg) * 2);
+  --detailed-error-modal-top: calc(var(--spacing-lg) + var(--navbar-height));
   --detailed-error-modal-border-radius: var(--border-radius-md);
   --detailed-error-modal-bg-color: var(--bg-color-raised);
   --detailed-error-modal-color: var(--text-color-primary);

package/src/core/types/catalog.ts

@@ -34,6 +34,8 @@ export type CatalogItem = {
   scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
   scoreCardSlug?: string;
   tags?: unknown[];
-
+  versions?: CatalogItem[];
+  version?: string;
+  versionFolderId?: string;
   [k: string]: unknown;
 };