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 };