@snack-uikit/toaster 0.11.12 → 0.11.13-preview-05f26bf6.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.
@@ -98,9 +98,9 @@
98
98
  }
99
99
 
100
100
  .container{
101
- padding:var(--space-toaster-toast-system-event-container-padding, 16px);
102
- border-radius:var(--radius-toaster-toast-system-event-container, 16px);
103
- gap:var(--space-toaster-toast-system-event-container-gap, 16px);
101
+ padding:var(--space-toaster-toast-system-event-container-padding, 12px);
102
+ border-radius:var(--radius-toaster-toast-system-event-container, 8px);
103
+ gap:var(--space-toaster-toast-system-event-container-gap, 12px);
104
104
  cursor:default;
105
105
  position:relative;
106
106
  overflow:hidden;
@@ -123,7 +123,7 @@
123
123
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
124
124
  }
125
125
  .container[data-appearance=neutral] .description{
126
- color:var(--sys-invert-neutral-text-support, #bec2cf);
126
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
127
127
  }
128
128
  .container[data-appearance=neutral] .progress{
129
129
  background-color:var(--sys-neutral-accent-default, #787b8a);
@@ -138,7 +138,7 @@
138
138
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
139
139
  }
140
140
  .container[data-appearance=error] .description{
141
- color:var(--sys-invert-neutral-text-support, #bec2cf);
141
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
142
142
  }
143
143
  .container[data-appearance=error] .progress{
144
144
  background-color:var(--sys-red-accent-default, #cb3f3e);
@@ -178,7 +178,7 @@
178
178
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
179
179
  }
180
180
  .container[data-appearance=warning] .description{
181
- color:var(--sys-invert-neutral-text-support, #bec2cf);
181
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
182
182
  }
183
183
  .container[data-appearance=warning] .progress{
184
184
  background-color:var(--sys-yellow-accent-default, #e2b134);
@@ -193,7 +193,7 @@
193
193
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
194
194
  }
195
195
  .container[data-appearance=success] .description{
196
- color:var(--sys-invert-neutral-text-support, #bec2cf);
196
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
197
197
  }
198
198
  .container[data-appearance=success] .progress{
199
199
  background-color:var(--sys-green-accent-default, #57b762);
@@ -6,13 +6,13 @@
6
6
  display:flex;
7
7
  flex-direction:column;
8
8
  box-sizing:border-box;
9
- width:calc(var(--size-toaster-toast-system-event-container, 320px) - var(--space-toaster-toast-system-event-container-padding, 16px));
9
+ width:calc(var(--size-toaster-toast-system-event-container, 320px) - var(--space-toaster-toast-system-event-container-padding, 12px));
10
10
  max-width:100%;
11
11
  max-height:386px;
12
12
  background-color:var(--sys-invert-neutral-background, #30303c);
13
- padding:var(--space-toaster-toast-system-event-container-padding, 16px);
14
- border-radius:var(--radius-toaster-toast-system-event-container, 16px);
15
- gap:var(--space-toaster-toast-system-event-container-gap, 16px);
13
+ padding:var(--space-toaster-toast-system-event-container-padding, 12px);
14
+ border-radius:var(--radius-toaster-toast-system-event-container, 8px);
15
+ gap:var(--space-toaster-toast-system-event-container-gap, 12px);
16
16
  }
17
17
  .container[data-collapsed]{
18
18
  gap:0;
@@ -90,7 +90,7 @@
90
90
  font-size:var(--sans-body-m-font-size, 14px);
91
91
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
92
92
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
93
- color:var(--sys-invert-neutral-text-support, #bec2cf);
93
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
94
94
  }
95
95
 
96
96
  .totalPercentage{
@@ -100,7 +100,7 @@
100
100
  font-size:var(--sans-body-m-font-size, 14px);
101
101
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
102
102
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
103
- color:var(--sys-invert-neutral-text-support, #bec2cf);
103
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
104
104
  }
105
105
 
106
106
  .list{
@@ -110,7 +110,7 @@
110
110
  box-sizing:content-box;
111
111
  max-height:288px;
112
112
  margin-top:0;
113
- padding-right:calc(var(--space-toaster-toast-system-event-container-padding, 16px) - var(--dimension-050m, 4px));
113
+ padding-right:calc(var(--space-toaster-toast-system-event-container-padding, 12px) - var(--dimension-050m, 4px));
114
114
  transition:all 0.1s;
115
115
  }
116
116
  [data-collapsed] .list{
@@ -22,7 +22,7 @@
22
22
  height:var(--size-toaster-toast-user-action-container, 40px);
23
23
  padding-left:var(--space-toaster-toast-user-action-horizont-padding, 8px);
24
24
  padding-right:var(--space-toaster-toast-user-action-horizont-padding, 8px);
25
- border-radius:var(--radius-toaster-toast-user-action-container, 16px);
25
+ border-radius:var(--radius-toaster-toast-user-action-container, 8px);
26
26
  display:flex;
27
27
  align-items:center;
28
28
  justify-content:center;
@@ -8,7 +8,7 @@
8
8
 
9
9
  .buttonCloseColumn{
10
10
  height:var(--size-toaster-button-close-column, 40px);
11
- border-radius:var(--radius-toaster-system-event-button-close-column, 16px);
11
+ border-radius:var(--radius-toaster-system-event-button-close-column, 8px);
12
12
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
13
13
  font-weight:var(--sans-body-m-font-weight, Regular);
14
14
  line-height:var(--sans-body-m-line-height, 20px);
@@ -61,7 +61,7 @@
61
61
 
62
62
  @media only screen and (max-width: 480px){
63
63
  .buttonCloseColumnWrapper{
64
- max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
64
+ max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
65
65
  }
66
66
  }
67
67
  :global .osThemeSnack.Toastify__toast-container{
@@ -143,7 +143,7 @@
143
143
  width:var(--size-toaster-toast-system-event-container, 320px);
144
144
  display:flex;
145
145
  flex-direction:column;
146
- max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
146
+ max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
147
147
  }
148
148
  :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
149
149
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
@@ -157,10 +157,10 @@
157
157
  :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
158
158
  pointer-events:none;
159
159
  z-index:1;
160
- top:var(--space-toaster-toast-system-event-container-padding, 16px);
161
- right:var(--space-toaster-toast-system-event-container-padding, 16px);
162
- bottom:var(--space-toaster-toast-system-event-container-padding, 16px);
163
- left:var(--space-toaster-toast-system-event-container-padding, 16px);
160
+ top:var(--space-toaster-toast-system-event-container-padding, 12px);
161
+ right:var(--space-toaster-toast-system-event-container-padding, 12px);
162
+ bottom:var(--space-toaster-toast-system-event-container-padding, 12px);
163
+ left:var(--space-toaster-toast-system-event-container-padding, 12px);
164
164
  display:flex;
165
165
  flex-direction:column;
166
166
  }
@@ -16,7 +16,7 @@
16
16
  box-sizing:border-box;
17
17
  margin:0;
18
18
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
19
- background-color:var(--sys-invert-neutral-decor-default, #4e4f5a);
19
+ background-color:var(--sys-invert-neutral-decor-default, #51525d);
20
20
  border:none;
21
21
  }
22
22
  .buttonAction:hover, .buttonAction:focus-visible{
@@ -98,9 +98,9 @@
98
98
  }
99
99
 
100
100
  .container{
101
- padding:var(--space-toaster-toast-system-event-container-padding, 16px);
102
- border-radius:var(--radius-toaster-toast-system-event-container, 16px);
103
- gap:var(--space-toaster-toast-system-event-container-gap, 16px);
101
+ padding:var(--space-toaster-toast-system-event-container-padding, 12px);
102
+ border-radius:var(--radius-toaster-toast-system-event-container, 8px);
103
+ gap:var(--space-toaster-toast-system-event-container-gap, 12px);
104
104
  cursor:default;
105
105
  position:relative;
106
106
  overflow:hidden;
@@ -123,7 +123,7 @@
123
123
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
124
124
  }
125
125
  .container[data-appearance=neutral] .description{
126
- color:var(--sys-invert-neutral-text-support, #bec2cf);
126
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
127
127
  }
128
128
  .container[data-appearance=neutral] .progress{
129
129
  background-color:var(--sys-neutral-accent-default, #787b8a);
@@ -138,7 +138,7 @@
138
138
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
139
139
  }
140
140
  .container[data-appearance=error] .description{
141
- color:var(--sys-invert-neutral-text-support, #bec2cf);
141
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
142
142
  }
143
143
  .container[data-appearance=error] .progress{
144
144
  background-color:var(--sys-red-accent-default, #cb3f3e);
@@ -178,7 +178,7 @@
178
178
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
179
179
  }
180
180
  .container[data-appearance=warning] .description{
181
- color:var(--sys-invert-neutral-text-support, #bec2cf);
181
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
182
182
  }
183
183
  .container[data-appearance=warning] .progress{
184
184
  background-color:var(--sys-yellow-accent-default, #e2b134);
@@ -193,7 +193,7 @@
193
193
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
194
194
  }
195
195
  .container[data-appearance=success] .description{
196
- color:var(--sys-invert-neutral-text-support, #bec2cf);
196
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
197
197
  }
198
198
  .container[data-appearance=success] .progress{
199
199
  background-color:var(--sys-green-accent-default, #57b762);
@@ -6,13 +6,13 @@
6
6
  display:flex;
7
7
  flex-direction:column;
8
8
  box-sizing:border-box;
9
- width:calc(var(--size-toaster-toast-system-event-container, 320px) - var(--space-toaster-toast-system-event-container-padding, 16px));
9
+ width:calc(var(--size-toaster-toast-system-event-container, 320px) - var(--space-toaster-toast-system-event-container-padding, 12px));
10
10
  max-width:100%;
11
11
  max-height:386px;
12
12
  background-color:var(--sys-invert-neutral-background, #30303c);
13
- padding:var(--space-toaster-toast-system-event-container-padding, 16px);
14
- border-radius:var(--radius-toaster-toast-system-event-container, 16px);
15
- gap:var(--space-toaster-toast-system-event-container-gap, 16px);
13
+ padding:var(--space-toaster-toast-system-event-container-padding, 12px);
14
+ border-radius:var(--radius-toaster-toast-system-event-container, 8px);
15
+ gap:var(--space-toaster-toast-system-event-container-gap, 12px);
16
16
  }
17
17
  .container[data-collapsed]{
18
18
  gap:0;
@@ -90,7 +90,7 @@
90
90
  font-size:var(--sans-body-m-font-size, 14px);
91
91
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
92
92
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
93
- color:var(--sys-invert-neutral-text-support, #bec2cf);
93
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
94
94
  }
95
95
 
96
96
  .totalPercentage{
@@ -100,7 +100,7 @@
100
100
  font-size:var(--sans-body-m-font-size, 14px);
101
101
  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
102
102
  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
103
- color:var(--sys-invert-neutral-text-support, #bec2cf);
103
+ color:var(--sys-invert-neutral-text-support, #b6bac7);
104
104
  }
105
105
 
106
106
  .list{
@@ -110,7 +110,7 @@
110
110
  box-sizing:content-box;
111
111
  max-height:288px;
112
112
  margin-top:0;
113
- padding-right:calc(var(--space-toaster-toast-system-event-container-padding, 16px) - var(--dimension-050m, 4px));
113
+ padding-right:calc(var(--space-toaster-toast-system-event-container-padding, 12px) - var(--dimension-050m, 4px));
114
114
  transition:all 0.1s;
115
115
  }
116
116
  [data-collapsed] .list{
@@ -22,7 +22,7 @@
22
22
  height:var(--size-toaster-toast-user-action-container, 40px);
23
23
  padding-left:var(--space-toaster-toast-user-action-horizont-padding, 8px);
24
24
  padding-right:var(--space-toaster-toast-user-action-horizont-padding, 8px);
25
- border-radius:var(--radius-toaster-toast-user-action-container, 16px);
25
+ border-radius:var(--radius-toaster-toast-user-action-container, 8px);
26
26
  display:flex;
27
27
  align-items:center;
28
28
  justify-content:center;
@@ -8,7 +8,7 @@
8
8
 
9
9
  .buttonCloseColumn{
10
10
  height:var(--size-toaster-button-close-column, 40px);
11
- border-radius:var(--radius-toaster-system-event-button-close-column, 16px);
11
+ border-radius:var(--radius-toaster-system-event-button-close-column, 8px);
12
12
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
13
13
  font-weight:var(--sans-body-m-font-weight, Regular);
14
14
  line-height:var(--sans-body-m-line-height, 20px);
@@ -61,7 +61,7 @@
61
61
 
62
62
  @media only screen and (max-width: 480px){
63
63
  .buttonCloseColumnWrapper{
64
- max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
64
+ max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
65
65
  }
66
66
  }
67
67
  :global .osThemeSnack.Toastify__toast-container{
@@ -143,7 +143,7 @@
143
143
  width:var(--size-toaster-toast-system-event-container, 320px);
144
144
  display:flex;
145
145
  flex-direction:column;
146
- max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 16px));
146
+ max-width:calc(100vw - 2 * var(--space-toaster-toast-system-event-container-padding, 12px));
147
147
  }
148
148
  :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__user-action{
149
149
  padding-bottom:var(--space-toaster-toast-user-action-padding-bottom, 8px);
@@ -157,10 +157,10 @@
157
157
  :global .osThemeSnack.Toastify__toast-container.osThemeSnack__toast-container__upload{
158
158
  pointer-events:none;
159
159
  z-index:1;
160
- top:var(--space-toaster-toast-system-event-container-padding, 16px);
161
- right:var(--space-toaster-toast-system-event-container-padding, 16px);
162
- bottom:var(--space-toaster-toast-system-event-container-padding, 16px);
163
- left:var(--space-toaster-toast-system-event-container-padding, 16px);
160
+ top:var(--space-toaster-toast-system-event-container-padding, 12px);
161
+ right:var(--space-toaster-toast-system-event-container-padding, 12px);
162
+ bottom:var(--space-toaster-toast-system-event-container-padding, 12px);
163
+ left:var(--space-toaster-toast-system-event-container-padding, 12px);
164
164
  display:flex;
165
165
  flex-direction:column;
166
166
  }
@@ -16,7 +16,7 @@
16
16
  box-sizing:border-box;
17
17
  margin:0;
18
18
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
19
- background-color:var(--sys-invert-neutral-decor-default, #4e4f5a);
19
+ background-color:var(--sys-invert-neutral-decor-default, #51525d);
20
20
  border:none;
21
21
  }
22
22
  .buttonAction:hover, .buttonAction:focus-visible{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.11.12",
7
+ "version": "0.11.13-preview-05f26bf6.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,17 +37,17 @@
37
37
  "scripts": {},
38
38
  "dependencies": {
39
39
  "@snack-uikit/icons": "0.27.2",
40
- "@snack-uikit/link": "0.17.9",
41
- "@snack-uikit/loaders": "0.9.8",
40
+ "@snack-uikit/link": "0.17.10-preview-05f26bf6.0",
41
+ "@snack-uikit/loaders": "0.9.9-preview-05f26bf6.0",
42
42
  "@snack-uikit/locale": "0.15.1",
43
- "@snack-uikit/progress-bar": "0.1.9",
44
- "@snack-uikit/scroll": "0.10.4",
45
- "@snack-uikit/truncate-string": "0.7.0",
46
- "@snack-uikit/utils": "3.10.1",
43
+ "@snack-uikit/progress-bar": "0.1.10-preview-05f26bf6.0",
44
+ "@snack-uikit/scroll": "0.10.5-preview-05f26bf6.0",
45
+ "@snack-uikit/truncate-string": "0.7.1-preview-05f26bf6.0",
46
+ "@snack-uikit/utils": "3.10.2-preview-05f26bf6.0",
47
47
  "classnames": "2.5.1",
48
48
  "react-draggable": "4.4.6",
49
49
  "react-toastify": "10.0.5",
50
50
  "uncontrollable": "9.0.0"
51
51
  },
52
- "gitHead": "fe6df3a62f59d9957bd8ff3d6a2afa781dddb24c"
52
+ "gitHead": "6fee645f4608f0384f0e44df312a82b4120739ac"
53
53
  }