@drdex0101/water-design-system 1.0.1

package/dist/tokens/semantic.d.ts

@@ -0,0 +1,208 @@
+/**
+ * Water Design System - Semantic Color Tokens
+ *
+ * Extracted from Figma Water Design System
+ * Semantic colors map primitive colors to their functional use.
+ *
+ * Usage Rules:
+ * 1. Semantic colors describe the color itself (e.g., Blue), not its function (e.g., Action)
+ * 2. When creating standalone components or designing calculated targets, choose Gray-900 or Blue-500 as base (Primitive Color)
+ * 3. Semantic colors must match human visual cognition and brand requirements
+ * 4. Semantic colors do not exist in isolation, they must work within the system. For example,
+ *    on bg-secondary background, prioritize text-secondary pairing to maintain hierarchy
+ */
+export declare const background: {
+    readonly light: {
+        readonly default: "#ffffff";
+        readonly secondary: "#f7f8f9";
+        readonly tertiary: "#f3f4f6";
+        readonly overlay: "#2a2d33";
+        readonly disabled: "#eeeff2";
+        readonly success: "#e7f7ed";
+        readonly error: "#fdecec";
+        readonly warning: "#fef7e6";
+        readonly brand: "#2e9dff";
+        readonly brandSubtle: "#eaf5ff";
+        readonly accent: "#e77300";
+        readonly accent2: "#e77300";
+    };
+    readonly dark: {
+        readonly default: "#2a2d33";
+        readonly secondary: "#363a43";
+        readonly tertiary: "#464b56";
+        readonly overlay: "#000000";
+        readonly disabled: "#464b56";
+        readonly success: "#05491e";
+        readonly error: "#641d1d";
+        readonly warning: "#654a00";
+        readonly brand: "#2e9dff";
+        readonly brandSubtle: "#13426b";
+        readonly accent: "#e77300";
+        readonly accent2: "#e77300";
+    };
+};
+export declare const text: {
+    readonly light: {
+        readonly primary: "#2a2d33";
+        readonly secondary: "#5a606e";
+        readonly tertiary: "#636a79";
+        readonly disabled: "#828894";
+        readonly placeholder: "#828894";
+        readonly success: "#0a9d41";
+        readonly error: "#d93e3e";
+        readonly warning: "#aa7e00";
+        readonly link: "#2e9dff";
+        readonly brand: "#2e9dff";
+        readonly onBrand: "#ffffff";
+        readonly pokerCall: "#0bad47";
+        readonly pokerRaise: "#e77300";
+    };
+    readonly dark: {
+        readonly primary: "#ffffff";
+        readonly secondary: "#969ba5";
+        readonly tertiary: "#828894";
+        readonly disabled: "#636a79";
+        readonly placeholder: "#636a79";
+        readonly success: "#3cbd6c";
+        readonly error: "#f26969";
+        readonly warning: "#f3c133";
+        readonly link: "#58b1ff";
+        readonly brand: "#58b1ff";
+        readonly onBrand: "#ffffff";
+        readonly pokerCall: "#3cbd6c";
+        readonly pokerRaise: "#ec8f33";
+    };
+};
+export declare const border: {
+    readonly light: {
+        readonly primary: "#969ba5";
+        readonly subtle: "#b7bac1";
+        readonly focus: "#2e9dff";
+        readonly success: "#0bad47";
+        readonly error: "#ef4444";
+        readonly warning: "#f0b100";
+    };
+    readonly dark: {
+        readonly primary: "#5a606e";
+        readonly subtle: "#464b56";
+        readonly focus: "#58b1ff";
+        readonly success: "#3cbd6c";
+        readonly error: "#f26969";
+        readonly warning: "#f3c133";
+    };
+};
+export declare const semanticColors: {
+    readonly background: {
+        readonly light: {
+            readonly default: "#ffffff";
+            readonly secondary: "#f7f8f9";
+            readonly tertiary: "#f3f4f6";
+            readonly overlay: "#2a2d33";
+            readonly disabled: "#eeeff2";
+            readonly success: "#e7f7ed";
+            readonly error: "#fdecec";
+            readonly warning: "#fef7e6";
+            readonly brand: "#2e9dff";
+            readonly brandSubtle: "#eaf5ff";
+            readonly accent: "#e77300";
+            readonly accent2: "#e77300";
+        };
+        readonly dark: {
+            readonly default: "#2a2d33";
+            readonly secondary: "#363a43";
+            readonly tertiary: "#464b56";
+            readonly overlay: "#000000";
+            readonly disabled: "#464b56";
+            readonly success: "#05491e";
+            readonly error: "#641d1d";
+            readonly warning: "#654a00";
+            readonly brand: "#2e9dff";
+            readonly brandSubtle: "#13426b";
+            readonly accent: "#e77300";
+            readonly accent2: "#e77300";
+        };
+    };
+    readonly text: {
+        readonly light: {
+            readonly primary: "#2a2d33";
+            readonly secondary: "#5a606e";
+            readonly tertiary: "#636a79";
+            readonly disabled: "#828894";
+            readonly placeholder: "#828894";
+            readonly success: "#0a9d41";
+            readonly error: "#d93e3e";
+            readonly warning: "#aa7e00";
+            readonly link: "#2e9dff";
+            readonly brand: "#2e9dff";
+            readonly onBrand: "#ffffff";
+            readonly pokerCall: "#0bad47";
+            readonly pokerRaise: "#e77300";
+        };
+        readonly dark: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#969ba5";
+            readonly tertiary: "#828894";
+            readonly disabled: "#636a79";
+            readonly placeholder: "#636a79";
+            readonly success: "#3cbd6c";
+            readonly error: "#f26969";
+            readonly warning: "#f3c133";
+            readonly link: "#58b1ff";
+            readonly brand: "#58b1ff";
+            readonly onBrand: "#ffffff";
+            readonly pokerCall: "#3cbd6c";
+            readonly pokerRaise: "#ec8f33";
+        };
+    };
+    readonly border: {
+        readonly light: {
+            readonly primary: "#969ba5";
+            readonly subtle: "#b7bac1";
+            readonly focus: "#2e9dff";
+            readonly success: "#0bad47";
+            readonly error: "#ef4444";
+            readonly warning: "#f0b100";
+        };
+        readonly dark: {
+            readonly primary: "#5a606e";
+            readonly subtle: "#464b56";
+            readonly focus: "#58b1ff";
+            readonly success: "#3cbd6c";
+            readonly error: "#f26969";
+            readonly warning: "#f3c133";
+        };
+    };
+};
+export declare const bgDefault: "#ffffff";
+export declare const bgSecondary: "#f7f8f9";
+export declare const bgTertiary: "#f3f4f6";
+export declare const bgOverlay: "#2a2d33";
+export declare const bgDisabled: "#eeeff2";
+export declare const bgSuccess: "#e7f7ed";
+export declare const bgError: "#fdecec";
+export declare const bgWarning: "#fef7e6";
+export declare const bgBrand: "#2e9dff";
+export declare const bgBrandSubtle: "#eaf5ff";
+export declare const bgAccent: "#e77300";
+export declare const textPrimary: "#2a2d33";
+export declare const textSecondary: "#5a606e";
+export declare const textTertiary: "#636a79";
+export declare const textDisabled: "#828894";
+export declare const textPlaceholder: "#828894";
+export declare const textSuccess: "#0a9d41";
+export declare const textError: "#d93e3e";
+export declare const textWarning: "#aa7e00";
+export declare const textLink: "#2e9dff";
+export declare const textBrand: "#2e9dff";
+export declare const textOnBrand: "#ffffff";
+export declare const borderPrimary: "#969ba5";
+export declare const borderSubtle: "#b7bac1";
+export declare const borderFocus: "#2e9dff";
+export declare const borderSuccess: "#0bad47";
+export declare const borderError: "#ef4444";
+export declare const borderWarning: "#f0b100";
+export type BackgroundColor = keyof typeof background.light;
+export type TextColor = keyof typeof text.light;
+export type BorderColor = keyof typeof border.light;
+export type ThemeMode = 'light' | 'dark';
+export type SemanticColors = typeof semanticColors;

package/dist/tokens/typography.d.ts

@@ -0,0 +1,490 @@
+/**
+ * Water Design System - Typography Tokens
+ *
+ * Extracted from Figma Water Design System
+ *
+ * Font Family: Inter (primary), Noto Sans TC (Chinese fallback)
+ *
+ * Usage Rules:
+ * 1. Use semantic typography tokens (e.g., display, h1, bodyLg) instead of raw values
+ * 2. Mobile scale is the default; desktop scale is used for larger screens
+ * 3. Maintain consistent line heights: 1.5 for headings, 1.2 for body text
+ */
+export declare const fontFamily: {
+    readonly main: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    readonly mono: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace";
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+export declare const lineHeight: {
+    readonly tight: 1.2;
+    readonly normal: 1.5;
+};
+export declare const fontSize: {
+    readonly mobile: {
+        readonly display: 28;
+        readonly h1: 24;
+        readonly h2: 20;
+        readonly bodyLg: 16;
+        readonly bodyMd: 14;
+        readonly bodySm: 12;
+        readonly caption: 10;
+        readonly poker: 8;
+    };
+    readonly desktop: {
+        readonly display: 40;
+        readonly h1: 32;
+        readonly h2: 24;
+        readonly bodyLg: 18;
+        readonly bodyMd: 16;
+        readonly bodySm: 14;
+        readonly caption: 12;
+        readonly poker: 10;
+    };
+};
+export interface TypographyStyle {
+    fontSize: number;
+    fontWeight: number;
+    lineHeight: number;
+    fontFamily: string;
+}
+export declare const typographyMobile: {
+    readonly display: {
+        readonly fontSize: 28;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly h1: {
+        readonly fontSize: 24;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly h2: {
+        readonly fontSize: 20;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgBold: {
+        readonly fontSize: 16;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgMedium: {
+        readonly fontSize: 16;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgRegular: {
+        readonly fontSize: 16;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdSemiBold: {
+        readonly fontSize: 14;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdMedium: {
+        readonly fontSize: 14;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdRegular: {
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmSemiBold: {
+        readonly fontSize: 12;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmMedium: {
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmRegular: {
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionSemiBold: {
+        readonly fontSize: 10;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionMedium: {
+        readonly fontSize: 10;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionRegular: {
+        readonly fontSize: 10;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly pokerMedium: {
+        readonly fontSize: 8;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+};
+export declare const typographyDesktop: {
+    readonly display: {
+        readonly fontSize: 40;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly h1: {
+        readonly fontSize: 32;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly h2: {
+        readonly fontSize: 24;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgBold: {
+        readonly fontSize: 18;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgMedium: {
+        readonly fontSize: 18;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyLgRegular: {
+        readonly fontSize: 18;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdSemiBold: {
+        readonly fontSize: 16;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdMedium: {
+        readonly fontSize: 16;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodyMdRegular: {
+        readonly fontSize: 16;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmSemiBold: {
+        readonly fontSize: 14;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmMedium: {
+        readonly fontSize: 14;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly bodySmRegular: {
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionSemiBold: {
+        readonly fontSize: 12;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionMedium: {
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly captionRegular: {
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+    readonly pokerMedium: {
+        readonly fontSize: 10;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+    };
+};
+export declare const typography: {
+    readonly fontFamily: {
+        readonly main: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        readonly mono: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.2;
+        readonly normal: 1.5;
+    };
+    readonly fontSize: {
+        readonly mobile: {
+            readonly display: 28;
+            readonly h1: 24;
+            readonly h2: 20;
+            readonly bodyLg: 16;
+            readonly bodyMd: 14;
+            readonly bodySm: 12;
+            readonly caption: 10;
+            readonly poker: 8;
+        };
+        readonly desktop: {
+            readonly display: 40;
+            readonly h1: 32;
+            readonly h2: 24;
+            readonly bodyLg: 18;
+            readonly bodyMd: 16;
+            readonly bodySm: 14;
+            readonly caption: 12;
+            readonly poker: 10;
+        };
+    };
+    readonly mobile: {
+        readonly display: {
+            readonly fontSize: 28;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly h1: {
+            readonly fontSize: 24;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly h2: {
+            readonly fontSize: 20;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgBold: {
+            readonly fontSize: 16;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgMedium: {
+            readonly fontSize: 16;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgRegular: {
+            readonly fontSize: 16;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdSemiBold: {
+            readonly fontSize: 14;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdMedium: {
+            readonly fontSize: 14;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdRegular: {
+            readonly fontSize: 14;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmSemiBold: {
+            readonly fontSize: 12;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmMedium: {
+            readonly fontSize: 12;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmRegular: {
+            readonly fontSize: 12;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionSemiBold: {
+            readonly fontSize: 10;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionMedium: {
+            readonly fontSize: 10;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionRegular: {
+            readonly fontSize: 10;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly pokerMedium: {
+            readonly fontSize: 8;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+    };
+    readonly desktop: {
+        readonly display: {
+            readonly fontSize: 40;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly h1: {
+            readonly fontSize: 32;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly h2: {
+            readonly fontSize: 24;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgBold: {
+            readonly fontSize: 18;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgMedium: {
+            readonly fontSize: 18;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyLgRegular: {
+            readonly fontSize: 18;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdSemiBold: {
+            readonly fontSize: 16;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdMedium: {
+            readonly fontSize: 16;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodyMdRegular: {
+            readonly fontSize: 16;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.5;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmSemiBold: {
+            readonly fontSize: 14;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmMedium: {
+            readonly fontSize: 14;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly bodySmRegular: {
+            readonly fontSize: 14;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionSemiBold: {
+            readonly fontSize: 12;
+            readonly fontWeight: 600;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionMedium: {
+            readonly fontSize: 12;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly captionRegular: {
+            readonly fontSize: 12;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+        readonly pokerMedium: {
+            readonly fontSize: 10;
+            readonly fontWeight: 500;
+            readonly lineHeight: 1.2;
+            readonly fontFamily: "'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, Roboto, sans-serif";
+        };
+    };
+};
+export declare const getTypographyStyles: (style: TypographyStyle) => React.CSSProperties;
+export type FontFamily = keyof typeof fontFamily;
+export type FontWeight = keyof typeof fontWeight;
+export type LineHeight = keyof typeof lineHeight;
+export type TypographyToken = keyof typeof typographyMobile;
+export type Typography = typeof typography;