feat: skeleton css-var (#8326)

Co-authored-by: undefined <undefined>

Author: shu-hari

components/skeleton/Avatar.tsx

@@ -5,6 +5,7 @@ import initDefaultProps from '../_util/props-util/initDefaultProps';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import Element, { skeletonElementProps } from './Element';
 import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 export const avatarProps = () => {
   return {
@@ -24,14 +25,17 @@ const SkeletonAvatar = defineComponent({
   }),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const cls = computed(() =>
       classNames(
         prefixCls.value,
         `${prefixCls.value}-element`,
         {
           [`${prefixCls.value}-active`]: props.active,
         },
+        rootCls.value,
+        cssVarCls.value,
         hashId.value,
       ),
     );

components/skeleton/Button.tsx

@@ -5,6 +5,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
 import { initDefaultProps } from '../_util/props-util';
 import Element, { skeletonElementProps } from './Element';
 import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 export const skeletonButtonProps = () => {
   return {
@@ -24,7 +25,8 @@ const SkeletonButton = defineComponent({
   }),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const cls = computed(() =>
       classNames(
         prefixCls.value,
@@ -33,6 +35,8 @@ const SkeletonButton = defineComponent({
           [`${prefixCls.value}-active`]: props.active,
           [`${prefixCls.value}-block`]: props.block,
         },
+        rootCls.value,
+        cssVarCls.value,
         hashId.value,
       ),
     );

components/skeleton/Image.tsx

@@ -5,6 +5,7 @@ import omit from '../_util/omit';
 import type { SkeletonElementProps } from './Element';
 import { skeletonElementProps } from './Element';
 import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 export type SkeletonImageProps = Omit<SkeletonElementProps, 'size' | 'shape' | 'active'>;
 
@@ -17,9 +18,16 @@ const SkeletonImage = defineComponent({
   props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const cls = computed(() =>
-      classNames(prefixCls.value, `${prefixCls.value}-element`, hashId.value),
+      classNames(
+        prefixCls.value,
+        `${prefixCls.value}-element`,
+        rootCls.value,
+        hashId.value,
+        cssVarCls.value,
+      ),
     );
     return () => {
       return wrapSSR(

components/skeleton/Input.tsx

@@ -6,6 +6,7 @@ import type { SkeletonElementProps } from './Element';
 import Element, { skeletonElementProps } from './Element';
 import omit from '../_util/omit';
 import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
@@ -22,7 +23,8 @@ const SkeletonInput = defineComponent({
   },
   setup(props) {
     const { prefixCls } = useConfigInject('skeleton', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const cls = computed(() =>
       classNames(
         prefixCls.value,
@@ -31,7 +33,9 @@ const SkeletonInput = defineComponent({
           [`${prefixCls.value}-active`]: props.active,
           [`${prefixCls.value}-block`]: props.block,
         },
+        rootCls.value,
         hashId.value,
+        cssVarCls.value,
       ),
     );
     return () => {

components/skeleton/Skeleton.tsx

@@ -10,6 +10,7 @@ import Paragraph from './Paragraph';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import Element from './Element';
 import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 /* This only for skeleton internal. */
 type SkeletonAvatarProps = Omit<AvatarProps, 'active'>;
@@ -90,7 +91,8 @@ const Skeleton = defineComponent({
   }),
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('skeleton', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
     return () => {
       const { loading, avatar, title, paragraph, active, round } = props;
@@ -155,7 +157,9 @@ const Skeleton = defineComponent({
           [`${pre}-active`]: active,
           [`${pre}-rtl`]: direction.value === 'rtl',
           [`${pre}-round`]: round,
+          [rootCls.value]: true,
           [hashId.value]: true,
+          [cssVarCls.value]: true,
         });
 
         return wrapSSR(