Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

Sign in Demo Install

Sign in Demo Install

@beatgig/synth-css

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

@beatgig/synth-css

CSS bindings for Synth.

1.0.0
npm

Version published: 5 years ago

Weekly downloads: 2

Maintainers: 2

Weekly downloads

Created: 5 years ago

`@beatgig/synth-css`

CSS bindings for Synth.

Installation

yarn add @beatgig/synth-css

Constants

backgroundColor ⇒ string: Returns CSS declaration for the background-color property.
border ⇒ string: Returns CSS declaration for the border property.
borderRadius ⇒ string: Returns CSS declaration for the border-radius property.
bottom ⇒ string: Returns CSS declaration for the bottom property.
boxShadow ⇒ string: Returns CSS declaration for the box-shadow property.
color ⇒ string: Returns CSS declaration for the color property.
fontFamily ⇒ string: Returns CSS declaration for the font-family property.
fontSize ⇒ string: Returns CSS declaration for the font-size property.
fontWeight ⇒ string: Returns CSS declaration for the font-weight property.
height ⇒ string: Returns CSS declaration for the height property.
left ⇒ string: Returns CSS declaration for the left property.
letterSpacing ⇒ string: Returns CSS declaration for the letter-spacing property.
lineHeight ⇒ string: Returns CSS declaration for the line-height property.
margin ⇒ string: Returns CSS declaration for the margin property.
maxHeight ⇒ string: Returns CSS declaration for the max-height property.
maxWidth ⇒ string: Returns CSS declaration for the max-width property.
minHeight ⇒ string: Returns CSS declaration for the min-height property.
minWidth ⇒ string: Returns CSS declaration for the min-width property.
opacity ⇒ string: Returns CSS declaration for the opacity property.
outline ⇒ string: Returns CSS declaration for the outline property using box-shadow.
padding ⇒ string: Returns CSS declaration for the padding property.
right ⇒ string: Returns CSS declaration for the right property.
textDecoration ⇒ string: Returns CSS declaration for the text-decoration property.
textTransform ⇒ string: Returns CSS declaration for the text-transform property.
top ⇒ string: Returns CSS declaration for the top property.
width ⇒ string: Returns CSS declaration for the width property.
withTokens ⇒ CSSBindings: Returns an object containing all CSS helper functions with the given tokens already passed as the first argument.
zIndex ⇒ string: Returns CSS declaration for the z-index property.

Typedefs

CSSBindings : object

backgroundColor ⇒ `string`

Returns CSS declaration for the background-color property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { backgroundColor } from '@beatgig/synth-css'

backgroundColor({
  color: {
    background: {
      primaryButton: '#333',
    },
  },
}, 'primaryButton')
// => background-color: #333;

backgroundColor({
  color: {
    background: {
      primaryButton: '#333',
      'primaryButton:hover': '#111',
    },
  },
}, 'primaryButton:hover')
// => background-color: #111;

border ⇒ `string`

Returns CSS declaration for the border property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { border } from '@beatgig/synth-css'

border({
  color: {
    border: {
      default_button: '#333',
      'default_button:hover': '#111',
    },
  },
  size: {
    border: {
      default_button: '1px',
      'default_button:hover': '2px',
    },
  },
  style: {
    border: {
      default_button: 'solid',
      'default_button:hover': 'solid',
    },
  }
}, 'default_button')
// => border-width: 1px; border-style: solid; border-color: #333;

border({
  color: {
    border: {
      default_button: '#333',
      'default_button:hover': '#111',
    },
  },
  size: {
    border: {
      default_button: '1px',
      'default_button:hover': '2px',
    },
  },
  style: {
    border: {
      default_button: 'solid',
      'default_button:hover': 'solid',
    },
  }
}, 'default_button:hover')
// => border-width: 2px; border-style: solid; border-color: #111;

borderRadius ⇒ `string`

Returns CSS declaration for the border-radius property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { borderRadius } from '@beatgig/synth-css'

borderRadius({
  size: {
    radius: {
      'primary-button': '5px',
      'primary-button:disabled': '0px',
    },
  },
}, 'primary-button')
// => border-radius: 5px;

borderRadius({
  size: {
    radius: {
      'primary-button': '5px',
      'primary-button:disabled': '0px',
    },
  },
}, 'primary-button:disabled')
// => border-radius: 0px;

bottom ⇒ `string`

Returns CSS declaration for the bottom property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { bottom } from '@beatgig/synth-css'

bottom({
  position: {
    bottom: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button')
// => bottom: 15px;

bottom({
  position: {
    bottom: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button:disabled')
// => bottom: 25px;

boxShadow ⇒ `string`

Returns CSS declaration for the box-shadow property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { boxShadow } from '@beatgig/synth-css'

boxShadow({
  style: {
    shadow: {
      textInput: '0 0 1px #333',
      'textInput:focus': '0 0 3px #333',
    },
  },
}, 'textInput')
// => box-shadow: 0 0 1px #333;

boxShadow({
  style: {
    shadow: {
      textInput: '0 0 1px #333',
      'textInput:focus': '0 0 3px #333',
    },
  },
}, 'textInput:focus')
// => box-shadow: 0 0 3px #333;

color ⇒ `string`

Returns CSS declaration for the color property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { color } from '@beatgig/synth-css'

color({
  color: {
    text: {
      caption: '#333',
      'caption:hover': '#555',
    },
  },
}, 'caption')
// => color: #333;

color({
  color: {
    text: {
      caption: '#333',
      'caption:hover': '#555',
    },
  },
}, 'caption:hover')
// => color: #555;

fontFamily ⇒ `string`

Returns CSS declaration for the font-family property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { fontFamily } from '@beatgig/synth-css'

fontFamily({
  typography: {
    font: {
      text_field: 'helvetica',
      'text_field:disabled': 'arial',
    },
  },
}, 'text_field')
// => font-family: helvetica;

fontFamily({
  typography: {
    font: {
      text_field: 'helvetica',
      'text_field:disabled': 'arial',
    },
  },
}, 'text_field:disabled')
// => font-family: arial;

fontSize ⇒ `string`

Returns CSS declaration for the font-size property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { fontSize } from '@beatgig/synth-css'

fontSize({
  typography: {
    size: {
      menu_link: '16px',
      'menu_link:disabled': '14px',
    },
  },
}, 'menu_link')
// => font-size: 16px;

fontSize({
  typography: {
    size: {
      menu_link: '16px',
      'menu_link:disabled': '14px',
    },
  },
}, 'menu_link:disabled')
// => font-size: 14px;

fontWeight ⇒ `string`

Returns CSS declaration for the font-weight property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { fontWeight } from '@beatgig/synth-css'

fontWeight({
  typography: {
    weight: {
      'menu-link': '300',
      'menu-link:hover': '600',
    },
  },
}, 'menu-link')
// => font-weight: 300;

fontWeight({
  typography: {
    weight: {
      'menu-link': '300',
      'menu-link:hover': '600',
    },
  },
}, 'menu-link:hover')
// => font-weight: 600;

height ⇒ `string`

Returns CSS declaration for the height property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { height } from '@beatgig/synth-css'

height({
  size: {
    height: {
      button: '100%',
      'button:hover': '120%',
    },
  },
}, 'button')
// => height: 100%;

height({
  size: {
    height: {
      button: '100%',
      'button:hover': '120%',
    },
  },
}, 'button:hover')
// => height: 120%;

left ⇒ `string`

Returns CSS declaration for the left property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { left } from '@beatgig/synth-css'

left({
  position: {
    left: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button')
// => left: 15px;

left({
  position: {
    left: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button:disabled')
// => left: 25px;

letterSpacing ⇒ `string`

Returns CSS declaration for the letter-spacing property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { letterSpacing } from '@beatgig/synth-css'

letterSpacing({
  typography: {
    spacing: {
      'menu-link': 'normal',
      'menu-link:disabled': '4px',
    },
  },
}, 'menu-link')
// => letter-spacing: normal;

letterSpacing({
  typography: {
    spacing: {
      'menu-link': 'normal',
      'menu-link:disabled': '4px',
    },
  },
}, 'menu-link:disabled')
// => letter-spacing: 4px;

lineHeight ⇒ `string`

Returns CSS declaration for the line-height property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { lineHeight } from '@beatgig/synth-css'

lineHeight({
  typography: {
    lineHeight: {
      'menu_link': 1.5,
      'menu_link:disabled': 1.65,
    },
  },
}, 'menu_link')
// => line-height: 1.5;

lineHeight({
  typography: {
    lineHeight: {
      'menu_link': 1.5,
      'menu_link:disabled': 1.65,
    },
  },
}, 'menu_link:disabled')
// => line-height: 1.65;

margin ⇒ `string`

Returns CSS declaration for the margin property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { margin } from '@beatgig/synth-css'

margin({
  space: {
    margin: {
      'primaryButton': '10%',
      'primaryButton:hover': '25%'
    },
  },
}, 'primaryButton')
// => margin: 10%;

margin({
  space: {
    margin: {
      'primaryButton': '10%',
      'primaryButton:hover': '25%'
    },
  },
}, 'primaryButton:hover')
// => margin: 25%;

maxHeight ⇒ `string`

Returns CSS declaration for the max-height property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { maxHeight } from '@beatgig/synth-css'

maxHeight({
  size: {
    maxHeight: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton')
// => max-height: 120px;

maxHeight({
  size: {
    maxHeight: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton:hover')
// => max-height: 100%;

maxWidth ⇒ `string`

Returns CSS declaration for the max-width property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { maxWidth } from '@beatgig/synth-css'

maxWidth({
  size: {
    maxWidth: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton')
// => max-width: 120px;

maxWidth({
  size: {
    maxWidth: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton:hover')
// => max-width: 100%;

minHeight ⇒ `string`

Returns CSS declaration for the min-height property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { minHeight } from '@beatgig/synth-css'

minHeight({
  size: {
    minHeight: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton')
// => min-height: 120px;

minHeight({
  size: {
    minHeight: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton:hover')
// => min-height: 100%;

minWidth ⇒ `string`

Returns CSS declaration for the min-width property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { minWidth } from '@beatgig/synth-css'

minWidth({
  size: {
    minWidth: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton')
// => min-width: 120px;

minWidth({
  size: {
    minWidth: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton:hover')
// => min-width: 100%;

opacity ⇒ `string`

Returns CSS declaration for the opacity property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { opacity } from '@beatgig/synth-css'

opacity({
  style: {
    opacity: {
      form_button: 1,
      'form_button:disabled': 0.5,
    },
  },
}, 'form_button')
// => opacity: 1;

opacity({
  style: {
    opacity: {
      form_button: 1,
      'form_button:disabled': 0.5,
    },
  },
}, 'form_button:disabled')
// => opacity: 0.5;

outline ⇒ `string`

Returns CSS declaration for the outline property using box-shadow.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { outline } from '@beatgig/synth-css'

outline({
  color: {
    outline: {
      modalInput: '#333',
      'modalInput:focus': '#222',
    },
  },
  size: {
    outline: {
      modalInput: '1px',
      'modalInput:focus': '3px'
    }
  }
}, 'modalInput')
// => box-shadow: 0 0 0 1px #333;

outline({
  color: {
    outline: {
      modalInput: '#333',
      'modalInput:focus': '#222',
    },
  },
  size: {
    outline: {
      modalInput: '1px',
      'modalInput:focus': '3px'
    }
  }
}, 'modalInput:focus')
// => box-shadow: 0 0 0 3px #222;

padding ⇒ `string`

Returns CSS declaration for the padding property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { padding } from '@beatgig/synth-css'

padding({
  space: {
    padding: {
      'primaryButton': '10px 15px',
      'primaryButton:hover': '15%'
    },
  },
}, 'primaryButton')
// => padding: 10px 15px;

padding({
  space: {
    padding: {
      'primaryButton': '10px 15px',
      'primaryButton:hover': '15%'
    },
  },
}, 'primaryButton:hover')
// => padding: 15%;

right ⇒ `string`

Returns CSS declaration for the right property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

right({
  position: {
    right: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px'
    },
  },
}, 'card_close_button')
// => right: 15px;

right({
  position: {
    right: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px'
    },
  },
}, 'card_close_button:disabled')
// => right: 25px;

textDecoration ⇒ `string`

Returns CSS declaration for the text-decoration property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { textDecoration } from '@beatgig/synth-css'

textDecoration({
  typography: {
    decoration: {
      menu_link: 'none',
      'menu_link:hover': 'underline',
    },
  },
}, 'menu_link')
// => text-decoration: none;

textDecoration({
  typography: {
    decoration: {
      menu_link: 'none',
      'menu_link:hover': 'underline',
    },
  },
}, 'menu_link:hover')
// => text-decoration: underline;

textTransform ⇒ `string`

Returns CSS declaration for the text-transform property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { textTransform } from '@beatgig/synth-css'

textTransform({
  typography: {
    transform: {
      menuLink: 'lowercase',
      'menuLink:hover': 'uppercase',
    },
  },
}, 'menuLink')
// => text-transform: lowercase;

textTransform({
  typography: {
    transform: {
      menuLink: 'lowercase',
      'menuLink:hover': 'uppercase',
    },
  },
}, 'menuLink:hover')
// => text-transform: uppercase;

top ⇒ `string`

Returns CSS declaration for the top property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { top } from '@beatgig/synth-css'

top({
  position: {
    top: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button')
// => top: 15px;

top({
  position: {
    top: {
      card_close_button: '15px',
      'card_close_button:disabled': '25px',
    },
  },
}, 'card_close_button:disabled')
// => top: 25px;

width ⇒ `string`

Returns CSS declaration for the width property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { width } from '@beatgig/synth-css'

width({
  size: {
    width: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton')
// => width: 120px;

width({
  size: {
    width: {
      primaryButton: '120px',
      'primaryButton:hover': '100%',
    },
  },
}, 'primaryButton:hover')
// => width: 100%;

withTokens ⇒ `CSSBindings`

Returns an object containing all CSS helper functions with the given tokens already passed as the first argument.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`

Example

import { withTokens } from '@beatgig/synth-css'

const cssHelpers = withTokens({
  color: {
    background: {
      button: 'red',
    },
  },
})

cssHelpers.backgroundColor('button')
// => background-color: 'red';

zIndex ⇒ `string`

Returns CSS declaration for the z-index property.

Kind: global constant
Since: 1.0.0

Param	Type
tokens	`object`
name	`string`

Example

import { zIndex } from '@beatgig/synth-css'

zIndex({
  position: {
    index: {
      card_close_button: 1,
      'card_close_button:hover': 5
    },
  },
}, 'card_close_button')
// => z-index: 1;

zIndex({
  position: {
    index: {
      card_close_button: 1,
      'card_close_button:hover': 5
    },
  },
}, 'card_close_button:hover')
// => z-index: 5;

CSSBindings : `object`

Kind: global typedef
Properties

Name	Type
backgroundColor	`function`
border	`function`
borderRadius	`function`
bottom	`function`
boxShadow	`function`
color	`function`
fontFamily	`function`
fontSize	`function`
fontWeight	`function`
height	`function`
left	`function`
letterSpacing	`function`
lineHeight	`function`
margin	`function`
maxHeight	`function`
maxWidth	`function`
minHeight	`function`
minWidth	`function`
opacity	`function`
outline	`function`
padding	`function`
right	`function`
textDecoration	`function`
textTransform	`function`
top	`function`
width	`function`
zIndex	`function`

FAQs

What is @beatgig/synth-css?

Is @beatgig/synth-css popular?

Is @beatgig/synth-css well maintained?

Package last updated on 28 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Related posts