Palette

The palette service provides functions to apply a consistent color palette to SKY UX applications.

  • getColorByIndex(index, paletteType) — Gets a specific color from the pallette based on its index.
    • index(Required.) An integer for the index of the color.
    • paletteType(Optional.) A string that represents mono or multi. (Default: multi)
  • getColorSequence(requestedLength, paletteType) — Returns an array of colors for the requested length. When using with ng-repeat, be sure to use the track by syntax since we return duplicates.
    • requestedLength — A required integer for the size of the array of colors you want returned.
    • paletteType(Optional.) A string that represents mono or multi. (Default: multi)

Demo

Example using getColorSequence()

List 18 colors returned from getColorSequence using the default multi palette.

  1. {{ color }}

Example using getColorByIndex()

Return the 7th color in the mono palette, which would be:

{{ paletteCtrl.paletteService.getColorByIndex(6, 'mono') }}

Markup

<style>
  .swatch {
    display: inline-block;
    height: 30px;
    width: 30px;
  }
</style>

<div ng-controller="PaletteTestController as paletteCtrl">

  <h4>Example using getColorSequence()</h4>
  <p>List 18 colors returned from getColorSequence using the default multi palette.</p>
  <ol>
    <li ng-repeat="color in paletteCtrl.paletteService.getColorSequence(18) track by $index">
      <span class="swatch" ng-style="{ 'background-color': color }"></span>
      {{ color }}
    </li>
  </ol>

  <h4>Example using getColorByIndex()</h4>
  <p>Return the 7th color in the mono palette, which would be:</p>
  <p>
    <span class="swatch" ng-style="{ 'background-color': paletteCtrl.paletteService.getColorByIndex(6, 'mono') }"></span>
    {{ paletteCtrl.paletteService.getColorByIndex(6, 'mono') }}
  </p>
</div>

JavaScript

angular.module('stache').controller('PaletteTestController', [
    'bbPaletteConfig', 'bbPalette', function (bbPaletteConfig, bbPalette) {
        var self = this;
        self.paletteService = bbPalette;
    }
]);