github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/stories/theme/colors.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  import { htmlSafe } from '@ember/string';
     3  
     4  export default {
     5    title: 'Theme|Colors',
     6  };
     7  
     8  export let Colors = () => {
     9    return {
    10      template: hbs`
    11        {{#each palettes as |palette|}}
    12          <div class='palette'>
    13            <div class='title'>{{palette.title}}</div>
    14            <div class='description'>{{palette.description}}</div>
    15            {{#each palette.colors as |color|}}
    16              <div class='item'>
    17                <div class='color' style={{color.style}}></div>
    18                <div class='info'>
    19                  <p class='hex'>{{color.base}}</p>
    20                  <p class='name'>{{color.name}}</p>
    21                </div>
    22              </div>
    23            {{/each}}
    24          </div>
    25        {{/each}}
    26        `,
    27      context: {
    28        palettes: [{
    29          title: 'Nomad Theme',
    30          description: 'Accent and neutrals.',
    31          colors: [
    32            {
    33              name: 'Primary',
    34              base: '#25ba81',
    35            },
    36            {
    37              name: 'Primary Dark',
    38              base: '#1d9467',
    39            },
    40            {
    41              name: 'Text',
    42              base: '#0a0a0a',
    43            },
    44            {
    45              name: 'Link',
    46              base: '#1563ff',
    47            },
    48            {
    49              name: 'Gray',
    50              base: '#bbc4d1',
    51            },
    52            {
    53              name: 'Off-white',
    54              base: '#f5f5f5',
    55            },
    56          ],
    57        }, {
    58          title: 'Product Colors',
    59          description: 'Colors from other HashiCorp products. Often borrowed for alternative accents and color schemes.',
    60          colors: [
    61            {
    62              name: 'Consul Pink',
    63              base: '#ff0087',
    64            },
    65            {
    66              name: 'Consul Pink Dark',
    67              base: '#c62a71',
    68            },
    69            {
    70              name: 'Packer Blue',
    71              base: '#1daeff',
    72            },
    73            {
    74              name: 'Packer Blue Dark',
    75              base: '#1d94dd',
    76            },
    77            {
    78              name: 'Terraform Purple',
    79              base: '#5c4ee5',
    80            },
    81            {
    82              name: 'Terraform Purple Dark',
    83              base: '#4040b2',
    84            },
    85            {
    86              name: 'Vagrant Blue',
    87              base: '#1563ff',
    88            },
    89            {
    90              name: 'Vagrant Blue Dark',
    91              base: '#104eb2',
    92            },
    93            {
    94              name: 'Nomad Green',
    95              base: '#25ba81',
    96            },
    97            {
    98              name: 'Nomad Green Dark',
    99              base: '#1d9467',
   100            },
   101            {
   102              name: 'Nomad Green Darker',
   103              base: '#16704d',
   104            },
   105          ]
   106        }, {
   107          title: 'Emotive Colors',
   108          description: 'Colors used in conjunction with an emotional response.',
   109          colors: [
   110            {
   111              name: 'Success',
   112              base: '#23d160',
   113            },
   114            {
   115              name: 'Warning',
   116              base: '#fa8e23',
   117            },
   118            {
   119              name: 'Danger',
   120              base: '#c84034',
   121            },
   122            {
   123              name: 'Info',
   124              base: '#1563ff',
   125            },
   126          ]
   127        }].map(palette => {
   128          palette.colors.forEach(color => {
   129            color.style = htmlSafe(`background-color: ${color.base}`);
   130          });
   131          return palette;
   132        })
   133      },
   134    };
   135  };