@tydavidson/design-system 1.2.7 → 1.2.8

package/dist/tokens/index.d.ts

@@ -0,0 +1,529 @@
+/**
+ * Color token definitions based on the design system
+ */
+declare const colors: {
+    brand: {
+        25: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    error: {
+        25: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    warning: {
+        25: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    success: {
+        25: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    gray: {
+        25: string;
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+        950: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        disabled: string;
+        brand: string;
+        'on-brand': string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    background: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        brand: string;
+        error: string;
+        warning: string;
+        success: string;
+        card: string;
+    };
+    border: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        brand: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    focus: {
+        ring: string;
+        brand: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    button: {
+        primary: {
+            bg: string;
+            text: string;
+            hover: string;
+            focus: string;
+        };
+        secondary: {
+            bg: string;
+            text: string;
+            border: string;
+            hover: string;
+            focus: string;
+        };
+        tertiary: {
+            bg: string;
+            text: string;
+            hover: string;
+            focus: string;
+        };
+    };
+};
+type Colors = typeof colors;
+
+/**
+ * Typography token definitions based on the design system
+ */
+declare const typography: {
+    fontFamily: {
+        sans: string[];
+    };
+    fontWeight: {
+        regular: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    fontSize: {
+        'display-2xl': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'display-xl': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'display-lg': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'display-md': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'display-sm': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'display-xs': (string | {
+            lineHeight: string;
+            letterSpacing: string;
+        })[];
+        'text-xl': (string | {
+            lineHeight: string;
+        })[];
+        'text-lg': (string | {
+            lineHeight: string;
+        })[];
+        'text-md': (string | {
+            lineHeight: string;
+        })[];
+        'text-sm': (string | {
+            lineHeight: string;
+        })[];
+        'text-xs': (string | {
+            lineHeight: string;
+        })[];
+    };
+    styles: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        body: string;
+        'body-large': string;
+        'body-small': string;
+        caption: string;
+        overline: string;
+        label: string;
+    };
+    variants: {
+        italic: string;
+        underline: string;
+    };
+};
+type Typography = typeof typography;
+
+/**
+ * Spacing tokens used throughout the application
+ *
+ * Note: This extends Tailwind's default spacing values rather than replacing them.
+ * We only define semantic values here that map to Tailwind's spacing scale.
+ */
+declare const spacing: {
+    layout: {
+        page: string;
+        section: string;
+        subsection: string;
+        inline: string;
+    };
+    component: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+    };
+    custom: {};
+};
+type Spacing = typeof spacing;
+
+/**
+ * Border radius tokens used throughout the application
+ *
+ * Note: This uses Tailwind's default radius naming but maps to our semantic values
+ * defined by CSS variables. We don't override Tailwind's defaults but use
+ * the semantic mappings for component consistency.
+ */
+declare const radius: {
+    default: string;
+    card: string;
+    button: string;
+    input: string;
+    badge: string;
+    pill: string;
+    circle: string;
+    custom: {};
+};
+type Radius = typeof radius;
+
+/**
+ * Shadow tokens used throughout the application
+ */
+declare const shadows: {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    inner: string;
+    'elevation-low': string;
+    'elevation-medium': string;
+    'elevation-high': string;
+    card: string;
+    dropdown: string;
+    modal: string;
+};
+type Shadows = typeof shadows;
+
+/**
+ * Re-exports all token definitions for easy consumption
+ */
+
+declare const tokens: {
+    colors: {
+        brand: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        error: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        warning: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        success: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        gray: {
+            25: string;
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            disabled: string;
+            brand: string;
+            'on-brand': string;
+            error: string;
+            warning: string;
+            success: string;
+        };
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: string;
+            error: string;
+            warning: string;
+            success: string;
+            card: string;
+        };
+        border: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: string;
+            error: string;
+            warning: string;
+            success: string;
+        };
+        focus: {
+            ring: string;
+            brand: string;
+            error: string;
+            warning: string;
+            success: string;
+        };
+        button: {
+            primary: {
+                bg: string;
+                text: string;
+                hover: string;
+                focus: string;
+            };
+            secondary: {
+                bg: string;
+                text: string;
+                border: string;
+                hover: string;
+                focus: string;
+            };
+            tertiary: {
+                bg: string;
+                text: string;
+                hover: string;
+                focus: string;
+            };
+        };
+    };
+    typography: {
+        fontFamily: {
+            sans: string[];
+        };
+        fontWeight: {
+            regular: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        fontSize: {
+            'display-2xl': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'display-xl': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'display-lg': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'display-md': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'display-sm': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'display-xs': (string | {
+                lineHeight: string;
+                letterSpacing: string;
+            })[];
+            'text-xl': (string | {
+                lineHeight: string;
+            })[];
+            'text-lg': (string | {
+                lineHeight: string;
+            })[];
+            'text-md': (string | {
+                lineHeight: string;
+            })[];
+            'text-sm': (string | {
+                lineHeight: string;
+            })[];
+            'text-xs': (string | {
+                lineHeight: string;
+            })[];
+        };
+        styles: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            body: string;
+            'body-large': string;
+            'body-small': string;
+            caption: string;
+            overline: string;
+            label: string;
+        };
+        variants: {
+            italic: string;
+            underline: string;
+        };
+    };
+    spacing: {
+        layout: {
+            page: string;
+            section: string;
+            subsection: string;
+            inline: string;
+        };
+        component: {
+            xxs: string;
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+        };
+        custom: {};
+    };
+    radius: {
+        default: string;
+        card: string;
+        button: string;
+        input: string;
+        badge: string;
+        pill: string;
+        circle: string;
+        custom: {};
+    };
+    shadows: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        inner: string;
+        'elevation-low': string;
+        'elevation-medium': string;
+        'elevation-high': string;
+        card: string;
+        dropdown: string;
+        modal: string;
+    };
+};
+type Tokens = typeof tokens;
+
+export { type Colors, type Radius, type Shadows, type Spacing, type Tokens, type Typography, colors, radius, shadows, spacing, tokens, typography };