Reusing Styles

Style composers in essence are regular JavaScript objects that can be passed around, reused and composed further into more specific styles.

Let’s take a look at some examples.

Example - typography

Let’s say we have some base font style that we want to reuse across our app.

We can define it as a base font composer and then compose it into more specific styles.

styles.ts


import { $font } from 'stylings';
 
/**
 * Define a base font style with properties that are common to text styles we will use.
 * Then we can compose it into more specific fonts.
 */
const $baseFont = $font.family("Inter, sans-serif").size("1rem").lineHeight(1.5).antialiased;
 
const typo = {
  $copy: $baseFont,
  // We can override properties from the base font if needed
  $heading: $baseFont.size("2rem").lineHeight(1.25).bold, 
  $label: $baseFont.size("0.875rem"),
}

Now, our base font is applied to various text styles.

As composer is chainable, we can continue to compose them into even more specific styles.

SmallLink.tsx


import { typo } from './styles';
import styled from 'styled-components';
 
function SmallLink() {
  return (
    <StyledLink href="#">
      Click me
    </StyledLink>
  )
}
 
const StyledLink = styled.a`
  ${typo.$label.underline}
`;

Here, we took our label style and added underline to it.

Example - animations

In similar way, we can define base animation style and then compose it into more specific animations.

Let’s say all animations in our app have the same duration and easing.

styles.ts


import { $animation } from 'stylings';
 
/**
 * We can first define some base animation style such as duration and easing function.
 * Then we can compose it into more specific animations.
 */
const $quickEasedAnimation = $animation.duration(200).easeInOut;
 
const animations = {
  fadeIn: $quickEasedAnimation.property('opacity', [0, 1]),
  fadeOut: $quickEasedAnimation.property('opacity', [1, 0]),
  slideUp: $quickEasedAnimation.property('y', [0, -10]),
  slideDown: $quickEasedAnimation.property('y', [0, 10]),
  spin: $animation.property('rotateZ', [0, 360]).linear.infinite,
}

We can perform similar composition with all style composers.