summaryrefslogtreecommitdiffstats
path: root/src/scopes/_links.vars.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/scopes/_links.vars.scss')
-rw-r--r--src/scopes/_links.vars.scss129
1 files changed, 36 insertions, 93 deletions
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index c06789b..cd80e4c 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,106 +1,49 @@
1@use "sass:map"; 1@use 'sass:map';
2@use "sass:string"; 2@use 'sass:string';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../core.vars" as core; 4@use '../core.vars' as core;
5 5
6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default; 6$rounding: props.def(--s-links--rounding, props.get(core.$rounding)) !default;
7$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default; 7$rounding-sm: props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !default;
8$underline-width: props.def( 8$underline-width: props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
9 --s-links--underline-width, 9$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
10 props.get(core.$border-width--thin)
11) !default;
12$hover--underline-width: props.def(
13 --s-links--hover--underline-width,
14 props.get(core.$border-width--medium)
15) !default;
16 10
17$key-focus--border-width: props.def( 11$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
18 --s-links--key-focus--border-width, 12$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
19 props.get(core.$key-focus--border-width) 13$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
20) !default;
21$key-focus--border-offset: props.def(
22 --s-links--key-focus--border-offset,
23 props.get(core.$key-focus--border-offset)
24) !default;
25$key-focus--outline-width: props.def(
26 --s-links--key-focus--outline-width,
27 props.get(core.$key-focus--outline-width)
28) !default;
29 14
30$underline-color: props.def( 15$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
31 --s-links--underline-color,
32 props.get(core.$theme, --text-mute-more),
33 "color"
34) !default;
35 16
36$colored--text-color: props.def( 17$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
37 --s-links--colored--text-color, 18$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
38 props.get(core.$theme, --accent, --1100), 19$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
39 "color"
40) !default;
41$colored--underline-color: props.def(
42 --s-links--colored--underline-color,
43 props.get(core.$theme, --accent, --600),
44 "color"
45) !default;
46$colored--hover--text-color: props.def(
47 --s-links--colored--hover--text-color,
48 props.get(core.$theme, --accent, --1300),
49 "color"
50) !default;
51 20
52$colored--visited--text-color: props.def( 21$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
53 --s-links--colored--visited--text-color, 22$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
54 props.get(core.$theme, --purple, --1100), 23$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
55 "color"
56) !default;
57$colored--visited--underline-color: props.def(
58 --s-links--colored--visited--underline-color,
59 props.get(core.$theme, --purple, --600),
60 "color"
61) !default;
62$colored--visited--hover--text-color: props.def(
63 --s-links--colored--visited--hover--text-color,
64 props.get(core.$theme, --purple, --1300),
65 "color"
66) !default;
67 24
68$key-focus--text-color: props.def( 25$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
69 --s-links--key-focus--text-color, 26$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
70 props.get(core.$theme, --focus, --text), 27$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
71 "color"
72) !default;
73$key-focus--border-color: props.def(
74 --s-links--key-focus--border-color,
75 props.get(core.$theme, --focus, --border),
76 "color"
77) !default;
78$key-focus--outline-color: props.def(
79 --s-links--key-focus--outline-color,
80 props.get(core.$theme, --focus, --outline),
81 "color"
82) !default;
83 28
84$static-themes: props.def(--s-links, (), "color"); 29$static-themes: props.def(--s-links, (), 'color');
85@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
86 $link-theme: --static-#{string.slice($theme, 3)}; 31 $link-theme: --static-#{string.slice($theme, 3)};
87 32
88 $static-themes: props.merge( 33 $static-themes: props.merge($static-themes, (
89 $static-themes, 34 $link-theme: (
90 ( 35 --text-color: currentColor,
91 $link-theme: ( 36 --underline-color: props.get(core.$transparent-colors, $theme, --500),
92 --text-color: currentColor,
93 --underline-color: props.get(core.$transparent-colors, $theme, --500),
94 --hover: (
95 --text-color: props.get(core.$transparent-colors, $theme, --900),
96 ),
97 37
98 --key-focus: ( 38 --hover: (
99 --text-color: props.get(core.$transparent-colors, $theme, --900), 39 --text-color: props.get(core.$transparent-colors, $theme, --900),
100 --border-color: props.get(core.$transparent-colors, $theme, --900), 40 ),
101 --outline-color: props.get(core.$transparent-colors, $theme, --300), 41
102 ), 42 --key-focus: (
103 ), 43 --text-color: props.get(core.$transparent-colors, $theme, --900),
44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ),
104 ) 47 )
105 ); 48 ));
106} 49}