UI Labs

Tasarım sistemi renk paleti ve UI bileşenleri

Tema Renkleri

--brand-primary

Ana marka rengi

var(--brand-primary)

--accent

Accent rengi

var(--accent)

--accent-bg

Accent background

var(--accent-bg)

--bg-primary

Primary background

var(--bg-primary)

--bg-secondary

Secondary background

var(--bg-secondary)

--bg-app

App background

var(--bg-app)

--bg-panel

Panel background

var(--bg-panel)

--bg-surface

Surface background

var(--bg-surface)

--bg-hover

Hover background

var(--bg-hover)

--text-primary

Primary text

var(--text-primary)

--text-main

Main text

var(--text-main)

--text-secondary

Secondary text

var(--text-secondary)

--text-muted

Muted text

var(--text-muted)

--border-color

Border color

var(--border-color)

--border

Border

var(--border)

Header Glassmorphism

--header-bg

Header background (glassmorphism)

var(--header-bg)

--header-border

Header border

var(--header-border)

Header Glassmorphism Örneği

.header-glass sınıfı ile kullanılır

Sidebar Renkleri

--sidebar-text

Sidebar text color

var(--sidebar-text)

--sidebar-icon

Sidebar icon color

var(--sidebar-icon)

--sidebar-hover

Sidebar hover background

var(--sidebar-hover)

Success Colors

Success Colors Örneği

Bu bir success colors mesajı örneğidir. Tüm renk değişkenleri bu şekilde kullanılabilir.

--success-bg

Background

var(--success-bg)

--success-border

Border

var(--success-border)

--success-text

Text

var(--success-text)

--success-icon

Icon

var(--success-icon)

Error Colors

Error Colors Örneği

Bu bir error colors mesajı örneğidir. Tüm renk değişkenleri bu şekilde kullanılabilir.

--error-bg

Background

var(--error-bg)

--error-border

Border

var(--error-border)

--error-text

Text

var(--error-text)

--error-icon

Icon

var(--error-icon)

Warning Colors

Warning Colors Örneği

Bu bir warning colors mesajı örneğidir. Tüm renk değişkenleri bu şekilde kullanılabilir.

--warning-bg

Background

var(--warning-bg)

--warning-border

Border

var(--warning-border)

--warning-text

Text

var(--warning-text)

--warning-icon

Icon

var(--warning-icon)

Info Colors

Info Colors Örneği

Bu bir info colors mesajı örneğidir. Tüm renk değişkenleri bu şekilde kullanılabilir.

--info-bg

Background

var(--info-bg)

--info-border

Border

var(--info-border)

--info-text

Text

var(--info-text)

--info-icon

Icon

var(--info-icon)

Utility Classes

.text-brand

Brand color text

.text-primary

Primary text color

.text-secondary

Secondary text color

.text-muted

Muted text color

.bg-primary

Primary background

.bg-secondary

Secondary background

.bg-brand

Brand background

.border-color

Border color utility

.header-glass

Header glassmorphism effect

.sidebar-hover

Sidebar hover state

.sidebar-active

Sidebar active state

.scrollbar-hide

Hide scrollbar

Alert Classes

.alert-success

Success alert styling

.alert-error

Error alert styling

.alert-warning

Warning alert styling

.alert-info

Info alert styling

.icon-success

Success icon color

.icon-error

Error icon color

.icon-warning

Warning icon color

.icon-info

Info icon color

Animations

@keyframes fadeIn

Fade in animation

@keyframes shimmer

Shimmer loading effect

@keyframes pulse

Pulse animation

@keyframes ping

Ping animation

Scrollbar

Scrollbar stilleri otomatik olarak uygulanır:

• Scrollbar genişliği: 6px

• Track: transparent

• Thumb: var(--border-color)

• Thumb hover: var(--accent)

Scroll örneği satır 1 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 2 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 3 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 4 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 5 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 6 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 7 - Scrollbar'ı görmek için kaydırın

Scroll örneği satır 8 - Scrollbar'ı görmek için kaydırın

.scrollbar-hide

Scrollbar'ı gizlemek için kullanılır