# Monday Vibe Tasarım Sistemi ## Monday Vibe Tasarım Sistemi Arayüz Önizlemesi Satır durumunu düzenleyin ve seçili öğeleri tamamlayın; özet sayıları yerel olarak güncellenir. ## Monday Vibe Tasarım Sistemi Tasarım Başvurusu Vibe 4 herkese açık kaynak kodu ve @vibe/core entegrasyonu. Aşağıdaki değerler, doğrulanmış açık tema ve stil tanımlarıdır; pano etiketi renkleri anlamsal başarı/hata rollerinden farklıdır. Yerel örnekte, uygulamaya ait bir HTML tablo içinde gerçek Vibe Button kontrolleri kullanılır. ### Geçerli aralık değişkenleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --space-2 | 2px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-4 | 4px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-8 | 8px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-12 | 12px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-16 | 16px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-20 | 20px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-24 | 24px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-32 | 32px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-40 | 40px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-48 | 48px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-64 | 64px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | | --space-80 | 80px | Uygulama aralıkları için kullanın; sayısal belirteç adı, kaynaktaki güncel yazımıyla verilmiştir. | ### Eylem ve yüzey renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --primary-color | #0073ea | Birincil eylemler. | | --primary-hover-color | #0060b9 | Üzerine gelindiğinde birincil eylem. | | --primary-selected-color | #cce5ff | Seçili içerik arka planı. | | --primary-text-color | #323338 | Varsayılan, okunabilir metin. | | --secondary-text-color | #676879 | İkincil etiketler. | | --primary-background-color | #ffffff | Ana yüzey. | | --allgrey-background-color | #f6f7fb | Uygulama arka planı. | | --ui-border-color | #c3c6d4 | Kontrol sınırı. | | --positive-color | #00854d | Anlamsal olumlu eylem. | | --negative-color | #d83a52 | Anlamsal olumsuz eylem. | ### Pano etiketi paleti | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --color-done-green | #00c875 | Anlamsal olumlu renk değil, kategorik Tamamlandı etiketi. | | --color-working_orange | #fdab3d | Kategorik Devam Ediyor etiketi; tam kaynak adı alt çizgi içerir. | | --color-stuck-red | #df2f4a | Kategorik Takıldı etiketi. | | --color-dark_purple | #784bd1 | Grup kimliği örneği. | ### Tipografi kısa yazımları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --font-family | Figtree, Roboto, Noto script fallbacks, sans-serif | Gövde yazı tipi ailesi; yazı tipi dosyaları ayrıca yüklenir. | | --title-font-family | Poppins, Roboto, Noto script fallbacks, sans-serif | Başlık yazı tipi ailesi. | | --font-h1-medium | 600 32px/40px; title family | Pano başlığı. | | --font-h2-medium | 600 24px/30px; title family | Grup başlığı. | | --font-h3-medium | 600 18px/24px; title family | Kompakt alt bölüm. | | --font-text1-normal | 400 16px/22px; body family | Normal içerik. | | --font-text2-normal | 400 14px/20px; body family | Yoğun satır içeriği. | | --font-text3-normal | 400 12px/16px; body family | Destekleyici ayrıntı. | ### Köşeler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --border-radius-4 | 4px | Küçük kontroller. | | --border-radius-8 | 8px | Orta boy kapsayıcılar. | | --border-radius-12 | 12px | Kullanılabilir sayısal köşe adımı. | | --border-radius-16 | 16px | Büyük kapsayıcılar. | | --border-radius-small | var(--border-radius-4) | Adlandırılmış küçük takma ad. | | --border-radius-medium | var(--border-radius-8) | Adlandırılmış orta boy takma ad. | | --border-radius-big | var(--border-radius-16) | Adlandırılmış büyük takma ad. | ### Düğme API | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | kind | Default: primary | Bu örnekte kullanılan üçüncül eylemler dâhil, görsel vurgu. | | size | Default: medium | Kompakt satır eylemleri için small kullanın. | | type | Default: button | Form gönderimi için submit değerini açıkça ayarlayın. | | disabled | boolean | Hiç satır seçili olmadığında toplu işlemi devre dışı bırakır. | | loading | boolean | Gerçek bir bekleyen işlem sırasında yükleme göstergesi gösterir. | | active | boolean | Görsel etkin durumu belirtir; geçiş denetimi için aria-pressed değerini de kullanın. | | onClick | React mouse-event callback | Uygulama durumunu burada güncelleyin. | | aria-pressed | ARIA pressed state | Düğme geçişleri kullanıyorsanız satır seçiminin değiştiğini belirtin. | ## Monday Vibe Tasarım Sistemi Eksiksiz Kılavuzu Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## Monday Vibe Tasarım Sistemi Güncel Vibe giriş noktalarını kullanarak oluşturun ### Temel bileşenler ve belirteç CSS ayrı içe aktarımlardır > Vibe 4, @vibe/core üzerinden adlandırılmış React bileşenlerini; @vibe/core/tokens üzerinden ise CSS değişkenlerini sunar. Yeni bir istemci uygulamasında ikisini de içe aktarın. Bir bileşen, belirteç dosyasının sağladığı değişkenlere bağlı kalırken kendi stillerini ekleyebilir. Pano örneğinde yerel satır verileri ve seçim durumu kullanılır; tablo yapısı yerel HTML öğelerinden, kontroller ise gerçek Vibe Button bileşenlerinden oluşur. Destekleyici belirtimi okuyun ### Eski paket nesillerini birlikte kullanmaktan kaçının Eski monday-ui-react-core paketi Vibe 2'ye aittir. Vibe 3, yeni özellikler yerine kritik düzeltmeler için sürdürülmektedir. Bu kılavuzda güncel Vibe 4 arayüzü ve numaralı aralık değişkenleri kullanılır. Bu entegrasyon, monday.com SDK istemcisi değildir; hesap, çalışma alanı veya öğe API bağlantısı içermez. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Eylem renkleriyle pano etiketleri farklı işlevlere sahiptir ### Kontrollerde anlamsal rolleri kullanın Birincil eylemlerde, eşleşen üzerine gelme rengiyle birlikte birincil rolü kullanın. Seçim için seçili arka planı, normal metinler içinse birincil ve ikincil metin rollerini kullanın. Gövde arka planını tek başına değiştirmek yerine tema değerlerini birbiriyle uyumlu bir bütün olarak kullanın. Bu yerel incelemede doğrulanmış açık tema kullanılır. Destekleyici belirtimi okuyun ### Tamamlandı hücresi, başarı düğmesi değildir Kaynakta anlamsal geri bildirim renklerinin yanı sıra kategorik pano renkleri de bulunur. Tamamlandı için kullanılan yeşil #00c875, anlamsal olumlu renk olan #00854d'den farklıdır. Satır durumu hücrelerinde pano renklerini, okunaklılığı koruyan karşıt metinlerle birlikte kullanın. Devam Ediyor, Takıldı ve Tamamlandı metinlerini koruyun; durumu yalnızca renkle belirtmeyin. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Tam yazı tipi kısa yazımını kullanın ### Başlıklar ve iş satırları farklı bir görsel dile sahiptir Kaynakta başlıklar için Poppins, gövde içeriği için Figtree; ayrıca betiklere uygun yedek yazı tipleri tanımlanır. Güncel h1-medium kısa yazımı 600 32px/40px, text2-normal ise 400 14px/20px değerlerini kullanır. Kalınlık, boyut, satır yüksekliği ve aile değerlerinin bir arada kalması için kısa yazımı CSS font özelliğiyle uygulayın. Kaynakta eski başlık takma adları da bulunur; bunların farklı ölçeklerini sessizce kullanmayın. Destekleyici belirtimi okuyun ### Yazı tipi dosyalarını bilinçli biçimde yükleyin Vibe, önerilen yazı tipi dosyalarını sizin için içe aktarmaz. Belgelenmiş Figtree/Poppins stil sayfası bağlantısını uygulamanın HTML öğesine ekleyin veya uygun lisanslı dosyaları kendiniz barındırın. Çevrimdışı örnekte sistem yedek yazı tipleri açıkça kullanılır; bu nedenle görüntüleme, monday.com tipografisinin birebir aynısı olduğu iddiasını taşımaz. Destekleyici belirtimi okuyun ## Monday Vibe tasarım sistemi Kontrolleri sıkıştırmadan kompakt bir pano ### Ritmi numaralı aralıklar belirler Bitişik araç çubuğu eylemleri için --space-8, panel dolgusu için --space-16 ve pano bölgeleri arasındaki boşluk için --space-24 kullanın. Bunlar güncel kaynakta yer alan tam adlardır. Bu yerleşimler uygulama için yapılmış tercihlerdir. Ölçek, hassas hizalama için iki piksellik bir adımın yanı sıra kompozisyon için seksen piksele kadar daha büyük değerler de içerir. Destekleyici belirtimi okuyun ### Köşeler kapsayıcılığı belirler Küçük takma adlar dört piksele, orta boy olanlar sekiz piksele ve büyük olanlar on altı piksele karşılık gelir. Tablo hücreleri köşeli ve hizalı kalırken çevreleyen panoda orta boy köşe kullanın. Her renkli hücreyi rozet gibi yuvarlamak, yoğun sütun ilişkilerinin taranmasını zorlaştırır. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Toplu işlem araç çubuğuna sahip düzenlenebilir tablo ### Veri yapısını açıkça tanımlayın Her iş öğesinin sabit bir kimliği, başlığı, sahibi ve durumu vardır. Yerel sütun başlıkları bu değerleri açıklar. Satır onay kutusu kimliği bir Set'e ekler; durum değişikliği diziyi değiştirmek yerine eşleşen nesneyi yenisiyle değiştirir. Seçilenleri tamamla eylemi aynı Set'i okur ve yalnızca seçili satırları günceller. Tamamlanma özeti satırlardaki verilerden türetilir. - Seçim Set'i boşken birincil toplu işlem düğmesi devre dışıdır. - Satır başına sunulan üçüncül eylem, gösterim amacıyla yerel durumu sırayla değiştirir. - Sıfırlama eylemi ilk satırları geri yükler ve seçimi temizler. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Durumu gerçek Button API aracılığıyla belirtin ### Devre dışı, yükleniyor ve basılı durumları birbirinden farklıdır Yerel örnekte, kullanılamayan bir toplu işlem için disabled kullanılır. Uzak bir işlem olmadığından yükleniyor veya başarı durumu gösterilmez. Gerçek bir kalıcı depolama katmanı bağlarsanız yükleniyor durumunu istek yaşam döngüsüne bağlayın ve başarı durumunu yalnızca onay alındıktan sonra güncelleyin. Button kaynağı, görünüm için active ve geçiş denetimi anlamı için aria-pressed özelliklerini de sunar; biri diğerinin yerini tutmaz. Destekleyici belirtimi okuyun ### Yerel düzenlemeleri hizmet iddiasına dönüştürmeyin Canlı ileti, yerel olarak kaç öğenin değiştiğini söyler. monday.com panosunun güncellendiğini söylemez. Sayfa yeniden yüklendiğinde örnek veriler başlangıç durumuna döner. Üretim ortamında entegrasyon için tasarım sistemi katmanının dışında açık çalışma alanı izinleri, hata yönetimi ve eşitleme gerekir. Destekleyici belirtimi okuyun ## Monday Vibe tasarım sistemi Satır anlamını farklı genişliklerde koruyun ### Gösterimi yeniden akışa duyarlı biçimde düzenleyin Çevrimdışı pano, dar ekranda her satırı etiketli bir öğe kartı olarak gösterir. Sahip ve durum bilgilerinin anlaşılır kalması için sütun adları görünür etiketler olarak yinelenir. Bu, uygulamaya özgü bir yerleşim tercihidir; Vibe'ın her tabloyu otomatik olarak dönüştürdüğü iddiası değildir. Yerel başlangıç şablonu, daha yoğun veriler için alternatif olarak etiketli bir yatay kaydırma alanında anlamsal tabloyu korur. Destekleyici belirtimi okuyun ### Genel kutu boyutlandırması ön koşuldur Kitaplığı kullanmadan önce öğelere ve sözde öğelere border-box uygulayın. Aksi hâlde, sabit genişlikli bir hücreye eklenen dolgu, özellikle yoğun bir sütunun içine düğme yerleştirildiğinde, hücrenin amaçlanan boyutunu aşabilir. Dış kapsayıcıyı esnek tutun ve araç çubuğundaki eylemlerin alt satıra geçmesine izin verin. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Seçim ve durumun birbirinden bağımsız adları olmalı ### Her satır kontrolünü etiketleyin Bir seçim kutusunun erişilebilir adı, iş öğesinin başlığını içerir. Her durum eyleminin adı, öğe adını ve mevcut durumu da içerir. Kibar bir durum iletisi toplu işlemin sonucunu bildirir. Klavye kullananlar yerel kontrollerle satırları seçebilir, toplu komutu etkinleştirebilir ve panoyu sıfırlayabilir; sayfa, elektronik tabloya özgü ok tuşu davranışları uydurmaz. 1. Design handoff öğesini seçin ve toplu işlemin kullanılabilir hâle geldiğini doğrulayın. 2. Seçimi tamamlayın; durum metni ile hesaplanan sayının birbiriyle eşleştiğini kontrol edin. 3. Sıfırlayın ve hem verilerin hem de onay kutusu seçiminin başlangıç durumuna döndüğünü doğrulayın. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Tam bir istemci tarafı giriş noktası ### Yükleme, içe aktarma ve bağlama Aşağıdaki kurulum, kök öğe içeren bir React istemci projesi için main.jsx giriş noktasıdır. react, react-dom ve @vibe/core@4 paketlerini yükleyin, token CSS değerini bir kez içe aktarın ve listelenen genel stil sayfasını uygulayın. Mevcut paket ES modülü dışa aktarımlarını kullanır. Sunucu tarafında stil çıkarma deneysel olarak belgelenmiştir; bu başlangıç şablonu özellikle istemci tarafında görüntüleme kullanır. Destekleyici belirtimi okuyun ## Monday Vibe Tasarım Sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Doğrulanmış Vibe açık tema paleti, boşluk ve tipografi ölçülerini kullanan bağımsız HTML/CSS yorumu; sistem yedek yazı tipi. ``` Weekly delivery — Vibe study

Weekly delivery

A shared view of the work moving this week.
1 / 3 completed
WorkingStuckDone
0 selected

▼ This week

Select items or click a status to change it locally.

``` Kod referansı - Toplu işlem araç çubuğu, örnek görevlerin durumlarını değiştirir. Etiket renkleri bu panonun iş akışını tanımlar; Vibe anlamsal eylem tokenlarının yerine geçmez. ### Tam yerel uygulama girişi Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` Kod referansı - Eksiksiz yerel pano giriş noktası; bileşen örneğindeki board.css dosyasını ekleyin. Yazı tipleri otomatik olarak pakete dahil edilmez. Yerel API paketi resmî kaynağa göre denetlendi; bu ortamda paket örneği derlenmedi. ### Token tabanlı pano stil sayfası Yerleşim ve tipografi için tokens dışa aktarımını kullanın. Üst bölge, dar genişliklerde anlamsal tablonun kullanılabilir kalmasını sağlar. ``` *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--allgrey-background-color);color:var(--primary-text-color);font:var(--font-text2-normal)} .board{max-width:960px;margin:auto;padding:var(--space-24)} h1{font:var(--font-h1-medium)} .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-bottom:var(--space-16)} .table-scroll{overflow:auto;border:1px solid var(--layout-border-color);border-radius:var(--border-radius-medium)} table{width:100%;min-width:560px;border-collapse:collapse;background:var(--primary-background-color)} th,td{text-align:left;padding:var(--space-12);border-bottom:1px solid var(--layout-border-color)} ``` Kod referansı - Bu, gerçek Vibe değişkenlerini kullanan uygulama CSS'dır. - Gömülü önizleme, bağımsız ve duyarlı bir HTML yorumudur. ### Uygulama HTML içinde yazı tipi yükleme Önerilen iki yazı tipi ailesini açıkça yükleyin; CSS token içe aktarımı bunları indirmez. ``` ``` Kod referansı - Bu harici stil sayfasının yerine lisanslı, kendi sunucunuzda barındırılan bir yazı tipi kurulumu kullanılabilir. ## Monday Vibe Tasarım Sistemi AI Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Eksiksiz yerel pano giriş noktası; bileşen örneğindeki board.css dosyasını ekleyin. Yazı tipleri otomatik olarak pakete dahil edilmez. Yerel API paketi resmî kaynağa göre denetlendi; bu ortamda paket örneği derlenmedi. ``` // npm install react react-dom @vibe/core@4 // main.jsx in a client React project with
import React, { useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Button } from '@vibe/core'; import '@vibe/core/tokens'; import './board.css'; const initial=[{id:1,title:'Design handoff',owner:'Maya',status:'Working'}, {id:2,title:'Accessibility review',owner:'Theo',status:'Stuck'}, {id:3,title:'Release notes',owner:'Sam',status:'Done'}]; const states=['Working','Stuck','Done']; function Board(){ const [items,setItems]=useState(initial),[selected,setSelected]=useState(new Set()),[message,setMessage]=useState(''); const toggle=id=>setSelected(old=>{const next=new Set(old);next.has(id)?next.delete(id):next.add(id);return next}); const complete=()=>{setItems(old=>old.map(item=>selected.has(item.id)?{...item,status:'Done'}:item));setMessage(selected.size+' local items completed');setSelected(new Set())}; return

Weekly delivery

{items.filter(x=>x.status==='Done').length} of {items.length} items completed

{items.map(item=>)}
SelectItemOwnerStatus
toggle(item.id)}/> {item.title}{item.owner}

{message}

} createRoot(document.getElementById('root')).render(); ``` ### Projeniz İçin Bir İstem ``` Sağlanan Vibe 4 teslimat panosunu oluşturun. @vibe/core/tokens paketini içe aktarın, güncel numaralı boşluk değişkenlerini ve eksiksiz yazı tipi kısaltmalarını kullanın; anlamsal geri bildirim renklerini pano etiketi renklerinden ayrı tutun. Satır seçimini, durum düzenlemelerini ve türetilmiş tamamlanma sayısını yerel olarak uygulayın. Toplu işlem düğmesinde disabled kullanın; uzaktan kaydetme davranışını taklit etmeyin. ``` ## Monday Vibe Tasarım Sistemi Kaynakları ve Kapsamı Bağımsız Vibe 4 referansı ve yerel pano gösterimi. monday.com hesabı, çalışma alanı verisi veya SDK bağlantısı yoktur. Yerel başlangıç şablonu, gerçek Vibe Button kontrollerini ve uygulamanın kendi tablo işaretlemesini kullanır. - Vibe 4'e genel bakış Mevcut paket, token giriş noktası ve eski sürümlerin sınırları. - Temel entegrasyon Kök içe aktarımları, genel kutu boyutlandırması ve ayrıca yüklenen yazı tipleri. - Açık tema kaynağı Anlamsal renkler, pano etiketi renkleri ve gölgeler. - Boşluk kaynağı Mevcut numaralı boşluk değişkenleri. - Tipografi kaynağı Figtree/Poppins aileleri ve kısaltılmış stiller. - Köşe yarıçapı kaynağı Sayısal ve adlandırılmış köşe tokenları. - Düğme kaynağı Kontrollü eylem, devre dışı, yükleniyor ve basılı durum anlambilimi. - Paket dışa aktarımları ES modülü giriş noktası ve tokens CSS dışa aktarımı. ## Monday Vibe Tasarım Sistemi İlgili Kaynaklar ### Morningstar tasarım sistemi Sayıların hizalandığı, varlık renklerinin anlamını koruduğu ve tipografinin okunaklı kaldığı bir araştırma arayüzü oluşturun. MDS sabitlerini, Vue 3 kullanımını, Morningstar Intrinsic geçişini ve sıralanabilir, kurgusal bir varlık dağılımı not defterini inceleyin. ### Mozilla Protocol Gerçek yazı tipi aileleri, boşluk ve kapsayıcı ölçekleri, duyarlı ve görselli bir okuma sayfası ve eksiksiz yerel CSS form örneği içeren editoryal bir Protocol kılavuzu. ### Nord tasarım sistemi Bir oda talebi taslağı üzerinden Nord’un Therapy tema belirteçlerini ve Web Component sözleşmelerini inceleyin: gerçek renk rolleri, duyarlı alan boyutları, açık doğrulama ve yerel olarak hazırlanan sonuçlar. - [Uygulama başvurusu](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Kaynak](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Kaynak](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Kaynak](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Kaynak](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Kaynak](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Destekleyici belirtimi okuyun](https://github.com/mondaycom/vibe) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Destekleyici belirtimi okuyun](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Destekleyici belirtimi okuyun](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json) - [Kod referansı](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Kod referansı](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Kod referansı](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Vibe 4'e genel bakış Mevcut paket, token giriş noktası ve eski sürümlerin sınırları.](https://github.com/mondaycom/vibe) - [Temel entegrasyon Kök içe aktarımları, genel kutu boyutlandırması ve ayrıca yüklenen yazı tipleri.](https://github.com/mondaycom/vibe/blob/master/packages/core/README.md) - [Açık tema kaynağı Anlamsal renkler, pano etiketi renkleri ve gölgeler.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/themes/light-theme.scss) - [Boşluk kaynağı Mevcut numaralı boşluk değişkenleri.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/spacing.scss) - [Tipografi kaynağı Figtree/Poppins aileleri ve kısaltılmış stiller.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/typography.scss) - [Köşe yarıçapı kaynağı Sayısal ve adlandırılmış köşe tokenları.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/style/src/border-radius.scss) - [Düğme kaynağı Kontrollü eylem, devre dışı, yükleniyor ve basılı durum anlambilimi.](https://github.com/mondaycom/vibe/blob/master/packages/components/button/src/Button/Button.tsx) - [Paket dışa aktarımları ES modülü giriş noktası ve tokens CSS dışa aktarımı.](https://raw.githubusercontent.com/mondaycom/vibe/master/packages/core/package.json)