github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/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          {
    30            title: 'Nomad Theme',
    31            description: 'Accent and neutrals.',
    32            colors: [
    33              {
    34                name: 'Primary',
    35                base: '#25ba81',
    36              },
    37              {
    38                name: 'Primary Dark',
    39                base: '#1d9467',
    40              },
    41              {
    42                name: 'Text',
    43                base: '#0a0a0a',
    44              },
    45              {
    46                name: 'Link',
    47                base: '#1563ff',
    48              },
    49              {
    50                name: 'Gray',
    51                base: '#bbc4d1',
    52              },
    53              {
    54                name: 'Off-white',
    55                base: '#f5f5f5',
    56              },
    57            ],
    58          },
    59          {
    60            title: 'Product Colors',
    61            description:
    62              'Colors from other HashiCorp products. Often borrowed for alternative accents and color schemes.',
    63            colors: [
    64              {
    65                name: 'Consul Pink',
    66                base: '#ff0087',
    67              },
    68              {
    69                name: 'Consul Pink Dark',
    70                base: '#c62a71',
    71              },
    72              {
    73                name: 'Packer Blue',
    74                base: '#1daeff',
    75              },
    76              {
    77                name: 'Packer Blue Dark',
    78                base: '#1d94dd',
    79              },
    80              {
    81                name: 'Terraform Purple',
    82                base: '#5c4ee5',
    83              },
    84              {
    85                name: 'Terraform Purple Dark',
    86                base: '#4040b2',
    87              },
    88              {
    89                name: 'Vagrant Blue',
    90                base: '#1563ff',
    91              },
    92              {
    93                name: 'Vagrant Blue Dark',
    94                base: '#104eb2',
    95              },
    96              {
    97                name: 'Nomad Green',
    98                base: '#25ba81',
    99              },
   100              {
   101                name: 'Nomad Green Dark',
   102                base: '#1d9467',
   103              },
   104              {
   105                name: 'Nomad Green Darker',
   106                base: '#16704d',
   107              },
   108            ],
   109          },
   110          {
   111            title: 'Emotive Colors',
   112            description: 'Colors used in conjunction with an emotional response.',
   113            colors: [
   114              {
   115                name: 'Success',
   116                base: '#23d160',
   117              },
   118              {
   119                name: 'Warning',
   120                base: '#fa8e23',
   121              },
   122              {
   123                name: 'Danger',
   124                base: '#c84034',
   125              },
   126              {
   127                name: 'Info',
   128                base: '#1563ff',
   129              },
   130            ],
   131          },
   132        ].map((palette) => {
   133          palette.colors.forEach((color) => {
   134            color.style = htmlSafe(`background-color: ${color.base}`);
   135          });
   136          return palette;
   137        }),
   138      },
   139    };
   140  };