From 12f7368c6db07db650b7d36dafb6c1289f1a1ffc Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 15 Feb 2022 16:18:54 +0100 Subject: Added scope for colored links --- src/_declare-vars.scss | 26 ++++++++++++++++---------- src/_scopes.scss | 1 + src/index.scss | 1 + src/scopes/_colored-links.scss | 25 +++++++++++++++++++++++++ 4 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 src/_scopes.scss create mode 100644 src/scopes/_colored-links.scss (limited to 'src') 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; + } + } +} -- cgit v1.2.3-54-g00ecf