Color

Style a component's color properties

import { color } from 'jynx'

The color function gives you control of a component's color styles, providing support for color, background-color and opacity properties.

Usage

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

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


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

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

Props

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

<Component color='hsla(175deg, 80%, 60%, 0.65)' />

The opacity prop can also accept numeric values.

<Component opacity={0.6} />

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 a colors scale within your theme, which is then accessible in color-based props (check which scale a prop uses).

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

/* simple array-based scale */
export const theme = {
  colors: ['red', 'blue', 'green', 'yellow']
}

/* simple object-based scale */
export const theme = {
  colors: {
    primary: 'rgb(70, 8, 128)',
    secondary: 'rgb(58, 212, 214)',
    tertiary: 'rgb(252, 164, 247)'
  }
}

/* complex nested scale */
export const theme = {
  colors: {
    neutrals: ['#535859', '#80878a', '#b2bdc2'],
    accent: {
      primary: 'hsla(126deg, 45%, 44%, 1)',
      secondary: 'hsla(146deg, 50%, 70%, 0.625)'
    },
    brand: {
      purples: ['#622a87', '#7c2eb0', '#9c30e3'],
      pinks: ['#8f1378', '#c204bb', '#e330dd'],
      blues: ['#13828f', '#25abba', '#2dd8eb']
    }
  }
}

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

Types

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

interface ColorProps {
  color?: StyleProp<CSS.Property.Color | ThemeValue<'colors'>>
  backgroundColor?: StyleProp<CSS.Property.BackgroundColor | ThemeValue<'colors'>>
  opacity?: StyleProp<CSS.Property.Opacity>
}

The color 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	Shorthand	CSS Property	Theme Scale
color		color	colors
backgroundColor	bgColor	background-color	colors
opacity		opacity

Examples