Global

Type Definitions

coreFunction(fallbackopt) → {function}

Parameters:
Name Type Attributes Description
fallback object.<(string|number|bigint)> | array.<(string|number|bigint)> | string | number | bigint <optional>
 A fallback value to use when no prop value is passed
Properties:
Name Type Description
propName stringModifier Function to set the name of the prop the component should have
p stringModifier Shorthand for propName
important modifier Function to mark the value as !important
i modifier Shorthand for important
propless modifier Function to disable using a prop
l modifier Shorthand for propless
calc stringModifier Function to add css calc() to transform the value
c stringModifier Shorthand for calc
Source:
Returns:
Function to take component props passed by styled-components
Type
function

cssMaker(value) → {array.<(string|number|bigint)>}

Parameters:
Name Type Description
value object.<(string|number|bigint)> | array.<(string|number|bigint)> | string | number | bigint A CSS value
Source:
Returns:
An array that represents a line of CSS code when joined
Type
array.<(string|number|bigint)>

modifier() → {coreFunction}

Source:
Returns:
The function it was called on
Type
coreFunction

props

An object containing a theme property
Type:
  • object
Properties:
Name Type Description
theme theme A theme object
Source:

stringModifier(string) → {coreFunction}

Parameters:
Name Type Description
string string A string value
Source:
Returns:
The function it was called on
Type
coreFunction

theme

An object containing a breakpoints or a mediaQueries property.
Type:
  • object
Properties:
Name Type Attributes Description
breakpoints object.<(string|number|bigint)> | array.<(string|number|bigint)> <optional>
 An object or array of CSS min-width values
mediaQueries object.<string> | array.<string> <optional>
 An object or array of strings containing valid media queries
Source:
Examples
{
  breakpoints: {
    mobile: '320px',
    tablet: '768px',
    desktop: '1024px'
  }
}
{
  mediaQueries: {
    mobile: '@media screen and (min-width: 320px)',
    tablet: '@media screen and (min-width: 768px)',
    desktop: '@media screen and (min-width: 1024px)'
  }
}