@redocly/theme 0.64.0-next.0 → 0.64.0-next.2

package/src/core/hooks/catalog/use-catalog-entity-link.ts

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import type { EntitiesCatalogConfig } from '@redocly/config';
+
+export type EntityWithTypeAndKey = { type?: string; key?: string };
+
+function isEntityExcluded(
+  excludes: Array<{ key: string }> | undefined,
+  entityKey: string,
+): boolean {
+  return excludes?.some((ex) => ex.key === entityKey) ?? false;
+}
+
+function doesCatalogIncludeEntityType(
+  config: { includes?: Array<{ type: string }> },
+  entityType: string,
+): boolean {
+  const hasNoIncludes = !config.includes || config.includes.length === 0;
+  if (hasNoIncludes) return true;
+  return config.includes?.some((inc) => inc.type === entityType) ?? false;
+}
+
+export function useCatalogEntityLink(entitiesCatalogConfig: EntitiesCatalogConfig | undefined) {
+  const catalogEntries = useMemo(() => {
+    const catalogs = entitiesCatalogConfig?.catalogs;
+    if (!catalogs) return [];
+    return Object.entries(catalogs)
+      .filter((entry): entry is [string, NonNullable<(typeof entry)[1]>] => entry[1] != null)
+      .sort(([keyA], [keyB]) => (keyA === 'all' ? 1 : 0) - (keyB === 'all' ? 1 : 0));
+  }, [entitiesCatalogConfig]);
+
+  const getEntityLink = (entity: EntityWithTypeAndKey): string | undefined => {
+    if (!entity?.key) return undefined;
+    const entityType = entity.type ?? '';
+
+    for (const [catalogKey, config] of catalogEntries) {
+      if (isEntityExcluded(config.excludes, entity.key)) continue;
+      if (!doesCatalogIncludeEntityType(config, entityType)) continue;
+      const slug = config.slug ?? catalogKey;
+      return `catalogs/${slug}/entities/${entity.key}`;
+    }
+    return undefined;
+  };
+
+  return { getEntityLink };
+}

package/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

@@ -5,18 +5,26 @@ import {
 
 type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
   column: CatalogColumn<T>;
+  currentSortOption?: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
 
 export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
   column,
+  currentSortOption,
   handleSortClick,
   isColumnSorted,
 }: CatalogTableHeaderCellActionsProps<T>) {
   const sortKey = column.sortKey;
-  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
-  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+  const isUpActive = Boolean(
+    sortKey &&
+    (currentSortOption ? currentSortOption === sortKey : isColumnSorted(sortKey, 'desc')),
+  );
+  const isDownActive = Boolean(
+    sortKey &&
+    (currentSortOption ? currentSortOption === `-${sortKey}` : isColumnSorted(sortKey, 'asc')),
+  );
 
   const handleCellClick = (): void => {
     if (!column.sortable || !sortKey) return;

package/src/core/hooks/index.ts

@@ -46,6 +46,7 @@ export * from './use-page-actions';
 export * from './use-mcp-config';
 export * from './use-connect-mcp-button';
 export * from './catalog/use-catalog-entity-details';
+export * from './catalog/use-catalog-entity-link';
 export * from './catalog/use-catalog-entity-schema';
 export * from './catalog/use-catalog-table-header-cell-actions';
 export * from './use-store';

package/src/core/styles/dark.ts

@@ -2,6 +2,7 @@ import { css } from 'styled-components';
 
 import { scorecardDarkMode } from '@redocly/theme/components/Scorecard/variables.dark';
 import { mermaidDarkMode } from '@redocly/theme/markdoc/components/Mermaid/variables.dark'
+import { excalidrawDarkMode } from '@redocly/theme/markdoc/components/ExcalidrawDiagram/variables.dark'
 import { menuDarkMode } from '@redocly/theme/components/Menu/variables.dark';
 import { buttonDarkMode } from '@redocly/theme/components/Button/variables.dark';
 import { aiAssistantButtonDarkMode } from '@redocly/theme/components/Buttons/variables.dark';
@@ -18,7 +19,9 @@ import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark'
 import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
 import { svgViewerDarkMode } from '@redocly/theme/components/SvgViewer/variables.dark';
 
-const replayDarkMode = css`
+import { activeBrandPaletteDark } from './palette.dark';
+
+const replayDarkMode = css<{ palette?: string }>`
   /**
     * @tokens Replay Colors
     * @presenter Color
@@ -43,6 +46,8 @@ const replayDarkMode = css`
   --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
   --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
 
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.16) 10.13%, rgba(255, 92, 220, 0.16) 87.29%);
+
   // @tokens End
 `;
 
@@ -241,6 +246,12 @@ export const darkMode = css`
   --color-black: #ffffff;
   --color-white: #000000;
 
+
+  --color-brand-pink-subtle-bg: var(--color-brand-subtle-1);
+  --color-brand-pink-subtle-bg-hover: var(--color-brand-subtle-2);
+  --color-brand-pink-subtle-border: var(--color-brand-subtle-3);
+  --color-brand-pink-subtle-border-hover: var(--color-brand-subtle-4);
+
   --color-hover-base: #32343E;
 
   --bg-color: var(--color-warm-grey-2);
@@ -335,6 +346,7 @@ export const darkMode = css`
   ${statusCodeDarkMode}
   ${menuDarkMode}
   ${mermaidDarkMode}
+  ${excalidrawDarkMode}
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}
@@ -346,7 +358,7 @@ export const darkMode = css`
   ${admonitionDarkMode}
   ${svgViewerDarkMode}
   ${badgesDarkMode}
-
+  ${activeBrandPaletteDark}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/src/core/styles/global.ts

@@ -29,6 +29,7 @@ import { markdown } from '@redocly/theme/components/Markdown/variables';
 import { banner } from '@redocly/theme/components/Banner/variables';
 import { markdownTabs } from '@redocly/theme/markdoc/components/Tabs/variables';
 import { mermaid } from '@redocly/theme/markdoc/components/Mermaid/variables';
+import { excalidraw } from '@redocly/theme/markdoc/components/ExcalidrawDiagram/variables';
 import { lastUpdated } from '@redocly/theme/components/LastUpdated/variables';
 import { logo } from '@redocly/theme/components/Logo/variables';
 import { statusCode } from '@redocly/theme/components/StatusCode/variables';
@@ -44,6 +45,7 @@ import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 import { pageActions } from '@redocly/theme/components/PageActions/variables';
 import { svgViewer } from '@redocly/theme/components/SvgViewer/variables';
 
+import { activeBrandPaletteLight } from './palette';
 import { darkMode } from './dark';
 
 const themeColors = css`
@@ -225,16 +227,22 @@ const themeColors = css`
   --color-white: #ffffff;
   --color-static-white: #ffffff;
 
-  --color-primary-bg: var(--color-blueberry-1);
-  --color-primary-bg-hover: var(--color-blueberry-2);
-  --color-primary-border: var(--color-blueberry-3);
-  --color-primary-border-hover: var(--color-blueberry-4);
-  --color-primary-hover: var(--color-blueberry-5);
-  --color-primary-base: var(--color-blueberry-6);
-  --color-primary-active: var(--color-blueberry-7);
-  --color-primary-text-hover: var(--color-blueberry-8);
-  --color-primary-text: var(--color-blueberry-9);
-  --color-primary-text-active: var(--color-blueberry-10);
+  --color-primary-bg: var(--color-brand-1);
+  --color-primary-bg-hover: var(--color-brand-2);
+  --color-primary-border: var(--color-brand-3);
+  --color-primary-border-hover: var(--color-brand-4);
+  --color-primary-hover: var(--color-brand-8);
+  --color-primary-base: var(--color-brand-6);
+  --color-primary-active: var(--color-brand-7);
+  --color-primary-text-hover: var(--color-brand-9);
+  --color-primary-text: var(--color-brand-8);
+  --color-primary-text-active: var(--color-brand-7);
+  --color-primary-text-on-color: var(--text-color-on-color);
+
+  --color-brand-pink-subtle-bg: var(--color-brand-1);
+  --color-brand-pink-subtle-bg-hover: var(--color-brand-2);
+  --color-brand-pink-subtle-border: var(--color-brand-3);
+  --color-brand-pink-subtle-border-hover: var(--color-brand-4);
 
   --color-success-bg: var(--color-green-1);
   --color-success-bg-hover: var(--color-green-2);
@@ -1167,7 +1175,7 @@ const icon = css`
 
   --icon-color-primary: var(--color-warm-grey-11); // @presenter Color
   --icon-color-secondary: var(--color-warm-grey-8); // @presenter Color
-  --icon-color-on-color: var(--color-warm-grey-1); // @presenter Color
+  --icon-color-on-color: var(--color-static-white); // @presenter Color
   --icon-color-interactive: var(--color-blueberry-6); // @presenter Color
   --icon-color-inverse: var(--color-white); // @presenter Color
   --icon-color-disabled: var(--color-warm-grey-5); // @presenter Color
@@ -1251,11 +1259,16 @@ const replay = css`
   --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
   --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
 
+  --replay-ai-gradient-soft: linear-gradient(62.6deg, rgba(113, 94, 254, 0.16) 0%, rgba(255, 92, 220, 0.16) 100%);
+  --replay-ai-gradient-disabled: linear-gradient(62.6deg, rgba(113, 94, 254, 0.6) 0%, rgba(255, 92, 220, 0.6) 100%);
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
+
+  --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
   // @tokens End
 `;
 
 
-export const styles = css`
+export const styles = css<{ palette?: string }>`
   :root {
     ${accordion}
     ${admonition}
@@ -1289,6 +1302,7 @@ export const styles = css`
     ${markdown}
     ${markdownTabs}
     ${mermaid}
+    ${excalidraw}
     ${menu}
     ${mobileMenu}
     ${modal}
@@ -1302,6 +1316,7 @@ export const styles = css`
     ${sizeAndSpace}
     ${tag}
     ${themeColors}
+    ${activeBrandPaletteLight}
     ${tile}
     ${toc}
     ${tooltip}
@@ -1341,6 +1356,6 @@ export const styles = css`
   ${browserOverrides}
 `;
 
-export const GlobalStyle = createGlobalStyle`
+export const GlobalStyle = createGlobalStyle<{ palette?: string }>`
   ${styles};
 `;

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

@@ -0,0 +1,214 @@
+import { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+function brandPaletteDark(palette: string | undefined): FlattenSimpleInterpolation {
+  switch (palette) {
+    case 'default':
+      return css`
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+    case 'slate':
+      return css`
+        --color-brand-1: #2a2b33;
+        --color-brand-2: #3b3c45;
+        --color-brand-3: #555761;
+        --color-brand-4: #6e6f7a;
+        --color-brand-5: #9b9ca8;
+        --color-brand-6: #fbfbfc;
+        --color-brand-7: #ededf2;
+        --color-brand-8: #dcdde5;
+        --color-brand-9: #c4c6d1;
+        --color-brand-10: #9b9ca8;
+        --color-brand-11: #6e6f7a;
+        --color-brand-subtle-1: #2a2b3366;
+        --color-brand-subtle-2: #3b3c4566;
+        --color-brand-subtle-3: #55576166;
+        --color-brand-subtle-4: #6e6f7a66;
+        --text-color-on-color: #000000;
+      `;
+    case 'pink':
+      return css`
+        --color-brand-1: #4f2841;
+        --color-brand-2: #6a3055;
+        --color-brand-3: #853668;
+        --color-brand-4: #a03a7b;
+        --color-brand-5: #bb3d8d;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #de59ad;
+        --color-brand-8: #e677bd;
+        --color-brand-9: #ef99cf;
+        --color-brand-10: #f7bfe2;
+        --color-brand-11: #ffe8f7;
+        --color-brand-subtle-1: #4f284166;
+        --color-brand-subtle-2: #6a305566;
+        --color-brand-subtle-3: #85366866;
+        --color-brand-subtle-4: #a03a7b66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'coral':
+      return css`
+        --color-brand-1: #4f282b;
+        --color-brand-2: #6d3338;
+        --color-brand-3: #8b3c42;
+        --color-brand-4: #a9434c;
+        --color-brand-5: #c74b55;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #ea6a75;
+        --color-brand-8: #ef858d;
+        --color-brand-9: #f5a3aa;
+        --color-brand-10: #fac5c9;
+        --color-brand-11: #ffe8ea;
+        --color-brand-subtle-1: #4f282b66;
+        --color-brand-subtle-2: #6d333866;
+        --color-brand-subtle-3: #8b3c4266;
+        --color-brand-subtle-4: #a9434c66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'amber':
+      return css`
+        --color-brand-1: #4f3c28;
+        --color-brand-2: #71512e;
+        --color-brand-3: #93632f;
+        --color-brand-4: #b6732a;
+        --color-brand-5: #d88121;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #fb9f3a;
+        --color-brand-8: #fcb261;
+        --color-brand-9: #fdc78c;
+        --color-brand-10: #feddba;
+        --color-brand-11: #fff4e8;
+        --color-brand-subtle-1: #4f3c2866;
+        --color-brand-subtle-2: #71512e66;
+        --color-brand-subtle-3: #93632f66;
+        --color-brand-subtle-4: #b6732a66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'jade':
+      return css`
+        --color-brand-1: #284f45;
+        --color-brand-2: #2a6052;
+        --color-brand-3: #2b715e;
+        --color-brand-4: #2b816b;
+        --color-brand-5: #2a9277;
+        --color-brand-6: #29a383;
+        --color-brand-7: #42b597;
+        --color-brand-8: #61c8ad;
+        --color-brand-9: #88dac4;
+        --color-brand-10: #b5edde;
+        --color-brand-11: #e8fff9;
+        --color-brand-subtle-1: #284f4566;
+        --color-brand-subtle-2: #2a605266;
+        --color-brand-subtle-3: #2b715e66;
+        --color-brand-subtle-4: #2b816b66;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'cyan':
+      return css`
+        --color-brand-1: #28484f;
+        --color-brand-2: #285c67;
+        --color-brand-3: #246e7f;
+        --color-brand-4: #1b8097;
+        --color-brand-5: #0f91af;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #22b2d2;
+        --color-brand-8: #4ac2dd;
+        --color-brand-9: #79d4e9;
+        --color-brand-10: #aee7f4;
+        --color-brand-11: #e8fbff;
+        --color-brand-subtle-1: #28484f66;
+        --color-brand-subtle-2: #285c6766;
+        --color-brand-subtle-3: #246e7f66;
+        --color-brand-subtle-4: #1b809766;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'ocean':
+      return css`
+        --color-brand-1: #283e4f;
+        --color-brand-2: #2d5472;
+        --color-brand-3: #2a6795;
+        --color-brand-4: #2277b9;
+        --color-brand-5: #1384dc;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #29a2ff;
+        --color-brand-8: #56b5ff;
+        --color-brand-9: #85caff;
+        --color-brand-10: #b6dfff;
+        --color-brand-11: #e8f5ff;
+        --color-brand-subtle-1: #283e4f66;
+        --color-brand-subtle-2: #2d547266;
+        --color-brand-subtle-3: #2a679566;
+        --color-brand-subtle-4: #2277b966;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'indigo':
+      return css`
+        --color-brand-1: #28314f;
+        --color-brand-2: #303e6b;
+        --color-brand-3: #364988;
+        --color-brand-4: #3952a4;
+        --color-brand-5: #3c5bc1;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #5879e4;
+        --color-brand-8: #7691eb;
+        --color-brand-9: #99aef1;
+        --color-brand-10: #bfcdf8;
+        --color-brand-11: #e8edff;
+        --color-brand-subtle-1: #28314f66;
+        --color-brand-subtle-2: #303e6b66;
+        --color-brand-subtle-3: #36498866;
+        --color-brand-subtle-4: #3952a466;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'iris':
+      return css`
+        --color-brand-1: #2e2e4f;
+        --color-brand-2: #3a3a6a;
+        --color-brand-3: #434385;
+        --color-brand-4: #4c4ca0;
+        --color-brand-5: #5353bb;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #7070de;
+        --color-brand-8: #8a8ae6;
+        --color-brand-9: #a7a7ef;
+        --color-brand-10: #c8c8f7;
+        --color-brand-11: #ebebff;
+        --color-brand-subtle-1: #2e2e4f80;
+        --color-brand-subtle-2: #3a3a6a80;
+        --color-brand-subtle-3: #43438580;
+        --color-brand-subtle-4: #4c4ca080;
+        --text-color-on-color: #ffffff;
+      `;
+    default:
+      return css`
+        --color-brand-1: #232a61;
+        --color-brand-2: #222d7a;
+        --color-brand-3: #1e2f93;
+        --color-brand-4: #2f46b7;
+        --color-brand-5: #4561db;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #87a3ff;
+        --color-brand-8: #9fb7ff;
+        --color-brand-9: #bfd0ff;
+        --color-brand-10: #dfe8ff;
+        --color-brand-11: #f0f4ff;
+        --color-brand-subtle-1: #232a6166;
+        --color-brand-subtle-2: #222d7a66;
+        --color-brand-subtle-3: #1e2f9366;
+        --color-brand-subtle-4: #2f46b766;
+        --text-color-on-color: #ffffff;
+      `;
+  }
+}
+
+export const activeBrandPaletteDark = css<{ palette?: string }>`
+  ${({ palette }) => brandPaletteDark(palette)}
+`;

package/src/core/styles/palette.ts

@@ -0,0 +1,177 @@
+import { css, type FlattenSimpleInterpolation } from 'styled-components';
+
+function brandPaletteLight(palette: string | undefined): FlattenSimpleInterpolation {
+  switch (palette) {
+    case 'default':
+      return css`
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+    case 'slate':
+      return css`
+        --color-brand-1: #ededf2;
+        --color-brand-2: #dcdde5;
+        --color-brand-3: #c4c6d1;
+        --color-brand-4: #9b9ca8;
+        --color-brand-5: #6e6f7a;
+        --color-brand-6: #1a1c21;
+        --color-brand-7: #22242b;
+        --color-brand-8: #2a2b33;
+        --color-brand-9: #3b3c45;
+        --color-brand-10: #555761;
+        --color-brand-11: #6e6f7a;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'pink':
+      return css`
+        --color-brand-1: #ffe8f7;
+        --color-brand-2: #f7bfe2;
+        --color-brand-3: #ef99cf;
+        --color-brand-4: #e677bd;
+        --color-brand-5: #de59ad;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #bb3d8d;
+        --color-brand-8: #a03a7b;
+        --color-brand-9: #853668;
+        --color-brand-10: #6a3055;
+        --color-brand-11: #4f2841;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'coral':
+      return css`
+        --color-brand-1: #ffe8ea;
+        --color-brand-2: #fac5c9;
+        --color-brand-3: #f5a3aa;
+        --color-brand-4: #ef858d;
+        --color-brand-5: #ea6a75;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #c74b55;
+        --color-brand-8: #a9434c;
+        --color-brand-9: #8b3c42;
+        --color-brand-10: #6d3338;
+        --color-brand-11: #4f282b;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'amber':
+      return css`
+        --color-brand-1: #fff4e8;
+        --color-brand-2: #feddba;
+        --color-brand-3: #fdc78c;
+        --color-brand-4: #fcb261;
+        --color-brand-5: #fb9f3a;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #d88121;
+        --color-brand-8: #b6732a;
+        --color-brand-9: #93632f;
+        --color-brand-10: #71512e;
+        --color-brand-11: #4f3c28;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'jade':
+      return css`
+        --color-brand-1: #e8fff9;
+        --color-brand-2: #b5edde;
+        --color-brand-3: #88dac4;
+        --color-brand-4: #61c8ad;
+        --color-brand-5: #42b597;
+        --color-brand-6: #29a383;
+        --color-brand-7: #2a9277;
+        --color-brand-8: #2b816b;
+        --color-brand-9: #2b715e;
+        --color-brand-10: #2a6052;
+        --color-brand-11: #284f45;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'cyan':
+      return css`
+        --color-brand-1: #e8fbff;
+        --color-brand-2: #aee7f4;
+        --color-brand-3: #79d4e9;
+        --color-brand-4: #4ac2dd;
+        --color-brand-5: #22b2d2;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #0f91af;
+        --color-brand-8: #1b8097;
+        --color-brand-9: #246e7f;
+        --color-brand-10: #285c67;
+        --color-brand-11: #28484f;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'ocean':
+      return css`
+        --color-brand-1: #e8f5ff;
+        --color-brand-2: #b6dfff;
+        --color-brand-3: #85caff;
+        --color-brand-4: #56b5ff;
+        --color-brand-5: #29a2ff;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #1384dc;
+        --color-brand-8: #2277b9;
+        --color-brand-9: #2a6795;
+        --color-brand-10: #2d5472;
+        --color-brand-11: #283e4f;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'indigo':
+      return css`
+        --color-brand-1: #e8edff;
+        --color-brand-2: #b5d7ff;
+        --color-brand-3: #99aef1;
+        --color-brand-4: #7691eb;
+        --color-brand-5: #5879e4;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #3c5bc1;
+        --color-brand-8: #3952a4;
+        --color-brand-9: #364988;
+        --color-brand-10: #303e6b;
+        --color-brand-11: #28314f;
+        --text-color-on-color: #ffffff;
+      `;
+    case 'iris':
+      return css`
+        --color-brand-1: #ebebff;
+        --color-brand-2: #c8c8f7;
+        --color-brand-3: #a7a7ef;
+        --color-brand-4: #8a8ae6;
+        --color-brand-5: #7070de;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #5353bb;
+        --color-brand-8: #4c4ca0;
+        --color-brand-9: #434385;
+        --color-brand-10: #3a3a6a;
+        --color-brand-11: #2e2e4f;
+        --text-color-on-color: #ffffff;
+      `;
+    default:
+      return css`
+        --color-brand-1: #f0f4ff;
+        --color-brand-2: #dfe8ff;
+        --color-brand-3: #bfd0ff;
+        --color-brand-4: #9fb7ff;
+        --color-brand-5: #87a3ff;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #4561db;
+        --color-brand-8: #2f46b7;
+        --color-brand-9: #1e2f93;
+        --color-brand-10: #222d7a;
+        --color-brand-11: #232a61;
+        --text-color-on-color: #ffffff;
+      `;
+  }
+}
+
+/**
+ * @tokens Palette
+ */
+export const activeBrandPaletteLight = css<{ palette?: string }>`
+  ${({ palette }) => brandPaletteLight(palette)}
+`;

package/src/core/types/catalog.ts

@@ -4,8 +4,6 @@ import { ENTITY_RELATION_TYPES } from '@redocly/config';
 import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
-export type SortOption = 'title' | '-title' | 'type' | '-type';
-
 export type FilterResult = {
   value: string;
   count: number;
@@ -26,8 +24,8 @@ export type UseCatalogResponse = {
   filterQuery: string;
   searchQuery: string;
   setSearchQuery: (query: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (option: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (option: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   viewMode: CatalogViewMode;
@@ -41,8 +39,8 @@ export type UseCatalogResponse = {
 };
 
 export type UseCatalogSortResponse = {
-  sortOption: SortOption | null;
-  setSortOption: (option: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (option: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -162,8 +160,8 @@ export type BffCatalogRelatedEntity = {
   metadata?: Record<string, any>;
   version?: string | null;
   revision?: string | null;
-  readonly createdAt: string | null;
-  readonly updatedAt: string | null;
+  readonly createdAt: string;
+  readonly updatedAt: string;
 };
 
 export type BffCatalogEntity = {
@@ -260,3 +258,21 @@ export type SidebarConnectedEntity = {
   key: string;
   version?: string;
 };
+
+export type CatalogEntityPageProps = {
+  status: 'success';
+  entity: BffCatalogEntity;
+  relatedEntity: BffCatalogRelatedEntity | null;
+  relations: BffCatalogRelatedEntityList;
+  entitiesCatalogConfig: EntitiesCatalogConfig;
+  catalogConfig: CatalogEntityConfig;
+  sharedDataIds?: Record<string, string>;
+};
+
+export type CatalogEntityProps = {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  StoreProvider: React.ComponentType<any>;
+  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
+};