@aws-amplify/ui 3.3.2 → 3.4.0

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

@@ -0,0 +1,197 @@
+export declare const table: {
+    /**
+     * Default table styles
+     */
+    borderCollapse: {
+        value: string;
+    };
+    display: {
+        value: string;
+    };
+    width: {
+        value: string;
+    };
+    /**
+     * Default table head styles
+     */
+    head: {
+        display: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+    };
+    /**
+     * Default table body styles
+     */
+    body: {
+        display: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+    };
+    /**
+     * Default table foot styles
+     */
+    foot: {
+        display: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+    };
+    /**
+     * Default table row styles
+     */
+    row: {
+        display: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+        hover: {
+            backgroundColor: {
+                value: string;
+            };
+        };
+        striped: {
+            backgroundColor: {
+                value: string;
+            };
+        };
+    };
+    /**
+     * Default table header cell styles
+     */
+    header: {
+        borderColor: {
+            value: string;
+        };
+        borderStyle: {
+            value: string;
+        };
+        borderWidth: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+        display: {
+            value: string;
+        };
+        fontSize: {
+            value: string;
+        };
+        fontWeight: {
+            value: string;
+        };
+        padding: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+        large: {
+            fontSize: {
+                value: string;
+            };
+            padding: {
+                value: string;
+            };
+        };
+        small: {
+            fontSize: {
+                value: string;
+            };
+            padding: {
+                value: string;
+            };
+        };
+    };
+    /**
+     * Default table data cell styles
+     */
+    data: {
+        borderColor: {
+            value: string;
+        };
+        borderStyle: {
+            value: string;
+        };
+        borderWidth: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+        display: {
+            value: string;
+        };
+        fontSize: {
+            value: string;
+        };
+        fontWeight: {
+            value: string;
+        };
+        padding: {
+            value: string;
+        };
+        verticalAlign: {
+            value: string;
+        };
+        large: {
+            fontSize: {
+                value: string;
+            };
+            padding: {
+                value: string;
+            };
+        };
+        small: {
+            fontSize: {
+                value: string;
+            };
+            padding: {
+                value: string;
+            };
+        };
+    };
+    /**
+     * Default table caption styles
+     */
+    caption: {
+        captionSide: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+        display: {
+            value: string;
+        };
+        fontSize: {
+            value: string;
+        };
+        textAlign: {
+            value: string;
+        };
+        wordBreak: {
+            value: string;
+        };
+        large: {
+            fontSize: {
+                value: string;
+            };
+        };
+        small: {
+            fontSize: {
+                value: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,84 @@
+export declare const tabs: {
+    backgroundColor: {
+        value: string;
+    };
+    borderColor: {
+        value: string;
+    };
+    borderStyle: {
+        value: string;
+    };
+    borderWidth: {
+        value: string;
+    };
+    gap: {
+        value: string;
+    };
+    item: {
+        backgroundColor: {
+            value: string;
+        };
+        borderColor: {
+            value: string;
+        };
+        borderStyle: {
+            value: string;
+        };
+        borderWidth: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+        fontSize: {
+            value: string;
+        };
+        fontWeight: {
+            value: string;
+        };
+        paddingVertical: {
+            value: string;
+        };
+        paddingHorizontal: {
+            value: string;
+        };
+        textAlign: {
+            value: string;
+        };
+        transitionDuration: {
+            value: string;
+        };
+        _hover: {
+            color: {
+                value: string;
+            };
+        };
+        _focus: {
+            color: {
+                value: string;
+            };
+        };
+        _active: {
+            color: {
+                value: string;
+            };
+            borderColor: {
+                value: string;
+            };
+            backgroundColor: {
+                value: string;
+            };
+        };
+        _disabled: {
+            color: {
+                value: string;
+            };
+            backgroundColor: {
+                value: string;
+            };
+            borderColor: {
+                value: string;
+            };
+        };
+    };
+};

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

@@ -0,0 +1,40 @@
+export declare const text: {
+    color: {
+        value: string;
+    };
+    primary: {
+        color: {
+            value: string;
+        };
+    };
+    secondary: {
+        color: {
+            value: string;
+        };
+    };
+    tertiary: {
+        color: {
+            value: string;
+        };
+    };
+    error: {
+        color: {
+            value: string;
+        };
+    };
+    warning: {
+        color: {
+            value: string;
+        };
+    };
+    success: {
+        color: {
+            value: string;
+        };
+    };
+    info: {
+        color: {
+            value: string;
+        };
+    };
+};

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

@@ -0,0 +1,154 @@
+export declare const togglebutton: {
+    borderColor: {
+        value: string;
+    };
+    color: {
+        value: string;
+    };
+    _hover: {
+        backgroundColor: {
+            value: string;
+        };
+    };
+    _focus: {
+        borderColor: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+    };
+    _active: {
+        backgroundColor: {
+            value: string;
+        };
+    };
+    _disabled: {
+        backgroundColor: {
+            value: string;
+        };
+        borderColor: {
+            value: string;
+        };
+        color: {
+            value: string;
+        };
+    };
+    _pressed: {
+        color: {
+            value: string;
+        };
+        backgroundColor: {
+            value: string;
+        };
+        _hover: {
+            backgroundColor: {
+                value: string;
+            };
+        };
+    };
+    primary: {
+        backgroundColor: {
+            value: string;
+        };
+        borderWidth: {
+            value: string;
+        };
+        _focus: {
+            borderColor: {
+                value: string;
+            };
+            backgroundColor: {
+                value: string;
+            };
+            boxShadow: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+        };
+        _hover: {
+            backgroundColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+        };
+        _disabled: {
+            backgroundColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+        };
+        _pressed: {
+            backgroundColor: {
+                value: string;
+            };
+            borderColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+            _focus: {
+                backgroundColor: {
+                    value: string;
+                };
+                borderColor: {
+                    value: string;
+                };
+            };
+            _hover: {
+                borderColor: {
+                    value: string;
+                };
+                backgroundColor: {
+                    value: string;
+                };
+            };
+        };
+    };
+    link: {
+        color: {
+            value: string;
+        };
+        _hover: {
+            backgroundColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+        };
+        _focus: {
+            backgroundColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+        };
+        _disabled: {
+            color: {
+                value: string;
+            };
+        };
+        _pressed: {
+            backgroundColor: {
+                value: string;
+            };
+            color: {
+                value: string;
+            };
+            _hover: {
+                backgroundColor: {
+                    value: string;
+                };
+            };
+        };
+    };
+};

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

@@ -0,0 +1,11 @@
+export declare const togglebuttongroup: {
+    alignItems: {
+        value: string;
+    };
+    alignContent: {
+        value: string;
+    };
+    justifyContent: {
+        value: string;
+    };
+};

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

@@ -0,0 +1,17 @@
+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;

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

@@ -0,0 +1,16 @@
+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;

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

@@ -0,0 +1,13 @@
+import { DesignToken, WebDesignToken, FontValue } from './types/designToken';
+export declare type Fonts = {
+    default: {
+        variable: DesignToken<FontValue>;
+        static: DesignToken<FontValue>;
+    };
+};
+export interface WebFonts {
+    default: {
+        [Property in keyof Fonts['default']]: WebDesignToken<FontValue>;
+    };
+}
+export declare const fonts: Fonts;

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

@@ -0,0 +1,52 @@
+import { BorderWidths, WebBorderWidths } from './borderWidths';
+import { Colors, WebColors } from './colors';
+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: any;
+    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;
+}
+/**
+ * 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;

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

@@ -0,0 +1,10 @@
+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;

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

@@ -0,0 +1,18 @@
+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;

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

@@ -0,0 +1,10 @@
+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;

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

@@ -0,0 +1,10 @@
+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;

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

@@ -0,0 +1,14 @@
+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;

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

@@ -0,0 +1,10 @@
+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;

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

@@ -0,0 +1,27 @@
+import { DesignToken, WebDesignToken, SpaceValue } from './types/designToken';
+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>;
+};
+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 {};