@aws-amplify/ui 5.0.0 → 5.1.0

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

@@ -1,62 +1,21 @@
-import { BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, DesignToken, SpaceValue } from '../types/designToken';
-interface SliderFieldTrackTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    height: DesignToken<SpaceValue>;
-    minWidth: DesignToken<SpaceValue>;
-}
-interface SliderFieldRangeTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    _disabled: SliderFieldRangeDisabledTokens;
-}
-interface SliderFieldRangeDisabledTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface SliderFieldThumbTokens {
-    width: DesignToken<SpaceValue>;
-    height: DesignToken<SpaceValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    _disabled: SliderFieldThumbDisabledTokens;
-    _hover: SliderFieldThumbHoverTokens;
-    _focus: SliderFieldThumbFocusTokens;
-}
-interface SliderFieldThumbDisabledTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface SliderFieldThumbHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-}
-interface SliderFieldThumbFocusTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    boxShadow: DesignToken<BoxShadowValue>;
-}
-interface SliderFieldSizeTokens {
-    track: SliderFieldSizeTrackTokens;
-    thumb: SliderFieldSizeThumbTokens;
-}
-interface SliderFieldSizeTrackTokens {
-    height: DesignToken<SpaceValue>;
-}
-interface SliderFieldSizeThumbTokens {
-    height: DesignToken<SpaceValue>;
-    width: DesignToken<SpaceValue>;
-}
-export interface SliderFieldTokens {
-    paddingBlock: DesignToken<SpaceValue>;
-    track: SliderFieldTrackTokens;
-    range: SliderFieldRangeTokens;
-    thumb: SliderFieldThumbTokens;
-    small: SliderFieldSizeTokens;
-    large: SliderFieldSizeTokens;
-}
-export declare const sliderfield: SliderFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type SliderFieldThumbStateTokens<Output> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'boxShadow', Output>;
+declare type SliderFieldSizeTokens<Output> = {
+    track?: DesignTokenProperties<'height', Output>;
+    thumb?: DesignTokenProperties<'height' | 'width', Output>;
+};
+export declare type SliderFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingBlock', Output> & {
+    track?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'height' | 'minWidth', Output>;
+    range?: DesignTokenProperties<'backgroundColor' | 'borderRadius', Output> & {
+        _disabled?: DesignTokenProperties<'backgroundColor', Output>;
+    };
+    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'boxShadow' | 'height' | 'width', Output> & {
+        _disabled?: SliderFieldThumbStateTokens<Output> & DesignTokenProperties<'boxShadow', Output>;
+        _hover?: Omit<SliderFieldThumbStateTokens<Output>, Output extends 'default' ? 'boxShadow' : never>;
+        _focus?: Omit<SliderFieldThumbStateTokens<Output>, Output extends 'default' ? 'backgroundColor' : never>;
+    };
+    small?: SliderFieldSizeTokens<Output>;
+    large?: SliderFieldSizeTokens<Output>;
+};
+export declare const sliderfield: Required<SliderFieldTokens<'default'>>;
 export {};

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

@@ -1,25 +1,13 @@
-import { ColorValue, DesignToken, FontSizeValue, FlexDirectionValue, TextAlignValue, BorderColorValue } from '../types/designToken';
-interface StepperFieldInputTokens {
-    textAlign: DesignToken<TextAlignValue>;
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-}
-interface ButtonStateColorTokens {
-    color: DesignToken<ColorValue>;
-    backgroundColor: DesignToken<ColorValue>;
-}
-export interface StepperFieldTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    flexDirection: DesignToken<FlexDirectionValue>;
-    input: StepperFieldInputTokens;
-    button: {
-        color: DesignToken<ColorValue>;
-        backgroundColor: DesignToken<ColorValue>;
-        _active: ButtonStateColorTokens;
-        _focus: ButtonStateColorTokens;
-        _disabled: ButtonStateColorTokens;
-        _hover: ButtonStateColorTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type ButtonStateColorTokens<Output> = DesignTokenProperties<'backgroundColor' | 'color', Output>;
+export declare type StepperFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderColor' | 'flexDirection'> & {
+    input?: DesignTokenProperties<'textAlign' | 'color' | 'fontSize', Output>;
+    button?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
+        _active?: ButtonStateColorTokens<Output>;
+        _focus?: ButtonStateColorTokens<Output>;
+        _disabled?: ButtonStateColorTokens<Output>;
+        _hover?: ButtonStateColorTokens<Output>;
     };
-}
-export declare const stepperfield: StepperFieldTokens;
+};
+export declare const stepperfield: Required<StepperFieldTokens<'default'>>;
 export {};

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

@@ -1,55 +1,21 @@
-import { BackgroundColorValue, BorderColorValue, BorderRadiusValue, DesignToken, FontSizeValue, OpacityValue, ShadowValue, SpaceValue, TransformValue, TransitionDurationValue } from '../types/designToken';
-interface SwitchFieldDisabledTokens {
-    opacity: DesignToken<OpacityValue>;
-}
-interface SwitchFieldFocusedTokens {
-    shadow: DesignToken<ShadowValue>;
-}
-interface SwitchFieldSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-}
-interface SwitchFieldLabelTokens {
-    padding: DesignToken<SpaceValue>;
-}
-interface SwitchFieldThumbTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    checked: SwitchFieldThumbCheckedTokens;
-    transition: SwitchFieldThumbTransitionTokens;
-    width: DesignToken<SpaceValue>;
-}
-interface SwitchFieldThumbTransitionTokens {
-    duration: DesignToken<TransitionDurationValue>;
-}
-interface SwitchFieldThumbCheckedTokens {
-    transform: DesignToken<TransformValue>;
-}
-interface SwitchFieldTrackTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderRadius: DesignToken<BorderRadiusValue>;
-    checked: SwitchFieldTrackCheckedTokens;
-    height: DesignToken<SpaceValue>;
-    padding: DesignToken<SpaceValue>;
-    transition: SwitchFieldTrackTransitionTokens;
-    width: DesignToken<SpaceValue>;
-    _error: SwitchFieldTrackCheckedTokens;
-}
-interface SwitchFieldTrackTransitionTokens {
-    duration: DesignToken<TransitionDurationValue>;
-}
-interface SwitchFieldTrackCheckedTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-export interface SwitchFieldTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    _disabled: SwitchFieldDisabledTokens;
-    _focused: SwitchFieldFocusedTokens;
-    large: SwitchFieldSizeTokens;
-    small: SwitchFieldSizeTokens;
-    label: SwitchFieldLabelTokens;
-    thumb: SwitchFieldThumbTokens;
-    track: SwitchFieldTrackTokens;
-}
-export declare const switchfield: SwitchFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type SwitchFieldSizeTokens<OutputType> = DesignTokenProperties<'fontSize', OutputType>;
+declare type SwitchFieldTrackCheckedTokens<OutputType> = DesignTokenProperties<'backgroundColor', OutputType>;
+export declare type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'fontSize'> & {
+    _disabled?: DesignTokenProperties<'opacity', OutputType>;
+    _focused?: DesignTokenProperties<'shadow', OutputType>;
+    large?: SwitchFieldSizeTokens<OutputType>;
+    small?: SwitchFieldSizeTokens<OutputType>;
+    label?: DesignTokenProperties<'padding', OutputType>;
+    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'width', OutputType> & {
+        checked: DesignTokenProperties<'transform', OutputType>;
+        transition: DesignTokenProperties<'duration', OutputType>;
+    };
+    track?: DesignTokenProperties<'backgroundColor' | 'borderRadius' | 'height' | 'width' | 'padding', OutputType> & {
+        checked: SwitchFieldTrackCheckedTokens<OutputType>;
+        transition: DesignTokenProperties<'duration', OutputType>;
+        _error: SwitchFieldTrackCheckedTokens<OutputType>;
+    };
+};
+export declare const switchfield: Required<SwitchFieldTokens<'default'>>;
 export {};

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

@@ -1,61 +1,25 @@
-import { BackgroundColorValue, BorderCollapseValue, BorderColorValue, BorderStyleValue, BorderWidthValue, CaptionSideValue, ColorValue, DesignToken, DisplayValue, FontSizeValue, FontWeightValue, SpaceValue, TextAlignValue, VerticalAlignValue, WordBreakValue } from '../types/designToken';
-interface TableDefaultTokens {
-    display: DesignToken<DisplayValue>;
-    verticalAlign: DesignToken<VerticalAlignValue>;
-}
-interface TableRowTokens extends TableDefaultTokens {
-    hover: TableRowHoverTokens;
-    striped: TableRowStripedTokens;
-}
-interface TableRowHoverTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface TableRowStripedTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface TableCellTokens extends TableDefaultTokens {
-    borderColor: DesignToken<BorderColorValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-    padding: DesignToken<SpaceValue>;
-    large: TableCellSizeTokens;
-    small: TableCellSizeTokens;
-}
-interface TableHeaderTokens extends TableCellTokens {
-}
-interface TableDataTokens extends TableCellTokens {
-}
-interface TableCellSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-    padding: DesignToken<SpaceValue>;
-}
-interface TableCaptionTokens {
-    captionSide: DesignToken<CaptionSideValue>;
-    color: DesignToken<ColorValue>;
-    display: DesignToken<DisplayValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    textAlign: DesignToken<TextAlignValue>;
-    wordBreak: DesignToken<WordBreakValue>;
-    large: TableCaptionSizeTokens;
-    small: TableCaptionSizeTokens;
-}
-interface TableCaptionSizeTokens {
-    fontSize: DesignToken<FontSizeValue>;
-}
-export interface TableTokens {
-    borderCollapse: DesignToken<BorderCollapseValue>;
-    display: DesignToken<DisplayValue>;
-    width: DesignToken<SpaceValue>;
-    head: TableDefaultTokens;
-    body: TableDefaultTokens;
-    foot: TableDefaultTokens;
-    row: TableRowTokens;
-    header: TableHeaderTokens;
-    data: TableDataTokens;
-    caption: TableCaptionTokens;
-}
-export declare const table: TableTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type BaseTableTokens<Output> = DesignTokenProperties<'display' | 'verticalAlign', Output>;
+declare type TableCellTokens<Output> = DesignTokenProperties<'borderColor' | 'borderStyle' | 'borderWidth' | 'color' | 'display' | 'fontSize' | 'fontWeight' | 'padding' | 'verticalAlign', Output> & {
+    large?: TableCellSizeTokens<Output>;
+    small?: TableCellSizeTokens<Output>;
+};
+declare type TableCellSizeTokens<Output> = DesignTokenProperties<'fontSize' | 'padding', Output>;
+declare type TableCaptionSizeTokens<Output> = DesignTokenProperties<'fontSize', Output>;
+export declare type TableTokens<Output extends OutputVariantKey> = DesignTokenProperties<'borderCollapse' | 'display' | 'width', Output> & {
+    head?: BaseTableTokens<Output>;
+    body?: BaseTableTokens<Output>;
+    foot?: BaseTableTokens<Output>;
+    row?: BaseTableTokens<Output> & {
+        hover?: DesignTokenProperties<'backgroundColor', Output>;
+        striped?: DesignTokenProperties<'backgroundColor', Output>;
+    };
+    header: TableCellTokens<Output>;
+    data: TableCellTokens<Output>;
+    caption?: DesignTokenProperties<'captionSide' | 'color' | 'display' | 'fontSize' | 'textAlign' | 'wordBreak', Output> & {
+        large?: TableCaptionSizeTokens<Output>;
+        small?: TableCaptionSizeTokens<Output>;
+    };
+};
+export declare const table: Required<TableTokens<'default'>>;
 export {};

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

@@ -1,44 +1,13 @@
-import { BackgroundColorValue, BorderColorValue, BorderStyleValue, BorderWidthValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, GapValue, SpaceValue, TextAlignValue, TransitionDurationValue } from '../types/designToken';
-interface TabsItemTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    color: DesignToken<ColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    fontWeight: DesignToken<FontWeightValue>;
-    paddingVertical: DesignToken<SpaceValue>;
-    paddingHorizontal: DesignToken<SpaceValue>;
-    textAlign: DesignToken<TextAlignValue>;
-    transitionDuration: DesignToken<TransitionDurationValue>;
-    _hover: TabsItemHoverTokens;
-    _focus: TabsItemFocusTokens;
-    _active: TabsItemActiveTokens;
-    _disabled: TabsItemDisabledTokens;
-}
-interface TabsItemHoverTokens {
-    color: DesignToken<ColorValue>;
-}
-interface TabsItemFocusTokens {
-    color: DesignToken<ColorValue>;
-}
-interface TabsItemActiveTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-interface TabsItemDisabledTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    backgroundColor: DesignToken<BackgroundColorValue>;
-}
-export interface TabsTokens {
-    backgroundColor: DesignToken<BackgroundColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    borderStyle: DesignToken<BorderStyleValue>;
-    borderWidth: DesignToken<BorderWidthValue>;
-    gap: DesignToken<GapValue>;
-    item: TabsItemTokens;
-}
-export declare const tabs: TabsTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type TabItemStateTokens<OutputType> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'color', OutputType>;
+declare type TabItemTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'color' | 'fontSize' | 'fontWeight' | 'paddingVertical' | 'paddingHorizontal' | 'textAlign' | 'transitionDuration', OutputType> & {
+    _hover?: DesignTokenProperties<'color', OutputType>;
+    _focus?: DesignTokenProperties<'color', OutputType>;
+    _active?: TabItemStateTokens<OutputType>;
+    _disabled?: TabItemStateTokens<OutputType>;
+};
+export declare type TabsTokens<Output extends OutputVariantKey> = DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'gap', Output> & {
+    item?: TabItemTokens<Output>;
+};
+export declare const tabs: Required<TabsTokens<'default'>>;
 export {};

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

@@ -1,16 +1,7 @@
-import { ColorValue, DesignToken } from '../types/designToken';
-interface TextVariationTokens {
-    color: DesignToken<ColorValue>;
-}
-export interface TextTokens {
-    color: DesignToken<ColorValue>;
-    primary: TextVariationTokens;
-    secondary: TextVariationTokens;
-    tertiary: TextVariationTokens;
-    error: TextVariationTokens;
-    warning: TextVariationTokens;
-    success: TextVariationTokens;
-    info: TextVariationTokens;
-}
-export declare const text: TextTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type OrderVariantKey = 'primary' | 'secondary' | 'tertiary';
+declare type InformationVariantKey = 'info' | 'warning' | 'error' | 'success';
+declare type BaseTextTokens<Output> = DesignTokenProperties<'color', Output>;
+export declare type TextTokens<Output extends OutputVariantKey> = BaseTextTokens<Output> & Record<OrderVariantKey | InformationVariantKey, BaseTextTokens<Output>>;
+export declare const text: Required<TextTokens<'default'>>;
 export {};

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

@@ -1,11 +1,7 @@
-import { ColorValue, DesignToken, BorderColorValue } from '../types/designToken';
-interface TextAreaFieldStateToken {
-    borderColor: DesignToken<BorderColorValue>;
-}
-export interface TextAreaFieldTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    _focus: TextAreaFieldStateToken;
-}
-export declare const textareafield: TextAreaFieldTokens;
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+declare type TokenKey = 'color' | 'borderColor' | 'fontSize';
+export declare type TextAreaFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<Output extends 'default' ? Exclude<TokenKey, 'fontSize'> : TokenKey> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+};
+export declare const textareafield: Required<TextAreaFieldTokens<'default'>>;
 export {};

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

@@ -1,12 +1,5 @@
-import { ColorValue, DesignToken, BorderColorValue, FontSizeValue } from '../types/designToken';
-interface TextFieldStateToken {
-    borderColor: DesignToken<BorderColorValue>;
-}
-export interface TextFieldTokens {
-    color: DesignToken<ColorValue>;
-    borderColor: DesignToken<BorderColorValue>;
-    fontSize: DesignToken<FontSizeValue>;
-    _focus: TextFieldStateToken;
-}
-export declare const textfield: TextFieldTokens;
-export {};
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+export declare type TextFieldTokens<Output extends OutputVariantKey> = DesignTokenProperties<'color' | 'borderColor' | 'fontSize'> & {
+    _focus?: DesignTokenProperties<'borderColor', Output>;
+};
+export declare const textfield: Required<TextFieldTokens<'default'>>;

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 {};