# AWS Cloudscape Tasarım Sistemi ## AWS Cloudscape Tasarım Sistemi arayüzü önizlemesi Geçersiz adları deneyin, kapasite profili seçin, yapılandırma ve inceleme arasında geçiş yapın, görünümü değiştirin ve tarifi yerel olarak onaylayın. ## AWS Cloudscape Tasarım Sistemi tasarım referansı Cloudscape bileşenleri 3.0.1390 ve design-tokens 3.0.114, visual-refresh teması. Değerler yayımlanmış token JSON dosyasından okunur. Renk modları ve içerik yoğunlukları birbirinden ayrı boyutlardır. Bu, seçilmiş bir uygulama referansıdır; token dışa aktarımının tamamı değildir. ### Açık ve koyu modlarda anlamsal renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | color-background-layout-main | light: #ffffff; dark: #161d26 | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-background-container-content | light: #ffffff; dark: #161d26 | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-body-default | light: #0f141a; dark: #c6c6cd | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-body-secondary | light: #424650; dark: #c6c6cd | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-interactive-default | light: #424650; dark: #dedee3 | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-link-default | light: #006ce0; dark: #42b4ff | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-status-error | light: #db0000; dark: #ff7a7a | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-text-status-success | light: #00802f; dark: #2bb534 | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-border-input-default | light: #8c8c94; dark: #656871 | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | | color-background-button-primary-default | light: #006ce0; dark: #42b4ff | Adlandırılmış rolü amaçlanan bağlamda kullanın; eşleştirme, birbirinin yerine geçebilecek renk örneklerini değil, açık ve koyu moddaki değerleri gösterir. | ### Gövde metni ve başlık tipografisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | font-size-body-m | 14px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-body-s | 12px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-heading-l | 20px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-heading-m | 18px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-heading-s | 16px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-heading-xl | 24px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | font-size-heading-xs | 14px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-body-m | 20px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-body-s | 16px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-heading-l | 24px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-heading-m | 22px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-heading-s | 20px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-heading-xl | 30px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | | line-height-heading-xs | 18px | Aynı rolün font-size ve line-height değerlerini birlikte kullanın. Header ve Box varyantları, bileşen hiyerarşisini uygular. | ### Yoğunluğa duyarlı boşluklar | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | space-scaled-xxxs | comfortable: 2px; compact: 0px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-xxs | comfortable: 4px; compact: 2px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-xs | comfortable: 8px; compact: 4px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-s | comfortable: 12px; compact: 8px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-m | comfortable: 16px; compact: 12px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-l | comfortable: 20px; compact: 16px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-xl | comfortable: 24px; compact: 20px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-xxl | comfortable: 32px; compact: 24px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | | space-scaled-xxxl | comfortable: 40px; compact: 32px | Etkin yoğunluğa göre rahat veya sıkışık değeri kullanın. Bu boşluk değişiklikleriyle metni ölçeklendirmeyin. | ### Bileşen biçimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | border-radius-container | 16px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | | border-radius-button | 20px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | | border-radius-input | 8px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | | border-radius-alert | 12px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | | border-radius-dropdown | 8px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | | border-radius-card-embedded | 8px | Adlandırılmış bileşenin biçimini koruyun. Düğme yarıçapı, kapsayıcılar için evrensel bir yarıçap değildir. | ### Etkileşim zamanlaması | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | motion-duration-responsive | default: 115ms; disabled: 0ms | Hareket devre dışı modunda yerel animasyon süresi sıfıra iner. Aynı etkileşime ilgisiz başka bir geçiş efekti eklemekten kaçının. | | motion-duration-expressive | default: 165ms; disabled: 0ms | Hareket devre dışı modunda yerel animasyon süresi sıfıra iner. Aynı etkileşime ilgisiz başka bir geçiş efekti eklemekten kaçının. | | motion-duration-complex | default: 250ms; disabled: 0ms | Hareket devre dışı modunda yerel animasyon süresi sıfıra iner. Aynı etkileşime ilgisiz başka bir geçiş efekti eklemekten kaçının. | ### Yerel düzen API | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Wizard | activeStepIndex · onNavigate · onSubmit | React içindeki geçerli adımı yönetin; istenen sonraki indeksi kabul etmeden önce doğrulayın. | | FormField | label · constraintText · errorText | Biçim kuralını ve geçersiz giriş geri bildirimini ad alanının yanında gösterin. | | Input | value · onChange({ detail }) | DOM olay hedefi yerine detail.value değerini okuyun. | | Select | selectedOption · options · onChange | label ve value dahil olmak üzere seçili seçenek nesnesini saklayın. | | Container | header={
} | Yeni bir kart sistemi uydurmadan, ilişkili yapılandırma alanlarını gruplandırın. | | ColumnLayout | columns={2} · variant="text-grid" | Kütüphane genişliğine uyum sağlayan sütunlarla kısa inceleme meta verilerini gösterin. | | SpaceBetween | size="l" | Alanları ve inceleme modüllerini ayırmak için kütüphanenin boşluk ölçeğini kullanın. | | applyMode | Mode.Light / Mode.Dark | Yerel bileşenler ve anlamsal tokenlar için genel görsel modu değiştirin. | ## AWS Cloudscape 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ı. ## AWS Cloudscape Tasarım Sistemi yapılandırma mimarisi ### İş akışını Wizard ile eşleştirin > Örnek, yapılandırmayı incelemeden ayırır. Wizard adım gezinmesini ve eylemleri sağlar; uygulama ise geçerli indeksi, alan değerlerini, doğrulama kuralını ve son onayı yönetir. Okuyucu, formu yeniden oluşturmadan veya seçili kapasiteyi kaybetmeden yapılandırmaya dönebilir. Bu yaklaşım, çok adımlı bir iş akışının tamamını tek bir genel Card içine gizlemekten daha uygundur. ### Yerel kapsayıcılarla oluşturun Container, Header ve SpaceBetween form bölümünü tanımlar. h1 işlemi tanıtır; h2 ayarlar grubuna ad verir. Açıklayıcı metin, tarif ettiği alanın veya adımın yanında yer alır. Dıştaki 1200px maksimum genişlik ve sayfa dolgusu, dışa aktarılmış Cloudscape düzen tokenları değil, uygulamada açıkça tanımlanan CSS değerleridir. ## AWS Cloudscape Tasarım Sistemi anlamsal tokenları ve görsel modlar ### Değeri seçmeden önce rolü belirleyin Referans; düzen arka planını, kapsayıcı içeriğini, gövde metnini, etkileşimli metni ve durum geri bildirimini birbirinden ayırır. Bunların değerleri tek bir palet oluşturmaz. Özel arayüzler için açık modun hex değerini her duruma kopyalamak yerine @cloudscape-design/design-tokens paketinden adlandırılmış tokenı içe aktarın. Token kullanım amacına dair bir uzlaşmayı ifade ederken değeri zamanla değişebilir. ### Kütüphane üzerinden modlar arasında geçiş yapın Önizleme, global-styles içindeki Mode.Light veya Mode.Dark ile applyMode işlevini çağırır. Bu, rastgele CSS renkleri değiştirmek yerine bileşenlerin kullandığı modu günceller. Koyu inceleme ekranında aynı etiketler, seçili kapasite ve gezinme durumu korunur. Kaynak JSON hem açık hem koyu mod değerlerini kaydeder; böylece aradaki fark incelenebilir. ## AWS Cloudscape Tasarım Sistemi tipografi ve başlık hiyerarşisi ### Yazı tipi ve satır yüksekliği rollerini birlikte kullanın visual-refresh body-m referansı 14px yazı boyutu ve 20px satır yüksekliğidir. heading-xl 30px satır yüksekliğiyle 24px; heading-l 24px satır yüksekliğiyle 20px; heading-m ise 22px satır yüksekliğiyle 18px değerindedir. Bu roller, formun kompakt hiyerarşisini açıklar; pazarlama amaçlı büyük başlık boyutlarının yerine geçmez. ### Anlamsal bileşen varyantlarını kullanın Header varyantı h1, Create a workspace başlığını adlandırır. Container başlıkları h2 kullanır; Box varyantı awsui-key-label ise inceleme etiketlerine tutarlı, ikincil bir görünüm kazandırır. İnceleme değerleri okunabilir sıradan metinler olarak kalır. Daha fazla görsel ağırlık oluşturmak için her alan etiketini başlık düzeyine çıkarmayın. ## AWS Cloudscape Tasarım Sistemi denetimli alanlar ve inceleme düzeni ### detail olay sözleşmesini anlayın Input, yeni metni içeren detail.value değerine sahip bir olay gönderir. Select ise yalın bir dize yerine seçenek nesnesi olan detail.selectedOption değerini gönderir. Tam örnek bu nesneyi saklar ve incelemede label değerini gösterir. Böylece selectedOption değerine yalnızca bir tanımlayıcı verildiği için seçicinin boş görünmesine yol açan yaygın bir entegrasyon hatası önlenir. ### Alan yönergelerini ilgili alanla birlikte tutun FormField, Workspace name etiketini, kısıtlama metnini ve hata metnini yönetir. Doğrulama kuralı; bir harfle başlayan, 3–30 karakter uzunluğunda ve yalnızca küçük harf, sayı ve kısa çizgi içeren adlara izin verir. Bu kural örnek uygulamanın ilkesidir; AWS genelinde geçerli bir adlandırma kuralı değildir. Kapasite açıklamasında da profillerin kurgusal olduğu belirtilir. - Alan biçimi ilkesi bu örnek uygulamaya özgüdür. - Kapasite seçenekleri ürün veya fiyatlandırma iddiası değildir. - Sunumu yerel bileşenler yönetir; yapılandırmayı ise React durumu saklar. ## AWS Cloudscape Tasarım Sistemi yoğunluğu ve duyarlı düzen ### Sıkışık modu yakınlaştırma düzeyi olarak görmeyin Yayımlanmış ölçeklendirilmiş boşluk değerleri yoğunluğa göre değişir. Örneğin space-scaled-m, rahat yoğunlukta 16px, sıkışık yoğunlukta 12px; space-scaled-l ise sırasıyla 20px ve 16px değerindedir. Bu farklar, içeriği yeniden tanımlamadan veya metni keyfî biçimde küçültmeden dikey ritmi sıkıştırır. Yerel bileşenler kendi yoğunluk kurallarını uygular. ### Adım ve inceleme düzenlerinin uyum sağlamasına izin verin Wizard, kullanılabilir genişliğe göre gezinme görünümünü değiştirir; ColumnLayout ise inceleme meta verilerini duyarlı biçimde düzenler. Uygulama CSS değeri, dış dolguyu 600px altında azaltır. Örnek, masaüstündeki adım gezinmesi genişliğini sabit kodlamaz; mobil sürümde Sonraki, Önceki ve yerel Onayla eylemleri görünür kalır. ## AWS Cloudscape Tasarım Sistemi Wizard doğrulama ve onay ### Gezinmeyi kabul etmeden önce doğrulayın onNavigate, requestedStepIndex değerini alır. Uygulama, inceleme adımına geçmeden önce geçerli adı kontrol eder ve ad geçersizse adımı değiştirmez. Düzenleme yapıldığında hata temizlenir; böylece bir sonraki gönderim yeniden değerlendirilir. Ayarlara geri dönmek, adı ve seçili seçeneği korur. 1. Geçersiz bir ad gönderin ve yapılandırma ekranında kalın. 2. Adı düzeltin ve farklı bir kapasite profili seçin. 3. İnceleme adımına geçin ve her iki değeri de onaylayın. 4. Değerleri kaybetmeden geri dönmek için Ayarları düzenle seçeneğini kullanın. 5. Yerel olarak onaylayın ve örneği yeniden başlatın. ### Bir tarifi kaynak oluşturma işleminden ayırın Son eylem, yerel bir başarı Alert bileşeni ve yapılandırma özeti gösterir. Gerçek bir kaynak oluşturuyormuş gibi davranmaz. Gerçek bir uygulamada, kaynak oluşturma devam ederken gönderim eylemini beklemede tutun; kabul edilen isteklerle tamamlanan kaynakları birbirinden ayırın ve yapılandırmayı silmeden hatalardan kurtarma olanağı sunun. ## AWS Cloudscape Tasarım Sistemi form erişilebilirliği ### Etiketleri ve gezinme adlarını koruyun Wizard, navigationAriaLabel değerini ve çevrilmiş eylem dizelerini alır. Her Input ve Select, etiketli bir FormField içinde yer alır. Alert, geçersiz veya başarılı sonuçları yerel bileşen anlambilimiyle bildirir. Görünür kısıtlamalar alan etiketini tamamlar; onun yerini almaz. ### Tüm işlem boyunca klavye akışını gözden geçirin Ad alanına ulaşmak, kapasite seçiciyi açmak, ilerlemek, geri dönmek, düzenlemek ve onaylamak için klavyeyi kullanın. Yerel odak davranışı yardımcı olur; ancak adım doğrulama kuralının ve onayın anlamının sorumluluğu yine uygulamadadır. Bileşen kütüphanesi, eksik bir iş kuralını tek başına doğrulayamaz. ## AWS Cloudscape Tasarım Sistemi kurulumu ve özel sınırlar ### İlişkili paketleri birlikte yükleyin Uygulama, bileşenleri kendi paket alt yollarından içe aktarır ve global-styles dosyasını bir kez yükler. design-tokens, özel stiller için referans sağlar. Sağlanan React giriş dosyası ve kompakt CSS dosyası, etkileşimli örneği bir Vite React uygulamasında yeniden oluşturur. Uyumlu Cloudscape paket sürümlerini birlikte kullanın. ### Sağlanan örneği gerçek bir başlangıç noktası olarak kullanın Kurgusal kapasite verilerini yalnızca gerçek hizmet modelinizi tanımladıktan sonra değiştirin. Olay sözleşmelerini ve inceleme adımını koruyun; ardından eşzamansız gönderim ve açık hata yanıtları ekleyin. Özel bir öğe gerektiğinde önce mevcut bir Cloudscape bileşenini tercih edin; ancak bundan sonra uygun bir anlamsal token kullanan özel bir öğe ekleyin. ## AWS Cloudscape Tasarım Sistemi Bileşen Örnekleri ### main.jsx — eksiksiz yapılandırma sihirbazı Denetimli gezinme ve yerel onayla birlikte yerel Wizard, FormField, Select ve inceleme meta verileri. ``` import React, { useState } from "react"; import { createRoot } from "react-dom/client"; import Wizard from "@cloudscape-design/components/wizard"; import Container from "@cloudscape-design/components/container"; import Header from "@cloudscape-design/components/header"; import FormField from "@cloudscape-design/components/form-field"; import Input from "@cloudscape-design/components/input"; import Select from "@cloudscape-design/components/select"; import SpaceBetween from "@cloudscape-design/components/space-between"; import ColumnLayout from "@cloudscape-design/components/column-layout"; import Box from "@cloudscape-design/components/box"; import Button from "@cloudscape-design/components/button"; import Alert from "@cloudscape-design/components/alert"; import Toggle from "@cloudscape-design/components/toggle"; import { applyMode, Mode } from "@cloudscape-design/global-styles"; import "@cloudscape-design/global-styles/index.css"; import "./cloudscape.css"; const sizes = [ { label: "Development · 2 vCPU / 4 GiB", value: "dev" }, { label: "Standard · 4 vCPU / 8 GiB", value: "standard" }, { label: "Compute · 8 vCPU / 16 GiB", value: "compute" }, ]; function App() { const [name, setName] = useState("analytics-sandbox"), [size, setSize] = useState(sizes[0]), [step, setStep] = useState(0), [error, setError] = useState(""), [complete, setComplete] = useState(false), [dark, setDark] = useState(false); function next(index) { if (index > 0 && !/^[a-z][a-z0-9-]{2,29}$/.test(name)) { setError( "Use 3–30 lowercase letters, numbers or hyphens, starting with a letter.", ); return; } setError(""); setStep(index); } function reset() { setStep(0); setComplete(false); setError(""); setName("analytics-sandbox"); setSize(sizes[0]); } return (
CLOUDSCAPE · RESOURCE CONFIGURATION { setDark(detail.checked); applyMode(detail.checked ? Mode.Dark : Mode.Light); }} > Dark mode
Create a workspace
{complete ? ( The {name} recipe is ready for review. No cloud API was called and no resource was provisioned. Workspace recipe
}>
Name {name}
Capacity {size.label}
) : ( next(detail.requestedStepIndex)} onCancel={reset} onSubmit={() => setComplete(true)} i18nStrings={{ stepNumberLabel: (stepNumber) => `Step ${stepNumber}`, collapsedStepsLabel: (stepNumber, stepsCount) => `Step ${stepNumber} of ${stepsCount}`, skipToButtonLabel: (step) => `Skip to ${step.title}`, navigationAriaLabel: "Configuration steps", cancelButton: "Reset", previousButton: "Previous", nextButton: "Next", submitButton: "Confirm locally", optional: "optional", }} steps={[ { title: "Configure workspace", description: "Choose the identity and capacity.", content: ( Workspace settings} > { setName(detail.value); setError(""); }} />