summaryrefslogtreecommitdiffstats
path: root/src/scopes
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes')
-rw-r--r--src/scopes/_links.scss75
1 files changed, 59 insertions, 16 deletions
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 552b02a..790d5c6 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,6 +1,8 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4$static-themes: 'black' 'white' !default;
5
4@include iro.props-namespace('links') { 6@include iro.props-namespace('links') {
5 @include iro.props-store(( 7 @include iro.props-store((
6 --dims: ( 8 --dims: (
@@ -18,23 +20,23 @@
18 ), 20 ),
19 ), 21 ),
20 --colors: ( 22 --colors: (
21 --underline: fn.global-color(--text-mute-more), 23 --underline: fn.global-color(--text-mute-more),
22 24
23 --idle: ( 25 --colored: (
24 --text: fn.global-color(--accent --1100), 26 --text: fn.global-color(--accent --1100),
25 --underline: fn.global-color(--accent --600), 27 --underline: fn.global-color(--accent --600),
26 28
27 --hover: ( 29 --hover: (
28 --text: fn.global-color(--accent --1300), 30 --text: fn.global-color(--accent --1300),
29 ), 31 ),
30 ), 32
31 33 --visited: (
32 --visited: ( 34 --text: fn.global-color(--purple --1100),
33 --text: fn.global-color(--purple --1100), 35 --underline: fn.global-color(--purple --600),
34 --underline: fn.global-color(--purple --600), 36
35 37 --hover: (
36 --hover: ( 38 --text: fn.global-color(--purple --1300),
37 --text: fn.global-color(--purple --1300), 39 ),
38 ), 40 ),
39 ), 41 ),
40 42
@@ -46,6 +48,27 @@
46 ), 48 ),
47 )); 49 ));
48 50
51 @each $theme in $static-themes {
52 @include iro.props-store((
53 --colors: (
54 --static-#{$theme}: (
55 --text: fn.global-color(--#{$theme}-transparent --800),
56 --underline: fn.global-color(--#{$theme}-transparent --500),
57
58 --hover: (
59 --text: fn.global-color(--#{$theme}-transparent --900),
60 ),
61
62 --key-focus: (
63 --text: fn.global-color(--#{$theme}-transparent --900),
64 --border: fn.global-color(--#{$theme}-transparent --900),
65 --outline: fn.global-color(--#{$theme}-transparent --300),
66 ),
67 )
68 )
69 ));
70 }
71
49 @include iro.bem-scope(iro.props-namespace()) { 72 @include iro.bem-scope(iro.props-namespace()) {
50 :link, 73 :link,
51 :visited { 74 :visited {
@@ -81,20 +104,40 @@
81 104
82 @include iro.bem-modifier('colored') { 105 @include iro.bem-modifier('colored') {
83 :link { 106 :link {
84 color: fn.color(--idle --text); 107 color: fn.color(--colored --text);
85 text-decoration-color: fn.color(--idle --underline); 108 text-decoration-color: fn.color(--colored --underline);
86 109
87 &:hover { 110 &:hover {
88 color: fn.color(--idle --hover --text); 111 color: fn.color(--colored --hover --text);
89 } 112 }
90 } 113 }
91 114
92 :visited { 115 :visited {
93 color: fn.color(--visited --text); 116 color: fn.color(--colored --visited --text);
94 text-decoration-color: fn.color(--visited --underline); 117 text-decoration-color: fn.color(--colored --visited --underline);
95 118
96 &:hover { 119 &:hover {
97 color: fn.color(--visited --hover --text); 120 color: fn.color(--colored --visited --hover --text);
121 }
122 }
123 }
124
125 @each $theme in $static-themes {
126 @include iro.bem-modifier(static-#{$theme}) {
127 :link,
128 :visited {
129 color: fn.color(--static-#{$theme} --text);
130 text-decoration-color: fn.color(--static-#{$theme} --underline);
131
132 &:hover {
133 color: fn.color(--static-#{$theme} --hover --text);
134 }
135
136 &:focus-visible {
137 outline-color: fn.color(--static-#{$theme} --key-focus --border);
138 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
139 color: fn.color(--static-#{$theme} --key-focus --text);
140 }
98 } 141 }
99 } 142 }
100 } 143 }