Manifests are special instructions for Colorway to generate files. They are generated from template files using the generate()
function.
In this example, we're creating a manifest for hsds-react
. We're telling Colorway that we want to generate the file at src/styles/configs/colorway.ts
within the project.
const content = '...'
generate({
name: 'hsds-react',
dest: 'src/styles/configs/colorway.ts',
content,
})
When Colorway builds, the manifest will be generated into the manifest
directory. Our above example's manifest should look like this:
{
"colorway": "v0.0.11",
"name": "hsds-react",
"dest": "src/styles/configs/colorway.ts"
}
==COLORWAY-MANIFEST==================
// Generated with @helpscout/colorway (v0.0.11)
//
// This file was automatically generated with @helpscout/colorway
// Please don't modify this file. Your changes will be overwritten.
// Instead, update the template at:
// https://github.com/helpscout/colorway
const palette = {
blue: {
'100': '#F3FBFF',
'200': '#D6EDFF',
'300': '#A0D4FF',
'400': '#57B0FB',
'500': '#1292EE',
'600': '#0077CC',
'700': '#005CA4',
'800': '#034077',
'900': '#002651',
default: '#1292EE',
},
charcoal: {
'200': '#93a1af',
'300': '#72808e',
'400': '#4f5d6b',
'500': '#394956',
'600': '#2a3b47',
'700': '#253540',
'800': '#1d2b36',
default: '#394956',
},
grey: {
'200': '#f9fafa',
'300': '#f1f3f5',
'400': '#e3e8eb',
'500': '#d6dde3',
'600': '#c1cbd4',
'700': '#b4c0ca',
'800': '#a5b2bd',
default: '#d6dde3',
},
yellow: {
'100': '#fffdf6',
'200': '#fff6e2',
'300': '#ffe8b5',
'400': '#ffd56d',
'500': '#ffc646',
'600': '#f5b126',
'700': '#d79400',
'800': '#b37100',
'900': '#875200',
default: '#ffc646',
},
green: {
'100': '#fafdfb',
'200': '#e4fbe6',
'300': '#c4f0ce',
'400': '#81dc9e',
'500': '#4bc27d',
'600': '#3cb170',
'700': '#2f9f62',
'800': '#228350',
'900': '#23633e',
default: '#4bc27d',
},
red: {
'100': '#fef7f6',
'200': '#ffe3e2',
'300': '#ffa2a2',
'400': '#f45b55',
'500': '#e52f28',
'600': '#d21b14',
'700': '#ba1f19',
'800': '#9d1f1a',
'900': '#731814',
default: '#e52f28',
},
purple: {
'100': '#fbfbfe',
'200': '#eaeafc',
'300': '#d1d2f6',
'400': '#a3a4f3',
'500': '#7e80e7',
'600': '#696aca',
'700': '#585b9e',
'800': '#45467d',
'900': '#383966',
default: '#7e80e7',
},
orange: {
'100': '#fff8f2',
'200': '#ffead8',
'300': '#ffd3ae',
'400': '#ffa75a',
'500': '#ff9139',
'600': '#e87800',
'700': '#c76400',
'800': '#a45300',
'900': '#813c00',
default: '#ff9139',
},
}
export default palette
Next, let's look into integrating our App with Colorway.