diff options
Diffstat (limited to 'src/scopes/_links.scss')
-rw-r--r-- | src/scopes/_links.scss | 27 |
1 files changed, 14 insertions, 13 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index d0c47ef..a9de8b5 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
@@ -4,10 +4,11 @@ | |||
4 | @include iro.props-namespace('links') { | 4 | @include iro.props-namespace('links') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | 6 | --dims: ( |
7 | --rounding: fn.global-dim(--rounding), | ||
7 | --underline: fn.global-dim(--border --thin), | 8 | --underline: fn.global-dim(--border --thin), |
8 | 9 | ||
9 | --hover: ( | 10 | --hover: ( |
10 | --underline: fn.global-dim(--border --medium), | 11 | --underline: fn.global-dim(--border --medium), |
11 | ) | 12 | ) |
12 | ), | 13 | ), |
13 | --colors: ( | 14 | --colors: ( |
@@ -15,7 +16,7 @@ | |||
15 | 16 | ||
16 | --idle: ( | 17 | --idle: ( |
17 | --text: fn.global-color(--accent --1000), | 18 | --text: fn.global-color(--accent --1000), |
18 | --underline: fn.global-color(--accent --1000), | 19 | --underline: fn.global-color(--accent --600), |
19 | 20 | ||
20 | --hover: ( | 21 | --hover: ( |
21 | --text: fn.global-color(--accent --1200), | 22 | --text: fn.global-color(--accent --1200), |
@@ -24,16 +25,16 @@ | |||
24 | 25 | ||
25 | --visited: ( | 26 | --visited: ( |
26 | --text: fn.global-color(--purple --1000), | 27 | --text: fn.global-color(--purple --1000), |
27 | --underline: fn.global-color(--purple --1000), | 28 | --underline: fn.global-color(--purple --600), |
28 | 29 | ||
29 | --hover: ( | 30 | --hover: ( |
30 | --text: fn.global-color(--purple --1200), | 31 | --text: fn.global-color(--purple --1200), |
31 | ), | 32 | ), |
32 | ), | 33 | ), |
33 | 34 | ||
34 | --focus: ( | 35 | --key-focus: ( |
35 | --bg: fn.global-color(--yellow-static --400), | 36 | --bg: fn.global-color(--yellow-static --400), |
36 | --text: #000, | 37 | --text: fn.global-color(--yellow-static --400-text), |
37 | ) | 38 | ) |
38 | ) | 39 | ) |
39 | )); | 40 | )); |
@@ -41,7 +42,7 @@ | |||
41 | @include iro.bem-scope(iro.props-namespace()) { | 42 | @include iro.bem-scope(iro.props-namespace()) { |
42 | :link, | 43 | :link, |
43 | :visited { | 44 | :visited { |
44 | border-radius: .5px; | 45 | border-radius: fn.dim(--rounding); |
45 | color: currentColor; | 46 | color: currentColor; |
46 | text-decoration: underline; | 47 | text-decoration: underline; |
47 | text-decoration-color: fn.color(--underline); | 48 | text-decoration-color: fn.color(--underline); |
@@ -53,13 +54,13 @@ | |||
53 | text-decoration-skip-ink: none; | 54 | text-decoration-skip-ink: none; |
54 | } | 55 | } |
55 | 56 | ||
56 | @include iro.bem-at-theme('keyboard') { | 57 | &:focus-visible { |
57 | &:focus { | 58 | background-color: fn.color(--key-focus --bg); |
58 | background-color: fn.color(--focus --bg); | 59 | box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg); |
59 | color: fn.color(--focus --text); | 60 | color: fn.color(--key-focus --text); |
60 | text-decoration: none; | 61 | text-decoration: underline; |
61 | border-block-end: fn.dim(--hover --underline) solid currentColor; | 62 | text-decoration-thickness: fn.dim(--hover --underline); |
62 | } | 63 | text-decoration-skip-ink: none; |
63 | } | 64 | } |
64 | } | 65 | } |
65 | 66 | ||