现代化 Foundation 主题

设计团队正在对基础主题进行微小但有力的更改/调整,使其更贴近现代 Web 标准。要在 Meta 上实时查看这些更改,请加入此群组:

https://meta.discourse.org/g/modernized-foundation

我们将通过 Discourse 中提供的新 Upcoming Changes(即将进行的更改)功能将这些更改上线。这将允许网站所有者为他们指定的任何群组启用这些更改,以便在不担心可能破坏主题或当前自定义的情况下测试更改的推出。

将发生什么变化?

标题高度减小

我们减小了标题的大小,并稍微减小了一些图标和头像的大小,以更好地利用屏幕空间。

默认按钮

我们将默认按钮背景从灰色改为透明/“次要”背景并带有边框。

  • 移除灰色背景
  • 添加边框
  • 图标颜色与文本颜色匹配
  • 按钮现在有固定的高度

主题列表页面上的“创建新主题”按钮

与 Horizon 保持一致,并为其赋予 tertiary(三次色)的“CTA”(号召性用语)背景颜色。

移除大量灰色背景

主题列表

  • 移除 3 像素厚的顶部边框
  • 减小表格标题数据的字体大小
  • 表格数据项颜色保持一致
  • 颜色值更改以区分已读/未读
  • 未读文本的字重略微增加

分类

  • 文本左对齐
  • 移除厚实的左侧彩色边框
  • 徽章略微圆角化
  • 框的边框变细

导航栏

  • 主题列表页面的导航药丸的高度将与此区域的按钮高度相同
  • 选中组件上文本和图标颜色更深

侧边栏

  • 图标和文本颜色匹配
  • 文本和图标颜色更深
  • “活动”背景更浅
  • “活动”字体字重更粗

欢迎横幅

  • 间距平衡
  • 添加了变量,以便通过自定义更容易地进行左/右/中心对齐
  • 标题字重减小
  • 副标题字体大小减小

日历

  • 移除了“按钮”上的灰色背景
  • 仅使用灰色来表示“活动”
  • 切换到“带边框的透明”按钮样式

下拉菜单

  • 为下拉容器添加了内边距
  • 高度、内边距、间距现在与侧边栏项目匹配
    • “可点击列表”的统一
  • 边框继承 --d-border-radius 变量

新变量

此处的一些更改将通过添加到核心中的附加变量来引入。

欢迎横幅对齐

欢迎横幅的对齐方式现在可以通过以下方式更改:

// 默认
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// 自定义
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

按钮高度

我们现在将通过以下方式设置固定的按钮高度:

// 默认
  --button-height: var(--space-8);

字体平滑

我们已经在 Horizon 中进行了此操作,将其引入基础是合理的。

// 新默认值
--webkit-font-smoothing: antialiased;
16 个赞

gist 按钮下拉菜单有一个滚动条(可能是 fk-d-menu 上的 overflow?),可能不需要与其他类似的 dropdown-menu 类相同的 min-width: 200px

编辑:算了,已经修复了 :smiley:

3 个赞