Prototip · marka rengi akışı (§10.4.3, §10.14 U2)

Marka rengini değiştirmek

Kritik iş "markamın rengini sitemde ve panelimde göstermek". v1.1'de tek kontroldü; paket editöründe bu iş renk rolleri listesinde iki ayrı düzenlemeye bölünüyor, en görünür kontrol olan "Paleti üret" ise markayla birlikte bütün paleti değiştiriyor. Sayılar paketin kaynağından (brand-palette.tsx, generatePalette) ve motoru koşturularak alındı.

A22 senaryosu: dokunuş sayısı

Senaryo: marka #F4C430, köşe 12 px, yazı tipi Nunito/Manrope, görünüm koyu, kaydet. "Dokunuş" = tıklama ya da dokunma; renk kodu yazımı ayrı sayıldı.

Yol360 px1280 pxAdımlar
v1.1 tema editörü (§3.10)6 dokunuş
0 yazım · 1 kaydırma		6 dokunuş
kaydırma yok
  1. Hazır renk "#F4C430"
  2. Köşe "Belirgin"
  3. Yazı tipi listesini aç
  4. "Nunito"
  5. Görünüm "Koyu"
  6. Kaydet
v1.2 paket editörü, A22 yolu (Renk rolleri)18 dokunuş
2 yazım · ≈ 4 kaydırma		18 dokunuş
2 yazım · ≈ 2 panel kaydırması
  1. Renk rolleri'ne kaydır · Birincil zemin düğmesi
  2. Renk kodu alanı → "#F4C430" yaz, Enter
  3. Seçiciyi kapat
  4. Düzenlenen mod "Koyu"
  5. Birincil zemin düğmesi (yeniden kaydır)
  6. Renk kodu alanı → "#F4C430" yaz, Enter
  7. Seçiciyi kapat
  8. Radius grubu
  9. Taban kaydırıcısını 10 → 12 px'e sürükle (telefonda hassas)
  10. Tipografi grubu
  11. Başlık fontu listesini aç
  12. "Manrope"
  13. Gövde fontu listesini aç
  14. "Manrope"
  15. Mod grubu
  16. Varsayılan mod "Koyu"
  17. Kaydet
  18. Onay diyaloğunda "Temel temayı kaydet"
v1.2, ui-kit isteği U1 + U2 ile (öneri)11 dokunuş
0 yazım · ≈ 2 kaydırma		11 dokunuş
0 yazım
  1. Marka rengi › hazır renk "Sarı" (anında; iki mod; nötrler, odak ve kenar çubuğu birincili korunur/eşlenir)
  2. Radius grubu
  3. Taban kaydırıcısı → 12 px
  4. Tipografi grubu
  5. Başlık fontu listesini aç
  6. "Manrope"
  7. Gövde fontu listesini aç
  8. "Manrope"
  9. Mod grubu
  10. Varsayılan mod "Koyu"
  11. Kaydet (onay yok, şeritle aynı)

U2b "gövde = başlık fontu" bağlantısıyla 9 dokunuş. v1.1'e göre kalan +3/+5 dokunuş paketin grup sekmeleri ve iki ayrı font listesinden gelir; istenmiyor (kapsam büyür).

"Paleti üret" gerçekte neyi değiştiriyor

İki modda 41 rolün hepsi yeniden üretilir (tek geri alma adımı). Randevu'nun sıcak nötrleri markanın tonuna boyanır, odak halkası markaya döner (Randevu kuralı: odak sabit mavi, §5.3), koyu modda birincil hiçbir zaman markanın kendisi olmaz. "Marka rengini aynen kullan" yalnız açık modun birincilini düzeltir.

Marka #0F766E (AA geçer) · Paleti üret

RolRandevu varsayılanıPaleti üret sonrası
Açık · zemin#F6F5F2#F8FCFB
Açık · sönük#EDEBE6#EDF3F2
Açık · kenarlık#DAD7D0#DAE1E0
Açık · odak#1A56DB#0F766E
Koyu · birincil#0F766E#5FB6AD
Koyu · zemin#161514#0C1110
Koyu · odak#7DA2F5#5FB6AD

Randevu nötrlerinden değişen: açıkta 7/8, koyuda 8/8.

Marka #F4C430 (AA geçmez) · Paleti üret → "aynen kullan"

RolPaleti üret+ "Marka rengini aynen kullan"
Açık · birincil#976900#F4C430
Açık · yazı#FFFFFF#1B1505
Koyu · birincil#CC9D00#CC9D00 (değişmez)
Açık · zemin#FCFBF8#FCFBF8
Açık · odak#976900#976900

A22'nin istediği sonuç (iki modda #F4C430, Randevu nötrleri) bu yoldan çıkmaz; ancak Renk rolleri'nde iki elle düzenlemeyle.

Önerilen kontrol (ui-kit isteği U2)

Renkler grubunun ilk kontrolü: tüketicinin verdiği hazır renkler (Randevu: v1.1'in 8 rengi) ve "Özel renk" alanı. Seçim ya da geçerli kod (Enter / alandan çıkış) taslağa hemen uygulanır, "Uygula" yok; yalnız birincil ve kenar çubuğu birincili iki modda ayarlanır, yazı rengi otomatik, nötrler ve odak halkası korunur. Geçersiz kodda alan altında "Renk #RRGGBB biçiminde olmalı (örn. #0F766E)." Bütün paleti üretmek ikincil, onaylı bir eylemdir.

Marka rengi

Birincil düğmeler ve seçili öğeler; açık ve koyu modda aynı. Hazır renk ya da geçerli bir renk kodu taslağa hemen uygulanır; yazı rengi otomatik seçilir, diğer renkler değişmez.

Birincil #F4C430 · yazı #1B1505 (11,06:1) · açık ve koyu mod. Geri almak için Ctrl Z.

Tüm palet #F4C430'dan üretilsin mi?

Zemin, kart, kenarlık ve odak halkası dahil 41 renk açık ve koyu mod için yeniden üretilir. Marka AA kontrastı geçmediği için birincil açıkta #976900, koyuda #CC9D00 olur. Geri almak için Ctrl Z.