@cloud-ru/ds-promo-tag 1.0.1 → 1.0.2-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 (17) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/PromoTag/PromoTag.js +1 -2
  3. package/dist/cjs/PromoTag/styles.module.css +72 -39
  4. package/dist/cjs/constants.d.ts +0 -3
  5. package/dist/cjs/constants.js +1 -6
  6. package/dist/cjs/style.css +72 -39
  7. package/dist/esm/PromoTag/PromoTag.js +2 -3
  8. package/dist/esm/PromoTag/styles.module.css +72 -39
  9. package/dist/esm/constants.d.ts +0 -3
  10. package/dist/esm/constants.js +0 -5
  11. package/dist/esm/style.css +72 -39
  12. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  14. package/package.json +3 -4
  15. package/src/PromoTag/PromoTag.tsx +4 -11
  16. package/src/PromoTag/styles.module.scss +17 -0
  17. package/src/constants.ts +0 -10
package/README.md CHANGED
@@ -111,11 +111,11 @@ export function Polymorphic() {
111
111
  |------|------|---------|-------------|
112
112
  | `afterContent` | `ReactNode` | `null` | Контент после текста |
113
113
  | `appearance` | `"blue"` \| `"green"` \| `"neutral"` \| `"orange"` \| `"pink"` \| `"primary"` \| `"red"` \| `"violet"` \| `"yellow"` | `primary` | Внешний вид |
114
- | `as` | `T` | — | Элемент или компонент для рендера: 'button' \| 'a' \| Link из react-router-dom и т.п. |
114
+ | `as` | `ElementType` | — | Элемент или компонент для рендера: 'button' \| 'a' \| Link из react-router-dom и т.п. |
115
115
  | `beforeContent` | `ReactNode` | `null` | Контент перед текстом |
116
116
  | `className` | `string` | — | CSS-класс |
117
117
  | `data-test-id` | `string` | — | |
118
- | `innerRef` | `PolymorphicRef` \| `T` | — | Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. <br/> Явный проп вместо forwardRef — как в Button и AiToolBadge. |
118
+ | `innerRef` | `PolymorphicRef` | — | Ref на реальный DOM-элемент/инстанс, который рендерится через `as`. <br/> Явный проп вместо forwardRef — как в Button и AiToolBadge. |
119
119
  | `label` | `string` | — | Текст компонента |
120
120
  | `onClick` | `MouseEventHandler<HTMLElement>` | — | Колбэк для обработки клика на тег |
121
121
  | `roleAppearance` | `"accent"` \| `"decor"` | `accent` | Роль, в которой применяется `appearance`: акцентная заливка или декоративная |
package/dist/cjs/PromoTag/PromoTag.js CHANGED
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.PromoTag = PromoTag;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const typography_1 = require("@cloud-ru/ds-typography");
9
8
  const utils_1 = require("@cloud-ru/ds-utils");
10
9
  const classnames_1 = __importDefault(require("classnames"));
11
10
  const constants_1 = require("../constants");
@@ -17,6 +16,6 @@ function PromoTag({ appearance = constants_1.APPEARANCE.Primary, size = constant
17
16
  const spreadProps = isInteractive
18
17
  ? (0, utils_2.getSpreadProps)({ Component, rest: rest, onClick })
19
18
  : rest;
20
- return ((0, jsx_runtime_1.jsxs)(Component, { ref: innerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), "data-appearance": appearance, "data-role-appearance": roleAppearance, "data-size": size, "data-clickable": isInteractive || undefined, ...spreadProps, children: [isInteractive && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": 'emptyDarkOnAccent' }), beforeContent, Boolean(label) && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.labelWrapper, children: (0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'label', size: constants_1.MAP_SIZE_TO_TYPOGRAPHY_SIZE[size], children: label }) })), afterContent] }));
19
+ return ((0, jsx_runtime_1.jsxs)(Component, { ref: innerRef, className: (0, classnames_1.default)(styles_module_scss_1.default.container, className), "data-appearance": appearance, "data-role-appearance": roleAppearance, "data-size": size, "data-clickable": isInteractive || undefined, ...spreadProps, children: [isInteractive && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": 'emptyDarkOnAccent' }), beforeContent && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.element, children: beforeContent }), Boolean(label) && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.labelWrapper, children: label }), afterContent && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.element, children: afterContent })] }));
21
20
  }
22
21
  (0, utils_1.withInnerRefSupport)(PromoTag);
package/dist/cjs/PromoTag/styles.module.css CHANGED
@@ -51,7 +51,7 @@
51
51
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
52
52
  }
53
53
  .container[data-clickable] .stateLayer[data-state=activatedOnBackground]{
54
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
55
55
  }
56
56
  .container[data-clickable] .stateLayer[data-state=versionOnColor]{
57
57
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -76,7 +76,7 @@
76
76
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
77
77
  }
78
78
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
79
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
80
80
  }
81
81
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
82
82
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -103,7 +103,7 @@
103
103
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
104
104
  }
105
105
  .container[data-clickable][data-loading] .stateLayer[data-state=activatedOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
106
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
107
107
  }
108
108
  .container[data-clickable][data-loading] .stateLayer[data-state=versionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
109
109
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -127,76 +127,76 @@
127
127
  text-decoration:none;
128
128
  }
129
129
  .container[data-appearance=blue][data-role-appearance=accent]{
130
- color:var(--sn-theme-color-blue-onAccent, var(--sn-primitive-color-blue-99, #fdfeff));
131
- background-color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
130
+ color:var(--sn-theme-color-blue-onAccent, var(--sn-brand-palette-blue-99, #fdfeff));
131
+ background-color:var(--sn-theme-color-blue-accent, var(--sn-brand-palette-blue-50, #4387e2));
132
132
  }
133
133
  .container[data-appearance=blue][data-role-appearance=decor]{
134
- color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
135
- background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
134
+ color:var(--sn-theme-color-blue-text, var(--sn-brand-palette-blue-40, #3b6fad));
135
+ background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
136
136
  }
137
137
  .container[data-appearance=green][data-role-appearance=accent]{
138
- color:var(--sn-theme-color-green-onAccent, var(--sn-primitive-color-green-99, #fcfefa));
139
- background-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
138
+ color:var(--sn-theme-color-green-onAccent, var(--sn-brand-palette-green-99, #fcfefa));
139
+ background-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
140
140
  }
141
141
  .container[data-appearance=green][data-role-appearance=decor]{
142
- color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
143
- background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
142
+ color:var(--sn-theme-color-green-text, var(--sn-brand-palette-green-40, #438b4b));
143
+ background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
- color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
147
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
146
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
148
148
  }
149
149
  .container[data-appearance=neutral][data-role-appearance=decor]{
150
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
151
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
- color:var(--sn-theme-color-orange-onAccent, var(--sn-primitive-color-orange-99, #fffcf4));
155
- background-color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
154
+ color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
155
+ background-color:var(--sn-theme-color-orange-accent, var(--sn-brand-palette-orange-50, #f57e1f));
156
156
  }
157
157
  .container[data-appearance=orange][data-role-appearance=decor]{
158
- color:var(--sn-theme-color-orange-text, var(--sn-primitive-color-orange-45, #c46917));
159
- background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
158
+ color:var(--sn-theme-color-orange-text, var(--sn-brand-palette-orange-40, #c46917));
159
+ background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
160
160
  }
161
161
  .container[data-appearance=pink][data-role-appearance=accent]{
162
- color:var(--sn-theme-color-pink-onAccent, var(--sn-primitive-color-pink-99, #fdfcfc));
163
- background-color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
162
+ color:var(--sn-theme-color-pink-onAccent, var(--sn-brand-palette-pink-99, #fdfcfc));
163
+ background-color:var(--sn-theme-color-pink-accent, var(--sn-brand-palette-pink-50, #dd5a8e));
164
164
  }
165
165
  .container[data-appearance=pink][data-role-appearance=decor]{
166
- color:var(--sn-theme-color-pink-text, var(--sn-primitive-color-pink-45, #a85278));
167
- background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
166
+ color:var(--sn-theme-color-pink-text, var(--sn-brand-palette-pink-40, #a85278));
167
+ background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
168
168
  }
169
169
  .container[data-appearance=primary][data-role-appearance=accent]{
170
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
172
172
  }
173
173
  .container[data-appearance=primary][data-role-appearance=decor]{
174
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
179
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
178
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
179
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
180
180
  }
181
181
  .container[data-appearance=red][data-role-appearance=decor]{
182
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
183
- background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
182
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
183
+ background-color:var(--sn-theme-color-red-decor, var(--sn-brand-palette-red-80, #fdd6cd));
184
184
  }
185
185
  .container[data-appearance=violet][data-role-appearance=accent]{
186
- color:var(--sn-theme-color-violet-onAccent, var(--sn-primitive-color-violet-99, #fdfdfd));
187
- background-color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
186
+ color:var(--sn-theme-color-violet-onAccent, var(--sn-brand-palette-violet-99, #fdfdfd));
187
+ background-color:var(--sn-theme-color-violet-accent, var(--sn-brand-palette-violet-50, #b163cc));
188
188
  }
189
189
  .container[data-appearance=violet][data-role-appearance=decor]{
190
- color:var(--sn-theme-color-violet-text, var(--sn-primitive-color-violet-45, #875699));
191
- background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
190
+ color:var(--sn-theme-color-violet-text, var(--sn-brand-palette-violet-40, #875699));
191
+ background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
192
192
  }
193
193
  .container[data-appearance=yellow][data-role-appearance=accent]{
194
- color:var(--sn-theme-color-yellow-onAccent, var(--sn-primitive-color-yellow-25, #724c08));
195
- background-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
194
+ color:var(--sn-theme-color-yellow-onAccent, var(--sn-brand-palette-yellow-30, #724c08));
195
+ background-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
196
196
  }
197
197
  .container[data-appearance=yellow][data-role-appearance=decor]{
198
- color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
199
- background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
198
+ color:var(--sn-theme-color-yellow-text, var(--sn-brand-palette-yellow-40, #ab7a08));
199
+ background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
200
200
  }
201
201
  .container:focus-visible{
202
202
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -208,11 +208,44 @@
208
208
  align-items:center;
209
209
  }
210
210
  [data-size=xs] .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
212
+ font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
+ line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
+ font-weight:var(--sn-promoTag-anatomy-size-xs-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
215
+ letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
211
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
212
217
  }
213
218
  [data-size=s] .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
220
+ font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
+ line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
+ font-weight:var(--sn-promoTag-anatomy-size-s-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
223
+ letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
214
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
215
225
  }
216
226
  [data-size=m] .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
228
+ font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
+ line-height:var(--sn-promoTag-anatomy-size-m-text-lineHeight, var(--sn-primitive-font-lineHeight-16, 16px));
230
+ font-weight:var(--sn-promoTag-anatomy-size-m-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
231
+ letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
217
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
+ }
234
+
235
+ .element{
236
+ display:inline-flex;
237
+ flex-shrink:0;
238
+ align-items:center;
239
+ }
240
+ [data-size=xs] .element svg{
241
+ width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
+ height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
+ }
244
+ [data-size=s] .element svg{
245
+ width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
+ height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
+ }
248
+ [data-size=m] .element svg{
249
+ width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
+ height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
218
251
  }
package/dist/cjs/constants.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- import { TypographySize } from '@cloud-ru/ds-typography';
2
- import { Size } from './types';
3
1
  export declare const APPEARANCE: {
4
2
  readonly Neutral: "neutral";
5
3
  readonly Primary: "primary";
@@ -20,7 +18,6 @@ export declare const ROLE_APPEARANCE: {
20
18
  readonly Accent: "accent";
21
19
  readonly Decor: "decor";
22
20
  };
23
- export declare const MAP_SIZE_TO_TYPOGRAPHY_SIZE: Record<Size, TypographySize>;
24
21
  export declare const TEST_IDS: {
25
22
  readonly root: "promo-tag";
26
23
  };
package/dist/cjs/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TEST_IDS = exports.MAP_SIZE_TO_TYPOGRAPHY_SIZE = exports.ROLE_APPEARANCE = exports.SIZE = exports.APPEARANCE = void 0;
3
+ exports.TEST_IDS = exports.ROLE_APPEARANCE = exports.SIZE = exports.APPEARANCE = void 0;
4
4
  exports.APPEARANCE = {
5
5
  Neutral: 'neutral',
6
6
  Primary: 'primary',
@@ -21,11 +21,6 @@ exports.ROLE_APPEARANCE = {
21
21
  Accent: 'accent',
22
22
  Decor: 'decor',
23
23
  };
24
- exports.MAP_SIZE_TO_TYPOGRAPHY_SIZE = {
25
- [exports.SIZE.Xs]: 's',
26
- [exports.SIZE.S]: 's',
27
- [exports.SIZE.M]: 'm',
28
- };
29
24
  exports.TEST_IDS = {
30
25
  root: 'promo-tag',
31
26
  };
package/dist/cjs/style.css CHANGED
@@ -51,7 +51,7 @@
51
51
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
52
52
  }
53
53
  .container[data-clickable] .stateLayer[data-state=activatedOnBackground]{
54
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
55
55
  }
56
56
  .container[data-clickable] .stateLayer[data-state=versionOnColor]{
57
57
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -76,7 +76,7 @@
76
76
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
77
77
  }
78
78
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
79
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
80
80
  }
81
81
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
82
82
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -103,7 +103,7 @@
103
103
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
104
104
  }
105
105
  .container[data-clickable][data-loading] .stateLayer[data-state=activatedOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
106
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
107
107
  }
108
108
  .container[data-clickable][data-loading] .stateLayer[data-state=versionOnColor], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
109
109
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -127,76 +127,76 @@
127
127
  text-decoration:none;
128
128
  }
129
129
  .container[data-appearance=blue][data-role-appearance=accent]{
130
- color:var(--sn-theme-color-blue-onAccent, var(--sn-primitive-color-blue-99, #fdfeff));
131
- background-color:var(--sn-theme-color-blue-accent, var(--sn-primitive-color-blue-55, #4387e2));
130
+ color:var(--sn-theme-color-blue-onAccent, var(--sn-brand-palette-blue-99, #fdfeff));
131
+ background-color:var(--sn-theme-color-blue-accent, var(--sn-brand-palette-blue-50, #4387e2));
132
132
  }
133
133
  .container[data-appearance=blue][data-role-appearance=decor]{
134
- color:var(--sn-theme-color-blue-text, var(--sn-primitive-color-blue-45, #3b6fad));
135
- background-color:var(--sn-theme-color-blue-decor, var(--sn-primitive-color-blue-80, #d6e2f4));
134
+ color:var(--sn-theme-color-blue-text, var(--sn-brand-palette-blue-40, #3b6fad));
135
+ background-color:var(--sn-theme-color-blue-decor, var(--sn-brand-palette-blue-80, #d6e2f4));
136
136
  }
137
137
  .container[data-appearance=green][data-role-appearance=accent]{
138
- color:var(--sn-theme-color-green-onAccent, var(--sn-primitive-color-green-99, #fcfefa));
139
- background-color:var(--sn-theme-color-green-accent, var(--sn-primitive-color-green-55, #41b954));
138
+ color:var(--sn-theme-color-green-onAccent, var(--sn-brand-palette-green-99, #fcfefa));
139
+ background-color:var(--sn-theme-color-green-accent, var(--sn-brand-palette-green-50, #41b954));
140
140
  }
141
141
  .container[data-appearance=green][data-role-appearance=decor]{
142
- color:var(--sn-theme-color-green-text, var(--sn-primitive-color-green-45, #438b4b));
143
- background-color:var(--sn-theme-color-green-decor, var(--sn-primitive-color-green-80, #d2ead0));
142
+ color:var(--sn-theme-color-green-text, var(--sn-brand-palette-green-40, #438b4b));
143
+ background-color:var(--sn-theme-color-green-decor, var(--sn-brand-palette-green-80, #d2ead0));
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
- color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
147
- background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-55, var(--sn-primitive-color-gray-55, #8b8fa7)));
146
+ color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
148
148
  }
149
149
  .container[data-appearance=neutral][data-role-appearance=decor]{
150
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
151
- background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-primitive-color-gray-80, #e3e5ed)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
- color:var(--sn-theme-color-orange-onAccent, var(--sn-primitive-color-orange-99, #fffcf4));
155
- background-color:var(--sn-theme-color-orange-accent, var(--sn-primitive-color-orange-55, #f57e1f));
154
+ color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
155
+ background-color:var(--sn-theme-color-orange-accent, var(--sn-brand-palette-orange-50, #f57e1f));
156
156
  }
157
157
  .container[data-appearance=orange][data-role-appearance=decor]{
158
- color:var(--sn-theme-color-orange-text, var(--sn-primitive-color-orange-45, #c46917));
159
- background-color:var(--sn-theme-color-orange-decor, var(--sn-primitive-color-orange-80, #fbdeb6));
158
+ color:var(--sn-theme-color-orange-text, var(--sn-brand-palette-orange-40, #c46917));
159
+ background-color:var(--sn-theme-color-orange-decor, var(--sn-brand-palette-orange-80, #fbdeb6));
160
160
  }
161
161
  .container[data-appearance=pink][data-role-appearance=accent]{
162
- color:var(--sn-theme-color-pink-onAccent, var(--sn-primitive-color-pink-99, #fdfcfc));
163
- background-color:var(--sn-theme-color-pink-accent, var(--sn-primitive-color-pink-55, #dd5a8e));
162
+ color:var(--sn-theme-color-pink-onAccent, var(--sn-brand-palette-pink-99, #fdfcfc));
163
+ background-color:var(--sn-theme-color-pink-accent, var(--sn-brand-palette-pink-50, #dd5a8e));
164
164
  }
165
165
  .container[data-appearance=pink][data-role-appearance=decor]{
166
- color:var(--sn-theme-color-pink-text, var(--sn-primitive-color-pink-45, #a85278));
167
- background-color:var(--sn-theme-color-pink-decor, var(--sn-primitive-color-pink-80, #f5d9e1));
166
+ color:var(--sn-theme-color-pink-text, var(--sn-brand-palette-pink-40, #a85278));
167
+ background-color:var(--sn-theme-color-pink-decor, var(--sn-brand-palette-pink-80, #f5d9e1));
168
168
  }
169
169
  .container[data-appearance=primary][data-role-appearance=accent]{
170
- color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brandRole-color-brandA-onAccentLight, var(--sn-primitive-color-brandA-99, #fbfffc))));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, var(--sn-brand-color-primary-99, #fbfffc)));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
172
172
  }
173
173
  .container[data-appearance=primary][data-role-appearance=decor]{
174
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, var(--sn-brandRole-color-brandA-80, var(--sn-primitive-color-brandA-80, #caeadb))));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
- color:var(--sn-theme-color-red-onAccent, var(--sn-primitive-color-red-99, #fffaf7));
179
- background-color:var(--sn-theme-color-red-accent, var(--sn-primitive-color-red-55, #d52e33));
178
+ color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
179
+ background-color:var(--sn-theme-color-red-accent, var(--sn-brand-palette-red-50, #d52e33));
180
180
  }
181
181
  .container[data-appearance=red][data-role-appearance=decor]{
182
- color:var(--sn-theme-color-red-text, var(--sn-primitive-color-red-45, #a93533));
183
- background-color:var(--sn-theme-color-red-decor, var(--sn-primitive-color-red-80, #fdd6cd));
182
+ color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
183
+ background-color:var(--sn-theme-color-red-decor, var(--sn-brand-palette-red-80, #fdd6cd));
184
184
  }
185
185
  .container[data-appearance=violet][data-role-appearance=accent]{
186
- color:var(--sn-theme-color-violet-onAccent, var(--sn-primitive-color-violet-99, #fdfdfd));
187
- background-color:var(--sn-theme-color-violet-accent, var(--sn-primitive-color-violet-55, #b163cc));
186
+ color:var(--sn-theme-color-violet-onAccent, var(--sn-brand-palette-violet-99, #fdfdfd));
187
+ background-color:var(--sn-theme-color-violet-accent, var(--sn-brand-palette-violet-50, #b163cc));
188
188
  }
189
189
  .container[data-appearance=violet][data-role-appearance=decor]{
190
- color:var(--sn-theme-color-violet-text, var(--sn-primitive-color-violet-45, #875699));
191
- background-color:var(--sn-theme-color-violet-decor, var(--sn-primitive-color-violet-80, #e6dcf3));
190
+ color:var(--sn-theme-color-violet-text, var(--sn-brand-palette-violet-40, #875699));
191
+ background-color:var(--sn-theme-color-violet-decor, var(--sn-brand-palette-violet-80, #e6dcf3));
192
192
  }
193
193
  .container[data-appearance=yellow][data-role-appearance=accent]{
194
- color:var(--sn-theme-color-yellow-onAccent, var(--sn-primitive-color-yellow-25, #724c08));
195
- background-color:var(--sn-theme-color-yellow-accent, var(--sn-primitive-color-yellow-55, #f3b917));
194
+ color:var(--sn-theme-color-yellow-onAccent, var(--sn-brand-palette-yellow-30, #724c08));
195
+ background-color:var(--sn-theme-color-yellow-accent, var(--sn-brand-palette-yellow-50, #f3b917));
196
196
  }
197
197
  .container[data-appearance=yellow][data-role-appearance=decor]{
198
- color:var(--sn-theme-color-yellow-text, var(--sn-primitive-color-yellow-45, #ab7a08));
199
- background-color:var(--sn-theme-color-yellow-decor, var(--sn-primitive-color-yellow-80, #f0dfb1));
198
+ color:var(--sn-theme-color-yellow-text, var(--sn-brand-palette-yellow-40, #ab7a08));
199
+ background-color:var(--sn-theme-color-yellow-decor, var(--sn-brand-palette-yellow-80, #f0dfb1));
200
200
  }
201
201
  .container:focus-visible{
202
202
  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
@@ -208,11 +208,44 @@
208
208
  align-items:center;
209
209
  }
210
210
  [data-size=xs] .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
212
+ font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
+ line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
+ font-weight:var(--sn-promoTag-anatomy-size-xs-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
215
+ letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
211
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
212
217
  }
213
218
  [data-size=s] .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
220
+ font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
+ line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
+ font-weight:var(--sn-promoTag-anatomy-size-s-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-s, var(--sn-brand-font-fontWeight-light-regular-label-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
223
+ letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
214
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
215
225
  }
216
226
  [data-size=m] .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Interface"));
228
+ font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
+ line-height:var(--sn-promoTag-anatomy-size-m-text-lineHeight, var(--sn-primitive-font-lineHeight-16, 16px));
230
+ font-weight:var(--sn-promoTag-anatomy-size-m-text-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
231
+ letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
217
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
+ }
234
+
235
+ .element{
236
+ display:inline-flex;
237
+ flex-shrink:0;
238
+ align-items:center;
239
+ }
240
+ [data-size=xs] .element svg{
241
+ width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
+ height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
+ }
244
+ [data-size=s] .element svg{
245
+ width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
+ height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
+ }
248
+ [data-size=m] .element svg{
249
+ width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
+ height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
218
251
  }
package/dist/esm/PromoTag/PromoTag.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Typography } from '@cloud-ru/ds-typography';
3
2
  import { withInnerRefSupport } from '@cloud-ru/ds-utils';
4
3
  import cn from 'classnames';
5
- import { APPEARANCE, MAP_SIZE_TO_TYPOGRAPHY_SIZE, ROLE_APPEARANCE, SIZE } from '../constants.js';
4
+ import { APPEARANCE, ROLE_APPEARANCE, SIZE } from '../constants.js';
6
5
  import styles from './styles.module.css';
7
6
  import { getSpreadProps } from './utils.js';
8
7
  export function PromoTag({ appearance = APPEARANCE.Primary, size = SIZE.S, roleAppearance = ROLE_APPEARANCE.Accent, className, label, beforeContent = null, afterContent = null, onClick, as, innerRef, ...rest }) {
@@ -11,6 +10,6 @@ export function PromoTag({ appearance = APPEARANCE.Primary, size = SIZE.S, roleA
11
10
  const spreadProps = isInteractive
12
11
  ? getSpreadProps({ Component, rest: rest, onClick })
13
12
  : rest;
14
- return (_jsxs(Component, { ref: innerRef, className: cn(styles.container, className), "data-appearance": appearance, "data-role-appearance": roleAppearance, "data-size": size, "data-clickable": isInteractive || undefined, ...spreadProps, children: [isInteractive && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": 'emptyDarkOnAccent' }), beforeContent, Boolean(label) && (_jsx("span", { className: styles.labelWrapper, children: _jsx(Typography, { as: 'span', variant: 'label', size: MAP_SIZE_TO_TYPOGRAPHY_SIZE[size], children: label }) })), afterContent] }));
13
+ return (_jsxs(Component, { ref: innerRef, className: cn(styles.container, className), "data-appearance": appearance, "data-role-appearance": roleAppearance, "data-size": size, "data-clickable": isInteractive || undefined, ...spreadProps, children: [isInteractive && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": 'emptyDarkOnAccent' }), beforeContent && _jsx("span", { className: styles.element, children: beforeContent }), Boolean(label) && _jsx("span", { className: styles.labelWrapper, children: label }), afterContent && _jsx("span", { className: styles.element, children: afterContent })] }));
15
14
  }
16
15
  withInnerRefSupport(PromoTag);