@snack-uikit/toaster 0.7.0 → 0.8.1

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 (8) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/components/ToastSystemEvent/styles.module.css +1 -1
  3. package/dist/esm/components/ToastSystemEvent/styles.module.css +1 -1
  4. package/package.json +6 -6
  5. package/src/components/ToastSystemEvent/styles.module.scss +52 -52
  6. package/src/components/ToastUserAction/styles.module.scss +14 -14
  7. package/src/components/ToasterContainer/styles.module.scss +22 -21
  8. package/src/helperComponents/ButtonAction/styles.module.scss +14 -14
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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
+ ## 0.8.1 (2024-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-438:** stylelint update ([9d40d4e](https://github.com/cloud-ru-tech/snack-uikit/commit/9d40d4eb445eeaaca5a2dc1f6421d496f86aeac3))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.8.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
23
+
24
+
25
+
26
+
27
+
6
28
  # 0.7.0 (2024-10-28)
7
29
 
8
30
 
package/dist/cjs/components/ToastSystemEvent/styles.module.css CHANGED
@@ -80,7 +80,7 @@
80
80
  left:0;
81
81
  width:0;
82
82
  animation:progressBarAnimation linear 1 forwards;
83
- animation-play-state:active;
83
+ animation-play-state:running;
84
84
  }
85
85
 
86
86
  .body{
package/dist/esm/components/ToastSystemEvent/styles.module.css CHANGED
@@ -80,7 +80,7 @@
80
80
  left:0;
81
81
  width:0;
82
82
  animation:progressBarAnimation linear 1 forwards;
83
- animation-play-state:active;
83
+ animation-play-state:running;
84
84
  }
85
85
 
86
86
  .body{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.7.0",
7
+ "version": "0.8.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,13 +36,13 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/icons": "0.23.0",
40
- "@snack-uikit/link": "0.14.0",
41
- "@snack-uikit/loaders": "0.6.0",
42
- "@snack-uikit/truncate-string": "0.5.0",
39
+ "@snack-uikit/icons": "0.24.0",
40
+ "@snack-uikit/link": "0.15.0",
41
+ "@snack-uikit/loaders": "0.7.1",
42
+ "@snack-uikit/truncate-string": "0.6.0",
43
43
  "@snack-uikit/utils": "3.5.0",
44
44
  "classnames": "2.3.2",
45
45
  "react-toastify": "10.0.5"
46
46
  },
47
- "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
47
+ "gitHead": "b7163c6f939105eb34cabec64c9e983ac7958c26"
48
48
  }
package/src/components/ToastSystemEvent/styles.module.scss CHANGED
@@ -1,6 +1,6 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
4
4
 
5
5
  @mixin colorMap($background-color, $icon-color, $title-color, $description-color, $progress-color) {
6
6
  background-color: $background-color;
@@ -24,13 +24,13 @@
24
24
 
25
25
  .icon {
26
26
  svg {
27
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
28
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
27
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
28
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
29
29
  }
30
30
  }
31
31
 
32
32
  .buttonClose {
33
- @include composite-var($toaster-system-event-toast-button-button-close);
33
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-close);
34
34
 
35
35
  cursor: pointer;
36
36
 
@@ -42,36 +42,36 @@
42
42
  margin: 0;
43
43
  padding: 0;
44
44
 
45
- color: $sys-invert-neutral-text-light;
45
+ color: styles-theme-variables.$sys-invert-neutral-text-light;
46
46
 
47
47
  background-color: transparent;
48
48
  border: none;
49
49
 
50
50
  svg {
51
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
52
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
51
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
52
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
53
53
  }
54
54
 
55
55
  &:hover {
56
- color: $sys-invert-neutral-text-main;
56
+ color: styles-theme-variables.$sys-invert-neutral-text-main;
57
57
  }
58
58
 
59
59
  &:focus,
60
60
  &:active {
61
- color: $sys-invert-neutral-accent-pressed;
61
+ color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
62
62
  }
63
63
 
64
64
  &:focus-visible {
65
- @include outline-var($container-focused-s);
65
+ @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
66
66
 
67
- color: $sys-invert-neutral-text-main;
68
- outline-color: $sys-available-on-complementary;
69
- outline-offset: $spacing-state-focus-offset;
67
+ color: styles-theme-variables.$sys-invert-neutral-text-main;
68
+ outline-color: styles-theme-variables.$sys-available-on-complementary;
69
+ outline-offset: styles-theme-variables.$spacing-state-focus-offset;
70
70
  }
71
71
  }
72
72
 
73
73
  .contentLayout {
74
- @include composite-var($toaster-system-event-toast-content-layout);
74
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-content-layout);
75
75
 
76
76
  display: flex;
77
77
  flex: 1;
@@ -83,13 +83,13 @@
83
83
  }
84
84
 
85
85
  .title {
86
- @include composite-var($sans-title-s);
86
+ @include styles-theme-variables.composite-var(styles-theme-variables.$sans-title-s);
87
87
 
88
88
  display: grid;
89
89
  }
90
90
 
91
91
  .description {
92
- @include composite-var($sans-body-m);
92
+ @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
93
93
  }
94
94
 
95
95
  @keyframes progressBarAnimation {
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  .progress {
105
- @include composite-var($toaster-system-event-toast-progress-bar);
105
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-progress-bar);
106
106
 
107
107
  position: absolute;
108
108
  bottom: 0;
@@ -111,11 +111,11 @@
111
111
  width: 0;
112
112
 
113
113
  animation: progressBarAnimation linear 1 forwards;
114
- animation-play-state: active;
114
+ animation-play-state: running;
115
115
  }
116
116
 
117
117
  .body {
118
- @include composite-var($toaster-system-event-toast-body);
118
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-body);
119
119
 
120
120
  display: flex;
121
121
  width: 100%;
@@ -123,7 +123,7 @@
123
123
  }
124
124
 
125
125
  .footer {
126
- @include composite-var($toaster-system-event-toast-footer);
126
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-footer);
127
127
 
128
128
  position: relative;
129
129
  display: flex;
@@ -132,7 +132,7 @@
132
132
  }
133
133
 
134
134
  .container {
135
- @include composite-var($toaster-system-event-toast-container);
135
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-container);
136
136
 
137
137
  cursor: default;
138
138
 
@@ -151,36 +151,36 @@
151
151
 
152
152
  &[data-appearance='neutral'] {
153
153
  @include colorMap(
154
- $sys-invert-neutral-background,
155
- $sys-invert-neutral-accent-default,
156
- $sys-invert-neutral-text-main,
157
- $sys-invert-neutral-text-support,
158
- $sys-neutral-accent-default
154
+ styles-theme-variables.$sys-invert-neutral-background,
155
+ styles-theme-variables.$sys-invert-neutral-accent-default,
156
+ styles-theme-variables.$sys-invert-neutral-text-main,
157
+ styles-theme-variables.$sys-invert-neutral-text-support,
158
+ styles-theme-variables.$sys-neutral-accent-default
159
159
  );
160
160
  }
161
161
 
162
162
  &[data-appearance='error'] {
163
163
  @include colorMap(
164
- $sys-invert-neutral-background,
165
- $sys-red-accent-default,
166
- $sys-invert-neutral-text-main,
167
- $sys-invert-neutral-text-support,
168
- $sys-red-accent-default
164
+ styles-theme-variables.$sys-invert-neutral-background,
165
+ styles-theme-variables.$sys-red-accent-default,
166
+ styles-theme-variables.$sys-invert-neutral-text-main,
167
+ styles-theme-variables.$sys-invert-neutral-text-support,
168
+ styles-theme-variables.$sys-red-accent-default
169
169
  );
170
170
  }
171
171
 
172
172
  &[data-appearance='errorCritical'] {
173
173
  @include colorMap(
174
- $sys-red-accent-default,
175
- $sys-red-on-accent,
176
- $sys-red-on-accent,
177
- $sys-red-on-accent,
178
- $sys-red-decor-activated
174
+ styles-theme-variables.$sys-red-accent-default,
175
+ styles-theme-variables.$sys-red-on-accent,
176
+ styles-theme-variables.$sys-red-on-accent,
177
+ styles-theme-variables.$sys-red-on-accent,
178
+ styles-theme-variables.$sys-red-decor-activated
179
179
  );
180
180
 
181
181
  .buttonClose {
182
- color: $sys-red-on-accent;
183
- opacity: $opacity-a064;
182
+ color: styles-theme-variables.$sys-red-on-accent;
183
+ opacity: styles-theme-variables.$opacity-a064;
184
184
 
185
185
  &:hover,
186
186
  &:focus-visible {
@@ -188,28 +188,28 @@
188
188
  }
189
189
 
190
190
  &:active {
191
- opacity: $opacity-a048;
191
+ opacity: styles-theme-variables.$opacity-a048;
192
192
  }
193
193
  }
194
194
  }
195
195
 
196
196
  &[data-appearance='warning'] {
197
197
  @include colorMap(
198
- $sys-invert-neutral-background,
199
- $sys-yellow-accent-default,
200
- $sys-invert-neutral-text-main,
201
- $sys-invert-neutral-text-support,
202
- $sys-yellow-accent-default
198
+ styles-theme-variables.$sys-invert-neutral-background,
199
+ styles-theme-variables.$sys-yellow-accent-default,
200
+ styles-theme-variables.$sys-invert-neutral-text-main,
201
+ styles-theme-variables.$sys-invert-neutral-text-support,
202
+ styles-theme-variables.$sys-yellow-accent-default
203
203
  );
204
204
  }
205
205
 
206
206
  &[data-appearance='success'] {
207
207
  @include colorMap(
208
- $sys-invert-neutral-background,
209
- $sys-green-accent-default,
210
- $sys-invert-neutral-text-main,
211
- $sys-invert-neutral-text-support,
212
- $sys-green-accent-default
208
+ styles-theme-variables.$sys-invert-neutral-background,
209
+ styles-theme-variables.$sys-green-accent-default,
210
+ styles-theme-variables.$sys-invert-neutral-text-main,
211
+ styles-theme-variables.$sys-invert-neutral-text-support,
212
+ styles-theme-variables.$sys-green-accent-default
213
213
  );
214
214
  }
215
215
  }
@@ -218,5 +218,5 @@
218
218
  display: flex;
219
219
  align-items: center;
220
220
  justify-content: center;
221
- color: $sys-invert-neutral-text-main;
221
+ color: styles-theme-variables.$sys-invert-neutral-text-main;
222
222
  }
package/src/components/ToastUserAction/styles.module.scss CHANGED
@@ -1,6 +1,6 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
4
4
 
5
5
 
6
6
  .icon {
@@ -9,19 +9,19 @@
9
9
  justify-content: center;
10
10
 
11
11
  svg {
12
- width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
13
- height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
12
+ width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
13
+ height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
14
14
  }
15
15
  }
16
16
 
17
17
  .label {
18
- @include composite-var($sans-label-l);
18
+ @include styles-theme-variables.composite-var(styles-theme-variables.$sans-label-l);
19
19
 
20
- color: $sys-invert-neutral-text-main;
20
+ color: styles-theme-variables.$sys-invert-neutral-text-main;
21
21
  }
22
22
 
23
23
  .container {
24
- @include composite-var($toaster-user-action-toast-container);
24
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toast-container);
25
25
 
26
26
  display: flex;
27
27
  align-items: center;
@@ -29,23 +29,23 @@
29
29
 
30
30
  box-sizing: border-box;
31
31
 
32
- background-color: $sys-invert-neutral-background;
32
+ background-color: styles-theme-variables.$sys-invert-neutral-background;
33
33
 
34
34
  &[data-appearance='error'] {
35
35
  .icon {
36
- color: $sys-red-accent-default;
36
+ color: styles-theme-variables.$sys-red-accent-default;
37
37
  }
38
38
  }
39
39
 
40
40
  &[data-appearance='warning'] {
41
41
  .icon {
42
- color: $sys-yellow-accent-default;
42
+ color: styles-theme-variables.$sys-yellow-accent-default;
43
43
  }
44
44
  }
45
45
 
46
46
  &[data-appearance='success'] {
47
47
  .icon {
48
- color: $sys-green-accent-default;
48
+ color: styles-theme-variables.$sys-green-accent-default;
49
49
  }
50
50
  }
51
51
  }
@@ -54,11 +54,11 @@
54
54
  display: flex;
55
55
  align-items: center;
56
56
  justify-content: center;
57
- color: $sys-invert-neutral-text-main
57
+ color: styles-theme-variables.$sys-invert-neutral-text-main
58
58
  }
59
59
 
60
60
  .contentLayout {
61
- @include composite-var($toaster-user-action-toast-content-layout);
61
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toast-content-layout);
62
62
 
63
63
  display: flex;
64
64
  align-items: center
package/src/components/ToasterContainer/styles.module.scss CHANGED
@@ -1,44 +1,44 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
4
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
1
+ @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
4
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
5
5
 
6
6
  .buttonCloseColumnWrapper {
7
- @include composite-var($toaster-system-event-toaster-container);
7
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
8
8
 
9
9
  position: fixed;
10
10
  box-sizing: border-box;
11
11
  }
12
12
 
13
13
  .buttonCloseColumn {
14
- @include composite-var($toaster-system-event-toaster-button-close-column);
15
- @include composite-var($sans-body-m);
14
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-button-close-column);
15
+ @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
16
16
 
17
17
  cursor: pointer;
18
18
 
19
19
  box-sizing: border-box;
20
20
  width: 100%;
21
21
 
22
- color: $sys-invert-neutral-text-main;
22
+ color: styles-theme-variables.$sys-invert-neutral-text-main;
23
23
 
24
- background-color: $sys-invert-neutral-background;
24
+ background-color: styles-theme-variables.$sys-invert-neutral-background;
25
25
  border: none;
26
26
  outline: none;
27
27
 
28
28
  &:hover {
29
- background-color: $sys-invert-neutral-decor-hovered;
29
+ background-color: styles-theme-variables.$sys-invert-neutral-decor-hovered;
30
30
  }
31
31
 
32
32
  &:focus-visible {
33
- @include outline-var($container-focused-s);
33
+ @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
34
34
 
35
- background-color: $sys-invert-neutral-decor-hovered;
36
- outline-color: $sys-available-complementary;
37
- outline-offset: $spacing-state-focus-offset;
35
+ background-color: styles-theme-variables.$sys-invert-neutral-decor-hovered;
36
+ outline-color: styles-theme-variables.$sys-available-complementary;
37
+ outline-offset: styles-theme-variables.$spacing-state-focus-offset;
38
38
  }
39
39
 
40
40
  &:active {
41
- color: $sys-invert-neutral-text-light;
41
+ color: styles-theme-variables.$sys-invert-neutral-text-light;
42
42
  }
43
43
  }
44
44
 
@@ -61,12 +61,12 @@
61
61
  }
62
62
 
63
63
  .containerWithCloseAllButton {
64
- margin-bottom: calc($size-toaster-button-close-column + $space-toaster-system-event-gap);
64
+ margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-system-event-gap);
65
65
  }
66
66
 
67
67
  @media only screen and (max-width: 480px) {
68
68
  .buttonCloseColumnWrapper {
69
- max-width: calc(100vw - 2 * $space-toaster-toast-system-event-container-padding);
69
+ max-width: calc(100vw - 2 * styles-theme-variables.$space-toaster-toast-system-event-container-padding);
70
70
  }
71
71
  }
72
72
 
@@ -86,6 +86,7 @@ $theme-name: osThemeSnack;
86
86
  cursor: default;
87
87
 
88
88
  position: relative;
89
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
89
90
  z-index: 0;
90
91
 
91
92
  overflow: hidden;
@@ -113,7 +114,7 @@ $theme-name: osThemeSnack;
113
114
  }
114
115
 
115
116
  .#{container-user-action} {
116
- @include composite-var($toaster-user-action-toaster-container);
117
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
117
118
 
118
119
  display: flex;
119
120
  flex-direction: column;
@@ -166,15 +167,15 @@ $theme-name: osThemeSnack;
166
167
  }
167
168
 
168
169
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__system-event {
169
- @include composite-var($toaster-system-event-toaster-container);
170
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
170
171
 
171
172
  display: flex;
172
173
  flex-direction: column;
173
- max-width: calc(100vw - 2 * $space-toaster-toast-system-event-container-padding);
174
+ max-width: calc(100vw - 2 * styles-theme-variables.$space-toaster-toast-system-event-container-padding);
174
175
  }
175
176
 
176
177
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__user-action {
177
- @include composite-var($toaster-user-action-toaster-container);
178
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
178
179
 
179
180
  display: flex;
180
181
  flex-direction: column;
package/src/helperComponents/ButtonAction/styles.module.scss CHANGED
@@ -1,9 +1,9 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .buttonAction {
5
- @include composite-var($toaster-system-event-toast-button-button-action);
6
- @include composite-var($sans-body-m);
5
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-action);
6
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$sans-body-m);
7
7
 
8
8
  cursor: pointer;
9
9
 
@@ -14,37 +14,37 @@
14
14
  box-sizing: border-box;
15
15
  margin: 0;
16
16
 
17
- color: $sys-invert-neutral-text-main;
17
+ color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-text-main;
18
18
 
19
- background-color: $sys-invert-neutral-decor-default;
19
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-decor-default;
20
20
  border: none;
21
21
 
22
22
  &:hover,
23
23
  &:focus-visible {
24
- background-color: $sys-invert-neutral-decor-hovered;
24
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-decor-hovered;
25
25
  }
26
26
 
27
27
  &:active {
28
- background-color: $sys-invert-neutral-decor-activated;
28
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-decor-activated;
29
29
  }
30
30
 
31
31
  &:focus-visible {
32
- @include outline-var($container-focused-s);
32
+ @include styles-tokens-toaster-toasterSystemEvent.outline-var(styles-tokens-element.$container-focused-s);
33
33
 
34
- outline-color: $sys-available-on-complementary;
35
- outline-offset: $spacing-state-focus-offset;
34
+ outline-color: styles-tokens-toaster-toasterSystemEvent.$sys-available-on-complementary;
35
+ outline-offset: styles-tokens-toaster-toasterSystemEvent.$spacing-state-focus-offset;
36
36
  }
37
37
 
38
38
  &[data-critical] {
39
- background-color: $sys-opacity-enabled;
39
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-opacity-enabled;
40
40
 
41
41
  &:hover,
42
42
  &:focus-visible {
43
- background-color: $sys-opacity-hovered;
43
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-opacity-hovered;
44
44
  }
45
45
 
46
46
  &:active {
47
- background-color: $sys-opacity-activated;
47
+ background-color: styles-tokens-toaster-toasterSystemEvent.$sys-opacity-activated;
48
48
  }
49
49
  }
50
50
  }