@noraent/nora-datagrid 1.1.0-beta.29 → 1.1.0-beta.30

package/README.md

@@ -48,6 +48,52 @@ feature → develop → release/x.x.x → main
 
 ## ✨ nora-data-grid v3 개요
 
+### 테마 커스텀
+
+`createTheme`과 `ThemeProvider`로 grid 전체 폰트, header, 기본 row와 선택 row 스타일을 설정할 수 있습니다.
+
+```tsx
+const gridTheme = createTheme({
+  typography: {
+    fontFamily: "Pretendard, sans-serif",
+  },
+  palette: {
+    primary: {
+      main: "var(--grid-primary)",
+    },
+  },
+  components: {
+    HeaderCell: {
+      default: {
+        backgroundColor: "#f8fafc",
+        text: { main: "#334155" },
+        typography: { fontSize: 13, fontWeight: 600 },
+      },
+    },
+    Row: {
+      default: {
+        text: { main: "#475569" },
+        typography: { fontSize: 14, fontWeight: 400 },
+      },
+      selected: {
+        background: "#eef2ff",
+        borderColor: "#c7d2fe",
+        text: { main: "#3730a3" },
+      },
+      "selected-hover": {
+        background: "#e0e7ff",
+      },
+    },
+  },
+});
+
+<ThemeProvider theme={gridTheme}>
+  <DataGrid {...props} />
+</ThemeProvider>;
+```
+
+`Row.selected.background`을 생략하면 `palette.primary.main`에 10% 투명도를 적용합니다. `primary.main`에는 HEX뿐 아니라 `var(--grid-primary)` 같은 CSS 색상 표현식도 사용할 수 있습니다.
+
 ## 🚀 Build Setup
 
 ### install

package/dist/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "1.1.0-beta.29",
+  "version": "1.1.0-beta.30",
   "module": "./dist/nora_datagrid.es.js",
   "main": "./dist/nora_datagrid.cjs.js",
   "private": false,

package/dist/common/constants/utils.d.ts

@@ -33,12 +33,12 @@ export default useUpdateEffect;
 export declare function range(from: number, to: number): number[];
 export declare function adjustSaturation(hex: string, amount: number): string;
 /**
- * HEX 색상에 투명도(alpha) 적용
- * @param hex - '#RRGGBB' 형식
+ * 색상에 투명도(alpha) 적용
+ * @param color - HEX 색상 또는 CSS 색상 표현식
  * @param opacity - 0 ~ 1 (투명도)
- * @returns 'rgba(r,g,b,a)' 문자열
+ * @returns HEX는 rgba(), 그 외 CSS 색상은 color-mix() 문자열
  */
-export declare function alpha(hex: string, opacity: number): string;
+export declare function alpha(color: string, opacity: number): string;
 export declare function deepMerge<T>(target: T, source: Partial<T>): T;
 export declare function toNumberWidth(width: string | number | undefined): number;
 export declare const sorting: (dataSource: DataGridDataSource, newSort: GridSortModel) => {

package/dist/common/foundation/palette.test.d.ts

@@ -0,0 +1 @@
+export {};