Color Token To Hex Object Js Ts

Last update

May 17, 2024

In JS/TS files, for tokens of the type 'color' (not other tokens), transform $value into an object with a 'hex' key, where the value remains the same as the previous $value

Before

const tokens = {
  interactive: {
    '100': {
      $value: '<some string>',
      $type: 'color',
    },
  },
  someOtherColorToken: {
    $value: '#DBF0FF',
    $type: 'color',
  },
};

After

const tokens = {
  interactive: {
    '100': {
      $value: { hex: '<some string>' },
      $type: 'color',
    },
  },
  someOtherColorToken: {
    $value: { hex: '#DBF0FF' },
    $type: 'color',
  },
};

In JS/TS files, for tokens of the type 'color' (not other tokens), transform $value into an object with a 'hex' key, where the value remains the same as the previous $value

Before

const tokens = {
  interactive: {
    '100': {
      $value: '<some string>',
      $type: 'color',
    },
  },
  someOtherColorToken: {
    $value: '#DBF0FF',
    $type: 'color',
  },
};

After

const tokens = {
  interactive: {
    '100': {
      $value: { hex: '<some string>' },
      $type: 'color',
    },
  },
  someOtherColorToken: {
    $value: { hex: '#DBF0FF' },
    $type: 'color',
  },
};

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now