@snack-uikit/tag 0.11.3-preview-64081c67.0 → 0.12.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 (5) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/components/TagLink/styles.module.css +10 -37
  3. package/dist/esm/components/TagLink/styles.module.css +10 -37
  4. package/package.json +2 -2
  5. package/src/components/TagLink/styles.module.scss +24 -46
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.12.0 (2024-12-04)
7
+
8
+
9
+ ### Features
10
+
11
+ * **PDS-1061:** add link props to tag ([4f38cab](https://github.com/cloud-ru-tech/snack-uikit/commit/4f38cabff174e5be894bb45fce44dcddfba9cc98))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.11.2 (2024-11-14)
7
18
 
8
19
 
package/dist/cjs/components/TagLink/styles.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  outline-width:var(--border-state-focus-s-border-width, 2px);
10
10
  outline-style:var(--border-state-focus-s-border-style, solid);
11
11
  outline-color:var(--border-state-focus-s-border-color, );
12
- outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
12
+ outline-color:var(--sys-available-complementary, #1c1c24);
13
13
  }
14
14
  .tag:active{
15
15
  outline:none;
@@ -51,10 +51,7 @@
51
51
  text-overflow:ellipsis;
52
52
  white-space:nowrap;
53
53
  }
54
- .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover, .tag[data-appearance=neutral]:active{
55
- color:var(--sys-neutral-text-main, #41424e);
56
- }
57
- .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover{
54
+ .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
58
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
59
56
  }
60
57
  .tag[data-appearance=neutral]:active{
@@ -69,10 +66,7 @@
69
66
  text-overflow:ellipsis;
70
67
  white-space:nowrap;
71
68
  }
72
- .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover, .tag[data-appearance=primary]:active{
73
- color:var(--sys-primary-text-main, #382a62);
74
- }
75
- .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover{
69
+ .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
76
70
  background-color:var(--sys-primary-decor-hovered, #decdfb);
77
71
  }
78
72
  .tag[data-appearance=primary]:active{
@@ -87,10 +81,7 @@
87
81
  text-overflow:ellipsis;
88
82
  white-space:nowrap;
89
83
  }
90
- .tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover, .tag[data-appearance=red]:active{
91
- color:var(--sys-red-text-main, #7a2d2d);
92
- }
93
- .tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover{
84
+ .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
94
85
  background-color:var(--sys-red-decor-hovered, #fac1b3);
95
86
  }
96
87
  .tag[data-appearance=red]:active{
@@ -105,10 +96,7 @@
105
96
  text-overflow:ellipsis;
106
97
  white-space:nowrap;
107
98
  }
108
- .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover, .tag[data-appearance=orange]:active{
109
- color:var(--sys-orange-text-main, #884c23);
110
- }
111
- .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover{
99
+ .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
112
100
  background-color:var(--sys-orange-decor-hovered, #f8c699);
113
101
  }
114
102
  .tag[data-appearance=orange]:active{
@@ -123,10 +111,7 @@
123
111
  text-overflow:ellipsis;
124
112
  white-space:nowrap;
125
113
  }
126
- .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover, .tag[data-appearance=yellow]:active{
127
- color:var(--sys-yellow-text-main, #815f19);
128
- }
129
- .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover{
114
+ .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
130
115
  background-color:var(--sys-yellow-decor-hovered, #ead49a);
131
116
  }
132
117
  .tag[data-appearance=yellow]:active{
@@ -141,10 +126,7 @@
141
126
  text-overflow:ellipsis;
142
127
  white-space:nowrap;
143
128
  }
144
- .tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover, .tag[data-appearance=green]:active{
145
- color:var(--sys-green-text-main, #3d6035);
146
- }
147
- .tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover{
129
+ .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
148
130
  background-color:var(--sys-green-decor-hovered, #c0e1ba);
149
131
  }
150
132
  .tag[data-appearance=green]:active{
@@ -159,10 +141,7 @@
159
141
  text-overflow:ellipsis;
160
142
  white-space:nowrap;
161
143
  }
162
- .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover, .tag[data-appearance=blue]:active{
163
- color:var(--sys-blue-text-main, #2b537e);
164
- }
165
- .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover{
144
+ .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
166
145
  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
167
146
  }
168
147
  .tag[data-appearance=blue]:active{
@@ -177,10 +156,7 @@
177
156
  text-overflow:ellipsis;
178
157
  white-space:nowrap;
179
158
  }
180
- .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover, .tag[data-appearance=violet]:active{
181
- color:var(--sys-violet-text-main, #59446a);
182
- }
183
- .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover{
159
+ .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
184
160
  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
185
161
  }
186
162
  .tag[data-appearance=violet]:active{
@@ -195,10 +171,7 @@
195
171
  text-overflow:ellipsis;
196
172
  white-space:nowrap;
197
173
  }
198
- .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover, .tag[data-appearance=pink]:active{
199
- color:var(--sys-pink-text-main, #754158);
200
- }
201
- .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover{
174
+ .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
202
175
  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
203
176
  }
204
177
  .tag[data-appearance=pink]:active{
package/dist/esm/components/TagLink/styles.module.css CHANGED
@@ -9,7 +9,7 @@
9
9
  outline-width:var(--border-state-focus-s-border-width, 2px);
10
10
  outline-style:var(--border-state-focus-s-border-style, solid);
11
11
  outline-color:var(--border-state-focus-s-border-color, );
12
- outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
12
+ outline-color:var(--sys-available-complementary, #1c1c24);
13
13
  }
14
14
  .tag:active{
15
15
  outline:none;
@@ -51,10 +51,7 @@
51
51
  text-overflow:ellipsis;
52
52
  white-space:nowrap;
53
53
  }
54
- .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover, .tag[data-appearance=neutral]:active{
55
- color:var(--sys-neutral-text-main, #41424e);
56
- }
57
- .tag[data-appearance=neutral]:focus, .tag[data-appearance=neutral]:hover{
54
+ .tag[data-appearance=neutral]:focus-visible, .tag[data-appearance=neutral]:hover{
58
55
  background-color:var(--sys-neutral-decor-hovered, #cfd2dc);
59
56
  }
60
57
  .tag[data-appearance=neutral]:active{
@@ -69,10 +66,7 @@
69
66
  text-overflow:ellipsis;
70
67
  white-space:nowrap;
71
68
  }
72
- .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover, .tag[data-appearance=primary]:active{
73
- color:var(--sys-primary-text-main, #382a62);
74
- }
75
- .tag[data-appearance=primary]:focus, .tag[data-appearance=primary]:hover{
69
+ .tag[data-appearance=primary]:focus-visible, .tag[data-appearance=primary]:hover{
76
70
  background-color:var(--sys-primary-decor-hovered, #decdfb);
77
71
  }
78
72
  .tag[data-appearance=primary]:active{
@@ -87,10 +81,7 @@
87
81
  text-overflow:ellipsis;
88
82
  white-space:nowrap;
89
83
  }
90
- .tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover, .tag[data-appearance=red]:active{
91
- color:var(--sys-red-text-main, #7a2d2d);
92
- }
93
- .tag[data-appearance=red]:focus, .tag[data-appearance=red]:hover{
84
+ .tag[data-appearance=red]:focus-visible, .tag[data-appearance=red]:hover{
94
85
  background-color:var(--sys-red-decor-hovered, #fac1b3);
95
86
  }
96
87
  .tag[data-appearance=red]:active{
@@ -105,10 +96,7 @@
105
96
  text-overflow:ellipsis;
106
97
  white-space:nowrap;
107
98
  }
108
- .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover, .tag[data-appearance=orange]:active{
109
- color:var(--sys-orange-text-main, #884c23);
110
- }
111
- .tag[data-appearance=orange]:focus, .tag[data-appearance=orange]:hover{
99
+ .tag[data-appearance=orange]:focus-visible, .tag[data-appearance=orange]:hover{
112
100
  background-color:var(--sys-orange-decor-hovered, #f8c699);
113
101
  }
114
102
  .tag[data-appearance=orange]:active{
@@ -123,10 +111,7 @@
123
111
  text-overflow:ellipsis;
124
112
  white-space:nowrap;
125
113
  }
126
- .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover, .tag[data-appearance=yellow]:active{
127
- color:var(--sys-yellow-text-main, #815f19);
128
- }
129
- .tag[data-appearance=yellow]:focus, .tag[data-appearance=yellow]:hover{
114
+ .tag[data-appearance=yellow]:focus-visible, .tag[data-appearance=yellow]:hover{
130
115
  background-color:var(--sys-yellow-decor-hovered, #ead49a);
131
116
  }
132
117
  .tag[data-appearance=yellow]:active{
@@ -141,10 +126,7 @@
141
126
  text-overflow:ellipsis;
142
127
  white-space:nowrap;
143
128
  }
144
- .tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover, .tag[data-appearance=green]:active{
145
- color:var(--sys-green-text-main, #3d6035);
146
- }
147
- .tag[data-appearance=green]:focus, .tag[data-appearance=green]:hover{
129
+ .tag[data-appearance=green]:focus-visible, .tag[data-appearance=green]:hover{
148
130
  background-color:var(--sys-green-decor-hovered, #c0e1ba);
149
131
  }
150
132
  .tag[data-appearance=green]:active{
@@ -159,10 +141,7 @@
159
141
  text-overflow:ellipsis;
160
142
  white-space:nowrap;
161
143
  }
162
- .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover, .tag[data-appearance=blue]:active{
163
- color:var(--sys-blue-text-main, #2b537e);
164
- }
165
- .tag[data-appearance=blue]:focus, .tag[data-appearance=blue]:hover{
144
+ .tag[data-appearance=blue]:focus-visible, .tag[data-appearance=blue]:hover{
166
145
  background-color:var(--sys-blue-decor-hovered, #c5d9f6);
167
146
  }
168
147
  .tag[data-appearance=blue]:active{
@@ -177,10 +156,7 @@
177
156
  text-overflow:ellipsis;
178
157
  white-space:nowrap;
179
158
  }
180
- .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover, .tag[data-appearance=violet]:active{
181
- color:var(--sys-violet-text-main, #59446a);
182
- }
183
- .tag[data-appearance=violet]:focus, .tag[data-appearance=violet]:hover{
159
+ .tag[data-appearance=violet]:focus-visible, .tag[data-appearance=violet]:hover{
184
160
  background-color:var(--sys-violet-decor-hovered, #e1d0f7);
185
161
  }
186
162
  .tag[data-appearance=violet]:active{
@@ -195,10 +171,7 @@
195
171
  text-overflow:ellipsis;
196
172
  white-space:nowrap;
197
173
  }
198
- .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover, .tag[data-appearance=pink]:active{
199
- color:var(--sys-pink-text-main, #754158);
200
- }
201
- .tag[data-appearance=pink]:focus, .tag[data-appearance=pink]:hover{
174
+ .tag[data-appearance=pink]:focus-visible, .tag[data-appearance=pink]:hover{
202
175
  background-color:var(--sys-pink-decor-hovered, #f5c9d6);
203
176
  }
204
177
  .tag[data-appearance=pink]:active{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Tag",
7
- "version": "0.11.3-preview-64081c67.0",
7
+ "version": "0.12.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -42,5 +42,5 @@
42
42
  "@snack-uikit/utils": "3.5.0",
43
43
  "classnames": "2.5.1"
44
44
  },
45
- "gitHead": "2135b4fef1d0c2d531c2215386eb1735ac0ebd66"
45
+ "gitHead": "ea6bfd43b9837c9b25ac94c96077fdfb2f6b5b9f"
46
46
  }
package/src/components/TagLink/styles.module.scss CHANGED
@@ -11,82 +11,64 @@ $appearances: (
11
11
  'container': styles-tokens-tag.$sys-neutral-decor-default,
12
12
  'container-disabled': styles-tokens-tag.$sys-neutral-decor-disabled,
13
13
  'label': styles-tokens-tag.$sys-neutral-text-support,
14
- 'icon': styles-tokens-tag.$sys-neutral-text-light,
15
- 'icon-active': styles-tokens-tag.$sys-neutral-text-main,
16
- 'button-hovered': styles-tokens-tag.$sys-neutral-decor-hovered,
17
- 'button-active': styles-tokens-tag.$sys-neutral-decor-activated,
14
+ 'hovered': styles-tokens-tag.$sys-neutral-decor-hovered,
15
+ 'active': styles-tokens-tag.$sys-neutral-decor-activated,
18
16
  ),
19
17
  'primary': (
20
18
  'container': styles-tokens-tag.$sys-primary-decor-default,
21
19
  'container-disabled': styles-tokens-tag.$sys-primary-decor-disabled,
22
20
  'label': styles-tokens-tag.$sys-primary-text-support,
23
- 'icon': styles-tokens-tag.$sys-primary-text-light,
24
- 'icon-active': styles-tokens-tag.$sys-primary-text-main,
25
- 'button-hovered': styles-tokens-tag.$sys-primary-decor-hovered,
26
- 'button-active': styles-tokens-tag.$sys-primary-decor-activated,
21
+ 'hovered': styles-tokens-tag.$sys-primary-decor-hovered,
22
+ 'active': styles-tokens-tag.$sys-primary-decor-activated,
27
23
  ),
28
24
  'red': (
29
25
  'container': styles-tokens-tag.$sys-red-decor-default,
30
26
  'container-disabled': styles-tokens-tag.$sys-red-decor-disabled,
31
27
  'label': styles-tokens-tag.$sys-red-text-support,
32
- 'icon': styles-tokens-tag.$sys-red-text-light,
33
- 'icon-active': styles-tokens-tag.$sys-red-text-main,
34
- 'button-hovered': styles-tokens-tag.$sys-red-decor-hovered,
35
- 'button-active': styles-tokens-tag.$sys-red-decor-activated,
28
+ 'hovered': styles-tokens-tag.$sys-red-decor-hovered,
29
+ 'active': styles-tokens-tag.$sys-red-decor-activated,
36
30
  ),
37
31
  'orange': (
38
32
  'container': styles-tokens-tag.$sys-orange-decor-default,
39
33
  'container-disabled': styles-tokens-tag.$sys-orange-decor-disabled,
40
34
  'label': styles-tokens-tag.$sys-orange-text-support,
41
- 'icon': styles-tokens-tag.$sys-orange-text-light,
42
- 'icon-active': styles-tokens-tag.$sys-orange-text-main,
43
- 'button-hovered': styles-tokens-tag.$sys-orange-decor-hovered,
44
- 'button-active': styles-tokens-tag.$sys-orange-decor-activated,
35
+ 'hovered': styles-tokens-tag.$sys-orange-decor-hovered,
36
+ 'active': styles-tokens-tag.$sys-orange-decor-activated,
45
37
  ),
46
38
  'yellow': (
47
39
  'container': styles-tokens-tag.$sys-yellow-decor-default,
48
40
  'container-disabled': styles-tokens-tag.$sys-yellow-decor-disabled,
49
41
  'label': styles-tokens-tag.$sys-yellow-text-support,
50
- 'icon': styles-tokens-tag.$sys-yellow-text-light,
51
- 'icon-active': styles-tokens-tag.$sys-yellow-text-main,
52
- 'button-hovered': styles-tokens-tag.$sys-yellow-decor-hovered,
53
- 'button-active': styles-tokens-tag.$sys-yellow-decor-activated,
42
+ 'hovered': styles-tokens-tag.$sys-yellow-decor-hovered,
43
+ 'active': styles-tokens-tag.$sys-yellow-decor-activated,
54
44
  ),
55
45
  'green': (
56
46
  'container': styles-tokens-tag.$sys-green-decor-default,
57
47
  'container-disabled': styles-tokens-tag.$sys-green-decor-disabled,
58
48
  'label': styles-tokens-tag.$sys-green-text-support,
59
- 'icon': styles-tokens-tag.$sys-green-text-light,
60
- 'icon-active': styles-tokens-tag.$sys-green-text-main,
61
- 'button-hovered': styles-tokens-tag.$sys-green-decor-hovered,
62
- 'button-active': styles-tokens-tag.$sys-green-decor-activated,
49
+ 'hovered': styles-tokens-tag.$sys-green-decor-hovered,
50
+ 'active': styles-tokens-tag.$sys-green-decor-activated,
63
51
  ),
64
52
  'blue': (
65
53
  'container': styles-tokens-tag.$sys-blue-decor-default,
66
54
  'container-disabled': styles-tokens-tag.$sys-blue-decor-disabled,
67
55
  'label': styles-tokens-tag.$sys-blue-text-support,
68
- 'icon': styles-tokens-tag.$sys-blue-text-light,
69
- 'icon-active': styles-tokens-tag.$sys-blue-text-main,
70
- 'button-hovered': styles-tokens-tag.$sys-blue-decor-hovered,
71
- 'button-active': styles-tokens-tag.$sys-blue-decor-activated,
56
+ 'hovered': styles-tokens-tag.$sys-blue-decor-hovered,
57
+ 'active': styles-tokens-tag.$sys-blue-decor-activated,
72
58
  ),
73
59
  'violet': (
74
60
  'container': styles-tokens-tag.$sys-violet-decor-default,
75
61
  'container-disabled': styles-tokens-tag.$sys-violet-decor-disabled,
76
62
  'label': styles-tokens-tag.$sys-violet-text-support,
77
- 'icon': styles-tokens-tag.$sys-violet-text-light,
78
- 'icon-active': styles-tokens-tag.$sys-violet-text-main,
79
- 'button-hovered': styles-tokens-tag.$sys-violet-decor-hovered,
80
- 'button-active': styles-tokens-tag.$sys-violet-decor-activated,
63
+ 'hovered': styles-tokens-tag.$sys-violet-decor-hovered,
64
+ 'active': styles-tokens-tag.$sys-violet-decor-activated,
81
65
  ),
82
66
  'pink': (
83
67
  'container': styles-tokens-tag.$sys-pink-decor-default,
84
68
  'container-disabled': styles-tokens-tag.$sys-pink-decor-disabled,
85
69
  'label': styles-tokens-tag.$sys-pink-text-support,
86
- 'icon': styles-tokens-tag.$sys-pink-text-light,
87
- 'icon-active': styles-tokens-tag.$sys-pink-text-main,
88
- 'button-hovered': styles-tokens-tag.$sys-pink-decor-hovered,
89
- 'button-active': styles-tokens-tag.$sys-pink-decor-activated,
70
+ 'hovered': styles-tokens-tag.$sys-pink-decor-hovered,
71
+ 'active': styles-tokens-tag.$sys-pink-decor-activated,
90
72
  ),
91
73
  );
92
74
 
@@ -100,7 +82,9 @@ $appearances: (
100
82
  text-decoration: none;
101
83
 
102
84
  &:focus-visible {
103
- @include styles-tokens-tag.outline-inside-var(styles-tokens-element.$container-focused-s);
85
+ @include styles-tokens-tag.outline-var(styles-tokens-element.$container-focused-s);
86
+
87
+ outline-color: styles-tokens-element.$sys-available-complementary;
104
88
  }
105
89
 
106
90
  &:active {
@@ -128,19 +112,13 @@ $appearances: (
128
112
  white-space: nowrap;
129
113
  }
130
114
 
131
- &:focus,
132
- &:hover,
133
- &:active {
134
- color: styles-tokens-tag.simple-var($appearance, 'icon-active');
135
- }
136
-
137
- &:focus,
115
+ &:focus-visible,
138
116
  &:hover {
139
- background-color: styles-tokens-tag.simple-var($appearance, 'button-hovered');
117
+ background-color: styles-tokens-tag.simple-var($appearance, 'hovered');
140
118
  }
141
119
 
142
120
  &:active {
143
- background-color: styles-tokens-tag.simple-var($appearance, 'button-active');
121
+ background-color: styles-tokens-tag.simple-var($appearance, 'active');
144
122
  }
145
123
  }
146
124
  }