@aws-amplify/ui 3.6.0 → 3.6.3

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

@@ -1,328 +1,83 @@
-export declare const button: {
-    fontWeight: {
-        value: string;
-    };
-    transitionDuration: {
-        value: string;
-    };
-    fontSize: {
-        value: string;
-    };
-    lineHeight: {
-        value: string;
-    };
-    paddingBlockStart: {
-        value: string;
-    };
-    paddingBlockEnd: {
-        value: string;
-    };
-    paddingInlineStart: {
-        value: string;
-    };
-    paddingInlineEnd: {
-        value: string;
-    };
-    borderColor: {
-        value: string;
-    };
-    borderWidth: {
-        value: string;
-    };
-    borderStyle: {
-        value: string;
-    };
-    borderRadius: {
-        value: string;
-    };
-    color: {
-        value: string;
-    };
-    _hover: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-    };
-    _focus: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-    };
-    _active: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-    };
-    _loading: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-    };
-    _disabled: {
-        color: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-    };
-    primary: {
-        borderColor: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        color: {
-            value: string;
-        };
-        _disabled: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _loading: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _hover: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _focus: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-        };
-        _active: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-    };
-    menu: {
-        borderWidth: {
-            value: number;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        justifyContent: {
-            value: string;
-        };
-        _hover: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _focus: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _active: {
-            color: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-        };
-        _disabled: {
-            color: {
-                value: string;
-            };
-        };
-    };
-    link: {
-        borderWidth: {
-            value: number;
-        };
-        borderColor: {
-            value: string;
-        };
-        backgroundColor: {
-            value: string;
-        };
-        color: {
-            value: string;
-        };
-        _hover: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _focus: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-            boxShadow: {
-                value: string;
-            };
-        };
-        _active: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _disabled: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-        _loading: {
-            borderColor: {
-                value: string;
-            };
-            backgroundColor: {
-                value: string;
-            };
-            color: {
-                value: string;
-            };
-        };
-    };
-    small: {
-        fontSize: {
-            value: string;
-        };
-        paddingBlockStart: {
-            value: string;
-        };
-        paddingBlockEnd: {
-            value: string;
-        };
-        paddingInlineStart: {
-            value: string;
-        };
-        paddingInlineEnd: {
-            value: string;
-        };
-    };
-    large: {
-        fontSize: {
-            value: string;
-        };
-        paddingBlockStart: {
-            value: string;
-        };
-        paddingBlockEnd: {
-            value: string;
-        };
-        paddingInlineStart: {
-            value: string;
-        };
-        paddingInlineEnd: {
-            value: string;
-        };
-    };
+import { AlignItemsValue, BackgroundColorValue, BorderColorValue, BorderRadiusValue, BorderStyleValue, BorderWidthValue, BoxShadowValue, ColorValue, DesignToken, FontSizeValue, FontWeightValue, JustifyContentValue, LineHeightValue, SpaceValue, TransitionDurationValue } from '../types/designToken';
+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: {
-            value: string;
-        };
-        gap: {
-            value: string;
-        };
+        alignItems: DesignToken<AlignItemsValue>;
+        gap: DesignToken<SpaceValue>;
     };
-};
+}
+export declare const button: ButtonTokens;
+export {};

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

@@ -1,63 +1,16 @@
-export declare const card: {
-    backgroundColor: {
-        value: string;
-    };
-    borderRadius: {
-        value: string;
-    };
-    borderWidth: {
-        value: string;
-    };
-    borderStyle: {
-        value: string;
-    };
-    borderColor: {
-        value: string;
-    };
-    boxShadow: {
-        value: string;
-    };
-    padding: {
-        value: string;
-    };
-    outlined: {
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-    };
-    elevated: {
-        backgroundColor: {
-            value: string;
-        };
-        borderRadius: {
-            value: string;
-        };
-        borderWidth: {
-            value: string;
-        };
-        borderStyle: {
-            value: string;
-        };
-        borderColor: {
-            value: string;
-        };
-        boxShadow: {
-            value: string;
-        };
-    };
+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;
 };
+export declare const card: CardTokens;
+export {};