@snack-uikit/alert 0.8.4 → 0.8.5

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 (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/Alert/styles.module.css +39 -39
  3. package/dist/components/AlertTop/styles.module.css +50 -50
  4. package/dist/helperComponents/AlertButton/styles.module.css +15 -15
  5. package/dist/helperComponents/AlertTopButton/styles.module.css +11 -11
  6. package/package.json +4 -4
  7. package/src/components/AlertTop/styles.module.scss +6 -6
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.5 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.8.4 (2024-02-05)
7
18
 
8
19
  ### Only dependencies have been changed
package/dist/components/Alert/styles.module.css CHANGED
@@ -13,24 +13,24 @@
13
13
  border-style:solid;
14
14
  }
15
15
  .alert[data-color=neutral]{
16
- background-color:var(--sys-neutral-background, #f0f0f0);
17
- border-color:var(--sys-neutral-decor-default, #dedede);
16
+ background-color:var(--sys-neutral-background, #f1f2f6);
17
+ border-color:var(--sys-neutral-decor-default, #dfe2ec);
18
18
  }
19
19
  .alert[data-color=primary]{
20
20
  background-color:var(--sys-primary-background, #f6effe);
21
21
  border-color:var(--sys-primary-decor-default, #ebdefd);
22
22
  }
23
23
  .alert[data-color=red]{
24
- background-color:var(--sys-red-background, #fdede8);
25
- border-color:var(--sys-red-decor-default, #ffd8d0);
24
+ background-color:var(--sys-red-background, #fdedea);
25
+ border-color:var(--sys-red-decor-default, #fdd6cd);
26
26
  }
27
27
  .alert[data-color=yellow]{
28
- background-color:var(--sys-yellow-background, #fbf4d6);
29
- border-color:var(--sys-yellow-decor-default, #f9e5ad);
28
+ background-color:var(--sys-yellow-background, #fcf4da);
29
+ border-color:var(--sys-yellow-decor-default, #f0dfb1);
30
30
  }
31
31
  .alert[data-color=green]{
32
- background-color:var(--sys-green-background, #e9f6f3);
33
- border-color:var(--sys-green-decor-default, #cdebe3);
32
+ background-color:var(--sys-green-background, #ecf6ea);
33
+ border-color:var(--sys-green-decor-default, #d2ead0);
34
34
  }
35
35
 
36
36
  .body{
@@ -41,23 +41,23 @@
41
41
  }
42
42
 
43
43
  .icon[data-color=neutral]{
44
- color:var(--sys-neutral-accent-default, #757575);
44
+ color:var(--sys-neutral-accent-default, #6f717c);
45
45
  }
46
46
  .icon[data-color=primary]{
47
47
  color:var(--sys-primary-accent-default, #794ed3);
48
48
  }
49
49
  .icon[data-color=red]{
50
- color:var(--sys-red-accent-default, #d93f2f);
50
+ color:var(--sys-red-accent-default, #cd3c3c);
51
51
  }
52
52
  .icon[data-color=yellow]{
53
- color:var(--sys-yellow-accent-default, #feb528);
53
+ color:var(--sys-yellow-accent-default, #fdca46);
54
54
  }
55
55
  .icon[data-color=green]{
56
- color:var(--sys-green-accent-default, #0bbe8f);
56
+ color:var(--sys-green-accent-default, #57b762);
57
57
  }
58
58
  .icon svg{
59
- width:var(--dimension-3m, 24px) !important;
60
- height:var(--dimension-3m, 24px) !important;
59
+ width:var(--size-icon-container-s, 24px) !important;
60
+ height:var(--size-icon-container-s, 24px) !important;
61
61
  }
62
62
 
63
63
  .contentLayout{
@@ -75,7 +75,7 @@
75
75
  font-size:var(--sans-title-s-font-size, 14px);
76
76
  letter-spacing:var(--sans-title-s-letter-spacing, 0.15px);
77
77
  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
78
- color:var(--sys-neutral-text-main, #333333);
78
+ color:var(--sys-neutral-text-main, #33333b);
79
79
  }
80
80
 
81
81
  .description{
@@ -85,7 +85,7 @@
85
85
  font-size:var(--sans-body-m-font-size, 14px);
86
86
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
87
87
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
88
- color:var(--sys-neutral-text-support, #565656);
88
+ color:var(--sys-neutral-text-support, #656771);
89
89
  word-wrap:break-word;
90
90
  }
91
91
 
@@ -105,24 +105,24 @@
105
105
  border:none;
106
106
  }
107
107
  .closeButton svg{
108
- width:var(--dimension-3m, 24px) !important;
109
- height:var(--dimension-3m, 24px) !important;
108
+ width:var(--size-icon-container-s, 24px) !important;
109
+ height:var(--size-icon-container-s, 24px) !important;
110
110
  }
111
111
  .closeButton[data-color=neutral]{
112
- color:var(--sys-neutral-text-support, #565656);
112
+ color:var(--sys-neutral-text-support, #656771);
113
113
  }
114
114
  .closeButton[data-color=neutral]:hover{
115
- color:var(--sys-neutral-text-light, #898989);
115
+ color:var(--sys-neutral-text-light, #868892);
116
116
  }
117
117
  .closeButton[data-color=neutral]:focus-visible{
118
118
  outline-width:var(--border-state-focus-s-border-width, 2px);
119
119
  outline-style:var(--border-state-focus-s-border-style, solid);
120
120
  outline-color:var(--border-state-focus-s-border-color, );
121
- color:var(--sys-neutral-text-light, #898989);
122
- outline-color:var(--sys-available-complementary, #131313);
121
+ color:var(--sys-neutral-text-light, #868892);
122
+ outline-color:var(--sys-available-complementary, #141415);
123
123
  }
124
124
  .closeButton[data-color=neutral]:active{
125
- color:var(--sys-neutral-text-main, #333333);
125
+ color:var(--sys-neutral-text-main, #33333b);
126
126
  }
127
127
  .closeButton[data-color=primary]{
128
128
  color:var(--sys-primary-text-support, #5b4796);
@@ -135,58 +135,58 @@
135
135
  outline-style:var(--border-state-focus-s-border-style, solid);
136
136
  outline-color:var(--border-state-focus-s-border-color, );
137
137
  color:var(--sys-primary-text-light, #997adc);
138
- outline-color:var(--sys-available-complementary, #131313);
138
+ outline-color:var(--sys-available-complementary, #141415);
139
139
  }
140
140
  .closeButton[data-color=primary]:active{
141
141
  color:var(--sys-primary-text-main, #382a62);
142
142
  }
143
143
  .closeButton[data-color=red]{
144
- color:var(--sys-red-text-support, #a93936);
144
+ color:var(--sys-red-text-support, #ab423e);
145
145
  }
146
146
  .closeButton[data-color=red]:hover{
147
- color:var(--sys-red-text-light, #ec7465);
147
+ color:var(--sys-red-text-light, #ea6658);
148
148
  }
149
149
  .closeButton[data-color=red]:focus-visible{
150
150
  outline-width:var(--border-state-focus-s-border-width, 2px);
151
151
  outline-style:var(--border-state-focus-s-border-style, solid);
152
152
  outline-color:var(--border-state-focus-s-border-color, );
153
- color:var(--sys-red-text-light, #ec7465);
154
- outline-color:var(--sys-available-complementary, #131313);
153
+ color:var(--sys-red-text-light, #ea6658);
154
+ outline-color:var(--sys-available-complementary, #141415);
155
155
  }
156
156
  .closeButton[data-color=red]:active{
157
- color:var(--sys-red-text-main, #621c1e);
157
+ color:var(--sys-red-text-main, #621c1b);
158
158
  }
159
159
  .closeButton[data-color=yellow]{
160
- color:var(--sys-yellow-text-support, #80461b);
160
+ color:var(--sys-yellow-text-support, #a57b0e);
161
161
  }
162
162
  .closeButton[data-color=yellow]:hover{
163
- color:var(--sys-yellow-text-light, #be7d3c);
163
+ color:var(--sys-yellow-text-light, #ddb035);
164
164
  }
165
165
  .closeButton[data-color=yellow]:focus-visible{
166
166
  outline-width:var(--border-state-focus-s-border-width, 2px);
167
167
  outline-style:var(--border-state-focus-s-border-style, solid);
168
168
  outline-color:var(--border-state-focus-s-border-color, );
169
- color:var(--sys-yellow-text-light, #be7d3c);
170
- outline-color:var(--sys-available-complementary, #131313);
169
+ color:var(--sys-yellow-text-light, #ddb035);
170
+ outline-color:var(--sys-available-complementary, #141415);
171
171
  }
172
172
  .closeButton[data-color=yellow]:active{
173
- color:var(--sys-yellow-text-main, #54290f);
173
+ color:var(--sys-yellow-text-main, #5e3d06);
174
174
  }
175
175
  .closeButton[data-color=green]{
176
- color:var(--sys-green-text-support, #335747);
176
+ color:var(--sys-green-text-support, #568a56);
177
177
  }
178
178
  .closeButton[data-color=green]:hover{
179
- color:var(--sys-green-text-light, #4d9e80);
179
+ color:var(--sys-green-text-light, #67ba6e);
180
180
  }
181
181
  .closeButton[data-color=green]:focus-visible{
182
182
  outline-width:var(--border-state-focus-s-border-width, 2px);
183
183
  outline-style:var(--border-state-focus-s-border-style, solid);
184
184
  outline-color:var(--border-state-focus-s-border-color, );
185
- color:var(--sys-green-text-light, #4d9e80);
186
- outline-color:var(--sys-available-complementary, #131313);
185
+ color:var(--sys-green-text-light, #67ba6e);
186
+ outline-color:var(--sys-available-complementary, #141415);
187
187
  }
188
188
  .closeButton[data-color=green]:active{
189
- color:var(--sys-green-text-main, #1f392a);
189
+ color:var(--sys-green-text-main, #323f27);
190
190
  }
191
191
 
192
192
  .footer{
package/dist/components/AlertTop/styles.module.css CHANGED
@@ -9,19 +9,19 @@
9
9
  box-sizing:border-box;
10
10
  }
11
11
  .alertTop[data-color=invert-neutral]{
12
- background-color:var(--sys-invert-neutral-background, #232323);
12
+ background-color:var(--sys-invert-neutral-background, #202025);
13
13
  }
14
14
  .alertTop[data-color=primary]{
15
15
  background-color:var(--sys-primary-accent-default, #794ed3);
16
16
  }
17
17
  .alertTop[data-color=red]{
18
- background-color:var(--sys-red-accent-default, #d93f2f);
18
+ background-color:var(--sys-red-accent-default, #cd3c3c);
19
19
  }
20
20
  .alertTop[data-color=yellow]{
21
- background-color:var(--sys-yellow-accent-default, #feb528);
21
+ background-color:var(--sys-yellow-accent-default, #fdca46);
22
22
  }
23
23
  .alertTop[data-color=green]{
24
- background-color:var(--sys-green-accent-default, #0bbe8f);
24
+ background-color:var(--sys-green-accent-default, #57b762);
25
25
  }
26
26
 
27
27
  .icon{
@@ -30,23 +30,23 @@
30
30
  justify-content:center;
31
31
  }
32
32
  .icon[data-color=invert-neutral]{
33
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
33
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
34
34
  }
35
35
  .icon[data-color=primary]{
36
36
  color:var(--sys-primary-on-accent, #fdfbff);
37
37
  }
38
38
  .icon[data-color=red]{
39
- color:var(--sys-red-on-accent, #fffbfa);
39
+ color:var(--sys-red-on-accent, #fffbf9);
40
40
  }
41
41
  .icon[data-color=yellow]{
42
- color:var(--sys-yellow-on-accent, #54290f);
42
+ color:var(--sys-yellow-on-accent, #5e3d06);
43
43
  }
44
44
  .icon[data-color=green]{
45
- color:var(--sys-green-on-accent, #1f392a);
45
+ color:var(--sys-green-on-accent, #fcfefa);
46
46
  }
47
47
  .icon svg{
48
- width:var(--dimension-3m, 24px) !important;
49
- height:var(--dimension-3m, 24px) !important;
48
+ width:var(--size-icon-container-s, 24px) !important;
49
+ height:var(--size-icon-container-s, 24px) !important;
50
50
  }
51
51
 
52
52
  .title{
@@ -58,19 +58,19 @@
58
58
  paragraph-spacing:var(--sans-title-s-paragraph-spacing, 7.7px);
59
59
  }
60
60
  .title[data-color=invert-neutral]{
61
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
61
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
62
62
  }
63
63
  .title[data-color=primary]{
64
64
  color:var(--sys-primary-on-accent, #fdfbff);
65
65
  }
66
66
  .title[data-color=red]{
67
- color:var(--sys-red-on-accent, #fffbfa);
67
+ color:var(--sys-red-on-accent, #fffbf9);
68
68
  }
69
69
  .title[data-color=yellow]{
70
- color:var(--sys-yellow-on-accent, #54290f);
70
+ color:var(--sys-yellow-on-accent, #5e3d06);
71
71
  }
72
72
  .title[data-color=green]{
73
- color:var(--sys-green-on-accent, #1f392a);
73
+ color:var(--sys-green-on-accent, #fcfefa);
74
74
  }
75
75
 
76
76
  .description{
@@ -83,19 +83,19 @@
83
83
  word-wrap:break-word;
84
84
  }
85
85
  .description[data-color=invert-neutral]{
86
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
86
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
87
87
  }
88
88
  .description[data-color=primary]{
89
89
  color:var(--sys-primary-on-accent, #fdfbff);
90
90
  }
91
91
  .description[data-color=red]{
92
- color:var(--sys-red-on-accent, #fffbfa);
92
+ color:var(--sys-red-on-accent, #fffbf9);
93
93
  }
94
94
  .description[data-color=yellow]{
95
- color:var(--sys-yellow-on-accent, #54290f);
95
+ color:var(--sys-yellow-on-accent, #5e3d06);
96
96
  }
97
97
  .description[data-color=green]{
98
- color:var(--sys-green-on-accent, #1f392a);
98
+ color:var(--sys-green-on-accent, #fcfefa);
99
99
  }
100
100
 
101
101
  .contentWrapper{
@@ -116,6 +116,12 @@
116
116
  overflow:hidden;
117
117
  }
118
118
 
119
+ .actions{
120
+ display:flex;
121
+ gap:var(--dimension-2m, 16px);
122
+ align-items:center;
123
+ }
124
+
119
125
  .closeButton{
120
126
  border-radius:var(--radius-alert-top-button, 12px);
121
127
  height:var(--size-alert-top-button, 32px);
@@ -131,27 +137,27 @@
131
137
  border:none;
132
138
  }
133
139
  .closeButton svg{
134
- width:var(--dimension-3m, 24px) !important;
135
- height:var(--dimension-3m, 24px) !important;
140
+ width:var(--size-icon-container-s, 24px) !important;
141
+ height:var(--size-icon-container-s, 24px) !important;
136
142
  }
137
143
  .closeButton[data-color=invert-neutral]{
138
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
144
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
139
145
  background-color:inherit;
140
146
  }
141
147
  .closeButton[data-color=invert-neutral]:hover{
142
148
  opacity:unset;
143
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
149
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
144
150
  }
145
151
  .closeButton[data-color=invert-neutral]:focus-visible{
146
152
  outline-width:var(--border-state-focus-s-border-width, 2px);
147
153
  outline-style:var(--border-state-focus-s-border-style, solid);
148
154
  outline-color:var(--border-state-focus-s-border-color, );
149
155
  opacity:unset;
150
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
151
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
156
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
157
+ outline-color:var(--sys-available-on-complementary, #ffffff);
152
158
  }
153
159
  .closeButton[data-color=invert-neutral]:active{
154
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
160
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
155
161
  }
156
162
  .closeButton[data-color=primary]{
157
163
  color:var(--sys-primary-on-accent, #fdfbff);
@@ -159,79 +165,73 @@
159
165
  }
160
166
  .closeButton[data-color=primary]:hover{
161
167
  opacity:unset;
162
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
168
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
163
169
  }
164
170
  .closeButton[data-color=primary]:focus-visible{
165
171
  outline-width:var(--border-state-focus-s-border-width, 2px);
166
172
  outline-style:var(--border-state-focus-s-border-style, solid);
167
173
  outline-color:var(--border-state-focus-s-border-color, );
168
174
  opacity:unset;
169
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
170
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
175
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
176
+ outline-color:var(--sys-available-on-complementary, #ffffff);
171
177
  }
172
178
  .closeButton[data-color=primary]:active{
173
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
179
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
174
180
  }
175
181
  .closeButton[data-color=red]{
176
- color:var(--sys-red-on-accent, #fffbfa);
182
+ color:var(--sys-red-on-accent, #fffbf9);
177
183
  background-color:inherit;
178
184
  }
179
185
  .closeButton[data-color=red]:hover{
180
186
  opacity:unset;
181
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
187
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
182
188
  }
183
189
  .closeButton[data-color=red]:focus-visible{
184
190
  outline-width:var(--border-state-focus-s-border-width, 2px);
185
191
  outline-style:var(--border-state-focus-s-border-style, solid);
186
192
  outline-color:var(--border-state-focus-s-border-color, );
187
193
  opacity:unset;
188
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
189
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
194
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
195
+ outline-color:var(--sys-available-on-complementary, #ffffff);
190
196
  }
191
197
  .closeButton[data-color=red]:active{
192
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
198
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
193
199
  }
194
200
  .closeButton[data-color=yellow]{
195
- color:var(--sys-yellow-on-accent, #54290f);
201
+ color:var(--sys-yellow-on-accent, #5e3d06);
196
202
  background-color:inherit;
197
203
  }
198
204
  .closeButton[data-color=yellow]:hover{
199
205
  opacity:unset;
200
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
206
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
201
207
  }
202
208
  .closeButton[data-color=yellow]:focus-visible{
203
209
  outline-width:var(--border-state-focus-s-border-width, 2px);
204
210
  outline-style:var(--border-state-focus-s-border-style, solid);
205
211
  outline-color:var(--border-state-focus-s-border-color, );
206
212
  opacity:unset;
207
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
208
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
213
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
214
+ outline-color:var(--sys-available-on-complementary, #ffffff);
209
215
  }
210
216
  .closeButton[data-color=yellow]:active{
211
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
217
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
212
218
  }
213
219
  .closeButton[data-color=green]{
214
- color:var(--sys-green-on-accent, #1f392a);
220
+ color:var(--sys-green-on-accent, #fcfefa);
215
221
  background-color:inherit;
216
222
  }
217
223
  .closeButton[data-color=green]:hover{
218
224
  opacity:unset;
219
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
225
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
220
226
  }
221
227
  .closeButton[data-color=green]:focus-visible{
222
228
  outline-width:var(--border-state-focus-s-border-width, 2px);
223
229
  outline-style:var(--border-state-focus-s-border-style, solid);
224
230
  outline-color:var(--border-state-focus-s-border-color, );
225
231
  opacity:unset;
226
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
227
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
232
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
233
+ outline-color:var(--sys-available-on-complementary, #ffffff);
228
234
  }
229
235
  .closeButton[data-color=green]:active{
230
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
231
- }
232
-
233
- .actions{
234
- display:flex;
235
- gap:var(--dimension-2m, 16px);
236
- align-items:center;
236
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
237
237
  }
package/dist/helperComponents/AlertButton/styles.module.css CHANGED
@@ -18,24 +18,24 @@
18
18
  border:0;
19
19
  }
20
20
  .alertButton svg{
21
- width:var(--dimension-3m, 24px) !important;
22
- height:var(--dimension-3m, 24px) !important;
21
+ width:var(--size-icon-container-s, 24px) !important;
22
+ height:var(--size-icon-container-s, 24px) !important;
23
23
  }
24
24
  .alertButton:focus-visible{
25
25
  outline-width:var(--border-state-focus-s-border-width, 2px);
26
26
  outline-style:var(--border-state-focus-s-border-style, solid);
27
27
  outline-color:var(--border-state-focus-s-border-color, );
28
- outline-color:var(--sys-available-complementary, #131313);
28
+ outline-color:var(--sys-available-complementary, #141415);
29
29
  outline-offset:var(--spacing-state-focus-offset, 2px);
30
30
  }
31
31
  .alertButton[data-color=neutral]{
32
- color:var(--sys-neutral-text-support, #565656);
32
+ color:var(--sys-neutral-text-support, #656771);
33
33
  }
34
34
  .alertButton[data-color=neutral]:hover, .alertButton[data-color=neutral]:focus-visible{
35
- color:var(--sys-neutral-text-light, #898989);
35
+ color:var(--sys-neutral-text-light, #868892);
36
36
  }
37
37
  .alertButton[data-color=neutral]:active{
38
- color:var(--sys-neutral-text-main, #333333);
38
+ color:var(--sys-neutral-text-main, #33333b);
39
39
  }
40
40
  .alertButton[data-color=primary]{
41
41
  color:var(--sys-primary-text-support, #5b4796);
@@ -47,29 +47,29 @@
47
47
  color:var(--sys-primary-text-main, #382a62);
48
48
  }
49
49
  .alertButton[data-color=red]{
50
- color:var(--sys-red-text-support, #a93936);
50
+ color:var(--sys-red-text-support, #ab423e);
51
51
  }
52
52
  .alertButton[data-color=red]:hover, .alertButton[data-color=red]:focus-visible{
53
- color:var(--sys-red-text-light, #ec7465);
53
+ color:var(--sys-red-text-light, #ea6658);
54
54
  }
55
55
  .alertButton[data-color=red]:active{
56
- color:var(--sys-red-text-main, #621c1e);
56
+ color:var(--sys-red-text-main, #621c1b);
57
57
  }
58
58
  .alertButton[data-color=yellow]{
59
- color:var(--sys-yellow-text-support, #80461b);
59
+ color:var(--sys-yellow-text-support, #a57b0e);
60
60
  }
61
61
  .alertButton[data-color=yellow]:hover, .alertButton[data-color=yellow]:focus-visible{
62
- color:var(--sys-yellow-text-light, #be7d3c);
62
+ color:var(--sys-yellow-text-light, #ddb035);
63
63
  }
64
64
  .alertButton[data-color=yellow]:active{
65
- color:var(--sys-yellow-text-main, #54290f);
65
+ color:var(--sys-yellow-text-main, #5e3d06);
66
66
  }
67
67
  .alertButton[data-color=green]{
68
- color:var(--sys-green-text-support, #335747);
68
+ color:var(--sys-green-text-support, #568a56);
69
69
  }
70
70
  .alertButton[data-color=green]:hover, .alertButton[data-color=green]:focus-visible{
71
- color:var(--sys-green-text-light, #4d9e80);
71
+ color:var(--sys-green-text-light, #67ba6e);
72
72
  }
73
73
  .alertButton[data-color=green]:active{
74
- color:var(--sys-green-text-main, #1f392a);
74
+ color:var(--sys-green-text-main, #323f27);
75
75
  }
package/dist/helperComponents/AlertTopButton/styles.module.css CHANGED
@@ -17,39 +17,39 @@
17
17
  margin:0;
18
18
  margin-left:auto;
19
19
  white-space:nowrap;
20
- background:var(--sys-opacity-enabled, rgba(253, 253, 253, 0.1607843137));
20
+ background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
21
21
  border:0;
22
22
  }
23
23
  .alertTopButton svg{
24
- width:var(--dimension-3m, 24px) !important;
25
- height:var(--dimension-3m, 24px) !important;
24
+ width:var(--size-icon-container-s, 24px) !important;
25
+ height:var(--size-icon-container-s, 24px) !important;
26
26
  }
27
27
  .alertTopButton:hover{
28
28
  opacity:unset;
29
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
29
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
30
30
  }
31
31
  .alertTopButton:focus-visible{
32
32
  outline-width:var(--border-state-focus-s-border-width, 2px);
33
33
  outline-style:var(--border-state-focus-s-border-style, solid);
34
34
  outline-color:var(--border-state-focus-s-border-color, );
35
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
36
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
35
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
36
+ outline-color:var(--sys-available-on-complementary, #ffffff);
37
37
  }
38
38
  .alertTopButton:active{
39
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
39
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
40
40
  }
41
41
  .alertTopButton[data-color=invert-neutral]{
42
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
42
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
43
43
  }
44
44
  .alertTopButton[data-color=primary]{
45
45
  color:var(--sys-primary-on-accent, #fdfbff);
46
46
  }
47
47
  .alertTopButton[data-color=red]{
48
- color:var(--sys-red-on-accent, #fffbfa);
48
+ color:var(--sys-red-on-accent, #fffbf9);
49
49
  }
50
50
  .alertTopButton[data-color=yellow]{
51
- color:var(--sys-yellow-on-accent, #54290f);
51
+ color:var(--sys-yellow-on-accent, #5e3d06);
52
52
  }
53
53
  .alertTopButton[data-color=green]{
54
- color:var(--sys-green-on-accent, #1f392a);
54
+ color:var(--sys-green-on-accent, #fcfefa);
55
55
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.8.4",
7
+ "version": "0.8.5",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,10 +33,10 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/icons": "0.20.1",
36
- "@snack-uikit/link": "0.11.1",
37
- "@snack-uikit/truncate-string": "0.4.7",
36
+ "@snack-uikit/link": "0.11.2",
37
+ "@snack-uikit/truncate-string": "0.4.8",
38
38
  "@snack-uikit/utils": "3.2.0",
39
39
  "classnames": "2.3.2"
40
40
  },
41
- "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
41
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
42
42
  }
package/src/components/AlertTop/styles.module.scss CHANGED
@@ -100,6 +100,12 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
100
100
  overflow: hidden;
101
101
  }
102
102
 
103
+ .actions {
104
+ display: flex;
105
+ gap: $dimension-2m;
106
+ align-items: center;
107
+ }
108
+
103
109
  .closeButton {
104
110
  @include composite-var($alert-top-button-button-close);
105
111
 
@@ -151,10 +157,4 @@ $colors: 'invert-neutral', 'primary', 'red', 'yellow', 'green';
151
157
  }
152
158
  }
153
159
  }
154
- }
155
-
156
- .actions {
157
- display: flex;
158
- gap: $dimension-2m;
159
- align-items: center;
160
160
  }