summaryrefslogtreecommitdiffstats
path: root/src/scopes/_links.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/scopes/_links.vars.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/scopes/_links.vars.scss')
-rw-r--r--src/scopes/_links.vars.scss129
1 files changed, 93 insertions, 36 deletions
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index cd80e4c..c06789b 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,49 +1,106 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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(--s-links--underline-width, props.get(core.$border-width--thin)) !default; 8$underline-width: props.def(
9$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default; 9 --s-links--underline-width,
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;
10 16
11$key-focus--border-width: props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 17$key-focus--border-width: props.def(
12$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 18 --s-links--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; 19 props.get(core.$key-focus--border-width)
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;
14 29
15$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default; 30$underline-color: props.def(
31 --s-links--underline-color,
32 props.get(core.$theme, --text-mute-more),
33 "color"
34) !default;
16 35
17$colored--text-color: props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default; 36$colored--text-color: props.def(
18$colored--underline-color: props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default; 37 --s-links--colored--text-color,
19$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default; 38 props.get(core.$theme, --accent, --1100),
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;
20 51
21$colored--visited--text-color: props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default; 52$colored--visited--text-color: props.def(
22$colored--visited--underline-color: props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default; 53 --s-links--colored--visited--text-color,
23$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default; 54 props.get(core.$theme, --purple, --1100),
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;
24 67
25$key-focus--text-color: props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default; 68$key-focus--text-color: props.def(
26$key-focus--border-color: props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 69 --s-links--key-focus--text-color,
27$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 70 props.get(core.$theme, --focus, --text),
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;
28 83
29$static-themes: props.def(--s-links, (), 'color'); 84$static-themes: props.def(--s-links, (), "color");
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 85@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $link-theme: --static-#{string.slice($theme, 3)}; 86 $link-theme: --static-#{string.slice($theme, 3)};
32 87
33 $static-themes: props.merge($static-themes, ( 88 $static-themes: props.merge(
34 $link-theme: ( 89 $static-themes,
35 --text-color: currentColor, 90 (
36 --underline-color: props.get(core.$transparent-colors, $theme, --500), 91 $link-theme: (
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 ),
37 97
38 --hover: ( 98 --key-focus: (
39 --text-color: props.get(core.$transparent-colors, $theme, --900), 99 --text-color: props.get(core.$transparent-colors, $theme, --900),
40 ), 100 --border-color: props.get(core.$transparent-colors, $theme, --900),
41 101 --outline-color: props.get(core.$transparent-colors, $theme, --300),
42 --key-focus: ( 102 ),
43 --text-color: props.get(core.$transparent-colors, $theme, --900), 103 ),
44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ),
47 ) 104 )
48 )); 105 );
49} 106}