# Volvo Cars Web tasarım sistemi ## Volvo Cars Web tasarım sistemi arayüz önizlemesi Bir plan seçin, birbirinden bağımsız ek seçenekler ekleyin ve aynı seçimleri açık ve koyu modlarda inceleyin. ## Volvo Cars Web tasarım sistemi tasarım referansı @volvo-cars/css 2.5.1’in gerçek, herkese açık belirteçleri; belgelenmiş seçilebilir kart işaretlemesiyle eşleştirilmiştir. Varsayılan açık renk değerleri gösterilir; koyu mod aynı stil sayfasında sağlanır. ### Varsayılan açık mod rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --v-color-foreground-primary | #000 | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-foreground-secondary | #5e5e5e | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-foreground-tertiary | #787878 | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-foreground-inverted | #fff | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-foreground-accent-blue | #0b2ded | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-background-primary | #fff | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-background-secondary | #fafafa | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-background-feedback-green | #d7f9df | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-background-feedback-red | #fce5e3 | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | | --v-color-surface-gray | #e3e3e3 | 2.5.1 sürümündeki ilk açık mod bildirimleri; yerel koyu tema bu rol değerlerini geçersiz kılar. | ### Sabit boşluk ve şekil değerleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --v-space-2 | .125rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-4 | .25rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-8 | .5rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-12 | .75rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-16 | 1rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-24 | 1.5rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-32 | 2rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-48 | 3rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-space-64 | 4rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-radius-sm | .25rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-radius-md | .5rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-radius-lg | 1rem | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | | --v-radius-full | 9999px | Yayımlanmış sabit ölçek. Bunları akışkan sayfa boşluğu belirteçlerinden ayrı tutun. | ### Metin ve kenarlık kuralları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --v-font-sans-family | "Volvo Centum", "Helvetica Neue", "Helvetica", "Noto Sans", "Segoe UI", "Arial", sans-serif | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-regular-weight | 400 | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-emphasis-weight | 600 | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-14-size | .875rem | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-14-lineheight | 1.572 | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-16-size | 1rem | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-16-lineheight | 1.5 | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-20-size | 1.25rem | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-font-20-lineheight | 1.4 | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-border-width-default | 1px | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | | --v-border-width-selected | 2px | 2.5.1 sürümünün gerçek, herkese açık değerleri. Örnek, Volvo yazı tipi dosyalarını içermediğinden yazı tipi yığını için yedek seçeneği kullanır. | ## Volvo Cars Web tasarım sistemi eksiksiz kılavuz 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ı. ## Volvo Cars Web tasarım sistemi HTML öncelikli Foundation ve sürüm seçimi ### Kalıpla eşleşen stil sayfasını sabitleyin > Örnekte, uygulamada kullanılan seçilebilir kart referansıyla eşleşen @volvo-cars/css 2.5.1 kullanılır. 3. sürüm farklı bir sözleşmeye sahiptir; bu nedenle işaretlemeyi kontrol etmeden en yeni paketi yüklemek, kalıbın eksik kalmasına yol açabilir. Sürüm, kılavuzun yanı sıra kurulumda da belirtilmelidir: bir bileşen sınıfı, her sürümde aynı biçimde stil uygulanacağını garanti etmez. ### Herkese açık web katmanını bilinçli olarak kullanın Bu çalışma, herkese açık web belirteçlerini ve tüm ortamları kapsayan stil sayfasını doğrudan içe aktarır. Ayrı bir iç EDLS paketine bağlı değildir. Uygulama, kontrol listesi için az miktarda JavaScript kullanan yalın bir HTML uygulamasıdır. Yüklü CSS seçilebilir kart görünümünü, denetim stillerini ve renk modu rollerini yönetir; içerik ve durum ise uygulama tarafından sağlanır. ## Volvo Cars Web tasarım sistemi nötr roller, tipografi ve boşluklar ### Açık ve koyu rolleri birbirine bağlı tutun Tablo, varsayılan açık tema bildirimlerini kaydeder; data-color-mode ise bunlara karşılık gelen yerel koyu tema değerlerini seçer. Bileşimde, her karta beyaz metni sabitlemek yerine arka plan ve ön plan rolleri kullanılır. Tema değiştirilirken seçilen plan ve ek seçenekler korunmalıdır; paleti değiştirmek, kontrol listesini değiştirmekten bağımsızdır. ### Sabit adımları akışkan sayfa ritminden ayırın Seçilen referanstaki sabit boşluk değerleri 2px ile 64px arasındadır. Diğer herkese açık sayfa belirteçlerinde clamp ve round kullanılır; bu nedenle değerler görüntü alanına göre değişir. Örnekteki iki sütunlu düzen ve 40px boşluk, yerel kartların çevresinde oluşturulmuş özgün düzen tercihleridir. Yayımlanan yazı tipi yığını korunmuştur ancak Volvo yazı tipi dosyaları pakete dahil değildir; görüntüleme, kullanılabilir sistem yedeğini kullanır. ## Volvo Cars Web tasarım sistemi Seçilebilir Kart Semantiği ### Tek plan için radio girişlerini kullanın İki plan kartında, legend içeren bir fieldset içindeki aynı name değerini kullanan yerel radio girişleri bulunur. Her kart; başlık, meta ve açıklama alanları olan bir label'dır. Karta tıklandığında radio seçilir ve standart radio klavye davranışı kullanılabilir. Böylece seçilen plan, ayrı yönetilen dekoratif bir kenarlık değil, gerçek form durumu olur. ### Birbirinden bağımsız ekler için checkbox kullanın Su ve ekstra bir katman birbirinden bağımsız seçilebildiğinden checkbox kullanırlar. Kartlarda iç içe bağlantı veya düğme yoktur: label içindeki etkileşimli bir öğe, çakışan etkinleştirme davranışlarına yol açar. Özet eylemleri kartların dışında yer alır. Yayımlanan React forms katmanı, tasarımın gerçekten daha karmaşık etkileşimli kart içeriğine ihtiyaç duyduğu durumlar için bir alternatiftir. - Bir radio grubunu tek bir fieldset ve legend içinde tutun. - Birbirinden bağımsız ekler için checkbox kullanın. - Bağlantıları ve düğmeleri yalnızca CSS içeren label kartının dışında tutun. ## Volvo Cars Web tasarım sistemi Türetilen Kontrol Listesi ve Onay ### Özeti aynı denetimlerden türetin Özet, seçilen planın temel öğelerini seçili eklerle birleştirir. Radio değiştirildiğinde, bağımsız ekler korunurken başlık ve temel öğeler güncellenir. Sayı, ortaya çıkan listeden türetilir. Örneklerdeki tüm hazırlık içeriği özgündür; özellikle araç özellikleri, fiyatlar veya gerçek bir Volvo satın alma yapılandırmasına ilişkin iddialardan kaçınılmıştır. ### Seçimler değiştiğinde eski onayı temizleyin Bu planı sakla eylemi sayfa içinde yerel bir onay gösterir. Sonraki herhangi bir plan veya ek değişikliği, yeni kombinasyonun zaten saklandığı izlenimini önlemek için bu mesajı gizler. Eylem bir hesaba yazmaz, herhangi bir şey satın almaz veya veri göndermez. Görünür not ve kaynak, bu sınırlı sayfa içi davranışı tutarlı biçimde açıklar. ## Volvo Cars Web tasarım sistemi Renk Modu ve Duyarlı Düzen ### Temayı kontrol listesi durumundan ayrı tutun Renk modu seçimi, belge üzerindeki data-color-mode değerini değiştirir. Radio'ları, checkbox'ları veya özeti yeniden oluşturmaz. Yerel stil sayfası bazı yüzeylerde geçiş efektleri kullandığından, görsel doğrulamada değişimin ortasında alınmış bir ekran görüntüsü yerine temanın son hâli incelenmelidir. Metin, denetim durumu ve yüzey kontrastı birlikte kontrol edilmelidir. ### Dar ekranlarda okuma sırasını tek sütunda koruyun Hazırlık seçenekleri, belge sıralamasında özetten önce gelir. Telefon genişliklerinde iki sütunlu ızgara tek sütuna dönüşür; böylece bu sıra ve tüm eylemler korunur. Varsayılan boyutlandırmanın yatay taşmaya yol açmasını önlemek için fieldset'lerde min-width:0 kullanılır. Uzun kart içeriği, üst öğenin dışına taşmak yerine seçili kart düzeni içinde satırlara bölünür. ## Volvo Cars Web tasarım sistemi Eksiksiz Kaynak Kod ve Yerel Doğrulama ### İki kaynak dosyasını eşleşen paketle çalıştırın JavaScript, özgün içeriğin tamamını ve tüm etkileşim işleyicilerini içerir. CSS yalnızca uygulama bileşimini ve yerel bir checkbox onay işaretini yedeğini içerir. Sağlanan HTML kabuğunu kullanın, iki kaynak dosyasını kaydedin ve sabitlenmiş CSS sürümünü yükleyin. Yalnızca stil sayfasını içe aktarmak denetimlere stil kazandırır; ancak kontrol listesi sayılarını veya yerel onayı uygulamaz. 1. Vanilla uygulamasını oluşturun ve @volvo-cars/css 2.5.1 paketini yükleyin. 2. main.js, volvo.css ve sağlanan kök HTML kabuk dosyasını kaydedin. 3. Uygulamayı çalıştırın ve radio ile checkbox davranışlarını karşılaştırın. 4. Açık ve koyu temaların son hâlini ve sıfırlama durumunu inceleyin. ### Seçimi, temayı ve geri yüklemeyi birlikte kontrol edin Kıyı planını seçin, su ekleyin ve dört öğenin görüntülendiğini doğrulayın. Planı saklayın, bir katman ekleyin ve önceki onayın kaybolduğunu kontrol edin. Seçimleri kaybetmeden koyu moda geçin, ardından ek seçenek olmadan ilk plana sıfırlayın. Klavyeyle radio seçimini ve dar ekranda satır kaydırmayı doğrulayın; açık ve koyu yüzeylerin son hâlini inceleyin. ## Volvo Cars Web tasarım sistemi Bileşen Örnekleri ### main.js — eksiksiz plan seçimi Tüm seçimler, türetilen özet, yerel onay, tema ve sıfırlama. ``` import '@volvo-cars/css/tokens.css'; import '@volvo-cars/css/styles_all-media.css'; import './volvo.css'; document.querySelector('#root').innerHTML=`

OpenDesign · Original planning study

A little room for the weekend.

Build a simple packing plan with selectable cards. These sample choices are not vehicle options or product specifications.

Choose your plan
Add to your checklist

Published Volvo Cars CSS 2.5.1 selectable-card styling with original packing content and local behavior. The preview uses the stylesheet’s system-font fallback; Volvo font assets are not bundled. Nothing is booked, purchased or sent.

`; const plans={city:{title:'A day in the city',items:['Day bag','Comfortable shoes']},coast:{title:'A quiet coastal break',items:['Weekend bag','Route notes','A good book']}};const extras={water:'Water and a reusable cup',layers:'An extra layer'};let current='city'; function render(){current=document.querySelector('[name=plan]:checked').value;let list=[...plans[current].items,...[...document.querySelectorAll('.extras input:checked')].map(e=>extras[e.value])];document.querySelector('#plan-title').textContent=plans[current].title;const ul=document.querySelector('#items');ul.replaceChildren(...list.map(x=>{let li=document.createElement('li');li.textContent=x;return li}));document.querySelector('#count').textContent=`${list.length} things on your checklist`;document.querySelector('#saved').hidden=true;} document.querySelectorAll('fieldset input').forEach(e=>e.addEventListener('change',render));document.querySelector('#mode').addEventListener('change',e=>document.documentElement.dataset.colorMode=e.target.value);document.querySelector('#save').addEventListener('click',()=>{let p=document.querySelector('#saved');p.hidden=false;p.textContent='Plan kept in this page. Changing a choice will clear this confirmation.';});document.querySelector('#reset').addEventListener('click',()=>{document.querySelector('[value=city]').checked=true;document.querySelectorAll('.extras input').forEach(e=>e.checked=false);render();document.querySelector('[value=city]').focus();});render(); ``` Kod referansı - Sabitlenmiş stil sayfasındaki aynı name değerini kullanan radio ve label alanları düzenini kullanır. ### volvo.css — özgün düzen Duyarlı düzen ve yerel checkbox onay işareti yedeği. ``` html{color-scheme:light}html[data-color-mode=dark]{color-scheme:dark}body{margin:0}main{max-width:1100px;padding:32px;margin:auto}header{padding:16px 0 40px}.eyebrow{font-size:12px;letter-spacing:.06em}.intro{max-width:60ch;margin-top:24px}.mode{display:flex;align-items:center;gap:16px;margin-top:24px}.mode select{max-width:180px}.composition{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:40px}fieldset{min-width:0;border:0;padding:0;margin:0}legend{font-size:20px;margin-bottom:16px}.extras{margin-top:32px}.summary{align-self:start}#items{padding-left:20px;margin:24px 0}#items li{margin:8px 0}.summary button{display:block;width:100%;margin-top:16px}.note{font-size:14px;color:var(--v-color-foreground-secondary);border-top:1px solid var(--v-color-surface-gray);padding-top:24px;margin-top:40px;max-width:80ch}#saved{margin-top:24px}.selectable-card input[type=checkbox]:checked:before{background-image:none!important;content:'✓';color:var(--v-color-foreground-inverted);display:grid;place-items:center}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.composition{grid-template-columns:1fr;gap:32px}.selectable-card{overflow-wrap:anywhere}.eyebrow{overflow-wrap:anywhere}} ``` Kod referansı - Düzen özgündür; kart stilleri yüklenmiş herkese açık CSS kaynağından gelir. ### index.html — kök kabuk Eksiksiz kök ve modül girişi. ``` Weekend packing study
``` Kod referansı - Kök Vite index.html dosyasını bu dosyayla değiştirin. ## Volvo Cars Web tasarım sistemi Ajan Kurulumu ### Uygulamaya Başlangıç Noktası Sabitlenmiş sürüm, bu seçilebilir kart uygulamasıyla eşleşir. Resmî yazı tipi dosyaları önizlemeye dahil değildir. ``` npm create vite@latest weekend-plan -- --template vanilla cd weekend-plan npm install npm install @volvo-cars/css@2.5.1 # Save index.html at the root; main.js and volvo.css in src. npm run dev ``` ### Projeniz İçin Bir İstem ``` Volvo Cars CSS 2.5.1 ve sağlanan eksiksiz kaynak kodla özgün bir hafta sonu hazırlık çalışması oluşturun. Yerel label tabanlı seçilebilir kartlar, fieldset radio grubu, birbirinden bağımsız checkbox ekleri, türetilen sayılar, eski onayın temizlenmesi ve seçimlerden bağımsız tema durumu kullanın. Örnek içeriğin tamamını gerçek araç özelliklerinden ayrı tutun. ``` ## Volvo Cars Web tasarım sistemi Kaynaklar ve Kapsam @volvo-cars/css 2.5.1 kullanan özgün bir OpenDesign hazırlık çalışmasıdır. Araç yapılandırma aracı değildir. Volvo yazı tipi dosyaları pakete dahil değildir; yerel stil sayfasının yedekleri kullanılır. - Seçilebilir kartlar Label alanları, radio gruplaması ve etkileşimli içerik sınırları. - Kurulum Herkese açık web CSS ve ayrı dahili EDLS sınırları. - Başlarken Önce HTML temelleri, ardından isteğe bağlı React katmanları. - Renkler Renk rolleri ve tema ilişkileri. ## Volvo Cars Web tasarım sistemi İlgili Kaynaklar ### Wonderflow Wanda Konu filtreleri, genişletilebilir kanıt bağlamı ve kalıcı yerel not defteri içeren eksiksiz bir geri bildirim okuma çalışma alanında Wanda’nın gerçek tema rollerini ve belirteç söz dizimini kullanın. ### Workday Canvas Canvas Kit’in birleşik FormField bileşeni, denetimli TextInput bileşeni ve PrimaryButton bileşeniyle yerel bir öğrenme planı oluşturun. Güncel anlamsal belirteç kaynaklarıyla eski space.x4 geçiş örneklerinin farkını görün. ### Zendesk Garden Gerçek tema takma adları, tipografi ve köşe yarıçapı ölçekleri, eksiksiz bir yanıt oluşturucu, görünürlüğü gözeten yerel taslaklar ve alan kurtarma özellikleri içeren bir Garden destek çalışması kılavuzu. - [Uygulama başvurusu](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Kaynak](https://designsystem.volvocars.com/web/core-concepts/colors/) - [Kaynak](https://designsystem.volvocars.com/web/developing/installation/) - [Kod referansı](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Seçilebilir kartlar Label alanları, radio gruplaması ve etkileşimli içerik sınırları.](https://designsystem.volvocars.com/web/components/selectable-cards/) - [Kurulum Herkese açık web CSS ve ayrı dahili EDLS sınırları.](https://designsystem.volvocars.com/web/developing/installation/) - [Başlarken Önce HTML temelleri, ardından isteğe bağlı React katmanları.](https://designsystem.volvocars.com/web/developing/getting-started/) - [Renkler Renk rolleri ve tema ilişkileri.](https://designsystem.volvocars.com/web/core-concepts/colors/)