@redocly/theme 0.18.4-patch.1 → 0.18.5

package/src/components/Catalog/styledVariables.ts

@@ -1,92 +0,0 @@
-import { css } from 'styled-components';
-
-export const catalog = css`
-  /* === Catalog === */
-  /**
-    * @tokens Catalog page
-    */
-  --catalog-page-padding-vertical: var(--spacing-lg);
-  --catalog-page-padding-horizontal: var(--spacing-xl);
-  --catalog-page-padding: var(--catalog-page-padding-vertical) var(--catalog-page-padding-horizontal);
-
-  --mobile-catalog-filter-padding-vertical: var(--spacing-sm);
-  --mobile-catalog-filter-padding-horizontal: var(--spacing-base);
-
-  /**
-    * @tokens Catalog page title
-    */
-  --catalog-title-text-color: var(--text-primary);
-  --catalog-title-font-weight: var(--font-weight-bold);
-  --catalog-title-font-size: var(--font-size-heading-3);
-
-  /**
-    * @tokens Catalog page description
-    */
-  --catalog-description-text-color: var(--text-secondary);
-  --catalog-description-font-weight: var(--font-weight-regular);
-  --catalog-description-font-size: var(--font-size-base);
-  --catalog-description-margin-top: var(--spacing-sm);
-  --catalog-description-margin-bottom: var(--spacing-xl);
-
-  /**
-    * @tokens Catalog page separator
-    */
-  --catalog-separator-color: var(--text-secondary);
-  --catalog-separator-font-size: var(--font-size-base);
-  --catalog-separator-font-weight: var(--font-weight-regular);
-  --catalog-separator-border-color: var(--border-secondary);
-  --catalog-separator-margin: 0 0 var(--spacing-base) 0;
-  --catalog-separator-padding: var(--spacing-xxs) 0 0 0;
-  --catalog-separator-label-margin: 0 var(--spacing-xs);
-  --catalog-separator-count-height: var(--control-height-xs);
-  --catalog-separator-count-padding: 0 var(--spacing-xxs);
-  --catalog-separator-count-border-radius: var(--border-radius-xlg);
-  --catalog-separator-count-border-color: var(--border-primary);
-  --catalog-separator-count-background: var(--bg-overlay);
-
-  /**
-    * @tokens Catalog card
-    */
-  --catalog-card-min-height: 214px;
-  --catalog-card-text-color: var(--text-secondary);
-  --catalog-card-font-size: var(--font-size-base);
-  --catalog-card-font-weight: var(--font-weight-regular);
-  --catalog-card-background-color: var(--bg-raised);
-  --catalog-card-border-color: var(--border-secondary);
-  --catalog-card-border-width: var(--border-width);
-  --catalog-card-border-style: var(--border-style);
-  --catalog-card-hover-border-color: var(--border-primary);
-  --catalog-card-border-radius: var(--border-radius-lg);
-
-  /**
-    * @tokens Catalog card button
-    */
-  --catalog-card-icon-color: var(--text-secondary);
-  --catalog-card-icon-hover-color: var(--text-primary);
-  --catalog-card-button-hover-background: var(--bg-overlay);
-  --catalog-card-button-height: var(--spacing-xl);
-  --catalog-card-button-width: var(--spacing-xl);
-  --catalog-card-button-border-color: var(--border-secondary);
-  --catalog-cards-group-margin: 0 0 var(--spacing-base) 0;
-
-  /**
-    * @tokens Catalog card title
-    */
-  --catalog-card-title-color: var(--text-primary);
-  --catalog-card-title-min-height: calc(var(--spacing-unit) * 18);
-  --catalog-card-title-font-size: var(--font-size-lg);
-  --catalog-card-title-font-weight: var(--font-weight-bold);
-  --catalog-card-title-padding-vertical: var(--spacing-sm);
-  --catalog-card-title-padding-horizontal: var(--spacing-lg);
-
-  /**
-    * @tokens Catalog card description
-    */
-  --catalog-card-description-line-clamp: 3;
-  --catalog-card-description-margin-bottom: var(--spacing-base);
-  --catalog-card-content-background-color: var(--bg-base);
-  --catalog-card-content-border-radius: var(--border-radius-lg);
-  --catalog-card-content-padding: var(--spacing-base);
-  
-  // @tokens End
-`;

package/src/components/CodeBlock/styledVariables.ts

@@ -1,89 +0,0 @@
-import { css } from 'styled-components';
-
-export const code = css`
-  /**
-    * @tokens Code base styles
-    */
-  --code-font-size: 13px; // @presenter FontSize
-  --code-font-family: var(--font-family-monospaced); // @presenter FontFamily
-  --code-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --code-line-height: var(--line-height-xsm); // @presenter LineHeight
-  --code-wrap: pre;
-  --code-word-break: break-word;
-
-  /**
-    * @tokens Inline Code
-    */
-  --inline-code-font-size: var(--code-font-size); // @presenter FontSize
-  --inline-code-font-family: var(--code-font-family); // @presenter FontFamily
-  --inline-code-font-weight: var(--code-font-weight); // @presenter FontWeight
-  --inline-code-line-height: var(--code-line-height); // @presenter LineHeight
-  --inline-code-text-color: var(--text-secondary); // @presenter Color
-  --inline-code-background-color: var(--bg-overlay); // @presenter Color
-  --inline-code-border-color: var(--border-primary); // @presenter Color
-  --inline-code-border-radius: var(--border-radius); // @presenter BorderRadius
-
-  /**
-    * @tokens Code Block
-    */
-  --code-block-font-size: var(--code-font-size); // @presenter FontSize
-  --code-block-font-family: var(--code-font-family); // @presenter FontFamily
-  --code-block-line-height: var(--code-line-height); // @presenter LineHeight
-  --code-block-font-weight: var(--code-font-weight); // @presenter FontWeight
-  --code-block-text-color: var(--text-secondary); // @presenter Color
-  --code-block-background-color: var(--bg-raised); // @presenter Color
-  --code-block-border-color: var(--border-primary); // @presenter Color
-  --code-block-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --code-block-padding: calc(var(--spacing-unit) * 2);
-  --code-block-margin: 0;
-  --code-block-max-height: 50vh;
-  --code-block-word-break: initial;
-
-  /**
-    * @tokens Code Block controls
-    */
-
-  --code-block-controls-font-size: var(--font-size-base); // @presenter FontSize
-  --code-block-controls-font-family: var(--font-family-base); // @presenter FontFamily
-  --code-block-controls-text-color: var(--text-secondary); // @presenter Color
-  --code-block-controls-background-color: var(--bg-overlay); // @presenter Color
-  --code-block-controls-border: 1px solid var(--border-primary); // @presenter Border
-  --code-block-controls-padding: 0 var(--spacing-xs); // @presenter Spacing
-  --code-block-icon-controls-background-color: var(--code-block-controls-background-color);
-  --code-block-text-controls-background-color: var(--code-block-controls-background-color);
-
-  /**
-    * @tokens Code Block tokens
-   */
-  --code-block-tokens-default-color: var(--text-secondary); // @presenter Color
-  --code-block-tokens-comment-color: var(--text-placeholder); // @presenter Color
-  --code-block-tokens-prolog-color: var(--code-block-tokens-comment-color); // @presenter Color
-  --code-block-tokens-doctype-color: var(--code-block-tokens-comment-color); // @presenter Color
-  --code-block-tokens-cdata-color: var(--code-block-tokens-comment-color); // @presenter Color
-  --code-block-tokens-property-color: var(--code-block-tokens-default-color); // @presenter Color
-  --code-block-tokens-tag-color: var(--code-block-tokens-default-color); // @presenter Color
-  --code-block-tokens-number-color: var(--code-block-tokens-default-color); // @presenter Color
-  --code-block-tokens-constant-color: var(--code-block-tokens-default-color); // @presenter Color
-  --code-block-tokens-symbol-color: var(--code-block-tokens-default-color); // @presenter Color
-  --code-block-tokens-boolean-color: var(--color-geekblue-7); // @presenter Color
-  --code-block-tokens-string-color: var(--color-cyan-7); // @presenter Color
-  --code-block-tokens-property-string-color: var(--text-secondary); // @presenter Color
-  --code-block-tokens-selector-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-attr-name-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-char-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-builtin-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-inserted-color: var(--code-block-tokens-string-color); // @presenter Color
-  --code-block-tokens-link-color: var(--color-blue-7); // @presenter Color
-  --code-block-tokens-operator-color: var(--color-gold-7); // @presenter Color
-  --code-block-tokens-entity-color: var(--code-block-tokens-operator-color); // @presenter Color
-  --code-block-tokens-url-color: var(--code-block-tokens-operator-color); // @presenter Color
-  --code-block-tokens-variable-color: var(--code-block-tokens-operator-color); // @presenter Color
-  --code-block-tokens-keyword-color: var(--color-magenta-7); // @presenter Color
-  --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
-  --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
-  --code-block-tokens-regex-color: var(--color-yellow-7); // @presenter Color
-  --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
-  --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
-
-  // @tokens End
-`;

package/src/components/Dropdown/styledVariables.ts

@@ -1,27 +0,0 @@
-import { css } from "styled-components";
-
-export const dropdown = css`
-  /**
-    * @tokens Dropdown
-    * */
-  --dropdown-font-size: var(--font-size-base); // @presenter FontSize
-  --dropdown-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --dropdown-line-height: var(--line-height-base); // @presenter LineHeight
-  --dropdown-text-color: var(--text-secondary); // @presenter Color
-  --dropdown-border-radius: var(--border-radius); // @presenter BorderRadius
-
-  --dropdown-list-min-width: 100px;
-  --dropdown-list-max-width: 300px;
-  --dropdown-list-padding: var(--spacing-xxs); // @presenter Spacing
-  --dropdown-list-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --dropdown-list-background-color: var(--background-color); // @presenter Color
-  --dropdown-list-box-shadow: var(--bg-raised-shadow); // @presenter Shadow
-
-  --dropdown-list-item-horizontal-padding: var(--spacing-base); // @presenter Spacing
-  --dropdown-list-item-vertical-padding: var(--spacing-xs); // @presenter Spacing
-  --dropdown-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
-  --dropdown-list-item-active-background-color: var(--bg-raised); // @presenter Color
-  --dropdown-list-item-separator-color: var(--border-primary); // @presenter Color
-
-  // @tokens End
-`;

package/src/components/Filter/FilterContent.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Button } from '@theme';
-
-import type { ThemeConfig } from '@theme';
-
-import { useTranslate } from '@portal/hooks';
-import { FilterControls } from '@theme/components/Catalog';
-import { Filter } from '@theme/components/Filter';
-import { Sidebar } from '@theme/components/Sidebar';
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { StyledInput } from '@theme/components/Filter/FilterPopover';
-
-interface FilterContentProps {
-  setFilterTerm: (value: string) => void;
-  filters: ResolvedFilter[];
-  filterTerm: string;
-  isMobile: boolean;
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}
-
-export function FilterContent({
-  setFilterTerm,
-  filters,
-  filterTerm,
-  isMobile,
-  filterValuesCasing,
-}: FilterContentProps) {
-  const { translate } = useTranslate();
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    clearAll: 'theme.catalog.filters.clearAll',
-  };
-
-  const hasActiveFilters = filters.some((filter) => {
-    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
-      return filter.selectedOptions.size;
-    } else if (filter.selectedOptions.from && filter.selectedOptions.to) {
-      return true;
-    }
-  });
-
-  const handleClearAll = () => {
-    filters.forEach((filter) => filter.selectOption(''));
-  };
-
-  return (
-    <FilterContentWrapper isMobile={isMobile}>
-      <FilterControls>
-        <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
-          value={filterTerm}
-          onChange={(e) => setFilterTerm(e.target.value)}
-        />
-      </FilterControls>
-      <FilterItems>
-        {filters.map((filter, idx) => (
-          <Filter
-            filter={filter}
-            key={filter.property + '-' + idx}
-            filterValuesCasing={filterValuesCasing}
-          />
-        ))}
-      </FilterItems>
-      {hasActiveFilters && (
-        <Button size="small" onClick={handleClearAll}>
-          {translate(translationKeys.placeholder, 'Clear all filters')}
-        </Button>
-      )}
-    </FilterContentWrapper>
-  );
-}
-
-const FilterContentWrapper = styled(Sidebar)<{ isMobile?: boolean }>`
-  width: var(--sidebar-width);
-  display: none;
-
-  ${Button} {
-    width: var(--filter-content-clear-button-width);
-    margin: var(--filter-content-clear-button-margin);
-  }
-
-  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.medium} {
-    display: block;
-    border-right: 1px solid var(--filter-content-border-color);
-
-    ${FilterControls} {
-      background: var(--filter-controls-background-color);
-    }
-  }
-`;
-
-export const FilterItems = styled.div`
-  padding: var(--filter-content-items-padding);
-`;

package/src/components/Filter/FilterPopover.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Filter, FilterControls } from '@theme';
-
-import type { ThemeConfig } from '@theme';
-
-import { FilterContent, FilterItems } from '@theme/components/Filter/FilterContent';
-import { useTranslate } from '@portal/hooks';
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-
-interface FilterPopoverProps {
-  setIsAddingFilter: (value: boolean) => void;
-  filters: ResolvedFilter[];
-  filterValuesCasing?: NonNullable<ThemeConfig['catalog']>[string]['filterValuesCasing'];
-}
-
-export function FilterPopover({
-  setIsAddingFilter,
-  filters,
-  filterValuesCasing,
-}: FilterPopoverProps) {
-  const [filterTerm, setFilterTerm] = React.useState('');
-  const filteredFilters = filters
-    .map((filter) => {
-      const options = filter.options.filter((option) =>
-        option.value.toLowerCase().includes(filterTerm.toLowerCase()),
-      );
-      return options.length
-        ? {
-            ...filter,
-            filteredOptions: options,
-          }
-        : null;
-    })
-    .filter(Boolean) as ResolvedFilter[];
-
-  const translationKeys = {
-    placeholder: 'theme.catalog.filters.placeholder',
-    done: 'theme.catalog.filters.done',
-  };
-  const { translate } = useTranslate();
-
-  return (
-    <FilterPopoverWrapper>
-      <FilterPopoverHeader>
-        <FilterPopoverHeaderLabel>Add Filter</FilterPopoverHeaderLabel>
-        <FilterPopoverHeaderButton onClick={() => setIsAddingFilter(false)}>
-          {translate(translationKeys.placeholder, 'Done')}
-        </FilterPopoverHeaderButton>
-      </FilterPopoverHeader>
-      <FilterContent
-        setFilterTerm={setFilterTerm}
-        filters={filters}
-        filterTerm={filterTerm}
-        filterValuesCasing={filterValuesCasing}
-        isMobile
-      />
-      <FilterControls>
-        <StyledInput
-          placeholder={translate(translationKeys.placeholder, 'Type to filter...')}
-          value={filterTerm}
-          onChange={(e) => setFilterTerm(e.target.value)}
-        />
-      </FilterControls>
-      <FilterItems>
-        {filteredFilters.map((filter, idx) => (
-          <Filter filter={filter} key={filter.property + '-' + idx} />
-        ))}
-      </FilterItems>
-    </FilterPopoverWrapper>
-  );
-}
-
-const FilterPopoverWrapper = styled.aside<{ isActiveInMobileMode?: boolean }>`
-  position: absolute;
-  top: 0;
-  z-index: var(--z-index-popover);
-  height: 100vh;
-  overflow: auto;
-  transition: height 0.2s ease-in-out;
-  width: 100%;
-  background-color: var(--filter-popover-background-color);
-  display: block;
-
-  ${({ theme }) => theme.mediaQueries.medium} {
-    display: none;
-  }
-`;
-
-const FilterPopoverHeader = styled.div`
-  height: var(--navbar-height);
-  padding: var(--filter-popover-header-padding);
-  display: grid;
-  align-items: center;
-  grid-template-columns: 1fr 1fr 1fr;
-  border-bottom: 1px solid var(--filter-popover-header-border-color);
-  background-color: var(--filter-popover-header-background-color);
-`;
-
-const FilterPopoverHeaderLabel = styled.div`
-  color: var(--filter-popover-header-label-color);
-  justify-self: center;
-  grid-column-start: 2;
-  font-size: var(--filter-popover-header-label-font-size);
-  font-weight: var(--filter-popover-header-label-font-weight);
-`;
-
-const FilterPopoverHeaderButton = styled.div.attrs({
-  'data-cy': 'FilterPopover/DoneButton',
-})`
-  color: var(--filter-popover-header-button-color);
-  justify-self: end;
-  font-size: var(--filter-popover-header-button-font-size);
-  font-weight: var(--filter-popover-header-button-font-weight);
-  height: var(--filter-popover-header-button-height);
-  line-height: var(--filter-popover-header-button-height);
-`;
-
-export const StyledInput = styled.input.attrs({ 'data-cy': 'FilterPopover/Input' })`
-  border: var(--filter-input-border);
-  min-width: var(--filter-input-min-width);
-  width: 100%;
-  outline: none;
-  padding: var(--filter-input-padding);
-  border-radius: var(--filter-input-border-radius);
-  background-color: var(--filter-input-background-color);
-  color: var(--filter-input-color);
-  font-family: var(--filter-input-font-family);
-  font-size: var(--filter-input-font-size);
-  line-height: var(--filter-input-line-height);
-
-  &::placeholder {
-    opacity: var(--filter-input-placeholder-opacity);
-    color: var(--filter-input-placeholder-color);
-  }
-
-  &:hover {
-    color: var(--filter-input-hover-color);
-    border: var(--filter-input-hover-border);
-  }
-
-  &:focus {
-    color: var(--filter-input-focus-color);
-    border: var(--filter-input-focus-border);
-  }
-
-  &:-webkit-autofill {
-    background-color: var(--filter-input-background-color);
-  }
-`;

package/src/components/Filter/FilterTag.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ClearIcon } from '@theme/components/Search/ClearIcon';
-
-interface FilterTagProps {
-  label: string;
-  onClick: () => void;
-}
-
-export function FilterTag({ label, onClick }: FilterTagProps) {
-  return (
-    <TagWrapper onClick={onClick}>
-      <TagLabel>{label}</TagLabel>
-      <ClearIcon />
-    </TagWrapper>
-  );
-}
-
-const TagWrapper = styled.div.attrs({ 'data-cy': 'Filter/FilterTag' })`
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  cursor: pointer;
-  color: var(--filter-tag-color);
-  border-radius: var(--filter-tag-border-radius);
-  border: 1px solid var(--filter-tag-border-color);
-  background-color: var(--filter-tag-background-color);
-  padding: var(--filter-tag-padding);
-  font-size: var(--filter-tag-font-size);
-  font-weight: var(--filter-tag-font-weight);
-  margin: var(--filter-tag-margin);
-`;
-
-const TagLabel = styled.div`
-  margin: var(--filter-tag-label-margin);
-`;

package/src/components/Filter/FilterTags.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
-import { FilterTag } from '@theme/components/Filter/FilterTag';
-
-interface FilterTagsProps {
-  filters: ResolvedFilter[];
-}
-
-export function FilterTags({ filters }: FilterTagsProps) {
-  const selectedFilters: { filter: ResolvedFilter; selectedOption: string }[] = [];
-  filters.forEach((filter: ResolvedFilter & { selectedOptions: any }) => {
-    if (filter.selectedOptions?.size) {
-      for (let selectedOption of filter.selectedOptions) {
-        selectedFilters.push({
-          filter,
-          selectedOption,
-        });
-      }
-    }
-  });
-
-  return (
-    <FilterTagsWrapper>
-      {selectedFilters.map(({ filter, selectedOption }) => (
-        <FilterTag
-          key={`${filter.title}: ${selectedOption}`}
-          onClick={() => filter.toggleOption(selectedOption)}
-          label={`${filter.title}: ${selectedOption}`}
-        />
-      ))}
-    </FilterTagsWrapper>
-  );
-}
-
-const FilterTagsWrapper = styled.div`
-  display: flex;
-`;

package/src/components/Filter/styledVariables.ts

@@ -1,109 +0,0 @@
-import { css } from 'styled-components';
-
-export const filter = css`
-  /* === Filter === */
-  /**
-  * @tokens Filters
-  */
-  --filter-group-padding: var(--spacing-base) 0 0 0;
-
-  --filter-title-font-weight: var(--font-weight-bold);
-  --filter-title-font-size: var(--font-size-base);
-  --filter-title-margin: 0 0 var(--spacing-xxs) 0;
-
-  --filter-option-font-weight: var(--font-weight-regular);
-  --filter-option-font-size: var(--font-size-base);
-  --filter-option-margin: var(--spacing-xs) 0 0 0;
-
-  --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-font-weight: var(--font-weight-regular);
-  --filter-option-label-margin: 0 var(--spacing-xs) 0 0;
-  --filter-option-label-color: var(--text-secondary);
-
-  --filter-option-count-height: 17px;
-  --filter-option-count-color: var(--text-secondary);
-  --filter-option-count-font-size: var(--font-size-sm);
-  --filter-option-count-font-weight: var(--font-weight-regular);
-  --filter-option-count-padding: 0px var(--spacing-xxs);
-  --filter-option-count-border-radius: var(--spacing-sm);
-  --filter-option-count-border: 1px solid var(--border-primary);
-  --filter-option-count-background-color: var(--bg-overlay);
-
-  --filter-content-border-color: var(--border-secondary);
-  --filter-content-items-padding: 0 var(--spacing-lg);
-  --filter-content-clear-button-margin: var(--spacing-base) auto 0 auto;
-  --filter-content-clear-button-width: calc(var(--spacing-unit) * 40);
-  --filter-controls-background-color: var(--bg-base);
-
-  --filter-popover-background-color: var(--bg-base);
-  --filter-popover-header-padding: var(--mobile-catalog-filter-padding-vertical) var(--mobile-catalog-filter-padding-horizontal);
-  --filter-popover-header-border-color: var(--border-secondary);
-  --filter-popover-header-background-color: var(--navbar-background-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-tags-wrapper-padding: var(--spacing-xs) 0 var(--spacing-base) 0;
-  --filter-tag-color: var(--text-primary);
-  --filter-tag-border-radius: var(--spacing-sm);
-  --filter-tag-border-color: var(--border-primary);
-  --filter-tag-background-color: var(--bg-raised);
-  --filter-tag-padding: 0 var(--spacing-xs);
-  --filter-tag-font-size: var(--font-size-sm);
-  --filter-tag-font-weight: var(--font-weight-regular);
-  --filter-tag-margin: 0 var(--spacing-xxs) 0 0;
-  --filter-tag-label-margin: 0 var(--spacing-xxs) 0 0;
-
-  --filter-input-border: 1px solid var(--border-primary);
-  --filter-input-min-width: 200px;
-  --filter-input-padding: var(--input-padding);
-  --filter-input-border-radius: var(--input-border-radius);
-  --filter-input-background-color: var(--input-background-color);
-  --filter-input-color: var(--text-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: 0.6;
-  --filter-input-placeholder-color: var(--text-placeholder);
-  --filter-input-hover-color: var(--text-primary);
-  --filter-input-hover-border: 1px solid var(--border-primary);
-  --filter-input-focus-color: var(--text-primary);
-  --filter-input-focus-border: 1px solid var(--border-primary);
-
-  --filter-add-button-margin: 0 var(--spacing-sm) 0 0;
-  --filter-add-button-padding: 0;
-  --filter-add-button-font-size: var(--font-size-base);
-  --filter-add-button-font-weight: var(--font-weight-regular);
-
-  --filter-select-min-height: var(--control-height-base);
-  --filter-select-color: var(--text-primary);
-  --filter-select-border-color: var(--border-primary);
-  --filter-select-border-radius: calc(var(--spacing-unit) * 1.5);
-  --filter-select-padding: 0;
-  --filter-select-hover-border-color: var(--text-primary);
-  --filter-select-option-margin: 0;
-
-  --filter-date-picker-color: var(--text-primary);
-  --filter-date-picker-margin: 0 0 var(--spacing-xxs) 0;
-  --filter-date-picker-gap: var(--spacing-xs);
-  --filter-date-picker-width: 50px;
-  --filter-date-picker-tile-background: var(--color-blue-2);
-  --filter-date-picker-tile-color: var(--text-primary);
-  --filter-date-picker-tile-hover-background: var(--color-blue-3);
-  --filter-date-picker-tile-hover-color: var(--text-primary);
-  --filter-date-picker-input-width: var(--spacing-md);
-  --filter-date-picker-invalid-input-background: var(--bg-raised);
-  --filter-date-picker-button-padding: var(--spacing-xxs);
-  --filter-date-picker-icon-stroke: var(--text-secondary);
-  --filter-date-picker-icon-width: var(--spacing-sm);
-  --filter-date-picker-hover-icon-stroke: var(--text-primary);
-  --filter-date-picker-wrapper-border-color: var(--border-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
-`;