@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/lib/utils/isUrl.js

@@ -1,37 +0,0 @@
-"use strict";
-/**
- * RegExps.
- * A URL must match #1 and then at least one of #2/#3.
- * Use two levels of REs to avoid REDOS.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isUrl = void 0;
-const protocolAndDomainRE = /^(?:\w+:)?\/\/(\S+)$/;
-const localhostDomainRE = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
-const nonLocalhostDomainRE = /^[^\s.]+\.\S{2,}$/;
-/**
- * Loosely validate a URL `string`.
- *
- * @param {String} input
- * @return {Boolean}
- */
-function isUrl(input) {
-    if (typeof input !== 'string') {
-        return false;
-    }
-    const match = input.match(protocolAndDomainRE);
-    if (!match) {
-        return false;
-    }
-    const everythingAfterProtocol = match[1];
-    if (!everythingAfterProtocol) {
-        return false;
-    }
-    if (localhostDomainRE.test(everythingAfterProtocol) ||
-        nonLocalhostDomainRE.test(everythingAfterProtocol)) {
-        return true;
-    }
-    return false;
-}
-exports.isUrl = isUrl;
-//# sourceMappingURL=isUrl.js.map

package/lib/utils/jsUtils.d.ts

@@ -1,4 +0,0 @@
-export declare function findDeepFirst<T extends {
-    items?: T[];
-}>(list: T[], cb: (item: T) => boolean): T | undefined;
-export declare function toStringIfDefined(value: unknown): string | undefined;

package/lib/utils/jsUtils.js

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toStringIfDefined = exports.findDeepFirst = void 0;
-function findDeepFirst(list, cb) {
-    for (const item of list) {
-        if (cb(item) === true) {
-            return item;
-        }
-        if (item.items) {
-            const nestedRes = findDeepFirst(item.items, cb);
-            if (nestedRes !== undefined)
-                return nestedRes;
-        }
-    }
-}
-exports.findDeepFirst = findDeepFirst;
-function toStringIfDefined(value) {
-    return value == undefined ? undefined : String(value);
-}
-exports.toStringIfDefined = toStringIfDefined;
-//# sourceMappingURL=jsUtils.js.map

package/lib/utils/jsonToHtml.d.ts

@@ -1,4 +0,0 @@
-type JsonValue = JSON | Record<string, unknown>;
-export declare function jsonToHTML(json: JsonValue, maxExpandLevel: number, startLine?: number): string;
-export declare function getLines(json: JsonValue, maxExpandLevel: number): string;
-export {};

package/lib/utils/jsonToHtml.js

@@ -1,180 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLines = exports.jsonToHTML = void 0;
-// Moved from reference-docs
-let level = 0;
-let line = 1;
-const ellipsis = '<span class="ellipsis"></span>';
-const colon = '<span class="colon">: </span>';
-function jsonToHTML(json, maxExpandLevel, startLine = 1) {
-    level = 0;
-    line = startLine;
-    let output = '';
-    output += '<div data-cy="json-sample" class="redoc-json">';
-    output += '<code>';
-    output += getLines(json, maxExpandLevel);
-    output += '</code>';
-    output += '</div>';
-    return output;
-}
-exports.jsonToHTML = jsonToHTML;
-function htmlEncode(t) {
-    return t !== undefined
-        ? t
-            .toString()
-            .replace(/&/g, '&amp;')
-            .replace(/"/g, '&quot;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-        : '';
-}
-function stringifyStringLiteral(str) {
-    return JSON.stringify(str).slice(1, -1);
-}
-function decorateWithSpan(value, className) {
-    return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
-}
-function punctuation(val) {
-    return '<span class="token punctuation">' + val + '</span>';
-}
-function collapser(maxExpandLevel) {
-    const collapsed = level > maxExpandLevel ? 'expand' : 'collapse';
-    return `<button class="collapser" aria-label="${collapsed}"></button>`;
-}
-function getLines(json, maxExpandLevel) {
-    const collapsibleLines = [];
-    const lines = valueToHTML(json, maxExpandLevel, 'root');
-    let nextLine = lines.next();
-    while (!nextLine.done) {
-        collapsibleLines.push(nextLine.value);
-        nextLine = lines.next();
-    }
-    collapsibleLines.push(nextLine.value);
-    return collapsibleLines.join('\n');
-}
-exports.getLines = getLines;
-function* valueToHTML(value, maxExpandLevel, context) {
-    const valueType = typeof value;
-    if (value === undefined || value === null) {
-        return decorateWithSpan('null', 'token keyword');
-    }
-    else if (value && value.constructor === Array) {
-        const length = typeof value.length === 'number' ? value.length : 0;
-        if (!length) {
-            return punctuation('[ ]');
-        }
-        level++;
-        yield context === 'root'
-            ? `<span data-line="${line++}">${punctuation('[')}</span>`
-            : punctuation('[');
-        for (const line of arrayToHTML(value, length, maxExpandLevel)) {
-            yield line;
-        }
-        level--;
-        return `<span data-line="${line++}">${punctuation(']')}</span>`;
-    }
-    else if (value && value.constructor === Date) {
-        return decorateWithSpan('"' + value.toISOString() + '"', 'token string');
-    }
-    else if (valueType === 'object') {
-        const keys = Object.keys(value);
-        if (!keys.length) {
-            return punctuation('{ }');
-        }
-        level++;
-        yield context === 'root'
-            ? `<span data-line="${line++}">${punctuation('{')}</span>`
-            : punctuation('{');
-        for (const line of objectToHTML(value, keys, maxExpandLevel)) {
-            yield line;
-        }
-        level--;
-        return `<span data-line="${line++}">${punctuation('}')}</span>`;
-    }
-    else if (valueType === 'number') {
-        return decorateWithSpan(value, 'token number');
-    }
-    else if (valueType === 'string') {
-        if (/^(http|https):\/\/[^\s]+$/.test(value)) {
-            return (decorateWithSpan('"', 'token string') +
-                `<a href="${encodeURI(value)}">` +
-                htmlEncode(stringifyStringLiteral(value)) +
-                '</a>' +
-                decorateWithSpan('"', 'token string'));
-        }
-        else {
-            return decorateWithSpan('"' + stringifyStringLiteral(value) + '"', 'token string');
-        }
-    }
-    else if (valueType === 'boolean') {
-        return decorateWithSpan(value, 'token boolean');
-    }
-}
-function getLineTemplate({ isFirstKey, isLastKey, nextLine, context, lineTemplate, maxExpandLevel, }) {
-    let lineValue = isFirstKey ? `${ellipsis}<span class="${context} collapsible">` : '';
-    // Create hoverable
-    lineValue += `<span data-line="${line++}" class="${level > maxExpandLevel ? 'hoverable collapsed' : 'hoverable'}">`;
-    // Add collapser button if item has nested lines
-    lineValue += (!nextLine.done && collapser(maxExpandLevel)) || '';
-    lineValue += lineTemplate;
-    lineValue += nextLine.value;
-    // Add punctuation in case we dont have more nested lines and it is not last item
-    lineValue += nextLine.done && !isLastKey ? punctuation(',') : '';
-    // Close hoverable if we dont have nested lines
-    lineValue += nextLine.done ? '</span>' : '';
-    // Close collapsible if value is single line and we are on last item
-    lineValue += nextLine.done && isLastKey ? '</span>' : '';
-    return lineValue;
-}
-function* arrayToHTML(array, arrayLength, maxExpandLevel) {
-    for (let i = 0; i < arrayLength; i++) {
-        const lines = valueToHTML(array[i], maxExpandLevel, 'array');
-        const isFirstKey = i === 0;
-        const isLastKey = i === arrayLength - 1;
-        let nextLine = lines.next();
-        yield getLineTemplate({
-            context: 'array',
-            isFirstKey,
-            isLastKey,
-            nextLine,
-            lineTemplate: '',
-            maxExpandLevel,
-        });
-        nextLine = lines.next();
-        while (!nextLine.done) {
-            yield nextLine.value;
-            nextLine = lines.next();
-        }
-        if (nextLine.value) {
-            // Close hoverable and collapsible (if last array item)
-            yield `${nextLine.value}${i < arrayLength - 1 ? punctuation(',') : '</span>'}</span>`;
-        }
-    }
-}
-function* objectToHTML(object, keys, maxExpandLevel) {
-    for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        const lines = valueToHTML(object[key], maxExpandLevel, 'object');
-        const isFirstKey = i === 0;
-        const isLastKey = i === keys.length - 1;
-        let nextLine = lines.next();
-        yield getLineTemplate({
-            context: 'obj',
-            isFirstKey,
-            isLastKey,
-            nextLine,
-            lineTemplate: `<span class="property token string">"${htmlEncode(key)}"</span>${colon}`,
-            maxExpandLevel,
-        });
-        nextLine = lines.next();
-        while (!nextLine.done) {
-            yield nextLine.value;
-            nextLine = lines.next();
-        }
-        if (nextLine.value) {
-            // Close hoverable and collapsible (if last field)
-            yield `${nextLine.value}${isLastKey ? '</span>' : punctuation(',')}</span>`;
-        }
-    }
-}
-//# sourceMappingURL=jsonToHtml.js.map

package/lib/utils/media-css.d.ts

@@ -1,12 +0,0 @@
-export type MediaQueries = {
-    print: string;
-    small: string;
-    medium: string;
-    large: string;
-};
-export declare const breakpoints: {
-    small: string;
-    medium: string;
-    large: string;
-};
-export declare function generateMediaQueries(breakpoints: Omit<MediaQueries, 'print'>): MediaQueries;

package/lib/utils/media-css.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateMediaQueries = exports.breakpoints = void 0;
-exports.breakpoints = { small: '50rem', medium: '85rem', large: '105rem' };
-function generateMediaQueries(breakpoints) {
-    const result = { print: '@media print' };
-    for (const [key, value] of Object.entries(breakpoints)) {
-        result[key] = `@media screen and (min-width: ${value})`;
-    }
-    return result;
-}
-exports.generateMediaQueries = generateMediaQueries;
-//# sourceMappingURL=media-css.js.map

package/lib/utils/replaceHashInColor.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.replaceHashInColor = void 0;
-function replaceHashInColor(color) {
-    return color.replace('#', '%23');
-}
-exports.replaceHashInColor = replaceHashInColor;
-//# sourceMappingURL=replaceHashInColor.js.map

package/lib/utils/urls.d.ts

@@ -1,11 +0,0 @@
-export declare function combineUrls(baseURL: string, ...relativeURLs: string[]): string;
-export declare function withPathPrefix(url: string): string;
-export declare function withoutPathPrefix(pathname: string): string;
-export declare function withoutHash(url: undefined | null): undefined;
-export declare function withoutHash(url: string): string;
-export declare function withoutHash(url: string | undefined): string | undefined;
-export declare function getPathPrefix(): string;
-export declare function normalizePathPrefix(prefix: string): string;
-export declare function addLeadingSlash(url: string): string;
-export declare function removeTrailingSlash(url: string): string;
-export declare function removeLeadingSlash(url: string): string;

package/lib/utils/urls.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.removeLeadingSlash = exports.removeTrailingSlash = exports.addLeadingSlash = exports.normalizePathPrefix = exports.getPathPrefix = exports.withoutHash = exports.withoutPathPrefix = exports.withPathPrefix = exports.combineUrls = void 0;
-function combineUrls(baseURL, ...relativeURLs) {
-    let res = baseURL;
-    for (let relativeURL of relativeURLs) {
-        res = relativeURL
-            ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
-            : res;
-    }
-    return res;
-}
-exports.combineUrls = combineUrls;
-function withPathPrefix(url) {
-    return combineUrls(getPathPrefix(), url);
-}
-exports.withPathPrefix = withPathPrefix;
-function withoutPathPrefix(pathname) {
-    const pathPrefix = getPathPrefix();
-    return pathPrefix && pathname.startsWith(pathPrefix)
-        ? pathname.slice(pathPrefix.length)
-        : pathname;
-}
-exports.withoutPathPrefix = withoutPathPrefix;
-function withoutHash(url) {
-    if (url == null)
-        return undefined;
-    return url.split('#')[0];
-}
-exports.withoutHash = withoutHash;
-function getPathPrefix() {
-    if (process.env.REDOCLY_PREFIX_PATHS) {
-        return normalizePathPrefix(process.env.REDOCLY_PREFIX_PATHS);
-    }
-    return '';
-}
-exports.getPathPrefix = getPathPrefix;
-function normalizePathPrefix(prefix) {
-    const withoutTrailing = removeTrailingSlash(prefix);
-    return addLeadingSlash(withoutTrailing === '.' ? '' : withoutTrailing);
-}
-exports.normalizePathPrefix = normalizePathPrefix;
-function addLeadingSlash(url) {
-    return url.startsWith('/') ? url : `/${url}`;
-}
-exports.addLeadingSlash = addLeadingSlash;
-function removeTrailingSlash(url) {
-    return url.endsWith('/') ? url.substring(0, url.length - 1) : url;
-}
-exports.removeTrailingSlash = removeTrailingSlash;
-function removeLeadingSlash(url) {
-    return url.startsWith('/') ? url.substring(1) : url;
-}
-exports.removeLeadingSlash = removeLeadingSlash;
-//# sourceMappingURL=urls.js.map

package/src/components/Breadcrumbs/index.ts

@@ -1,3 +0,0 @@
-export * from '@theme/components/Breadcrumbs/Breadcrumbs';
-export * from '@theme/components/Breadcrumbs/Breadcrumb';
-export * from '@theme/components/Breadcrumbs/styledVariables';

package/src/components/Breadcrumbs/styledVariables.ts

@@ -1,17 +0,0 @@
-import { css } from 'styled-components';
-
-export const breadcrumbs = css`
-  /**
-   * @tokens Breadcrumbs
-   */
-
-  --breadcrumbs-text-color: var(--text-description); // @presenter Color
-  --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
-  --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
-  --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0; // @presenter Spacing
-  --breadcrumbs-gap: var(--spacing-xs);
-  --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
-
-  // @tokens End
-`;

package/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export * from '@theme/components/Button/Button';
-export * from '@theme/components/Button/styledVariables';

package/src/components/Button/styledVariables.ts

@@ -1,115 +0,0 @@
-import { css } from 'styled-components';
-
-export const button = css`
-  /**
-    * Static classnames that can be used to override styles for components:
-    * download-specification-button, next-section-button, button-base
-    */
-
-  /**
-    * @tokens Button borders
-    */
-
-  --button-border-width: 1px; //@presenter Border
-  --button-border-style: solid; //@presenter Border
-  --button-border-radius: var(--border-radius-md); // @presenter BorderRadius
-  --button-margin: 5px; // @presenter Spacing
-  --button-box-shadow: none; // @presenter Shadow
-  --button-hover-box-shadow: none; // @presenter Shadow
-  --button-active-box-shadow: none; // @presenter Shadow
-
-  /**
-    * @tokens Button typography
-    */
-
-  --button-font-size: var(--font-size-base); // @presenter FontSize
-  --button-font-family: inherit; // @presenter FontFamily
-  --button-font-weight: var(--font-weight-bold); // @presenter FontWeight
-
-  --button-default-font-size: var(--font-size-base); // @presenter FontSize
-  --button-default-padding: 8px 16px;
-
-  --button-small-font-size: var(--font-size-base); // @presenter FontSize
-  --button-small-padding: 4px 8px;
-
-  --button-large-font-size: var(--font-size-lg); // @presenter FontSize
-  --button-large-padding: 8px 16px;
-
-  --button-text-wrap: nowrap;
-
-  /**
-    * @tokens Button icon
-    */
-  --button-icon-width: 1em; // @presenter Spacing
-  --button-icon-height: 1em; // @presenter Spacing
-
-  /**
-    * @tokens Button default
-    */
-  .button-default {
-    --button-color: var(--text-primary); // @presenter Color
-    --button-background-color: var(--bg-overlay); // @presenter Color
-    --button-border-color: var(--bg-overlay);
-    --button-outlined-color: var(--text-primary);
-
-
-    --button-hover-background-color: var(--bg-overlay); // @presenter Color
-    --button-hover-border-color: var(--border-primary); // @presenter Color
-    --button-outlined-hover-color: var(--text-primary); // @presenter Color
-
-    --button-active-background-color: var(--bg-overlay); // @presenter Color
-    --button-active-border-color: var(--button-color); // @presenter Color
-    --button-outlined-active-color: var(--bg-overlay); // @presenter Color
-
-    --button-disabled-color: var(--text-placeholder); // @presenter Color
-    --button-disabled-background-color: var(--bg-raised); // @presenter Color
-    --button-disabled-border-color: var(--border-secondary); // @presenter Color
-  }
-
-  /**
-    * @tokens Button primary
-    */
-  .button-primary {
-    --button-color: var(--text-light-solid); // @presenter Color
-    --button-background-color: var(--color-primary); // @presenter Color
-    --button-border-color: var(--color-primary); // @presenter Color
-    --button-border: 1px solid var(--button-border-color);
-    --button-outlined-color: var(--color-primary);
-
-    --button-hover-background-color: var(--color-primary-hover); // @presenter Color
-    --button-hover-border-color: var(--color-primary-hover); // @presenter Color
-    --button-outlined-hover-color: var(--color-primary-hover);
-
-    --button-active-background-color: var(--color-primary-active); // @presenter Color
-    --button-active-border-color: var(--color-primary-active); // @presenter Color
-    --button-outlined-active-color: var(--color-primary-active); // @presenter Color
-
-    --button-disabled-color: var(--text-placeholder); // @presenter Color
-    --button-disabled-background-color: var(--bg-raised); // @presenter Color
-    --button-disabled-border-color: var(--border-secondary); // @presenter Color
-  }
-
-  /**
-    * @tokens Button outline
-    */
-  .button-outlined {
-    background-color: transparent;
-    --button-color: var(--button-outlined-color); // @presenter Color
-    --button-hover-color: var(--button-outlined-hover-color); // @presenter Color
-  }
-
-  /**
-    * @tokens Button text
-    */
-  .button-text {
-    --button-color: var(--text-secondary); // @presenter Color
-    --button-border-color: transparent; // @presenter Color
-    --button-background-color: transparent; // @presenter Color
-
-    --button-hover-color: var(--text-primary); // @presenter Color
-    --button-hover-background-color: transparent; // @presenter Color
-    --button-hover-border-color: transparent; // @presenter Color
-  }
-
-  // @tokens End
-`;

package/src/components/Cards/Card.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { Link } from '@portal/Link';
-import { H3 } from '@theme/components/Typography/H3';
-import type { ResolvedNavItem } from '@theme/types/portal';
-import { useTranslate } from '@portal/hooks';
-
-export interface CardProps {
-  title?: string;
-  icon?: string;
-  links: ResolvedNavItem;
-  className?: string;
-}
-
-export function Card(props: CardProps): JSX.Element {
-  const { translate } = useTranslate();
-  return (
-    <CardWrapper data-component-name="Cards/Card" className={props.className}>
-      {props.icon && <img src={props?.icon} alt={props?.title} />}
-      {props.title && <H3>{props.title}</H3>}
-      {props.links.items && (
-        <CardLinksList>
-          {props.links.items.map((item) => (
-            <li key={item.label}>
-              <Link to={item.link as string}>
-                {translate(item.labelTranslationKey, item.label)}
-              </Link>
-            </li>
-          ))}
-        </CardLinksList>
-      )}
-    </CardWrapper>
-  );
-}
-
-const CardWrapper = styled.div`
-  border-radius: 10px;
-  box-shadow: 0 10px 30px 0 rgba(35, 35, 35, 0.1);
-  padding: 20px;
-  margin: 0 20px 20px 0;
-  min-width: 25%;
-  font-family: var(--font-family-base);
-`;
-
-const CardLinksList = styled.ul`
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-
-  li {
-    margin-bottom: 10px;
-  }
-`;

package/src/components/Cards/CardsBlock.tsx

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-export const CardsBlock = styled.div.attrs<{ className?: string }>(({ className }) => ({
-  'data-component-name': 'Cards/CardsBlock',
-  className,
-}))`
-  display: flex;
-  padding: 20px 0;
-  justify-content: space-between;
-`;

package/src/components/Cards/index.ts

@@ -1,2 +0,0 @@
-export * from './Card';
-export * from './CardsBlock';

package/src/components/Catalog/index.ts

@@ -1,4 +0,0 @@
-export * from '@theme/components/Catalog/Catalog';
-export * from '@theme/components/Catalog/CatalogCard';
-export * from '@theme/components/Catalog/useCatalog';
-export * from '@theme/components/Catalog/styledVariables';

package/src/components/Catalog/styledVariables.ts

@@ -1,94 +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);
-
-  --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
-  --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
-
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
-
-  /**
-    * @tokens Catalog page title
-    */
-  --catalog-title-text-color: var(--text-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-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-secondary);
-  --catalog-separator-font-size: var(--font-size-base);
-  --catalog-separator-font-weight: var(--font-weight-regular);
-  --catalog-separator-border-color: var(--border-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);
-  --catalog-separator-count-height: var(--control-height-xs);
-  --catalog-separator-count-padding: 0 var(--spacing-xxs);
-  --catalog-separator-count-border-radius: var(--border-radius-xlg);
-  --catalog-separator-count-border-color: var(--border-primary);
-  --catalog-separator-count-background: var(--bg-overlay);
-
-  /**
-    * @tokens Catalog card
-    */
-  --catalog-card-min-height: 214px;
-  --catalog-card-text-color: var(--text-secondary);
-  --catalog-card-font-size: var(--font-size-base);
-  --catalog-card-font-weight: var(--font-weight-regular);
-  --catalog-card-background-color: var(--bg-raised);
-  --catalog-card-border-color: var(--border-secondary);
-  --catalog-card-border-width: var(--border-width);
-  --catalog-card-border-style: var(--border-style);
-  --catalog-card-hover-border-color: var(--border-primary);
-  --catalog-card-border-radius: var(--border-radius-lg);
-
-  /**
-    * @tokens Catalog card button
-    */
-  --catalog-card-icon-color: var(--text-secondary);
-  --catalog-card-icon-hover-color: var(--text-primary);
-  --catalog-card-button-hover-background: var(--bg-overlay);
-  --catalog-card-button-height: var(--spacing-xl);
-  --catalog-card-button-width: var(--spacing-xl);
-  --catalog-card-button-border-color: var(--border-secondary);
-  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
-
-  /**
-    * @tokens Catalog card title
-    */
-  --catalog-card-title-color: var(--text-primary);
-  --catalog-card-title-min-height: calc(var(--spacing-unit) * 18);
-  --catalog-card-title-font-size: var(--font-size-lg);
-  --catalog-card-title-font-weight: var(--font-weight-bold);
-  --catalog-card-title-padding-vertical: var(--spacing-sm);
-  --catalog-card-title-padding-horizontal: var(--spacing-base);
-
-  /**
-    * @tokens Catalog card description
-    */
-  --catalog-card-description-line-clamp: 3;
-  --catalog-card-description-margin-bottom: var(--spacing-base);
-  --catalog-card-content-background-color: var(--bg-base);
-  --catalog-card-content-border-radius: var(--border-radius-lg);
-  --catalog-card-content-padding: var(--spacing-base);
-  
-  // @tokens End
-`;