Principles

This page talks about the design thinking of Flair. Understanding these principles will help you work with Flair easier. The Tl;dr version is as follows:

1. Flair exposes tokens via the useTheme() hook
2. Flair uses goober to write CSS in JS
3. Flair understands that customization is envitable and allow its components to be modifiable using the tokens and goober APIs.

Tokens

Flair exposes various tokens to use via the ThemeProvider. The tokens can be accessed using the useTheme() hook.

import { useTheme } from "flair-kit";

const Component = () => {
  const {
    colorScheme,

    space,
    radii,

    shadow,
    mediaQuery,
    transition,

    fontSizes,
    mobileFontSizes,
    lineHeights,

    colors,
  } = useTheme();

  return <div>Foo bar baz</div>;
};

The values of these tokens are available in the Tokens page.

Following is an example of how the tokens could be used to build your own components. This is how most components in Flair are written.

import { useTheme } from "flair-kit";

const FancyContainer = ({ children }) => {
  const { space, colors, mediaQuery, radii } = useTheme();

  const containerClass = css`
            background: ${colors["primary"][500].color};
            color: ${colors["primary"][500].contrastingColor};
            padding: ${space.xl} ${space.lg};
            margin: ${space.md};
            max-width: 100%;
            border-radius: ${radii.lg};

            ${mediaQuery.onMobileUp} {
              max-width: 400px;
            }
          `;

  return <div className={containerClass}>{children}</div>;
};

CSS in JS

Flair uses goober under the hood. It uses the css function to inject styles into the stylesheet. In the code editors you will find on this site, the css function is made available in the global scope so it is ready to be used. Try modifying containerClass below!

Note: it is actually possible to pass template literals to the css function, but it does not work well in the editor in this documentation site.

Customizing style

While most components in Flair can be used as-is, it is inevitable that at some point, customizations will be needed. Using goober, there are 2 main approaches to customizing Flair components.

Passing className

Most components can be passed className prop to define or override styles. The css function can be used to generate a new CSS class to be used.

Note that in some cases, !important would need to be used to override the existing values. This is because the built-in classes are actually inserted later than the customClass, due to the order of how the components are rendered.

Using styled

One way to avoid the issue described above would be to use the styled() function to create new components based on existing ones.

You can learn more about the styled function on goober documentation.

Overriding or adding styles can be useful for more generic components like Button , Text and Box. But Flair does not recommend adding styles for more complex components such as Switch and Dialog. In cases where you are considering doing so, it might be more sensible to write your own components using the tokens provided by Flair instead.