@beatgig/synth-core

Core library to manage token declarations

Usage no npm install needed!

<script type="module">
  import beatgigSynthCore from 'https://cdn.skypack.dev/@beatgig/synth-core';
</script>

README

@beatgig/synth-core

The Synth core library provides functions to work with token declarations.

Installation

yarn add @beatgig/synth-core

Constants

TOKEN_CATEGORY_COLOR : string
TOKEN_CATEGORY_POSITION : string
TOKEN_CATEGORY_SIZE : string
TOKEN_CATEGORY_SPACE : string
TOKEN_CATEGORY_STYLE : string
TOKEN_CATEGORY_TYPOGRAPHY : string
TOKEN_CATEGORIES : Array.<String>
TOKEN_PROPERTY_BACKGROUND : string
TOKEN_PROPERTY_BORDER : string
TOKEN_PROPERTY_BOTTOM : string
TOKEN_PROPERTY_COLOR : string
TOKEN_PROPERTY_FONT_FAMILY : string
TOKEN_PROPERTY_FONT_SIZE : string
TOKEN_PROPERTY_HEIGHT : string
TOKEN_PROPERTY_INDEX : string
TOKEN_PROPERTY_LEFT : string
TOKEN_PROPERTY_LINE_HEIGHT : string
TOKEN_PROPERTY_MARGIN : string
TOKEN_PROPERTY_MAX_HEIGHT : string
TOKEN_PROPERTY_MAX_WIDTH : string
TOKEN_PROPERTY_MIN_HEIGHT : string
TOKEN_PROPERTY_MIN_WIDTH : string
TOKEN_PROPERTY_OPACITY : string
TOKEN_PROPERTY_OUTLINE : string
TOKEN_PROPERTY_PADDING : string
TOKEN_PROPERTY_RADIUS : string
TOKEN_PROPERTY_RIGHT : string
TOKEN_PROPERTY_SHADOW : string
TOKEN_PROPERTY_SPACING : string
TOKEN_PROPERTY_TEXT_DECORATION : string
TOKEN_PROPERTY_TOP : string
TOKEN_PROPERTY_TEXT_TRANSFORM : string
TOKEN_PROPERTY_WEIGHT : string
TOKEN_PROPERTY_WIDTH : string
TOKEN_PROPERTIES : Array.<String>
TOKEN_PROPERTY_CSS_MAP : object
getCSSDeclaration ⇒ string

Returns a CSS declaration mapping to the given token.

getCSSProperty ⇒ string

Returns a CSS property mapping to the given token.

getTokenParts ⇒ TokenParts

Returns an object containing all the parts of a Synth token.

getTokenValue ⇒ string

Returns a the value of the given token declaration.

isTokenDeclaration ⇒ boolean

Validates that the given value is a valid Synth token declaration.

isTokenName ⇒ boolean

Validates that the given value is a valid Synth token name.

isTokenType ⇒ boolean

Validates that the given value is a valid Synth token type.

Typedefs

TokenParts : object

TOKEN_CATEGORY_COLOR : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORY_POSITION : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORY_SIZE : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORY_SPACE : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORY_STYLE : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORY_TYPOGRAPHY : string

Kind: global constant
Since: 1.0.0

TOKEN_CATEGORIES : Array.<String>

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_BACKGROUND : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_BORDER : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_BOTTOM : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_COLOR : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_FONT_FAMILY : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_FONT_SIZE : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_HEIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_INDEX : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_LEFT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_LINE_HEIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_MARGIN : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_MAX_HEIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_MAX_WIDTH : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_MIN_HEIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_MIN_WIDTH : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_OPACITY : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_OUTLINE : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_PADDING : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_RADIUS : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_RIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_SHADOW : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_SPACING : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_TEXT_DECORATION : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_TOP : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_TEXT_TRANSFORM : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_WEIGHT : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_WIDTH : string

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTIES : Array.<String>

Kind: global constant
Since: 1.0.0

TOKEN_PROPERTY_CSS_MAP : object

Kind: global constant
Since: 1.0.0

getCSSDeclaration ⇒ string

Returns a CSS declaration mapping to the given token.

Kind: global constant
Since: 1.0.0

Param Type Description
tokens object A valid Synth token declaration object.
tokenName string A valid Synth token name.

Example

getCSSDeclaration({
  color: {
    background: {
      button: 'red',
    },
  },
}, 'color:background:button')
// => "background-color: red;"

getCSSProperty ⇒ string

Returns a CSS property mapping to the given token.

Kind: global constant
Since: 1.0.0

Param Type Description
tokenType string A valid Synth token type, e.g. color:text.

Example

getCSSProperty('color:background')
// => "background-color"

getCSSProperty('typography:font')
// => "font-family"

getTokenParts ⇒ TokenParts

Returns an object containing all the parts of a Synth token.

Kind: global constant
Since: 1.0.0

Param Type Description
tokenName string A valid Synth token name, e.g. color:text:button.

Example

getTokenParts('color:background:button')
// => { category: 'color', name: 'button', property: 'background' }

getTokenParts('color:background:button:hover')
// => { category: 'color', name: 'button:hover', property: 'background' }

getTokenValue ⇒ string

Returns a the value of the given token declaration.

Kind: global constant
Since: 1.0.0

Param Type Description
tokens object A valid Synth token declaration object.
tokenName string A valid Synth token name.

Example

getTokenValue({
  color: {
    background: {
      button: 'red',
    },
  },
}, 'color:background:button')
// => "red"

isTokenDeclaration ⇒ boolean

Validates that the given value is a valid Synth token declaration.

Kind: global constant
Since: 1.0.0

Param Type
tokens object

Example

isTokenDeclaration({
  color: {
    background: {
      button: 'red',
    },
  },
})
// => true

isTokenDeclaration('size:maxWidth')
// => false

isTokenDeclaration({})
// => false

isTokenName ⇒ boolean

Validates that the given value is a valid Synth token name.

Kind: global constant
Since: 1.0.0

Param Type
tokenName string

Example

isTokenName('color:text:button')
// => true

isTokenName('@lightGrey')
// => true

isTokenName('hello:world:button')
// => false

isTokenName('hello')
// => false

isTokenType ⇒ boolean

Validates that the given value is a valid Synth token type.

Kind: global constant
Since: 1.0.0

Param Type
tokenType string

Example

isTokenType('color:text')
// => true

isTokenType('size:maxWidth')
// => true

isTokenType('hello:world')
// => false

isTokenType('hello')
// => false

TokenParts : object

Kind: global typedef
Properties

Name Type
category string
name string
property string