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

package/src/components/Tag/variables.dark.ts

@@ -22,17 +22,17 @@ export const tagDarkMode = css`
   --tag-operation-color-options: #1a1c21; // @presenter Color
   --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
-  --tag-action-color-receive: #4db144; // @presenter Color
-  --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-consume: #4db144; // @presenter Color
+  --tag-action-color-receive: #88CF82; // @presenter Color
+  --tag-action-color-sub: #88CF82; // @presenter Color
+  --tag-action-color-cons: #88CF82; // @presenter Color
 
-  --tag-action-color-send: #4144F6; // @presenter Color
-  --tag-action-color-pub: #4144F6; // @presenter Color
-  --tag-action-color-publish: #4144f6; // @presenter Color
+  --tag-action-color-send: #7779F8; // @presenter Color
+  --tag-action-color-pub: #7779F8; // @presenter Color
+  --tag-action-color-publish: #7779F8; // @presenter Color
 
-  --tag-action-color-channel: #F0870E; // @presenter Color
-  --tag-action-color-topic: #F0870E; // @presenter Color
-  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-channel: #F5AD5B; // @presenter Color
+  --tag-action-color-topic: #F5AD5B; // @presenter Color
+  --tag-action-color-queue: #F7A7CF; // @presenter Color
   --tag-action-color-exchange: #C79CF2; // @presenter Color
 
   .tag-grey,

package/src/components/Tag/variables.ts

@@ -197,7 +197,7 @@ export const tag = css`
 
   --tag-action-color-receive: #4db144; // @presenter Color
   --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-consume: #4db144; // @presenter Color
+  --tag-action-color-cons: #4db144; // @presenter Color
 
   --tag-action-color-send: #4144f6; // @presenter Color
   --tag-action-color-pub: #4144f6; // @presenter Color
@@ -248,8 +248,8 @@ export const tag = css`
       --tag-color: var(--tag-action-color-sub); // @presenter Color
   }
 
-  .tag-consume {
-      --tag-color: var(--tag-action-color-consume); // @presenter Color
+  .tag-cons {
+      --tag-color: var(--tag-action-color-cons); // @presenter Color
   }
 
   .tag-publish {

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -13,7 +13,7 @@ export const useThemeHooks = jest.fn(() => ({
   })),
   useBreadcrumbs: jest.fn().mockReturnValue([]),
   usePageSharedData: jest.fn().mockReturnValue({}),
-  useCatalog: jest.fn(() => ({
+  useCatalogLegacy: jest.fn(() => ({
     groups: [],
     filters: [],
     filterTerm: '',

package/src/core/styles/global.ts

@@ -8,7 +8,7 @@ import { sidebar } from '@redocly/theme/components/Sidebar/variables';
 import { breadcrumbs } from '@redocly/theme/components/Breadcrumbs/variables';
 import { tag } from '@redocly/theme/components/Tag/variables';
 import { toc } from '@redocly/theme/components/TableOfContent/variables';
-import { catalog } from '@redocly/theme/components/Catalog/variables';
+import { catalog } from '@redocly/theme/components/CatalogLegacy/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
 import { select } from '@redocly/theme/components/Select/variables';

package/src/core/types/hooks.ts

@@ -34,6 +34,7 @@ export type ThemeHooks = {
   useI18nConfig: () => L10nConfig;
   useL10n: () => {
     changeLanguage: (lng?: string | undefined, callback?: Callback | undefined) => Promise<TFunc>;
+    lang: string;
   };
   useL10nConfig: () => L10nConfig;
   useCurrentProduct: () => ProductUiConfig | undefined;
@@ -115,7 +116,7 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
-  useCatalog: (config: CatalogConfig) => FilteredCatalog;
+  useCatalogLegacy: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
   useOtelTelemetry: () => { send(action: OtelTelemetryEvent, data: unknown): void };
   useUserTeams: () => string[];

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+export interface AiStarsGradientIconProps extends IconProps {
+  background?: string;
+  borderRadius?: string;
+  padding?: string;
+  margin?: string;
+}
+
+const Icon = (props: AiStarsGradientIconProps) => {
+  const { color = '', background, borderRadius, padding, margin, ...restProps } = props;
+
+  const resolvedColor = color.startsWith('var(')
+    ? getComputedStyle(document.documentElement).getPropertyValue(color.slice(4, -1)).trim()
+    : color;
+
+  const isColorOverridden = resolvedColor && resolvedColor !== 'none';
+  const fill = isColorOverridden ? resolvedColor : 'url(#gradient)';
+
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...restProps}>
+      {!isColorOverridden && (
+        <defs>
+          <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
+            <stop offset="0%" stopColor="#715efe" />
+            <stop offset="100%" stopColor="#ff5cdc" />
+          </linearGradient>
+        </defs>
+      )}
+      <path
+        d="M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z"
+        fill={fill}
+      />
+      <path
+        d="M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};
+
+export const AiStarsGradientIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AiStarsGradientIcon/AiStarsGradientIcon',
+}))<AiStarsGradientIconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+
+  ${({ background, borderRadius, margin }) =>
+    background &&
+    `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: ${getCssColorVariable(background)};
+
+      padding: var(--spacing-xs);
+      margin: ${margin || '0'};
+      
+      border-radius: ${background && borderRadius ? borderRadius : 'none'};
+    `}
+
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -6,7 +6,6 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 export interface AiStarsIconProps extends IconProps {
-  gradient?: boolean;
   background?: string;
   borderRadius?: string;
   padding?: string;
@@ -14,22 +13,17 @@ export interface AiStarsIconProps extends IconProps {
 }
 
 const Icon = (props: AiStarsIconProps) => {
-  const { gradient: _, background, borderRadius, padding, margin, ...restProps } = props;
+  const { color, background, borderRadius, padding, margin, ...restProps } = props;
+
   return (
     <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...restProps}>
-      <defs>
-        <linearGradient id="aiStarsGradient" x1="0" y1="0" x2="1" y2="0">
-          <stop offset="0%" stopColor="#715efe" />
-          <stop offset="100%" stopColor="#ff5cdc" />
-        </linearGradient>
-      </defs>
       <path
         d="M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z"
-        fill="#1A1C21"
+        fill={getCssColorVariable(color)}
       />
       <path
         d="M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z"
-        fill="#1A1C21"
+        fill={getCssColorVariable(color)}
       />
     </svg>
   );
@@ -38,27 +32,22 @@ const Icon = (props: AiStarsIconProps) => {
 export const AiStarsIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/AiStarsIcon/AiStarsIcon',
 }))<AiStarsIconProps>`
-  path {
-    fill: ${({ color, gradient }) =>
-      gradient ? 'url(#aiStarsGradient)' : getCssColorVariable(color)};
-  }
-
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
   ${({ background, borderRadius, margin }) =>
     background &&
     `
-    display: flex;
-    align-items: center;
-    justify-content: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      background: ${getCssColorVariable(background)};
 
-    background: ${getCssColorVariable(background)};
-    
-    padding: var(--spacing-xs);
-    margin: ${margin || '0'};
-    
-    border-radius: ${background && borderRadius ? borderRadius : 'none'};
+      padding: var(--spacing-xs);
+      margin: ${margin || '0'};
+      
+      border-radius: ${background && borderRadius ? borderRadius : 'none'};
     `}
 
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/RabbitMQIcon/RabbitMQIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clipPath="url(#clip0_15358_36168)">
+      <path
+        d="M13.1 6.8695H9.555C9.2715 6.8355 9.0555 6.586 9.0555 6.292V2.572C9.056 2.255 8.7985 2 8.484 2H7.2435C6.926 2 6.671 2.2575 6.671 2.5725V6.3315C6.6555 6.6155 6.4215 6.8435 6.1405 6.8695H5.212C4.939 6.836 4.728 6.607 4.71 6.33V2.5725C4.71 2.255 4.4525 2 4.138 2H2.897C2.58 2 2.325 2.2575 2.325 2.5725V7.442V13.4275C2.325 13.745 2.5825 14 2.897 14H4.1375H7.2425H8.483H13.1025C13.42 14 13.675 13.7425 13.675 13.4275V7.442C13.673 7.125 13.4175 6.8695 13.1 6.8695ZM11.4665 10.9745C11.4665 11.292 11.209 11.5495 10.8945 11.5495H9.6545C9.3365 11.5495 9.081 11.292 9.081 10.9745V9.804C9.081 9.486 9.3385 9.2295 9.6545 9.2295H10.8945C11.2125 9.2295 11.4665 9.487 11.4665 9.804V10.9745Z"
+        fill="#1A1C21"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_15358_36168">
+        <rect width="12" height="12" fill="white" transform="translate(2 2)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const RabbitMQIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RabbitMQIcon/RabbitMQIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -116,12 +116,12 @@ export * from '@redocly/theme/components/Menu/MenuMobile';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 export * from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 /* Catalog */
-export * from '@redocly/theme/components/Catalog/Catalog';
-export * from '@redocly/theme/components/Catalog/CatalogCard';
-export * from '@redocly/theme/components/Catalog/CatalogActions';
-export * from '@redocly/theme/components/Catalog/CatalogHighlight';
-export * from '@redocly/theme/components/Catalog/CatalogInfoBlock';
-export * from '@redocly/theme/components/Catalog/CatalogVirtualizedGroups';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacy';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacyCard';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacyActions';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacyHighlight';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacyInfoBlock';
+export * from '@redocly/theme/components/CatalogLegacy/CatalogLegacyVirtualizedGroups';
 /* Product */
 export * from '@redocly/theme/components/Product/Product';
 export * from '@redocly/theme/components/Product/ProductPicker';
@@ -249,7 +249,10 @@ export * from '@redocly/theme/icons/CheckboxFilledIcon/CheckboxFilledIcon';
 export * from '@redocly/theme/icons/WarningAltFilled/WarningAltFilled';
 export * from '@redocly/theme/icons/SettingsCogIcon/SettingsCogIcon';
 export * from '@redocly/theme/icons/KafkaIcon/KafkaIcon';
+export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
+export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
+export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -91,6 +91,11 @@ const ContentWrapper = styled.div`
   & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
+  & > ul:not(.code-step-wrapper),
+  & > ol:not(.code-step-wrapper) {
+    padding-left: calc(var(--spacing-xl) + var(--md-list-left-padding));
+  }
+
   overflow-y: scroll;
 
   /* Hide scrollbar for Chrome, Safari and Opera */

package/lib/components/Catalog/CatalogCard.d.ts

@@ -1,5 +0,0 @@
-import type { CatalogItem } from '../../core/types';
-export type CatalogCardProps = {
-    item: CatalogItem;
-};
-export declare function CatalogCard({ item }: CatalogCardProps): JSX.Element;

package/lib/components/Catalog/CatalogHighlight.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-export declare const HighlightContext: React.Context<string[]>;
-export type CatalogHighlightProps = React.PropsWithChildren;
-export declare function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null;

package/lib/components/Catalog/variables.js

@@ -1,109 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.catalog = void 0;
-const styled_components_1 = require("styled-components");
-exports.catalog = (0, styled_components_1.css) `
-  /* === Catalog === */
-  /**
-    * @tokens Catalog page
-    */
-  --catalog-page-padding-vertical: var(--spacing-lg);
-  --catalog-page-padding-horizontal: var(--spacing-xl);
-  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
-
-  --catalog-filter-padding-vertical-mobile: 0;
-  --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
-
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
-
-  /**
-    * @tokens Catalog page title
-    */
-  --catalog-title-text-color: var(--text-color-primary);
-  --catalog-title-font-weight: var(--font-weight-bold);
-  --catalog-title-font-size: var(--font-size-heading-3);
-  --catalog-title-margin: 0 0 var(--spacing-sm) 0;
-
-  /**
-    * @tokens Catalog page description
-    */
-  --catalog-description-text-color: var(--text-color-secondary);
-  --catalog-description-font-weight: var(--font-weight-regular);
-  --catalog-description-font-size: var(--font-size-base);
-  --catalog-description-margin: 0 0 var(--spacing-sm) 0;
-
-  /**
-    * @tokens Catalog page separator
-    */
-  --catalog-separator-color: var(--text-color-secondary);
-  --catalog-separator-font-size: var(--font-size-base);
-  --catalog-separator-font-weight: var(--font-weight-regular);
-  --catalog-separator-border-color: var(--border-color-secondary);
-  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
-  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
-  --catalog-separator-label-margin: 0 var(--spacing-xs);
-
-  /**
-    * @tokens Catalog card
-    */
-  --catalog-card-min-height: 194px;
-  --catalog-card-min-width: 260px;
-  --catalog-card-padding-vertical: var(--spacing-base);
-  --catalog-card-padding-horizontal: var(--spacing-md);
-  --catalog-card-gap: var(--spacing-sm);
-  --catalog-card-text-color: var(--text-color-secondary);
-  --catalog-card-font-size: var(--font-size-base);
-  --catalog-card-font-weight: var(--font-weight-regular);
-  --catalog-card-bg-color: var(--layer-color);
-  --catalog-card-border-color: var(--border-color-secondary);
-  --catalog-card-border-width: var(--border-width);
-  --catalog-card-border-style: var(--border-style);
-  --catalog-card-border-color-hover: var(--border-color-primary);
-  --catalog-card-border-radius: var(--border-radius-xxl);
-  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
-  --catalog-cards-group-gap: var(--spacing-xl);
-
-  /**
-    * @tokens Catalog card title
-    */
-  --catalog-card-title-color: var(--text-color-primary);
-  --catalog-card-title-min-height: var(--spacing-xxl);
-  --catalog-card-title-font-size: var(--font-size-lg);
-  --catalog-card-title-font-weight: var(--font-weight-bold);
-  --catalog-card-title-line-height: var(--line-height-lg);
-  --catalog-card-title-line-clamp: 2;
-
-  /**
-    * @tokens Catalog card description
-    */
-  --catalog-card-description-line-clamp: 3;
-  --catalog-card-description-color: var(--text-color-secondary);
-  --catalog-card-description-font-size: var(--font-size-base);
-  --catalog-card-description-line-height: var(--line-height-base);
-  --catalog-card-description-font-weight: var(--font-weight-regular);
-  --catalog-card-description-height: 62px;
-
-  --catalog-card-content-gap: var(--spacing-xxs);
-
-  --catalog-card-tag-bg: transparent;
-
-  --catalog-highlight-bg-color: none;
-  --catalog-highlight-text-color: var(--color-info-base);
-
-  --catalog-actions-gap: var(--spacing-xs);
-  --catalog-actions-padding-vertical: var(--spacing-xs);
-  --catalog-actions-padding-horizontal: 5%;
-  --catalog-actions-min-height: 40px;
-  --catalog-actions-bg-color: var(--bg-color-tonal);
-
-  --catalog-page-badge-border-radius: var(--border-radius);
-  --catalog-page-badge-padding: 0 var(--spacing-xs);
-  --catalog-page-badge-font-size: var(--font-size-base);
-  --catalog-page-badge-line-height: var(--line-height-base);
-
-  --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
-
-  // @tokens End
-`;
-//# sourceMappingURL=variables.js.map

package/src/components/Catalog/variables.ts

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