@snack-uikit/alert 0.16.6 → 0.16.7-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 (4) hide show
  1. package/dist/cjs/helperComponents/styles.module.css +8 -8
  2. package/dist/esm/helperComponents/styles.module.css +8 -8
  3. package/package.json +4 -4
  4. package/src/helperComponents/styles.module.scss +8 -3
package/dist/cjs/helperComponents/styles.module.css CHANGED
@@ -64,14 +64,14 @@
64
64
  width:var(--size-alert-button-m, 24px);
65
65
  border-radius:var(--radius-alert-button, 8px);
66
66
  }
67
- .alertButton[data-variant=simple]:focus-visible{
67
+ .alertButton[data-variant=simple]:focus, .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
69
69
  outline-offset:var(--spacing-state-focus-offset, 2px);
70
70
  }
71
71
  .alertButton[data-variant=simple][data-appearance=neutral]{
72
72
  color:var(--sys-neutral-text-support, #6d707f);
73
73
  }
74
- .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
74
+ .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
75
75
  color:var(--sys-neutral-text-main, #41424e);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
@@ -80,7 +80,7 @@
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
81
  color:var(--sys-primary-text-support, #5b4796);
82
82
  }
83
- .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
83
+ .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
84
  color:var(--sys-primary-text-main, #382a62);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
@@ -89,7 +89,7 @@
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
91
91
  }
92
- .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
92
+ .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
93
93
  color:var(--sys-red-text-main, #7a2d2d);
94
94
  }
95
95
  .alertButton[data-variant=simple][data-appearance=red]:active{
@@ -98,7 +98,7 @@
98
98
  .alertButton[data-variant=simple][data-appearance=yellow]{
99
99
  color:var(--sys-yellow-text-support, #b78c32);
100
100
  }
101
- .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
101
+ .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
102
102
  color:var(--sys-yellow-text-main, #815f19);
103
103
  }
104
104
  .alertButton[data-variant=simple][data-appearance=yellow]:active{
@@ -107,7 +107,7 @@
107
107
  .alertButton[data-variant=simple][data-appearance=green]{
108
108
  color:var(--sys-green-text-support, #55915a);
109
109
  }
110
- .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
110
+ .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
111
111
  color:var(--sys-green-text-main, #3d6035);
112
112
  }
113
113
  .alertButton[data-variant=simple][data-appearance=green]:active{
@@ -116,7 +116,7 @@
116
116
  .alertButton[data-variant=simple][data-appearance=blue]{
117
117
  color:var(--sys-blue-text-support, #4877b0);
118
118
  }
119
- .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
119
+ .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
120
120
  color:var(--sys-blue-text-main, #2b537e);
121
121
  }
122
122
  .alertButton[data-variant=simple][data-appearance=blue]:active{
@@ -141,7 +141,7 @@
141
141
  opacity:unset;
142
142
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
143
143
  }
144
- .alertButton[data-variant=tonal]:focus-visible{
144
+ .alertButton[data-variant=tonal]:focus, .alertButton[data-variant=tonal]:focus-visible{
145
145
  outline-width:var(--border-state-focus-s-border-width, 2px);
146
146
  outline-style:var(--border-state-focus-s-border-style, solid);
147
147
  outline-color:var(--border-state-focus-s-border-color, );
package/dist/esm/helperComponents/styles.module.css CHANGED
@@ -64,14 +64,14 @@
64
64
  width:var(--size-alert-button-m, 24px);
65
65
  border-radius:var(--radius-alert-button, 8px);
66
66
  }
67
- .alertButton[data-variant=simple]:focus-visible{
67
+ .alertButton[data-variant=simple]:focus, .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
69
69
  outline-offset:var(--spacing-state-focus-offset, 2px);
70
70
  }
71
71
  .alertButton[data-variant=simple][data-appearance=neutral]{
72
72
  color:var(--sys-neutral-text-support, #6d707f);
73
73
  }
74
- .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
74
+ .alertButton[data-variant=simple][data-appearance=neutral]:hover, .alertButton[data-variant=simple][data-appearance=neutral]:focus, .alertButton[data-variant=simple][data-appearance=neutral]:focus-visible{
75
75
  color:var(--sys-neutral-text-main, #41424e);
76
76
  }
77
77
  .alertButton[data-variant=simple][data-appearance=neutral]:active{
@@ -80,7 +80,7 @@
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
81
  color:var(--sys-primary-text-support, #5b4796);
82
82
  }
83
- .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
83
+ .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
84
  color:var(--sys-primary-text-main, #382a62);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
@@ -89,7 +89,7 @@
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
91
91
  }
92
- .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
92
+ .alertButton[data-variant=simple][data-appearance=red]:hover, .alertButton[data-variant=simple][data-appearance=red]:focus, .alertButton[data-variant=simple][data-appearance=red]:focus-visible{
93
93
  color:var(--sys-red-text-main, #7a2d2d);
94
94
  }
95
95
  .alertButton[data-variant=simple][data-appearance=red]:active{
@@ -98,7 +98,7 @@
98
98
  .alertButton[data-variant=simple][data-appearance=yellow]{
99
99
  color:var(--sys-yellow-text-support, #b78c32);
100
100
  }
101
- .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
101
+ .alertButton[data-variant=simple][data-appearance=yellow]:hover, .alertButton[data-variant=simple][data-appearance=yellow]:focus, .alertButton[data-variant=simple][data-appearance=yellow]:focus-visible{
102
102
  color:var(--sys-yellow-text-main, #815f19);
103
103
  }
104
104
  .alertButton[data-variant=simple][data-appearance=yellow]:active{
@@ -107,7 +107,7 @@
107
107
  .alertButton[data-variant=simple][data-appearance=green]{
108
108
  color:var(--sys-green-text-support, #55915a);
109
109
  }
110
- .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
110
+ .alertButton[data-variant=simple][data-appearance=green]:hover, .alertButton[data-variant=simple][data-appearance=green]:focus, .alertButton[data-variant=simple][data-appearance=green]:focus-visible{
111
111
  color:var(--sys-green-text-main, #3d6035);
112
112
  }
113
113
  .alertButton[data-variant=simple][data-appearance=green]:active{
@@ -116,7 +116,7 @@
116
116
  .alertButton[data-variant=simple][data-appearance=blue]{
117
117
  color:var(--sys-blue-text-support, #4877b0);
118
118
  }
119
- .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
119
+ .alertButton[data-variant=simple][data-appearance=blue]:hover, .alertButton[data-variant=simple][data-appearance=blue]:focus, .alertButton[data-variant=simple][data-appearance=blue]:focus-visible{
120
120
  color:var(--sys-blue-text-main, #2b537e);
121
121
  }
122
122
  .alertButton[data-variant=simple][data-appearance=blue]:active{
@@ -141,7 +141,7 @@
141
141
  opacity:unset;
142
142
  background-color:var(--sys-opacity-hovered, rgba(255, 255, 255, 0.2392156863));
143
143
  }
144
- .alertButton[data-variant=tonal]:focus-visible{
144
+ .alertButton[data-variant=tonal]:focus, .alertButton[data-variant=tonal]:focus-visible{
145
145
  outline-width:var(--border-state-focus-s-border-width, 2px);
146
146
  outline-style:var(--border-state-focus-s-border-style, solid);
147
147
  outline-color:var(--border-state-focus-s-border-color, );
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.16.6",
7
+ "version": "0.16.7-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -37,11 +37,11 @@
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
- "@snack-uikit/truncate-string": "0.6.18",
42
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
43
43
  "@snack-uikit/utils": "3.8.1",
44
44
  "classnames": "2.5.1"
45
45
  },
46
- "gitHead": "cd2f258c295746a8d2d8002bfb2239ed71bd21a3"
46
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
47
47
  }
package/src/helperComponents/styles.module.scss CHANGED
@@ -5,7 +5,10 @@
5
5
  $simpleAppearances: 'neutral', 'primary', 'red', 'yellow', 'green', 'blue';
6
6
  $tonalAppearances: 'invert-neutral', 'primary', 'red', 'yellow', 'green', 'blue';
7
7
  $sizes: 's', 'm';
8
- $text: ('s': 'm', 'm': 'l');
8
+ $text: (
9
+ 's': 'm',
10
+ 'm': 'l',
11
+ );
9
12
 
10
13
  .alertButton {
11
14
  cursor: pointer;
@@ -26,7 +29,7 @@ $text: ('s': 'm', 'm': 'l');
26
29
  .text {
27
30
  @each $name, $glyph in $text {
28
31
  &[data-size='#{$name}'] {
29
- @include styles-tokens-alert.composite-var(styles-tokens-alert.$theme-variables, 'sans', 'label', $glyph)
32
+ @include styles-tokens-alert.composite-var(styles-tokens-alert.$theme-variables, 'sans', 'label', $glyph);
30
33
  }
31
34
  }
32
35
  }
@@ -60,11 +63,11 @@ $text: ('s': 'm', 'm': 'l');
60
63
 
61
64
  &[data-icon-only] {
62
65
  @include styles-tokens-alert.composite-var(styles-tokens-alert.$alert, $size, 'button', 'button-close');
63
-
64
66
  }
65
67
  }
66
68
  }
67
69
 
70
+ &:focus,
68
71
  &:focus-visible {
69
72
  outline-color: styles-tokens-alert.$sys-available-complementary;
70
73
  outline-offset: styles-tokens-alert.$spacing-state-focus-offset;
@@ -75,6 +78,7 @@ $text: ('s': 'm', 'm': 'l');
75
78
  color: styles-tokens-alert.simple-var(styles-tokens-alert.$theme-variables, 'sys', $appearance, 'text-support');
76
79
 
77
80
  &:hover,
81
+ &:focus,
78
82
  &:focus-visible {
79
83
  color: styles-tokens-alert.simple-var(styles-tokens-alert.$theme-variables, 'sys', $appearance, 'text-main');
80
84
  }
@@ -102,6 +106,7 @@ $text: ('s': 'm', 'm': 'l');
102
106
  background-color: styles-tokens-alert.$sys-opacity-hovered;
103
107
  }
104
108
 
109
+ &:focus,
105
110
  &:focus-visible {
106
111
  @include styles-tokens-alert.outline-var(styles-tokens-element.$container-focused-s);
107
112