@alfalab/core-components 48.21.0-beta.4 → 48.21.0

package/filter-tag/moderncssm/components/base-filter-tag/inverted.module.css

@@ -0,0 +1,220 @@
+/* */
+
+:root {
+    /* border */
+    --tag-border-width: 1px;
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+    --tag-inverted-border-color: var(--color-light-neutral-translucent-500-inverted);
+    --tag-inverted-filled-border-color: transparent;
+    --tag-inverted-border-color-hover: var(--color-light-neutral-translucent-500-inverted);
+    --tag-inverted-border-color-active: var(--color-light-neutral-translucent-500-inverted);
+    --tag-inverted-border-color-checked: var(--color-light-accent-secondary-inverted);
+    --tag-inverted-border-color-disabled: var(--color-light-neutral-translucent-500-inverted);
+
+    /* background-color outlined */
+    --tag-inverted-outlined-background-color: transparent;
+    --tag-inverted-outlined-background-color-hover: var(
+        --color-light-transparent-default-inverted-hover
+    );
+    --tag-inverted-outlined-background-color-disabled: transparent;
+    --tag-inverted-outlined-background-color-active: var(
+        --color-light-transparent-default-inverted-press
+    );
+
+    /* background-color filled */
+
+    /* background-color checked */
+    --tag-inverted-background-color-checked: var(--color-light-accent-secondary-inverted);
+    --tag-inverted-background-color-checked-hover: var(
+        --color-light-accent-secondary-inverted-hover
+    );
+    --tag-inverted-background-color-checked-active: var(
+        --color-light-accent-secondary-inverted-press
+    );
+    --tag-inverted-background-color-checked-disabled: var(
+        --color-light-neutral-translucent-100-inverted
+    );
+
+    /* text color */
+    --tag-inverted-text-color: var(--color-light-text-primary-inverted);
+    --tag-inverted-text-color-checked: var(--color-light-text-primary);
+    --tag-inverted-text-color-disabled: var(--color-light-text-tertiary-inverted);
+    --tag-inverted-text-color-checked-disabled: var(--color-light-text-tertiary-inverted);
+
+    /* mobile */
+
+    /* mobile inverted */
+}
+
+:root {
+    /* chevron */
+    --filter-tag-chevron-color: var(--color-light-neutral-translucent-1300);
+
+    /* chevron inverted */
+    --filter-tag-inverted-chevron-color: var(--color-light-neutral-translucent-1300-inverted);
+    --filter-tag-inverted-chevron-disabled-color: var(--color-light-neutral-500-inverted);
+
+    /* separator */
+
+    /* separator inverted */
+    --filter-tag-inverted-separator-background-color-hover: transparent;
+    --filter-tag-inverted-separator-background-color-active: transparent;
+
+    /* clear */
+
+    /* clear inverted */
+    --filter-tag-inverted-clear-color: var(--color-light-neutral-translucent-700);
+    --filter-tag-inverted-clear-color-hover: var(--color-light-neutral-translucent-700-hover);
+    --filter-tag-inverted-clear-color-active: var(--color-light-neutral-translucent-700-press);
+    --filter-tag-inverted-clear-before-background-color: var(--color-light-neutral-translucent-500);
+}
+
+.component.disabled {
+        background-color: var(--tag-inverted-outlined-background-color-disabled);
+    }
+
+.component.checked:not(.disabled) {
+            background-color: var(--tag-inverted-background-color-checked);
+        }
+
+@media (hover: hover) {
+            .component.checked:not(.disabled):hover {
+                background-color: var(--tag-inverted-background-color-checked-hover);
+            }
+        }
+
+.component.checked:not(.disabled):active {
+            background-color: var(--tag-inverted-background-color-checked-active);
+        }
+
+.chevron {
+    color: var(--filter-tag-inverted-chevron-color);
+}
+
+.valueButton {
+    color: var(--tag-inverted-text-color);
+    background-color: var(--tag-inverted-outlined-background-color);
+    border: var(--tag-border-width) solid var(--tag-inverted-border-color)
+}
+
+.valueButton:disabled > .chevron {
+            color: var(--filter-tag-inverted-chevron-disabled-color);
+        }
+
+.valueButton.outlined {
+        color: var(--tag-inverted-text-color);
+        border-color: var(--tag-inverted-border-color);
+        background-color: var(--tag-inverted-outlined-background-color)
+    }
+
+.valueButton.outlined:disabled {
+            border-color: var(--tag-inverted-border-color-disabled);
+            color: var(--tag-inverted-text-color-disabled);
+            background-color: var(--tag-inverted-outlined-background-color-disabled);
+        }
+
+@media (hover: hover) {
+            .valueButton.outlined:not(:disabled):hover {
+                border-color: var(--tag-inverted-border-color-hover);
+                background-color: var(--tag-inverted-outlined-background-color-hover);
+            }
+        }
+
+.valueButton.outlined:not(:disabled):active {
+            border-color: var(--tag-inverted-border-color-active);
+            background-color: var(--tag-inverted-outlined-background-color-active);
+        }
+
+.valueButton.filled {
+        color: var(--tag-inverted-text-color);
+        border-color: var(--tag-inverted-filled-border-color)
+    }
+
+.valueButton.filled:disabled {
+            color: var(--tag-inverted-text-color-disabled);
+        }
+
+.valueButton.checked {
+        color: var(--tag-inverted-text-color-checked);
+        background-color: var(--tag-inverted-background-color-checked);
+        border-color: var(--tag-inverted-border-color-checked)
+    }
+
+.valueButton.checked > .chevron {
+            color: var(--filter-tag-chevron-color);
+        }
+
+@media (hover: hover) {
+            .valueButton.checked:not(:disabled):hover {
+                background-color: var(--tag-inverted-background-color-checked-hover);
+            }
+        }
+
+.valueButton.checked:not(:disabled):active {
+            background-color: var(--tag-inverted-background-color-checked-active);
+        }
+
+@media (hover: hover) {
+            .valueButton.checked:not(:disabled):hover + .clear:before {
+                background-color: var(--filter-tag-inverted-separator-background-color-hover);
+            }
+        }
+
+.valueButton.checked:not(:disabled):active + .clear:before {
+            background-color: var(--filter-tag-inverted-separator-background-color-active);
+        }
+
+.valueButton.checked:disabled {
+            color: var(--tag-inverted-text-color-checked-disabled);
+            background-color: var(--tag-inverted-background-color-checked-disabled)
+        }
+
+.valueButton.checked:disabled > .chevron {
+                color: var(--filter-tag-inverted-chevron-disabled-color);
+            }
+
+.clear {
+    color: var(--filter-tag-inverted-clear-color);
+    background-color: var(--tag-inverted-background-color-checked)
+}
+
+.clear:before {
+        background-color: var(--filter-tag-inverted-clear-before-background-color);
+    }
+
+@media (hover: hover) {
+        .clear:hover:before {
+            background-color: var(--filter-tag-inverted-separator-background-color-hover);
+        }
+    }
+
+.clear:active:before {
+        background-color: var(--filter-tag-inverted-separator-background-color-active);
+    }
+
+@media (hover: hover) {
+        .clear:hover {
+            color: var(--filter-tag-inverted-clear-color-hover);
+            background-color: var(--tag-inverted-background-color-checked-hover);
+        }
+    }
+
+.clear:active {
+        color: var(--filter-tag-inverted-clear-color-active);
+        background-color: var(--tag-inverted-background-color-checked-active);
+    }

package/filter-tag/moderncssm/desktop/Component.desktop.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFilterTagProps } from "../components/base-filter-tag/index";
-type FilterTagDesktopProps = Omit<BaseFilterTagProps, 'styles'>;
+import { PrivateProps } from "../types/base-filter-tag-private-props";
+import { BaseFilterTagProps } from "../types/base-filter-tag-props";
+type FilterTagDesktopProps = Omit<BaseFilterTagProps, keyof PrivateProps>;
 declare const FilterTagDesktop: React.ForwardRefExoticComponent<FilterTagDesktopProps & React.RefAttributes<HTMLDivElement>>;
 export { FilterTagDesktopProps, FilterTagDesktop };

package/filter-tag/moderncssm/desktop/Component.desktop.js

@@ -1,14 +1,23 @@
 import React, { forwardRef } from 'react';
 import { BaseFilterTag } from '../components/base-filter-tag/Component.js';
+import defaultColors from './default.desktop.module.css';
 import styles from './desktop.module.css';
+import invertedColors from './inverted.desktop.module.css';
 import 'classnames';
 import '@alfalab/hooks';
 import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import '../helpers/is-keyboard-event.js';
+import '../components/base-filter-tag/default.module.css';
 import '../components/base-filter-tag/index.module.css';
+import '../components/base-filter-tag/inverted.module.css';
 
-const FilterTagDesktop = forwardRef((restProps, ref) => React.createElement(BaseFilterTag, { ...restProps, ref: ref, styles: styles }));
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+const FilterTagDesktop = forwardRef((restProps, ref) => (React.createElement(BaseFilterTag, { ...restProps, ref: ref, styles: styles, colorStylesMap: colorStyles })));
 
 export { FilterTagDesktop };

package/filter-tag/moderncssm/desktop/default.desktop.module.css

@@ -0,0 +1,50 @@
+/* */
+:root {
+    /* border */
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+    --tag-filled-background-color: var(--color-light-neutral-translucent-300);
+    --tag-filled-background-color-hover: var(--color-light-neutral-translucent-300-hover);
+    --tag-filled-background-color-active: var(--color-light-neutral-translucent-300-press);
+    --tag-filled-background-color-disabled: var(--color-light-neutral-translucent-100);
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+}
+.valueButton.filled {
+        background-color: var(--tag-filled-background-color)
+    }
+.valueButton.filled:disabled {
+            background-color: var(--tag-filled-background-color-disabled);
+        }
+@media (hover: hover) {
+            .valueButton.filled:not(:disabled):hover {
+                background-color: var(--tag-filled-background-color-hover);
+            }
+        }
+.valueButton.filled:not(:disabled):active {
+            background-color: var(--tag-filled-background-color-active);
+        }

package/filter-tag/moderncssm/desktop/desktop.module.css

@@ -12,10 +12,6 @@
     /* background-color outlined */
 
     /* background-color filled */
-    --tag-filled-background-color: var(--color-light-neutral-translucent-300);
-    --tag-filled-background-color-hover: var(--color-light-neutral-translucent-300-hover);
-    --tag-filled-background-color-active: var(--color-light-neutral-translucent-300-press);
-    --tag-filled-background-color-disabled: var(--color-light-neutral-translucent-100);
 
     /* background-color checked */
 
@@ -55,20 +51,6 @@
 .valueButton.rectangular.size-48 {
             border-radius: var(--tag-rectangular-s-border-radius);
         }
-.valueButton.filled {
-        background-color: var(--tag-filled-background-color)
-    }
-.valueButton.filled:disabled {
-            background-color: var(--tag-filled-background-color-disabled);
-        }
-@media (hover: hover) {
-            .valueButton.filled:not(:disabled):hover {
-                background-color: var(--tag-filled-background-color-hover);
-            }
-        }
-.valueButton.filled:not(:disabled):active {
-            background-color: var(--tag-filled-background-color-active);
-        }
 .valueButton.checked.rectangular.size-32 {
                 border-radius: var(--tag-rectangular-xxs-border-radius) 0 0
                     var(--tag-rectangular-xxs-border-radius);

package/filter-tag/moderncssm/desktop/index.js

@@ -7,5 +7,10 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import '../helpers/is-keyboard-event.js';
+import '../components/base-filter-tag/default.module.css';
 import '../components/base-filter-tag/index.module.css';
+import '../components/base-filter-tag/inverted.module.css';
+import './default.desktop.module.css';
 import './desktop.module.css';
+import './inverted.desktop.module.css';

package/filter-tag/moderncssm/desktop/inverted.desktop.module.css

@@ -0,0 +1,56 @@
+/* */
+:root {
+    /* border */
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+    --tag-inverted-filled-background-color: var(--color-light-neutral-translucent-300-inverted);
+    --tag-inverted-filled-background-color-hover: var(
+        --color-light-neutral-translucent-300-inverted-hover
+    );
+    --tag-inverted-filled-background-color-disabled: var(
+        --color-light-neutral-translucent-100-inverted
+    );
+    --tag-inverted-filled-background-color-active: var(
+        --color-light-neutral-translucent-300-inverted-press
+    );
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+}
+.valueButton.filled {
+        background-color: var(--tag-inverted-filled-background-color)
+    }
+.valueButton.filled:disabled {
+            background-color: var(--tag-inverted-filled-background-color-disabled);
+        }
+@media (hover: hover) {
+            .valueButton.filled:not(:disabled):hover {
+                background-color: var(--tag-inverted-filled-background-color-hover);
+            }
+        }
+.valueButton.filled:not(:disabled):active {
+            background-color: var(--tag-inverted-filled-background-color-active);
+        }

package/filter-tag/moderncssm/helpers/is-keyboard-event.d.ts

@@ -0,0 +1,3 @@
+import { KeyboardEvent, MouseEvent } from 'react';
+declare const isKeyBoardEvent: (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>) => event is KeyboardEvent<HTMLDivElement>;
+export { isKeyBoardEvent };

package/filter-tag/moderncssm/helpers/is-keyboard-event.js

@@ -0,0 +1,3 @@
+const isKeyBoardEvent = (event) => event.key !== undefined;
+
+export { isKeyBoardEvent };

package/filter-tag/moderncssm/index.js

@@ -9,7 +9,14 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import './helpers/is-keyboard-event.js';
+import './components/base-filter-tag/default.module.css';
 import './components/base-filter-tag/index.module.css';
+import './components/base-filter-tag/inverted.module.css';
+import './desktop/default.desktop.module.css';
 import './desktop/desktop.module.css';
+import './desktop/inverted.desktop.module.css';
 import './mobile/Component.mobile.js';
+import './mobile/default.mobile.module.css';
+import './mobile/inverted.mobile.module.css';
 import './mobile/mobile.module.css';

package/filter-tag/moderncssm/mobile/Component.mobile.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import React from 'react';
-import { BaseFilterTagProps } from "../components/base-filter-tag/index";
-type FilterTagMobileProps = Omit<BaseFilterTagProps, 'styles'>;
+import { PrivateProps } from "../types/base-filter-tag-private-props";
+import { BaseFilterTagProps } from "../types/base-filter-tag-props";
+type FilterTagMobileProps = Omit<BaseFilterTagProps, keyof PrivateProps>;
 declare const FilterTagMobile: React.ForwardRefExoticComponent<FilterTagMobileProps & React.RefAttributes<HTMLDivElement>>;
 export { FilterTagMobileProps, FilterTagMobile };

package/filter-tag/moderncssm/mobile/Component.mobile.js

@@ -1,5 +1,7 @@
 import React, { forwardRef } from 'react';
 import { BaseFilterTag } from '../components/base-filter-tag/Component.js';
+import defaultColors from './default.mobile.module.css';
+import invertedColors from './inverted.mobile.module.css';
 import styles from './mobile.module.css';
 import 'classnames';
 import '@alfalab/hooks';
@@ -7,8 +9,15 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import '../helpers/is-keyboard-event.js';
+import '../components/base-filter-tag/default.module.css';
 import '../components/base-filter-tag/index.module.css';
+import '../components/base-filter-tag/inverted.module.css';
 
-const FilterTagMobile = forwardRef((restProps, ref) => React.createElement(BaseFilterTag, { ...restProps, ref: ref, styles: styles }));
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+const FilterTagMobile = forwardRef((restProps, ref) => (React.createElement(BaseFilterTag, { ...restProps, ref: ref, styles: styles, colorStylesMap: colorStyles })));
 
 export { FilterTagMobile };

package/filter-tag/moderncssm/mobile/default.mobile.module.css

@@ -0,0 +1,50 @@
+/* */
+:root {
+    /* border */
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+    --tag-filled-mobile-background-color: var(--color-light-neutral-translucent-100);
+    --tag-filled-mobile-background-color-hover: var(--color-light-neutral-translucent-100);
+    --tag-filled-mobile-background-color-active: var(--color-light-neutral-translucent-100-press);
+    --tag-filled-mobile-background-color-disabled: var(--color-light-neutral-translucent-100);
+
+    /* mobile inverted */
+}
+.valueButton.filled {
+        background-color: var(--tag-filled-mobile-background-color)
+    }
+.valueButton.filled:disabled {
+            background-color: var(--tag-filled-mobile-background-color-disabled);
+        }
+@media (hover: hover) {
+            .valueButton.filled:not(:disabled):hover {
+                background-color: var(--tag-filled-mobile-background-color-hover);
+            }
+        }
+.valueButton.filled:not(:disabled):active {
+            background-color: var(--tag-filled-mobile-background-color-active);
+        }

package/filter-tag/moderncssm/mobile/index.js

@@ -7,5 +7,10 @@ import '@alfalab/icons-glyph/ChevronDownCompactSIcon';
 import '@alfalab/icons-glyph/ChevronDownMIcon';
 import '@alfalab/icons-glyph/CrossCircleMIcon';
 import '@alfalab/icons-glyph/CrossCircleSIcon';
+import '../helpers/is-keyboard-event.js';
+import '../components/base-filter-tag/default.module.css';
 import '../components/base-filter-tag/index.module.css';
+import '../components/base-filter-tag/inverted.module.css';
+import './default.mobile.module.css';
+import './inverted.mobile.module.css';
 import './mobile.module.css';

package/filter-tag/moderncssm/mobile/inverted.mobile.module.css

@@ -0,0 +1,58 @@
+/* */
+:root {
+    /* border */
+
+    /* rectangular border-radius */
+
+    /* rounded border-radius */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* inverted */
+
+    /* border */
+
+    /* background-color outlined */
+
+    /* background-color filled */
+
+    /* background-color checked */
+
+    /* text color */
+
+    /* mobile */
+
+    /* mobile inverted */
+    --tag-inverted-filled-mobile-background-color: var(
+        --color-light-neutral-translucent-100-inverted
+    );
+    --tag-inverted-filled-mobile-background-color-hover: var(
+        --color-light-neutral-translucent-100-inverted
+    );
+    --tag-inverted-filled-mobile-background-color-active: var(
+        --color-light-neutral-translucent-100-inverted-press
+    );
+    --tag-inverted-filled-mobile-background-color-disabled: var(
+        --color-light-neutral-translucent-100-inverted
+    );
+}
+.valueButton.filled {
+        background-color: var(--tag-inverted-filled-mobile-background-color)
+    }
+.valueButton.filled:disabled {
+            background-color: var(--tag-inverted-filled-mobile-background-color-disabled);
+        }
+@media (hover: hover) {
+            .valueButton.filled:not(:disabled):hover {
+                background-color: var(--tag-inverted-filled-mobile-background-color-hover);
+            }
+        }
+.valueButton.filled:not(:disabled):active {
+            background-color: var(--tag-inverted-filled-mobile-background-color-active);
+        }

package/filter-tag/moderncssm/mobile/mobile.module.css

@@ -30,10 +30,6 @@
     --tag-rectangular-mobile-xxs-border-radius: var(--border-radius-8);
     --tag-rectangular-mobile-xs-border-radius: var(--border-radius-12);
     --tag-rectangular-mobile-s-border-radius: var(--border-radius-12);
-    --tag-filled-mobile-background-color: var(--color-light-neutral-translucent-100);
-    --tag-filled-mobile-background-color-hover: var(--color-light-neutral-translucent-100);
-    --tag-filled-mobile-background-color-active: var(--color-light-neutral-translucent-100-press);
-    --tag-filled-mobile-background-color-disabled: var(--color-light-neutral-translucent-100);
 
     /* mobile inverted */
 }
@@ -55,20 +51,6 @@
 .valueButton.rectangular.size-48 {
             border-radius: var(--tag-rectangular-mobile-s-border-radius);
         }
-.valueButton.filled {
-        background-color: var(--tag-filled-mobile-background-color)
-    }
-.valueButton.filled:disabled {
-            background-color: var(--tag-filled-mobile-background-color-disabled);
-        }
-@media (hover: hover) {
-            .valueButton.filled:not(:disabled):hover {
-                background-color: var(--tag-filled-mobile-background-color-hover);
-            }
-        }
-.valueButton.filled:not(:disabled):active {
-            background-color: var(--tag-filled-mobile-background-color-active);
-        }
 .valueButton.checked.rectangular.size-32 {
                 border-radius: var(--tag-rectangular-mobile-xxs-border-radius) 0 0
                     var(--tag-rectangular-mobile-xxs-border-radius);

package/filter-tag/moderncssm/types/base-filter-tag-private-props.d.ts

@@ -0,0 +1,20 @@
+type PrivateProps = {
+    /**
+     * Основные стили компонента.
+     */
+    styles?: {
+        [key: string]: string;
+    };
+    /**
+     * Стили компонента для default и inverted режима.
+     */
+    colorStylesMap?: {
+        default: {
+            [key: string]: string;
+        };
+        inverted: {
+            [key: string]: string;
+        };
+    };
+};
+export { PrivateProps };

package/filter-tag/moderncssm/types/base-filter-tag-private-props.js

@@ -0,0 +1 @@
+