@skui/style

Common styles used by many components

Index

• colors
• fonts
• Usage in scss
• Usage in typescript

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