summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-15 16:18:54 +0100
committerVolpeon <git@volpeon.ink>2022-02-15 16:18:54 +0100
commit12f7368c6db07db650b7d36dafb6c1289f1a1ffc (patch)
tree6e12a3c93b18aecbe1bec601887bf68a5740aed8 /src
parentBetter indicator size handling (diff)
downloadiro-design-12f7368c6db07db650b7d36dafb6c1289f1a1ffc.tar.gz
iro-design-12f7368c6db07db650b7d36dafb6c1289f1a1ffc.tar.bz2
iro-design-12f7368c6db07db650b7d36dafb6c1289f1a1ffc.zip
Added scope for colored links
Diffstat (limited to 'src')
-rw-r--r--src/_declare-vars.scss26
-rw-r--r--src/_scopes.scss1
-rw-r--r--src/index.scss1
-rw-r--r--src/scopes/_colored-links.scss25
4 files changed, 43 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 @@
117 117
118 --gray: ( --h: 220, --s: 5% ), 118 --gray: ( --h: 220, --s: 5% ),
119 --blue: fn.color-palette(blend.lch(48% 50 279)), 119 --blue: fn.color-palette(blend.lch(48% 50 279)),
120 --purple: fn.color-palette(blend.lch(48% 50 308)),
120 --red: fn.color-palette(blend.lch(48% 50 23)), 121 --red: fn.color-palette(blend.lch(48% 50 23)),
121 --green: fn.color-palette(blend.lch(63% 50 147)), 122 --green: fn.color-palette(blend.lch(63% 50 147)),
122 --yellow: fn.color-palette(blend.lch(73% 50 80)), 123 --yellow: fn.color-palette(blend.lch(73% 50 80)),
123 124
124 --accent: ( 125 --accent: (
125 --primary: iro.props-ref('colors', --colors --blue), 126 --primary: iro.props-ref('colors', --colors --blue),
126 --error: iro.props-ref('colors', --colors --red), 127 --error: iro.props-ref('colors', --colors --red),
127 --success: iro.props-ref('colors', --colors --green), 128 --success: iro.props-ref('colors', --colors --green),
129 --link-idle: iro.props-ref('colors', --colors --blue),
130 --link-visited: iro.props-ref('colors', --colors --purple),
128 ), 131 ),
129 132
130 --selection: ( 133 --selection: (
@@ -158,15 +161,18 @@
158 161
159@include iro.props-store(( 162@include iro.props-store((
160 --colors: ( 163 --colors: (
161 --blue: fn.color-palette(blend.lch(58% 60 279), -1), 164 --blue: fn.color-palette(blend.lch(58% 50 279), -1),
162 --red: fn.color-palette(blend.lch(58% 60 23), -1), 165 --purple: fn.color-palette(blend.lch(58% 50 308), -1),
163 --green: fn.color-palette(blend.lch(73% 60 147), -1), 166 --red: fn.color-palette(blend.lch(58% 50 23), -1),
164 --yellow: fn.color-palette(blend.lch(83% 60 80), -1), 167 --green: fn.color-palette(blend.lch(73% 50 147), -1),
168 --yellow: fn.color-palette(blend.lch(83% 50 80), -1),
165 169
166 --accent: ( 170 --accent: (
167 --primary: iro.props-ref('colors-dark', --colors --blue), 171 --primary: iro.props-ref('colors-dark', --colors --blue),
168 --error: iro.props-ref('colors-dark', --colors --red), 172 --error: iro.props-ref('colors-dark', --colors --red),
169 --success: iro.props-ref('colors-dark', --colors --green), 173 --success: iro.props-ref('colors-dark', --colors --green),
174 --link-idle: iro.props-ref('colors-dark', --colors --blue),
175 --link-visited: iro.props-ref('colors-dark', --colors --purple),
170 ), 176 ),
171 ) 177 )
172), 'colors-dark'); 178), '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 @@
3@use 'base'; 3@use 'base';
4@use 'layouts'; 4@use 'layouts';
5@use 'objects'; 5@use 'objects';
6@use 'scopes';
6@use 'utils'; 7@use 'utils';
7 8
8@use 'apply-vars'; 9@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 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('colored-links') {
5 @include iro.props-store((
6 --colors: (
7 --link: (
8 --idle: fn.global-color(--accent --link-idle --obj-lo),
9 --visited: fn.global-color(--accent --link-visited --obj-lo),
10 )
11 )
12 ), 'colors');
13
14 @include iro.bem-scope(iro.props-namespace()) {
15 :link {
16 color: fn.color(--link --idle);
17 text-decoration: underline;
18 }
19
20 :visited {
21 color: fn.color(--link --visited);
22 text-decoration: underline;
23 }
24 }
25}