终端

terminal 是一个系统控制台：黑色底色上只用一种等宽字体，细线面板的标题栏用一条线隔开，每个标签——按钮、字段的说明、标签页、列标题——都用大写字母，多数加粗。青色是强调色：大标题、面板标题、实心按钮和焦点。选中项——指针下的表格行、按下的分段、选中的胶囊标签页、当前页码、指针下的菜单项——以反色显示，青底深字，就像终端高亮一行那样。成功、警告和危险调色板是它的状态色，绿、黄、红；描边按钮或标签用各自的颜色绘制，线条和文字都是。除了单选按钮，没有圆角，也没有阴影。深色模式是原本的样子；浅色模式保留每一条线、每个大写字母和每个直角，以黑色印在近白的底上。

一张卡片

同样的标记，由一份样式表重新设计。

  1. 账户

  2. 资料

  3. 确认

进度50%
50
已保存
你的更改已经上线。
已复制到剪贴板
预设是什么？
一份能一次性重新设计所有组件的第二份样式表。
它会跟随深色模式吗？
会——试试页面顶部的开关。
还能继续用 theme() 吗？
能，而且它优先于预设。

  1. 今天

    预设已发布

    整体观感，一次调用。

  2. 昨天

    文档已写好

  3. 星期一

    第一版草图

整体观感，一次调用。
链接在核心样式表之后。
只有一个选项：preset。
草稿已上线已归档
AL312GH

使用

import { iconSet, styles } from 'sitelo/ui'

iconSet('square')

head(
  title('我的站点'),
  styles({ preset: 'terminal' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/terminal-06767808.css">

iconSet('square') 会让图标与之匹配——以方头、尖角的直细线绘制，就像上面的预览那样——组件自己绘制的图标也包括在内。在页面导入的某个模块里调用一次即可。

把页面本身也设成这样——它的底色、文字颜色和字体——组件就会像上面那样落在页面上。页面加载了 JetBrains Mono、IBM Plex Mono 或 Source Code Pro 时预设会使用它，否则使用系统自带的等宽字体；预设本身不下载任何东西。

body {
  background: var(--su-bg);
  color: var(--su-text);
  font-family: var(--su-font-mono);
}

自定义颜色

theme() 依然可以叠在上面用，所以预设是起点，而不是分叉——这里把强调色改成荧光屏的琥珀色，连同绘制它的线条。这个预设带有三个自己的令牌：--su-tm-tracking，标签大写字母之间的字距；--su-tm-track，进度条或滑块运行的槽；以及 --su-tm-field，字段周围的线，在深色模式下与面板同为淡淡的灰色——想让字段边缘更醒目就把它调亮。

head(
  styles({ preset: 'terminal' }),
  theme(
    {
      primary: {
        base: '#8a5200', hover: '#734400', active: '#5c3600',
        soft: '#f6e6cc', softHover: '#efd9b3', softFg: '#4d2e00',
        border: '#c9a066', ring: 'rgba(138, 82, 0, 0.3)',
      },
    },
    {
      dark: {
        primary: {
          base: '#ffb000', hover: '#ffd480', active: '#e69e00',
          soft: '#33260d', softHover: '#45330f', softFg: '#ffd480',
          border: '#d99600', ring: 'rgba(255, 176, 0, 0.4)',
        },
      },
    },
  ),
)