Özelleştirme

Style provider'ın davranışı, useStyleProvider fonksiyonuna parametreler geçilerek özelleştirilebilir. Ayrıca, varsayılan temanın global değişkenlerini geçersiz kılabilir veya kendi temanızı oluşturabilirsiniz.

useStyleProvider Parametreleri

useStyleProvider fonksiyonu şu parametreleri kabul eder:

• emulate - tarayıcıda zorunlu olarak bir Style provider emülasyonu oluşturur (sunucuda iletmeye gerek yoktur, emülasyon otomatik olarak oluşturulur),
• noscript - Style provider emülasyonunu bir metin dizisine (string) dönüştürdükten sonra içindeki betiği (script) kaldırır ve geriye yalnızca ilk CSS stillerini bırakır (SSG için yararlıdır),
• global (^4.2.0) - Style provider'ı global bir nesne olarak kaydeder ve kullanır,
• attrs - Style provider öznitelikleri:
  • pre - stil sayfası adları için önek (prefix),
  • mode - kapsamlı (scoped) seçiciler oluşturma modu (a - veri öznitelikleri, c - sınıflar),
  • min - küçültülmüş (minified) kapsamlı seçiciler oluşturma modu (boolean öznitelik),
  • scheme (^4.14.0) - HTML belgesi için renk şeması özelliğini ayarlar (light veya dark),
  • size - temel boyut için global CSS değişkenini geçersiz kılar (üzerine yazar),
  • space (^4.13.0) - temel boşluk (spacing) için global CSS değişkenini geçersiz kılar,
  • radius (^4.14.0) - temel köşe yarıçapı (radius) için global CSS değişkenini geçersiz kılar,
  • time - temel süre (time) için global CSS değişkenini geçersiz kılar,
  • angle - temel açı (angle) için global CSS değişkenini geçersiz kılar,
  • color (^4.3.0) - temel renk (color) için global CSS değişkenini geçersiz kılar,
  • easing (^4.4.0) - temel yumuşatma (easing) fonksiyonu için global CSS değişkenini geçersiz kılar,
  • contrast (^4.8.0) - kontrast rengi için global CSS değişkenini geçersiz kılar,
  • sans (^4.14.0) - sans-serif yazı tipi ailesi için global CSS değişkenini geçersiz kılar,
  • serif (^4.14.0) - serif yazı tipi ailesi için global CSS değişkenini geçersiz kılar,
  • mono (^4.14.0) - monospace yazı tipi ailesi için global CSS değişkenini geçersiz kılar.

Temalandırma

EffCSS teması, bir dizi global CSS değişkeninden oluşur.

Temalar, Style provider nesnesinin theme özelliği aracılığıyla erişilebilen tema denetleyici nesnesi kullanılarak oluşturulur, güncellenir veya silinir:

import { useStyleProvider } from 'effcss';

const provider = useStyleProvider();
const themeVars = {
    size: 18,
    time: 150,
    angle: 15,
    color: 'green',
    sz: {
        s: 10,
        m: 20,
        l: 30
    },
    coef: {
        1: 0.05,
        32: 220,
        15: 1.9
    },
    hue: {
        sec: 220,
    },
    $light: {
        lightness: {
            bg: {
                s: 0.785
            }
        },
        chroma: {
            fg: {
                rich: 0.145
            }
        }
    }
};
// you can override the default theme variables
provider.theme.update(themeVars);
// you can add a new theme
provider.theme.add(themeVars, 'custom');
// you can enable a new theme
provider.theme.switch('custom');

Sırasıyla açık ve koyu renk şemalarına ait değişkenlerin bağlamını belirleyen özel üst düzey $light ve $dark anahtarlarına dikkat edin.

Küresel boyut (size), boşluk (space), zaman (time) ve açı (angle) değişkenlerine erişmek için sırasıyla theme.size, theme.space, theme.time ve theme.angle yardımcılarını kullanabilirsiniz. Küresel birincil (primary), nötr (neutral) ve kontrast (contrast) renk değişkenlerine erişmek için ise sırasıyla theme.color, theme.neutral ve theme.contrast yardımcılarını kullanın. Bu değişkenler, birden fazla değerin tanımlanmasını ve bu değerlere indeks aracılığıyla erişilmesini destekler:

// through the setter
styleProvider.size = [16, 18, 24];

// or via an attribute
<script is="effcss-provider" size="16;18;24;"></script>

// inside the maker, values are available by index
export const maker: TStyleSheetMaker = ({ theme: {size} }) => {
    return {
        '.sz-s': {
            width: size
        },
        '.sz-m': {
            width: size[2]
        },
        '.sz-l': {
            width: size[3]
        },
        '.sz-2xl': {
            // you can set your own multiplier
            width: size[3](2)
        }
    };
};

Sayısal katsayılar ve bunların aralıklarına coef yardımcı aracıyla erişilebilir.

hue, lightness ve chroma nesneleri, palette yardımcı aracı tarafından kullanılır.

StyleSheet maker fonksiyonlarınızda dilediğiniz tema değişkenlerini kullanmak için theme.variable yardımcı aracından yararlanın:

import { TStyleSheetMaker } from 'effcss';

type TGlobalVars = {
    sz: {
        s: string;
        m: string;
        l: string;
    }
};

export const maker: TStyleSheetMaker = ({ theme: {variable} }) => {
    return {
        '.sz-m': {
            width: variable<TGlobalVars>('sz.m', '100px') // '100px' - fallback value
        }
    };
};

Değer dizileri (v4.12.0)

theme parametresi bir dizi (array) biçiminde bir değere sahipse, dizinin ilk elemanı dışındaki her bir eleman için, o değerin dizideki indeksine karşılık gelen bir soneke sahip ayrı bir CSS değişkeni oluşturulur. Dizinin ilk elemanı sıfır indeksine sahiptir ve bu indeks dikkate alınmaz:

const themeVars = {
    custom: ['12px', '24px', '36px']
    // --f0-custom: 12px; --f0-custom-1: 24px; --f0-custom-2: 36px;
};

Bu tür CSS değişkenlerine erişmek için theme.variable yardımcı fonksiyonunu kullanabilirsiniz:

export const maker: TStyleSheetMaker = ({ theme: {variable} }) => {
    return {
        '.sz-m': {
            width: variable<TGlobalVars>('custom.1', '100px')
        }
    };
};

Çoklu Tema Kullanımı

Belirli bir HTML öğesi için genel temadan farklı bir tema kullanmak üzere, use fonksiyonunu argümansız çağırın ve elde edilen çözümleyiciye (resolver) istenen temayı içeren değiştiriciyi (modifier) ​​iletin:

import type { TBaseStyleSheetMaker } from 'effcss';
import { useStyleProvider } from 'effcss';

const consumer = useStyleProvider();
const [resolver] = consumer.use();
const attrs = resolver<TBaseStyleSheetMaker>('..theme.custom');

Global değişkenleri geçersiz kılma (^4.5.0)

Birden fazla tema tanımlamak yerine, effcss-override web bileşenini kullanarak düzenin (layout) belirli bölümleri için global değişkenleri ayarlayabilir ve yeniden tanımlayabilirsiniz. Bunu yapmak için, prepareOverrideValues yardımcı fonksiyonu kullanılarak hazırlanmış bir metin dizisini (string) values özniteliğine (attribute) aktarın:

import { prepareOverrideValues } from 'effcss';

const overridedValues = prepareOverrideValues({
    size: 32,
    hue: {
        pri: 10
    },
    $light: {
        lightness: {
            bg: {
                xl: 0.95
            }
        }
    }
});

export const Component = () => <effcss-override neutral="grey" color="purple" values={overridedValues}>
    <div>...</div>
<effcss-override>`

^4.8.0 sürümünden itibaren, Style provider ile aynı öznitelikleri (ör. size, angle, color) kullanarak genel değişkenleri de geçersiz kılabilirsiniz. Bu öznitelikler, values içindeki değerlere göre önceliğe sahiptir. ^4.12.0 sürümünden itibaren, ; ile ayrılmış birden fazla değer belirtebilirsiniz:

<effcss-override size="16;18;24;" color="purple;white;#2192a7"></effcss-override>

^4.9.0 sürümünden itibaren, scheme özniteliğini kullanarak bir bileşenin ve içeriğinin renk şemasını geçersiz kılabilirsiniz. Bu öznitelik light veya dark değerlerini alabilir.

effcss-override bileşeni, yerleşimde (layout) herhangi bir değişikliğe yol açmamak için varsayılan olarak display:contents; stiline sahiptir.

Stil sayfası ince ayarı (^4.13.0)

İnce ayar (tuning), stil sayfalarınızı esnek hale getirmenin bir başka yoludur. Bu özellik, harici uygulamalar için özel ince ayar değişkenleri tanımlamanıza olanak tanır.

İnce ayar değişkenlerini kendi sözleşme (contract) türleriyle tanımlayabilir ve theme.tuning yardımcı aracı aracılığıyla uygulayabilirsiniz:

type TMaker = {
    sz: 's' | 'm';
    rounded: '';
    card: {
        bg: 'pri' | 'sec';
        inv: '';
        footer: Record<string, never>;
    }
};

type TMakerTunings = {
    size: number;
    card: {
        color: string;
    }
};

const DEF_TUNING_VAL = 'rgb(82, 119, 119)';

const maker: TStyleSheetMaker = ({ select, theme: { tuning } }) => {
    const selector = select<TMaker>;
    const tuningVar = tuning<TMakerTunings>
    return {
        [selector('sz:s')]: {
            width: '10px'
        },
        [selector('card')]: {
            boxSizing: 'border-box'
        },
        // ...
        div: {
            background: tuningVar('card.color', DEF_TUNING_VAL)
        }
    };
};

Ardından uygulamalarda, stil sayfanız Style provider'ın tune metodu aracılığıyla yapılandırılabilir:

styleProvider.dx<TMaker>(maker, []);
const vars = styleProvider.tune<TMakerTunings>({
    card: {
        color: 'oklch(0.85 0.02 196.66)'
    }
}, maker);

const jsx = <div style={vars}>Welcome to the tuned area</div>;

INFO

Style provider yalnızca halihazırda oluşturduğunuz stil sayfalarını düzenler; bu nedenle bunları dx, cx veya use yöntemiyle tanımladığınızdan emin olun.