@redocly/theme 0.62.0-next.3 → 0.62.0-next.5

package/lib/icons/FitToViewIcon/FitToViewIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const FitToViewIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/FitToViewIcon/FitToViewIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FitToViewIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M1 1H5V2.5H2.5V5H1V1Z" }),
+    react_1.default.createElement("path", { d: "M15 1H11V2.5H13.5V5H15V1Z" }),
+    react_1.default.createElement("path", { d: "M1 15H5V13.5H2.5V11H1V15Z" }),
+    react_1.default.createElement("path", { d: "M15 15H11V13.5H13.5V11H15V15Z" })));
+exports.FitToViewIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/FitToViewIcon/FitToViewIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=FitToViewIcon.js.map

package/lib/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/Tags/CounterTag';
 export * from './components/VersionPicker/VersionPicker';
 export * from './components/Marker/Marker';
 export * from './components/PageActions/PageActions';
+export * from './components/SvgViewer/SvgViewer';
 export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
@@ -266,6 +267,7 @@ export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';
 export * from './icons/HashtagIcon/HashtagIcon';
+export * from './icons/FitToViewIcon/FitToViewIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -64,6 +64,7 @@ __exportStar(require("./components/Tags/CounterTag"), exports);
 __exportStar(require("./components/VersionPicker/VersionPicker"), exports);
 __exportStar(require("./components/Marker/Marker"), exports);
 __exportStar(require("./components/PageActions/PageActions"), exports);
+__exportStar(require("./components/SvgViewer/SvgViewer"), exports);
 /* Buttons */
 __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
@@ -329,6 +330,7 @@ __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exp
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 __exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
+__exportStar(require("./icons/FitToViewIcon/FitToViewIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/Mermaid/Mermaid.js

@@ -1,18 +1,75 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = Mermaid;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
 function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
-    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = () => setIsOpen(true);
+    const close = () => setIsOpen(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, { className: (0, utils_1.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') }),
+        react_1.default.createElement(SvgViewer_1.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'),
+            } },
+            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
 }
 const Wrapper = styled_components_1.default.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;
@@ -23,4 +80,15 @@ const Wrapper = styled_components_1.default.div `
     max-width: 100%;
   }
 `;
+const ViewerContent = styled_components_1.default.div `
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    display: block;
+    max-width: none !important;
+  }
+`;
 //# sourceMappingURL=Mermaid.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-next.3",
+  "version": "0.62.0-next.5",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,8 +29,8 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
     "react-router-dom": "^6.21.1",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.2"
+    "@redocly/config": "0.41.4"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Search/SearchDialog.tsx

@@ -262,20 +262,27 @@ export function SearchDialog({
             </>
           ) : (
             <AiDialogHeaderWrapper>
-              <Button
-                variant="secondary"
-                onClick={() => {
-                  setMode('search');
-                  aiSearch.clearConversation();
-                  focusSearchInput();
-                }}
-                tabIndex={0}
-                icon={<ChevronLeftIcon />}
-              >
-                {isMobile
-                  ? translate('search.ai.back', 'Back')
-                  : translate('search.ai.backToSearch', 'Back to search')}
-              </Button>
+              {initialMode === 'ai-dialog' ? (
+                <AiDialogHeaderTitle>
+                  <AiStarsGradientIcon color="var(--search-ai-button-icon-color)" size="1.25rem" />
+                  {translate('search.ai.assistant', 'Assistant')}
+                </AiDialogHeaderTitle>
+              ) : (
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setMode('search');
+                    aiSearch.clearConversation();
+                    focusSearchInput();
+                  }}
+                  tabIndex={0}
+                  icon={<ChevronLeftIcon />}
+                >
+                  {isMobile
+                    ? translate('search.ai.back', 'Back')
+                    : translate('search.ai.backToSearch', 'Back to search')}
+                </Button>
+              )}
               <AiDialogHeaderActionsWrapper>
                 <Button
                   variant="secondary"
@@ -567,6 +574,14 @@ const AiDialogHeaderActionsWrapper = styled.div`
   gap: var(--spacing-xxs);
 `;
 
+const AiDialogHeaderTitle = styled.span`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+`;
+
 const SearchDialogBody = styled.div`
   display: flex;
   flex-direction: row-reverse;

package/src/components/SvgViewer/SvgViewer.tsx

@@ -0,0 +1,405 @@
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX, TouchEvent as ReactTouchEvent, WheelEvent, MouseEvent, ReactNode } from 'react';
+
+import { useModalScrollLock } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { AddIcon } from '@redocly/theme/icons/AddIcon/AddIcon';
+import { SubtractIcon } from '@redocly/theme/icons/SubtractIcon/SubtractIcon';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { FitToViewIcon } from '@redocly/theme/icons/FitToViewIcon/FitToViewIcon';
+
+export type SvgViewerLabels = {
+  zoomIn?: string;
+  zoomOut?: string;
+  fitToView?: string;
+  close?: string;
+  dialogLabel?: string;
+};
+
+export type SvgViewerProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  labels?: SvgViewerLabels;
+};
+
+type Position = { x: number; y: number };
+
+const MIN_SCALE_FACTOR = 0.1;
+const MAX_SCALE_FACTOR = 5;
+const ZOOM_STEP = 0.1;
+const WHEEL_SENSITIVITY = 0.002;
+const VIEWPORT_PADDING = 60;
+const FIT_SCALE_FACTOR = 0.9;
+
+export function SvgViewer({
+  isOpen,
+  onClose,
+  children,
+  labels = {},
+}: SvgViewerProps): JSX.Element | null {
+  const [scale, setScale] = useState(1);
+  const [baseScale, setBaseScale] = useState(1);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState<Position>({ x: 0, y: 0 });
+  const [pinchState, setPinchState] = useState<{ distance: number; scale: number } | null>(null);
+  const [isWheelZooming, setIsWheelZooming] = useState(false);
+
+  const wheelTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
+  const viewportRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const renderedScaleRef = useRef(scale);
+
+  useModalScrollLock(isOpen);
+
+  // Keep track of the actually rendered scale for accurate measurements
+  useLayoutEffect(() => {
+    renderedScaleRef.current = scale;
+  }, [scale]);
+
+  const minScale = baseScale * MIN_SCALE_FACTOR;
+  const maxScale = baseScale * MAX_SCALE_FACTOR;
+
+  const clampScale = useCallback(
+    (value: number) => Math.min(maxScale, Math.max(minScale, value)),
+    [minScale, maxScale],
+  );
+
+  const calculateFitScale = useCallback(() => {
+    if (!viewportRef.current || !contentRef.current) return 1;
+
+    const viewport = viewportRef.current.getBoundingClientRect();
+    const svg = contentRef.current.querySelector('svg');
+    if (!svg) return 1;
+
+    const svgRect = svg.getBoundingClientRect();
+    if (!svgRect.width || !svgRect.height) return 1;
+
+    // getBoundingClientRect returns transformed size, so compensate for current scale
+    const currentScale = renderedScaleRef.current || 1;
+    const naturalWidth = svgRect.width / currentScale;
+    const naturalHeight = svgRect.height / currentScale;
+
+    const availableWidth = viewport.width - VIEWPORT_PADDING * 2;
+    const availableHeight = viewport.height - VIEWPORT_PADDING * 2;
+
+    return (
+      Math.min(availableWidth / naturalWidth, availableHeight / naturalHeight) * FIT_SCALE_FACTOR
+    );
+  }, []);
+
+  const resetView = useCallback(() => {
+    setScale(baseScale);
+    setPosition({ x: 0, y: 0 });
+  }, [baseScale]);
+
+  const zoomIn = useCallback(() => {
+    setScale((s) => clampScale(s + baseScale * ZOOM_STEP));
+  }, [baseScale, clampScale]);
+
+  const zoomOut = useCallback(() => {
+    setScale((s) => clampScale(s - baseScale * ZOOM_STEP));
+  }, [baseScale, clampScale]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          onClose();
+          break;
+        case '+':
+        case '=':
+          zoomIn();
+          break;
+        case '-':
+          zoomOut();
+          break;
+        case '0':
+          resetView();
+          break;
+      }
+    },
+    [onClose, zoomIn, zoomOut, resetView],
+  );
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      setIsWheelZooming(true);
+      if (wheelTimeoutRef.current) clearTimeout(wheelTimeoutRef.current);
+      wheelTimeoutRef.current = setTimeout(() => setIsWheelZooming(false), 150);
+
+      const delta = -e.deltaY * WHEEL_SENSITIVITY;
+      setScale((s) => clampScale(s + s * delta));
+    },
+    [clampScale],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [position],
+  );
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return;
+      setPosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+    },
+    [isDragging, dragStart],
+  );
+
+  const handleMouseUp = useCallback(() => setIsDragging(false), []);
+
+  const getTouchDistance = (touches: React.TouchList): number => {
+    if (touches.length !== 2) return 0;
+    const dx = touches[0].clientX - touches[1].clientX;
+    const dy = touches[0].clientY - touches[1].clientY;
+    return Math.hypot(dx, dy);
+  };
+
+  const handleTouchStart = useCallback(
+    (e: ReactTouchEvent) => {
+      if (e.touches.length === 2) {
+        setPinchState({ distance: getTouchDistance(e.touches), scale });
+      } else if (e.touches.length === 1) {
+        setIsDragging(true);
+        setDragStart({
+          x: e.touches[0].clientX - position.x,
+          y: e.touches[0].clientY - position.y,
+        });
+      }
+    },
+    [position, scale],
+  );
+
+  const handleTouchMove = useCallback(
+    (e: ReactTouchEvent) => {
+      e.preventDefault();
+      if (e.touches.length === 2 && pinchState) {
+        const distance = getTouchDistance(e.touches);
+        setScale(clampScale(pinchState.scale * (distance / pinchState.distance)));
+      } else if (e.touches.length === 1 && isDragging) {
+        setPosition({
+          x: e.touches[0].clientX - dragStart.x,
+          y: e.touches[0].clientY - dragStart.y,
+        });
+      }
+    },
+    [pinchState, isDragging, dragStart, clampScale],
+  );
+
+  const handleTouchEnd = useCallback(() => {
+    setIsDragging(false);
+    setPinchState(null);
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setPosition({ x: 0, y: 0 });
+    overlayRef.current?.focus();
+
+    // Wait for DOM to be ready before measuring
+    requestAnimationFrame(() => {
+      const fitScale = calculateFitScale();
+      setBaseScale(fitScale);
+      setScale(fitScale);
+    });
+  }, [isOpen, calculateFitScale]);
+
+  if (!isOpen) return null;
+
+  const zoomPercentage = baseScale > 0 ? Math.round((scale / baseScale) * 100) : 100;
+  const isAnimating = !isDragging && !isWheelZooming && !pinchState;
+
+  return (
+    <Overlay
+      ref={overlayRef}
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      aria-modal="true"
+      role="dialog"
+      aria-label={labels.dialogLabel || 'SVG viewer'}
+    >
+      <Viewport
+        ref={viewportRef}
+        onClick={(e) => e.stopPropagation()}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+        $isDragging={isDragging}
+      >
+        <Content
+          ref={contentRef}
+          $isAnimating={isAnimating}
+          style={{
+            transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px)) scale(${scale})`,
+          }}
+        >
+          {children}
+        </Content>
+        <Controls>
+          <ControlGroup>
+            <Tooltip tip={labels.zoomOut || 'Zoom out'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<SubtractIcon />}
+                onClick={zoomOut}
+                disabled={scale <= minScale}
+              />
+            </Tooltip>
+            <ZoomLabel>{zoomPercentage}%</ZoomLabel>
+            <Tooltip tip={labels.zoomIn || 'Zoom in'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<AddIcon />}
+                onClick={zoomIn}
+                disabled={scale >= maxScale}
+              />
+            </Tooltip>
+            <Divider />
+            <Tooltip tip={labels.fitToView || 'Fit to view'} placement="top">
+              <ControlButton
+                variant="text"
+                size="small"
+                icon={<FitToViewIcon />}
+                onClick={resetView}
+              />
+            </Tooltip>
+            <Tooltip tip={labels.close || 'Close'} placement="top">
+              <ControlButton variant="text" size="small" icon={<CloseIcon />} onClick={onClose} />
+            </Tooltip>
+          </ControlGroup>
+        </Controls>
+      </Viewport>
+    </Overlay>
+  );
+}
+
+const scaleIn = keyframes`
+  from {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+`;
+
+const slideUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+`;
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background-color: var(--svg-viewer-overlay-bg-color);
+  backdrop-filter: blur(var(--spacing-unit));
+  z-index: var(--z-index-overlay, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xxl);
+
+  &:focus {
+    outline: none;
+  }
+
+  @media (max-width: 768px) {
+    padding: var(--spacing-md);
+  }
+`;
+
+const Viewport = styled.div<{ $isDragging: boolean }>`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--svg-viewer-bg-color);
+  border-radius: var(--svg-viewer-border-radius);
+  overflow: hidden;
+  cursor: ${({ $isDragging }) => ($isDragging ? 'grabbing' : 'grab')};
+  touch-action: none;
+  box-shadow: var(--svg-viewer-box-shadow);
+  animation: ${scaleIn} 0.25s ease-in-out forwards;
+`;
+
+const Content = styled.div<{ $isAnimating: boolean }>`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: center center;
+  user-select: none;
+  pointer-events: none;
+  transition: ${({ $isAnimating }) => ($isAnimating ? 'transform 0.25s ease-in-out' : 'none')};
+
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;
+
+const Controls = styled.div`
+  position: absolute;
+  bottom: var(--spacing-sm);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  animation: ${slideUp} 0.3s ease-out 0.1s backwards;
+`;
+
+const ControlGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--spacing-xxs);
+  background: var(--bg-color-raised);
+  border: 1px solid var(--border-color-primary);
+  border-radius: var(--border-radius-lg);
+  box-shadow: var(--bg-raised-shadow);
+`;
+
+const ControlButton = styled(Button)`
+  --button-icon-size: 16px;
+`;
+
+const ZoomLabel = styled.span`
+  min-width: 40px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-color-secondary);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: var(--spacing-base);
+  background: var(--border-color-primary);
+  margin: 0 var(--spacing-xxs);
+`;

package/src/components/SvgViewer/variables.dark.ts

@@ -0,0 +1,5 @@
+import { css } from 'styled-components';
+
+export const svgViewerDarkMode = css`
+  --svg-viewer-bg-color: var(--color-warm-grey-9);
+`;

package/src/components/SvgViewer/variables.ts

@@ -0,0 +1,14 @@
+import { css } from 'styled-components';
+
+export const svgViewer = css`
+  /**
+   * @tokens SVG Viewer
+   */
+
+  --svg-viewer-overlay-bg-color: var(--bg-color-modal-overlay); // @presenter Color
+  --svg-viewer-bg-color: var(--bg-color); // @presenter Color
+  --svg-viewer-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --svg-viewer-box-shadow: var(--bg-raised-shadow); // @presenter BoxShadow
+
+  // @tokens End
+`;

package/src/components/Tag/variables.dark.ts

@@ -182,6 +182,12 @@ export const tagDarkMode = css`
     --tag-bg-color-hover: #3A465F; // @presenter Color
   }
 
+  .tag-query {
+    --tag-color: #68cc97; // @presenter Color
+    --tag-bg-color: #1F3D2D; // @presenter Color
+    --tag-bg-color-hover: #34654B; // @presenter Color
+  }
+
   .tag-put {
     --tag-color: #e0a663; // @presenter Color
     --tag-bg-color: #3D2D1B; // @presenter Color