rastrillo 設計系統

設計系統提供嘅嘢嘅概覽。主題：plain。語言：廣東話。

開始使用

rastrillo 應用第一日就攞齊晒呢啲，但設計系統邊個都用得。用 JavaScript 漸進增強，但唔需要 JavaScript。

tokens.css 係結構：組件嘅類、版面，同埋字級、間距同圓角嘅比例。入面嘅值係引用，實際喺第二度設定。themes/<name>.css 係顏色、字體同形狀：一個 :root 區塊，每隻色都以 light-dark() 成對聲明一次。

rastrillo.js 係漸進增強嘅墊片：片段輪詢、忙碌狀態、輕量關閉。select.js 同 datetime.js 係增強——喺控件自己啟用之前都係唔郁嘅，而且可以逐個刪走。

各個組成部分嘅檔案大細。

tokens.css結構：所有組件嘅類、所有比例，冇任何顏色字面值。喺每個主題之下都係同一個檔案。122033 位元組
theme-day.cssday 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。10828 位元組
theme-plain.cssplain 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。10286 位元組
theme-signal.csssignal 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。11083 位元組
rastrillo.js漸進增強嘅墊片：片段輪詢、忙碌狀態同輕量關閉。每個搭骨架生成嘅應用都會攞到。16364 位元組
select.jsfield-select 嘅可搜尋下拉框。喺某個 select 用 data-rst-select 啟用之前都係唔郁嘅，可以單獨刪走。11919 位元組
datetime.js日期欄位嘅自然語言輸入。喺某個欄位用 data-rst-date 或 data-rst-time 啟用之前都係唔郁嘅，可以單獨刪走。76584 位元組
calendar.js嗰個欄位嘅日曆掣打開嘅月曆格。喺 datetime.js 問佢攞面板之前都係唔郁嘅，可以單獨刪走：冇咗佢，個掣就退返去瀏覽器自己嘅揀選器。22725 位元組

新應用總共攞到 259911 個位元組嘅 CSS 同 JavaScript：tokens.css、一個主題，同埋啲腳本。

rastrillo new 會將呢啲寫入應用嘅 static 目錄，再喺版面度引用，tokens.css 行先。之後佢哋就係你嘅：想改就改，用唔著嘅刪咗佢。

rastrillo new --theme=plain myapp

主題釘咗兩次。--theme 決定邊個內置主題會複製做 static/theme.css，而且喺生成應用嗰陣就記低咗。

const vendoredTheme = "plain"

上面啲名就係連結。攞走 tokens.css 同一個主題，你就有成套視覺系統：樸素嘅類名、普通 HTML，唔使建置步驟。

值得喺佢食咗你一個下晝之前就知嘅陷阱：tokens.css 喺搭骨架嗰陣複製入應用嘅 static 目錄，之後就凍咗喺度，但佢所修飾嘅 partial 就繼續隨模組升級。應用可能靜靜雞用新標記跑舊 CSS。升級嗰陣記住重新複製 tokens.css，連主題同腳本一齊。

rastrillo doctor 會將應用凍咗嘅檔案同模組嗰啲比對，再提議重新複製。