blacktrigram 0.7.2

package/lib/types/constants/designSystem.d.ts

@@ -0,0 +1,469 @@
+/**
+ * Design System for Black Trigram HUD Components
+ *
+ * Provides a unified visual language for cyberpunk Korean-themed interfaces
+ * All values based on KOREAN_COLORS and FONT_FAMILY constants
+ *
+ * Key Principles:
+ * - 4px base spacing scale for consistent rhythm
+ * - Typography scale optimized for Korean text readability
+ * - WCAG AA compliant color hierarchies
+ * - Consistent HUD styling with cyberpunk aesthetic
+ *
+ * @korean 흑괘 HUD 디자인 시스템
+ * @module DesignSystem
+ */
+/**
+ * Typography Scale
+ *
+ * Optimized for Korean text with proper line-heights and font weights.
+ * All sizes include fontFamily to ensure consistent Korean rendering.
+ *
+ * @korean 타이포그래피 척도
+ */
+export declare const TYPOGRAPHY: {
+    /** Heading 1 - Main titles (24px) */
+    readonly heading1: {
+        readonly fontSize: "24px";
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.2;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Heading 2 - Section titles (20px) */
+    readonly heading2: {
+        readonly fontSize: "20px";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.3;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Heading 3 - Subsection titles (16px) */
+    readonly heading3: {
+        readonly fontSize: "16px";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.4;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Body - Regular content (14px) */
+    readonly body: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Body Small - Secondary content (12px) */
+    readonly bodySmall: {
+        readonly fontSize: "12px";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Button - Button text (14px, semibold) */
+    readonly button: {
+        readonly fontSize: "14px";
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.4;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Caption - Labels and hints (10px) */
+    readonly caption: {
+        readonly fontSize: "10px";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.4;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Micro - Very small text (9px) - for dense information */
+    readonly micro: {
+        readonly fontSize: "9px";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.4;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+    /** Nano - Smallest text (8px) - for status indicators */
+    readonly nano: {
+        readonly fontSize: "8px";
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.3;
+        readonly fontFamily: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+};
+/**
+ * Pre-parsed Numeric Typography Values
+ *
+ * Performance optimization: Numeric font sizes parsed once at module load
+ * instead of repeated parseInt calls in component useMemo hooks.
+ *
+ * @korean 사전 파싱된 타이포그래피 숫자 값
+ */
+export declare const TYPOGRAPHY_NUMERIC: {
+    readonly heading1: 24;
+    readonly heading2: 20;
+    readonly heading3: 16;
+    readonly body: 14;
+    readonly bodySmall: 12;
+    readonly button: 14;
+    readonly caption: 10;
+    readonly micro: 9;
+    readonly nano: 8;
+};
+/**
+ * Spacing Scale (4px base)
+ *
+ * Consistent spacing system for margins, padding, and gaps.
+ * Based on 4px increments for visual rhythm.
+ *
+ * @korean 간격 척도
+ */
+export declare const SPACING: {
+    /** Extra Extra Small - 4px */
+    readonly xxs: "4px";
+    /** Extra Small - 8px */
+    readonly xs: "8px";
+    /** Small - 12px */
+    readonly sm: "12px";
+    /** Medium - 16px */
+    readonly md: "16px";
+    /** Large - 24px */
+    readonly lg: "24px";
+    /** Extra Large - 32px */
+    readonly xl: "32px";
+    /** Extra Extra Large - 48px */
+    readonly xxl: "48px";
+};
+/**
+ * Spacing Adjustments
+ *
+ * Fine-tuned spacing values for specific layout requirements.
+ * Use when standard SPACING scale doesn't provide exact needed value.
+ *
+ * @korean 간격 조정
+ */
+export declare const SPACING_ADJUSTMENTS: {
+    /** Extra small with minor adjustment - 10px (xs + 2px) */
+    readonly xsPlus: "10px";
+    /** Small with minor adjustment - 14px (sm + 2px) */
+    readonly smPlus: "14px";
+    /** Medium with minor adjustment - 18px (md + 2px) */
+    readonly mdPlus: "18px";
+    /** Small gap for compact layouts - 6px */
+    readonly compact: "6px";
+    /**
+     * Horizontal emphasis - 24px
+     * Aliases SPACING.lg for semantic use in wider horizontal padding
+     * Defined as 1.5x SPACING.md to emphasize horizontal breathing room
+     */
+    readonly horizontalEmphasis: "24px";
+    /** Micro gap - 3px (for very tight layouts) */
+    readonly micro: "3px";
+    /** Tiny margin - 2px (for subtle spacing) */
+    readonly tiny: "2px";
+};
+/**
+ * Pre-parsed Numeric Spacing Values
+ *
+ * Performance optimization: Numeric spacing values parsed once at module load.
+ * Eliminates repeated parseInt calls in component calculations.
+ *
+ * @korean 사전 파싱된 간격 숫자 값
+ */
+export declare const SPACING_NUMERIC: {
+    readonly xxs: 4;
+    readonly xs: 8;
+    readonly sm: 12;
+    readonly md: 16;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly xxl: 48;
+    readonly xsPlus: 10;
+    readonly smPlus: 14;
+    readonly mdPlus: 18;
+    readonly compact: 6;
+    readonly horizontalEmphasis: 24;
+    readonly micro: 3;
+    readonly tiny: 2;
+};
+/**
+ * Font Size Multipliers
+ *
+ * Scaling factors for responsive font size calculations.
+ * Used to maintain consistent proportions across different screen sizes.
+ *
+ * @korean 글꼴 크기 배율
+ */
+export declare const FONT_SIZE_MULTIPLIERS: {
+    /** Small title scaling - 60% of base */
+    readonly titleSmall: 0.6;
+    /** Small message scaling - 75% of base */
+    readonly messageSmall: 0.75;
+    /** Body small scaling - 87.5% of base */
+    readonly bodySmall: 0.875;
+    /** Title large scaling - 112.5% of base */
+    readonly titleLarge: 1.125;
+};
+/**
+ * Layout Multipliers
+ *
+ * Scaling factors for layout calculations.
+ * Used to maintain consistent spacing relationships.
+ *
+ * @korean 레이아웃 배율
+ */
+export declare const LAYOUT_MULTIPLIERS: {
+    /** Gap to padding ratio - 120% */
+    readonly gapToPadding: 1.2;
+};
+/**
+ * Border Radius Scale
+ *
+ * Consistent border radius values for UI elements.
+ * Provides semantic naming for rounded corners.
+ *
+ * @korean 테두리 반경 척도
+ */
+export declare const BORDER_RADIUS: {
+    /** None - 0px (sharp corners) */
+    readonly none: "0px";
+    /** Small - 4px */
+    readonly sm: "4px";
+    /** Medium - 6px */
+    readonly md: "6px";
+    /** Large - 8px */
+    readonly lg: "8px";
+    /** Extra Large - 12px */
+    readonly xl: "12px";
+    /** Full - 9999px (pill shape) */
+    readonly full: "9999px";
+};
+/**
+ * HUD Style Constants
+ *
+ * Unified styling for all HUD panels with cyberpunk Korean aesthetic.
+ * Includes backgrounds, borders, shadows, and interactive states.
+ *
+ * @korean HUD 스타일 상수
+ */
+export declare const HUD_STYLE: {
+    /** Background - Dark with 85% opacity */
+    readonly background: `rgba(${string}, 0.85)`;
+    /** Background RGB for gradient stops */
+    readonly backgroundRgb: string;
+    /** Border - 2px solid cyan */
+    readonly border: `2px solid ${string}`;
+    /** Border radius - 8px for smooth corners (from BORDER_RADIUS.lg) */
+    readonly borderRadius: "8px";
+    /** Box shadow - Subtle depth */
+    readonly shadow: `0 4px 12px rgba(${string}, 0.6)`;
+    /** Hover shadow - Increased depth on interaction */
+    readonly shadowHover: `0 6px 20px rgba(${string}, 0.3)`;
+    /** Backdrop filter - Blur for glassmorphism */
+    readonly backdropFilter: "blur(8px)";
+    /** Accent glow - For important elements */
+    readonly accentGlow: `0 0 10px rgba(${string}, 0.5)`;
+    /** Cyan glow - For primary highlights */
+    readonly cyanGlow: `0 0 10px rgba(${string}, 0.5)`;
+};
+/**
+ * Color Hierarchy for Text and UI Elements
+ *
+ * WCAG AA compliant color system for different levels of visual emphasis.
+ * All colors formatted as RGB strings for easy opacity manipulation.
+ *
+ * @korean 색상 계층
+ */
+export declare const HIERARCHY: {
+    /** Primary - Main content (White - highest contrast) */
+    readonly primary: {
+        readonly color: string;
+        readonly hex: 16777215;
+    };
+    /** Secondary - Supporting content (Light gray) */
+    readonly secondary: {
+        readonly color: string;
+        readonly hex: 13421772;
+    };
+    /** Tertiary - Subtle content (Medium gray) */
+    readonly tertiary: {
+        readonly color: string;
+        readonly hex: 11184810;
+    };
+    /** Muted - Disabled or inactive (Dark gray) */
+    readonly muted: {
+        readonly color: string;
+        readonly hex: 7829367;
+    };
+    /** Accent - Emphasis and highlights (Cyan) */
+    readonly accent: {
+        readonly color: string;
+        readonly hex: 59110;
+    };
+    /** Gold - Special emphasis (Gold) */
+    readonly gold: {
+        readonly color: string;
+        readonly hex: 16761856;
+    };
+    /** Accent with 70% opacity - For subtle emphasis */
+    readonly accent70: {
+        readonly color: `rgba(${string}, 0.7)`;
+        readonly hex: 59110;
+    };
+    /** Accent with 50% opacity - For backgrounds */
+    readonly accent50: {
+        readonly color: `rgba(${string}, 0.5)`;
+        readonly hex: 59110;
+    };
+    /** Primary with 80% opacity - For hover states */
+    readonly primary80: {
+        readonly color: `rgba(${string}, 0.8)`;
+        readonly hex: 16777215;
+    };
+};
+/**
+ * Border Styles for Different UI States
+ *
+ * @korean 테두리 스타일
+ */
+export declare const BORDERS: {
+    /** Default border - Cyan 40% opacity */
+    readonly default: `2px solid rgba(${string}, 0.4)`;
+    /** Accent border - Gold for emphasis */
+    readonly accent: `2px solid rgba(${string}, 0.6)`;
+    /** Muted border - Gray for subtle separation */
+    readonly muted: `1px solid rgba(${string}, 0.3)`;
+    /** Active border - Full cyan for interaction */
+    readonly active: `2px solid rgba(${string}, 1.0)`;
+};
+/**
+ * Gradient Backgrounds
+ *
+ * Cyberpunk-inspired gradients for panels and overlays.
+ *
+ * @korean 그라디언트 배경
+ */
+export declare const GRADIENTS: {
+    /** Vertical fade - Top to bottom */
+    readonly vertical: (opacity?: number) => string;
+    /** Vertical fade (reverse) - Bottom to top */
+    readonly verticalReverse: (opacity?: number) => string;
+    /** Horizontal fade - Left to right */
+    readonly horizontal: (opacity?: number) => string;
+    /** Horizontal fade (reverse) - Right to left */
+    readonly horizontalReverse: (opacity?: number) => string;
+    /** Radial fade - Center outward */
+    readonly radial: (opacity?: number) => string;
+};
+/**
+ * Transition Timings
+ *
+ * Consistent animation durations for smooth interactions.
+ *
+ * @korean 전환 타이밍
+ */
+export declare const TRANSITIONS: {
+    /** Fast - Quick interactions (150ms) */
+    readonly fast: "150ms ease-in-out";
+    /** Normal - Standard interactions (250ms) */
+    readonly normal: "250ms ease-in-out";
+    /** Slow - Emphasis animations (400ms) */
+    readonly slow: "400ms ease-in-out";
+};
+/**
+ * Opacity Constants
+ *
+ * Standard opacity values for consistent transparency effects.
+ *
+ * @korean 투명도 상수
+ */
+export declare const OPACITY: {
+    /** Base opacity for layered elements */
+    readonly base: 0.7;
+    /** Opacity increment for stacking */
+    readonly increment: 0.1;
+    /** High transparency */
+    readonly light: 0.3;
+    /** Medium transparency */
+    readonly medium: 0.5;
+    /** Low transparency */
+    readonly heavy: 0.8;
+};
+/**
+ * Combat UI Dimensions
+ *
+ * Common width and size constraints for combat UI elements.
+ *
+ * @korean 전투 UI 크기
+ */
+export declare const COMBAT_UI_DIMENSIONS: {
+    /** Combat log minimum width - mobile */
+    readonly combatLogMinMobile: "200px";
+    /** Combat log minimum width - desktop */
+    readonly combatLogMinDesktop: "280px";
+    /** Combat log maximum width - mobile (percentage) */
+    readonly combatLogMaxMobile: "90%";
+    /** Combat log maximum width - desktop */
+    readonly combatLogMaxDesktop: "500px";
+    /** Combat log maximum width percentage (mobile) - 90% as decimal */
+    readonly combatLogMaxWidthPercentMobile: 0.9;
+    /** Technique bar width - mobile (full width) */
+    readonly techniqueBarWidthMobile: "100%";
+    /** Technique bar width - desktop (70% width) */
+    readonly techniqueBarWidthDesktop: "70%";
+};
+/**
+ * Pre-parsed Numeric Combat UI Dimensions
+ *
+ * Performance optimization: Numeric dimension values parsed once at module load.
+ * Eliminates repeated parseInt calls for combat UI dimensions.
+ *
+ * @korean 사전 파싱된 전투 UI 크기 숫자 값
+ */
+export declare const COMBAT_UI_DIMENSIONS_NUMERIC: {
+    readonly combatLogMinMobile: 200;
+    readonly combatLogMinDesktop: 280;
+    readonly combatLogMaxDesktop: 500;
+};
+/**
+ * Text Effects
+ *
+ * Reusable text shadow effects for emphasis and readability.
+ *
+ * @korean 텍스트 효과
+ */
+export declare const TEXT_EFFECTS: {
+    /** Dark shadow for contrast on bright backgrounds */
+    readonly darkShadow: "0 0 4px rgba(0,0,0,0.8)";
+    /** Light glow for emphasis */
+    readonly lightGlow: "0 0 8px rgba(255,255,255,0.5)";
+};
+/**
+ * Get responsive spacing based on screen size
+ *
+ * Note: This helper function uses parseInt internally for flexibility
+ * in returning pixel-suffixed strings. For performance-critical useMemo
+ * calculations, prefer using SPACING_NUMERIC constants directly.
+ *
+ * @param baseSpacing - Base spacing value from SPACING scale
+ * @param isMobile - Whether mobile layout is active
+ * @param positionScale - Position scale multiplier (for 4K displays)
+ * @returns Calculated spacing in pixels
+ */
+export declare function getResponsiveSpacing(baseSpacing: keyof typeof SPACING, isMobile: boolean, positionScale?: number): string;
+/**
+ * Get responsive font size based on typography scale
+ *
+ * Note: This helper function uses parseInt internally for flexibility
+ * in returning pixel-suffixed strings. For performance-critical useMemo
+ * calculations, prefer using TYPOGRAPHY_NUMERIC constants directly.
+ *
+ * @param typographyLevel - Typography level from TYPOGRAPHY
+ * @param isMobile - Whether mobile layout is active
+ * @param positionScale - Position scale multiplier (for 4K displays)
+ * @returns Calculated font size in pixels
+ */
+export declare function getResponsiveFontSize(typographyLevel: keyof typeof TYPOGRAPHY, isMobile: boolean, positionScale?: number): string;
+/**
+ * Type definitions for design system usage
+ */
+export type TypographyLevel = keyof typeof TYPOGRAPHY;
+export type SpacingLevel = keyof typeof SPACING;
+export type BorderRadiusLevel = keyof typeof BORDER_RADIUS;
+export type HierarchyLevel = keyof typeof HIERARCHY;
+//# sourceMappingURL=designSystem.d.ts.map

package/lib/types/constants/designSystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"designSystem.d.ts","sourceRoot":"","sources":["../../../src/types/constants/designSystem.ts"],"names":[],"mappings":"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"}