@redocly/theme 0.65.0-next.5 → 0.66.0-next.0

package/lib/components/Search/SearchDialog.js

@@ -117,6 +117,8 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     (0, react_1.useEffect)(focusSearchInput, []);
     const handleOverlayClick = (0, react_1.useCallback)((event) => {
         var _a;
+        if (event.button !== 0)
+            return;
         const target = event.target;
         if (typeof target.className !== 'string')
             return;
@@ -171,7 +173,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const showAiSearchItem = showAiSearchButton && query;
     const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
     return (react_1.default.createElement(Portal_1.Portal, null,
-        react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
+        react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onPointerDown: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
             react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
                 react_1.default.createElement(SearchDialogHeader, null,
                     product && (react_1.default.createElement(SearchProductTag, { color: "product" },

package/lib/core/styles/palette.dark.js

@@ -225,6 +225,8 @@ function brandPaletteDark(palette) {
         --link-color-primary-legacy: var(--color-blue-7);
         --link-color-primary-hover-legacy: var(--color-blue-8);
         --link-color-visited-legacy: var(--color-purple-8);
+
+        --card-bg-color-hover-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent);
       `;
     }
 }

package/lib/core/styles/palette.js

@@ -232,6 +232,11 @@ function brandPaletteLight(palette) {
 
         --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
         --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
+
+        --card-filled-icon-border-color-hover-legacy: var(--color-blue-6); // @presenter Color
+        --card-icon-color-legacy: var(--color-blue-6); // @presenter Color
+        --card-outlined-border-color-hover-legacy: var(--color-blue-6); // @presenter Color
+        --card-link-icon-color-legacy: var(--color-blue-6); // @presenter Color
       `;
     }
 }

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.create.app.dialog.callbackUrls' | 'dev.create.app.dialog.callbackUrls.placeholder' | 'dev.create.app.dialog.callbackUrls.hint' | 'dev.app.callbackUrls.title' | 'dev.edit.callbackUrls.dialog.title' | 'dev.edit.callbackUrls.dialog.placeholder' | 'dev.edit.callbackUrls.dialog.hint' | 'dev.edit.callbackUrls.dialog.save' | 'dev.edit.callbackUrls.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolCall.executed' | 'search.ai.toolCall.executing' | 'search.ai.toolCall.withArgs' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.notConnected' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.filters.close' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.maxLength' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.languages.moreButton.tooltipText' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'button.copy.tooltipText' | 'button.download.tooltipText' | 'button.externalLink.tooltipText' | 'button.email.tooltipText' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'diagram.openFullscreen' | 'diagram.zoomIn' | 'diagram.zoomOut' | 'diagram.reset' | 'diagram.close' | 'diagram.viewer';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.create.app.dialog.callbackUrls' | 'dev.create.app.dialog.callbackUrls.placeholder' | 'dev.create.app.dialog.callbackUrls.hint' | 'dev.app.callbackUrls.title' | 'dev.edit.callbackUrls.dialog.title' | 'dev.edit.callbackUrls.dialog.placeholder' | 'dev.edit.callbackUrls.dialog.hint' | 'dev.edit.callbackUrls.dialog.save' | 'dev.edit.callbackUrls.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolCall.executed' | 'search.ai.toolCall.executing' | 'search.ai.toolCall.withArgs' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.notConnected' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.filters.close' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.maxLength' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.languages.moreButton.tooltipText' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.implementedBy' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'button.copy.tooltipText' | 'button.download.tooltipText' | 'button.externalLink.tooltipText' | 'button.email.tooltipText' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'diagram.openFullscreen' | 'diagram.zoomIn' | 'diagram.zoomOut' | 'diagram.reset' | 'diagram.close' | 'diagram.viewer';
 export type Locale = {
     code: string;
     name: string;

package/lib/markdoc/components/Cards/Card.js

@@ -10,13 +10,12 @@ const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRight
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
 const Link_1 = require("../../../components/Link/Link");
-function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
+function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', align = 'start', to, children, }) {
     const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
     const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
-    iconVariant = iconVariant !== null && iconVariant !== void 0 ? iconVariant : (variant === 'ghost' ? 'filled' : 'ghost');
     return (react_1.default.createElement(CardWrapper, { as: to ? Link_1.Link : 'div', to: to, "aria-labelledby": cardTitleId, "$variant": variant, "$layout": layout, "$isCardLink": !!to },
         react_1.default.createElement(react_1.default.Fragment, null,
             image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
@@ -25,7 +24,7 @@ function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start'
                 react_1.default.createElement(ContentWrapper, null,
                     react_1.default.createElement(Title, { id: cardTitleId, "$isCardLink": !!to, "$justifyContent": justifyContent },
                         title,
-                        !!to && react_1.default.createElement(CardLinkIcon, null)),
+                        variant == 'ghost' && !!to && react_1.default.createElement(CardLinkIcon, null)),
                     react_1.default.createElement(Body, { "$lineClamp": lineClamp }, children))))));
 }
 const CardContentWrapper = styled_components_1.default.div `
@@ -57,6 +56,7 @@ const Title = styled_components_1.default.h3 `
 const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
+  color: var(--card-link-icon-color);
   margin-left: var(--spacing-xxs);
   opacity: 0;
   transition:
@@ -93,12 +93,10 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
   height: 100%;
   border-radius: var(--card-border-radius);
   overflow: hidden;
-  transition: box-shadow 0.3s ease;
+  transition: var(--card-hover-transition);
   position: relative;
   text-decoration: none;
   --md-paragraph-margin: 0;
-  --link-decoration-hover: none;
-  --link-decoration: none;
 
   background-color: var(--card-bg-color);
   border-width: var(--card-border-width);
@@ -118,6 +116,8 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
 
   &.card-link {
     cursor: var(--card-link-cursor);
+    --link-decoration-hover: none;
+    --link-decoration: none;
 
     &:hover,
     &:focus-within {
@@ -125,6 +125,11 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
       border-color: var(--card-border-color-hover);
       box-shadow: var(--card-box-shadow-hover);
 
+      ${CardIcon_1.CardIconWrapper} {
+        border-color: var(--card-icon-border-color-hover);
+        background-color: var(--card-icon-bg-color-hover);
+      }
+
       svg {
         opacity: 1;
       }

package/lib/markdoc/components/Cards/CardIcon.d.ts

@@ -6,3 +6,7 @@ export type CardIconProps = {
     position?: 'auto' | 'start' | 'center' | 'end';
 };
 export declare function CardIcon({ variant, src, rawContent, position }: CardIconProps): React.JSX.Element;
+export declare const CardIconWrapper: import("styled-components").StyledComponent<"div", any, {
+    $variant?: string;
+    $position?: string;
+}, never>;

package/lib/markdoc/components/Cards/CardIcon.js

@@ -3,18 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardIconWrapper = void 0;
 exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
 function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(CardIconWrapper, { "$variant": variant, "$position": position },
+    return (react_1.default.createElement(exports.CardIconWrapper, { "$variant": variant, "$position": position },
         react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
 }
-const CardIconWrapper = styled_components_1.default.div `
+exports.CardIconWrapper = styled_components_1.default.div `
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
-  --icon-color: var(--card-icon-color);
+  color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -23,11 +24,11 @@ const CardIconWrapper = styled_components_1.default.div `
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  padding: var(--card-icon-padding);
+  border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;
 
   background-color: ${({ $variant }) => $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
-  border: ${({ $variant }) => $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
 `;
 //# sourceMappingURL=CardIcon.js.map

package/lib/markdoc/components/Cards/CardImage.js

@@ -11,9 +11,10 @@ function CardImage({ src, alt, position }) {
 }
 const Image = styled_components_1.default.img `
   width: 100%;
-  height: 100px;
+  aspect-ratio: var(--card-image-aspect-ratio);
   flex-shrink: 0;
   object-fit: cover;
+  border-radius: var(--card-image-border-radius);
 
   order: ${({ $position }) => ($position === 'end' ? 1 : 0)};
 `;

package/lib/markdoc/components/Cards/variables.dark.js

@@ -9,17 +9,16 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
   
   .card-variant-filled {
     --card-bg-color: var(--color-warm-grey-3);
-    --card-bg-color-hover: var(--color-warm-grey-4);
-    --card-border-color: var(--color-warm-grey-4);
-    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-bg-color-hover: var(--color-brand-subtle-bg-hover, var(--card-bg-color-hover-legacy));
+    --card-border-width: 0;
     --card-icon-bg-color: var(--card-bg-color);
+    --card-icon-bg-color-hover: transparent;
   }
 
   .card-variant-outlined {
-    --card-border-color: var(--color-warm-grey-4);
-    --card-border-color-hover: var(--color-warm-grey-5);
+    --card-icon-bg-color: var(--color-warm-grey-3);
   }
-  
+
   .card-variant-elevated {
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;

package/lib/markdoc/components/Cards/variables.js

@@ -9,23 +9,28 @@ exports.cards = (0, styled_components_1.css) `
   /**
    * @tokens Card default colors
    */
-  --card-icon-bg-color: var(--color-warm-grey-1);
+  --card-icon-bg-color: var(--layer-color);
   --card-icon-border-color: var(--border-color-secondary);
   --card-text-color: var(--text-color-secondary);
   --card-title-text-color: var(--h2-text-color);
-  --card-icon-color: var(--card-title-text-color);
+  --card-link-icon-color: var(--color-primary-base, var(--card-link-icon-color-legacy));
+  --card-icon-color: var(--color-primary-base, var(--card-icon-color-legacy));
+  --card-hover-transition: box-shadow 0.3s ease;
 
   /**
    * @tokens Card default values
    */
-  --card-border-radius: var(--border-radius-md);
+  --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
   --card-link-icon-width: var(--h3-font-size);
   --card-link-icon-height: var(--h3-font-size);
   --card-border-width: 1px;
+  --card-image-border-radius: var(--border-radius-md);
+  --card-image-aspect-ratio: 16 / 9;
   --card-icon-border-radius: var(--border-radius-md);
-  --card-icon-padding: var(--spacing-xs);
+  --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
+  --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
@@ -42,17 +47,19 @@ exports.cards = (0, styled_components_1.css) `
    */
   .card-variant-filled {
     --card-bg-color: var(--color-warm-grey-1);
-    --card-bg-color-hover: var(--color-warm-grey-2);
-    --card-border-color: var(--color-warm-grey-2);
-    --card-border-color-hover: var(--color-warm-grey-1);
+    --card-bg-color-hover: var(--color-primary-bg, var(--color-warm-grey-2));
+    --card-border-width: 0;
     --card-icon-bg-color: var(--color-white);
-    --card-icon-border-color: var(--card-border-color);
+    --card-icon-border-color-hover: var(--color-primary-base, var(--card-filled-icon-border-color-hover-legacy));
   }
 
   .card-variant-outlined {
     --card-bg-color: transparent;
-    --card-border-color: var(--color-warm-grey-2);
-    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-border-color: var(--border-color-secondary);
+    --card-border-color-hover: var(--color-primary-base, var(--card-outlined-border-color-hover-legacy));
+    --card-icon-bg-color: var(--color-warm-grey-1);
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
   }
 
   .card-variant-elevated {
@@ -61,11 +68,20 @@ exports.cards = (0, styled_components_1.css) `
     --card-border-color-hover: transparent;
     --card-box-shadow: 0px 8px 24px -4px #232A6114, 0px 6px 12px -6px #232A611F;
     --card-box-shadow-hover: 0px 14px 64px -4px #232A611F, 0px 8px 22px -6px #232A611F;
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
   }
 
   .card-variant-ghost {
     --card-bg-color: transparent;
+    --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
+    --card-border-radius: var(--border-radius-md);
+    --card-padding: var(--spacing-xs) 0;
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
+    --card-box-shadow-hover: 0 0 0 8px var(--layer-color);
+    --card-hover-transition: initial;
   }
 
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.65.0-next.5",
+  "version": "0.66.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.11.0-next.3"
+    "@redocly/realm-asyncapi-sdk": "0.12.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,18 +81,14 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.48.1"
+    "@redocly/config": "0.48.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
     "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "pnpm run clean && pnpm run compile",
-    "test": "vitest run",
-    "test:update": "vitest run --update",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage",
-    "test:coverage:html": "vitest run --coverage --reporter=html"
+    "test": "nx run vitest:test",
+    "build": "pnpm run clean && pnpm run compile"
   }
 }

package/src/components/Search/SearchDialog.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useRef, useState, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 
-import type { JSX, MouseEvent } from 'react';
+import type { JSX, PointerEvent } from 'react';
 import type { SearchFacetCount, SearchItemData } from '@redocly/theme/core/types';
 
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
@@ -129,7 +129,8 @@ export function SearchDialog({
   useEffect(focusSearchInput, []);
 
   const handleOverlayClick = useCallback(
-    (event: MouseEvent<HTMLElement>) => {
+    (event: PointerEvent<HTMLElement>) => {
+      if (event.button !== 0) return;
       const target = event.target as HTMLElement;
       if (typeof target.className !== 'string') return;
       if (target.className?.includes(' overlay')) {
@@ -212,7 +213,7 @@ export function SearchDialog({
       <SearchOverlay
         data-component-name="Search/SearchDialog"
         ref={modalRef}
-        onClick={handleOverlayClick}
+        onPointerDown={handleOverlayClick}
         className={concatClassNames('overlay', className)}
       >
         <SearchDialogWrapper className="scroll-lock" role="dialog">

package/src/core/styles/palette.dark.ts

@@ -223,6 +223,8 @@ function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolati
         --link-color-primary-legacy: var(--color-blue-7);
         --link-color-primary-hover-legacy: var(--color-blue-8);
         --link-color-visited-legacy: var(--color-purple-8);
+
+        --card-bg-color-hover-legacy: color-mix(in srgb, var(--color-warm-grey-4) 40%, transparent);
       `;
   }
 }

package/src/core/styles/palette.ts

@@ -230,6 +230,11 @@ function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolat
 
         --search-ai-gradient-start-color-legacy: #715efe; // @presenter Color
         --search-ai-gradient-end-color-legacy: #ff5cdc; // @presenter Color
+
+        --card-filled-icon-border-color-hover-legacy: var(--color-blue-6); // @presenter Color
+        --card-icon-color-legacy: var(--color-blue-6); // @presenter Color
+        --card-outlined-border-color-hover-legacy: var(--color-blue-6); // @presenter Color
+        --card-link-icon-color-legacy: var(--color-blue-6); // @presenter Color
       `;
   }
 }

package/src/core/types/l10n.ts

@@ -394,6 +394,7 @@ export type TranslationKey =
   | 'graphql.objectScopes'
   | 'graphql.fieldScopes'
   | 'graphql.implementedInterfaces'
+  | 'graphql.implementedBy'
   | 'graphql.nonNull'
   | 'graphql.required'
   | 'graphql.deprecated'

package/src/markdoc/components/Cards/Card.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { CardImage } from '@redocly/theme/markdoc/components/Cards/CardImage';
-import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
+import { CardIcon, CardIconWrapper } from '@redocly/theme/markdoc/components/Cards/CardIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
 export type CardProps = React.PropsWithChildren<{
@@ -31,7 +31,7 @@ export function Card({
   layout = 'vertical',
   variant = 'filled',
   lineClamp,
-  iconVariant,
+  iconVariant = 'filled',
   align = 'start',
   to,
   children,
@@ -42,7 +42,6 @@ export function Card({
     align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
   const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
   const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
-  iconVariant = iconVariant ?? (variant === 'ghost' ? 'filled' : 'ghost');
 
   return (
     <CardWrapper
@@ -72,7 +71,7 @@ export function Card({
           <ContentWrapper>
             <Title id={cardTitleId} $isCardLink={!!to} $justifyContent={justifyContent}>
               {title}
-              {!!to && <CardLinkIcon />}
+              {variant == 'ghost' && !!to && <CardLinkIcon />}
             </Title>
             <Body $lineClamp={lineClamp}>{children}</Body>
           </ContentWrapper>
@@ -119,6 +118,7 @@ const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
 const CardLinkIcon = styled(ChevronRightIcon)`
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
+  color: var(--card-link-icon-color);
   margin-left: var(--spacing-xxs);
   opacity: 0;
   transition:
@@ -165,12 +165,10 @@ const CardWrapper = styled.div.attrs<{
   height: 100%;
   border-radius: var(--card-border-radius);
   overflow: hidden;
-  transition: box-shadow 0.3s ease;
+  transition: var(--card-hover-transition);
   position: relative;
   text-decoration: none;
   --md-paragraph-margin: 0;
-  --link-decoration-hover: none;
-  --link-decoration: none;
 
   background-color: var(--card-bg-color);
   border-width: var(--card-border-width);
@@ -191,6 +189,8 @@ const CardWrapper = styled.div.attrs<{
 
   &.card-link {
     cursor: var(--card-link-cursor);
+    --link-decoration-hover: none;
+    --link-decoration: none;
 
     &:hover,
     &:focus-within {
@@ -198,6 +198,11 @@ const CardWrapper = styled.div.attrs<{
       border-color: var(--card-border-color-hover);
       box-shadow: var(--card-box-shadow-hover);
 
+      ${CardIconWrapper} {
+        border-color: var(--card-icon-border-color-hover);
+        background-color: var(--card-icon-bg-color-hover);
+      }
+
       svg {
         opacity: 1;
       }

package/src/markdoc/components/Cards/CardIcon.tsx

@@ -18,10 +18,10 @@ export function CardIcon({ variant, src, rawContent, position }: CardIconProps)
   );
 }
 
-const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
+export const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
-  --icon-color: var(--card-icon-color);
+  color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -30,12 +30,11 @@ const CardIconWrapper = styled.div<{ $variant?: string; $position?: string }>`
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: ${({ $variant }) => ($variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  padding: var(--card-icon-padding);
+  border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;
 
   background-color: ${({ $variant }) =>
     $variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
-  border: ${({ $variant }) =>
-    $variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
 `;

package/src/markdoc/components/Cards/CardImage.tsx

@@ -13,9 +13,10 @@ export function CardImage({ src, alt, position }: CardImageProps) {
 
 const Image = styled.img<{ $position?: string }>`
   width: 100%;
-  height: 100px;
+  aspect-ratio: var(--card-image-aspect-ratio);
   flex-shrink: 0;
   object-fit: cover;
+  border-radius: var(--card-image-border-radius);
 
   order: ${({ $position }) => ($position === 'end' ? 1 : 0)};
 `;

package/src/markdoc/components/Cards/variables.dark.ts

@@ -7,17 +7,16 @@ export const cardsDarkMode = css`
   
   .card-variant-filled {
     --card-bg-color: var(--color-warm-grey-3);
-    --card-bg-color-hover: var(--color-warm-grey-4);
-    --card-border-color: var(--color-warm-grey-4);
-    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-bg-color-hover: var(--color-brand-subtle-bg-hover, var(--card-bg-color-hover-legacy));
+    --card-border-width: 0;
     --card-icon-bg-color: var(--card-bg-color);
+    --card-icon-bg-color-hover: transparent;
   }
 
   .card-variant-outlined {
-    --card-border-color: var(--color-warm-grey-4);
-    --card-border-color-hover: var(--color-warm-grey-5);
+    --card-icon-bg-color: var(--color-warm-grey-3);
   }
-  
+
   .card-variant-elevated {
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;

package/src/markdoc/components/Cards/variables.ts

@@ -7,23 +7,28 @@ export const cards = css`
   /**
    * @tokens Card default colors
    */
-  --card-icon-bg-color: var(--color-warm-grey-1);
+  --card-icon-bg-color: var(--layer-color);
   --card-icon-border-color: var(--border-color-secondary);
   --card-text-color: var(--text-color-secondary);
   --card-title-text-color: var(--h2-text-color);
-  --card-icon-color: var(--card-title-text-color);
+  --card-link-icon-color: var(--color-primary-base, var(--card-link-icon-color-legacy));
+  --card-icon-color: var(--color-primary-base, var(--card-icon-color-legacy));
+  --card-hover-transition: box-shadow 0.3s ease;
 
   /**
    * @tokens Card default values
    */
-  --card-border-radius: var(--border-radius-md);
+  --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
   --card-link-icon-width: var(--h3-font-size);
   --card-link-icon-height: var(--h3-font-size);
   --card-border-width: 1px;
+  --card-image-border-radius: var(--border-radius-md);
+  --card-image-aspect-ratio: 16 / 9;
   --card-icon-border-radius: var(--border-radius-md);
-  --card-icon-padding: var(--spacing-xs);
+  --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
+  --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
@@ -40,17 +45,19 @@ export const cards = css`
    */
   .card-variant-filled {
     --card-bg-color: var(--color-warm-grey-1);
-    --card-bg-color-hover: var(--color-warm-grey-2);
-    --card-border-color: var(--color-warm-grey-2);
-    --card-border-color-hover: var(--color-warm-grey-1);
+    --card-bg-color-hover: var(--color-primary-bg, var(--color-warm-grey-2));
+    --card-border-width: 0;
     --card-icon-bg-color: var(--color-white);
-    --card-icon-border-color: var(--card-border-color);
+    --card-icon-border-color-hover: var(--color-primary-base, var(--card-filled-icon-border-color-hover-legacy));
   }
 
   .card-variant-outlined {
     --card-bg-color: transparent;
-    --card-border-color: var(--color-warm-grey-2);
-    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-border-color: var(--border-color-secondary);
+    --card-border-color-hover: var(--color-primary-base, var(--card-outlined-border-color-hover-legacy));
+    --card-icon-bg-color: var(--color-warm-grey-1);
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
   }
 
   .card-variant-elevated {
@@ -59,11 +66,20 @@ export const cards = css`
     --card-border-color-hover: transparent;
     --card-box-shadow: 0px 8px 24px -4px #232A6114, 0px 6px 12px -6px #232A611F;
     --card-box-shadow-hover: 0px 14px 64px -4px #232A611F, 0px 8px 22px -6px #232A611F;
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
   }
 
   .card-variant-ghost {
     --card-bg-color: transparent;
+    --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
+    --card-border-radius: var(--border-radius-md);
+    --card-padding: var(--spacing-xs) 0;
+    --card-icon-border-color-hover: var(--card-icon-border-color);
+    --card-icon-bg-color-hover: var(--card-icon-bg-color);
+    --card-box-shadow-hover: 0 0 0 8px var(--layer-color);
+    --card-hover-transition: initial;
   }
 
 `;