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

Shared UI components lib

import { css } from 'styled-components';

export const filter = css`
  /* === Filter === */
  /**
  * @tokens Filters
  */
  --filter-group-padding: 0;
  --filter-group-gap: var(--spacing-xs);

  --filter-title-font-weight: var(--font-weight-medium);
  --filter-title-font-size: var(--font-size-base);
  --filter-title-line-height: var(--line-height-base);

  --filter-options-padding-vertical: 0;
  --filter-options-padding-horizontal: 0;
  --filter-options-gap: var(--spacing-sm);

  --filter-option-font-size: var(--font-size-base);
  --filter-option-gap: var(--spacing-xs);
  --filter-option-margin: 0;

  --filter-option-label-font-size: var(--font-size-base);
  --filter-option-label-color: var(--text-color-secondary);

  --filter-option-checkbox-padding-left: var(--spacing-xs);

  --filter-content-header-padding-vertical: 5px;
  --filter-content-header-padding-horizontal: 0;

  --filter-content-title-font-size: var(--font-size-base);
  --filter-content-title-line-height: var(--line-height-base);
  --filter-content-title-font-weight: var(--font-weight-semibold);
  
  --filter-content-padding-vertical: var(--spacing-sm);
  --filter-content-padding-horizontal: var(--spacing-base);
  --filter-content-gap: var(--spacing-sm);
  --filter-content-items-padding: var(--spacing-sm) 0;

  --filter-popover-bg-color: var(--bg-color);
  --filter-popover-header-padding: var(--catalog-filter-padding-vertical-mobile) var(--catalog-filter-padding-horizontal-mobile);
  --filter-popover-header-border-color: var(--border-color-secondary);
  --filter-popover-header-bg-color: var(--navbar-bg-color);
  --filter-popover-header-label-color: var(--navbar-text-color);
  --filter-popover-header-label-font-size: var(--font-size-lg);
  --filter-popover-header-label-font-weight: var(--font-weight-bold);
  --filter-popover-header-button-color: var(--navbar-text-color);
  --filter-popover-header-button-height: var(--control-height-base);
  --filter-popover-header-button-font-size: var(--font-size-base);
  --filter-popover-header-button-font-weight: var(--font-weight-regular);

  --filter-input-border: 1px solid var(--border-color-primary);
  --filter-input-min-width: 200px;
  --filter-input-padding: var(--input-padding) var(--spacing-sm) var(--input-padding) calc(var(--spacing-unit) * 9);
  --filter-input-border-radius: var(--input-border-radius);
  --filter-input-bg-color: var(--input-bg-color);
  --filter-input-color: var(--text-color-secondary);
  --filter-input-font-family: var(--font-family-base);
  --filter-input-font-size: var(--font-size-base);
  --filter-input-line-height: var(--input-line-height);
  --filter-input-placeholder-opacity: 1;
  --filter-input-placeholder-color: var(--input-content-placeholder-color);
  --filter-input-color-hover: var(--text-color-primary);
  --filter-input-border-hover: 1px solid var(--border-color-primary);
  --filter-input-color-focus: var(--text-color-primary);
  --filter-input-border-focus: 1px solid var(--border-color-primary);

  --filter-select-min-height: var(--control-height-base);
  --filter-select-max-width: 100%;
  --filter-select-color: var(--text-color-primary);
  --filter-select-border-color: var(--border-color-primary);
  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
  --filter-select-padding: 0;
  --filter-select-border-color-hover: var(--text-color-primary);
  --filter-select-option-margin: 0;
  --filter-select-wrapper-gap: var(--spacing-xxs);

  --filter-date-picker-color: var(--text-color-primary);
  --filter-date-picker-gap: var(--spacing-xs);
  --filter-date-picker-width: 50px;
  --filter-date-picker-tile-bg-color: var(--color-blue-2);
  --filter-date-picker-tile-color: var(--text-color-primary);
  --filter-date-picker-tile-bg-color-hover: var(--color-blue-3);
  --filter-date-picker-tile-color-hover: var(--text-color-primary);
  --filter-date-picker-input-width: var(--spacing-md);
  --filter-date-picker-invalid-input-bg-color: var(--bg-color-raised);
  --filter-date-picker-button-padding: var(--spacing-xxs);
  --filter-date-picker-icon-stroke: var(--text-color-secondary);
  --filter-date-picker-icon-width: var(--spacing-sm);
  --filter-date-picker-icon-stroke-hover: var(--text-color-primary);
  --filter-date-picker-wrapper-border-color: var(--border-color-primary);
  --filter-date-picker-wrapper-radius: calc(var(--spacing-unit) * 1.5);
  --filter-date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);

  // @tokens End
`;