Stažení

Spectro je náš vlastní design systém, navržený pro flexibilitu a přizpůsobitelnost. Umožňuje snadno upravit barevné schéma a typografii, což zajišťuje konzistenci napříč celým produktem. Je ideálním řešením pro týmy, které hledají robustní základ pro vývoj aplikací nebo webových stránek, který lze přizpůsobit specifickým požadavkům projektů.

Před samotným stažením je možné si téma přizpůsobit svým potřebám. Prvotní vlastnosti tématu jsou založeny na tzv. semínku (seed), ze kterého jsou v reálném čase generovány všechny tokeny uchovávající definice barev, velikostí, stínů a jiných aspektů.

Motivo

Webový nástroj, který umožňuje upravit všechny možnosti seedu a okamžitě vidět změny díky živému náhledu. Po dokončení úprav je možné stáhnout výsledné téma ve formátu ZIP, který obsahuje všechny potřebné soubory pro použití v projektu. Motivo nabízí efektivní způsob, jak přizpůsobit a generovat témata pro webové stránky či aplikace.

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

1. Stáhni Spectro v ZIP souboru
2. Vlož spectro-theme.css do potřebného adresáře
3. Vlož soubory s fonty do adresáře uvedeného v fontsPath
4. Naimportuj spectro-mixins.less do svých stylů, pokud ti usnadní práci

Motivo CLI

Nástroj pro příkazovou řádku, distribuovaný jako NPM balíček. Usnadňuje integraci a přizpůsobení Spectra přímo v rámci vývojového prostředí, což umožňuje snadno spravovat a aplikovat změny tématu bez nutnosti ručního zásahu. Motivo CLI je ideální pro týmy, které potřebují efektivně automatizovat procesy související s designem, jako je generování témat nebo synchronizace změn napříč více projekty.

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í