Default colors are defined and can be customized in _color.scss
Formula for background color classes is .[color:text][-?breakpoint:text].
Breakpoint is optional, and will only apply the background color after the breakpoint is reached. See list of breakpoints.
| Variable | Description | Default Value | Location |
|---|---|---|---|
| $muted | Sets color of muted text | #747474 | _color.scss |
| $text-color | Sets main text color | #141414 | _color.scss |
| $primary | Sets primary accent color | #70d6ff | _color.scss |
| $secondary | Sets secondary accent color | #ff70a6 | _color.scss |
| $success | Sets success color | #62bd4b | _color.scss |
| $warning | Sets warning color | #ffd670ff | _color.scss |
| $danger | Sets danger color | #ff70a6ff | _color.scss |
| $code-color | Sets code color | #1b2386 | _color.scss |
| $overlay-color | Sets jumbo overlay color | #000000e3 | _color.scss |
| $text-light | Sets light text color | #ffffff | _color.scss |
Formula for text color classes is .text[-?breakpoint:text]-[color:text].
Breakpoint is optional, and will only apply the text color after the breakpoint is reached. See list of breakpoints.
ro:Kit generates gradients from the defined colors. Gradients can be applied to elements as backgrounds with following classes
Default angle of gradients is 30 degrees and can be modifeid in _variables.scss
Formula for gradient classes is .gradient[-?breakpoint:text]-[color1:text]-[color2:text].
Breakpoint is optional, and will only apply the gradient after the breakpoint is reached. See list of breakpoints.
ro:Kit provides 10 levels of box-shadow and several text-shadow classes out of the box.
Formula for box shadow classes is .shadow[-?breakpoint:text]-[level:number = 1 through 10].
Breakpoint is optional, and will only apply the box shadow after the breakpoint is reached. See list of breakpoints.
Shadows use a scale for sizing, similar to type scaling. The default scale is Augmented Fourth (1.414).
Shadow scale can be adjusted in _variables.scss.
Further shadow customizations can be done in components/_shadows.scss.
| Variable | Description | Default Value | Location |
|---|---|---|---|
| $shadow-scale | Sets shadow scaling factor | 1.414 | _variables.scss |
| $base-size | Sets base offset of shadows | 1px | _variables.scss |
| $base-strength | Sets base shadow strength (opacity) | 0.1 | _variables.scss |
| $base-blur | Sets base blur multiplier | 1.5 | _variables.scss |
| $shadow-levels | Sets number of shadow levels generated by ro:Kit | 10 | _variables.scss |