@redocly/theme 0.59.0-next.2 → 0.59.0-next.3

package/lib/components/Tag/variables.js

@@ -18,6 +18,7 @@ exports.tag = (0, styled_components_1.css) `
   --tag-badge-border-width: 2px;
   --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
   --tag-border-color-focused: var(--color-blue-4); // @presenter Color
+  --tag-close-button-bg-color-focus: var(--color-warm-grey-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -64,6 +65,7 @@ exports.tag = (0, styled_components_1.css) `
   --tag-icon-width: 14px; // @presenter Spacing
   --tag-icon-height: 14px; // @presenter Spacing
 
+
   /**
     * @tokens Tag colors
     */
@@ -159,8 +161,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
-  .tag-purple,
-  .tag-head {
+  .tag-purple {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-4); // @presenter Color
@@ -271,109 +272,125 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #e70b46; // @presenter Color
-  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
-  
-  --tag-operation-color-get: #25b869; // @presenter Color
-  --tag-operation-bg-color-get: #e5faef; // @presenter Color
-  
-  --tag-operation-color-post: #1e65f5; // @presenter Color
-  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
-  
-  --tag-operation-color-put: #f5901d; // @presenter Color
-  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
-  
-  --tag-operation-color-patch: #f5c31d; // @presenter Color
-  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
-
-  --tag-operation-color-head: #5b4ccc; // @presenter Color
-  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
-
-  --tag-operation-color-options: #1a1c21; // @presenter Color
-  --tag-operation-bg-color-options: #ededf2; // @presenter Color
-  
-  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
-
-  --tag-action-color-receive: #4db144; // @presenter Color
-  --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-cons: #4db144; // @presenter Color
-
-  --tag-action-color-send: #4144f6; // @presenter Color
-  --tag-action-color-pub: #4144f6; // @presenter Color
-  --tag-action-color-publish: #4144f6; // @presenter Color
-
-  --tag-action-color-channel: #F0870E; // @presenter Color
-  --tag-action-color-topic: #F0870E; // @presenter Color
-  --tag-action-color-queue: #D72E81; // @presenter Color
-  --tag-action-color-exchange: #9B51E0; // @presenter Color
+  .tag-head {
+    --tag-color: #6355CA; // @presenter Color
+    --tag-bg-color: #ECEBFA; // @presenter Color
+    --tag-bg-color-hover: #E0DEF7; // @presenter Color
+  }
 
   .tag-delete {
-      --tag-color: var(--tag-operation-color-delete); // @presenter Color
+    --tag-color: #e70b46; // @presenter Color
+    --tag-bg-color: #fee2e9; // @presenter Color
+    --tag-bg-color-hover: #fdd3dd; // @presenter Color
   }
 
   .tag-get {
-      --tag-color: var(--tag-operation-color-get); // @presenter Color
+    --tag-color: #25b869; // @presenter Color
+    --tag-bg-color: #e5faef; // @presenter Color
+    --tag-bg-color-hover: #D4F7E5; // @presenter Color
   }
 
   .tag-post {
-      --tag-color: var(--tag-operation-color-post); // @presenter Color
+    --tag-color: #1e65f5; // @presenter Color
+    --tag-bg-color: #e2ebfe; // @presenter Color
+    --tag-bg-color-hover: #CEDDFD; // @presenter Color
   }
 
   .tag-put {
-      --tag-color: var(--tag-operation-color-put); // @presenter Color
+    --tag-color: #f5901d; // @presenter Color
+    --tag-bg-color: #fef1e2; // @presenter Color
+    --tag-bg-color-hover: #FDE2C4; // @presenter Color
   }
-  
+
   .tag-patch {
-      --tag-color: var(--tag-operation-color-patch); // @presenter Color
+    --tag-color: #f5c31d; // @presenter Color
+    --tag-bg-color: #fdf6dd; // @presenter Color
+    --tag-bg-color-hover: #FCF0C5; // @presenter Color
   }
 
   .tag-http-deprecated {
-      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
-  }
-  
-  .tag-receive {
-      --tag-color: var(--tag-action-color-receive); // @presenter Color
+    --tag-color: var(--text-color-disabled); // @presenter Color
   }
 
   .tag-send {
-      --tag-color: var(--tag-action-color-send); // @presenter Color
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
   .tag-pub {
-      --tag-color: var(--tag-action-color-pub); // @presenter Color
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
-  .tag-sub {
-      --tag-color: var(--tag-action-color-sub); // @presenter Color
+  .tag-publish {
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
-  .tag-cons {
-      --tag-color: var(--tag-action-color-cons); // @presenter Color
+  .tag-receive {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
   }
 
-  .tag-publish {
-      --tag-color: var(--tag-action-color-publish); // @presenter Color
+  .tag-sub {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
+  }
+
+  .tag-cons {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
   }
 
   .tag-channel {
-      --tag-color: var(--tag-action-color-channel); // @presenter Color
+    --tag-color: #F0870E; // @presenter Color
+    --tag-bg-color: #FDF1E2; // @presenter Color
+    --tag-bg-color-hover: #FBE1C1; // @presenter Color
   }
 
   .tag-topic {
-      --tag-color: var(--tag-action-color-channel); // @presenter Color
+    --tag-color: #F0870E; // @presenter Color
+    --tag-bg-color: #FDF1E2; // @presenter Color
+    --tag-bg-color-hover: #FBE1C1; // @presenter Color
   }
 
   .tag-queue {
-      --tag-color: var(--tag-action-color-queue); // @presenter Color
+    --tag-color: #D72E81; // @presenter Color
+    --tag-bg-color: #FAE5F0; // @presenter Color
+    --tag-bg-color-hover: #F7D4E6; // @presenter Color
   }
 
   .tag-exchange {
-      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+    --tag-color: #9B51E0; // @presenter Color
+    --tag-bg-color: #F0E5FA; // @presenter Color
+    --tag-bg-color-hover: #E6D4F7; // @presenter Color
   }
       
   // shorten alias for exchange tag:
   .tag-exch {
-      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+    --tag-color: #9B51E0; // @presenter Color
+    --tag-bg-color: #F0E5FA; // @presenter Color
+    --tag-bg-color-hover: #E6D4F7; // @presenter Color
+  }
+
+  /**
+    * @tokens Tag variants
+    */
+
+  .tag-variant-filled {
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+  }
+
+  .tag-variant-outline {
+    --tag-bg-color: transparent;
+    --tag-bg-color-hover: transparent;
   }
       
   // @tokens End

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.2",
+  "version": "0.59.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
     "redocly"
   ],
   "author": "team@redocly.com",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {

package/src/components/Navbar/NavbarItem.tsx

@@ -34,12 +34,13 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
   if (navItem.type !== 'link' && !navItem.items) return null;
 
   const item = navItem as ResolvedNavLinkItem;
-  const normalizedPath =
-    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
+  const normalizedPath = (item.link ? removeTrailingSlash(item.link) : item.link) || '';
 
-  const isActive =
-    pathname ===
-    withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
+  const pathWithPathPrefix = withPathPrefix(
+    getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales),
+  );
+
+  const isActive = removeTrailingSlash(pathname) === removeTrailingSlash(pathWithPathPrefix);
 
   const itemContent = (
     <NavbarMenuItem

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
-import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -47,6 +47,7 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
+            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -62,9 +63,8 @@ const FilterTagsWrapper = styled.div`
   gap: var(--search-filter-field-tags-gap);
 `;
 
-const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+const FilterTagWrapper = styled(Tag)`
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;

package/src/components/Search/SearchGroups.tsx

@@ -45,6 +45,7 @@ export function SearchGroups({
         borderless
         active={!searchFilter.some((item) => item.isQuickFilter)}
         onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
+        selectable
       >
         All
       </GroupTag>
@@ -61,6 +62,7 @@ export function SearchGroups({
               onClick={() => handleGroupTagClick(value, facet.field, active, currentValues)}
               active={active}
               borderless
+              selectable
             >
               {value} {isCounterVisible && <span>{count}</span>}
             </GroupTag>

package/src/components/Select/SelectInput.tsx

@@ -83,6 +83,7 @@ export function SelectInput<T>(props: SelectInputProps<T>): React.ReactNode {
   const selectTags = selectedOptions.map((option, index) => (
     <SelectInputTag
       closable
+      tabIndex={0}
       key={index}
       onClose={() => {
         clearHandler?.(option);

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
 
@@ -56,6 +56,7 @@ export type TagProps = {
   maxLength?: number;
   textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
   variant?: 'outline' | 'filled';
+  selectable?: boolean;
 };
 
 export function Tag({
@@ -75,6 +76,7 @@ export function Tag({
   maxLength,
   textTransform,
   variant = 'filled',
+  selectable,
   ...otherProps
 }: TagProps): JSX.Element {
   const truncateText = (text: string, maxLen: number): string => {
@@ -152,6 +154,7 @@ export function Tag({
       hasCloseButton={closable}
       textTransform={textTransform}
       variant={variant}
+      selectable={selectable}
       {...otherProps}
     >
       {withStatusDot ? <StatusDot color={statusDotColor} /> : icon ? icon : null}
@@ -186,16 +189,28 @@ const CloseButton = styled.div`
   justify-content: center;
   align-self: stretch;
   border-radius: 0 var(--tag-border-radius) var(--tag-border-radius) 0;
+  margin: calc(-1 * var(--tag-border-width));
+  padding: var(--tag-border-width);
 
   &:hover {
     background: var(--tag-close-button-bg-color-hover);
   }
+
+  &:focus-visible {
+    background: var(--tag-close-button-bg-color-focus);
+  }
 `;
 
-const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
-  className:
-    (className || '') +
-    ` tag-default ${color ? `tag-${color}` : ''} ${size ? `tag-size-${size}` : ''}`,
+const TagWrapper = styled.div.attrs(({ className, color, size, variant }: TagProps) => ({
+  className: [
+    className,
+    'tag-default',
+    color && `tag-${color}`,
+    size && `tag-size-${size}`,
+    `tag-variant-${variant || 'filled'}`,
+  ]
+    .filter(Boolean)
+    .join(' '),
 }))<
   TagProps & {
     hasCloseButton?: boolean;
@@ -227,12 +242,11 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
-  background-color: ${({ variant }) =>
-    variant === 'filled' ? 'var(--tag-bg-color)' : 'transparent'};
-  ${({ borderless, variant }) =>
+  background-color: var(--tag-bg-color);
+  ${({ borderless }) =>
     borderless
       ? ''
-      : `border: var(--tag-border-width) var(--tag-border-style) ${variant === 'filled' ? 'transparent' : 'var(--tag-border-color)'};`}
+      : `border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);`}
   border-radius: var(--tag-border-radius);
 
   svg {
@@ -240,18 +254,20 @@ const TagWrapper = styled.div.attrs(({ className, color, size }: TagProps) => ({
     height: var(--tag-icon-height);
   }
 
-  &:hover {
-    background-color: ${({ variant }) =>
-      variant === 'filled' ? 'var(--tag-bg-color-hover)' : 'transparent'};
-    border-color: ${({ variant }) =>
-      variant === 'outline' ? 'var(--tag-border-color-hover)' : 'transparent'};
-  }
+  ${({ selectable }) =>
+    selectable &&
+    css`
+      &:hover {
+        background-color: var(--tag-bg-color-hover);
+        border-color: var(--tag-border-color-hover);
+      }
 
-  &:focus-visible {
-    outline: 1px solid var(--tag-border-color-focused);
-    outline-offset: 2px;
-    border-radius: var(--tag-border-radius-focused);
-  }
+      &:focus-visible {
+        outline: 1px solid var(--tag-border-color-focused);
+        outline-offset: 2px;
+        border-radius: var(--tag-border-radius-focused);
+      }
+    `};
 `;
 
 const StatusDot = styled.div<{ color: string }>`