diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_apply-vars.scss | 8 | ||||
-rw-r--r-- | src/_declare-vars.scss | 33 | ||||
-rw-r--r-- | src/_functions.scss | 10 |
3 files changed, 39 insertions, 12 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 689b048..bee2ff3 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss | |||
@@ -22,7 +22,13 @@ | |||
22 | @include iro.bem-theme('media') { | 22 | @include iro.bem-theme('media') { |
23 | @include iro.props-assign('colors'); | 23 | @include iro.props-assign('colors'); |
24 | @include iro.props-assign('colors-media'); | 24 | @include iro.props-assign('colors-media'); |
25 | @include iro.props-assign('palette-media'); | 25 | @include iro.props-assign('palette-media-dark'); |
26 | } | ||
27 | |||
28 | @include iro.bem-theme('media-light') { | ||
29 | @include iro.props-assign('colors'); | ||
30 | @include iro.props-assign('colors-media-light'); | ||
31 | @include iro.props-assign('palette-media-light'); | ||
26 | } | 32 | } |
27 | 33 | ||
28 | @include iro.bem-theme('def') { | 34 | @include iro.bem-theme('def') { |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 303da35..bf7e955 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -295,22 +295,39 @@ | |||
295 | 295 | ||
296 | @include iro.props-store(( | 296 | @include iro.props-store(( |
297 | --colors: ( | 297 | --colors: ( |
298 | --gray: fn.gray-palette(97%, true), | ||
299 | ), | ||
300 | ), 'palette-media-light'); | ||
301 | |||
302 | @include iro.props-store(( | ||
303 | --colors: ( | ||
304 | --border: ( | ||
305 | --stable: iro.props-get-static(--colors --gray --5, 'palette-media-light'), | ||
306 | --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'), | ||
307 | ), | ||
308 | ) | ||
309 | ), 'colors-media-light'); | ||
310 | |||
311 | // | ||
312 | |||
313 | @include iro.props-store(( | ||
314 | --colors: ( | ||
298 | --gray: fn.gray-palette(12%, true), | 315 | --gray: fn.gray-palette(12%, true), |
299 | ), | 316 | ), |
300 | ), 'palette-media'); | 317 | ), 'palette-media-dark'); |
301 | 318 | ||
302 | @include iro.props-store(( | 319 | @include iro.props-store(( |
303 | --colors: ( | 320 | --colors: ( |
304 | --border: ( | 321 | --border: ( |
305 | --stable: iro.props-get-static(--colors --gray --5, 'palette-media'), | 322 | --stable: iro.props-get-static(--colors --gray --5, 'palette-media-dark'), |
306 | --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media'), | 323 | --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'), |
307 | ), | 324 | ), |
308 | 325 | ||
309 | --blue: fn.color-palette(blend.lch(63% 50 279), -1), | 326 | --blue: iro.props-get-static(--colors --blue, 'colors-dark'), |
310 | --purple: fn.color-palette(blend.lch(63% 50 308), -1), | 327 | --purple: iro.props-get-static(--colors --purple, 'colors-dark'), |
311 | --red: fn.color-palette(blend.lch(63% 50 23), -1), | 328 | --red: iro.props-get-static(--colors --red, 'colors-dark'), |
312 | --green: fn.color-palette(blend.lch(78% 50 147), -1), | 329 | --green: iro.props-get-static(--colors --green, 'colors-dark'), |
313 | --yellow: fn.color-palette(blend.lch(88% 50 70), -1), | 330 | --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'), |
314 | 331 | ||
315 | --accent: ( | 332 | --accent: ( |
316 | --primary: iro.props-ref('colors-media', --colors --blue), | 333 | --primary: iro.props-ref('colors-media', --colors --blue), |
diff --git a/src/_functions.scss b/src/_functions.scss index 82e8435..148a28c 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -105,8 +105,12 @@ | |||
105 | @return $result; | 105 | @return $result; |
106 | } | 106 | } |
107 | 107 | ||
108 | @function gray-to-alpha($color) { | 108 | @function gray-to-alpha($lightness, $color) { |
109 | @return rgba(#fff, color.whiteness($color)); | 109 | @if $lightness >= 50% { |
110 | @return rgba(#000, color.blackness($color)); | ||
111 | } @else { | ||
112 | @return rgba(#fff, color.whiteness($color)); | ||
113 | } | ||
110 | } | 114 | } |
111 | 115 | ||
112 | @function color-palette($base, $dir: 1) { | 116 | @function color-palette($base, $dir: 1) { |
@@ -141,7 +145,7 @@ | |||
141 | 145 | ||
142 | @each $key, $color in $colors { | 146 | @each $key, $color in $colors { |
143 | @if $alpha { | 147 | @if $alpha { |
144 | $colors: map.set($colors, $key, gray-to-alpha($color)); | 148 | $colors: map.set($colors, $key, gray-to-alpha($lightness, $color)); |
145 | } @else { | 149 | } @else { |
146 | $colors: map.set($colors, $key, $color); | 150 | $colors: map.set($colors, $key, $color); |
147 | } | 151 | } |