@cloud-ru/ds-promo-tag 1.0.2 → 1.0.4-preview-038cf752.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 (9) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/cjs/PromoTag/styles.module.css +26 -26
  3. package/dist/cjs/style.css +26 -26
  4. package/dist/esm/PromoTag/styles.module.css +26 -26
  5. package/dist/esm/style.css +26 -26
  6. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  7. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  8. package/package.json +3 -3
  9. package/src/PromoTag/styles.module.scss +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.3 (2026-09-28)
7
+
8
+ **Note:** Version bump only for package @ds/promo-tag
9
+
6
10
  ## 1.0.2 (2026-09-25)
7
11
 
8
12
  ### Bug Fixes
package/dist/cjs/PromoTag/styles.module.css CHANGED
@@ -43,15 +43,15 @@
43
43
  border-radius:inherit;
44
44
  }
45
45
  .container[data-clickable] .stateLayer[data-state=borderOnBackground]{
46
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
46
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
47
47
  border-style:solid;
48
48
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
49
49
  }
50
50
  .container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
51
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 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, rgba(56, 159, 116, 0.1019607843)));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
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));
@@ -70,13 +70,13 @@
70
70
  }
71
71
  @media (hover: hover){
72
72
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
73
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
73
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
74
74
  }
75
75
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
76
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
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, rgba(56, 159, 116, 0.2)));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
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));
@@ -97,13 +97,13 @@
97
97
  .container[data-clickable]{
98
98
  }
99
99
  .container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
100
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
100
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
101
101
  }
102
102
  .container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
103
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
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, rgba(56, 159, 116, 0.3019607843)));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
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));
@@ -144,11 +144,11 @@
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
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)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
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-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)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
154
  color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
@@ -167,12 +167,12 @@
167
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-brand-color-primary-99, #fbfffc)));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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-40, #22775b));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
178
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
@@ -207,27 +207,27 @@
207
207
  display:flex;
208
208
  align-items:center;
209
209
  }
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"));
210
+ .container[data-size=xs] > .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
212
212
  font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
213
  line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
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
215
  letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
216
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
217
217
  }
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"));
218
+ .container[data-size=s] > .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
220
220
  font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
221
  line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
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
223
  letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
225
225
  }
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"));
226
+ .container[data-size=m] > .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
228
228
  font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
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))));
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-500, 500))));
231
231
  letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
232
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
233
  }
@@ -237,15 +237,15 @@
237
237
  flex-shrink:0;
238
238
  align-items:center;
239
239
  }
240
- [data-size=xs] .element svg{
240
+ .container[data-size=xs] > .element svg{
241
241
  width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
242
  height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
243
  }
244
- [data-size=s] .element svg{
244
+ .container[data-size=s] > .element svg{
245
245
  width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
246
  height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
247
  }
248
- [data-size=m] .element svg{
248
+ .container[data-size=m] > .element svg{
249
249
  width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
250
  height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
251
251
  }
package/dist/cjs/style.css CHANGED
@@ -43,15 +43,15 @@
43
43
  border-radius:inherit;
44
44
  }
45
45
  .container[data-clickable] .stateLayer[data-state=borderOnBackground]{
46
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
46
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
47
47
  border-style:solid;
48
48
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
49
49
  }
50
50
  .container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
51
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 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, rgba(56, 159, 116, 0.1019607843)));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
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));
@@ -70,13 +70,13 @@
70
70
  }
71
71
  @media (hover: hover){
72
72
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
73
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
73
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
74
74
  }
75
75
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
76
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
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, rgba(56, 159, 116, 0.2)));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
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));
@@ -97,13 +97,13 @@
97
97
  .container[data-clickable]{
98
98
  }
99
99
  .container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
100
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
100
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
101
101
  }
102
102
  .container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
103
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
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, rgba(56, 159, 116, 0.3019607843)));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
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));
@@ -144,11 +144,11 @@
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
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)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
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-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)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
154
  color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
@@ -167,12 +167,12 @@
167
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-brand-color-primary-99, #fbfffc)));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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-40, #22775b));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
178
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
@@ -207,27 +207,27 @@
207
207
  display:flex;
208
208
  align-items:center;
209
209
  }
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"));
210
+ .container[data-size=xs] > .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
212
212
  font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
213
  line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
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
215
  letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
216
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
217
217
  }
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"));
218
+ .container[data-size=s] > .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
220
220
  font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
221
  line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
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
223
  letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
225
225
  }
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"));
226
+ .container[data-size=m] > .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
228
228
  font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
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))));
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-500, 500))));
231
231
  letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
232
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
233
  }
@@ -237,15 +237,15 @@
237
237
  flex-shrink:0;
238
238
  align-items:center;
239
239
  }
240
- [data-size=xs] .element svg{
240
+ .container[data-size=xs] > .element svg{
241
241
  width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
242
  height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
243
  }
244
- [data-size=s] .element svg{
244
+ .container[data-size=s] > .element svg{
245
245
  width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
246
  height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
247
  }
248
- [data-size=m] .element svg{
248
+ .container[data-size=m] > .element svg{
249
249
  width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
250
  height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
251
251
  }
package/dist/esm/PromoTag/styles.module.css CHANGED
@@ -43,15 +43,15 @@
43
43
  border-radius:inherit;
44
44
  }
45
45
  .container[data-clickable] .stateLayer[data-state=borderOnBackground]{
46
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
46
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
47
47
  border-style:solid;
48
48
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
49
49
  }
50
50
  .container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
51
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 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, rgba(56, 159, 116, 0.1019607843)));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
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));
@@ -70,13 +70,13 @@
70
70
  }
71
71
  @media (hover: hover){
72
72
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
73
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
73
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
74
74
  }
75
75
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
76
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
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, rgba(56, 159, 116, 0.2)));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
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));
@@ -97,13 +97,13 @@
97
97
  .container[data-clickable]{
98
98
  }
99
99
  .container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
100
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
100
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
101
101
  }
102
102
  .container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
103
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
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, rgba(56, 159, 116, 0.3019607843)));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
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));
@@ -144,11 +144,11 @@
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
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)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
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-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)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
154
  color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
@@ -167,12 +167,12 @@
167
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-brand-color-primary-99, #fbfffc)));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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-40, #22775b));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
178
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
@@ -207,27 +207,27 @@
207
207
  display:flex;
208
208
  align-items:center;
209
209
  }
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"));
210
+ .container[data-size=xs] > .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
212
212
  font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
213
  line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
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
215
  letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
216
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
217
217
  }
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"));
218
+ .container[data-size=s] > .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
220
220
  font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
221
  line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
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
223
  letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
225
225
  }
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"));
226
+ .container[data-size=m] > .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
228
228
  font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
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))));
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-500, 500))));
231
231
  letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
232
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
233
  }
@@ -237,15 +237,15 @@
237
237
  flex-shrink:0;
238
238
  align-items:center;
239
239
  }
240
- [data-size=xs] .element svg{
240
+ .container[data-size=xs] > .element svg{
241
241
  width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
242
  height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
243
  }
244
- [data-size=s] .element svg{
244
+ .container[data-size=s] > .element svg{
245
245
  width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
246
  height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
247
  }
248
- [data-size=m] .element svg{
248
+ .container[data-size=m] > .element svg{
249
249
  width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
250
  height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
251
251
  }
package/dist/esm/style.css CHANGED
@@ -43,15 +43,15 @@
43
43
  border-radius:inherit;
44
44
  }
45
45
  .container[data-clickable] .stateLayer[data-state=borderOnBackground]{
46
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
46
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(0, 0, 0, 0.1411764706)));
47
47
  border-style:solid;
48
48
  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
49
49
  }
50
50
  .container[data-clickable] .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
51
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(0, 0, 0, 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, rgba(56, 159, 116, 0.1019607843)));
54
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(128, 128, 128, 0.1607843137)));
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));
@@ -70,13 +70,13 @@
70
70
  }
71
71
  @media (hover: hover){
72
72
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
73
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
73
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(0, 0, 0, 0.2392156863)));
74
74
  }
75
75
  .container[data-clickable]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
76
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(0, 0, 0, 0.0784313725)));
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, rgba(56, 159, 116, 0.2)));
79
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(128, 128, 128, 0.2392156863)));
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));
@@ -97,13 +97,13 @@
97
97
  .container[data-clickable]{
98
98
  }
99
99
  .container[data-clickable][data-loading] .stateLayer[data-state=borderOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
100
- border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
100
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(0, 0, 0, 0.3411764706)));
101
101
  }
102
102
  .container[data-clickable][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .container[data-clickable][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
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)));
103
+ background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(0, 0, 0, 0.1215686275)));
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, rgba(56, 159, 116, 0.3019607843)));
106
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(128, 128, 128, 0.3411764706)));
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));
@@ -144,11 +144,11 @@
144
144
  }
145
145
  .container[data-appearance=neutral][data-role-appearance=accent]{
146
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)));
147
+ background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
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-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)));
150
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #4a4a4a)));
151
+ background-color:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e2e2e2)));
152
152
  }
153
153
  .container[data-appearance=orange][data-role-appearance=accent]{
154
154
  color:var(--sn-theme-color-orange-onAccent, var(--sn-brand-palette-orange-99, #fffcf4));
@@ -167,12 +167,12 @@
167
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-brand-color-primary-99, #fbfffc)));
171
- background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
170
+ color:var(--sn-theme-color-primary-onAccent, var(--sn-brand-color-primary-onAccentLight, #ffffff));
171
+ background-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #222222));
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-40, #22775b));
175
- background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #caeadb));
174
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #0d0d0d));
175
+ background-color:var(--sn-theme-color-primary-decor, var(--sn-brand-color-primary-80, #dcdcdc));
176
176
  }
177
177
  .container[data-appearance=red][data-role-appearance=accent]{
178
178
  color:var(--sn-theme-color-red-onAccent, var(--sn-brand-palette-red-99, #fffaf7));
@@ -207,27 +207,27 @@
207
207
  display:flex;
208
208
  align-items:center;
209
209
  }
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"));
210
+ .container[data-size=xs] > .labelWrapper{
211
+ font-family:var(--sn-promoTag-anatomy-size-xs-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
212
212
  font-size:var(--sn-promoTag-anatomy-size-xs-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
213
213
  line-height:var(--sn-promoTag-anatomy-size-xs-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
214
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
215
  letter-spacing:var(--sn-promoTag-anatomy-size-xs-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
216
216
  padding:0 var(--sn-promoTag-anatomy-size-xs-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
217
217
  }
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"));
218
+ .container[data-size=s] > .labelWrapper{
219
+ font-family:var(--sn-promoTag-anatomy-size-s-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
220
220
  font-size:var(--sn-promoTag-anatomy-size-s-text-fontSize, var(--sn-primitive-font-fontSize-11, 11px));
221
221
  line-height:var(--sn-promoTag-anatomy-size-s-text-lineHeight, var(--sn-primitive-font-lineHeight-14, 14px));
222
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
223
  letter-spacing:var(--sn-promoTag-anatomy-size-s-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  padding:0 var(--sn-promoTag-anatomy-size-s-container-textWrapper-padding, var(--sn-primitive-dimension-2, 2px));
225
225
  }
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"));
226
+ .container[data-size=m] > .labelWrapper{
227
+ font-family:var(--sn-promoTag-anatomy-size-m-text-fontFamily, var(--sn-brand-font-fontFamily-regular-label, "SB Sans Text"));
228
228
  font-size:var(--sn-promoTag-anatomy-size-m-text-fontSize, var(--sn-primitive-font-fontSize-12, 12px));
229
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))));
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-500, 500))));
231
231
  letter-spacing:var(--sn-promoTag-anatomy-size-m-text-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
232
232
  padding:0 var(--sn-promoTag-anatomy-size-m-container-textWrapper-padding, var(--sn-primitive-dimension-4, 4px));
233
233
  }
@@ -237,15 +237,15 @@
237
237
  flex-shrink:0;
238
238
  align-items:center;
239
239
  }
240
- [data-size=xs] .element svg{
240
+ .container[data-size=xs] > .element svg{
241
241
  width:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
242
242
  height:var(--sn-promoTag-anatomy-size-xs-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
243
243
  }
244
- [data-size=s] .element svg{
244
+ .container[data-size=s] > .element svg{
245
245
  width:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
246
246
  height:var(--sn-promoTag-anatomy-size-s-element-icon-square, var(--sn-primitive-dimension-16, 16px)) !important;
247
247
  }
248
- [data-size=m] .element svg{
248
+ .container[data-size=m] > .element svg{
249
249
  width:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
250
250
  height:var(--sn-promoTag-anatomy-size-m-element-icon-square, var(--sn-primitive-dimension-24, 24px)) !important;
251
251
  }