Stažení

Spectro je náš design systém navržený pro flexibilitu a přizpůsobitelnost. Lze v něm upravit barevné schéma, typografii i další vizuální vlastnosti tak, aby byl vzhled aplikace konzistentní napříč celým produktem.

Smyslem není jen „vypadat hezky“, ale hlavně zjednodušit spolupráci mezi rolemi. Pravidla i slovník jsou sdíleny napříč rolemi, takže je jasně určeno, co se má v rozhraní dít a jak se má chovat.

Téma se generuje ze seedu. Výstupem jsou tokeny (CSS proměnné), které se používají přímo v komponentách.

Motivo

Webový nástroj, ve kterém se seed upravuje a výsledek je okamžitě zobrazován v náhledu. Po dokončení je možné stáhnout ZIP se soubory tématu připravenými pro použití v projektu.

Vytvoř téma Vyzkoušej všechny možnosti Spectra

1. Spectro se stáhne v ZIP souboru
2. Soubor spectro-theme.css se vloží do požadovaného adresáře
3. Soubory s fonty se vloží do adresáře uvedeného v fontsPath
4. Soubor spectro-mixins.less se může naimportovat do stylů

Motivo CLI

Nástroj pro příkazovou řádku ve formě NPM balíčku. Je vhodný pro týmy, kde má být generování tématu automatizováno v projektu, build pipeline nebo CI/CD.

Integruj Spectro Stáhni NPM balíček a generuj téma přímo ve tvém projektu

Parametry

Parametr	Popis
--input	Cesta k JSON souboru se seedem. Pokud soubor neexistuje, můžete se rozhodnout, že bude vytvořen.
--output	Cesta k výslednému CSS souboru. Pokud není zadáno, bude vytvořen spectro-theme.css v hlavním adresáři balíčku.
--outputFonts	Cesta k výstupní složce, kam se zkopírují fonty. Pokud není zadáno, použije se složka určená parametrem --output, případně hlavní adresář balíčku.
--version	Zobrazí číslo verze
--seed	Provede validaci a zobrazí seed
--help	Zobrazí nápovědu

Příklady

motivo
    Vygeneruje CSS soubor pomocí výchozího seedu a uloží ho jako
    "spectro-theme.css" do hlavního adresáře balíčku.

motivo --input seed.json
    Pokud soubor "seed.json" neexistuje, vyzve k jeho vytvoření.

motivo --input seed.json --output theme.css
    Vygeneruje CSS soubor na základě "seed.json" a uloží ho jako "theme.css".

motivo --input seed.json --seed
    Ověří a zobrazí sloučený seed bez generování CSS.

motivo --output theme.css
    Vygeneruje CSS soubor pomocí výchozího seedu a uloží ho jako "theme.css".

motivo --input my-seed.json --output custom-theme.css
    Sloučí "my-seed.json" s výchozím seedem a vygeneruje
    "custom-theme.css".

Changelog

• 26.1.2

  • Nové Export do DTCG JSON formátu

• 26.1.1

  • Nové Možnost nastavit vlastní barvu brandingu
  • Nové Fonty Zalando Sans a IBM Plex Sans
  • Změna Výchozí font je Zalando Sans

• 26.1.0

  • Release Povýšení hlavní verze

• 25.2.1

  • Fix CSS proměnné surface-*-active vracely hodnotu undefined

• 25.2.0

  • Nové Nastavení typografie (fonty a jejich parametry)
  • Změna Refaktor CSS proměnných s využitím light-dark() a color-scheme

• 25.1.0

  • Nové Volby status barev

• 24.1.0

  • Release 🚀 První vydání