Update

1 files changed, 59 insertions, 16 deletions

diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 552b02a..790d5c6 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,6 +1,8 @@
 @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: (
@@ -18,23 +20,23 @@
             ),
         ),
         --colors: (
-            --underline:         fn.global-color(--text-mute-more),
+            --underline: fn.global-color(--text-mute-more),
 
-            --idle: (
+            --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),
+    
+                --visited: (
+                    --text:          fn.global-color(--purple --1100),
+                    --underline:     fn.global-color(--purple --600),
+    
+                    --hover: (
+                        --text:      fn.global-color(--purple --1300),
+                    ),
                 ),
             ),
 
@@ -46,6 +48,27 @@
         ),
     ));
 
+    @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 {
@@ -81,20 +104,40 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color:                 fn.color(--idle --text);
-                text-decoration-color: fn.color(--idle --underline);
+                color:                 fn.color(--colored --text);
+                text-decoration-color: fn.color(--colored --underline);
 
                 &:hover {
-                    color:             fn.color(--idle --hover --text);
+                    color:             fn.color(--colored --hover --text);
                 }
             }
     
             :visited {
-                color:                 fn.color(--visited --text);
-                text-decoration-color: fn.color(--visited --underline);
+                color:                 fn.color(--colored --visited --text);
+                text-decoration-color: fn.color(--colored --visited --underline);
 
                 &:hover {
-                    color:             fn.color(--visited --hover --text);
+                    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);
+                    }
                 }
             }
         }