@snack-uikit/card 0.20.2-preview-23549ae9.0 → 0.20.2

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.20.2 (2025-08-26)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/tag@0.15.8](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/tag/CHANGELOG.md)
10
+
11
+
12
+
13
+
14
+
6
15
  ## 0.20.1 (2025-07-23)
7
16
 
8
17
  ### Only dependencies have been changed
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .composition{
13
- border-radius:var(--radius-card-container, 20px);
13
+ border-radius:var(--radius-card-container, 8px);
14
14
  box-sizing:border-box;
15
15
  height:100%;
16
16
  }
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .card{
24
- border-radius:var(--radius-card-container, 20px);
24
+ border-radius:var(--radius-card-container, 8px);
25
25
  border-width:var(--border-width-card-container, 1px);
26
26
  position:relative;
27
27
  z-index:0;
@@ -54,13 +54,13 @@
54
54
  outline-style:var(--border-state-focus-l-border-style, solid);
55
55
  outline-color:var(--border-state-focus-l-border-color, );
56
56
  background-color:var(--sys-neutral-background2-level, #ffffff);
57
- outline-color:var(--sys-primary-accent-default, #794ed3);
57
+ outline-color:var(--sys-primary-accent-default, #389f74);
58
58
  }
59
59
  .card:focus-visible .functionBadgeWrapper{
60
60
  display:block;
61
61
  }
62
62
  .card:focus-visible .check{
63
- background-color:var(--sys-primary-accent-default, #794ed3);
63
+ background-color:var(--sys-primary-accent-default, #389f74);
64
64
  }
65
65
  .card:focus-within .functionBadgeWrapper{
66
66
  display:block;
@@ -69,11 +69,11 @@
69
69
  outline-width:var(--border-state-focus-s-border-width, 2px);
70
70
  outline-style:var(--border-state-focus-s-border-style, solid);
71
71
  outline-color:var(--border-state-focus-s-border-color, );
72
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
72
+ outline-color:var(--sys-primary-decor-activated, #99d7ba);
73
73
  outline-width:var(--border-width-card-container, 1px);
74
74
  }
75
75
  .card[data-checked]:hover{
76
- outline-color:var(--sys-primary-decor-hovered, #decdfb);
76
+ outline-color:var(--sys-primary-decor-hovered, #b3deca);
77
77
  box-shadow:none;
78
78
  }
79
79
  .card[data-checked] .contentWrapper::before{
@@ -84,21 +84,21 @@
84
84
  bottom:0;
85
85
  left:0;
86
86
  opacity:var(--opacity-a008, 0.08);
87
- background-color:var(--sys-primary-accent-default, #794ed3);
87
+ background-color:var(--sys-primary-accent-default, #389f74);
88
88
  }
89
89
  .card[data-checked] .check{
90
- color:var(--sys-primary-on-accent, #fdfbff);
91
- background-color:var(--sys-primary-accent-default, #794ed3);
90
+ color:var(--sys-primary-on-accent, #fbfffc);
91
+ background-color:var(--sys-primary-accent-default, #389f74);
92
92
  }
93
93
  .card[data-checked]:focus-visible{
94
94
  outline-width:var(--border-state-focus-l-border-width, 4px);
95
95
  outline-style:var(--border-state-focus-l-border-style, solid);
96
96
  outline-color:var(--border-state-focus-l-border-color, );
97
- outline-color:var(--sys-primary-accent-default, #794ed3);
97
+ outline-color:var(--sys-primary-accent-default, #389f74);
98
98
  }
99
99
  .card[data-checked]:focus-visible .check{
100
- color:var(--sys-primary-on-accent, #fdfbff);
101
- background-color:var(--sys-primary-accent-default, #794ed3);
100
+ color:var(--sys-primary-on-accent, #fbfffc);
101
+ background-color:var(--sys-primary-accent-default, #389f74);
102
102
  }
103
103
  .card[data-disabled]{
104
104
  outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -128,7 +128,7 @@
128
128
  outline-width:var(--border-state-focus-l-border-width, 4px);
129
129
  outline-style:var(--border-state-focus-l-border-style, solid);
130
130
  outline-color:var(--border-state-focus-l-border-color, );
131
- outline-color:var(--sys-primary-accent-default, #794ed3);
131
+ outline-color:var(--sys-primary-accent-default, #389f74);
132
132
  }
133
133
  .card[data-pointer]:hover{
134
134
  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
@@ -144,7 +144,7 @@
144
144
  right:0;
145
145
  bottom:0;
146
146
  left:0;
147
- border-radius:var(--radius-card-container, 20px);
147
+ border-radius:var(--radius-card-container, 8px);
148
148
  }
149
149
 
150
150
  .body{
@@ -10,7 +10,7 @@
10
10
  display:flex;
11
11
  align-items:center;
12
12
  justify-content:center;
13
- color:var(--sys-primary-accent-default, #794ed3);
13
+ color:var(--sys-primary-accent-default, #389f74);
14
14
  }
15
15
  .icon svg{
16
16
  width:var(--size-icon-container-s, 24px) !important;
@@ -18,5 +18,5 @@
18
18
  }
19
19
 
20
20
  .label{
21
- color:var(--sys-primary-accent-default, #794ed3);
21
+ color:var(--sys-primary-accent-default, #389f74);
22
22
  }
@@ -1,7 +1,7 @@
1
1
  .button{
2
2
  width:var(--size-card-button, 32px);
3
3
  height:var(--size-card-button, 32px);
4
- border-radius:var(--radius-card-button, 12px);
4
+ border-radius:var(--radius-card-button, 4px);
5
5
  cursor:pointer;
6
6
  position:relative;
7
7
  display:flex;
@@ -1,6 +1,6 @@
1
1
  .checkWrapper{
2
- padding-top:var(--space-card-padding-check-badge, 6px);
3
- padding-left:var(--space-card-padding-check-badge, 6px);
2
+ padding-top:var(--space-card-padding-check-badge, 4px);
3
+ padding-left:var(--space-card-padding-check-badge, 4px);
4
4
  position:absolute;
5
5
  top:0;
6
6
  left:0;
@@ -9,7 +9,7 @@
9
9
  .checkContainer{
10
10
  width:var(--size-card-check, 16px);
11
11
  height:var(--size-card-check, 16px);
12
- border-radius:var(--radius-card-check, 12px);
12
+ border-radius:var(--radius-card-check, 4px);
13
13
  display:flex;
14
14
  align-items:center;
15
15
  justify-content:center;
@@ -11,17 +11,17 @@
11
11
  width:var(--size-card-picture-s, 32px);
12
12
  height:var(--size-card-picture-s, 32px);
13
13
  border-width:var(--border-width-card-picture, 1px);
14
- border-radius:var(--radius-card-picture, 8px);
14
+ border-radius:var(--radius-card-picture, 4px);
15
15
  }
16
16
  .img[data-size=m]{
17
17
  width:var(--size-card-picture-m, 40px);
18
18
  height:var(--size-card-picture-m, 40px);
19
19
  border-width:var(--border-width-card-picture, 1px);
20
- border-radius:var(--radius-card-picture, 8px);
20
+ border-radius:var(--radius-card-picture, 4px);
21
21
  }
22
22
  .img[data-size=l]{
23
23
  width:var(--size-card-picture-l, 80px);
24
24
  height:var(--size-card-picture-l, 80px);
25
25
  border-width:var(--border-width-card-picture, 1px);
26
- border-radius:var(--radius-card-picture, 8px);
26
+ border-radius:var(--radius-card-picture, 4px);
27
27
  }
@@ -13,7 +13,7 @@
13
13
  .functionRow::before{
14
14
  width:var(--size-card-function-badge-function-row, 32px);
15
15
  height:var(--size-card-function-badge-function-row, 32px);
16
- border-radius:var(--radius-card-button, 12px);
16
+ border-radius:var(--radius-card-button, 4px);
17
17
  opacity:var(--opacity-card-transparent-background, 0.8);
18
18
  content:"";
19
19
  position:absolute;
@@ -1,6 +1,6 @@
1
1
  .promoBadge{
2
- padding-top:var(--space-card-padding-promo-badge, 8px);
3
- padding-right:var(--space-card-padding-promo-badge, 8px);
2
+ padding-top:var(--space-card-padding-promo-badge, 4px);
3
+ padding-right:var(--space-card-padding-promo-badge, 4px);
4
4
  position:absolute;
5
5
  top:0;
6
6
  right:0;
@@ -10,7 +10,7 @@
10
10
  }
11
11
 
12
12
  .composition{
13
- border-radius:var(--radius-card-container, 20px);
13
+ border-radius:var(--radius-card-container, 8px);
14
14
  box-sizing:border-box;
15
15
  height:100%;
16
16
  }
@@ -21,7 +21,7 @@
21
21
  }
22
22
 
23
23
  .card{
24
- border-radius:var(--radius-card-container, 20px);
24
+ border-radius:var(--radius-card-container, 8px);
25
25
  border-width:var(--border-width-card-container, 1px);
26
26
  position:relative;
27
27
  z-index:0;
@@ -54,13 +54,13 @@
54
54
  outline-style:var(--border-state-focus-l-border-style, solid);
55
55
  outline-color:var(--border-state-focus-l-border-color, );
56
56
  background-color:var(--sys-neutral-background2-level, #ffffff);
57
- outline-color:var(--sys-primary-accent-default, #794ed3);
57
+ outline-color:var(--sys-primary-accent-default, #389f74);
58
58
  }
59
59
  .card:focus-visible .functionBadgeWrapper{
60
60
  display:block;
61
61
  }
62
62
  .card:focus-visible .check{
63
- background-color:var(--sys-primary-accent-default, #794ed3);
63
+ background-color:var(--sys-primary-accent-default, #389f74);
64
64
  }
65
65
  .card:focus-within .functionBadgeWrapper{
66
66
  display:block;
@@ -69,11 +69,11 @@
69
69
  outline-width:var(--border-state-focus-s-border-width, 2px);
70
70
  outline-style:var(--border-state-focus-s-border-style, solid);
71
71
  outline-color:var(--border-state-focus-s-border-color, );
72
- outline-color:var(--sys-primary-decor-activated, #c5b2f1);
72
+ outline-color:var(--sys-primary-decor-activated, #99d7ba);
73
73
  outline-width:var(--border-width-card-container, 1px);
74
74
  }
75
75
  .card[data-checked]:hover{
76
- outline-color:var(--sys-primary-decor-hovered, #decdfb);
76
+ outline-color:var(--sys-primary-decor-hovered, #b3deca);
77
77
  box-shadow:none;
78
78
  }
79
79
  .card[data-checked] .contentWrapper::before{
@@ -84,21 +84,21 @@
84
84
  bottom:0;
85
85
  left:0;
86
86
  opacity:var(--opacity-a008, 0.08);
87
- background-color:var(--sys-primary-accent-default, #794ed3);
87
+ background-color:var(--sys-primary-accent-default, #389f74);
88
88
  }
89
89
  .card[data-checked] .check{
90
- color:var(--sys-primary-on-accent, #fdfbff);
91
- background-color:var(--sys-primary-accent-default, #794ed3);
90
+ color:var(--sys-primary-on-accent, #fbfffc);
91
+ background-color:var(--sys-primary-accent-default, #389f74);
92
92
  }
93
93
  .card[data-checked]:focus-visible{
94
94
  outline-width:var(--border-state-focus-l-border-width, 4px);
95
95
  outline-style:var(--border-state-focus-l-border-style, solid);
96
96
  outline-color:var(--border-state-focus-l-border-color, );
97
- outline-color:var(--sys-primary-accent-default, #794ed3);
97
+ outline-color:var(--sys-primary-accent-default, #389f74);
98
98
  }
99
99
  .card[data-checked]:focus-visible .check{
100
- color:var(--sys-primary-on-accent, #fdfbff);
101
- background-color:var(--sys-primary-accent-default, #794ed3);
100
+ color:var(--sys-primary-on-accent, #fbfffc);
101
+ background-color:var(--sys-primary-accent-default, #389f74);
102
102
  }
103
103
  .card[data-disabled]{
104
104
  outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -128,7 +128,7 @@
128
128
  outline-width:var(--border-state-focus-l-border-width, 4px);
129
129
  outline-style:var(--border-state-focus-l-border-style, solid);
130
130
  outline-color:var(--border-state-focus-l-border-color, );
131
- outline-color:var(--sys-primary-accent-default, #794ed3);
131
+ outline-color:var(--sys-primary-accent-default, #389f74);
132
132
  }
133
133
  .card[data-pointer]:hover{
134
134
  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
@@ -144,7 +144,7 @@
144
144
  right:0;
145
145
  bottom:0;
146
146
  left:0;
147
- border-radius:var(--radius-card-container, 20px);
147
+ border-radius:var(--radius-card-container, 8px);
148
148
  }
149
149
 
150
150
  .body{
@@ -10,7 +10,7 @@
10
10
  display:flex;
11
11
  align-items:center;
12
12
  justify-content:center;
13
- color:var(--sys-primary-accent-default, #794ed3);
13
+ color:var(--sys-primary-accent-default, #389f74);
14
14
  }
15
15
  .icon svg{
16
16
  width:var(--size-icon-container-s, 24px) !important;
@@ -18,5 +18,5 @@
18
18
  }
19
19
 
20
20
  .label{
21
- color:var(--sys-primary-accent-default, #794ed3);
21
+ color:var(--sys-primary-accent-default, #389f74);
22
22
  }
@@ -1,7 +1,7 @@
1
1
  .button{
2
2
  width:var(--size-card-button, 32px);
3
3
  height:var(--size-card-button, 32px);
4
- border-radius:var(--radius-card-button, 12px);
4
+ border-radius:var(--radius-card-button, 4px);
5
5
  cursor:pointer;
6
6
  position:relative;
7
7
  display:flex;
@@ -1,6 +1,6 @@
1
1
  .checkWrapper{
2
- padding-top:var(--space-card-padding-check-badge, 6px);
3
- padding-left:var(--space-card-padding-check-badge, 6px);
2
+ padding-top:var(--space-card-padding-check-badge, 4px);
3
+ padding-left:var(--space-card-padding-check-badge, 4px);
4
4
  position:absolute;
5
5
  top:0;
6
6
  left:0;
@@ -9,7 +9,7 @@
9
9
  .checkContainer{
10
10
  width:var(--size-card-check, 16px);
11
11
  height:var(--size-card-check, 16px);
12
- border-radius:var(--radius-card-check, 12px);
12
+ border-radius:var(--radius-card-check, 4px);
13
13
  display:flex;
14
14
  align-items:center;
15
15
  justify-content:center;
@@ -11,17 +11,17 @@
11
11
  width:var(--size-card-picture-s, 32px);
12
12
  height:var(--size-card-picture-s, 32px);
13
13
  border-width:var(--border-width-card-picture, 1px);
14
- border-radius:var(--radius-card-picture, 8px);
14
+ border-radius:var(--radius-card-picture, 4px);
15
15
  }
16
16
  .img[data-size=m]{
17
17
  width:var(--size-card-picture-m, 40px);
18
18
  height:var(--size-card-picture-m, 40px);
19
19
  border-width:var(--border-width-card-picture, 1px);
20
- border-radius:var(--radius-card-picture, 8px);
20
+ border-radius:var(--radius-card-picture, 4px);
21
21
  }
22
22
  .img[data-size=l]{
23
23
  width:var(--size-card-picture-l, 80px);
24
24
  height:var(--size-card-picture-l, 80px);
25
25
  border-width:var(--border-width-card-picture, 1px);
26
- border-radius:var(--radius-card-picture, 8px);
26
+ border-radius:var(--radius-card-picture, 4px);
27
27
  }
@@ -13,7 +13,7 @@
13
13
  .functionRow::before{
14
14
  width:var(--size-card-function-badge-function-row, 32px);
15
15
  height:var(--size-card-function-badge-function-row, 32px);
16
- border-radius:var(--radius-card-button, 12px);
16
+ border-radius:var(--radius-card-button, 4px);
17
17
  opacity:var(--opacity-card-transparent-background, 0.8);
18
18
  content:"";
19
19
  position:absolute;
@@ -1,6 +1,6 @@
1
1
  .promoBadge{
2
- padding-top:var(--space-card-padding-promo-badge, 8px);
3
- padding-right:var(--space-card-padding-promo-badge, 8px);
2
+ padding-top:var(--space-card-padding-promo-badge, 4px);
3
+ padding-right:var(--space-card-padding-promo-badge, 4px);
4
4
  position:absolute;
5
5
  top:0;
6
6
  right:0;
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Card",
7
- "version": "0.20.2-preview-23549ae9.0",
7
+ "version": "0.20.2",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,17 +36,17 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.19.16-preview-23549ae9.0",
40
- "@snack-uikit/icon-predefined": "0.7.10-preview-23549ae9.0",
39
+ "@snack-uikit/button": "0.19.15",
40
+ "@snack-uikit/icon-predefined": "0.7.9",
41
41
  "@snack-uikit/icons": "0.27.2",
42
- "@snack-uikit/list": "0.32.2-preview-23549ae9.0",
43
- "@snack-uikit/promo-tag": "0.7.8-preview-23549ae9.0",
44
- "@snack-uikit/tag": "0.15.8-preview-23549ae9.0",
45
- "@snack-uikit/truncate-string": "0.7.1-preview-23549ae9.0",
46
- "@snack-uikit/typography": "0.8.11-preview-23549ae9.0",
47
- "@snack-uikit/utils": "3.10.2-preview-23549ae9.0",
42
+ "@snack-uikit/list": "0.32.1",
43
+ "@snack-uikit/promo-tag": "0.7.7",
44
+ "@snack-uikit/tag": "0.15.8",
45
+ "@snack-uikit/truncate-string": "0.7.0",
46
+ "@snack-uikit/typography": "0.8.10",
47
+ "@snack-uikit/utils": "3.10.1",
48
48
  "classnames": "2.5.1",
49
49
  "merge-refs": "1.3.0"
50
50
  },
51
- "gitHead": "e42f92b88079738efc564d7fa74f5fbd18e2fd6d"
51
+ "gitHead": "dc42c636dae38b12a144f21188b1d489db637681"
52
52
  }