Added scope for colored links

5 files changed, 56 insertions, 10 deletions

diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 3f1320a..5aa80c7 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -117,14 +117,17 @@
 
         --gray:   ( --h: 220, --s: 5% ),
         --blue:   fn.color-palette(blend.lch(48% 50 279)),
+        --purple: fn.color-palette(blend.lch(48% 50 308)),
         --red:    fn.color-palette(blend.lch(48% 50 23)),
         --green:  fn.color-palette(blend.lch(63% 50 147)),
         --yellow: fn.color-palette(blend.lch(73% 50 80)),
 
         --accent: (
-            --primary: iro.props-ref('colors', --colors --blue),
-            --error:   iro.props-ref('colors', --colors --red),
-            --success: iro.props-ref('colors', --colors --green),
+            --primary:      iro.props-ref('colors', --colors --blue),
+            --error:        iro.props-ref('colors', --colors --red),
+            --success:      iro.props-ref('colors', --colors --green),
+            --link-idle:    iro.props-ref('colors', --colors --blue),
+            --link-visited: iro.props-ref('colors', --colors --purple),
         ),
 
         --selection: (
@@ -158,15 +161,18 @@
 
 @include iro.props-store((
     --colors: (
-        --blue:   fn.color-palette(blend.lch(58% 60 279), -1),
-        --red:    fn.color-palette(blend.lch(58% 60 23), -1),
-        --green:  fn.color-palette(blend.lch(73% 60 147), -1),
-        --yellow: fn.color-palette(blend.lch(83% 60 80), -1),
+        --blue:   fn.color-palette(blend.lch(58% 50 279), -1),
+        --purple: fn.color-palette(blend.lch(58% 50 308), -1),
+        --red:    fn.color-palette(blend.lch(58% 50 23), -1),
+        --green:  fn.color-palette(blend.lch(73% 50 147), -1),
+        --yellow: fn.color-palette(blend.lch(83% 50 80), -1),
 
         --accent: (
-            --primary: iro.props-ref('colors-dark', --colors --blue),
-            --error:   iro.props-ref('colors-dark', --colors --red),
-            --success: iro.props-ref('colors-dark', --colors --green),
+            --primary:      iro.props-ref('colors-dark', --colors --blue),
+            --error:        iro.props-ref('colors-dark', --colors --red),
+            --success:      iro.props-ref('colors-dark', --colors --green),
+            --link-idle:    iro.props-ref('colors-dark', --colors --blue),
+            --link-visited: iro.props-ref('colors-dark', --colors --purple),
         ),
     )
 ), 'colors-dark');
diff --git a/src/_scopes.scss b/src/_scopes.scss
new file mode 100644
index 0000000..772d4e8
--- /dev/null
+++ b/src/_scopes.scss
@@ -0,0 +1 @@
+@use 'scopes/colored-links';
diff --git a/src/index.scss b/src/index.scss
index e090427..9e6c838 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,6 +3,7 @@
 @use 'base';
 @use 'layouts';
 @use 'objects';
+@use 'scopes';
 @use 'utils';
 
 @use 'apply-vars';
diff --git a/src/scopes/_colored-links.scss b/src/scopes/_colored-links.scss
new file mode 100644
index 0000000..d44dffc
--- /dev/null
+++ b/src/scopes/_colored-links.scss
@@ -0,0 +1,25 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('colored-links') {
+    @include iro.props-store((
+        --colors: (
+            --link: (
+                --idle:    fn.global-color(--accent --link-idle --obj-lo),
+                --visited: fn.global-color(--accent --link-visited --obj-lo),
+            )
+        )
+    ), 'colors');
+
+    @include iro.bem-scope(iro.props-namespace()) {
+        :link {
+            color:           fn.color(--link --idle);
+            text-decoration: underline;
+        }
+
+        :visited {
+            color:           fn.color(--link --visited);
+            text-decoration: underline;
+        }
+    }
+}
diff --git a/tpl/index.pug b/tpl/index.pug
index d224c53..a073280 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -84,6 +84,19 @@ html
 
             //-----------------------------------------
 
+            +h1-heading('xl')= 'Colored links'
+            +rule('medium')
+
+            +box
+                .s-colored-links
+                    = 'Lorem ipsum dolor '
+                    a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/'
+                    = ' sit amet, consetetur '
+                    a(href='https://v.reddit.com/')= 'https://v.reddit.com/'
+                    = ' sadipscing elitr, sed diam nonumy eirmod tempor'
+
+            //-----------------------------------------
+
             +h1-heading('xl')= 'Button'
             +rule('medium')