@redocly/theme 0.41.0 → 0.42.0

package/lib/components/Dropdown/DropdownMenuItem.js

@@ -53,12 +53,12 @@ function DropdownMenuItem(_a) {
     };
     className = className || '' + (active ? ' active' : '');
     if (to) {
-        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, separatorLine: separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
+        return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ as: Link_1.Link, "data-component-name": "Dropdown/DropdownMenuItem", className: className, "$separatorLine": separatorLine, to: to, style: style, role: role }, dataAttributes, otherProps),
             prefix,
             children,
             suffix));
     }
-    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ "data-component-name": "Dropdown/DropdownMenuItem", className: className, role: role, style: style }, dataAttributes, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1, active: active, disabled: disabled, separator: separator, dangerous: dangerous, separatorLine: separatorLine }),
+    return (react_1.default.createElement(DropdownMenuItemWrapper, Object.assign({ "data-component-name": "Dropdown/DropdownMenuItem", className: className, role: role, style: style }, dataAttributes, { onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: onAction ? 0 : -1, active: active, disabled: disabled, separator: separator, dangerous: dangerous, "$separatorLine": separatorLine }),
         prefix,
         children || content,
         suffix));
@@ -130,7 +130,7 @@ const DropdownMenuItemWrapper = styled_components_1.default.li `
       }
     `}
 
-  ${({ separatorLine }) => separatorLine &&
+  ${({ $separatorLine }) => $separatorLine &&
     (0, styled_components_1.css) `
       border-bottom: 1px solid var(--dropdown-menu-item-separator-border-color);
       border-bottom-left-radius: 0;

package/lib/core/styles/dark.js

@@ -11,6 +11,7 @@ const variables_dark_6 = require("../../icons/CheckboxIcon/variables.dark");
 const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
 const variables_dark_9 = require("../../components/Switch/variables.dark");
+const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
     * @tokens Replay Colors
@@ -301,7 +302,7 @@ exports.darkMode = (0, styled_components_1.css) `
   ${variables_dark_1.scorecardDarkMode}
   ${replayDarkMode}
   ${variables_dark_9.switcherDarkMode}
-
+  ${variables_dark_10.cardsDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/lib/core/styles/global.js

@@ -37,6 +37,7 @@ const variables_31 = require("../../components/Tags/variables");
 const variables_32 = require("../../components/VersionPicker/variables");
 const variables_33 = require("../../components/DatePicker/variables");
 const variables_34 = require("../../components/Switch/variables");
+const variables_35 = require("../../markdoc/components/Cards/variables");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
   /**
@@ -1135,6 +1136,7 @@ exports.styles = (0, styled_components_1.css) `
     ${borders}
     ${variables_5.breadcrumbs}
     ${variables_17.button}
+    ${variables_35.cards}
     ${variables_8.catalog}
     ${variables_21.code}
     ${docsDropdown}

package/lib/markdoc/components/Cards/Card.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type CardProps = React.PropsWithChildren<{
+    title: string;
+    image?: string;
+    icon?: string;
+    iconRawContent?: string;
+    imagePosition?: 'start' | 'end';
+    lineClamp?: number;
+    layout?: 'horizontal' | 'vertical' | 'combined';
+    variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
+    iconVariant?: 'filled' | 'ghost';
+    align: 'start' | 'center' | 'end';
+    to?: string;
+}>;
+export declare function Card({ title, image, icon, iconRawContent, imagePosition, layout, variant, lineClamp, iconVariant, align, to, children, }: CardProps): React.JSX.Element;

package/lib/markdoc/components/Cards/Card.js

@@ -0,0 +1,166 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
+const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
+const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
+function Card({ title, image, icon, iconRawContent, imagePosition = 'start', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
+    const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+    const cardTitleId = `card-title-${titleNoSpaces}`;
+    // Get align values
+    const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
+    const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
+    const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
+    iconVariant = (iconVariant !== null && iconVariant !== void 0 ? iconVariant : variant === 'ghost') ? 'filled' : 'ghost';
+    return (react_1.default.createElement(CardWrapper, { as: to ? 'a' : 'div', href: to, "aria-labelledby": cardTitleId, variant: variant, layout: layout, isCardLink: !!to },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
+            react_1.default.createElement(CardContentWrapper, { layout: layout, alignItems: alignItems, textAlign: textAlign, hasImage: image !== undefined },
+                icon && react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent }),
+                react_1.default.createElement(ContentWrapper, null,
+                    react_1.default.createElement(Title, { id: cardTitleId, isCardLink: !!to, justifyContent: justifyContent },
+                        title,
+                        !!to && react_1.default.createElement(CardLinkIcon, null)),
+                    react_1.default.createElement(Body, { lineClamp: lineClamp }, children))))));
+}
+exports.Card = Card;
+const CardContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  gap: var(--card-icon-gap);
+  align-items: ${({ alignItems }) => alignItems};
+  text-align: ${({ textAlign }) => textAlign};
+  flex-grow: 1;
+  padding: var(--card-padding);
+  height: ${({ hasImage }) => (hasImage ? 'auto' : '100%')};
+`;
+const ContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  gap: var(--card-content-gap);
+`;
+const Title = styled_components_1.default.h3 `
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+  color: var(--card-title-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: ${({ justifyContent }) => justifyContent};
+  width: 100%;
+`;
+const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
+  width: var(--card-link-icon-width);
+  height: var(--card-link-icon-height);
+  margin-left: var(--spacing-xxs);
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+`;
+const Body = styled_components_1.default.div `
+  color: var(--card-text-color);
+  font-size: var(--card-body-font-size);
+  line-height: var(--card-body-line-height);
+
+  ${({ lineClamp }) => lineClamp &&
+    `
+  display: -webkit-box;
+  -webkit-line-clamp: ${lineClamp};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;`}
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Icon link styles */
+  & a {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+
+    & svg {
+      width: 1.2em;
+      height: 1.2em;
+      margin-right: 0.25em;
+      vertical-align: middle;
+
+      & g {
+        fill: var(--link-color-primary);
+      }
+    }
+  }
+
+  & a:visited > span > svg > g {
+    fill: var(--link-color-visited);
+  }
+`;
+const CardWrapper = styled_components_1.default.div.attrs(({ isCardLink, variant }) => ({
+    className: getCardWrapperClass(isCardLink, variant),
+})) `
+  display: flex;
+  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  width: 100%;
+  height: 100%;
+  border-radius: var(--card-border-radius);
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  position: relative;
+  --md-paragraph-margin: 0;
+  --link-decoration-hover: none;
+
+  background-color: var(--card-bg-color);
+  border-width: var(--card-border-width);
+  border-style: var(--card-border-style);
+  border-color: var(--card-border-color);
+  box-shadow: var(--card-box-shadow);
+
+  && > img {
+    ${({ layout }) => layout === 'horizontal' &&
+    `
+      max-width: 33%;
+      width: auto;
+      height: 100%;
+      object-fit: cover;
+    `}
+  }
+
+  &.card-link {
+    cursor: var(--card-link-cursor);
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--card-bg-color-hover);
+      border-color: var(--card-border-color-hover);
+      box-shadow: var(--card-box-shadow-hover);
+
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  && ul {
+    list-style: none;
+    padding-left: 0;
+    margin: var(--spacing-xs) 0;
+  }
+`;
+const getCardWrapperClass = (isCardLink, variant) => {
+    let classes = [];
+    classes.push(`card-variant-${variant}`);
+    if (isCardLink) {
+        classes.push('card-link');
+    }
+    return classes.join(' ');
+};
+//# sourceMappingURL=Card.js.map

package/lib/markdoc/components/Cards/CardIcon.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CardIconProps = {
+    variant?: string;
+    src: string;
+    rawContent?: string;
+};
+export declare function CardIcon({ variant, src, rawContent }: CardIconProps): React.JSX.Element;

package/lib/markdoc/components/Cards/CardIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const InlineSvg_1 = require("../../../markdoc/components/InlineSvg/InlineSvg");
+function CardIcon({ variant, src, rawContent }) {
+    return (react_1.default.createElement(CardIconWrapper, { variant: variant }, rawContent ? react_1.default.createElement(CardSvg, { fileRawContent: rawContent }) : react_1.default.createElement(CardImg, { src: src })));
+}
+exports.CardIcon = CardIcon;
+const CardImg = styled_components_1.default.img `
+  width: var(--card-icon-width);
+  height: var(--card-icon-height);
+  display: inline-block;
+  object-fit: cover;
+`;
+const CardSvg = (0, styled_components_1.default)(InlineSvg_1.InlineSvg) `
+  width: var(--card-icon-width);
+  height: var(--card-icon-height);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--card-icon-color);
+  }
+`;
+const CardIconWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--card-icon-width);
+  min-height: var(--card-icon-height);
+  flex-shrink: 0;
+
+  padding: ${({ variant }) => (variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  border-radius: var(--card-icon-border-radius);
+  overflow: hidden;
+
+  background-color: ${({ variant }) => variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
+  border: ${({ variant }) => variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
+`;
+//# sourceMappingURL=CardIcon.js.map

package/lib/markdoc/components/Cards/CardImage.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type CardImageProps = {
+    src: string;
+    alt: string;
+    position?: 'start' | 'end';
+};
+export declare function CardImage({ src, alt, position }: CardImageProps): React.JSX.Element;

package/lib/markdoc/components/Cards/CardImage.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardImage = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function CardImage({ src, alt, position }) {
+    return react_1.default.createElement(Image, { src: src, alt: alt, position: position });
+}
+exports.CardImage = CardImage;
+const Image = styled_components_1.default.img `
+  width: 100%;
+  height: 100px;
+  flex-shrink: 0;
+  object-fit: cover;
+
+  order: ${({ position }) => (position === 'end' ? 1 : 0)};
+`;
+//# sourceMappingURL=CardImage.js.map

package/lib/markdoc/components/Cards/Cards.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type CardsProps = React.PropsWithChildren<{
+    columns?: number;
+    cardMinWidth?: number;
+    className?: string;
+    ariaLabel?: string;
+}>;
+export declare function Cards({ cardMinWidth, columns, className, children, ariaLabel }: CardsProps): React.JSX.Element;

package/lib/markdoc/components/Cards/Cards.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cards = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Cards({ cardMinWidth = 240, columns, className, children, ariaLabel }) {
+    return (React.createElement(GridLayout, { cardMinWidth: cardMinWidth, columns: columns, className: className, "aria-label": ariaLabel }, children));
+}
+exports.Cards = Cards;
+const GridLayout = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: ${({ cardMinWidth, columns }) => `repeat(${columns || 'auto-fit'}, minmax(${cardMinWidth}px, 1fr))`};
+  gap: var(--cards-gap);
+  width: 100%;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
+`;
+//# sourceMappingURL=Cards.js.map

package/lib/markdoc/components/Cards/variables.d.ts

@@ -0,0 +1 @@
+export declare const cards: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/Cards/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const cardsDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/Cards/variables.dark.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardsDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.cardsDarkMode = (0, styled_components_1.css) `
+  --card-icon-border-color: var(--color-warm-grey-4);
+  --card-icon-bg-color: var(--color-warm-grey-3);
+  
+  .card-variant-filled {
+    --card-bg-color: var(--color-warm-grey-3);
+    --card-bg-color-hover: var(--color-warm-grey-4);
+    --card-border-color: var(--color-warm-grey-4);
+    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-icon-bg-color: var(--card-bg-color);
+  }
+
+  .card-variant-outlined {
+    --card-border-color: var(--color-warm-grey-4);
+    --card-border-color-hover: var(--color-warm-grey-5);
+  }
+  
+  .card-variant-elevated {
+    --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
+    --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
+  }
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Cards/variables.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cards = void 0;
+const styled_components_1 = require("styled-components");
+exports.cards = (0, styled_components_1.css) `
+  --cards-gap: var(--spacing-sm);
+
+  /**
+   * @tokens Card default colors
+   */
+  --card-icon-bg-color: var(--color-warm-grey-1);
+  --card-icon-border-color: var(--border-color-secondary);
+  --card-text-color: var(--text-color-secondary);
+  --card-title-text-color: var(--h2-text-color);
+  --card-icon-color: var(--card-title-text-color);
+
+  /**
+   * @tokens Card default values
+   */
+  --card-border-radius: var(--border-radius-md);
+  --card-border-style: solid;
+  --card-link-cursor: pointer;
+  --card-link-icon-width: var(--h3-font-size);
+  --card-link-icon-height: var(--h3-font-size);
+  --card-border-width: 1px;
+  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-padding: var(--spacing-xs);
+  --card-icon-size: 24px;
+  --card-icon-height: var(--card-icon-size);
+  --card-icon-width: var(--card-icon-size);
+  --card-icon-gap: var(--spacing-base);
+  --card-title-margin: 0;
+  --card-title-font-weight: var(--font-weight-semibold);
+  --card-content-gap: 4px;
+  --card-padding: 16px 20px;
+  --card-body-font-size: var(--font-size-base);
+  --card-body-line-height: var(--line-height-base);
+
+  /**
+   * @tokens Card variants
+   */
+  .card-variant-filled {
+    --card-bg-color: var(--color-warm-grey-1);
+    --card-bg-color-hover: var(--color-warm-grey-2);
+    --card-border-color: var(--color-warm-grey-2);
+    --card-border-color-hover: var(--color-warm-grey-1);
+    --card-icon-bg-color: var(--color-white);
+    --card-icon-border-color: var(--card-border-color);
+  }
+
+  .card-variant-outlined {
+    --card-bg-color: transparent;
+    --card-border-color: var(--color-warm-grey-2);
+    --card-border-color-hover: var(--color-warm-grey-3);
+  }
+
+  .card-variant-elevated {
+    --card-bg-color: transparent;
+    --card-border-color: transparent;
+    --card-border-color-hover: transparent;
+    --card-box-shadow: 0px 8px 24px -4px #232A6114, 0px 6px 12px -6px #232A611F;
+    --card-box-shadow-hover: 0px 14px 64px -4px #232A611F, 0px 8px 22px -6px #232A611F;
+  }
+
+  .card-variant-ghost {
+    --card-bg-color: transparent;
+    --card-border-width: 0;
+  }
+
+`;
+//# sourceMappingURL=variables.js.map

package/lib/markdoc/components/default.d.ts

@@ -7,3 +7,7 @@ export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/Tabs';
 export * from '../../markdoc/components/CodeBlock/CodeBlock';
+export * from '../../markdoc/components/Cards/Cards';
+export * from '../../markdoc/components/Cards/Card';
+export * from '../../markdoc/components/Cards/CardIcon';
+export * from '../../markdoc/components/Cards/CardImage';

package/lib/markdoc/components/default.js

@@ -23,4 +23,8 @@ __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tabs"), exports);
 __exportStar(require("../../markdoc/components/CodeBlock/CodeBlock"), exports);
+__exportStar(require("../../markdoc/components/Cards/Cards"), exports);
+__exportStar(require("../../markdoc/components/Cards/Card"), exports);
+__exportStar(require("../../markdoc/components/Cards/CardIcon"), exports);
+__exportStar(require("../../markdoc/components/Cards/CardImage"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -5,5 +5,9 @@ export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
 export declare const tags: {
-    [x: string]: import("@markdoc/markdoc").Schema;
+    [x: string]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string | undefined;
+        }> | undefined;
+    };
 };

package/lib/markdoc/default.js

@@ -45,6 +45,8 @@ const tabs_1 = require("../markdoc/tags/tabs");
 const debug_1 = require("../markdoc/tags/debug");
 const code_snippet_1 = require("../markdoc/tags/code-snippet");
 const inline_svg_1 = require("../markdoc/tags/inline-svg");
+const cards_1 = require("../markdoc/tags/cards");
+const card_1 = require("../markdoc/tags/card");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -55,5 +57,7 @@ exports.tags = {
     [tabs_1.tabs.tagName]: tabs_1.tabs.schema,
     [code_snippet_1.codeSnippet.tagName]: code_snippet_1.codeSnippet.schema,
     [inline_svg_1.inlineSvg.tagName]: inline_svg_1.inlineSvg.schema,
+    [cards_1.cards.tagName]: cards_1.cards.schema,
+    [card_1.card.tagName]: card_1.card.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/card.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const card: MarkdocSchemaWrapper;

package/lib/markdoc/tags/card.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.card = void 0;
+// import { SvgContent } from '../../markdoc/attributes/svg-content';
+exports.card = {
+    schema: {
+        render: 'Card',
+        attributes: {
+            title: {
+                type: String,
+                required: true,
+            },
+            image: {
+                type: String,
+                resolver: 'link',
+            },
+            icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+            lineClamp: {
+                type: Number,
+            },
+            iconRawContent: {
+                // internal use only
+                type: String,
+                render: true,
+            },
+            imagePosition: {
+                type: String,
+                matches: ['start', 'end'],
+                default: 'start',
+            },
+            layout: {
+                type: String,
+                matches: ['horizontal', 'combined', 'vertical'],
+                default: 'vertical',
+            },
+            align: {
+                type: String,
+                matches: ['start', 'center', 'end'],
+                default: 'start',
+            },
+            variant: {
+                type: String,
+                matches: ['filled', 'outlined', 'elevated', 'ghost'],
+                default: 'filled',
+            },
+            iconVariant: {
+                type: String,
+                matches: ['filled', 'ghost'],
+            },
+            to: { type: String },
+        },
+        children: ['paragraph', 'tag', 'list'],
+    },
+    tagName: 'card',
+};
+//# sourceMappingURL=card.js.map

package/lib/markdoc/tags/cards.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const cards: MarkdocSchemaWrapper;

package/lib/markdoc/tags/cards.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cards = void 0;
+exports.cards = {
+    schema: {
+        render: 'Cards',
+        attributes: {
+            columns: {
+                type: Number,
+                default: 3,
+            },
+            cardMinWidth: {
+                type: Number,
+                default: 240,
+            },
+        },
+    },
+    tagName: 'cards',
+};
+//# sourceMappingURL=cards.js.map

package/lib/markdoc/tags/types.d.ts

@@ -1,5 +1,9 @@
-import type { Schema } from '@markdoc/markdoc';
+import type { Schema, SchemaAttribute } from '@markdoc/markdoc';
 export type MarkdocSchemaWrapper = {
-    schema: Schema;
+    schema: Schema & {
+        attributes?: Record<string, SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
     tagName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.41.0",
+  "version": "0.42.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/Dropdown/DropdownMenuItem.tsx

@@ -61,7 +61,7 @@ export function DropdownMenuItem({
         as={Link}
         data-component-name="Dropdown/DropdownMenuItem"
         className={className}
-        separatorLine={separatorLine}
+        $separatorLine={separatorLine}
         to={to}
         style={style}
         role={role}
@@ -89,7 +89,7 @@ export function DropdownMenuItem({
       disabled={disabled}
       separator={separator}
       dangerous={dangerous}
-      separatorLine={separatorLine}
+      $separatorLine={separatorLine}
     >
       {prefix}
       {children || content}
@@ -99,7 +99,7 @@ export function DropdownMenuItem({
 }
 
 const DropdownMenuItemWrapper = styled.li<{
-  separatorLine?: boolean;
+  $separatorLine?: boolean;
   active?: boolean;
   disabled?: boolean;
   separator?: boolean;
@@ -173,8 +173,8 @@ const DropdownMenuItemWrapper = styled.li<{
       }
     `}
 
-  ${({ separatorLine }) =>
-    separatorLine &&
+  ${({ $separatorLine }) =>
+    $separatorLine &&
     css`
       border-bottom: 1px solid var(--dropdown-menu-item-separator-border-color);
       border-bottom-left-radius: 0;

package/src/core/styles/dark.ts

@@ -9,6 +9,7 @@ import { checkboxDarkMode } from '@redocly/theme/icons/CheckboxIcon/variables.da
 import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
+import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -301,7 +302,7 @@ export const darkMode = css`
   ${scorecardDarkMode}
   ${replayDarkMode}
   ${switcherDarkMode}
-
+  ${cardsDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -35,7 +35,7 @@ import { httpTag } from '@redocly/theme/components/Tags/variables';
 import { versionPicker } from '@redocly/theme/components/VersionPicker/variables';
 import { datePicker } from '@redocly/theme/components/DatePicker/variables'
 import { switcher } from '@redocly/theme/components/Switch/variables';
-
+import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
 
 const themeColors = css`
   /* === Palette === */
@@ -1158,6 +1158,7 @@ export const styles = css`
     ${borders}
     ${breadcrumbs}
     ${button}
+    ${cards}
     ${catalog}
     ${code}
     ${docsDropdown}

package/src/markdoc/components/Cards/Card.tsx

@@ -0,0 +1,232 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
+import { CardImage } from '@redocly/theme/markdoc/components/Cards/CardImage';
+import { CardIcon } from '@redocly/theme/markdoc/components/Cards/CardIcon';
+
+export type CardProps = React.PropsWithChildren<{
+  title: string;
+  image?: string;
+  icon?: string;
+  iconRawContent?: string;
+  imagePosition?: 'start' | 'end';
+  lineClamp?: number;
+  layout?: 'horizontal' | 'vertical' | 'combined';
+  variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
+  iconVariant?: 'filled' | 'ghost';
+  align: 'start' | 'center' | 'end';
+  to?: string;
+}>;
+
+export function Card({
+  title,
+  image,
+  icon,
+  iconRawContent,
+  imagePosition = 'start',
+  layout = 'vertical',
+  variant = 'filled',
+  lineClamp,
+  iconVariant,
+  align = 'start',
+  to,
+  children,
+}: CardProps) {
+  const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
+  const cardTitleId = `card-title-${titleNoSpaces}`;
+  // Get align values
+  const justifyContent =
+    align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
+  const alignItems = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
+  const textAlign = align === 'center' ? 'center' : align === 'end' ? 'right' : 'left';
+  iconVariant = iconVariant ?? variant === 'ghost' ? 'filled' : 'ghost';
+
+  return (
+    <CardWrapper
+      as={to ? 'a' : 'div'}
+      href={to}
+      aria-labelledby={cardTitleId}
+      variant={variant}
+      layout={layout}
+      isCardLink={!!to}
+    >
+      <>
+        {image ? <CardImage src={image} alt={title} position={imagePosition} /> : null}
+        <CardContentWrapper
+          layout={layout}
+          alignItems={alignItems}
+          textAlign={textAlign}
+          hasImage={image !== undefined}
+        >
+          {icon && <CardIcon variant={iconVariant} src={icon} rawContent={iconRawContent} />}
+          <ContentWrapper>
+            <Title id={cardTitleId} isCardLink={!!to} justifyContent={justifyContent}>
+              {title}
+              {!!to && <CardLinkIcon />}
+            </Title>
+            <Body lineClamp={lineClamp}>{children}</Body>
+          </ContentWrapper>
+        </CardContentWrapper>
+      </>
+    </CardWrapper>
+  );
+}
+
+const CardContentWrapper = styled.div<{
+  layout?: string;
+  alignItems: string;
+  textAlign: string;
+  hasImage: boolean;
+}>`
+  display: flex;
+  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  gap: var(--card-icon-gap);
+  align-items: ${({ alignItems }) => alignItems};
+  text-align: ${({ textAlign }) => textAlign};
+  flex-grow: 1;
+  padding: var(--card-padding);
+  height: ${({ hasImage }) => (hasImage ? 'auto' : '100%')};
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 1;
+  gap: var(--card-content-gap);
+`;
+
+const Title = styled.h3<{ isCardLink: boolean; justifyContent: string }>`
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+  color: var(--card-title-text-color);
+  display: flex;
+  align-items: center;
+  justify-content: ${({ justifyContent }) => justifyContent};
+  width: 100%;
+`;
+
+const CardLinkIcon = styled(ChevronRightIcon)`
+  width: var(--card-link-icon-width);
+  height: var(--card-link-icon-height);
+  margin-left: var(--spacing-xxs);
+  opacity: 0;
+  transition: opacity 0.3s, transform 0.3s;
+`;
+
+const Body = styled.div<{ lineClamp?: number }>`
+  color: var(--card-text-color);
+  font-size: var(--card-body-font-size);
+  line-height: var(--card-body-line-height);
+
+  ${({ lineClamp }) =>
+    lineClamp &&
+    `
+  display: -webkit-box;
+  -webkit-line-clamp: ${lineClamp};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;`}
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  /* Icon link styles */
+  & a {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+
+    & svg {
+      width: 1.2em;
+      height: 1.2em;
+      margin-right: 0.25em;
+      vertical-align: middle;
+
+      & g {
+        fill: var(--link-color-primary);
+      }
+    }
+  }
+
+  & a:visited > span > svg > g {
+    fill: var(--link-color-visited);
+  }
+`;
+
+const CardWrapper = styled.div.attrs<{
+  variant: string;
+  isCardLink: boolean;
+}>(({ isCardLink, variant }) => ({
+  className: getCardWrapperClass(isCardLink, variant),
+}))<{
+  variant: string;
+  isCardLink: boolean;
+  layout: string;
+}>`
+  display: flex;
+  flex-direction: ${({ layout }) => (layout === 'horizontal' ? 'row' : 'column')};
+  width: 100%;
+  height: 100%;
+  border-radius: var(--card-border-radius);
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
+  position: relative;
+  --md-paragraph-margin: 0;
+  --link-decoration-hover: none;
+
+  background-color: var(--card-bg-color);
+  border-width: var(--card-border-width);
+  border-style: var(--card-border-style);
+  border-color: var(--card-border-color);
+  box-shadow: var(--card-box-shadow);
+
+  && > img {
+    ${({ layout }) =>
+      layout === 'horizontal' &&
+      `
+      max-width: 33%;
+      width: auto;
+      height: 100%;
+      object-fit: cover;
+    `}
+  }
+
+  &.card-link {
+    cursor: var(--card-link-cursor);
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--card-bg-color-hover);
+      border-color: var(--card-border-color-hover);
+      box-shadow: var(--card-box-shadow-hover);
+
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  && ul {
+    list-style: none;
+    padding-left: 0;
+    margin: var(--spacing-xs) 0;
+  }
+`;
+
+const getCardWrapperClass = (isCardLink: boolean, variant?: string) => {
+  let classes = [];
+
+  classes.push(`card-variant-${variant}`);
+
+  if (isCardLink) {
+    classes.push('card-link');
+  }
+
+  return classes.join(' ');
+};

package/src/markdoc/components/Cards/CardIcon.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { InlineSvg } from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
+
+export type CardIconProps = {
+  variant?: string;
+  src: string;
+  rawContent?: string;
+};
+
+export function CardIcon({ variant, src, rawContent }: CardIconProps) {
+  return (
+    <CardIconWrapper variant={variant}>
+      {rawContent ? <CardSvg fileRawContent={rawContent} /> : <CardImg src={src} />}
+    </CardIconWrapper>
+  );
+}
+
+const CardImg = styled.img`
+  width: var(--card-icon-width);
+  height: var(--card-icon-height);
+  display: inline-block;
+  object-fit: cover;
+`;
+
+const CardSvg = styled(InlineSvg)`
+  width: var(--card-icon-width);
+  height: var(--card-icon-height);
+  display: inline-block;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: var(--card-icon-color);
+  }
+`;
+
+const CardIconWrapper = styled.div<Omit<CardIconProps, 'src'>>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--card-icon-width);
+  min-height: var(--card-icon-height);
+  flex-shrink: 0;
+
+  padding: ${({ variant }) => (variant === 'ghost' ? '0' : `var(--card-icon-padding);`)};
+  border-radius: var(--card-icon-border-radius);
+  overflow: hidden;
+
+  background-color: ${({ variant }) =>
+    variant === 'ghost' ? 'transparent' : 'var(--card-icon-bg-color)'};
+  border: ${({ variant }) =>
+    variant === 'ghost' ? 'none' : `1px solid var(--card-icon-border-color)`};
+`;

package/src/markdoc/components/Cards/CardImage.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export type CardImageProps = {
+  src: string;
+  alt: string;
+  position?: 'start' | 'end';
+};
+
+export function CardImage({ src, alt, position }: CardImageProps) {
+  return <Image src={src} alt={alt} position={position} />;
+}
+
+const Image = styled.img<{ position?: string }>`
+  width: 100%;
+  height: 100px;
+  flex-shrink: 0;
+  object-fit: cover;
+
+  order: ${({ position }) => (position === 'end' ? 1 : 0)};
+`;

package/src/markdoc/components/Cards/Cards.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export type CardsProps = React.PropsWithChildren<{
+  columns?: number;
+  cardMinWidth?: number;
+  className?: string;
+  ariaLabel?: string;
+}>;
+
+export function Cards({ cardMinWidth = 240, columns, className, children, ariaLabel }: CardsProps) {
+  return (
+    <GridLayout
+      cardMinWidth={cardMinWidth}
+      columns={columns}
+      className={className}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </GridLayout>
+  );
+}
+
+const GridLayout = styled.div<{
+  cardMinWidth: number;
+  columns?: number;
+}>`
+  display: grid;
+  grid-template-columns: ${({ cardMinWidth, columns }) =>
+    `repeat(${columns || 'auto-fit'}, minmax(${cardMinWidth}px, 1fr))`};
+  gap: var(--cards-gap);
+  width: 100%;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-base);
+`;

package/src/markdoc/components/Cards/variables.dark.ts

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+
+export const cardsDarkMode = css`
+  --card-icon-border-color: var(--color-warm-grey-4);
+  --card-icon-bg-color: var(--color-warm-grey-3);
+  
+  .card-variant-filled {
+    --card-bg-color: var(--color-warm-grey-3);
+    --card-bg-color-hover: var(--color-warm-grey-4);
+    --card-border-color: var(--color-warm-grey-4);
+    --card-border-color-hover: var(--color-warm-grey-3);
+    --card-icon-bg-color: var(--card-bg-color);
+  }
+
+  .card-variant-outlined {
+    --card-border-color: var(--color-warm-grey-4);
+    --card-border-color-hover: var(--color-warm-grey-5);
+  }
+  
+  .card-variant-elevated {
+    --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
+    --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
+  }
+`;

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

@@ -0,0 +1,68 @@
+import { css } from 'styled-components';
+
+export const cards = css`
+  --cards-gap: var(--spacing-sm);
+
+  /**
+   * @tokens Card default colors
+   */
+  --card-icon-bg-color: var(--color-warm-grey-1);
+  --card-icon-border-color: var(--border-color-secondary);
+  --card-text-color: var(--text-color-secondary);
+  --card-title-text-color: var(--h2-text-color);
+  --card-icon-color: var(--card-title-text-color);
+
+  /**
+   * @tokens Card default values
+   */
+  --card-border-radius: var(--border-radius-md);
+  --card-border-style: solid;
+  --card-link-cursor: pointer;
+  --card-link-icon-width: var(--h3-font-size);
+  --card-link-icon-height: var(--h3-font-size);
+  --card-border-width: 1px;
+  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-padding: var(--spacing-xs);
+  --card-icon-size: 24px;
+  --card-icon-height: var(--card-icon-size);
+  --card-icon-width: var(--card-icon-size);
+  --card-icon-gap: var(--spacing-base);
+  --card-title-margin: 0;
+  --card-title-font-weight: var(--font-weight-semibold);
+  --card-content-gap: 4px;
+  --card-padding: 16px 20px;
+  --card-body-font-size: var(--font-size-base);
+  --card-body-line-height: var(--line-height-base);
+
+  /**
+   * @tokens Card variants
+   */
+  .card-variant-filled {
+    --card-bg-color: var(--color-warm-grey-1);
+    --card-bg-color-hover: var(--color-warm-grey-2);
+    --card-border-color: var(--color-warm-grey-2);
+    --card-border-color-hover: var(--color-warm-grey-1);
+    --card-icon-bg-color: var(--color-white);
+    --card-icon-border-color: var(--card-border-color);
+  }
+
+  .card-variant-outlined {
+    --card-bg-color: transparent;
+    --card-border-color: var(--color-warm-grey-2);
+    --card-border-color-hover: var(--color-warm-grey-3);
+  }
+
+  .card-variant-elevated {
+    --card-bg-color: transparent;
+    --card-border-color: transparent;
+    --card-border-color-hover: transparent;
+    --card-box-shadow: 0px 8px 24px -4px #232A6114, 0px 6px 12px -6px #232A611F;
+    --card-box-shadow-hover: 0px 14px 64px -4px #232A611F, 0px 8px 22px -6px #232A611F;
+  }
+
+  .card-variant-ghost {
+    --card-bg-color: transparent;
+    --card-border-width: 0;
+  }
+
+`

package/src/markdoc/components/default.ts

@@ -7,3 +7,7 @@ export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/Tabs';
 export * from '@redocly/theme/markdoc/components/CodeBlock/CodeBlock';
+export * from '@redocly/theme/markdoc/components/Cards/Cards';
+export * from '@redocly/theme/markdoc/components/Cards/Card';
+export * from '@redocly/theme/markdoc/components/Cards/CardIcon';
+export * from '@redocly/theme/markdoc/components/Cards/CardImage';

package/src/markdoc/default.ts

@@ -16,6 +16,8 @@ import { tabs } from '@redocly/theme/markdoc/tags/tabs';
 import { debug } from '@redocly/theme/markdoc/tags/debug';
 import { codeSnippet } from '@redocly/theme/markdoc/tags/code-snippet';
 import { inlineSvg } from '@redocly/theme/markdoc/tags/inline-svg';
+import { cards } from '@redocly/theme/markdoc/tags/cards';
+import { card } from '@redocly/theme/markdoc/tags/card';
 
 export const tags = {
   [admonition.tagName]: admonition.schema,
@@ -27,4 +29,6 @@ export const tags = {
   [tabs.tagName]: tabs.schema,
   [codeSnippet.tagName]: codeSnippet.schema,
   [inlineSvg.tagName]: inlineSvg.schema,
+  [cards.tagName]: cards.schema,
+  [card.tagName]: card.schema,
 };

package/src/markdoc/tags/card.ts

@@ -0,0 +1,55 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+// import { SvgContent } from '@redocly/theme/markdoc/attributes/svg-content';
+
+export const card: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Card',
+    attributes: {
+      title: {
+        type: String,
+        required: true,
+      },
+      image: {
+        type: String,
+        resolver: 'link',
+      },
+      icon: { type: String, resolver: 'inlineSvgOrImageLink' },
+      lineClamp: {
+        type: Number,
+      },
+      iconRawContent: {
+        // internal use only
+        type: String,
+        render: true,
+      },
+      imagePosition: {
+        type: String,
+        matches: ['start', 'end'],
+        default: 'start',
+      },
+      layout: {
+        type: String,
+        matches: ['horizontal', 'combined', 'vertical'],
+        default: 'vertical',
+      },
+      align: {
+        type: String,
+        matches: ['start', 'center', 'end'],
+        default: 'start',
+      },
+      variant: {
+        type: String,
+        matches: ['filled', 'outlined', 'elevated', 'ghost'],
+        default: 'filled',
+      },
+      iconVariant: {
+        type: String,
+        matches: ['filled', 'ghost'],
+      },
+      to: { type: String },
+    },
+    children: ['paragraph', 'tag', 'list'],
+  },
+  tagName: 'card',
+};

package/src/markdoc/tags/cards.ts

@@ -0,0 +1,18 @@
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+export const cards: MarkdocSchemaWrapper = {
+  schema: {
+    render: 'Cards',
+    attributes: {
+      columns: {
+        type: Number,
+        default: 3,
+      },
+      cardMinWidth: {
+        type: Number,
+        default: 240,
+      },
+    },
+  },
+  tagName: 'cards',
+};

package/src/markdoc/tags/types.ts

@@ -1,6 +1,8 @@
-import type { Schema } from '@markdoc/markdoc';
+import type { Schema, SchemaAttribute } from '@markdoc/markdoc';
 
 export type MarkdocSchemaWrapper = {
-  schema: Schema;
+  schema: Schema & {
+    attributes?: Record<string, SchemaAttribute & { resolver?: string }>;
+  };
   tagName: string;
 };