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

package/lib/components/Button/Button.js

@@ -166,7 +166,7 @@ const ButtonComponent = (props) => {
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));
     if (props.to) {
-        return react_1.default.createElement(StyledButtonLink, { to: props.to }, button);
+        return (react_1.default.createElement(StyledButtonLink, { to: props.to, onClick: props.onClick }, button));
     }
     else {
         return button;

package/lib/components/Catalog/CatalogCard.js

@@ -37,10 +37,9 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 const Button_1 = require("../../components/Button/Button");
 function CatalogCard({ item }) {
-    var _a, _b;
+    var _a;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
-    const hasTags = item.scorecardLevel || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { "data-component-name": "Catalog/CatalogCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardContent, null,
@@ -48,14 +47,14 @@ function CatalogCard({ item }) {
                     React.createElement(CardTitle, null,
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : ''))),
             React.createElement(CardFooter, null,
-                hasTags && (React.createElement(CardTags, null,
+                React.createElement(CardTags, null,
                     (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, (0, utils_1.capitalize)(tag))))),
                     (item.scorecardLevel && (React.createElement(Tag_1.Tag, { borderless: true, withStatusDot: true, statusDotColor: `var(${(0, utils_1.getScorecardColorVariable)(item.scorecardLevelIdx || 0, Object.keys(item.scorecardLevels || {}).length)})` },
                         React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.scorecardLevel)))) ||
-                        null)),
+                        null),
                 React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
 }
 exports.CatalogCard = CatalogCard;

package/lib/components/CodeBlock/CodeBlock.js

@@ -37,7 +37,7 @@ const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControl
 function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
     var _a, _b, _c, _d, _e, _f;
     const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)))) !== null && _c !== void 0 ? _c : '');
-    const highlightedCode = highlightedHtml || children ? null : (0, utils_1.highlight)(sourceCode, lang);
+    const highlightedCode = highlightedHtml || (children ? null : (0, utils_1.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
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888

package/lib/components/Dropdown/Dropdown.js

@@ -41,14 +41,19 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const handleClose = () => {
         setIsOpen(false);
     };
-    const handleToggle = () => {
+    const handleChildClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleClose();
+    };
+    const handleToggle = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
         setIsOpen(!isOpen);
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
-            handleToggle();
-            event.stopPropagation();
-            event.preventDefault();
+            handleToggle(event);
         }
     };
     (0, hooks_1.useOutsideClick)(dropdownRef, handleClose);
@@ -56,7 +61,7 @@ function Dropdown({ children, className, active, trigger, triggerEvent = 'click'
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), { tabIndex: 0 }), triggerChild.props), { onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined }));
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: dropdownRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined }),
         dropdownTrigger,
-        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleClose : undefined }, children))));
+        isOpen && (react_1.default.createElement(ChildrenWrapper, { placement: placement, alignment: alignment, onClick: closeOnClick ? handleChildClick : undefined }, children))));
 }
 exports.Dropdown = Dropdown;
 const DropdownWrapper = styled_components_1.default.div `

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -51,6 +51,7 @@ function DropdownMenuItem(_a) {
             onAction === null || onAction === void 0 ? void 0 : onAction();
         }
     };
+    className = className || '' + (active ? ' active' : '');
     if (to) {
         return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, separatorLine: separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
             prefix,
@@ -99,17 +100,30 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
     `}
 
   background-color: var(--dropdown-menu-item-bg-color);
+  color: var(--dropdown-menu-item-color);
+
+  ${({ active }) => active &&
+    (0, styled_components_1.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 }) => disabled &&
     (0, styled_components_1.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);
       }
     `}
 
@@ -128,9 +142,12 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
 
   ${({ dangerous }) => dangerous &&
     (0, styled_components_1.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/lib/components/Dropdown/variables.js

@@ -17,7 +17,6 @@ exports.dropdown = (0, styled_components_1.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
 
@@ -30,11 +29,16 @@ exports.dropdown = (0, styled_components_1.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/lib/components/Feedback/Comment.js

@@ -63,7 +63,7 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, }
         react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         standAlone && (react_1.default.createElement(ButtonsContainer, null,
             onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
-            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "primary", size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: "secondary", size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
 }
 exports.Comment = Comment;
 const StyledFormMandatoryFields = styled_components_1.default.div `

package/lib/components/Feedback/Mood.js

@@ -102,13 +102,13 @@ function Mood({ settings, onSubmit, className }) {
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(React.Fragment, null,
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.DISSATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                                 setScore(MOOD_STATES.DISSATISFIED);
                             }, icon: React.createElement(FaceDissatisfiedIcon_1.FaceDissatisfiedIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.NEUTRAL, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.NEUTRAL ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.NEUTRAL);
                             }, icon: React.createElement(FaceNeutralIcon_1.FaceNeutralIcon, null) }),
-                        React.createElement(Button_1.Button, { type: "button", disabled: score === MOOD_STATES.SATISFIED, size: "medium", onClick: () => {
+                        React.createElement(Button_1.Button, { type: "button", variant: score === MOOD_STATES.SATISFIED ? 'primary' : 'secondary', size: "medium", onClick: () => {
                                 setScore(MOOD_STATES.SATISFIED);
                             }, icon: React.createElement(FaceSatisfiedIcon_1.FaceSatisfiedIcon, null) })))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -120,7 +120,7 @@ function Mood({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitMoodForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Mood = Mood;
 const remapScore = (score) => {

package/lib/components/Feedback/Rating.js

@@ -88,7 +88,7 @@ function Rating({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Rating = Rating;
 const StyledForm = styled_components_1.default.form `

package/lib/components/Feedback/Scale.js

@@ -97,7 +97,7 @@ function Scale({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentSettings.label } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "primary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
+                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
 }
 exports.Scale = Scale;
 const ScaleWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -82,10 +82,10 @@ function Sentiment({ settings, onSubmit, className }) {
             React.createElement(StyledFormMandatoryFields, null,
                 React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
-                    React.createElement(Button_1.Button, { type: "button", size: "medium", disabled: score === 1, onClick: () => {
+                    React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
                             setScore(1);
                         }, "aria-label": "Like", icon: React.createElement(ThumbUpIcon_1.ThumbUpIcon, null) }),
-                    React.createElement(Button_1.Button, { size: "medium", type: "button", disabled: score === -1, onClick: () => {
+                    React.createElement(Button_1.Button, { size: "medium", type: "button", variant: score === -1 ? 'primary' : 'secondary', tone: score === -1 ? 'danger' : 'default', onClick: () => {
                             setScore(-1);
                         }, "aria-label": "Dislike", icon: React.createElement(ThumbDownIcon_1.ThumbDownIcon, null) }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -97,7 +97,7 @@ function Sentiment({ settings, onSubmit, className }) {
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
-                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "primary", size: "small" }, "Submit"))))));
+                React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));
 }
 exports.Sentiment = Sentiment;
 const SentimentWrapper = styled_components_1.default.div `

package/lib/components/Filter/FilterContent.js

@@ -30,7 +30,7 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
     return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
         react_1.default.createElement(FiltersHeader, null,
             react_1.default.createElement(FiltersTitle, { "data-translation-key": "theme.catalog.filters.title" }, translate('theme.catalog.filters.title', 'Filters')),
-            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
         react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
         react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
 }

package/lib/components/LanguagePicker/LanguagePicker.js

@@ -46,7 +46,7 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   }
 
   --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);
@@ -57,7 +57,6 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --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);
@@ -71,9 +70,13 @@ const LanguageDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).a
   --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);
 `;
 //# sourceMappingURL=LanguagePicker.js.map

package/lib/components/LanguagePicker/variables.js

@@ -17,7 +17,6 @@ exports.languagePicker = (0, styled_components_1.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
 
@@ -28,8 +27,12 @@ exports.languagePicker = (0, styled_components_1.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/lib/components/Markdown/Markdown.js

@@ -122,37 +122,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   }
 
   h1.md {
-    ${(0, theme_helpers_1.typography)('h1', 'h')};
+    ${(0, theme_helpers_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h2.md {
-    ${(0, theme_helpers_1.typography)('h2', 'h')};
+    ${(0, theme_helpers_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h3.md {
-    ${(0, theme_helpers_1.typography)('h3', 'h')};
+    ${(0, theme_helpers_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h4.md {
-    ${(0, theme_helpers_1.typography)('h4', 'h')};
+    ${(0, theme_helpers_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h5.md {
-    ${(0, theme_helpers_1.typography)('h5', 'h')};
+    ${(0, theme_helpers_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }
 
   h6.md {
-    ${(0, theme_helpers_1.typography)('h6', 'h')};
+    ${(0, theme_helpers_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
     ${(0, headingAnchor_1.headingAnchorCss)()};
   }

package/lib/components/Product/ProductPicker.js

@@ -51,7 +51,6 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --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);
@@ -65,9 +64,13 @@ const ProductDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).at
   --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);
 `;
 //# sourceMappingURL=ProductPicker.js.map

package/lib/components/Product/variables.js

@@ -20,7 +20,6 @@ exports.productPicker = (0, styled_components_1.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
 
@@ -31,8 +30,12 @@ exports.productPicker = (0, styled_components_1.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/lib/components/Tooltip/Tooltip.js

@@ -141,8 +141,8 @@ const TooltipBody = styled_components_1.default.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/lib/components/Tooltip/variables.js

@@ -10,6 +10,10 @@ exports.tooltip = (0, styled_components_1.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/lib/components/Typography/H1.js

@@ -13,6 +13,6 @@ exports.H1 = styled_components_1.default.h1.attrs(({ className }) => ({
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
 
-  ${(0, utils_1.typography)('h1', 'h')};
+  ${(0, utils_1.typography)('h1')};
 `;
 //# sourceMappingURL=H1.js.map

package/lib/components/Typography/H2.js

@@ -13,6 +13,6 @@ exports.H2 = styled_components_1.default.h2.attrs(({ className }) => ({
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
 
-  ${(0, utils_1.typography)('h2', 'h')};
+  ${(0, utils_1.typography)('h2')};
 `;
 //# sourceMappingURL=H2.js.map

package/lib/components/Typography/H3.js

@@ -13,6 +13,6 @@ exports.H3 = styled_components_1.default.h3.attrs(({ className }) => ({
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
 
-  ${(0, utils_1.typography)('h3', 'h')};
+  ${(0, utils_1.typography)('h3')};
 `;
 //# sourceMappingURL=H3.js.map

package/lib/components/Typography/H4.js

@@ -13,6 +13,6 @@ exports.H4 = styled_components_1.default.h4.attrs(({ className }) => ({
   color: var(--h4-text-color);
   margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
 
-  ${(0, utils_1.typography)('h4', 'h')};
+  ${(0, utils_1.typography)('h4')};
 `;
 //# sourceMappingURL=H4.js.map

package/lib/components/UserMenu/UserMenu.js

@@ -72,7 +72,6 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --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);
@@ -84,9 +83,13 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --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);
 `;
 //# sourceMappingURL=UserMenu.js.map

package/lib/components/UserMenu/variables.js

@@ -44,7 +44,6 @@ exports.userMenu = (0, styled_components_1.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
 
@@ -55,8 +54,12 @@ exports.userMenu = (0, styled_components_1.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/lib/core/types/catalog.d.ts

@@ -39,5 +39,8 @@ export type CatalogItem = {
     }>;
     scoreCardSlug?: string;
     tags?: unknown[];
+    versions?: CatalogItem[];
+    version?: string;
+    versionFolderId?: string;
     [k: string]: unknown;
 };

package/lib/core/types/hooks.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
@@ -60,6 +60,8 @@ export type ThemeHooks = {
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };
+    useUserTeams: () => string[];
+    usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 export type I18nConfig = {
     currentLocale: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.2-rc.2",
+  "version": "0.82.2-rc.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.82.2-rc.2"
+    "@redocly/config": "0.82.2-rc.3"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Button/Button.tsx

@@ -191,7 +191,11 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
   );
 
   if (props.to) {
-    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <StyledButtonLink to={props.to} onClick={props.onClick}>
+        {button}
+      </StyledButtonLink>
+    );
   } else {
     return button;
   }

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

@@ -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/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/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;
 };

package/src/core/types/hooks.ts

@@ -1,4 +1,4 @@
-import type { ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
@@ -62,6 +62,8 @@ export type ThemeHooks = {
     | undefined;
   useCatalog: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
+  useUserTeams: () => string[];
+  usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 
 export type I18nConfig = {