İçeriğe geç
BigBang

Sık açılanlar

    ↑↓Gezin↵AçEscKapat
    EN

    Kaynaklar

    İndirmeler

    Derlenmiş token dosyaları (CSS, JSON, DTCG), marka başına Figma değişkenleri ve ECharts teması; hepsi site derlenirken token paketinden üretilir.

    Bu sayfadaki her dosya site derlenirken @bigbang/tokens paketinin çıktısından üretilir; elle düzenlenmiş bir kopya yoktur. Figma değişkenleri ve ECharts teması, Tema üreticisi ile aynı dışa aktarma koduyla üretilir ve derleme, değerler token çıktısıyla birebir aynı değilse durur.

    Fixture deneme markasıdır: beyaz etiket akışını ve marka değiştirmeyi denemek içindir, bir ürün ekranında kullanılmaz.

    CSS değişkenleri

    Bölüm başlığı “CSS değişkenleri”

    Her marka ve mod için bir dosya. Seçici [data-brand="<marka>"][data-theme="<mod>"] biçimindedir; azaltılmış hareket değerleri aynı dosyadadır. tailwind-theme.css, Tailwind v4 yardımcı sınıflarını token değişkenlerine bağlar ve @bigbang/ui/styles.css tarafından içe aktarılır.

    DosyaMarkaModBoyutİndir
    bigbang-light.cssBigBangAçık42.2 KBİndirbigbang-light.css
    bigbang-dark.cssBigBangKoyu41.9 KBİndirbigbang-dark.css
    fixture-light.cssFixture (deneme markası)Açık42.2 KBİndirfixture-light.css
    fixture-dark.cssFixture (deneme markası)Koyu41.9 KBİndirfixture-dark.css
    neutral-light.cssneutralAçık42.2 KBİndirneutral-light.css
    neutral-dark.cssneutralKoyu41.9 KBİndirneutral-dark.css
    tailwind-theme.cssTümüTümü21.3 KBİndirtailwind-theme.css
    app.css
    @import '@bigbang/tokens/css/neutral-light.css';
    @import '@bigbang/tokens/css/neutral-dark.css';

    JSON

    Bölüm başlığı “JSON”

    Aynı değerlerin düz hali: anahtar CSS değişkeninin adıdır (bigbang-color-surface-default), değer CSS’te kullanılan değerdir. Grafik, tuval ya da e-posta şablonu gibi CSS değişkeni okuyamayan yerler içindir. motion.json süreleri milisaniye, eğrileri Bézier dizisi ve yayları fizik parametreleri olarak verir (MOT-09).

    DosyaMarkaModBoyutİndir
    bigbang-light.jsonBigBangAçık24.3 KBİndirbigbang-light.json
    bigbang-dark.jsonBigBangKoyu24.2 KBİndirbigbang-dark.json
    fixture-light.jsonFixture (deneme markası)Açık24.3 KBİndirfixture-light.json
    fixture-dark.jsonFixture (deneme markası)Koyu24.2 KBİndirfixture-dark.json
    neutral-light.jsonneutralAçık24.3 KBİndirneutral-light.json
    neutral-dark.jsonneutralKoyu24.2 KBİndirneutral-dark.json
    motion.jsonTümüTümü3.7 KBİndirmotion.json

    DTCG

    Bölüm başlığı “DTCG”

    Token’lar DTCG ağacı olarak: her token’da $type ve çözülmüş $value vardır, başvuru ({…}) kalmaz. Tasarım araçlarına ve başka token hatlarına aktarmak içindir. Yalnızca CSS’te anlamı olan token’lar (yay linear() eğrileri, yüzde mesafeler) ağaca girmez; adları kök düzeydeki $extensions["com.pupas.cssOnly"] listesindedir.

    DosyaMarkaModBoyutİndir
    bigbang-light.tokens.jsonBigBangAçık58.1 KBİndirbigbang-light.tokens.json
    bigbang-dark.tokens.jsonBigBangKoyu57.8 KBİndirbigbang-dark.tokens.json
    fixture-light.tokens.jsonFixture (deneme markası)Açık58.1 KBİndirfixture-light.tokens.json
    fixture-dark.tokens.jsonFixture (deneme markası)Koyu57.8 KBİndirfixture-dark.tokens.json
    neutral-light.tokens.jsonneutralAçık58.1 KBİndirneutral-light.tokens.json
    neutral-dark.tokens.jsonneutralKoyu57.8 KBİndirneutral-dark.tokens.json

    Figma değişkenleri

    Bölüm başlığı “Figma değişkenleri”

    Marka başına bir dosya, üç koleksiyonla:

    Koleksiyon Modlar İçerik
    <marka> / ramps value Markanın kendi renk rampaları (50–950)
    <marka> / semantic colour light, dark Anlam katmanındaki her renk, açık ve koyu değeriyle
    <marka> / dimension value Boşluk, köşe yarıçapı, kenarlık kalınlığı ve ikon boyutu, px olarak

    Renkler Figma’nın 0–1 aralığındaki r, g, b, a nesneleridir; değişken adları / ile gruplanır (color/surface/default). Dosya, değişkenleri JSON’dan içe aktaran bir Figma eklentisiyle ya da Figma değişken API’siyle bir dosyaya aktarılır.

    DosyaMarkaModBoyutİndir
    bigbang.figma-variables.jsonBigBangAçık ve koyu73.7 KBİndirbigbang.figma-variables.json
    fixture.figma-variables.jsonFixture (deneme markası)Açık ve koyu73.7 KBİndirfixture.figma-variables.json
    neutral.figma-variables.jsonneutralAçık ve koyu73.7 KBİndirneutral.figma-variables.json

    ECharts teması

    Bölüm başlığı “ECharts teması”

    Marka başına bir dosya; içinde her mod için bir tema vardır (neutral-light, neutral-dark): kategorik palet, sıralı palet, eksen, ızgara, gösterge ve ipucu renkleri.

    DosyaMarkaModBoyutİndir
    bigbang.echarts-theme.jsonBigBangAçık ve koyu3.4 KBİndirbigbang.echarts-theme.json
    fixture.echarts-theme.jsonFixture (deneme markası)Açık ve koyu3.4 KBİndirfixture.echarts-theme.json
    neutral.echarts-theme.jsonneutralAçık ve koyu3.4 KBİndirneutral.echarts-theme.json
    import * as echarts from 'echarts/core';
    import themes from './neutral.echarts-theme.json';
    

    echarts.registerTheme('neutral-light', themes['neutral-light']);
    const chart = echarts.init(element, 'neutral-light');

    Ürün ekranlarında bu dosya gerekmez: Chart bileşeni renkleri çalışma anında token’lardan okur ve marka ya da mod değişince grafiği yeniden boyar. Dosya, ECharts’ı Chart dışında kullanan araçlar ve raporlar içindir.