diff options
-rw-r--r-- | src/_declare-vars.scss | 26 | ||||
-rw-r--r-- | src/_scopes.scss | 1 | ||||
-rw-r--r-- | src/index.scss | 1 | ||||
-rw-r--r-- | src/scopes/_colored-links.scss | 25 | ||||
-rw-r--r-- | tpl/index.pug | 13 |
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 @@ | |||
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 | } | ||
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 | |||
84 | 84 | ||
85 | //----------------------------------------- | 85 | //----------------------------------------- |
86 | 86 | ||
87 | +h1-heading('xl')= 'Colored links' | ||
88 | +rule('medium') | ||
89 | |||
90 | +box | ||
91 | .s-colored-links | ||
92 | = 'Lorem ipsum dolor ' | ||
93 | a(href='https://mk.vulpes.one/')= 'https://mk.vulpes.one/' | ||
94 | = ' sit amet, consetetur ' | ||
95 | a(href='https://v.reddit.com/')= 'https://v.reddit.com/' | ||
96 | = ' sadipscing elitr, sed diam nonumy eirmod tempor' | ||
97 | |||
98 | //----------------------------------------- | ||
99 | |||
87 | +h1-heading('xl')= 'Button' | 100 | +h1-heading('xl')= 'Button' |
88 | +rule('medium') | 101 | +rule('medium') |
89 | 102 | ||