@snack-uikit/link 0.13.0 → 0.13.1-preview-8898cdde.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.
package/README.md CHANGED
@@ -29,6 +29,17 @@ import { Link } from '@snack-uikit/link';
29
29
  ### Props
30
30
  | name | type | default value | description |
31
31
  |------|------|---------------|-------------|
32
+ | text | `string` | - | Текст ссылки |
33
+ | className | `string` | - | CSS-класс |
34
+ | href | `string` | # | Ссылка |
35
+ | target | `HTMLAttributeAnchorTarget` | _blank | HTML-атрибут target |
36
+ | download | `string` | - | HTML-атрибут download |
37
+ | onClick | `MouseEventHandler<HTMLAnchorElement>` | - | Колбек обработки клика |
38
+ | size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
39
+ | appearance | enum Appearance: `"invert-neutral"`, `"neutral"`, `"primary"`, `"red"`, `"orange"`, `"yellow"`, `"green"`, `"blue"`, `"violet"`, `"pink"` | primary | Стилизует ссылку для размещения на цветном фоне |
40
+ | textMode | enum TextMode: `"default"`, `"accent"`, `"on-accent"` | default | Тип поверхности, на которой размещена ссылка |
41
+ | insideText | `boolean` | - | Находится ли ссылка внутри текста (и можно ли её переносить) |
42
+ | truncateVariant | "end" \| "middle" | - | Вариант обрезания строки: <br> - `end` - с конца; <br> - `middle` - по середине |
32
43
 
33
44
 
34
45
  [//]: DOCUMENTATION_SECTION_END
@@ -39,17 +39,17 @@
39
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, #2d2e38);
42
+ color:var(--sys-invert-neutral-on-accent, #363743);
43
43
  }
44
44
  .link[data-appearance=invert-neutral][data-text-mode=on-accent]:hover{
45
- color:var(--sys-invert-neutral-on-accent, #2d2e38);
45
+ color:var(--sys-invert-neutral-on-accent, #363743);
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, #2d2e38);
52
+ color:var(--sys-invert-neutral-on-accent, #363743);
53
53
  opacity:var(--opacity-a080, 0.8);
54
54
  outline-color:var(--sys-available-on-complementary, #ffffff);
55
55
  }
@@ -57,26 +57,26 @@
57
57
  color:var(--sys-neutral-text-support, #6d707f);
58
58
  }
59
59
  .link[data-appearance=neutral][data-text-mode=default]:hover{
60
- color:var(--sys-neutral-text-main, #33343f);
60
+ color:var(--sys-neutral-text-main, #41424e);
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, #33343f);
66
+ color:var(--sys-neutral-text-main, #41424e);
67
67
  outline-color:var(--sys-available-complementary, #15151b);
68
68
  }
69
69
  .link[data-appearance=neutral][data-text-mode=accent]{
70
70
  color:var(--sys-neutral-accent-default, #787b8a);
71
71
  }
72
72
  .link[data-appearance=neutral][data-text-mode=accent]:hover{
73
- color:var(--sys-neutral-text-main, #33343f);
73
+ color:var(--sys-neutral-text-main, #41424e);
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, #33343f);
79
+ color:var(--sys-neutral-text-main, #41424e);
80
80
  outline-color:var(--sys-available-complementary, #15151b);
81
81
  }
82
82
  .link[data-appearance=neutral][data-text-mode=on-accent]{
@@ -136,29 +136,29 @@
136
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, #a63d3a);
139
+ color:var(--sys-red-text-support, #ae514c);
140
140
  }
141
141
  .link[data-appearance=red][data-text-mode=default]:hover{
142
- color:var(--sys-red-text-main, #621c1b);
142
+ color:var(--sys-red-text-main, #7a2d2d);
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, #621c1b);
148
+ color:var(--sys-red-text-main, #7a2d2d);
149
149
  outline-color:var(--sys-available-complementary, #15151b);
150
150
  }
151
151
  .link[data-appearance=red][data-text-mode=accent]{
152
- color:var(--sys-red-accent-default, #cd3c3c);
152
+ color:var(--sys-red-accent-default, #cb3f3e);
153
153
  }
154
154
  .link[data-appearance=red][data-text-mode=accent]:hover{
155
- color:var(--sys-red-text-main, #621c1b);
155
+ color:var(--sys-red-text-main, #7a2d2d);
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, #621c1b);
161
+ color:var(--sys-red-text-main, #7a2d2d);
162
162
  outline-color:var(--sys-available-complementary, #15151b);
163
163
  }
164
164
  .link[data-appearance=red][data-text-mode=on-accent]{
@@ -177,29 +177,29 @@
177
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, #c06735);
180
+ color:var(--sys-orange-text-support, #bb733e);
181
181
  }
182
182
  .link[data-appearance=orange][data-text-mode=default]:hover{
183
- color:var(--sys-orange-text-main, #643117);
183
+ color:var(--sys-orange-text-main, #884c23);
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, #643117);
189
+ color:var(--sys-orange-text-main, #884c23);
190
190
  outline-color:var(--sys-available-complementary, #15151b);
191
191
  }
192
192
  .link[data-appearance=orange][data-text-mode=accent]{
193
- color:var(--sys-orange-accent-default, #ff8b37);
193
+ color:var(--sys-orange-accent-default, #fb8e42);
194
194
  }
195
195
  .link[data-appearance=orange][data-text-mode=accent]:hover{
196
- color:var(--sys-orange-text-main, #643117);
196
+ color:var(--sys-orange-text-main, #884c23);
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, #643117);
202
+ color:var(--sys-orange-text-main, #884c23);
203
203
  outline-color:var(--sys-available-complementary, #15151b);
204
204
  }
205
205
  .link[data-appearance=orange][data-text-mode=on-accent]{
@@ -218,29 +218,29 @@
218
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, #4975a9);
221
+ color:var(--sys-blue-text-support, #4877b0);
222
222
  }
223
223
  .link[data-appearance=blue][data-text-mode=default]:hover{
224
- color:var(--sys-blue-text-main, #153a61);
224
+ color:var(--sys-blue-text-main, #2b537e);
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, #153a61);
230
+ color:var(--sys-blue-text-main, #2b537e);
231
231
  outline-color:var(--sys-available-complementary, #15151b);
232
232
  }
233
233
  .link[data-appearance=blue][data-text-mode=accent]{
234
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, #153a61);
237
+ color:var(--sys-blue-text-main, #2b537e);
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, #153a61);
243
+ color:var(--sys-blue-text-main, #2b537e);
244
244
  outline-color:var(--sys-available-complementary, #15151b);
245
245
  }
246
246
  .link[data-appearance=blue][data-text-mode=on-accent]{
@@ -259,29 +259,29 @@
259
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, #8c5d93);
262
+ color:var(--sys-violet-text-support, #906297);
263
263
  }
264
264
  .link[data-appearance=violet][data-text-mode=default]:hover{
265
- color:var(--sys-violet-text-main, #502e56);
265
+ color:var(--sys-violet-text-main, #5f4264);
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, #502e56);
271
+ color:var(--sys-violet-text-main, #5f4264);
272
272
  outline-color:var(--sys-available-complementary, #15151b);
273
273
  }
274
274
  .link[data-appearance=violet][data-text-mode=accent]{
275
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, #502e56);
278
+ color:var(--sys-violet-text-main, #5f4264);
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, #502e56);
284
+ color:var(--sys-violet-text-main, #5f4264);
285
285
  outline-color:var(--sys-available-complementary, #15151b);
286
286
  }
287
287
  .link[data-appearance=violet][data-text-mode=on-accent]{
@@ -300,29 +300,29 @@
300
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, #aa597d);
303
+ color:var(--sys-pink-text-support, #ae5e80);
304
304
  }
305
305
  .link[data-appearance=pink][data-text-mode=default]:hover{
306
- color:var(--sys-pink-text-main, #5e2540);
306
+ color:var(--sys-pink-text-main, #754158);
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, #5e2540);
312
+ color:var(--sys-pink-text-main, #754158);
313
313
  outline-color:var(--sys-available-complementary, #15151b);
314
314
  }
315
315
  .link[data-appearance=pink][data-text-mode=accent]{
316
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, #5e2540);
319
+ color:var(--sys-pink-text-main, #754158);
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, #5e2540);
325
+ color:var(--sys-pink-text-main, #754158);
326
326
  outline-color:var(--sys-available-complementary, #15151b);
327
327
  }
328
328
  .link[data-appearance=pink][data-text-mode=on-accent]{
@@ -341,70 +341,70 @@
341
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, #a77a10);
344
+ color:var(--sys-yellow-text-support, #b78c32);
345
345
  }
346
346
  .link[data-appearance=yellow][data-text-mode=default]:hover{
347
- color:var(--sys-yellow-text-main, #5e3d06);
347
+ color:var(--sys-yellow-text-main, #815f19);
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, #5e3d06);
353
+ color:var(--sys-yellow-text-main, #815f19);
354
354
  outline-color:var(--sys-available-complementary, #15151b);
355
355
  }
356
356
  .link[data-appearance=yellow][data-text-mode=accent]{
357
- color:var(--sys-yellow-accent-default, #ffc443);
357
+ color:var(--sys-yellow-accent-default, #e2b134);
358
358
  }
359
359
  .link[data-appearance=yellow][data-text-mode=accent]:hover{
360
- color:var(--sys-yellow-text-main, #5e3d06);
360
+ color:var(--sys-yellow-text-main, #815f19);
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, #5e3d06);
366
+ color:var(--sys-yellow-text-main, #815f19);
367
367
  outline-color:var(--sys-available-complementary, #15151b);
368
368
  }
369
369
  .link[data-appearance=yellow][data-text-mode=on-accent]{
370
- color:var(--sys-yellow-on-accent, #5e3d06);
370
+ color:var(--sys-yellow-on-accent, #593e20);
371
371
  }
372
372
  .link[data-appearance=yellow][data-text-mode=on-accent]:hover{
373
- color:var(--sys-yellow-on-accent, #5e3d06);
373
+ color:var(--sys-yellow-on-accent, #593e20);
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, #5e3d06);
380
+ color:var(--sys-yellow-on-accent, #593e20);
381
381
  opacity:var(--opacity-a080, 0.8);
382
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, #568a56);
385
+ color:var(--sys-green-text-support, #55915a);
386
386
  }
387
387
  .link[data-appearance=green][data-text-mode=default]:hover{
388
- color:var(--sys-green-text-main, #323f27);
388
+ color:var(--sys-green-text-main, #3d6035);
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, #323f27);
394
+ color:var(--sys-green-text-main, #3d6035);
395
395
  outline-color:var(--sys-available-complementary, #15151b);
396
396
  }
397
397
  .link[data-appearance=green][data-text-mode=accent]{
398
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, #323f27);
401
+ color:var(--sys-green-text-main, #3d6035);
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, #323f27);
407
+ color:var(--sys-green-text-main, #3d6035);
408
408
  outline-color:var(--sys-available-complementary, #15151b);
409
409
  }
410
410
  .link[data-appearance=green][data-text-mode=on-accent]{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.13.0",
7
+ "version": "0.13.1-preview-8898cdde.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,9 +32,9 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/truncate-string": "0.4.20",
35
+ "@snack-uikit/truncate-string": "0.4.21-preview-8898cdde.0",
36
36
  "@snack-uikit/utils": "3.3.0",
37
37
  "classnames": "2.3.2"
38
38
  },
39
- "gitHead": "86e5b8fc3a6235eddccf75485b6e989b6baf9a86"
39
+ "gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
40
40
  }