@redocly/theme 0.18.2 → 0.18.3-patch.1

package/lib/components/Filter/Filter.js

@@ -7,8 +7,9 @@ exports.Filter = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_date_picker_1 = require("react-date-picker");
-const Checkbox_1 = require("../../ui/Checkbox");
 const hooks_1 = require("../../mocks/hooks");
+const icons_1 = require("../../icons");
+const Select_1 = require("../../components/Select");
 function Filter({ filter }) {
     var _a, _b;
     const { translate } = (0, hooks_1.useTranslate)();
@@ -18,20 +19,36 @@ function Filter({ filter }) {
     };
     if (!filter.parentUsed)
         return null;
+    let selectOptions = [];
+    if (filter.type === 'select') {
+        const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
+        selectOptions = [
+            {
+                value: '',
+                component: (react_1.default.createElement(FilterOption, { key: "all", role: "link", onClick: () => filter.selectOption('') },
+                    react_1.default.createElement(FilterOptionLabel, null, translate(translationKeys.selectAll, 'All')),
+                    react_1.default.createElement(FilterOptionCount, null, defaultOptionCount))),
+            },
+        ];
+        selectOptions.push(...filter.filteredOptions.map((option) => ({
+            value: option.value,
+            component: (react_1.default.createElement(FilterOption, { key: option.value, role: "link", onClick: () => filter.selectOption(option.value) },
+                react_1.default.createElement(FilterOptionLabel, null, translate(option.value)),
+                react_1.default.createElement(FilterOptionCount, null, option.count))),
+        })));
+    }
+    let selectedOptionComponent;
+    if (filter.type === 'select') {
+        const selectedOption = (_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value;
+        selectedOptionComponent =
+            ((_b = selectOptions.find((option) => option.value === selectedOption)) === null || _b === void 0 ? void 0 : _b.component) ||
+                selectOptions[0].component;
+    }
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
         react_1.default.createElement(FilterTitle, null,
             translate(filter.titleTranslationKey, filter.title),
-            ' ',
-            ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) ? (react_1.default.createElement("a", { "data-translation-key": translationKeys.clear, onClick: () => filter.selectOption('') }, translate(translationKeys.clear, 'Clear'))) : null),
-        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_b = filter.selectedOptions.values().next()) === null || _b === void 0 ? void 0 : _b.value) || '' },
-            react_1.default.createElement("option", { key: "none", value: "", "data-translation-key": translationKeys.selectAll }, translate(translationKeys.selectAll, 'All')),
-            filter.filteredOptions.map((value) => {
-                return (react_1.default.createElement("option", { key: value.value, value: value.value },
-                    translate(value.value),
-                    " (",
-                    value.count,
-                    ")"));
-            }))) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
+            " "),
+        filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { selected: selectedOptionComponent, options: selectOptions.map((option) => option.component) })) : filter.type === 'date-range' ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(DatePickerWrapper, null,
                 react_1.default.createElement("span", null, "From:"),
                 react_1.default.createElement(react_date_picker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : null, minDetail: "decade", maxDate: new Date(), onChange: (from) => {
@@ -47,84 +64,87 @@ function Filter({ filter }) {
                         filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { to: formatDateWithNoTimeZone(to) }));
                     } })))) : (filter.filteredOptions.map((value) => {
             const id = 'filter--' + filter.property + '--' + slug(value.value);
-            return (react_1.default.createElement(FilterValue, { key: id, role: "link" },
-                react_1.default.createElement(Checkbox_1.Checkbox, { type: "checkbox", id: id, checked: filter.selectedOptions.has(value.value), onChange: () => filter.toggleOption(value.value) }),
-                react_1.default.createElement("label", { htmlFor: id },
-                    translate(value.value),
-                    " (",
-                    value.count,
-                    ")")));
+            return (react_1.default.createElement(FilterOption, { key: id, role: "link", onClick: () => filter.toggleOption(value.value) },
+                react_1.default.createElement(icons_1.CheckboxIcon, { checked: filter.selectedOptions.has(value.value) }),
+                react_1.default.createElement(FilterOptionLabel, null, translate(value.value)),
+                react_1.default.createElement(FilterOptionCount, null, value.count)));
         }))));
 }
 exports.Filter = Filter;
 const FilterGroup = styled_components_1.default.div `
-  padding: 16px 0;
-  border-bottom: 1px solid var(--border-color);
-
-  &:last-of-type {
-    border-bottom: none;
-  }
+  padding: var(--filter-group-padding);
+`;
+const FilterOptionLabel = styled_components_1.default.label `
+  cursor: pointer;
+  font-size: var(--filter-option-label-font-size);
+  font-weight: var(--filter-option-label-font-weight);
+  margin: var(--filter-option-label-margin);
+  color: var(--filter-option-label-color);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const FilterOptionCount = styled_components_1.default.label `
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: var(--filter-option-count-height);
+  color: var(--filter-option-count-color);
+  text-align: center;
+  font-size: var(--filter-option-count-font-size);
+  font-weight: var(--filter-option-count-font-weight);
+  padding: var(--filter-option-count-padding);
+  border-radius: var(--filter-option-count-border-radius);
+  border: 1px solid var(--filter-option-count-border-color);
+  background-color: var(--filter-option-count-background-color);
 `;
 const FilterTitle = styled_components_1.default.h4 `
-  font-size: 18px;
-  font-weight: var(--font-weight-bold);
-  margin: 0;
-  margin-bottom: 16px;
-
-  > a {
-    font-size: 14px;
-    cursor: pointer;
-  }
+  font-weight: var(--filter-title-font-weight);
+  font-size: var(--filter-title-font-size);
+  margin: var(--filter-title-margin);
 `;
-const FilterValue = styled_components_1.default.label `
-  display: block;
+const FilterOption = styled_components_1.default.label.attrs({ 'data-cy': 'Filter/FilterOption' }) `
+  display: flex;
+  align-items: center;
   cursor: pointer;
-  font-size: 16px;
-  margin: 8px 0;
+  font-weight: var(--filter-option-font-weight);
+  font-size: var(--filter-option-font-size);
+  margin: var(--filter-option-margin);
 
   input {
     cursor: pointer;
   }
 `;
-const StyledSelect = styled_components_1.default.select `
-  border: 1px solid rgba(0, 0, 0, 0.23);
-
-  padding: var(--input-padding);
-  border-radius: var(--input-border-radius);
-  background-color: var(--input-background-color);
-  color: var(--text-color);
-  font-family: var(--input-font-family);
-  font-size: var(--input-font-size);
-  line-height: var(--input-line-height);
+const StyledSelect = (0, styled_components_1.default)(Select_1.Select) `
+  min-height: var(--filter-select-min-height);
+  color: var(--filter-select-color);
+  border: 1px solid var(--filter-select-border-color);
+  border-radius: var(--filter-select-border-radius);
+  padding: var(--filter-select-padding);
 
-  min-width: 200px;
-  outline-color: var(--color-primary-500);
-  transition: outline 0.25s ease;
-  display: inline-block;
-  text-align: left;
-  appearance: none;
+  :hover {
+    border-color: var(--filter-select-hover-border-color);
+  }
 
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right 10px center;
-  background-size: 1em;
-  width: 100%;
-  padding-right: 25px;
+  ${FilterOption} {
+    margin: var(--filter-select-option-margin);
+  }
 `;
 // TODO: import from portal
 function slug(str) {
     return str.replace(/\s/g, '-').toLowerCase();
 }
 const DatePickerWrapper = styled_components_1.default.div `
+  color: var(--filter-date-picker-color);
   display: flex;
   flex-direction: row;
-  margin-bottom: 5px;
+  margin: var(--filter-date-picker-margin);
 
   align-items: center;
-  gap: 10px;
+  gap: var(--filter-date-picker-gap);
 
   > span {
-    width: 50px;
+    width: var(--filter-date-picker-width);
   }
 
   .react-date-picker {
@@ -132,35 +152,41 @@ const DatePickerWrapper = styled_components_1.default.div `
   }
 
   .react-calendar__tile--now {
-    background: #cbf7f1;
-    color: black;
+    background: var(--filter-date-picker-tile-background);
+    color: var(--filter-date-picker-tile-color);
 
     &:enabled:hover,
     &:enabled:focus {
-      background: #b1efe7;
-      color: black;
+      background: var(--filter-date-picker-tile-hover-background);
+      color: var(--filter-date-picker-tile-hover-color);
     }
   }
 
-  .react-date-picker__inputGroup__input:invalid {
-    background: rgb(255 125 0 / 10%);
+  .react-date-picker__inputGroup__input {
+    width: var(--filter-date-picker-input-width);
+
+    &:invalid {
+      background: var(--filter-date-picker-invalid-input-background);
+    }
   }
 
   .react-date-picker__button {
-    padding: 4px 4px;
+    padding: var(--filter-date-picker-button-padding);
+
     svg {
-      width: 12px;
+      stroke: var(--filter-date-picker-icon-stroke);
+      width: var(--filter-date-picker-icon-width);
     }
-  }
 
-  .react-date-picker__wrapper {
-    border: 1px solid rgba(0, 0, 0, 0.23);
-    border-radius: var(--border-radius);
-    padding: var(--input-padding);
+    &:enabled:hover .react-date-picker__button__icon {
+      stroke: var(--filter-date-picker-hover-icon-stroke);
+    }
   }
 
-  .react-date-picker__inputGroup__input {
-    width: 20px;
+  .react-date-picker__wrapper {
+    border: 1px solid var(--filter-date-picker-wrapper-border-color);
+    border-radius: var(--filter-date-picker-wrapper-radius);
+    padding: var(--filter-date-picker-wrapper-padding);
   }
 `;
 function padZero(num) {

package/lib/components/Filter/FilterContent.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterContentProps {
+    setFilterTerm: (value: string) => void;
+    filters: ResolvedFilter[];
+    filterTerm: string;
+    isMobile: boolean;
+}
+export declare function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }: FilterContentProps): JSX.Element;
+export declare const FilterItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/lib/components/Filter/FilterContent.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterItems = exports.FilterContent = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _theme_1 = require("../../index.js");
+const hooks_1 = require("../../mocks/hooks");
+const Catalog_1 = require("../../components/Catalog");
+const index_1 = require("../../components/Filter/index");
+const FilterPopover_1 = require("../../components/Filter/FilterPopover");
+function FilterContent({ setFilterTerm, filters, filterTerm, isMobile, }) {
+    const { translate } = (0, hooks_1.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 (react_1.default.createElement(FilterContentWrapper, { isMobile: isMobile },
+        react_1.default.createElement(Catalog_1.FilterControls, null,
+            react_1.default.createElement(FilterPopover_1.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+        react_1.default.createElement(exports.FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(index_1.Filter, { filter: filter, key: filter.property + '-' + idx })))),
+        hasActiveFilters && (react_1.default.createElement(_theme_1.Button, { size: "small", onClick: handleClearAll }, translate(translationKeys.placeholder, 'Clear all filters')))));
+}
+exports.FilterContent = FilterContent;
+const FilterContentWrapper = styled_components_1.default.div `
+  width: var(--sidebar-width);
+  display: none;
+
+  ${_theme_1.Button} {
+    width: var(--filter-content-clear-button-width);
+    margin: var(--filter-content-clear-button-margin);
+  }
+
+  ${({ theme, isMobile }) => !isMobile && theme.mediaQueries.small} {
+    display: block;
+    border-right: 1px solid var(--filter-content-border-color);
+
+    ${Catalog_1.FilterControls} {
+      background: var(--filter-controls-background-color);
+    }
+  }
+`;
+exports.FilterItems = styled_components_1.default.div `
+  padding: var(--filter-content-items-padding);
+`;
+//# sourceMappingURL=FilterContent.js.map

package/lib/components/Filter/FilterPopover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterPopoverProps {
+    setIsAddingFilter: (value: boolean) => void;
+    filters: ResolvedFilter[];
+}
+export declare function FilterPopover({ setIsAddingFilter, filters }: FilterPopoverProps): JSX.Element;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
+    'data-cy': string;
+}, "data-cy">;
+export {};

package/lib/components/Filter/FilterPopover.js

@@ -0,0 +1,109 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInput = exports.FilterPopover = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const _theme_1 = require("../../index.js");
+const FilterContent_1 = require("../../components/Filter/FilterContent");
+const hooks_1 = require("../../mocks/hooks");
+function FilterPopover({ setIsAddingFilter, filters }) {
+    const [filterTerm, setFilterTerm] = react_1.default.useState('');
+    const filteredFilters = filters
+        .map((filter) => {
+        const options = filter.options.filter((option) => option.value.includes(filterTerm));
+        return options.length
+            ? Object.assign(Object.assign({}, filter), { filteredOptions: options }) : null;
+    })
+        .filter(Boolean);
+    const translationKeys = {
+        placeholder: 'theme.catalog.filters.placeholder',
+        done: 'theme.catalog.filters.done',
+    };
+    const { translate } = (0, hooks_1.useTranslate)();
+    return (react_1.default.createElement(FilterPopoverWrapper, null,
+        react_1.default.createElement(FilterPopoverHeader, null,
+            react_1.default.createElement(FilterPopoverHeaderLabel, null, "Add Filter"),
+            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: () => setIsAddingFilter(false) }, translate(translationKeys.placeholder, 'Done'))),
+        react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, isMobile: true }),
+        react_1.default.createElement(_theme_1.FilterControls, null,
+            react_1.default.createElement(exports.StyledInput, { placeholder: translate(translationKeys.placeholder, 'Type to filter...'), value: filterTerm, onChange: (e) => setFilterTerm(e.target.value) })),
+        react_1.default.createElement(FilterContent_1.FilterItems, null, filteredFilters.map((filter, idx) => (react_1.default.createElement(_theme_1.Filter, { filter: filter, key: filter.property + '-' + idx }))))));
+}
+exports.FilterPopover = FilterPopover;
+const FilterPopoverWrapper = styled_components_1.default.aside `
+  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.small} {
+    display: none;
+  }
+`;
+const FilterPopoverHeader = styled_components_1.default.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_components_1.default.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_components_1.default.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);
+`;
+exports.StyledInput = styled_components_1.default.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);
+  }
+`;
+//# sourceMappingURL=FilterPopover.js.map

package/lib/components/Filter/FilterTag.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface FilterTagProps {
+    label: string;
+    onClick: () => void;
+}
+export declare function FilterTag({ label, onClick }: FilterTagProps): JSX.Element;
+export {};

package/lib/components/Filter/FilterTag.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTag = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearIcon_1 = require("../../components/Search/ClearIcon");
+function FilterTag({ label, onClick }) {
+    return (react_1.default.createElement(TagWrapper, { onClick: onClick },
+        react_1.default.createElement(TagLabel, null, label),
+        react_1.default.createElement(ClearIcon_1.ClearIcon, null)));
+}
+exports.FilterTag = FilterTag;
+const TagWrapper = styled_components_1.default.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_components_1.default.div `
+  margin: var(--filter-tag-label-margin);
+`;
+//# sourceMappingURL=FilterTag.js.map

package/lib/components/Filter/FilterTags.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedFilter } from '../../types/portal/src/shared/types/catalog';
+interface FilterTagsProps {
+    filters: ResolvedFilter[];
+}
+export declare function FilterTags({ filters }: FilterTagsProps): JSX.Element;
+export {};

package/lib/components/Filter/FilterTags.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterTags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const FilterTag_1 = require("../../components/Filter/FilterTag");
+function FilterTags({ filters }) {
+    const selectedFilters = [];
+    filters.forEach((filter) => {
+        var _a;
+        if ((_a = filter.selectedOptions) === null || _a === void 0 ? void 0 : _a.size) {
+            for (let selectedOption of filter.selectedOptions) {
+                selectedFilters.push({
+                    filter,
+                    selectedOption,
+                });
+            }
+        }
+    });
+    return (react_1.default.createElement(FilterTagsWrapper, null, selectedFilters.map(({ filter, selectedOption }) => (react_1.default.createElement(FilterTag_1.FilterTag, { key: `${filter.title}: ${selectedOption}`, onClick: () => filter.toggleOption(selectedOption), label: `${filter.title}: ${selectedOption}` })))));
+}
+exports.FilterTags = FilterTags;
+const FilterTagsWrapper = styled_components_1.default.div `
+  display: flex;
+`;
+//# sourceMappingURL=FilterTags.js.map

package/lib/components/Filter/index.d.ts

@@ -1 +1,3 @@
 export * from '../../components/Filter/Filter';
+export * from '../../components/Filter/FilterContent';
+export * from '../../components/Filter/styledVariables';

package/lib/components/Filter/index.js

@@ -15,4 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../components/Filter/Filter"), exports);
+__exportStar(require("../../components/Filter/FilterContent"), exports);
+__exportStar(require("../../components/Filter/styledVariables"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Filter/styledVariables.d.ts

@@ -0,0 +1 @@
+export declare const filter: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/Filter/styledVariables.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filter = void 0;
+const styled_components_1 = require("styled-components");
+exports.filter = (0, styled_components_1.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: 14px;
+  --filter-option-count-color: var(--text-description);
+  --filter-option-count-font-size: var(--spacing-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-color: 1px solid var(--border-secondary);
+  --filter-option-count-background-color: var(--bg-raised);
+
+  --filter-content-border-color: var(--border-secondary);
+  --filter-content-items-padding: 0 var(--mobile-catalog-filter-padding-horizontal);
+  --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) var(--spacing-base);
+  --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
+`;
+//# sourceMappingURL=styledVariables.js.map