@hsu-react/ui 1.0.0 → 2.0.0

package/lib/components/DatePicker/RangePicker/index.module.scss

@@ -13,11 +13,13 @@
 }
 
 .RangePicker {
+  // 同 Input.Number：父级无确定高度时避免被内容撑成 33/35。
+  min-height: var(--vita-control-height);
   width: 0;
   flex: 1;
   height: 100%;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius);
 
   font-family: inherit;
   font-size: inherit;
@@ -38,6 +40,13 @@
       font-weight: inherit;
       color: inherit;
       text-align: inherit;
+
+      // 字号是 inherit 的（刻意的，控件跟随容器排版）。但 antd 的行高是 1.57 倍字号，
+      // 容器字号一变大，行高 + 上下 padding + 边框就把整个控件顶高：在 16px 的页面里
+      // 实测 25.14 + 8 + 2 = 35，比其他控件高 3px。
+      // DatePicker 有外层 wrapper 兜底，RangePicker 的类直接落在 .ant-picker 上没人拦，
+      // 所以这里固定行高，让外层的 min-height 说了算。
+      line-height: normal;
     }
   }
 }

package/lib/components/DatePicker/StepPicker/index.module.scss

@@ -1,3 +1,5 @@
+// 内部这几个按钮此前是 4px 圆角（2.0 之前就写死的 4px，改造时只是原样收进了 radius-xs）。
+// 全库按钮统一到 8px 之后，只有步进选择器这几个还是小圆角，并排时很明显。
 .StepPicker {
   display: flex;
   align-items: center;
@@ -7,10 +9,10 @@
   .icon {
     &:global(.ant-btn-icon-only) {
       width: 32px;
-      height: 32px;
+      height: var(--vita-control-height);
     }
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius);
 
     font-size: 16px;
   }
@@ -18,10 +20,10 @@
   .time {
     width: 32px;
     min-width: max-content;
-    height: 32px;
+    height: var(--vita-control-height);
     padding: 0px 4px;
 
     font-size: 16px;
-    border-radius: 4px;
+    border-radius: var(--vita-radius);
   }
 }

package/lib/components/DatePicker/index.js

@@ -142,8 +142,15 @@ const DatePicker = props => {
       showSearch: false
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.DatePicker, {
       ...datePickerProps,
-      ref: ref,
-      popupClassName: (0, _classnames.default)(_indexModule.default.datePickerPopup, popupClassName),
+      ref: ref
+      // v6 replaced `popupClassName` with the `popup.root` semantic slot; this component's own
+      // `popupClassName` prop is kept as-is for consumers.
+      ,
+      classNames: {
+        popup: {
+          root: (0, _classnames.default)(_indexModule.default.datePickerPopup, popupClassName)
+        }
+      },
       getPopupContainer: getPopupContainer ?? _defaultModalPickerGetPopupContainer.defaultModalPickerGetPopupContainer,
       value: value ? (0, _dayjs.default)(value.toString()) : undefined,
       defaultValue: defaultValue ? (0, _dayjs.default)(defaultValue.toString()) : undefined,
@@ -157,8 +164,12 @@ const DatePicker = props => {
         width: 0
       },
       showTime: showTime,
-      onChange: v => {
+      onChange: value => {
         let date = "";
+
+        // v6 widened the picker's onChange value to `Dayjs | Dayjs[]`; a non-range picker only
+        // ever hands back a single value.
+        const v = Array.isArray(value) ? value[0] : value;
         if (v) {
           if (picker === "date") {
             date = (0, _dayjs.default)(v).format("YYYY-MM-DD");

package/lib/components/DatePicker/index.module.scss

@@ -5,10 +5,10 @@
 
   width: 100%;
   height: 100%;
-  min-height: 32px;
+  min-height: var(--vita-control-height);
   max-height: max-content;
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius);
 
   font-family: inherit;
   font-size: inherit;

package/lib/components/Descriptions/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import { DescriptionsProps as AntdDescriptionsProps } from "antd";
+import { Descriptions as AntdDescriptions, DescriptionsProps as AntdDescriptionsProps } from "antd";
 export interface ColumnsType {
     title: string;
     dataIndex: string;
@@ -12,5 +12,9 @@ interface DescriptionsProps extends AntdDescriptionsProps {
     columns?: ColumnsType[];
     dataSource?: Record<string, unknown>;
 }
-declare const Descriptions: React.FC<DescriptionsProps>;
+interface DescriptionsFC extends React.FC<DescriptionsProps> {
+    /** antd 的 `Descriptions.Item`，供 JSX 写法（本库更推荐用 `items` / `columns`） */
+    Item: typeof AntdDescriptions.Item;
+}
+declare const Descriptions: DescriptionsFC;
 export default Descriptions;

package/lib/components/Descriptions/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _semantic = require("../../utils/semantic");
 var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _hsuUtils = require("hsu-utils");
@@ -102,18 +103,18 @@ const Descriptions = props => {
   }, [_items, labelWidths, column, layout, bordered]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, {
     items: finalItems,
-    classNames: {
-      root: `${_indexModule.default.Descriptions} ${classNames?.root || ""}`,
-      label: `${_indexModule.default.label} ${layout === "horizontal" ? _indexModule.default.horizontal : ""} ${classNames?.label || ""}`,
-      content: `${_indexModule.default.content} ${classNames?.content || ""}`,
-      ...classNames
-    },
-    styles: {
-      ..._styles,
-      label: {
-        ..._styles?.label
-      }
-    },
+    classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+      ...outer,
+      // `...classNames` used to be spread *after* these lines, so a caller-supplied slot
+      // silently dropped this component's own class. Merge the two instead.
+      root: `${_indexModule.default.Descriptions} ${outer.root || ""}`,
+      label: `${_indexModule.default.label} ${layout === "horizontal" ? _indexModule.default.horizontal : ""} ${outer.label || ""}`,
+      content: `${_indexModule.default.content} ${outer.content || ""}`
+    }))
+    // Was `{ ..._styles, label: { ...(_styles?.label) } }` — a no-op that only re-copied `label`
+    // onto itself, and which no longer type-checks now that `styles` may also be a function.
+    ,
+    styles: _styles,
     colon: colon,
     layout: layout,
     bordered: bordered,
@@ -121,4 +122,5 @@ const Descriptions = props => {
     ...escriptionsConfig
   });
 };
+Descriptions.Item = _antd.Descriptions.Item;
 var _default = exports.default = Descriptions;

package/lib/components/Editor/index.module.scss

@@ -7,14 +7,14 @@
 
   overflow: hidden;
 
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
   .toolbar {
-    border-bottom: 1px solid var(--cf-border);
+    border-bottom: 1px solid var(--vita-border);
 
     .w-e-bar-item {
-      color: var(--cf-text-3);
+      color: var(--vita-subtle-foreground);
     }
   }
 
@@ -28,14 +28,14 @@
 
   &.disabled {
     .editor {
-      border-color: var(--cf-border);
+      border-color: var(--vita-border);
 
       cursor: not-allowed;
 
       .w-e-text-container {
-        background-color: var(--cf-subtle);
+        background-color: var(--vita-muted);
 
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
     }
   }

package/lib/components/FileCol/index.js

@@ -27,10 +27,10 @@ const FileCol = props => {
           className: _indexModule.default.fileItem,
           children: [!hideNm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
             title: file.name,
-            color: "var(--cf-subtle)",
+            color: "var(--vita-muted)",
             styles: {
-              body: {
-                color: "var(--cf-text)",
+              container: {
+                color: "var(--vita-foreground)",
                 padding: "6px 16px"
               }
             },

package/lib/components/FilePreview/_components/BasePreview/index.module.scss

@@ -61,9 +61,9 @@
     max-height: fit-content;
     padding: 20px;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
     overflow: auto;
 
@@ -73,7 +73,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: var(--cf-surface);
+      background-color: var(--vita-surface);
     }
   }
 }

package/lib/components/FilePreview/_components/PdfPreview/index.js

@@ -14,6 +14,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 这里用的是 notification 的 hook 版本（useNotification + contextHolder），本来就在 React
+// 树里、能读到主题，不需要换成 ../../../../feedback 那层代理 —— 那层解决的是**静态方法**
+// 读不到 context 的问题。
+
 const workerUrl = "/pdf.worker.min.js";
 const PdfPreview = props => {
   const {
@@ -197,8 +201,11 @@ const PdfPreview = props => {
               [_indexModule.default.disabled]: loading || !fileUrl || full
             }),
             onClick: () => {
-              if (fileUrl && !full) {
-                window.open(fileUrl, "_blank");
+              // 只放行可导航的协议。fileUrl 通常来自后端，但 FilePreview 展示的本就是
+              // 用户上传的文件，若这个值一路从用户数据流下来，javascript: 会在
+              // 本站源里执行。noopener 同时切断被打开页对 window.opener 的访问。
+              if (fileUrl && !full && /^(https?:|blob:|\/)/i.test(fileUrl)) {
+                window.open(fileUrl, "_blank", "noopener,noreferrer");
               }
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/components/FilePreview/_components/PdfPreview/index.module.scss

@@ -82,7 +82,7 @@
 
     margin-top: -3%;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
     overflow: auto;
 
@@ -133,11 +133,11 @@
 
     padding: 5px 10px;
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    box-shadow: var(--cf-shadow-3);
+    box-shadow: var(--vita-shadow-3);
 
     .toolItem {
       display: flex;
@@ -150,18 +150,18 @@
         justify-content: center;
 
         width: 32px;
-        height: 32px;
+        height: var(--vita-control-height);
 
         font-size: 24px;
 
-        border-radius: 4px;
+        border-radius: var(--vita-radius-xs);
 
         transition: background-color 0.3s, color 0.3s;
 
         cursor: pointer;
 
         &:hover {
-          background-color: var(--cf-row-hover);
+          background-color: var(--vita-hover);
         }
 
         &.disabled {

package/lib/components/FilePreview/index.module.scss

@@ -56,7 +56,7 @@
     height: 90%;
     max-height: fit-content;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
     overflow: hidden;
   }
 
@@ -71,9 +71,9 @@
     max-height: fit-content;
     padding: 20px;
 
-    border-radius: 4px;
+    border-radius: var(--vita-radius-xs);
 
-    background-color: var(--cf-surface);
+    background-color: var(--vita-surface);
 
     overflow: auto;
 
@@ -83,7 +83,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: var(--cf-surface);
+      background-color: var(--vita-surface);
     }
   }
 }

package/lib/components/Form/DrawerForm/index.js

@@ -13,6 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
+var _semantic = require("../../../utils/semantic");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -30,16 +31,12 @@ const DrawerForm = props => {
     onClose,
     reset = true,
     title,
+    // Pulled out of `drawerConfig` on purpose: it is spread *after* the `classNames` prop below,
+    // so leaving it in there would let a caller-supplied `classNames` replace ours wholesale
+    // instead of merging with it.
+    classNames: drawerClassNames,
     ...drawerConfig
   } = props;
-  const {
-    header,
-    body,
-    footer,
-    mask,
-    content,
-    wrapper
-  } = drawerConfig.classNames ?? {};
   const [form] = _antd.Form.useForm(externalForm);
   const [labelWidth] = (0, _useLabelWidth.default)(formItems);
   const {
@@ -61,15 +58,11 @@ const DrawerForm = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Drawer, {
     open: open,
     className: (0, _classnames.default)(_indexModule.default.DrawerForm, className),
-    classNames: {
-      header: `${header ?? ""}`,
-      body: `${_indexModule.default.body} ${body ?? ""}`,
-      footer: `${footer ?? ""}`,
-      mask: `${mask ?? ""}`,
-      content: `${content ?? ""}`,
-      wrapper: `${wrapper ?? ""}`
-    },
-    width: 500,
+    classNames: (0, _semantic.mergeSemantic)(drawerClassNames, outer => ({
+      ...outer,
+      body: `${_indexModule.default.body} ${outer.body ?? ""}`
+    })),
+    size: 500,
     closable: false,
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [title, /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {

package/lib/components/Form/ImportForm/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
+var _feedback = require("../../../feedback");
+var _tokens = require("../../../styles/tokens");
 var _FormItem = _interopRequireWildcard(require("../../FormItem"));
 var _react = _interopRequireDefault(require("react"));
 var _hsuUtils = require("hsu-utils");
@@ -14,6 +16,7 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _useLabelWidth = _interopRequireDefault(require("../../../hooks/useLabelWidth"));
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _Modal = _interopRequireDefault(require("../../Modal"));
+var _semantic = require("../../../utils/semantic");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -32,14 +35,6 @@ const ImportForm = (0, _mobxReactLite.observer)(props => {
     uploadProps,
     ...modalConfig
   } = props;
-  const {
-    header,
-    body,
-    footer,
-    mask,
-    content,
-    wrapper
-  } = classNames;
   const {
     permitted
   } = (0, _usePermissions.default)(hasPermi);
@@ -65,7 +60,7 @@ const ImportForm = (0, _mobxReactLite.observer)(props => {
     componentProps: {
       accept: ".xlsx",
       onUploadSuccess: () => {
-        _antd.notification.success({
+        _feedback.notification.success({
           message: "导入成功"
         });
       },
@@ -84,16 +79,16 @@ const ImportForm = (0, _mobxReactLite.observer)(props => {
     open: open,
     centered: true,
     className: `${_indexModule.default.ImportForm} ${className ?? ""}`,
-    width: 600,
-    classNames: {
-      header: `${header ?? ""}`,
-      body: `${_indexModule.default.body} ${body ?? ""}`,
-      footer: `${footer ?? ""}`,
-      mask: `${mask ?? ""}`,
-      content: `${content ?? ""}`,
-      wrapper: `${wrapper ?? ""}`
+    width: _tokens.modalWidth.sm,
+    classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+      ...outer,
+      body: `${_indexModule.default.body} ${outer.body ?? ""}`
+    }))
+    // v6 folded `maskClosable` into the `mask` config object
+    ,
+    mask: {
+      closable: false
     },
-    maskClosable: false,
     footer: false,
     ...modalConfig,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Form, {

package/lib/components/Form/ModalForm/index.d.ts

@@ -3,7 +3,7 @@ import { ModalProps } from "../../Modal";
 import { FormItemProps } from "../../FormItem";
 import React from "react";
 import { ItemContainerProps } from "../../FormItem/ItemContainer";
-import { FormRef } from "rc-field-form";
+import type { FormRef } from "../../../types/antd";
 export type ExtraFormItem = React.ReactElement<ItemContainerProps>;
 export interface ModalFormProps extends Omit<ModalProps, "onCancel" | "onOk"> {
     formItems?: FormItemProps[] | Record<string, FormItemProps[]>;

package/lib/components/Form/ModalForm/index.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
+var _tokens = require("../../../styles/tokens");
 var _Modal = _interopRequireDefault(require("../../Modal"));
 var _FormItem = _interopRequireWildcard(require("../../FormItem"));
 var _react = _interopRequireWildcard(require("react"));
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _usePermissions = _interopRequireDefault(require("../../../hooks/usePermissions"));
 var _useFormItems = require("./_hooks/useFormItems");
+var _semantic = require("../../../utils/semantic");
 var _useAdaptiveColumnNum = require("./_hooks/useAdaptiveColumnNum");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -43,14 +45,6 @@ const ModalForm = props => {
     formWrapperClassName,
     ...modalConfig
   } = props;
-  const {
-    header,
-    body,
-    footer,
-    mask,
-    content,
-    wrapper
-  } = classNames;
   const [form] = _antd.Form.useForm(externalForm);
   const {
     permitted
@@ -88,16 +82,16 @@ const ModalForm = props => {
     className: `${_indexModule.default.ModalForm} ${className ?? ""} ${layout === "horizontal" ? _indexModule.default.horizontal : ""}`,
     onCancel: _onCancel,
     onOk: _onOk,
-    width: layout === "horizontal" ? "1200px" : "800px",
-    classNames: {
-      header: `${header ?? ""}`,
-      body: `${_indexModule.default.body} ${body ?? ""}`,
-      footer: `${footer ?? ""}`,
-      mask: `${mask ?? ""}`,
-      content: `${content ?? ""}`,
-      wrapper: `${wrapper ?? ""}`
+    width: layout === "horizontal" ? _tokens.modalWidth.lg : _tokens.modalWidth.md,
+    classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+      ...outer,
+      body: `${_indexModule.default.body} ${outer.body ?? ""}`
+    }))
+    // v6 folded `maskClosable` into the `mask` config object
+    ,
+    mask: {
+      closable: false
     },
-    maskClosable: false,
     ...modalConfig,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: setFormContainer,

package/lib/components/Form/index.d.ts

@@ -7,7 +7,19 @@ interface FormType {
     Modal: React.FC<ModalFormProps>;
     Drawer: React.FC<DrawerFormProps>;
     Import: React.FC<ImportFormProps>;
+    /**
+     * antd 的 `Form.Item`，原样透出。
+     *
+     * 注意与库顶层导出的 `FormItem` 区分：那个是本库自己的增强版（带 label 宽度计算、
+     * tips、权限、按 type 生成 placeholder 等）。这里保持 antd 语义，避免同名不同 API。
+     */
+    Item: typeof AntdForm.Item;
+    List: typeof AntdForm.List;
+    ErrorList: typeof AntdForm.ErrorList;
+    Provider: typeof AntdForm.Provider;
     useForm: typeof AntdForm.useForm;
+    useWatch: typeof AntdForm.useWatch;
+    useFormInstance: typeof AntdForm.useFormInstance;
 }
 declare const Form: FormType;
 export default Form;

package/lib/components/Form/index.js

@@ -13,6 +13,12 @@ const Form = {
   Modal: _ModalForm.default,
   Drawer: _DrawerForm.default,
   Import: _ImportForm.default,
-  useForm: _antd.Form.useForm
+  Item: _antd.Form.Item,
+  List: _antd.Form.List,
+  ErrorList: _antd.Form.ErrorList,
+  Provider: _antd.Form.Provider,
+  useForm: _antd.Form.useForm,
+  useWatch: _antd.Form.useWatch,
+  useFormInstance: _antd.Form.useFormInstance
 };
 var _default = exports.default = Form;

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.module.scss

@@ -19,9 +19,9 @@
     height: 6px;
 
     border: 0;
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
-    background-color: var(--cf-border);
+    background-color: var(--vita-border);
   }
 
   /* When value is in [min, low] */
@@ -53,7 +53,7 @@
 
     background-color: transparent;
 
-    border-color: var(--cf-surface);
+    border-color: var(--vita-surface);
     border-style: solid;
     border-width: 0 5px;
   }

package/lib/components/FormItem/FormRadio/index.module.scss

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
   font-size: 14px;
 
   > label {
@@ -21,8 +21,8 @@
       > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
-        height: 24px;
-        min-height: 24px;
+        height: var(--vita-control-height-sm);
+        min-height: var(--vita-control-height-sm);
 
         border-radius: 2px;
 
@@ -31,12 +31,10 @@
           height: 100%;
         }
 
-        :global(.ant-radio-inner) {
-          width: 100%;
-          height: 100%;
-
-          border-radius: inherit;
-          border-color: var(--cf-border) !important;
+        // v6 draws the dot on `.ant-radio` itself (the old `.ant-radio-inner` span is gone),
+        // so the fill-the-parent sizing is dropped.
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -66,7 +64,7 @@
         }
 
         &:global(.ant-radio-checked) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -78,16 +76,16 @@
         }
 
         &:global(.ant-radio-disabled) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-radio-checked) {
-            :global(.ant-radio-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

package/lib/components/FormItem/FormSegmented/index.module.scss

@@ -1,7 +1,7 @@
 .FormSegmented {
   height: 100%;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   :global(.ant-segmented-group) {
     height: 100%;