diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/_apply-vars.scss | 6 | ||||
-rw-r--r-- | src/_declare-vars.scss | 32 | ||||
-rw-r--r-- | src/_functions.scss | 13 |
3 files changed, 46 insertions, 5 deletions
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 0fbc5e3..689b048 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss | |||
@@ -19,10 +19,10 @@ | |||
19 | } | 19 | } |
20 | } | 20 | } |
21 | 21 | ||
22 | @include iro.bem-theme('dark') { | 22 | @include iro.bem-theme('media') { |
23 | @include iro.props-assign('colors'); | 23 | @include iro.props-assign('colors'); |
24 | @include iro.props-assign('colors-dark'); | 24 | @include iro.props-assign('colors-media'); |
25 | @include iro.props-assign('palette-dark'); | 25 | @include iro.props-assign('palette-media'); |
26 | } | 26 | } |
27 | 27 | ||
28 | @include iro.bem-theme('def') { | 28 | @include iro.bem-theme('def') { |
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index eb20836..303da35 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss | |||
@@ -293,6 +293,38 @@ | |||
293 | 293 | ||
294 | // | 294 | // |
295 | 295 | ||
296 | @include iro.props-store(( | ||
297 | --colors: ( | ||
298 | --gray: fn.gray-palette(12%, true), | ||
299 | ), | ||
300 | ), 'palette-media'); | ||
301 | |||
302 | @include iro.props-store(( | ||
303 | --colors: ( | ||
304 | --border: ( | ||
305 | --stable: iro.props-get-static(--colors --gray --5, 'palette-media'), | ||
306 | --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media'), | ||
307 | ), | ||
308 | |||
309 | --blue: fn.color-palette(blend.lch(63% 50 279), -1), | ||
310 | --purple: fn.color-palette(blend.lch(63% 50 308), -1), | ||
311 | --red: fn.color-palette(blend.lch(63% 50 23), -1), | ||
312 | --green: fn.color-palette(blend.lch(78% 50 147), -1), | ||
313 | --yellow: fn.color-palette(blend.lch(88% 50 70), -1), | ||
314 | |||
315 | --accent: ( | ||
316 | --primary: iro.props-ref('colors-media', --colors --blue), | ||
317 | --error: iro.props-ref('colors-media', --colors --red), | ||
318 | --success: iro.props-ref('colors-media', --colors --green), | ||
319 | --warning: iro.props-ref('colors-media', --colors --yellow), | ||
320 | --link-idle: iro.props-ref('colors-media', --colors --blue), | ||
321 | --link-visited: iro.props-ref('colors-media', --colors --purple), | ||
322 | ), | ||
323 | ) | ||
324 | ), 'colors-media'); | ||
325 | |||
326 | // | ||
327 | |||
296 | @each $breakpoint in map-keys(media.$breakpoints) { | 328 | @each $breakpoint in map-keys(media.$breakpoints) { |
297 | @include media.media('<=#{$breakpoint}') { | 329 | @include media.media('<=#{$breakpoint}') { |
298 | @include iro.props-store(( | 330 | @include iro.props-store(( |
diff --git a/src/_functions.scss b/src/_functions.scss index 354c5f7..82e8435 100644 --- a/src/_functions.scss +++ b/src/_functions.scss | |||
@@ -1,3 +1,4 @@ | |||
1 | @use 'sass:color'; | ||
1 | @use 'sass:math'; | 2 | @use 'sass:math'; |
2 | @use 'sass:map'; | 3 | @use 'sass:map'; |
3 | @use 'iro-sass/src/index' as iro; | 4 | @use 'iro-sass/src/index' as iro; |
@@ -104,6 +105,10 @@ | |||
104 | @return $result; | 105 | @return $result; |
105 | } | 106 | } |
106 | 107 | ||
108 | @function gray-to-alpha($color) { | ||
109 | @return rgba(#fff, color.whiteness($color)); | ||
110 | } | ||
111 | |||
107 | @function color-palette($base, $dir: 1) { | 112 | @function color-palette($base, $dir: 1) { |
108 | @return ( | 113 | @return ( |
109 | --solid: ( | 114 | --solid: ( |
@@ -125,7 +130,7 @@ | |||
125 | ); | 130 | ); |
126 | } | 131 | } |
127 | 132 | ||
128 | @function gray-palette($lightness) { | 133 | @function gray-palette($lightness, $alpha: false) { |
129 | $grays: (); | 134 | $grays: (); |
130 | 135 | ||
131 | @for $i from 0 through 100 { | 136 | @for $i from 0 through 100 { |
@@ -135,7 +140,11 @@ | |||
135 | $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); | 140 | $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); |
136 | 141 | ||
137 | @each $key, $color in $colors { | 142 | @each $key, $color in $colors { |
138 | $colors: map.set($colors, $key, $color); | 143 | @if $alpha { |
144 | $colors: map.set($colors, $key, gray-to-alpha($color)); | ||
145 | } @else { | ||
146 | $colors: map.set($colors, $key, $color); | ||
147 | } | ||
139 | } | 148 | } |
140 | 149 | ||
141 | @return $colors; | 150 | @return $colors; |