Warning: This site describes the AngularJS (1.x) implementation of the SKY UX framework. We still support this version, but it is in maintenance mode. We no longer develop features for this version of SKY UX, and we recommend that you use the latest version instead. For more information, see developer.blackbaud.com/skyux.

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;
    }
]);