oficiodesign / initial-css

MIT License
4 stars 1 forks source link

Make `palette()` function easier to use #141

Open robsonsobral opened 5 months ago

robsonsobral commented 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;
}