neilkimmett

"scripts": {
  "web": "theo colors.yml - transform web - format scss > colors.scss"
}

neilkimmett

/* Default page background */
$color-gray10: rgb(247, 247, 247);

/* ClassPass' key brand color */
$color-brand: rgb(0, 85, 255);

neilkimmett

"scripts": {
  "web": "theo colors.yml - transform web - format scss > colors.scss",
  "js": "theo color.yml - format module.js > colors.js",
  "all": "yarn web && yarn js"
}

neilkimmett

/* Default page background */
export const colorGray10 = "#f7f7f7";

/* ClassPass' key brand color */
export const colorBrand = "#0055ff";

neilkimmett

module.exports = theo => {
  theo.registerFormat('ios.color.swift', result => {
    return `🎉`;
  });
}

neilkimmett

"ios": "theo color.yml - setup setup.js - format ios.color.swift > UIColor+Token.swift"

neilkimmett

module.exports = theo => {
  theo.registerFormat('ios.color.swift', result => {
    const colors = []
    return [
    'import UIKit',
    '',
    'extension UIColor {',
    ...colors,
    '}'
   ].join('\n');

neilkimmett

const colors = result.get('props').map(prop => prop.get('value'))

neilkimmett

const colors = result
  .get('props')
  .map(prop => {
    const { r, g, b, a } = tinycolor(prop.get('value')).toRgb();;
    return ` @objc static let ${prop.get('name')} = #colorLiteral(red: ${parseFloat(r)/255.0}, green: ${parseFloat(g)/255.0}, blue: ${parseFloat(b)/255.0}, alpha: ${parseFloat(a)})`;
  });

neilkimmett

global:
  type: color
  category: color
props:
  colorTeal:
    value: "#23cfb9"
    deprecated: "Deprecated, use colorBrand"
  colorBrand:
    value: "#0055ff"