✨ feat: 增加 createStyles 的使用方法

Author: arvinxx

src/createStyles.ts

@@ -0,0 +1,31 @@
+// ===========  emotion css 方案  =========== //
+// 写成 useStyles 的方式
+// 适用场景：单纯用于部分样式的，没必要抽成组件的话，使用这种写法
+// 可支持将样式部分独立到 style.ts 文件中
+import { useMemo } from 'react';
+
+import type { AntdStylish } from './stylish';
+import { useInternalStylish } from './stylish';
+import { AntdToken } from './types';
+import { useToken } from './useToken';
+
+export interface CreateStylesTheme {
+  token: AntdToken;
+  stylish: AntdStylish;
+}
+
+/**
+ * 业务应用中创建样式基础写法
+ */
+export function createStyles<Props, ReturnStyle>(
+  createStyleFn: (theme: CreateStylesTheme, props?: Props) => ReturnStyle,
+) {
+  return (props?: Props): ReturnStyle => {
+    const token = useToken();
+    const stylish = useInternalStylish();
+
+    return useMemo(() => createStyleFn({ token, stylish }, props), [token, props]);
+  };
+}
+
+export { css, cx } from '@emotion/css';

src/index.ts

@@ -1,3 +1,4 @@
+export * from './createStyles';
 export * from './styled';
 export * from './types';
 export * from './useToken';

src/styled.tsx

@@ -20,7 +20,7 @@ export interface ThemeProviderProps {
    */
   customToken?: Record<string, any>;
   /**
-   * 自定义 stylish 可以自行扩展和新增自己需要的符合样式
+   * 自定义 stylish 可以自行扩展和新增自己需要的复合样式
    */
   customStylish?: Record<string, string>;
 }

src/stylish/index.ts

@@ -0,0 +1,110 @@
+import { useToken } from '@/useToken';
+import { css } from '@emotion/css';
+import { transparentize } from 'polished';
+import { useMemo } from 'react';
+
+export interface AntdStylish {
+  defaultButton: string;
+
+  textInfo: string;
+  textDefault: string;
+
+  containerBgHover: string;
+  containerBgL2: string;
+
+  dataInputContainer: string;
+  dataInputContainerFocused: string;
+  backgroundBlur: string;
+}
+
+/**
+ * 一组统一封装好的 antd 标准样式
+ */
+export const useInternalStylish = (): AntdStylish => {
+  const token = useToken();
+
+  return useMemo(() => {
+    const containerBgHover = css`
+      cursor: pointer;
+      transition: 150ms background-color ease-in-out;
+      &:hover {
+        background: ${token.colorFillQuaternary};
+      }
+    `;
+    const dataInputContainerHover = css`
+      color: ${token.colorText};
+      background-color: ${token.colorFillTertiary};
+      border-color: transparent;
+    `;
+    const dataInputContainerFocused = css`
+      color: ${token.colorText} !important;
+      background-color: ${token.colorFillQuaternary} !important;
+      border-color: ${token.colorPrimary} !important;
+      box-shadow: none;
+    `;
+
+    const defaultButtonBase = css`
+      color: ${token.colorTextSecondary};
+      background: ${token.colorFillQuaternary};
+      border-color: transparent;
+    `;
+
+    return {
+      defaultButton: css`
+        ${defaultButtonBase};
+
+        &:hover {
+          color: ${token.colorText} !important;
+          background: ${token.colorFillSecondary} !important;
+          border-color: transparent !important;
+        }
+        &:focus {
+          ${defaultButtonBase};
+          border-color: ${token.colorPrimary} !important;
+        }
+      `,
+
+      textInfo: css`
+        color: ${token.colorTextSecondary};
+        &:hover {
+          color: ${token.colorText};
+        }
+      `,
+      textDefault: css`
+        color: ${token.colorTextSecondary};
+      `,
+
+      containerBgHover: css`
+        cursor: pointer;
+        transition: 150ms background-color ease-in-out;
+
+        &:hover {
+          background: ${token.colorFillQuaternary};
+        }
+      `,
+      containerBgL2: css`
+        ${containerBgHover};
+        border-radius: 4px;
+        background: ${token.colorFillQuaternary};
+
+        &:hover {
+          background: ${token.colorFillTertiary};
+        }
+      `,
+      dataInputContainerFocused,
+      dataInputContainer: css`
+        &:hover {
+          ${dataInputContainerHover}
+        }
+        &:focus {
+          ${dataInputContainerFocused}
+        }
+      `,
+
+      backgroundBlur: css`
+        background: ${transparentize(0.4)(token.colorBgElevated)};
+        backdrop-filter: blur(10px);
+      `,
+    };
+  }, [token]);
+};