@redocly/theme 0.18.3-patch.8 → 0.18.4

package/src/components/Catalog/CatalogCard.tsx

@@ -4,148 +4,100 @@ import styled from 'styled-components';
 import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 import { Link } from '@portal/Link';
 import { Highlight } from '@theme/ui/Highlight';
-import { Tag } from '@theme/components/Tag';
-import { PointingArrowIcon } from '@theme/icons';
+import { Tags } from '@theme/components/Tags';
+import { useTranslate } from '@portal/hooks';
 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;
+  const { translate } = useTranslate();
+  const translationKeys = {
+    footer: 'theme.catalog.card.footer',
+  };
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard onClick={() => telemetry.send('catalog_item_clicked', {})}>
         <CardTitle>
           <Highlight>{item.title}</Highlight>
         </CardTitle>
-        <CardContent>
-          <CardDescription>
-            <Highlight>{item.description ?? ''}</Highlight>
-          </CardDescription>
-          <CardFooter>
-            {hasTags && (
-              <CardTags>
-                {((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>
-              <PointingArrowIcon />
-            </SelectButton>
-          </CardFooter>
-        </CardContent>
+        {/* <div>{item.image}</div> */}
+        <CardDescription>
+          <Highlight>{item.description ?? ''}</Highlight>
+        </CardDescription>
+        {item.tags ? <Tags tags={item.tags as string[]} /> : null}
+        <hr />
+        <CardFooter data-translation-key={translationKeys.footer}>
+          {translate(translationKeys.footer, 'View documentation')}
+        </CardFooter>
       </StyledCard>
     </Link>
   );
 }
 
-function statusToColor(status: string) {
-  switch (status) {
-    case 'Below minimum':
-      return 'error';
-    case 'Minimum':
-      return 'warning';
-    case 'Highest':
-      return 'success';
-    default:
-      return '';
-  }
-}
+const StyledCard = styled.div`
+  min-height: 268px;
+  height: 100%;
+  box-shadow: var(--box-shadow);
 
-const SelectButton = styled.div`
-  border: 1px solid var(--catalog-card-button-border-color);
-  border-radius: 100%;
-  width: var(--catalog-card-button-width);
-  height: var(--catalog-card-button-height);
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
+  flex-direction: column;
 
-  svg {
-    fill: var(--catalog-card-icon-color);
-  }
-`;
+  color: var(--text-color);
+  background-color: var(--thin-tile-background-color);
+  border-radius: 4px;
 
-const StyledCard = styled.div.attrs({ 'data-cy': 'Catalog/CatalogCard' })`
-  min-height: var(--catalog-card-min-height);
-  height: 100%;
-  color: var(--catalog-card-text-color);
-  font-size: var(--catalog-card-font-size);
-  font-weight: var(--catalog-card-font-weight);
-  background-color: var(--catalog-card-background-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style) var(--catalog-card-border-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px 0px rgba(35, 35, 35, 0.05);
   transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
 
   &:hover {
-    border-color: var(--catalog-card-hover-border-color);
-
-    ${SelectButton} {
-      transform: rotate(-45deg);
-      border-color: var(--catalog-card-hover-border-color);
-      background: var(--catalog-card-button-hover-background);
+    /* box-shadow: 0px 12px 30px 0px rgba(35, 35, 35, 0.2); */
+    box-shadow: 0px 10px 30px 0px rgba(35, 35, 35, 0.1);
+    border: 1px solid var(--border-color);
+    transform: translateY(-2px);
+  }
 
-      svg {
-        fill: var(--catalog-card-icon-hover-color);
-      }
-    }
+  border-radius: 8px;
+  width: 100%;
+  padding: 24px 24px 0;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
 `;
 
 const CardTitle = styled.h4`
-  color: var(--catalog-card-title-color);
-  min-height: var(--catalog-card-title-min-height);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
+  line-height: 26px;
+  letter-spacing: 0.8px;
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
   margin: 0;
-  padding: var(--catalog-card-title-padding-vertical) var(--catalog-card-title-padding-horizontal);
+  margin-bottom: 16px;
 `;
 
 const CardDescription = styled.div`
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-bottom: var(--catalog-card-description-margin-bottom);
-`;
-
-const CardContent = styled.div`
-  background-color: var(--catalog-card-content-background-color);
-  border-radius: var(--catalog-card-content-border-radius);
-  padding: var(--catalog-card-content-padding);
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  line-height: var(--line-height);
+  letter-spacing: 0px;
+  font-size: 16px;
+  color: var(--text-color-secondary);
+  text-align: inherit;
+  font-weight: 400;
 `;
 
 const CardFooter = styled.div`
+  height: 46px;
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-`;
-
-const CardTags = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xxs);
-`;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: column;
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
 
-const CardTag = styled(Tag)`
-  margin: 0;
+  a:hover & {
+    text-decoration: var(--link-hover-text-decoration);
+    color: var(--link-hover-text-color);
+  }
 `;

package/src/components/Catalog/index.tsx

@@ -0,0 +1,3 @@
+export * from './Catalog';
+export * from './CatalogCard';
+export * from './useCatalog';

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { generateCodeBlockTokens } from '@theme/utils';
 
@@ -10,29 +10,21 @@ export const CodeBlockContainer = styled.pre.attrs<{ className?: string }>(({ cl
     overflow-x: auto;
     max-height: var(--code-block-max-height);
     font-family: var(--code-block-font-family);
-    line-height: var(--code-block-line-height);
-    font-weight: var(--code-block-font-weight);
+    line-height: var(--code-line-height);
     padding: var(--code-block-padding);
     margin: var(--code-block-margin);
+    border-radius: ${(withControls) =>
+      withControls
+        ? '0 0 var(--code-block-border-radius) var(--code-block-border-radius)'
+        : 'var(--code-block-border-radius)'};
     background-color: var(--code-block-background-color);
     color: var(--code-block-text-color);
-    font-size: var(--code-block-font-size);
+    font-size: var(--code-font-size);
     white-space: var(--code-wrap, pre);
     max-height: var(--code-block-max-height, 600px);
     word-break: var(--code-block-word-break, initial);
-
-    ${(withControls) =>
-      withControls
-        ? css`
-            border-radius: 0 0 var(--code-block-border-radius) var(--code-block-border-radius);
-            border-left: 1px solid var(--code-block-border-color);
-            border-right: 1px solid var(--code-block-border-color);
-            border-bottom: 1px solid var(--code-block-border-color);
-          `
-        : css`
-            border-radius: var(--code-block-border-radius);
-            border: 1px solid var(--code-block-border-color);
-          `}
+    border: none;
+  }
 
   /**
   * Based on prism-dark.css

package/src/components/CodeBlock/CodeBlockControlButton.tsx

@@ -1,18 +1,26 @@
 import styled, { css } from 'styled-components';
 
-import { Button } from '@theme/components/Button';
-
-export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
-  color: var(--code-block-controls-text-color);
+export const CodeBlockControlButton = styled.button.attrs(() => ({
+  'data-component-name': 'CodeBlockControls/CodeBlockControlButton',
+}))<{ asIcon?: boolean }>`
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  color: var(--panel-samples-controls-text-color);
 
   ${({ asIcon }) =>
     asIcon
       ? css`
-          background-color: var(--code-block-icon-controls-background-color);
+          background-color: var(--panel-samples-icon-controls-background-color);
         `
       : css`
           min-width: 90px;
-          background-color: var(--code-block-text-controls-background-color);
+          background-color: var(--panel-samples-text-controls-background-color);
         `}
 
   ${({ theme }) => theme.mediaQueries?.small} {
@@ -22,4 +30,9 @@ export const CodeBlockControlButton = styled(Button)<{ asIcon?: boolean }>`
   :not(:first-child) {
     margin-left: 5px;
   }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
 `;

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -162,24 +162,21 @@ export function CodeBlockControls({
 const ContainerWraper = styled.div`
   display: flex;
   justify-content: space-between;
+  padding: 5px 10px;
   min-height: 30px;
-  padding: var(--code-block-controls-padding);
-  background-color: var(--code-block-controls-background-color);
-  border-top: var(--code-block-controls-border);
-  border-left: var(--code-block-controls-border);
-  border-right: var(--code-block-controls-border);
-  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+  background-color: var(--panel-samples-controls-background-color);
+  border-bottom: var(--panel-samples-controls-border);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
   margin-top: 10px;
 `;
 
 const Title = styled.span`
   display: flex;
   align-items: center;
-  color: var(--code-block-controls-text-color);
+  color: var(--panel-samples-controls-text-color);
 `;
 
 const ControlsWrapper = styled.div`
-  display: flex;
   opacity: 0.7;
   transition: opacity 0.3s ease;
   text-align: right;

package/src/components/CodeBlock/index.ts

@@ -2,4 +2,3 @@ export * from '@theme/components/CodeBlock/CodeBlock';
 export * from '@theme/components/CodeBlock/CodeBlockContainer';
 export * from '@theme/components/CodeBlock/CodeBlockControls';
 export * from '@theme/components/CodeBlock/CodeBlockControlButton';
-export * from '@theme/components/CodeBlock/styledVariables';

package/src/components/ColorModeSwitcher/ColorModeSwitcher.tsx

@@ -55,6 +55,7 @@ export function ColorModeSwitcher(props: ColorModeSwitcherProps): JSX.Element |
 }
 
 const Wrapper = styled.div<{ modes: string[] }>`
+  margin-left: var(--navbar-item-padding-horizontal);
   display: flex;
   align-items: center;
   cursor: pointer;

package/src/components/Dropdown/Dropdown.tsx

@@ -5,16 +5,13 @@ import { ArrowIcon } from '@theme/icons';
 import { useOutsideClick } from '@theme/hooks';
 
 export interface DropdownProps {
-  children?: React.ReactNode;
+  children: React.ReactNode;
   items: JSX.Element[] | string[];
   dataAttributes?: Record<string, string>;
   className?: string;
   withArrow?: boolean;
   triggerEvent?: 'click' | 'hover';
-  placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
   onChange?: (value: React.ReactNode | string) => void;
-  icon?: React.ReactNode;
 }
 
 export const Dropdown = ({
@@ -25,9 +22,6 @@ export const Dropdown = ({
   triggerEvent = 'click',
   onChange,
   dataAttributes,
-  placement,
-  alignment,
-  icon,
 }: DropdownProps) => {
   const dropdownRef = useRef<HTMLDivElement | null>(null);
 
@@ -64,11 +58,10 @@ export const Dropdown = ({
     >
       <DropdownHeader>
         {children}
-        {icon}
         {withArrow ? isOpen ? <ArrowIcon direction="up" /> : <ArrowIcon direction="down" /> : null}
       </DropdownHeader>
       {isOpen && (
-        <DropdownList placement={placement} alignment={alignment}>
+        <DropdownList>
           {items.map((item, index) => (
             <DropdownListItem
               key={index}
@@ -106,12 +99,10 @@ export const DropdownHeader = styled.div`
   cursor: pointer;
 `;
 
-export const DropdownList = styled.ul<{ placement?: string; alignment?: string }>`
+export const DropdownList = styled.ul`
   position: absolute;
-  top: ${({ placement }) => (placement === 'top' ? 'auto' : '100%')};
-  bottom: ${({ placement }) => (placement === 'top' ? '100%' : 'auto')};
-  left: ${({ alignment }) => (alignment === 'start' ? '0' : 'auto')};
-  right: ${({ alignment }) => (alignment === 'end' ? '0' : 'auto')};
+  top: 100%;
+  left: 0;
   margin: 0;
   min-width: var(--dropdown-list-min-width);
   max-width: var(--dropdown-list-max-width);

package/src/components/Dropdown/index.ts

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

package/src/components/EditPageButton/EditPageButton.tsx

@@ -22,16 +22,12 @@ export const EditPageButton = ({ text, to, icon }: EditPageButtonProps): JSX.Ele
 const EditButton = styled(Link)`
   margin-left: auto;
   display: inline-flex;
-  color: var(--text-secondary);
+  color: var(--color-content);
   font-weight: var(--font-weight-bold);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   text-decoration: none;
 
-  &:hover {
-    color: var(--text-primary);
-  }
-
   @media print {
     display: none;
   }

package/src/components/Feedback/Comment.tsx

@@ -67,11 +67,6 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Rating.tsx

@@ -116,9 +116,5 @@ const Star = styled.span`
 
 const Label = styled.h3`
   margin-right: 15px;
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
+  font-family: var(--font-family-base);
 `;

package/src/components/Feedback/Reasons.tsx

@@ -77,11 +77,6 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 
@@ -102,7 +97,7 @@ const OptionWrapper = styled.div`
     cursor: pointer;
   }
   label {
-    font-size: var(--font-size-base);
+    font-size: 14px;
     cursor: pointer;
   }
 `;

package/src/components/Feedback/Sentiment.tsx

@@ -94,11 +94,6 @@ const Wrapper = styled.div`
 `;
 
 const Label = styled.h3`
-  font-family: var(--h3-font-family);
-  font-weight: var(--h3-font-weight);
-  font-size: var(--h3-font-size);
-  line-height: var(--h3-line-height);
-  color: var(--h3-text-color);
   margin-right: 15px;
 `;
 

package/src/components/Feedback/Thumbs.tsx

@@ -108,12 +108,12 @@ export const ThumbDown = ({ text }: { text?: string }) => {
 const Wrapper = styled.div`
   font-family: var(--font-family-base);
   display: flex;
-  color: var(--color-info-text);
+  color: var(--color-primary-500);
   &:hover {
-    color: var(--color-info-text-active);
+    color: var(--color-primary-600);
     svg {
       > g {
-        fill: var(--color-info-text-active);
+        fill: var(--color-primary-600);
       }
     }
   }
@@ -125,7 +125,7 @@ const Icon = styled.div`
   margin-right: 5px;
   > svg {
     > g {
-      fill: var(--color-info-text);
+      fill: var(--color-primary-500);
     }
   }
 `;