Open robsonsobral opened 5 months ago
To accept an infinite list instead of 2 parameters make easier to call it programmatically.
/// Helper function to use organized colors and tones /// /// @access public /// @param {String} $color-path - Color path as a list /// @require {variable} $my-palette /// @return {color} /// @link http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/ /// /// @example scss /// a { /// color: palette('anchor'); /// /// &:hover { /// color: palette('anchor', 'hover'); /// } /// } /// @function palette($color-path...) { $color: null; $default-palette: ( 'white': rgb(255, 255, 255), 'black': rgb(0, 0, 0), 'anchor': ( 'base': rgb(0, 102, 204), 'link': rgb(0, 102, 204), 'visited': rgb(128, 0, 128), 'hover': rgb(50, 152, 255), 'focus': rgb(50, 152, 255), 'active': rgb(229, 0, 80), ), 'border': ( 'base': rgb(192, 192, 192), 'focus': rgb(0, 0, 0), ), 'button': ( 'base': rgb(225, 225, 225), 'focus': rgb(229, 241, 251), 'slider': hsl(0, 0%, 40%), 'submit': rgb(217, 83, 79), 'reset': transparent, ), 'disabled': ( 'foreground': hsl(0, 0%, 42%), 'background': hsl(0, 0%, 94%), ), 'loading': ( 'foreground': hsl(0, 0%, 94%), 'background': hsla(0, 0%, 7%, 0.8), ), 'label': ( 'default': rgb(119, 119, 119), 'primary': rgb(51, 122, 183), 'success': rgb(66, 133, 66), 'info': rgb(60, 127, 145), 'warning': rgb(240, 173, 78), 'danger': rgb(217, 83, 79), ), 'mark': ( 'foreground': rgb(51, 51, 51), 'background': rgb(215, 255, 90), ), 'placeholder': ( 'base': hsl(0, 0%, 34%), 'focus': hsl(0, 0%, 56%), ), 'quotes': hsl(0, 0%, 34%), 'selection': ( 'foreground': rgb(255, 255, 255), 'background': rgb(20, 105, 140), ), 'tap-highlight': rgb(255, 94, 153), 'target-highlight': rgb(255, 255, 102), 'text': ( 'dark': hsl(0, 0%, 13%), 'light': rgb(229, 231, 234), ), ); $full-palette: (); @if meta.variable-exists('my-palette') and meta.type-of($my-palette) == 'map' { $full-palette: map.deep-merge($default-palette, $my-palette); } $color: map.get($full-palette, $color-path...); @if type-of($color) == 'map' { @if map.has-key($full-palette, list.append($color-path, 'medium', $separator: space)...) { $color: map.get($full-palette, list.append($color-path, 'medium', $separator: space)...); } @else if map.has-key($full-palette, list.append($color-path, 'base', $separator: space)...) { $color: map.get($full-palette, list.append($color-path, 'base', $separator: space)...); } @else if map.has-key($full-palette, list.append($color-path, 'default', $separator: space)...) { $color: map.get($full-palette, list.append($color-path, 'default', $separator: space)...); } } @if meta.type-of($color) == 'color' or $color == 'transparent' { @return $color; } @return null; }
To accept an infinite list instead of 2 parameters make easier to call it programmatically.