@redocly/theme 0.82.2-rc.2 → 0.82.4-rc.1

package/src/components/Select/Select.tsx

@@ -6,7 +6,7 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 import { CheckmarkIcon } from '@redocly/theme/icons/CheckmarkIcon/CheckmarkIcon';
 
-export interface SelectProps<T = any> {
+export type SelectProps<T = any> = {
   value: T;
   options: {
     element: React.ReactNode | JSX.Element | string;
@@ -25,9 +25,9 @@ export interface SelectProps<T = any> {
   placeholder?: string;
   disabled?: boolean;
   renderInput?: (props: { isOpen: boolean }) => React.ReactElement;
-}
+};
 
-export function Select<T>(props: SelectProps<T>) {
+export function Select<T>(props: SelectProps<T>): JSX.Element {
   const {
     className,
     value,

package/src/components/Sidebar/Sidebar.tsx

@@ -7,7 +7,7 @@ import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeConfig, useMobileMenu } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 
-type SidebarProps = {
+export type SidebarProps = {
   versions?: React.ReactNode;
   menu?: React.ReactNode;
   backLink?: {

package/src/components/SidebarActions/ChangeViewButton.tsx

@@ -9,11 +9,11 @@ import {
 } from '@redocly/theme/components/SidebarActions/styled';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
-interface ChangeViewButtonProps {
+export type ChangeViewButtonProps = {
   layout: LayoutVariant;
   collapsedSidebar: boolean;
   onClick: () => void;
-}
+};
 
 export const ChangeViewButton = ({
   layout,

package/src/components/SidebarActions/SidebarActions.tsx

@@ -13,7 +13,7 @@ import {
 
 export { LayoutVariant };
 
-interface SidebarActionsProps {
+export type SidebarActionsProps = {
   layout: LayoutVariant;
   collapsedSidebar: boolean;
   isOpenapiDocs: boolean;
@@ -22,7 +22,7 @@ interface SidebarActionsProps {
   onChangeCollapseSidebarClick: () => void;
   requestAccessButton?: React.ReactElement | null;
   className?: string;
-}
+};
 
 export const SidebarActions = ({
   layout,

package/src/components/SidebarLogo/SidebarLogo.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export interface LogoProps {
+export type SidebarLogoProps = {
   imageUrl?: string;
   href?: string;
   altText?: string;
   dataTestId?: string;
   backgroundColor?: string;
   className?: string;
-}
+};
 
 export function SidebarLogo({
   imageUrl,
@@ -17,7 +17,7 @@ export function SidebarLogo({
   backgroundColor,
   dataTestId,
   className,
-}: LogoProps = {}): JSX.Element | null {
+}: SidebarLogoProps = {}): JSX.Element | null {
   if (!imageUrl) {
     return null;
   }

package/src/components/TableOfContent/TableOfContent.tsx

@@ -16,7 +16,7 @@ import {
   getLeastDepth,
 } from '@redocly/theme/core/utils';
 
-type TableOfContentProps = {
+export type TableOfContentProps = {
   headings?: Array<MdHeading | null> | null | undefined;
   contentWrapper: HTMLDivElement | null;
   className?: string;

package/src/components/Tag/Tag.tsx

@@ -19,7 +19,7 @@ type Color =
   | 'geekblue'
   | 'yellow';
 
-type TagProps = {
+export type TagProps = {
   className?: string;
   children?: React.ReactNode;
   closable?: boolean;

package/src/components/Tooltip/Tooltip.tsx

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

package/src/components/Tooltip/variables.ts

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

package/src/components/Typography/H1.ts

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

package/src/components/Typography/H2.ts

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

package/src/components/Typography/H3.ts

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

package/src/components/Typography/H4.ts

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

package/src/components/UserMenu/UserAvatar.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
 
-type UserAvatarProps = {
+export type UserAvatarProps = {
   picture?: string;
   className?: string;
   height?: `var(${string})` | `${number}px`;

package/src/components/UserMenu/UserInfoMenuItem.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 
-type UserInfoMenuItemProps = {
+export type UserInfoMenuItemProps = {
   name: string;
   email?: string;
   picture?: string;

package/src/components/UserMenu/UserMenu.tsx

@@ -13,7 +13,7 @@ import { UserInfoMenuItem } from '@redocly/theme/components/UserMenu/UserInfoMen
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
 
-type UserMenuProps = {
+export type UserMenuProps = {
   className?: string;
 };
 
@@ -111,7 +111,6 @@ const StyledDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-padding: var(--user-menu-dropdown-padding);
   --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--user-menu-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
   --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
@@ -123,8 +122,12 @@ const StyledDropdown = styled(Dropdown).attrs(() => ({
   --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --user-menu-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
 `;

package/src/components/UserMenu/UserMenuMobile.tsx

@@ -6,7 +6,7 @@ import { UserAvatar } from '@redocly/theme/components/UserMenu/UserAvatar';
 import { LogoutMenuItem } from '@redocly/theme/components/UserMenu/LogoutMenuItem';
 import { LoginButton } from '@redocly/theme/components/UserMenu/LoginButton';
 
-type UserMenuMobileProps = {
+export type UserMenuMobileProps = {
   className?: string;
 };
 

package/src/components/UserMenu/variables.ts

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

package/src/core/types/catalog.ts

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

package/src/core/types/hooks.ts

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

package/src/layouts/DocumentationLayout.tsx

@@ -63,6 +63,13 @@ const LayoutWrapper = styled.div.attrs(({ className }) => ({
 `;
 
 const ContentWrapper = styled.section<{ withToc: boolean }>`
+  --md-content-font-size: var(--font-size-lg);
+  --md-content-line-height: var(--line-height-lg);
+  --md-table-font-size: var(--md-content-font-size);
+  --md-table-line-height: var(--md-content-line-height);
+  --md-tabs-content-font-size: var(--md-content-font-size);
+  --md-tabs-content-line-height: var(--md-content-line-height);
+
   max-width: var(--md-content-max-width);
   width: 90%;
   margin: 0 auto;

package/src/layouts/NotFound.tsx

@@ -10,7 +10,7 @@ export function NotFound(): JSX.Element {
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Pages/NotFound">
+    <NotFoundWrapper data-component-name="Pages/NotFound">
       <StatusText>404</StatusText>
       <Title data-translation-key="theme.page.notFound.title">
         {translate('theme.page.notFound.title', 'Something went missing...')}
@@ -30,11 +30,11 @@ export function NotFound(): JSX.Element {
       >
         {translate('theme.page.homeButton', 'Go home')}
       </Button>
-    </Wrapper>
+    </NotFoundWrapper>
   );
 }
 
-const Wrapper = styled.div`
+const NotFoundWrapper = styled.div`
   height: 100%;
   max-width: var(--page-404-max-width);
   display: flex;

package/src/layouts/RootLayout.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import { Navbar } from '@redocly/theme/components/Navbar/Navbar';
 import { Footer } from '@redocly/theme/components/Footer/Footer';
 
-interface LayoutConfig {
+export type LayoutConfig = {
   children: React.ReactNode;
-}
+};
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
   return (

package/src/markdoc/components/InlineSvg/InlineSvg.tsx

@@ -1,8 +1,15 @@
 import * as React from 'react';
 
-export function InlineSvg({ fileRawContent }: { fileRawContent: string }) {
+export function InlineSvg({
+  fileRawContent,
+  className,
+}: {
+  fileRawContent: string;
+  className?: string;
+}) {
   return (
     <span
+      className={className}
       data-component-name="Markdoc/InlineSvg/InlineSvg"
       dangerouslySetInnerHTML={{ __html: fileRawContent }}
     />

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

@@ -6,8 +6,8 @@ import { css } from "styled-components";
   */
 
   --md-tabs-container-text-color: inherit; // @presenter Color
-  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-container-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-container-font-style: normal; // @presenter FontStyle
   --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-container-bg-color: inherit; // @presenter Color
@@ -20,8 +20,8 @@ import { css } from "styled-components";
   --md-tabs-padding: 0; // @presenter Spacing
 
   --md-tabs-content-text-color: inherit; // @presenter Color
-  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-content-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-content-font-style: normal; // @presenter FontStyle
   --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-content-bg-color: inherit; // @presenter Color
@@ -31,7 +31,7 @@ import { css } from "styled-components";
 
   --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
   --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
-  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-tab-font-style: normal; // @presenter FontStyle
   --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --md-tabs-tab-bg-color: none; // @presenter Color