@redocly/theme 0.18.3-patch.0 → 0.18.3-patch.1

package/lib/globalStyle.js

@@ -24,6 +24,8 @@ const Profile_1 = require("./components/Profile");
 const Dropdown_1 = require("./components/Dropdown");
 const Markdown_1 = require("./components/Markdown");
 const Tooltip_1 = require("./components/Tooltip");
+const LastUpdated_1 = require("./components/LastUpdated");
+const NavbarLogo_1 = require("./components/NavbarLogo");
 const themeColors = (0, styled_components_1.css) `
 /* === Palette === */
   /**
@@ -206,16 +208,17 @@ const themeColors = (0, styled_components_1.css) `
   --color-warning: var(--color-warning-base);
   --color-success: var(--color-success-base);
   --color-info: var(--color-info-base);
- 
+
   /**
    * @tokens Elevation Colors
    * @presenter Color
    */
 
-  --bg-sunken: #F1F1F1; // Sunken is the lowest elevation available.
   --bg-base: #ffffff; // The default elevation is the baseline with respect to all other layers.
+  --bg-sunken: #f1f1f1; // Sunken is the lowest elevation available.
   --bg-raised: #fafafa; // Cards, elements, inputs
   --bg-overlay: #f2f2f2; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #f2f2f2c2; // Overlay is the highest elevation available. Use for hovers
 
   --bg-base-shadow: 0px 3px 5px rgba(51, 51, 51, 0.2), 0px 0px 1px rgba(51, 51, 51, 0.31); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31); // Hovers for base. Menu
@@ -248,7 +251,7 @@ const typography = (0, styled_components_1.css) `
   --text-description: #8d8d8d; // Caption, Description, Icon
   --text-placeholder: #a8a8a8; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
-  
+
   /**
     * @tokens Font Weights
     * @presenter FontWeight
@@ -258,7 +261,7 @@ const typography = (0, styled_components_1.css) `
   --font-weight-bold: 600; // All strong weights in the entire system.
   --font-weight-bolder: 700;
   --font-weight-italic: 'Regular Italic'; // All italic weights in the entire system.
-  
+
   /**
    * @tokens Line Heights
    * @presenter LineHeight
@@ -277,15 +280,10 @@ const typography = (0, styled_components_1.css) `
     * @presenter FontSize
     */
 
-  --font-size-base: 14px; // Base font size of the entire system.
-  --font-size-sm: 12px;
-  --font-size-lg: 16px;
-  --font-size-xl: 20px;
-  --font-size-heading-1: 38px;
-  --font-size-heading-2: 30px;
-  --font-size-heading-3: 24px;
-  --font-size-heading-4: 20px;
-  --font-size-heading-5: 16px;
+  --font-size-base: 16px; // Base font size of the entire system.
+  --font-size-sm: 14px;
+  --font-size-lg: 18px;
+  --font-size-xl: 22px;
 
   /**
     * @tokens Font Rendering
@@ -298,7 +296,7 @@ const typography = (0, styled_components_1.css) `
 `;
 const sizeAndSpace = (0, styled_components_1.css) `
   /* === Size & Space === */
-  
+
   /**
     * @tokens Size
     * @presenter Spacing
@@ -312,7 +310,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
     */
 
   --spacing-unit: 4px;
-  
+
   --spacing-base: calc(var(--spacing-unit) * 4);
   --spacing-xxs: var(--spacing-unit);
   --spacing-xs: calc(var(--spacing-unit) * 2);
@@ -324,7 +322,7 @@ const sizeAndSpace = (0, styled_components_1.css) `
 
   --spacing-horizontal: var(--spacing-xl);
   --spacing-vertical: var(--spacing-base);
-  
+
   /**
     * @tokens Height
     * @presenter Spacing
@@ -427,26 +425,37 @@ const headingsTypography = (0, styled_components_1.css) `
     * @tokens Heading level 4
     */
 
+  --h4-font-family: var(--heading-font-family); // @presenter FontFamily
   --h4-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h4-font-size: 16px; // @presenter FontSize
-  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-line-height: 16px; // @presenter LineHeight
   --h4-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h4-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h4-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 5
     */
 
+  --h5-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h5-font-size: 14px; // @presenter FontSize
-  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-line-height: 14px; // @presenter LineHeight
   --h5-margin-top: var(--heading-margin-top); // @presenter Spacing
+  --h5-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h5-text-color: var(--heading-text-color); // @presenter Color
 
   /**
     * @tokens Heading level 6
     */
 
+  --h6-font-family: var(--heading-font-family); // @presenter FontFamily
+  --h6-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h6-font-size: 12px; // @presenter FontSize
+  --h6-line-height: 12px; // @presenter LineHeight
   --h6-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h6-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
+  --h6-text-color: var(--heading-text-color); // @presenter Color
 
   // @tokens End
 `;
@@ -500,7 +509,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schemas-mime-type-dropdown-padding: 0px 26px 0px 4px;
   --schemas-mime-type-dropdown-border: var(--docs-dropdown-border); // @presenter Border
   --schemas-mime-type-dropdown-font-size: var(--docs-dropdown-font-size); // @presenter FontSize
-  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-font-size); // @presenter Color
+  --schemas-mime-type-dropdown-text-color: var(--docs-dropdown-text-color); // @presenter Color
 
   /**
     * @tokens API Reference Schemas Discriminator Dropdown
@@ -579,9 +588,9 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning);
-  --schema-recursive-background-color: var(--schema-inline-background-color);
-  --schema-recursive-border-color: var(--schema-inline-border-color);
+  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -591,7 +600,7 @@ const apiReferenceDocs = (0, styled_components_1.css) `
   --schema-non-null-text-color: var(--schema-inline-code-text-color);
   --schema-non-null-background-color: var(--schema-inline-background-color);
   --schema-non-null-border-color: var(--schema-inline-border-color);
-  
+
   /**
     * @tokens API Reference Schema Nested styles
     */
@@ -693,19 +702,6 @@ const badges = (0, styled_components_1.css) `
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
 
-  // @tokens End
-`;
-const logo = (0, styled_components_1.css) `
-  /**
-    * @tokens Logo
-    */
-
-  --navbar-logo-height: 2rem; // @presenter Spacing
-  --navbar-logo-width: auto;
-  --navbar-logo-margin: 16px; // @presenter Spacing
-  --navbar-logo-max-width: 285px; // @presenter Spacing
-  --navbar-logo-max-height: 285px; // @presenter Spacing
-
   // @tokens End
 `;
 const loadProgressBar = (0, styled_components_1.css) `
@@ -788,18 +784,12 @@ const docsDropdown = (0, styled_components_1.css) `
   --docs-dropdown-font-size: var(--font-size-base);
   --docs-dropdown-text-color: var(--text-secondary);
 
-  --docs-dropdown-padding-vertical: 0;
+  --docs-dropdown-padding-vertical: 6px;
   --docs-dropdown-padding-left: 10px;
   --docs-dropdown-padding-right: 26px;
   --docs-dropdown-padding: var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-right) var(--docs-dropdown-padding-vertical) var(--docs-dropdown-padding-left);
   --docs-dropdown-border: 1px solid var(--border-primary);
 `;
-const lastUpdated = (0, styled_components_1.css) `
-  --last-updated-text-color: var(--text-secondary);
-  --last-updated-font-size: var(--font-size-sm);
-  --last-updated-font-family: var(--font-family-base);
-  --last-updated-line-height: var(--line-height-base);
-`;
 const tile = (0, styled_components_1.css) `
   --wide-tile-background-color: var(--bg-raised);
   --thin-tile-background-color: var(--bg-raised);
@@ -861,18 +851,18 @@ const error = (0, styled_components_1.css) `
   --error-bubble-gap: var(--spacing-base);
   --error-bubble-font-family: var(--font-family-base);
   --error-bubble-z-index: var(--z-index-popover);
-  
+
   --error-card-border-radius: calc(var(--spacing-xxs) * 1.5);
   --error-card-background: var(--bg-raised);
   --error-card-padding: var(--spacing-xs) var(--spacing-base);
   --error-card-text-color: var(--text-primary);
   --error-card-font-size: var(--font-size-base);
   --error-card-font-style: normal;
-  --error-card-font-weight: var(--font-weight-normal);
+  --error-card-font-weight: var(--font-weight-regular);
   --error-card-line-height: var(--line-height-base);
   --error-card-box-shadow: var(--bg-raised-shadow);
   --error-card-icon-margin: 0 var(--spacing-xs) 0 0;
-  
+
   --detailed-error-overlay-background: #4f4f4f;
   --detailed-error-overlay-opacity: 0.9;
   --detailed-error-overlay-z-index: var(--z-index-raised);
@@ -889,13 +879,13 @@ const error = (0, styled_components_1.css) `
   --detailed-error-modal-font-family: var(--font-family-base);
   --detailed-error-modal-padding: var(--spacing-md);
   --detailed-error-modal-wapper-text-align: right;
-  
+
   --detailed-error-content-margin-top: var(--spacing-md);
   --detailed-error-content-height: 100%;
-  
+
   --detailed-error-close-button-color: var(--text-description);
   --detailed-error-close-button-text-transform: uppercase;
-  
+
   --detailed-error-message-margin: var(--spacing-base) auto var(--spacing-lg);
   --detailed-error-message-padding: var(--spacing-base);
   --detailed-error-message-border-radius: var(--border-radius);
@@ -910,8 +900,8 @@ const modal = (0, styled_components_1.css) `
     overflow: hidden;
   }
 
-  --modal-box-shadow: 0px 8px 12px rgba(51, 51, 51, 0.15), 0px 0px 1px rgba(51, 51, 51, 0.31);
-  --modal-overlay-background-color: rgba(206, 206, 206, 0.49);
+  --modal-box-shadow: var(--bg-overlay-shadow);
+  --modal-overlay-background-color: var(--bg-modal-overlay);
   --modal-background-color: var(--bg-base);
 `;
 const zIndexDepth = (0, styled_components_1.css) `
@@ -939,10 +929,10 @@ exports.styles = (0, styled_components_1.css) `
     ${headingsTypography}
     ${inputs}
     ${I18n_1.languagePicker}
-    ${lastUpdated}
+    ${LastUpdated_1.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${logo}
+    ${NavbarLogo_1.logo}
     ${Markdown_1.markdown}
     ${Menu_1.menu}
     ${Menu_1.mobileMenu}
@@ -967,7 +957,6 @@ exports.styles = (0, styled_components_1.css) `
     ${Sidebar_1.versionPicker}
     ${zIndexDepth}
 
-    --api-onboarding-table-text-color: #4e5356;
     --api-catalog-card-min-width: 250px;
 
     background-color: var(--bg-base);
@@ -977,8 +966,6 @@ exports.styles = (0, styled_components_1.css) `
 
   :root.dark {
     ${darkColors_1.darkMode};
-
-    --api-onboarding-table-text-color: #ffffff;
   }
 
   :root.notransition * {

package/lib/icons/PlusIcon/PlusIcon.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlusIcon = exports.Icon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Icon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "black", xmlns: "http://www.w3.org/2000/svg" },
+const Icon = () => (react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" },
     react_1.default.createElement("path", { d: "M7.53125 2.375H8.46875C8.55208 2.375 8.59375 2.41667 8.59375 2.5V13.5C8.59375 13.5833 8.55208 13.625 8.46875 13.625H7.53125C7.44792 13.625 7.40625 13.5833 7.40625 13.5V2.5C7.40625 2.41667 7.44792 2.375 7.53125 2.375Z", fill: "inherit" }),
     react_1.default.createElement("path", { d: "M2.75 7.40625H13.25C13.3333 7.40625 13.375 7.44792 13.375 7.53125V8.46875C13.375 8.55208 13.3333 8.59375 13.25 8.59375H2.75C2.66667 8.59375 2.625 8.55208 2.625 8.46875V7.53125C2.625 7.44792 2.66667 7.40625 2.75 7.40625Z", fill: "inherit" })));
 exports.Icon = Icon;

package/lib/ui/ArrowBack.js

@@ -12,7 +12,6 @@ const Arrow = ({ className, dataComponentName, }) => (react_1.default.createElem
         react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 exports.ArrowBack = (0, styled_components_1.default)(Arrow) `
   fill: var(--sidebar-back-button-icon-color);
-  margin-right: calc(var(--sidebar-spacing-unit));
 
   background-image: var(--sidebar-back-button-icon);
   background-repeat: no-repeat;

package/lib/ui/darkColors.js

@@ -192,10 +192,10 @@ exports.darkMode = (0, styled_components_1.css) `
     */
   --text-base: #ffffff; // The base color of the typography color tokens.
   --text-light-solid: #ffffff; // The color of the objects that need to be white no matter what theme is enabled.
-  --text-primary: #e3e3e3; // Headers, Icon hover
-  --text-secondary: #b3b3b3; // Body text
-  --text-description: #8e8e8e; // Caption, Description, Icon
-  --text-placeholder: #7b7b7b; // Placeholder text, Disabled text
+  --text-primary: #ffffffde; // Headers, Icon hover
+  --text-secondary: #ffffff99; // Body text
+  --text-description: #ffffff61; // Caption, Description, Icon
+  --text-placeholder: #ffffff61; // Placeholder text, Disabled text
   --text-link: var(--color-blue-6);
 
   /**
@@ -207,6 +207,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --bg-base: #141414; // The default elevation is the baseline with respect to all other layers.
   --bg-raised: #1f1f1f; // Cards, elements, inputs
   --bg-overlay: #282828; // Overlay is the highest elevation available. Use for hovers
+  --bg-modal-overlay: #282828c2;
 
   --bg-base-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Elements
   --bg-raised-shadow: 0px 8px 12px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.5); // Hovers for base. Menu

package/lib/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './args-typecheck';
 export * from './color';
 export * from './urls';
 export * from './jsUtils';
+export * from './tags-parser';

package/lib/utils/index.js

@@ -25,4 +25,5 @@ __exportStar(require("./args-typecheck"), exports);
 __exportStar(require("./color"), exports);
 __exportStar(require("./urls"), exports);
 __exportStar(require("./jsUtils"), exports);
+__exportStar(require("./tags-parser"), exports);
 //# sourceMappingURL=index.js.map

package/lib/utils/tags-parser.d.ts

@@ -0,0 +1 @@
+export declare const slug: (value: string) => string;

package/lib/utils/tags-parser.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.slug = void 0;
+const slug = (value) => {
+    const matches = value.match(/[a-zA-Z0-9_-]*/g);
+    const result = matches === null || matches === void 0 ? void 0 : matches.filter((value) => value !== '').join('-').toLowerCase();
+    return result !== null && result !== void 0 ? result : value;
+};
+exports.slug = slug;
+//# sourceMappingURL=tags-parser.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.0",
+  "version": "0.18.3-patch.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.8.4",
     "webpack": "^5.72.0",
-    "@redocly/portal-types": "1.0.1"
+    "@redocly/portal-types": "1.0.2"
   },
   "dependencies": {
     "@redocly/ajv": "^8.11.0",

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -3,14 +3,20 @@ import styled from 'styled-components';
 
 import { Link } from '@portal/Link';
 
-export const Breadcrumb = (props: { label: string; link?: string; isActive: boolean }) => {
-  const { label, link, isActive } = props;
+export const Breadcrumb = (props: {
+  label: string;
+  link?: string;
+  isActive: boolean;
+  onClick?: () => void;
+}) => {
+  const { label, link, isActive, onClick } = props;
 
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
       isLink={link != null}
       isActive={isActive}
+      onClick={onClick}
     >
       {link ? (
         <BreadcrumbLink to={link}>{label}</BreadcrumbLink>

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useBreadcrumbs } from '@portal/Sidebar/useBreadcrumbs';
+import { telemetry } from '@portal/telemetry';
 
 import { Breadcrumb } from './Breadcrumb';
 
@@ -18,7 +19,18 @@ export const Breadcrumbs = (props: { className?: string }) => {
         const isLast = idx === breadcrumbs.length - 1;
         return (
           <React.Fragment key={idx}>
-            <Breadcrumb link={breadcrumb.link} label={breadcrumb.label} isActive={isLast} />
+            <Breadcrumb
+              link={breadcrumb.link}
+              label={breadcrumb.label}
+              isActive={isLast}
+              onClick={() => {
+                telemetry.send('breadcrumb_clicked', {
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  total_breadcrumbs: breadcrumbs.length,
+                });
+              }}
+            />
             {isLast ? null : <div>/</div>}
           </React.Fragment>
         );

package/src/components/Button/Button.tsx

@@ -102,12 +102,14 @@ const StyledButton = styled.button.attrs(
         `
       : variant === 'text'
       ? css`
-          border-color: transparent;
-          background-color: transparent;
+          color: var(--button-color);
+          border-color: var(--button-border-color);
+          background-color: var(--button-background-color);
 
           &:hover {
-            border-color: transparent;
-            background-color: transparent;
+            color: var(--button-hover-color);
+            border-color: var(--button-hover-border-color);
+            background-color: var(--button-hover-background-color);
             box-shadow: none;
           }
         `

package/src/components/Button/styledVariables.ts

@@ -1,26 +1,26 @@
 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
-  */
+  /**
+    * Static classnames that can be used to override styles for components:
+    * download-specification-button, next-section-button, button-base
+    */
 
   /**
-   * @tokens Button borders
-   */
+    * @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: var(--bg-base-shadow); // @presenter Shadow
-  --button-active-box-shadow: var(--bg-base-shadow); // @presenter Shadow
+  --button-hover-box-shadow: none; // @presenter Shadow
+  --button-active-box-shadow: none; // @presenter Shadow
 
   /**
-     * @tokens Button typography
-     */
+    * @tokens Button typography
+    */
 
   --button-font-size: var(--font-size-base); // @presenter FontSize
   --button-font-family: inherit; // @presenter FontFamily
@@ -36,8 +36,8 @@ export const button = css`
   --button-large-padding: 8px 16px;
 
   /**
-   * @tokens Button icon
-   */
+    * @tokens Button icon
+    */
   --button-icon-width: 1em; // @presenter Spacing
   --button-icon-height: 1em; // @presenter Spacing
 
@@ -87,5 +87,18 @@ export const button = css`
     --button-background-color: transparent; // @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/Catalog/Catalog.tsx

@@ -53,12 +53,7 @@ export default function Catalog(props: {
           isMobile={false}
         />
         {isAddingFilter && (
-          <FilterPopover
-            setIsAddingFilter={setIsAddingFilter}
-            setFilterTerm={setFilterTerm}
-            filters={filters}
-            filterTerm={filterTerm}
-          />
+          <FilterPopover setIsAddingFilter={setIsAddingFilter} filters={filters} />
         )}
         <CatalogPageContent>
           <CatalogPageDescriptionWrapper>
@@ -162,7 +157,7 @@ const CatalogDescription = styled.p`
 `;
 
 const CatalogPageWrapper = styled.div`
-  --sidebar-width: var(--catalog-sidebar-width, 300px);
+  --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
@@ -192,7 +187,7 @@ const CatalogPageWrapper = styled.div`
   }
 `;
 
-const FilterTagsWrapper = styled.div`
+const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
   padding: var(--filter-tags-wrapper-padding);
   display: flex;
   overflow-x: scroll;

package/src/components/Catalog/CatalogCard.tsx

@@ -6,11 +6,13 @@ import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
 import { Tag } from '@theme/components/Tag';
 import { PointingArrowIcon } from '@theme/icons';
+import { telemetry } from '@portal/telemetry';
+import { slug } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
-      <StyledCard>
+      <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>
@@ -22,9 +24,9 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
             {item.tags && (
               <CardTags>
                 {(item.tags as string[]).map((tag, index) => (
-                  <Tag key={tag + index} color="grey">
+                  <CardTag key={tag + index} color={slug(tag)}>
                     <Highlight>{tag}</Highlight>
-                  </Tag>
+                  </CardTag>
                 ))}
               </CardTags>
             )}
@@ -46,20 +48,21 @@ const SelectButton = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s ease-in-out;
 
   svg {
     fill: var(--catalog-card-icon-color);
   }
 `;
 
-const StyledCard = styled.div`
+const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
   min-height: var(--catalog-card-min-height);
   height: 100%;
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);
   background-color: var(--catalog-card-background-color);
-  border: 1px solid var(--catalog-card-border-color);
+  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
   transition: all 0.2s ease-in-out;
   border-radius: var(--catalog-card-border-radius);
   cursor: pointer;
@@ -114,4 +117,12 @@ const CardFooter = styled.div`
   justify-content: space-between;
 `;
 
-const CardTags = styled.div``;
+const CardTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xxs);
+`;
+
+const CardTag = styled(Tag)`
+  margin: 0;
+`;

package/src/components/Catalog/styledVariables.ts

@@ -41,7 +41,7 @@ export const catalog = css`
   --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(--spacing-sm);
+  --catalog-separator-count-border-radius: var(--border-radius-xlg);
   --catalog-separator-count-border-color: var(--border-secondary);
   --catalog-separator-count-background: var(--bg-raised);
 
@@ -54,8 +54,10 @@ export const catalog = css`
   --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(--spacing-xs);
+  --catalog-card-border-radius: var(--border-radius-lg);
 
   /**
     * @tokens Catalog card button
@@ -84,7 +86,7 @@ export const catalog = css`
   --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(--spacing-xs);
+  --catalog-card-content-border-radius: var(--border-radius-lg);
   --catalog-card-content-padding: var(--spacing-base);
   
   // @tokens End