@redocly/theme 0.18.6 → 0.19.1

package/lib/components/Catalog/Catalog.js

@@ -3,116 +3,125 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogPageDescriptionWrapper = exports.CatalogPageWrapper = exports.CatalogDescription = exports.CatalogTitle = exports.CatalogPageContent = exports.FilterControls = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Highlight_1 = require("../../ui/Highlight");
-const Button_1 = require("../../components/Button");
-const Filter_1 = require("../../components/Filter");
 const H2_1 = require("../../components/Typography/H2");
-const H3_1 = require("../../components/Typography/H3");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const Catalog_1 = require("../../components/Catalog");
 const index_1 = require("../../mocks/hooks/index");
-const useCatalog_1 = require("./useCatalog");
+const FilterTags_1 = require("../../components/Filter/FilterTags");
+const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterPopover_1 = require("../../components/Filter/FilterPopover");
+const Button_1 = require("../../components/Button");
+const PlusIcon_1 = require("../../icons/PlusIcon");
+const useModalScrollLock_1 = __importDefault(require("../../hooks/useModalScrollLock"));
 function Catalog(props) {
     const { catalogConfig } = props.pageProps;
     const items = (0, index_1.usePageSharedData)('catalog');
-    const { filterTerm, setFilterTerm, groups, filters } = (0, useCatalog_1.useCatalog)(items, catalogConfig);
-    const [isFilterPanelFocused, setIsFilterPanelFocused] = react_1.default.useState(false);
-    const { translate } = (0, index_1.useTranslate)();
+    const { filterTerm, setFilterTerm, groups, filters } = (0, Catalog_1.useCatalog)(items, catalogConfig);
+    const [isAddingFilter, setIsAddingFilter] = react_1.default.useState(false);
     const translationKeys = {
-        placeholder: 'theme.catalog.filters.placeholder',
-        applyFilter: 'theme.catalog.filters.apply',
+        addFilter: 'theme.catalog.filters.select.addFilter',
     };
+    const { translate } = (0, index_1.useTranslate)();
+    (0, useModalScrollLock_1.default)(isAddingFilter);
     return (react_1.default.createElement(Highlight_1.HighlightContext.Provider, { value: [filterTerm] },
-        react_1.default.createElement(CatalogPageWrapper, null,
-            react_1.default.createElement(CatalogPageSidebar, { isActiveInMobileMode: isFilterPanelFocused },
-                react_1.default.createElement(StyledInput, { placeholder: translate(translationKeys.placeholder, 'Filter...'), value: filterTerm, onFocus: () => setIsFilterPanelFocused(true), onChange: (e) => setFilterTerm(e.target.value) }),
-                filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx }))),
-                react_1.default.createElement(MobileStickyApplyFilters, null,
-                    react_1.default.createElement(Button_1.Button, { "data-translation-key": translationKeys.applyFilter, color: "secondary", onClick: () => setIsFilterPanelFocused(false) }, translate(translationKeys.applyFilter, 'Apply filters')))),
-            react_1.default.createElement(CatalogPageContent, null,
-                catalogConfig.title ? (react_1.default.createElement(CatalogTitle, null,
-                    ' ',
-                    translate(catalogConfig.titleTranslationKey, catalogConfig.title),
-                    ' ')) : null,
-                catalogConfig.description ? (react_1.default.createElement(CatalogDescription, null,
-                    ' ',
-                    translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                    ' ')) : null,
+        react_1.default.createElement(exports.CatalogPageWrapper, null,
+            react_1.default.createElement(FilterTagsWrapper, null,
+                react_1.default.createElement(Button_1.Button, { variant: "text", size: "small", icon: react_1.default.createElement(PlusIcon_1.PlusIcon, null), onClick: () => setIsAddingFilter(true) }, translate(translationKeys.addFilter, 'Add filter')),
+                react_1.default.createElement(FilterTags_1.FilterTags, { filters: filters })),
+            react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: false, filterValuesCasing: catalogConfig.filterValuesCasing }),
+            isAddingFilter && (react_1.default.createElement(FilterPopover_1.FilterPopover, { setIsAddingFilter: setIsAddingFilter, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
+            react_1.default.createElement(exports.CatalogPageContent, null,
+                react_1.default.createElement(exports.CatalogPageDescriptionWrapper, null,
+                    catalogConfig.title ? (react_1.default.createElement(exports.CatalogTitle, null,
+                        ' ',
+                        translate(catalogConfig.titleTranslationKey, catalogConfig.title),
+                        ' ')) : null,
+                    catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, null,
+                        ' ',
+                        translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
+                        ' ')) : null),
                 groups.map((group) => (react_1.default.createElement(react_1.default.Fragment, { key: group.title },
-                    react_1.default.createElement(H3_1.H3, null,
-                        group.title,
-                        " (",
-                        group.items.length,
-                        ")"),
-                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item, key: item.link })))))))))));
+                    react_1.default.createElement(CatalogSeparator, { "data-cy": "catalog-separator" },
+                        react_1.default.createElement(CatalogSeparatorLabel, null, group.title),
+                        react_1.default.createElement(CatalogSeparatorCount, null, group.items.length)),
+                    react_1.default.createElement(CatalogCards, null, group.items.map((item) => (react_1.default.createElement(Catalog_1.CatalogCard, { item: item, key: item.link })))))))))));
 }
 exports.default = Catalog;
-const MobileStickyApplyFilters = styled_components_1.default.div `
-  position: fixed;
-  display: none;
-  background-color: var(--sidebar-background-color);
-  bottom: 0;
-  padding: 16px 30px;
-  left: 0px;
-  right: 0px;
-
-  ${Button_1.Button} {
-    width: 100%;
-    margin: 0;
-  }
+const CatalogSeparator = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--catalog-separator-color);
+  font-size: var(--catalog-separator-font-size);
+  font-weight: var(--catalog-separator-font-weight);
+  border-top: 1px solid var(--catalog-separator-border-color);
+  margin: var(--catalog-separator-margin);
+  padding: var(--catalog-separator-padding);
+`;
+const CatalogSeparatorLabel = styled_components_1.default.div `
+  margin: var(--catalog-separator-label-margin);
 `;
-const CatalogPageSidebar = styled_components_1.default.aside `
-  width: var(--sidebar-width);
-  border-right: 1px solid var(--sidebar-border-color);
-  padding: 20px 30px;
-  position: sticky;
-  top: var(--navbar-height);
-  height: calc(100vh - var(--navbar-height));
-  overflow: auto;
+const CatalogSeparatorCount = styled_components_1.default.div `
+  display: flex;
+  height: var(--catalog-separator-count-height);
+  padding: var(--catalog-separator-count-padding);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--catalog-separator-count-border-radius);
+  border: 1px solid var(--catalog-separator-count-border-color);
+  background: var(--catalog-separator-count-background);
+`;
+exports.FilterControls = styled_components_1.default.div `
+  padding: var(--mobile-catalog-filter-padding-vertical)
+    var(--mobile-catalog-filter-padding-horizontal);
+  border-bottom: 1px solid var(--border-secondary);
+  background: var(--bg-raised);
+`;
+exports.CatalogPageContent = styled_components_1.default.main `
+  flex: 1;
+  width: 90%;
+  margin: 0 auto;
+  padding: 0;
 
-  @media screen and (max-width: 767px) {
-    transition: height 0.2s ease-in-out;
+  ${({ theme }) => theme.mediaQueries.medium} {
     width: 100%;
-    ${({ isActiveInMobileMode }) => isActiveInMobileMode ? 'padding-bottom: 66px;' : 'height: 76px;'};
-    background-color: var(--sidebar-background-color);
-    border-bottom: 1px solid var(--sidebar-border-color);
-    z-index: var(--z-index-surface);
-
-    ${MobileStickyApplyFilters} {
-      display: ${({ isActiveInMobileMode }) => (isActiveInMobileMode ? 'block' : 'none')};
-    }
+    padding: var(--catalog-page-padding);
   }
 `;
-const CatalogPageContent = styled_components_1.default.main `
-  flex: 1;
-  padding: 32px;
-`;
 const CatalogCards = styled_components_1.default.div `
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--api-catalog-card-min-width), 1fr));
   gap: 32px;
+  margin: var(--catalog-cards-group-margin);
 `;
-const CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight);
+  font-size: var(--catalog-title-font-size);
+
   && {
     margin: 0;
   }
 `;
-const CatalogDescription = styled_components_1.default.p `
-  margin: 16px 0 32px 0;
-  font-size: 16px;
-  color: var(--text-color-secondary);
+exports.CatalogDescription = styled_components_1.default.p `
+  color: var(--catalog-description-text-color);
+  font-weight: var(--catalog-description-font-weight);
+  font-size: var(--catalog-description-font-size);
+  margin: var(--catalog-description-margin-top) 0 var(--catalog-description-margin-bottom) 0;
 `;
-const CatalogPageWrapper = styled_components_1.default.div `
-  --sidebar-width: var(--catalog-sidebar-width, 300px);
+exports.CatalogPageWrapper = styled_components_1.default.div `
+  --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 
   font-weight: var(--font-weight-regular);
   padding: 0;
 
-  color: var(--text-color);
+  color: var(--text-secondary);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   line-height: var(--line-height-base);
@@ -121,7 +130,7 @@ const CatalogPageWrapper = styled_components_1.default.div `
     border: 0;
     width: calc(100% + 48px);
     margin: auto -24px 0 -24px;
-    border-top: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-primary);
   }
   a:not([role='button']) {
     text-decoration: none;
@@ -129,44 +138,44 @@ const CatalogPageWrapper = styled_components_1.default.div `
     font-weight: var(--link-font-weight);
   }
 
-  @media screen and (max-width: 767px) {
-    flex-direction: column;
+  ${({ theme }) => theme.mediaQueries.medium} {
+    flex-direction: row;
   }
 `;
-// TODO: merge this input with the input from reference docs
-// the on in ref docs is dark, needs separate variables most likely
-const StyledInput = styled_components_1.default.input `
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  min-width: 200px;
-  outline-color: var(--color-primary-500);
-  width: 100%;
-
-  outline: none;
-  padding: var(--input-padding);
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  color: var(--text-color);
-  font-family: var(--input-font-family);
-  font-size: var(--input-font-size);
-  line-height: var(--input-line-height);
+const FilterTagsWrapper = styled_components_1.default.div.attrs({ 'data-cy': 'Catalog/FilterTags' }) `
+  width: 90%;
+  margin: 0 auto;
+  padding: var(--filter-tags-wrapper-padding);
+  display: flex;
+  overflow-x: scroll;
 
-  &::placeholder {
-    opacity: 0.6;
-    color: var(--text-color);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: none;
   }
 
-  &:hover {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
-  }
+  ${Button_1.Button} {
+    margin: var(--filter-add-button-margin);
+    padding: var(--filter-add-button-padding);
+    font-size: var(--filter-add-button-font-size);
+    font-weight: var(--filter-add-button-font-weight);
+    color: var(--text-secondary);
+    display: flex;
+    white-space: nowrap;
+
+    svg {
+      fill: var(--text-primary);
+    }
 
-  &:focus {
-    color: var(--text-color);
-    border: 1px solid rgba(0, 0, 0, 0.23);
+    &:hover {
+      color: var(--text-primary);
+    }
   }
+`;
+exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  display: none;
 
-  &:-webkit-autofill {
-    background-color: var(--input-background-color);
+  ${({ theme }) => theme.mediaQueries.medium} {
+    display: block;
   }
 `;
 //# sourceMappingURL=Catalog.js.map

package/lib/components/Catalog/CatalogCard.js

@@ -31,89 +31,122 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Link_1 = require("../../mocks/Link");
 const Highlight_1 = require("../../ui/Highlight");
-const Tags_1 = require("../../components/Tags");
-const hooks_1 = require("../../mocks/hooks");
+const Tag_1 = require("../../components/Tag");
+const icons_1 = require("../../icons");
 const telemetry_1 = require("../../mocks/telemetry");
+const utils_1 = require("../../utils");
 function CatalogCard({ item }) {
-    var _a;
-    const { translate } = (0, hooks_1.useTranslate)();
-    const translationKeys = {
-        footer: 'theme.catalog.card.footer',
-    };
+    var _a, _b;
+    const hasTags = item.scorecardStatus || ((_a = item.tags) === null || _a === void 0 ? void 0 : _a.length);
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
         React.createElement(StyledCard, { onClick: () => telemetry_1.telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardTitle, null,
                 React.createElement(Highlight_1.Highlight, null, item.title)),
-            React.createElement(CardDescription, null,
-                React.createElement(Highlight_1.Highlight, null, (_a = item.description) !== null && _a !== void 0 ? _a : '')),
-            item.tags ? React.createElement(Tags_1.Tags, { tags: item.tags }) : null,
-            React.createElement("hr", null),
-            React.createElement(CardFooter, { "data-translation-key": translationKeys.footer }, translate(translationKeys.footer, 'View documentation')))));
+            React.createElement(CardContent, null,
+                React.createElement(CardDescription, null,
+                    React.createElement(Highlight_1.Highlight, null, (_b = item.description) !== null && _b !== void 0 ? _b : '')),
+                React.createElement(CardFooter, null,
+                    hasTags && (React.createElement(CardTags, null,
+                        (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
+                            React.createElement(Highlight_1.Highlight, null, tag)))),
+                        (item.scorecardLevel && item.scorecardStatus && (React.createElement(CardTag, { color: statusToColor(item.scorecardStatus), className: "tag-variant-scorecard-level" },
+                            React.createElement(Highlight_1.Highlight, null, item.scorecardLevel)))) ||
+                            null)),
+                    React.createElement(SelectButton, null,
+                        React.createElement(icons_1.PointingArrowIcon, null)))))));
 }
 exports.CatalogCard = CatalogCard;
-const StyledCard = styled_components_1.default.div `
-  min-height: 268px;
-  height: 100%;
-  box-shadow: var(--box-shadow);
-
+function statusToColor(status) {
+    switch (status) {
+        case 'Below minimum':
+            return 'error';
+        case 'Minimum':
+            return 'warning';
+        case 'Highest':
+            return 'success';
+        default:
+            return '';
+    }
+}
+const SelectButton = styled_components_1.default.div `
+  border: 1px solid var(--catalog-card-button-border-color);
+  border-radius: 100%;
+  width: var(--catalog-card-button-width);
+  height: var(--catalog-card-button-height);
   display: flex;
-  flex-direction: column;
-
-  color: var(--text-color);
-  background-color: var(--thin-tile-background-color);
-  border-radius: 4px;
-
-  border: 1px solid var(--border-color);
-  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
+  align-items: center;
+  justify-content: center;
   transition: all 0.2s ease-in-out;
 
-  &:hover {
-    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
-    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
-    border: 1px solid var(--border-color);
-    transform: translateY(-2px);
+  svg {
+    fill: var(--catalog-card-icon-color);
   }
-
-  border-radius: 8px;
-  width: 100%;
-  padding: 24px 24px 0;
+`;
+const StyledCard = styled_components_1.default.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: 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;
   display: flex;
   flex-direction: column;
-  cursor: pointer;
+
+  &:hover {
+    border-color: var(--catalog-card-hover-border-color);
+
+    ${SelectButton} {
+      transform: rotate(-45deg);
+      border-color: var(--catalog-card-hover-border-color);
+      background: var(--catalog-card-button-hover-background);
+
+      svg {
+        fill: var(--catalog-card-icon-hover-color);
+      }
+    }
 `;
 const CardTitle = styled_components_1.default.h4 `
-  line-height: 26px;
-  letter-spacing: 0.8px;
-  font-size: 20px;
-  font-weight: var(--font-weight-bold);
+  color: var(--catalog-card-title-color);
+  min-height: var(--catalog-card-title-min-height);
+  font-size: var(--catalog-card-title-font-size);
+  font-weight: var(--catalog-card-title-font-weight);
   margin: 0;
-  margin-bottom: 16px;
+  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
 `;
 const CardDescription = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: 3;
+  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  line-height: var(--line-height);
-  letter-spacing: 0px;
-  font-size: 16px;
-  color: var(--text-color-secondary);
-  text-align: inherit;
-  font-weight: 400;
+  margin-bottom: var(--catalog-card-description-margin-bottom);
 `;
-const CardFooter = styled_components_1.default.div `
-  height: 46px;
+const CardContent = styled_components_1.default.div `
+  background-color: var(--catalog-card-content-background-color);
+  border-radius: var(--catalog-card-content-border-radius);
+  padding: var(--catalog-card-content-padding);
+  flex: 1;
   display: flex;
-  align-items: flex-start;
-  justify-content: center;
   flex-direction: column;
-  font-size: 16px;
-  font-weight: var(--font-weight-bold);
-
-  a:hover & {
-    text-decoration: var(--link-hover-text-decoration);
-    color: var(--link-hover-text-color);
-  }
+  justify-content: space-between;
+`;
+const CardFooter = styled_components_1.default.div `
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+`;
+const CardTags = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  min-height: var(--spacing-xl);
+`;
+const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  margin: 0;
 `;
 //# sourceMappingURL=CatalogCard.js.map

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

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

package/lib/components/Catalog/index.js

@@ -14,7 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Catalog"), exports);
-__exportStar(require("./CatalogCard"), exports);
-__exportStar(require("./useCatalog"), exports);
+__exportStar(require("../../components/Catalog/Catalog"), exports);
+__exportStar(require("../../components/Catalog/CatalogCard"), exports);
+__exportStar(require("../../components/Catalog/useCatalog"), exports);
+__exportStar(require("../../components/Catalog/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/Catalog/styledVariables.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.catalog = void 0;
+const styled_components_1 = require("styled-components");
+exports.catalog = (0, styled_components_1.css) `
+  /* === Catalog === */
+  /**
+    * @tokens Catalog page
+    */
+  --catalog-page-padding-vertical: var(--spacing-lg);
+  --catalog-page-padding-horizontal: var(--spacing-xl);
+  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
+
+  --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
+  --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
+
+  /**
+    * @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);
+
+  /**
+    * @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-top: var(--spacing-sm);
+  --catalog-description-margin-bottom: var(--spacing-xl);
+
+  /**
+    * @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
+`;
+//# sourceMappingURL=styledVariables.js.map

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -1,10 +1,30 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockContainer = void 0;
-const styled_components_1 = __importDefault(require("styled-components"));
+const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../utils");
 exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className }) => ({
     'data-component-name': 'CodeBlock/CodeBlockContainer',
@@ -14,20 +34,28 @@ exports.CodeBlockContainer = styled_components_1.default.pre.attrs(({ className
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-line-height);
+    line-height: var(--code-block-line-height);
+    font-weight: var(--code-block-font-weight);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
-    border-radius: ${(withControls) => withControls
-    ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
-    : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-font-size);
+    font-size: var(--code-block-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-    border: none;
-  }
+
+    ${(withControls) => withControls
+    ? (0, styled_components_1.css) `
+            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
+            border-left: 1px solid var(--code-block-border-color);
+            border-right: 1px solid var(--code-block-border-color);
+            border-bottom: 1px solid var(--code-block-border-color);
+          `
+    : (0, styled_components_1.css) `
+            border-radius: var(--code-block-border-radius);
+            border: 1px solid var(--code-block-border-color);
+          `}
 
   /**
   * Based on prism-dark.css