Series for React Architecture
React Örnek Proje Mimarisi — 11 (Renk Paletlerinin Tanımlanması ve Kullanılması)
Tasarım Sistemlerinin en önemli konularından bir taneside renk paletleridir. Renklerin birbirine uyumlu şekilde gözükmesi için tüm renk uzayından değilde daha önceden belirlenmiş renk paletlerinden kullanmak daha hızlı ve verimli sonuçlar ortaya çıkarır.
Daha önceden React Proje Mimarisi kapsamında yazdığımız yazıların bir devamı olarak Renk Paletlerini nasıl tanımlayalım ve nasıl kullanalım konusuna değineceğiz.
Burada ki amacım UIX veya Designer hangi renkleri seçeceğine karışmak değil. Amacım bu işlemlerin daha kurallı ve planlı bir şekilde yapılması
Frontend kapsamında tanımlı bir renk uzay içerisinden bu seçimlerin yapılması ve bu isimlendirmelerin tekrar tekrar kullanımının düzgün şekilde yapılması.
A. Önceki Yazılarıma Referanslar
Renk paleti konusuna başlamadan önce renk konusunda yazdığımız önceki blog yazılarıma bakarak bir hatırlama yapalım.
- Renk Modelleri (RGB, CMY, HSV, HSL)
- React Örnek Mimarisi — 7 (Design System Nedir?) 4ncü bölümü Renk Tanımlamaları
- React Örnek Mimarisi — 8(Own Styling and Naming) 3ncü kısmın B bölümünde Renkler üzerinde durmuştuk
- Değişken yapısının tanımlanması (Light /Dark Mode) CSS ile Değişken tanımlama
- SaSS ile Preprocessor ile Değişken Kullanımı ve Renk Değişkenleri
Özetle renkler arası uyumu veren veya renk paleti olarak bu yapıları bize sağlayan
- Muzli Colors, ColorSpace, Color Leap, Colorable, Site Palette, Lolcolors
- RadixColors, D3js Color Scales, AdobeColors vb. , Chroma.js gibi hazır renk paletleri bulunuyor
B. Örnek Paletleri Deneme
Aşağıda hoşuma giden 2 paleti denedim. Bir tanesi RadixUIColors bir diğeride AdobeColors
- https://onurdayibasi.dev/color-palette2 (RadixUI Colors)
- https://onurdayibasi.dev/color-palette (Adobe Spectrum Colors)
2 Renk paletininde Dark Mode ve Light Mode’ları bulunuyor. Bu kısımda Adobe Spectrum Renk paleti benim daha çok hoşuma gittiğini söyleyebilirim.
RadixUI gray tanımlama
:root {
--gray1: hsl(0, 0%, 99.0%);
--gray2: hsl(0, 0%, 97.3%);
--gray3: hsl(0, 0%, 95.1%);
--gray4: hsl(0, 0%, 93.0%);
--gray5: hsl(0, 0%, 90.9%);
--gray6: hsl(0, 0%, 88.7%);
--gray7: hsl(0, 0%, 85.8%);
--gray8: hsl(0, 0%, 78.0%);
--gray9: hsl(0, 0%, 56.1%);
--gray10: hsl(0, 0%, 52.3%);
--gray11: hsl(0, 0%, 43.5%);
--gray12: hsl(0, 0%, 9.0%);
}
Adobe Spectrum’da gray tanımlama
:root {
--color-gray-50: #ffffff;
--color-gray-75: #fdfdfd;
--color-gray-100: #f8f8f8;
--color-gray-200: #e6e6e6;
--color-gray-300: #d5d5d5;
--color-gray-400: #b1b1b1;
--color-gray-500: #909090;
--color-gray-600: #6d6d6d;
--color-gray-700: #464646;
--color-gray-800: #222222;
--color-gray-900: #000000;
}
Peki biz bu renkleri nerelerde kullanabiliriz ?
- Chart SVG üzerinde
- CSS’de bir takım özelliklere Renk değeri atayabiliyoruz.
color
background-color
border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
outline-color
text-decoration-color
column-rule-color
Peki bu değişkenlere atama işlemlerini nasıl yapmalıyız.
2 yöntemden bakalım. Adobe Spectrumda. Token sistemi ile bir kullanım görüyoruz
https://spectrum.adobe.com/page/design-tokens/
Global Tokens, tasarım dilimizde bağlamdan bağımsız(context-agnostic) isimlerle temsil edilen ilkel değerlerdir. Renk paleti, animasyon, tipografi ve boyut değerlerimizin tümü global belirteçler olarak kaydedilir. Bunlar doğrudan kullanılabilir ve diğer tüm token türleri tarafından miras alınır. (Size Tokens — size16, Color Tokens …blue400 )
Alias Tokens, belirli bir bağlam veya soyutlama ile ilgilidir. Takma adlar, bir belirtecin amaçlanan amacını iletmeye yardımcı olur ve tek bir amacı olan bir değerin birden fazla yerde görüneceği durumlarda etkilidir. (cta-background-color)
Component tokens,bir bileşenle ilişkili her değerin kapsamlı bir temsilidir. Genellikle takma ad belirteçlerinden miras alırlar, ancak mühendislik ekiplerinin bileşen geliştirmede belirteçleri uygularken mümkün olduğunca spesifik olmalarını sağlayacak şekilde adlandırılırlar. (button-cta-background-color)
Radix örneklerinde ise diğer bir kullanım görüyoruz.
// Use the colors as CSS variables
.button {
background-color: var(--blue4);
color: var(--blue11);
border-color: var(--blue7);
}
.button:hover {
background-color: var(--blue5);
border-color: var(--blue8);
}
Benim buradaki görüşüm biraz daha Radix’deki gibi yani, Adobe gibi ara katmanlar oluşturmak yerine Figma tasarımlarından Component seviyesinde tasarımları almak ve kullanmak, bileşenleri ayrı isimler ile oluşturmak yani ara bir değişken katmanı ekstra yük anlamına gelecektir.
Aşağıdaki gibi bileşen yapıları üzerinden bir ayrıştırmaya gitmek daha mantıklı olacaktır.
.button
.primary-button
.secandory-button
.normal-text
.warning-text
.info-text
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara(react-mimarisi) erişmek için bu linke tıklayabilirsiniz.