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

Shared UI components lib

import { css } from 'styled-components';

export const search = css`
  /**
    * @tokens Search
    */
  --search-modal-width: 1100px;
  --search-modal-min-width: 460px;
  --search-modal-min-height: 705px;
  --search-modal-bg-color: var(--modal-bg-color);
  --search-modal-box-shadow: var(--modal-box-shadow);
  --search-modal-border-radius: var(--border-radius-lg);
  --search-modal-border: 1px solid var(--border-color-secondary);

  --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
  --search-modal-header-padding: var(--spacing-sm);

  --search-modal-footer-padding: var(--spacing-sm);
  --search-modal-footer-gap: var(--spacing-md);

  --search-highlight-bg-color: none; // @presenter Color
  --search-highlight-text-color: var(--color-info-base); // @presenter Color

  --search-input-font-family: var(--font-family-base); // @presenter FontFamily
  --search-input-font-size: var(--font-size-base); // @presenter FontSize
  --search-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --search-input-line-height: var(--line-height-base); // @presenter LineHeight
  --search-input-bg-color: var(--bg-color-tonal); // @presenter Color
  --search-input-text-color: var(--input-content-color-active); // @presenter Color
  --search-input-icon-color: var(--icon-color-interactive); // @presenter Color
  --search-input-placeholder-color: var(--input-content-placeholder-color);
  --search-input-padding: var(--spacing-sm);
  --search-input-gap: var(--spacing-sm);
  --search-input-height: 40px;
  --search-input-border: none;
  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius

  --search-group-title-padding: var(--spacing-sm);
  --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
  --search-group-footer-padding: var(--spacing-sm);
  --search-group-footer-text-color: var(--link-color-primary); // @presenter Color

  --search-item-text-color: var(--text-color-secondary); // @presenter Color
  --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
  --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
  --search-item-title-font-weight: var(--font-weight-medium); // @presenter FontWeight
  --search-item-title-line-height: var(--line-height-base); // @presenter LineHeight
  --search-item-title-text-color: var(--text-color-primary); // @presenter Color
  --search-item-title-padding: var(--spacing-xxs) 0 2px 0;
  --search-item-path-text-color: var(--text-color-description); // @presenter Color
  --search-item-bg-color: transparent; // @presenter Color
  --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
  --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
  --search-item-border-color: transparent; // @presenter Color
  --search-item-padding: var(--spacing-sm) var(--spacing-lg);
  --search-item-gap: var(--spacing-xxs);
  --search-item-product-icon-size: 16px;

  --search-recent-item-font-size: var(--font-size-base); // @presenter FontSize
  --search-recent-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --search-recent-item-line-height: var(--line-height-base); // @presenter LineHeight
  --search-recent-item-padding: var(--spacing-xs) var(--spacing-lg);
  --search-recent-item-text-color: var(--search-item-text-color); // @presenter Color
  --search-recent-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
  --search-recent-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
  --search-recent-item-title-font-size: var(--font-size-base); // @presenter FontSize
  --search-recent-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --search-recent-item-title-line-height: var(--line-height-base); // @presenter LineHeight
  --search-recent-item-title-text-color: var(--text-color-primary); // @presenter Color
  --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
  --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
  --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color

  --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
  --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --search-suggested-item-line-height: var(--line-height-base); // @presenter LineHeight
  --search-suggested-item-padding: var(--spacing-xs) var(--spacing-lg);
  --search-suggested-item-text-color: var(--search-item-text-color); // @presenter Color
  --search-suggested-item-text-color-hover: var(--search-item-text-color-hover); // @presenter Color
  --search-suggested-item-bg-color-hover: var(--search-item-bg-color-hover); // @presenter Color
  --search-suggested-item-title-font-size: var(--font-size-base); // @presenter FontSize
  --search-suggested-item-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
  --search-suggested-item-title-line-height: var(--line-height-base); // @presenter LineHeight
  --search-suggested-item-title-text-color: var(--text-color-primary); // @presenter Color
  --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
  --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
  --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color

  --search-shortcuts-gap: var(--spacing-xs);

  --search-message-font-size: var(--font-size-lg); // @presenter FontSize
  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
  --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
  --search-message-text-color: var(--text-color-secondary); // @presenter Color
  --search-message-gap: var(--spacing-md);

  --search-header-buttons-gap: var(--spacing-sm);
  --search-header-buttons-padding-left: var(--spacing-sm);
  --search-header-buttons-border-left: 1px solid var(--border-color-primary);

    /**
  * @tokens Search filter
  */
  --search-filter-width: 450px;
  --search-filter-bg-color: var(--search-modal-bg-color);
  --search-filter-padding: var(--spacing-lg);
  --search-filter-font-size: var(--font-size-base);
  --search-filter-font-weight: var(--font-weight-regular);
  --search-filter-line-height: var(--line-height-base);

  --search-filter-header-padding: var(--spacing-md) 0;
  --search-filter-header-text-color: var(--text-color-helper);
  --search-filter-header-z-index: var(--z-index-raised);

  --search-filter-fields-gap: var(--spacing-base);

  --search-filter-field-select-option-gap: var(--spacing-unit);
  --search-filter-field-select-option-text-padding: 0 0 0 var(--spacing-unit);
  --search-filter-field-select-footer-padding: 0 0 0 var(--spacing-unit);
  --search-filter-field-select-footer-text-color: var(--text-color-helper);

  --search-filter-field-tags-gap: var(--spacing-unit);
  --search-filter-field-tags-tag-margin: var(--spacing-unit) 0 0 0;

  // @tokens End

  /**
  * @tokens Navbar Search Trigger
  */
  --search-trigger-gap: var(--spacing-xs);
  --search-trigger-border-width: var(--border-width);
  --search-trigger-border-style: var(--border-style);
  --search-trigger-border-color: var(--input-border-color);
  --search-trigger-border-color-hover: var(--input-border-color-hover);
  --search-trigger-border-radius: var(--border-radius-md);
  --search-trigger-padding-vertical: var(--input-padding-vertical);
  --search-trigger-padding-horizontal: var(--input-padding-horizontal);
  --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
  --search-trigger-color: var(--input-content-placeholder-color);
  --search-trigger-bg-color: var(--navbar-bg-color);
  --search-trigger-icon-size: 16px;
  --search-trigger-line-height: var(--line-height-base);

  /**
  * @tokens AI Search
  */
  
  --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);

  --search-ai-spinner-icon-color: var(--icon-color-interactive);
  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
  --search-ai-response-padding: var(--spacing-lg);
  --search-ai-response-gap: var(--spacing-sm);

  --search-ai-response-header-gap: var(--spacing-md);

  --search-ai-question-font-size: var(--font-size-xl);
  --search-ai-question-font-weight: var(--font-weight-semibold);
  --search-ai-question-line-height: var(--line-height-xl);
  --search-ai-question-text-color: var(--text-color-primary);

  --search-ai-response-body-gap: var(--spacing-xl);
  --search-ai-response-body-padding: 0 40px;

  --search-ai-text-color: var(--text-color-secondary);
  --search-ai-text-font-size: var(--font-size-lg);
  --search-ai-text-line-height: var(--line-height-lg);

  --search-ai-user-bg-color: var(--color-blue-6);
  --search-ai-user-text-color: var(--color-static-white);
  --search-ai-assistant-bg-color: var(--layer-color);
  --search-ai-assistant-text-color: var(--text-color-primary);
  --search-ai-assistant-border: 1px solid var(--border-color-primary);

  --search-ai-resources-gap: var(--spacing-base);
  --search-ai-resources-title-font-weight: var(--font-weight-medium);
  --search-ai-resources-title-font-size: var(--font-size-lg);
  --search-ai-resources-title-line-height: var(--line-height-lg);

  --search-ai-resource-tags-gap: var(--spacing-base);
  --search-ai-resource-tag-text-color: var(--text-color-secondary);
  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
  --search-ai-resource-tag-icon-size: 16px;

  --search-ai-icon-size: 32px;
  --search-ai-icon-bg-color: var(--search-ai-gradient);
  --search-ai-icon-color: var(--color-static-white);

  --search-ai-button-icon-color: none;

  --search-ai-thinking-dots-gap: 4px;
  --search-ai-thinking-dots-padding: 4px 0;
  --search-ai-thinking-dot-size: 6px;
  --search-ai-thinking-dot-color: var(--search-ai-gradient);

  --search-ai-disclaimer-font-size: var(--font-size-sm);
  --search-ai-disclaimer-line-height: var(--line-height-sm);
  --search-ai-disclaimer-text-color: var(--text-color-secondary);


  --search-ai-welcome-margin: var(--spacing-md);
  --search-ai-icon-wrapper-padding: var(--spacing-xs);

  --search-ai-suggestions-title-text-color: var(--text-color-description);
  --search-ai-suggestions-title-font-size: var(--font-size-base);
  --search-ai-suggestions-title-line-height: var(--line-height-base);
  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
  --search-ai-suggestions-text-color: var(--text-color-description);

  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
  --search-ai-conversation-input-send-button-border-color-disabled: var(--button-border-color-disabled);
  --search-ai-conversation-input-send-button-icon-color: var(--color-static-white);

  /**
  * @tokens AI Search Dialog
  */
  --search-ai-dialog-bg-color: var(--bg-color);
  --search-ai-dialog-header-border: var(--search-modal-border);
  --search-ai-dialog-header-bg-color: var(--search-modal-header-bg-color);
  --search-ai-dialog-header-padding: var(--search-modal-header-padding);

  --search-ai-dialog-body-padding: var(--search-ai-response-padding);
  --search-ai-dialog-body-gap: var(--spacing-sm);

  --search-ai-dialog-input-padding: var(--spacing-sm) var(--search-ai-response-padding);
  --search-ai-dialog-input-border: 1px solid var(--border-color-secondary);
  --search-ai-dialog-input-bg-color: var(--bg-color);

  /**
  * @tokens AI Search Conversation Input
  */
  --search-ai-conversation-input-bg-color: var(--bg-color);
  --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
  --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
  --search-ai-conversation-input-font-size: var(--font-size-base);
  --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
  --search-ai-conversation-input-border-color-focus: var(--color-blue-6);
  --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);

  --search-ai-conversation-input-send-button-right: 12px;
  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
  --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);

  /**
  * @tokens AI Search Response
  */
  --search-ai-response-padding: var(--spacing-lg);
  --search-ai-response-gap: var(--spacing-sm);
  --search-ai-response-header-gap: var(--spacing-md);
  --search-ai-response-body-gap: var(--spacing-xl);
  --search-ai-response-body-padding: 0 40px;

  --search-ai-text-color: var(--text-color-secondary);
  --search-ai-text-font-size: var(--font-size-lg);
  --search-ai-text-line-height: var(--line-height-lg);

  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;

  --search-ai-question-font-size: var(--font-size-xl);
  --search-ai-question-font-weight: var(--font-weight-semibold);
  --search-ai-question-line-height: var(--line-height-xl);
  --search-ai-question-text-color: var(--text-color-primary);

  --search-ai-resources-gap: var(--spacing-base);
  --search-ai-resources-title-font-weight: var(--font-weight-medium);
  --search-ai-resources-title-font-size: var(--font-size-lg);
  --search-ai-resources-title-line-height: var(--line-height-lg);

  --search-ai-resource-tags-gap: var(--spacing-base);
  --search-ai-resource-tag-text-color: var(--text-color-secondary);
  --search-ai-resource-tag-icon-color: var(--text-color-secondary);

  --search-ai-suggestions-gap: var(--spacing-sm);
  --search-ai-suggestions-margin-left: var(--spacing-xs);
  --search-ai-suggestion-item-gap: var(--spacing-xs);

  --search-ai-suggestions-title-text-color: var(--text-color-description);
  --search-ai-suggestions-title-font-size: var(--font-size-base);
  --search-ai-suggestions-title-line-height: var(--line-height-base);
  --search-ai-suggestions-title-font-weight: var(--font-weight-light);

  --search-ai-spinner-icon-color: var(--icon-color-interactive);
  --search-ai-checkmark-icon-color: var(--icon-color-interactive);

  // @tokens End
`;