0.2.2 • Published 4 years ago
@skui/style v0.2.2
@skui/style
Common styles used by many components
Index
Colors
Grayscale
| Name | Color | |
|---|---|---|
| GS00 | #ffffff | |
| GS10 | #e6e6e6 | |
| GS20 | #cccccc | |
| GS45 | #8c8c8c | |
| GS70 | #6a6a6a | |
| GS90 | #323232 | |
| GS100 | #000000 |
Primary
| Name | Color | |
|---|---|---|
| PURPLE | #8000ff | |
| PINK | #e60060 | |
| LIME | #00bf60 | |
| CYAN | #1cc1c4 | |
| BLUE | #0073e6 | |
| ORANGE | #ff4f1a | |
| RED | #d90036 |
Mid-dark colors
| Name | Color | |
|---|---|---|
| MID_DARK_PURPLE | #5900b3 | |
| MID_DARK_PINK | #990040 | |
| MID_DARK_LIME | #007339 | |
| MID_DARK_CYAN | #08888a | |
| MID_DARK_BLUE | #004d99 | |
| MID_DARK_ORANGE | #a72600 | |
| MID_DARK_RED | #b4002d |
Dark color
| Name | Color | |
|---|---|---|
| DARK_PURPLE | #2a0361 | |
| DARK_PINK | #3d041c | |
| DARK_LIME | #00462c | |
| DARK_CYAN | #045463 | |
| DARK_BLUE | #012b68 | |
| DARK_ORANGE | #36150c | |
| DARK_RED | #530015 |
Fonts
| Name | Font-Size | Font-Weight | Color | Text-decoration-line |
|---|---|---|---|---|
| H1 | 17px | normal | GS90 | none |
| H2 | 17px | 600 | GS90 | none |
| H3 | 14px | normal | GS90 | none |
| H4 | 14px | 600 | GS70 | none |
| H5 | 14px | 600 | GS90 | none |
| PRI | 17px | normal | GS90 | none |
| SEC | 14px | normal | GS70 | none |
| THI | 12px | normal | GS70 | none |
| LINK | 17px | bold | GS90 | underline |
| BTN | 17px | normal | GS90 | none |
Usage in scss
@import "node_modules/@skui/style/functions";
H2 {
@include KaiOS_font(H4);
color: KaiOS_color(ORANGE);
}Usage in typescript
import type { KaiOS_color } from "@skui/types";
import { ORANGE } from "@skui/style";
const custom_color: KaiOS_color = ORANGE;License
MIT License
Copyright (c) 2021 Wouter van der Wal