@snack-uikit/link 0.11.1 → 0.11.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/styles.module.css +117 -117
  3. package/package.json +3 -3
  4. package/src/components/styles.module.scss +1 -1
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.11.2 (2024-02-20)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **FF-4297:** apply system-layer tokens ([7c8fd4b](https://github.com/cloud-ru-tech/snack-uikit/commit/7c8fd4b5334360b2fc31da92973b6835ffa287af))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.11.1 (2024-02-05)
7
18
 
8
19
  ### Only dependencies have been changed
package/dist/components/styles.module.css CHANGED
@@ -13,86 +13,86 @@
13
13
  display:inline;
14
14
  }
15
15
  .link[data-appearance=invert-neutral][data-text-mode=default]{
16
- color:var(--sys-invert-neutral-text-support, #b8b8b8);
16
+ color:var(--sys-invert-neutral-text-support, #bfc2cc);
17
17
  }
18
18
  .link[data-appearance=invert-neutral][data-text-mode=default]:hover{
19
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
19
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
20
20
  }
21
21
  .link[data-appearance=invert-neutral][data-text-mode=default]:focus-visible{
22
22
  outline-width:var(--border-state-focus-s-border-width, 2px);
23
23
  outline-style:var(--border-state-focus-s-border-style, solid);
24
24
  outline-color:var(--border-state-focus-s-border-color, );
25
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
26
- outline-color:var(--sys-available-complementary, #131313);
25
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
26
+ outline-color:var(--sys-available-complementary, #141415);
27
27
  }
28
28
  .link[data-appearance=invert-neutral][data-text-mode=accent]{
29
- color:var(--sys-invert-neutral-accent-default, #d2d2d2);
29
+ color:var(--sys-invert-neutral-accent-default, #cfd2dc);
30
30
  }
31
31
  .link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
32
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
32
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
33
33
  }
34
34
  .link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
35
35
  outline-width:var(--border-state-focus-s-border-width, 2px);
36
36
  outline-style:var(--border-state-focus-s-border-style, solid);
37
37
  outline-color:var(--border-state-focus-s-border-color, );
38
- color:var(--sys-invert-neutral-text-main, #e7e7e7);
39
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
38
+ color:var(--sys-invert-neutral-text-main, #e8eaf1);
39
+ outline-color:var(--sys-available-on-complementary, #ffffff);
40
40
  }
41
41
  .link[data-appearance=invert-neutral][data-text-mode=on-accent]{
42
- color:var(--sys-invert-neutral-on-accent, #282828);
42
+ color:var(--sys-invert-neutral-on-accent, #27272e);
43
43
  }
44
44
  .link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
45
- color:var(--sys-invert-neutral-on-accent, #282828);
45
+ color:var(--sys-invert-neutral-on-accent, #27272e);
46
46
  opacity:var(--opacity-a080, 0.8);
47
47
  }
48
48
  .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
49
49
  outline-width:var(--border-state-focus-s-border-width, 2px);
50
50
  outline-style:var(--border-state-focus-s-border-style, solid);
51
51
  outline-color:var(--border-state-focus-s-border-color, );
52
- color:var(--sys-invert-neutral-on-accent, #282828);
52
+ color:var(--sys-invert-neutral-on-accent, #27272e);
53
53
  opacity:var(--opacity-a080, 0.8);
54
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
54
+ outline-color:var(--sys-available-on-complementary, #ffffff);
55
55
  }
56
56
  .link[data-appearance=neutral][data-text-mode=default]{
57
- color:var(--sys-neutral-text-support, #565656);
57
+ color:var(--sys-neutral-text-support, #656771);
58
58
  }
59
59
  .link[data-appearance=neutral][data-text-mode=default]:hover{
60
- color:var(--sys-neutral-text-main, #333333);
60
+ color:var(--sys-neutral-text-main, #33333b);
61
61
  }
62
62
  .link[data-appearance=neutral][data-text-mode=default]:focus-visible{
63
63
  outline-width:var(--border-state-focus-s-border-width, 2px);
64
64
  outline-style:var(--border-state-focus-s-border-style, solid);
65
65
  outline-color:var(--border-state-focus-s-border-color, );
66
- color:var(--sys-neutral-text-main, #333333);
67
- outline-color:var(--sys-available-complementary, #131313);
66
+ color:var(--sys-neutral-text-main, #33333b);
67
+ outline-color:var(--sys-available-complementary, #141415);
68
68
  }
69
69
  .link[data-appearance=neutral][data-text-mode=accent]{
70
- color:var(--sys-neutral-accent-default, #757575);
70
+ color:var(--sys-neutral-accent-default, #6f717c);
71
71
  }
72
72
  .link[data-appearance=neutral][data-text-mode=accent]:hover{
73
- color:var(--sys-neutral-text-main, #333333);
73
+ color:var(--sys-neutral-text-main, #33333b);
74
74
  }
75
75
  .link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
76
76
  outline-width:var(--border-state-focus-s-border-width, 2px);
77
77
  outline-style:var(--border-state-focus-s-border-style, solid);
78
78
  outline-color:var(--border-state-focus-s-border-color, );
79
- color:var(--sys-neutral-text-main, #333333);
80
- outline-color:var(--sys-available-complementary, #131313);
79
+ color:var(--sys-neutral-text-main, #33333b);
80
+ outline-color:var(--sys-available-complementary, #141415);
81
81
  }
82
82
  .link[data-appearance=neutral][data-text-mode=on-accent]{
83
- color:var(--sys-neutral-on-accent, #fdfdfd);
83
+ color:var(--sys-neutral-on-accent, #ffffff);
84
84
  }
85
85
  .link[data-appearance=neutral][data-text-mode=on-accent]:hover{
86
- color:var(--sys-neutral-on-accent, #fdfdfd);
86
+ color:var(--sys-neutral-on-accent, #ffffff);
87
87
  opacity:var(--opacity-a080, 0.8);
88
88
  }
89
89
  .link[data-appearance=neutral][data-text-mode=on-accent]:focus-visible{
90
90
  outline-width:var(--border-state-focus-s-border-width, 2px);
91
91
  outline-style:var(--border-state-focus-s-border-style, solid);
92
92
  outline-color:var(--border-state-focus-s-border-color, );
93
- color:var(--sys-neutral-on-accent, #fdfdfd);
93
+ color:var(--sys-neutral-on-accent, #ffffff);
94
94
  opacity:var(--opacity-a080, 0.8);
95
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
95
+ outline-color:var(--sys-available-on-complementary, #ffffff);
96
96
  }
97
97
  .link[data-appearance=primary][data-text-mode=default]{
98
98
  color:var(--sys-primary-text-support, #5b4796);
@@ -105,7 +105,7 @@
105
105
  outline-style:var(--border-state-focus-s-border-style, solid);
106
106
  outline-color:var(--border-state-focus-s-border-color, );
107
107
  color:var(--sys-primary-text-main, #382a62);
108
- outline-color:var(--sys-available-complementary, #131313);
108
+ outline-color:var(--sys-available-complementary, #141415);
109
109
  }
110
110
  .link[data-appearance=primary][data-text-mode=accent]{
111
111
  color:var(--sys-primary-accent-default, #794ed3);
@@ -118,7 +118,7 @@
118
118
  outline-style:var(--border-state-focus-s-border-style, solid);
119
119
  outline-color:var(--border-state-focus-s-border-color, );
120
120
  color:var(--sys-primary-text-main, #382a62);
121
- outline-color:var(--sys-available-complementary, #131313);
121
+ outline-color:var(--sys-available-complementary, #141415);
122
122
  }
123
123
  .link[data-appearance=primary][data-text-mode=on-accent]{
124
124
  color:var(--sys-primary-on-accent, #fdfbff);
@@ -133,156 +133,156 @@
133
133
  outline-color:var(--border-state-focus-s-border-color, );
134
134
  color:var(--sys-primary-on-accent, #fdfbff);
135
135
  opacity:var(--opacity-a080, 0.8);
136
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
136
+ outline-color:var(--sys-available-on-complementary, #ffffff);
137
137
  }
138
138
  .link[data-appearance=red][data-text-mode=default]{
139
- color:var(--sys-red-text-support, #a93936);
139
+ color:var(--sys-red-text-support, #ab423e);
140
140
  }
141
141
  .link[data-appearance=red][data-text-mode=default]:hover{
142
- color:var(--sys-red-text-main, #621c1e);
142
+ color:var(--sys-red-text-main, #621c1b);
143
143
  }
144
144
  .link[data-appearance=red][data-text-mode=default]: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, );
148
- color:var(--sys-red-text-main, #621c1e);
149
- outline-color:var(--sys-available-complementary, #131313);
148
+ color:var(--sys-red-text-main, #621c1b);
149
+ outline-color:var(--sys-available-complementary, #141415);
150
150
  }
151
151
  .link[data-appearance=red][data-text-mode=accent]{
152
- color:var(--sys-red-accent-default, #d93f2f);
152
+ color:var(--sys-red-accent-default, #cd3c3c);
153
153
  }
154
154
  .link[data-appearance=red][data-text-mode=accent]:hover{
155
- color:var(--sys-red-text-main, #621c1e);
155
+ color:var(--sys-red-text-main, #621c1b);
156
156
  }
157
157
  .link[data-appearance=red][data-text-mode=accent]:focus-visible{
158
158
  outline-width:var(--border-state-focus-s-border-width, 2px);
159
159
  outline-style:var(--border-state-focus-s-border-style, solid);
160
160
  outline-color:var(--border-state-focus-s-border-color, );
161
- color:var(--sys-red-text-main, #621c1e);
162
- outline-color:var(--sys-available-complementary, #131313);
161
+ color:var(--sys-red-text-main, #621c1b);
162
+ outline-color:var(--sys-available-complementary, #141415);
163
163
  }
164
164
  .link[data-appearance=red][data-text-mode=on-accent]{
165
- color:var(--sys-red-on-accent, #fffbfa);
165
+ color:var(--sys-red-on-accent, #fffbf9);
166
166
  }
167
167
  .link[data-appearance=red][data-text-mode=on-accent]:hover{
168
- color:var(--sys-red-on-accent, #fffbfa);
168
+ color:var(--sys-red-on-accent, #fffbf9);
169
169
  opacity:var(--opacity-a080, 0.8);
170
170
  }
171
171
  .link[data-appearance=red][data-text-mode=on-accent]:focus-visible{
172
172
  outline-width:var(--border-state-focus-s-border-width, 2px);
173
173
  outline-style:var(--border-state-focus-s-border-style, solid);
174
174
  outline-color:var(--border-state-focus-s-border-color, );
175
- color:var(--sys-red-on-accent, #fffbfa);
175
+ color:var(--sys-red-on-accent, #fffbf9);
176
176
  opacity:var(--opacity-a080, 0.8);
177
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
177
+ outline-color:var(--sys-available-on-complementary, #ffffff);
178
178
  }
179
179
  .link[data-appearance=orange][data-text-mode=default]{
180
- color:var(--sys-orange-text-support, #a2532f);
180
+ color:var(--sys-orange-text-support, #c06735);
181
181
  }
182
182
  .link[data-appearance=orange][data-text-mode=default]:hover{
183
- color:var(--sys-orange-text-main, #572212);
183
+ color:var(--sys-orange-text-main, #643117);
184
184
  }
185
185
  .link[data-appearance=orange][data-text-mode=default]:focus-visible{
186
186
  outline-width:var(--border-state-focus-s-border-width, 2px);
187
187
  outline-style:var(--border-state-focus-s-border-style, solid);
188
188
  outline-color:var(--border-state-focus-s-border-color, );
189
- color:var(--sys-orange-text-main, #572212);
190
- outline-color:var(--sys-available-complementary, #131313);
189
+ color:var(--sys-orange-text-main, #643117);
190
+ outline-color:var(--sys-available-complementary, #141415);
191
191
  }
192
192
  .link[data-appearance=orange][data-text-mode=accent]{
193
- color:var(--sys-orange-accent-default, #fd8f1a);
193
+ color:var(--sys-orange-accent-default, #ff8b37);
194
194
  }
195
195
  .link[data-appearance=orange][data-text-mode=accent]:hover{
196
- color:var(--sys-orange-text-main, #572212);
196
+ color:var(--sys-orange-text-main, #643117);
197
197
  }
198
198
  .link[data-appearance=orange][data-text-mode=accent]:focus-visible{
199
199
  outline-width:var(--border-state-focus-s-border-width, 2px);
200
200
  outline-style:var(--border-state-focus-s-border-style, solid);
201
201
  outline-color:var(--border-state-focus-s-border-color, );
202
- color:var(--sys-orange-text-main, #572212);
203
- outline-color:var(--sys-available-complementary, #131313);
202
+ color:var(--sys-orange-text-main, #643117);
203
+ outline-color:var(--sys-available-complementary, #141415);
204
204
  }
205
205
  .link[data-appearance=orange][data-text-mode=on-accent]{
206
- color:var(--sys-orange-on-accent, #572212);
206
+ color:var(--sys-orange-on-accent, #fffcf4);
207
207
  }
208
208
  .link[data-appearance=orange][data-text-mode=on-accent]:hover{
209
- color:var(--sys-orange-on-accent, #572212);
209
+ color:var(--sys-orange-on-accent, #fffcf4);
210
210
  opacity:var(--opacity-a080, 0.8);
211
211
  }
212
212
  .link[data-appearance=orange][data-text-mode=on-accent]:focus-visible{
213
213
  outline-width:var(--border-state-focus-s-border-width, 2px);
214
214
  outline-style:var(--border-state-focus-s-border-style, solid);
215
215
  outline-color:var(--border-state-focus-s-border-color, );
216
- color:var(--sys-orange-on-accent, #572212);
216
+ color:var(--sys-orange-on-accent, #fffcf4);
217
217
  opacity:var(--opacity-a080, 0.8);
218
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
218
+ outline-color:var(--sys-available-on-complementary, #ffffff);
219
219
  }
220
220
  .link[data-appearance=blue][data-text-mode=default]{
221
- color:var(--sys-blue-text-support, #4265ab);
221
+ color:var(--sys-blue-text-support, #4975a9);
222
222
  }
223
223
  .link[data-appearance=blue][data-text-mode=default]:hover{
224
- color:var(--sys-blue-text-main, #1f3361);
224
+ color:var(--sys-blue-text-main, #153a61);
225
225
  }
226
226
  .link[data-appearance=blue][data-text-mode=default]:focus-visible{
227
227
  outline-width:var(--border-state-focus-s-border-width, 2px);
228
228
  outline-style:var(--border-state-focus-s-border-style, solid);
229
229
  outline-color:var(--border-state-focus-s-border-color, );
230
- color:var(--sys-blue-text-main, #1f3361);
231
- outline-color:var(--sys-available-complementary, #131313);
230
+ color:var(--sys-blue-text-main, #153a61);
231
+ outline-color:var(--sys-available-complementary, #141415);
232
232
  }
233
233
  .link[data-appearance=blue][data-text-mode=accent]{
234
- color:var(--sys-blue-accent-default, #3280e8);
234
+ color:var(--sys-blue-accent-default, #5388d1);
235
235
  }
236
236
  .link[data-appearance=blue][data-text-mode=accent]:hover{
237
- color:var(--sys-blue-text-main, #1f3361);
237
+ color:var(--sys-blue-text-main, #153a61);
238
238
  }
239
239
  .link[data-appearance=blue][data-text-mode=accent]:focus-visible{
240
240
  outline-width:var(--border-state-focus-s-border-width, 2px);
241
241
  outline-style:var(--border-state-focus-s-border-style, solid);
242
242
  outline-color:var(--border-state-focus-s-border-color, );
243
- color:var(--sys-blue-text-main, #1f3361);
244
- outline-color:var(--sys-available-complementary, #131313);
243
+ color:var(--sys-blue-text-main, #153a61);
244
+ outline-color:var(--sys-available-complementary, #141415);
245
245
  }
246
246
  .link[data-appearance=blue][data-text-mode=on-accent]{
247
- color:var(--sys-blue-on-accent, #fcfeff);
247
+ color:var(--sys-blue-on-accent, #fdfeff);
248
248
  }
249
249
  .link[data-appearance=blue][data-text-mode=on-accent]:hover{
250
- color:var(--sys-blue-on-accent, #fcfeff);
250
+ color:var(--sys-blue-on-accent, #fdfeff);
251
251
  opacity:var(--opacity-a080, 0.8);
252
252
  }
253
253
  .link[data-appearance=blue][data-text-mode=on-accent]:focus-visible{
254
254
  outline-width:var(--border-state-focus-s-border-width, 2px);
255
255
  outline-style:var(--border-state-focus-s-border-style, solid);
256
256
  outline-color:var(--border-state-focus-s-border-color, );
257
- color:var(--sys-blue-on-accent, #fcfeff);
257
+ color:var(--sys-blue-on-accent, #fdfeff);
258
258
  opacity:var(--opacity-a080, 0.8);
259
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
259
+ outline-color:var(--sys-available-on-complementary, #ffffff);
260
260
  }
261
261
  .link[data-appearance=violet][data-text-mode=default]{
262
- color:var(--sys-violet-text-support, #864b8e);
262
+ color:var(--sys-violet-text-support, #8c5d93);
263
263
  }
264
264
  .link[data-appearance=violet][data-text-mode=default]:hover{
265
- color:var(--sys-violet-text-main, #51255f);
265
+ color:var(--sys-violet-text-main, #502e56);
266
266
  }
267
267
  .link[data-appearance=violet][data-text-mode=default]:focus-visible{
268
268
  outline-width:var(--border-state-focus-s-border-width, 2px);
269
269
  outline-style:var(--border-state-focus-s-border-style, solid);
270
270
  outline-color:var(--border-state-focus-s-border-color, );
271
- color:var(--sys-violet-text-main, #51255f);
272
- outline-color:var(--sys-available-complementary, #131313);
271
+ color:var(--sys-violet-text-main, #502e56);
272
+ outline-color:var(--sys-available-complementary, #141415);
273
273
  }
274
274
  .link[data-appearance=violet][data-text-mode=accent]{
275
- color:var(--sys-violet-accent-default, #bc52bf);
275
+ color:var(--sys-violet-accent-default, #b468b5);
276
276
  }
277
277
  .link[data-appearance=violet][data-text-mode=accent]:hover{
278
- color:var(--sys-violet-text-main, #51255f);
278
+ color:var(--sys-violet-text-main, #502e56);
279
279
  }
280
280
  .link[data-appearance=violet][data-text-mode=accent]:focus-visible{
281
281
  outline-width:var(--border-state-focus-s-border-width, 2px);
282
282
  outline-style:var(--border-state-focus-s-border-style, solid);
283
283
  outline-color:var(--border-state-focus-s-border-color, );
284
- color:var(--sys-violet-text-main, #51255f);
285
- outline-color:var(--sys-available-complementary, #131313);
284
+ color:var(--sys-violet-text-main, #502e56);
285
+ outline-color:var(--sys-available-complementary, #141415);
286
286
  }
287
287
  .link[data-appearance=violet][data-text-mode=on-accent]{
288
288
  color:var(--sys-violet-on-accent, #fdfdfd);
@@ -297,134 +297,134 @@
297
297
  outline-color:var(--border-state-focus-s-border-color, );
298
298
  color:var(--sys-violet-on-accent, #fdfdfd);
299
299
  opacity:var(--opacity-a080, 0.8);
300
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
300
+ outline-color:var(--sys-available-on-complementary, #ffffff);
301
301
  }
302
302
  .link[data-appearance=pink][data-text-mode=default]{
303
- color:var(--sys-pink-text-support, #a23f69);
303
+ color:var(--sys-pink-text-support, #aa597d);
304
304
  }
305
305
  .link[data-appearance=pink][data-text-mode=default]:hover{
306
- color:var(--sys-pink-text-main, #5e1937);
306
+ color:var(--sys-pink-text-main, #5e2540);
307
307
  }
308
308
  .link[data-appearance=pink][data-text-mode=default]:focus-visible{
309
309
  outline-width:var(--border-state-focus-s-border-width, 2px);
310
310
  outline-style:var(--border-state-focus-s-border-style, solid);
311
311
  outline-color:var(--border-state-focus-s-border-color, );
312
- color:var(--sys-pink-text-main, #5e1937);
313
- outline-color:var(--sys-available-complementary, #131313);
312
+ color:var(--sys-pink-text-main, #5e2540);
313
+ outline-color:var(--sys-available-complementary, #141415);
314
314
  }
315
315
  .link[data-appearance=pink][data-text-mode=accent]{
316
- color:var(--sys-pink-accent-default, #e14487);
316
+ color:var(--sys-pink-accent-default, #d1668e);
317
317
  }
318
318
  .link[data-appearance=pink][data-text-mode=accent]:hover{
319
- color:var(--sys-pink-text-main, #5e1937);
319
+ color:var(--sys-pink-text-main, #5e2540);
320
320
  }
321
321
  .link[data-appearance=pink][data-text-mode=accent]:focus-visible{
322
322
  outline-width:var(--border-state-focus-s-border-width, 2px);
323
323
  outline-style:var(--border-state-focus-s-border-style, solid);
324
324
  outline-color:var(--border-state-focus-s-border-color, );
325
- color:var(--sys-pink-text-main, #5e1937);
326
- outline-color:var(--sys-available-complementary, #131313);
325
+ color:var(--sys-pink-text-main, #5e2540);
326
+ outline-color:var(--sys-available-complementary, #141415);
327
327
  }
328
328
  .link[data-appearance=pink][data-text-mode=on-accent]{
329
- color:var(--sys-pink-on-accent, #fcfdfd);
329
+ color:var(--sys-pink-on-accent, #fdfcfd);
330
330
  }
331
331
  .link[data-appearance=pink][data-text-mode=on-accent]:hover{
332
- color:var(--sys-pink-on-accent, #fcfdfd);
332
+ color:var(--sys-pink-on-accent, #fdfcfd);
333
333
  opacity:var(--opacity-a080, 0.8);
334
334
  }
335
335
  .link[data-appearance=pink][data-text-mode=on-accent]:focus-visible{
336
336
  outline-width:var(--border-state-focus-s-border-width, 2px);
337
337
  outline-style:var(--border-state-focus-s-border-style, solid);
338
338
  outline-color:var(--border-state-focus-s-border-color, );
339
- color:var(--sys-pink-on-accent, #fcfdfd);
339
+ color:var(--sys-pink-on-accent, #fdfcfd);
340
340
  opacity:var(--opacity-a080, 0.8);
341
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
341
+ outline-color:var(--sys-available-on-complementary, #ffffff);
342
342
  }
343
343
  .link[data-appearance=yellow][data-text-mode=default]{
344
- color:var(--sys-yellow-text-support, #80461b);
344
+ color:var(--sys-yellow-text-support, #a57b0e);
345
345
  }
346
346
  .link[data-appearance=yellow][data-text-mode=default]:hover{
347
- color:var(--sys-yellow-text-main, #54290f);
347
+ color:var(--sys-yellow-text-main, #5e3d06);
348
348
  }
349
349
  .link[data-appearance=yellow][data-text-mode=default]:focus-visible{
350
350
  outline-width:var(--border-state-focus-s-border-width, 2px);
351
351
  outline-style:var(--border-state-focus-s-border-style, solid);
352
352
  outline-color:var(--border-state-focus-s-border-color, );
353
- color:var(--sys-yellow-text-main, #54290f);
354
- outline-color:var(--sys-available-complementary, #131313);
353
+ color:var(--sys-yellow-text-main, #5e3d06);
354
+ outline-color:var(--sys-available-complementary, #141415);
355
355
  }
356
356
  .link[data-appearance=yellow][data-text-mode=accent]{
357
- color:var(--sys-yellow-accent-default, #feb528);
357
+ color:var(--sys-yellow-accent-default, #fdca46);
358
358
  }
359
359
  .link[data-appearance=yellow][data-text-mode=accent]:hover{
360
- color:var(--sys-yellow-text-main, #54290f);
360
+ color:var(--sys-yellow-text-main, #5e3d06);
361
361
  }
362
362
  .link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
363
363
  outline-width:var(--border-state-focus-s-border-width, 2px);
364
364
  outline-style:var(--border-state-focus-s-border-style, solid);
365
365
  outline-color:var(--border-state-focus-s-border-color, );
366
- color:var(--sys-yellow-text-main, #54290f);
367
- outline-color:var(--sys-available-complementary, #131313);
366
+ color:var(--sys-yellow-text-main, #5e3d06);
367
+ outline-color:var(--sys-available-complementary, #141415);
368
368
  }
369
369
  .link[data-appearance=yellow][data-text-mode=on-accent]{
370
- color:var(--sys-yellow-on-accent, #54290f);
370
+ color:var(--sys-yellow-on-accent, #5e3d06);
371
371
  }
372
372
  .link[data-appearance=yellow][data-text-mode=on-accent]:hover{
373
- color:var(--sys-yellow-on-accent, #54290f);
373
+ color:var(--sys-yellow-on-accent, #5e3d06);
374
374
  opacity:var(--opacity-a080, 0.8);
375
375
  }
376
376
  .link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
377
377
  outline-width:var(--border-state-focus-s-border-width, 2px);
378
378
  outline-style:var(--border-state-focus-s-border-style, solid);
379
379
  outline-color:var(--border-state-focus-s-border-color, );
380
- color:var(--sys-yellow-on-accent, #54290f);
380
+ color:var(--sys-yellow-on-accent, #5e3d06);
381
381
  opacity:var(--opacity-a080, 0.8);
382
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
382
+ outline-color:var(--sys-available-on-complementary, #ffffff);
383
383
  }
384
384
  .link[data-appearance=green][data-text-mode=default]{
385
- color:var(--sys-green-text-support, #335747);
385
+ color:var(--sys-green-text-support, #568a56);
386
386
  }
387
387
  .link[data-appearance=green][data-text-mode=default]:hover{
388
- color:var(--sys-green-text-main, #1f392a);
388
+ color:var(--sys-green-text-main, #323f27);
389
389
  }
390
390
  .link[data-appearance=green][data-text-mode=default]:focus-visible{
391
391
  outline-width:var(--border-state-focus-s-border-width, 2px);
392
392
  outline-style:var(--border-state-focus-s-border-style, solid);
393
393
  outline-color:var(--border-state-focus-s-border-color, );
394
- color:var(--sys-green-text-main, #1f392a);
395
- outline-color:var(--sys-available-complementary, #131313);
394
+ color:var(--sys-green-text-main, #323f27);
395
+ outline-color:var(--sys-available-complementary, #141415);
396
396
  }
397
397
  .link[data-appearance=green][data-text-mode=accent]{
398
- color:var(--sys-green-accent-default, #0bbe8f);
398
+ color:var(--sys-green-accent-default, #57b762);
399
399
  }
400
400
  .link[data-appearance=green][data-text-mode=accent]:hover{
401
- color:var(--sys-green-text-main, #1f392a);
401
+ color:var(--sys-green-text-main, #323f27);
402
402
  }
403
403
  .link[data-appearance=green][data-text-mode=accent]:focus-visible{
404
404
  outline-width:var(--border-state-focus-s-border-width, 2px);
405
405
  outline-style:var(--border-state-focus-s-border-style, solid);
406
406
  outline-color:var(--border-state-focus-s-border-color, );
407
- color:var(--sys-green-text-main, #1f392a);
408
- outline-color:var(--sys-available-complementary, #131313);
407
+ color:var(--sys-green-text-main, #323f27);
408
+ outline-color:var(--sys-available-complementary, #141415);
409
409
  }
410
410
  .link[data-appearance=green][data-text-mode=on-accent]{
411
- color:var(--sys-green-on-accent, #1f392a);
411
+ color:var(--sys-green-on-accent, #fcfefa);
412
412
  }
413
413
  .link[data-appearance=green][data-text-mode=on-accent]:hover{
414
- color:var(--sys-green-on-accent, #1f392a);
414
+ color:var(--sys-green-on-accent, #fcfefa);
415
415
  opacity:var(--opacity-a080, 0.8);
416
416
  }
417
417
  .link[data-appearance=green][data-text-mode=on-accent]:focus-visible{
418
418
  outline-width:var(--border-state-focus-s-border-width, 2px);
419
419
  outline-style:var(--border-state-focus-s-border-style, solid);
420
420
  outline-color:var(--border-state-focus-s-border-color, );
421
- color:var(--sys-green-on-accent, #1f392a);
421
+ color:var(--sys-green-on-accent, #fcfefa);
422
422
  opacity:var(--opacity-a080, 0.8);
423
- outline-color:var(--sys-available-on-complementary, #fdfdfd);
423
+ outline-color:var(--sys-available-on-complementary, #ffffff);
424
424
  }
425
425
  .link[data-size=s]{
426
426
  height:var(--size-link-s, 16px);
427
- gap:var(--dimension-theme-general-0px, 0px);
427
+ gap:var(--space-link-gap-single, 0px);
428
428
  }
429
429
  .link[data-size=s][data-text-mode=default]{
430
430
  font-family:var(--sans-body-s-font-family, SB Sans Interface);
@@ -455,12 +455,12 @@
455
455
  text-decoration:var(--link-body-s-text-decoration, underline);
456
456
  }
457
457
  .link[data-size=s] svg{
458
- width:var(--dimension-2m, 16px) !important;
459
- height:var(--dimension-2m, 16px) !important;
458
+ width:var(--size-icon-container-xs, 16px) !important;
459
+ height:var(--size-icon-container-xs, 16px) !important;
460
460
  }
461
461
  .link[data-size=m]{
462
462
  height:var(--size-link-m, 20px);
463
- gap:var(--dimension-theme-general-0px, 0px);
463
+ gap:var(--space-link-gap-single, 0px);
464
464
  }
465
465
  .link[data-size=m][data-text-mode=default]{
466
466
  font-family:var(--sans-body-m-font-family, SB Sans Interface);
@@ -491,12 +491,12 @@
491
491
  text-decoration:var(--link-body-m-text-decoration, underline);
492
492
  }
493
493
  .link[data-size=m] svg{
494
- width:var(--dimension-3m, 24px) !important;
495
- height:var(--dimension-3m, 24px) !important;
494
+ width:var(--size-icon-container-s, 24px) !important;
495
+ height:var(--size-icon-container-s, 24px) !important;
496
496
  }
497
497
  .link[data-size=l]{
498
498
  height:var(--size-link-l, 24px);
499
- gap:var(--dimension-theme-general-0px, 0px);
499
+ gap:var(--space-link-gap-single, 0px);
500
500
  }
501
501
  .link[data-size=l][data-text-mode=default]{
502
502
  font-family:var(--sans-body-l-font-family, SB Sans Interface);
@@ -527,8 +527,8 @@
527
527
  text-decoration:var(--link-body-l-text-decoration, underline);
528
528
  }
529
529
  .link[data-size=l] svg{
530
- width:var(--dimension-3m, 24px) !important;
531
- height:var(--dimension-3m, 24px) !important;
530
+ width:var(--size-icon-container-s, 24px) !important;
531
+ height:var(--size-icon-container-s, 24px) !important;
532
532
  }
533
533
 
534
534
  .icon{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.11.1",
7
+ "version": "0.11.2",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -33,9 +33,9 @@
33
33
  "scripts": {},
34
34
  "dependencies": {
35
35
  "@snack-uikit/icons": "0.20.1",
36
- "@snack-uikit/truncate-string": "0.4.7",
36
+ "@snack-uikit/truncate-string": "0.4.8",
37
37
  "@snack-uikit/utils": "3.2.0",
38
38
  "classnames": "2.3.2"
39
39
  },
40
- "gitHead": "b1acc8128bdab6f23b534d7c464208069e59ed8c"
40
+ "gitHead": "fd079dd3acbfe935d0b88d9efd863047f25e5824"
41
41
  }
package/src/components/styles.module.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
- $appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
6
5
  $text-modes: 'default', 'accent', 'on-accent';
6
+ $appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
7
7
  $icon-sizes: (
8
8
  's': $icon-xs,
9
9
  'm': $icon-s,