dbanksdesign

const camelCase = require('lodash/camelCase');

module.exports = {
  format: {
    customES6: function(dictionary, config) {
      let toRet = '';
      console.log(JSON.stringify(dictionary.properties, null, 2));
      Object.keys(dictionary.properties).forEach(function(key) {
        Object.keys(dictionary.properties[key]).forEach(function(key2) {
          const varName = camelCase([key, key2].join(' '));

dbanksdesign

StyleDictionary.registerTransform({
  type: 'value',
  matcher: /* */,
  transformer: function(prop) {
    return `var(--${prop.name}, ${prop.original.value})`
  }
});

dbanksdesign

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

// Way 1:
// Will run both name transforms, but yours will run last
// StyleDictionary.registerTransformGroup({
//   name: 'less',
//   transforms: StyleDictionary.transformGroup.less.concat('name/ti/camel')
// });

// Way 2:

dbanksdesign

import React, { PureComponent } from 'react'
import Section from 'Components/layout/section'
import StyleDictionary from 'StyleDictionary/SellerMobileStyleDictionary/styleDictionary.json'
import checkContrast from 'Helpers/checkContrast'

const backgroundColors = Object.keys(StyleDictionary.color.background)
  .filter(key => StyleDictionary.color.background[key].value)
  .map(key => StyleDictionary.color.background[key]);

const fontColors = Object.keys(StyleDictionary.color.font)

dbanksdesign

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

StyleDictionary.registerFilter({
  name: 'test',
  matcher: (prop) => {
    return prop.attributes.category === 'color';
  }
});

StyleDictionary.extend({

dbanksdesign

{
  "PFToFontStyle": {
    "0": { "value": "UICTFontTextStyleCaption1" },
    "1": { "value": "UICTFontTextStyleSubhead" },
    "2": { "value": "UICTFontTextStyleBody" },
    "3": { "value": "UICTFontTextStyleTitle3" },
    "4": { "value": "UICTFontTextStyleTitle2" },
    "5": { "value": "UICTFontTextStyleTitle1" },
    "6": { "value": "UICTFontTextStyleTitle0" }
  },

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,

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

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

{
  "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" }
      // ..
    }