@skui/style
v0.2.2
Published
Svelte KaiOS UI - Style
Readme
@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
