@beatgig/synth-core
The Synth core library provides functions to work with token declarations.
Installation
yarn add @beatgig/synth-coreConstants
-
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 |