@hh.ru/magritte-ui-tag 5.2.1 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/Tag.d.ts +1 -0
  2. package/Tag.js +41 -5
  3. package/Tag.js.map +1 -1
  4. package/index.css +249 -210
  5. package/index.js +1 -1
  6. package/package.json +4 -4
  7. package/types.d.ts +1 -0
package/Tag.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';
2
+ export declare const TAG_HIGHLIGHT_ANIMATION_CYCLE: number;
2
3
  export declare function Tag(props: TagIconProps): React.ReactElement;
3
4
  export declare function Tag(props: TagLabelProps): React.ReactElement;
package/Tag.js CHANGED
@@ -1,13 +1,26 @@
1
1
  import './index.css';
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
- import { cloneElement } from 'react';
3
+ import { useRef, useLayoutEffect, cloneElement } from 'react';
4
4
  import classnames from 'classnames';
5
5
  import { useDisabled, DisabledContext } from '@hh.ru/magritte-common-use-disabled';
6
6
  import { IconDynamic } from '@hh.ru/magritte-ui-icon';
7
7
  import { isIconElement } from '@hh.ru/magritte-ui-icon/types';
8
8
 
9
- var styles = {"tag":"magritte-tag___WdGxk_5-2-1","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-2-1","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-2-1","tag__label":"magritte-tag__label___YHV-o_5-2-1","tagLabel":"magritte-tag__label___YHV-o_5-2-1","icon-color-override":"magritte-icon-color-override___z7Qmm_5-2-1","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-2-1","on-surface":"magritte-on-surface___-0Bc4_5-2-1","onSurface":"magritte-on-surface___-0Bc4_5-2-1","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-2-1","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-2-1","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-2-1","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-2-1","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-2-1","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-2-1","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-2-1","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-2-1","tag_style-special":"magritte-tag_style-special___-IqT-_5-2-1","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-2-1","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-2-1","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-2-1","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-2-1","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-2-1","tag_size-medium":"magritte-tag_size-medium___Splpy_5-2-1","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-2-1","tag__icon":"magritte-tag__icon___Avk97_5-2-1","tagIcon":"magritte-tag__icon___Avk97_5-2-1","tag_size-large":"magritte-tag_size-large___SWuug_5-2-1","tagSizeLarge":"magritte-tag_size-large___SWuug_5-2-1"};
9
+ var styles = {"tag":"magritte-tag___WdGxk_5-3-0","tag_style-neutral":"magritte-tag_style-neutral___cw1Bt_5-3-0","tagStyleNeutral":"magritte-tag_style-neutral___cw1Bt_5-3-0","tag__label":"magritte-tag__label___YHV-o_5-3-0","tagLabel":"magritte-tag__label___YHV-o_5-3-0","icon-color-override":"magritte-icon-color-override___z7Qmm_5-3-0","iconColorOverride":"magritte-icon-color-override___z7Qmm_5-3-0","on-surface":"magritte-on-surface___-0Bc4_5-3-0","onSurface":"magritte-on-surface___-0Bc4_5-3-0","tag_state-disabled":"magritte-tag_state-disabled___2su23_5-3-0","tagStateDisabled":"magritte-tag_state-disabled___2su23_5-3-0","disabled-icon-color-override":"magritte-disabled-icon-color-override___E6mEW_5-3-0","disabledIconColorOverride":"magritte-disabled-icon-color-override___E6mEW_5-3-0","tag_style-positive":"magritte-tag_style-positive___o2Zfe_5-3-0","tagStylePositive":"magritte-tag_style-positive___o2Zfe_5-3-0","tag_style-negative":"magritte-tag_style-negative___-HbQe_5-3-0","tagStyleNegative":"magritte-tag_style-negative___-HbQe_5-3-0","tag_style-special":"magritte-tag_style-special___-IqT-_5-3-0","tagStyleSpecial":"magritte-tag_style-special___-IqT-_5-3-0","tag_style-warning":"magritte-tag_style-warning___4xBGB_5-3-0","tagStyleWarning":"magritte-tag_style-warning___4xBGB_5-3-0","tag_style-accent":"magritte-tag_style-accent___WCqKw_5-3-0","tagStyleAccent":"magritte-tag_style-accent___WCqKw_5-3-0","tag_size-medium":"magritte-tag_size-medium___Splpy_5-3-0","tagSizeMedium":"magritte-tag_size-medium___Splpy_5-3-0","tag__icon":"magritte-tag__icon___Avk97_5-3-0","tagIcon":"magritte-tag__icon___Avk97_5-3-0","tag_size-large":"magritte-tag_size-large___SWuug_5-3-0","tagSizeLarge":"magritte-tag_size-large___SWuug_5-3-0","tag_highlight":"magritte-tag_highlight___RmDYp_5-3-0","tagHighlight":"magritte-tag_highlight___RmDYp_5-3-0","tag-highlight-shine":"magritte-tag-highlight-shine___8ZFPr_5-3-0","tagHighlightShine":"magritte-tag-highlight-shine___8ZFPr_5-3-0"};
10
10
 
11
+ const TAG_HIGHLIGHT_MOTION = 1440;
12
+ const TAG_HIGHLIGHT_PAUSE = 2500;
13
+ const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;
14
+ const TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';
15
+ const TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';
16
+ const TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';
17
+ const getTagHighlightDelay = () => {
18
+ const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;
19
+ if (phase === 0) {
20
+ return 0;
21
+ }
22
+ return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;
23
+ };
11
24
  const SIZE_TO_CSS = {
12
25
  large: styles.tagSizeLarge,
13
26
  medium: styles.tagSizeMedium,
@@ -20,17 +33,40 @@ const STYLE_TO_CSS = {
20
33
  neutral: styles.tagStyleNeutral,
21
34
  accent: styles.tagStyleAccent,
22
35
  };
23
- function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
36
+ function Tag({ style = 'neutral', size = 'medium', disabled = false, hideLabel, icon, highlight = false, 'aria-label': ariaLabel, children, onSurface, 'data-qa': dataQa, }) {
37
+ const tagRef = useRef(null);
24
38
  const showLabel = !hideLabel && children;
25
39
  const isDisabled = useDisabled() || disabled;
26
40
  const withIcon = isIconElement(icon) && icon.type._size === 16;
27
- return (jsxs("div", { className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
41
+ const isHighlightEnabled = highlight && !isDisabled;
42
+ useLayoutEffect(() => {
43
+ const tagEl = tagRef.current;
44
+ if (!isHighlightEnabled || !tagEl) {
45
+ tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);
46
+ tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);
47
+ delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];
48
+ return undefined;
49
+ }
50
+ tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);
51
+ // During hydration, synchronous animation-delay setup via useLayoutEffect
52
+ // does not guarantee proper phase alignment. raf ensures correct timing.
53
+ const animationFrameId = requestAnimationFrame(() => {
54
+ const syncedDelay = getTagHighlightDelay();
55
+ tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);
56
+ tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';
57
+ });
58
+ return () => {
59
+ cancelAnimationFrame(animationFrameId);
60
+ };
61
+ }, [isHighlightEnabled]);
62
+ return (jsxs("div", { ref: tagRef, className: classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {
28
63
  [styles.tagStateDisabled]: isDisabled,
64
+ [styles.tagHighlight]: isHighlightEnabled,
29
65
  [styles.iconColorOverride]: withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),
30
66
  [styles.disabledIconColorOverride]: withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),
31
67
  [styles.onSurface]: onSurface,
32
68
  }), "aria-disabled": isDisabled, "data-qa": dataQa, children: [withIcon && (jsx(DisabledContext.Provider, { value: isDisabled, children: jsx(IconDynamic, { hoverEnabled: false, pressEnabled: false, children: jsx("div", { className: styles.tagIcon, children: cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined }) }) }) })), showLabel && jsx("div", { className: styles.tagLabel, children: children })] }));
33
69
  }
34
70
 
35
- export { Tag };
71
+ export { TAG_HIGHLIGHT_ANIMATION_CYCLE, Tag };
36
72
  //# sourceMappingURL=Tag.js.map
package/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nexport function Tag(props: TagIconProps): React.ReactElement;\nexport function Tag(props: TagLabelProps): React.ReactElement;\n\nexport function Tag({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n return (\n <div\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.iconColorOverride]:\n withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n })}\n aria-disabled={isDisabled}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAUA,MAAM,WAAW,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC,YAAY;IAC1B,MAAM,EAAE,MAAM,CAAC,aAAa;CAC/B,CAAC;AAEF,MAAM,YAAY,GAAG;IACjB,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,QAAQ,EAAE,MAAM,CAAC,gBAAgB;IACjC,OAAO,EAAE,MAAM,CAAC,eAAe;IAC/B,MAAM,EAAE,MAAM,CAAC,cAAc;CAChC,CAAC;AAKc,SAAA,GAAG,CAAC,EAChB,KAAK,GAAG,SAAS,EACjB,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,SAAS,EAAE,MAAM,GACU,EAAA;AAC3B,IAAA,MAAM,SAAS,GAAG,CAAC,SAAS,IAAI,QAAQ,CAAC;AACzC,IAAA,MAAM,UAAU,GAAG,WAAW,EAAE,IAAI,QAAQ,CAAC;AAC7C,IAAA,MAAM,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,IAAmC,CAAC,KAAK,KAAK,EAAE,CAAC;AAC/F,IAAA,QACIA,IACI,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE;AACtE,YAAA,CAAC,MAAM,CAAC,gBAAgB,GAAG,UAAU;YACrC,CAAC,MAAM,CAAC,iBAAiB,GACrB,QAAQ,IAAI,CAAC,UAAU,IAAI,EAAE,cAAc,IAAI,IAAI,CAAC,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC;YACrF,CAAC,MAAM,CAAC,yBAAyB,GAC7B,QAAQ,IAAI,UAAU,IAAI,EAAE,eAAe,IAAI,IAAI,CAAC,KAAK,IAAI,aAAa,IAAI,IAAI,CAAC,KAAK,CAAC;AAC7F,YAAA,CAAC,MAAM,CAAC,SAAS,GAAG,SAAS;AAChC,SAAA,CAAC,EACa,eAAA,EAAA,UAAU,EAChB,SAAA,EAAA,MAAM,aAEd,QAAQ,KACLC,GAAA,CAAC,eAAe,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,UAAU,EAAA,QAAA,EACvCA,GAAC,CAAA,WAAW,EAAC,EAAA,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAA,QAAA,EACjDA,aAAK,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,QAAA,EAAA,YAAY,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,CAAC,SAAS,GAAG,SAAS,GAAG,SAAS,EAAE,CAAC,EAAA,CACvE,EACI,CAAA,EAAA,CACS,CAC9B,EACA,SAAS,IAAIA,aAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAG,QAAA,EAAA,QAAQ,EAAO,CAAA,CAAA,EAAA,CAC7D,EACR;AACN;;;;"}
1
+ {"version":3,"file":"Tag.js","sources":["src/Tag.tsx"],"sourcesContent":["import { cloneElement, useLayoutEffect, useRef } from 'react';\nimport classnames from 'classnames';\n\nimport { DisabledContext, useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDynamic } from '@hh.ru/magritte-ui-icon';\nimport { type IconWrapperComponentSize16, isIconElement } from '@hh.ru/magritte-ui-icon/types';\nimport type { TagIconProps, TagLabelProps } from '@hh.ru/magritte-ui-tag/types';\n\nimport styles from './tag.less';\n\nconst TAG_HIGHLIGHT_MOTION = 1440;\nconst TAG_HIGHLIGHT_PAUSE = 2500;\nexport const TAG_HIGHLIGHT_ANIMATION_CYCLE = TAG_HIGHLIGHT_MOTION + TAG_HIGHLIGHT_PAUSE;\n\nconst TAG_HIGHLIGHT_DELAY_PROPERTY = '--tag-highlight-delay';\nconst TAG_HIGHLIGHT_DURATION_PROPERTY = '--tag-highlight-duration';\nconst TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE = 'animationSynced';\n\nconst getTagHighlightDelay = (): number => {\n const phase = Date.now() % TAG_HIGHLIGHT_ANIMATION_CYCLE;\n\n if (phase === 0) {\n return 0;\n }\n\n return phase < TAG_HIGHLIGHT_MOTION ? TAG_HIGHLIGHT_ANIMATION_CYCLE - phase : -phase;\n};\n\nconst SIZE_TO_CSS = {\n large: styles.tagSizeLarge,\n medium: styles.tagSizeMedium,\n};\n\nconst STYLE_TO_CSS = {\n special: styles.tagStyleSpecial,\n warning: styles.tagStyleWarning,\n positive: styles.tagStylePositive,\n negative: styles.tagStyleNegative,\n neutral: styles.tagStyleNeutral,\n accent: styles.tagStyleAccent,\n};\n\nexport function Tag(props: TagIconProps): React.ReactElement;\nexport function Tag(props: TagLabelProps): React.ReactElement;\n\nexport function Tag({\n style = 'neutral',\n size = 'medium',\n disabled = false,\n hideLabel,\n icon,\n highlight = false,\n 'aria-label': ariaLabel,\n children,\n onSurface,\n 'data-qa': dataQa,\n}: TagIconProps | TagLabelProps): React.ReactElement {\n const tagRef = useRef<HTMLDivElement>(null);\n const showLabel = !hideLabel && children;\n const isDisabled = useDisabled() || disabled;\n const withIcon = isIconElement(icon) && (icon.type as IconWrapperComponentSize16)._size === 16;\n const isHighlightEnabled = highlight && !isDisabled;\n\n useLayoutEffect(() => {\n const tagEl = tagRef.current;\n if (!isHighlightEnabled || !tagEl) {\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DELAY_PROPERTY);\n tagEl?.style.removeProperty(TAG_HIGHLIGHT_DURATION_PROPERTY);\n delete tagEl?.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE];\n return undefined;\n }\n tagEl.style.setProperty(TAG_HIGHLIGHT_DURATION_PROPERTY, `${TAG_HIGHLIGHT_ANIMATION_CYCLE}ms`);\n // During hydration, synchronous animation-delay setup via useLayoutEffect\n // does not guarantee proper phase alignment. raf ensures correct timing.\n const animationFrameId = requestAnimationFrame(() => {\n const syncedDelay = getTagHighlightDelay();\n tagEl.style.setProperty(TAG_HIGHLIGHT_DELAY_PROPERTY, `${syncedDelay}ms`);\n tagEl.dataset[TAG_HIGHLIGHT_SYNC_DATA_ATTRIBUTE] = 'true';\n });\n return () => {\n cancelAnimationFrame(animationFrameId);\n };\n }, [isHighlightEnabled]);\n\n return (\n <div\n ref={tagRef}\n className={classnames(styles.tag, STYLE_TO_CSS[style], SIZE_TO_CSS[size], {\n [styles.tagStateDisabled]: isDisabled,\n [styles.tagHighlight]: isHighlightEnabled,\n [styles.iconColorOverride]:\n withIcon && !isDisabled && !('initialColor' in icon.props || 'hex' in icon.props),\n [styles.disabledIconColorOverride]:\n withIcon && isDisabled && !('disabledColor' in icon.props || 'hexDisabled' in icon.props),\n [styles.onSurface]: onSurface,\n })}\n aria-disabled={isDisabled}\n data-qa={dataQa}\n >\n {withIcon && (\n <DisabledContext.Provider value={isDisabled}>\n <IconDynamic hoverEnabled={false} pressEnabled={false}>\n <div className={styles.tagIcon}>\n {cloneElement(icon, { 'aria-label': !showLabel ? ariaLabel : undefined })}\n </div>\n </IconDynamic>\n </DisabledContext.Provider>\n )}\n {showLabel && <div className={styles.tagLabel}>{children}</div>}\n </div>\n );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/index.css CHANGED
@@ -1,266 +1,267 @@
1
1
  :root{
2
- --magritte-color-component-tag-background-neutral-v24-5-0:#F1F4F9;
3
- --magritte-color-component-tag-background-positive-v24-5-0:#E8F9EC;
4
- --magritte-color-component-tag-background-negative-v24-5-0:#FEF2EF;
5
- --magritte-color-component-tag-background-warning-v24-5-0:#FFF3E6;
6
- --magritte-color-component-tag-background-special-v24-5-0:#F7F4FF;
7
- --magritte-color-component-tag-background-accent-v24-5-0:#EDF6FF;
8
- --magritte-color-component-tag-background-on-surface-neutral-v24-5-0:#ffffff;
9
- --magritte-color-component-tag-background-on-surface-positive-v24-5-0:#ffffff;
10
- --magritte-color-component-tag-background-on-surface-negative-v24-5-0:#ffffff;
11
- --magritte-color-component-tag-background-on-surface-warning-v24-5-0:#ffffff;
12
- --magritte-color-component-tag-background-on-surface-special-v24-5-0:#ffffff;
13
- --magritte-color-component-tag-background-on-surface-accent-v24-5-0:#ffffff;
14
- --magritte-color-component-tag-background-state-neutral-disabled-v24-5-0:#f1f4f97a;
15
- --magritte-color-component-tag-background-state-positive-disabled-v24-5-0:#e8f9ec7a;
16
- --magritte-color-component-tag-background-state-negative-disabled-v24-5-0:#fef2ef7a;
17
- --magritte-color-component-tag-background-state-warning-disabled-v24-5-0:#fff3e67a;
18
- --magritte-color-component-tag-background-state-special-disabled-v24-5-0:#f7f4ff7a;
19
- --magritte-color-component-tag-background-state-accent-disabled-v24-5-0:#edf6ff7a;
20
- --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-5-0:#ffffff7a;
21
- --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-5-0:#ffffff7a;
22
- --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-5-0:#ffffff7a;
23
- --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-5-0:#ffffff7a;
24
- --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-5-0:#ffffff7a;
25
- --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-5-0:#ffffff7a;
26
- --magritte-color-component-tag-text-neutral-v24-5-0:#000000;
27
- --magritte-color-component-tag-text-positive-v24-5-0:#10b55f;
28
- --magritte-color-component-tag-text-negative-v24-5-0:#ee4735;
29
- --magritte-color-component-tag-text-warning-v24-5-0:#C37304;
30
- --magritte-color-component-tag-text-special-v24-5-0:#883be9;
31
- --magritte-color-component-tag-text-accent-v24-5-0:#0d63e3;
32
- --magritte-color-component-tag-text-state-neutral-disabled-v24-5-0:#0000007a;
33
- --magritte-color-component-tag-text-state-positive-disabled-v24-5-0:#00984f7a;
34
- --magritte-color-component-tag-text-state-negative-disabled-v24-5-0:#ee47357a;
35
- --magritte-color-component-tag-text-state-warning-disabled-v24-5-0:#c373047a;
36
- --magritte-color-component-tag-text-state-special-disabled-v24-5-0:#883be97a;
37
- --magritte-color-component-tag-text-state-accent-disabled-v24-5-0:#0d63e37a;
38
- --magritte-color-component-tag-icon-neutral-v24-5-0:#000000;
39
- --magritte-color-component-tag-icon-positive-v24-5-0:#10b55f;
40
- --magritte-color-component-tag-icon-negative-v24-5-0:#ee4735;
41
- --magritte-color-component-tag-icon-warning-v24-5-0:#C37304;
42
- --magritte-color-component-tag-icon-special-v24-5-0:#883be9;
43
- --magritte-color-component-tag-icon-accent-v24-5-0:#0d63e3;
44
- --magritte-color-component-tag-icon-state-neutral-disabled-v24-5-0:#0000007a;
45
- --magritte-color-component-tag-icon-state-positive-disabled-v24-5-0:#00984f7a;
46
- --magritte-color-component-tag-icon-state-negative-disabled-v24-5-0:#ee47357a;
47
- --magritte-color-component-tag-icon-state-warning-disabled-v24-5-0:#c373047a;
48
- --magritte-color-component-tag-icon-state-special-disabled-v24-5-0:#883be97a;
49
- --magritte-color-component-tag-icon-state-accent-disabled-v24-5-0:#0d63e37a;
2
+ --magritte-color-component-tag-background-neutral-v24-6-0:#F1F4F9;
3
+ --magritte-color-component-tag-background-positive-v24-6-0:#E8F9EC;
4
+ --magritte-color-component-tag-background-negative-v24-6-0:#FEF2EF;
5
+ --magritte-color-component-tag-background-warning-v24-6-0:#FFF3E6;
6
+ --magritte-color-component-tag-background-special-v24-6-0:#F7F4FF;
7
+ --magritte-color-component-tag-background-accent-v24-6-0:#EDF6FF;
8
+ --magritte-color-component-tag-background-on-surface-neutral-v24-6-0:#ffffff;
9
+ --magritte-color-component-tag-background-on-surface-positive-v24-6-0:#ffffff;
10
+ --magritte-color-component-tag-background-on-surface-negative-v24-6-0:#ffffff;
11
+ --magritte-color-component-tag-background-on-surface-warning-v24-6-0:#ffffff;
12
+ --magritte-color-component-tag-background-on-surface-special-v24-6-0:#ffffff;
13
+ --magritte-color-component-tag-background-on-surface-accent-v24-6-0:#ffffff;
14
+ --magritte-color-component-tag-background-state-neutral-disabled-v24-6-0:#f1f4f97a;
15
+ --magritte-color-component-tag-background-state-positive-disabled-v24-6-0:#e8f9ec7a;
16
+ --magritte-color-component-tag-background-state-negative-disabled-v24-6-0:#fef2ef7a;
17
+ --magritte-color-component-tag-background-state-warning-disabled-v24-6-0:#fff3e67a;
18
+ --magritte-color-component-tag-background-state-special-disabled-v24-6-0:#f7f4ff7a;
19
+ --magritte-color-component-tag-background-state-accent-disabled-v24-6-0:#edf6ff7a;
20
+ --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-6-0:#ffffff7a;
21
+ --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-6-0:#ffffff7a;
22
+ --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-6-0:#ffffff7a;
23
+ --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-6-0:#ffffff7a;
24
+ --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-6-0:#ffffff7a;
25
+ --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-6-0:#ffffff7a;
26
+ --magritte-color-component-tag-text-neutral-v24-6-0:#000000;
27
+ --magritte-color-component-tag-text-positive-v24-6-0:#10b55f;
28
+ --magritte-color-component-tag-text-negative-v24-6-0:#ee4735;
29
+ --magritte-color-component-tag-text-warning-v24-6-0:#ff9900;
30
+ --magritte-color-component-tag-text-special-v24-6-0:#883be9;
31
+ --magritte-color-component-tag-text-accent-v24-6-0:#0d63e3;
32
+ --magritte-color-component-tag-text-state-neutral-disabled-v24-6-0:#0000007a;
33
+ --magritte-color-component-tag-text-state-positive-disabled-v24-6-0:#00984f7a;
34
+ --magritte-color-component-tag-text-state-negative-disabled-v24-6-0:#ee47357a;
35
+ --magritte-color-component-tag-text-state-warning-disabled-v24-6-0:#c373047a;
36
+ --magritte-color-component-tag-text-state-special-disabled-v24-6-0:#883be97a;
37
+ --magritte-color-component-tag-text-state-accent-disabled-v24-6-0:#0d63e37a;
38
+ --magritte-color-component-tag-icon-neutral-v24-6-0:#000000;
39
+ --magritte-color-component-tag-icon-positive-v24-6-0:#10b55f;
40
+ --magritte-color-component-tag-icon-negative-v24-6-0:#ee4735;
41
+ --magritte-color-component-tag-icon-warning-v24-6-0:#ff9900;
42
+ --magritte-color-component-tag-icon-special-v24-6-0:#883be9;
43
+ --magritte-color-component-tag-icon-accent-v24-6-0:#0d63e3;
44
+ --magritte-color-component-tag-icon-state-neutral-disabled-v24-6-0:#0000007a;
45
+ --magritte-color-component-tag-icon-state-positive-disabled-v24-6-0:#00984f7a;
46
+ --magritte-color-component-tag-icon-state-negative-disabled-v24-6-0:#ee47357a;
47
+ --magritte-color-component-tag-icon-state-warning-disabled-v24-6-0:#c373047a;
48
+ --magritte-color-component-tag-icon-state-special-disabled-v24-6-0:#883be97a;
49
+ --magritte-color-component-tag-icon-state-accent-disabled-v24-6-0:#0d63e37a;
50
50
  }
51
51
 
52
52
  .magritte-night-theme{
53
- --magritte-color-component-tag-background-neutral-v24-5-0:#303030;
54
- --magritte-color-component-tag-background-positive-v24-5-0:#16321F;
55
- --magritte-color-component-tag-background-negative-v24-5-0:#3D2622;
56
- --magritte-color-component-tag-background-warning-v24-5-0:#3D270E;
57
- --magritte-color-component-tag-background-special-v24-5-0:#2F293C;
58
- --magritte-color-component-tag-background-accent-v24-5-0:#222D3D;
59
- --magritte-color-component-tag-background-on-surface-neutral-v24-5-0:#1B1B1B;
60
- --magritte-color-component-tag-background-on-surface-positive-v24-5-0:#1B1B1B;
61
- --magritte-color-component-tag-background-on-surface-negative-v24-5-0:#1B1B1B;
62
- --magritte-color-component-tag-background-on-surface-warning-v24-5-0:#1B1B1B;
63
- --magritte-color-component-tag-background-on-surface-special-v24-5-0:#1B1B1B;
64
- --magritte-color-component-tag-background-on-surface-accent-v24-5-0:#1B1B1B;
65
- --magritte-color-component-tag-text-neutral-v24-5-0:#ffffff;
66
- --magritte-color-component-tag-text-negative-v24-5-0:#ff4d3a;
67
- --magritte-color-component-tag-text-warning-v24-5-0:#D78009;
68
- --magritte-color-component-tag-text-special-v24-5-0:#a579f4;
69
- --magritte-color-component-tag-text-accent-v24-5-0:#5e9eff;
70
- --magritte-color-component-tag-icon-neutral-v24-5-0:#ffffff;
71
- --magritte-color-component-tag-icon-negative-v24-5-0:#ff4d3a;
72
- --magritte-color-component-tag-icon-warning-v24-5-0:#D78009;
73
- --magritte-color-component-tag-icon-special-v24-5-0:#a579f4;
74
- --magritte-color-component-tag-icon-accent-v24-5-0:#5e9eff;
75
- --magritte-color-component-tag-icon-state-neutral-disabled-v24-5-0:#aabbca7a;
76
- --magritte-color-component-tag-icon-state-positive-disabled-v24-5-0:#10b55f7a;
77
- --magritte-color-component-tag-icon-state-negative-disabled-v24-5-0:#ff4d3a7a;
78
- --magritte-color-component-tag-icon-state-warning-disabled-v24-5-0:#d780097a;
79
- --magritte-color-component-tag-icon-state-special-disabled-v24-5-0:#a579f47a;
80
- --magritte-color-component-tag-text-state-neutral-disabled-v24-5-0:#aabbca7a;
81
- --magritte-color-component-tag-text-state-positive-disabled-v24-5-0:#10b55f7a;
82
- --magritte-color-component-tag-text-state-negative-disabled-v24-5-0:#ff4d3a7a;
83
- --magritte-color-component-tag-text-state-warning-disabled-v24-5-0:#d780097a;
84
- --magritte-color-component-tag-text-state-special-disabled-v24-5-0:#a579f47a;
85
- --magritte-color-component-tag-background-state-neutral-disabled-v24-5-0:#3030307a;
86
- --magritte-color-component-tag-background-state-positive-disabled-v24-5-0:#16321f7a;
87
- --magritte-color-component-tag-background-state-negative-disabled-v24-5-0:#3d26227a;
88
- --magritte-color-component-tag-background-state-warning-disabled-v24-5-0:#3d270e7a;
89
- --magritte-color-component-tag-background-state-special-disabled-v24-5-0:#2f293c7a;
90
- --magritte-color-component-tag-background-state-accent-disabled-v24-5-0:#222d3d7a;
91
- --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-5-0:#1b1b1b7a;
92
- --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-5-0:#1b1b1b7a;
93
- --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-5-0:#1b1b1b7a;
94
- --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-5-0:#1b1b1b7a;
95
- --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-5-0:#1b1b1b7a;
96
- --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-5-0:#1b1b1b7a;
53
+ --magritte-color-component-tag-background-neutral-v24-6-0:#303030;
54
+ --magritte-color-component-tag-background-positive-v24-6-0:#16321F;
55
+ --magritte-color-component-tag-background-negative-v24-6-0:#3D2622;
56
+ --magritte-color-component-tag-background-warning-v24-6-0:#3D270E;
57
+ --magritte-color-component-tag-background-special-v24-6-0:#2F293C;
58
+ --magritte-color-component-tag-background-accent-v24-6-0:#222D3D;
59
+ --magritte-color-component-tag-background-on-surface-neutral-v24-6-0:#1B1B1B;
60
+ --magritte-color-component-tag-background-on-surface-positive-v24-6-0:#1B1B1B;
61
+ --magritte-color-component-tag-background-on-surface-negative-v24-6-0:#1B1B1B;
62
+ --magritte-color-component-tag-background-on-surface-warning-v24-6-0:#1B1B1B;
63
+ --magritte-color-component-tag-background-on-surface-special-v24-6-0:#1B1B1B;
64
+ --magritte-color-component-tag-background-on-surface-accent-v24-6-0:#1B1B1B;
65
+ --magritte-color-component-tag-text-neutral-v24-6-0:#ffffff;
66
+ --magritte-color-component-tag-text-negative-v24-6-0:#ff4d3a;
67
+ --magritte-color-component-tag-text-warning-v24-6-0:#D78009;
68
+ --magritte-color-component-tag-text-special-v24-6-0:#a579f4;
69
+ --magritte-color-component-tag-text-accent-v24-6-0:#5e9eff;
70
+ --magritte-color-component-tag-icon-neutral-v24-6-0:#ffffff;
71
+ --magritte-color-component-tag-icon-negative-v24-6-0:#ff4d3a;
72
+ --magritte-color-component-tag-icon-warning-v24-6-0:#D78009;
73
+ --magritte-color-component-tag-icon-special-v24-6-0:#a579f4;
74
+ --magritte-color-component-tag-icon-accent-v24-6-0:#5e9eff;
75
+ --magritte-color-component-tag-icon-state-neutral-disabled-v24-6-0:#aabbca7a;
76
+ --magritte-color-component-tag-icon-state-positive-disabled-v24-6-0:#10b55f7a;
77
+ --magritte-color-component-tag-icon-state-negative-disabled-v24-6-0:#ff4d3a7a;
78
+ --magritte-color-component-tag-icon-state-warning-disabled-v24-6-0:#d780097a;
79
+ --magritte-color-component-tag-icon-state-special-disabled-v24-6-0:#a579f47a;
80
+ --magritte-color-component-tag-text-state-neutral-disabled-v24-6-0:#aabbca7a;
81
+ --magritte-color-component-tag-text-state-positive-disabled-v24-6-0:#10b55f7a;
82
+ --magritte-color-component-tag-text-state-negative-disabled-v24-6-0:#ff4d3a7a;
83
+ --magritte-color-component-tag-text-state-warning-disabled-v24-6-0:#d780097a;
84
+ --magritte-color-component-tag-text-state-special-disabled-v24-6-0:#a579f47a;
85
+ --magritte-color-component-tag-background-state-neutral-disabled-v24-6-0:#3030307a;
86
+ --magritte-color-component-tag-background-state-positive-disabled-v24-6-0:#16321f7a;
87
+ --magritte-color-component-tag-background-state-negative-disabled-v24-6-0:#3d26227a;
88
+ --magritte-color-component-tag-background-state-warning-disabled-v24-6-0:#3d270e7a;
89
+ --magritte-color-component-tag-background-state-special-disabled-v24-6-0:#2f293c7a;
90
+ --magritte-color-component-tag-background-state-accent-disabled-v24-6-0:#222d3d7a;
91
+ --magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-6-0:#1b1b1b7a;
92
+ --magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-6-0:#1b1b1b7a;
93
+ --magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-6-0:#1b1b1b7a;
94
+ --magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-6-0:#1b1b1b7a;
95
+ --magritte-color-component-tag-background-state-on-surface-special-disabled-v24-6-0:#1b1b1b7a;
96
+ --magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-6-0:#1b1b1b7a;
97
97
  }
98
98
 
99
99
  .magritte-zp-day-theme{
100
- --magritte-color-component-tag-background-accent-v24-5-0:#F1F4F7;
101
- --magritte-color-component-tag-text-positive-v24-5-0:#00984f;
102
- --magritte-color-component-tag-text-warning-v24-5-0:#ac6600;
103
- --magritte-color-component-tag-text-accent-v24-5-0:#7195AF;
104
- --magritte-color-component-tag-text-state-neutral-disabled-v24-5-0:#5e6c777a;
105
- --magritte-color-component-tag-text-state-warning-disabled-v24-5-0:#ac66007a;
106
- --magritte-color-component-tag-text-state-accent-disabled-v24-5-0:#B1C5D3;
107
- --magritte-color-component-tag-icon-positive-v24-5-0:#00984f;
108
- --magritte-color-component-tag-icon-warning-v24-5-0:#ac6600;
109
- --magritte-color-component-tag-icon-accent-v24-5-0:#7195AF;
110
- --magritte-color-component-tag-icon-state-neutral-disabled-v24-5-0:#5e6c777a;
111
- --magritte-color-component-tag-icon-state-warning-disabled-v24-5-0:#ac66007a;
112
- --magritte-color-component-tag-icon-state-accent-disabled-v24-5-0:#B1C5D3;
113
- }
114
- .magritte-tag___WdGxk_5-2-1{
100
+ --magritte-color-component-tag-background-accent-v24-6-0:#F1F4F7;
101
+ --magritte-color-component-tag-text-positive-v24-6-0:#00984f;
102
+ --magritte-color-component-tag-text-accent-v24-6-0:#7195AF;
103
+ --magritte-color-component-tag-text-state-neutral-disabled-v24-6-0:#5e6c777a;
104
+ --magritte-color-component-tag-text-state-warning-disabled-v24-6-0:#ac66007a;
105
+ --magritte-color-component-tag-text-state-accent-disabled-v24-6-0:#B1C5D3;
106
+ --magritte-color-component-tag-icon-positive-v24-6-0:#00984f;
107
+ --magritte-color-component-tag-icon-accent-v24-6-0:#7195AF;
108
+ --magritte-color-component-tag-icon-state-neutral-disabled-v24-6-0:#5e6c777a;
109
+ --magritte-color-component-tag-icon-state-warning-disabled-v24-6-0:#ac66007a;
110
+ --magritte-color-component-tag-icon-state-accent-disabled-v24-6-0:#B1C5D3;
111
+ }
112
+ .magritte-tag___WdGxk_5-3-0{
115
113
  display:inline-flex;
116
114
  align-items:center;
117
115
  justify-content:center;
116
+ position:relative;
117
+ overflow:hidden;
118
+ isolation:isolate;
118
119
  }
119
- .magritte-tag_style-neutral___cw1Bt_5-2-1{
120
- background-color:var(--magritte-color-component-tag-background-neutral-v24-5-0);
120
+ .magritte-tag_style-neutral___cw1Bt_5-3-0{
121
+ background-color:var(--magritte-color-component-tag-background-neutral-v24-6-0);
121
122
  }
122
- .magritte-tag_style-neutral___cw1Bt_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
123
- color:var(--magritte-color-component-tag-text-neutral-v24-5-0);
123
+ .magritte-tag_style-neutral___cw1Bt_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
124
+ color:var(--magritte-color-component-tag-text-neutral-v24-6-0);
124
125
  }
125
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
126
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-5-0);
126
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
127
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-neutral-v24-6-0);
127
128
  }
128
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
129
- background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v24-5-0);
129
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
130
+ background-color:var(--magritte-color-component-tag-background-on-surface-neutral-v24-6-0);
130
131
  }
131
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
132
- background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v24-5-0);
132
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
133
+ background-color:var(--magritte-color-component-tag-background-state-neutral-disabled-v24-6-0);
133
134
  }
134
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
135
- color:var(--magritte-color-component-tag-text-state-neutral-disabled-v24-5-0);
135
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
136
+ color:var(--magritte-color-component-tag-text-state-neutral-disabled-v24-6-0);
136
137
  }
137
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
138
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-5-0);
138
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
139
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-neutral-disabled-v24-6-0);
139
140
  }
140
- .magritte-tag_style-neutral___cw1Bt_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
141
- background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-5-0);
141
+ .magritte-tag_style-neutral___cw1Bt_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
142
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-neutral-disabled-v24-6-0);
142
143
  }
143
- .magritte-tag_style-positive___o2Zfe_5-2-1{
144
- background-color:var(--magritte-color-component-tag-background-positive-v24-5-0);
144
+ .magritte-tag_style-positive___o2Zfe_5-3-0{
145
+ background-color:var(--magritte-color-component-tag-background-positive-v24-6-0);
145
146
  }
146
- .magritte-tag_style-positive___o2Zfe_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
147
- color:var(--magritte-color-component-tag-text-positive-v24-5-0);
147
+ .magritte-tag_style-positive___o2Zfe_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
148
+ color:var(--magritte-color-component-tag-text-positive-v24-6-0);
148
149
  }
149
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
150
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-5-0);
150
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
151
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-positive-v24-6-0);
151
152
  }
152
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
153
- background-color:var(--magritte-color-component-tag-background-on-surface-positive-v24-5-0);
153
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
154
+ background-color:var(--magritte-color-component-tag-background-on-surface-positive-v24-6-0);
154
155
  }
155
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
156
- background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v24-5-0);
156
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
157
+ background-color:var(--magritte-color-component-tag-background-state-positive-disabled-v24-6-0);
157
158
  }
158
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
159
- color:var(--magritte-color-component-tag-text-state-positive-disabled-v24-5-0);
159
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
160
+ color:var(--magritte-color-component-tag-text-state-positive-disabled-v24-6-0);
160
161
  }
161
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
162
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-5-0);
162
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
163
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-positive-disabled-v24-6-0);
163
164
  }
164
- .magritte-tag_style-positive___o2Zfe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
165
- background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-5-0);
165
+ .magritte-tag_style-positive___o2Zfe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
166
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-positive-disabled-v24-6-0);
166
167
  }
167
- .magritte-tag_style-negative___-HbQe_5-2-1{
168
- background-color:var(--magritte-color-component-tag-background-negative-v24-5-0);
168
+ .magritte-tag_style-negative___-HbQe_5-3-0{
169
+ background-color:var(--magritte-color-component-tag-background-negative-v24-6-0);
169
170
  }
170
- .magritte-tag_style-negative___-HbQe_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
171
- color:var(--magritte-color-component-tag-text-negative-v24-5-0);
171
+ .magritte-tag_style-negative___-HbQe_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
172
+ color:var(--magritte-color-component-tag-text-negative-v24-6-0);
172
173
  }
173
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
174
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-5-0);
174
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
175
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-negative-v24-6-0);
175
176
  }
176
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
177
- background-color:var(--magritte-color-component-tag-background-on-surface-negative-v24-5-0);
177
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
178
+ background-color:var(--magritte-color-component-tag-background-on-surface-negative-v24-6-0);
178
179
  }
179
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
180
- background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v24-5-0);
180
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
181
+ background-color:var(--magritte-color-component-tag-background-state-negative-disabled-v24-6-0);
181
182
  }
182
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
183
- color:var(--magritte-color-component-tag-text-state-negative-disabled-v24-5-0);
183
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
184
+ color:var(--magritte-color-component-tag-text-state-negative-disabled-v24-6-0);
184
185
  }
185
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
186
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-5-0);
186
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
187
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-negative-disabled-v24-6-0);
187
188
  }
188
- .magritte-tag_style-negative___-HbQe_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
189
- background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-5-0);
189
+ .magritte-tag_style-negative___-HbQe_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
190
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-negative-disabled-v24-6-0);
190
191
  }
191
- .magritte-tag_style-special___-IqT-_5-2-1{
192
- background-color:var(--magritte-color-component-tag-background-special-v24-5-0);
192
+ .magritte-tag_style-special___-IqT-_5-3-0{
193
+ background-color:var(--magritte-color-component-tag-background-special-v24-6-0);
193
194
  }
194
- .magritte-tag_style-special___-IqT-_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
195
- color:var(--magritte-color-component-tag-text-special-v24-5-0);
195
+ .magritte-tag_style-special___-IqT-_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
196
+ color:var(--magritte-color-component-tag-text-special-v24-6-0);
196
197
  }
197
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
198
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-5-0);
198
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
199
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-special-v24-6-0);
199
200
  }
200
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
201
- background-color:var(--magritte-color-component-tag-background-on-surface-special-v24-5-0);
201
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
202
+ background-color:var(--magritte-color-component-tag-background-on-surface-special-v24-6-0);
202
203
  }
203
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
204
- background-color:var(--magritte-color-component-tag-background-state-special-disabled-v24-5-0);
204
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
205
+ background-color:var(--magritte-color-component-tag-background-state-special-disabled-v24-6-0);
205
206
  }
206
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
207
- color:var(--magritte-color-component-tag-text-state-special-disabled-v24-5-0);
207
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
208
+ color:var(--magritte-color-component-tag-text-state-special-disabled-v24-6-0);
208
209
  }
209
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
210
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-5-0);
210
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
211
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-special-disabled-v24-6-0);
211
212
  }
212
- .magritte-tag_style-special___-IqT-_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
213
- background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v24-5-0);
213
+ .magritte-tag_style-special___-IqT-_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
214
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-special-disabled-v24-6-0);
214
215
  }
215
- .magritte-tag_style-warning___4xBGB_5-2-1{
216
- background-color:var(--magritte-color-component-tag-background-warning-v24-5-0);
216
+ .magritte-tag_style-warning___4xBGB_5-3-0{
217
+ background-color:var(--magritte-color-component-tag-background-warning-v24-6-0);
217
218
  }
218
- .magritte-tag_style-warning___4xBGB_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
219
- color:var(--magritte-color-component-tag-text-warning-v24-5-0);
219
+ .magritte-tag_style-warning___4xBGB_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
220
+ color:var(--magritte-color-component-tag-text-warning-v24-6-0);
220
221
  }
221
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
222
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-5-0);
222
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
223
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-warning-v24-6-0);
223
224
  }
224
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
225
- background-color:var(--magritte-color-component-tag-background-on-surface-warning-v24-5-0);
225
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
226
+ background-color:var(--magritte-color-component-tag-background-on-surface-warning-v24-6-0);
226
227
  }
227
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
228
- background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v24-5-0);
228
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
229
+ background-color:var(--magritte-color-component-tag-background-state-warning-disabled-v24-6-0);
229
230
  }
230
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
231
- color:var(--magritte-color-component-tag-text-state-warning-disabled-v24-5-0);
231
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
232
+ color:var(--magritte-color-component-tag-text-state-warning-disabled-v24-6-0);
232
233
  }
233
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
234
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-5-0);
234
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
235
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-warning-disabled-v24-6-0);
235
236
  }
236
- .magritte-tag_style-warning___4xBGB_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
237
- background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-5-0);
237
+ .magritte-tag_style-warning___4xBGB_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
238
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-warning-disabled-v24-6-0);
238
239
  }
239
- .magritte-tag_style-accent___WCqKw_5-2-1{
240
- background-color:var(--magritte-color-component-tag-background-accent-v24-5-0);
240
+ .magritte-tag_style-accent___WCqKw_5-3-0{
241
+ background-color:var(--magritte-color-component-tag-background-accent-v24-6-0);
241
242
  }
242
- .magritte-tag_style-accent___WCqKw_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
243
- color:var(--magritte-color-component-tag-text-accent-v24-5-0);
243
+ .magritte-tag_style-accent___WCqKw_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
244
+ color:var(--magritte-color-component-tag-text-accent-v24-6-0);
244
245
  }
245
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-icon-color-override___z7Qmm_5-2-1{
246
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-5-0);
246
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-icon-color-override___z7Qmm_5-3-0{
247
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-accent-v24-6-0);
247
248
  }
248
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
249
- background-color:var(--magritte-color-component-tag-background-on-surface-accent-v24-5-0);
249
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
250
+ background-color:var(--magritte-color-component-tag-background-on-surface-accent-v24-6-0);
250
251
  }
251
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1{
252
- background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v24-5-0);
252
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0{
253
+ background-color:var(--magritte-color-component-tag-background-state-accent-disabled-v24-6-0);
253
254
  }
254
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
255
- color:var(--magritte-color-component-tag-text-state-accent-disabled-v24-5-0);
255
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
256
+ color:var(--magritte-color-component-tag-text-state-accent-disabled-v24-6-0);
256
257
  }
257
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-disabled-icon-color-override___E6mEW_5-2-1{
258
- --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-5-0);
258
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-disabled-icon-color-override___E6mEW_5-3-0{
259
+ --magritte-ui-icon-color-override:var(--magritte-color-component-tag-icon-state-accent-disabled-v24-6-0);
259
260
  }
260
- .magritte-tag_style-accent___WCqKw_5-2-1.magritte-tag_state-disabled___2su23_5-2-1.magritte-on-surface___-0Bc4_5-2-1{
261
- background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-5-0);
261
+ .magritte-tag_style-accent___WCqKw_5-3-0.magritte-tag_state-disabled___2su23_5-3-0.magritte-on-surface___-0Bc4_5-3-0{
262
+ background-color:var(--magritte-color-component-tag-background-state-on-surface-accent-disabled-v24-6-0);
262
263
  }
263
- .magritte-tag_size-medium___Splpy_5-2-1{
264
+ .magritte-tag_size-medium___Splpy_5-3-0{
264
265
  border-radius:8px;
265
266
  padding:4px 8px;
266
267
  gap:4px;
@@ -268,10 +269,10 @@
268
269
  max-width:min(100%, 288px);
269
270
  box-sizing:border-box;
270
271
  }
271
- .magritte-tag_size-medium___Splpy_5-2-1 .magritte-tag__icon___Avk97_5-2-1{
272
+ .magritte-tag_size-medium___Splpy_5-3-0 .magritte-tag__icon___Avk97_5-3-0{
272
273
  padding:2px 0;
273
274
  }
274
- .magritte-tag_size-large___SWuug_5-2-1{
275
+ .magritte-tag_size-large___SWuug_5-3-0{
275
276
  border-radius:18px;
276
277
  padding:6px 10px;
277
278
  gap:2px;
@@ -279,7 +280,7 @@
279
280
  max-width:min(100%, 288px);
280
281
  box-sizing:border-box;
281
282
  }
282
- .magritte-tag_size-large___SWuug_5-2-1 .magritte-tag__label___YHV-o_5-2-1{
283
+ .magritte-tag_size-large___SWuug_5-3-0 .magritte-tag__label___YHV-o_5-3-0{
283
284
  font-family:"hh sans";
284
285
  font-weight:500;
285
286
  line-height:22px;
@@ -290,10 +291,10 @@
290
291
  text-decoration:none;
291
292
  padding:1px 2px;
292
293
  }
293
- .magritte-tag_size-large___SWuug_5-2-1 .magritte-tag__icon___Avk97_5-2-1{
294
+ .magritte-tag_size-large___SWuug_5-3-0 .magritte-tag__icon___Avk97_5-3-0{
294
295
  padding:4px 0;
295
296
  }
296
- .magritte-tag__label___YHV-o_5-2-1{
297
+ .magritte-tag__label___YHV-o_5-3-0{
297
298
  font-family:"hh sans";
298
299
  font-weight:400;
299
300
  line-height:20px;
@@ -306,7 +307,45 @@
306
307
  overflow:hidden;
307
308
  white-space:nowrap;
308
309
  }
309
- .magritte-tag__icon___Avk97_5-2-1{
310
+ .magritte-tag__icon___Avk97_5-3-0{
310
311
  display:flex;
311
312
  flex-shrink:0;
312
313
  }
314
+ .magritte-tag_highlight___RmDYp_5-3-0::after{
315
+ content:'';
316
+ position:absolute;
317
+ top:0;
318
+ bottom:0;
319
+ left:0;
320
+ z-index:1;
321
+ width:50px;
322
+ pointer-events:none;
323
+ transform:translateX(-50px);
324
+ background:linear-gradient(292deg, rgba(255, 255, 255, 0) 29.2%, rgba(255, 255, 255, 0.8) 49.55%, rgba(255, 255, 255, 0) 69.9%);
325
+ opacity:0.8;
326
+ animation-name:magritte-tag-highlight-shine___8ZFPr_5-3-0;
327
+ animation-duration:var(--tag-highlight-duration);
328
+ animation-timing-function:linear;
329
+ animation-iteration-count:infinite;
330
+ animation-play-state:paused;
331
+ }
332
+ .magritte-tag_highlight___RmDYp_5-3-0[data-animation-synced='true'].magritte-tag_highlight___RmDYp_5-3-0::after{
333
+ animation-play-state:running;
334
+ animation-delay:var(--tag-highlight-delay, 0ms);
335
+ }
336
+ @media (prefers-reduced-motion: reduce){
337
+ .magritte-tag_highlight___RmDYp_5-3-0::after{
338
+ animation:none;
339
+ }
340
+ }
341
+ @keyframes magritte-tag-highlight-shine___8ZFPr_5-3-0{
342
+ 0%{
343
+ transform:translateX(-50px);
344
+ }
345
+ 36.5%{
346
+ transform:translateX(288px);
347
+ }
348
+ 100%{
349
+ transform:translateX(288px);
350
+ }
351
+ }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import './index.css';
2
- export { Tag } from './Tag.js';
2
+ export { TAG_HIGHLIGHT_ANIMATION_CYCLE, Tag } from './Tag.js';
3
3
  import 'react/jsx-runtime';
4
4
  import 'react';
5
5
  import 'classnames';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hh.ru/magritte-ui-tag",
3
- "version": "5.2.1",
3
+ "version": "5.3.0",
4
4
  "main": "index.js",
5
5
  "types": "index.d.ts",
6
6
  "sideEffects": [
@@ -20,8 +20,8 @@
20
20
  },
21
21
  "dependencies": {
22
22
  "@hh.ru/magritte-common-use-disabled": "1.0.15",
23
- "@hh.ru/magritte-design-tokens": "24.5.0",
24
- "@hh.ru/magritte-ui-icon": "14.2.0",
23
+ "@hh.ru/magritte-design-tokens": "24.6.0",
24
+ "@hh.ru/magritte-ui-icon": "14.2.1",
25
25
  "@hh.ru/magritte-ui-mock-component": "1.1.7"
26
26
  },
27
27
  "peerDependencies": {
@@ -31,5 +31,5 @@
31
31
  "publishConfig": {
32
32
  "access": "public"
33
33
  },
34
- "gitHead": "e47e9f9e4d4eba933c52865fb42b71160faf938b"
34
+ "gitHead": "f24f228ced9838279360783637ffa0cfad9886e9"
35
35
  }
package/types.d.ts CHANGED
@@ -5,6 +5,7 @@ type CommonTagProps = {
5
5
  size?: TagSize;
6
6
  disabled?: boolean;
7
7
  onSurface?: boolean;
8
+ highlight?: boolean;
8
9
  'data-qa'?: string;
9
10
  };
10
11
  export interface TagLabelProps extends CommonTagProps {