rastrillo 设计系统

设计系统所提供内容的总览。主题：day。语言：简体中文。

快速开始

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 字节

新应用总共拿到 260453 字节的 CSS 和 JavaScript：tokens.css、一个主题，以及那些脚本。

rastrillo new 把这些写进应用的 static 目录，并从布局里引用它们，tokens.css 在最前。从那时起它们就是你的：随便改，或者删掉你用不上的。

rastrillo new --theme=day myapp

主题被钉了两次。--theme 决定把哪个内置主题复制成 static/theme.css，并在生成应用时记录下来。

const vendoredTheme = "day"

上面的名字就是链接。拿走 tokens.css 和一个主题，你就有了整套视觉系统：朴素的类名、普通的 HTML，不需要构建步骤。

值得在它花掉你一个下午之前就知道的陷阱：tokens.css 在脚手架阶段被复制进应用的 static 目录并从此冻结，而它所样式化的 partial 会随模块继续升级。应用可能悄悄地用新标记跑旧 CSS。升级时请重新复制 tokens.css，主题和脚本也一起。

rastrillo doctor 会把应用冻结的文件与模块里的做比对，并提出重新复制。