@snack-uikit/alert 0.16.17 → 0.16.18-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.
Files changed (7) hide show
  1. package/dist/cjs/components/Alert/styles.module.css +6 -6
  2. package/dist/cjs/components/AlertTop/styles.module.css +4 -4
  3. package/dist/cjs/helperComponents/styles.module.css +10 -10
  4. package/dist/esm/components/Alert/styles.module.css +6 -6
  5. package/dist/esm/components/AlertTop/styles.module.css +4 -4
  6. package/dist/esm/helperComponents/styles.module.css +10 -10
  7. package/package.json +6 -6
package/dist/cjs/components/Alert/styles.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  background-color:var(--sys-neutral-background, #eeeff3);
9
9
  }
10
10
  .alert[data-color=primary]{
11
- background-color:var(--sys-primary-background, #f6effe);
11
+ background-color:var(--sys-primary-background, #f1f9f4);
12
12
  }
13
13
  .alert[data-color=red]{
14
14
  background-color:var(--sys-red-background, #fdf1ef);
@@ -28,7 +28,7 @@
28
28
  padding-left:var(--space-alert-s-container-horizontal-padding, 7px);
29
29
  padding-right:var(--space-alert-s-container-horizontal-padding, 7px);
30
30
  gap:var(--space-alert-s-container-gap, 7px);
31
- border-radius:var(--radius-alert-container, 8px);
31
+ border-radius:var(--radius-alert-container, 4px);
32
32
  border-width:var(--border-width-alert-single, 1px);
33
33
  }
34
34
  .alert[data-size=m]{
@@ -37,7 +37,7 @@
37
37
  padding-left:var(--space-alert-m-container-horizontal-padding, 15px);
38
38
  padding-right:var(--space-alert-m-container-horizontal-padding, 15px);
39
39
  gap:var(--space-alert-m-container-gap, 15px);
40
- border-radius:var(--radius-alert-container, 8px);
40
+ border-radius:var(--radius-alert-container, 4px);
41
41
  border-width:var(--border-width-alert-single, 1px);
42
42
  }
43
43
 
@@ -52,10 +52,10 @@
52
52
  outline-color:var(--sys-neutral-decor-default, #dde0ea);
53
53
  }
54
54
  .alertOutline[data-color=primary]{
55
- outline-color:var(--sys-primary-decor-default, #ebdefd);
55
+ outline-color:var(--sys-primary-decor-default, #caeadb);
56
56
  }
57
57
  .alertOutline[data-color=primary]:focus-within, .alertOutline[data-color=primary]:hover{
58
- outline-color:var(--sys-primary-decor-default, #ebdefd);
58
+ outline-color:var(--sys-primary-decor-default, #caeadb);
59
59
  }
60
60
  .alertOutline[data-color=red]{
61
61
  outline-color:var(--sys-red-decor-default, #fdd6cd);
@@ -98,7 +98,7 @@
98
98
  color:var(--sys-neutral-accent-default, #787b8a);
99
99
  }
100
100
  .icon[data-color=primary]{
101
- color:var(--sys-primary-accent-default, #794ed3);
101
+ color:var(--sys-primary-accent-default, #389f74);
102
102
  }
103
103
  .icon[data-color=red]{
104
104
  color:var(--sys-red-accent-default, #cb3f3e);
package/dist/cjs/components/AlertTop/styles.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  background-color:var(--sys-invert-neutral-background, #30303c);
13
13
  }
14
14
  .alertTop[data-color=primary]{
15
- background-color:var(--sys-primary-accent-default, #794ed3);
15
+ background-color:var(--sys-primary-accent-default, #389f74);
16
16
  }
17
17
  .alertTop[data-color=red]{
18
18
  background-color:var(--sys-red-accent-default, #cb3f3e);
@@ -36,7 +36,7 @@
36
36
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
37
37
  }
38
38
  .icon[data-color=primary]{
39
- color:var(--sys-primary-on-accent, #fdfbff);
39
+ color:var(--sys-primary-on-accent, #fbfffc);
40
40
  }
41
41
  .icon[data-color=red]{
42
42
  color:var(--sys-red-on-accent, #fffbf9);
@@ -67,7 +67,7 @@
67
67
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
68
68
  }
69
69
  .title[data-color=primary]{
70
- color:var(--sys-primary-on-accent, #fdfbff);
70
+ color:var(--sys-primary-on-accent, #fbfffc);
71
71
  }
72
72
  .title[data-color=red]{
73
73
  color:var(--sys-red-on-accent, #fffbf9);
@@ -95,7 +95,7 @@
95
95
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
96
96
  }
97
97
  .description[data-color=primary]{
98
- color:var(--sys-primary-on-accent, #fdfbff);
98
+ color:var(--sys-primary-on-accent, #fbfffc);
99
99
  }
100
100
  .description[data-color=red]{
101
101
  color:var(--sys-red-on-accent, #fffbf9);
package/dist/cjs/helperComponents/styles.module.css CHANGED
@@ -47,22 +47,22 @@
47
47
  .alertButton[data-variant=simple][data-size=s]{
48
48
  height:var(--size-alert-button-m, 24px);
49
49
  gap:var(--space-alert-m-button-gap, 4px);
50
- border-radius:var(--radius-alert-button, 8px);
50
+ border-radius:var(--radius-alert-button, 4px);
51
51
  }
52
52
  .alertButton[data-variant=simple][data-size=s][data-icon-only]{
53
53
  height:var(--size-alert-button-s, 16px);
54
54
  width:var(--size-alert-button-s, 16px);
55
- border-radius:var(--radius-alert-button, 8px);
55
+ border-radius:var(--radius-alert-button, 4px);
56
56
  }
57
57
  .alertButton[data-variant=simple][data-size=m]{
58
58
  height:var(--size-alert-button-m, 24px);
59
59
  gap:var(--space-alert-m-button-gap, 4px);
60
- border-radius:var(--radius-alert-button, 8px);
60
+ border-radius:var(--radius-alert-button, 4px);
61
61
  }
62
62
  .alertButton[data-variant=simple][data-size=m][data-icon-only]{
63
63
  height:var(--size-alert-button-m, 24px);
64
64
  width:var(--size-alert-button-m, 24px);
65
- border-radius:var(--radius-alert-button, 8px);
65
+ border-radius:var(--radius-alert-button, 4px);
66
66
  }
67
67
  .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
@@ -78,13 +78,13 @@
78
78
  color:var(--sys-neutral-text-main, #41424e);
79
79
  }
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
- color:var(--sys-primary-text-support, #5b4796);
81
+ color:var(--sys-primary-text-support, #358561);
82
82
  }
83
83
  .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
- color:var(--sys-primary-text-main, #382a62);
84
+ color:var(--sys-primary-text-main, #1b5840);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
87
- color:var(--sys-primary-text-main, #382a62);
87
+ color:var(--sys-primary-text-main, #1b5840);
88
88
  }
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
@@ -126,13 +126,13 @@
126
126
  .alertButton[data-variant=tonal]{
127
127
  height:var(--size-alert-top-button, 32px);
128
128
  gap:var(--space-alert-top-button-gap, 4px);
129
- border-radius:var(--radius-alert-top-button, 12px);
129
+ border-radius:var(--radius-alert-top-button, 4px);
130
130
  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
131
131
  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
132
132
  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
133
133
  }
134
134
  .alertButton[data-variant=tonal][data-icon-only]{
135
- border-radius:var(--radius-alert-top-button, 12px);
135
+ border-radius:var(--radius-alert-top-button, 4px);
136
136
  height:var(--size-alert-top-button, 32px);
137
137
  width:var(--size-alert-top-button, 32px);
138
138
  background:none;
@@ -155,7 +155,7 @@
155
155
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
156
156
  }
157
157
  .alertButton[data-variant=tonal][data-appearance=primary]{
158
- color:var(--sys-primary-on-accent, #fdfbff);
158
+ color:var(--sys-primary-on-accent, #fbfffc);
159
159
  }
160
160
  .alertButton[data-variant=tonal][data-appearance=red]{
161
161
  color:var(--sys-red-on-accent, #fffbf9);
package/dist/esm/components/Alert/styles.module.css CHANGED
@@ -8,7 +8,7 @@
8
8
  background-color:var(--sys-neutral-background, #eeeff3);
9
9
  }
10
10
  .alert[data-color=primary]{
11
- background-color:var(--sys-primary-background, #f6effe);
11
+ background-color:var(--sys-primary-background, #f1f9f4);
12
12
  }
13
13
  .alert[data-color=red]{
14
14
  background-color:var(--sys-red-background, #fdf1ef);
@@ -28,7 +28,7 @@
28
28
  padding-left:var(--space-alert-s-container-horizontal-padding, 7px);
29
29
  padding-right:var(--space-alert-s-container-horizontal-padding, 7px);
30
30
  gap:var(--space-alert-s-container-gap, 7px);
31
- border-radius:var(--radius-alert-container, 8px);
31
+ border-radius:var(--radius-alert-container, 4px);
32
32
  border-width:var(--border-width-alert-single, 1px);
33
33
  }
34
34
  .alert[data-size=m]{
@@ -37,7 +37,7 @@
37
37
  padding-left:var(--space-alert-m-container-horizontal-padding, 15px);
38
38
  padding-right:var(--space-alert-m-container-horizontal-padding, 15px);
39
39
  gap:var(--space-alert-m-container-gap, 15px);
40
- border-radius:var(--radius-alert-container, 8px);
40
+ border-radius:var(--radius-alert-container, 4px);
41
41
  border-width:var(--border-width-alert-single, 1px);
42
42
  }
43
43
 
@@ -52,10 +52,10 @@
52
52
  outline-color:var(--sys-neutral-decor-default, #dde0ea);
53
53
  }
54
54
  .alertOutline[data-color=primary]{
55
- outline-color:var(--sys-primary-decor-default, #ebdefd);
55
+ outline-color:var(--sys-primary-decor-default, #caeadb);
56
56
  }
57
57
  .alertOutline[data-color=primary]:focus-within, .alertOutline[data-color=primary]:hover{
58
- outline-color:var(--sys-primary-decor-default, #ebdefd);
58
+ outline-color:var(--sys-primary-decor-default, #caeadb);
59
59
  }
60
60
  .alertOutline[data-color=red]{
61
61
  outline-color:var(--sys-red-decor-default, #fdd6cd);
@@ -98,7 +98,7 @@
98
98
  color:var(--sys-neutral-accent-default, #787b8a);
99
99
  }
100
100
  .icon[data-color=primary]{
101
- color:var(--sys-primary-accent-default, #794ed3);
101
+ color:var(--sys-primary-accent-default, #389f74);
102
102
  }
103
103
  .icon[data-color=red]{
104
104
  color:var(--sys-red-accent-default, #cb3f3e);
package/dist/esm/components/AlertTop/styles.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  background-color:var(--sys-invert-neutral-background, #30303c);
13
13
  }
14
14
  .alertTop[data-color=primary]{
15
- background-color:var(--sys-primary-accent-default, #794ed3);
15
+ background-color:var(--sys-primary-accent-default, #389f74);
16
16
  }
17
17
  .alertTop[data-color=red]{
18
18
  background-color:var(--sys-red-accent-default, #cb3f3e);
@@ -36,7 +36,7 @@
36
36
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
37
37
  }
38
38
  .icon[data-color=primary]{
39
- color:var(--sys-primary-on-accent, #fdfbff);
39
+ color:var(--sys-primary-on-accent, #fbfffc);
40
40
  }
41
41
  .icon[data-color=red]{
42
42
  color:var(--sys-red-on-accent, #fffbf9);
@@ -67,7 +67,7 @@
67
67
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
68
68
  }
69
69
  .title[data-color=primary]{
70
- color:var(--sys-primary-on-accent, #fdfbff);
70
+ color:var(--sys-primary-on-accent, #fbfffc);
71
71
  }
72
72
  .title[data-color=red]{
73
73
  color:var(--sys-red-on-accent, #fffbf9);
@@ -95,7 +95,7 @@
95
95
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
96
96
  }
97
97
  .description[data-color=primary]{
98
- color:var(--sys-primary-on-accent, #fdfbff);
98
+ color:var(--sys-primary-on-accent, #fbfffc);
99
99
  }
100
100
  .description[data-color=red]{
101
101
  color:var(--sys-red-on-accent, #fffbf9);
package/dist/esm/helperComponents/styles.module.css CHANGED
@@ -47,22 +47,22 @@
47
47
  .alertButton[data-variant=simple][data-size=s]{
48
48
  height:var(--size-alert-button-m, 24px);
49
49
  gap:var(--space-alert-m-button-gap, 4px);
50
- border-radius:var(--radius-alert-button, 8px);
50
+ border-radius:var(--radius-alert-button, 4px);
51
51
  }
52
52
  .alertButton[data-variant=simple][data-size=s][data-icon-only]{
53
53
  height:var(--size-alert-button-s, 16px);
54
54
  width:var(--size-alert-button-s, 16px);
55
- border-radius:var(--radius-alert-button, 8px);
55
+ border-radius:var(--radius-alert-button, 4px);
56
56
  }
57
57
  .alertButton[data-variant=simple][data-size=m]{
58
58
  height:var(--size-alert-button-m, 24px);
59
59
  gap:var(--space-alert-m-button-gap, 4px);
60
- border-radius:var(--radius-alert-button, 8px);
60
+ border-radius:var(--radius-alert-button, 4px);
61
61
  }
62
62
  .alertButton[data-variant=simple][data-size=m][data-icon-only]{
63
63
  height:var(--size-alert-button-m, 24px);
64
64
  width:var(--size-alert-button-m, 24px);
65
- border-radius:var(--radius-alert-button, 8px);
65
+ border-radius:var(--radius-alert-button, 4px);
66
66
  }
67
67
  .alertButton[data-variant=simple]:focus-visible{
68
68
  outline-color:var(--sys-available-complementary, #1c1c24);
@@ -78,13 +78,13 @@
78
78
  color:var(--sys-neutral-text-main, #41424e);
79
79
  }
80
80
  .alertButton[data-variant=simple][data-appearance=primary]{
81
- color:var(--sys-primary-text-support, #5b4796);
81
+ color:var(--sys-primary-text-support, #358561);
82
82
  }
83
83
  .alertButton[data-variant=simple][data-appearance=primary]:hover, .alertButton[data-variant=simple][data-appearance=primary]:focus-visible{
84
- color:var(--sys-primary-text-main, #382a62);
84
+ color:var(--sys-primary-text-main, #1b5840);
85
85
  }
86
86
  .alertButton[data-variant=simple][data-appearance=primary]:active{
87
- color:var(--sys-primary-text-main, #382a62);
87
+ color:var(--sys-primary-text-main, #1b5840);
88
88
  }
89
89
  .alertButton[data-variant=simple][data-appearance=red]{
90
90
  color:var(--sys-red-text-support, #ae514c);
@@ -126,13 +126,13 @@
126
126
  .alertButton[data-variant=tonal]{
127
127
  height:var(--size-alert-top-button, 32px);
128
128
  gap:var(--space-alert-top-button-gap, 4px);
129
- border-radius:var(--radius-alert-top-button, 12px);
129
+ border-radius:var(--radius-alert-top-button, 4px);
130
130
  padding-left:var(--space-alert-top-button-horizontal-padding, 12px);
131
131
  padding-right:var(--space-alert-top-button-horizontal-padding, 12px);
132
132
  background:var(--sys-opacity-enabled, rgba(255, 255, 255, 0.1607843137));
133
133
  }
134
134
  .alertButton[data-variant=tonal][data-icon-only]{
135
- border-radius:var(--radius-alert-top-button, 12px);
135
+ border-radius:var(--radius-alert-top-button, 4px);
136
136
  height:var(--size-alert-top-button, 32px);
137
137
  width:var(--size-alert-top-button, 32px);
138
138
  background:none;
@@ -155,7 +155,7 @@
155
155
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
156
156
  }
157
157
  .alertButton[data-variant=tonal][data-appearance=primary]{
158
- color:var(--sys-primary-on-accent, #fdfbff);
158
+ color:var(--sys-primary-on-accent, #fbfffc);
159
159
  }
160
160
  .alertButton[data-variant=tonal][data-appearance=red]{
161
161
  color:var(--sys-red-on-accent, #fffbf9);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Alert",
7
- "version": "0.16.17",
7
+ "version": "0.16.18-preview-05f26bf6.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.27.2",
40
- "@snack-uikit/link": "0.17.9",
41
- "@snack-uikit/loaders": "0.9.8",
42
- "@snack-uikit/truncate-string": "0.7.0",
43
- "@snack-uikit/utils": "3.10.1",
40
+ "@snack-uikit/link": "0.17.10-preview-05f26bf6.0",
41
+ "@snack-uikit/loaders": "0.9.9-preview-05f26bf6.0",
42
+ "@snack-uikit/truncate-string": "0.7.1-preview-05f26bf6.0",
43
+ "@snack-uikit/utils": "3.10.2-preview-05f26bf6.0",
44
44
  "classnames": "2.5.1"
45
45
  },
46
- "gitHead": "fe6df3a62f59d9957bd8ff3d6a2afa781dddb24c"
46
+ "gitHead": "6fee645f4608f0384f0e44df312a82b4120739ac"
47
47
  }