UI Component Library for KaspaCom DeFi Applications
npm install kaspacom-uiAngular UI Component Library for KaspaDeFi Applications.
``bash`
npm install kaspacom-ui --save
| Variable | Value |
|----------|-------|
| --white | #FFFFFF |--black
| | hsl(0, 0%, 0%) |--vampire-black
| | #07090a |
| 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 |
| Variable | Value |
|----------|-------|
| --blue-10 | #7477FF |--blue-20
| | #595CFF |--blue-30
| | #383AA3 |
| Variable | Value |
|----------|-------|
| --green-10 | #96FFA5 |--green-20
| | #3FC753 |--green-30
| | #267D33 |
| Variable | Value |
|----------|-------|
| --orange-10 | #FFD27D |--orange-20
| | #E6A223 |--orange-30
| | #986B17 |
| Variable | Value |
|----------|-------|
| --red-10 | #FF7474 |--red-20
| | #E04242 |--red-30
| | #923C3C |
| Variable | Value |
|----------|-------|
| --yellow-10 | #FFFF8F |--yellow-20
| | #FAFA49 |--yellow-30
| | #B1B135 |
| Variable | Value |
|----------|-------|
| --purple-10 | #D883FF |--purple-20
| | #B43AED |--purple-30
| | #6E1B94 |
| Variable | Value |
|----------|-------|
| --kaspa-10 | #A2FFF1 |--kaspa-20
| | #6FC7BA |--kaspa-30
| | #32635C |
| 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 |
| 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%) |
| Description | Value |
|-------------|-------|
| Primary Font | "Poppins", sans-serif |
| Weight | Value |
|--------|-------|
| thin | 100 |extralight
| | 200 |light
| | 300 |regular
| | 400 |medium
| | 500 |semibold
| | 600 |bold
| | 700 |extrabold
| | 800 |black
| | 900 |
#### 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 |
|