Skip to main content

Theming

Fast Styles is designed to efficiently apply styles by processing only the minimum necessary at runtime. This means we can reference any variable as long as it's not within the render. This library provides a default theme and also utilities for creating, combining, or extending themes.

Using the default theme​

With fast-styles, you can easily create your own design system, including custom color, spacing, font definitions, etc. Therefore, it is recommended to define your own theme. However, if you want to build quickly, you can an import the defaultTheme from @fast-styles/react package that defines the following values:

  • Colors
  • Spacings
  • Border Radiuses
  • Fonts
  • Font Weights
  • Font Sizes
  • Tokens

Colors​

You can copy the name of a color by clicking on it.


View Code
import { defaultTheme, styled } from "@fast-styles/react";

import React from "react";

const Palette = styled("div", {
  gap: defaultTheme.spacings.$1,
  flexDirection: "row",
  flexWrap: "wrap",
  display: "flex",
});

const ColorBox = styled("div", {
  borderRadius: defaultTheme.borderRadiuses.$3,
  height: defaultTheme.spacings.$6,
  width: defaultTheme.spacings.$6,
  cursor: "pointer",
  styleProps: {
    bg: "backgroundColor",
  },
});

export const ColorPalette = () => {
  const copyToClipboard = (value) => () => {
    navigator.clipboard.writeText(value);
  };
  return (
    <Palette>
      {Object.entries(defaultTheme.colors).map(([key, value], index) => (
        <ColorBox key={index} bg={value} onClick={copyToClipboard(key)} />
      ))}
    </Palette>
  );
};

Spacings​

Unit Values​

Spacing units that increase by 4 and go up to 100

$0

0px

$1

4px

$2

8px

$3

12px

$4

16px

$5

20px

$6

24px

$7

28px

$8

32px

$9

36px

$10

40px

$11

44px

$12

48px

$20

80px

$30

120px

Percent Values​

Common fractions to represent percentage values

$oneFifth

20%

$oneFourth

25%

$oneThird

33.333%

$twoFifths

40%

$oneHalf

50%

$threeFifths

60%

$twoThirds

66.666%

$threeFourths

75%

$fourFifths

80%

$full

100%

Pixel Values​

Included solely to maintain consistency when an intermediate value between unit spacings is needed

$1px

1px

$2px

2px

$3px

3px

$5px

5px

$10px

10px


View Code
import { defaultTheme, styled } from "@fast-styles/react";

import React from "react";

export const pixelValues = [
  //
  "$1px",
  "$2px",
  "$3px",
  "$5px",
  "$10px",
];
export const unitValues = [
  //
  "$0",
  "$1",
  "$2",
  "$3",
  "$4",
  "$5",
  "$6",
  "$7",
  "$8",
  "$9",
  "$10",
  "$11",
  "$12",
  "$20",
  "$30",
];
export const percentValues = [
  "$oneFifth",
  "$oneFourth",
  "$oneThird",
  "$twoFifths",
  "$oneHalf",
  "$threeFifths",
  "$twoThirds",
  "$threeFourths",
  "$fourFifths",
  "$full",
];

const Container = styled("div", {
  overflowX: "scroll",
  flexDirection: "row",
  display: "flex",
  width: defaultTheme.spacings.$full,
  gap: defaultTheme.spacings.$10px,
});

const BoxContainer = styled("div", {
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
});

const Label = styled("p", {
  marginBottom: defaultTheme.spacings.$1,
  variants: {
    variant: {
      title: {
        fontWeight: defaultTheme.fontWeights.$bold,
        fontSize: defaultTheme.fontSizes.$sm,
      },
      value: {
        fontSize: defaultTheme.fontSizes.$xs,
      },
    },
  },
});

const Box = styled("div", {
  display: "flex",
  justifyContent: "center",
  backgroundColor: defaultTheme.colors.$blue3,
  height: defaultTheme.spacings.$4,
  styleProps: {
    w: "width",
    h: "height",
  },
});

const format = (value) => {
  if (typeof value === "string") {
    return value;
  }
  return `${value}px`;
};

// We don't display all spacings at once.
// Instead, we receive a prop type that defines whether to show
// pixel values, spacing units, or percentages
export const Spacings = (props) => {
  const keys =
    props.type === "unitValues"
      ? unitValues
      : props.type === "pixelValues"
      ? pixelValues
      : percentValues;

  return (
    <Container>
      {keys.map((key, index) => {
        const value = defaultTheme.spacings[key];
        return (
          <BoxContainer key={index}>
            <Label variant="title">{key}</Label>
            <Label variant="value">{format(value)}</Label>
            {/* For percentage values, we don't display any box */}
            {String(value).includes("%") ? null : (
              <Box key={index} w={value} h={value} />
            )}
          </BoxContainer>
        );
      })}
    </Container>
  );
};

Border Radiuses​

Border radiuses are defined in increments of two.

$0
$1
$2
$3
$4
$5
$6
$7
$8
$9
$10
$15
$20
$50

View Code
import { defaultTheme, styled } from "@fast-styles/react";

import React from "react";

const borderRadiuses = [
  "$0",
  "$1",
  "$2",
  "$3",
  "$4",
  "$5",
  "$6",
  "$7",
  "$8",
  "$9",
  "$10",
  "$15",
  "$20",
  "$50",
];
const Container = styled("div", {
  gap: defaultTheme.spacings.$1,
  flexDirection: "row",
  flexWrap: "wrap",
  display: "flex",
});

const RoundedBox = styled("div", {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  backgroundColor: defaultTheme.colors.$blue3,
  height: 100,
  width: 100,
  styleProps: {
    r: "borderRadius",
  },
});

export const BorderRadiuses = () => {
  return (
    <Container>
      {borderRadiuses.map((key, index) => (
        <RoundedBox key={index} r={defaultTheme.borderRadiuses[key]}>
          {key}
        </RoundedBox>
      ))}
    </Container>
  );
};

Fonts​

You can access the font families by using defaultTheme.font.$option.

NameiOSAndroidWeb
$headingSystemRobotosans-serif
$textSystemRobotosans-serif
$codeMenlomonospacemonospace

Font Sizes​

You can access the font sizes by using defaultTheme.fontSizes.$option.

$xxs is equivalent to 10px

$xs is equivalent to 12px

$sm is equivalent to 14px

$md is equivalent to 16px

$lg is equivalent to 18px

$xxl is equivalent to 24px

$3xl is equivalent to 30px

$4xl is equivalent to 36px

$5xl is equivalent to 48px

Font Weights​

You can access the font weights by using defaultTheme.fontWeights.$option.

NameValueNameValue
$hairline100$semibold600
$thin200$bold700
$light300$extrabold800
$normal400$black900
$medium500$extraBlack950

Tokens​

Tokens are an essential part of the theme; you will likely reference them many times throughout your development, allowing you to customize the application quickly. You can access the tokens using the following format: defaultTheme.tokens.$token.

View Tokens
import { colors } from './colors';

export const tokens = {
  // colors
  $primary: colors.$purple5,
  $secondary: colors.$blue5,
  $positive: colors.$green5,
  $negative: colors.$red5,
  $warning: colors.$yellow5,
  $disabled: colors.$grey5,
  // background-light
  $backgroundDefault: colors.$grey8,
  $backgroundElevatedLight: colors.$white,
  // background-dark
  $backgroundDark: colors.$grey1,
  $backgroundElevatedDark: colors.$grey2,
  // background-primary
  $backgroundPrimary: colors.$purple5,
  $backgroundPrimaryLighter: colors.$purple4,
  $backgroundPrimaryDarker: colors.$purple6,
  // background-secondary
  $backgroundSecondary: colors.$blue5,
  $backgroundSecondaryLighter: colors.$blue4,
  $backgroundSecondaryDarker: colors.$blue6,
  // background-positive
  $backgroundPositive: colors.$green5,
  $backgroundPositiveLighter: colors.$green4,
  $backgroundPositiveDarker: colors.$green6,
  // background-negative
  $backgroundNegative: colors.$red5,
  $backgroundNegativeLighter: colors.$red4,
  $backgroundNegativeDarker: colors.$red6,
  // background-warning
  $backgroundWarning: colors.$yellow5,
  $backgroundWarningLighter: colors.$yellow4,
  $backgroundWarningDarker: colors.$yellow6,
  // background-disabled
  $backgroundDisabled: colors.$grey5,
  $backgroundDisabledLighter: colors.$grey4,
  $backgroundDisabledDarker: colors.$grey6,
  // text colors
  $textDefault: colors.$grey1,
  $textLight: colors.$grey8,
  $textPrimary: colors.$purple5,
  $textSecondary: colors.$blue5,
  $textPositive: colors.$green5,
  $textNegative: colors.$red5,
  $textWarning: colors.$yellow5,
  // icon colors
  $iconDefault: colors.$grey8,
  $iconDark: colors.$grey1,
  $iconPrimary: colors.$purple5,
  $iconSecondary: colors.$blue5,
  $iconPositive: colors.$green5,
  $iconNegative: colors.$red5,
  $iconWarning: colors.$yellow5,
  // outline colors
  $outlineDefault: colors.$grey4,
  $outlineLight: colors.$grey3,
  $outlinePrimary: colors.$purple5,
  $outlineSecondary: colors.$blue5,
  $outlinePositive: colors.$green5,
  $outlineNegative: colors.$red5,
  $outlineWarning: colors.$yellow5,
} as const;

Extending the default theme​

If you want to extend the default theme, you can use the extendDefaultTheme function from the package @fast-styles/react.

Loading...

Creating your own theme​

You can create your own theme using the function createTheme from the package @fast-styles/react.

export const defaultTheme = createTheme({
  //There are no predefined categories, so you can add any structure you prefer.
  //Some common categories are as follows:
  //colors: {},
  //fonts: {},
  //borderRadiuses: {},
  //fontWeights: {},
  //fontSizes: {},
  //spacings: {},
  //styles: {},
  //tokens: {},
});