@snack-uikit/toaster 0.6.28-preview-ba12ca94.0 → 0.8.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 (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 +7 -7
  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 +21 -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.0 (2024-10-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.7.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5502:** add cjs build ([ffada28](https://github.com/cloud-ru-tech/snack-uikit/commit/ffada28bfdc37ea760eb1c8759342e680bdf8dd6))
23
+
24
+
25
+
26
+
27
+
6
28
  ## 0.6.27 (2024-09-26)
7
29
 
8
30
  ### Only dependencies have been changed
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.6.28-preview-ba12ca94.0",
7
+ "version": "0.8.0",
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.22.2-preview-ba12ca94.0",
40
- "@snack-uikit/link": "0.13.5-preview-ba12ca94.0",
41
- "@snack-uikit/loaders": "0.5.4-preview-ba12ca94.0",
42
- "@snack-uikit/truncate-string": "0.4.25-preview-ba12ca94.0",
43
- "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
39
+ "@snack-uikit/icons": "0.24.0",
40
+ "@snack-uikit/link": "0.15.0",
41
+ "@snack-uikit/loaders": "0.7.0",
42
+ "@snack-uikit/truncate-string": "0.6.0",
43
+ "@snack-uikit/utils": "3.5.0",
44
44
  "classnames": "2.3.2",
45
45
  "react-toastify": "10.0.5"
46
46
  },
47
- "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
47
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
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
 
@@ -113,7 +113,7 @@ $theme-name: osThemeSnack;
113
113
  }
114
114
 
115
115
  .#{container-user-action} {
116
- @include composite-var($toaster-user-action-toaster-container);
116
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
117
117
 
118
118
  display: flex;
119
119
  flex-direction: column;
@@ -166,15 +166,15 @@ $theme-name: osThemeSnack;
166
166
  }
167
167
 
168
168
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__system-event {
169
- @include composite-var($toaster-system-event-toaster-container);
169
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
170
170
 
171
171
  display: flex;
172
172
  flex-direction: column;
173
- max-width: calc(100vw - 2 * $space-toaster-toast-system-event-container-padding);
173
+ max-width: calc(100vw - 2 * styles-theme-variables.$space-toaster-toast-system-event-container-padding);
174
174
  }
175
175
 
176
176
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__user-action {
177
- @include composite-var($toaster-user-action-toaster-container);
177
+ @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
178
178
 
179
179
  display: flex;
180
180
  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
  }