# Styles
## Get Started
### Size
Let's consider that any size is relative to a base. This base can be set to `1rem` by default.
In order to prevent setting absolute size for paddings, margins, borders, etc.., we define the following factors:
- **xss** (0.1) : the smallest size.
- **xs** (0.25) : a very small size.
- **s** (0.5) : a small size.
- **m** (1) : a normal size.
- **l** (1.5) : a large size.
- **xl** (3) : a very large size.
- **xxl** (5) : the largest size.
- **none** (0) : no size.
- **auto** : the size is set automatically by the browser.
- **inherit**: the size is inherited from the parent.
> Fonts use their own factors for the same names, see `font-*` in the config `const`.
Anywhere a size is expected you can also pass a plain css length (`0`, `12px`, `50%`), a calculation,
or a css keyword. Anything else is a typo: it cannot be resolved and would end up in the css as a
quoted string, which browsers discard. Sass reports it with a warning:
```text
WARNING: unknown size [xxs] in [font].
```
[!WARNING] this warning will become an error in a future version. Fix the reported call rather than
ignoring it.
To determine which property will be affected we use :
- **p**: padding
- **m**: margin
- **b**: border
- **g**: gap
- **f**: font
> `p-xs` means a very small padding
If a property can be set for multiple emplacement :
- **l**: left
- **t**: top
- **r**: right
- **b**: bottom
You can combine them if the size apply on multiple emplacements. By default, if the emplacement is not present, the
size apply for the 4 emplacements.
> `p-t-xs` means a very small top padding.
> `p-tb-xs` means a very small top and bottom padding.
[!WARNING] these notations are only meant to be present in the design. These classes won't be available as css classes.
#### Sass
In order to use these notations, we define sass mixin for every property. These functions are used this way:
`@include theme.{property}({size}, {?emplacement});`
> to set a large top and bottom padding : `@include theme.padding('l', 'tl')`
if the property has other parameters (ex: fonts can have a color), the property is suffixed with `-size`:
> to set a large font : `@include theme.font-size('l')`
Each property has a base size that you can change contextually using the following macro :
> `@include theme.padding-base(12px)`
> `@include theme.font-base(12px)`
### Colors
#### Palette
In order to prevent setting absolute colors, we use palettes of colors. Each color has a name and 5 variations.
The variation name is based on the font-weight norm:
- **100**: very light
- **200**: light
- **400**: normal
- **600**: strong
- **800**: very strong
> `blue-400` means a normal blue
We define the following palettes (notice the **s** at the end of the name, to show they are palette):
- **blues**
- **oceans** (dark blue)
- **greens**
- **greys**
- **greylights**
- **oranges**
- **purples**
- **reds**
- **yellows**
- **blacks**
- **whites**
#### Named colors
In order to prevent having abstract color name (`greys-600` can be confusing on what color it represents),
we also define named colors (alias):
- **primary**: `blues-400`
- **secondary**: `blacks-400`
- **success**: `greens-400`
- **danger**: `reds-400`
- **warning**: `oranges-400`
- **info**: `blues-100`
- **light**: `greylights-400`
- **dark**: `blacks-400`
- **muted**: `greys-400`
- **white**: `whites-100`
- **black**: `blacks-800`
and contextual named colors:
- **text**
- **title**
- **link**
- **border**
- **shadow**
- **emphasis** (bold, italic, underline texts, ...)
#### Theme
A theme is composed of a set of palettes and named colors. You MUST keep the same name for the palette and colors
through every theme you create. We define these themes :
- **default**
- **dark**
- **spring**
- **summer**
- **fall**
- **winter**
#### Sass
In order to use a color, we define a function : `theme.color({color})`
- `{color}` can be a named color or a palette color with a weight.
> `boder-color: theme.color('blues-400')`
> `color: theme.color('info')`
To define a new color, either add it to the configuration, or use the macro:
`@include theme.set-color({name}, {color})`
- {name}: any valid identifier
- {color}: any absolute color, or a palette/named color (need to be enclosed in quotations)
> `@include theme.set-color('mycolor', #FFF)`
> `@include theme.set-color('mycolor', 'blues-400')`
[!WARNING] HTML define colors like `blue`. if you don't put quotation around blue, it will be treated as the color.
> `@include theme.set-color('mycolor', blue)` => `#0000FF`
> `@include theme.set-color('mycolor', 'blue')` => `blues-400`
You can also change the current theme in any dom element by using the macro:
`@include theme.set('dark');`
As changing the background color can impact a lot of other colors (text, border, ...), you can use the following macro:
`@include theme.color-bg({color}, {?text-color}, {?theme})`
- {color}: the background color (palette/name/absolute)
- {text-color}: (optional). the text color to set. if null, won't change the current text color.
- {theme}: (optional). the theme to use inside the element. if null, won't change the current theme.
## References
### See also
## Tags
<#sass>, <#theme>, <#styles>