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

package/src/components/Navbar/styledVariables.ts

@@ -20,16 +20,19 @@ export const navbar = css`
 
   --navbar-item-active-text-color: var(--text-primary);
   --navbar-item-active-text-decoration: none;
+  --navbar-item-active-bottom-border: 2px solid var(--navbar-item-active-text-color);
 
   --navbar-item-padding-vertical: var(--spacing-xxs);
   --navbar-item-padding-horizontal: var(--spacing-sm);
   --navbar-item-line-height: var(--line-height-base);
-  --navbar-item-border-radius: 32px;
-  --navbar-item-active-background-color: var(--bg-sunken);
+  --navbar-item-active-background-color: none;
+  --navbar-item-border-radius: 0;
+  --navbar-item-bottom-border: 2px solid transparent;
 
   --navbar-item-hover-text-color: var(--text-primary);
   --navbar-item-hover-text-decoration: none;
   --navbar-item-hover-background-color: none;
+  --navbar-item-hover-bottom-border: 2px solid var(--border-primary);
 
   --navbar-item-icon-width: 1.5em; // @presenter Spacing
   --navbar-item-icon-height: 1.5em; // @presenter Spacing

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { Link } from '@portal/Link';
 import type { LogoConfig } from '@theme/types/portal';
 import { Image } from '@theme/components/Image/Image';
+import { telemetry } from '@portal/telemetry';
 
 export type NavbarLogoProps = {
   logo: Pick<LogoConfig, 'image' | 'link' | 'altText' | 'srcSet'>;
@@ -18,7 +19,17 @@ export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element |
     <Image className={className} src={logo.image} srcSet={logo.srcSet} alt={logo.altText} />
   );
 
-  return <LogoContainer>{logo.link ? <Link to={logo.link}>{img}</Link> : img}</LogoContainer>;
+  return (
+    <LogoContainer>
+      {logo.link ? (
+        <Link to={logo.link} onClick={() => telemetry.send('logo_clicked', {})}>
+          {img}
+        </Link>
+      ) : (
+        img
+      )}
+    </LogoContainer>
+  );
 }
 
 export const LogoContainer = styled.div.attrs({

package/src/components/NavbarLogo/index.ts

@@ -1 +1,2 @@
 export * from '@theme/components/NavbarLogo/NavbarLogo';
+export * from '@theme/components/NavbarLogo/styledVariables';

package/src/components/NavbarLogo/styledVariables.ts

@@ -0,0 +1,15 @@
+import { css } from "styled-components";
+
+export const logo = 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
+`;

package/src/components/Panel/styledVariables.ts

@@ -195,7 +195,7 @@ export const apiReferencePanels = css`
   --panel-heading-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-heading-font-size: 18px; // @presenter FontSize
   --panel-heading-font-weight: var(--font-weight-bold); // @presenter FontWeight
-  --panel-heading-text-color: vat(--text-primary);
+  --panel-heading-text-color: var(--text-primary);
   --panel-heading-padding: var(--spacing-base);
   --panel-heading-line-height: 1; // @presenter LineHeight
   --panel-heading-white-space: 'nowrap';
@@ -208,7 +208,7 @@ export const apiReferencePanels = css`
   --panel-body-font-family: var(--font-family-base); // @presenter FontFamily
   --panel-body-font-size: var(--font-size-base); // @presenter FontSize
   --panel-body-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --panel-body-text-color: vat(--text-secondary);
+  --panel-body-text-color: var(--text-secondary);
   --panel-body-padding: var(--spacing-base);
   --panel-body-border: 1px solid var(--border-primary);
 
@@ -431,7 +431,7 @@ export const apiReferencePanels = css`
   --panel-try-it-tabs-disabled-text-color: var(--text-placeholder); // @presenter Color
 
   --panel-try-it-tabs-background-color: none; // @presenter Color
-  --panel-try-it-tabs-hover-background-color: var(--bg-raised);; // @presenter Color
+  --panel-try-it-tabs-hover-background-color: var(--bg-raised); // @presenter Color
   --panel-try-it-tabs-active-background-color: var(--bg-base); // @presenter Color
   --panel-try-it-tabs-disabled-background-color: none; // @presenter Color
 
@@ -476,12 +476,4 @@ export const apiReferencePanels = css`
   --panel-try-it-border: 1px solid var(--border-primary); // @presenter Border
 
   // @tokens End
-
-  // TODO PUL RIGHT section - related to pull right - fix later
-
-  --samples-panel-markdown-background-color: #3c4c5a;
-  --samples-panel-markdown-border-color: #46596a;
-
-  --layout-right-rail-width: 50%;
-  --layout-right-rail-background-color: transparent;
 `;

package/src/components/Profile/LoginLink.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 
 export interface LoginLinkProps {
   href: string;
@@ -16,7 +17,13 @@ export function LoginLink({ href }: LoginLinkProps): JSX.Element {
   };
 
   return (
-    <StyledLink href={href} data-translation-key={translationKeys.login}>
+    <StyledLink
+      href={href}
+      data-translation-key={translationKeys.login}
+      onClick={() => {
+        telemetry.send('login_button_clicked', {});
+      }}
+    >
       {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
     </StyledLink>
   );

package/src/components/Profile/MobileUserProfile.tsx

@@ -6,6 +6,7 @@ import { LogoutIcon } from '@theme/icons/LogoutIcon';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
 import { UserProfileData } from '@theme/components/Profile/UserProfileData';
+import { telemetry } from '@portal/telemetry';
 
 export function MobileUserProfile() {
   const { userProfile } = useThemeConfig();
@@ -20,13 +21,22 @@ export function MobileUserProfile() {
   return (
     <MobileProfileWrapper data-component-name="Navbar/MobileUserProfile">
       {!userData?.isAuthenticated ? (
-        <LoginButton href={loginUrl} data-cy="login-btn">
+        <LoginButton
+          href={loginUrl}
+          data-cy="login-btn"
+          onClick={() => telemetry.send('login_button_clicked', {})}
+        >
           {translate(translationKeys.login, userProfile?.loginLabel || 'Login')}
         </LoginButton>
       ) : (
         <>
           <UserProfileData userData={userData} />
-          <LogoutButton onClick={() => handleLogout()}>
+          <LogoutButton
+            onClick={() => {
+              handleLogout();
+              telemetry.send('logout_menu_item_clicked', {});
+            }}
+          >
             <LogoutIcon />
           </LogoutButton>
         </>
@@ -36,16 +46,23 @@ export function MobileUserProfile() {
 }
 const LoginButton = styled.a`
   background: var(--mobile-menu-login-button-background);
-  border-radius: 6px;
+  border-radius: var(--mobile-menu-login-button-border-radius);
   width: 100%;
   margin: 0;
   padding: 5px 0;
   color: var(--mobile-menu-login-button-color);
-  font-size: var(--font-size-base);
+  border: 1px solid var(--mobile-menu-login-button-border-color);
+  font-size: var(--mobile-menu-login-button-font-size);
+  font-family: var(--mobile-menu-login-button-font-family);
+  font-weight: var(--mobile-menu-login-button-font-weight);
   text-align: center;
-  line-height: 22px;
+  line-height: var(--mobile-menu-login-button-line-height);
   cursor: pointer;
   text-decoration: none;
+
+  &:hover {
+    color: var(--mobile-menu-login-button-hover-color);
+  }
 `;
 
 const MobileProfileWrapper = styled.div`

package/src/components/Profile/UserProfile.tsx

@@ -7,6 +7,7 @@ import { Profile } from '@theme/components/Profile/Profile';
 import { Link } from '@portal/Link';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
 import { useTranslate } from '@portal/hooks';
+import { telemetry } from '@portal/telemetry';
 import { Dropdown, DropdownList, DropdownListItem } from '@theme/components/Dropdown';
 import { UserProfileData } from '@theme/components/Profile/UserProfileData';
 import { LogoutIcon } from '@theme/icons';
@@ -51,7 +52,10 @@ export function UserProfile({
 
   menuItems.push(
     <Logout
-      onClick={() => handleLogout()}
+      onClick={() => {
+        handleLogout();
+        telemetry.send('logout_menu_item_clicked', {});
+      }}
       data-translation-key={translationKeys.logout}
       role="link"
     >

package/src/components/Search/ProductTag.tsx

@@ -29,7 +29,7 @@ const Wrapper = styled.div`
   background: var(--bg-overlay);
   border: 1px solid var(--border-secondary);
   border-radius: var(--border-radius-xlg);
-  margin-right: 16px;
+  margin-right: var(--spacing-base);
 `;
 
 const Label = styled.span`

package/src/components/Separator/Separator.tsx

@@ -5,16 +5,30 @@ import { SeparatorLine } from '@theme/components/Separator/SeparatorLine';
 import { SeparatorItem } from '@theme/components/Separator/SeparatorItem';
 import type { MenuItemProps } from '@theme/components/Sidebar/types';
 import { useTranslate } from '@portal/hooks';
+import { useThemeConfig } from '@theme/hooks';
 
 export function Separator({ item, className }: MenuItemProps): JSX.Element {
   const { translate } = useTranslate();
+  const { sidebar } = useThemeConfig();
+
+  const separatorLine = item.separatorLine || sidebar?.separatorLine;
+  const linePosition = item.linePosition || sidebar?.linePosition || 'bottom';
 
   return (
-    <Wrapper data-component-name="Sidebar/Separator" className={className}>
+    <Wrapper
+      data-component-name="Sidebar/Separator"
+      className={className}
+      linePosition={linePosition}
+      withLabel={!!item.label}
+    >
       <SeparatorItem>{translate(item.labelTranslationKey, item.label)}</SeparatorItem>
-      {item.separatorLine ? <SeparatorLine /> : null}
+      {separatorLine ? <SeparatorLine /> : null}
     </Wrapper>
   );
 }
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div<{ linePosition: 'top' | 'bottom'; withLabel?: boolean }>`
+  display: flex;
+  flex-direction: ${({ linePosition }) => (linePosition === 'top' ? 'column-reverse' : 'column')};
+  margin-top: ${({ withLabel }) => (withLabel ? 'var(--sidebar-item-separator-offset)' : '0')};
+`;

package/src/components/Separator/SeparatorItem.tsx

@@ -15,18 +15,12 @@ export const SeparatorItem = styled(MenuItemLabel).attrs<{ className?: string }>
   text-transform: var(--sidebar-item-separator-text-transform);
   background: var(--mobile-menu-background);
   border-radius: 0;
-  border-top: var(--sidebar-item-separator-border-width) solid
-    var(--sidebar-item-separator-border-color);
-  padding-top: var(--sidebar-item-separator-padding-top);
+  padding: var(--sidebar-item-separator-padding);
 
   ${({ theme }) => theme.mediaQueries.medium} {
     background: var(--sidebar-item-separator-background-color);
   }
 
-  *:not(:first-child) > & {
-    margin-top: var(--sidebar-item-separator-offset);
-  }
-
   :hover {
     color: var(--sidebar-item-separator-text-color);
   }

package/src/components/Separator/SeparatorLine.tsx

@@ -4,7 +4,11 @@ export const SeparatorLine = styled.div.attrs<{ className?: string }>(({ classNa
   'data-component-name': 'Sidebar/SeparatorLine',
   className,
 }))`
-  height: 1px;
-  background-color: var(--sidebar-item-separator-line-color);
-  margin: var(--sidebar-item-separator-offset) 0 var(--sidebar-item-padding-vertical) 0;
+  height: var(--sidebar-item-separator-border-width);
+  background-color: var(--sidebar-item-separator-border-color);
+  margin: var(--mobile-sidebar-item-separator-line-offset);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    margin: var(--sidebar-item-separator-line-offset);
+  }
 `;

package/src/components/Sidebar/ApiCallItem.tsx

@@ -12,10 +12,10 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
     <Wrapper data-component-name="Sidebar/ApiCallItem" className={className}>
       <MenuLinkItem item={item}>
         <Label active={item.active}>
+          {item.label}
           <HttpTag color={item.httpVerb || ''}>
             {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
           </HttpTag>
-          {item.label}
         </Label>
       </MenuLinkItem>
 
@@ -25,6 +25,8 @@ export function ApiCallItem({ item, className }: MenuItemProps): JSX.Element {
 }
 
 const Label = styled(MenuItemLabel)`
+  display: flex;
+  justify-content: space-between;
   color: var(--mobile-menu-item-text-color);
 
   ${({ theme }) => theme.mediaQueries.medium} {
@@ -36,7 +38,7 @@ const Wrapper = styled.div``;
 
 export const HttpTag = styled(Tag)`
   flex-shrink: 0;
-  margin-top: 0;
+  margin: var(--sidebar-item-http-tag-margin);
   text-transform: uppercase;
 
   width: var(--sidebar-item-http-tag-width);

package/src/components/Sidebar/SidebarLayout.tsx

@@ -9,6 +9,7 @@ import { MobileSidebarButton } from '@theme/components/Sidebar/MobileSidebarButt
 import { MenuContainer } from '@theme/components/Menu/MenuContainer';
 import { SidebarSearch } from '@theme/components/Search/SidebarSearch';
 import { useThemeConfig } from '@theme/hooks/useThemeConfig';
+import { telemetry } from '@portal/telemetry';
 
 import { MobileSidebarIcon } from './MobileSidebarIcon';
 
@@ -81,7 +82,11 @@ export function SidebarLayout({
         <Wrapper data-component-name="Sidebar/SidebarLayout" className={className}>
           {!search?.hide && search?.placement === 'sidebar' ? <SidebarSearch /> : null}
           <Sidebar animate={true} opened={isOpen}>
-            {header ? <HeaderWrapper>{header}</HeaderWrapper> : null}
+            {header ? (
+              <HeaderWrapper onClick={() => telemetry.send('back_to_catalog_button_clicked', {})}>
+                {header}
+              </HeaderWrapper>
+            ) : null}
             {versions ? <>{versions}</> : null}
             <MenuContainer growContent={growContent}>{menu}</MenuContainer>
             {footer && !isOpen ? (

package/src/components/Sidebar/styledVariables.ts

@@ -45,6 +45,7 @@ export const sidebar = css`
   --sidebar-item-font-family: var(--font-family-base); // @presenter FontFamily
   --sidebar-item-font-size: var(--font-size-base); // @presenter FontSize
   --sidebar-item-font-weight: var(--font-weight-regular); // @presenter FontSize
+  --sidebar-item-line-height: var(--line-height-base); // @presenter LineHeight
 
   /**
     * @tokens Sidebar item colors
@@ -54,8 +55,9 @@ export const sidebar = css`
   --sidebar-item-background-color: transparent; // @presenter Color
 
   --sidebar-item-active-color: var(--text-primary); // @presenter Color
-  --sidebar-item-active-background-color: var(--bg-raised); // @presenter Color
+  --sidebar-item-active-background-color: var(--bg-overlay); // @presenter Color
 
+  --sidebar-item-hover-background-color: var(--bg-raised); // @presenter Color
   --sidebar-item-hover-color: var(--text-primary); // @presenter Color
 
   /**
@@ -125,21 +127,24 @@ export const sidebar = css`
 
   --sidebar-item-separator-background-color: var(--sidebar-background-color); // @presenter Color
   --sidebar-item-separator-line-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-offset: var(--spacing-lg); // @presenter Spacing
+  --sidebar-item-separator-offset: var(--spacing-sm); // @presenter Spacing
+  --sidebar-item-separator-line-offset: var(--spacing-xxs) var(--sidebar-margin-horizontal); // @presenter Spacing
+  --mobile-sidebar-item-separator-line-offset: var(--spacing-xxs) var(--spacing-xs); // @presenter Spacing
   --sidebar-item-separator-border-width: 1px; // @presenter Spacing
   --sidebar-item-separator-border-color: var(--border-primary); // @presenter Color
-  --sidebar-item-separator-padding-top: var(--spacing-xxs); // @presenter Spacing
+  --sidebar-item-separator-padding: var(--spacing-xxs) var(--sidebar-item-padding-horizontal); // @presenter Spacing
 
   /**
    * @tokens Sidebar item http tag
    */
 
-  --sidebar-item-http-tag-width: 36px;
-  --sidebar-item-http-tag-height: 14px;
+  --sidebar-item-http-tag-width: auto;
+  --sidebar-item-http-tag-height: 20px;
   --sidebar-item-http-tag-font-family: var(--code-font-family); // @presenter FontFamily
-  --sidebar-item-http-tag-font-size: 8px; // @presenter FontSize
+  --sidebar-item-http-tag-font-size: var(--font-size-sm); // @presenter FontSize
   --sidebar-item-http-tag-font-weight: normal; //@presenter FontWeight
-  --sidebar-item-http-tag-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --sidebar-item-http-tag-border-radius: var(--border-radius-xlg); // @presenter BorderRadius
+  --sidebar-item-http-tag-margin: 0 0 0 5px;
 
   /**
     * @tokens Sidebar back button

package/src/components/Sidebar/types.ts

@@ -47,6 +47,7 @@ export interface NavItem {
   requiredPermission?: string;
   menuStyle?: MenuStyle;
   separatorLine?: boolean;
+  linePosition?: 'top' | 'bottom';
   version?: string;
   default?: boolean;
 }

package/src/components/SidebarActions/CollapseSidebarButton.tsx

@@ -31,6 +31,10 @@ const ToggleButton = styled(StyledToggleRightPanelButton)<{ collapsed?: boolean
   fill: var(--sidebar-collapse-button-icon-color);
   margin-right: ${({ collapsed }) => (collapsed ? 0 : 'calc(var(--spacing-unit) * -9)')};
   border: 1px solid var(--sidebar-collapse-button-border-color);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xxs);
+  height: var(--control-height-sm);
+  width: var(--control-height-sm);
 
   ${({ collapsed }) =>
     collapsed &&

package/src/components/SidebarActions/SidebarActions.tsx

@@ -7,6 +7,7 @@ import {
   ControlsWrap,
   ControlsWrapChangeLayoutButtons,
 } from '@theme/components/SidebarActions/styled';
+import { telemetry } from '@portal/telemetry';
 
 export enum LayoutVariant {
   STACKED = 'stacked',
@@ -54,11 +55,20 @@ export const SidebarActions = ({
           {initialShowRightPanelToggle && (
             <ToggleRightPanelButton
               showRightPanelToggle={showRightPanelToggle}
-              onClick={onChangeRightPanelViewClick}
+              onClick={() => {
+                onChangeRightPanelViewClick();
+                telemetry.send('sidebar_samples_button_clicked', {});
+              }}
             />
           )}
           {showChangeLayoutButton && showRightPanelToggle && (
-            <ChangeViewButton layout={layout} onClick={onChangeViewClick} />
+            <ChangeViewButton
+              layout={layout}
+              onClick={() => {
+                onChangeViewClick();
+                telemetry.send('change_layout_button_clicked', {});
+              }}
+            />
           )}
         </ControlsWrapChangeLayoutButtons>
       )}
@@ -66,7 +76,12 @@ export const SidebarActions = ({
       {!hideCollapseSidebarButton && (
         <CollapseSidebarButton
           initialValue={collapsedSidebar}
-          onClick={onChangeCollapseSidebarClick}
+          onClick={() => {
+            onChangeCollapseSidebarClick();
+            collapsedSidebar
+              ? telemetry.send('sidebar_item_expanded', {})
+              : telemetry.send('sidebar_item_collapsed', {});
+          }}
         />
       )}
     </ControlsWrap>

package/src/components/SidebarActions/styled.tsx

@@ -30,11 +30,14 @@ export const StyledToggleRightPanelButton = styled.a`
   cursor: pointer;
   z-index: 1;
   /* Rectangle 201 */
-  border-radius: var(--border-radius);
-  padding: var(--spacing-unit);
+  border-radius: var(--border-radius-md);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
+  border: 1px solid var(--border-primary);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 
@@ -66,13 +69,16 @@ export const StyledChangeViewButton = styled.a`
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-radius: var(--border-radius);
+  border-radius: var(--border-radius-md);
+  background: var(--bg-overlay);
   z-index: 1;
   /* Rectangle 201 */
-  padding: var(--spacing-unit);
+  padding: var(--spacing-xs);
+  height: var(--control-height-base);
+  width: var(--control-height-base);
 
   &:hover {
-    background-color: var(--sidebar-item-active-background-color);
+    background-color: var(--sidebar-item-hover-background-color);
   }
 `;
 
@@ -114,7 +120,7 @@ export const ControlsWrap = styled.span<{
   justify-content: ${({ isOpenapiDocs }) => (isOpenapiDocs ? 'space-between' : 'flex-end')};
   bottom: 0;
   flex-direction: row;
-  gap: var(--spacing-xxs);
+  gap: var(--spacing-xs);
   align-items: center;
   margin-left: var(--sidebar-controls-margin-left);
   z-index: 2;
@@ -145,6 +151,6 @@ export const ControlsWrapChangeLayoutButtons = styled.span<{ isCollapsed?: boole
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
-  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-unit)')};
+  gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;

package/src/components/TableOfContent/TableOfContent.tsx

@@ -11,6 +11,7 @@ import {
   getDisplayedHeadings,
   getLeastDepth,
 } from '@theme/components/TableOfContent/utils';
+import { telemetry } from '@portal/telemetry';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -64,6 +65,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
                 className={activeHeadingId === heading.id ? 'active' : ''}
                 dangerouslySetInnerHTML={{ __html: heading.value || '' }}
                 data-cy={`toc-${heading.value}`}
+                onClick={() => telemetry.send('toc_item_clicked', {})}
               />
             );
           })}

package/src/components/Tag/Tag.tsx

@@ -25,11 +25,12 @@ interface TagProps {
   closable?: boolean;
   color?: StatusColor | Color | string;
   icon?: React.ReactNode;
+  onClick?: () => void;
 }
 
-export function Tag({ children, className, color = 'default', icon }: TagProps): JSX.Element {
+export function Tag({ children, className, color, icon, onClick }: TagProps): JSX.Element {
   return (
-    <TagContainer className={className} color={color}>
+    <TagContainer className={className} color={color} onClick={onClick}>
       {icon ? icon : null}
       {children}
     </TagContainer>
@@ -38,7 +39,7 @@ export function Tag({ children, className, color = 'default', icon }: TagProps):
 
 const TagContainer = styled.div.attrs(({ className, color }: TagProps) => ({
   'data-component-name': 'Tag/Tag',
-  className: className + ` tag-${color}`,
+  className: (className || '') + ` tag-default ${color ? `tag-${color}` : ''}`,
 }))<TagProps>`
   display: inline-flex;
   align-items: center;