API
Reference tables for all Jynx's exported functions
Functions
Animation
import { animation } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| animation | animation | StyleProp<CSS.Property.Animation> | ||
| animationDelay | animation-delay | StyleProp<CSS.Property.AnimationDelay<string | 0 | number>> | ||
| animationDirection | animation-direction | StyleProp<CSS.Property.AnimationDirection> | ||
| animationDuration | animation-duration | StyleProp<CSS.Property.AnimationDuration<string | 0 | number>> | ||
| animationFillMode | animation-fill-mode | StyleProp<CSS.Property.AnimationFillMode> | ||
| animationIterationCount | animation-iteration-count | StyleProp<CSS.Property.AnimationIterationCount> | ||
| animationName | animation-name | StyleProp<CSS.Property.AnimationName> | ||
| animationPlayState | animation-play-state | StyleProp<CSS.Property.AnimationPlayState> | ||
| animationTimingFunction | animation-timing-function | StyleProp<CSS.Property.AnimationTimingFunction> |
Border
import { border } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| border | border | borders | StyleProp<CSS.Property.Border | ThemeValue<'borders'>> | |
| borderWidth | border-width | borderWidths | StyleProp<CSS.Property.BorderWidth<string | 0 | number> | ThemeValue<'borderWidths'>> | |
| borderStyle | border-style | borderStyles | StyleProp<CSS.Property.BorderStyle | ThemeValue<'borderStyles'>> | |
| borderColor | border-color | colors | StyleProp<CSS.Property.BorderColor | ThemeValue<'colors'>> | |
| borderRadius | border-radius | radii | StyleProp<CSS.Property.BorderRadius<string | 0 | number> | ThemeValue<'radii'>> | |
| borderTop | border-top | borders | StyleProp<CSS.Property.BorderTop | ThemeValue<'borders'>> | |
| borderTopWidth | border-top-width | borderWidths | StyleProp<CSS.Property.BorderTopWidth<string | 0 | number> | ThemeValue<'borderWidths'>> | |
| borderTopStyle | border-top-style | borderStyles | StyleProp<CSS.Property.BorderTopStyle | ThemeValue<'borderStyles'>> | |
| borderTopColor | border-top-color | colors | StyleProp<CSS.Property.BorderTopColor | ThemeValue<'colors'>> | |
| borderTopLeftRadius | border-top-left-radius | radii | StyleProp<CSS.Property.BorderTopLeftRadius<string | 0 | number> | ThemeValue<'radii'>> | |
| borderTopRightRadius | border-top-right-radius | radii | StyleProp<CSS.Property.BorderTopRightRadius<string | 0 | number> | ThemeValue<'radii'>> | |
| borderRight | border-right | borders | StyleProp<CSS.Property.BorderRight | ThemeValue<'borders'>> | |
| borderRightWidth | border-right-width | borderWidths | StyleProp<CSS.Property.BorderTopWidth<string | 0 | number> | ThemeValue<'borderWidths'>> | |
| borderRightStyle | border-right-style | borderStyles | StyleProp<CSS.Property.BorderRightStyle | ThemeValue<'borderStyles'>> | |
| borderRightColor | border-right-color | colors | StyleProp<CSS.Property.BorderRightColor | ThemeValue<'colors'>> | |
| borderBottom | border-bottom | borders | StyleProp<CSS.Property.BorderBottom | ThemeValue<'borders'>> | |
| borderBottomWidth | border-bottom-width | borderWidths | StyleProp<CSS.Property.BorderBottomWidth<string | 0 | number> | ThemeValue<'borderWidths'>> | |
| borderBottomStyle | border-bottom-style | borderStyles | StyleProp<CSS.Property.BorderBottomStyle | ThemeValue<'borderStyles'>> | |
| borderBottomColor | border-bottom-color | colors | StyleProp<CSS.Property.BorderBottomColor | ThemeValue<'colors'>> | |
| borderBottomLeftRadius | border-bottom-left-radius | radii | StyleProp<CSS.Property.BorderBottomLeftRadius<string | 0 | number> | ThemeValue<'radii'>> | |
| borderBottomRightRadius | border-bottom-right-radius | radii | StyleProp<CSS.Property.BorderBottomRightRadius<string | 0 | number> | ThemeValue<'radii'>> | |
| borderLeft | border-left | borders | StyleProp<CSS.Property.BorderLeft | ThemeValue<'borders'>> | |
| borderLeftWidth | border-left-width | borderWidths | StyleProp<CSS.Property.BorderLeftWidth<string | 0 | number> | ThemeValue<'borderWidths'>> | |
| borderLeftStyle | border-left-style | borderStyles | StyleProp<CSS.Property.BorderLeftStyle | ThemeValue<'borderStyles'>> | |
| borderLeftColor | border-left-color | colors | StyleProp<CSS.Property.BorderLeftColor | ThemeValue<'colors'>> |
Background
import { background } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| background | bg | background | StyleProp<CSS.Property.Background> | |
| backgroundAttachment | bgAttachment | background-attachment | StyleProp<CSS.Property.BackgroundAttachment> | |
| backgroundBlendMode | bgBlendMode | background-blend-mode | StyleProp<CSS.Property.BackgroundBlendMode> | |
| backgroundClip | bgClip | background-clip | StyleProp<CSS.Property.BackgroundClip> | |
| backgroundImage | bgImage | background-image | StyleProp<CSS.Property.BackgroundImage> | |
| backgroundOrigin | bgOrigin | background-origin | StyleProp<CSS.Property.BackgroundOrigin> | |
| backgroundPosition | bgPos | background-position | StyleProp<CSS.Property.BackgroundPosition> | |
| backgroundPositionX | bgPosX | background-positionX | StyleProp<CSS.Property.BackgroundPositionX> | |
| backgroundPositionY | bgPosY | background-positionY | StyleProp<CSS.Property.BackgroundPositionY> | |
| backgroundRepeat | bgRepeat | background-repeat | StyleProp<CSS.Property.BackgroundRepeat> | |
| backgroundSize | bgSize | background-size | StyleProp<CSS.Property.BackgroundSize> |
Color
import { color } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| color | color | colors | StyleProp<CSS.Property.Color | ThemeValue<'colors'>> | |
| backgroundColor | bgColor | background-color | colors | StyleProp<CSS.Property.BackgroundColor | ThemeValue<'colors'>> |
| opacity | opacity | StyleProp<CSS.Property.Opacity> |
Flexbox
import { flexbox } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| flex | flex | StyleProp<CSS.Property.Flex> | ||
| flexDirection | flex-direction | StyleProp<CSS.Property.FlexDirection> | ||
| flexFlow | flex-flow | StyleProp<CSS.Property.FlexFlow> | ||
| flexWrap | flex-wrap | StyleProp<CSS.Property.FlexWrap> | ||
| alignItems | align-items | StyleProp<CSS.Property.AlignItems> | ||
| alignContent | align-content | StyleProp<CSS.Property.AlignContent> | ||
| alignSelf | align-self | StyleProp<CSS.Property.AlignSelf> | ||
| justifyContent | justify-content | StyleProp<CSS.Property.JustifyContent> | ||
| gap | gap | space | StyleProp<CSS.Property.Gap<string | 0 | number> | ThemeValue<'space'>> | |
| flexGrow | flex-grow | StyleProp<CSS.Property.FlexGrow> | ||
| flexShrink | flex-shrink | StyleProp<CSS.Property.FlexShrink> | ||
| flexBasis | flex-basis | StyleProp<CSS.Property.FlexBasis> | ||
| order | order | StyleProp<CSS.Property.Order> |
Extended Flexbox
import { extendedFlexbox } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| direction | flex-direction | StyleProp<CSS.Property.FlexDirection> | ||
| flow | flex-flow | StyleProp<CSS.Property.FlexFlow> | ||
| wrap | flex-wrap | StyleProp<CSS.Property.FlexWrap> | ||
| align | align-items | StyleProp<CSS.Property.AlignItems> | ||
| justify | justify-content | StyleProp<CSS.Property.JustifyContent> | ||
| grow | flex-grow | StyleProp<CSS.Property.FlexGrow> | ||
| shrink | flex-shrink | StyleProp<CSS.Property.FlexShrink> | ||
| basis | flex-basis | StyleProp<CSS.Property.FlexBasis> |
The props for extendedFlexbox are in addition to those available in flexbox
Grid
import { grid } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| grid | grid | StyleProp<CSS.Property.Grid> | ||
| gridTemplate | grid-template | StyleProp<CSS.Property.GridTemplate> | ||
| gridTemplateColumns | grid-template-columns | StyleProp<CSS.Property.GridTemplateColumns> | ||
| gridTemplateRows | grid-template-rows | StyleProp<CSS.Property.GridTemplateRows> | ||
| gridTemplateAreas | grid-template-areas | StyleProp<CSS.Property.GridTemplateAreas> | ||
| columnGap | column-gap | space | StyleProp<CSS.Property.ColumnGap<string | 0 | number> | ThemeValue<'space'>> | |
| rowGap | row-gap | space | StyleProp<CSS.Property.RowGap<string | 0 | number> | ThemeValue<'space'>> | |
| gap | gap | space | StyleProp<CSS.Property.Gap<string | 0 | number> | ThemeValue<'space'>> | |
| gridJustifyItems | grid-justify-items | StyleProp<CSS.Property.JustifyItems> | ||
| gridAlignItems | grid-align-items | StyleProp<CSS.Property.AlignItems> | ||
| gridPlaceItems | grid-place-items | StyleProp<CSS.Property.PlaceItems> | ||
| gridJustifyContent | grid-justify-content | StyleProp<CSS.Property.JustifyContent> | ||
| gridAlignContent | grid-align-content | StyleProp<CSS.Property.AlignContent> | ||
| gridPlaceContent | grid-place-content | StyleProp<CSS.Property.PlaceContent> | ||
| gridAutoColumns | grid-auto-columns | StyleProp<CSS.Property.GridAutoColumns> | ||
| gridAutoRows | grid-auto-rows | StyleProp<CSS.Property.GridAutoRows> | ||
| gridAutoFlow | grid-auto-flow | StyleProp<CSS.Property.GridAutoFlow> | ||
| gridColumn | grid-column | StyleProp<CSS.Property.GridColumn> | ||
| gridRow | grid-row | StyleProp<CSS.Property.GridRow> | ||
| gridArea | grid-area | StyleProp<CSS.Property.GridArea> | ||
| gridRowStart | grid-row-start | StyleProp<CSS.Property.GridRowStart> | ||
| gridRowEnd | grid-row-end | StyleProp<CSS.Property.GridRowEnd> | ||
| gridColumnStart | grid-column-start | StyleProp<CSS.Property.GridColumnStart> | ||
| gridColumnEnd | grid-column-end | StyleProp<CSS.Property.GridColumnEnd> | ||
| alignSelf | align-self | StyleProp<CSS.Property.AlignSelf> | ||
| justifySelf | justify-self | StyleProp<CSS.Property.JustifySelf> | ||
| placeSelf | place-self | StyleProp<CSS.Property.PlaceSelf> |
Extended Grid
import { extendedGrid } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| template | grid-template | StyleProp<CSS.Property.GridTemplate> | ||
| templateColumns | grid-template-columns | StyleProp<CSS.Property.GridTemplateColumns> | ||
| templateRows | grid-template-rows | StyleProp<CSS.Property.GridTemplateRows> | ||
| templateAreas | grid-template-areas | StyleProp<CSS.Property.GridTemplateAreas> | ||
| justifyItems | justify-items | StyleProp<CSS.Property.JustifyItems> | ||
| alignItems | align-items | StyleProp<CSS.Property.AlignItems> | ||
| placeItems | place-items | StyleProp<CSS.Property.PlaceItems> | ||
| justifyContent | justify-content | StyleProp<CSS.Property.JustifyContent> | ||
| alignContent | align-content | StyleProp<CSS.Property.AlignContent> | ||
| placeContent | place-content | StyleProp<CSS.Property.PlaceContent> | ||
| autoColumns | grid-auto-columns | StyleProp<CSS.Property.GridAutoColumns> | ||
| autoRows | grid-auto-rows | StyleProp<CSS.Property.GridAutoRows> | ||
| autoFlow | grid-auto-flow | StyleProp<CSS.Property.GridAutoFlow> | ||
| column | grid-column | StyleProp<CSS.Property.GridColumn> | ||
| row | grid-row | StyleProp<CSS.Property.GridRow> | ||
| area | grid-area | StyleProp<CSS.Property.GridArea> | ||
| rowStart | grid-row-start | StyleProp<CSS.Property.GridRowStart> | ||
| rowEnd | grid-row-end | StyleProp<CSS.Property.GridRowEnd> | ||
| columnStart | grid-column-start | StyleProp<CSS.Property.ColumnStart> | ||
| columnEnd | grid-column-end | StyleProp<CSS.Property.ColumnEnd> |
The props for extendedGrid are in addition to those available in grid
Layout
import { layout } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| width | w | width | space | StyleProp<CSS.Property.Width<string | 0 | number>> | ThemeValue<'space'>> |
| height | h | height | space | StyleProp<CSS.Property.Height<string | 0 | number>> | ThemeValue<'space'>> |
| minWidth | minW | min-width | space | StyleProp<CSS.Property.MinWidth<string | 0 | number>> | ThemeValue<'space'>> |
| minHeight | minH | min-height | space | StyleProp<CSS.Property.MinHeight<string | 0 | number>> | ThemeValue<'space'>> |
| maxWidth | maxW | max-width | space | StyleProp<CSS.Property.MaxWidth<string | 0 | number>> | ThemeValue<'space'>> |
| maxHeight | maxH | max-height | space | StyleProp<CSS.Property.MaxHeight<string | 0 | number>> | ThemeValue<'space'>> |
| display | d | display | StyleProp<CSS.Property.Display> | |
| transform | t | transform | StyleProp<CSS.Property.Transform> | |
| transformOrigin | transform-origin | StyleProp<CSS.Property.TransformOrigin> | ||
| overflow | overflow | StyleProp<CSS.Property.Overflow> | ||
| overflowX | overflow-x | StyleProp<CSS.Property.OverflowX> | ||
| overflowY | overflow-y | StyleProp<CSS.Property.OverflowY> | ||
| verticalAlign | vAlign | vertical-align | StyleProp<CSS.Property.VerticalAlign> |
Position
import { position } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| position | pos | position | StyleProp<CSS.Property.Position> | |
| top | top | space | StyleProp<CSS.Property.Top<string | 0 | number> | ThemeValue<'space'>> | |
| right | right | space | StyleProp<CSS.Property.Right<string | 0 | number> | ThemeValue<'space'>> | |
| bottom | bottom | space | StyleProp<CSS.Property.Bottom<string | 0 | number> | ThemeValue<'space'>> | |
| left | left | space | StyleProp<CSS.Property.Left<string | 0 | number> | ThemeValue<'space'>> | |
| zIndex | z | z-index | zIndices | StyleProp<CSS.Property.ZIndex | ThemeValue<'zIndices'>> |
Shadow
import { shadow } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| boxShadow | box-shadow | shadows | StyleProp<CSS.BoxShadow.ZIndex | ThemeValue<'shadows'>> | |
| textShadow | text-shadow | shadows | StyleProp<CSS.TextShadow.ZIndex | ThemeValue<'shadows'>> |
Space
import { space } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| margin | m | margin | space | StyleProp<CSS.Property.Margin<string | 0 | number> | ThemeValue<'space'>> |
| marginTop | mt | margin-top | space | StyleProp<CSS.Property.MarginTop<string | 0 | number> | ThemeValue<'space'>> |
| marginRight | mr | margin-right | space | StyleProp<CSS.Property.MarginRight<string | 0 | number> | ThemeValue<'space'>> |
| marginBottom | mb | margin-bottom | space | StyleProp<CSS.Property.MarginBottom<string | 0 | number> | ThemeValue<'space'>> |
| marginLeft | ml | margin-left | space | StyleProp<CSS.Property.MarginLeft<string | 0 | number> | ThemeValue<'space'>> |
| marginBlock | mbl | margin-block | space | StyleProp<CSS.Property.MarginBlock<string | 0 | number> | ThemeValue<'space'>> |
| marginBlockStart | mbs | margin-block-start | space | StyleProp<CSS.Property.MarginBlockStart<string | 0 | number> | ThemeValue<'space'>> |
| marginBlockEnd | mbe | margin-block-end | space | StyleProp<CSS.Property.MarginBlockEnd<string | 0 | number> | ThemeValue<'space'>> |
| marginInline | mi | margin-inline | space | StyleProp<CSS.Property.MarginInline<string | 0 | number> | ThemeValue<'space'>> |
| marginInlineStart | mis | margin-inline-start | space | StyleProp<CSS.Property.MarginInlineStart<string | 0 | number> | ThemeValue<'space'>> |
| marginInlineEnd | mie | margin-inline-end | space | StyleProp<CSS.Property.MarginInlineEnd<string | 0 | number> | ThemeValue<'space'>> |
| padding | p | padding | space | StyleProp<CSS.Property.Padding<string | 0 | number> | ThemeValue<'space'>> |
| paddingTop | pt | padding-top | space | StyleProp<CSS.Property.PaddingTop<string | 0 | number> | ThemeValue<'space'>> |
| paddingRight | pr | padding-right | space | StyleProp<CSS.Property.PaddingRight<string | 0 | number> | ThemeValue<'space'>> |
| paddingBottom | pb | padding-bottom | space | StyleProp<CSS.Property.PaddingBottom<string | 0 | number> | ThemeValue<'space'>> |
| paddingLeft | pl | padding-left | space | StyleProp<CSS.Property.PaddingLeft<string | 0 | number> | ThemeValue<'space'>> |
| paddingBlock | pbl | padding-block | space | StyleProp<CSS.Property.PaddingBlock<string | 0 | number> | ThemeValue<'space'>> |
| paddingBlockStart | pbs | padding-block-start | space | StyleProp<CSS.Property.PaddingBlockStart<string | 0 | number> | ThemeValue<'space'>> |
| paddingBlockEnd | pbe | padding-block-end | space | StyleProp<CSS.Property.PaddingBlockEnd<string | 0 | number> | ThemeValue<'space'>> |
| paddingInline | pi | padding-inline | space | StyleProp<CSS.Property.PaddingInline<string | 0 | number> | ThemeValue<'space'>> |
| paddingInlineStart | pis | padding-inline-start | space | StyleProp<CSS.Property.PaddingInlineStart<string | 0 | number> | ThemeValue<'space'>> |
| paddingInlineEnd | pie | padding-inline-end | space | StyleProp<CSS.Property.PaddingInlineEnd<string | 0 | number> | ThemeValue<'space'>> |
Transition
import { transition } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| transition | transition | transitions | StyleProp<CSS.Property.Transition | ThemeValue<'transitions'>> | |
| transitionProperty | transition-property | StyleProp<CSS.Property.TransitionProperty> | ||
| transitionDuration | transition-duration | StyleProp<CSS.Property.TransitionDuration<string | 0 | number>> | ||
| transitionTimingFunction | transition-timing-function | StyleProp<CSS.Property.TransitionTimingFunction<string | 0 | number>> | ||
| transitionDelay | transition-delay | StyleProp<CSS.Property.TransitionDelay<string | 0 | number>> |
Typography
import { typography } from 'jynx'
| Prop | Shorthand | CSS Property | Theme Scale | Type |
|---|---|---|---|---|
| fontFamily | font-family | fonts | StyleProp<CSS.Property.FontFamily | ThemeValue<'fonts'>> | |
| fontSize | font-size | fontSizes | StyleProp<CSS.Property.FontSize<string | 0 | number> | ThemeValue<'fontSizes'>> | |
| fontStyle | font-style | StyleProp<CSS.Property.FontStyle> | ||
| fontWeight | font-weight | fontWeights | StyleProp<CSS.Property.FontWeight<string | 0 | number> | ThemeValue<'fontWeights'>> | |
| letterSpacing | letter-spacing | letterSpacings | StyleProp<CSS.Property.LetterSpacing<string | 0 | number> | ThemeValue<'letterSpacings'>> | |
| lineHeight | line-height | lineHeights | StyleProp<CSS.Property.LineHeight<string | 0 | number> | ThemeValue<'lineHeights'>> | |
| textAlign | text-align | StyleProp<CSS.Property.TextAlign> | ||
| textDecoration | text-decoration | StyleProp<CSS.Property.TextDecoration> | ||
| textOverflow | text-overflow | StyleProp<CSS.Property.TextOverflow> | ||
| textTransform | text-transform | StyleProp<CSS.Property.TextTransform> | ||
| whiteSpace | white-space | StyleProp<CSS.Property.WhiteSpace> | ||
| wordBreak | word-break | StyleProp<CSS.Property.WordBreak> |