Working with colors

stylings provides a $color composer that can be used to work with colors.

Defining and using colors

First, we need to define a color.

colors.ts


import { $color } from 'stylings';
 
const $primary = $color("#048");

Then, we can use it in our styles.

Button.tsx


import styled from 'styled-components';
import { $primary } from './colors';
 
const Button = styled.button`
  ${$primary.asBg};
`;

We are now using $primary color as a background color of the button.

You can also use .asColor, .asFill, etc. You can use multiple of those together eg $primary.asBg.asFill.

In the example above, background of the button is static, even if button is hovered, focused or clicked.

We can make it dynamic by using .interactive modifier.

Button.tsx


const Button = styled.button`
  ${$primary.interactive.asBg};
`;

When using .asBg, .asColor, etc, stylings will automatically generate ready-to-use CSS styles.

Sometimes, we might want to use color value directly in our styles.

We can do that by passing color without using those modifiers.

Button.tsx


const Button = styled.button`
  color: ${$primary};
  border-color: ${$primary};
  --some-variable: ${$primary};
`;

If needed, we can modify and adjust the color, using modifiers like .opacity(), .lighten(), .darken(), etc.

Button.tsx


const SubtleLink = styled.a`
  ${$primary.opacity(0.5).asColor};
`;