Package Exports

@cobalt-ui/core
@cobalt-ui/core/dist/index.js
@cobalt-ui/core/dist/index.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@cobalt-ui/core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@cobalt-ui/core

Generate code from your design tokens, and sync your design tokens with Figma.

Install

npm install @cobalt-ui/core

Usage

Parse

Parse a tokens.json file into a JS object

import co from "@cobalt-ui/core";
import fs from "fs";

const schema = JSON.parse(co.parse(fs.readFileSync("./tokens.json", "utf8")));

Build

Generate code from tokens.json schema

import co from "@cobalt-ui/core";
import sass from "@cobalt-ui/sass";
import css from "@cobalt-ui/css";
import fs from "fs";

const schema = JSON.parse(co.parse(fs.readFileSync("./tokens.json", "utf8")));
const files = co.build(schema, {
  plugins: [sass(), css()],
});

Sync

Sync tokens.json with Figma

import co from "@cobalt-ui/core";
import fs from "fs";
import deepmerge from 'deepmerge'

const schema = Jco.parse(JSON.parse(fs.readFileSync("./tokens.json", "utf8")));
const updates = co.sync({
  'https://figma.com/file/ABC123?node_id=123': {
    styles: {
      Black: {type: 'color', id: 'color.black'},
    },
    components: {
      'Font / Body': {type: 'font', id: 'font.family.body'},
    },
  }
});

fs.writeFileSync('./tokens.json', deepmerge(schema, updates, {arrayMerge(a, b) => b}));