@cloud-ru/ds-uikit-product-toggles-predefined 1.0.13 → 1.0.14-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 (20) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/components/ToggleCard/ToggleCard.js +1 -1
  3. package/dist/cjs/components/ToggleCard/styles.module.css +26 -31
  4. package/dist/cjs/components/ToggleCard/utils.js +1 -1
  5. package/dist/cjs/components/ToggleGroup/styles.module.css +3 -3
  6. package/dist/cjs/style.css +29 -34
  7. package/dist/cjs/types.d.ts +1 -0
  8. package/dist/esm/components/ToggleCard/ToggleCard.js +1 -1
  9. package/dist/esm/components/ToggleCard/styles.module.css +26 -31
  10. package/dist/esm/components/ToggleCard/utils.js +1 -1
  11. package/dist/esm/components/ToggleGroup/styles.module.css +3 -3
  12. package/dist/esm/style.css +29 -34
  13. package/dist/esm/types.d.ts +1 -0
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +7 -7
  17. package/src/components/ToggleCard/ToggleCard.tsx +6 -1
  18. package/src/components/ToggleCard/styles.module.scss +5 -6
  19. package/src/components/ToggleCard/utils.ts +1 -1
  20. package/src/types.ts +1 -0
package/README.md CHANGED
@@ -55,7 +55,7 @@
55
55
 
56
56
  - `title` — обязательный заголовок карточки.
57
57
  - `description` — опциональное описание под заголовком.
58
- - `emblem` — ведущая эмблема. **`IconPredefined`** встроен в компонент — передаются только его параметры (`icon`, `appearance`, `decor`, `shape`) либо картинка (`src` / `alt`).
58
+ - `emblem` — ведущая эмблема. **`IconPredefined`** встроен в компонент — передаются только его параметры (`icon`, `appearance`, `background`, `shape`; по умолчанию `background: true`, `shape: 'squared'`) либо картинка (`src` / `alt`).
59
59
  - `promoBadge` — промо-бейдж в правом верхнем углу (`string` или `{ text, appearance? }` для **`PromoTag`**).
60
60
  - `truncate` — максимум строк `title` и/или `description` (по умолчанию `title: 1`, `description: 2`).
61
61
 
@@ -204,7 +204,7 @@ export function Controlled() {
204
204
  | `data-test-id` | `string` | — | |
205
205
  | `description` | `string` | — | Основной текст под заголовком |
206
206
  | `disabled` | `boolean` | `false` | Заблокированное состояние: интерактив отключён |
207
- | `emblem` | `Emblem` \| `EmblemIcon` \| `EmblemPicture` | — | Ведущая эмблема. Передаются только параметры — сам `IconPredefined` <br/> встроен в компонент; `size` эмблемы выводится из `size` карточки. |
207
+ | `emblem` | `Emblem` \| `EmblemIcon` \| `EmblemPicture` | — | Ведущая эмблема. Передаются только параметры — сам `IconPredefined` <br/> встроен в компонент; `size` эмблемы выводится из `size` карточки. <br/> По умолчанию `background: true` и `shape: 'squared'`, как в макете. |
208
208
  | `promoBadge` | `PromoTagOwnProps` \| `PromoTagProps` | — | Промо-бейдж в правом верхнем углу карточки |
209
209
  | `size` | `"l"` \| `"m"` \| `"s"` | `m` | Размер карточки — масштабирует padding, gap, типографику и `radius` контейнера `@cloud-ru/ds-card` |
210
210
  | `title` | `string` | — | Заголовок карточки |
package/dist/cjs/components/ToggleCard/ToggleCard.js CHANGED
@@ -38,5 +38,5 @@ function ToggleCard({ title, value, description, emblem, promoBadge, size = cons
38
38
  title: truncate?.title ?? TRUNCATE_DEFAULTS.title,
39
39
  description: truncate?.description ?? TRUNCATE_DEFAULTS.description,
40
40
  };
41
- return ((0, jsx_runtime_1.jsxs)(card_1.Card, { className: (0, classnames_1.default)(styles_module_scss_1.default.card, className), view: card_1.VIEW.Outline, radius: size, checked: isChecked, disabled: disabled, role: multipleSelection ? 'checkbox' : 'radio', "aria-checked": isChecked, onClick: !disabled ? handleClick : undefined, onKeyDown: handleKeyDown, "data-test-id": constants_1.TEST_IDS.card, ...(0, utils_1.extractSupportProps)(rest), children: [promoBadge && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.promoBadge, "data-size": size, "data-test-id": constants_1.TEST_IDS.promoBadge, children: (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge), roleAppearance: 'decor' }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-size": size, children: [emblem && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.emblem, "data-test-id": constants_1.TEST_IDS.cardEmblem, "aria-hidden": (0, utils_2.isEmblemPicture)(emblem) ? undefined : true, children: (0, utils_2.isEmblemPicture)(emblem) ? ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.picture, src: emblem.src, alt: emblem.alt, "data-size": (0, utils_2.sizeToEmblemSize)(size) })) : ((0, jsx_runtime_1.jsx)(icon_predefined_1.IconPredefined, { ...emblem, size: (0, utils_2.sizeToEmblemSize)(size), background: emblem.background ?? false })) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContent, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.title, "data-test-id": constants_1.TEST_IDS.cardTitle, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: maxLines.title }) }), description && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.description, "data-test-id": constants_1.TEST_IDS.cardDescription, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: description, maxLines: maxLines.description }) }))] })] })] }));
41
+ return ((0, jsx_runtime_1.jsxs)(card_1.Card, { className: (0, classnames_1.default)(styles_module_scss_1.default.card, className), view: card_1.VIEW.Outline, radius: size, checked: isChecked, disabled: disabled, role: multipleSelection ? 'checkbox' : 'radio', "aria-checked": isChecked, onClick: !disabled ? handleClick : undefined, onKeyDown: handleKeyDown, "data-test-id": constants_1.TEST_IDS.card, ...(0, utils_1.extractSupportProps)(rest), children: [promoBadge && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.promoBadge, "data-size": size, "data-test-id": constants_1.TEST_IDS.promoBadge, children: (0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge), roleAppearance: 'decor' }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.content, "data-size": size, children: [emblem && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.emblem, "data-test-id": constants_1.TEST_IDS.cardEmblem, "aria-hidden": (0, utils_2.isEmblemPicture)(emblem) ? undefined : true, children: (0, utils_2.isEmblemPicture)(emblem) ? ((0, jsx_runtime_1.jsx)("img", { className: styles_module_scss_1.default.picture, src: emblem.src, alt: emblem.alt, "data-size": (0, utils_2.sizeToEmblemSize)(size) })) : ((0, jsx_runtime_1.jsx)(icon_predefined_1.IconPredefined, { ...emblem, size: (0, utils_2.sizeToEmblemSize)(size), background: emblem.background ?? true, shape: emblem.shape ?? 'squared' })) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.textContent, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.title, "data-test-id": constants_1.TEST_IDS.cardTitle, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: maxLines.title }) }), description && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.description, "data-test-id": constants_1.TEST_IDS.cardDescription, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: description, maxLines: maxLines.description }) }))] })] })] }));
42
42
  }
package/dist/cjs/components/ToggleCard/styles.module.css CHANGED
@@ -35,16 +35,16 @@
35
35
  width:100%;
36
36
  }
37
37
  .content[data-size=s]{
38
- gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
39
- padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
38
+ gap:var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px)));
39
+ padding:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
40
40
  }
41
41
  .content[data-size=m]{
42
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
43
- padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
42
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
43
+ padding:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
44
44
  }
45
45
  .content[data-size=l]{
46
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
47
- padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
46
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
47
+ padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
48
48
  }
49
49
 
50
50
  .emblem{
@@ -63,17 +63,12 @@
63
63
  .picture[data-size=m]{
64
64
  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
65
65
  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
66
- border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
67
- }
68
- .picture[data-size=l]{
69
- width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
70
- height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
71
- border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
66
+ border-radius:var(--sn-iconPredefined-anatomy-size-m-squared-borderRadius, var(--sn-primitive-dimension-6, 6px));
72
67
  }
73
68
  .picture[data-size="5xl"]{
74
69
  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
75
70
  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
76
- border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
71
+ border-radius:var(--sn-iconPredefined-anatomy-size-5xl-squared-borderRadius, var(--sn-primitive-dimension-12, 12px));
77
72
  }
78
73
 
79
74
  .textContent{
@@ -89,26 +84,26 @@
89
84
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
90
85
  }
91
86
  .content[data-size=s] .title{
92
- font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
87
+ font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
93
88
  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
94
- line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
95
- font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
89
+ line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-platform-comfort-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
+ font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-platform-comfort-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
96
91
  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
97
92
  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
98
93
  }
99
94
  .content[data-size=m] .title{
100
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
95
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
101
96
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
102
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
103
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
97
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
98
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
104
99
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
105
100
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
106
101
  }
107
102
  .content[data-size=l] .title{
108
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
103
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
109
104
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
110
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
111
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
105
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
106
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
112
107
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
113
108
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
114
109
  }
@@ -118,26 +113,26 @@
118
113
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
119
114
  }
120
115
  .content[data-size=s] .description{
121
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
116
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
122
117
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
123
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
124
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
118
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
119
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
125
120
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
126
121
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
127
122
  }
128
123
  .content[data-size=m] .description{
129
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
124
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
130
125
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
131
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
132
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
126
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
127
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
133
128
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
134
129
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
135
130
  }
136
131
  .content[data-size=l] .description{
137
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
132
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
138
133
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
139
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
134
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
135
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
141
136
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
142
137
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
143
138
  }
package/dist/cjs/components/ToggleCard/utils.js CHANGED
@@ -16,7 +16,7 @@ function sizeToEmblemSize(size) {
16
16
  return icon_predefined_1.SIZE['5XL'];
17
17
  case constants_1.SIZE.M:
18
18
  default:
19
- return icon_predefined_1.SIZE.L;
19
+ return icon_predefined_1.SIZE.M;
20
20
  }
21
21
  }
22
22
  function isEmblemPicture(emblem) {
package/dist/cjs/components/ToggleGroup/styles.module.css CHANGED
@@ -3,13 +3,13 @@
3
3
  display:grid;
4
4
  }
5
5
  .toggleGroup[data-gap=s]{
6
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
6
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
7
7
  }
8
8
  .toggleGroup[data-gap=m]{
9
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
9
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
10
10
  }
11
11
  .toggleGroup[data-gap=l]{
12
- gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
12
+ gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
13
13
  }
14
14
  .toggleGroup[data-orientation=horizontal]{
15
15
  grid-auto-rows:1fr;
package/dist/cjs/style.css CHANGED
@@ -35,16 +35,16 @@
35
35
  width:100%;
36
36
  }
37
37
  .content[data-size=s]{
38
- gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
39
- padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
38
+ gap:var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px)));
39
+ padding:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
40
40
  }
41
41
  .content[data-size=m]{
42
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
43
- padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
42
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
43
+ padding:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
44
44
  }
45
45
  .content[data-size=l]{
46
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
47
- padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
46
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
47
+ padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
48
48
  }
49
49
 
50
50
  .emblem{
@@ -63,17 +63,12 @@
63
63
  .picture[data-size=m]{
64
64
  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
65
65
  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
66
- border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
67
- }
68
- .picture[data-size=l]{
69
- width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
70
- height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
71
- border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
66
+ border-radius:var(--sn-iconPredefined-anatomy-size-m-squared-borderRadius, var(--sn-primitive-dimension-6, 6px));
72
67
  }
73
68
  .picture[data-size="5xl"]{
74
69
  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
75
70
  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
76
- border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
71
+ border-radius:var(--sn-iconPredefined-anatomy-size-5xl-squared-borderRadius, var(--sn-primitive-dimension-12, 12px));
77
72
  }
78
73
 
79
74
  .textContent{
@@ -89,26 +84,26 @@
89
84
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
90
85
  }
91
86
  .content[data-size=s] .title{
92
- font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
87
+ font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
93
88
  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
94
- line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
95
- font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
89
+ line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-platform-comfort-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
+ font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-platform-comfort-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
96
91
  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
97
92
  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
98
93
  }
99
94
  .content[data-size=m] .title{
100
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
95
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
101
96
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
102
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
103
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
97
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
98
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
104
99
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
105
100
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
106
101
  }
107
102
  .content[data-size=l] .title{
108
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
103
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
109
104
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
110
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
111
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
105
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
106
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
112
107
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
113
108
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
114
109
  }
@@ -118,26 +113,26 @@
118
113
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
119
114
  }
120
115
  .content[data-size=s] .description{
121
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
116
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
122
117
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
123
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
124
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
118
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
119
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
125
120
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
126
121
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
127
122
  }
128
123
  .content[data-size=m] .description{
129
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
124
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
130
125
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
131
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
132
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
126
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
127
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
133
128
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
134
129
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
135
130
  }
136
131
  .content[data-size=l] .description{
137
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
132
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
138
133
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
139
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
134
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
135
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
141
136
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
142
137
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
143
138
  }
@@ -146,13 +141,13 @@
146
141
  display:grid;
147
142
  }
148
143
  .toggleGroup[data-gap=s]{
149
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
144
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
150
145
  }
151
146
  .toggleGroup[data-gap=m]{
152
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
147
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
153
148
  }
154
149
  .toggleGroup[data-gap=l]{
155
- gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
150
+ gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
156
151
  }
157
152
  .toggleGroup[data-orientation=horizontal]{
158
153
  grid-auto-rows:1fr;
package/dist/cjs/types.d.ts CHANGED
@@ -26,6 +26,7 @@ export type ToggleCardProps = WithSupportProps<{
26
26
  /**
27
27
  * Ведущая эмблема. Передаются только параметры — сам `IconPredefined`
28
28
  * встроен в компонент; `size` эмблемы выводится из `size` карточки.
29
+ * По умолчанию `background: true` и `shape: 'squared'`, как в макете.
29
30
  */
30
31
  emblem?: Emblem;
31
32
  /** Промо-бейдж в правом верхнем углу карточки */
package/dist/esm/components/ToggleCard/ToggleCard.js CHANGED
@@ -32,5 +32,5 @@ export function ToggleCard({ title, value, description, emblem, promoBadge, size
32
32
  title: truncate?.title ?? TRUNCATE_DEFAULTS.title,
33
33
  description: truncate?.description ?? TRUNCATE_DEFAULTS.description,
34
34
  };
35
- return (_jsxs(Card, { className: cn(styles.card, className), view: VIEW.Outline, radius: size, checked: isChecked, disabled: disabled, role: multipleSelection ? 'checkbox' : 'radio', "aria-checked": isChecked, onClick: !disabled ? handleClick : undefined, onKeyDown: handleKeyDown, "data-test-id": TEST_IDS.card, ...extractSupportProps(rest), children: [promoBadge && (_jsx("div", { className: styles.promoBadge, "data-size": size, "data-test-id": TEST_IDS.promoBadge, children: _jsx(PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge), roleAppearance: 'decor' }) })), _jsxs("div", { className: styles.content, "data-size": size, children: [emblem && (_jsx("span", { className: styles.emblem, "data-test-id": TEST_IDS.cardEmblem, "aria-hidden": isEmblemPicture(emblem) ? undefined : true, children: isEmblemPicture(emblem) ? (_jsx("img", { className: styles.picture, src: emblem.src, alt: emblem.alt, "data-size": sizeToEmblemSize(size) })) : (_jsx(IconPredefined, { ...emblem, size: sizeToEmblemSize(size), background: emblem.background ?? false })) })), _jsxs("div", { className: styles.textContent, children: [_jsx("span", { className: styles.title, "data-test-id": TEST_IDS.cardTitle, children: _jsx(TruncateString, { text: title, maxLines: maxLines.title }) }), description && (_jsx("span", { className: styles.description, "data-test-id": TEST_IDS.cardDescription, children: _jsx(TruncateString, { text: description, maxLines: maxLines.description }) }))] })] })] }));
35
+ return (_jsxs(Card, { className: cn(styles.card, className), view: VIEW.Outline, radius: size, checked: isChecked, disabled: disabled, role: multipleSelection ? 'checkbox' : 'radio', "aria-checked": isChecked, onClick: !disabled ? handleClick : undefined, onKeyDown: handleKeyDown, "data-test-id": TEST_IDS.card, ...extractSupportProps(rest), children: [promoBadge && (_jsx("div", { className: styles.promoBadge, "data-size": size, "data-test-id": TEST_IDS.promoBadge, children: _jsx(PromoTag, { ...(typeof promoBadge === 'string' ? { label: promoBadge } : promoBadge), roleAppearance: 'decor' }) })), _jsxs("div", { className: styles.content, "data-size": size, children: [emblem && (_jsx("span", { className: styles.emblem, "data-test-id": TEST_IDS.cardEmblem, "aria-hidden": isEmblemPicture(emblem) ? undefined : true, children: isEmblemPicture(emblem) ? (_jsx("img", { className: styles.picture, src: emblem.src, alt: emblem.alt, "data-size": sizeToEmblemSize(size) })) : (_jsx(IconPredefined, { ...emblem, size: sizeToEmblemSize(size), background: emblem.background ?? true, shape: emblem.shape ?? 'squared' })) })), _jsxs("div", { className: styles.textContent, children: [_jsx("span", { className: styles.title, "data-test-id": TEST_IDS.cardTitle, children: _jsx(TruncateString, { text: title, maxLines: maxLines.title }) }), description && (_jsx("span", { className: styles.description, "data-test-id": TEST_IDS.cardDescription, children: _jsx(TruncateString, { text: description, maxLines: maxLines.description }) }))] })] })] }));
36
36
  }
package/dist/esm/components/ToggleCard/styles.module.css CHANGED
@@ -35,16 +35,16 @@
35
35
  width:100%;
36
36
  }
37
37
  .content[data-size=s]{
38
- gap:var(--sn-density-spacing-interval-xs, var(--sn-primitive-dimension-4, 4px));
39
- padding:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
38
+ gap:var(--sn-density-spacing-interval-xs, var(--sn-platform-comfort-spacing-interval-xs, var(--sn-primitive-dimension-8, 8px)));
39
+ padding:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
40
40
  }
41
41
  .content[data-size=m]{
42
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
43
- padding:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
42
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
43
+ padding:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
44
44
  }
45
45
  .content[data-size=l]{
46
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
47
- padding:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
46
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
47
+ padding:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
48
48
  }
49
49
 
50
50
  .emblem{
@@ -63,17 +63,12 @@
63
63
  .picture[data-size=m]{
64
64
  width:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
65
65
  height:var(--sn-iconPredefined-anatomy-size-m-square, var(--sn-primitive-dimension-32, 32px));
66
- border-radius:var(--sn-iconPredefined-anatomy-size-m-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
67
- }
68
- .picture[data-size=l]{
69
- width:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
70
- height:var(--sn-iconPredefined-anatomy-size-l-square, var(--sn-primitive-dimension-40, 40px));
71
- border-radius:var(--sn-iconPredefined-anatomy-size-l-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
66
+ border-radius:var(--sn-iconPredefined-anatomy-size-m-squared-borderRadius, var(--sn-primitive-dimension-6, 6px));
72
67
  }
73
68
  .picture[data-size="5xl"]{
74
69
  width:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
75
70
  height:var(--sn-iconPredefined-anatomy-size-5xl-square, var(--sn-primitive-dimension-80, 80px));
76
- border-radius:var(--sn-iconPredefined-anatomy-size-5xl-rounded-borderRadius, var(--sn-primitive-dimension-full, 10000px));
71
+ border-radius:var(--sn-iconPredefined-anatomy-size-5xl-squared-borderRadius, var(--sn-primitive-dimension-12, 12px));
77
72
  }
78
73
 
79
74
  .textContent{
@@ -89,26 +84,26 @@
89
84
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
90
85
  }
91
86
  .content[data-size=s] .title{
92
- font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
87
+ font-family:var(--sn-regular-title-s-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
93
88
  font-weight:var(--sn-regular-title-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-s, var(--sn-brand-font-fontWeight-light-regular-title-s, var(--sn-primitive-font-fontWeightValue-600, 600))));
94
- line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
95
- font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px)));
89
+ line-height:var(--sn-regular-title-s-lineHeight, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-platform-comfort-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
90
+ font-size:var(--sn-regular-title-s-fontSize, var(--sn-density-typography-roleTitle-fontSizeS, var(--sn-platform-comfort-typography-roleTitle-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
96
91
  letter-spacing:var(--sn-regular-title-s-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
97
92
  paragraph-spacing:var(--sn-regular-title-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
98
93
  }
99
94
  .content[data-size=m] .title{
100
- font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
95
+ font-family:var(--sn-regular-title-m-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
101
96
  font-weight:var(--sn-regular-title-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-m, var(--sn-brand-font-fontWeight-light-regular-title-m, var(--sn-primitive-font-fontWeightValue-600, 600))));
102
- line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
103
- font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
97
+ line-height:var(--sn-regular-title-m-lineHeight, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-platform-comfort-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
98
+ font-size:var(--sn-regular-title-m-fontSize, var(--sn-density-typography-roleTitle-fontSizeM, var(--sn-platform-comfort-typography-roleTitle-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
104
99
  letter-spacing:var(--sn-regular-title-m-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
105
100
  paragraph-spacing:var(--sn-regular-title-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
106
101
  }
107
102
  .content[data-size=l] .title{
108
- font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
103
+ font-family:var(--sn-regular-title-l-fontFamily, var(--sn-brand-font-fontFamily-regular-title, SB Sans Interface));
109
104
  font-weight:var(--sn-regular-title-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-title-l, var(--sn-brand-font-fontWeight-light-regular-title-l, var(--sn-primitive-font-fontWeightValue-600, 600))));
110
- line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
111
- font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
105
+ line-height:var(--sn-regular-title-l-lineHeight, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-platform-comfort-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
106
+ font-size:var(--sn-regular-title-l-fontSize, var(--sn-density-typography-roleTitle-fontSizeL, var(--sn-platform-comfort-typography-roleTitle-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px))));
112
107
  letter-spacing:var(--sn-regular-title-l-letterSpacing, var(--sn-primitive-font-letterSpacing-l, 0.15px));
113
108
  paragraph-spacing:var(--sn-regular-title-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize20, 10px));
114
109
  }
@@ -118,26 +113,26 @@
118
113
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
119
114
  }
120
115
  .content[data-size=s] .description{
121
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
116
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
122
117
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
123
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
124
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
118
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
119
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
125
120
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
126
121
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
127
122
  }
128
123
  .content[data-size=m] .description{
129
- font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
124
+ font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
130
125
  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
131
- line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
132
- font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
126
+ line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-platform-comfort-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-24, 24px))));
127
+ font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-platform-comfort-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px))));
133
128
  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
134
129
  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
135
130
  }
136
131
  .content[data-size=l] .description{
137
- font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
132
+ font-family:var(--sn-regular-body-l-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Interface));
138
133
  font-weight:var(--sn-regular-body-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-l, var(--sn-brand-font-fontWeight-light-regular-body-l, var(--sn-primitive-font-fontWeightValue-400, 400))));
139
- line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
134
+ line-height:var(--sn-regular-body-l-lineHeight, var(--sn-density-typography-roleBody-lineHeightL, var(--sn-platform-comfort-typography-roleBody-lineHeightL, var(--sn-primitive-font-lineHeight-28, 28px))));
135
+ font-size:var(--sn-regular-body-l-fontSize, var(--sn-density-typography-roleBody-fontSizeL, var(--sn-platform-comfort-typography-roleBody-fontSizeL, var(--sn-primitive-font-fontSize-18, 18px))));
141
136
  letter-spacing:var(--sn-regular-body-l-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
142
137
  paragraph-spacing:var(--sn-regular-body-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize16, 8px));
143
138
  }
package/dist/esm/components/ToggleCard/utils.js CHANGED
@@ -12,7 +12,7 @@ export function sizeToEmblemSize(size) {
12
12
  return ICON_SIZE['5XL'];
13
13
  case SIZE.M:
14
14
  default:
15
- return ICON_SIZE.L;
15
+ return ICON_SIZE.M;
16
16
  }
17
17
  }
18
18
  export function isEmblemPicture(emblem) {
package/dist/esm/components/ToggleGroup/styles.module.css CHANGED
@@ -3,13 +3,13 @@
3
3
  display:grid;
4
4
  }
5
5
  .toggleGroup[data-gap=s]{
6
- gap:var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px));
6
+ gap:var(--sn-density-spacing-interval-s, var(--sn-platform-comfort-spacing-interval-s, var(--sn-primitive-dimension-12, 12px)));
7
7
  }
8
8
  .toggleGroup[data-gap=m]{
9
- gap:var(--sn-density-spacing-interval-m, var(--sn-primitive-dimension-16, 16px));
9
+ gap:var(--sn-density-spacing-interval-m, var(--sn-platform-comfort-spacing-interval-m, var(--sn-primitive-dimension-24, 24px)));
10
10
  }
11
11
  .toggleGroup[data-gap=l]{
12
- gap:var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px));
12
+ gap:var(--sn-density-spacing-interval-l, var(--sn-platform-comfort-spacing-interval-l, var(--sn-primitive-dimension-32, 32px)));
13
13
  }
14
14
  .toggleGroup[data-orientation=horizontal]{
15
15
  grid-auto-rows:1fr;