dooboolab-community/dooboo-ui

Custom theme type overrides default theme type properties.

DevYuns opened this issue · 1 comments

Describe the bug
Custom theme type overrides default theme type even though I just make a bg property.

The theme values are works but typescript complains.

image

To Reproduce
Steps to reproduce the behavior:

  1. Make a custom theme according to guide like below.
export const light = {
  bg: {
    default: '#FFFFFF',
  },
};

export type CustomAppTheme = typeof light & DoobooTheme;

export const dark = {
  bg: {
    default: '#232323',
  },
};

export const theme = {
  light,
  dark,
};
  1. Then, Create a type declaration file like below.
import '@emotion/react';
import type {DoobooTheme} from 'dooboo-ui';
import type {CustomAppTheme} from './theme';

type AllTheme = CustomAppTheme & DoobooTheme;

declare module '@emotion/react' {
  export interface Theme extends AllTheme {
    isMobile?: boolean;
    isTablet?: boolean;
    isDesktop?: boolean;
  }
}

declare module 'dooboo-ui' {
  export interface DoobooTheme extends AllTheme {
    isMobile?: boolean;
    isTablet?: boolean;
    isDesktop?: boolean;
  }
}

Expected behavior
Properties which are not customized should be typed.

@DevYuns The document wasn't clear on using custom theme. Here is how you can achieve it.

export type Theme = typeof light & DoobooThemeParams;

It is just a matter of typescript and not functionality.

Closing due to covered.