@beatgig/synth-core

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

Installation

yarn add @beatgig/synth-core

Constants

Typedefs

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 |