Border

Style a component's border properties

import { border } from 'jynx'

The border function gives you control of a component's border styles, providing support for both the shorthand property and all of its sub-properties including border-color, border-width, border-style, etc.

Usage

To use the border function, create a component using the BorderProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { border, BorderProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<BorderProps>`
    ${border}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<BorderProps>((props) => `
    ${border}
  `)

Props

By default, when passing a string to any border props, the raw css value is used. This means you can define border styles however you normally would:

<Component border='1px solid lightgray' />

For any borderWidth or borderRadius props, a numeric value can also be passed.

when a property's corresponding scale is defined as an array, numbers between 0 and scale.length are used as an index
when a property has no corresponding scale, the original number is used
in all instances, numeric values are converted to a px string where necessary

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create scales for borders, borderWidths, borderStyles, colors and radii within your theme, which are then accessible in their respective border props (check which scale a prop uses).

These can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* Using a simple array-based scale */
export const theme = {
  radii: [2, 4, 6, 8, 12, 16]
}

/* Using a simple object-based scale */
export const theme = {
  borders: {
    primary: '1px solid #30c7e6',
    secondary: '1px solid #2494ab',
    loading: '1px solid #cccccc',
    disabled: '1px solid #eeeeee',
    error: '1px dashed #e63c30'
  }
}

Visit the theme config page for more information on defining theme scales.

Types

When working in typescript, use the BorderProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface BorderProps {
  border?: StyleProp<CSS.Property.Border | ThemeValue<'borders'>>
  borderWidth?: StyleProp<CSS.Property.BorderWidth<string | 0 | number> | ThemeValue<'borderWidths'>>
  borderStyle?: StyleProp<CSS.Property.BorderStyle | ThemeValue<'borderStyles'>>
  borderColor?: StyleProp<CSS.Property.BorderColor | ThemeValue<'colors'>>
  borderRadius?: StyleProp<CSS.Property.BorderRadius<string | 0 | number> | ThemeValue<'radii'>>
  borderTop?: StyleProp<CSS.Property.BorderTop | ThemeValue<'borders'>>
  borderTopWidth?: StyleProp<CSS.Property.BorderTopWidth<string | 0 | number> | ThemeValue<'borderWidths'>>
  borderTopStyle?: StyleProp<CSS.Property.BorderTopStyle | ThemeValue<'borderStyles'>>
  borderTopColor?: StyleProp<CSS.Property.BorderTopColor | ThemeValue<'colors'>>
  borderTopLeftRadius?: StyleProp<CSS.Property.BorderTopLeftRadius<string | 0 | number> | ThemeValue<'radii'>>
  borderTopRightRadius?: StyleProp<CSS.Property.BorderTopRightRadius<string | 0 | number> | ThemeValue<'radii'>>
  borderRight?: StyleProp<CSS.Property.BorderRight | ThemeValue<'borders'>>
  borderRightWidth?: StyleProp<CSS.Property.BorderTopWidth<string | 0 | number> | ThemeValue<'borderWidths'>>
  borderRightStyle?: StyleProp<CSS.Property.BorderRightStyle | ThemeValue<'borderStyles'>>
  borderRightColor?: StyleProp<CSS.Property.BorderRightColor | ThemeValue<'colors'>>
  borderBottom?: StyleProp<CSS.Property.BorderBottom | ThemeValue<'borders'>>
  borderBottomWidth?: StyleProp<CSS.Property.BorderBottomWidth<string | 0 | number> | ThemeValue<'borderWidths'>>
  borderBottomStyle?: StyleProp<CSS.Property.BorderBottomStyle | ThemeValue<'borderStyles'>>
  borderBottomColor?: StyleProp<CSS.Property.BorderBottomColor | ThemeValue<'colors'>>
  borderBottomLeftRadius?: StyleProp<CSS.Property.BorderBottomLeftRadius<string | 0 | number> | ThemeValue<'radii'>>
  borderBottomRightRadius?: StyleProp<CSS.Property.BorderBottomRightRadius<string | 0 | number> | ThemeValue<'radii'>>
  borderLeft?: StyleProp<CSS.Property.BorderLeft | ThemeValue<'borders'>>
  borderLeftWidth?: StyleProp<CSS.Property.BorderLeftWidth<string | 0 | number> | ThemeValue<'borderWidths'>>
  borderLeftStyle?: StyleProp<CSS.Property.BorderLeftStyle | ThemeValue<'borderStyles'>>
  borderLeftColor?: StyleProp<CSS.Property.BorderLeftColor | ThemeValue<'colors'>>
}

API

The border function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	CSS Property	Theme Scale
border	border	borders
borderWidth	border-width	borderWidths
borderStyle	border-style	borderStyles
borderColor	border-color	colors
borderRadius	border-radius	radii
borderTop	border-top	borders
borderTopWidth	border-top-width	borderWidths
borderTopStyle	border-top-style	borderStyles
borderTopColor	border-top-color	colors
borderTopLeftRadius	border-top-left-radius	radii
borderTopRightRadius	border-top-right-radius	radii
borderRight	border-right	borders
borderRightWidth	border-right-width	borderWidths
borderRightStyle	border-right-style	borderStyles
borderRightColor	border-right-color	colors
borderBottom	border-bottom	borders
borderBottomWidth	border-bottom-width	borderWidths
borderBottomStyle	border-bottom-style	borderStyles
borderBottomColor	border-bottom-color	colors
borderBottomLeftRadius	border-bottom-left-radius	radii
borderBottomRightRadius	border-bottom-right-radius	radii
borderLeft	border-left	borders
borderLeftWidth	border-left-width	borderWidths
borderLeftStyle	border-left-style	borderStyles
borderLeftColor	border-left-color	colors

Examples

/* using plain CSS values */
<Component border='1px solid #74f1f7' />


/* with a theme scale defined */
/* `theme.radii[1]` */
<Component borderRadius={1} />

/* `theme.borders.primary` */
<Component border='primary' />


/* based on a conditional */
<Component border={isLoading ? 'loading' : 'primary'} />


/* using responsive styles */
<Component borderRadius={['6px', '8px', null, '10px']} />

<Component borderWidth={{_: '0.5px', md: '1px' lg: '2px'}} />


/* using responsive styles with theme scales */
<Component borderRadius={[0, 1, null, 3]} />

<Component borderWidth={{_: 'primary', md: 'secondary' lg: 'primary'}} />