Aurea基金会——什么是象征,什么不是
官方回答是"哪个轴控制了这个值".
计数活在 STATE.md,生成和
检查。 这个文件有规矩.
斧头
| 轴 | 键 | 单位 | 页:1 |
|---|---|---|---|
| 颜色 | --<semantic>, (中文(简体) ), --<family>-<step> | oklch / 十六进制 | 语义符号是第一位的;坡道步骤是用来建造语义符号,而不是直接使用 |
| 空间 | --space-0 . --space-24 | 对 | 缩略图故意跳过值——不是每个整数都存在 |
| 类型大小 | --text-xs . --text-7xl | 对 | |
| 类型家庭 | --font-ui, (中文(简体) ), --font-heading, (中文(简体) ), --font-editorial, (中文(简体) ), --font-code | —— 说 | Inter / Sora (每个h1到h6) / Inter (化名, 在 1.0 中去除) / IBM Plex Mono |
| 类型重量 | --weight-regular . --weight-extrabold | 编号 | |
| 线高 | --leading-none . --leading-relaxed | 编号 | --leading-none 对于HEGHT是合同组成部分的组件存在 |
| 字母间隔 | --tracking-tight . --tracking-widest | 计划 | |
| 半径 | --radius-xs . --radius-card, (中文(简体) ), --radius-sheet, (中文(简体) ), --radius-control | ưμ㼯a | --radius-card (22页x), --radius-sheet (32px,从下起起的表)和 --radius-control (999px)是身份——检查 |
| 边框 | --border-width | ưμ㼯a | |
| 阴影 | --shadow-sm, (中文(简体) ), --shadow-md, (中文(简体) ), --shadow-lg | 阴影 | |
| 层 | --z-sticky . --z-toast | 编号 | 因为叠叠叠。 当地人 z-index: 1/2/3 组件内不是此轴 |
| 动议 | --duration-*, (中文(简体) ), --ease-* | 持续时间/ 曲线 | |
| 图标大小 | --icon-sm . --icon-xl | 对 | 以雷姆为单位,所以文字跟随文字 |
| 触摸目标 | --target-min | 对 | 44px带有16px根-WCAG 2.5/2.5.8 |
| 断点 | --breakpoint-2xs . --breakpoint-2xl | ưμ㼯a | @media 无法读取 var(),因此CSS重复每个断点 em (它跟随浏览器的字体大小)和一个建置检查守护大小 |
| 密度 | 见下文 | 对 |
这些轴上的新值来自一个符号. 核心中的原始值为每 轴对基线:计数可能会下降,永远不会上升.
密度合同-实际变化
data-density="compact | comfortable | spacious" 变动 十一岁 标志,只有那些:
--control-h-xs, (中文(简体) ), --control-h-sm, (中文(简体) ), --control-h-md, (中文(简体) ), --control-h-lg, (中文(简体) ), --control-h-xl, (中文(简体) ),
--touch-control-h-sm, (中文(简体) ), --touch-control-h-md, (中文(简体) ), --touch-control-h-lg (当地人的控制高度)
触摸目标, --row-h, (中文(简体) ), --card-pad, (中文(简体) ), --section-gap。 。 。 .
换言之:密度变化 控制高度、 表格行高、 加卡和空格 节次。 。 。 .
没错 没有 更改, 目的: 类型大小、 一般空间尺度、 排版缺口、 弧度、 图标大小 或线高. 密度是指控件的相距有多近,而不是第二个类型尺度.
每一个控制者都必须从 --control-h-*。 。 。 . tests/visual/geometry.spec.ts 检查这个.
主题合同——和不对称,目的
data-theme="dark | light"暗是底;光会覆盖它.
两个主题是: 没有 完全对称,这是例外: 光能覆盖三种颜色
底值为暗叶- warning-500, (中文(简体) ), oracle-300 财务报告和审定财务报表 oracle-400。在暗处没有未定义的内容:
这些符号继承了基础值, 所以没有缺少值 .
特性在主题之间没有变化:主要黄色是 oklch(0.795 0.184 86.047) 两者,以及
建造失败了 不仅在符号名称上.
单位: 所有应该遵循文本的内容的雷姆
类型、空间、图标大小、控制高度、侧边栏宽度和上边栏高 对这样一个人谁 扩展浏览器的文本得到更大的控制而不是被剪接的文本(WCAG 1.4.4). 转换 从 px( px-% 16) 完全正确, 因此默认根大小没有移动 .
Radii 留在这 ưμ㼯a:角是一个物理形状,而不是文字,用文字来缩放 胶囊停止做胶囊.
没人用过
并非每个符号都被核心引用. 这不是自动浪费:
| 组 | 为什么它存在 |
|---|---|
--breakpoint-* | @media 无法读取 var()。CSS 重复数字 和一个建置检查 守门员对天平 |
--oracle-* | 仅由 apps/docs/docs.css。 。 。 . oracle 是应用程序的词汇,而不是系统词汇,它们随网页一起消失 |
| 斜坡阶梯 | 语义学家族的中间步骤, 保存这样一个消费者可以构建一个变体 |
规则: 符号来自一种用途,而不是一个看起来完整的尺度。 没用的托克 任何地方都被删除,需要的东西被创造出来.
重复是参考文献,而不是副本 : --radius-full 实值 {radius-control},所以这两个名字不能
分别. 手书上写着相同号码的两道道道具 在其中之一调整的那天就不同了.
连锁店
packages/core/dist/aurea.css 将符号包起来 财务报告和审定财务报表 cSS 中组件 @layer aurea编辑
消费者自己的CSS,没有一层的写出,无论选择者的特殊性如何,都胜过库.
没有 !important没有特定的狩猎.
道具坐于地层以内,与地心并出而外出. 自定义属性
声明 和任何其他人一样在级联中竞争: :root 覆盖
核心在媒体查询中声明损失到基准值,侧边栏跳出48px。 应用程序
重新定义一个没有层次的符号 :root 仍然胜过两者.