feat: Checkbox support cssvar (#45859)

* feat: checkbox support cssvar

* refactor: improve code

* fix: add rootCls in class

components/checkbox/Checkbox.tsx

@@ -8,9 +8,11 @@ import Wave from '../_util/wave';
 import { TARGET_CLS } from '../_util/wave/interface';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { FormItemInputContext } from '../form/context';
 import GroupContext from './GroupContext';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -104,7 +106,9 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
   }, [restProps.value]);
 
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const checkboxProps: CheckboxProps = { ...restProps };
   if (checkboxGroup && !skipGroup) {
@@ -130,6 +134,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     checkbox?.className,
     className,
     rootClassName,
+    rootCls,
     hashId,
   );
   const checkboxClass = classNames(
@@ -140,7 +145,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
     hashId,
   );
   const ariaChecked = indeterminate ? 'mixed' : undefined;
-  return wrapSSR(
+  return wrapCSSVar(
     <Wave component="Checkbox" disabled={mergedDisabled}>
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
       <label

components/checkbox/Group.tsx

@@ -3,10 +3,12 @@ import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import type { CheckboxChangeEvent } from './Checkbox';
 import Checkbox from './Checkbox';
 import GroupContext from './GroupContext';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export type CheckboxValueType = string | number | boolean;
 
@@ -109,7 +111,9 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const domProps = omit(restProps, ['value', 'disabled']);
 
@@ -149,9 +153,10 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
     },
     className,
     rootClassName,
+    rootCls,
     hashId,
   );
-  return wrapSSR(
+  return wrapCSSVar(
     <div className={classString} style={style} {...domProps} ref={ref}>
       <GroupContext.Provider value={context}>{childrenNode}</GroupContext.Provider>
     </div>,

components/checkbox/style/cssVar.ts

@@ -0,0 +1,3 @@
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister('Checkbox', {});

components/checkbox/style/index.ts

@@ -1,3 +1,5 @@
+import { unit } from '@ant-design/cssinjs';
+
 import { genFocusOutline, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -102,7 +104,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           height: token.checkboxSize,
           direction: 'ltr',
           backgroundColor: token.colorBgContainer,
-          border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+          border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
           borderRadius: token.borderRadiusSM,
           borderCollapse: 'separate',
           transition: `all ${token.motionDurationSlow}`,
@@ -113,9 +115,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
             top: '50%',
             insetInlineStart: '21.5%',
             display: 'table',
-            width: (token.checkboxSize / 14) * 5,
-            height: (token.checkboxSize / 14) * 8,
-            border: `${token.lineWidthBold}px solid ${token.colorWhite}`,
+            width: token.calc(token.checkboxSize).div(14).mul(5).equal(),
+            height: token.calc(token.checkboxSize).div(14).mul(8).equal(),
+            border: `${unit(token.lineWidthBold)} solid ${token.colorWhite}`,
             borderTop: 0,
             borderInlineStart: 0,
             transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
@@ -195,8 +197,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
             '&:after': {
               top: '50%',
               insetInlineStart: '50%',
-              width: token.fontSizeLG / 2,
-              height: token.fontSizeLG / 2,
+              width: token.calc(token.fontSizeLG).div(2).equal(),
+              height: token.calc(token.fontSizeLG).div(2).equal(),
               backgroundColor: token.colorPrimary,
               border: 0,
               transform: 'translate(-50%, -50%) scale(1)',

components/style/index.ts

@@ -1,5 +1,6 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
+
 import type { AliasToken, DerivativeToken } from '../theme/internal';
 
 export { operationUnit } from './operationUnit';
@@ -128,7 +129,7 @@ export const genCommonStyle = (token: DerivativeToken, componentPrefixCls: strin
 };
 
 export const genFocusOutline = (token: AliasToken): CSSObject => ({
-  outline: `${token.lineWidthFocus}px solid ${token.colorPrimaryBorder}`,
+  outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
   outlineOffset: 1,
   transition: 'outline-offset 0s, outline 0s',
 });