新粗野主义

neubrutalism 是平涂的颜色加粗重的墨线：每个表面都有描边，凡是从页面上凸起的东西都会投下没有模糊的硬阴影。按下控件时，它会沉进自己的阴影里，打开的切换按钮会一直停在那里。柔和填充是鲜亮的粉彩色，上面放深色文字；实心填充保持足够深，可以承载白色标签；到了深色模式，墨色会变成奶油色，因为黑色阴影在深色页面上根本看不见。

一张卡片

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

  1. 账户

  2. 资料

  3. 确认

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

  1. 今天

    预设已发布

    整体观感，一次调用。

  2. 昨天

    文档已写好

  3. 星期一

    第一版草图

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

使用

import { styles } from 'sitelo/ui'

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

把页面本身也涂成 var(--su-bg)，它就会用上预设的奶油色，白色的表面在上面格外醒目。

body {
  background: var(--su-bg);
}

自定义颜色

theme() 依然可以叠在上面用，所以预设是起点，而不是分叉。这个预设带有两个自己的令牌：--su-nb-ink，所有线条和阴影所用的颜色；以及 --su-nb-lift，凸起的控件离页面有多远，也就是按下时它移动多远。

head(
  styles({ preset: 'neubrutalism' }),
  theme({
    primary: { base: '#c2185b', hover: '#a8144e', active: '#8e1042', soft: '#ffb3d0', softFg: '#5c0a2a' },
    '--su-nb-lift': '6px',
  }),
)