sogo/UI/Templates/AdministrationUI/UIxThemePreview.wox

<?xml version="1.0" standalone="yes"?>
<!DOCTYPE container>
<container
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:var="http://www.skyrix.com/od/binding"
    xmlns:const="http://www.skyrix.com/od/constant"
    xmlns:label="OGo:label">

  <md-toolbar layout="row" layout-align="space-between center" class="sg-toolbar-main">
    <var:component className="UIxTopnavToolbar" />
  </md-toolbar>

  <md-content class="md-padding">
    <div class="md-margin" layout="row" layout-padding="">
      <div flex="50">
        <h3 class="md-title">Palettes</h3>
        <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/directive/mdColors">md-colors</a> and <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a></md-subheader>
        <md-list ng-repeat="palette in ['primary', 'accent', 'warn', 'background']">
          <md-subheader>
            <div layout="row">
              <strong flex="">{{ palette }}</strong>
              <strong>{{ ctrl.defaultTheme.colors[palette].name }}</strong>
            </div>
          </md-subheader>
          <md-divider><!-- divider --></md-divider>
          <md-list-item
            ng-repeat="hex in ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900', 'A100', 'A200', 'A400', 'A700']"
            md-colors="{backgroundColor: '{{ palette }}-{{ hex }}'}">
            <div flex=" ">{{ palette }}-{{ hex }}</div>
            <div class="md-caption">{{ ctrl.getColor(palette + '-' + hex) }}</div></md-list-item>
        </md-list>
      </div>
      <div flex="50">
        <h3 class="md-title">Foregrounds</h3>
        <md-list>
          <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a> only</md-subheader>
          <md-list-item class="foreground-1">foreground-1</md-list-item>
          <md-list-item class="foreground-2">foreground-2</md-list-item>
          <md-list-item class="foreground-3">foreground-3</md-list-item>
          <md-list-item class="foreground-4">foreground-4</md-list-item>
          <md-list-item class="background-contrast">background-contrast</md-list-item>
          <md-list-item class="background-contrast-secondary">background-contrast-secondary</md-list-item>
        </md-list>
        <h3 class="md-title">Backgrounds</h3>
        <md-list>
          <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a> only</md-subheader>
          <md-list-item class="background-default">background-default ({{ctrl.defaultTheme.colors.background.hues.default }})</md-list-item>
          <md-subheader>Accessible from <a href="https://material.angularjs.org/latest/api/directive/mdColors">md-colors</a> and <a href="https://material.angularjs.org/latest/api/service/$mdThemingProvider">$mdThemingProvider</a></md-subheader>
          <md-list-item md-colors="{backgroundColor: 'background-hue-1'}">background-hue-1 ({{ctrl.defaultTheme.colors.background.hues['hue-1'] }})</md-list-item>
          <md-list-item md-colors="{backgroundColor: 'background-hue-2'}">background-hue-2 ({{ctrl.defaultTheme.colors.background.hues['hue-2'] }})</md-list-item>
          <md-list-item md-colors="{backgroundColor: 'background-hue-3'}">background-hue-3 ({{ctrl.defaultTheme.colors.background.hues['hue-3'] }})</md-list-item>
        </md-list>
      </div>
    </div>
    <div class="md-margin" layout="row" layout-padding="">
      <div flex="50">
        <h3 class="md-title">Components Colors</h3>
        <div layout="row" ng-repeat="palette in ['primary', 'accent', 'warn']">
          <md-button class="md-flex md-raised md-{{ palette }}">{{ palette }} ({{ctrl.defaultTheme.colors[palette].hues.default }})</md-button>
          <md-button class="md-flex md-raised md-{{ palette }} md-hue-1">hue-1 ({{ctrl.defaultTheme.colors[palette].hues['hue-1'] }})</md-button>
          <md-button class="md-flex md-raised md-{{ palette }} md-hue-2">hue-2 ({{ctrl.defaultTheme.colors[palette].hues['hue-2'] }})</md-button>
          <md-button class="md-flex md-raised md-{{ palette }} md-hue-3">hue-3 ({{ctrl.defaultTheme.colors[palette].hues['hue-3'] }})</md-button>
        </div>
      </div>
      <div flex="50">
        <h3 class="md-title">Theme Definition</h3>
        <md-content><pre>{{ ctrl.jsonDefaultTheme }}</pre></md-content>
      </div>
    </div>
  </md-content>

</container>