@aws-amplify/ui 4.1.0 → 5.1.0

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

@@ -1,116 +1,31 @@
-import { BackgroundColorValue, BorderColorValue, BorderWidthValue, BoxShadowValue, ColorValue, DesignToken } from '../types/designToken';
-interface ToggleButtonHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface ToggleButtonActiveTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface ToggleButtonFocusTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonDisabledTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonPressedTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    _hover: ToggleButtonPressedHoverTokens;
-}
-interface ToggleButtonPressedHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface ToggleButtonPrimaryTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    _focus: ToggleButtonPrimaryFocusTokens;
-    _hover: ToggleButtonPrimaryHoverTokens;
-    _disabled: ToggleButtonPrimaryDisabledTokens;
-    _pressed: ToggleButtonPrimaryPressedTokens;
-}
-interface ToggleButtonPrimaryFocusTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonPrimaryHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonPrimaryDisabledTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonPrimaryDisabledTokens {
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonPrimaryPressedTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-    _focus: TogglButtonPrimaryPressedFocusTokens;
-    _hover: TogglButtonPrimaryPressedHoverTokens;
-}
-interface TogglButtonPrimaryPressedFocusTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface TogglButtonPrimaryPressedHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonLinkTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-    _hover: ToggleButtonLinkHoverTokens;
-    _focus: ToggleButtonLinkFocusTokens;
-    _disabled: ToggleButtonLinkDisabledTokens;
-    _pressed: ToggleButtonLinkPressedTokens;
-}
-interface ToggleButtonLinkHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonLinkFocusTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonLinkDisabledTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-}
-interface ToggleButtonLinkPressedTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    color: DesignToken<ColorValue>;
-    _focus: ToggleButtonLinkPressedFocusTokens;
-    _hover: ToggleButtonLinkPressedHoverTokens;
-}
-interface ToggleButtonLinkPressedFocusTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface ToggleButtonLinkPressedHoverTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-export interface ToggleButtonTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    color: DesignToken<ColorValue>;
-    _hover: ToggleButtonHoverTokens;
-    _focus: ToggleButtonFocusTokens;
-    _active: ToggleButtonActiveTokens;
-    _disabled: ToggleButtonDisabledTokens;
-    _pressed: ToggleButtonPressedTokens;
-    primary: ToggleButtonPrimaryTokens;
-    link: ToggleButtonLinkTokens;
-}
-export declare const togglebutton: ToggleButtonTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ToggleButtonStateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color', Output>;
+export declare type ToggleButtonTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'color', Output> & {
+    _hover?: DesignTokenProperties<'backgroundColor', Output>;
+    _focus?: DesignTokenProperties<'borderColor' | 'color', Output>;
+    _active?: DesignTokenProperties<'backgroundColor', Output>;
+    _disabled?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+    _pressed?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output> & {
+        _hover?: DesignTokenProperties<'backgroundColor', Output>;
+    };
+    primary?: DesignTokenProperties<'backgroundColor' | 'borderWidth', Output> & {
+        _focus?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'boxShadow' | 'color', Output>;
+        _hover?: DesignTokenProperties<'backgroundColor' | 'color', Output>;
+        _disabled?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+        _pressed?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output> & {
+            _focus?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', Output>;
+            _hover?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'boxShadow' | 'color', Output>;
+        };
+    };
+    link?: DesignTokenProperties<'backgroundColor' | 'color'> & {
+        _hover?: ToggleButtonStateTokens<Output>;
+        _focus?: ToggleButtonStateTokens<Output>;
+        _disabled?: ToggleButtonStateTokens<Output>;
+        _pressed?: ToggleButtonStateTokens<Output> & {
+            _hover?: ToggleButtonStateTokens<Output>;
+            _focus?: ToggleButtonStateTokens<Output>;
+        };
+    };
+};
+export declare const togglebutton: Required<ToggleButtonTokens<'default'>>;
 export {};

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

@@ -1,7 +1,5 @@
-import { AlignContentValue, AlignItemsValue, DesignToken, JustifyContentValue } from '../types/designToken';
-export interface ToggleButtonGroupTokens {
-    alignItems: DesignToken<AlignItemsValue>;
-    alignContent: DesignToken<AlignContentValue>;
-    justifyContent: DesignToken<JustifyContentValue>;
-}
-export declare const togglebuttongroup: ToggleButtonGroupTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ToggleButtonGroupTokenKey = 'alignItems' | 'alignContent' | 'justifyContent';
+export declare type ToggleButtonGroupTokens<Output extends OutputVariantKey> = DesignTokenProperties<ToggleButtonGroupTokenKey, Output>;
+export declare const togglebuttongroup: Required<ToggleButtonGroupTokens<'default'>>;
+export {};

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

@@ -1,17 +1,5 @@
-import { DesignToken, WebDesignToken, FontSizeValue } from './types/designToken';
-export declare type FontSizes = {
-    xxxs: DesignToken<FontSizeValue>;
-    xxs: DesignToken<FontSizeValue>;
-    xs: DesignToken<FontSizeValue>;
-    small: DesignToken<FontSizeValue>;
-    medium: DesignToken<FontSizeValue>;
-    large: DesignToken<FontSizeValue>;
-    xl: DesignToken<FontSizeValue>;
-    xxl: DesignToken<FontSizeValue>;
-    xxxl: DesignToken<FontSizeValue>;
-    xxxxl: DesignToken<FontSizeValue>;
-};
-export declare type WebFontSizes = {
-    [Property in keyof FontSizes]: WebDesignToken<FontSizeValue>;
-};
-export declare const fontSizes: FontSizes;
+import { DesignTokenValues, FontSizeValue, OutputVariantKey } from './types/designToken';
+declare type FontSize = 'xxxs' | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';
+export declare type FontSizes<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<FontSize, FontSizeValue<Platform, Output>, Output, Platform>;
+export declare const fontSizes: FontSizes<'default'>;
+export {};

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

@@ -1,16 +1,5 @@
-import { DesignToken, WebDesignToken, FontWeightValue } from './types/designToken';
-export declare type FontWeights = {
-    hairline: DesignToken<FontWeightValue>;
-    thin: DesignToken<FontWeightValue>;
-    light: DesignToken<FontWeightValue>;
-    normal: DesignToken<FontWeightValue>;
-    medium: DesignToken<FontWeightValue>;
-    semibold: DesignToken<FontWeightValue>;
-    bold: DesignToken<FontWeightValue>;
-    extrabold: DesignToken<FontWeightValue>;
-    black: DesignToken<FontWeightValue>;
-};
-export declare type WebFontWeights = {
-    [Property in keyof FontWeights]: WebDesignToken<FontWeightValue>;
-};
-export declare const fontWeights: FontWeights;
+import { DesignTokenValues, FontWeightValue, OutputVariantKey } from './types/designToken';
+declare type FontWeight = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export declare type FontWeights<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<FontWeight, FontWeightValue<Platform, Output>, Output, Platform>;
+export declare const fontWeights: FontWeights<'default'>;
+export {};

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

@@ -1,13 +1,8 @@
-import { DesignToken, WebDesignToken, FontValue } from './types/designToken';
-export declare type Fonts = {
-    default: {
-        variable: DesignToken<FontValue>;
-        static: DesignToken<FontValue>;
-    };
+import { DesignTokenValues, FontValue, OutputVariantKey } from './types/designToken';
+declare type FontVariant = 'variable' | 'static';
+declare type BaseFonts<Output extends OutputVariantKey = unknown, Platform = unknown> = {
+    default?: DesignTokenValues<FontVariant, FontValue, Output, Platform>;
 };
-export interface WebFonts {
-    default: {
-        [Property in keyof Fonts['default']]: WebDesignToken<FontValue>;
-    };
-}
-export declare const fonts: Fonts;
+export declare type Fonts<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseFonts<Output, Platform>> : BaseFonts<Output, Platform>;
+export declare const fonts: Fonts<'default'>;
+export {};

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

@@ -1,53 +1,63 @@
-import { BorderWidths, WebBorderWidths } from './borderWidths';
-import { Colors, WebColors } from './colors';
-import { ComponentTokens } from './components';
-import { Fonts, WebFonts } from './fonts';
-import { FontSizes, WebFontSizes } from './fontSizes';
-import { FontWeights, WebFontWeights } from './fontWeights';
-import { LineHeights, WebLineHeights } from './lineHeights';
-import { Opacities, WebOpacities } from './opacities';
-import { OutlineOffsets, WebOutlineOffsets } from './outlineOffsets';
-import { OutlineWidths, WebOutlineWidths } from './outlineWidths';
-import { Radii, WebRadii } from './radii';
-import { Shadows, WebShadows } from './shadows';
-import { Space, WebSpace } from './space';
-import { Time, WebTime } from './time';
-import { Transforms, WebTransforms } from './transforms';
-export interface Tokens {
-    components: ComponentTokens;
-    borderWidths: BorderWidths;
-    colors: Colors;
-    fonts: Fonts;
-    fontSizes: FontSizes;
-    fontWeights: FontWeights;
-    lineHeights: LineHeights;
-    opacities: Opacities;
-    outlineOffsets: OutlineOffsets;
-    outlineWidths: OutlineWidths;
-    radii: Radii;
-    shadows: Shadows;
-    space: Space;
-    time: Time;
-    transforms: Transforms;
+import { BorderWidths } from './borderWidths';
+import { Colors } from './colors';
+import { ComponentTokens, DefaultComponentTokens, WebComponentTokens } from './components';
+import { Fonts } from './fonts';
+import { FontSizes } from './fontSizes';
+import { FontWeights } from './fontWeights';
+import { LineHeights } from './lineHeights';
+import { Opacities } from './opacities';
+import { OutlineOffsets } from './outlineOffsets';
+import { OutlineWidths } from './outlineWidths';
+import { Radii } from './radii';
+import { Shadows } from './shadows';
+import { Space } from './space';
+import { Time } from './time';
+import { Transforms } from './transforms';
+import { OutputVariantKey } from './types/designToken';
+/**
+ * Used for custom themes
+ */
+interface BaseTokens<Output extends OutputVariantKey = unknown> {
+    borderWidths?: BorderWidths<Output>;
+    colors?: Colors<Output>;
+    fonts?: Fonts<Output>;
+    fontSizes?: FontSizes<Output>;
+    fontWeights?: FontWeights<Output>;
+    lineHeights?: LineHeights<Output>;
+    opacities?: Opacities<Output>;
+    outlineOffsets?: OutlineOffsets<Output>;
+    outlineWidths?: OutlineWidths<Output>;
+    radii?: Radii<Output>;
+    shadows?: Shadows<Output>;
+    space?: Space<Output>;
+    time?: Time<Output>;
+    transforms?: Transforms<Output>;
 }
+export declare type Tokens = BaseTokens<'optional'> & {
+    components?: ComponentTokens;
+};
+export declare type DefaultTokens = Required<BaseTokens<'default'>> & {
+    components: DefaultComponentTokens;
+};
 /**
  * The fully setup theme tokens. It has the same shape as Tokens
  * but each token has added fields.
  */
-export interface WebTokens extends Tokens {
-    borderWidths: WebBorderWidths;
-    colors: WebColors;
-    fonts: WebFonts;
-    fontSizes: WebFontSizes;
-    fontWeights: WebFontWeights;
-    lineHeights: WebLineHeights;
-    opacities: WebOpacities;
-    outlineOffsets: WebOutlineOffsets;
-    outlineWidths: WebOutlineWidths;
-    radii: WebRadii;
-    shadows: WebShadows;
-    space: WebSpace;
-    time: WebTime;
-    transform: WebTransforms;
-}
-export declare const tokens: Tokens;
+export declare type WebTokens = Required<BaseTokens<'required'>> & {
+    components: WebComponentTokens;
+};
+declare type ReactNative = 'react-native';
+declare type BaseReactNativeTokens<Output extends OutputVariantKey = unknown> = {
+    colors?: Colors<Output, ReactNative>;
+    borderWidths?: BorderWidths<Output, ReactNative>;
+    fontSizes?: Omit<FontSizes<Output, ReactNative>, 'xxxs' | 'xxxxl'>;
+    fontWeights?: FontWeights<Output, ReactNative>;
+    opacities?: Opacities<Output, ReactNative>;
+    radii?: Radii<Output, ReactNative>;
+    space?: Omit<Space<Output, ReactNative>, 'xxxs' | 'relative' | 'zero'>;
+    time?: Time<Output, ReactNative>;
+};
+export declare type ReactNativeTokens<Output extends OutputVariantKey> = Output extends 'required' | 'default' ? Required<BaseReactNativeTokens<Output>> : BaseReactNativeTokens<Output>;
+export declare const tokens: DefaultTokens;
+export declare const reactNativeTokens: ReactNativeTokens<'default'>;
+export {};

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

@@ -1,10 +1,5 @@
-import { DesignToken, WebDesignToken, LineHeightValue } from './types/designToken';
-export declare type LineHeights = {
-    small: DesignToken<LineHeightValue>;
-    medium: DesignToken<LineHeightValue>;
-    large: DesignToken<LineHeightValue>;
-};
-export declare type WebLineHeights = {
-    [Property in keyof LineHeights]: WebDesignToken<LineHeightValue>;
-};
-export declare const lineHeights: LineHeights;
+import { DesignTokenValues, LineHeightValue, OutputVariantKey } from './types/designToken';
+declare type LineHeightSize = 'small' | 'medium' | 'large';
+export declare type LineHeights<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<LineHeightSize, LineHeightValue, Output, Platform>;
+export declare const lineHeights: LineHeights<'default'>;
+export {};

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

@@ -1,18 +1,5 @@
-import { DesignToken, WebDesignToken, OpacityValue } from './types/designToken';
-export declare type Opacities = {
-    0: DesignToken<OpacityValue>;
-    10: DesignToken<OpacityValue>;
-    20: DesignToken<OpacityValue>;
-    30: DesignToken<OpacityValue>;
-    40: DesignToken<OpacityValue>;
-    50: DesignToken<OpacityValue>;
-    60: DesignToken<OpacityValue>;
-    70: DesignToken<OpacityValue>;
-    80: DesignToken<OpacityValue>;
-    90: DesignToken<OpacityValue>;
-    100: DesignToken<OpacityValue>;
-};
-export declare type WebOpacities = {
-    [Property in keyof Opacities]: WebDesignToken<OpacityValue>;
-};
-export declare const opacities: Opacities;
+import { DesignTokenValues, OpacityValue, OutputVariantKey } from './types/designToken';
+declare type OpacityScale = 0 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
+export declare type Opacities<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OpacityScale, OpacityValue<Platform, Output>, Output, Platform>;
+export declare const opacities: Opacities<'default'>;
+export {};

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

@@ -1,10 +1,5 @@
-import { DesignToken, WebDesignToken, OutlineOffsetValue } from './types/designToken';
-export declare type OutlineOffsets = {
-    small: DesignToken<OutlineOffsetValue>;
-    medium: DesignToken<OutlineOffsetValue>;
-    large: DesignToken<OutlineOffsetValue>;
-};
-export declare type WebOutlineOffsets = {
-    [Property in keyof OutlineOffsets]: WebDesignToken<OutlineOffsetValue>;
-};
-export declare const outlineOffsets: OutlineOffsets;
+import { DesignTokenValues, OutlineOffsetValue, OutputVariantKey } from './types/designToken';
+declare type OutlineOffsetSize = 'small' | 'medium' | 'large';
+export declare type OutlineOffsets<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OutlineOffsetSize, OutlineOffsetValue, Output, Platform>;
+export declare const outlineOffsets: OutlineOffsets<'default'>;
+export {};

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

@@ -1,10 +1,5 @@
-import { DesignToken, WebDesignToken, OutlineWidthValue } from './types/designToken';
-export declare type OutlineWidths = {
-    small: DesignToken<OutlineWidthValue>;
-    medium: DesignToken<OutlineWidthValue>;
-    large: DesignToken<OutlineWidthValue>;
-};
-export declare type WebOutlineWidths = {
-    [Property in keyof OutlineWidths]: WebDesignToken<OutlineWidthValue>;
-};
-export declare const outlineWidths: OutlineWidths;
+import { DesignTokenValues, OutlineWidthValue, OutputVariantKey } from './types/designToken';
+declare type OutlineWidthSize = 'small' | 'medium' | 'large';
+export declare type OutlineWidths<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<OutlineWidthSize, OutlineWidthValue, Output, Platform>;
+export declare const outlineWidths: OutlineWidths<'default'>;
+export {};

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

@@ -1,14 +1,5 @@
-import { DesignToken, WebDesignToken, RadiusValue } from './types/designToken';
-export declare type Radii = {
-    xs: DesignToken<RadiusValue>;
-    small: DesignToken<RadiusValue>;
-    medium: DesignToken<RadiusValue>;
-    large: DesignToken<RadiusValue>;
-    xl: DesignToken<RadiusValue>;
-    xxl: DesignToken<RadiusValue>;
-    xxxl: DesignToken<RadiusValue>;
-};
-export declare type WebRadii = {
-    [Property in keyof Radii]: WebDesignToken<RadiusValue>;
-};
-export declare const radii: Radii;
+import { DesignTokenValues, OutputVariantKey, RadiusValue } from './types/designToken';
+declare type RadiusSize = 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
+export declare type Radii<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<RadiusSize, RadiusValue<Platform, Output>, Output, Platform>;
+export declare const radii: Radii<'default'>;
+export {};

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

@@ -1,10 +1,5 @@
-import { DesignToken, WebDesignToken, ShadowValue } from './types/designToken';
-export declare type Shadows = {
-    small: DesignToken<ShadowValue>;
-    medium: DesignToken<ShadowValue>;
-    large: DesignToken<ShadowValue>;
-};
-export declare type WebShadows = {
-    [Property in keyof Shadows]: WebDesignToken<ShadowValue>;
-};
-export declare const shadows: Shadows;
+import { DesignTokenValues, OutputVariantKey, ShadowValue } from './types/designToken';
+declare type ShadowSize = 'small' | 'medium' | 'large';
+export declare type Shadows<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<ShadowSize, ShadowValue, Output, Platform>;
+export declare const shadows: Shadows<'default'>;
+export {};

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

@@ -1,26 +1,9 @@
-import { DesignToken, WebDesignToken, SpaceValue } from './types/designToken';
-export declare type SpaceSizes = {
-    xxxs: DesignToken<SpaceValue>;
-    xxs: DesignToken<SpaceValue>;
-    xs: DesignToken<SpaceValue>;
-    small: DesignToken<SpaceValue>;
-    medium: DesignToken<SpaceValue>;
-    large: DesignToken<SpaceValue>;
-    xl: DesignToken<SpaceValue>;
-    xxl: DesignToken<SpaceValue>;
-    xxxl: DesignToken<SpaceValue>;
+import { DesignTokenValues, OutputVariantKey, SpaceValue } from './types/designToken';
+declare type SpaceSize = 'xxxs' | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl';
+export declare type SpaceSizes<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<SpaceSize | 'zero', SpaceValue<Platform>, Output, Platform>;
+declare type BaseSpace<Output extends OutputVariantKey = unknown, Platform = unknown> = SpaceSizes<Output, Platform> & {
+    relative?: DesignTokenValues<SpaceSize | 'full', SpaceValue, Output, Platform>;
 };
-export declare type Space = SpaceSizes & {
-    zero: DesignToken<SpaceValue>;
-    relative: SpaceSizes & {
-        full: DesignToken<SpaceValue>;
-    };
-};
-export declare type WebSpace = {
-    [Property in keyof Omit<Space, 'relative'>]: WebDesignToken<SpaceValue>;
-} & {
-    relative: {
-        [Property in keyof Space['relative']]: WebDesignToken<SpaceValue>;
-    };
-};
-export declare const space: Space;
+export declare type Space<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseSpace<Output, Platform>> : BaseSpace<Output, Platform>;
+export declare const space: Space<'default'>;
+export {};

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

@@ -1,10 +1,5 @@
-import { DesignToken, WebDesignToken, TimeValue } from './types/designToken';
-export declare type Time = {
-    short: DesignToken<TimeValue>;
-    medium: DesignToken<TimeValue>;
-    long: DesignToken<TimeValue>;
-};
-export declare type WebTime = {
-    [Property in keyof Time]: WebDesignToken<TimeValue>;
-};
-export declare const time: Time;
+import { DesignTokenValues, OutputVariantKey, TimeValue } from './types/designToken';
+declare type Duration = 'short' | 'medium' | 'long';
+export declare type Time<Output extends OutputVariantKey = unknown, Platform = unknown> = DesignTokenValues<Duration, TimeValue<Platform, Output>, Output, Platform>;
+export declare const time: Time<'default'>;
+export {};

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

@@ -1,14 +1,8 @@
-import { DesignToken, WebDesignToken, TransformValue } from './types/designToken';
-export declare type Transforms = {
-    slideX: {
-        small: DesignToken<TransformValue>;
-        medium: DesignToken<TransformValue>;
-        large: DesignToken<TransformValue>;
-    };
+import { DesignTokenValues, OutputVariantKey, TransformValue } from './types/designToken';
+declare type TransformSize = 'small' | 'medium' | 'large';
+export declare type BaseTransforms<Output extends OutputVariantKey = unknown, Platform = unknown> = {
+    slideX?: DesignTokenValues<TransformSize, TransformValue, Output, Platform>;
 };
-export declare type WebTransforms = {
-    slideX: {
-        [Property in keyof Transforms['slideX']]: WebDesignToken<TransformValue>;
-    };
-};
-export declare const transforms: Transforms;
+export declare type Transforms<Output extends OutputVariantKey = unknown, Platform = unknown> = Output extends 'required' | 'default' ? Required<BaseTransforms<Output, Platform>> : BaseTransforms<Output, Platform>;
+export declare const transforms: Transforms<'default'>;
+export {};