Palette

Palette

<div ng-app="Example.palette" ng-strict-di ng-controller="PaletteCtrl as paletteCtrl" id="palette">
  <h4>ColorId</h4>
  <div ng-repeat="i in paletteCtrl.arr5" class="example">
    <div ng-repeat="j in paletteCtrl.arr7"
      ng-init="colorId = i * 7 + j + 1"
      ng-attr-class="ring-palette_color-{{colorId}}">
      Color {{colorId}}
    </div>
  </div>
  <h4>ToneId and BrightnessId</h4>
  <div class="example" ng-repeat="toneId in paletteCtrl.arr7">
    <div><b>Tone {{toneId}}:</b></div>
    <div ng-repeat="brightnessId in paletteCtrl.arr5"
      ng-attr-class="ring-palette_tone-{{toneId}}-{{brightnessId}}">
      Brightness {{brightnessId}}
    </div>
  </div>
</div>

:global(.example) {
  margin: 4px;
}

:global(.example) div {
  width: 90px;
  display: inline-block;
}

import angular from 'angular';
import '@jetbrains/ring-ui/components/palette/palette.scss';

angular.module('Example.palette', []).
  controller('PaletteCtrl', function () {
    const xrange = num => [...Array(num)].map((val, index) => index);

    this.arr5 = xrange(5);
    this.arr7 = xrange(7);
  });