@getcircuit/tailwind v2.6.1
@getcircuit/tailwind
Circuit's Tailwind config.
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago