@getcircuit/tailwind

@getcircuit/tailwind

Circuit's Tailwind config.

Demo

Usage

// tailwind.config.js

module.exports = {
  presets: [require('@getcircuit/tailwind')],
}

Typography

Typography classes are based on Web Typography file of Cardboard Figma.

It creates the following format of classes:

  .text-${weight}-${style}

Example: .text-light-subheading2, .text-default-button, .text-heavy-tiny.

Colors

The colors are based on Functional Colors file of Cardboard Figma.

Color Type	Class format	Example
Foreground	.text-${colorName}-${styleName}	.text-critical-neutral
Background	.bg-${colorName}-${styleName}	.bg-brand-emphasis
Border	.border-${colorName}-${styleName}	.border-default-emphasis
Constant	.${text|bg|border}-constant-${colorName}-${intensity}	.text-constant-light-80, .bg-constant-dark-20
Accent	.${text|bg|border}-accent-${colorName}-${styleName}	.text-accent-gold-emphasis, .border-teal-muted

Dark mode

To change the colors to its dark variants. Just add the dark class to the top of the React tree via Twin.macro. Example:

import 'twin.macro'

export function App() {
  return (
    <div tw="dark"> // <-- this class will be compiled by Twin.macro to a hashed class name
      <div tw="bg-default-subdued text-default-neutral">
        Hello dark mode!
      </div>
    </div>
  )
}

⚠️ The CSS class .dark does not exist! That means that adding a .dark CSS class manually to the top of the HTML tree will not work. Just like the other Tailwind classes, Twin.macro will compile this class to a hashed class name.

ℹ️ Do not use .bg-constant-light-100 for white backgrounds. Use .bg-default-subdued which will properly translate when changing to dark mode.

How this project works

The most challenging thing on this project is related to the colors and how they vary on dark theme. For that to work we were heavily inspired by this video by Tailwind.

• Colors are mapped to CSS variables

• Those CSS variables have RGB values

  Example: "40, 111, 245". Notice that it's not a complete CSS color value, like: rgba(40, 111, 245, 1)

• The alpha/opacity of the color is later applied by a Tailwind mechanism.

  Example: rgba(var(--bg-inverted-neutral), var(--tw-bg-opacity))

• When the .dark class is applied, the CSS variables are overwritten