Tokens
Design tokens are design variables shared across styles and scripts.
SCSS variables
We are opening up ACE's SCSS variables to support themes. The initial round is trivial with much more to come. Keep in mind these are in Labs status and are likely to change in ACE 2.0.
Layout
| Variable name | Variable | Purpose |
|---|---|---|
| Horizontal base grid unit | $hgrid
|
The base unit for horizontal spacing, generally used multiplied by two or four. |
| Vertical base grid unit | $vgrid
|
The base unit for vertical spacing, generally used multiplied by two or four. |
Breakpoints
| Variable name | Variable | Purpose |
|---|---|---|
| Small breakpoint minimum | $ace-breakpoint-small-min
|
Smallest size in the Small device range. |
| Small breakpoint maximum | $ace-breakpoint-small-max
|
Largest size in the Small device range. |
| Medium breakpoint minimum | $ace-breakpoint-medium-min
|
Smallest size in the Medium device range. |
| Medium breakpoint maximum | $ace-breakpoint-medium-max
|
Largest size in the Medium device range. |
| Large breakpoint minimum | $ace-breakpoint-large-min
|
Smallest size in the Large device range. |
| Large breakpoint maximum | $ace-breakpoint-large-max
|
Largest size in the Large device range. |
Typography
| Variable name | Variable | Purpose |
|---|---|---|
| Base font family | $base-font-family
|
font-family value for default text, body copy, etc.
|
| Strong font family | $strong-font-family
|
font-family value for strong/bold text.
|
| Large heading font family | $large-heading-font-family
|
font-family value for h1, h2 and h3. H4-6 simply use the base font.
|
Project Structure
| Variable name | Variable | Purpose |
|---|---|---|
| Font loading toggles | $ace-load-default-fonts
|
Boolean. When set to false, the default set of web font files are not imported. Combine with the font-family variables to provide alternative font payloads.
|
| Font file path | $font-file-path
|
Sets the path for the fonts loaded in ACE. Does not change the filenames. Allows compilation with different locations, for example local files for development and CDN-served locations for production. |
JSON tokens
ACE's SCSS variables are exposed in a JSON file: dist/ace-variables.json. This is a literal conversion including the SCSS leading $ in the keys:
{
"$hgrid": "5px",
"$vgrid": "5px"
}
Obviously this is not updated if you overwrite the exposed SCSS variables with your own values.