_elevate.scss (1562B)
1 @use 'sass:list'; 2 @use 'sass:map'; 3 @use 'sass:meta'; 4 @use 'sass:color' as sass-color; 5 @use 'colors'; 6 7 $_elevate-opacity: (0%, 8%, 15%, 21%, 26%, 30%); 8 9 $_key-opacity: 0.2; 10 $_ambient-opacity: 0.1; 11 $_shadow-map: ( 12 0: ( 13 key: '0px 0px 0px 0px', 14 ambient: '0px 0px 0px 0px', 15 ), 16 1: ( 17 key: '0px 1px 2px 0px', 18 ambient: '0px 1px 3px 1px', 19 ), 20 2: ( 21 key: '0px 1px 2px 0px', 22 ambient: '0px 2px 6px 2px', 23 ), 24 3: ( 25 key: '0px 1px 3px 0px', 26 ambient: '0px 4px 8px 3px', 27 ), 28 4: ( 29 key: '0px 2px 3px 0px', 30 ambient: '0px 6px 10px 4px', 31 ), 32 5: ( 33 key: '0px 4px 4px 0px', 34 ambient: '0px 8px 12px 6px', 35 ), 36 ); 37 $_shadow-color: #000000; 38 39 @function _overlay-opacity($level) { 40 @return list.nth($_elevate-opacity, $level + 1); 41 } 42 43 @function _background-color($theme, $level, $overlay: 'primary', $base: 'surface') { 44 $base-color: colors.get($theme, $base); 45 $overlay-color: colors.get($theme, $overlay); 46 $overlay-opacity: _overlay-opacity($level); 47 $mixed-color: sass-color.mix($overlay-color, $base-color, $overlay-opacity); 48 49 @return $mixed-color; 50 } 51 52 @mixin apply-background-color($theme, $level, $overlay) { 53 background-color: _background-color($theme, $level, $overlay); 54 } 55 56 @mixin apply-box-shadow($level) { 57 $key-spread: map.get($_shadow-map, $level, key); 58 $ambient-spread: map.get($_shadow-map, $level, ambient); 59 60 $key-color: rgba($_shadow-color, $_key-opacity); 61 $ambient-color: rgba($_shadow-color, $_ambient-opacity); 62 63 box-shadow: (#{$key-spread} #{$key-color}, #{$ambient-spread} #{$ambient-color}); 64 }