Kaspacom UI Kit

Angular UI Component Library for KaspaDeFi Applications.

Installation

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 |