dbanksdesign

//
//  PvlseFromBottomSegue.m
//  Pvlse
//
//  Created by Daniel Banks on 2/9/14.
//  Copyright (c) 2014 Pvlse. All rights reserved.
//

#import "PvlseFromBottomSegue.h"
#import "PvlseNavigationController.h"

dbanksdesign

const StyleDictionary = require('style-dictionary');  
const watch = require('node-watch');

watch('./', { recursive: true, filter: /^(properties|components)/ }, function(evt, name) {
    console.log('Updating the style dictionary');
    try {
      styleDictionary = StyleDictionary.extend('config.json');
      styleDictionary.buildAllPlatforms();
      console.log('\n🎉 Style dictionary finished!');
    } catch (e) {

dbanksdesign

{
  "color": {
    "base": {
      "transparent": { "value": "#DDFF33AA" },
      "nontransparent": { "value": "#DDFF33" }
    }
  }
}

dbanksdesign

{
  "color": {
    "background": {
      "base": {
        "value": "#ffffff",
        "attributes": {
          "androidName": "someName",
          "iosName": "someOtherName"
        }
      }

dbanksdesign

Name and title

Danny Banks

Sr. UX Designer, Amazon

Links

• Website
• Twitter
• GitHub

dbanksdesign

// Here is a simple implementation
theo.registerValueTransform(
  "size/pxToRem",
  prop => prop.get("type") === "size", // Or whatever props you want to match
  prop => {
    let val = Math.floor(parseFloat(prop.get("value").replace(/px/g, "")) / 16)
    return `${val}rem`;
  }
);

dbanksdesign

{
  "component": {
    "button": {
      "font-size": { "value": "{size.font.base.value}" },
      "color": { "value": "{color.font.link.value}" },
      "padding": { "value": "{size.padding.base.value}" },
      "border-width": { "value": "0"},
      "text-align": { "value": "center" }
      // ..
    }

dbanksdesign

const Color = require('tinycolor2');

module.exports = {
  source: ['tokens/**/*.json'],
  transform: {
    'color/sketch': {
      type: 'value',
      matcher: (prop) => prop.attributes.category === 'color',
      transformer: function(prop) {
        let color = Color(prop.original.value).toRgb();

dbanksdesign

module.exports = function(dictionary, platform) {
  // This will store the references
  const toRet = {};

  dictionary.allProperties.forEach((token) => {
    let original = token.original.value;
    // If the token has a reference, store it
    if (typeof original === 'string' && original.indexOf('{') > -1) {
      let reference = original.replace(/{|}/g,'');
      // Add an array to the lookup object if it is not there

dbanksdesign

{
  "component": {
    "picker": {
      "background-color": { "value": "{color.background.base.value}" },
      "border-width": { "value": "{size.border.width.base.value}" },
      "border-color": { "value": "{color.border.base.value}" },
      "max-height": { "value": 0.5 },

      "item": {
        "child": true,