@redocly/theme 0.65.0-next.0 → 0.65.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/Button/variables.js +3 -3
- package/lib/components/CodeBlock/CodeBlockContainer.js +12 -7
- package/lib/components/CodeBlock/variables.dark.d.ts +1 -0
- package/lib/components/CodeBlock/variables.dark.js +8 -0
- package/lib/components/CodeBlock/variables.js +3 -1
- package/lib/components/Menu/MenuItem.js +15 -26
- package/lib/components/Menu/variables.dark.js +2 -0
- package/lib/components/Menu/variables.js +3 -1
- package/lib/components/PageNavigation/NavigationButton.js +19 -11
- package/lib/components/PageNavigation/PageNavigation.js +6 -0
- package/lib/components/PageNavigation/variables.d.ts +1 -0
- package/lib/components/PageNavigation/variables.js +27 -0
- package/lib/components/Search/variables.js +2 -2
- package/lib/core/hooks/use-modal-scroll-lock.js +21 -10
- package/lib/core/hooks/use-page-actions.js +43 -24
- package/lib/core/styles/dark.js +2 -0
- package/lib/core/styles/global.js +9 -5
- package/lib/core/styles/palette.dark.js +2 -0
- package/lib/core/styles/palette.js +16 -0
- package/lib/core/types/catalog.d.ts +1 -1
- package/lib/core/types/l10n.d.ts +1 -1
- package/lib/icons/LinkIcon/LinkIcon.js +6 -6
- package/lib/markdoc/components/Heading/Heading.js +7 -1
- package/package.json +3 -3
- package/src/components/Button/variables.ts +3 -3
- package/src/components/CodeBlock/CodeBlockContainer.tsx +12 -7
- package/src/components/CodeBlock/variables.dark.ts +5 -0
- package/src/components/CodeBlock/variables.ts +3 -1
- package/src/components/Menu/MenuItem.tsx +15 -26
- package/src/components/Menu/variables.dark.ts +2 -0
- package/src/components/Menu/variables.ts +3 -1
- package/src/components/PageNavigation/NavigationButton.tsx +24 -22
- package/src/components/PageNavigation/PageNavigation.tsx +6 -0
- package/src/components/PageNavigation/variables.ts +24 -0
- package/src/components/Search/variables.ts +2 -2
- package/src/core/hooks/use-modal-scroll-lock.ts +30 -14
- package/src/core/hooks/use-page-actions.ts +70 -33
- package/src/core/styles/dark.ts +2 -0
- package/src/core/styles/global.ts +9 -5
- package/src/core/styles/palette.dark.ts +2 -0
- package/src/core/styles/palette.ts +16 -0
- package/src/core/types/catalog.ts +1 -1
- package/src/core/types/l10n.ts +9 -0
- package/src/icons/LinkIcon/LinkIcon.tsx +19 -6
- package/src/markdoc/components/Heading/Heading.tsx +7 -1
package/lib/core/types/l10n.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TOptions } from 'i18next';
|
|
2
|
-
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.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';
|
|
2
|
+
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';
|
|
3
3
|
export type Locale = {
|
|
4
4
|
code: string;
|
|
5
5
|
name: string;
|
|
@@ -7,17 +7,17 @@ exports.LinkIcon = void 0;
|
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
9
|
const utils_1 = require("../../core/utils");
|
|
10
|
-
const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0
|
|
11
|
-
react_1.default.createElement("path", { d: "
|
|
12
|
-
react_1.default.createElement("path", { d: "
|
|
10
|
+
const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
11
|
+
react_1.default.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z", fill: "var(--layer-color)" }),
|
|
12
|
+
react_1.default.createElement("path", { d: "M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z", fill: "var(--icon-color-primary)" })));
|
|
13
13
|
exports.LinkIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
|
|
14
14
|
'data-component-name': 'icons/LinkIcon/LinkIcon',
|
|
15
15
|
})) `
|
|
16
|
-
path {
|
|
16
|
+
path:last-of-type {
|
|
17
17
|
fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
height: ${({ size }) => size || '
|
|
21
|
-
width: ${({ size }) => size || '
|
|
20
|
+
height: ${({ size }) => size || '20px'};
|
|
21
|
+
width: ${({ size }) => size || '20px'};
|
|
22
22
|
`;
|
|
23
23
|
//# sourceMappingURL=LinkIcon.js.map
|
|
@@ -76,7 +76,7 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
|
|
|
76
76
|
const pageProps = usePageProps();
|
|
77
77
|
const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
|
|
78
78
|
const linkEl = (react_1.default.createElement("a", { "aria-label": `link to ${id}`, href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
|
|
79
|
-
react_1.default.createElement(LinkIcon_1.LinkIcon, {
|
|
79
|
+
react_1.default.createElement(LinkIcon_1.LinkIcon, { color: "--heading-anchor-color" })));
|
|
80
80
|
return (0, react_1.createElement)(`h${level}`, {
|
|
81
81
|
id,
|
|
82
82
|
className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName, className),
|
|
@@ -92,6 +92,12 @@ const HeadingContentWrapper = styled_components_1.default.div `
|
|
|
92
92
|
display: flex;
|
|
93
93
|
gap: var(--spacing-xs);
|
|
94
94
|
|
|
95
|
+
& > .anchor {
|
|
96
|
+
display: flex;
|
|
97
|
+
align-items: center;
|
|
98
|
+
height: 1lh;
|
|
99
|
+
}
|
|
100
|
+
|
|
95
101
|
& > span {
|
|
96
102
|
display: flex;
|
|
97
103
|
align-items: flex-start;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@redocly/theme",
|
|
3
|
-
"version": "0.65.0-next.
|
|
3
|
+
"version": "0.65.0-next.2",
|
|
4
4
|
"description": "Shared UI components lib",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"theme",
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"vitest": "4.0.10",
|
|
64
64
|
"vitest-when": "0.6.2",
|
|
65
65
|
"webpack": "5.105.2",
|
|
66
|
-
"@redocly/realm-asyncapi-sdk": "0.11.0-next.
|
|
66
|
+
"@redocly/realm-asyncapi-sdk": "0.11.0-next.2"
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
69
|
"@tanstack/react-query": "5.62.3",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"openapi-sampler": "^1.7.2",
|
|
82
82
|
"react-calendar": "5.1.0",
|
|
83
83
|
"react-date-picker": "11.0.0",
|
|
84
|
-
"@redocly/config": "0.48.
|
|
84
|
+
"@redocly/config": "0.48.1"
|
|
85
85
|
},
|
|
86
86
|
"scripts": {
|
|
87
87
|
"watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
|
|
@@ -47,9 +47,9 @@ export const button = css`
|
|
|
47
47
|
--button-content-color-custom-hover: var(--color-warm-grey-11); // @presenter Color
|
|
48
48
|
--button-bg-color-custom: var(--color-white); // @presenter Color
|
|
49
49
|
|
|
50
|
-
--button-content-color-link: var(--
|
|
51
|
-
--button-content-color-link-hover: var(--
|
|
52
|
-
--button-content-color-link-pressed: var(--
|
|
50
|
+
--button-content-color-link: var(--color-primary-base, var(--button-content-color-link-legacy));
|
|
51
|
+
--button-content-color-link-hover: var(--color-primary-active, var(--button-content-color-link-hover-legacy));
|
|
52
|
+
--button-content-color-link-pressed: var(--color-primary-base, var(--button-content-color-link-pressed-legacy));
|
|
53
53
|
|
|
54
54
|
/**
|
|
55
55
|
* @tokens Button default values
|
|
@@ -47,18 +47,21 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.highlighted {
|
|
50
|
-
background: var(--
|
|
50
|
+
background: var(--code-block-highlighted-bg-color);
|
|
51
51
|
margin-left: calc(var(--spacing-sm) * -1);
|
|
52
52
|
padding-left: var(--spacing-sm);
|
|
53
53
|
width: calc(100% + var(--spacing-sm));
|
|
54
54
|
display: inline-block;
|
|
55
|
+
border-left: var(--code-block-highlighted-border-left);
|
|
55
56
|
|
|
56
57
|
&.error {
|
|
57
|
-
background: var(--color-
|
|
58
|
+
background: var(--color-error-bg);
|
|
59
|
+
border-left: 1px solid var(--color-error-base);
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
&.warning {
|
|
61
|
-
background: var(--color-
|
|
63
|
+
background: var(--color-warning-bg);
|
|
64
|
+
border-left: 1px solid var(--color-warning-base);
|
|
62
65
|
}
|
|
63
66
|
}
|
|
64
67
|
|
|
@@ -97,18 +100,20 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
|
|
|
97
100
|
display: inline-block;
|
|
98
101
|
|
|
99
102
|
&.add {
|
|
100
|
-
background: var(--color-
|
|
103
|
+
background: var(--color-success-bg);
|
|
104
|
+
border-left: 1px solid var(--color-success-base);
|
|
101
105
|
&:before {
|
|
102
106
|
content: attr(data-line-number) ' +';
|
|
103
|
-
color: var(--color-
|
|
107
|
+
color: var(--color-success-active);
|
|
104
108
|
}
|
|
105
109
|
}
|
|
106
110
|
&.remove {
|
|
107
|
-
background: var(--color-
|
|
111
|
+
background: var(--color-error-bg);
|
|
112
|
+
border-left: 1px solid var(--color-error-base);
|
|
108
113
|
|
|
109
114
|
&:before {
|
|
110
115
|
content: attr(data-line-number) ' -';
|
|
111
|
-
color: var(--color-
|
|
116
|
+
color: var(--color-error-active);
|
|
112
117
|
}
|
|
113
118
|
}
|
|
114
119
|
}
|
|
@@ -60,6 +60,8 @@ export const code = css`
|
|
|
60
60
|
--code-block-margin: 0;
|
|
61
61
|
--code-block-max-height: calc(100vh - 300px); // Where 300 is combined value of navbar, code block heading, controls height and paddings
|
|
62
62
|
--code-block-word-break: initial;
|
|
63
|
+
--code-block-highlighted-border-left: 1px solid var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
|
|
64
|
+
--code-block-highlighted-bg-color: var(--color-primary-bg, var(--code-block-highlighted-bg-color-legacy)); // @presenter Color
|
|
63
65
|
|
|
64
66
|
/**
|
|
65
67
|
* @tokens Code Block controls
|
|
@@ -91,7 +93,7 @@ export const code = css`
|
|
|
91
93
|
--code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
92
94
|
--code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
|
|
93
95
|
--code-block-tokens-boolean-color: var(--color-green-7); // @presenter Color
|
|
94
|
-
--code-block-tokens-string-color: var(--color-
|
|
96
|
+
--code-block-tokens-string-color: var(--color-primary-active, var(--code-block-tokens-string-color-legacy)); // @presenter Color
|
|
95
97
|
--code-block-tokens-property-string-color: var(--color-blue-7); // @presenter Color
|
|
96
98
|
--code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
97
99
|
--code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
|
|
@@ -256,7 +256,7 @@ const MenuItemNestedWrapper = styled.div<{
|
|
|
256
256
|
(var(--menu-item-label-chevron-size) / 2 - 1px) +
|
|
257
257
|
var(--menu-item-nested-offset) * ${depth})
|
|
258
258
|
`};
|
|
259
|
-
border: 0.5px solid var(--border-color-
|
|
259
|
+
border: 0.5px solid var(--menu-item-border-color-hover);
|
|
260
260
|
}
|
|
261
261
|
`;
|
|
262
262
|
|
|
@@ -286,6 +286,18 @@ const MenuItemLabelWrapper = styled.li<{
|
|
|
286
286
|
${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
|
|
287
287
|
)`};
|
|
288
288
|
|
|
289
|
+
&:hover {
|
|
290
|
+
color: var(--menu-item-color-hover);
|
|
291
|
+
background: var(--menu-item-bg-color-hover);
|
|
292
|
+
|
|
293
|
+
${ChevronDownIcon} path {
|
|
294
|
+
fill: var(--menu-item-color-hover);
|
|
295
|
+
}
|
|
296
|
+
${ChevronRightIcon} path {
|
|
297
|
+
fill: var(--menu-item-color-hover);
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
|
|
289
301
|
${({ active, deprecated }) =>
|
|
290
302
|
active &&
|
|
291
303
|
css`
|
|
@@ -301,7 +313,8 @@ const MenuItemLabelWrapper = styled.li<{
|
|
|
301
313
|
}
|
|
302
314
|
|
|
303
315
|
&:hover {
|
|
304
|
-
|
|
316
|
+
color: var(--menu-item-color-active-hover);
|
|
317
|
+
background: var(--menu-item-bg-color-active-hover);
|
|
305
318
|
}
|
|
306
319
|
`};
|
|
307
320
|
|
|
@@ -315,30 +328,6 @@ const MenuItemLabelWrapper = styled.li<{
|
|
|
315
328
|
}
|
|
316
329
|
`};
|
|
317
330
|
|
|
318
|
-
&:hover {
|
|
319
|
-
color: var(--menu-item-color-hover);
|
|
320
|
-
background: var(--menu-item-bg-color-hover);
|
|
321
|
-
|
|
322
|
-
${ChevronDownIcon} path {
|
|
323
|
-
fill: var(--menu-item-color-hover);
|
|
324
|
-
}
|
|
325
|
-
${ChevronRightIcon} path {
|
|
326
|
-
fill: var(--menu-item-color-hover);
|
|
327
|
-
}
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
&:active {
|
|
331
|
-
color: var(--menu-item-color-active);
|
|
332
|
-
background: var(--menu-item-bg-color-active);
|
|
333
|
-
|
|
334
|
-
${ChevronDownIcon} path {
|
|
335
|
-
fill: var(--menu-item-color-active);
|
|
336
|
-
}
|
|
337
|
-
${ChevronRightIcon} path {
|
|
338
|
-
fill: var(--menu-item-color-active);
|
|
339
|
-
}
|
|
340
|
-
}
|
|
341
|
-
|
|
342
331
|
&:empty {
|
|
343
332
|
padding: 0;
|
|
344
333
|
}
|
|
@@ -7,4 +7,6 @@ export const menuDarkMode = css`
|
|
|
7
7
|
--menu-content-color-disabled: var(--text-color-disabled); // @presenter Color
|
|
8
8
|
|
|
9
9
|
--menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
|
|
10
|
+
|
|
11
|
+
--menu-item-border-color-hover: color-mix(in srgb, var(--color-black) 8%, transparent); // @presenter Color
|
|
10
12
|
`;
|
|
@@ -33,7 +33,9 @@ export const menu = css`
|
|
|
33
33
|
|
|
34
34
|
--menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
|
|
35
35
|
--menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
|
|
36
|
-
|
|
36
|
+
--menu-item-color-active-hover: var(--color-primary-text, var(--menu-item-color-active-hover-legacy)); // @presenter Color
|
|
37
|
+
--menu-item-bg-color-active-hover: var(--color-primary-bg, var(--menu-item-bg-color-active-hover-legacy)); // @presenter Color
|
|
38
|
+
--menu-item-border-color-hover: color-mix(in srgb, var(--color-warm-grey-11) 6%, transparent); // @presenter Color
|
|
37
39
|
/**
|
|
38
40
|
* @tokens Menu item spacing
|
|
39
41
|
* @presenter Spacing
|
|
@@ -4,8 +4,8 @@ import styled from 'styled-components';
|
|
|
4
4
|
import type { JSX } from 'react';
|
|
5
5
|
|
|
6
6
|
import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
|
|
7
|
-
import { Button } from '@redocly/theme/components/Button/Button';
|
|
8
7
|
import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
|
|
8
|
+
import { Button } from '@redocly/theme/components/Button/Button';
|
|
9
9
|
|
|
10
10
|
type NavigationButtonPosition = 'left' | 'right';
|
|
11
11
|
|
|
@@ -34,35 +34,37 @@ export function NavigationButton({
|
|
|
34
34
|
data-translation-key={translationKey}
|
|
35
35
|
position={position}
|
|
36
36
|
>
|
|
37
|
-
<
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
extraClass={className}
|
|
42
|
-
variant="link"
|
|
43
|
-
icon={icon}
|
|
44
|
-
iconPosition={position}
|
|
45
|
-
>
|
|
46
|
-
{label}
|
|
47
|
-
</StyledNavigationButton>
|
|
37
|
+
<PageNavigationTitle>{label}</PageNavigationTitle>
|
|
38
|
+
<Button to={link} extraClass={className} variant="link" icon={icon} iconPosition={position}>
|
|
39
|
+
{text}
|
|
40
|
+
</Button>
|
|
48
41
|
</NavigationButtonWrapper>
|
|
49
42
|
);
|
|
50
43
|
}
|
|
51
44
|
|
|
52
|
-
const NavigationButtonWrapper = styled.div<{
|
|
45
|
+
const NavigationButtonWrapper = styled.div<{
|
|
46
|
+
position: NavigationButtonPosition;
|
|
47
|
+
}>`
|
|
53
48
|
display: flex;
|
|
54
49
|
flex-direction: column;
|
|
50
|
+
width: var(--page-navigation-button-width);
|
|
55
51
|
text-align: ${({ position }) => position};
|
|
56
|
-
|
|
52
|
+
padding: var(--page-navigation-button-padding);
|
|
53
|
+
gap: var(--page-navigation-button-gap);
|
|
54
|
+
border: var(--page-navigation-button-border);
|
|
55
|
+
border-radius: var(--page-navigation-button-border-radius);
|
|
56
|
+
min-width: var(--page-navigation-button-min-width);
|
|
57
57
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
padding-right: 0;
|
|
58
|
+
&:hover {
|
|
59
|
+
border: var(--page-navigation-button-border-hover);
|
|
60
|
+
}
|
|
62
61
|
`;
|
|
63
62
|
|
|
64
|
-
const
|
|
65
|
-
font-size: var(--font-size
|
|
66
|
-
|
|
67
|
-
|
|
63
|
+
const PageNavigationTitle = styled.p`
|
|
64
|
+
font-size: var(--page-navigation-button-title-font-size);
|
|
65
|
+
font-weight: var(--page-navigation-button-title-font-weight);
|
|
66
|
+
line-height: var(--page-navigation-button-title-line-height);
|
|
67
|
+
color: var(--page-navigation-button-title-color);
|
|
68
|
+
text-wrap: wrap;
|
|
69
|
+
margin: 0;
|
|
68
70
|
`;
|
|
@@ -4,6 +4,7 @@ import styled from 'styled-components';
|
|
|
4
4
|
import type { JSX } from 'react';
|
|
5
5
|
import type { ResolvedNavItemWithLink } from '@redocly/config';
|
|
6
6
|
|
|
7
|
+
import { breakpoints } from '@redocly/theme/core/utils';
|
|
7
8
|
import { useThemeConfig } from '@redocly/theme/core/hooks';
|
|
8
9
|
import { NextButton } from '@redocly/theme/components/PageNavigation/NextButton';
|
|
9
10
|
import { PreviousButton } from '@redocly/theme/components/PageNavigation/PreviousButton';
|
|
@@ -41,8 +42,13 @@ const PageNavigationWrapper = styled.div`
|
|
|
41
42
|
justify-content: space-between;
|
|
42
43
|
margin: 25px 0;
|
|
43
44
|
width: 100%;
|
|
45
|
+
gap: var(--page-navigations-wrapper-gap);
|
|
44
46
|
|
|
45
47
|
@media print {
|
|
46
48
|
display: none;
|
|
47
49
|
}
|
|
50
|
+
|
|
51
|
+
@media screen and (max-width: ${breakpoints.small}) {
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
}
|
|
48
54
|
`;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { css } from 'styled-components';
|
|
2
|
+
|
|
3
|
+
export const pageNavigation = css`
|
|
4
|
+
/**
|
|
5
|
+
* @tokens Page Navigation
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
--page-navigations-wrapper-gap: var(--spacing-base); // @presenter Spacing
|
|
9
|
+
|
|
10
|
+
--page-navigation-button-width: var(--container-max-width); // @presenter Width
|
|
11
|
+
--page-navigation-button-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
|
|
12
|
+
--page-navigation-button-title-font-size: var(--font-size-lg); // @presenter FontSize
|
|
13
|
+
--page-navigation-button-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
|
|
14
|
+
--page-navigation-button-title-line-height: var(--line-height-lg); // @presenter LineHeight
|
|
15
|
+
--page-navigation-button-title-color: var(--text-color-primary); // @presenter Color
|
|
16
|
+
--page-navigation-button-gap: var(--spacing-xxs); // @presenter Spacing
|
|
17
|
+
--page-navigation-button-border-radius: var(--border-radius-xl); // @presenter BorderRadius
|
|
18
|
+
--page-navigation-button-border-color: var(--border-color-secondary); // @presenter Color
|
|
19
|
+
--page-navigation-button-border: var(--border-width) var(--border-style) var(--page-navigation-button-border-color); // @presenter Border
|
|
20
|
+
--page-navigation-button-border-color-hover: var(--color-primary-base, var(--color-warm-grey-11)); // @presenter Color
|
|
21
|
+
--page-navigation-button-border-hover: var(--border-width) var(--border-style) var(--page-navigation-button-border-color-hover); // @presenter Border
|
|
22
|
+
--page-navigation-button-min-width: 220px; // @presenter Width
|
|
23
|
+
// @tokens End
|
|
24
|
+
`;
|
|
@@ -164,7 +164,7 @@ export const search = css`
|
|
|
164
164
|
--search-ai-text-line-height: var(--line-height-lg);
|
|
165
165
|
--search-ai-thinking-text-margin: var(--md-pre-margin) 0;
|
|
166
166
|
|
|
167
|
-
--search-ai-user-bg-color: var(--color-
|
|
167
|
+
--search-ai-user-bg-color: var(--color-primary-base, var(--search-ai-user-bg-color-legacy));
|
|
168
168
|
--search-ai-user-text-color: var(--color-static-white);
|
|
169
169
|
--search-ai-assistant-bg-color: var(--layer-color);
|
|
170
170
|
--search-ai-assistant-text-color: var(--text-color-primary);
|
|
@@ -247,7 +247,7 @@ export const search = css`
|
|
|
247
247
|
--search-ai-conversation-input-border-radius: var(--border-radius-lg);
|
|
248
248
|
--search-ai-conversation-input-font-size: var(--font-size-base);
|
|
249
249
|
--search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
|
|
250
|
-
--search-ai-conversation-input-border-color-focus: var(--color-
|
|
250
|
+
--search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
|
|
251
251
|
--search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
|
|
252
252
|
|
|
253
253
|
--search-ai-conversation-input-send-button-right: 12px;
|
|
@@ -1,40 +1,56 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
1
|
+
import { useEffect, useRef } from 'react';
|
|
2
2
|
|
|
3
3
|
export function useModalScrollLock(isOpen: boolean): void {
|
|
4
|
+
const originalBodyStylesRef = useRef<{
|
|
5
|
+
overflow: string;
|
|
6
|
+
paddingRight: string;
|
|
7
|
+
scrollbarWidth: string | null;
|
|
8
|
+
} | null>(null);
|
|
9
|
+
|
|
4
10
|
useEffect(() => {
|
|
5
11
|
if (typeof window === 'undefined' || typeof document === 'undefined') {
|
|
6
12
|
return;
|
|
7
13
|
}
|
|
8
14
|
|
|
9
15
|
const { body, documentElement } = document;
|
|
10
|
-
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
body.style.overflow =
|
|
17
|
-
body.style.paddingRight =
|
|
18
|
-
if (
|
|
19
|
-
documentElement.style.setProperty('--modal-scrollbar-width',
|
|
16
|
+
|
|
17
|
+
const restoreOriginalBodyStyles = () => {
|
|
18
|
+
if (!originalBodyStylesRef.current) return;
|
|
19
|
+
|
|
20
|
+
const { overflow, paddingRight, scrollbarWidth } = originalBodyStylesRef.current;
|
|
21
|
+
|
|
22
|
+
body.style.overflow = overflow;
|
|
23
|
+
body.style.paddingRight = paddingRight;
|
|
24
|
+
if (scrollbarWidth) {
|
|
25
|
+
documentElement.style.setProperty('--modal-scrollbar-width', scrollbarWidth);
|
|
20
26
|
} else {
|
|
21
27
|
documentElement.style.removeProperty('--modal-scrollbar-width');
|
|
22
28
|
}
|
|
29
|
+
|
|
30
|
+
originalBodyStylesRef.current = null;
|
|
23
31
|
};
|
|
24
32
|
|
|
25
|
-
if (isOpen) {
|
|
26
|
-
|
|
33
|
+
if (isOpen && !originalBodyStylesRef.current) {
|
|
34
|
+
originalBodyStylesRef.current = {
|
|
35
|
+
overflow: body.style.overflow,
|
|
36
|
+
paddingRight: body.style.paddingRight,
|
|
37
|
+
scrollbarWidth: documentElement.style.getPropertyValue('--modal-scrollbar-width') || null,
|
|
38
|
+
};
|
|
27
39
|
|
|
40
|
+
const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
|
|
28
41
|
body.style.overflow = 'hidden';
|
|
29
42
|
|
|
30
43
|
if (scrollbarWidth > 0) {
|
|
31
44
|
body.style.paddingRight = `${scrollbarWidth}px`;
|
|
32
45
|
documentElement.style.setProperty('--modal-scrollbar-width', `${scrollbarWidth}px`);
|
|
33
46
|
}
|
|
47
|
+
} else if (!isOpen && originalBodyStylesRef.current) {
|
|
48
|
+
restoreOriginalBodyStyles();
|
|
34
49
|
}
|
|
35
50
|
|
|
51
|
+
// Cleanup only if component unmounts while modal is open
|
|
36
52
|
return () => {
|
|
37
|
-
|
|
53
|
+
restoreOriginalBodyStyles();
|
|
38
54
|
};
|
|
39
55
|
}, [isOpen]);
|
|
40
56
|
}
|