From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src/scopes/_links.scss | 143 ------------------------------------------------- 1 file changed, 143 deletions(-) delete mode 100644 src/scopes/_links.scss (limited to 'src/scopes/_links.scss') diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss deleted file mode 100644 index d47c406..0000000 --- a/src/scopes/_links.scss +++ /dev/null @@ -1,143 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -$static-themes: 'black' 'white' !default; - -@include iro.props-namespace('links') { - @include iro.props-store(( - --dims: ( - --rounding: fn.global-dim(--rounding), - --underline: fn.global-dim(--border --thin), - - --hover: ( - --underline: fn.global-dim(--border --medium), - ), - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --border), - ), - ), - --colors: ( - --underline: fn.global-color(--text-mute-more), - - --colored: ( - --text: fn.global-color(--accent --1100), - --underline: fn.global-color(--accent --600), - - --hover: ( - --text: fn.global-color(--accent --1300), - ), - - --visited: ( - --text: fn.global-color(--purple --1100), - --underline: fn.global-color(--purple --600), - - --hover: ( - --text: fn.global-color(--purple --1300), - ), - ), - ), - - --key-focus: ( - --text: fn.global-color(--focus --text), - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - )); - - @each $theme in $static-themes { - @include iro.props-store(( - --colors: ( - --static-#{$theme}: ( - --text: fn.global-color(--#{$theme}-transparent --800), - --underline: fn.global-color(--#{$theme}-transparent --500), - - --hover: ( - --text: fn.global-color(--#{$theme}-transparent --900), - ), - - --key-focus: ( - --text: fn.global-color(--#{$theme}-transparent --900), - --border: fn.global-color(--#{$theme}-transparent --900), - --outline: fn.global-color(--#{$theme}-transparent --300), - ), - ) - ) - )); - } - - @include iro.bem-scope(iro.props-namespace()) { - :link, - :visited { - border-radius: fn.dim(--rounding); - color: currentColor; - text-decoration: underline; - text-decoration-color: fn.color(--underline); - text-decoration-thickness: fn.dim(--underline); - box-decoration-break: clone; - - &:hover { - text-decoration: underline; - text-decoration-thickness: fn.dim(--hover --underline); - text-decoration-skip-ink: none; - } - - &:focus-visible { - outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); - color: fn.color(--key-focus --text); - text-decoration: none; - } - } - - @include iro.bem-modifier('invisible') { - :link, - :visited { - text-decoration: none; - } - } - - @include iro.bem-modifier('colored') { - :link { - color: fn.color(--colored --text); - text-decoration-color: fn.color(--colored --underline); - - &:hover { - color: fn.color(--colored --hover --text); - } - } - - :visited { - color: fn.color(--colored --visited --text); - text-decoration-color: fn.color(--colored --visited --underline); - - &:hover { - color: fn.color(--colored --visited --hover --text); - } - } - } - - @each $theme in $static-themes { - @include iro.bem-modifier(static-#{$theme}) { - :link, - :visited { - color: fn.color(--static-#{$theme} --text); - text-decoration-color: fn.color(--static-#{$theme} --underline); - - &:hover { - color: fn.color(--static-#{$theme} --hover --text); - } - - &:focus-visible { - outline-color: fn.color(--static-#{$theme} --key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline); - color: fn.color(--static-#{$theme} --key-focus --text); - } - } - } - } - } -} -- cgit v1.3.1