Revamped variable management

1 files changed, 143 insertions, 0 deletions

diff --git a/src_old/scopes/_links.scss b/src_old/scopes/_links.scss
new file mode 100644
index 0000000..d47c406
--- /dev/null
+++ b/src_old/scopes/_links.scss
@@ -0,0 +1,143 @@
+@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);
+                    }
+                }
+            }
+        }
+    }
+}