github.com/thomasobenaus/nomad@v0.11.1/ui/stories/theme/colors.stories.js (about)

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