feat(Theme): improve token typing

packages/react/src/components/accordion/accordion-item.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
-import { Button } from '../buttons/button';
+import { ResolvedTheme } from '../../themes';
+import { Button } from '../buttons';
 import { Icon } from '../icon/icon';
 import { Heading, Type, Tag } from '../heading/heading';
 import { focus } from '../../utils/css-state';

packages/react/src/components/avatar/avatar.tsx

@@ -1,7 +1,7 @@
 import { useMemo, VoidFunctionComponent } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { getInitialsFromUsername } from '../../utils/user';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon } from '../icon/icon';

packages/react/src/components/buttons/abstract/styled.ts

@@ -1,5 +1,5 @@
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../../themes/theme';
+import { ResolvedTheme } from '../../../themes';
 import { focus } from '../../../utils/css-state';
 import { Size } from './types';
 

packages/react/src/components/buttons/icon-button.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ReactElement, Ref } from 'react';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { AvatarProps } from '../avatar/avatar';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';

packages/react/src/components/buttons/styled.ts

@@ -1,5 +1,5 @@
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { Icon } from '../icon/icon';
 import { Spinner } from '../spinner/spinner';
 import { AbstractButton } from './abstract/abstract-button';

packages/react/src/components/combobox/combobox.tsx

@@ -12,11 +12,11 @@ import {
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
-import { IconButton } from '../buttons/icon-button';
+import { IconButton } from '../buttons';
 import { Listbox, ListboxOption } from '../listbox/listbox';
 import { TooltipProps } from '../tooltip/tooltip';
 import { useAriaConditionalIds } from '../../hooks/use-aria-conditional-ids';

packages/react/src/components/date-picker/date-picker.tsx

@@ -20,11 +20,10 @@ import { parse } from 'date-fns';
 import datepickerCss from 'react-datepicker/dist/react-datepicker.min.css';
 import styled, { createGlobalStyle } from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { eventIsInside } from '../../utils/events';
 import { v4 as uuid } from '../../utils/uuid';
-import { AbstractButton } from '../buttons/abstract/abstract-button';
-import { Button } from '../buttons/button';
+import { AbstractButton, Button } from '../buttons';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
 import { Icon } from '../icon/icon';

packages/react/src/components/dropdown-list/dropdown-list.tsx

@@ -10,7 +10,7 @@ import {
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { isLetterOrNumber } from '../../utils/regex';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';

packages/react/src/components/field-container/field-container.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { InvalidField } from '../feedbacks/invalid-field';
 import { Label } from '../label/label';

packages/react/src/components/link/styled.ts

@@ -1,5 +1,5 @@
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { getButtonStyles } from '../buttons';
 import { LinkProps } from './types';

packages/react/src/components/lozenge/lozenge.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName } from '../icon/icon';
 

packages/react/src/components/radio-card-group/styled-components.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 
 interface DescriptionProps {

packages/react/src/components/search/search-input.tsx

@@ -3,7 +3,7 @@ import XIcon from 'feather-icons/dist/icons/x.svg';
 import { ChangeEvent, FocusEvent, KeyboardEvent, useCallback, useMemo, useRef, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { SearchButton } from '../buttons';

packages/react/src/components/sectional-banner/sectional-banner.tsx

@@ -10,7 +10,7 @@ import {
 import styled, { css, ThemedCssFunction } from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { Button, IconButton } from '../buttons';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';

packages/react/src/components/status/status.tsx

@@ -1,6 +1,6 @@
 import { VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 
 export type StatusType = 'enabled' | 'disabled' | 'blocked';
 

packages/react/src/components/stepper-input/stepper-input.tsx

@@ -13,7 +13,7 @@ import React, {
 import styled from 'styled-components';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { FieldContainer } from '../field-container/field-container';
 import { responsiveInputsStyle } from '../text-input/styles/inputs';

packages/react/src/components/table/table-row.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, ReactElement } from 'react';
 import { flexRender, Row } from '@tanstack/react-table';
 import styled, { css, FlattenInterpolation, ThemedStyledProps, ThemeProps } from 'styled-components';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { isLastColumnInAGroup } from './utils/table-utils';
 import { CustomCell } from './types';

packages/react/src/components/text-area/text-area.tsx

@@ -11,7 +11,7 @@ import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
 import { useId } from '../../hooks/use-id';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { FieldContainer } from '../field-container/field-container';
 import { inputsStyle } from '../text-input/styles/inputs';
 import { TooltipProps } from '../tooltip/tooltip';

packages/react/src/components/text-input/styles/inputs.tsx

@@ -1,5 +1,5 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components';
-import { ResolvedTheme } from '../../../themes/theme';
+import { ResolvedTheme } from '../../../themes';
 import { focus } from '../../../utils/css-state';
 import { DeviceContextProps } from '../../device-context-provider/device-context-provider';
 

packages/react/src/components/toast/toast-container.tsx

@@ -8,7 +8,7 @@ import styled, {
 } from 'styled-components';
 import { useToasts } from '../../hooks/use-toasts';
 import { useTranslation } from '../../i18n/use-translation';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { IconButton, IconButtonProps } from '../buttons/icon-button';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { Icon, IconName, IconProps } from '../icon/icon';

packages/react/src/components/toast/toasts-container.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { useShadowRoot } from 'react-shadow';
 import styled, { css, FlattenInterpolation, ThemeProps } from 'styled-components';
 import { useToasts } from '../../hooks/use-toasts';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { DeviceContextProps, useDeviceContext } from '../device-context-provider/device-context-provider';
 import { ToastContainer } from './toast-container';
 import { ToastPosition } from './toast-position';

packages/react/src/components/toggle-switch/toggle-switch.tsx

@@ -1,7 +1,7 @@
 import { useMemo, VoidFunctionComponent } from 'react';
 import styled from 'styled-components';
 import { useDataAttributes } from '../../hooks/use-data-attributes';
-import { ResolvedTheme } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';

packages/react/src/components/tooltip/tooltip.tsx

@@ -12,7 +12,7 @@ import {
 import { PopperOptions, TriggerType, usePopperTooltip } from 'react-popper-tooltip';
 import styled, { css } from 'styled-components';
 import { useTheme } from '../../hooks/use-theme';
-import { ResolvedTheme as ThemeType } from '../../themes/theme';
+import { ResolvedTheme } from '../../themes';
 import { focus } from '../../utils/css-state';
 import { v4 as uuid } from '../../utils/uuid';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
@@ -53,7 +53,7 @@ interface TooltipContainerProps {
 }
 
 interface TooltipColorProps {
-    theme: ThemeType;
+    theme: ResolvedTheme;
     variant: TooltipVariant;
 }
 
@@ -64,7 +64,7 @@ const tooltipColor = css<TooltipColorProps>`${({ theme, variant }) => {
     return theme.component['tooltip-popper-container-default-background-color'];
 }}`;
 
-const tooltipBorderColor = css<{ theme: ThemeType }>`${({ theme }) => theme.component['tooltip-popper-container-border-color']}`;
+const tooltipBorderColor = css<{ theme: ResolvedTheme }>`${({ theme }) => theme.component['tooltip-popper-container-border-color']}`;
 
 const TooltipContainer = styled.div<TooltipContainerProps>`
     background-color: ${tooltipColor};

packages/react/src/hooks/use-theme.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { ThemeContext } from 'styled-components';
-import { ResolvedTheme } from '../themes/theme';
+import { ResolvedTheme } from '../themes';
 
 export function useTheme(): ResolvedTheme {
     return useContext(ThemeContext);

packages/react/src/styled-components-theme.d.ts

@@ -1,4 +1,4 @@
-import { ResolvedTheme } from './themes/theme';
+import { ResolvedTheme } from './themes';
 
 declare module 'styled-components' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface

packages/react/src/themes/build-theme.ts

@@ -1,28 +1,30 @@
 import { devConsole } from '../utils/dev-console';
-import { ResolvedTheme, ThemeCustomization } from './theme';
+import { ResolvedTheme, ThemeCustomization, ThemeDeclaration } from './theme';
 import {
-    AliasTokenMap,
-    AliasTokens,
-    ComponentTokenMap,
+    AliasToken,
+    ComponentToken,
     defaultAliasTokens,
     defaultComponentTokens,
     defaultRefTokens,
-    isAliasToken,
-    isComponentToken,
-    isRefToken,
-    RefTokenMap,
-    RefTokens,
-    RefTokenValue,
-    ResolvedComponentTokens,
+    RefToken,
+    ResolvedTokenMap,
+    TokenValue,
+    TokenName,
 } from './tokens';
 
-interface CustomizedTheme {
-    ref: RefTokenMap;
-    alias: AliasTokenMap;
-    component: ComponentTokenMap;
+function isRefToken(tokenName: TokenName): tokenName is RefToken {
+    return tokenName in defaultRefTokens;
 }
 
-function customizeTheme(customization: ThemeCustomization): CustomizedTheme {
+function isAliasToken(tokenName: TokenName): tokenName is AliasToken {
+    return tokenName in defaultAliasTokens;
+}
+
+function isComponentToken(tokenName: TokenName): tokenName is ComponentToken {
+    return tokenName in defaultComponentTokens;
+}
+
+function customizeTheme(customization: ThemeCustomization): ThemeDeclaration {
     return {
         ref: { ...defaultRefTokens, ...customization.ref },
         alias: { ...defaultAliasTokens, ...customization.alias },
@@ -35,10 +37,10 @@ export function buildTheme(customization: ThemeCustomization): ResolvedTheme {
 
     const resolvedTheme: ResolvedTheme = {
         ...customizedTheme,
-        component: {} as ResolvedComponentTokens,
+        component: {} as ResolvedTokenMap<ComponentToken>,
     };
 
-    function resolveToken(token: AliasTokens | RefTokens): RefTokenValue {
+    function resolveToken(token: AliasToken | RefToken): TokenValue {
         if (isRefToken(token)) {
             return resolvedTheme.ref[token];
         }

packages/react/src/themes/index.ts

@@ -1,3 +1,4 @@
 export * from './equisoft';
 export * from './tokens';
 export * from './build-theme';
+export * from './theme';

packages/react/src/themes/theme.ts

@@ -1,13 +1,27 @@
-import { AliasTokenMap, ComponentTokenMap, RefTokenMap, ResolvedAliasTokens, ResolvedComponentTokens } from './tokens';
+import type {
+    AliasToken,
+    AliasTokenMap,
+    ComponentToken,
+    ComponentTokenMap,
+    RefToken,
+    RefTokenMap,
+    ResolvedTokenMap,
+} from './tokens';
 
-export interface ThemeCustomization {
-    ref?: Partial<RefTokenMap>;
-    alias?: Partial<AliasTokenMap>;
-    component?: Partial<ComponentTokenMap>;
+export interface ThemeDeclaration {
+    ref: RefTokenMap<RefToken>;
+    alias: AliasTokenMap<AliasToken>;
+    component: ComponentTokenMap<ComponentToken>;
+}
+
+export type ThemeCustomization = {
+    ref?: Partial<RefTokenMap<RefToken>>;
+    alias?: Partial<AliasTokenMap<AliasToken>>;
+    component?: Partial<ComponentTokenMap<ComponentToken>>;
 }
 
 export interface ResolvedTheme {
-    ref: RefTokenMap;
-    alias: ResolvedAliasTokens;
-    component: ResolvedComponentTokens;
+    ref: ResolvedTokenMap<RefToken>;
+    alias: ResolvedTokenMap<AliasToken>;
+    component: ResolvedTokenMap<ComponentToken>;
 }