diff options
Diffstat (limited to 'src/scopes/_links.scss')
-rw-r--r-- | src/scopes/_links.scss | 75 |
1 files changed, 51 insertions, 24 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss index 2e68952..115b199 100644 --- a/src/scopes/_links.scss +++ b/src/scopes/_links.scss | |||
@@ -3,42 +3,61 @@ | |||
3 | 3 | ||
4 | @include iro.props-namespace('links') { | 4 | @include iro.props-namespace('links') { |
5 | @include iro.props-store(( | 5 | @include iro.props-store(( |
6 | --dims: ( | ||
7 | --underline: fn.global-dim(--border --thin), | ||
8 | |||
9 | --hover: ( | ||
10 | --underline: fn.global-dim(--border --medium), | ||
11 | ) | ||
12 | ), | ||
6 | --colors: ( | 13 | --colors: ( |
7 | --underline: fn.global-color(--fg-hi2), | 14 | --underline: fn.global-color(--text-mute-more), |
8 | 15 | ||
9 | --idle: fn.global-color(--accent --link-idle --quiet --fg), | 16 | --idle: ( |
10 | --visited: fn.global-color(--accent --link-visited --quiet --fg), | 17 | --text: fn.global-color(--accent --1000), |
11 | --idle-underline: fn.global-color(--accent --link-idle --quiet --fg-hi), | 18 | --underline: fn.global-color(--accent --700), |
12 | --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi), | ||
13 | 19 | ||
14 | --key-focus: ( | 20 | --hover: ( |
15 | --border: fn.global-color(--focus --fill), | 21 | --text: fn.global-color(--accent --1200), |
16 | --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), | 22 | ), |
17 | ), | 23 | ), |
18 | ) | ||
19 | ), 'colors'); | ||
20 | 24 | ||
21 | @include iro.props-store(( | 25 | --visited: ( |
22 | --colors: ( | 26 | --text: fn.global-color(--purple --1000), |
23 | --underline: fn.global-color(--fg-hi), | 27 | --underline: fn.global-color(--purple --700), |
28 | |||
29 | --hover: ( | ||
30 | --text: fn.global-color(--purple --1200), | ||
31 | ), | ||
32 | ), | ||
33 | |||
34 | --focus: ( | ||
35 | --bg: fn.global-color(--yellow-static --400), | ||
36 | --text: #000, | ||
37 | ) | ||
24 | ) | 38 | ) |
25 | ), 'colors-dark'); | 39 | )); |
26 | 40 | ||
27 | @include iro.bem-scope(iro.props-namespace()) { | 41 | @include iro.bem-scope(iro.props-namespace()) { |
28 | :link, | 42 | :link, |
29 | :visited { | 43 | :visited { |
30 | border-radius: .5px; | 44 | border-radius: .5px; |
31 | color: currentColor; | 45 | color: currentColor; |
32 | text-decoration: underline; | 46 | text-decoration: underline; |
33 | text-decoration-color: fn.color(--underline); | 47 | text-decoration-color: fn.color(--underline); |
48 | text-decoration-thickness: fn.dim(--underline); | ||
34 | 49 | ||
35 | &:hover { | 50 | &:hover { |
36 | text-decoration: underline; | 51 | text-decoration: underline; |
52 | text-decoration-thickness: fn.dim(--hover --underline); | ||
37 | } | 53 | } |
38 | 54 | ||
39 | @include iro.bem-at-theme('keyboard') { | 55 | @include iro.bem-at-theme('keyboard') { |
40 | &:focus { | 56 | &:focus { |
41 | box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); | 57 | background-color: fn.color(--focus --bg); |
58 | color: fn.color(--focus --text); | ||
59 | text-decoration: none; | ||
60 | border-block-end: fn.dim(--hover --underline) solid currentColor; | ||
42 | } | 61 | } |
43 | } | 62 | } |
44 | } | 63 | } |
@@ -52,13 +71,21 @@ | |||
52 | 71 | ||
53 | @include iro.bem-modifier('colored') { | 72 | @include iro.bem-modifier('colored') { |
54 | :link { | 73 | :link { |
55 | color: fn.color(--idle); | 74 | color: fn.color(--idle --text); |
56 | text-decoration-color: fn.color(--idle-underline); | 75 | text-decoration-color: fn.color(--idle --underline); |
76 | |||
77 | &:hover { | ||
78 | color: fn.color(--idle --hover --text); | ||
79 | } | ||
57 | } | 80 | } |
58 | 81 | ||
59 | :visited { | 82 | :visited { |
60 | color: fn.color(--visited); | 83 | color: fn.color(--visited --text); |
61 | text-decoration-color: fn.color(--visited-underline); | 84 | text-decoration-color: fn.color(--visited --underline); |
85 | |||
86 | &:hover { | ||
87 | color: fn.color(--visited --hover --text); | ||
88 | } | ||
62 | } | 89 | } |
63 | } | 90 | } |
64 | } | 91 | } |