fix(theme): simplify theme type

Author: morewings

package.json

@@ -113,9 +113,9 @@
     "stylelint-prettier": "5.0.3",
     "ts-jest": "29.2.5",
     "ts-node": "10.9.2",
-    "typescript": "5.7.3",
+    "typescript": "5.8.3",
     "typescript-eslint": "8.23.0",
     "vite": "6.2.6",
-    "vite-plugin-dts": "4.3.0"
+    "vite-plugin-dts": "4.5.3"
   }
 }

pnpm-lock.yaml

@@ -1,9 +1,9 @@
 import type {HTMLAttributes, ReactNode} from 'react';
 import {createElement, forwardRef, useEffect, useMemo} from 'react';
-import type {ThemeType} from 'css-vars-hook';
 
 import {createStyleObject} from '@/lib/utils';
 import type {DataAttributes, LibraryProps} from '@/lib/NativeProps';
+import type {Theme} from '@/lib/ThemeType.ts';
 
 /**
  * @public
@@ -15,9 +15,9 @@ export type LocalRootProps = DataAttributes &
         /** Choose which HTMLElement to render as a root. div is default. */
         as?: string;
         /** Apply initial theme. */
-        theme?: ThemeType;
+        theme?: Theme;
         /** Provide theme setter function. */
-        setTheme?: (arg0: ThemeType) => void;
+        setTheme?: (arg0: Theme) => void;
     };
 
 export const LocalRoot = forwardRef<HTMLElement, LocalRootProps>((props, ref) => {

src/lib/LocalTheme/LocalRoot.tsx

@@ -1,8 +1,7 @@
 import {useCallback, useRef, useMemo} from 'react';
-import type {ThemeType} from 'css-vars-hook';
 
 import {setCSSVariable, setCSSTheme} from '@/lib/utils';
-import type {UnitType} from '@/lib/UnitType';
+import type {UnitType, Theme} from '@/lib/ThemeType.ts';
 
 import type {LocalRootProps} from './LocalRoot';
 import {LocalRoot} from './LocalRoot';
@@ -21,10 +20,10 @@ import {LocalRoot} from './LocalRoot';
  * return <LocalRoot theme={{foo: 'bar'}} className="demo-local">//...
  */
 export const useLocalTheme = <TElement extends HTMLElement>() => {
-    const themeRef = useRef<ThemeType>();
+    const themeRef = useRef<Theme>();
     const elementRef = useRef<TElement>(null);
 
-    const setTheme = useCallback((nextTheme: ThemeType) => {
+    const setTheme = useCallback((nextTheme: Theme) => {
         setCSSTheme(elementRef.current!)(nextTheme);
 
         themeRef.current = nextTheme;

src/lib/LocalTheme/useLocalTheme.tsx

@@ -1,14 +1,12 @@
-import type {ThemeType} from 'css-vars-hook';
-
-import type {UnitType} from '@/lib/UnitType';
+import type {UnitType, Theme} from '@/lib/ThemeType.ts';
 
 /**
  * @public
  * `useRootTheme` return type.
  */
 export type HookInterface = {
-    setTheme: (nextTheme: ThemeType) => void;
-    getTheme: () => ThemeType;
+    setTheme: (nextTheme: Theme) => void;
+    getTheme: () => Theme;
     setVariable: (variableName: string, value: UnitType) => void;
     getVariable: (variableName: string) => string;
     removeVariable: (variableName: string) => void;

src/lib/RootTheme/HookInterfaceType.ts

@@ -1,6 +1,7 @@
 import type {FC, ReactNode} from 'react';
 import {useMemo, useEffect, useId} from 'react';
-import type {ThemeType} from 'css-vars-hook';
+
+import type {Theme} from '@/lib/ThemeType.ts';
 
 import type {DataAttributes, LibraryProps} from '../NativeProps';
 import {RootContext} from './RootContext';
@@ -10,7 +11,7 @@ import {useRootTheme} from './useRootTheme';
  * @public
  */
 export type RootThemeProviderProps = DataAttributes &
-    LibraryProps & {children: ReactNode; theme: ThemeType};
+    LibraryProps & {children: ReactNode; theme: Theme};
 
 /**
  * @public

src/lib/RootTheme/RootThemeProvider.tsx

@@ -1,8 +1,7 @@
 import {useCallback, useMemo, useRef} from 'react';
 import type {CSSProperties} from 'react';
-import type {ThemeType} from 'css-vars-hook';
 
-import type {UnitType} from '@/lib/UnitType';
+import type {UnitType, Theme} from '@/lib/ThemeType.ts';
 
 import {
     createStyleObject,
@@ -18,13 +17,13 @@ import type {HookInterface} from './HookInterfaceType';
  * Logic for root theme handling such as updates and CSS style creation
  */
 export const useRootTheme = (
-    theme: ThemeType,
+    theme: Theme,
     id: string
 ): HookInterface & {style: CSSProperties} => {
     const themeRef = useRef(theme);
 
     const setTheme = useCallback(
-        (nextTheme: ThemeType) => {
+        (nextTheme: Theme) => {
             setRootTheme(id)(nextTheme);
             themeRef.current = nextTheme;
         },

src/lib/RootTheme/useRootTheme.ts

@@ -0,0 +1,3 @@
+export type UnitType = string | number;
+
+export type Theme = Record<string, UnitType>;

src/lib/ThemeType.ts

@@ -2,5 +2,5 @@ export {useRootTheme, RootThemeProvider} from './RootTheme';
 export type {RootThemeProviderProps} from './RootTheme';
 export {useLocalTheme} from './LocalTheme';
 export type {LocalRootProps} from './LocalTheme';
-export type {UnitType} from './UnitType';
+export type {UnitType} from './ThemeType.ts';
 export type {LibraryProps, DataAttributes, DataAttributeKey} from './NativeProps';

src/lib/UnitType.ts

@@ -1,7 +1,6 @@
 import type {MutableRefObject, CSSProperties} from 'react';
-import type {ThemeType} from 'css-vars-hook';
 
-import type {UnitType} from '@/lib/UnitType';
+import type {UnitType, Theme} from '@/lib/ThemeType.ts';
 
 const normalizeUnit = (unit: UnitType) => {
     if (typeof unit === 'string') {
@@ -13,9 +12,9 @@ const normalizeUnit = (unit: UnitType) => {
 /**
  * Add `--` prefix to property names in theme object in order to make it applicable to DOM node
  */
-export const createStyleObject = (theme: ThemeType): CSSProperties => {
+export const createStyleObject = (theme: Theme): CSSProperties => {
     const keys = Object.keys(theme);
-    const result = {} as ThemeType;
+    const result: Record<string, UnitType> = {};
     keys.forEach(key => {
         result[`--${key}`] = theme[key];
     });
@@ -25,7 +24,7 @@ export const createStyleObject = (theme: ThemeType): CSSProperties => {
 /**
  * Add `--` prefix to property names in theme object in order to make it applicable to DOM node
  */
-export const createStyleString = (theme: ThemeType) => {
+export const createStyleString = (theme: Theme) => {
     const keys = Object.keys(theme);
     let result = '';
     keys.forEach(key => {
@@ -37,7 +36,7 @@ export const createStyleString = (theme: ThemeType) => {
 /**
  * Set CSS theme at the provided DOM node
  */
-export const setCSSTheme = (element: HTMLElement) => (theme: ThemeType) => {
+export const setCSSTheme = (element: HTMLElement) => (theme: Theme) => {
     const style = createStyleString(theme);
     element?.setAttribute('style', style);
 };
@@ -71,7 +70,7 @@ export const getCSSVariable =
 /**
  * Set new theme be replacing `style` attribute content
  */
-export const setRootTheme = (id: string) => (theme: ThemeType) => {
+export const setRootTheme = (id: string) => (theme: Theme) => {
     const root = document.getElementById(id)!;
     const style = createStyleString(theme);
     root?.setAttribute('style', style);

src/lib/index.ts

@@ -3,12 +3,6 @@ declare module '*.module.css' {
     export default classes;
 }
 
-declare module 'css-vars-hook' {
-    import type {UnitType} from '@/lib';
-    /** The most common theme type */
-    export type ThemeType = Record<string, UnitType>;
-}
-
 declare module '*.png';
 declare module '*.svg';
 declare module '*.jpeg';