Photo by Pawel Czerwinski on Unsplash

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.

Frontend Development With JS
4 min readApr 3, 2023

--

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.

Özetle renkler arası uyumu veren veya renk paleti olarak bu yapıları bize sağlayan

B. Örnek Paletleri Deneme

Aşağıda hoşuma giden 2 paleti denedim. Bir tanesi RadixUIColors bir diğeride AdobeColors

https://onurdayibasi.dev/

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.

--

--

No responses yet