@redocly/theme/src/components/Buttons/variables.ts

Shared UI components lib

import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const aiAssistantButton = css`
  /**
   * @tokens AI Assistant Button
   * @presenter Color
   */

  /* Button sizing */
  --ai-assistant-button-icon-size: 40px;
  --ai-assistant-button-text-height: 40px;
  --ai-assistant-button-text-padding: var(--spacing-sm) var(--spacing-md);
  --ai-assistant-button-border-radius-icon: 50%;
  --ai-assistant-button-border-radius-text: 1.75rem;
  --ai-assistant-button-min-width: auto;

  /* Icon sizing */
  --ai-assistant-button-icon-icon-size: 18px;
  --ai-assistant-button-text-icon-size: 20px;

  /* Positioning */
  --ai-assistant-button-bottom: var(--spacing-xl);
  --ai-assistant-button-right: var(--spacing-xl);
  --ai-assistant-button-z-index: calc(var(--z-index-overlay) - 1);

  /* Typography */
  --ai-assistant-button-font-size: var(--font-size-base);
  --ai-assistant-button-font-weight: var(--font-weight-medium);
  --ai-assistant-button-gap: var(--spacing-xs);

  /* Background color */
  --ai-assistant-button-bg-color: var(--color-static-white);

  /* Icon colors */
  --ai-assistant-button-redocly-icon-color: #297AFE;

  /* Transform */
  --ai-assistant-button-transform-hover: none;
  --ai-assistant-button-transform-active: translateY(0);

  /* Shadow */
  --ai-assistant-button-shadow-hover:
    2px 1px 12px 4px rgba(143, 98, 254, 0.2),
    -3px -2px 24px 0px rgba(41, 122, 254, 0.2);

  /* Transition */
  --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
`;
/* eslint-enable theme/no-raw-colors-in-styles */

export const connectMCPButton = css`
  /**
   * @tokens Connect MCP Button
   * @presenter Color
   */

  /* Button gap */
  --connect-mcp-button-gap: var(--spacing-xs);

  /* Menu item layout */
  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
  --connect-mcp-button-menu-item-padding-inline: 0;

  /* Menu item icon */
  --connect-mcp-button-menu-item-icon-size: 32px;
  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
  --connect-mcp-button-menu-item-icon-border-style: solid;
  --connect-mcp-button-menu-item-icon-border-width: 1px;
  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
    var(--connect-mcp-button-menu-item-icon-border-style)
    var(--connect-mcp-button-menu-item-icon-border-color);
  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);

  /* Menu item text */
  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);

  /* Menu item title */
  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);

  /* Menu item description */
  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
`;