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

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

@@ -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

package/src/components/Filter/Filter.tsx

@@ -8,8 +8,15 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 import { useTranslate } from '@portal/hooks';
 import { CheckboxIcon } from '@theme/icons';
 import { Select } from '@theme/components/Select';
+import type { ThemeConfig } from '@theme/config';
 
-export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions: any } }) {
+export function Filter({
+  filter,
+  filterValuesCasing,
+}: {
+  filter: ResolvedFilter & { selectedOptions: any };
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
+}) {
   const { translate } = useTranslate();
   const translationKeys = {
     selectAll: 'theme.catalog.filters.select.all',
@@ -44,7 +51,9 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
             role="link"
             onClick={() => filter.selectOption(option.value)}
           >
-            <FilterOptionLabel>{translate(option.value)}</FilterOptionLabel>
+            <FilterOptionLabel>
+              {changeCasing(translate(option.value), filterValuesCasing)}
+            </FilterOptionLabel>
             <FilterOptionCount>{option.count}</FilterOptionCount>
           </FilterOption>
         ),
@@ -119,7 +128,9 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
           return (
             <FilterOption key={id} role="link" onClick={() => filter.toggleOption(value.value)}>
               <CheckboxIcon checked={filter.selectedOptions.has(value.value)} />
-              <FilterOptionLabel>{translate(value.value)}</FilterOptionLabel>
+              <FilterOptionLabel>
+                {changeCasing(translate(value.value), filterValuesCasing)}
+              </FilterOptionLabel>
               <FilterOptionCount>{value.count}</FilterOptionCount>
             </FilterOption>
           );
@@ -129,6 +140,26 @@ export function Filter({ filter }: { filter: ResolvedFilter & { selectedOptions:
   );
 }
 
+function changeCasing(
+  str: string,
+  casing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'],
+) {
+  if (!casing || casing === 'original' || !str) return str;
+
+  if (casing === 'lowercase') {
+    return str.toLowerCase();
+  }
+
+  if (casing === 'uppercase') {
+    return str.toUpperCase();
+  }
+
+  if (casing === 'sentence') {
+    const words = str.split(/[\s-_]+/);
+    return words.map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase()).join(' ');
+  }
+}
+
 const FilterGroup = styled.div`
   padding: var(--filter-group-padding);
 `;

package/src/components/Filter/FilterContent.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { useTranslate } from '@portal/hooks';
 import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter/index';
+import { Filter } from '@theme/components/Filter';
+import { Sidebar } from '@theme/components/Sidebar';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 import { StyledInput } from '@theme/components/Filter/FilterPopover';
 
@@ -13,6 +16,7 @@ interface FilterContentProps {
   filters: ResolvedFilter[];
   filterTerm: string;
   isMobile: boolean;
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
 export function FilterContent({
@@ -20,6 +24,7 @@ export function FilterContent({
   filters,
   filterTerm,
   isMobile,
+  filterValuesCasing,
 }: FilterContentProps) {
   const { translate } = useTranslate();
   const translationKeys = {
@@ -50,7 +55,11 @@ export function FilterContent({
       </FilterControls>
       <FilterItems>
         {filters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
+          <Filter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+          />
         ))}
       </FilterItems>
       {hasActiveFilters && (
@@ -62,7 +71,7 @@ export function FilterContent({
   );
 }
 
-const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
+const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
   width: var(--sidebar-width);
   display: none;
 
@@ -71,7 +80,7 @@ const FilterContentWrapper = styled.div<{ isMobile?: boolean }>`
     margin: var(--filter-content-clear-button-margin);
   }
 
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
     display: block;
     border-right: 1px solid var(--filter-content-border-color);
 

package/src/components/Filter/FilterPopover.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { Filter, FilterControls } from '@theme';
 
+import type { ThemeConfig } from '@theme';
+
 import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
 import { useTranslate } from '@portal/hooks';
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
@@ -9,13 +11,20 @@ import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalo
 interface FilterPopoverProps {
   setIsAddingFilter: (value: boolean) => void;
   filters: ResolvedFilter[];
+  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
 }
 
-export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps) {
+export function FilterPopover({
+  setIsAddingFilter,
+  filters,
+  filterValuesCasing,
+}: FilterPopoverProps) {
   const [filterTerm, setFilterTerm] = React.useState('');
   const filteredFilters = filters
     .map((filter) => {
-      const options = filter.options.filter((option) => option.value.includes(filterTerm));
+      const options = filter.options.filter((option) =>
+        option.value.toLowerCase().includes(filterTerm.toLowerCase()),
+      );
       return options.length
         ? {
             ...filter,
@@ -43,6 +52,7 @@ export function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps
         setFilterTerm={setFilterTerm}
         filters={filters}
         filterTerm={filterTerm}
+        filterValuesCasing={filterValuesCasing}
         isMobile
       />
       <FilterControls>
@@ -72,7 +82,7 @@ const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
   background-color: var(--filter-popover-background-color);
   display: block;
 
-  ${({ theme }) => theme.mediaQueries.small} {
+  ${({ theme }) => theme.mediaQueries.medium} {
     display: none;
   }
 `;

package/src/components/Filter/styledVariables.ts

@@ -30,7 +30,7 @@ export const filter = css`
   --filter-option-count-background-color: var(--bg-raised);
 
   --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
+  --filter-content-items-padding: 0 var(--spacing-lg);
   --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
   --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
   --filter-controls-background-color: var(--bg-base);

package/src/components/Footer/Footer.tsx

@@ -21,7 +21,7 @@ export function Footer(): JSX.Element | null {
     <FooterPresentationalComponent
       items={items as ResolvedNavItem[]}
       copyrightText={copyrightText}
-      logo={logo}
+      logo={footer?.logo?.hide ? undefined : logo}
     />
   );
 }

package/src/components/Footer/FooterColumn.tsx

@@ -83,6 +83,8 @@ const FooterColumnContainer = styled.div`
   flex: 1;
   margin: 0 0 var(--mobile-footer-column-margin-bottom) 0;
   min-width: var(--footer-column-min-width);
+  align-content: center;
+  flex-wrap: wrap;
 
   ${({ theme }) => theme.mediaQueries.small} {
     text-align: left;

package/src/components/Footer/styledVariables.ts

@@ -42,7 +42,7 @@ export const footer = css`
   --footer-copyright-text-align: start;
 
   --footer-logo-display: block;
-  --footer-logo-margin-right: 86px; // @presenter Spacing
+  --footer-logo-margin-right: 0; // @presenter Spacing
   --footer-logo-margin-bottom: var(--spacing-xl); // @presenter Spacing
 
   --footer-language-picker-display: block;

package/src/components/Markdown/Admonition.tsx

@@ -31,18 +31,20 @@ export function Admonition({
       data-hash={dataHash}
     >
       <AlertIcon type={type} />
-      {name ? <Heading type={type}>{name}</Heading> : null}
-      <Content>{children}</Content>
+      <TextContainer>
+        {name ? <Heading type={type}>{name}</Heading> : null}
+        <Content>{children}</Content>
+      </TextContainer>
     </Wrapper>
   );
 }
 
 const Wrapper = styled.div<AdmonitionTypeProps>`
-  position: relative;
-  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--spacing-base);
   margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
   padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);
-  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -58,10 +60,13 @@ const Wrapper = styled.div<AdmonitionTypeProps>`
   `}
 `;
 
-const Heading = styled.h5<AdmonitionTypeProps>`
-  display: block;
-  margin: 0 0 10px;
+const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-unit);
+`;
 
+const Heading = styled.div<AdmonitionTypeProps>`
   letter-spacing: var(--admonition-heading-letter-spacing);
   color: ${({ type }) => `var(--admonition-${type}-heading-text-color)`};
 

package/src/components/Markdown/Mermaid.tsx

@@ -28,6 +28,9 @@ export function Mermaid({
 }
 
 const Wrapper = styled.div`
+  background-color: var(--mermaid-background-color);
+  border-radius: var(--mermaid-border-radius);
+
   .mermaid > svg {
     font-size: var(--font-size-base) !important;
     max-width: 100%;

package/src/components/Markdown/styledVariables.ts

@@ -7,11 +7,11 @@ export const admonition = css`
   * @tokens Admonition typography
   */
 
-  --admonition-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-font-size: var(--font-size-sm); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
   --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
   --admonition-heading-transform: uppercase;
 
@@ -21,16 +21,16 @@ export const admonition = css`
   */
 
   --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical:  var(--spacing-xs);
+  --admonition-margin-vertical: var(--spacing-lg);
   --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical:  var(--spacing-base);
+  --admonition-padding-vertical: var(--spacing-md);
   --admonition-icon-size: 25px;
 
   /**
   * @tokens Admonition border
   */
 
-  --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --admonition-border-radius: 0; // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
   --admonition-border-width: var(--border-width);
 
@@ -216,4 +216,15 @@ export const markdown = css`
   --md-tabs-hover-tab-border-color: var(--border-secondary); // @presenter Color
 
   // @tokens End
-`;
+`;
+
+export const mermaid = css`
+  /**
+  * @tokens Mermaid 
+  */
+
+  --mermaid-background-color: var(--bg-raised-light); // @presenter Color
+  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+  `;

package/src/components/Panel/PanelHeader.ts

@@ -18,6 +18,7 @@ export const PanelHeader = styled.div.attrs<{ className?: string }>(({ className
   justify-content: space-between;
   min-height: 40px;
   white-space: var(--panel-heading-white-space-local);
+  color: var(--panel-heading-text-color);
 
   cursor: pointer;
 

package/src/components/Panel/styledVariables.ts

@@ -421,7 +421,7 @@ export const apiReferencePanels = css`
   * @tokens Panel try-it tabs
   */
 
-  --panel-try-it-tabs-font-size: 12px; // @presenter FontSize
+  --panel-try-it-tabs-font-size: var(--font-size-sm);
   --panel-try-it-tabs-font-family: var(--panel-font-family); // @presenter FontFamily
   --panel-try-it-tabs-font-weight: var(--panel-font-weight); // @presenter FontWeight
 

package/src/components/Product/ProductPicker.tsx

@@ -31,7 +31,6 @@ export const ProductPicker = () => {
     <ProductSelect
       selected={currentProductComponent}
       options={productComponents}
-      withArrow={true}
       triggerEvent="hover"
     />
   ) : null;

package/src/components/Select/Select.tsx

@@ -23,7 +23,7 @@ export const Select = ({
   selected,
   options,
   dataAttributes,
-  withArrow,
+  withArrow = true,
   triggerEvent = 'click',
   onChange,
   placement,
@@ -72,9 +72,7 @@ export const Select = ({
       onClick={triggerEvent === 'click' ? handleToggle : undefined}
     >
       <SelectInput>
-        {!onlyIcon && (
-          <SelectInputValue withIcon={withArrow || !!icon}>{_selected}</SelectInputValue>
-        )}
+        {!onlyIcon && <SelectInputValue>{_selected}</SelectInputValue>}
         {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </SelectInput>
@@ -113,21 +111,23 @@ export const SelectInput = styled.div`
   border-radius: var(--select-input-border-radius);
   padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   cursor: pointer;
+  gap: 8px;
 `;
 
-export const SelectInputValue = styled.div<{ withIcon?: boolean }>`
+export const SelectInputValue = styled.div`
   pointer-events: none;
-  ${({ withIcon }) => (withIcon ? 'margin-right: 8px;' : '')}
+  min-width: 0;
 `;
 
 export const SelectList = styled.ul<{ placement?: string; alignment?: string }>`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
+  top: ${({ placement }) => (placement === 'top' ? 'auto' : 'calc(100% + 2px)')};
+  bottom: ${({ placement }) => (placement === 'top' ? 'calc(100% + 2px)' : 'auto')};
   left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
   right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
   margin: 0;
   min-width: var(--select-list-min-width);
+  width: 100%;
   max-width: var(--select-list-max-width);
   padding: var(--select-list-padding);
   background-color: var(--select-list-background-color);

package/src/components/Separator/SeparatorItem.tsx

@@ -23,5 +23,6 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
 
   :hover {
     color: var(--sidebar-item-separator-text-color);
+    background: none;
   }
 `;

package/src/components/Sidebar/HeaderWrapper.tsx

@@ -4,7 +4,7 @@ export const HeaderWrapper = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/HeaderWrapper',
   className,
 }))`
-  margin: var(--sidebar-offset-top) 0 0 var(--sidebar-offset-left);
-  padding-bottom: var(--sidebar-header-padding-bottom);
+  margin: var(--sidebar-offset-top) 0 0 0;
+  padding: 0 0 var(--sidebar-header-padding-bottom) var(--sidebar-offset-left);
   border-bottom: solid 1px var(--border-secondary);
 `;

package/src/components/Tag/Tag.tsx

@@ -24,22 +24,25 @@ interface TagProps {
   children?: React.ReactNode;
   closable?: boolean;
   color?: StatusColor | Color | string;
+  size?: string;
   icon?: React.ReactNode;
   onClick?: () => void;
 }
 
-export function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element {
+export function Tag({ children, className, color, icon, onClick, size }: TagProps): JSX.Element {
   return (
-    <TagContainer className={className} color={color} onClick={onClick}>
+    <TagContainer className={className} color={color} size={size} onClick={onClick}>
       {icon ? icon : null}
       {children}
     </TagContainer>
   );
 }
 
-const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
+const TagContainer = styled.div.attrs(({ className, color, size }: TagProps) => ({
   'data-component-name': 'Tag/Tag',
-  className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
+  className:
+    (className || '') +
+    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
 }))<TagProps>`
   display: inline-flex;
   align-items: center;
@@ -48,6 +51,11 @@ const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
 
   padding: var(--tag-padding);
   margin: var(--tag-margin);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
   gap: var(--tag-gap);
 
   font-size: var(--tag-font-size);

package/src/components/Tag/styledVariables.ts

@@ -15,6 +15,7 @@ export const tag = css`
     */
 
   --tag-padding: 1px 8px; //@presenter Spacing
+  --tag-large-padding: 4px 16px; //@presenter Spacing
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -38,6 +39,11 @@ export const tag = css`
     * @tokens Tag colors
     */
 
+  .tag-size-large {
+    --tag-padding: var(--tag-large-padding);
+    --tag-font-size: var(--font-size-regular);
+  }
+
   .tag-grey,
   .tag-draft,
   .tag-schema,
@@ -52,7 +58,7 @@ export const tag = css`
   .tag-approved,
   .tag-get {
     --tag-color: var(--color-success-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
   }
 
@@ -70,7 +76,7 @@ export const tag = css`
   .tag-deprecated,
   .tag-put {
     --tag-color: var(--color-warning-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
   }
 
@@ -78,42 +84,42 @@ export const tag = css`
   .tag-processing,
   .tag-post {
     --tag-color: var(--color-info-active); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
   }
 
   .tag-purple,
   .tag-head {
     --tag-color: var(--color-purple-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
   }
 
   .tag-cyan,
   .tag-option {
     --tag-color: var(--color-cyan-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-cyan-1); // @presenter Color
     --tag-border-color: var(--color-cyan-7); // @presenter Color
   }
 
   .tag-yellow,
   .tag-patch {
     --tag-color: var(--color-yellow-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-yellow-1); // @presenter Color
     --tag-border-color: var(--color-yellow-7); // @presenter Color
   }
 
   .tag-geekblue,
   .tag-link {
     --tag-color: var(--color-geekblue-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-geekblue-1); // @presenter Color
     --tag-border-color: var(--color-geekblue-7); // @presenter Color
   }
 
   .tag-magneta,
   .tag-hook {
     --tag-color: var(--color-magneta-7); // @presenter Color
-    --tag-background-color: none; // @presenter Color
+    --tag-background-color: var(--color-magneta-1); // @presenter Color
     --tag-border-color: var(--color-magneta-7); // @presenter Color
   }
 

package/src/config.ts

@@ -373,6 +373,10 @@ const catalogSchema = {
     slug: { type: 'string' },
     filters: { type: 'array', items: catalogFilterSchema },
     groupByFirstFilter: { type: 'boolean' },
+    filterValuesCasing: {
+      type: 'string',
+      enum: ['sentence', 'original', 'lowercase', 'uppercase'],
+    },
     items: navItemsSchema,
     requiredPermission: { type: 'string' },
     separateVersions: { type: 'boolean' },
@@ -416,6 +420,7 @@ export const themeConfigSchema = {
       properties: {
         items: navItemsSchema,
         copyrightText: { type: 'string' },
+        logo: hideConfigSchema,
         ...hideConfigSchema.properties,
       },
       additionalProperties: false,
@@ -720,3 +725,9 @@ export type GoogleAnalyticsConfig = FromSchema<typeof googleAnalyticsConfigSchem
 export type CatalogConfig = FromSchema<typeof catalogSchema>;
 export type CatalogFilterConfig = FromSchema<typeof catalogFilterSchema>;
 export type ScorecardConfig = FromSchema<typeof scorecardConfigSchema>;
+
+export enum ScorecardStatus {
+  BelowMinimum = 'Below minimum',
+  Highest = 'Highest',
+  Minimum = 'Minimum',
+}