Kaspacom UI Kit

Angular UI Component Library for KaspaDeFi Applications.

Installation

``bash
npm install kaspacom-ui --save
`

Colors

$3

| Variable | Value |
|----------|-------|
| --white | #FFFFFF |
| --black | hsl(0, 0%, 0%) |
| --vampire-black | #07090a |

$3

| 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 |

$3

| Variable | Value |
|----------|-------|
| --blue-10 | #7477FF |
| --blue-20 | #595CFF |
| --blue-30 | #383AA3 |

$3

| Variable | Value |
|----------|-------|
| --green-10 | #96FFA5 |
| --green-20 | #3FC753 |
| --green-30 | #267D33 |

$3

| Variable | Value |
|----------|-------|
| --orange-10 | #FFD27D |
| --orange-20 | #E6A223 |
| --orange-30 | #986B17 |

$3

| Variable | Value |
|----------|-------|
| --red-10 | #FF7474 |
| --red-20 | #E04242 |
| --red-30 | #923C3C |

$3

| Variable | Value |
|----------|-------|
| --yellow-10 | #FFFF8F |
| --yellow-20 | #FAFA49 |
| --yellow-30 | #B1B135 |

$3

| Variable | Value |
|----------|-------|
| --purple-10 | #D883FF |
| --purple-20 | #B43AED |
| --purple-30 | #6E1B94 |

$3

| Variable | Value |
|----------|-------|
| --kaspa-10 | #A2FFF1 |
| --kaspa-20 | #6FC7BA |
| --kaspa-30 | #32635C |

$3

| 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 |

$3

| 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

$3

| Description | Value |
|-------------|-------|
| Primary Font | "Poppins", sans-serif |

$3

| Weight | Value |
|--------|-------|
| thin | 100 |
| extralight | 200 |
| light | 300 |
| regular | 400 |
| medium | 500 |
| semibold | 600 |
| bold | 700 |
| extrabold | 800 |
| black | 900 |

$3

#### 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 |