@aws-amplify/ui 5.0.0 → 5.1.0

package/dist/types/helpers/authenticator/textUtil.d.ts

@@ -8,17 +8,19 @@ export declare const authenticatorTextUtil: {
     readonly getConfirmText: () => string;
     readonly getConfirmingText: () => string;
     readonly getCopyText: () => string;
+    readonly getHidePasswordText: () => string;
+    readonly getLoadingText: () => string;
     readonly getResendCodeText: () => string;
     readonly getSendCodeText: () => string;
     readonly getSendingText: () => string;
+    readonly getShowPasswordText: () => string;
     readonly getSubmitText: () => string;
     readonly getSubmittingText: () => string;
-    readonly getLoadingText: () => string;
     /** SignInSignUpTabs */
     readonly getSignInTabText: () => string;
     readonly getSignUpTabText: () => string;
     /** SignIn */
-    readonly getForgotPasswordText: () => string;
+    readonly getForgotPasswordText: (shortVersion?: boolean) => string;
     readonly getSigningInText: () => string;
     readonly getSignInText: () => string;
     /** SignUp */
@@ -33,6 +35,7 @@ export declare const authenticatorTextUtil: {
     readonly getResetYourPasswordText: () => string;
     /** SetupTOTP */
     readonly getSetupTOTPText: () => string;
+    readonly getSetupTOTPInstructionsText: () => string;
     readonly getCopiedText: () => string;
     /** FederatedSignIn */
     readonly getSignInWithFederationText: (route: AuthenticatorRoute, provider: SocialProvider) => string;

package/dist/types/i18n/dictionaries/authenticator/defaultTexts.d.ts

@@ -19,6 +19,7 @@ export declare const defaultTexts: {
     ENTER_USERNAME: string;
     FAMILY_NAME: string;
     GIVEN_NAME: string;
+    FORGOT_PASSWORD: string;
     FORGOT_YOUR_PASSWORD: string;
     HIDE_PASSWORD: string;
     LOADING: string;
@@ -50,6 +51,7 @@ export declare const defaultTexts: {
     SKIP: string;
     SUBMIT: string;
     SUBMITTING: string;
+    UPPERCASE_COPY: string;
     VERIFY_CONTACT: string;
     VERIFY_HEADING: string;
     VERIFY: string;

package/dist/types/i18n/dictionaries/index.d.ts

@@ -799,6 +799,7 @@ export declare const defaultTexts: {
     ENTER_USERNAME: string;
     FAMILY_NAME: string;
     GIVEN_NAME: string;
+    FORGOT_PASSWORD: string;
     FORGOT_YOUR_PASSWORD: string;
     HIDE_PASSWORD: string;
     LOADING: string;
@@ -830,6 +831,7 @@ export declare const defaultTexts: {
     SKIP: string;
     SUBMIT: string;
     SUBMITTING: string;
+    UPPERCASE_COPY: string;
     VERIFY_CONTACT: string;
     VERIFY_HEADING: string;
     VERIFY: string;

package/dist/types/i18n/translations.d.ts

@@ -31,6 +31,7 @@ export declare const DefaultTexts: {
     readonly ENTER_USERNAME: string;
     readonly FAMILY_NAME: string;
     readonly GIVEN_NAME: string;
+    readonly FORGOT_PASSWORD: string;
     readonly FORGOT_YOUR_PASSWORD: string;
     readonly HIDE_PASSWORD: string;
     readonly LOADING: string;
@@ -62,6 +63,7 @@ export declare const DefaultTexts: {
     readonly SKIP: string;
     readonly SUBMIT: string;
     readonly SUBMITTING: string;
+    readonly UPPERCASE_COPY: string;
     readonly VERIFY_CONTACT: string;
     readonly VERIFY_HEADING: string;
     readonly VERIFY: string;

package/dist/types/theme/createTheme.d.ts

@@ -1,4 +1,4 @@
-import { Theme, BaseTheme, WebTheme } from './types';
+import { Theme, DefaultTheme, WebTheme } from './types';
 /**
  * This will be used like `const myTheme = createTheme({})`
  * `myTheme` can then be passed to a Provider or the generated CSS
@@ -6,4 +6,4 @@ import { Theme, BaseTheme, WebTheme } from './types';
  * const myTheme = createTheme({})
  * const myOtherTheme = createTheme({}, myTheme);
  */
-export declare function createTheme(theme?: Theme, baseTheme?: BaseTheme): WebTheme;
+export declare function createTheme(theme?: Theme, DefaultTheme?: DefaultTheme | WebTheme): WebTheme;

package/dist/types/theme/defaultDarkModeOverride.d.ts

@@ -1,6 +1,8 @@
 import { ColorModeOverride } from './types';
+import { ReactNativeTokens } from './tokens';
 /**
  * A basic dark mode that just flips the base color
  * palette.
  */
 export declare const defaultDarkModeOverride: ColorModeOverride;
+export declare const reactNativeDarkTokens: ReactNativeTokens<'optional'>;

package/dist/types/theme/defaultTheme.d.ts

@@ -1,2 +1,2 @@
-import { BaseTheme } from './types';
-export declare const defaultTheme: BaseTheme;
+import { DefaultTheme } from './types';
+export declare const defaultTheme: DefaultTheme;

package/dist/types/theme/index.d.ts

@@ -1,5 +1,6 @@
 export { createTheme } from './createTheme';
 export { defaultTheme } from './defaultTheme';
-export { defaultDarkModeOverride } from './defaultDarkModeOverride';
+export { defaultDarkModeOverride, reactNativeDarkTokens, } from './defaultDarkModeOverride';
+export { reactNativeTokens, ReactNativeTokens } from './tokens';
 export * from './types';
-export { cssNameTransform } from './utils';
+export { cssNameTransform, isDesignToken, setupTokens, SetupToken, } from './utils';

package/dist/types/theme/tokens/borderWidths.d.ts

@@ -1,19 +1,5 @@
-import { DesignToken, WebDesignToken, BorderWidthValue } from './types/designToken';
-export declare type BorderWidths = {
-    /**
-     * Small border, used for inputs and such
-     */
-    small: DesignToken<BorderWidthValue>;
-    /**
-     * Medium border, used for
-     */
-    medium: DesignToken<BorderWidthValue>;
-    /**
-     * Large border
-     */
-    large: DesignToken<BorderWidthValue>;
-};
-export declare type WebBorderWidths = {
-    [Property in keyof BorderWidths]: WebDesignToken<BorderWidthValue>;
-};
-export declare const borderWidths: BorderWidths;
+import { BorderWidthValue, DesignTokenValues, OutputVariantKey } from './types/designToken';
+declare type BorderWidthSize = 'small' | 'medium' | 'large';
+export declare type BorderWidths<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<DesignTokenValues<BorderWidthSize, BorderWidthValue<Platform, Output>, Output, Platform>> : Partial<DesignTokenValues<BorderWidthSize, BorderWidthValue<Platform, Output>, Output, Platform>>;
+export declare const borderWidths: BorderWidths<'default'>;
+export {};

package/dist/types/theme/tokens/colors.d.ts

@@ -1,77 +1,38 @@
-import { DesignToken, WebDesignToken, ColorValue } from './types/designToken';
-import { OrdinalScale, OrdinalVariation } from './types/scales';
-declare type ScaleKeys = 10 | 20 | 40 | 60 | 80 | 90 | 100;
-declare type OverlayKeys = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
-declare type ColorScale<DesignTokenType = DesignToken<ColorValue>> = {
-    [key in ScaleKeys]: DesignTokenType;
+import { ColorValue, DesignTokenValues, OutputVariantKey } from './types/designToken';
+/**
+ * Util type for creating color interfaces using `ColorValue` from string and number unions
+ */
+declare type BaseColorValues<VariantKey extends string | number, Output, Platform = unknown> = DesignTokenValues<VariantKey, ColorValue, Output, Platform>;
+declare type ColorValues<VariantKey extends string | number, Output, Platform = unknown> = Output extends 'required' | 'default' ? BaseColorValues<VariantKey, Output, Platform> : Partial<BaseColorValues<VariantKey, Output, Platform>>;
+/**
+ * Util type for creating nested color scale interfaces from variant keys
+ */
+declare type BaseColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Record<VariantKey, ColorValues<ScaleKey, Output, Platform>>;
+declare type ColorValueScale<VariantKey extends string | number, Output, Platform = unknown> = Output extends 'required' | 'default' ? BaseColorValueScale<VariantKey, Output, Platform> : Partial<BaseColorValueScale<VariantKey, Output, Platform>>;
+declare type ScaleKey = 10 | 20 | 40 | 60 | 80 | 90 | 100;
+declare type OverlayKey = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
+declare type ColorPaletteKey = 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple' | 'pink' | 'neutral';
+declare type GreyscalePaletteKey = 'white' | 'black' | 'transparent';
+declare type OrderVariant = 'primary' | 'secondary' | 'tertiary';
+declare type OrderVariantKey<Output = unknown> = Output extends 'default' ? Exclude<OrderVariant, 'quaternary'> : OrderVariant;
+declare type InformationVariantKey = 'info' | 'warning' | 'error' | 'success';
+declare type WebStateVariantKey = 'active' | 'disabled' | 'error' | 'hover' | 'focus' | 'pressed';
+declare type ReactNativeStateVariantKey = Exclude<WebStateVariantKey, 'focused' | 'hover'>;
+declare type StateVariantKey<Platform> = Platform extends 'react-native' ? ReactNativeStateVariantKey : WebStateVariantKey;
+declare type BrandVariantKey = Extract<OrderVariantKey, 'primary' | 'secondary'>;
+declare type FontVariantKey<Output, Platform> = 'inverse' | 'interactive' | Extract<StateVariantKey<Platform>, 'active' | 'disabled' | 'hover' | 'focus'> | OrderVariantKey<Output> | InformationVariantKey;
+declare type BackgroundColorKey<Platform> = Extract<StateVariantKey<Platform>, 'disabled'> | OrderVariantKey | InformationVariantKey | 'quaternary';
+declare type BorderColorKey<Output, Platform> = Extract<StateVariantKey<Platform>, 'disabled' | 'error'> | OrderVariantKey<Output> | (Output extends 'default' ? Exclude<StateVariantKey<Platform>, 'active' | 'hover'> : StateVariantKey<Platform>);
+declare type PaletteValues<Output, Platform> = ColorValueScale<ColorPaletteKey, Output, Platform>;
+declare type GreyscaleColors<Output, Platform> = ColorValues<GreyscalePaletteKey, Output, Platform>;
+declare type BaseColors<Output extends OutputVariantKey = unknown, Platform = unknown> = PaletteValues<Output, Platform> & GreyscaleColors<Output, Platform> & {
+    brand?: ColorValueScale<BrandVariantKey, Output, Platform>;
+    background?: ColorValues<BackgroundColorKey<Platform>, Output, Platform>;
+    border?: ColorValues<BorderColorKey<Output, Platform>, Output, Platform>;
+    font?: ColorValues<FontVariantKey<Output, Platform>, Output, Platform>;
+    overlay?: ColorValues<OverlayKey, Output, Platform>;
+    shadow?: ColorValues<OrderVariantKey, Output, Platform>;
 };
-declare type OverlayColors<DesignTokenType = DesignToken<ColorValue>> = {
-    [key in OverlayKeys]: DesignTokenType;
-};
-declare type FontColors<DesignTokenType = DesignToken<ColorValue>> = {
-    inverse: DesignTokenType;
-    interactive: DesignTokenType;
-    hover: DesignTokenType;
-    focus: DesignTokenType;
-    active: DesignTokenType;
-    disabled: DesignTokenType;
-} & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
-declare type BackgroundColors<DesignTokenType = DesignToken<ColorValue>> = {
-    disabled: DesignTokenType;
-} & OrdinalScale<DesignTokenType> & OrdinalVariation<DesignTokenType>;
-declare type BorderColors<DesignTokenType = DesignToken<ColorValue>> = {
-    disabled: DesignTokenType;
-    pressed: DesignTokenType;
-    focus: DesignTokenType;
-    error: DesignTokenType;
-} & OrdinalScale<DesignTokenType>;
-declare type ColorTypes<DesignTokenType = DesignToken<ColorValue>> = {
-    [key in ScaleKeys]: DesignTokenType;
-} | FontColors | BackgroundColors | DesignTokenType | BorderColors;
-declare type WebColorTypes = ColorTypes<WebDesignToken<ColorValue>>;
-export declare type Colors = {
-    red: ColorScale;
-    orange: ColorScale;
-    yellow: ColorScale;
-    green: ColorScale;
-    teal: ColorScale;
-    blue: ColorScale;
-    purple: ColorScale;
-    pink: ColorScale;
-    neutral: ColorScale;
-    white: DesignToken<ColorValue>;
-    black: DesignToken<ColorValue>;
-    font: FontColors;
-    background: BackgroundColors;
-    border: BorderColors;
-    brand: {
-        primary: ColorScale;
-        secondary: ColorScale;
-    };
-    overlay: OverlayColors;
-    [key: string]: ColorTypes | Record<string, ColorTypes>;
-};
-export declare type WebColors = {
-    red: ColorScale<WebDesignToken<ColorValue>>;
-    orange: ColorScale<WebDesignToken<ColorValue>>;
-    yellow: ColorScale<WebDesignToken<ColorValue>>;
-    green: ColorScale<WebDesignToken<ColorValue>>;
-    teal: ColorScale<WebDesignToken<ColorValue>>;
-    blue: ColorScale<WebDesignToken<ColorValue>>;
-    purple: ColorScale<WebDesignToken<ColorValue>>;
-    pink: ColorScale<WebDesignToken<ColorValue>>;
-    neutral: ColorScale<WebDesignToken<ColorValue>>;
-    white: WebDesignToken<ColorValue>;
-    black: WebDesignToken<ColorValue>;
-    font: FontColors<WebDesignToken<ColorValue>>;
-    background: BackgroundColors<WebDesignToken<ColorValue>>;
-    border: BorderColors<WebDesignToken<ColorValue>>;
-    brand: {
-        primary: ColorScale<WebDesignToken<ColorValue>>;
-        secondary: ColorScale<WebDesignToken<ColorValue>>;
-    };
-    overlay: OverlayColors<WebDesignToken<ColorValue>>;
-    [key: string]: WebColorTypes | Record<string, WebColorTypes>;
-};
-export declare const colors: Colors;
+export declare type Colors<Output extends OutputVariantKey = unknown, Platform = unknown> = (Output extends 'required' | 'default' ? Required<BaseColors<Output, Platform>> : BaseColors<Output, Platform>) & Record<string, any>;
+export declare const colors: Colors<'default'>;
 export {};

package/dist/types/theme/tokens/components/alert.d.ts

@@ -1,28 +1,15 @@
-import { AlignItemsValue, BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, SpaceValue } from '../types/designToken';
-interface AlertVariationTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface AlertIconTokens {
-    size: DesignToken<FontSizeValue>;
-}
-interface AlertHeadingTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-}
-export interface AlertTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    paddingBlock: DesignToken<SpaceValue>;
-    paddingInline: DesignToken<SpaceValue>;
-    icon: AlertIconTokens;
-    heading: AlertHeadingTokens;
-    info: AlertVariationTokens;
-    error: AlertVariationTokens;
-    warning: AlertVariationTokens;
-    success: AlertVariationTokens;
-}
-export declare const alert: AlertTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type AlertVariationTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'color', OutputType>;
+declare type AlertIconTokens<OutputType> = DesignTokenProperties<'size', OutputType>;
+declare type AlertHeadingTokens<OutputType> = DesignTokenProperties<'fontSize' | 'fontWeight', OutputType>;
+declare type AlertTokenKey = 'alignItems' | 'justifyContent' | 'color' | 'backgroundColor' | 'paddingBlock' | 'paddingInline';
+export declare type AlertTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<AlertTokenKey, OutputType> & {
+    icon?: AlertIconTokens<OutputType>;
+    heading?: AlertHeadingTokens<OutputType>;
+    info?: AlertVariationTokens<OutputType>;
+    error?: AlertVariationTokens<OutputType>;
+    warning?: AlertVariationTokens<OutputType>;
+    success?: AlertVariationTokens<OutputType>;
+};
+export declare const alert: Required<AlertTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/authenticator.d.ts

@@ -1,47 +1,27 @@
-import { DesignToken, ColorValue, SpaceValue, BorderWidthValue, BorderColorValue, BackgroundColorValue, BorderStyleValue, BoxShadowValue } from '../types/designToken';
-interface AuthenticatorModalTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    top: DesignToken<SpaceValue>;
-    left: DesignToken<SpaceValue>;
-}
-interface AuthenticatorRouterTokens {
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface AuthenticatorFooterTokens {
-    paddingBottom: DesignToken<SpaceValue>;
-}
-interface AuthenticatorFormTokens {
-    padding: DesignToken<SpaceValue>;
-}
-interface AuthenticatorStateTokens {
-    inactive: {
-        backgroundColor: DesignToken<BackgroundColorValue>;
-    };
-}
-interface AuthenticatorOrContainerTokens {
-    color: DesignToken<ColorValue>;
-    orLine: {
-        backgroundColor: DesignToken<BackgroundColorValue>;
-    };
-}
-interface AuthenticatorContainerToken {
-    widthMax: DesignToken<SpaceValue>;
-}
-export interface AuthenticatorTokens {
-    maxWidth: DesignToken<SpaceValue>;
-    modal: AuthenticatorModalTokens;
-    container: AuthenticatorContainerToken;
-    router: AuthenticatorRouterTokens;
-    footer: AuthenticatorFooterTokens;
-    form: AuthenticatorFormTokens;
-    state: AuthenticatorStateTokens;
-    orContainer: AuthenticatorOrContainerTokens;
-}
-export declare const authenticator: AuthenticatorTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ModalTokenKey = 'width' | 'height' | 'backgroundColor' | 'top' | 'left';
+declare type AuthenticatorModalTokens<OutputType> = DesignTokenProperties<ModalTokenKey, OutputType>;
+declare type RouterKey = 'borderWidth' | 'borderStyle' | 'borderColor' | 'backgroundColor' | 'boxShadow';
+declare type AuthenticatorRouterTokens<OutputType> = DesignTokenProperties<RouterKey, OutputType>;
+declare type AuthenticatorFooterTokens<OutputType> = DesignTokenProperties<'paddingBottom', OutputType>;
+declare type AuthenticatorFormTokens<OutputType> = DesignTokenProperties<'padding', OutputType>;
+declare type AuthenticatorStateTokens<OutputType> = {
+    inactive?: DesignTokenProperties<'backgroundColor', OutputType>;
+};
+declare type AuthenticatorOrContainerTokens<OutputType> = DesignTokenProperties<'color', OutputType> & {
+    orLine?: DesignTokenProperties<'backgroundColor', OutputType>;
+};
+declare type AuthenticatorContainerToken<OutputType> = {
+    widthMax?: DesignTokenProperties<'maxWidth', OutputType>['maxWidth'];
+};
+export declare type AuthenticatorTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'maxWidth', OutputType> & {
+    modal?: AuthenticatorModalTokens<OutputType>;
+    container?: AuthenticatorContainerToken<OutputType>;
+    router?: AuthenticatorRouterTokens<OutputType>;
+    footer?: AuthenticatorFooterTokens<OutputType>;
+    form?: AuthenticatorFormTokens<OutputType>;
+    state?: AuthenticatorStateTokens<OutputType>;
+    orContainer?: AuthenticatorOrContainerTokens<OutputType>;
+};
+export declare const authenticator: Required<AuthenticatorTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/autocomplete.d.ts

@@ -1,42 +1,13 @@
-import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderWidthValue, BorderStyleValue, BorderRadiusValue, ColorValue, CursorValue, DesignToken, DisplayValue, FlexDirectionValue, SpaceValue, TransitionDurationValue, TransitionPropertyValue, TransitionTimingFunctionValue } from '../types/designToken';
-export interface AutocompleteTokens {
-    menu: {
-        width: DesignToken<SpaceValue>;
-        marginBlockStart: DesignToken<SpaceValue>;
-        backgroundColor: DesignToken<BackgroundColorValue>;
-        borderColor: DesignToken<BorderColorValue>;
-        borderWidth: DesignToken<BorderWidthValue>;
-        borderStyle: DesignToken<BorderStyleValue>;
-        borderRadius: DesignToken<BorderRadiusValue>;
-        options: {
-            display: DesignToken<DisplayValue>;
-            flexDirection: DesignToken<FlexDirectionValue>;
-            maxHeight: DesignToken<SpaceValue>;
-        };
-        option: {
-            backgroundColor: DesignToken<BackgroundColorValue>;
-            color: DesignToken<ColorValue>;
-            cursor: DesignToken<CursorValue>;
-            transitionDuration: DesignToken<TransitionDurationValue>;
-            transitionProperty: DesignToken<TransitionPropertyValue>;
-            transitionTimingFunction: DesignToken<TransitionTimingFunctionValue>;
-            _active: {
-                backgroundColor: DesignToken<BackgroundColorValue>;
-                color: DesignToken<ColorValue>;
-            };
-        };
-        _empty: {
-            display: DesignToken<DisplayValue>;
-        };
-        _loading: {
-            alignItems: DesignToken<AlignItemsValue>;
-            display: DesignToken<DisplayValue>;
-            gap: DesignToken<SpaceValue>;
-        };
-        spaceShared: {
-            paddingBlock: DesignToken<SpaceValue>;
-            paddingInline: DesignToken<SpaceValue>;
-        };
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type AutocompleteTokens<OutputType extends OutputVariantKey> = {
+    menu?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'marginBlockStart' | 'width', OutputType> & {
+        options: DesignTokenProperties<'display' | 'flexDirection' | 'maxHeight', OutputType>;
+        option: DesignTokenProperties<'backgroundColor' | 'color' | 'cursor' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction', OutputType> & {
+            _active: DesignTokenProperties<'backgroundColor' | 'color', OutputType>;
+        };
+        _empty: DesignTokenProperties<'display', OutputType>;
+        _loading: DesignTokenProperties<'alignItems' | 'display' | 'gap', OutputType>;
+        spaceShared: DesignTokenProperties<'paddingBlock' | 'paddingInline', OutputType>;
     };
-}
-export declare const autocomplete: AutocompleteTokens;
+};
+export declare const autocomplete: Required<AutocompleteTokens<'default'>>;

package/dist/types/theme/tokens/components/badge.d.ts

@@ -1,29 +1,16 @@
-import { BackgroundColorValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, LineHeightValue, RadiusValue, SpaceValue, TextAlignValue } from '../types/designToken';
-interface BadgeVariationTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface BadgeSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    paddingHorizontal: DesignToken<SpaceValue>;
-    paddingVertical: DesignToken<SpaceValue>;
-}
-export interface BadgeTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<RadiusValue>;
-    color: DesignToken<ColorValue>;
-    error: BadgeVariationTokens;
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-    info: BadgeVariationTokens;
-    large: BadgeSizeTokens;
-    lineHeight: DesignToken<LineHeightValue>;
-    paddingHorizontal: DesignToken<SpaceValue>;
-    paddingVertical: DesignToken<SpaceValue>;
-    small: BadgeSizeTokens;
-    success: BadgeVariationTokens;
-    textAlign: DesignToken<TextAlignValue>;
-    warning: BadgeVariationTokens;
-}
-export declare const badge: BadgeTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type VariationKey = 'backgroundColor' | 'color';
+declare type BadgeVariationTokens<OutputType> = DesignTokenProperties<VariationKey, OutputType>;
+declare type SizeKey = 'fontSize' | 'paddingHorizontal' | 'paddingVertical';
+declare type BadgeSizeTokens<OutputType> = DesignTokenProperties<SizeKey, OutputType>;
+declare type BadgeKey = 'backgroundColor' | 'borderRadius' | 'color' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'paddingHorizontal' | 'paddingVertical' | 'textAlign';
+export declare type BadgeTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<BadgeKey, OutputType> & {
+    error?: BadgeVariationTokens<OutputType>;
+    large?: BadgeSizeTokens<OutputType>;
+    small?: BadgeSizeTokens<OutputType>;
+    info?: BadgeVariationTokens<OutputType>;
+    success?: BadgeVariationTokens<OutputType>;
+    warning?: BadgeVariationTokens<OutputType>;
+};
+export declare const badge: Required<BadgeTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/button.d.ts

@@ -1,83 +1,40 @@
-import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, LineHeightValue, SpaceValue, TransitionDurationValue } from '../types/designToken';
-export interface StateTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-}
-interface StateWithShadowTokens extends StateTokens {
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface MenuStateDisabledTokens extends Omit<StateTokens, 'borderColor' | 'backgroundColor'> {
-}
-interface MenuStateTokens extends Omit<StateTokens, 'borderColor'> {
-}
-interface PrimaryVariationTokens {
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-    _disabled: StateTokens;
-    _loading: StateTokens;
-    _hover: StateTokens;
-    _focus: StateWithShadowTokens;
-    _active: StateTokens;
-}
-interface MenuVariationTokens {
-    borderWidth: DesignToken<BorderWidthValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-    _hover: MenuStateTokens;
-    _focus: MenuStateTokens;
-    _active: MenuStateTokens;
-    _disabled: MenuStateDisabledTokens;
-}
-interface LinkVariationTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    color: DesignToken<ColorValue>;
-    _hover: StateTokens;
-    _focus: StateWithShadowTokens;
-    _active: StateTokens;
-    _disabled: StateTokens;
-    _loading: StateTokens;
-}
-interface ButtonSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    paddingBlockStart: DesignToken<SpaceValue>;
-    paddingBlockEnd: DesignToken<SpaceValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-}
-export interface ButtonTokens {
-    fontWeight: DesignToken<FontWeightValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    lineHeight: DesignToken<LineHeightValue>;
-    paddingBlockStart: DesignToken<SpaceValue>;
-    paddingBlockEnd: DesignToken<SpaceValue>;
-    paddingInlineStart: DesignToken<SpaceValue>;
-    paddingInlineEnd: DesignToken<SpaceValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    color: DesignToken<ColorValue>;
-    _hover: StateTokens;
-    _focus: StateWithShadowTokens;
-    _active: StateTokens;
-    _loading: StateTokens;
-    _disabled: StateTokens;
-    primary: PrimaryVariationTokens;
-    menu: MenuVariationTokens;
-    link: LinkVariationTokens;
-    small: ButtonSizeTokens;
-    large: ButtonSizeTokens;
-    loaderWrapper: {
-        alignItems: DesignToken<AlignItemsValue>;
-        gap: DesignToken<SpaceValue>;
-    };
-}
-export declare const button: ButtonTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type StateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+declare type StateWithShadowTokens<Output> = StateTokens<Output> & DesignTokenProperties<'boxShadow', Output>;
+declare type MenuStateTokens<Output> = Omit<StateTokens<Output>, 'borderColor'>;
+declare type PrimaryVariationTokens<Output> = StateTokens<Output> & DesignTokenProperties<'borderStyle' | 'borderWidth', Output> & {
+    _disabled?: StateTokens<Output>;
+    _loading?: StateTokens<Output>;
+    _hover?: StateTokens<Output>;
+    _focus?: StateWithShadowTokens<Output>;
+    _active?: StateTokens<Output>;
+};
+declare type MenuVariationTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderWidth' | 'justifyContent', Output> & {
+    _hover?: MenuStateTokens<Output>;
+    _focus?: MenuStateTokens<Output>;
+    _active?: MenuStateTokens<Output>;
+    _disabled?: Omit<StateTokens<Output>, 'borderColor' | 'backgroundColor'>;
+};
+declare type LinkVariationTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderWidth' | 'color', Output> & {
+    _hover?: StateTokens<Output>;
+    _focus?: StateWithShadowTokens<Output>;
+    _active?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    _loading?: StateTokens<Output>;
+};
+declare type ButtonSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', Output>;
+export declare type ButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'fontWeight' | 'transitionDuration' | 'fontSize' | 'lineHeight' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'borderColor' | 'borderWidth' | 'borderStyle' | 'borderRadius' | 'color'> & {
+    _hover?: StateTokens<Output>;
+    _focus?: StateWithShadowTokens<Output>;
+    _active?: StateTokens<Output>;
+    _loading?: StateTokens<Output>;
+    _disabled?: StateTokens<Output>;
+    primary?: PrimaryVariationTokens<Output>;
+    menu?: MenuVariationTokens<Output>;
+    link?: LinkVariationTokens<Output>;
+    small?: ButtonSizeTokens<Output>;
+    large?: ButtonSizeTokens<Output>;
+    loaderWrapper: DesignTokenProperties<'alignItems' | 'gap', Output>;
+};
+export declare const button: Required<ButtonTokens<'default'>>;
 export {};

package/dist/types/theme/tokens/components/card.d.ts

@@ -1,16 +1,9 @@
-import { BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, DesignToken, SpaceValue } from '../types/designToken';
-interface CardVariationTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-export declare type CardTokens = CardVariationTokens & {
-    padding: DesignToken<SpaceValue>;
-    outlined: CardVariationTokens;
-    elevated: CardVariationTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type CardVariationStyleKey = 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderStyle' | 'borderColor' | 'boxShadow';
+declare type CardVariationTokens<OutputType> = DesignTokenProperties<CardVariationStyleKey, OutputType>;
+export declare type CardTokens<OutputType extends OutputVariantKey> = CardVariationTokens<OutputType> & DesignTokenProperties<'padding', OutputType> & {
+    elevated?: CardVariationTokens<OutputType>;
+    outlined?: CardVariationTokens<OutputType>;
 };
-export declare const card: CardTokens;
+export declare const card: Required<CardTokens<'default'>>;
 export {};