@snack-uikit/link 0.17.0 → 0.17.1-preview-ef227a87.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 (4) hide show
  1. package/dist/cjs/components/styles.module.css +20 -20
  2. package/dist/esm/components/styles.module.css +20 -20
  3. package/package.json +3 -3
  4. package/src/components/styles.module.scss +13 -4
package/dist/cjs/components/styles.module.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
32
32
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
33
33
  }
34
- .link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
34
+ .link[data-appearance=invert-neutral][data-text-mode=accent]:focus, .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, );
@@ -45,7 +45,7 @@
45
45
  color:var(--sys-invert-neutral-on-accent, #393a46);
46
46
  opacity:var(--opacity-a080, 0.8);
47
47
  }
48
- .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
48
+ .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus, .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, );
@@ -72,7 +72,7 @@
72
72
  .link[data-appearance=neutral][data-text-mode=accent]:hover{
73
73
  color:var(--sys-neutral-text-main, #41424e);
74
74
  }
75
- .link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
75
+ .link[data-appearance=neutral][data-text-mode=accent]:focus, .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, );
@@ -86,7 +86,7 @@
86
86
  color:var(--sys-neutral-on-accent, #ffffff);
87
87
  opacity:var(--opacity-a080, 0.8);
88
88
  }
89
- .link[data-appearance=neutral][data-text-mode=on-accent]:focus-visible{
89
+ .link[data-appearance=neutral][data-text-mode=on-accent]:focus, .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, );
@@ -113,7 +113,7 @@
113
113
  .link[data-appearance=primary][data-text-mode=accent]:hover{
114
114
  color:var(--sys-primary-text-main, #382a62);
115
115
  }
116
- .link[data-appearance=primary][data-text-mode=accent]:focus-visible{
116
+ .link[data-appearance=primary][data-text-mode=accent]:focus, .link[data-appearance=primary][data-text-mode=accent]:focus-visible{
117
117
  outline-width:var(--border-state-focus-s-border-width, 2px);
118
118
  outline-style:var(--border-state-focus-s-border-style, solid);
119
119
  outline-color:var(--border-state-focus-s-border-color, );
@@ -127,7 +127,7 @@
127
127
  color:var(--sys-primary-on-accent, #fdfbff);
128
128
  opacity:var(--opacity-a080, 0.8);
129
129
  }
130
- .link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
130
+ .link[data-appearance=primary][data-text-mode=on-accent]:focus, .link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
131
131
  outline-width:var(--border-state-focus-s-border-width, 2px);
132
132
  outline-style:var(--border-state-focus-s-border-style, solid);
133
133
  outline-color:var(--border-state-focus-s-border-color, );
@@ -154,7 +154,7 @@
154
154
  .link[data-appearance=red][data-text-mode=accent]:hover{
155
155
  color:var(--sys-red-text-main, #7a2d2d);
156
156
  }
157
- .link[data-appearance=red][data-text-mode=accent]:focus-visible{
157
+ .link[data-appearance=red][data-text-mode=accent]:focus, .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, );
@@ -168,7 +168,7 @@
168
168
  color:var(--sys-red-on-accent, #fffbf9);
169
169
  opacity:var(--opacity-a080, 0.8);
170
170
  }
171
- .link[data-appearance=red][data-text-mode=on-accent]:focus-visible{
171
+ .link[data-appearance=red][data-text-mode=on-accent]:focus, .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, );
@@ -195,7 +195,7 @@
195
195
  .link[data-appearance=orange][data-text-mode=accent]:hover{
196
196
  color:var(--sys-orange-text-main, #884c23);
197
197
  }
198
- .link[data-appearance=orange][data-text-mode=accent]:focus-visible{
198
+ .link[data-appearance=orange][data-text-mode=accent]:focus, .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, );
@@ -209,7 +209,7 @@
209
209
  color:var(--sys-orange-on-accent, #fffcf4);
210
210
  opacity:var(--opacity-a080, 0.8);
211
211
  }
212
- .link[data-appearance=orange][data-text-mode=on-accent]:focus-visible{
212
+ .link[data-appearance=orange][data-text-mode=on-accent]:focus, .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, );
@@ -236,7 +236,7 @@
236
236
  .link[data-appearance=blue][data-text-mode=accent]:hover{
237
237
  color:var(--sys-blue-text-main, #2b537e);
238
238
  }
239
- .link[data-appearance=blue][data-text-mode=accent]:focus-visible{
239
+ .link[data-appearance=blue][data-text-mode=accent]:focus, .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, );
@@ -250,7 +250,7 @@
250
250
  color:var(--sys-blue-on-accent, #fdfeff);
251
251
  opacity:var(--opacity-a080, 0.8);
252
252
  }
253
- .link[data-appearance=blue][data-text-mode=on-accent]:focus-visible{
253
+ .link[data-appearance=blue][data-text-mode=on-accent]:focus, .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, );
@@ -277,7 +277,7 @@
277
277
  .link[data-appearance=violet][data-text-mode=accent]:hover{
278
278
  color:var(--sys-violet-text-main, #59446a);
279
279
  }
280
- .link[data-appearance=violet][data-text-mode=accent]:focus-visible{
280
+ .link[data-appearance=violet][data-text-mode=accent]:focus, .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, );
@@ -291,7 +291,7 @@
291
291
  color:var(--sys-violet-on-accent, #fdfdfd);
292
292
  opacity:var(--opacity-a080, 0.8);
293
293
  }
294
- .link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
294
+ .link[data-appearance=violet][data-text-mode=on-accent]:focus, .link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
295
295
  outline-width:var(--border-state-focus-s-border-width, 2px);
296
296
  outline-style:var(--border-state-focus-s-border-style, solid);
297
297
  outline-color:var(--border-state-focus-s-border-color, );
@@ -318,7 +318,7 @@
318
318
  .link[data-appearance=pink][data-text-mode=accent]:hover{
319
319
  color:var(--sys-pink-text-main, #754158);
320
320
  }
321
- .link[data-appearance=pink][data-text-mode=accent]:focus-visible{
321
+ .link[data-appearance=pink][data-text-mode=accent]:focus, .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, );
@@ -332,7 +332,7 @@
332
332
  color:var(--sys-pink-on-accent, #fdfcfc);
333
333
  opacity:var(--opacity-a080, 0.8);
334
334
  }
335
- .link[data-appearance=pink][data-text-mode=on-accent]:focus-visible{
335
+ .link[data-appearance=pink][data-text-mode=on-accent]:focus, .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, );
@@ -359,7 +359,7 @@
359
359
  .link[data-appearance=yellow][data-text-mode=accent]:hover{
360
360
  color:var(--sys-yellow-text-main, #815f19);
361
361
  }
362
- .link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
362
+ .link[data-appearance=yellow][data-text-mode=accent]:focus, .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, );
@@ -373,7 +373,7 @@
373
373
  color:var(--sys-yellow-on-accent, #583f1f);
374
374
  opacity:var(--opacity-a080, 0.8);
375
375
  }
376
- .link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
376
+ .link[data-appearance=yellow][data-text-mode=on-accent]:focus, .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, );
@@ -400,7 +400,7 @@
400
400
  .link[data-appearance=green][data-text-mode=accent]:hover{
401
401
  color:var(--sys-green-text-main, #3d6035);
402
402
  }
403
- .link[data-appearance=green][data-text-mode=accent]:focus-visible{
403
+ .link[data-appearance=green][data-text-mode=accent]:focus, .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, );
@@ -414,7 +414,7 @@
414
414
  color:var(--sys-green-on-accent, #fcfefa);
415
415
  opacity:var(--opacity-a080, 0.8);
416
416
  }
417
- .link[data-appearance=green][data-text-mode=on-accent]:focus-visible{
417
+ .link[data-appearance=green][data-text-mode=on-accent]:focus, .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, );
package/dist/esm/components/styles.module.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .link[data-appearance=invert-neutral][data-text-mode=accent]:hover{
32
32
  color:var(--sys-invert-neutral-text-main, #e6e8ef);
33
33
  }
34
- .link[data-appearance=invert-neutral][data-text-mode=accent]:focus-visible{
34
+ .link[data-appearance=invert-neutral][data-text-mode=accent]:focus, .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, );
@@ -45,7 +45,7 @@
45
45
  color:var(--sys-invert-neutral-on-accent, #393a46);
46
46
  opacity:var(--opacity-a080, 0.8);
47
47
  }
48
- .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus-visible{
48
+ .link[data-appearance=invert-neutral][data-text-mode=on-accent]:focus, .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, );
@@ -72,7 +72,7 @@
72
72
  .link[data-appearance=neutral][data-text-mode=accent]:hover{
73
73
  color:var(--sys-neutral-text-main, #41424e);
74
74
  }
75
- .link[data-appearance=neutral][data-text-mode=accent]:focus-visible{
75
+ .link[data-appearance=neutral][data-text-mode=accent]:focus, .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, );
@@ -86,7 +86,7 @@
86
86
  color:var(--sys-neutral-on-accent, #ffffff);
87
87
  opacity:var(--opacity-a080, 0.8);
88
88
  }
89
- .link[data-appearance=neutral][data-text-mode=on-accent]:focus-visible{
89
+ .link[data-appearance=neutral][data-text-mode=on-accent]:focus, .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, );
@@ -113,7 +113,7 @@
113
113
  .link[data-appearance=primary][data-text-mode=accent]:hover{
114
114
  color:var(--sys-primary-text-main, #382a62);
115
115
  }
116
- .link[data-appearance=primary][data-text-mode=accent]:focus-visible{
116
+ .link[data-appearance=primary][data-text-mode=accent]:focus, .link[data-appearance=primary][data-text-mode=accent]:focus-visible{
117
117
  outline-width:var(--border-state-focus-s-border-width, 2px);
118
118
  outline-style:var(--border-state-focus-s-border-style, solid);
119
119
  outline-color:var(--border-state-focus-s-border-color, );
@@ -127,7 +127,7 @@
127
127
  color:var(--sys-primary-on-accent, #fdfbff);
128
128
  opacity:var(--opacity-a080, 0.8);
129
129
  }
130
- .link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
130
+ .link[data-appearance=primary][data-text-mode=on-accent]:focus, .link[data-appearance=primary][data-text-mode=on-accent]:focus-visible{
131
131
  outline-width:var(--border-state-focus-s-border-width, 2px);
132
132
  outline-style:var(--border-state-focus-s-border-style, solid);
133
133
  outline-color:var(--border-state-focus-s-border-color, );
@@ -154,7 +154,7 @@
154
154
  .link[data-appearance=red][data-text-mode=accent]:hover{
155
155
  color:var(--sys-red-text-main, #7a2d2d);
156
156
  }
157
- .link[data-appearance=red][data-text-mode=accent]:focus-visible{
157
+ .link[data-appearance=red][data-text-mode=accent]:focus, .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, );
@@ -168,7 +168,7 @@
168
168
  color:var(--sys-red-on-accent, #fffbf9);
169
169
  opacity:var(--opacity-a080, 0.8);
170
170
  }
171
- .link[data-appearance=red][data-text-mode=on-accent]:focus-visible{
171
+ .link[data-appearance=red][data-text-mode=on-accent]:focus, .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, );
@@ -195,7 +195,7 @@
195
195
  .link[data-appearance=orange][data-text-mode=accent]:hover{
196
196
  color:var(--sys-orange-text-main, #884c23);
197
197
  }
198
- .link[data-appearance=orange][data-text-mode=accent]:focus-visible{
198
+ .link[data-appearance=orange][data-text-mode=accent]:focus, .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, );
@@ -209,7 +209,7 @@
209
209
  color:var(--sys-orange-on-accent, #fffcf4);
210
210
  opacity:var(--opacity-a080, 0.8);
211
211
  }
212
- .link[data-appearance=orange][data-text-mode=on-accent]:focus-visible{
212
+ .link[data-appearance=orange][data-text-mode=on-accent]:focus, .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, );
@@ -236,7 +236,7 @@
236
236
  .link[data-appearance=blue][data-text-mode=accent]:hover{
237
237
  color:var(--sys-blue-text-main, #2b537e);
238
238
  }
239
- .link[data-appearance=blue][data-text-mode=accent]:focus-visible{
239
+ .link[data-appearance=blue][data-text-mode=accent]:focus, .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, );
@@ -250,7 +250,7 @@
250
250
  color:var(--sys-blue-on-accent, #fdfeff);
251
251
  opacity:var(--opacity-a080, 0.8);
252
252
  }
253
- .link[data-appearance=blue][data-text-mode=on-accent]:focus-visible{
253
+ .link[data-appearance=blue][data-text-mode=on-accent]:focus, .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, );
@@ -277,7 +277,7 @@
277
277
  .link[data-appearance=violet][data-text-mode=accent]:hover{
278
278
  color:var(--sys-violet-text-main, #59446a);
279
279
  }
280
- .link[data-appearance=violet][data-text-mode=accent]:focus-visible{
280
+ .link[data-appearance=violet][data-text-mode=accent]:focus, .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, );
@@ -291,7 +291,7 @@
291
291
  color:var(--sys-violet-on-accent, #fdfdfd);
292
292
  opacity:var(--opacity-a080, 0.8);
293
293
  }
294
- .link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
294
+ .link[data-appearance=violet][data-text-mode=on-accent]:focus, .link[data-appearance=violet][data-text-mode=on-accent]:focus-visible{
295
295
  outline-width:var(--border-state-focus-s-border-width, 2px);
296
296
  outline-style:var(--border-state-focus-s-border-style, solid);
297
297
  outline-color:var(--border-state-focus-s-border-color, );
@@ -318,7 +318,7 @@
318
318
  .link[data-appearance=pink][data-text-mode=accent]:hover{
319
319
  color:var(--sys-pink-text-main, #754158);
320
320
  }
321
- .link[data-appearance=pink][data-text-mode=accent]:focus-visible{
321
+ .link[data-appearance=pink][data-text-mode=accent]:focus, .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, );
@@ -332,7 +332,7 @@
332
332
  color:var(--sys-pink-on-accent, #fdfcfc);
333
333
  opacity:var(--opacity-a080, 0.8);
334
334
  }
335
- .link[data-appearance=pink][data-text-mode=on-accent]:focus-visible{
335
+ .link[data-appearance=pink][data-text-mode=on-accent]:focus, .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, );
@@ -359,7 +359,7 @@
359
359
  .link[data-appearance=yellow][data-text-mode=accent]:hover{
360
360
  color:var(--sys-yellow-text-main, #815f19);
361
361
  }
362
- .link[data-appearance=yellow][data-text-mode=accent]:focus-visible{
362
+ .link[data-appearance=yellow][data-text-mode=accent]:focus, .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, );
@@ -373,7 +373,7 @@
373
373
  color:var(--sys-yellow-on-accent, #583f1f);
374
374
  opacity:var(--opacity-a080, 0.8);
375
375
  }
376
- .link[data-appearance=yellow][data-text-mode=on-accent]:focus-visible{
376
+ .link[data-appearance=yellow][data-text-mode=on-accent]:focus, .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, );
@@ -400,7 +400,7 @@
400
400
  .link[data-appearance=green][data-text-mode=accent]:hover{
401
401
  color:var(--sys-green-text-main, #3d6035);
402
402
  }
403
- .link[data-appearance=green][data-text-mode=accent]:focus-visible{
403
+ .link[data-appearance=green][data-text-mode=accent]:focus, .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, );
@@ -414,7 +414,7 @@
414
414
  color:var(--sys-green-on-accent, #fcfefa);
415
415
  opacity:var(--opacity-a080, 0.8);
416
416
  }
417
- .link[data-appearance=green][data-text-mode=on-accent]:focus-visible{
417
+ .link[data-appearance=green][data-text-mode=on-accent]:focus, .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, );
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Link",
7
- "version": "0.17.0",
7
+ "version": "0.17.1-preview-ef227a87.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,9 +36,9 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/truncate-string": "0.6.18",
39
+ "@snack-uikit/truncate-string": "0.6.19-preview-ef227a87.0",
40
40
  "@snack-uikit/utils": "3.8.1",
41
41
  "classnames": "2.5.1"
42
42
  },
43
- "gitHead": "cd2f258c295746a8d2d8002bfb2239ed71bd21a3"
43
+ "gitHead": "6364766107f054b3b701396967b92eef49fe9b0f"
44
44
  }
package/src/components/styles.module.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  $sizes: 's', 'm', 'l';
5
5
  $purposes: 'display', 'headline', 'title', 'label', 'body';
6
6
  $text-modes: 'default', 'accent', 'on-accent';
7
- $appearances: 'invert-neutral','neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
7
+ $appearances: 'invert-neutral', 'neutral', 'primary', 'red', 'orange', 'blue', 'violet', 'pink', 'yellow', 'green';
8
8
  $icon-sizes: (
9
9
  's': styles-tokens-element.$icon-xs,
10
10
  'm': styles-tokens-element.$icon-s,
@@ -51,6 +51,7 @@ $icon-sizes: (
51
51
  color: styles-tokens-link.simple-var(styles-tokens-link.$theme-variables, 'sys', $appearance, 'text-main');
52
52
  }
53
53
 
54
+ &:focus,
54
55
  &:focus-visible {
55
56
  @include styles-tokens-link.outline-var(styles-tokens-element.$container-focused-s);
56
57
 
@@ -74,6 +75,7 @@ $icon-sizes: (
74
75
  opacity: styles-tokens-link.$opacity-a080;
75
76
  }
76
77
 
78
+ &:focus,
77
79
  &:focus-visible {
78
80
  @include styles-tokens-link.outline-var(styles-tokens-element.$container-focused-s);
79
81
 
@@ -108,8 +110,15 @@ $icon-sizes: (
108
110
  height: auto;
109
111
 
110
112
  svg {
111
- width: styles-tokens-link.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
112
- height: styles-tokens-link.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
113
+ width: styles-tokens-link.simple-var(
114
+ $icon-sizes,
115
+ $size
116
+ ) !important; /* stylelint-disable-line declaration-no-important */
117
+
118
+ height: styles-tokens-link.simple-var(
119
+ $icon-sizes,
120
+ $size
121
+ ) !important; /* stylelint-disable-line declaration-no-important */
113
122
  }
114
123
  }
115
124
  }
@@ -117,4 +126,4 @@ $icon-sizes: (
117
126
 
118
127
  .icon {
119
128
  flex-shrink: 0;
120
- }
129
+ }