@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

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/icons/VSCodeIcon/VSCodeIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      clipRule="evenodd"
+      d="m70.9119 99.3171c1.575.6136 3.3709.5743 4.9606-.1907l20.5883-9.9067c2.1634-1.041 3.5392-3.2305 3.5392-5.6325v-67.1739c0-2.402-1.3757-4.5915-3.5391-5.6325l-20.5884-9.907044c-2.0863-1.003885-4.5279-.757996-6.359.573194-.2615.19016-.5107.40248-.7445.63646l-39.4139 35.95809-17.1679-13.0319c-1.5982-1.2131-3.83357-1.1137-5.31787.2365l-5.5063 5.0088c-1.815582 1.6515-1.817663 4.5078-.0045 6.1621l14.88857 13.5831-14.88857 13.5831c-1.813163 1.6542-1.811082 4.5106.0045 6.1621l5.5063 5.0088c1.4843 1.3502 3.71967 1.4496 5.31787.2364l17.1679-13.0318 39.4139 35.958c.6235.6239 1.3556 1.0937 2.1429 1.4004zm4.1033-72.0182-29.9061 22.7012 29.9061 22.7011z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </svg>
+);
+
+export const VSCodeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/VSCodeIcon/VSCodeIcon',
+}))<IconProps>`
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -1,5 +1,5 @@
 export * from '@redocly/theme/core';
-export * from '@redocly/theme/config';
+export type * from '@redocly/theme/config';
 export * from '@redocly/theme/ext/configure';
 
 /* Components */
@@ -35,8 +35,8 @@ 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';
-export * from '@redocly/theme/components/Markdown/styles/headingAnchor';
+export * from '@redocly/theme/components/Markdown/styles/base-table';
+export * from '@redocly/theme/components/Markdown/styles/heading-anchor';
 export * from '@redocly/theme/components/Markdown/styles/links';
 /* Admonition */
 export * from '@redocly/theme/components/Admonition/Admonition';
@@ -290,6 +290,7 @@ 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/ThreePanelLayout.tsx

@@ -4,7 +4,7 @@ import { LayoutVariant } from '@redocly/config';
 
 import type { JSX } from 'react';
 
-import { breakpoints } from '@redocly/theme/core/utils/media-css';
+import { breakpoints } from '@redocly/theme/core/utils';
 
 interface LayoutConfig {
   children: React.ReactNode;

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) => {

package/src/markdoc/components/Cards/variables.dark.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const cardsDarkMode = css`
   --card-icon-border-color: var(--color-warm-grey-4);
   --card-icon-bg-color: var(--color-warm-grey-3);
@@ -22,3 +23,4 @@ export const cardsDarkMode = css`
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/markdoc/components/Cards/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const cards = css`
   --cards-gap: var(--spacing-sm);
 
@@ -65,4 +66,5 @@ export const cards = css`
     --card-border-width: 0;
   }
 
-`
+`;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/markdoc/components/CodeWalkthrough/CodePanelHeader.tsx

@@ -200,7 +200,7 @@ const Tab = styled.button<{ active: boolean }>`
           }
         `}
 `;
-
+// eslint-disable-next-line no-warning-comments
 // code-walk-todo: figure it our why we could not do it differently
 const StyledDropdownMenu = styled(DropdownMenu)`
   --md-list-left-padding: var(--dropdown-menu-padding);

package/src/markdoc/components/ConnectMCP/ConnectMCP.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { ConnectMCPButton } from '@redocly/theme/components/Buttons/ConnectMCPButton';
+import { useThemeConfig } from '@redocly/theme/core/hooks';
+
+export type ConnectMCPProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCP({
+  placement = 'bottom',
+  alignment = 'start',
+  options,
+}: ConnectMCPProps): JSX.Element | null {
+  const themeConfig = useThemeConfig();
+  const isMcpDisabled = themeConfig.mcp?.hide || themeConfig.mcp?.docs?.hide;
+
+  if (isMcpDisabled) {
+    return null;
+  }
+
+  return <ConnectMCPButton placement={placement} alignment={alignment} options={options} />;
+}