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 | ||
