@kaspacom/ui
Version:
UI Component Library for KaspaCom DeFi Applications
208 lines (158 loc) • 5.44 kB
Markdown
# Kaspacom UI Kit
Angular UI Component Library for KaspaDeFi Applications.
## Installation
```bash
npm install kaspacom-ui --save
```
## Colors
### Base Colors
| Variable | Value |
|----------|-------|
| `--white` | #FFFFFF |
| `--black` | hsl(0, 0%, 0%) |
| `--vampire-black` | #07090a |
### Grays
| Variable | Value |
|----------|-------|
| `--gray-0` | #141414 |
| `--gray-10` | #181818 |
| `--gray-15` | #282828 |
| `--gray-20` | #333333 |
| `--gray-25` | #404040 |
| `--gray-40` | #616161 |
| `--gray-45` | #757575 |
| `--gray-60` | #9E9E9E |
| `--gray-75` | #BDBDBD |
| `--gray-85` | #D9D9D9 |
| `--gray-90` | #EEEEEE |
| `--gray-95` | #F8F8F8 |
### Blues
| Variable | Value |
|----------|-------|
| `--blue-10` | #7477FF |
| `--blue-20` | #595CFF |
| `--blue-30` | #383AA3 |
### Greens
| Variable | Value |
|----------|-------|
| `--green-10` | #96FFA5 |
| `--green-20` | #3FC753 |
| `--green-30` | #267D33 |
### Oranges
| Variable | Value |
|----------|-------|
| `--orange-10` | #FFD27D |
| `--orange-20` | #E6A223 |
| `--orange-30` | #986B17 |
### Reds
| Variable | Value |
|----------|-------|
| `--red-10` | #FF7474 |
| `--red-20` | #E04242 |
| `--red-30` | #923C3C |
### Yellows
| Variable | Value |
|----------|-------|
| `--yellow-10` | #FFFF8F |
| `--yellow-20` | #FAFA49 |
| `--yellow-30` | #B1B135 |
### Purples
| Variable | Value |
|----------|-------|
| `--purple-10` | #D883FF |
| `--purple-20` | #B43AED |
| `--purple-30` | #6E1B94 |
### Kaspa
| Variable | Value |
|----------|-------|
| `--kaspa-10` | #A2FFF1 |
| `--kaspa-20` | #6FC7BA |
| `--kaspa-30` | #32635C |
### Theme Colors
| Variable | Value |
|----------|-------|
| `--primary` | var(--kaspa-20) |
| `--secondary` | var(--purple-20) |
| `--tertiary` | var(--blue-20) |
| `--universal-tertiary-color` | rgba(255, 255, 255, 0.1) |
| `--universal-tertiary-2` | rgba(255, 255, 255, 0.2) |
| `--primary-text` | white |
| `--background` | var(--vampire-black) |
| `--background-secondary` | #0D1316 |
| `--border-secondary` | #1c2e2f |
### Gradients
| Variable | Value |
|----------|-------|
| `--gradient-1` | linear-gradient(90deg, #B43AED 0%, #FFD27D 44.23%, #A2FFF1 85.58%) |
| `--gradient-2` | linear-gradient(90deg, #7477FF 0%, #595CFF 30%, #B43AED 70%, #D883FF 100%) |
## Typography
### Font Family
| Description | Value |
|-------------|-------|
| Primary Font | "Poppins", sans-serif |
### Font Weights
| Weight | Value |
|--------|-------|
| `thin` | 100 |
| `extralight` | 200 |
| `light` | 300 |
| `regular` | 400 |
| `medium` | 500 |
| `semibold` | 600 |
| `bold` | 700 |
| `extrabold` | 800 |
| `black` | 900 |
### Typography Classes
#### Title Series (Semibold)
| Class | Size | Line Height | Letter Spacing |
|-------|------|-------------|----------------|
| `.typo-title-1` | 0.875rem (14px) | 1.4 | -0.01em |
| `.typo-title-2` | 1rem (16px) | 1.4 | -0.01em |
| `.typo-title-3` | 1.25rem (20px) | 1.375 | -0.01em |
| `.typo-title-4` | 1.5rem (24px) | 1.375 | -0.02em |
| `.typo-title-5` | 2rem (32px) | 1.3 | -0.02em |
| `.typo-title-6` | 2.5rem (40px) | 1.2 | -0.02em |
#### Text Series (Regular)
| Class | Size | Line Height |
|-------|------|-------------|
| `.typo-text-1` | 0.75rem (12px) | 1.5 |
| `.typo-text-2` | 0.875rem (14px) | 1.5 |
| `.typo-text-3` | 1rem (16px) | 1.5 |
| `.typo-text-4` | 1.125rem (18px) | 1.5 |
| `.typo-text-5` | 1.25rem (20px) | 1.5 |
| `.typo-text-6` | 1.5rem (24px) | 1.5 |
#### Headers
| Class | Size | Line Height | Letter Spacing | Weight |
|-------|------|-------------|----------------|--------|
| `.typo-header-1` | 3rem (48px) | 1.2 | -0.03em | bold |
| `.typo-header-2` | 2.25rem (36px) | 1.2 | -0.03em | bold |
#### Captions
| Class | Size | Line Height | Letter Spacing | Weight |
|-------|------|-------------|----------------|--------|
| `.typo-caption` | 0.75rem (12px) | 1.4 | 0.02em | regular |
| `.typo-caption-semibold` | 0.75rem (12px) | 1.4 | 0.02em | semibold |
#### Labels
| Class | Size | Line Height | Letter Spacing | Weight |
|-------|------|-------------|----------------|--------|
| `.typo-label` | 0.8125rem (13px) | 1.4 | 0.02em | medium |
#### Buttons
| Class | Size | Line Height | Letter Spacing | Weight |
|-------|------|-------------|----------------|--------|
| `.typo-button-small` | 0.75rem (12px) | 1.2 | 0.02em | semibold |
| `.typo-button-medium` | 0.875rem (14px) | 1.2 | 0.01em | semibold |
| `.typo-button-large` | 1rem (16px) | 1.2 | 0.01em | semibold |
#### UI Elements
| Class | Size | Line Height | Letter Spacing | Style |
|-------|------|-------------|----------------|-------|
| `.typo-ui-overline` | 0.6875rem (11px) | 1.2 | 0.06em | uppercase, semibold |
| `.typo-ui-badge` | 0.625rem (10px) | 1 | 0.04em | semibold |
#### Others
| Class | Properties |
|-------|------------|
| `.typo-link` | medium weight, underlined |
| `.typo-quote` | 1.125rem (18px), line-height: 1.6, letter-spacing: 0.01em, italic |
#### Responsive
| Class | Size | Line Height | Letter Spacing | Weight |
|-------|------|-------------|----------------|--------|
| `.typo-responsive-title` | clamp(1.25rem, 5vw, 2.5rem) | 1.3 | -0.02em | semibold |
| `.typo-responsive-text` | clamp(0.875rem, 3vw, 1.125rem) | 1.5 | - | regular |