@redocly/theme 0.64.0-next.2 → 0.64.0-next.4

package/src/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.tsx

@@ -1,85 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-import { concatClassNames } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
-
-type ExcalidrawDiagramProps = {
-  diagramHtml: string;
-  className?: string;
-};
-
-export function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-
-  return (
-    <>
-      <Wrapper
-        className={concatClassNames('excalidraw-wrapper', className)}
-        dangerouslySetInnerHTML={{ __html: diagramHtml }}
-        data-component-name="Markdoc/ExcalidrawDiagram/ExcalidrawDiagram"
-        onClick={open}
-        onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && open()}
-        role="button"
-        tabIndex={0}
-        aria-label={translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen')}
-      />
-      <SvgViewer
-        isOpen={isOpen}
-        onClose={close}
-        labels={{
-          zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
-          zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
-          fitToView: translate('excalidraw.reset', 'Fit to view'),
-          close: translate('excalidraw.close', 'Close'),
-          dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
-        }}
-      >
-        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
-      </SvgViewer>
-    </>
-  );
-}
-
-const Wrapper = styled.div`
-  background-color: var(--excalidraw-bg-color);
-  border-radius: var(--excalidraw-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-  overflow: hidden;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
-
-    > rect {
-      fill: var(--excalidraw-bg-color);
-    }
-  }
-
-  & + & {
-    margin-top: var(--spacing-md);
-  }
-`;
-
-const ViewerContent = styled.div`
-  svg {
-    display: block;
-    max-width: none !important;
-  }
-`;

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

@@ -1,5 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidrawDarkMode = css`
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-`;

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

@@ -1,12 +0,0 @@
-import { css } from "styled-components";
-
-export const excalidraw = css`
-  /**
-  * @tokens Excalidraw
-  */
-
-  --excalidraw-bg-color: var(--bg-color); // @presenter Color
-  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-
-  // @tokens End
-`;

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-import { concatClassNames } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
-
-type MermaidProps = {
-  diagramHtml: string;
-  'data-source'?: string;
-  'data-hash'?: string;
-  className?: string;
-};
-
-export function Mermaid({
-  diagramHtml,
-  'data-source': dataSource,
-  'data-hash': dataHash,
-  className,
-}: MermaidProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-
-  return (
-    <>
-      <Wrapper
-        className={concatClassNames('mermaid-wrapper', className)}
-        dangerouslySetInnerHTML={{ __html: diagramHtml }}
-        data-component-name="Markdoc/Mermaid/Mermaid"
-        data-source={dataSource}
-        data-hash={dataHash}
-        onClick={open}
-        onKeyDown={(e) => e.key === 'Enter' || (e.key === ' ' && open())}
-        role="button"
-        tabIndex={0}
-        aria-label={translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen')}
-      />
-      <SvgViewer
-        isOpen={isOpen}
-        onClose={close}
-        labels={{
-          zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
-          zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
-          fitToView: translate('mermaid.reset', 'Fit to view'),
-          close: translate('mermaid.close', 'Close'),
-          dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
-        }}
-      >
-        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
-      </SvgViewer>
-    </>
-  );
-}
-
-const Wrapper = styled.div`
-  background-color: var(--mermaid-bg-color);
-  border-radius: var(--mermaid-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    max-width: 100%;
-  }
-`;
-
-const ViewerContent = styled.div`
-  background-color: var(--mermaid-bg-color);
-
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    display: block;
-    max-width: none !important;
-  }
-`;

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

@@ -1,5 +0,0 @@
-import { css } from "styled-components";
-
-export const mermaidDarkMode = css`
-  --mermaid-bg-color: var(--color-warm-grey-8); // @presenter Color
-`;

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

@@ -1,13 +0,0 @@
-import { css } from "styled-components";
-
-export const mermaid = css`
-  /**
-  * @tokens Mermaid
-  */
-
-  --mermaid-bg-color: var(--bg-color-raised); // @presenter Color
-  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --mermaid-font-family: var(--font-family-base); // @presenter FontFamily
-
-  // @tokens End
-`;