Tokens
Feo.css offers a limited set of design tokens, implemented in CSS Custom Properties (--*). These design tokens are used throughout all the different layers of Feo.css. For example, several layout
patterns allow you to set the gap between columns and rows, through class ulilities. These classes directly use the defined tokens.
Naming convention
Tokens like sizing and breakpoints are considered to have a "baseline". The most common value for the design token. Those tokens always have a -0 as the post-fix in their naming (e.g. --token-size-0). For each step higher, the number is increased (e.g. --token-size-2). In case of lowering steps, we add a 0 to the token name (e.g. --token-size-000). This convention is chosen as it is seen to be more readable compared to --token-size--1 (note the double dash).
Sizing
Feo.css offers design tokens on sizing that can be used for spacing (e.g. margin and padding), font-sizes, or anything you can think of. The values are based on a combination of a few key principles:
- Fluid scaling based on screen size.
- A ratio of
1.33between two consecutive token values. - The mentioned naming convention outlined above.
1remis taken as the base value (--size-0).
Note on fluid scaling
If you do not want to use a fluid scaling of the --size-{z} tokens, you can overwrite the --feo-scale Custom Property in your own code, and set it to 0.
| Token name | Value at 320px | Value at 1240px |
|---|---|---|
--token-size-000 |
0.65rem | 0.65rem + 3.25px |
--token-size-00 |
0.8125rem | 0.8125rem + 4px |
--token-size-0 |
1rem | 1rem + 5px |
--token-size-1 |
1.33rem | 1.33rem + 6.65px |
--token-size-2 |
1.78rem | 1.78rem + 8.9px |
--token-size-3 |
2.37rem | 2.37rem + 11.85px |
--token-size-4 |
3.16rem | 3.16rem + 15.7px |
--token-size-5 |
4.21rem | 4.21rem + 21.05px |
Breakpoints
Tokens used as points that can be used, whenever your UI is
breaking. Scaling between the values is based on
1.33.
| Token name | Value |
|---|---|
--token-bp-000 |
11.31rem |
--token-bp-00 |
15.04rem |
--token-bp-0 |
20rem |
--token-bp-1 |
20rem |
--token-bp-2 |
26.6rem |
--token-bp-3 |
35.38rem |
--token-bp-4 |
47.05rem |
--token-bp-5 |
62.58rem |
Colors
A set of dark and light colors are present in Feo.css, that can be used as a base for your application in greyscale.
| Token name | RGB value | HSL value |
|---|---|---|
--token-neutral-0 |
#0E131B | hsl(215, 30%, 8%) |
--token-neutral-1 |
#2B3A50 | hsl(215, 30%, 24%) |
--token-neutral-2 |
#476185 | hsl(215, 30%, 40%) |
--token-neutral-3 |
#C8D4E5 | hsl(215, 36%, 78%) |
--token-neutral-4 |
#E3E9F2 | hsl(215, 36%, 92%) |
--token-neutral-5 |
#F7F9FB | hsl(215, 36%, 98%) |
Themes
Feo.css does not offer multiple themes out of the box, but offers a basic light, as shown below. The tokens defined in the light theme are used throughout Feo.css (e.g. forms-component). Feo.css does not offer auto-themes out of the box, as these should be opt-in for developers. By offering one theme, consistent application of theme related tokens (through custom properties) can be achieved.
| Color | Design token | Description |
|---|---|---|
--surface-0 |
--token-neutral-0 |
Main background color |
--surface-1 |
--token-neutral-1 |
Background color for surfaces that need to stand out a little on the main background (e.g. cards, code-blocks) |
--surface-2 |
--token-neutral-2 |
Surface color for specific elements or properties that need a little more emphasize (e.g. border colors) |
--text-0 |
--token-neutral-5 |
Main text color |
--text-1 |
--token-neutral-4 |
Text color for elements that need a little less high-light |
--text-2 |
--token-neutral-3 |
Text color for elements with less emphasize |
About contrasts
The selected theme colors, if combined with --surface-{z} and --text-{z} have a contrast score of AAA (> 7) and can be used freely. Except when you combine --surface-2 and --text-2. That combination has a AA+ (4.25) score. So it should only be used with larger text.