版本发布

Radix 主题版本发布及其变更日志。

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 现在在内容部分默认具有 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 的 Card 实例。（没有额外样式的链接或按钮卡片的常见用例将按预期工作）。
• HoverCard 和 Popover 现在在内容部分默认具有 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 现在不再自动设置主体背景颜色。背景颜色现在默认由根 Theme 提供。CSS 变量 --color-page-background 已不再可用。
  • 在大多数情况下，它可以安全地替换为 --color-background，该变量在 .radix-themes 元素上可用。
• Tooltip 现在在内容部分默认具有 maxWidth="360px"。
  • 如果使用需要更宽的工具提示，请使用您自己的值覆盖 maxWidth。

完整更新日志

• 通用
  • 包结构
    • 改进 ESM 兼容性
    • 改进单个组件部分的 tree-shaking
    • [重大变更] 删除多部分组件的命名导出
      • 注意：我们的新方法允许点表示法在服务器组件中也能可靠地工作。
    • [重大变更] 从根 @radix-ui/themes 导入入口点中删除组件属性定义和内部帮助程序，并将其从 @radix-ui/themes/props 和 @radix-ui/themes/helpers 导出，以便能够使用相同的技术在 Radix 主题之上构建您自己的组件库。
    • 向包中添加通配符入口点，以便在您的工具设置非常复杂且无法支持现代模块解析规则时，作为一种后备方案，允许直接访问包内部。
    • 为高级用例添加额外的 CSS 文件导出
      • 导出单独的 tokens.css、components.css 和 utilities.css 文件，以防您需要对 CSS 优先级进行精细控制。例如，这允许在您自己的 CSS 之后导入 Radix 主题的 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 来支持上述用例。
  • 属性
    • 向所有布局组件添加以下属性
      • minWidth、maxWidth
      • minHeight、maxHeight

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

2.0.2

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

2.0.1

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

2.0.0

• 通用
  • 合并 CSS 构建中的选择器，改善在浏览器中检查元素时的开发人员体验。

  • 移除 CSS 构建中的注释。
  • 将 CSS 选择器特异性限制在 HTML 元素样式为 0,1,0，伪元素样式为 0,1,1，提升与 Tailwind 的兼容性。
    • [升级指南] 如果你依赖 Radix Themes 的任何特异性特性，请确保你的样式覆盖仍然按预期工作。
  • 重新设计暗模式颜色，优化亮模式颜色（通过 Radix Colors 3.0.0）。
    • 修复过度饱和的透明灰色。
    • [升级指南] 如果你正在使用颜色令牌进行自定义样式，请确保你的设计外观符合预期。
    • [升级指南] 如果你正在覆盖某些颜色，请确保你的覆盖与新的颜色尺度协调。
  • 重新设计透明黑色和白色颜色尺度。
    • [升级指南] 如果你正在使用透明黑色和白色颜色尺度进行自定义样式（--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 组件上强制亮/暗外观也会设置相应的浏览器颜色，例如正确的输入自动填充背景颜色。
  • 将所有 @keyframes 动画重命名为以 rt- 为前缀并转换为短横线连接命名法。
  • 对于大多数焦点样式，使用 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
  • 优化和规范化禁用状态的外观。
  • 当与 asChild 一起使用 disabled 时，将禁用样式应用于其他元素。
  • 改进 variant="classic" 在不同强调色和亮/暗模式下的外观。
• Callout
  • 调整布局工作方式，以允许在 Callout.Root 中嵌套多个 Callout.Text 元素。
    • [升级指南] 如果你依赖 Callout.Root 碰巧提供的弹性属性，请更改你的布局以显式使用 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

• 初始版本发布！🎉

在 GitHub 上编辑此页面。