@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/src/components/Catalog/CatalogTags.tsx

@@ -0,0 +1,115 @@
+import React, { JSX } from 'react';
+import styled from 'styled-components';
+
+import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
+import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
+
+export type CatalogTagsProps = {
+  items: string[];
+  itemsToShow?: number;
+  showPlaceholder?: boolean;
+  tagProps?: TagProps;
+  showAvatars?: boolean;
+  maxItemLength?: number;
+};
+
+export function CatalogTags({
+  items,
+  itemsToShow = 1,
+  showPlaceholder = false,
+  showAvatars,
+  tagProps,
+  maxItemLength = CATALOG_TAG_MAX_LENGTH,
+}: CatalogTagsProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  if (!items || items.length === 0) {
+    if (showPlaceholder) {
+      return (
+        <CatalogTagsNotConnectedWrapper data-component-name="Catalog/CatalogTags">
+          {translate('catalog.notConnected', 'Not connected')}
+        </CatalogTagsNotConnectedWrapper>
+      );
+    }
+    return null;
+  }
+
+  const maxLength = showAvatars || tagProps?.icon ? maxItemLength - 3 : maxItemLength;
+  const isFirstItemTruncated = items[0]?.length > maxLength;
+  const anyItemHidden = items.length > itemsToShow;
+
+  const shouldUseVariantWithTooltip = anyItemHidden || isFirstItemTruncated;
+
+  if (shouldUseVariantWithTooltip) {
+    const displayedItems = items.slice(0, itemsToShow);
+    const remainingCount = items.length - itemsToShow;
+
+    return (
+      <Tooltip tip={items.join(', ')} placement="bottom" className="catalog">
+        <CatalogTagsWrapper data-component-name="Catalog/CatalogTags">
+          {displayedItems.map((item, index) => (
+            <Tag
+              key={`${item}-${index}`}
+              {...tagProps}
+              {...(showAvatars && {
+                icon: <CatalogAvatar value={item} size="small" />,
+                style: {
+                  ...tagProps?.style,
+                  paddingLeft: 'var(--catalog-tags-tag-left-padding)',
+                },
+              })}
+              textTransform="none"
+              maxLength={maxLength}
+            >
+              <CatalogHighlight>{item}</CatalogHighlight>
+            </Tag>
+          ))}
+
+          {remainingCount > 0 && <MoreTagsButton>+ {remainingCount}</MoreTagsButton>}
+        </CatalogTagsWrapper>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <CatalogTagsWrapper data-component-name="Catalog/CatalogTags">
+      {items.map((item, index) => (
+        <Tag
+          key={`${item}-${index}`}
+          {...tagProps}
+          {...(showAvatars && {
+            icon: <CatalogAvatar value={item} size="small" />,
+            style: {
+              ...tagProps?.style,
+              paddingLeft: 'var(--catalog-tags-tag-left-padding)',
+            },
+          })}
+          maxLength={maxLength}
+        >
+          <CatalogHighlight>{item}</CatalogHighlight>
+        </Tag>
+      ))}
+    </CatalogTagsWrapper>
+  );
+}
+
+const CatalogTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`;
+
+const MoreTagsButton = styled.span`
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;
+
+const CatalogTagsNotConnectedWrapper = styled.span`
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;

package/src/components/Catalog/variables.ts

@@ -47,7 +47,7 @@ export const catalog = css`
   --catalog-description-text-color: var(--text-color-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-lg);
-  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-description-margin: 0 0 var(--spacing-base) 0;
   --catalog-description-line-height: var(--line-height-lg);
 
   /**
@@ -152,6 +152,7 @@ export const catalog = css`
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);
   --catalog-tags-not-connected-color: var(--text-color-disabled);
+  --catalog-tags-tag-left-padding: 2px;
 
   /**
     * @tokens Catalog empty state
@@ -206,7 +207,7 @@ export const catalog = css`
     * @tokens Catalog card
     */
   --catalog-card-height: 241px;
-  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-vertical: var(--spacing-md);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -281,7 +282,7 @@ export const catalog = css`
   /**
     * @tokens Catalog card footer
     */
-  --catalog-card-footer-height: 72px;
+  --catalog-card-footer-height: 68px;
 
   /**
     * @tokens Catalog card description
@@ -313,11 +314,6 @@ export const catalog = css`
   --catalog-page-badge-dot-size: 6px;
   --catalog-page-badge-dot-border-color: var(--color-static-white);
 
-  /**
-   * @tokens Catalog card metadata
-   */
-  --catalog-card-metadata-owner-tag-left-padding: 2px;
-
 
   /**
     * @tokens Catalog table
@@ -325,13 +321,13 @@ export const catalog = css`
   --catalog-table-border-color: var(--border-color-secondary);
   --catalog-table-header-bg-color: var(--layer-color);
   --catalog-table-header-font-weight: var(--font-weight-medium);
-  --catalog-table-header-cell-padding: 4px 8px;
-  --catalog-table-cell-padding: 4px 8px;
+  --catalog-table-header-cell-padding: 4px 6px 4px 8px;
+  --catalog-table-cell-padding: 4px 6px 4px 8px;
   --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
   --catalog-table-empty-state-padding: 32px;
   --catalog-table-empty-state-color: var(--text-color-secondary);
-  --catalog-table-title-cell-gap: 12px;
-  --catalog-table-entity-title-content-offset: 42px;
+  --catalog-table-title-cell-gap: var(--spacing-xs);
+  --catalog-table-entity-title-content-offset: 40px;
 
   /**
     * @tokens Catalog table header
@@ -501,8 +497,6 @@ export const catalog = css`
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
   --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
-
-
   // @tokens End
 
   /**
@@ -581,5 +575,19 @@ export const catalog = css`
   --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
   // @tokens End
+
+  /**
+   * @tokens Catalog entity type icon
+   */
+  --catalog-table-icon-width-large: 32px;
+  --catalog-table-icon-height-large: 32px;
+  --catalog-table-icon-width-medium: 24px;
+  --catalog-table-icon-height-medium: 24px;
+
+  /**
+   * @tokens Catalog user entity cell
+   */
+  --catalog-user-entity-cell-email-font-size: var(--font-size-base);
+  --catalog-user-entity-cell-email-line-height: var(--line-height-base);
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Filter/variables.ts

@@ -22,7 +22,7 @@ export const filter = css`
   --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-color: var(--text-color-secondary);
+  --filter-option-label-color: var(--text-color-primary);
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 

package/src/components/Link/Link.tsx

@@ -4,7 +4,7 @@ import { Link as ReactLink } from 'react-router-dom';
 
 import type { JSX } from 'react';
 
-import { ThemeDataContext } from '@redocly/theme/core/contexts';
+import { ThemeDataContext } from '@redocly/theme/core/contexts/ThemeDataContext';
 
 export type LinkProps = {
   to: string;

package/src/components/Menu/MenuItem.tsx

@@ -291,6 +291,7 @@ const MenuItemLabelWrapper = styled.li<{
     css`
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
+      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon} path {
         fill: var(--menu-item-color-active);
@@ -369,7 +370,10 @@ const MenuItemLink = styled(Link)`
   order: 1;
 `;
 
-const MenuItemSeparatorLine = styled.div<{ depth?: number; linePosition?: string }>`
+const MenuItemSeparatorLine = styled.div<{
+  depth?: number;
+  linePosition?: string;
+}>`
   height: var(--menu-item-separator-line-height);
   background-color: var(--menu-item-separator-line-bg-color);
   margin: ${({ depth }) => `

package/src/components/Menu/variables.dark.ts

@@ -5,4 +5,6 @@ export const menuDarkMode = css`
   --menu-content-title-color: var(--text-color-secondary); // @presenter Color
   --menu-content-color-active: var(--text-color-primary); // @presenter Color
   --menu-content-color-disabled: var(--text-color-disabled); // @presenter Color
+
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 `;

package/src/components/Menu/variables.ts

@@ -19,6 +19,7 @@ export const menu = css`
   --menu-item-font-family: var(--sidebar-font-family); // @presenter FontFamily
   --menu-item-font-size: var(--sidebar-font-size); // @presenter FontSize
   --menu-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --menu-item-font-weight-active: var(--font-weight-medium); // @presenter FontWeight
   --menu-item-line-height: var(--line-height-base); // @presenter LineHeight
 
     /**
@@ -28,11 +29,11 @@ export const menu = css`
   --menu-item-text-color: var(--sidebar-text-color); // @presenter Color
   --menu-item-bg-color: transparent; // @presenter Color
   --menu-item-bg-color-hover: var(--color-hover-base); // @presenter Color
-  --menu-item-bg-color-active: var(--tree-bg-color-active); // @presenter Color
+  --menu-item-bg-color-active: var(--color-primary-bg, var(--menu-item-bg-color-active-legacy)); // @presenter Color
 
   --menu-item-color-hover: var(--tree-content-color-hover); // @presenter Color
-  --menu-item-color-active: var(--tree-content-color-default); // @presenter Color
-
+  --menu-item-color-active: var(--color-primary-text, var(--menu-item-color-active-legacy)); // @presenter Color
+  
   /**
    * @tokens Menu item spacing
    * @presenter Spacing