@校正/亮度主题
可选完整主题 @ecopages/radiant-ui. Radiant UI 输出一个无障碍
默认主题; 此软件包添加了一组可准备使用的视觉预设 .
使用可选主题时安装两个软件包 :
pnpm add @ecopages/radiant-ui @ecopages/radiant-themes
尾风 CSS 应用程序
导入完整的主题和组件样式表 :
@import 'tailwindcss';
@import '@ecopages/radiant-themes/github';
@import '@ecopages/radiant-ui/styles.css';
主题包括:GitHub,Cloudflare,VS代码,Vercel,材料设计,高对比度,Windows 95,Mac OS Classic,macOS,和Zed 拥有它的形状,打字,间隔,语义色彩,以及任何特定组件的造型. 主题来源所剩 可内部堆肥,而公共API则保持每个完整主题一个导入.
主题条目定义了字体-家族堆栈,但不捆绑字体文件. 应用程序可以装入适当许可的字体文件
单独并覆盖 --font-sans, (中文(简体) ), --font-heading,或 --font-mono 在主题导入后.
字体
给一个网络字体取名的主题期望应用程序能加载;没有它,堆栈会倒回系统字体.
| 主题 | 字体 | 安装 |
|---|---|---|
| 齐德 | IBM Plex Sans, IBM Plex 单曲 | pnpm add @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono |
| 齐德 | Lilex( 可选, 代码) | pnpm add @fontsource/lilex |
| 维塞尔 | 盖斯 | pnpm add @fontsource-variable/geist |
| 材料 | 机器人 | pnpm add @fontsource/roboto |
例如, 在应用程序中导入一次字体源 CSS import '@fontsource/ibm-plex-sans/400.css';。 。 。 .
收缩变体有自己的出口,例如:
@import 'tailwindcss';
@import '@ecopages/radiant-themes/github/compact';
@import '@ecopages/radiant-ui/styles.css';
每个紧凑的条目应用主题共享的紧凑相距构成,同时保留同一主题自有调色板,
字体堆栈、形状和组件处理。 完整而紧凑的条目按照文件的 .dark 课.
树格表面遵循相同的文件浏览器处理方法: VS 代码为平和而紧凑, GitHub 和 macOS 使用安静 列表分隔符,而Mac OS Classic和Windows 95使用其本土风格的三角形或正方形披露支付.
弧度默认( R)@ecopages/radiant-ui/themes/default)使用三种OKLCH种子颜色外加密度,角半径,并
边框不透明输入。 Docs调谐器显示这六个值并生成可复制的 CSS. 这些管制仅适用于:
Radiant默认;品牌主题保留自己的值.
对两种模式中已公布的语义文本对至少7:1的对比度并使用突出的焦点 指标。 其控制表面,包括开关音轨和拇指,使用平方角,收音机保持圆形并检查 点,和哑音文本保持在7: 1以上. Radiant UI 共享基金会 支持减少运动,增加对比度,可见键盘焦点,以及Windows强制颜色. 校验非文本 边框和自定义覆盖后的应用程序内容.
Windows 95 绘制了双通 2px Bevel 的每个控件: 灰色的按键,默认时带有黑色框
行动,沉入白地,检查箱,和无线电井, 提高财产标签 加入他们的页面,海军标题栏,
海军选取 平面菜单条 有海军菜单亮点 轨迹栏 有沉入海道和升起指针,
带有高高箭头按钮的下放列表和组合框、沉入列表框和带有点行的树视图
外加/外加框,并有苍白的黄色工具提示. Mac OS Classic is Mac OS 9 Platinum,由Mac OS 8人机界面指南和外观管理器所建
默认主题: 七系统灰色 #eeeeee 改为 #202020灰色按键,带有黑色轮廓和双像素
bevel, 三层环绕默认按钮, 12px取回框, 有阴影的无线电球, 有沉白
字段、合并为黑框页的tapezoid标签和 1px条纹标题栏。 选择和焦点使用
默认 #6666cc 口音。 发音。 菜单栏和菜单栏突出该口音的项目,列表视图为黑框白色
井有被活化的柱头,工具提示被概括为帮助气球,而披露则使用白金三角. 两者
暗模式在更暗的面部和字段上保持同样的贝壳结构,因为两个系统都没有运出一个. macOS 跟着 Sonoma AppKit :
sF Pro 系统字体, 位于 13px , 6px 的按键, 由发线阴影概述, 重音填充默认按钮, 检查
框,和收音机按钮,弹出按钮,并带有口音箭头井,以组框上边缘为中心分块的分页,白色
滑动手势,半透明菜单和弹出式,并用白文本选择口音行. 损坏按钮使用红色
文本,如同 AppKit 提醒一样。 Windows 95还提供了全尺寸的抖动卷轴条,并有高高的箭头按钮和被打出大拇指;
Mac OS Classic提供白金灰色被子音轨,末端定位箭头按钮和条纹蓝卷轴盒.
Chrome和Safari收到详细的WebKit滚动条处理;Firefox收到标准 scrollbar-width 财务报告和审定财务报表
scrollbar-color 倒回(fall back),其原生的API不会出出出经典箭头按钮,贝子,或条纹图像.
材料设计采用材料3基线方案:全辐射
按钮、 4px 简介字段和菜单、 8px 芯片、 28px 对话框、 托式表面容器上覆、 反面
工具提示和土司,以及3px二级焦点指标。 这些是用 Radiant 语义角色 Tailwind 编写的原始执行 @apply目录
选择器; 不复制第三方 CSS .
Cloudflare主题 与 Cloudflare 橙 在受 Cloudflare Kumo 启发而受约束的中性地层上领先. 内容
语义上的主要角色使用相同的对比安全橙色 #cc3a00 在两种模式中。 填充的主按钮使用
橙色并带有两种模式的白文本. 链接和焦点保持蓝色 警告使用黄色琥珀 保持相距
从初级。 选择选项,菜单项,和活性导航使用Kumo的中性灰色,因此它们不再使用橙色;
面包屑链接为蓝色,深色模式对橙色文本使用更亮的橙色,控制高26,36和40px.
GitHub 映射出 Primer 的功能角色:绿色仅限于主按钮,公尺,以及成功状态,蓝标记链接,焦点,以及
选中、 选中或当前状态, 选中的标签使用 Primer 的珊瑚下划线, 并使用二次动作
Primer的灰色默认按钮.
Zed主题遵循"一光一暗":平面板,发线边框,4px控制,6px弹出器,13px控制 文本,和半透明重音填充,用于徘徊和选择.
Vercel主题使用背景 2作为光帆布,背景 1作为主表面. 它的组件颜色
驱动器徘徊和活性填充, 颜色 4 - 6 驱动器默认, 徘徊, 和活性边框, 蓝色停留聚焦于链接和
键盘焦点 。 为了能见度,加强了控制界限。 VS代码跟随"光"现代和"暗"现代:26px
带有 2px 角的控件,填入按钮 #005fb8 (轻)或 #0078d4 (暗地)有白色文字,灰色次要文字
大纲变体的按钮, 1px 蓝色焦点大纲, 蓝色菜单亮点, 带有蓝色顶部的编辑器风格的框式标签
边框,并显示正方形滚动条。 按钮治疗按主题不同: Cloudflare 使用 a
对比安全橙色主填充, Cloudflare 和 Vercel 使用饱和填充的白文本用于暗模
破坏性按钮, GitHub 使用 Primer 的危险按钮: 默认按钮正面有红色文字, 红色填入
盘旋。 其他变体跟随每个主题的语义角色. 这些调色板使产品提示适应
Radiant UI角色不复制产品像素用于像素.
设计参考
这些主题借鉴了角色映射和组件行为方面的公共指导: 材料设计 3 颜色 角色, (中文(简体) ), 首页的颜色符号层, (中文(简体) ), Vercel 地质颜色, (中文(简体) ), VS 代码主题颜色角色, (中文(简体) ), 库莫云花, (中文(简体) ), Apple的"人文界面指南", (中文(简体) ), mac OS 8 白金准则,以及 微软财产表指导。这些来源为设计决定提供了信息;所有主题 CSS 都为 Radiant 的符号和组件编写 .
拉迪安特主题是一个独立的项目. 它不隶属于、赞助或认可GitHub、Cloudflare, Vercel,微软,苹果或谷歌. GitHub, Cloudflare, Vercel, VS代码, Windows 95, Mac OS, macOS等产品名称, 和"材料设计"是各自所有者的商标,仅用于描述设计灵感.
浏览器已准备好 CSS
对于使用已编译的 CSS 而不是 Tailwind 主题源的应用程序, 加载基准捆绑, 一个编译 主题和组件样式:
@import '@ecopages/radiant-ui/radiant-ui.css';
@import '@ecopages/radiant-themes/compiled/github.css';
@import '@ecopages/radiant-ui/styles.css';
使用 compiled/github/compact.css 用于压缩变体。 每个完整主题和
紧凑变体. 当应用程序需要本地调整时, 覆盖导入后的语义 CSS 属性 .