Overview

发布版本

¥Releases

Radix Themes 版本及其更新日志。

3.1.3

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

    ¥Support indeterminate indicator for the uncontrolled Checkbox component

3.1.2

  • areas 属性添加到 Grid 组件,并将 gridArea 属性添加到所有布局组件(BoxContainerFlexGridSection

    ¥Add areas prop to the Grid component and gridArea prop to all layout components (Box, Container, Flex, Grid, Section)

  • overflow-wrap: anywhere 样式添加到 DataList 组件,以便长值(例如 ID)可以换行到下一行

    ¥Add overflow-wrap: anywhere style to the DataList component so that long values—such as IDs—can break over to next line

  • 支持不确定 Checkbox 组件的不确定指示器

    ¥Support indeterminate indicator for the indeterminate Checkbox component

3.1.1

3.1.0

3.0.5

  • AlertDialog.ContentDialog.Content 上添加 alignheightminHeightmaxHeight 属性。

    ¥Add align, height, minHeight, and maxHeight props to AlertDialog.Content and Dialog.Content

3.0.4

  • 修复由于内部循环依赖,Radix Themes 软件包无法与 webpack 打包的问题

    ¥Fix an issue when the Radix Themes package couldn’t be bundled with webpack because of a circular dependency within

  • 支持 Progress 组件上的 max 属性

    ¥Support the max prop on the Progress component

3.0.3

  • 修复主题 grayColor 设置与显式 appearance="light"appearance="dark" 值结合使用时无效的问题

    ¥Fix an issue when the theme grayColor setting would have no effect in combination with explicit appearance="light" or appearance="dark" values

  • 修复使用显式 color 值时 Link 使用自动高对比度颜色的回归问题。

    ¥Fix a regression when Link would use an automatic high-contrast color when an explicit color value was used.

  • 修复 Link 在嵌套于灰色文本中时无法使用正确的文本选择和焦点颜色的回归问题。

    ¥Fix a regression when Link would not use the correct text selection and focus color when nested in gray text.

  • 调整 Link 的点击高亮样式。

    ¥Tweak Link tap highlight style

  • 调整 CheckboxGroup.ItemRadioGroup.Item,以便可以实现文本溢出截断的布局。

    ¥Tweak CheckboxGroup.Item and RadioGroup.Item so that a layout with overflowing text truncation would be possible to achieve

  • 从组件中移除不必要的 data-accent-color 属性,因为该属性没有实际作用。

    ¥Remove an unnecessary data-accent-color attribute from components where it had no practical effect to be there.

  • 重新设计 color prop 定义的内部结构。

    ¥Rework the internals of the color prop definition.

  • 重新设计 TextFieldTextArea 的自动填充和禁用颜色

    ¥Rework the autofilled and disabled colors for TextField and TextArea

  • Spinner 组件添加内部 --spinner-animation-duration CSS 变量。

    ¥Add an internal --spinner-animation-duration CSS variable for the Spinner component

3.0.2

  • 从 CSS 中删除不必要的浏览器前缀,将包大小减少 17 KB

    ¥Remove unnecessary browser prefixes from the CSS, reducing the bundle size by 17 KB

  • 修复 Link 在嵌套于彩色文本中时无法使用自动高对比度颜色的回归问题。

    ¥Fix a regression when Link would not use an automatic high-contrast color when nested within colored text.

  • 修复 Link 在渲染为 button 时无法显示悬停样式的问题

    ¥Fix a regression when Link wouldn't display hover styles when rendered as a button

  • 修复 TextArea 在 Firefox 中无法保留空格序列的回归问题。

    ¥Fix a regression when TextArea would not preserve sequences of white space in Firefox

3.0.1

  • 修复重置样式表中的语法错误

    ¥Fix a syntax error in the reset stylesheet

  • 修复 Safari 中复选框 size="1" 指示符的对勾对齐问题

    ¥Fix Checkbox size="1" indicator checkmark alignment in Safari

  • 修复 Safari 中复选框和单选按钮禁用后的光标样式无效的问题

    ¥Fix Checkbox and Radio disabled cursor styles not working in Safari

3.0.0

Radix Themes 3.0 配备了全新的布局引擎、11 个新组件以及完整的 ESM 支持。阅读公告

¥Radix Themes 3.0 comes with a new layout engine, 11 new components, and full ESM support. Read the announcement.

升级指南

¥Upgrade guide

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

¥This release introduces a number of breaking changes. Please follow the steps below to upgrade.

常规

¥General

  • 多部分组件现在不再导出命名部分。改用点符号,该符号已修改为与 React 服务器组件兼容。例如:

    ¥Multi-part components now don’t export named parts anymore. Use dot notation instead, which was revised to work with React Server Components. For example:

    • DialogRootDialog.Root

    • DialogTriggerDialog.Trigger

    • DialogContentDialog.Content

    • …对于所有多部分组件也是如此:

      ¥…and so on for all multi-part components:

      • AlertDialog

      • Callout

      • ContextMenu

      • Dialog

      • DropdownMenu

      • HoverCard

      • Popover

      • RadioGroup

      • Select

      • Table

      • Tabs

      • TextField

  • 包内部组件(例如 prop 定义和辅助函数)不再可从根 @radix-ui/themes 导入入口点获取。

    ¥Package internals such as prop definitions and helpers are no longer available from the root @radix-ui/themes import entry point.

    • 请改为从 @radix-ui/themes/props@radix-ui/themes/helpers 导入它们。

      ¥Import them from @radix-ui/themes/props and @radix-ui/themes/helpers instead.

属性

¥Props

  • 布局组件上的 widthheight 属性不再映射到空间尺度。查找 widthheight 属性,并将其替换为相应的 空间缩放比例 步骤:

    ¥The width and height props on layout components don't map to space scale anymore. Find and replace your width and height prop usage with the corresponding space scale steps:

    • 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 也是如此

      ¥…and so on for height

    • 确保同时更新响应式对象语法。

      ¥Make sure to update responsive object syntax as well

    • 你还可以使用 var(--space-1)var(--space-9) 来代替硬编码值。

      ¥You can also use var(--space-1) to var(--space-9) instead of hardcoded values.

  • 布局组件上的 shrinkgrow 属性已重命名

    ¥The shrink and grow props on layout components were renamed

    • shrinkflexShrink

    • growflexGrow

颜色

¥Colors

如果你在自定义组件中使用以下令牌,请确保替换相应的引用。

¥If you were using the following tokens for your custom components, make sure to replace the corresponding references.

  • --color-surface-accent--accent-surface

  • 对比色已重命名:

    ¥Contrast colors were renamed:

    • --accent-9-contrast--accent-contrast

    • --red-9-contrast--red-contrast

    • --pink-9-contrast--pink-contrast

    • --blue-9-contrast--blue-contrast

    • …对于所有尺度也是如此

      ¥…and so on for all scales

  • 添加了新的焦点颜色标度。重命名以下标记:

    ¥Added a new focus color scale. Rename the following tokens:

    • --color-autofill-root--focus-a3

    • --color-focus-root--focus-8

    • --color-selection-root--focus-a5

  • --gray-2-translucent 及其对应的灰色部分已被移除。

    ¥--gray-2-translucent and the corresponding tinted gray colors were removed.

    • 请将 --color-panel-translucent 与背景模糊滤镜结合使用。

      ¥Use --color-panel-translucent in combination with a backdrop blur filter instead.

组件

¥Components

  • AlertDialogDialog 的内容部分现在默认使用 maxWidth="600px"

    ¥AlertDialog, Dialog now have maxWidth="600px" by default on the Content part.

    • 这比之前的 580px 值略大。如果你使用需要不同宽度的对话框,请使用你自己的值覆盖 maxWidth

      ¥This is slightly larger than the previous 580px value. If you use dialogs that need a different width, override maxWidth with your own value.

  • Badge 有了一个新的 size="3"size="2" 现在更小,size="1" 的尺寸也进行了调整。

    ¥Badge has a new size="3", size="2" is now much smaller, and size="1" dimensions were tweaked

    • size="2" 的用法替换为 size="3"

      ¥Replace your size="2" usage with size="3"

  • Card 的内部 HTML 结构和样式已重新设计,现在渲染单个 HTML 节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

    ¥Card internal HTML structure and styles were reworked and now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

    • 如果你需要在 ghost 以外的变体上覆盖卡片的背景颜色,请使用 --card-background-color 变量(而不是直接赋值 background-color),或者将背景颜色设置在嵌套为卡片第一个子元素的 <Inset p="current"> 元素上。

      ¥If you need to override the Card’s background color on variants other than ghost, use --card-background-color variable instead of assigning background-color directly, or set your background color on an <Inset p="current"> element nested as the first child of the Card.

    • 检查使用 asChild 或被父组件 asChild 覆盖的卡片实例。(常见的链接或按钮卡无需任何额外样式即可正常工作)。

      ¥Check your Card instances that uses asChild or is asChild’ed onto by a parent component. (The common case with link or button card without any extra styles will work as expected).

  • HoverCardPopover 现在在内容部分默认使用 maxWidth="480px"

    ¥HoverCard and Popover now have maxWidth="480px" by default on the Content part.

    • 如果你使用需要更宽宽度的弹出窗口和悬停卡片,请使用你自己的值覆盖 maxWidth

      ¥If you use popovers and hover cards that need a wider width, override maxWidth with your own value.

  • RadioGroup 的内部 HTML 结构和样式已重新设计,现在设计为在将 children 传递给 Item 部分时显示可选的文本标签。Root 部分现在还提供弹性列样式和间距。

    ¥RadioGroup internal HTML structure and styles were reworked and is now designed to display an optional text label when passing children to the Item part. The Root part now also provides flex column styles and spacing.

    • 如果你需要更低级别的控制,你可以改用 Radio 组件。

      ¥If you need lower-level control, you can use the Radio component instead

  • Section 有了一个新的 size="3"

    ¥Section has a new size="3"

    • 将所有使用 size="3" 的 Section 更新为 size="4"

      ¥Update all your Sections that used size="3" to size="4"

  • Tabs 底层字母/单词间距 CSS 变量已重命名,以同时支持 TabsTabNav 组件。如果你正在使用它们,请将它们重命名为新值:

    ¥Tabs underlying letter/word spacing CSS variables were renamed to support both Tabs and TabNav components. If you were using them, rename them to the new values:

    • --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 现在只有两部分:RootSlot 删除了 Input 部分,简化了属性的转发方式。

    ¥TextField now only has 2 parts: Root and Slot, dropping the Input part and simplifying how props are forwarded.

    • 所有未使用 TextField.RootTextField.Input 组件都应重命名为 TextField.Root

      ¥All TextField.Input parts used without TextField.Root should be renamed to TextField.Root

    • 所有在 TextField.Root 中使用的 TextField.Input 部分都应删除,并将其 prop 直接放在 TextField.Root 部分上。

      ¥All TextField.Input parts used within TextField.Root should be removed and their props should be put directly on the TextField.Root part

    • 所有放置在 TextField.Input 右侧的 TextField.Slot 部分都需要 side="right" prop。但是,当在一个 TextField 中使用两个插槽时,无需进行调整,例如,左侧一个插槽,右侧另一个插槽。在这种情况下,插槽将自动放置在不同的侧面。

      ¥All TextField.Slot parts placed to the right of TextField.Input will need side="right" prop. However, no adjustment is needed when two slots were used within one TextField, e.g. one slot on the left and another one on the right. In that case, the slots will be automatically placed on different sides.

    • 如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

      ¥Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

  • Theme 不再自动设置 body 背景颜色。现在,背景颜色默认由根 Theme 提供。CSS 变量 --color-page-background 已不再可用。

    ¥Theme does not set body background color automatically anymore. The background color is now provided by the root Theme by default. The CSS variable --color-page-background is no longer available.

    • 在大多数情况下,可以安全地将其替换为 .radix-themes 元素上可用的 --color-background

      ¥In most cases, it can be safely replaced with --color-background available on the .radix-themes element.

  • Tooltip 的内容部分现在默认使用 maxWidth="360px"

    ¥Tooltip now has maxWidth="360px" by default on the Content part.

    • 如果你使用需要更宽的工具提示,请使用你自己的值覆盖 maxWidth

      ¥If you use tooltips that need to be wider, override maxWidth with your own value.

完整更新日志

¥Full changelog

  • 常规

    ¥General

    • 软件包结构

      ¥Package structure

      • 改进 ESM 兼容性

        ¥Improve ESM compatibility

      • 改进各个组件的摇树优化

        ¥Improve tree-shaking of individual component parts

      • [Breaking] 删除多部分组件的命名导出

        ¥[Breaking] Drop named exports for multi-part components

        • 注意:我们的新方法也允许点符号在服务器组件中可靠地工作。

          ¥Note: Our new approach allows dot notation to work reliably in server components too

      • [Breaking] 从根 @radix-ui/themes 导入入口点移除组件属性定义和内部辅助函数,并将其从 @radix-ui/themes/props@radix-ui/themes/helpers 导出,以便使用相同技术在 Radix Themes 之上构建自己的组件库。

        ¥[Breaking] Remove component prop definitions and internal helpers from the root @radix-ui/themes import entry point and export them from @radix-ui/themes/props and @radix-ui/themes/helpers to make it possible to build your own component library on top of Radix Themes using the same techniques.

      • 如果你的工具设置复杂,无法支持现代模块解析规则,请为包添加通配符入口点,以便直接访问包内部。

        ¥Add a wildcard entry point to the package to allow direct access to the package internals as an escape hatch if you have a complex tooling setup that can’t support modern module resolution rules

      • 为高级用例添加额外的 CSS 文件导出:

        ¥Add extra CSS file exports for advanced use-cases:

        • 如果需要对 CSS 优先级进行细粒度控制,请导出单独的 tokens.csscomponents.cssutilities.css 文件。例如,这允许在你自己的 CSS 之后导入 Radix 主题 utilities.css,以及其之前的所有内容。

          ¥Export individual tokens.css, components.css, and utilities.css files in case you need fine-grained control of the CSS precedence. For example, this allows to import Radix Themes utilities.css after your own CSS, and everything else before that.

        • 除上述内容外,你还可以自定义要导入的颜色。除了导入 tokens.css 之外,你还可以导入 tokens/base.csstokens/colors/*.css,其中 * 对应于你项目中所需的强调色和灰色名称。

          ¥Additionally to the above, you can customise which colors to import. Instead of importing tokens.css, you can also import tokens/base.css and tokens/colors/*.css, where * corresponds to the names of the accent and gray colors you need in your project.

        • 导出仅包含布局组件(Box、Flex、Grid、Container、Section)样式的 layout.css。还可以使用单独的导出 layout/tokens.csslayout/components.csslayout/utilities.css 来支持上述用例。

          ¥Export layout.css that only includes styles for the layout components (Box, Flex, Grid, Container, Section). Individual exports layout/tokens.css, layout/components.css, and layout/utilities.css are also available to support the above use-case.

    • 属性

      ¥Props

      • 向所有布局组件添加以下属性:

        ¥Add the following props to all layout components:

        • minWidth, maxWidth

        • minHeight, maxHeight

        • flexBasis, flexShrink, flexGrow

        • gridColumn, gridColumnStart, gridColumnEnd

        • gridRow, gridRowStart, gridRowEnd

        • overflow, overflowX, overflowY

      • 重新设计所有布局属性以允许任意 CSS 值,包括与响应式对象语法一起使用时。支持任意值的 props 包括:

        ¥Rework all layout props to allow arbitrary CSS values, including when used with the responsive object syntax. Props that support arbitrary values include:

        • 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] widthheight 属性不再映射到空间尺度。这是因为在绝大多数情况下,宽度和高度未设置为空间比例,因此,IDE 自动补齐建议的空间比例感觉很奇怪/误导。

        ¥[Breaking] The width and height props don't map to space scale anymore. This is because in the vast majority of cases, width and height were not set to space scale, and with that, space scale as an IDE autocomplete suggestion felt odd/misleading.

      • [Breaking] 将 shrinkgrow 属性重命名为 flexShrinkflexGrow

        ¥[Breaking] Rename shrink and grow props to flexShrink and flexGrow

      • 更新布局属性的类型签名,以便代码编辑器建议尽可能仅使用空间比例值。CSS 关键字和其他值(例如 "auto""100vw")仍然可以作为手动字符串值使用。

        ¥Update the type signature of the layout props so that code editor suggestions use just space scale values when possible. CSS keywords and other values such as "auto" or "100vw" are still available as manual string values.

      • 使用 JSDoc 记录所有布局属性

        ¥Document all layout props with JSDoc

      • 修复响应式 props 使用不带 initial 键的断点对象时无法应用默认 prop 值的问题

        ¥Fix an issue with responsive props when using a breakpoints object without the initial key would not apply the default prop value

      • 移除从原生 HTML 元素继承的组件中的原生 colordefaultValuedefaultChecked 属性,以避免与它们的自定义实现混淆

        ¥Remove the native color, defaultValue, and defaultChecked attributes from components that inherit them from the native HTML elements to avoid confusion with their custom implementations

      • [Breaking] 重新设计所有组件和部件上 asChild 属性的可用性

        ¥[Breaking] Rework the availability of asChild prop on all components and parts

    • 颜色

      ¥Colors

      • 确保 highContrast 文本颜色在嵌套于接受强调色的其他组件中时保持一致。

        ¥Make sure highContrast text colors work consistently when nested within other components that accept an accent color

      • 调整所有 variant="soft" 菜单项的背景颜色。

        ¥Tweak the background color of all variant="soft" menu items

      • [Breaking] 将 --color-surface-accent 重命名为 --accent-surface

        ¥[Breaking] Rename --color-surface-accent to --accent-surface

      • [Breaking] 将 --accent-9-contrast--red-9-contrast--pink-9-contrast--blue-9-contrast 等重命名为 --accent-contrast--red-contrast--pink-contrast--blue-contrast 等。

        ¥[Breaking] Rename --accent-9-contrast, --red-9-contrast, --pink-9-contrast, --blue-9-contrast, etc. to --accent-contrast, --red-contrast, --pink-contrast, --blue-contrast and so on.

      • 移除 --gray-2-translucent 及其对应的浅灰色

        ¥Remove --gray-2-translucent and the corresponding tinted gray colors

      • 调整 --color-surface--color-panel-translucent 的值。

        ¥Tweak --color-surface and --color-panel-translucent values

      • [Breaking] 将 --color-focus-root--color-selection-root--color-autofill-root 替换为焦点颜色标度,例如 --focus-1 - --focus-12--focus-a1 - --focus-a12

        ¥[Breaking] Replace --color-focus-root, --color-selection-root, --color-autofill-root with a focus color scale, e.g. --focus-1--focus-12, and --focus-a1--focus-a12.

    • 其他

      ¥Other

      • 加速大多数动画

        ¥Speed up most of the animations

      • 确保所有具有填充或边框样式的元素都使用 box-sizing: border-box

        ¥Ensure all elements that have padding or border styles use box-sizing: border-box

      • 确保已禁用的光标样式正确应用

        ¥Ensure that disabled cursor styles are applied correctly

      • 为半透明面板添加模糊背景滤镜效果。

        ¥Add a blur backdrop filter effect to the translucent panels

  • 11 个新组件

    ¥11 new components

    • DataList

      • 用于将文本数据显示为键值对的组件。部分:

        ¥Component for displaying text data as key-value pairs. Parts:

        • Root

        • Item

        • Label

        • Value

    • CheckboxGroup

      • 一组复选框,带有可选的文本标签和移动焦点。部分:

        ¥Group of checkboxes with an optional text label and roving focus. Parts:

        • Root

        • Item

    • CheckboxCards

      • 交互式卡片组件,用于从列表中选择一个或多个值。部分:

        ¥Interactive card components to pick one or more value from the list. Parts:

        • Root

        • Item

    • Progress

      • 进度条组件用于指示任务的完成情况。

        ¥Progress bar component that indicates completion of a task.

    • Radio

      • 用于构建带有单选输入的自定义布局的独立元素。

        ¥Standalone element for building your own layouts with radio inputs.

    • RadioCards

      • 交互式卡片组件,用于从列表中选择一个值。部分:

        ¥Interactive card components to pick one of the values from the list. Parts:

        • Root

        • Item

    • Reset

      • 用于重置任何原生 HTML 元素样式的组件。

        ¥Component that resets the styles for any native HTML element.

    • SegmentedControl

      • 用于从多个选项中选择单个选项并控制类似选项卡式界面的组件。

        ¥Component for selecting a single option out of many and for controlling tab-like interfaces

    • Skeleton

      • 可以封装任何 UI 元素并将其转换为加载框架的组件。还可以使用 loading 属性有条件地渲染自身或 React Fragment。

        ¥Component that may wrap any UI element and turn it into a loading skeleton. Can also render self or a React Fragment conditionally using a loading prop.

    • Spinner

      • 加载微调组件。与 Skeleton 一样,它也可以封装任何 UI 元素并使用条件 loading 属性显示自身。

        ¥Loading spinner component. Like Skeleton, it also may wrap any UI element and display itself using a conditional loading prop.

    • TabNav

      • Tabs 等效,但用于页面导航。渲染常规链接并支持移动焦点。部分:

        ¥Equivalent for Tabs, but used for page navigation. Renders regular links and supports roving focus. Parts:

        • Root

        • Link

  • AlertDialog, Dialog

    • 添加 position: relative 以支持绝对定位的子组件。

      ¥Add position: relative to support absolutely positioned children.

    • widthminWidthmaxWidth 属性添加到内容部分。

      ¥Add width, minWidth, maxWidth props to the Content part.

    • 在内容部分默认设置 maxWidth="600px"

      ¥Set maxWidth="600px" by default on the Content part.

    • 重新设计滚动容器,使其在视口上显示滚动条,而不是局限于对话框的内容部分。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

      ¥Rework the scroll container so that it displays scrollbars on the viewport rather than confined to the dialog Content part. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

  • Badge

    • 移除 user-select: none

      ¥Remove user-select: none

    • [Breaking] 添加 size="3",使 size="2" 更小,调整 size="1" 尺寸。

      ¥[Breaking] Add size="3", make size="2" much smaller, tweak size="1" dimensions

  • Blockquote, Code, Em, Heading, Quote, Link, Strong, Text

    • 添加新的 wraptruncate 属性,用于控制文本是否换行以及是否使用省略号截断

      ¥Add new wrap and truncate props that control whether the text wraps and whether it is truncated with ellipsis

  • Card

    • 重新设计内部 HTML 结构和样式。此组件现在渲染单个 HTML 节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

      ¥Rework the internal HTML structure and styles. This component now renders a single HTML node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

  • Code

    • variant="ghost" 颜色现在与 Text 类似,除非使用 color 属性明确设置,否则会继承其颜色。

      ¥variant="ghost" color now works similarly to Text, inheriting the color unless set explicitly using the color prop

  • Container

    • 添加 align 属性来控制容器内容是左对齐、居中对齐还是右对齐

      ¥Add align prop to control whether the container content is aligned to the left, center, or right

    • [Breaking] 将 display="block" 值更改为 display="initial"(之前的值已损坏)

      ¥[Breaking] Change the display="block" value to display="initial" (the former value was broken)

  • ContextMenu, DropdownMenu

    • color 属性添加到 CheckboxItemRadioItem 部分

      ¥Add color prop to CheckboxItem and RadioItem parts

  • Checkbox, RadioGroup, Switch

    • 重新设计内部 HTML 结构和样式。这些组件现在渲染更少的 HTML 节点,并将所有 props 转发到最顶层节点。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

      ¥Rework the internal HTML structure and styles. These components now render fewer HTML nodes and forward all props to the topmost node. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

  • DropdownMenu

    • 当内容部分使用 variant="soft" 时,请为高亮项目使用更亮的文本颜色。

      ¥Use a brighter text color for the highlighted item when the Content part uses variant="soft"

    • 添加可选的 TriggerIcon 部件,用于渲染向下箭头指示器。

      ¥Add an optional TriggerIcon part that renders an arrow down indicator

  • Box, Flex, Grid

    • 添加对 as 属性渲染为 spandiv 的支持

      ¥Add support for as prop to render as span or div

    • 对于 Box,现在无论标签是什么,display: block 样式都会强制执行。

      ¥For Box, display: block style is now enforced regardless of the tag

  • Button, IconButton

    • 添加新的 loading 属性

      ¥Add new loading prop

  • Flex

    • 添加 gapXgapY 属性

      ¥Add gapX and gapY props

  • HoverCard, Popover

    • 添加 position: relative 以支持绝对定位的子组件。

      ¥Add position: relative to support absolutely positioned children.

    • 在内容部分添加 widthminWidthmaxWidthheightminHeightmaxHeight 属性。

      ¥Add width, minWidth, maxWidth, height, minHeight, maxHeight props to the Content part.

    • 在内容部分默认设置 maxWidth="480px"

      ¥Set maxWidth="480px" by default on the Content part.

  • RadioGroup

    • [Breaking] 重新设计内部 HTML 结构和样式。此组件现在设计为在将 children 传递给 Item 部分时显示可选的文本标签,并且 Root 部分现在提供弹性列样式和间距。

      ¥[Breaking] Rework the internal HTML structure and styles. This component is now designed to display an optional text label when passing children to the Item part, and the Root part now provides flex column styles and spacing.

  • Section

    • [Breaking] 将 display="block" 值更改为 display="initial"(之前的值已损坏)

      ¥[Breaking] Change the display="block" value to display="initial" (the former value was broken)

    • [Breaking] 对 size="3" 使用新值,对 size="4" 使用先前的值

      ¥[Breaking] Use a new value for size="3", use the previous value for size="4"

  • Select

    • 确保触发器字体粗细不被继承,例如从封装的 <label> 元素继承。

      ¥Make sure that Trigger font weight is not inherited, e.g. from a wrapping <label> element

  • Separator

    • 允许 orientation 属性的响应式值

      ¥Allow responsive values for the orientation prop

  • ScrollArea

    • 修复滚动区域在收到父级自动高度通知后无法拉伸到 100% 高度的问题

      ¥Fix an issue when Scroll Area would be unable to stretch to 100% height when informed by the parent’s auto height

  • Slider

    • 将边界框的大小更改为与滑块轨道的大小匹配。

      ¥Change the size of the bounding box to match the size of the Slider track

    • flex-grow: 1width: stretch / height: stretch 替换 flex-shrink: 0,使滑块元素在布局中更直观地伸缩。

      ¥Replace flex-shrink: 0 with flex-grow: 1 and width: stretch / height: stretch to allow the slider element to flex and shrink in layouts more intuitively.

    • 修复 Safari 中焦点轮廓过大的问题

      ¥Fix an overzealous focus outline in Safari

  • Table

    • 添加新的 layout 属性,用于控制 table-layout 样式属性

      ¥Add new layout prop to control the table-layout style property

    • TableCell 部分中的 width prop 类型签名和实现与布局组件中重新设计的 width prop 对齐。

      ¥Align width prop type signature and implementation on the TableCell part with the reworked width prop on the layout components

    • minWidthmaxWidth 属性添加到 TableCell 部分

      ¥Add minWidth and maxWidth props to the TableCell part

  • Tabs

    • colorhighContrast 属性添加到 TabsList

      ¥Add color and highContrast props to TabsList

    • 添加边距属性 TabsListTabsContent

      ¥Add margin props TabsList and TabsContent

    • 重命名了 .radix-themes 中的字母/单词间距 CSS 变量,使其同时支持 TabsTabNav 组件。

      ¥Renamed the letter/word spacing CSS variables in .radix-themes so that it supports both Tabs and TabNav components.

      • --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 属性

      ¥Add radius prop

    • 添加 resize 属性

      ¥Add resize prop

    • 修复 Grammarly 扩展程序破坏组件样式的问题

      ¥Fix an issue when Grammarly extension would break the component styles

    • 确保字体粗细不会被继承,例如从封装的 <label> 元素继承。

      ¥Make sure that the font weight is not inherited, e.g. from a wrapping <label> element

    • 重新设计内部 HTML 结构和样式。如果你依赖任何实现怪癖来覆盖样式或行为,请确保你的代码能够按预期工作。

      ¥Rework the internal HTML structure and styles. Make sure that your code works as expected if you were relying on any of the implementation quirks to override styles or behaviour.

  • TextField

    • [Breaking] 移除 Input 部分以简化属性的转发方式,并重新设计内部 HTML 结构和样式。

      ¥[Breaking] Remove the Input part to simplify how props are forwarded and rework internal HTML structure and styles.

    • 修复某些输入 type 不支持 getSelectionRange 的问题

      ¥Fix an issue with some input types not supporting getSelectionRange

    • 修复 Grammarly 扩展程序破坏组件样式的问题

      ¥Fix an issue when Grammarly extension would break the component styles

    • 确保字体粗细不会被继承,例如从封装的 <label> 元素继承。

      ¥Make sure that the font weight is not inherited, e.g. from a wrapping <label> element

  • ThemePanel

    • 将主题面板切换为 "T" 键,暗黑模式切换为 "D" 键(不使用修饰符)。

      ¥Change the hotkey to toggle the Theme Panel to "T" keypress and dark mode to "D" keypress (without modifiers).

  • Theme

    • 在根 Theme 组件上设置 min-height: 100vh

      ¥Set min-height: 100vh on the root Theme component

    • 修复在某些情况下 hasBackground 属性值无效的问题

      ¥Fix an issue when in certain situations, hasBackground prop value would have no effect

    • 优化 Theme 默认具有背景颜色的逻辑。没有明确指定 hasBackground 属性的 Theme 将显示背景颜色:

      ¥Refine the logic for when Theme has a background color by default. Theme without an explicit hasBackground prop will display a background color:

      • 当它是根 Theme 组件时

        ¥When it is the root Theme component

      • 当它具有明确的外观值时,例如 <Theme apperance="light"><Theme apperance="dark">

        ¥When it has an explicit appearance value, e.g. <Theme apperance="light"> or <Theme apperance="dark">

    • 主体背景颜色不再自动设置。现在,背景颜色默认由根 Theme 提供。

      ¥Body background color is no longer set automatically. The background color is now provided by the root Theme by default.

      • [Breaking] CSS 变量 --color-page-background 不再可用。

        ¥[Breaking] The CSS variable --color-page-background is no longer available.

      • html 上的 suppressHydrationWarning 不再需要(除非其他库需要,例如 next-themes

        ¥suppressHydrationWarning on html is no longer needed (unless required by other libraries, like next-themes)

    • 使用 JSDoc 记录所有主题属性

      ¥Document all Theme props with JSDoc

  • Tooltip

    • 添加 widthminWidthmaxWidth 属性。

      ¥Add width, minWidth, maxWidth props.

    • 在工具提示内容上默认设置 maxWidth="360px"

      ¥Set maxWidth="360px" by default on the tooltip content

    • 将默认延迟时间更改为 200 毫秒

      ¥Change the default delay duration to 200ms

2.0.2

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

    ¥Fix an issue when Chrome would sometimes crash while using CSS inspector on a Radix Themes stylesheet.

2.0.1

  • Card

    • 修复在不支持 color-mix 的浏览器中 variant="surface" 边框颜色可能消失的问题。

      ¥Fix an issue when variant="surface" border color may disappear in browsers that don't support color-mix.

    • 调整 variant="surface" 边框颜色。

      ¥Tweak variant="surface" border color.

  • Code

    • variant="ghost"Link 中使用时,请确保 Link 上的 underline="hover" 也得到遵守。

      ¥When variant="ghost" is used within a Link, make sure that underline="hover" on the Link is respected.

  • TextField

    • 改进常用字体的垂直文本对齐方式。

      ¥Improve vertical text alignment with common fonts.

    • 禁用输入时不应用自动填充强调色。

      ¥Don’t apply the autofill accent color when the input is disabled.

    • 确保自动填充强调色始终与焦点轮廓颜色匹配。

      ¥Make sure the autofill accent color always pairs with the focus outline color.

2.0.0

  • 常规

    ¥General

    • 在 CSS 构建中结合选择器,提升开发者在浏览器中检查元素时的体验。

      ¥Combine selectors in the CSS build, improving the developer experience when inspecting elements in the browser.

    • 从 CSS 构建中删除注释。

      ¥Remove comments from the CSS build.

    • 将 CSS 选择器特异性限制在 0,1,0 处(用于设置 HTML 元素的样式),以及限制在 0,1,1 处(用于设置伪元素的样式),从而提高与 Tailwind 的兼容性。

      ¥Cap CSS selector specificity at 0,1,0 for styling HTML elements and at 0,1,1 for styling pseudo-elements, improving compatibility with Tailwind.

      • [升级指南] 如果你依赖于 Radix Themes 的任何特殊性怪癖,请确保你的样式覆盖仍然能够正常工作。

        ¥[Upgrade guide] If you were relying on any specificity quirks of Radix Themes, make sure that your style overrides still work as expected.

    • 重新设计暗黑模式颜色,优化亮黑模式颜色(通过 Radix Colors 3.0.0)。

      ¥Rework dark mode colors, refine light mode colors (via Radix Colors 3.0.0).

      • 修复过饱和的透明灰色。

        ¥Fix oversaturated transparent grays.

      • [升级指南] 如果你之前使用颜色标记作为自定义样式,请确保你的设计外观符合预期。

        ¥[Upgrade guide] If you were using the color tokens for your custom styles, make sure that your designs look as expected.

      • [升级指南] 如果你覆盖了某些颜色,请确保你的覆盖与新的色阶相协调。

        ¥[Upgrade guide] If you were overriding certain colors, make sure that your overrides are harmonized with the new color scales.

    • 重新设计透明的黑白颜色比例。

      ¥Rework transparent black and white color scales.

      • [升级指南] 如果你之前使用透明黑白色阶作为自定义样式(--black-a1--white-a1 等),请务必检查新值并更新使用的步骤,以确保你的设计外观符合预期:

        ¥[Upgrade guide] If you were using transparent black and white color scales for your custom styles (--black-a1, --white-a1, etc.), make sure to check the new values and update the steps used so that your designs look as expected:

        • --black-a1 更改为 rgba(0, 0, 0, 0.01)

          ¥Change --black-a1 to rgba(0, 0, 0, 0.01).

        • --black-a2 更改为 rgba(0, 0, 0, 0.024)

          ¥Change --black-a2 to rgba(0, 0, 0, 0.024).

        • --black-a3 更改为 --black-a1

          ¥Change --black-a3 to --black-a1.

        • --black-a4 更改为 --black-a2

          ¥Change --black-a4 to --black-a2.

        • --black-a5 更改为 --black-a2

          ¥Change --black-a5 to --black-a2.

        • --black-a6 更改为 --black-a3

          ¥Change --black-a6 to --black-a3.

        • --black-a7 更改为 --black-a3--black-a4

          ¥Change --black-a7 to --black-a3 or --black-a4.

        • --black-a8 更改为 --black-a5

          ¥Change --black-a8 to --black-a5.

        • --black-a9 更改为 --black-a6--black-a7

          ¥Change --black-a9 to --black-a6 or --black-a7.

        • --black-a10 更改为 --black-a7

          ¥Change --black-a10 to --black-a7.

        • --black-a11 更改为 --black-a8

          ¥Change --black-a11 to --black-a8.

        • --black-a12 更改为 --black-a11

          ¥Change --black-a12 to --black-a11.

        • --white-a1 更改为 transparent

          ¥Change --white-a1 to transparent.

        • --white-a2 更改为 rgba(255, 255, 255, 0.01)

          ¥Change --white-a2 to rgba(255, 255, 255, 0.01).

        • --white-a3 更改为 --white-a1--white-a2

          ¥Change --white-a3 to --white-a1 or --white-a2.

        • --white-a4 更改为 --white-a2

          ¥Change --white-a4 to --white-a2.

        • --white-a5 更改为 --white-a3

          ¥Change --white-a5 to --white-a3.

        • --white-a6 更改为 --white-a3--white-a4

          ¥Change --white-a6 to --white-a3 or --white-a4.

        • --white-a7 更改为 --white-a4

          ¥Change --white-a7 to --white-a4.

        • --white-a8 更改为 --white-a5

          ¥Change --white-a8 to --white-a5.

        • --white-a9 更改为 --white-a6

          ¥Change --white-a9 to --white-a6.

        • --white-a10 更改为 --white-a7

          ¥Change --white-a10 to --white-a7.

        • --white-a11 更改为 --white-a9

          ¥Change --white-a11 to --white-a9.

        • --white-a12 更改为 --white-a11--white-a12

          ¥Change --white-a12 to --white-a11 or --white-a12.

    • 优化阴影比例。

      ¥Refine the shadow scale.

    • 在大多数 color="gray" 组件上,焦点环保持主题强调色,类似于文本选择颜色。

      ¥Maintain theme accent color for focus rings on most color="gray" component, similarly to the text selection color.

    • 将一些内部组件特定的 CSS 变量更改为遵循命名模式。

      ¥Change some internal component-specific CSS variables to follow a naming pattern.

    • 确保 Theme 组件上的强制明暗外观也能设置相应的浏览器颜色,例如正确的输入框自动填充背景颜色。

      ¥Make sure that forced light/dark appearance on the Theme component also sets the corresponding browser colors, like the correct input autofill background color.

    • 将所有 @keyframes 动画重命名为 rt- 前缀并采用短横线命名。

      ¥Rename all @keyframes animations with rt- prefix and into kebab case.

    • 对于大多数焦点样式,请使用 outline 而不是 box-shadow,这可以避免 Chrome 中焦点元素上出现的轻微抗锯齿问题。

      ¥Use outline rather than box-shadow for most focus styles, which avoids a slight anti-aliasing issue in Chrome on focused elements.

  • AlertDialog, Dialog

    • 在对话框内容周围添加填充,以防止其接触视口边缘。

      ¥Add padding around dialog content to prevent it from touching the viewport edges.

    • 确保对话框内容不会溢出 iOS 上的视口。

      ¥Make sure that the dialog content doesn’t overflow viewport on iOS.

  • Avatar

    • 不强制使用后备图标大小。

      ¥Don’t enforce fallback icon size.

      • [升级指南] 如果你使用 svg 资源作为后备,请确保手动设置合适的大小。

        ¥[Upgrade guide] If you were using svg assets as a fallback, make sure to set an appropriate size manually.

    • 添加 CSS 变量以控制交互元素上的光标样式:

      ¥Add CSS variables to control the cursor style on interactive elements:

      • --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 类替换 .rt-reset-button.rt-reset-a 类。

      ¥Replace .rt-reset-button and .rt-reset-a classes with a single .rt-reset class.

      • 新的 .rt-reset 类可用于在构建自定义组件时重置 abuttonh1h2h3h4h5h6olulppre 标签。

        ¥The new .rt-reset class can be use to reset a, button, h1, h2, h3, h4, h5, h6, ol, ul, p, and pre tags when building custom components.

      • [升级指南] 如果你之前使用这些类作为自定义组件,请更新使用的类名。

        ¥[Upgrade guide] If you were using these classes for your custom components, update the class name used.

  • Blockquote

    • [Breaking] 移除 trim 属性。

      ¥[Breaking] Remove trim prop.

  • Button, IconButton

    • 优化并规范化禁用状态的外观。

      ¥Refine and normalise the look and feel of the disabled states.

    • disabledasChild 一起使用时,将禁用的样式应用于其他元素

      ¥Apply disabled styles to other elements when using disabled together with asChild

    • 改进 variant="classic" 在明夜间模式下不同强调色下的外观和感觉。

      ¥Improve variant="classic" look and feel across different accent colors in light and dark mode.

  • Callout

    • 调整布局工作方式,允许在 Callout.Root 中嵌套多个 Callout.Text 元素。

      ¥Tweak how the layout works to allow nesting multiple Callout.Text elements within Callout.Root

      • [升级指南] 如果你依赖于 Callout.Root 提供的 flex 属性,请将布局更改为明确使用 Flex 组件。

        ¥[Upgrade guide] If you were relying on how Callout.Root happened to provide flex properties, change your layout to use a Flex component explicitly.

    • 修复除非传递显式 color 属性,否则标注会继承文本颜色的问题。

      ¥Fix an issue when the callout would inherit text color unless an explicit color prop was passed.

      • [升级指南] 如果你更喜欢以前的外观,请将 highContrast 属性传递给你的标注,以使文本颜色更深。

        ¥[Upgrade guide] If you preferred the previous look, pass highContrast prop to your callouts to make the text darker.

    • 为灰色的 variant="surface" 使用灰色背景。

      ¥Use a gray background for a gray variant="surface".

    • 使用更深的轮廓颜色 variant="outline"

      ¥Use a darker outline color variant="outline".

  • Checkbox

    • [Breaking] 改进布局,使 Text 组件中复选框的包裹会自动使其与文本首行对齐。

      ¥[Breaking] Improve layout so that wrapping a checkbox in Text component automatically aligns the checkbox with the first line of the text.

      • [升级指南] 确保带有复选框的布局外观符合预期。如果没有,请使用 <Text as="label" size="..."> 类型包裹复选框,并使用你喜欢的文本大小。

        ¥[Upgrade guide] Make sure that your layouts with checkboxes look as expected. If not, wrap your checkboxes in <Text as="label" size="...">, using your preferred text size.

    • [Breaking] 重新设计尺寸 - 添加更小的 size="1",将默认尺寸更改为 size="2",添加更精细的 size="3"

      ¥[Breaking] Rework sizes – add a smaller size="1", change the default size to size="2", add a more refined size="3"

      • [升级指南] 如果你通过显式 size 属性使用 size="1"size="2" 复选框,请分别将它们重命名为 size="2"size="3"

        ¥[Upgrade guide] If you were using size="1" or size="2" checkboxes via an explicit size prop, rename them to size="2" and size="3" respectively.

    • 优化 variant="classic" 的外观。

      ¥Refine the look and feel of variant="classic".

    • 优化并规范化禁用状态的外观。

      ¥Refine and normalise the look and feel of the disabled states.

  • Card

    • 更新 variant="classic" 阴影,使其不会超出元素范围。

      ¥Update the variant="classic" shadow so that it doesn’t extend outside of the element.

    • 优化 variant="classic" 的悬停和按下样式。

      ¥Refine hover and pressed styles for variant="classic".

    • 添加缺失的按下样式。

      ¥Add missing pressed styles.

    • 优化内部阴影的应用方式,使其与组件外部的背景融合。

      ¥Refine how the inner shadows are applied so that they blend with the background outside of the component.

  • Code

    • CodeLink 内时添加交互样式。

      ¥Add interactive styles when Code is within Link.

    • 修复 variant="ghost" 字体大小不一致的问题,具体取决于其大小是基于父级 Text 元素还是来自代码自身的 size 属性。

      ¥Fix an issue when variant="ghost" font size would be inconsistent depending on whether the size was based on a parent Text element or came from the code’s own size prop.

    • 根据 variant="outline"variant="surface" 的字体大小缩放轮廓粗细。

      ¥Scale the outline thickness relative to the font size for variant="outline" and variant="surface".

    • 改进 ::selection 的背景颜色以适应 variant="solid"

      ¥Improve ::selection background color for variant="solid".

    • .radix-themes 添加 CSS 变量,用于自定义 Code 变体的填充,以防默认值与自定义代码字体的垂直度量不兼容。

      ¥Add CSS variables to .radix-themes for customising the padding of Code variants in case the default values don’t work well with the vertical metrics of custom code font.

      • --code-padding-top

      • --code-padding-bottom

  • DropdownMenu, ContextMenu

    • 当主题设置为 radius="full" 时,请减小边框圆角。

      ¥Reduce border radius when theme setting is radius="full".

    • 优化水平内边距。

      ¥Refine horizontal paddings.

    • 优化标签的外观。

      ¥Refine label look and feel.

  • Grid

    • 修复嵌套 Grid 组件时可能导致后代 Grid 意外继承某些父组件样式的错误。

      ¥Fix a bug when nesting Grid components could cause the descendant Grid’s to inherit some parent styles unintentionally.

  • Inset

    • 添加 clip 属性,以控制内容是否被剪切到父元素的 padding 或 border 上。

      ¥Add clip prop to control whether content is clipped to the padding or to the border of the parent element.

    • Table 位于 Inset 内部时,自动调整表格单元格内边距

      ¥Automatically adjust table cell padding for when Table is inside Inset

  • Kbd

    • 调整垂直对齐方式。

      ¥Tweak vertical alignment.

  • Link

    • 降低下划线颜色饱和度。

      ¥Desaturate the underline color.

    • 使链接在彩色 Heading 元素内自动保持高对比度(类似于 Text 中的自动高对比度)。

      ¥Make links automatically high-contrast within colored Heading elements (similarly to the automatic high-contrast within Text).

    • 根据 variant="outline"variant="surface" 的字体大小缩放下划线粗细。

      ¥Scale the underline thickness relative to the font size for variant="outline" and variant="surface".

  • RadioGroup

    • [Breaking] 改进布局,使 Text 组件中单选按钮的包裹会自动使其与文本首行对齐。

      ¥[Breaking] Improve layout so that wrapping a radiobutton in Text component automatically aligns the radiobutton with the first line of the text.

      • [升级指南] 确保带有单选按钮的布局外观符合预期。如果没有,请使用 <Text as="label" size="..."> 类型包裹单选按钮,并使用你喜欢的文本大小。

        ¥[Upgrade guide] Make sure that your layouts with radio buttons look as expected. If not, wrap your radio buttons in <Text as="label" size="...">, using your preferred text size.

    • [Breaking] 重新设计尺寸 - 添加更小的 size="1",将默认尺寸更改为 size="2",添加更精细的 size="3"

      ¥[Breaking] Rework sizes – add a smaller size="1", change the default size to size="2", add a more refined size="3".

      • [升级指南] 如果你通过显式 size 属性使用 size="1"size="2" 单选按钮,请分别将它们重命名为 size="2"size="3"

        ¥[Upgrade guide] If you were using size="1" or size="2" radio buttons via an explicit size prop, rename them to size="2" and size="3" respectively.

    • 优化 variant="classic" 的外观。

      ¥Refine the look and feel of variant="classic".

    • 优化并规范化禁用状态的外观。

      ¥Refine and normalise the look and feel of the disabled states.

  • Select

    • 修复长项目列表中滚动条不可见的问题。

      ¥Fix invisible scrollbar in long item lists.

    • 改进 variant="classic" 在明夜间模式下的外观和感觉。

      ¥Improve variant="classic" look and feel across light and dark mode.

    • 使用 position="popper" 时,将 SelectContent 对齐到触发器的左侧。

      ¥Align SelectContent to the left of the trigger when using position="popper".

    • 优化水平内边距。

      ¥Refine horizontal paddings.

    • 优化标签的外观。

      ¥Refine label look and feel.

    • 重做 size="3"

      ¥Rework size="3".

  • ScrollArea

    • 升级原始版本,修复上游类型问题。

      ¥Upgrade the primitive version, fixing an upstream type issue.

    • 重命名滚动条边距变量,使其包含滚动条方向,并在 .radix-themes 上声明它们,以便更轻松地调整滚动条位置。

      ¥Rename scrollbar margin variables to include the scrollbar orientation and declare them on .radix-themes to facilitate easier scrollbar position adjustments.

      • [升级指南] 如果你之前使用变量 --scrollarea-scrollbar-margin-top--scrollarea-scrollbar-margin-left 等,请确保它们遵循新名称并设置在适当的级别。不再需要针对 .rt-ScrollAreaScrollbar 元素设置变量,因为它们只需在需要覆盖的组件上设置即可。新的变量:

        ¥[Upgrade guide] If you were using the variables --scrollarea-scrollbar-margin-top, --scrollarea-scrollbar-margin-left, etc. make sure that they follow the new names and are set at the appropriate level. There's no need to target .rt-ScrollAreaScrollbar element to set the variables anymore, as they can be set just on the component that needs the override. New variables:

        • --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

    • 优化组件中使用的阴影和颜色。

      ¥Refine the shadows and colors used in the components.

    • 优化并规范化禁用状态的外观。

      ¥Refine and normalise the look and feel of the disabled states.

    • 修复高对比度滑块禁用样式不正确的问题。

      ¥Fix an issue where high contrast sliders would have an incorrect disabled style.

  • Switch

    • [Breaking] 改进布局,使 Switch 组件中开关的包裹会自动使其与文本首行对齐。

      ¥[Breaking] Improve layout so that wrapping a switch in Switch component automatically aligns the switch with the first line of the text.

      • [升级指南] 确保带有开关的布局外观符合预期。如果没有,请使用 <Text as="label" size="..."> 类型包裹开关,并使用你喜欢的文本大小。

        ¥[Upgrade guide] Make sure that your layouts with switches look as expected. If not, wrap your switches in <Text as="label" size="...">, using your preferred text size.

    • [Breaking] 重新设计尺寸,使 size="2"size="3" 更小。

      ¥[Breaking] Rework sizes, making size="2" and size="3" smaller.

      • [升级指南] 使用 size="3" 替代 size="2" 以匹配之前的外观。

        ¥[Upgrade guide] Use size="3" instead of size="2" to match the previous look.

    • 优化组件中使用的阴影和颜色。

      ¥Refine the shadows and colors used in the components.

    • 优化并规范化禁用状态的外观。

      ¥Refine and normalise the look and feel of the disabled states.

  • Table

    • 优化外边框的应用方式,使其与组件外部的背景融合。

      ¥Refine how the outer border is applied so that it blends with the background outside of the component.

  • Tabs

    • .radix-themes 添加 CSS 变量,用于自定义活动和非活动标签的字母间距和单词间距,以便在默认值不适用于你的自定义字体时,最大限度地减少明显的字重变化。

      ¥Add CSS variables to .radix-themes for customising the letter spacing and word spacing of active and inactive tabs so that you can minimise the apparent shift in weight in case the default values don’t work for your custom font.

      • --tabs-trigger-active-letter-spacing

      • --tabs-trigger-active-word-spacing

      • --tabs-trigger-inactive-letter-spacing

      • --tabs-trigger-inactive-word-spacing

  • Text

    • as="label" 选项添加到 as 属性。

      ¥Add as="label" option to the as prop.

    • 改进未指定 as 属性时属性类型的解析方式。

      ¥Improve how prop types are resolved when as prop isn’t specified.

  • TextArea

    • 重新设计内部实现,现在使用多个 HTML 节点进行样式设置。

      ¥Rework the internal implementation, now using multiple HTML nodes for styling purposes.

      • 调整布局样式,使 TextArea 的行为像真正的 display: block 元素一样,水平填充可用空间。

        ¥Adjust the layout styles so that TextArea behaves like a true display: block element, filling the available space horizontally.

      • styleclassName 现在已转发到封装元素 divref 和其他属性仍然转发到 textarea 本身。

        ¥The style and className are now forwarded to the wrapping div element. The ref and other props are still forwarded to the textarea itself.

      • [升级指南] 如果你通过 styleclassName 或针对相关 HTML 节点的自定义 CSS 覆盖了 TextArea 样式,请确保你的自定义样式能够正常工作。

        ¥[Upgrade guide] If you were overriding TextArea styles via style, className, or custom CSS that targets the related HTML nodes, make sure that your custom styles work as expected.

      • [升级指南] 如果你依赖于浏览器设置的 TextArea 固有宽度,请确保你的布局符合预期。

        ¥[Upgrade guide] If you were relying on the intrinsic width of TextArea set by the browser, make sure that your layout looks as expected.

    • 优化内边距值,使其外观更均衡。

      ¥Refine padding values for a more balanced look.

      • TextArea 溢出时,使用匹配的滚动边距以获得更舒适的输入体验。

        ¥Use matching scroll margins for a nicer typing experience when the TextArea overflows.

    • 优化内部阴影的应用方式,使其与组件外部的背景融合。

      ¥Refine how the inner shadows are applied so that they blend with the background outside of the component.

    • 优化并规范化禁用和只读状态的外观。

      ¥Refine and normalise the look and feel of disabled and read-only states.

    • 修复 Safari 中文本值在禁用输入框中显示为带颜色的问题。

      ¥Fix a Safari bug when the text value would appear tinted in the disabled input.

    • 改进自动填充样式。

      ¥Improve autofill styles.

  • TextField

    • 重置容器的 z-index 以避免潜在的堆叠问题。

      ¥Reset z-index of the container to avoid potential stacking issues.

    • 优化内边距值,使其外观更均衡。

      ¥Refine padding values for a more balanced look.

      • 使用 text-indent 代替 padding-left,这样当光标位于输入框末尾时,长值不会被从左侧截断。

        ¥Use text-indent instead of padding-left so that long values aren't truncated on the left when the cursor is at the end of the input.

    • 优化内部阴影的应用方式,使其与组件外部的背景融合。

      ¥Refine how the inner shadows are applied so that they blend with the background outside of the component.

    • 优化并规范化禁用和只读状态的外观。

      ¥Refine and normalise the look and feel of disabled and read-only states.

    • 修复 Safari 中文本值在禁用输入框中显示为带颜色的问题。

      ¥Fix a Safari bug when the text value would appear tinted in the disabled input.

    • 移除省略号截断,因为这会阻止在 Chrome 中水平滚动输入时显示长值。

      ¥Remove ellipsis truncation, as this prevented long values from being shown when scrolling on the input horizontally in Chrome.

    • 改进自动填充样式。

      ¥Improve autofill styles.

  • ThemePanel

    • 更改外观时禁用过渡效果。

      ¥Disable transitions when changing the appearance.

    • 提升边框圆角预览的对比度。

      ¥Improve contrast in the border radius preview.

  • Tooltip

    • 当主题设置为 radius="full" 时,请减小边框圆角。

      ¥Reduce border radius when theme setting is radius="full".

    • [Breaking] 移除 multiline 属性。

      ¥[Breaking] Remove multiline prop.

      • [升级指南] 如果你使用 multiline 属性,请将 style={{ maxWidth: 250 }} 传递给相关的 Tooltip 元素。

        ¥[Upgrade guide] If you were using multiline prop, pass style={{ maxWidth: 250 }} to the relevant Tooltip elements.

1.1.2

  • 导出 ThemePropsThemePanelProps

    ¥Export ThemeProps and ThemePanelProps

1.1.1

  • 导出所有组件的 prop 类型,解决特定设置下的类型错误。

    ¥Export prop types for all components, resolving type errors with certain setups.

1.1.0

  • 三种新的颜色等级:rubyirisjade

    ¥Three new color scales: ruby, iris, and jade

  • 设置 Radix Primitives 依赖的显式版本,以允许稳定的构建。

    ¥Set explicit versions of the Radix Primitives dependencies to allow stable builds.

  • ContextMenuSubDialogRootHoverCardRootPopoverRoot 使用显式 React.FC 类型,以解决某些设置中的类型错误。

    ¥Use an explicit React.FC type for ContextMenuSub, DialogRoot, HoverCardRoot, and PopoverRoot, resolving a type error with certain setups.

1.0.0

  • 首次发布!🎉

    ¥Initial release! 🎉

Previous布局
Next资源