@redocly/theme 0.18.3-patch.2 → 0.18.3-patch.6

package/lib/globalStyle.js

@@ -88,16 +88,16 @@ const themeColors = (0, styled_components_1.css) `
   --color-purple-9: #22075e;
   --color-purple-10: #120338;
 
-  --color-magneta-1: #fff0f6;
-  --color-magneta-2: #ffd6e7;
-  --color-magneta-3: #ffadd2;
-  --color-magneta-4: #ff85c0;
-  --color-magneta-5: #f759ab;
-  --color-magneta-6: #eb2f96;
-  --color-magneta-7: #c41d7f;
-  --color-magneta-8: #9e1068;
-  --color-magneta-9: #780650;
-  --color-magneta-10: #520339;
+  --color-magenta-1: #fff0f6;
+  --color-magenta-2: #ffd6e7;
+  --color-magenta-3: #ffadd2;
+  --color-magenta-4: #ff85c0;
+  --color-magenta-5: #f759ab;
+  --color-magenta-6: #eb2f96;
+  --color-magenta-7: #c41d7f;
+  --color-magenta-8: #9e1068;
+  --color-magenta-9: #780650;
+  --color-magenta-10: #520339;
 
   --color-cyan-1: #e6fffb;
   --color-cyan-2: #b5f5ec;
@@ -154,16 +154,16 @@ const themeColors = (0, styled_components_1.css) `
   --color-primary-text: #161087;
   --color-primary-text-active: #0d086e;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-5);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-7);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
+  --color-success-bg: var(--color-cyan-1);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-5);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
 
   --color-warning-bg: var(--color-gold-1);
   --color-warning-bg-hover: var(--color-gold-2);
@@ -178,7 +178,7 @@ const themeColors = (0, styled_components_1.css) `
 
   --color-error-bg: var(--color-red-1);
   --color-error-bg-hover: var(--color-red-2);
-  --color-error-border: var(--color-red-3);
+  --color-error-border: var(--color-red-7);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-5);
   --color-error-base: var(--color-red-6);
@@ -217,6 +217,7 @@ const themeColors = (0, styled_components_1.css) `
   --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-raised-light: #fafafa; // Always light
   --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
 
@@ -267,13 +268,13 @@ const typography = (0, styled_components_1.css) `
    * @presenter LineHeight
    */
 
-  --line-height-base: 22px;
-  --line-height-xsm: 18px;
-  --line-height-sm: 20px;
-  --line-height-md: 24px;
-  --line-height-lg: 26px;
-  --line-height-xlg: 28px;
-  --line-height-xxlg: 30px;
+  --line-height-base: 24px;
+  --line-height-xsm: 20px;
+  --line-height-sm: 22px;
+  --line-height-md: 26px;
+  --line-height-lg: 28px;
+  --line-height-xlg: 30px;
+  --line-height-xxlg: 32px;
 
   /**
     * @tokens Font Sizes
@@ -416,7 +417,7 @@ const headingsTypography = (0, styled_components_1.css) `
   --h3-font-family: var(--heading-font-family); // @presenter FontFamily
   --h3-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h3-font-size: 18px; // @presenter FontSize
-  --h3-line-height: 18px; // @presenter LineHeight
+  --h3-line-height: 22px; // @presenter LineHeight
   --h3-margin-top: var(--heading-margin-top); // @presenter Spacing
   --h3-margin-bottom: var(--heading-margin-bottom); // @presenter Spacing
   --h3-text-color: var(--heading-text-color); // @presenter Color
@@ -588,9 +589,9 @@ const apiReferenceDocs = (0, styled_components_1.css) `
     * @presenter Color
     */
 
-  --schema-recursive-text-color: var(--color-warning); // @presenter Color
+  --schema-recursive-text-color: var(--color-warning-active); // @presenter Color
   --schema-recursive-background-color: var(--color-warning-bg); // @presenter Color
-  --schema-recursive-border-color: var(--color-warning-border); // @presenter Color
+  --schema-recursive-border-color: var(--color-warning-active); // @presenter Color
 
   /**
     * @tokens GraphQL Docs Reference Schema Non null label
@@ -695,9 +696,9 @@ const badges = (0, styled_components_1.css) `
     * @tokens Deprecated Badge
     */
 
-  --badge-deprecated-text-color: var(--color-warning); // @presenter Color
+  --badge-deprecated-text-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-background-color: var(--color-warning-bg); // @presenter Color
-  --badge-deprecated-border-color: var(--color-warning-border); // @presenter Color
+  --badge-deprecated-border-color: var(--color-warning-active); // @presenter Color
   --badge-deprecated-border: 1px solid var(--badge-deprecated-border-color); // @presenter Border
   --badge-deprecated-border-radius: var(--border-radius); // @presenter BorderRadius
 
@@ -934,6 +935,7 @@ exports.styles = (0, styled_components_1.css) `
     ${loadProgressBar}
     ${NavbarLogo_1.logo}
     ${Markdown_1.markdown}
+    ${Markdown_1.mermaid}
     ${Menu_1.menu}
     ${Menu_1.mobileMenu}
     ${modal}

package/lib/hooks/useMobileMenu.js

@@ -1,18 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMobileMenu = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
+const useModalScrollLock_1 = __importDefault(require("../hooks/useModalScrollLock"));
 function useMobileMenu(initialState = false) {
     const location = (0, react_router_dom_1.useLocation)();
     const [isOpen, setIsOpen] = (0, react_1.useState)(initialState);
     (0, react_1.useEffect)(() => setIsOpen(false), [location.pathname, location.hash]);
-    (0, react_1.useEffect)(() => {
-        if (isOpen)
-            document.body.classList.add('overflow-hidden');
-        else
-            document.body.classList.remove('overflow-hidden');
-    }, [isOpen]);
+    (0, useModalScrollLock_1.default)(isOpen);
     return [isOpen, setIsOpen];
 }
 exports.useMobileMenu = useMobileMenu;

package/lib/hooks/useModalScrollLock.d.ts

@@ -0,0 +1 @@
+export default function useModalScrollLock(isOpen: boolean): () => void;

package/lib/hooks/useModalScrollLock.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+function useModalScrollLock(isOpen) {
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            document.body.classList.add('overflow-hidden');
+        else
+            document.body.classList.remove('overflow-hidden');
+    }, [isOpen]);
+    return () => {
+        document.body.classList.remove('overflow-hidden');
+    };
+}
+exports.default = useModalScrollLock;
+//# sourceMappingURL=useModalScrollLock.js.map

package/lib/icons/AlertIcon/AlertIcon.js

@@ -37,13 +37,8 @@ function Icon({ type, className }) {
 exports.AlertIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'icons/AlertIcon/AlertIcon',
 })) `
-  position: absolute;
-  left: var(--admonition-padding-horizontal);
-  top: 50%;
-  transform: translateY(-50%);
   width: var(--admonition-icon-size);
   height: var(--admonition-icon-size);
-  margin-right: var(--admonition-padding-horizontal);
   flex-shrink: 0;
 
   fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};

package/lib/types/portal/src/shared/types/catalog.d.ts

@@ -1,4 +1,4 @@
-import { CatalogFilterConfig } from "../../../../../config";
+import { CatalogFilterConfig, ScorecardStatus } from '../../../../../index.js';
 export type FilteredCatalog = {
     groups: {
         title: string;
@@ -31,5 +31,9 @@ export type CatalogItem = {
     description?: string;
     image?: string;
     docsLink?: string;
+    scorecardStatus?: ScorecardStatus;
+    scorecardLevel?: string;
+    scoreCardSlug?: string;
+    tags?: unknown[];
     [k: string]: unknown;
 };

package/lib/ui/Highlight.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export declare const HighlightContext: React.Context<string[]>;
 export declare function Highlight(props: {
     children: React.ReactChildren | string;
-}): JSX.Element;
+}): JSX.Element | null;

package/lib/ui/Highlight.js

@@ -31,7 +31,7 @@ function Highlight(props) {
     const { children } = props;
     const searchWords = React.useContext(exports.HighlightContext);
     if (!searchWords.length) {
-        return React.createElement(React.Fragment, null, "children") || null;
+        return children ? React.createElement(React.Fragment, null, children) : null;
     }
     function highlight(str, childIdx = 0) {
         const chunks = (0, highlight_words_core_1.findAll)({

package/lib/ui/darkColors.js

@@ -65,16 +65,16 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-purple-9: #cda8f0;
   --color-purple-10: #ebd7fa;
 
-  --color-magneta-1: #291321;
-  --color-magneta-2: #40162f;
-  --color-magneta-3: #551c3b;
-  --color-magneta-4: #75204f;
-  --color-magneta-5: #a02669;
-  --color-magneta-6: #cb2b83;
-  --color-magneta-7: #e0529c;
-  --color-magneta-8: #f37fb7;
-  --color-magneta-9: #f8a8cc;
-  --color-magneta-10: #fad2e3;
+  --color-magenta-1: #291321;
+  --color-magenta-2: #40162f;
+  --color-magenta-3: #551c3b;
+  --color-magenta-4: #75204f;
+  --color-magenta-5: #a02669;
+  --color-magenta-6: #cb2b83;
+  --color-magenta-7: #e0529c;
+  --color-magenta-8: #f37fb7;
+  --color-magenta-9: #f8a8cc;
+  --color-magenta-10: #fad2e3;
 
   --color-cyan-1: #112123;
   --color-cyan-2: #113536;
@@ -131,35 +131,35 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-primary-text: #d6dfff;
   --color-primary-text-active: #ebf0ff;
 
-  --color-success-bg: var(--color-green-1);
-  --color-success-bg-hover: var(--color-green-2);
-  --color-success-border: var(--color-green-3);
-  --color-success-border-hover: var(--color-green-4);
-  --color-success-hover: var(--color-green-7);
-  --color-success-base: var(--color-green-6);
-  --color-success-active: var(--color-green-5);
-  --color-success-text-hover: var(--color-green-8);
-  --color-success-text: var(--color-green-9);
-  --color-success-text-active: var(--color-green-10);
-
-  --color-warning-bg: var(--color-gold-1);
+  --color-success-bg: var(--color-cyan-3);
+  --color-success-bg-hover: var(--color-cyan-2);
+  --color-success-border: var(--color-cyan-3);
+  --color-success-border-hover: var(--color-cyan-4);
+  --color-success-hover: var(--color-cyan-7);
+  --color-success-base: var(--color-cyan-6);
+  --color-success-active: var(--color-cyan-7);
+  --color-success-text-hover: var(--color-cyan-8);
+  --color-success-text: var(--color-cyan-9);
+  --color-success-text-active: var(--color-cyan-10);
+
+  --color-warning-bg: var(--color-gold-3);
   --color-warning-bg-hover: var(--color-gold-2);
   --color-warning-border: var(--color-gold-3);
   --color-warning-border-hover: var(--color-gold-4);
   --color-warning-hover: var(--color-gold-7);
   --color-warning-base: var(--color-gold-6);
-  --color-warning-active: var(--color-gold-5);
+  --color-warning-active: var(--color-gold-7);
   --color-warning-text-hover: var(--color-gold-8);
   --color-warning-text: var(--color-gold-9);
   --color-warning-text-active: var(--color-gold-10);
 
-  --color-error-bg: var(--color-red-1);
+  --color-error-bg: var(--color-red-3);
   --color-error-bg-hover: var(--color-red-2);
   --color-error-border: var(--color-red-3);
   --color-error-border-hover: var(--color-red-4);
   --color-error-hover: var(--color-red-7);
   --color-error-base: var(--color-red-6);
-  --color-error-active: var(--color-red-5);
+  --color-error-active: var(--color-red-7);
   --color-error-text-hover: var(--color-red-8);
   --color-error-text: var(--color-red-9);
   --color-error-text-active: var(--color-red-10);
@@ -170,7 +170,7 @@ exports.darkMode = (0, styled_components_1.css) `
   --color-info-border-hover: var(--color-blue-4);
   --color-info-hover: var(--color-blue-7);
   --color-info-base: var(--color-blue-6);
-  --color-info-active: var(--color-blue-5);
+  --color-info-active: var(--color-blue-7);
   --color-info-text-hover: var(--color-blue-8);
   --color-info-text: var(--color-blue-9);
   --color-info-text-active: var(--color-blue-10);

package/lib/utils/css-variables.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCssColorVariable = void 0;
-const getCssColorVariable = (color, defaultValue = 'inherit') => (color === null || color === void 0 ? void 0 : color.startsWith('--')) ? `var(${color})` : color || defaultValue;
+const getCssColorVariable = (color, defaultValue = 'currentColor') => ((color === null || color === void 0 ? void 0 : color.startsWith('--')) ? `var(${color})` : color || defaultValue);
 exports.getCssColorVariable = getCssColorVariable;
 //# sourceMappingURL=css-variables.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.18.3-patch.2",
+  "version": "0.18.3-patch.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/I18n/LanguagePicker.tsx

@@ -27,33 +27,31 @@ export const LanguagePicker = (props: LanguagePickerProps) => {
     return null;
   }
 
-  const selected = locale.name || locale.code;
-  const languageItems = locales.map((locale) => (
-    <LanguageItem
-      onClick={() => {
+  const value = locale.code;
+  const languageItems = locales.map((locale) => ({
+    element: <LanguageItem role="link">{locale.name || locale.code || ''}</LanguageItem>,
+    value: locale.code,
+    title: locale.name || locale.code || '',
+  }));
+
+  return (
+    <LanguageSelect
+      value={value}
+      options={languageItems}
+      onChange={(value: string) => {
         const newLangPathname = withPathPrefix(
-          getPathnameForLocale(location.pathname, defaultLocale, locale.code, locales),
+          getPathnameForLocale(location.pathname, defaultLocale, value, locales),
         );
         const newUrlWithLanguage = `${newLangPathname}${location.search}${location.hash}`;
         history.push(newUrlWithLanguage);
-        props.onChangeLanguage(locale.code);
+        props.onChangeLanguage(value);
       }}
-      key={locale.code}
-      role="link"
-    >
-      {locale.name || locale.code || ''}
-    </LanguageItem>
-  ));
-
-  return (
-    <LanguageSelect
-      selected={selected}
-      options={languageItems}
       triggerEvent="hover"
       placement={props.placement}
       alignment={props.alignment}
       icon={<LanguageIcon />}
       onlyIcon={props.onlyIcon}
+      withArrow={false}
     />
   );
 };
@@ -63,6 +61,13 @@ const LanguageSelect = styled(Select).attrs(() => ({
     'data-component-name': 'I18n/LanguagePicker',
   },
 }))`
+  --select-list-item-active-background-color: var(
+    --language-picker-list-item-active-background-color
+  );
+  --select-list-item-hover-background-color: var(
+    --language-picker-list-item-hover-background-color
+  );
+
   display: none;
   font-size: var(--language-picker-font-size);
   font-weight: var(--language-picker-font-weight);
@@ -100,10 +105,6 @@ const LanguageSelect = styled(Select).attrs(() => ({
       padding: var(--language-picker-list-item-vertical-padding)
         var(--language-picker-list-item-horizontal-padding);
     }
-
-    :hover {
-      background-color: var(--language-picker-list-item-active-background-color);
-    }
   }
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -115,4 +116,5 @@ const LanguageSelect = styled(Select).attrs(() => ({
     background: var(--language-picker-hover-background-color);
   }
 `;
+
 const LanguageItem = styled.div``;

package/src/I18n/styledVariables.ts

@@ -31,6 +31,7 @@ export const languagePicker = css`
   --language-picker-list-item-vertical-padding: var(--select-list-item-vertical-padding); // @presenter Spacing
   --language-picker-list-item-border-radius: var(--select-list-item-border-radius); // @presenter BorderRadius
   --language-picker-list-item-active-background-color: var(--select-list-item-active-background-color); // @presenter Color
+  --language-picker-list-item-hover-background-color: var(--select-list-item-hover-background-color); // @presenter Color
 
   // @tokens End
 `

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -34,10 +34,6 @@ const BreadcrumbText = styled.div`
 const BreadcrumbWrapper = styled.div<{ isActive: boolean; isLink: boolean }>`
   border-radius: var(--border-radius);
 
-  &:first-child {
-    padding-left: 0;
-  }
-
   ${(props) =>
     props.isLink &&
     `

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -31,7 +31,7 @@ export const Breadcrumbs = (props: { className?: string }) => {
                 });
               }}
             />
-            {isLast ? null : <div>/</div>}
+            {isLast ? null : <span>/</span>}
           </React.Fragment>
         );
       })}
@@ -51,6 +51,10 @@ const Container = styled.div`
     padding: var(--breadcrumbs-padding);
   }
 
+  > span {
+    padding: var(--breadcrumbs-gap);
+  }
+
   @media print {
     display: none;
   }

package/src/components/Breadcrumbs/styledVariables.ts

@@ -9,7 +9,8 @@ export const breadcrumbs = css`
   --breadcrumbs-font-size: var(--font-size-base); // @presenter FontSize
   --breadcrumbs-active-text-color: var(--text-primary); // @presenter Color
   --breadcrumbs-hover-text-decoration: underline; // @presenter TextDecoration
-  --breadcrumbs-padding: 0 var(--spacing-xs); // @presenter Spacing
+  --breadcrumbs-padding: 0; // @presenter Spacing
+  --breadcrumbs-gap: var(--spacing-xs);
   --breadcrumbs-margin-bottom: var(--spacing-lg); // @presenter Spacing
 
   // @tokens End

package/src/components/Catalog/Catalog.tsx

@@ -12,6 +12,7 @@ import { FilterContent } from '@theme/components/Filter/FilterContent';
 import { FilterPopover } from '@theme/components/Filter/FilterPopover';
 import { Button } from '@theme/components/Button';
 import { PlusIcon } from '@theme/icons/PlusIcon';
+import useModalScrollLock from '@theme/hooks/useModalScrollLock';
 
 import { useCatalog } from './useCatalog';
 
@@ -32,6 +33,8 @@ export default function Catalog(props: {
   };
   const { translate } = useTranslate();
 
+  useModalScrollLock(isAddingFilter);
+
   return (
     <HighlightContext.Provider value={[filterTerm]}>
       <CatalogPageWrapper>
@@ -54,7 +57,11 @@ export default function Catalog(props: {
           filterValuesCasing={catalogConfig.filterValuesCasing}
         />
         {isAddingFilter && (
-          <FilterPopover setIsAddingFilter={setIsAddingFilter} filters={filters} />
+          <FilterPopover
+            setIsAddingFilter={setIsAddingFilter}
+            filters={filters}
+            filterValuesCasing={catalogConfig.filterValuesCasing}
+          />
         )}
         <CatalogPageContent>
           <CatalogPageDescriptionWrapper>
@@ -124,11 +131,11 @@ export const FilterControls = styled.div`
   background: var(--bg-raised);
 `;
 
-const CatalogPageContent = styled.main`
+export const CatalogPageContent = styled.main`
   flex: 1;
   padding: var(--mobile-catalog-page-padding);
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     padding: var(--catalog-page-padding);
   }
 `;
@@ -140,7 +147,7 @@ const CatalogCards = styled.div`
   margin: var(--catalog-cards-group-margin);
 `;
 
-const CatalogTitle = styled(H2)`
+export const CatalogTitle = styled(H2)`
   color: var(--catalog-title-text-color);
   font-weight: var(--catalog-title-font-weight);
   font-size: var(--catalog-title-font-size);
@@ -150,14 +157,14 @@ const CatalogTitle = styled(H2)`
   }
 `;
 
-const CatalogDescription = styled.p`
+export const CatalogDescription = styled.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.div`
+export const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width, 285px);
 
   display: flex;
@@ -183,7 +190,7 @@ const CatalogPageWrapper = styled.div`
     font-weight: var(--link-font-weight);
   }
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     flex-direction: row;
   }
 `;
@@ -193,7 +200,7 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
   display: flex;
   overflow-x: scroll;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 
@@ -216,10 +223,10 @@ const FilterTagsWrapper = styled.div.attrs({ 'data-cy': 'Catalog/FilterTags' })`
   }
 `;
 
-const CatalogPageDescriptionWrapper = styled.div`
+export const CatalogPageDescriptionWrapper = styled.div`
   display: none;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: block;
   }
 `;

package/src/components/Catalog/CatalogCard.tsx

@@ -10,6 +10,7 @@ import { telemetry } from '@portal/telemetry';
 import { slug } from '@theme/utils';
 
 export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
+  const hasTags = item.scorecardStatus || item.tags?.length;
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
@@ -21,13 +22,22 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
             <Highlight>{item.description ?? ''}</Highlight>
           </CardDescription>
           <CardFooter>
-            {item.tags && (
+            {hasTags && (
               <CardTags>
-                {(item.tags as string[]).map((tag, index) => (
+                {((item.tags as string[]) || []).map((tag, index) => (
                   <CardTag key={tag + index} color={slug(tag)}>
                     <Highlight>{tag}</Highlight>
                   </CardTag>
                 ))}
+                {(item.scorecardLevel && item.scorecardStatus && (
+                  <CardTag
+                    color={statusToColor(item.scorecardStatus)}
+                    className="tag-variant-scorecard-level"
+                  >
+                    <Highlight>{item.scorecardLevel}</Highlight>
+                  </CardTag>
+                )) ||
+                  null}
               </CardTags>
             )}
             <SelectButton>
@@ -40,6 +50,19 @@ export function CatalogCard({ item }: { item: CatalogItem }): JSX.Element {
   );
 }
 
+function statusToColor(status: string) {
+  switch (status) {
+    case 'Below minimum':
+      return 'error';
+    case 'Minimum':
+      return 'warning';
+    case 'Highest':
+      return 'success';
+    default:
+      return '';
+  }
+}
+
 const SelectButton = styled.div`
   border: 1px solid var(--catalog-card-button-border-color);
   border-radius: 100%;
@@ -76,7 +99,7 @@ const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
       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);
       }

package/src/components/CodeBlock/styledVariables.ts

@@ -48,7 +48,7 @@ export const code = css`
   --code-block-controls-text-color: var(--text-secondary); // @presenter Color
   --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
   --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
-  --code-block-controls-padding: 0 5px; // @presenter Spacing
+  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
   --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
   --code-block-text-controls-background-color: var(--code-block-controls-background-color);
 
@@ -66,7 +66,7 @@ export const code = css`
   --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
   --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-green-6); // @presenter Color
+  --code-block-tokens-string-color: var(--color-cyan-6); // @presenter Color
   --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
   --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
   --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color