fix: make theme variables and styles extensible (#292)

* fix: make theme variables and styles extensible

* make css in js extensible

* fix type issues

CHANGELOG.md

@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix for `RadioGroup`: made `label` accept react nodes as value and fixed keyboard navigation @Bugaa92 ([#287](https://github.com/stardust-ui/react/pull/287))
 - Make `debug` a runtime dependency ([#301](https://github.com/stardust-ui/react/issues/301))
 - Fix duplicated handling of 'change' event by `Input` @kuzhelov ([#310](https://github.com/stardust-ui/react/pull/310))
+- Make theme variables and styles types extensible @levithomason ([#292](https://github.com/stardust-ui/react/pull/292))
 
 ### Features
 - Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -1,6 +1,6 @@
 import { pxToRem } from '../../../../lib'
 import {
-  ComponentPartStyle,
+  ComponentPartStyleFunction,
   IComponentPartStylesInput,
   ICSSInJSStyle,
 } from '../../../../../types/theme'
@@ -39,7 +39,7 @@ const getActionStyles = ({
           background: v.defaultActiveBackgroundColor,
         }
 
-const itemSeparator: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
+const itemSeparator: ComponentPartStyleFunction<IMenuItemProps, IMenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {
@@ -72,7 +72,7 @@ const itemSeparator: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
   )
 }
 
-const pointingBeak: ComponentPartStyle<IMenuItemProps, IMenuVariables> = ({
+const pointingBeak: ComponentPartStyleFunction<IMenuItemProps, IMenuVariables> = ({
   props,
   variables: v,
 }): ICSSInJSStyle => {
@@ -264,7 +264,7 @@ const menuItemStyles: IComponentPartStylesInput<MenuItemProps, IMenuVariables> =
         ...(type === 'primary'
           ? {
               ...(iconOnly && { color: v.typePrimaryActiveBorderColor }),
-              ...(!active && underlined && underlinedItem(v.typePrimaryHoverBorderColor)),
+              ...(!active && underlined && underlinedItem(v.typePrimaryHoverBorderColor as string)),
             }
           : !active && underlined && underlinedItem(v.defaultActiveBackgroundColor)),
       },

types/theme.d.ts

@@ -60,6 +60,9 @@ export interface ICSSPseudoElementStyle extends ICSSInJSStyle {
 }
 
 export interface ICSSInJSStyle extends React.CSSProperties {
+  // TODO Questionable: how else would users target their own children?
+  [key: string]: any
+
   // missing React.CSSProperties
   speak?: CSSType.Globals | 'none' | 'normal' | 'spell-out'
 
@@ -163,72 +166,142 @@ export interface IThemePrepared {
 }
 
 export interface IThemeComponentStylesInput {
+  [key: string]: IComponentPartStylesInput
+
   Accordion?: IComponentPartStylesInput
+  Attachment?: IComponentPartStylesInput
   Avatar?: IComponentPartStylesInput
   Button?: IComponentPartStylesInput
+  ButtonGroup?: IComponentPartStylesInput
   Chat?: IComponentPartStylesInput
+  ChatItem?: IComponentPartStylesInput
+  ChatMessage?: IComponentPartStylesInput
   Divider?: IComponentPartStylesInput
+  Grid?: IComponentPartStylesInput
   Header?: IComponentPartStylesInput
+  HeaderDescription?: IComponentPartStylesInput
   Icon?: IComponentPartStylesInput
   Image?: IComponentPartStylesInput
   Input?: IComponentPartStylesInput
+  ItemLayout?: IComponentPartStylesInput
   Label?: IComponentPartStylesInput
   Layout?: IComponentPartStylesInput
   List?: IComponentPartStylesInput
   ListItem?: IComponentPartStylesInput
   Menu?: IComponentPartStylesInput
+  MenuItem?: IComponentPartStylesInput
+  Portal?: IComponentPartStylesInput
+  Popup?: IComponentPartStylesInput
+  PopupContent?: IComponentPartStylesInput
+  RadioGroup?: IComponentPartStylesInput
+  RadioGroupItem?: IComponentPartStylesInput
+  Segment?: IComponentPartStylesInput
+  Status?: IComponentPartStylesInput
   Text?: IComponentPartStylesInput
 }
 
 export interface IThemeComponentStylesPrepared {
+  [key: string]: IComponentPartStylesPrepared
+
   Accordion?: IComponentPartStylesPrepared
+  Attachment?: IComponentPartStylesPrepared
   Avatar?: IComponentPartStylesPrepared
   Button?: IComponentPartStylesPrepared
+  ButtonGroup?: IComponentPartStylesPrepared
   Chat?: IComponentPartStylesPrepared
+  ChatItem?: IComponentPartStylesPrepared
+  ChatMessage?: IComponentPartStylesPrepared
   Divider?: IComponentPartStylesPrepared
+  Grid?: IComponentPartStylesPrepared
   Header?: IComponentPartStylesPrepared
+  HeaderDescription?: IComponentPartStylesPrepared
   Icon?: IComponentPartStylesPrepared
   Image?: IComponentPartStylesPrepared
   Input?: IComponentPartStylesPrepared
+  ItemLayout?: IComponentPartStylesPrepared
   Label?: IComponentPartStylesPrepared
   Layout?: IComponentPartStylesPrepared
   List?: IComponentPartStylesPrepared
   ListItem?: IComponentPartStylesPrepared
   Menu?: IComponentPartStylesPrepared
+  MenuItem?: IComponentPartStylesPrepared
+  Portal?: IComponentPartStylesPrepared
+  Popup?: IComponentPartStylesPrepared
+  PopupContent?: IComponentPartStylesPrepared
+  RadioGroup?: IComponentPartStylesPrepared
+  RadioGroupItem?: IComponentPartStylesPrepared
+  Segment?: IComponentPartStylesPrepared
+  Status?: IComponentPartStylesPrepared
   Text?: IComponentPartStylesPrepared
 }
 
 export interface IThemeComponentVariablesInput {
+  [key: string]: any
+
   Accordion?: ComponentVariablesInput
+  Attachment?: ComponentVariablesInput
   Avatar?: ComponentVariablesInput
   Button?: ComponentVariablesInput
+  ButtonGroup?: ComponentVariablesInput
   Chat?: ComponentVariablesInput
+  ChatItem?: ComponentVariablesInput
+  ChatMessage?: ComponentVariablesInput
   Divider?: ComponentVariablesInput
+  Grid?: ComponentVariablesInput
   Header?: ComponentVariablesInput
+  HeaderDescription?: ComponentVariablesInput
   Icon?: ComponentVariablesInput
   Image?: ComponentVariablesInput
   Input?: ComponentVariablesInput
+  ItemLayout?: ComponentVariablesInput
   Label?: ComponentVariablesInput
   Layout?: ComponentVariablesInput
+  List?: ComponentVariablesInput
   ListItem?: ComponentVariablesInput
   Menu?: ComponentVariablesInput
+  MenuItem?: ComponentVariablesInput
+  Portal?: ComponentVariablesInput
+  Popup?: ComponentVariablesInput
+  PopupContent?: ComponentVariablesInput
+  RadioGroup?: ComponentVariablesInput
+  RadioGroupItem?: ComponentVariablesInput
+  Segment?: ComponentVariablesInput
+  Status?: ComponentVariablesInput
   Text?: ComponentVariablesInput
 }
 
 export interface IThemeComponentVariablesPrepared {
+  [key: string]: any
+
   Accordion?: ComponentVariablesPrepared
+  Attachment?: ComponentVariablesPrepared
   Avatar?: ComponentVariablesPrepared
   Button?: ComponentVariablesPrepared
+  ButtonGroup?: ComponentVariablesPrepared
   Chat?: ComponentVariablesPrepared
+  ChatItem?: ComponentVariablesPrepared
+  ChatMessage?: ComponentVariablesPrepared
   Divider?: ComponentVariablesPrepared
+  Grid?: ComponentVariablesPrepared
   Header?: ComponentVariablesPrepared
+  HeaderDescription?: ComponentVariablesPrepared
   Icon?: ComponentVariablesPrepared
   Image?: ComponentVariablesPrepared
   Input?: ComponentVariablesPrepared
+  ItemLayout?: ComponentVariablesPrepared
   Label?: ComponentVariablesPrepared
   Layout?: ComponentVariablesPrepared
+  List?: ComponentVariablesPrepared
   ListItem?: ComponentVariablesPrepared
   Menu?: ComponentVariablesPrepared
+  MenuItem?: ComponentVariablesPrepared
+  Portal?: ComponentVariablesPrepared
+  Popup?: ComponentVariablesPrepared
+  PopupContent?: ComponentVariablesPrepared
+  RadioGroup?: ComponentVariablesPrepared
+  RadioGroupItem?: ComponentVariablesPrepared
+  Segment?: ComponentVariablesPrepared
+  Status?: ComponentVariablesPrepared
   Text?: ComponentVariablesPrepared
 }