Markanızı kataloğa eşleyin

Her bileşen değerleri değil, yalnızca rolleri kullanır. Markanızı bir kez eşlersiniz ve tüm katalog buna uyar: hiçbir işleyici bir rengi, yazı tipi boyutunu, boşluğu veya animasyon süresini sabit kodlamaz (hardcode).

Markanızı eşleyin

RendelTheme.fromTokens, kesinlikle sahip olduğunuz dört rengi alır ve skaladaki diğer basamakları bunlardan türetir.

final theme = RendelTheme.fromTokens(
  surface: brand.background,
  onSurface: brand.text,
  accent: brand.primary,
  onAccent: brand.onPrimary,
  radius: const RendelRadiusScale(card: 12, control: 999),
  fontFamily: 'YourFont',
);

await Rendel.init(
  appKey: key,
  theme: theme,
);

surfaceRaised, surfaceSunk, surfaceHigh, onSurfaceSoft, onSurfaceFaint, line ve lineStrong değerlerinin tümü yüzey ve metin renklerinizden türetilir. Tasarım sisteminiz kendi yükseklik (elevation) skalasını zaten tanımlıyorsa, üç yüzeyden herhangi birini doğrudan iletin.

Türetmeler basit karışımlardan ibaret değildir. onSurfaceSoft ve onSurfaceFaint, mürekkebinizin zemin renginize doğru, her yüzeyde 4.5:1 oranını karşılamayı bırakana kadar ne kadar yaklaşabileceğini ölçer; ardından bu alanı aralarında paylaştırır. Böylece kontrast payı çok az olan bir marka bile birbirinin aynı iki adım yerine iki belirgin ve sakin adım elde eder. Vurgu renginiz üzerinde başarısız olan bir onAccent eşlerseniz, geçer not alana kadar koyulaştırılır ve hata ayıklama konsolunuz bunu bildirir. Bir marka, erişilebilirlik tabanının etrafından dolaşarak değil, bu taban üzerinden uygulanır.

Tam denetim için RendelColors nesnesini kendiniz oluşturun ve RendelTheme kurucusuna iletin. RendelTheme.paper() Rendel'in kendi açık renk dilidir (RendelTheme.deep() ise koyu olanıdır); henüz entegrasyonu kurarken oldukça kullanışlıdır.

Renk rolleri

| onAccent | Dolgulu bir vurgu denetimi üzerindeki etiket | | line | Ayırıcılar ve dekoratif ince çizgiler | | lineStrong | Yanıt bekleyen bir bloğun kenarı | | shadow | Her yükseltinin tonlandığı renk. Renkli bir zemin üzerindeki siyah gölge kir gibi algılanır |

Vurgu rengi bir vaattir: işlem yapabileceğiniz anlamına gelir. Rendel'in size yalnızca bildirdiği her şey mürekkep rengiyle çizilir; böylece yanıt sayfasını marka renginiz için tarayan bir okuyucu, sayfadaki kararları doğrudan bulur. Grafikler, ilerleme çubukları, sipariş takipçileri ve akış imleci birer göstergedir ve bu rengi taşımaz. Her blok vurgu rengini en fazla bir kez harcar; çoğu blok ise hiç harcamaz.

Bunun tek istisnası, uyarı veya hata tonundaki bir status_banner bileşenidir; glifi accentText kullanır. Bir banner içinde herhangi bir denetim bulunmaz, bu nedenle işaretin başka bir şeyle karışma riski yoktur; ayrıca işaretlenmemiş acil bir bildirim, istisnası olan bir kuraldan daha kötüdür.

Derinlik, Rendel'in sizden yanıt bekleyip beklemediğini gösterir

Dört seviye vardır ve her birinin bir anlamı bulunur.

Sunk, hareketsiz veridir: bir grafiğin çizim alanı, bir tablo gövdesi, boş bir alan. Bir çukur nesne değildir ve gölge düşürmez. Ground, yanıt sayfasının kendisidir. Raised, Rendel'in size sunduğu içeriktir; yani her blok plakasıdır: surfaceRaised artı raise yüksekliği. Floating, yanıt bekleyen bir bloktur: bir basamak daha yüksekteki surfaceHigh artı lineStrong kenarlık.

Yalnızca beş blok yüzer: form, datetime_slots, variant_picker, booking_card ve confirm_card. Yıkıcı bir onay, kenarını tam mürekkep rengine taşır. Yanıtlandığında bir blok tekrar yükseltilmiş (raised) durumuna geri döner; böylece çözümlenmiş bir kart ve gönderilmiş bir form soru sormayı bırakır.

Dört blok hiçbir çevreleme taşımaz, çünkü içerikleri bunu zaten yapar: text, quick_replies, product_cards ve media_gallery.

RendelElevationScale, hem açık hem de koyu zeminler için tek bir skaladır. Koyu bir zeminde yükselmenin büyük kısmı, yükseltilmiş yüzeyin zeminden daha açık olmasıyla sağlanır; gölge bunu yalnızca derinleştirir.

Sizin sağlamadığınız iki rol

Her ikisi de zaten sağladıklarınızdan türetilir ve her ikisi de RendelTheme üzerinden okunabilir.

theme.accentText, 4.5:1 oranını karşılayana kadar yüzeyin ihtiyacına göre siyaha veya beyaza yaklaştırılmış vurgu renginizdir. İşleyici, ürün rozeti veya uyarı glifi gibi vurgu renginin dolgu yerine metin olduğu her yerde bunu kullanır; çünkü küçük metin olarak orta doygunluktaki bir marka rengi, bir düğme olarak gayet uygun olsa bile genellikle AA testinden kalır. Aynı işaret her ikisinde de göründüğü için, surface ve surfaceSunk arasından en az kontrast oluşturduğu yüzeye göre türetilir.

theme.lineControl, hangisinin en fazlasına ihtiyacı varsa, dört yüzeyin tümüne karşı 3:1 oranını karşılayan opaklıktaki onSurface değeridir. Etkileşimli her şeyin sınırını çizer: bir metin alanı, bir seçim kutusu, bir çip, sakin bir düğme. WCAG 1.4.11, bir denetimi tanımlayan görsel sınırda 3:1 oranını şart koşar ve boş bir metin alanı başka hiçbir şeyle tanımlanamaz. Dekoratif ince çizgiler line ve lineStrong seviyesinde kalır.

theme.accentEdge üçüncüsüdür. Yalnızca 3:1 oranını karşılamaya yetecek kadar koyulaştırılmış vurgu renginizdir ve her dolgulu vurgu denetimindeki 1 piksellik kenarlığı çizer. Tema desteği sunan çoğu SDK'nın eksik bıraktığı rol budur: WCAG 1.4.11, bir denetimi tanımlayan sınırın 3:1 oranında olmasını ister; açık bir zeminde bir düğmeyi dolduran orta değerlikli bir marka rengi, tamamen kasıtlı görünse bile rutin olarak bu oranın altında kalır. Soruyu kenarlık yerine dolguya sormak yanlış soruyu sormaktır. Vurgu renginizin kendi başına 3:1 oranını zaten karşıladığı yerlerde (yani her koyu zeminde), accentEdge vurgu rengiyle aynı değeri alır ve kenarlık görünmez olur.

Diğer skalalar

Renk, altı skaladan biridir. Her biri varsayılan değerleri olan yalın bir sınıftır ve her biri hem RendelTheme hem de RendelTheme.fromTokens üzerinde birer kurucu bağımsız değişkenidir.

RendelTheme.fromTokens(
  surface: brand.background,
  onSurface: brand.text,
  accent: brand.primary,
  onAccent: brand.onPrimary,
  type: const RendelTypeScale(heading: 17, body: 15),
  space: const RendelSpaceScale(lg: 20),
  motion: const RendelMotionScale(enter: Duration(milliseconds: 240)),
);

RendelSpaceScale.plate, plakalı her bloğun kullandığı iç kenar boşluğudur. Değeri lg + hair (18) şeklindedir; bu nedenle lg değerini yükseltmek her kartı aynı anda genişletir.

RendelTypeScale.heading, bilinçli olarak düz yazı boyutudur: bir yanıt sayfasında yarım puntoluk adımlar yerine yazı kalınlığıyla ayrılmış tek bir okuma boyutu bulunur. title onun üzerinde yer alır ve bir bloğun kendi adıdır. display, bir bloğun bildirmek için var olduğu tek değerdir ve bir bloğun en fazla bir tane display değeri olur: bir makbuzun toplamı, bir planın fiyatı, bir istatistiğin değeri.

overline, bir bloğu açan sakin etikettir. Büyük harfe dönüştürülmez. Bir etiket, aynı sesin bağırması yerine farklı bir ses tonu olmalıdır; web yüzeyleri bu adımı harf aralığını açmak yerine daraltılmış olarak ayarlar, böylece site fısıldarken bağıran bir katalog tek bir ürün gibi algılanmaz. Sunucu ne gönderirse, okuyucu ve ekran okuyucu da onu alır.

Yarıçap skalası yapısal olarak eş merkezlidir: hero ile çizilen bir muhafaza, yalnızca iki köşesi de yuvarlak olan değil, köşeleri kendi köşeleriyle uyumlu bir card plakası barındırır.

RendelMotionScale.curve, tasarım dilinin yumuşatma eğrisidir; Cubic(0.2, 0.9, 0.24, 1) değerindedir ve rendelEase olarak dışa aktarılır. breathCurve ise Cubic(0.37, 0, 0.63, 1) değerindedir; yalnızca nabız efektinin kullandığı simetrik bir eğridir.

Bu değerler ne söylerse söylesin, okuyucu azaltılmış hareket talep ettiğinde SDK'daki her animasyon daraltılır.

Blok stili

Skalalar boyutları belirler; style ve cards ise blokların nasıl inşa edildiğini belirler. Her ikisi de, display ve title adımlarının yazı tipi olan displayFontFamily değişkeninin yanında, RendelTheme.fromTokens üzerindeki bağımsız değişkenlerdir (varsayılan olarak fontFamily değerine döner).

RendelTheme.fromTokens(
  surface: brand.background,
  onSurface: brand.text,
  accent: brand.primary,
  onAccent: brand.onPrimary,
  style: const RendelStyle(
    card: RendelCardStyle.flat,
    button: RendelButtonStyle.filled,
  ),
  cards: {'product_cards': const RendelCardLook(radius: 18)},
  displayFontFamily: 'YourDisplay',
);

RendelStyle dört kapalı seçeneğe sahiptir:

cards, bir tür kartı değiştirir ve geri kalanlara dokunmaz. Anahtarlar blok tipleridir: product_cards, info_card, item_list, order_tracker ve confirm_card. Bir RendelCardLook kendi surfaceRaised, surfaceSunk, radius ve style değerlerini belirleyebilir ve adlandırılmış parts ögelerini renklendirebilir veya boyutlandırabilir; boş bıraktığı her şey temadan gelir.

Koyu mod

Flutter 0.45.0 ve web 0.22.0 sürümlerinden itibaren Rendel'in açık ve koyu olmak üzere iki teması vardır ve varsayılan olarak cihazı takip eder: koyu moda ayarlanmış bir telefon veya tarayıcı koyu olanı alır ve mod değiştirmek açık bir ileti dizisini yeniden boyar.

Uygulamanızın ne yaptığını bildirme

themeMode değerini kendi uygulamanızın yaptığına göre ayarlayın. Her zaman açık renkte olan bir uygulama bunu belirtmelidir, aksi takdirde koyu moddaki bir telefon, açık renkli bir uygulamanın üzerinde koyu bir Rendel açar.

await Rendel.init(
  appKey: key,
  theme: lightTheme,
  darkTheme: darkTheme, // optional: left out, it is derived
  config: const RendelConfig(themeMode: RendelThemeMode.light),
);

RendelThemeMode; system (varsayılan), light veya dark değerlerini alır. Kendi görünüm anahtarına sahip bir uygulama, başladığı modu iletir ve kullanıcı bunu değiştirdiğinde Rendel.setThemeMode(...) işlevini çağırır. MaterialApp bileşeniniz zaten bir themeMode değerine sahipse, tek bir satırda aktarılır: RendelThemeMode.values.byName(themeMode.name).

Web'de themeMode ve darkTheme, Rendel.init için birer seçenektir ve Rendel.setThemeMode(...) modu çalışma zamanında değiştirir. system seçildiğinde panel öncelikle sayfanızı, ikinci olarak tarayıcıyı takip eder: <html> (veya <body>) üzerindeki bir data-theme="light" ya da data-theme="dark" değeri (çoğu sitenin kendi anahtarlarının ayarladığı budur) ve bu yoksa ziyaretçinin prefers-color-scheme tercihi esas alınır. Her ikisi de izlenir.

Yazmadığınız koyu tema

darkTheme belirtilmezse, açık renk temanızdan bir tane türetilir. Dört rol hesaplanır ve geri kalan her şey, aynı kontrast tabanları üzerinden, açık bir palette olduğu gibi bunlardan türetilir:

• Zaten koyu olan bir açık tema (metni zemininden daha açık olan), kendi koyu temasıdır. Hiçbir şey tersine çevrilmez.
• Aksi takdirde zemin ve metin, Rendel'in kendi koyu paleti olan deep() paletindekilerdir.
• Vurgu renginiz, bu zemin üzerinde okunabildiği sürece korunur ve okunmadığı yerlerde kendi tonu boyunca açılarak belirgin şekilde size ait kalması sağlanır.
• Vurgu rengi üzerindeki etiket, koyu vurgu rengi üzerinde 4.5:1 oranını karşıladığı sürece sizinki olarak kalır; aksi takdirde hangisi daha iyi okunuyorsa neredeyse siyaha veya beyaza dönüşür.

Açık zemin için seçilen renkler aynen aktarılmaz: siz belirtmediğiniz sürece yükseltilmiş ve batık yüzeyler, mesaj kutusu ve bir kartın kendi renkleri koyu olan için yeniden çözülür. Renk olmayan her şey (köşeler, tipografi, yazı tipleri, kart ve düğme stilleri) açık temanınkidir. paper() doğrudan deep() olarak türetilir.

Bunu yönetim panelinden ayarlama

Yönetim panelinin Appearance düzenleyicisinde bir Light ve bir Dark bölümü bulunur. Koyu tarafta ayarladığınız şeyler, açık temayla aynı belirteçlerle (herhangi biriyle) themeDark olarak yayımlanır; boş bıraktıklarınız yukarıdaki gibi türetilir. Bir cihazda, tıpkı açık olanın sizinkinin üzerine katmanlanması gibi, kodunuzun sağladığı (veya türettiği) koyu temanın üzerine katmanlanır. Kontrast denetimi her ikisinde de çalışır. Bir kurulum aracı, uygulamanızın kendine ait koyu bir teması olduğunda themeDark gönderir, olmadığında ise bunu hariç tutar.

Adlandırma ve açılış istemleri

await Rendel.init(
  appKey: key,
  config: const RendelConfig(
    assistantName: 'Kicks',
    emptyStateBody: 'Track orders, find products, change bookings.',
    suggestions: [
      'Running shoes under \$150',
      'Where is my order?',
    ],
  ),
);

Açılış ekranı karşılama mesajından ve bunun altında, her birinin arasında ince bir çizgi bulunan tek bir kart içindeki suggestions ögelerinden oluşur; kendine ait bir işareti yoktur. Bir sohbet başlayana kadar üst bilgi yalnızca kendi denetimlerini tutar. Bir sohbet başladığında yayımlanan logonuzdan sonra assistantName ve yeni bir sohbet başlatan saat yönünün tersine bir ok gösterilir (Flutter 0.46.1, web 0.23.2).

suggestions, açılış istemleridir. Uygulamanızın gerçekten yapabileceği şeyleri kullanıcılarınızın kendi sözcükleriyle adlandırın: "Siparişim nerede?" ifadesini gören bir müşteri, Rendel'in kapsamını hiçbir tanıtım ekranının öğretemeyeceği kadar hızlı öğrenir.

emptyStateBody, bunların üzerindeki satırdır. Varsayılan metin hiçbir eylem belirtmez, çünkü SDK uygulamanızın kargo mu takip ettiğini yoksa para mı transfer ettiğini bilmez.

Başlatıcı yerleşimi

SDK hiçbir şeyi konumlandırmaz. Giriş noktasının ait olduğu yere RendelLauncher bileşenini kendiniz yerleştirin veya kendi arayüzünüzden Rendel.open(context) çağrısı yapın. init başarılı olana kadar hiçbir şey işlemediği için koşulsuz olarak yerleştirmek güvenlidir.

Bir widget'ı değiştirme

ComponentRegistry.register, bir katalog tipi için işleyiciyi değiştirir ve geri kalanlara dokunmaz.

ComponentRegistry.register('product_cards', (context, block, dispatch) {
  return MyProductRail(
    props: block.props,
    onTap: dispatch.onAction,
  );
});

Yerleşik bileşenlerin yapıldığı temel ögeler dışa aktarılır; böylece yapılan bir değişiklik standart Material gibi değil, kataloğun geri kalanı gibi basılır, çevreler ve nefes alır: RendelPressable (her iki eksende 44pt, düğme semantiği, basma fiziği), RendelActionButton, RendelChip, RendelControlShell, RendelOverline, RendelSwap ve RendelPulse. Çözümlenmiş stilleri RendelThemeScope.of(context) üzerinden okuyun.

Kontrast sizin için kontrol edilir

init, hata ayıklama derlemelerinde belirteç çiftlerinizi denetler ve WCAG minimumunun altında kalan çiftleri adlandıran bir uyarı yazdırır. Metin rolleri oturdukları yüzeylere karşı 4.5:1 oranında tutulur ve buna dolgulu bir denetim üzerindeki etiket de dahildir: 13.5pt veya daha küçük boyutta bu metin WCAG için büyük değil, küçük metindir. Etkileşimli bir denetimin sınırı 3:1 oranında tutulur: dolgulu bir denetimde accentEdge, boş bir alanda lineControl. Canlı sürüm (release) derlemeleri denetimi tamamen atlar, dolayısıyla çalışma zamanında hiçbir maliyeti olmaz.

İki durum canlı sürümde de kontrol edilir, çünkü bunlar yalnızca lint uyarıları değildir. Başarısız olan eşlenmiş bir onAccent veya onSurface geçer not alana kadar derinleştirilir; ağ üzerinden gelen ve okunaklı olmayan bir tema ise tamamen yok sayılır.

[rendel] contrast warning: onSurfaceFaint / surface is 3.10:1,
below the 4.5:1 minimum. Adjust the token pair before shipping.

Yarı saydam roller ölçülmeden önce arka planlarıyla birleştirilir, böylece %10'luk ince bir çizgi, karıştırıldığı mürekkep yerine gerçekte boyadığı griye göre puanlanır.

Aynı kontrolü kendi paletiniz üzerinde çalıştırmak isterseniz contrastRatio(foreground, background) dışa aktarılmıştır.

Yaygın bir tuzak: orta doygunluktaki bir marka turuncusu üzerindeki beyaz genellikle 3.34:1 civarındadır ve bu da bir denetim etiketi için yetersizdir. Bunun yerine siyaha yakın bir onAccent eşleyin. Bunu yapmazsanız SDK sizinkini geçer not alana kadar koyulaştırır ve bunu yaptığını size bildirir. Etiket her iki şekilde de okunabilir kalır, ancak gönderdiğiniz renk ile işlenen renk aynı olmaz.

Vurgunun bir metin olarak okunaklı olması gerektiğinde işleyicinin kullandığı şey accent değil, theme.accentText değeridir; dolgulu bir denetimin kenarlığını çizen ise theme.accentEdge değeridir.

Hata ayıklarken öğrenmek yerine canlıya almadan önce uyarılmayı tercih ediyorsanız, yönetim paneli bu denetimin aynısını düzenleme sırasında da çalıştırır. Bkz. Görünümü yönetim panelinden yayımlama.