@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/src/icons/AiStarsGradientIcon/AiStarsGradientIcon.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import type { IconProps } from '@redocly/theme/icons/types';
@@ -15,9 +15,18 @@ export interface AiStarsGradientIconProps extends IconProps {
 const Icon = (props: AiStarsGradientIconProps) => {
   const { color = '', background, borderRadius, padding, margin, ...restProps } = props;
 
-  const resolvedColor = color.startsWith('var(')
-    ? getComputedStyle(document.documentElement).getPropertyValue(color.slice(4, -1)).trim()
-    : color;
+  const [resolvedColor, setResolvedColor] = useState(color);
+
+  useEffect(() => {
+    const resolvedColor = color.startsWith('var(')
+      ? window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue(color.slice(4, -1))
+          .trim()
+      : color;
+
+    setResolvedColor(resolvedColor);
+  }, [color]);
 
   const isColorOverridden = resolvedColor && resolvedColor !== 'none';
   const fill = isColorOverridden ? resolvedColor : 'url(#gradient)';

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -35,19 +35,28 @@ export const AiStarsIcon = styled(Icon).attrs(() => ({
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 
-  ${({ background, borderRadius, margin }) =>
+  ${({ background, borderRadius, margin, padding, size }) =>
     background &&
     `
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-shrink: 0;
 
       background: ${getCssColorVariable(background)};
+      width: ${size || '16px'};
+      height: ${size || '16px'};
 
-      padding: var(--spacing-xs);
+      padding: ${padding || 'var(--spacing-xs)'};
       margin: ${margin || '0'};
       
       border-radius: ${background && borderRadius ? borderRadius : 'none'};
+      
+      svg {
+        width: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
+        height: calc(${size || '16px'} - 2 * (${padding || 'var(--spacing-xs)'}));
+        flex-shrink: 0;
+      }
     `}
 
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/CubeIcon/CubeIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="currentColor"
+    {...props}
+  >
+    <path
+      d="M14.252 4.06812L8.25195 0.568119C8.17548 0.523507 8.08853 0.5 8 0.5C7.91147 0.5 7.82452 0.523507 7.74805 0.568119L1.74805 4.06812C1.67257 4.11215 1.60994 4.1752 1.56642 4.25099C1.5229 4.32677 1.5 4.41263 1.5 4.50002V11.5C1.5 11.5874 1.5229 11.6733 1.56642 11.7491C1.60994 11.8248 1.67257 11.8879 1.74805 11.9319L7.74805 15.4319C7.82452 15.4765 7.91147 15.5 8 15.5C8.08853 15.5 8.17548 15.4765 8.25195 15.4319L14.252 11.9319C14.3274 11.8879 14.3901 11.8248 14.4336 11.7491C14.4771 11.6733 14.5 11.5874 14.5 11.5V4.50002C14.5 4.41263 14.4771 4.32677 14.4336 4.25099C14.3901 4.1752 14.3274 4.11215 14.252 4.06812ZM8 1.57887L13.0078 4.50002L8 7.42117L2.9922 4.50002L8 1.57887ZM2.5 5.37062L7.5 8.28712V14.1294L2.5 11.2129V5.37062ZM8.5 14.1294V8.28712L13.5 5.37062V11.2129L8.5 14.1294Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const CubeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CubeIcon/CubeIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/HashtagIcon/HashtagIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M10.5 4.5V3.75H8.25V1.5H7.5V3.75H4.5V1.5H3.75V3.75H1.5V4.5H3.75V7.5H1.5V8.25H3.75V10.5H4.5V8.25H7.5V10.5H8.25V8.25H10.5V7.5H8.25V4.5H10.5ZM7.5 7.5H4.5V4.5H7.5V7.5Z" />
+  </svg>
+);
+
+export const HashtagIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/HashtagIcon/HashtagIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/RedoclyIcon/RedoclyIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g>
+      <path d="M14.625 6.19973C14.625 8.69176 12.6173 10.712 10.1406 10.712H2.8125V10.2717C5.04753 10.2717 6.85938 8.44864 6.85938 6.19973C6.85938 3.95082 5.04753 2.12772 2.8125 2.12772V1.6875H10.1406C12.6173 1.6875 14.625 3.70769 14.625 6.19973Z" />
+      <path d="M14.625 16.875C14.625 14.383 12.6173 12.3628 10.1406 12.3628H2.8125V12.803C5.04753 12.803 6.85938 14.6261 6.85938 16.875H14.625Z" />
+    </g>
+  </svg>
+);
+
+export const RedoclyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/RedoclyIcon/RedoclyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path
+        d="M3.0625 0.875H0.875V7H3.0625V0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+      <path
+        d="M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => {
+  const { color, ...restProps } = props;
+
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...restProps}
+    >
+      <path d="M3.0625 7H0.875V13.125H3.0625V7Z" fill={getCssColorVariable(color) || '#DCDDE5'} />
+      <path
+        d="M10.0625 13.125H3.9375V6.64882L5.26846 4.65229L5.63828 2.06382C5.66886 1.85567 5.77308 1.66539 5.932 1.52753C6.09092 1.38967 6.29402 1.31338 6.5044 1.3125H6.5625C6.91048 1.31288 7.2441 1.45129 7.49016 1.69734C7.73621 1.9434 7.87462 2.27702 7.875 2.625V5.25H11.375C11.839 5.25052 12.2838 5.43506 12.6119 5.76314C12.9399 6.09121 13.1245 6.53603 13.125 7V10.0625C13.1241 10.8744 12.8012 11.6529 12.227 12.227C11.6529 12.8012 10.8744 13.1241 10.0625 13.125Z"
+        fill={getCssColorVariable(color) || '#DCDDE5'}
+      />
+    </svg>
+  );
+};
+
+export const ThumbUpFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && getCssColorVariable(color)};
+`;

package/src/index.ts

@@ -32,6 +32,7 @@ export * from '@redocly/theme/components/Buttons/CopyButton';
 export * from '@redocly/theme/components/Buttons/EditPageButton';
 export * from '@redocly/theme/components/Buttons/EmailButton';
 export * from '@redocly/theme/components/Buttons/NewTabButton';
+export * from '@redocly/theme/components/Buttons/AIAssistantButton';
 /* Markdown */
 export * from '@redocly/theme/components/Markdown/Markdown';
 export * from '@redocly/theme/components/Markdown/styles/baseTable';
@@ -282,9 +283,11 @@ export * from '@redocly/theme/icons/RabbitMQIcon/RabbitMQIcon';
 export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 export * from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
 export * from '@redocly/theme/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from '@redocly/theme/icons/GenericIcon/GenericIcon';
 export * from '@redocly/theme/icons/ShareIcon/ShareIcon';
+export * from '@redocly/theme/icons/HashtagIcon/HashtagIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/layouts/RootLayout.tsx

@@ -5,18 +5,24 @@ import type { JSX } from 'react';
 import { Navbar } from '@redocly/theme/components/Navbar/Navbar';
 import { Footer } from '@redocly/theme/components/Footer/Footer';
 import { SkipContent } from '@redocly/theme/components/SkipContent/SkipContent';
+import { AIAssistantButton } from '@redocly/theme/components/Buttons/AIAssistantButton';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type LayoutConfig = {
   children: React.ReactNode;
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
+  const { useSearch } = useThemeHooks();
+  const { askAi } = useSearch();
+
   return (
     <div data-component-name="layouts/RootLayout">
       <SkipContent />
       <Navbar />
       {children}
       <Footer />
+      {askAi && <AIAssistantButton />}
     </div>
   );
 }

package/src/markdoc/components/Cards/Card.tsx

@@ -103,6 +103,7 @@ const ContentWrapper = styled.div`
   flex-direction: column;
   flex-shrink: 1;
   gap: var(--card-content-gap);
+  width: 100%;
 `;
 
 const Title = styled.h3<{ $isCardLink: boolean; $justifyContent: string }>`
@@ -146,28 +147,6 @@ const Body = styled.div<{ $lineClamp?: number }>`
   > *:last-child {
     margin-bottom: 0;
   }
-
-  /* Icon link styles */
-  & a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-
-    & svg {
-      width: 1.2em;
-      height: 1.2em;
-      margin-right: 0.25em;
-      vertical-align: middle;
-
-      & g {
-        fill: var(--link-color-primary);
-      }
-    }
-  }
-
-  & a:visited > span > svg > g {
-    fill: var(--link-color-visited);
-  }
 `;
 
 const CardWrapper = styled.div.attrs<{
@@ -222,12 +201,6 @@ const CardWrapper = styled.div.attrs<{
       }
     }
   }
-
-  && ul {
-    list-style: none;
-    padding-left: 0;
-    margin: var(--spacing-xs) 0;
-  }
 `;
 
 const getCardWrapperClass = ($isCardLink: boolean, $variant?: string) => {