@snack-uikit/toaster 0.6.3 → 0.6.4-preview-993a9cfb.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 (6) hide show
  1. package/dist/components/ToastSystemEvent/styles.module.css +36 -36
  2. package/dist/components/ToastUserAction/styles.module.css +8 -8
  3. package/dist/components/ToasterContainer/styles.module.css +6 -6
  4. package/dist/helperComponents/ButtonAction/styles.module.css +8 -8
  5. package/package.json +5 -5
  6. package/src/components/ToasterContainer/styles.module.scss +2 -2
package/dist/components/ToastSystemEvent/styles.module.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .icon svg{
2
- width:var(--dimension-3m, 24px) !important;
3
- height:var(--dimension-3m, 24px) !important;
2
+ width:var(--size-icon-container-s, 24px) !important;
3
+ height:var(--size-icon-container-s, 24px) !important;
4
4
  }
5
5
 
6
6
  .buttonClose{
@@ -14,26 +14,26 @@
14
14
  box-sizing:border-box;
15
15
  margin:0;
16
16
  padding:0;
17
- color:var(--sys-invert-neutral-text-light, #898989);
17
+ color:var(--sys-invert-neutral-text-light, #868892);
18
18
  background-color:transparent;
19
19
  border:none;
20
20
  }
21
21
  .buttonClose svg{
22
- width:var(--dimension-3m, 24px) !important;
23
- height:var(--dimension-3m, 24px) !important;
22
+ width:var(--size-icon-container-s, 24px) !important;
23
+ height:var(--size-icon-container-s, 24px) !important;
24
24
  }
25
25
  .buttonClose:hover{
26
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
26
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
27
27
  }
28
28
  .buttonClose:focus, .buttonClose:active{
29
- color:var(--sys-invert-neutral-accent-pressed, #9e9e9e);
29
+ color:var(--sys-invert-neutral-accent-pressed, #b3b6bf);
30
30
  }
31
31
  .buttonClose: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
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
36
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
35
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
36
+ outline-color:var(--sys-available-on-complementary, #ffffff);
37
37
  outline-offset:var(--spacing-state-focus-offset, 2px);
38
38
  }
39
39
 
@@ -112,52 +112,52 @@
112
112
  animation-play-state:paused;
113
113
  }
114
114
  .container[data-appearance=neutral]{
115
- background-color:var(--sys-invert-neutral-background, #232323);
115
+ background-color:var(--sys-invert-neutral-background, #202025);
116
116
  }
117
117
  .container[data-appearance=neutral] .icon{
118
- color:var(--sys-invert-neutral-accent-default, #d2d2d2);
118
+ color:var(--sys-invert-neutral-accent-default, #cfd2dc);
119
119
  }
120
120
  .container[data-appearance=neutral] .title{
121
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
121
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
122
122
  }
123
123
  .container[data-appearance=neutral] .description{
124
- color:var(--sys-invert-neutral-text-support, #b8b8b8);
124
+ color:var(--sys-invert-neutral-text-support, #bfc2cc);
125
125
  }
126
126
  .container[data-appearance=neutral] .progress{
127
- background-color:var(--sys-neutral-accent-default, #757575);
127
+ background-color:var(--sys-neutral-accent-default, #6f717c);
128
128
  }
129
129
  .container[data-appearance=error]{
130
- background-color:var(--sys-invert-neutral-background, #232323);
130
+ background-color:var(--sys-invert-neutral-background, #202025);
131
131
  }
132
132
  .container[data-appearance=error] .icon{
133
- color:var(--sys-red-accent-default, #d93f2f);
133
+ color:var(--sys-red-accent-default, #cd3c3c);
134
134
  }
135
135
  .container[data-appearance=error] .title{
136
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
136
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
137
137
  }
138
138
  .container[data-appearance=error] .description{
139
- color:var(--sys-invert-neutral-text-support, #b8b8b8);
139
+ color:var(--sys-invert-neutral-text-support, #bfc2cc);
140
140
  }
141
141
  .container[data-appearance=error] .progress{
142
- background-color:var(--sys-red-accent-default, #d93f2f);
142
+ background-color:var(--sys-red-accent-default, #cd3c3c);
143
143
  }
144
144
  .container[data-appearance=errorCritical]{
145
- background-color:var(--sys-red-accent-default, #d93f2f);
145
+ background-color:var(--sys-red-accent-default, #cd3c3c);
146
146
  }
147
147
  .container[data-appearance=errorCritical] .icon{
148
- color:var(--sys-red-on-accent, #fffbfa);
148
+ color:var(--sys-red-on-accent, #fffbf9);
149
149
  }
150
150
  .container[data-appearance=errorCritical] .title{
151
- color:var(--sys-red-on-accent, #fffbfa);
151
+ color:var(--sys-red-on-accent, #fffbf9);
152
152
  }
153
153
  .container[data-appearance=errorCritical] .description{
154
- color:var(--sys-red-on-accent, #fffbfa);
154
+ color:var(--sys-red-on-accent, #fffbf9);
155
155
  }
156
156
  .container[data-appearance=errorCritical] .progress{
157
- background-color:var(--sys-red-decor-activated, #ffa491);
157
+ background-color:var(--sys-red-decor-activated, #fbab99);
158
158
  }
159
159
  .container[data-appearance=errorCritical] .buttonClose{
160
- color:var(--sys-red-on-accent, #fffbfa);
160
+ color:var(--sys-red-on-accent, #fffbf9);
161
161
  opacity:var(--opacity-a064, 0.64);
162
162
  }
163
163
  .container[data-appearance=errorCritical] .buttonClose:hover, .container[data-appearance=errorCritical] .buttonClose:focus-visible{
@@ -167,39 +167,39 @@
167
167
  opacity:var(--opacity-a048, 0.48);
168
168
  }
169
169
  .container[data-appearance=warning]{
170
- background-color:var(--sys-invert-neutral-background, #232323);
170
+ background-color:var(--sys-invert-neutral-background, #202025);
171
171
  }
172
172
  .container[data-appearance=warning] .icon{
173
- color:var(--sys-yellow-accent-default, #feb528);
173
+ color:var(--sys-yellow-accent-default, #fdca46);
174
174
  }
175
175
  .container[data-appearance=warning] .title{
176
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
176
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
177
177
  }
178
178
  .container[data-appearance=warning] .description{
179
- color:var(--sys-invert-neutral-text-support, #b8b8b8);
179
+ color:var(--sys-invert-neutral-text-support, #bfc2cc);
180
180
  }
181
181
  .container[data-appearance=warning] .progress{
182
- background-color:var(--sys-yellow-accent-default, #feb528);
182
+ background-color:var(--sys-yellow-accent-default, #fdca46);
183
183
  }
184
184
  .container[data-appearance=success]{
185
- background-color:var(--sys-invert-neutral-background, #232323);
185
+ background-color:var(--sys-invert-neutral-background, #202025);
186
186
  }
187
187
  .container[data-appearance=success] .icon{
188
- color:var(--sys-green-accent-default, #0bbe8f);
188
+ color:var(--sys-green-accent-default, #57b762);
189
189
  }
190
190
  .container[data-appearance=success] .title{
191
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
191
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
192
192
  }
193
193
  .container[data-appearance=success] .description{
194
- color:var(--sys-invert-neutral-text-support, #b8b8b8);
194
+ color:var(--sys-invert-neutral-text-support, #bfc2cc);
195
195
  }
196
196
  .container[data-appearance=success] .progress{
197
- background-color:var(--sys-green-accent-default, #0bbe8f);
197
+ background-color:var(--sys-green-accent-default, #57b762);
198
198
  }
199
199
 
200
200
  .loader{
201
201
  display:flex;
202
202
  align-items:center;
203
203
  justify-content:center;
204
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
204
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
205
205
  }
package/dist/components/ToastUserAction/styles.module.css CHANGED
@@ -4,8 +4,8 @@
4
4
  justify-content:center;
5
5
  }
6
6
  .icon svg{
7
- width:var(--dimension-3m, 24px) !important;
8
- height:var(--dimension-3m, 24px) !important;
7
+ width:var(--size-icon-container-s, 24px) !important;
8
+ height:var(--size-icon-container-s, 24px) !important;
9
9
  }
10
10
 
11
11
  .label{
@@ -15,7 +15,7 @@
15
15
  font-size:var(--sans-label-l-font-size, 14px);
16
16
  letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
17
17
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
18
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
18
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
19
19
  }
20
20
 
21
21
  .container{
@@ -27,23 +27,23 @@
27
27
  align-items:center;
28
28
  justify-content:center;
29
29
  box-sizing:border-box;
30
- background-color:var(--sys-invert-neutral-background, #232323);
30
+ background-color:var(--sys-invert-neutral-background, #202025);
31
31
  }
32
32
  .container[data-appearance=error] .icon{
33
- color:var(--sys-red-accent-default, #d93f2f);
33
+ color:var(--sys-red-accent-default, #cd3c3c);
34
34
  }
35
35
  .container[data-appearance=warning] .icon{
36
- color:var(--sys-yellow-accent-default, #feb528);
36
+ color:var(--sys-yellow-accent-default, #fdca46);
37
37
  }
38
38
  .container[data-appearance=success] .icon{
39
- color:var(--sys-green-accent-default, #0bbe8f);
39
+ color:var(--sys-green-accent-default, #57b762);
40
40
  }
41
41
 
42
42
  .loader{
43
43
  display:flex;
44
44
  align-items:center;
45
45
  justify-content:center;
46
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
46
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
47
47
  }
48
48
 
49
49
  .contentLayout{
package/dist/components/ToasterContainer/styles.module.css CHANGED
@@ -18,24 +18,24 @@
18
18
  cursor:pointer;
19
19
  box-sizing:border-box;
20
20
  width:100%;
21
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
22
- background-color:var(--sys-invert-neutral-background, #232323);
21
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
22
+ background-color:var(--sys-invert-neutral-background, #202025);
23
23
  border:none;
24
24
  outline:none;
25
25
  }
26
26
  .buttonCloseColumn:hover{
27
- background-color:var(--sys-invert-neutral-decor-hovered, #494949);
27
+ background-color:var(--sys-invert-neutral-decor-hovered, #656771);
28
28
  }
29
29
  .buttonCloseColumn:focus-visible{
30
30
  outline-width:var(--border-state-focus-s-border-width, 2px);
31
31
  outline-style:var(--border-state-focus-s-border-style, solid);
32
32
  outline-color:var(--border-state-focus-s-border-color, );
33
- background-color:var(--sys-invert-neutral-decor-hovered, #494949);
34
- outline-color:var(--sys-available-complementary, #131313);
33
+ background-color:var(--sys-invert-neutral-decor-hovered, #656771);
34
+ outline-color:var(--sys-available-complementary, #141415);
35
35
  outline-offset:var(--spacing-state-focus-offset, 2px);
36
36
  }
37
37
  .buttonCloseColumn:active{
38
- color:var(--sys-invert-neutral-text-light, #898989);
38
+ color:var(--sys-invert-neutral-text-light, #868892);
39
39
  }
40
40
 
41
41
  .container-system-event{
package/dist/helperComponents/ButtonAction/styles.module.css CHANGED
@@ -15,29 +15,29 @@
15
15
  justify-content:center;
16
16
  box-sizing:border-box;
17
17
  margin:0;
18
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
19
- background-color:var(--sys-invert-neutral-decor-default, #333333);
18
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
19
+ background-color:var(--sys-invert-neutral-decor-default, #393a42);
20
20
  border:none;
21
21
  }
22
22
  .buttonAction:hover, .buttonAction:focus-visible{
23
- background-color:var(--sys-invert-neutral-decor-hovered, #494949);
23
+ background-color:var(--sys-invert-neutral-decor-hovered, #656771);
24
24
  }
25
25
  .buttonAction:active{
26
- background-color:var(--sys-invert-neutral-decor-activated, #494949);
26
+ background-color:var(--sys-invert-neutral-decor-activated, #6a6c75);
27
27
  }
28
28
  .buttonAction:focus-visible{
29
29
  outline-width:var(--border-state-focus-s-border-width, 2px);
30
30
  outline-style:var(--border-state-focus-s-border-style, solid);
31
31
  outline-color:var(--border-state-focus-s-border-color, );
32
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
32
+ outline-color:var(--sys-available-on-complementary, #ffffff);
33
33
  outline-offset:var(--spacing-state-focus-offset, 2px);
34
34
  }
35
35
  .buttonAction[data-critical]{
36
- background-color:var(--sys-opacity-enabled, rgba(253, 253, 253, 0.1607843137));
36
+ background-color:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
37
37
  }
38
38
  .buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus-visible{
39
- background-color:var(--sys-opacity-hovered, rgba(253, 253, 253, 0.2392156863));
39
+ background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
40
40
  }
41
41
  .buttonAction[data-critical]:active{
42
- background-color:var(--sys-opacity-activated, rgba(253, 253, 253, 0.3215686275));
42
+ background-color:var(--sys-opacity-activated, rgba(255, 255, 255, 0.3215686275));
43
43
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.6.3",
7
+ "version": "0.6.4-preview-993a9cfb.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,12 +33,12 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/icons": "0.20.1",
36
- "@snack-uikit/link": "0.11.1",
37
- "@snack-uikit/loaders": "0.5.0",
38
- "@snack-uikit/truncate-string": "0.4.7",
36
+ "@snack-uikit/link": "0.11.2-preview-993a9cfb.0",
37
+ "@snack-uikit/loaders": "0.5.1-preview-993a9cfb.0",
38
+ "@snack-uikit/truncate-string": "0.4.8-preview-993a9cfb.0",
39
39
  "@snack-uikit/utils": "3.2.0",
40
40
  "classnames": "2.3.2",
41
41
  "react-toastify": "9.1.3"
42
42
  },
43
- "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
43
+ "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
44
44
  }
package/src/components/ToasterContainer/styles.module.scss CHANGED
@@ -1,7 +1,7 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
3
1
  @import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
4
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';
5
5
 
6
6
  .buttonCloseColumnWrapper {
7
7
  @include composite-var($toaster-system-event-toaster-container);