发布

Radix Themes 的发布版本及其更新日志。

3.1.3

• 支持非受控 Checkbox 组件的不确定状态指示器

3.1.2

• 为 Grid 组件添加 areas 属性，并为所有布局组件（Box、Container、Flex、Grid、Section）添加 gridArea 属性
• 为 DataList 组件添加 overflow-wrap: anywhere 样式，以便长值（例如 ID）可以换行
• 支持不确定状态的 Checkbox 组件的不确定状态指示器

3.1.1

• 升级 Radix Primitives

3.1.0

• 支持 React 19
• 升级所有 Radix Primitives

3.0.5

• 为 AlertDialog.Content 和 Dialog.Content 添加 align、height、minHeight 和 maxHeight 属性

3.0.4

• 修复了 Radix Themes 包由于内部循环依赖而无法与 webpack 打包的问题
• 支持 Progress 组件的 max 属性

3.0.3

• 修复了主题 grayColor 设置在与显式的 appearance="light" 或 appearance="dark" 值组合使用时无效的问题
• 修复了当使用显式的 color 值时，Link 会自动使用高对比度颜色的回归问题。
• 修复了当 Link 嵌套在灰色文本中时，不会使用正确的文本选择和焦点颜色的回归问题。
• 调整了 Link 点击高亮样式
• 调整了 CheckboxGroup.Item 和 RadioGroup.Item，以便可以实现文本溢出截断的布局
• 从组件中删除了不必要的 data-accent-color 属性，因为它在那里没有实际效果。
• 重构了 color 属性定义的内部结构。
• 重构了 TextField 和 TextArea 的自动填充和禁用颜色
• 为 Spinner 组件添加了一个内部的 --spinner-animation-duration CSS 变量

3.0.2

• 从 CSS 中删除了不必要的浏览器前缀，减少了 17 KB 的捆绑包大小
• 修复了当 Link 嵌套在彩色文本中时，不会自动使用高对比度颜色的回归问题。
• 修复了当 Link 渲染为 button 时，不显示悬停样式的回归问题
• 修复了 TextArea 在 Firefox 中不保留空格序列的回归问题

3.0.1

• 修复了重置样式表中的语法错误
• 修复了 Safari 中 Checkbox size="1" 指示器复选标记对齐问题
• 修复了 Safari 中 Checkbox 和 Radio 的禁用光标样式不起作用的问题

3.0.0

升级指南

此版本引入了一些破坏性更改。请按照以下步骤进行升级。

通用

• 多部分组件现在不再导出命名部分。请改用点表示法，该表示法已修改为可与 React 服务端组件一起使用。例如
  • DialogRoot → Dialog.Root
  • DialogTrigger → Dialog.Trigger
  • DialogContent → Dialog.Content
  • …所有多部分组件都依此类推
    • AlertDialog
    • Callout
    • ContextMenu
    • Dialog
    • DropdownMenu
    • HoverCard
    • Popover
    • RadioGroup
    • Select
    • Table
    • Tabs
    • TextField
• 包内部结构（如属性定义和辅助函数）不再可从根 @radix-ui/themes 导入入口点获得。
  • 请改为从 @radix-ui/themes/props 和 @radix-ui/themes/helpers 导入它们。

属性

• 布局组件上的 width 和 height 属性不再映射到空间比例。请查找并替换您的 width 和 height 属性用法，并使用相应的 空间比例 步骤
  • width="1" → width="4px"
  • width="2" → width="8px"
  • width="3" → width="12px"
  • width="4" → width="16px"
  • width="5" → width="24px"
  • width="6" → width="32px"
  • width="7" → width="40px"
  • width="8" → width="48px"
  • width="9" → width="64px"
  • …height 也依此类推
  • 确保也更新响应式对象语法
  • 您也可以使用 var(--space-1) 到 var(--space-9) 代替硬编码值。
• 布局组件上的 shrink 和 grow 属性已重命名
  • shrink → flexShrink
  • grow → flexGrow

颜色

如果您为自定义组件使用了以下令牌，请确保替换相应的引用。

• --color-surface-accent → --accent-surface
• 对比色已重命名
  • --accent-9-contrast → --accent-contrast
  • --red-9-contrast → --red-contrast
  • --pink-9-contrast → --pink-contrast
  • --blue-9-contrast → --blue-contrast
  • …所有色阶都依此类推
• 添加了新的焦点颜色色阶。重命名以下令牌
  • --color-autofill-root → --focus-a3
  • --color-focus-root → --focus-8
  • --color-selection-root → --focus-a5
• --gray-2-translucent 和相应的淡灰色颜色已移除。
  • 请改用 --color-panel-translucent 并结合背景模糊滤镜。

组件

• AlertDialog, Dialog 现在在 Content 部分默认具有 maxWidth="600px"。
  • 这比之前的 580px 值稍大。如果您使用的对话框需要不同的宽度，请使用您自己的值覆盖 maxWidth。
• Badge 有一个新的 size="3"，size="2" 现在小得多，并且 size="1" 尺寸已调整
  • 将您的 size="2" 用法替换为 size="3"
• Card 内部 HTML 结构和样式已重构，现在渲染单个 HTML 节点。如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
  • 如果您需要在 ghost 以外的变体上覆盖 Card 的背景颜色，请使用 --card-background-color 变量，而不是直接分配 background-color，或者在嵌套为 Card 第一个子元素的 <Inset p="current"> 元素上设置背景颜色。
  • 检查使用 asChild 或由父组件 asChild'ed 的 Card 实例。（链接或按钮卡片没有任何额外样式的常见情况将按预期工作）。
• HoverCard 和 Popover 现在在 Content 部分默认具有 maxWidth="480px"。
  • 如果您使用的弹出框和悬停卡片需要更宽的宽度，请使用您自己的值覆盖 maxWidth。
• RadioGroup 内部 HTML 结构和样式已重构，现在设计为在将 children 传递给 Item 部分时显示可选的文本标签。Root 部分现在还提供 flex 列样式和间距。
  • 如果您需要更底层的控制，可以使用 Radio 组件代替
• Section 有一个新的 size="3"
  • 将所有使用 size="3" 的 Section 更新为 size="4"
• Tabs 底层的字母/单词间距 CSS 变量已重命名，以支持 Tabs 和 TabNav 组件。如果您正在使用它们，请将它们重命名为新值
  • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
  • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
  • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
  • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
• TextField 现在只有 2 个部分：Root 和 Slot，删除了 Input 部分，并简化了属性的转发方式。
  • 所有 不带 TextField.Root 使用的 TextField.Input 部分应重命名为 TextField.Root
  • 所有 在 TextField.Root 中使用的 TextField.Input 部分应删除，其属性应直接放在 TextField.Root 部分上
  • 所有放置在 TextField.Input 右侧的 TextField.Slot 部分将需要 side="right" 属性。但是，当在一个 TextField 中使用两个插槽时，例如左侧一个插槽，右侧另一个插槽，则无需调整。在这种情况下，插槽将自动放置在不同的侧面。
  • 如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
• Theme 不再自动设置 body 背景颜色。背景颜色现在默认由根 Theme 提供。CSS 变量 --color-page-background 不再可用。
  • 在大多数情况下，它可以安全地替换为 .radix-themes 元素上可用的 --color-background。
• Tooltip 现在在 Content 部分默认具有 maxWidth="360px"。
  • 如果您使用的工具提示需要更宽的宽度，请使用您自己的值覆盖 maxWidth。

完整更新日志

• 通用
  • 包结构
    • 改进 ESM 兼容性
    • 改进单个组件部分的 tree-shaking
    • [破坏性更改] 删除多部分组件的命名导出
      • 注意：我们的新方法允许点表示法在服务端组件中也能可靠地工作
    • [Breaking] 从根 @radix-ui/themes 导入入口点中移除组件 prop 定义和内部 helpers，并将它们从 @radix-ui/themes/props 和 @radix-ui/themes/helpers 导出，以便可以使用相同的技术在 Radix Themes 之上构建您自己的组件库。
    • 为包添加通配符入口点，以便在您拥有无法支持现代模块解析规则的复杂工具链设置时，允许直接访问包内部作为应急方案
    • 为高级用例添加额外的 CSS 文件导出
      • 导出单独的 tokens.css、components.css 和 utilities.css 文件，以防您需要对 CSS 优先级进行细粒度控制。例如，这允许在您自己的 CSS 之后导入 Radix Themes 的 utilities.css，以及在此之前导入所有其他内容。
      • 除了上述内容，您还可以自定义要导入的颜色。除了导入 tokens.css 之外，您还可以导入 tokens/base.css 和 tokens/colors/*.css，其中 * 对应于您的项目中需要的强调色和灰色名称。
      • 导出仅包含布局组件（Box、Flex、Grid、Container、Section）样式的 layout.css。还提供单独的导出 layout/tokens.css、layout/components.css 和 layout/utilities.css 以支持上述用例。
  • 属性
    • 向所有布局组件添加以下 props
      • minWidth、maxWidth
      • minHeight、maxHeight
      • flexBasis、flexShrink、flexGrow
      • gridColumn、gridColumnStart、gridColumnEnd
      • gridRow、gridRowStart、gridRowEnd
      • overflow、overflowX、overflowY
    • 重做所有布局 props 以允许任意 CSS 值，包括与响应式对象语法一起使用时。支持任意值的 Props 包括
      • width、minWidth、maxWidth
      • height、minHeight、maxHeight
      • m、mx、my、mt、mr、mb、ml
      • p、px、py、pt、pr、pb、pl
      • inset、top、right、bottom、left
      • gap、gapX、gapY
      • flexBasis、flexShrink、flexGrow
      • gridColumn、gridColumnStart、gridColumnEnd
      • gridRow、gridRowStart、gridRowEnd
    • [Breaking] width 和 height props 不再映射到空间比例。这是因为在绝大多数情况下，width 和 height 未设置为空间比例，因此，空间比例作为 IDE 自动完成建议感觉奇怪/具有误导性。
    • [Breaking] 将 shrink 和 grow props 重命名为 flexShrink 和 flexGrow
    • 更新布局 props 的类型签名，以便在可能的情况下，代码编辑器建议仅使用空间比例值。CSS 关键字和其他值（例如 "auto" 或 "100vw"）仍然可以作为手动字符串值使用。
    • 使用 JSDoc 记录所有布局 props
    • 修复了当使用不带 initial 键的断点对象时，响应式 props 不会应用默认 prop 值的问题
    • 从从原生 HTML 元素继承它们的组件中删除原生 color、defaultValue 和 defaultChecked 属性，以避免与其自定义实现混淆
    • [Breaking] 重做所有组件和部件上 asChild prop 的可用性
  • 颜色
    • 确保 highContrast 文本颜色在嵌套在接受强调色的其他组件中时一致地工作
    • 调整所有 variant="soft" 菜单项的背景颜色
    • [Breaking] 将 --color-surface-accent 重命名为 --accent-surface
    • [Breaking] 重命名 --accent-9-contrast、--red-9-contrast、--pink-9-contrast、--blue-9-contrast 等为 --accent-contrast、--red-contrast、--pink-contrast、--blue-contrast 等等。
    • 删除 --gray-2-translucent 和相应的淡灰色
    • 调整 --color-surface 和 --color-panel-translucent 值
    • [Breaking] 将 --color-focus-root、--color-selection-root、--color-autofill-root 替换为焦点颜色比例，例如 --focus-1 – --focus-12 和 --focus-a1 – --focus-a12。
  • 其他
    • 加快大多数动画的速度
    • 确保所有具有 padding 或 border 样式的元素都使用 box-sizing: border-box
    • 确保正确应用禁用的光标样式
    • 为半透明面板添加模糊背景滤镜效果
• 11 个新组件
  • DataList
    • 用于将文本数据作为键值对显示的组件。部件
      • Root
      • Item
      • Label
      • Value
  • CheckboxGroup
    • 带可选文本标签和漫游焦点的复选框组。部件
      • Root
      • Item
  • CheckboxCards
    • 交互式卡片组件，用于从列表中选择一个或多个值。部件
      • Root
      • Item
  • Progress
    • 指示任务完成进度的进度条组件。
  • Radio
    • 用于使用单选输入构建您自己的布局的独立元素。
  • RadioCards
    • 交互式卡片组件，用于从列表中选择一个值。部件
      • Root
      • Item
  • Reset
    • 重置任何原生 HTML 元素样式的组件。
  • SegmentedControl
    • 用于从多个选项中选择单个选项以及控制类似标签页界面的组件
  • Skeleton
    • 可以包裹任何 UI 元素并将其转换为加载骨架的组件。也可以使用 loading prop 有条件地渲染自身或 React Fragment。
  • Spinner
    • 加载微调器组件。与 Skeleton 类似，它也可以包裹任何 UI 元素，并使用条件 loading prop 显示自身。
  • TabNav
    • 与 Tabs 等效，但用于页面导航。渲染常规链接并支持漫游焦点。部件
      • Root
      • Link
• AlertDialog, Dialog
  • 添加 position: relative 以支持绝对定位的子元素。
  • 向 Content 部件添加 width、minWidth、maxWidth props。
  • 默认在 Content 部件上设置 maxWidth="600px"。
  • 重做滚动容器，以便它在视口上显示滚动条，而不是局限于对话框 Content 部件。如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
• Badge
  • 删除 user-select: none
  • [Breaking] 添加 size="3"，使 size="2" 更小，调整 size="1" 尺寸
• Blockquote, Code, Em, Heading, Quote, Link, Strong, Text
  • 添加新的 wrap 和 truncate props，用于控制文本是否换行以及是否使用省略号截断
• Card
  • 重做内部 HTML 结构和样式。此组件现在渲染单个 HTML 节点。如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
• Code
  • variant="ghost" 颜色现在的工作方式与 Text 类似，除非使用 color prop 显式设置，否则会继承颜色
• Container
  • 添加 align prop 以控制容器内容是左对齐、居中对齐还是右对齐
  • [Breaking] 将 display="block" 值更改为 display="initial"（前一个值已损坏）
• ContextMenu, DropdownMenu
  • 为 CheckboxItem 和 RadioItem 部件添加 color prop
• Checkbox, RadioGroup, Switch
  • 重做内部 HTML 结构和样式。这些组件现在渲染更少的 HTML 节点，并将所有 props 转发到最顶层节点。如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
• DropdownMenu
  • 当 Content 部件使用 variant="soft" 时，为突出显示的项目使用更亮的文本颜色
  • 添加一个可选的 TriggerIcon 部件，用于渲染向下箭头指示器
• Box, Flex, Grid
  • 添加对 as prop 的支持，以渲染为 span 或 div
  • 对于 Box，无论标签是什么，现在都强制执行 display: block 样式
• Button, IconButton
  • 添加新的 loading prop
• Flex
  • 添加 gapX 和 gapY props
• HoverCard, Popover
  • 添加 position: relative 以支持绝对定位的子元素。
  • 向 Content 部件添加 width、minWidth、maxWidth、height、minHeight、maxHeight props。
  • 默认在 Content 部件上设置 maxWidth="480px"。
• RadioGroup
  • [Breaking] 重做内部 HTML 结构和样式。此组件现在设计为在将 children 传递给 Item 部件时显示可选的文本标签，并且 Root 部件现在提供 flex 列样式和间距。
• Section
  • [Breaking] 将 display="block" 值更改为 display="initial"（前一个值已损坏）
  • [Breaking] 对 size="3" 使用新值，对 size="4" 使用先前的值
• Select
  • 确保 Trigger 字体粗细不被继承，例如从包装 <label> 元素继承
• Separator
  • 允许 orientation prop 的响应式值
• ScrollArea
  • 修复了当父级的自动高度通知时，滚动区域无法拉伸到 100% 高度的问题
• Slider
  • 更改边界框的大小以匹配 Slider 轨道的大小
  • 将 flex-shrink: 0 替换为 flex-grow: 1 和 width: stretch / height: stretch，以允许滑块元素在布局中更直观地伸缩。
  • 修复 Safari 中过度热情的焦点轮廓
• Table
  • 添加新的 layout prop 以控制 table-layout 样式属性
  • 使 TableCell 部件上的 width prop 类型签名和实现与布局组件上重做的 width prop 对齐
  • 向 TableCell 部件添加 minWidth 和 maxWidth props
• Tabs:
  • 向 TabsList 添加 color 和 highContrast props
  • 添加 margin props TabsList 和 TabsContent
  • 重命名 .radix-themes 中的字母/单词间距 CSS 变量，以便它同时支持 Tabs 和 TabNav 组件。
    • --tabs-trigger-active-letter-spacing → --tab-active-letter-spacing
    • --tabs-trigger-active-word-spacing → --tab-active-word-spacing
    • --tabs-trigger-inactive-letter-spacing → --tab-inactive-letter-spacing
    • --tabs-trigger-inactive-word-spacing → --tab-inactive-word-spacing
• TextArea
  • 添加 radius prop
  • 添加 resize prop
  • 修复 Grammarly 扩展程序会破坏组件样式的问题
  • 确保字体粗细不被继承，例如从包装 <label> 元素继承
  • 重做内部 HTML 结构和样式。如果您依赖于任何实现怪癖来覆盖样式或行为，请确保您的代码按预期工作。
• TextField
  • [Breaking] 删除 Input 部件以简化 props 的转发方式，并重做内部 HTML 结构和样式。
  • 修复某些输入 type 不支持 getSelectionRange 的问题
  • 修复 Grammarly 扩展程序会破坏组件样式的问题
  • 确保字体粗细不被继承，例如从包装 <label> 元素继承
• ThemePanel
  • 更改切换 Theme Panel 的热键为 "T" 键按下，深色模式为 "D" 键按下（不带修饰键）。
• 主题
  • 在根 Theme 组件上设置 min-height: 100vh
  • 修复了在某些情况下，hasBackground prop 值不起作用的问题
  • 改进 Theme 默认具有背景颜色的逻辑。Theme 在没有显式 hasBackground prop 的情况下将显示背景颜色
    • 当它是根 Theme 组件时
    • 当它具有显式外观值时，例如 <Theme apperance="light"> 或 <Theme apperance="dark">
  • 不再自动设置 Body 背景颜色。背景颜色现在默认由根 Theme 提供。
    • [Breaking] CSS 变量 --color-page-background 不再可用。
    • html 上的 suppressHydrationWarning 不再需要（除非其他库需要，例如 next-themes）
  • 使用 JSDoc 记录所有 Theme props
• Tooltip
  • 添加 width、minWidth、maxWidth props。
  • 默认在 tooltip 内容上设置 maxWidth="360px"
  • 将默认延迟时间更改为 200 毫秒

2.0.2

• 修复了 Chrome 在 Radix Themes 样式表上使用 CSS 检查器时有时会崩溃的问题。

2.0.1

• Card
  • 修复了在不支持 color-mix 的浏览器中，variant="surface" 边框颜色可能会消失的问题。
  • 调整 variant="surface" 边框颜色。
• Code
  • 当在 Link 中使用 variant="ghost" 时，确保 Link 上的 underline="hover" 得到尊重。
• TextField
  • 改进常见字体的垂直文本对齐。
  • 当输入被禁用时，不要应用自动填充强调色。
  • 确保自动填充强调色始终与焦点轮廓颜色配对。

2.0.0

• 通用
  • 合并 CSS 构建中的选择器，从而改善在浏览器中检查元素时的开发者体验。
  • 从 CSS 构建中删除注释。
  • 将 CSS 选择器特异性上限设置为 0,1,0 以用于样式化 HTML 元素，以及 0,1,1 以用于样式化伪元素，从而提高与 Tailwind 的兼容性。
    • [升级指南] 如果您依赖于 Radix Themes 的任何特异性怪癖，请确保您的样式覆盖仍然按预期工作。
  • 重做深色模式颜色，优化浅色模式颜色（通过 Radix Colors 3.0.0）。
    • 修复过度饱和的透明灰色。
    • [升级指南] 如果您正在为自定义样式使用颜色 tokens，请确保您的设计看起来符合预期。
    • [升级指南] 如果您正在覆盖某些颜色，请确保您的覆盖与新的颜色比例协调一致。
  • 重做透明黑色和白色颜色比例。
    • [升级指南] 如果您正在为自定义样式使用透明黑色和白色颜色比例（--black-a1、--white-a1 等），请务必检查新值并更新所使用的步骤，以使您的设计看起来符合预期
      • 将 --black-a1 更改为 rgba(0, 0, 0, 0.01)。
      • 将 --black-a2 更改为 rgba(0, 0, 0, 0.024)。
      • 将 --black-a3 更改为 --black-a1。
      • 将 --black-a4 更改为 --black-a2。
      • 将 --black-a5 更改为 --black-a2。
      • 将 --black-a6 更改为 --black-a3。
      • 将 --black-a7 更改为 --black-a3 或 --black-a4。
      • 将 --black-a8 更改为 --black-a5。
      • 将 --black-a9 更改为 --black-a6 或 --black-a7。
      • 将 --black-a10 更改为 --black-a7。
      • 将 --black-a11 更改为 --black-a8。
      • 将 --black-a12 更改为 --black-a11。
      • 将 --white-a1 更改为 transparent。
      • 将 --white-a2 更改为 rgba(255, 255, 255, 0.01)。
      • 将 --white-a3 更改为 --white-a1 或 --white-a2。
      • 将 --white-a4 更改为 --white-a2。
      • 将 --white-a5 更改为 --white-a3。
      • 将 --white-a6 更改为 --white-a3 或 --white-a4。
      • 将 --white-a7 更改为 --white-a4。
      • 将 --white-a8 更改为 --white-a5。
      • 更改 --white-a9 为 --white-a6。
      • 更改 --white-a10 为 --white-a7。
      • 更改 --white-a11 为 --white-a9。
      • 更改 --white-a12 为 --white-a11 或 --white-a12。
  • 优化阴影比例。
  • 在大多数 color="gray" 组件上，为焦点环保持主题强调色，类似于文本选择颜色。
  • 更改一些内部组件特定的 CSS 变量以遵循命名模式。
  • 确保 Theme 组件上的强制浅色/深色外观也设置了相应的浏览器颜色，例如正确的输入自动填充背景颜色。
  • 将所有带有 rt- 前缀的 @keyframes 动画重命名为 kebab case 形式。
  • 对于大多数焦点样式，使用 outline 而不是 box-shadow，这避免了 Chrome 浏览器中聚焦元素上轻微的反锯齿问题。
• AlertDialog, Dialog
  • 在对话框内容周围添加内边距，以防止其接触视口边缘。
  • 确保对话框内容在 iOS 上不会溢出视口。
• 头像
  • 不要强制执行回退图标大小。
    • [升级指南] 如果您使用 svg 资源作为回退，请确保手动设置适当的大小。
  • 添加 CSS 变量以控制交互元素的鼠标光标样式
    • --cursor-button: default;
    • --cursor-checkbox: default;
    • --cursor-disabled: not-allowed;
    • --cursor-link: pointer;
    • --cursor-menu-item: default;
    • --cursor-radio: default;
    • --cursor-slider-thumb: default;
    • --cursor-slider-thumb-active: default;
    • --cursor-switch: default;
  • 将 .rt-reset-button 和 .rt-reset-a 类替换为单个 .rt-reset 类。
    • 新的 .rt-reset 类可用于在构建自定义组件时重置 a、button、h1、h2、h3、h4、h5、h6、ol、ul、p 和 pre 标签。
    • [升级指南] 如果您在自定义组件中使用这些类，请更新所使用的类名。
• 引用
  • [重大变更] 移除 trim 属性。
• Button, IconButton
  • 优化和规范禁用状态的外观和感觉。
  • 当 disabled 与 asChild 一起使用时，将禁用样式应用于其他元素
  • 改进浅色和深色模式下不同强调色中 variant="classic" 的外观和感觉。
• Callout
  • 调整布局工作方式，以允许在 Callout.Root 中嵌套多个 Callout.Text 元素
    • [升级指南] 如果您依赖于 Callout.Root 碰巧提供的 flex 属性，请更改您的布局以显式使用 Flex 组件。
  • 修复了一个问题，即除非传递了显式的 color 属性，否则提示框会继承文本颜色。
    • [升级指南] 如果您喜欢之前的外观，请将 highContrast 属性传递给您的提示框，以使文本更深色。
  • 为灰色的 variant="surface" 使用灰色背景。
  • 为 variant="outline" 使用更深的轮廓颜色。
• 复选框
  • [重大变更] 改进布局，以便在 Text 组件中包装复选框时，自动将复选框与文本的第一行对齐。
    • [升级指南] 确保您的带有复选框的布局看起来符合预期。如果不是，请将您的复选框包装在 <Text as="label" size="..."> 中，并使用您喜欢的文本大小。
  • [重大变更] 重做尺寸 – 添加更小的 size="1"，将默认尺寸更改为 size="2"，添加更精细的 size="3"
    • [升级指南] 如果您通过显式的 size 属性使用 size="1" 或 size="2" 复选框，请将它们分别重命名为 size="2" 和 size="3"。
  • 优化 variant="classic" 的外观和感觉。
  • 优化和规范禁用状态的外观和感觉。
• Card
  • 更新 variant="classic" 阴影，使其不会延伸到元素外部。
  • 优化 variant="classic" 的悬停和按下样式。
  • 添加缺少的按下样式。
  • 优化内部阴影的应用方式，使其与组件外部的背景融合。
• Code
  • 当 Code 在 Link 中时，添加交互样式。
  • 修复了一个问题，即 variant="ghost" 字体大小会不一致，具体取决于大小是基于父 Text 元素还是来自代码自身的 size 属性。
  • 对于 variant="outline" 和 variant="surface"，根据字体大小缩放轮廓粗细。
  • 改进 variant="solid" 的 ::selection 背景颜色。
  • 在 .radix-themes 中添加 CSS 变量，用于自定义 Code 变体的内边距，以防默认值与自定义代码字体的垂直度量不兼容。
    • --code-padding-top
    • --code-padding-bottom
• DropdownMenu、ContextMenu
  • 当主题设置为 radius="full" 时，减小边框半径。
  • 优化水平内边距。
  • 优化标签的外观和感觉。
• Grid
  • 修复了嵌套 Grid 组件可能导致后代 Grid 意外继承某些父级样式的错误。
• Inset
  • 添加 clip 属性以控制内容是裁剪到父元素的内边距还是边框。
  • 当 Table 在 Inset 内部时，自动调整表格单元格内边距
• Kbd
  • 调整垂直对齐方式。
• Link
  • 降低下划线颜色的饱和度。
  • 使链接在有颜色的 Heading 元素内自动高对比度（类似于 Text 内的自动高对比度）。
  • 对于 variant="outline" 和 variant="surface"，根据字体大小缩放下划线粗细。
• RadioGroup
  • [重大变更] 改进布局，以便在 Text 组件中包装单选按钮时，自动将单选按钮与文本的第一行对齐。
    • [升级指南] 确保您的带有单选按钮的布局看起来符合预期。如果不是，请将您的单选按钮包装在 <Text as="label" size="..."> 中，并使用您喜欢的文本大小。
  • [重大变更] 重做尺寸 – 添加更小的 size="1"，将默认尺寸更改为 size="2"，添加更精细的 size="3"。
    • [升级指南] 如果您通过显式的 size 属性使用 size="1" 或 size="2" 单选按钮，请将它们分别重命名为 size="2" 和 size="3"。
  • 优化 variant="classic" 的外观和感觉。
  • 优化和规范禁用状态的外观和感觉。
• Select
  • 修复长项目列表中不可见的滚动条。
  • 改进浅色和深色模式下 variant="classic" 的外观和感觉。
  • 当使用 position="popper" 时，将 SelectContent 对齐到触发器的左侧。
  • 优化水平内边距。
  • 优化标签的外观和感觉。
  • 重做 size="3"。
• ScrollArea
  • 升级原始版本，修复上游类型问题。
  • 重命名滚动条边距变量以包含滚动条方向，并在 .radix-themes 上声明它们，以方便更轻松地调整滚动条位置。
    • [升级指南] 如果您正在使用变量 --scrollarea-scrollbar-margin-top、--scrollarea-scrollbar-margin-left 等，请确保它们遵循新名称并在适当的级别设置。不再需要以 .rt-ScrollAreaScrollbar 元素为目标来设置变量，因为它们可以仅在需要覆盖的组件上设置。新变量
      • --scrollarea-scrollbar-horizontal-margin-top
      • --scrollarea-scrollbar-horizontal-margin-bottom
      • --scrollarea-scrollbar-horizontal-margin-left
      • --scrollarea-scrollbar-horizontal-margin-right
      • --scrollarea-scrollbar-vertical-margin-top
      • --scrollarea-scrollbar-vertical-margin-bottom
      • --scrollarea-scrollbar-vertical-margin-left
      • --scrollarea-scrollbar-vertical-margin-right
• Slider
  • 优化组件中使用的阴影和颜色。
  • 优化和规范禁用状态的外观和感觉。
  • 修复了高对比度滑块具有不正确的禁用样式的问题。
• Switch
  • [重大变更] 改进布局，以便在 Switch 组件中包装开关时，自动将开关与文本的第一行对齐。
    • [升级指南] 确保您的带有开关的布局看起来符合预期。如果不是，请将您的开关包装在 <Text as="label" size="..."> 中，并使用您喜欢的文本大小。
  • [重大变更] 重做尺寸，使 size="2" 和 size="3" 更小。
    • [升级指南] 使用 size="3" 而不是 size="2" 以匹配之前的外观。
  • 优化组件中使用的阴影和颜色。
  • 优化和规范禁用状态的外观和感觉。
• Table
  • 优化外部边框的应用方式，使其与组件外部的背景融合。
• Tabs
  • 在 .radix-themes 中添加 CSS 变量，用于自定义活动和非活动选项卡的字母间距和单词间距，以便在默认值不适用于您的自定义字体时，您可以最大限度地减少明显的粗细变化。
    • --tabs-trigger-active-letter-spacing
    • --tabs-trigger-active-word-spacing
    • --tabs-trigger-inactive-letter-spacing
    • --tabs-trigger-inactive-word-spacing
• Text
  • 为 as 属性添加 as="label" 选项。
  • 改进未指定 as 属性时属性类型如何解析。
• TextArea
  • 重做内部实现，现在使用多个 HTML 节点进行样式设置。
    • 调整布局样式，使 TextArea 的行为类似于真正的 display: block 元素，水平填充可用空间。
    • style 和 className 现在被转发到包装 div 元素。 ref 和其他属性仍然转发到 textarea 本身。
    • [升级指南] 如果您通过 style、className 或以相关 HTML 节点为目标的自定义 CSS 覆盖 TextArea 样式，请确保您的自定义样式按预期工作。
    • [升级指南] 如果您依赖于浏览器设置的 TextArea 的固有宽度，请确保您的布局看起来符合预期。
  • 优化内边距值，以获得更平衡的外观。
    • 当 TextArea 溢出时，使用匹配的滚动边距以获得更好的打字体验。
  • 优化内部阴影的应用方式，使其与组件外部的背景融合。
  • 优化和规范禁用和只读状态的外观和感觉。
  • 修复了 Safari 浏览器中的一个错误，即文本值在禁用的输入框中会显示为着色。
  • 改进自动填充样式。
• TextField
  • 重置容器的 z-index 以避免潜在的堆叠问题。
  • 优化内边距值，以获得更平衡的外观。
    • 使用 text-indent 而不是 padding-left，以便当光标位于输入框末尾时，长值不会在左侧被截断。
  • 优化内部阴影的应用方式，使其与组件外部的背景融合。
  • 优化和规范禁用和只读状态的外观和感觉。
  • 修复了 Safari 浏览器中的一个错误，即文本值在禁用的输入框中会显示为着色。
  • 移除省略号截断，因为这会阻止在 Chrome 浏览器中水平滚动输入框时显示长值。
  • 改进自动填充样式。
• ThemePanel
  • 更改外观时禁用过渡效果。
  • 提高边框半径预览的对比度。
• Tooltip
  • 当主题设置为 radius="full" 时，减小边框半径。
  • [重大变更] 移除 multiline 属性。
    • [升级指南] 如果您正在使用 multiline 属性，请将 style={{ maxWidth: 250 }} 传递给相关的 Tooltip 元素。

1.1.2

• 导出 ThemeProps 和 ThemePanelProps

1.1.1

• 导出所有组件的属性类型，解决某些设置中的类型错误。

1.1.0

• 三种新的颜色色阶：ruby、iris 和 jade
• 设置 Radix Primitives 依赖项的显式版本以允许稳定构建。
• 为 ContextMenuSub、DialogRoot、HoverCardRoot 和 PopoverRoot 使用显式的 React.FC 类型，解决某些设置中的类型错误。

1.0.0

• 首次发布！🎉