新拟态

neumorphism 是软 UI：每个表面都是页面本身，控件只靠光与影区分出来——要么从页面上凸起，要么压进页面里。这种风格通常放弃的两样东西它都保留了：达到 WCAG AA 的文字，以及焦点轮廓；它也和其他一切一样跟随深色模式。不过它要求页面自身的背景是 var(--su-bg)，因为整个效果就建立在两者同色之上。

一张卡片

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

  1. 账户

  2. 资料

  3. 确认

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

  1. 今天

    预设已发布

    整体观感，一次调用。

  2. 昨天

    文档已写好

  3. 星期一

    第一版草图

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

使用

import { styles } from 'sitelo/ui'

head(
  title('我的站点'),
  styles({ preset: 'neumorphism' }),
)
// <link rel="stylesheet" href="/su/ui-c9428b65.css">
// <link rel="stylesheet" href="/su/neumorphism-5d0e7b91.css">
body {
  background: var(--su-bg);
}

自定义颜色

theme() 依然可以叠在上面用，所以预设是起点，而不是分叉。这个预设给每套调色板加了第十个槽位 glow——进度条或开关在末端渐变过去的那个颜色——这样新的主色就能带上自己的。

head(
  styles({ preset: 'neumorphism' }),
  theme({
    primary: { base: '#7c3aed', hover: '#6d28d9', active: '#5b21b6', glow: '#e879f9' },
  }),
)