@ carissa-io/ 主题默认
卡丽莎默认主题 : 瑞士最小主义 (平起平起地角,对主要行动和重点绝对是黑色的,中立的) 灰色缩放,一种中性杂乱类型堆栈). Carissa 组件 船舶中性默认, 没有自己的外观; 这个 软件包通过压倒它们的SCSS变量来给它们一个. 价值观背后的决定是: 设计。 。 。 .
安装
npm install @carissa-io/theme-default
编译的CSS不需要别的了. 要自行编译 SCSS, 同时安装您使用的组件( 它们是可选的) 相对依赖关系).
用这个
- 编译的 CSS (无编译;组件必须安装才能渲染):
这也是包的主要出口,所以import '@carissa-io/theme-default/css'import '@carissa-io/theme-default'与处理 CSS 的捆绑机合作. - SCSS来源 : 转发或
@use从你自己的萨斯入口,与@carissa-io/*可解( r)node_modules编辑 装入路径 :@use '@carissa-io/theme-default/scss'; - 托肯斯( 仅包含 Sass 变量, 无 CSS ) : 见 键。 。 。 .
- 新主题的起点: 复制
scss/index.scss财务报告和审定财务报表scss/_tokens.scss并改变价值。 在卡丽莎的工作空间,scripts/new-theme.sh <name> "<description>"这样做并设置回转.
颜色模式
主题有一个光和暗色盘在一个包中. 调色板是一套 CSS 自定义属性( S)--c-background, (中文(简体) ), --c-text, (中文(简体) ),
--c-muted, (中文(简体) ), --c-surface, (中文(简体) ), --c-surface-active, (中文(简体) ), --c-primary, (中文(简体) ), --c-on-primary, (中文(简体) ), --c-primary-hover, (中文(简体) ), --c-primary-active, (中文(简体) ),
--c-disabled-text, (中文(简体) ), --c-disabled-border, (中文(简体) ), --c-error, (中文(简体) ), --c-success, (中文(简体) ), --c-warning, (中文(简体) ), --c-info, (中文(简体) ), --c-focus, (中文(简体) ), --c-scrollbar-thumb, (中文(简体) ), --c-scrollbar-track每个组件都读取. 黑暗是每个应用程序的选入: 无
应用程序下面的属性是轻而易举的,和以前一样.
应用程序在文件导入主题时选择一条行(App/theme.js),将模式设置在 <html>数字 :
import '@carissa-io/theme-default/css'
document.documentElement.dataset.mode = 'auto' // 'auto' | 'dark' | 'light'
data-mode 打开 <html> | 结果 |
|---|---|
| 无 | 光线 |
light | 光线 |
dark | 阴暗 |
auto | 光和黑暗,而系统要求它(prefers-color-scheme: dark(中文(简体) ) |
color-scheme 遵循模式,所以本地控件和滚动条匹配。 为避免错误模式的闪出,将属性设置在
第一个油漆:把这个放进 <head> 页面中,样式表之前,可选择应用程序记得(此处输入) localStorage:
<script>
try {
document.documentElement.dataset.mode = localStorage.getItem('mode') || 'auto'
} catch {
document.documentElement.dataset.mode = 'auto'
}
</script>
上面的萨斯符号保持静止 光线 数值(对Sass消费者而言);暗值在 scss/_modes.scss页面背景和
文本颜色是应用程序的: give body background: var(--c-background); color: var(--c-text)。 。 。 .
滚动栏
主题样式为每个滚动容器,任何组件不变:页面(视图栏如下)、信件列表、表格
包装、模式和抽屉、选择、组合框和列表框弹出、边栏和代码块。 两个调色板角色
--c-scrollbar-thumb 财务报告和审定财务报表 --c-scrollbar-track 跟着 data-mode。 。 。 .
- Chrome, Edge, Safari 等 Blink / WebKit 浏览器 获得一个 8px 条(
$scrollbar-size带有 平方拇指 (单位:千美元)$scrollbar-radius, (中文(简体) ), 共享$radius,所以一个有圆角的主题 得到一个圆拇指)和 无箭头按钮,与*::-webkit-scrollbar伪入分. 标准scrollbar-color财务报告和审定财务报表scrollbar-width故意不在那里使用:来自Chrome 121 它们将栏切换为标准化渲染(圆指指,箭头可以保留)并让伪元素被忽略. - 火花 没有这样的伪元素,所以它获得标准属性(
scrollbar-color打开:root, (中文(简体) ),scrollbar-width: thin从$scrollbar-width打开*),有同一种角色的颜色. 它们的形状不能被样式化:拇指端部不是正方形. - 旧的引擎保留着本地酒吧.
所有规则都有零或接近零的特异性(* 财务报告和审定财务报表 *::-webkit-scrollbar...),所以任何组件规则或你自己的规则都胜过它们
木马已经隐藏了自己的酒吧.
为了改变你的主题,设定 $scrollbar-thumb, (中文(简体) ), $scrollbar-track, (中文(简体) ), $scrollbar-size, (中文(简体) ), $scrollbar-radius 财务报告和审定财务报表 $scrollbar-width 内
scss/_tokens.scss (以及两个角色在 scss/_modes.scss; 拇指保持为 3:1 或 3: 1 以上 与赛道对并反
还有背景 默认音轨是页面背景,所以在一个表面颜色的容器(侧边栏,一张卡片)内,它显示为条条
页面颜色; 倾向于更安静的主题 $scrollbar-track 到它的表面值。 一个只需要一个卷轴的应用程序
不同的覆盖 ::-webkit-scrollbar-thumb (和 scrollbar-color 用于Firefox)的元素. 见 设计 对于数值和限度.
键
调色板和每个组件共享的值是 Sass 变量,位于 scss/_tokens.scss,唯一的来源
主题的值( e)scss/index.scss 读他们与 @use 'tokens' as *) (中文(简体) ). 文件不发布 CSS, 所以应用程序可以读取
值不带任何规则。 这些名字是 公共符号 API: 重命名或删除一个是中断
变化.
@use '@carissa-io/theme-default/scss/tokens' as theme;
| 脚本 | 数值 | 使用 |
|---|---|---|
$black | #000 | 主要、徘徊和聚焦 |
$white | #fff | 表面 |
$text | #171717 | 正文文本 |
$muted | #666666 | 标签、字段边框、占位符 |
$surface | #f5f5f5 | 悬浮地表, 已禁用的背景 |
$surface-active | #e5e5e5 | 按住表面, 分隔符 |
$primary-hover | #262626 | 悬浮上的主要动作 |
$primary-active | #404040 | 按下主动作 |
$disabled-text | #a3a3a3 | 禁用文本和标记 |
$disabled-border | #d4d4d4 | 已禁用边框 |
$error | #dc3545 | 错误文本和边框 |
$success | #15803d | 成功口音和图标( Alert) |
$warning | #a16207 | 警告口音和图标( Alert) |
$info | #1d4ed8 | 信息口音和图标( Alert) |
$scrollbar-thumb | #737373 | 滚动条拇指 |
$scrollbar-track | $white | 滚动条音轨( 页面地面) |
$scrollbar-width | thin | 使用标准属性的滚动条厚度( Firefox) |
$scrollbar-size | 0.5rem | 在 Blink 和 WebKit 中滚动条厚度 |
$scrollbar-radius | $radius | blink 和 WebKit 中滚动条拇指半径( 这里的平方) |
$font-family | 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif | 类型堆栈 |
$font-family-mono | ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace | 系统数据和代码的单空间堆栈 |
$radius | 0 | 角半径 |
$min-height | 2.75rem | 触摸目标 |
$focus-color | $black | 焦点颜色 |
$focus-width | 1px | 焦点环宽度 |
$transition-duration | 0.2s | 颜色和边框过渡 |
$motion-duration-short | 0.25s | 快速出入口和小动作(scramble 解决,其中四个人做 typewriter 光标闪烁) |
$motion-duration-medium | 0.5s | 默认入口( e)animate)和 highlight-sweep |
$motion-duration-long | 0.9s | 计数counter),揭示和其他慢动作 |
$motion-easing | cubic-bezier(0.16, 1, 0.3, 1) | 运动元件的减速放松 |
$motion-stagger | 0.15s | a项之间的差额 sequence 或一个 stagger-list |
$label-font-size | 0.6875rem | 字段标签大小 |
$label-font-weight | 700 | 字段标签重量 |
$label-letter-spacing | 0.1em | 字段标签跟踪 |
$font-size-display | 3.5rem | Heading 显示 |
$font-size-h1 | 2.5rem | Heading 1个 |
$font-size-h2 | 1.75rem | Heading 2个 |
$font-size-h3 | 1.25rem | Heading 3个 |
$font-size-h4 | 1.125rem | Heading 页:1 |
$font-size-h5 | 1rem | Heading 页:1 |
$font-size-h6 | 0.875rem | Heading 6, (简体中文), Text 单 |
$font-size-lead | 1.25rem | Text 牵头 |
$font-size-body | 1rem | 文本,以及每个字段和选项的文本( 16px) |
$font-size-small | 0.875rem | Text 小数 |
$font-size-caption | 0.75rem | Text 标题 |
$font-size-overline | $label-font-size | Text 上线 |
$font-weight-regular | 400 | 正文文本 |
$font-weight-bold | 700 | 标题来自 h3选项 |
$font-weight-black | 900 | display, (中文(简体) ), h1 财务报告和审定财务报表 h2 |
$line-height-tight | 1.3 | h3 财务报告和审定财务报表 h4 |
$line-height-normal | 1.5 | 正在运行的文本 |
$arrow-size | 1rem | 放下箭头大小 |
$arrow-offset | 0.75rem | 放下箭头设置 |
$arrow-color | $muted | 放下箭头颜色 |
$arrow-color-active | $black | 悬空时放下箭头 |
$arrow-color-disabled | $disabled-text | 禁用时放下箭头 |
$arrow-transition | rotate 财务报告和审定财务报表 color, (中文(简体) ), $transition-duration | 放下箭头运动 |
$arrow-rotate-open | 180deg | 打开时放下箭头旋转 |
建议应用: 从符号配置出 Bootstrap, 因此应用程序和 Carissa 组件共享一个调色板 .
需求 sass-embedded (或 sass)和一个捆绑商,其Sass进口商尊重包件 exports (声音有):
@use '@carissa-io/theme-default/scss/tokens' as theme;
@use 'bootstrap/scss/bootstrap' with (
$primary: theme.$black,
$font-family-sans-serif: theme.$font-family,
$body-bg: theme.$surface
);
在捆绑机外面,放 node_modules 在 Sass 负载路径上 (sass --load-path=node_modules) (中文(简体) ).
每个主题Repo都有自己的代号,同名同名. 切换主题表示相同 @use 路径与另一个软件包
名称( e)@carissa-io/theme-<name>/scss/tokens) (中文(简体) ). 不定义一个符号的主题不能使用期望的代码
它: 对照主题检查名称 scss/_tokens.scss 在你交换之前.
它的配置
components-input, (中文(简体) ), -button, (中文(简体) ), -checkbox, (中文(简体) ), -switch, (中文(简体) ), -radio-group, (中文(简体) ), -slider, (中文(简体) ), -popover, (中文(简体) ), -listbox, (中文(简体) ), -select, (中文(简体) ),
-combobox, (中文(简体) ), -upload, (中文(简体) ), -calendar, (中文(简体) ), -date-picker, (中文(简体) ), -search, (中文(简体) ), -typography, (中文(简体) ), -card, (中文(简体) ), -alert, (中文(简体) ), -spinner, (中文(简体) ), -modal, (中文(简体) ), -toast, (中文(简体) ), -divider, (中文(简体) ), -badge, (中文(简体) ), -tag, (中文(简体) ), -link, (中文(简体) ), -avatar, (中文(简体) ), -skeleton, (中文(简体) ), -progress, (中文(简体) ), -tooltip, (中文(简体) ), -prose, (中文(简体) ), -tabs, (中文(简体) ), -accordion, (中文(简体) ), -breadcrumb, (中文(简体) ), -pagination, (中文(简体) ), -stepper, (中文(简体) ), -sidebar, (中文(简体) ), -navbar, (中文(简体) ), -drawer, (中文(简体) ), -menu, (中文(简体) ), -table, (中文(简体) ), -list, (中文(简体) ), -description-list, (中文(简体) ), -stat, (中文(简体) ), -empty-state, (中文(简体) ), -timeline, (中文(简体) ), -tree, (中文(简体) ), -code, (中文(简体) ), -field, (中文(简体) ), -number-input, (中文(简体) ), -otp-input, (中文(简体) ), -phone, (中文(简体) ), -tag-input, (中文(简体) ), -time-picker, (中文(简体) ), -date-range, (中文(简体) ), -rating, (中文(简体) ), -color-picker, (中文(简体) ), -async-autocomplete, (中文(简体) ), -section, (中文(简体) ), -faq, (中文(简体) ), -carousel, (中文(简体) ), -visually-hidden, (中文(简体) ), -live-region, (中文(简体) ), -theme-switch, (中文(简体) ), -icon, (中文(简体) ), -ai-label, (中文(简体) ), -thinking-indicator, (中文(简体) ), -streaming-text, (中文(简体) ), -message, (中文(简体) ), -message-list, (中文(简体) ), -prompt-input, (中文(简体) ), -suggested-prompts, (中文(简体) ), -message-actions, (中文(简体) ), -animate, (中文(简体) ), -sequence, (中文(简体) ), -typewriter, (中文(简体) ), -scramble, (中文(简体) ), -counter, (中文(简体) ), -highlight-sweep, (中文(简体) ), -ticker, (中文(简体) ), -stagger-list, (中文(简体) ), -demo, (中文(简体) ), -feature-card 财务报告和审定财务报表 -device-frame。 。 。 . components-email, (中文(简体) ), -password, (中文(简体) ), -url 财务报告和审定财务报表 -textarea
通过输入样式.
复选框的混合状态( N)indeterminate,从下一个 components-checkbox 释放, 类 c-checkbox--indeterminate)是带有10px破折号的选中框 --c-on-primary;在一个更古老的复选框上,规则只是没有使用.
更改一个值
调色板和每个组件共享的值( 分数、 半径、 最小高度、 焦点环、 过渡、 标签样式、 下移)
箭头)是 scss/_tokens.scss (单位:千美元) 符号));每个部分有一个 @use ... with (...) 块覆盖
见下文。 更改值, 运行 npm run build,并更新 设计 如果决定改变.
开发
npm install
npm run lint # compile, fail on any Sass error or warning
npm test # builds, then checks every component root has rules and dist/ is current
npm run build # dist/index.css
dist/ 它不是犯法的,它是在每次出版之前建造的。 货船 dist, (中文(简体) ), scss 财务报告和审定财务报表 DESIGN.md。释放
遵循 Carissa 项目规则: 分支和拉取请求,当版本打开时 CI 发布 main 这是新的.