@cloud-ru/ds-tooltip 1.0.4 → 1.0.6-preview-a2208aeb.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 (21) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/components/QuestionTooltip/QuestionTooltip.js +1 -2
  3. package/dist/cjs/components/QuestionTooltip/styles.module.css +12 -4
  4. package/dist/cjs/components/Tooltip/Tooltip.d.ts +1 -1
  5. package/dist/cjs/components/Tooltip/styles.module.css +5 -5
  6. package/dist/cjs/style.css +17 -9
  7. package/dist/esm/components/QuestionTooltip/QuestionTooltip.js +1 -2
  8. package/dist/esm/components/QuestionTooltip/styles.module.css +12 -4
  9. package/dist/esm/components/Tooltip/Tooltip.d.ts +1 -1
  10. package/dist/esm/components/Tooltip/styles.module.css +5 -5
  11. package/dist/esm/style.css +17 -9
  12. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  14. package/package.json +4 -4
  15. package/src/components/QuestionTooltip/QuestionTooltip.tsx +1 -2
  16. package/src/components/QuestionTooltip/styles.module.scss +10 -2
  17. package/dist/cjs/utils.d.ts +0 -2
  18. package/dist/cjs/utils.js +0 -15
  19. package/dist/esm/utils.d.ts +0 -2
  20. package/dist/esm/utils.js +0 -12
  21. package/src/utils.ts +0 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.5 (2026-09-18)
7
+
8
+ **Note:** Version bump only for package @ds/tooltip
9
+
6
10
  ## 1.0.4 (2026-08-28)
7
11
 
8
12
  **Note:** Version bump only for package @ds/tooltip
package/dist/cjs/components/QuestionTooltip/QuestionTooltip.js CHANGED
@@ -10,7 +10,6 @@ const popover_private_1 = require("@cloud-ru/ds-popover-private");
10
10
  const utils_1 = require("@cloud-ru/ds-utils");
11
11
  const classnames_1 = __importDefault(require("classnames"));
12
12
  const constants_1 = require("../../constants");
13
- const utils_2 = require("../../utils");
14
13
  const Tooltip_1 = require("../Tooltip");
15
14
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
16
15
  /**
@@ -22,5 +21,5 @@ function QuestionTooltip({ tip, triggerLabel = 'Подсказка', trigger = p
22
21
  return ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { tip: tip, className: tooltipClassname, triggerClassName: styles_module_scss_1.default.questionTooltipTrigger, open: isOpen, onOpenChange: setIsOpen, trigger: trigger, ...rest, children: (0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": triggerLabel, "data-opened": isOpen, "data-trigger": trigger, tabIndex: tabIndex, className: (0, classnames_1.default)(styles_module_scss_1.default.button, className), "data-size": size, "data-test-id": constants_1.TEST_IDS.questionTooltip.triggerOpen,
23
22
  // Ref ведёт на саму кнопку, а не на span-обёртку popover'а: потребителю
24
23
  // нужен настоящий триггер (позиционирование, фокус).
25
- ref: triggerRef, children: (0, jsx_runtime_1.jsx)(system_1.QuestionSVG, { size: (0, utils_2.getIconSize)(size) }) }) }));
24
+ ref: triggerRef, children: (0, jsx_runtime_1.jsx)(system_1.QuestionSVG, {}) }) }));
26
25
  }
package/dist/cjs/components/QuestionTooltip/styles.module.css CHANGED
@@ -30,10 +30,18 @@
30
30
  }
31
31
  }
32
32
  .button[data-size=xs]{
33
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
34
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
33
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
34
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
35
+ }
36
+ .button[data-size=xs] svg{
37
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
38
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
35
39
  }
36
40
  .button[data-size=s]{
37
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
38
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
41
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
+ }
44
+ .button[data-size=s] svg{
45
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
46
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
39
47
  }
package/dist/cjs/components/Tooltip/Tooltip.d.ts CHANGED
@@ -7,7 +7,7 @@ export type TooltipProps = WithSupportProps<{
7
7
  /** Отключение ограничения ширины тултипа @default false */
8
8
  disableMaxWidth?: boolean;
9
9
  }> & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'offset' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'triggerRef' | 'disableSpanWrapper' | 'fallbackPlacements' | 'closeOnPopstate'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement' | 'children'>>;
10
- export declare const DEFAULT_FALLBACK_PLACEMENTS: ("left" | "right" | "top" | "bottom")[];
10
+ export declare const DEFAULT_FALLBACK_PLACEMENTS: ("top" | "right" | "bottom" | "left")[];
11
11
  /**
12
12
  * Tooltip — всплывающая подсказка при наведении.
13
13
  * Стили и анатомия (отступы, скругления, макс. ширина) из @cloud-ru/ds-figma-variables.
package/dist/cjs/components/Tooltip/styles.module.css CHANGED
@@ -8,10 +8,10 @@
8
8
  max-width:256px;
9
9
  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
10
10
  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
11
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
11
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
12
12
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
13
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
14
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
13
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
14
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
15
15
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
16
16
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
17
17
  display:flex;
@@ -19,7 +19,7 @@
19
19
  box-sizing:border-box;
20
20
  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
21
21
  overflow-wrap:break-word;
22
- background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
22
+ background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
23
23
  }
24
24
  .tooltipContainer[data-disable-max-width=true]{
25
25
  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
@@ -30,7 +30,7 @@
30
30
  display:flex;
31
31
  align-items:center;
32
32
  justify-content:center;
33
- color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
33
+ color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
34
34
  }
35
35
 
36
36
  .pointerShape{
package/dist/cjs/style.css CHANGED
@@ -30,12 +30,20 @@
30
30
  }
31
31
  }
32
32
  .button[data-size=xs]{
33
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
34
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
33
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
34
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
35
+ }
36
+ .button[data-size=xs] svg{
37
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
38
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
35
39
  }
36
40
  .button[data-size=s]{
37
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
38
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
41
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
+ }
44
+ .button[data-size=s] svg{
45
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
46
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
39
47
  }
40
48
  .triggerClassName{
41
49
  --offset:var(--sn-popover-anatomy-privatePopover-offset, var(--sn-primitive-dimension-4, 4px));
@@ -47,10 +55,10 @@
47
55
  max-width:256px;
48
56
  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
49
57
  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
50
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
58
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
51
59
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
52
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
53
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
60
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
61
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
54
62
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
55
63
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
56
64
  display:flex;
@@ -58,7 +66,7 @@
58
66
  box-sizing:border-box;
59
67
  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
60
68
  overflow-wrap:break-word;
61
- background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
69
+ background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
62
70
  }
63
71
  .tooltipContainer[data-disable-max-width=true]{
64
72
  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
@@ -69,7 +77,7 @@
69
77
  display:flex;
70
78
  align-items:center;
71
79
  justify-content:center;
72
- color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
80
+ color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
73
81
  }
74
82
 
75
83
  .pointerShape{
package/dist/esm/components/QuestionTooltip/QuestionTooltip.js CHANGED
@@ -4,7 +4,6 @@ import { TRIGGER } from '@cloud-ru/ds-popover-private';
4
4
  import { useUncontrolledProp } from '@cloud-ru/ds-utils';
5
5
  import cn from 'classnames';
6
6
  import { SIZE, TEST_IDS } from '../../constants.js';
7
- import { getIconSize } from '../../utils.js';
8
7
  import { Tooltip } from '../Tooltip/index.js';
9
8
  import styles from './styles.module.css';
10
9
  /**
@@ -16,5 +15,5 @@ export function QuestionTooltip({ tip, triggerLabel = 'Подсказка', trig
16
15
  return (_jsx(Tooltip, { tip: tip, className: tooltipClassname, triggerClassName: styles.questionTooltipTrigger, open: isOpen, onOpenChange: setIsOpen, trigger: trigger, ...rest, children: _jsx("button", { type: 'button', "aria-label": triggerLabel, "data-opened": isOpen, "data-trigger": trigger, tabIndex: tabIndex, className: cn(styles.button, className), "data-size": size, "data-test-id": TEST_IDS.questionTooltip.triggerOpen,
17
16
  // Ref ведёт на саму кнопку, а не на span-обёртку popover'а: потребителю
18
17
  // нужен настоящий триггер (позиционирование, фокус).
19
- ref: triggerRef, children: _jsx(QuestionSVG, { size: getIconSize(size) }) }) }));
18
+ ref: triggerRef, children: _jsx(QuestionSVG, {}) }) }));
20
19
  }
package/dist/esm/components/QuestionTooltip/styles.module.css CHANGED
@@ -30,10 +30,18 @@
30
30
  }
31
31
  }
32
32
  .button[data-size=xs]{
33
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
34
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
33
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
34
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
35
+ }
36
+ .button[data-size=xs] svg{
37
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
38
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
35
39
  }
36
40
  .button[data-size=s]{
37
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
38
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
41
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
+ }
44
+ .button[data-size=s] svg{
45
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
46
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
39
47
  }
package/dist/esm/components/Tooltip/Tooltip.d.ts CHANGED
@@ -7,7 +7,7 @@ export type TooltipProps = WithSupportProps<{
7
7
  /** Отключение ограничения ширины тултипа @default false */
8
8
  disableMaxWidth?: boolean;
9
9
  }> & Pick<PopoverPrivateProps, 'className' | 'triggerClassName' | 'offset' | 'open' | 'onOpenChange' | 'hoverDelayOpen' | 'hoverDelayClose' | 'triggerRef' | 'disableSpanWrapper' | 'fallbackPlacements' | 'closeOnPopstate'> & Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement' | 'children'>>;
10
- export declare const DEFAULT_FALLBACK_PLACEMENTS: ("left" | "right" | "top" | "bottom")[];
10
+ export declare const DEFAULT_FALLBACK_PLACEMENTS: ("top" | "right" | "bottom" | "left")[];
11
11
  /**
12
12
  * Tooltip — всплывающая подсказка при наведении.
13
13
  * Стили и анатомия (отступы, скругления, макс. ширина) из @cloud-ru/ds-figma-variables.
package/dist/esm/components/Tooltip/styles.module.css CHANGED
@@ -8,10 +8,10 @@
8
8
  max-width:256px;
9
9
  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
10
10
  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
11
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
11
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
12
12
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
13
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
14
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
13
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
14
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
15
15
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
16
16
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
17
17
  display:flex;
@@ -19,7 +19,7 @@
19
19
  box-sizing:border-box;
20
20
  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
21
21
  overflow-wrap:break-word;
22
- background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
22
+ background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
23
23
  }
24
24
  .tooltipContainer[data-disable-max-width=true]{
25
25
  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
@@ -30,7 +30,7 @@
30
30
  display:flex;
31
31
  align-items:center;
32
32
  justify-content:center;
33
- color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
33
+ color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
34
34
  }
35
35
 
36
36
  .pointerShape{
package/dist/esm/style.css CHANGED
@@ -30,12 +30,20 @@
30
30
  }
31
31
  }
32
32
  .button[data-size=xs]{
33
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
34
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
33
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
34
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px)));
35
+ }
36
+ .button[data-size=xs] svg{
37
+ width:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
38
+ height:var(--sn-density-icon-xs, var(--sn-platform-comfort-icon-xs, var(--sn-primitive-dimension-24, 24px))) !important;
35
39
  }
36
40
  .button[data-size=s]{
37
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
38
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
41
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
42
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
43
+ }
44
+ .button[data-size=s] svg{
45
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
46
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px))) !important;
39
47
  }
40
48
  .triggerClassName{
41
49
  --offset:var(--sn-popover-anatomy-privatePopover-offset, var(--sn-primitive-dimension-4, 4px));
@@ -47,10 +55,10 @@
47
55
  max-width:256px;
48
56
  min-width:var(--sn-tooltip-anatomy-container-minWidth, var(--sn-primitive-dimension-32, 32px));
49
57
  min-height:var(--sn-tooltip-anatomy-container-minHeight, var(--sn-primitive-dimension-32, 32px));
50
- font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
58
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
51
59
  font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
52
- line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
53
- font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
60
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
61
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
54
62
  letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
55
63
  paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
56
64
  display:flex;
@@ -58,7 +66,7 @@
58
66
  box-sizing:border-box;
59
67
  color:var(--sn-theme-color-available-inversion-textMain, var(--sn-brand-color-text-inversion-main, #e6e8ef));
60
68
  overflow-wrap:break-word;
61
- background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
69
+ background:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
62
70
  }
63
71
  .tooltipContainer[data-disable-max-width=true]{
64
72
  max-width:calc(100vw - var(--sn-primitive-dimension-16, 16px));
@@ -69,7 +77,7 @@
69
77
  display:flex;
70
78
  align-items:center;
71
79
  justify-content:center;
72
- color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-15, var(--sn-primitive-color-gray-15, #333342)));
80
+ color:var(--sn-theme-color-invertNeutral-background2Level, var(--sn-brand-color-neutral-20, var(--sn-brand-palette-gray-20, #333342)));
73
81
  }
74
82
 
75
83
  .pointerShape{