@snack-uikit/toaster 0.10.1 → 0.10.2-preview-ef227a87.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 (16) hide show
  1. package/dist/cjs/components/ToastSystemEvent/styles.module.css +2 -2
  2. package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css +1 -1
  3. package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css +1 -1
  4. package/dist/cjs/components/ToasterContainer/styles.module.css +1 -1
  5. package/dist/cjs/helperComponents/ButtonAction/styles.module.css +3 -3
  6. package/dist/esm/components/ToastSystemEvent/styles.module.css +2 -2
  7. package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css +1 -1
  8. package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css +1 -1
  9. package/dist/esm/components/ToasterContainer/styles.module.css +1 -1
  10. package/dist/esm/helperComponents/ButtonAction/styles.module.css +3 -3
  11. package/package.json +4 -4
  12. package/src/components/ToastSystemEvent/styles.module.scss +2 -0
  13. package/src/components/ToastUpload/helperComponents/ButtonIcon/styles.module.scss +6 -3
  14. package/src/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.scss +5 -2
  15. package/src/components/ToasterContainer/styles.module.scss +22 -6
  16. package/src/helperComponents/ButtonAction/styles.module.scss +9 -2
package/dist/cjs/components/ToastSystemEvent/styles.module.css CHANGED
@@ -27,7 +27,7 @@
27
27
  .buttonClose:focus, .buttonClose:active{
28
28
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
29
29
  }
30
- .buttonClose:focus-visible{
30
+ .buttonClose:focus, .buttonClose:focus-visible{
31
31
  outline-width:var(--border-state-focus-s-border-width, 2px);
32
32
  outline-style:var(--border-state-focus-s-border-style, solid);
33
33
  outline-color:var(--border-state-focus-s-border-color, );
@@ -162,7 +162,7 @@
162
162
  color:var(--sys-red-on-accent, #fffbf9);
163
163
  opacity:var(--opacity-a064, 0.64);
164
164
  }
165
- .container[data-appearance=errorCritical] .buttonClose:hover, .container[data-appearance=errorCritical] .buttonClose:focus-visible{
165
+ .container[data-appearance=errorCritical] .buttonClose:hover, .container[data-appearance=errorCritical] .buttonClose:focus, .container[data-appearance=errorCritical] .buttonClose:focus-visible{
166
166
  opacity:1;
167
167
  }
168
168
  .container[data-appearance=errorCritical] .buttonClose:active{
package/dist/cjs/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css CHANGED
@@ -22,7 +22,7 @@
22
22
  .buttonIcon:active{
23
23
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
24
24
  }
25
- .buttonIcon:focus-visible{
25
+ .buttonIcon:focus, .buttonIcon:focus-visible{
26
26
  outline-width:var(--border-state-focus-s-border-width, 2px);
27
27
  outline-style:var(--border-state-focus-s-border-style, solid);
28
28
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
  .buttonTextNeutral:active{
25
25
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
26
26
  }
27
- .buttonTextNeutral:focus-visible{
27
+ .buttonTextNeutral:focus, .buttonTextNeutral:focus-visible{
28
28
  outline-width:var(--border-state-focus-s-border-width, 2px);
29
29
  outline-style:var(--border-state-focus-s-border-style, solid);
30
30
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/cjs/components/ToasterContainer/styles.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  .buttonCloseColumn:hover{
27
27
  background-color:var(--sys-invert-neutral-decor-hovered, #656774);
28
28
  }
29
- .buttonCloseColumn:focus-visible{
29
+ .buttonCloseColumn:focus, .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, );
package/dist/cjs/helperComponents/ButtonAction/styles.module.css CHANGED
@@ -19,13 +19,13 @@
19
19
  background-color:var(--sys-invert-neutral-decor-default, #4e4f5a);
20
20
  border:none;
21
21
  }
22
- .buttonAction:hover, .buttonAction:focus-visible{
22
+ .buttonAction:hover, .buttonAction:focus, .buttonAction:focus-visible{
23
23
  background-color:var(--sys-invert-neutral-decor-hovered, #656774);
24
24
  }
25
25
  .buttonAction:active{
26
26
  background-color:var(--sys-invert-neutral-decor-activated, #6d707f);
27
27
  }
28
- .buttonAction:focus-visible{
28
+ .buttonAction:focus, .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, );
@@ -35,7 +35,7 @@
35
35
  .buttonAction[data-critical]{
36
36
  background-color:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
37
37
  }
38
- .buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus-visible{
38
+ .buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus, .buttonAction[data-critical]:focus-visible{
39
39
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
40
40
  }
41
41
  .buttonAction[data-critical]:active{
package/dist/esm/components/ToastSystemEvent/styles.module.css CHANGED
@@ -27,7 +27,7 @@
27
27
  .buttonClose:focus, .buttonClose:active{
28
28
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
29
29
  }
30
- .buttonClose:focus-visible{
30
+ .buttonClose:focus, .buttonClose:focus-visible{
31
31
  outline-width:var(--border-state-focus-s-border-width, 2px);
32
32
  outline-style:var(--border-state-focus-s-border-style, solid);
33
33
  outline-color:var(--border-state-focus-s-border-color, );
@@ -162,7 +162,7 @@
162
162
  color:var(--sys-red-on-accent, #fffbf9);
163
163
  opacity:var(--opacity-a064, 0.64);
164
164
  }
165
- .container[data-appearance=errorCritical] .buttonClose:hover, .container[data-appearance=errorCritical] .buttonClose:focus-visible{
165
+ .container[data-appearance=errorCritical] .buttonClose:hover, .container[data-appearance=errorCritical] .buttonClose:focus, .container[data-appearance=errorCritical] .buttonClose:focus-visible{
166
166
  opacity:1;
167
167
  }
168
168
  .container[data-appearance=errorCritical] .buttonClose:active{
package/dist/esm/components/ToastUpload/helperComponents/ButtonIcon/styles.module.css CHANGED
@@ -22,7 +22,7 @@
22
22
  .buttonIcon:active{
23
23
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
24
24
  }
25
- .buttonIcon:focus-visible{
25
+ .buttonIcon:focus, .buttonIcon:focus-visible{
26
26
  outline-width:var(--border-state-focus-s-border-width, 2px);
27
27
  outline-style:var(--border-state-focus-s-border-style, solid);
28
28
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.css CHANGED
@@ -24,7 +24,7 @@
24
24
  .buttonTextNeutral:active{
25
25
  color:var(--sys-invert-neutral-accent-pressed, #aaaebd);
26
26
  }
27
- .buttonTextNeutral:focus-visible{
27
+ .buttonTextNeutral:focus, .buttonTextNeutral:focus-visible{
28
28
  outline-width:var(--border-state-focus-s-border-width, 2px);
29
29
  outline-style:var(--border-state-focus-s-border-style, solid);
30
30
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/components/ToasterContainer/styles.module.css CHANGED
@@ -26,7 +26,7 @@
26
26
  .buttonCloseColumn:hover{
27
27
  background-color:var(--sys-invert-neutral-decor-hovered, #656774);
28
28
  }
29
- .buttonCloseColumn:focus-visible{
29
+ .buttonCloseColumn:focus, .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, );
package/dist/esm/helperComponents/ButtonAction/styles.module.css CHANGED
@@ -19,13 +19,13 @@
19
19
  background-color:var(--sys-invert-neutral-decor-default, #4e4f5a);
20
20
  border:none;
21
21
  }
22
- .buttonAction:hover, .buttonAction:focus-visible{
22
+ .buttonAction:hover, .buttonAction:focus, .buttonAction:focus-visible{
23
23
  background-color:var(--sys-invert-neutral-decor-hovered, #656774);
24
24
  }
25
25
  .buttonAction:active{
26
26
  background-color:var(--sys-invert-neutral-decor-activated, #6d707f);
27
27
  }
28
- .buttonAction:focus-visible{
28
+ .buttonAction:focus, .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, );
@@ -35,7 +35,7 @@
35
35
  .buttonAction[data-critical]{
36
36
  background-color:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
37
37
  }
38
- .buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus-visible{
38
+ .buttonAction[data-critical]:hover, .buttonAction[data-critical]:focus, .buttonAction[data-critical]:focus-visible{
39
39
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
40
40
  }
41
41
  .buttonAction[data-critical]:active{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Toaster",
7
- "version": "0.10.1",
7
+ "version": "0.10.2-preview-ef227a87.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.26.2",
40
- "@snack-uikit/link": "0.17.0",
40
+ "@snack-uikit/link": "0.17.1-preview-ef227a87.0",
41
41
  "@snack-uikit/loaders": "0.9.3",
42
42
  "@snack-uikit/locale": "0.14.0",
43
43
  "@snack-uikit/progress-bar": "0.1.5",
44
44
  "@snack-uikit/scroll": "0.9.5",
45
- "@snack-uikit/truncate-string": "0.6.18",
45
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
46
46
  "@snack-uikit/utils": "3.8.1",
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": "cd2f258c295746a8d2d8002bfb2239ed71bd21a3"
52
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
53
53
  }
package/src/components/ToastSystemEvent/styles.module.scss CHANGED
@@ -65,6 +65,7 @@
65
65
  color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
66
66
  }
67
67
 
68
+ &:focus,
68
69
  &:focus-visible {
69
70
  @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
70
71
 
@@ -201,6 +202,7 @@
201
202
  opacity: styles-theme-variables.$opacity-a064;
202
203
 
203
204
  &:hover,
205
+ &:focus,
204
206
  &:focus-visible {
205
207
  opacity: 1;
206
208
  }
package/src/components/ToastUpload/helperComponents/ButtonIcon/styles.module.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
4
4
 
5
5
  .buttonIcon {
6
- @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral);
6
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(
7
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral
8
+ );
7
9
 
8
10
  cursor: pointer;
9
11
 
@@ -25,7 +27,7 @@
25
27
  height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
26
28
  }
27
29
 
28
- &:hover {
30
+ &:hover {
29
31
  color: styles-theme-variables.$sys-invert-neutral-text-main;
30
32
  }
31
33
 
@@ -33,6 +35,7 @@
33
35
  color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
34
36
  }
35
37
 
38
+ &:focus,
36
39
  &:focus-visible {
37
40
  @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
38
41
 
@@ -40,4 +43,4 @@
40
43
  outline-color: styles-theme-variables.$sys-available-on-complementary;
41
44
  outline-offset: styles-theme-variables.$spacing-state-focus-offset;
42
45
  }
43
- }
46
+ }
package/src/components/ToastUpload/helperComponents/ButtonTextNeutral/styles.module.scss CHANGED
@@ -3,7 +3,9 @@
3
3
  @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
4
4
 
5
5
  .buttonTextNeutral {
6
- @include styles-tokens-toaster-toasterSystemEvent.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral);
6
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(
7
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-neutral
8
+ );
7
9
  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
8
10
 
9
11
  cursor: pointer;
@@ -29,10 +31,11 @@
29
31
  color: styles-theme-variables.$sys-invert-neutral-accent-pressed;
30
32
  }
31
33
 
34
+ &:focus,
32
35
  &:focus-visible {
33
36
  @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
34
37
 
35
38
  outline-color: styles-theme-variables.$sys-available-on-complementary;
36
39
  outline-offset: styles-theme-variables.$spacing-state-focus-offset;
37
40
  }
38
- }
41
+ }
package/src/components/ToasterContainer/styles.module.scss CHANGED
@@ -1,17 +1,23 @@
1
+ /* stylelint-disable scss/operator-no-newline-after */
2
+
1
3
  @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
2
4
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
5
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterSystemEvent';
4
6
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toaster-toasterUserAction';
5
7
 
6
8
  .buttonCloseColumnWrapper {
7
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
9
+ @include styles-theme-variables.composite-var(
10
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container
11
+ );
8
12
 
9
13
  position: fixed;
10
14
  box-sizing: border-box;
11
15
  }
12
16
 
13
17
  .buttonCloseColumn {
14
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-button-close-column);
18
+ @include styles-theme-variables.composite-var(
19
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-button-close-column
20
+ );
15
21
  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
16
22
 
17
23
  cursor: pointer;
@@ -29,6 +35,7 @@
29
35
  background-color: styles-theme-variables.$sys-invert-neutral-decor-hovered;
30
36
  }
31
37
 
38
+ &:focus,
32
39
  &:focus-visible {
33
40
  @include styles-theme-variables.outline-var(styles-tokens-element.$container-focused-s);
34
41
 
@@ -61,7 +68,10 @@
61
68
  }
62
69
 
63
70
  .containerWithCloseAllButton {
64
- margin-bottom: calc(styles-theme-variables.$size-toaster-button-close-column + styles-theme-variables.$space-toaster-toast-system-event-gap);
71
+ margin-bottom: calc(
72
+ styles-theme-variables.$size-toaster-button-close-column +
73
+ styles-theme-variables.$space-toaster-toast-system-event-gap
74
+ );
65
75
  }
66
76
 
67
77
  @media only screen and (max-width: 480px) {
@@ -114,7 +124,9 @@ $theme-name: osThemeSnack;
114
124
  }
115
125
 
116
126
  .#{container-user-action} {
117
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
127
+ @include styles-theme-variables.composite-var(
128
+ styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container
129
+ );
118
130
 
119
131
  display: flex;
120
132
  flex-direction: column;
@@ -167,7 +179,9 @@ $theme-name: osThemeSnack;
167
179
  }
168
180
 
169
181
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__system-event {
170
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container);
182
+ @include styles-theme-variables.composite-var(
183
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toaster-container
184
+ );
171
185
 
172
186
  display: flex;
173
187
  flex-direction: column;
@@ -175,7 +189,9 @@ $theme-name: osThemeSnack;
175
189
  }
176
190
 
177
191
  .#{$theme-name}.Toastify__toast-container.osThemeSnack__toast-container__user-action {
178
- @include styles-theme-variables.composite-var(styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container);
192
+ @include styles-theme-variables.composite-var(
193
+ styles-tokens-toaster-toasterUserAction.$toaster-user-action-toaster-container
194
+ );
179
195
 
180
196
  display: flex;
181
197
  flex-direction: column;
package/src/helperComponents/ButtonAction/styles.module.scss CHANGED
@@ -2,8 +2,12 @@
2
2
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  .buttonAction {
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);
5
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(
6
+ styles-tokens-toaster-toasterSystemEvent.$toaster-system-event-toast-button-button-action
7
+ );
8
+ @include styles-tokens-toaster-toasterSystemEvent.composite-var(
9
+ styles-tokens-toaster-toasterSystemEvent.$sans-body-m
10
+ );
7
11
 
8
12
  cursor: pointer;
9
13
 
@@ -20,6 +24,7 @@
20
24
  border: none;
21
25
 
22
26
  &:hover,
27
+ &:focus,
23
28
  &:focus-visible {
24
29
  background-color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-decor-hovered;
25
30
  }
@@ -28,6 +33,7 @@
28
33
  background-color: styles-tokens-toaster-toasterSystemEvent.$sys-invert-neutral-decor-activated;
29
34
  }
30
35
 
36
+ &:focus,
31
37
  &:focus-visible {
32
38
  @include styles-tokens-toaster-toasterSystemEvent.outline-var(styles-tokens-element.$container-focused-s);
33
39
 
@@ -39,6 +45,7 @@
39
45
  background-color: styles-tokens-toaster-toasterSystemEvent.$sys-opacity-enabled;
40
46
 
41
47
  &:hover,
48
+ &:focus,
42
49
  &:focus-visible {
43
50
  background-color: styles-tokens-toaster-toasterSystemEvent.$sys-opacity-hovered;
44
51
  }