@redocly/theme 0.54.0-next.2 → 0.54.0-next.3

package/src/components/{Catalog/Catalog.tsx → CatalogLegacy/CatalogLegacy.tsx}

@@ -8,23 +8,23 @@ import { useThemeHooks, useModalScrollLock } from '@redocly/theme/core/hooks';
 import { H2 } from '@redocly/theme/components/Typography/H2';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
-import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
-import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
+import { HighlightContext } from '@redocly/theme/components/CatalogLegacy/CatalogLegacyHighlight';
+import { CatalogLegacyActions } from '@redocly/theme/components/CatalogLegacy/CatalogLegacyActions';
 import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogVirtualizedGroups } from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
+import { CatalogLegacyVirtualizedGroups } from '@redocly/theme/components/CatalogLegacy/CatalogLegacyVirtualizedGroups';
 
-export type CatalogProps = {
+export type CatalogLegacyProps = {
   pageProps: {
     catalogId: string;
     catalogConfig: CatalogConfig;
   };
 };
 
-export default function Catalog(props: CatalogProps): JSX.Element {
+export default function CatalogLegacy(props: CatalogLegacyProps): JSX.Element {
   const { catalogConfig } = props.pageProps;
-  const { useTranslate, useCatalog } = useThemeHooks();
+  const { useTranslate, useCatalogLegacy } = useThemeHooks();
 
-  const { filterTerm, setFilterTerm, groups, filters } = useCatalog(catalogConfig);
+  const { filterTerm, setFilterTerm, groups, filters } = useCatalogLegacy(catalogConfig);
   const [filterPopoverVisible, setFilterPopoverVisible] = React.useState(false);
   const { translate } = useTranslate();
 
@@ -32,7 +32,10 @@ export default function Catalog(props: CatalogProps): JSX.Element {
 
   return (
     <HighlightContext.Provider value={[filterTerm]}>
-      <CatalogPageWrapper data-component-name="Catalog/Catalog" withoutFilters={!filters.length}>
+      <CatalogPageWrapper
+        data-component-name="CatalogLegacy/CatalogLegacy"
+        withoutFilters={!filters.length}
+      >
         <FiltersSidebar
           menu={
             <FilterContent
@@ -52,7 +55,7 @@ export default function Catalog(props: CatalogProps): JSX.Element {
             filterValuesCasing={catalogConfig.filterValuesCasing}
           />
         )}
-        <CatalogActions
+        <CatalogLegacyActions
           onOpenFilter={() => setFilterPopoverVisible(true)}
           filters={filters}
           filterTerm={filterTerm}
@@ -73,7 +76,11 @@ export default function Catalog(props: CatalogProps): JSX.Element {
             ) : null}
           </CatalogPageDescriptionWrapper>
 
-          <CatalogVirtualizedGroups groups={groups} filters={filters} filterTerm={filterTerm} />
+          <CatalogLegacyVirtualizedGroups
+            groups={groups}
+            filters={filters}
+            filterTerm={filterTerm}
+          />
         </CatalogPageContent>
       </CatalogPageWrapper>
     </HighlightContext.Provider>
@@ -87,26 +94,26 @@ export const CatalogPageContent = styled.main`
 
   @media screen and (min-width: ${breakpoints.medium}) {
     width: 100%;
-    padding: var(--catalog-page-padding);
+    padding: var(--catalog-legacy-page-padding);
   }
 `;
 
 export const CatalogTitle = styled(H2)`
-  color: var(--catalog-title-text-color);
-  font-weight: var(--catalog-title-font-weight);
-  font-size: var(--catalog-title-font-size);
-  margin: var(--catalog-title-margin);
+  color: var(--catalog-legacy-title-text-color);
+  font-weight: var(--catalog-legacy-title-font-weight);
+  font-size: var(--catalog-legacy-title-font-size);
+  margin: var(--catalog-legacy-title-margin);
 `;
 
 export const CatalogDescription = styled.p`
-  color: var(--catalog-description-text-color);
-  font-weight: var(--catalog-description-font-weight);
-  font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  color: var(--catalog-legacy-description-text-color);
+  font-weight: var(--catalog-legacy-description-font-weight);
+  font-size: var(--catalog-legacy-description-font-size);
+  margin: var(--catalog-legacy-description-margin);
 `;
 
 export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
-  --sidebar-width: var(--catalog-sidebar-width, 285px);
+  --sidebar-width: var(--catalog-legacy-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
@@ -139,7 +146,7 @@ export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
 `;
 
 export const CatalogPageDescriptionWrapper = styled.div`
-  margin: var(--catalog-heading-margin);
+  margin: var(--catalog-legacy-heading-margin);
   display: none;
 
   @media screen and (min-width: ${breakpoints.medium}) {

package/src/components/{Catalog/CatalogActions.tsx → CatalogLegacy/CatalogLegacyActions.tsx}

@@ -9,13 +9,13 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
-export type CatalogActionsProps = {
+export type CatalogLegacyActionsProps = {
   onOpenFilter: () => void;
   filters: ResolvedFilter[];
   filterTerm: string;
 };
 
-export function CatalogActions(props: CatalogActionsProps): JSX.Element {
+export function CatalogLegacyActions(props: CatalogLegacyActionsProps): JSX.Element {
   const { onOpenFilter, filterTerm, filters } = props;
 
   let activeFilters = filterTerm.trim().length > 0 ? 1 : 0;
@@ -33,7 +33,7 @@ export function CatalogActions(props: CatalogActionsProps): JSX.Element {
   const telemetry = useTelemetry();
 
   return (
-    <CatalogActionsWrapper data-component-name="Catalog/CatalogActions">
+    <CatalogActionsWrapper data-component-name="CatalogLegacy/CatalogLegacyActions">
       <Button
         variant="ghost"
         size="small"
@@ -55,10 +55,11 @@ export function CatalogActions(props: CatalogActionsProps): JSX.Element {
 const CatalogActionsWrapper = styled.div`
   display: flex;
   align-items: center;
-  gap: var(--catalog-actions-gap);
-  padding: var(--catalog-actions-padding-vertical) var(--catalog-actions-padding-horizontal);
-  min-height: var(--catalog-actions-min-height);
-  background-color: var(--catalog-actions-bg-color);
+  gap: var(--catalog-legacy-actions-gap);
+  padding: var(--catalog-legacy-actions-padding-vertical)
+    var(--catalog-legacy-actions-padding-horizontal);
+  min-height: var(--catalog-legacy-actions-min-height);
+  background-color: var(--catalog-legacy-actions-bg-color);
 
   @media screen and (min-width: ${breakpoints.medium}) {
     display: none;

package/src/components/{Catalog/CatalogCard.tsx → CatalogLegacy/CatalogLegacyCard.tsx}

@@ -8,37 +8,39 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
-import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { CatalogLegacyHighlight } from '@redocly/theme/components/CatalogLegacy/CatalogLegacyHighlight';
 import { Button } from '@redocly/theme/components/Button/Button';
 
-export type CatalogCardProps = {
+export type CatalogLegacyCardProps = {
   item: CatalogItem;
 };
 
-export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
+export function CatalogLegacyCard({ item }: CatalogLegacyCardProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
-        data-component-name="Catalog/CatalogCard"
+        data-component-name="CatalogLegacy/CatalogLegacyCard"
         onClick={() => telemetry.send('catalog_item_clicked', {})}
       >
         <CardContent>
           <CardTitleWrapper>
             <CardTitle>
-              <CatalogHighlight>{item.title}</CatalogHighlight>
+              <CatalogLegacyHighlight>{item.title}</CatalogLegacyHighlight>
             </CardTitle>
           </CardTitleWrapper>
           <CardDescription>
-            <CatalogHighlight>{item.summary ?? item.description ?? ''}</CatalogHighlight>
+            <CatalogLegacyHighlight>
+              {item.summary ?? item.description ?? ''}
+            </CatalogLegacyHighlight>
           </CardDescription>
         </CardContent>
         <CardFooter>
           <CardTags>
             {((item.tags as string[]) || []).map((tag, index) => (
               <CardTag key={tag + index} color={slug(tag)}>
-                <CatalogHighlight>{capitalize(tag)}</CatalogHighlight>
+                <CatalogLegacyHighlight>{capitalize(tag)}</CatalogLegacyHighlight>
               </CardTag>
             ))}
             {(item.scorecardLevel && (
@@ -50,7 +52,7 @@ export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
                   Object.keys(item.scorecardLevels || {}).length,
                 )})`}
               >
-                <CatalogHighlight>{item.scorecardLevel}</CatalogHighlight>
+                <CatalogLegacyHighlight>{item.scorecardLevel}</CatalogLegacyHighlight>
               </Tag>
             )) ||
               null}
@@ -68,20 +70,20 @@ const SelectButton = styled(Button)`
 `;
 
 const StyledCard = styled.div`
-  min-height: var(--catalog-card-min-height);
+  min-height: var(--catalog-legacy-card-min-height);
   height: 100%;
-  color: var(--catalog-card-text-color);
-  font-size: var(--catalog-card-font-size);
-  font-weight: var(--catalog-card-font-weight);
-  background-color: var(--catalog-card-bg-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
-    var(--catalog-card-border-color);
+  color: var(--catalog-legacy-card-text-color);
+  font-size: var(--catalog-legacy-card-font-size);
+  font-weight: var(--catalog-legacy-card-font-weight);
+  background-color: var(--catalog-legacy-card-bg-color);
+  border: var(--catalog-legacy-card-border-width) var(--catalog-legacy-card-border-style)
+    var(--catalog-legacy-card-border-color);
   transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
+  border-radius: var(--catalog-legacy-card-border-radius);
   cursor: pointer;
   display: flex;
-  gap: var(--catalog-card-gap);
-  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+  gap: var(--catalog-legacy-card-gap);
+  padding: var(--catalog-legacy-card-padding-vertical) var(--catalog-legacy-card-padding-horizontal);
   flex-direction: column;
 
   &:hover ${SelectButton} {
@@ -92,40 +94,40 @@ const StyledCard = styled.div`
 const CardTitleWrapper = styled.div`
   display: flex;
   align-items: center;
-  min-height: var(--catalog-card-title-min-height);
+  min-height: var(--catalog-legacy-card-title-min-height);
 `;
 
 const CardTitle = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-title-line-clamp);
+  -webkit-line-clamp: var(--catalog-legacy-card-title-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 
-  color: var(--catalog-card-title-color);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
-  line-height: var(--catalog-card-title-line-height);
+  color: var(--catalog-legacy-card-title-color);
+  font-size: var(--catalog-legacy-card-title-font-size);
+  font-weight: var(--catalog-legacy-card-title-font-weight);
+  line-height: var(--catalog-legacy-card-title-line-height);
   margin: 0;
 `;
 
 const CardDescription = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: var(--catalog-legacy-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--catalog-card-description-color);
-  font-size: var(--catalog-card-description-font-size);
-  font-weight: var(--catalog-card-description-font-weight);
-  line-height: var(--catalog-card-description-line-height);
-  height: var(--catalog-card-description-height);
+  color: var(--catalog-legacy-card-description-color);
+  font-size: var(--catalog-legacy-card-description-font-size);
+  font-weight: var(--catalog-legacy-card-description-font-weight);
+  line-height: var(--catalog-legacy-card-description-line-height);
+  height: var(--catalog-legacy-card-description-height);
 `;
 
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  gap: var(--catalog-card-content-gap);
+  gap: var(--catalog-legacy-card-content-gap);
   flex-direction: column;
 `;
 
@@ -146,5 +148,5 @@ const CardTags = styled.div`
 const CardTag = styled(Tag)`
   text-transform: inherit;
   margin: 0;
-  background-color: var(--catalog-card-tag-bg);
+  background-color: var(--catalog-legacy-card-tag-bg);
 `;

package/src/components/{Catalog/CatalogHighlight.tsx → CatalogLegacy/CatalogLegacyHighlight.tsx}

@@ -4,9 +4,9 @@ import styled from 'styled-components';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-export type CatalogHighlightProps = React.PropsWithChildren;
+export type CatalogLegacyHighlightProps = React.PropsWithChildren;
 
-export function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null {
+export function CatalogLegacyHighlight(props: CatalogLegacyHighlightProps): JSX.Element | null {
   const { children } = props;
   const searchWords = React.useContext(HighlightContext);
 
@@ -21,7 +21,7 @@ export function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | nu
     });
 
     return (
-      <span data-component-name="Catalog/CatalogHighlight" key={childIdx}>
+      <span data-component-name="CatalogLegacy/CatalogLegacyHighlight" key={childIdx}>
         {chunks.map((chunk, idx) => {
           const { end, highlight, start } = chunk;
           const text = str.substr(start, end - start);

package/src/components/{Catalog/CatalogInfoBlock.tsx → CatalogLegacy/CatalogLegacyInfoBlock.tsx}

@@ -6,7 +6,7 @@ import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-export type CatalogInfoBlockProps = {
+export type CatalogLegacyInfoBlockProps = {
   metadata?: {
     scorecardLevel?: string;
     scoreCardSlug?: string;
@@ -17,7 +17,7 @@ export type CatalogInfoBlockProps = {
   };
 };
 
-export function CatalogInfoBlock(props: CatalogInfoBlockProps): JSX.Element {
+export function CatalogLegacyInfoBlock(props: CatalogLegacyInfoBlockProps): JSX.Element {
   const scorecardBadge = props.metadata?.scorecardLevel ? (
     <ScorecardBadge
       level={props.metadata.scorecardLevel as string}
@@ -31,7 +31,7 @@ export function CatalogInfoBlock(props: CatalogInfoBlockProps): JSX.Element {
 
   return (
     <CatalogInfoBlockWrapper>
-      <CatalogBadgesWrapper data-component-name="Catalog/CatalogInfoBlock">
+      <CatalogBadgesWrapper data-component-name="CatalogLegacy/CatalogLegacyInfoBlock">
         {scorecardBadge}
       </CatalogBadgesWrapper>
     </CatalogInfoBlockWrapper>
@@ -74,10 +74,10 @@ const CatalogBadgesWrapper = styled.div`
   right: 0;
   margin-top: var(--panel-gap-vertical);
 
-  --badge-border-radius: var(--catalog-page-badge-border-radius);
-  --badge-padding: var(--catalog-page-badge-padding);
-  --badge-font-size: var(--catalog-page-badge-font-size);
-  --badge-line-height: var(--catalog-page-badge-line-height);
-  --badge-dot-size: var(--catalog-page-badge-dot-size);
-  --badge-dot-border-color: var(--catalog-page-badge-dot-border-color);
+  --badge-border-radius: var(--catalog-legacy-page-badge-border-radius);
+  --badge-padding: var(--catalog-legacy-page-badge-padding);
+  --badge-font-size: var(--catalog-legacy-page-badge-font-size);
+  --badge-line-height: var(--catalog-legacy-page-badge-line-height);
+  --badge-dot-size: var(--catalog-legacy-page-badge-dot-size);
+  --badge-dot-border-color: var(--catalog-legacy-page-badge-dot-border-color);
 `;

package/src/components/{Catalog/CatalogVirtualizedGroups.tsx → CatalogLegacy/CatalogLegacyVirtualizedGroups.tsx}

@@ -4,14 +4,14 @@ import styled from 'styled-components';
 
 import { CatalogItem, ResolvedFilter } from '@redocly/theme/core/types';
 import { useElementSize } from '@redocly/theme/core/hooks';
-import { CatalogCard } from '@redocly/theme/components/Catalog/CatalogCard';
+import { CatalogLegacyCard } from '@redocly/theme/components/CatalogLegacy/CatalogLegacyCard';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
 
 const GAP_SIZE = 32;
 const ESTIMATED_HEADER_HEIGHT = 43;
 const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
-const CARD_MIN_WIDTH_VAR = '--catalog-card-min-width';
+const CARD_MIN_WIDTH_VAR = '--catalog-legacy-card-min-width';
 
 export type Group = {
   title: string;
@@ -22,17 +22,17 @@ export type VirtualRowData =
   | { type: 'header'; groupTitle: string; groupCount: number; key: string }
   | { type: 'cardRow'; groupTitle: string; items: CatalogItem[]; key: string };
 
-export type CatalogVirtualizedGroupsProps = {
+export type CatalogLegacyVirtualizedGroupsProps = {
   groups: Group[];
   filters: (ResolvedFilter & { isFilterUsed?: boolean })[];
   filterTerm: string;
 };
 
-export function CatalogVirtualizedGroups({
+export function CatalogLegacyVirtualizedGroups({
   groups,
   filters,
   filterTerm,
-}: CatalogVirtualizedGroupsProps) {
+}: CatalogLegacyVirtualizedGroupsProps) {
   const [isClient, setIsClient] = useState(false);
   const [size, parentRef] = useElementSize<HTMLDivElement>({ delay: 50, detectSizes: 'width' });
 
@@ -112,7 +112,7 @@ export function CatalogVirtualizedGroups({
 
   if (!isClient) {
     return (
-      <div ref={parentRef} data-component-name="Catalog/CatalogVirtualizedGroups">
+      <div ref={parentRef} data-component-name="CatalogLegacy/CatalogLegacyVirtualizedGroups">
         {flatRows.slice(0, 15).map((rowData) => {
           if (rowData.type === 'header') {
             return (
@@ -127,21 +127,21 @@ export function CatalogVirtualizedGroups({
             <SSRRow key={rowData.key}>
               {rowData.items.map((item) => (
                 <CardWrapper key={item.link}>
-                  <CatalogCard item={item} />
+                  <CatalogLegacyCard item={item} />
                 </CardWrapper>
               ))}
             </SSRRow>
           );
         })}
         <LoadingWrapper>
-          <SpinnerLoader color="var(--catalog-description-text-color)" size="20px" />
+          <SpinnerLoader color="var(--catalog-legacy-description-text-color)" size="20px" />
         </LoadingWrapper>
       </div>
     );
   }
 
   return (
-    <div ref={parentRef} data-component-name="Catalog/CatalogVirtualizedGroups">
+    <div ref={parentRef} data-component-name="CatalogLegacy/CatalogLegacyVirtualizedGroups">
       <div
         style={{
           position: 'relative',
@@ -172,7 +172,7 @@ export function CatalogVirtualizedGroups({
               style={{ transform: `translateY(${virtualRow.start}px)` }}
             >
               {rowData.items.map((item) => (
-                <CatalogCard key={item.link} item={item} />
+                <CatalogLegacyCard key={item.link} item={item} />
               ))}
             </GridRow>
           );
@@ -186,20 +186,20 @@ const SSRHeaderRow = styled.div`
   width: 100%;
   display: flex;
   align-items: center;
-  padding: var(--catalog-separator-padding);
-  border-top: 1px solid var(--catalog-separator-border-color);
+  padding: var(--catalog-legacy-separator-padding);
+  border-top: 1px solid var(--catalog-legacy-separator-border-color);
   padding-bottom: calc(4px * 4);
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
+  color: var(--catalog-legacy-separator-color);
+  font-size: var(--catalog-legacy-separator-font-size);
+  font-weight: var(--catalog-legacy-separator-font-weight);
 `;
 
 const SSRRow = styled.div`
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--catalog-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  gap: var(--catalog-legacy-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-legacy-cards-group-gap, 32px);
 `;
 
 const HeaderRow = styled(SSRHeaderRow)`
@@ -213,20 +213,20 @@ const GridRow = styled.div`
   left: 0;
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
-  gap: var(--catalog-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-legacy-card-min-width), 1fr));
+  gap: var(--catalog-legacy-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-legacy-cards-group-gap, 32px);
   will-change: transform;
 `;
 
 const CardWrapper = styled.div`
-  flex: 1 0 var(--catalog-card-min-width);
+  flex: 1 0 var(--catalog-legacy-card-min-width);
   max-width: 100%;
-  min-width: var(--catalog-card-min-width);
+  min-width: var(--catalog-legacy-card-min-width);
 `;
 
 const CatalogSeparatorLabel = styled.div`
-  margin: var(--catalog-separator-label-margin);
+  margin: var(--catalog-legacy-separator-label-margin);
 `;
 
 const LoadingWrapper = styled.div`

package/src/components/CatalogLegacy/variables.ts

@@ -0,0 +1,106 @@
+import { css } from 'styled-components';
+
+export const catalog = css`
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-legacy-page-padding-vertical: var(--spacing-lg);
+  --catalog-legacy-page-padding-horizontal: var(--spacing-xl);
+  --catalog-legacy-page-padding: var(--catalog-legacy-page-padding-vertical) var(--catalog-legacy-page-padding-horizontal);
+
+  --catalog-legacy-filter-padding-vertical-mobile: 0;
+  --catalog-legacy-filter-padding-horizontal-mobile: var(--spacing-base);
+
+  --catalog-legacy-heading-margin: 0 0 var(--spacing-xl) 0;
+
+  /**
+    * @tokens Catalog page title
+    */
+  --catalog-legacy-title-text-color: var(--text-color-primary);
+  --catalog-legacy-title-font-weight: var(--font-weight-bold);
+  --catalog-legacy-title-font-size: var(--font-size-heading-3);
+  --catalog-legacy-title-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page description
+    */
+  --catalog-legacy-description-text-color: var(--text-color-secondary);
+  --catalog-legacy-description-font-weight: var(--font-weight-regular);
+  --catalog-legacy-description-font-size: var(--font-size-base);
+  --catalog-legacy-description-margin: 0 0 var(--spacing-sm) 0;
+
+  /**
+    * @tokens Catalog page separator
+    */
+  --catalog-legacy-separator-color: var(--text-color-secondary);
+  --catalog-legacy-separator-font-size: var(--font-size-base);
+  --catalog-legacy-separator-font-weight: var(--font-weight-regular);
+  --catalog-legacy-separator-border-color: var(--border-color-secondary);
+  --catalog-legacy-separator-margin: 0 0 var(--spacing-base) 0;
+  --catalog-legacy-separator-padding: var(--spacing-xxs) 0 0 0;
+  --catalog-legacy-separator-label-margin: 0 var(--spacing-xs);
+
+  /**
+    * @tokens Catalog card
+    */
+  --catalog-legacy-card-min-height: 194px;
+  --catalog-legacy-card-min-width: 260px;
+  --catalog-legacy-card-padding-vertical: var(--spacing-base);
+  --catalog-legacy-card-padding-horizontal: var(--spacing-md);
+  --catalog-legacy-card-gap: var(--spacing-sm);
+  --catalog-legacy-card-text-color: var(--text-color-secondary);
+  --catalog-legacy-card-font-size: var(--font-size-base);
+  --catalog-legacy-card-font-weight: var(--font-weight-regular);
+  --catalog-legacy-card-bg-color: var(--layer-color);
+  --catalog-legacy-card-border-color: var(--border-color-secondary);
+  --catalog-legacy-card-border-width: var(--border-width);
+  --catalog-legacy-card-border-style: var(--border-style);
+  --catalog-legacy-card-border-color-hover: var(--border-color-primary);
+  --catalog-legacy-card-border-radius: var(--border-radius-xxl);
+  --catalog-legacy-cards-group-margin: 0 0 var(--spacing-base) 0;
+  --catalog-legacy-cards-group-gap: var(--spacing-xl);
+
+  /**
+    * @tokens Catalog card title
+    */
+  --catalog-legacy-card-title-color: var(--text-color-primary);
+  --catalog-legacy-card-title-min-height: var(--spacing-xxl);
+  --catalog-legacy-card-title-font-size: var(--font-size-lg);
+  --catalog-legacy-card-title-font-weight: var(--font-weight-bold);
+  --catalog-legacy-card-title-line-height: var(--line-height-lg);
+  --catalog-legacy-card-title-line-clamp: 2;
+
+  /**
+    * @tokens Catalog card description
+    */
+  --catalog-legacy-card-description-line-clamp: 3;
+  --catalog-legacy-card-description-color: var(--text-color-secondary);
+  --catalog-legacy-card-description-font-size: var(--font-size-base);
+  --catalog-legacy-card-description-line-height: var(--line-height-base);
+  --catalog-legacy-card-description-font-weight: var(--font-weight-regular);
+  --catalog-legacy-card-description-height: 62px;
+
+  --catalog-legacy-card-content-gap: var(--spacing-xxs);
+
+  --catalog-legacy-card-tag-bg: transparent;
+
+  --catalog-legacy-highlight-bg-color: none;
+  --catalog-legacy-highlight-text-color: var(--color-info-base);
+
+  --catalog-legacy-actions-gap: var(--spacing-xs);
+  --catalog-legacy-actions-padding-vertical: var(--spacing-xs);
+  --catalog-legacy-actions-padding-horizontal: 5%;
+  --catalog-legacy-actions-min-height: 40px;
+  --catalog-legacy-actions-bg-color: var(--bg-color-tonal);
+
+  --catalog-legacy-page-badge-border-radius: var(--border-radius);
+  --catalog-legacy-page-badge-padding: 0 var(--spacing-xs);
+  --catalog-legacy-page-badge-font-size: var(--font-size-base);
+  --catalog-legacy-page-badge-line-height: var(--line-height-base);
+
+  --catalog-legacy-page-badge-dot-size: 6px;
+  --catalog-legacy-page-badge-dot-border-color: #ffffff;
+
+  // @tokens End
+`;

package/src/components/Menu/MenuItem.tsx

@@ -67,7 +67,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
       data-testid="menu-item-label"
     >
-      {chevron}
+      <ChevronWrapper>{chevron}</ChevronWrapper>
       {item.icon ? <MenuItemIcon src={item.icon} /> : null}
       <MenuItemLabelTextWrapper>
         <MenuItemLabel>
@@ -152,6 +152,10 @@ function generateClassName({
     .trim();
 }
 
+const ChevronWrapper = styled.div`
+  flex-shrink: 0;
+`;
+
 const MenuItemWrapper = styled.div`
   display: flex;
   flex-direction: column;

package/src/components/Search/SearchDialog.tsx

@@ -29,6 +29,7 @@ import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
+import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 
 export type SearchDialogProps = {
   onClose: () => void;
@@ -213,7 +214,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                 <SearchHeaderButtons>
                   {showAiSearchButton ? (
                     <SearchAiButton
-                      icon={<AiStarsIcon gradient />}
+                      icon={<AiStarsGradientIcon color="var(--search-ai-button-icon-color)" />}
                       onClick={() => {
                         setMode('ai-dialog');
                         if (query.trim()) {

package/src/components/Search/variables.ts

@@ -186,6 +186,8 @@ export const search = css`
   --search-ai-icon-bg-color: var(--search-ai-gradient);
   --search-ai-icon-color: var(--color-static-white);
 
+  --search-ai-button-icon-color: none;
+
   --search-ai-thinking-dots-gap: 4px;
   --search-ai-thinking-dots-padding: 4px 0;
   --search-ai-thinking-dot-size: 6px;