Skip to content

Latest commit

 

History

History
135 lines (124 loc) · 2.91 KB

manifests.md

File metadata and controls

135 lines (124 loc) · 2.91 KB

Generating a Manifest

Manifests are special instructions for Colorway to generate files. They are generated from template files using the generate() function.

Example

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

Next, let's look into integrating our App with Colorway.