diff options
| author | Volpeon <git@volpeon.ink> | 2026-07-22 12:27:09 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-07-22 12:27:09 +0200 |
| commit | cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch) | |
| tree | d16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/scopes/_links.vars.scss | |
| parent | Update _index.scss (diff) | |
| download | iro-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.scss | 129 |
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 | } |
