# Oracle Redwood Tasarım Sistemi

## Oracle Redwood Tasarım Sistemi Arayüz Önizlemesi

Geçerli taslağı koruyarak miktarları düzenleyin, doğrulamayı inceleyin, sıralayın ve filtreleyin.

## Oracle Redwood Tasarım Sistemi Tasarım Başvurusu

Sabitlenmiş JET 19.0.0 Redwood stil dosyasındaki temel herkese açık tanımlar. Özgün çalışma sayfası davranışı ve düzeni ayrı olarak belirtilmiştir; özel değişkenler ve daha sonraki ters renk geçersiz kılmaları temel başvuruya dâhil edilmemiştir.

### Redwood temel anlamsal rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oj-core-text-color-primary | rgb(var(--oj-palette-neutral-rgb-190)) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-core-text-color-secondary | rgba(var(--oj-palette-neutral-rgb-190), .70) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-core-text-color-disabled | rgba(var(--oj-palette-neutral-rgb-190), .4) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-core-bg-color-content | rgb(var(--oj-palette-neutral-rgb-0)) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-body-bg-color | rgb(var(--oj-palette-neutral-rgb-10)) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-core-divider-color | rgba(var(--oj-palette-neutral-rgb-190),.12) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
| --oj-core-focus-border-color | rgb(var(--oj-palette-neutral-rgb-190)) | JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin. |
### Çalışma sayfasında kullanılan palet değerleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oj-palette-neutral-rgb-0 | 255, 255, 255 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-neutral-rgb-10 | 251, 249, 248 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-neutral-rgb-20 | 245, 244, 242 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-neutral-rgb-190 | 22, 21, 19 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-brand-rgb-120 | 0, 104, 140 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-info-rgb-20 | 237, 246, 249 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-danger-rgb-120 | 179, 49, 31 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-success-rgb-20 | 235, 248, 222 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
| --oj-palette-success-rgb-140 | 53, 86, 23 | Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir. |
### Aralık ve şekil

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oj-core-spacing-1x | .25rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-2x | .5rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-3x | .75rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-4x | 1rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-5x | 1.25rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-6x | 1.5rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-7x | 1.75rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-8x | 2rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-9x | 2.25rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-10x | 2.5rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-11x | 2.75rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-spacing-12x | 3rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-border-radius-sm | 2px | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-border-radius-md | .25rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-border-radius-lg | .375rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
| --oj-core-border-radius-xl | .5rem | Yayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez. |
### Gövde tipografisi ve denetim boyutları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --oj-typography-body-xs-font-size | 0.75rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-typography-body-sm-font-size | 0.859rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-typography-body-md-font-size | 1rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-typography-body-lg-font-size | 1.125rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-typography-body-xl-font-size | 1.25rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-typography-body-md-line-height | 1.25 | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-button-height | 2.75rem | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
| --oj-button-border-radius | var(--oj-core-border-radius-md) | Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur. |
### Genel kullanıma açık stillendirme sınırları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Global theme overrides | :root declarations after JET CSS | Kök düzeyindeki bir geçersiz kılma, bu genel kullanıma açık değişkeni kullanan herkesi etkiler. |
| Instance styling | A class scoped to the target component | Değişiklik yalnızca tek bir yerel bileşen için gerekiyorsa genel kullanıma açık değişkeni kapsamlandırın. |
| Redwood base | Tracks Oracle visual changes | Amaç Oracle’ın görünümünü yakalamaksa bunu seçin; güncellemeler devralınan değerleri değiştirebilir. |
| Stable base | Alternative for a distinct custom theme | Bunu Redwood ile birebir aynıymış gibi sunmayın veya tüm tersine çevirme/ölçeklendirme özelliklerinin eşleştiğini varsaymayın. |
| Private variables | --oj-private-* excluded | Örnek, genel kullanıma açık başvuru değerlerini özel uygulama kancaları üzerine kurmaz. |
## Oracle Redwood Tasarım Sistemi Kapsamlı Kılavuzu

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ı.

## Oracle Redwood Tasarım Sistemi ve JET Sürüm Sınırları

### Uygulama katmanını doğru adlandırın

> Redwood, indirilebilir tek bir bileşen kitaplığından daha kapsamlıdır. Bu kılavuzda, somut ve incelenebilir bir başvuru kaynağı olan Oracle JET 19.0.0 ile sunulan genel kullanıma açık CSS temelleri kullanılır. Önizleme, bu değerleri kullanan özgün bir HTML/CSS stok inceleme çalışma sayfasıdır; oj-table, oj-input-number veya başka bir yerel JET özel öğesini örneklemez. Çalışma zamanı açıklaması açıkça belirtilmiştir; böylece okuyucular görsel temelleri eksiksiz bir Oracle uygulama SDK’sıyla karıştırmaz.

- Başvuru kaynağı: Oracle JET 19 Redwood CSS.

- Önizleme çalışma zamanı: özgün yerel tarayıcı HTML/CSS/JavaScript.

- Veriler ve doğrulama kuralları: özgün yerel örnek.

### Oracle uygulamasını benimsemeyi ayrı ele alın

Redwood’u bir Oracle SaaS ürününde benimsemek, JET uygulamasını yapılandırmak ve genel kullanıma açık bir tema başvurusundan yararlanmak birbirinden farklı işlerdir. Örnek bir kiracıda değişiklik yapmaz, envanter kayıtlarına bağlanmaz veya ürün geçişi gerçekleştirmez. Görsel kuralları ve durum modelini incelemek için yerel belgenin tamamı kullanılabilir; gerçek bir JET uygulaması ise sürümlenmiş çerçeve kurulumunu ve yerel bileşen belgelerini izlemelidir.

## Oracle Redwood Tasarım Sistemi Anlamsal Rolleri ve Palet Değerleri

### Temel tanımları doğru belirleyin

Başvuru, sabitlenmiş stil sayfasındaki her genel kullanıma açık değişkenin ilk/temel tanımını alır. Sonraki tersine çevirme veya yoğunluk kapsamları aynı adı yeniden tanımlayabilir. Bu nedenle, son eşleşmeyi alan basit bir çıkarım, tersine çevrilmiş bir ön plan rengini varsayılan açık metin rengi olarak etiketleyebilir. Kılavuz temel kapsamı açıkça belirtir ve yayımlanan başvuruya --oj-private-* kancalarını dahil etmez.

### Ham kanalları renk değerlerinden ayırın

--oj-palette-brand-rgb-120 gibi palet değişkenleri üç RGB kanalı içerirken anlamsal roller bu kanalları rgb() veya rgba() ile sarar. Özgün eylem rengi marka kanallarını rgb() üzerinden kullanır; metin core-text-color-primary, kart yüzeyi ise core-bg-color-content kullanır. Ham kanal dizgesini doğrudan background-color değerine kopyalamak, sayılar makul görünse bile geçersiz CSS olur.

## Oracle Redwood Tasarım Sistemi Boşluk, Yazı Tipi ve Yoğunluk

### Somut temel ölçeğini kullanın

Genel kullanıma açık core-spacing dizisi, 1x ile 12x arasında 4px’lik adımlarla ilerler. Küçük, orta, büyük ve ekstra büyük kenarlık rolleri birbirinden ayrıdır; düğme yüksekliği ise ayrı bir bileşen değişkenidir. Çalışma sayfası uygun yerlerde bu gerçek değerleri kullanır; 32px başlığını, duyarlı tablo dönüşümünü ve 1120px dış ölçüyü ise özgün yerleşim kararları olarak tanımlar.

### Yoğunluğa özgü değerleri karıştırmayın

Bu sabitlenmiş stil sayfasında temel body-md boyutu 1rem, satır yüksekliği ise 1.25’tir; sonraki seçiciler ölçeklenmiş piksel değerleri sunabilir. Kılavuz, her Redwood bağlamında hesaplanan boyutun aynı olması gerektiğini ima etmek yerine temel değeri kaydeder. Tarayıcı örneği, Oracle Sans yüklüymüş gibi davranmak yerine yedek yazı tipi olarak Arial kullanır. Yerel bir JET uygulaması, seçilen yoğunluk, tema ve platformu birlikte sınamalıdır.

## Oracle Redwood Tasarım Sistemi Esinli Çalışma Sayfası Yapısı

### Verileri ve eylemleri anlaşılır kılın

Her özgün satırda bir stüdyo malzemesinin adı ve birimi açıklanır, mevcut stok miktarı asgari miktarla karşılaştırılır ve bir miktar girişi sunulur. İnceleme durumu etiketi, öğenin yerel taslağa dahil olup olmadığını da belirtir. Özet, filtreyle gizlenen satırlar da dahil olmak üzere taslağın tamamındaki birimleri sayar. Bunlar envanter kanıtı veya satın alma önerisi değil, kurgusal örnek kayıtlardır.

### Sıralama boyunca satır kimliğini koruyun

Uygulama, miktarları tablo konumuna göre değil, öğe kimliğine göre saklar. Bu nedenle ada göre sıralama yapmak veya özgün sıraya dönmek düzenlemeleri korur. Asgari stok seviyesinin altındakileri filtrelemek yalnızca görünür koleksiyonu değiştirir. Görüntülenen satır sırasına bağlı konumsal bir dizi, sıralama sonrasında bir öğenin miktarını başka bir öğeye atayabilir; sağlanan kod bu hatayı açıkça önler.

## Oracle Redwood Tasarım Sistemi Esinli Miktar Doğrulaması

### Belirtilen yerel kuralın dışındaki değerleri reddedin

Özgün miktar girişi, sıfır ile 99 arasındaki tam sayılara izin verir. Boş, negatif, kesirli veya aralık dışı değerler satır içi hata gösterir ve inceleme eylemini devre dışı bırakır. Taslak modeli, geçerli bir düzenleme yapılana kadar son geçerli miktarı korur. Görünen hata bu farkı açıkça belirtir ve geçersiz hiçbir değer incelenen toplama dahil edilmez.

### Geçersiz bir düzenlemenin ne zaman atıldığını açıklayın

Filtreyi veya sıralamayı değiştirmek, görünür satırları son geçerli taslak değerlerinden yeniden oluşturur; bu nedenle tamamlanmamış geçersiz bir düzenleme atılır. Bu, yerel örneğin bilinçli bir sınırıdır; yerel JET doğrulama garantisi değildir. Üretimde kullanılan düzenlenebilir bir tablo, geçersiz taslakları tüm görünümler boyunca koruyabilir veya gezinmeyi engelleyebilir; bu davranış kendi durum modelinde tasarlanıp sınanmalıdır.

## Oracle Redwood Tasarım Sistemi Esinli İnceleme ve Sıfırlama

### Gönderim yapıyormuş gibi davranmadan yerel incelemeyi açıklayın

Bu taslağı incele eylemi, birimlerin ve katkıda bulunan öğelerin okunabilir bir sayısını gösterir. Ayrıca hiçbir siparişin gönderilmediğini açıkça belirtir. Örnek zorunlu satın alma kuralı uydurmadığından sıfır birimlik geçerli bir taslağı kabul eder. Miktar düzenlendiğinde önceki inceleme mesajı temizlenir; böylece değişen taslakta eski bir onay mesajı kalmaz.

### Öngörülebilir kurtarma olanağı sunun

Miktarları sıfırla, önerilen ilk eklemeleri geri yükler ve inceleme mesajını temizler. Geçerli filtreyi ve sıralamayı korur, ardından sıfırlanan modele göre bu satırları yeniden çizer. Böylece sayfayı yeniden yüklemeden kurtarma işlemi görünür hâle gelir. Örnekte depolama veya arka uç bulunmadığından sayfayı yeniden yüklemek de ilk yerel verileri geri yükler.

## Oracle Redwood Tasarım Sistemi Esinli Duyarlı Tablo

### Dar ekranlarda bilgi hiyerarşisini koruyun

Geniş düzende sütun başlıkları ve satır başlığı olarak kullanılan öğe adlarıyla bir tablo gösterilir. 650px altında satırlar okunabilir bloklara dönüşür ve her veri hücresinde değerden önce etiketi gösterilir. Girişler kullanılabilir genişliğe sığar; öğe açıklaması da öğe adına bağlı kalır. Bu geçiş özgün uygulama CSS davranışıdır; oj-table’ın duyarlı davranışına ilişkin bir iddia değildir.

### Düzenlenmiş ve filtrelenmiş durumları sınayın

Tarayıcı kontrolünde geçersiz bir miktar girilir, değer düzeltilir, öğeler sıralanır, asgari stok seviyesinin altındakiler filtrelenir ve düzen ölçülmeden önce sonuç toplamı incelenir. 1440px’ten 280px’e kadar dört genişlik sınanmıştır. Bu, yalnızca boş bir tablo kapsayıcısının varlığını değil, gerçek içeriği ve durum değişikliklerini sınar.

## Oracle Redwood Tasarım Sistemi Eksiksiz Başvuru Uygulaması

### Sağlanan eksiksiz belgeyi çalıştırın

HTML örneği gerekli genel kullanıma açık belirteç tanımlarını, özgün stilleri, örnek kayıtları ve tüm olay işleyicilerini içerir. Dosyayı index.html adıyla kaydedip klasörü sunun; eksik içe aktarma veya harici çalışma zamanı çağrısı yoktur. Yerel uygulamanın çalışması için JET JavaScript paketi gerekmese de başvuru değerleri JET 19.0.0 sürümüne sabitlenmiştir.

1. Sağlanan belgenin tamamını index.html adıyla kaydedin.

2. Klasörü yerel HTTP üzerinden sunun.

3. Geçersiz miktarları ve düzeltme işlemini sınayın.

4. Taslağı sıralayıp filtreleyin; ardından inceleyin ve sıfırlayın.

### Yerel JET bileşenlerini kendi kurulumlarıyla kullanın

Yerel bir uygulama için eşleşen Oracle JET paketini yükleyip çerçevenin kurulum adımlarını izleyin; ardından sürümlenmiş oj-* bileşen sözleşmelerini ve genel kullanıma açık stillendirme değişkenlerini kullanın. Bu bağımsız yoruma bir oj-* etiketi yapıştırıp kendiliğinden başlatılacağını varsaymayın. Bağlantı verilen stillendirme genel bakışı, kök düzeyindeki tema uygulamasını bileşen kapsamındaki geçersiz kılmalardan ayırır; ayrıca Redwood veya Stable’ın hangi durumlarda daha uygun bir temel olduğunu açıklar.

## Oracle Redwood Tasarım Sistemi Bileşen Örnekleri

### index.html — eksiksiz özgün çalışma sayfası

Genel kullanıma açık belirteçlerin bir alt kümesinin tamamı, duyarlı HTML, doğrulama, kararlı satır durumu ve yerel inceleme/sıfırlama davranışı.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio supplies worksheet</title><style>:root{--oj-palette-danger-rgb-10:255, 248, 247;--oj-palette-danger-rgb-20:255, 241, 239;--oj-palette-danger-rgb-30:255, 235, 232;--oj-palette-danger-rgb-40:255, 217, 211;--oj-palette-danger-rgb-50:255, 193, 184;--oj-palette-danger-rgb-60:255, 157, 144;--oj-palette-danger-rgb-70:255, 134, 117;--oj-palette-danger-rgb-80:254, 104, 84;--oj-palette-danger-rgb-90:236, 79, 58;--oj-palette-danger-rgb-100:214, 59, 37;--oj-palette-danger-rgb-110:195, 53, 34;--oj-palette-danger-rgb-120:179, 49, 31;--oj-palette-danger-rgb-130:170, 34, 34;--oj-palette-danger-rgb-140:143, 39, 25;--oj-palette-danger-rgb-150:124, 34, 22;--oj-palette-danger-rgb-160:102, 28, 18;--oj-palette-danger-rgb-170:86, 24, 15;--oj-palette-warning-rgb-10:254, 249, 242;--oj-palette-warning-rgb-20:253, 242, 229;--oj-palette-warning-rgb-30:252, 237, 220;--oj-palette-warning-rgb-40:249, 221, 188;--oj-palette-warning-rgb-50:246, 199, 146;--oj-palette-warning-rgb-60:240, 169, 87;--oj-palette-warning-rgb-70:235, 150, 50;--oj-palette-warning-rgb-80:225, 128, 18;--oj-palette-warning-rgb-90:198, 113, 14;--oj-palette-warning-rgb-100:172, 99, 12;--oj-palette-warning-rgb-110:156, 89, 11;--oj-palette-warning-rgb-120:143, 82, 10;--oj-palette-warning-rgb-130:129, 73, 9;--oj-palette-warning-rgb-140:114, 65, 8;--oj-palette-warning-rgb-150:99, 56, 7;--oj-palette-warning-rgb-160:81, 47, 6;--oj-palette-warning-rgb-170:69, 39, 5;--oj-palette-success-rgb-10:244, 252, 235;--oj-palette-success-rgb-20:235, 248, 222;--oj-palette-success-rgb-30:228, 245, 211;--oj-palette-success-rgb-40:207, 235, 179;--oj-palette-success-rgb-50:177, 221, 136;--oj-palette-success-rgb-60:138, 201, 79;--oj-palette-success-rgb-70:125, 186, 69;--oj-palette-success-rgb-80:111, 169, 57;--oj-palette-success-rgb-90:94, 148, 43;--oj-palette-success-rgb-100:80, 130, 35;--oj-palette-success-rgb-110:73, 118, 32;--oj-palette-success-rgb-120:67, 107, 29;--oj-palette-success-rgb-130:60, 96, 26;--oj-palette-success-rgb-140:53, 86, 23;--oj-palette-success-rgb-150:46, 73, 20;--oj-palette-success-rgb-160:38, 61, 16;--oj-palette-success-rgb-170:31, 51, 14;--oj-palette-info-rgb-10:246, 250, 252;--oj-palette-info-rgb-20:237, 246, 249;--oj-palette-info-rgb-30:228, 241, 247;--oj-palette-info-rgb-40:208, 229, 238;--oj-palette-info-rgb-50:180, 213, 225;--oj-palette-info-rgb-60:143, 191, 208;--oj-palette-info-rgb-70:121, 177, 198;--oj-palette-info-rgb-80:95, 162, 186;--oj-palette-info-rgb-90:65, 144, 172;--oj-palette-info-rgb-100:34, 126, 158;--oj-palette-info-rgb-110:14, 114, 151;--oj-palette-info-rgb-120:0, 104, 140;--oj-palette-info-rgb-130:2, 94, 126;--oj-palette-info-rgb-140:4, 83, 111;--oj-palette-info-rgb-150:6, 72, 95;--oj-palette-info-rgb-160:6, 60, 78;--oj-palette-info-rgb-170:5, 50, 66;--oj-palette-brand-rgb-10:246, 250, 252;--oj-palette-brand-rgb-20:237, 246, 249;--oj-palette-brand-rgb-30:228, 241, 247;--oj-palette-brand-rgb-40:208, 229, 238;--oj-palette-brand-rgb-50:180, 213, 225;--oj-palette-brand-rgb-60:143, 191, 208;--oj-palette-brand-rgb-70:121, 177, 198;--oj-palette-brand-rgb-80:95, 162, 186;--oj-palette-brand-rgb-90:65, 144, 172;--oj-palette-brand-rgb-100:34, 126, 158;--oj-palette-brand-rgb-110:14, 114, 151;--oj-palette-brand-rgb-120:0, 104, 140;--oj-palette-brand-rgb-130:2, 94, 126;--oj-palette-brand-rgb-140:4, 83, 111;--oj-palette-brand-rgb-150:6, 72, 95;--oj-palette-brand-rgb-160:6, 60, 78;--oj-palette-brand-rgb-170:5, 50, 66;--oj-palette-neutral-rgb-0:255, 255, 255;--oj-palette-neutral-rgb-10:251, 249, 248;--oj-palette-neutral-rgb-20:245, 244, 242;--oj-palette-neutral-rgb-30:241, 239, 237;--oj-palette-neutral-rgb-40:228, 225, 221;--oj-palette-neutral-rgb-50:212, 207, 202;--oj-palette-neutral-rgb-60:188, 182, 177;--oj-palette-neutral-rgb-70:174, 168, 162;--oj-palette-neutral-rgb-80:158, 152, 146;--oj-palette-neutral-rgb-90:139, 133, 128;--oj-palette-neutral-rgb-100:123, 117, 112;--oj-palette-neutral-rgb-110:111, 105, 100;--oj-palette-neutral-rgb-120:101, 95, 91;--oj-palette-neutral-rgb-130:92, 86, 81;--oj-palette-neutral-rgb-140:81, 76, 71;--oj-palette-neutral-rgb-150:71, 66, 62;--oj-palette-neutral-rgb-160:58, 54, 50;--oj-palette-neutral-rgb-170:49, 45, 42;--oj-palette-neutral-rgb-180:32, 30, 28;--oj-palette-neutral-rgb-190:22, 21, 19;--oj-palette-neutral-rgb-200:00, 00, 00;--oj-palette-dvt-rgb-1:36, 93, 99;--oj-palette-dvt-rgb-2:215, 121, 15;--oj-palette-dvt-rgb-3:49, 160, 156;--oj-palette-dvt-rgb-4:78, 65, 55;--oj-palette-dvt-rgb-5:105, 158, 97;--oj-palette-dvt-rgb-6:180, 114, 130;--oj-palette-dvt-rgb-7:131, 64, 30;--oj-palette-dvt-rgb-8:158, 127, 204;--oj-palette-dvt-rgb-9:168, 142, 0;--oj-palette-dvt-rgb-10:88, 49, 110;--oj-palette-dvt-rgb-11:89, 153, 181;--oj-palette-dvt-rgb-12:49, 122, 69;--oj-core-text-color-primary:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-text-color-secondary:rgba(var(--oj-palette-neutral-rgb-190), .70);--oj-core-text-color-disabled:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-text-color-brand:rgb(var(--oj-palette-brand-rgb-110));--oj-core-text-color-danger:rgb(var(--oj-palette-danger-rgb-120));--oj-core-text-color-warning:rgb(var(--oj-palette-warning-rgb-120));--oj-core-text-color-success:rgb(var(--oj-palette-success-rgb-120));--oj-core-bg-color-content:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-bg-color-hover:rgba(var(--oj-palette-neutral-rgb-190), .08);--oj-core-bg-color-active:rgba(var(--oj-palette-neutral-rgb-190), .16);--oj-core-bg-color-selected:rgb(var(--oj-palette-brand-rgb-30));--oj-core-border-color-selected:rgb(var(--oj-palette-brand-rgb-100));--oj-core-border-color-enabled:rgba(var(--oj-palette-neutral-rgb-190), 0.5);--oj-core-color-disabled-1:rgba(var(--oj-palette-neutral-rgb-190), 0.04);--oj-core-color-disabled-2:rgba(var(--oj-palette-neutral-rgb-190),.20);--oj-core-icon-size-lg:1.5rem;--oj-core-icon-size-sm:1rem;--oj-core-divider-color:rgba(var(--oj-palette-neutral-rgb-190),.12);--oj-core-divider-margin:0.5rem;--oj-core-neutral-1:rgb(var(--oj-palette-neutral-rgb-100));--oj-core-neutral-2:rgb(var(--oj-palette-neutral-rgb-110));--oj-core-neutral-3:rgb(var(--oj-palette-neutral-rgb-120));--oj-core-neutral-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-neutral-secondary-1:rgba(var(--oj-palette-neutral-rgb-190), 0.08);--oj-core-neutral-secondary-2:rgb(var(--oj-palette-neutral-rgb-20));--oj-core-neutral-secondary-3:rgb(var(--oj-palette-neutral-rgb-10));--oj-core-neutral-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-brand-1:rgb(var(--oj-palette-brand-rgb-100));--oj-core-brand-2:rgb(var(--oj-palette-brand-rgb-110));--oj-core-brand-3:rgb(var(--oj-palette-brand-rgb-120));--oj-core-brand-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-1:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-2:rgb(var(--oj-palette-danger-rgb-110));--oj-core-danger-3:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-secondary-1:rgba(var(--oj-palette-danger-rgb-60), 0.4);--oj-core-danger-secondary-2:rgb(var(--oj-palette-danger-rgb-20));--oj-core-danger-secondary-3:rgb(var(--oj-palette-danger-rgb-10));--oj-core-danger-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-warning-1:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-2:rgb(var(--oj-palette-warning-rgb-110));--oj-core-warning-3:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-warning-secondary-1:rgba(var(--oj-palette-warning-rgb-60), 0.4);--oj-core-warning-secondary-2:rgb(var(--oj-palette-warning-rgb-20));--oj-core-warning-secondary-3:rgb(var(--oj-palette-warning-rgb-10));--oj-core-warning-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-success-1:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-2:rgb(var(--oj-palette-success-rgb-110));--oj-core-success-3:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-success-secondary-1:rgba(var(--oj-palette-success-rgb-60), 0.4);--oj-core-success-secondary-2:rgb(var(--oj-palette-success-rgb-20));--oj-core-success-secondary-3:rgb(var(--oj-palette-success-rgb-10));--oj-core-success-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-info-1:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-2:rgb(var(--oj-palette-info-rgb-110));--oj-core-info-3:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-info-secondary-1:rgba(var(--oj-palette-info-rgb-60), 0.4);--oj-core-info-secondary-2:rgb(var(--oj-palette-info-rgb-20));--oj-core-info-secondary-3:rgb(var(--oj-palette-info-rgb-10));--oj-core-info-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-focus-border-color:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-cursor-clickable:pointer;--oj-core-drag-drop-color-1:rgb(var(--oj-palette-brand-rgb-40));--oj-core-drag-drop-color-2:rgb(var(--oj-palette-brand-rgb-100));--oj-core-drag-drop-line-color:rgb(var(--oj-palette-brand-rgb-100));--oj-core-touch-target-min-size:2.25rem;--oj-core-box-shadow-rgb:var(--oj-palette-neutral-rgb-200);--oj-core-box-shadow-xs:0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb),.12);--oj-core-box-shadow-sm:0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb),.16);--oj-core-box-shadow-md:0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb),.2);--oj-core-box-shadow-lg:0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb),0.24);--oj-core-box-shadow-xl:0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb),0.28);--oj-core-dropdown-box-shadow:var(--oj-core-box-shadow-sm);--oj-core-scrim-color:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-spacing-1x:.25rem;--oj-core-spacing-2x:.5rem;--oj-core-spacing-3x:.75rem;--oj-core-spacing-4x:1rem;--oj-core-spacing-5x:1.25rem;--oj-core-spacing-6x:1.5rem;--oj-core-spacing-7x:1.75rem;--oj-core-spacing-8x:2rem;--oj-core-spacing-9x:2.25rem;--oj-core-spacing-10x:2.5rem;--oj-core-spacing-11x:2.75rem;--oj-core-spacing-12x:3rem;--oj-core-border-radius-sm:2px;--oj-core-border-radius-md:.25rem;--oj-core-border-radius-lg:.375rem;--oj-core-border-radius-xl:.5rem;--oj-core-z-index-popup:1000;--oj-core-z-index-dialog:1050;--oj-core-z-index-messages:2000;--oj-typography-heading-2xl-font-size:2.5rem;--oj-typography-heading-2xl-font-weight:800;--oj-typography-heading-2xl-line-height:1.3;--oj-typography-heading-xl-font-size:2.25rem;--oj-typography-heading-xl-font-weight:800;--oj-typography-heading-xl-line-height:1.222;--oj-typography-heading-lg-font-size:2rem;--oj-typography-heading-lg-font-weight:800;--oj-typography-heading-lg-line-height:1.25;--oj-typography-heading-md-font-size:1.75rem;--oj-typography-heading-md-font-weight:800;--oj-typography-heading-md-line-height:1.2857;--oj-typography-heading-sm-font-size:1.5rem;--oj-typography-heading-sm-font-weight:800;--oj-typography-heading-sm-line-height:1.3333;--oj-typography-heading-xs-font-size:1.25rem;--oj-typography-heading-xs-font-weight:800;--oj-typography-heading-xs-line-height:1.4;--oj-typography-subheading-2xl-font-size:2.25rem;--oj-typography-subheading-2xl-font-weight:bold;--oj-typography-subheading-2xl-line-height:1.2222;--oj-typography-subheading-xl-font-size:2rem;--oj-typography-subheading-xl-font-weight:bold;--oj-typography-subheading-xl-line-height:1.25;--oj-typography-subheading-lg-font-size:1.75rem;--oj-typography-subheading-lg-font-weight:bold;--oj-typography-subheading-lg-line-height:1.2857;--oj-typography-subheading-md-font-size:1.5rem;--oj-typography-subheading-md-font-weight:bold;--oj-typography-subheading-md-line-height:1.3333;--oj-typography-subheading-sm-font-size:1.25rem;--oj-typography-subheading-sm-font-weight:bold;--oj-typography-subheading-sm-line-height:1.4;--oj-typography-subheading-xs-font-size:1rem;--oj-typography-subheading-xs-font-weight:bold;--oj-typography-subheading-xs-line-height:1.5;--oj-typography-body-xl-font-size:1.25rem;--oj-typography-body-xl-line-height:1.4;--oj-typography-body-lg-font-size:1.125rem;--oj-typography-body-lg-line-height:1.3333;--oj-typography-body-md-font-size:1rem;--oj-typography-body-md-line-height:1.25;--oj-typography-body-sm-font-size:0.859rem;--oj-typography-body-sm-line-height:1.2;--oj-typography-body-xs-font-size:0.75rem;--oj-typography-body-xs-line-height:1.3333;--oj-typography-body-2xs-font-size:0.625rem;--oj-typography-body-2xs-line-height:1.2;--oj-body-bg-color:rgb(var(--oj-palette-neutral-rgb-10));--oj-button-height:2.75rem;--oj-button-border-radius:var(--oj-core-border-radius-md);}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;font-size:16px;color:var(--oj-core-text-color-primary);background:var(--oj-body-bg-color)}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:12px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}.scope{font-size:14px;line-height:1.6;max-width:78ch;color:var(--oj-core-text-color-secondary)}.count{padding:16px 24px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg);background:var(--oj-core-bg-color-content);min-width:140px}.count strong{display:block;font-size:32px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}button,select,input{font:inherit}button{min-height:var(--oj-button-height);padding:8px 16px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-button-border-radius);background:var(--oj-core-bg-color-content);color:var(--oj-core-text-color-primary);cursor:pointer}button.primary{background:rgb(var(--oj-palette-brand-rgb-120));color:white;border-color:transparent}button:disabled{opacity:.5;cursor:default}select{min-height:44px;border:1px solid var(--oj-core-divider-color);border-radius:4px;padding:8px;background:white;max-width:100%}.table-wrap{overflow:auto;background:var(--oj-core-bg-color-content);border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg)}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--oj-core-divider-color)}thead th{font-size:13px;background:rgb(var(--oj-palette-neutral-rgb-20))}th:first-child{width:36%}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}td p,th p{font-size:13px;color:var(--oj-core-text-color-secondary);font-weight:400;margin:8px 0;line-height:1.5}input{width:88px;max-width:100%;padding:8px;border:1px solid var(--oj-core-divider-color);border-radius:4px;background:white;min-height:44px}.note{margin:24px 0;padding:24px;background:rgb(var(--oj-palette-info-rgb-20));border-left:4px solid rgb(var(--oj-palette-brand-rgb-120));line-height:1.6}.actions{display:flex;gap:16px;flex-wrap:wrap}.error{color:rgb(var(--oj-palette-danger-rgb-120));font-size:13px;line-height:1.5}.status{font-size:13px;padding:4px 8px;border-radius:4px;background:rgb(var(--oj-palette-neutral-rgb-20));display:inline-block}.status.ready{background:rgb(var(--oj-palette-success-rgb-20));color:rgb(var(--oj-palette-success-rgb-140))}:focus-visible{outline:2px solid var(--oj-core-focus-border-color);outline-offset:3px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}table,tbody,tr,td,th{display:block}table{table-layout:auto}thead{display:none}th:first-child{width:auto}tbody tr{padding:16px;border-bottom:1px solid var(--oj-core-divider-color)}tbody tr:last-child{border-bottom:0}td,th{padding:8px;border:0!important}td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:8px}.toolbar label{display:flex;flex-wrap:wrap;gap:8px}}
</style></head><body><main><header><div><p class="eyebrow">REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET</p><h1>Prepare the studio supplies</h1><p class="scope">An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.</p></div><div class="count"><strong id="total">0</strong>units in the local draft</div></header><div class="toolbar"><label for="filter">Show <select id="filter"><option value="all">All sample items</option><option value="low">Below minimum stock</option></select></label><button id="sort">Sort by item name</button></div><div class="table-wrap"><table><thead><tr><th scope="col">Item</th><th scope="col">On hand / minimum</th><th scope="col">Add to draft</th><th scope="col">Review state</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No items match this view. <button id="show-all">Show all items</button></p><p class="note">Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.</p><div class="actions"><button class="primary" id="keep">Review this draft</button><button id="reset">Reset quantities</button></div><p id="message" role="status"></p></main><script>const initial=[{id:'paper',name:'Sketch paper',detail:'A4 recycled sheets',stock:18,min:30},{id:'markers',name:'Fine-tip markers',detail:'Black ink / single pens',stock:12,min:10},{id:'clips',name:'Binder clips',detail:'Medium / single clips',stock:6,min:20}];let amounts={paper:12,markers:0,clips:14},ascending=false;const tbody=document.querySelector('#rows');function visible(){let a=initial.filter(x=>document.querySelector('#filter').value!=='low'||x.stock<x.min);return ascending?[...a].sort((a,b)=>a.name.localeCompare(b.name)):a;}function count(){let inputs=[...document.querySelectorAll('input')];let bad=inputs.some(x=>!x.checkValidity()||x.value==='');document.querySelector('#keep').disabled=bad;document.querySelector('#total').textContent=Object.values(amounts).reduce((a,b)=>a+b,0);return bad;}function render(){tbody.innerHTML=visible().map(x=>`<tr><th scope="row">${x.name}<p>${x.detail}</p></th><td data-label="On hand / minimum">${x.stock} / ${x.min}<p>${x.stock<x.min?'Below minimum':'Above minimum'}</p></td><td data-label="Add to draft"><input id="qty-${x.id}" aria-label="Quantity for ${x.name}" type="number" min="0" max="99" step="1" value="${amounts[x.id]}" data-id="${x.id}"><p class="error" hidden>Use a whole number from 0 to 99.</p></td><td data-label="Review state"><span class="status ${amounts[x.id]?'ready':''}">${amounts[x.id]?'In draft':'No addition'}</span></td></tr>`).join('');tbody.querySelectorAll('input').forEach(input=>input.addEventListener('input',()=>{let valid=input.checkValidity()&&input.value!=='';input.setAttribute('aria-invalid',String(!valid));input.nextElementSibling.hidden=valid;document.querySelector('#message').textContent='';if(valid){amounts[input.dataset.id]=Number(input.value);const status=input.closest('tr').querySelector('.status');status.textContent=Number(input.value)?'In draft':'No addition';status.classList.toggle('ready',Number(input.value)>0)}count()}));document.querySelector('#empty').hidden=visible().length>0;count()}document.querySelector('#filter').addEventListener('change',render);document.querySelector('#sort').addEventListener('click',e=>{ascending=!ascending;e.currentTarget.textContent=ascending?'Use original order':'Sort by item name';render()});document.querySelector('#show-all').addEventListener('click',()=>{document.querySelector('#filter').value='all';render()});document.querySelector('#keep').addEventListener('click',()=>{if(!count())document.querySelector('#message').textContent='Reviewed '+Object.values(amounts).reduce((a,b)=>a+b,0)+' units across '+Object.values(amounts).filter(x=>x>0).length+' items in this local draft. No order was sent.'});document.querySelector('#reset').addEventListener('click',()=>{amounts={paper:12,markers:0,clips:14};document.querySelector('#message').textContent='';render()});render();</script></body></html>
```

Kod referansı

- Bu örnek bilerek oj-table veya oj-input-number kullanmaz.

- Herhangi bir Oracle uygulamasına, envanter hizmetine veya sipariş uç noktasına bağlı değildir.

## Oracle Redwood Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Özgün bağımsız yorumu çalıştırır. Yerel JET kullanımı, bağlantısı verilen resmi belgelerde açıklanan ayrı bir çerçeve kurulumunu gerektirir.

```
# Save the complete supplied document as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Projeniz İçin Bir İstem

```
Doğrulanmış JET 19 genel kullanıma açık temel değişkenlerini kullanan özgün Redwood esinli stok inceleme çalışma sayfasını uygulayın. RGB kanal söz dizimini, öğe kimliğine göre tutulan geçerli miktar durumunu, doğrulama sınırlarını, sıralama/filtreleme boyunca korumayı, yalnızca yerel inceleme davranışını ve sıfırlamayı koruyun. Bu tarayıcı uygulamasını yerel JET veya bir Oracle hizmeti olarak tanımlamayın.
```

## Oracle Redwood Tasarım Sistemi Kaynakları ve Kapsamı

Herkese açık Oracle JET 19 Redwood değişkenlerini kullanan bir OpenDesign yorumu. Önizleme, yerel JET bileşenleri veya Oracle envanter hizmeti değil, düz HTML/CSS/JavaScript içerir. Arial açıkça belirtilmiş bir yedek yazı tipidir.

- JET stiline genel bakış Herkese açık değişkenlerin kapsamı, Redwood ile Stable arasındaki fark ve tema sınırları.

- Sabitlenmiş Redwood CSS Referans ve örnekte kullanılan gerçek temel değerler.

- Oracle JET belgeleri Yerel çerçeve kurulumu ve geliştirme bağlamı.

- Redwood'un benimsenmesi Oracle uygulamalarının benimsenmesine ilişkin ayrı bağlam.

## Oracle Redwood Tasarım Sistemiyle İlgili Kaynaklar

### Orange OUDS Web

Eksiksiz ve duyarlı bir karşılaştırma incelemesi üzerinden Orange OUDS 1.4’ün gerçek anlamsal belirteçlerini, tema paketlerini ve yerel Offcanvas davranışını inceleyin.

### Palantir Blueprint

Blueprint ile yoğun bir veri çalışma alanı oluşturun: doğrulanmış tür ve amaç belirteçleri, seçilebilir bir veri kümesi tablosu, inceleme paneli ve eksiksiz React kaynak kodu.

### Pega Bolt

Bolt’un Pega markalı içerik sistemini keşfedin: akışkan tipografi, yatay ve dikey aralıkların ayrı tanımlanması ve editoryal bir kaynak sayfası için Twig akordeon düzeni.


- [Uygulama başvurusu](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Kaynak](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Kaynak](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Kod referansı](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [JET stiline genel bakış Herkese açık değişkenlerin kapsamı, Redwood ile Stable arasındaki fark ve tema sınırları.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/reference-styling/CssVariablesOverview.html)
- [Sabitlenmiş Redwood CSS Referans ve örnekte kullanılan gerçek temel değerler.](https://cdn.jsdelivr.net/npm/@oracle/oraclejet@19.0.0/dist/css/redwood/oj-redwood.css)
- [Oracle JET belgeleri Yerel çerçeve kurulumu ve geliştirme bağlamı.](https://docs.oracle.com/en/middleware/developer-tools/jet/19/develop/index.html)
- [Redwood'un benimsenmesi Oracle uygulamalarının benimsenmesine ilişkin ayrı bağlam.](https://docs.oracle.com/en/cloud/saas/readiness/redwood-adoption/)