@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/typography/typography.constants.ts

@@ -0,0 +1,700 @@
+import {
+    FontOptionItem,
+    FontScaleOptionItem,
+    FontSizeScale,
+    SupportedArabicFont,
+    SupportedHeadingFont,
+    SupportedLatinFont,
+    ThemedTextAlign,
+    ThemedTextColor,
+    ThemedTextTransform,
+    ThemedTextVariant,
+    TypographyConfig,
+    TypographyVariantItem,
+} from "./typography.types";
+
+/**
+ * Default Typography Configuration
+ */
+export const DEFAULT_TYPOGRAPHY_CONFIG: TypographyConfig = {
+    latinFont: "inter",
+    arabicFont: "cairo",
+    headingFont: "default",
+    fontScale: "normal",
+    baseFontSize: 14,
+};
+
+/**
+ * Supported Latin Fonts with metadata and CSS mappings
+ */
+export const LATIN_FONT_OPTIONS: FontOptionItem<SupportedLatinFont>[] = [
+    {
+        id: "inter",
+        label: "Inter",
+        nativeLabel: "Inter",
+        cssClass: "font-inter",
+        fontFamily: "'Inter', sans-serif",
+        description: "Modern, clean, and highly readable interface typography",
+        sampleText: "The quick brown fox jumps over the lazy dog",
+    },
+    {
+        id: "poppins",
+        label: "Poppins",
+        nativeLabel: "Poppins",
+        cssClass: "font-poppins",
+        fontFamily: "'Poppins', sans-serif",
+        description: "Geometric sans-serif with friendly and balanced curves",
+        sampleText: "Streamlined operations & ticket workflows",
+    },
+    {
+        id: "outfit",
+        label: "Outfit",
+        nativeLabel: "Outfit",
+        cssClass: "font-outfit",
+        fontFamily: "'Outfit', sans-serif",
+        description: "Contemporary brand font inspired by digital products",
+        sampleText: "Enterprise IT Service Management Suite",
+    },
+    {
+        id: "space-grotesk",
+        label: "Space Grotesk",
+        nativeLabel: "Space Grotesk",
+        cssClass: "font-space-grotesk",
+        fontFamily: "'Space Grotesk', sans-serif",
+        description: "Technical, distinctive monospace-inspired proportions",
+        sampleText: "Automated Incident Response #INC-8021",
+    },
+    {
+        id: "plus-jakarta-sans",
+        label: "Plus Jakarta Sans",
+        nativeLabel: "Plus Jakarta Sans",
+        cssClass: "font-plus-jakarta-sans",
+        fontFamily: "'Plus Jakarta Sans', sans-serif",
+        description: "Versatile neo-grotesque optimized for dense screens",
+        sampleText: "Real-time SLA Analytics and Team Workloads",
+    },
+    {
+        id: "syne",
+        label: "Syne",
+        nativeLabel: "Syne",
+        cssClass: "font-syne",
+        fontFamily: "'Syne', sans-serif",
+        description: "Expressive, bold artistic typeface for titles",
+        sampleText: "Intelligent AI Copilot for IT Teams",
+    },
+    {
+        id: "baloo",
+        label: "Baloo 2",
+        nativeLabel: "Baloo 2",
+        cssClass: "font-baloo",
+        fontFamily: "'Baloo 2', sans-serif",
+        description: "Warm, rounded and highly legible multilingual font",
+        sampleText: "Customer Success & Helpdesk Portal",
+    },
+];
+
+/**
+ * Supported Arabic (RTL) Fonts with metadata
+ */
+export const ARABIC_FONT_OPTIONS: FontOptionItem<SupportedArabicFont>[] = [
+    {
+        id: "cairo",
+        label: "Cairo",
+        nativeLabel: "كايرو",
+        cssClass: "font-cairo",
+        fontFamily: "'Cairo', sans-serif",
+        description:
+            "Modern Arabic typography with great clarity across screen sizes",
+        sampleText: "نظام إدارة خدمات تقنية المعلومات والعمليات المتقدمة",
+    },
+    {
+        id: "tajawal",
+        label: "Tajawal",
+        nativeLabel: "تجوال",
+        cssClass: "font-tajawal",
+        fontFamily: "'Tajawal', sans-serif",
+        description:
+            "Fluid geometric font engineered specifically for Arabic UI",
+        sampleText: "متابعة تذاكر الدعم الفني وسير العمل بدقة وسرعة",
+    },
+    {
+        id: "almarai",
+        label: "Almarai",
+        nativeLabel: "المراعي",
+        cssClass: "font-almarai",
+        fontFamily: "'Almarai', sans-serif",
+        description: "Crisp and structured Arabic sans-serif for dashboards",
+        sampleText: "إحصائيات مستوى الخدمة ومؤشرات الأداء اللحظية",
+    },
+    {
+        id: "noto-kufi-arabic",
+        label: "Noto Kufi Arabic",
+        nativeLabel: "نوتو كوفي",
+        cssClass: "font-noto-kufi-arabic",
+        fontFamily: "'Noto Kufi Arabic', sans-serif",
+        description: "Formal Kufi calligraphy adapted for digital software",
+        sampleText: "لوحة التحكم والتقارير التنفيذية للمؤسسة",
+    },
+    {
+        id: "amiri",
+        label: "Amiri",
+        nativeLabel: "أميري",
+        cssClass: "font-amiri",
+        fontFamily: "'Amiri', serif",
+        description: "Traditional classical Naskh font for formal documents",
+        sampleText: "اتفاقيات مستوى الخدمة والسياسات الرسمية",
+    },
+];
+
+/**
+ * Supported Heading Fonts
+ */
+export const HEADING_FONT_OPTIONS: FontOptionItem<SupportedHeadingFont>[] = [
+    {
+        id: "default",
+        label: "Match Body Font",
+        cssClass: "",
+        fontFamily: "inherit",
+        description:
+            "Inherits the active body font family for visual consistency",
+    },
+    {
+        id: "space-grotesk",
+        label: "Space Grotesk",
+        cssClass: "font-space-grotesk",
+        fontFamily: "'Space Grotesk', sans-serif",
+        description: "Technical, modern contrast for headers",
+    },
+    {
+        id: "outfit",
+        label: "Outfit",
+        cssClass: "font-outfit",
+        fontFamily: "'Outfit', sans-serif",
+        description: "Contemporary display sans-serif",
+    },
+    {
+        id: "syne",
+        label: "Syne",
+        cssClass: "font-syne",
+        fontFamily: "'Syne', sans-serif",
+        description: "Striking high-impact typography for top titles",
+    },
+    {
+        id: "playfair",
+        label: "Playfair Display",
+        cssClass: "font-playfair",
+        fontFamily: "'Playfair Display', serif",
+        description: "Elegant serif typography for editorial feel",
+    },
+    {
+        id: "inter",
+        label: "Inter",
+        cssClass: "font-inter",
+        fontFamily: "'Inter', sans-serif",
+        description: "Neutral, highly focused UI headings",
+    },
+    {
+        id: "poppins",
+        label: "Poppins",
+        cssClass: "font-poppins",
+        fontFamily: "'Poppins', sans-serif",
+        description: "Rounded geometric titles",
+    },
+];
+
+/**
+ * Font Scale / Density options
+ */
+export const FONT_SCALE_OPTIONS: FontScaleOptionItem[] = [
+    {
+        id: "compact",
+        label: "Compact",
+        description:
+            "Dense information layout, ideal for data-heavy tables and screens",
+        multiplier: 0.7,
+    },
+    {
+        id: "normal",
+        label: "Normal",
+        description:
+            "Standard balanced scale optimized for general dashboard usability",
+        multiplier: 0.9,
+    },
+    {
+        id: "comfortable",
+        label: "Comfortable",
+        description: "Relaxed, larger proportions for enhanced readability",
+        multiplier: 1.1,
+    },
+];
+
+/**
+ * Font Family Class Map
+ * Maps individual font identifiers to Tailwind CSS utility classes
+ */
+export const FONT_FAMILIES_MAP: Record<string, string> = {
+    // Latin
+    inter: "font-inter",
+    poppins: "font-poppins",
+    outfit: "font-outfit",
+    "space-grotesk": "font-space-grotesk",
+    "plus-jakarta-sans": "font-plus-jakarta-sans",
+    syne: "font-syne",
+    baloo: "font-baloo",
+    playfair: "font-playfair",
+    // Arabic
+    cairo: "font-cairo",
+    tajawal: "font-tajawal",
+    almarai: "font-almarai",
+    "noto-kufi-arabic": "font-noto-kufi-arabic",
+    amiri: "font-amiri",
+    // Legacy fallbacks
+    "akaya-telivigala": "font-sans",
+    "segoe-arabic": "font-cairo",
+    "expo-arabic": "font-cairo",
+};
+
+/**
+ * Text Colors Map (Using dashboard CSS variables)
+ */
+export const TEXT_COLORS_MAP: Record<ThemedTextColor, string> = {
+    primary: "text-dashboard-primary",
+    secondary: "text-dashboard-muted-foreground",
+    accent: "text-dashboard-accent",
+    success: "text-emerald-500 dark:text-emerald-400",
+    warning: "text-amber-500 dark:text-amber-400",
+    error: "text-dashboard-destructive",
+    info: "text-sky-500 dark:text-sky-400",
+    foreground: "text-dashboard-foreground",
+    muted: "text-dashboard-muted-foreground",
+    background: "text-dashboard-background",
+};
+
+/**
+ * Variant Configurations Array by Scale (compact, normal, comfortable)
+ * Contains the variant array of objects handling the font size, font weight,
+ * line-height, and tracking for each scale density mode.
+ */
+export const VARIANTS_CONFIG_BY_SCALE: Record<
+    FontSizeScale,
+    TypographyVariantItem[]
+> = {
+    compact: [
+        {
+            variant: "h1",
+            size: "text-2xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "title",
+            size: "text-xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h2",
+            size: "text-lg",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "heading",
+            size: "text-lg",
+            weight: "font-semibold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "section",
+            size: "text-base",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h3",
+            size: "text-sm",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subheading",
+            size: "text-xs",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h4",
+            size: "text-xs",
+            weight: "font-semibold",
+            lineHeight: "leading-normal",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subtitle",
+            size: "text-xs",
+            weight: "font-normal",
+            lineHeight: "leading-normal",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "lead",
+            size: "text-sm",
+            weight: "font-normal",
+            lineHeight: "leading-normal",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "body",
+            size: "text-xs",
+            weight: "font-normal",
+            lineHeight: "leading-normal",
+            letterSpacing: "tracking-normal",
+        },
+        {
+            variant: "caption",
+            size: "text-xs",
+            weight: "font-medium",
+            lineHeight: "leading-none",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "label",
+            size: "text-xs",
+            weight: "font-semibold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-wider",
+            extraClasses: "uppercase text-dashboard-muted-foreground",
+        },
+        {
+            variant: "metric",
+            size: "text-xl",
+            weight: "font-bold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "code",
+            size: "text-xs",
+            weight: "font-mono font-medium",
+            extraClasses:
+                "bg-dashboard-secondary/60 text-dashboard-foreground px-1.5 py-0.5 rounded border border-dashboard-border/60",
+        },
+        { variant: "sidebar", size: "text-[8.5px]", weight: "font-normal" },
+    ],
+    normal: [
+        {
+            variant: "h1",
+            size: "text-3xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "title",
+            size: "text-2xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h2",
+            size: "text-xl",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "heading",
+            size: "text-xl",
+            weight: "font-semibold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "section",
+            size: "text-lg",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h3",
+            size: "text-base",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subheading",
+            size: "text-sm",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h4",
+            size: "text-sm",
+            weight: "font-semibold",
+            lineHeight: "leading-normal",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subtitle",
+            size: "text-xs",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "lead",
+            size: "text-base",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "body",
+            size: "text-sm",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            letterSpacing: "tracking-normal",
+        },
+        {
+            variant: "caption",
+            size: "text-xs",
+            weight: "font-medium",
+            lineHeight: "leading-none",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "label",
+            size: "text-xs",
+            weight: "font-semibold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-wider",
+            extraClasses: "uppercase text-dashboard-muted-foreground",
+        },
+        {
+            variant: "metric",
+            size: "text-2xl",
+            weight: "font-bold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "code",
+            size: "text-xs",
+            weight: "font-mono font-medium",
+            extraClasses:
+                "bg-dashboard-secondary/60 text-dashboard-foreground px-1.5 py-0.5 rounded border border-dashboard-border/60",
+        },
+        { variant: "sidebar", size: "text-[9.5px]", weight: "font-normal" },
+    ],
+    comfortable: [
+        {
+            variant: "h1",
+            size: "text-4xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "title",
+            size: "text-3xl",
+            weight: "font-bold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h2",
+            size: "text-2xl",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "heading",
+            size: "text-2xl",
+            weight: "font-semibold",
+            lineHeight: "leading-tight",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "section",
+            size: "text-xl",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h3",
+            size: "text-lg",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subheading",
+            size: "text-base",
+            weight: "font-semibold",
+            lineHeight: "leading-snug",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "h4",
+            size: "text-base",
+            weight: "font-semibold",
+            lineHeight: "leading-normal",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "subtitle",
+            size: "text-sm",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "lead",
+            size: "text-lg",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "body",
+            size: "text-base",
+            weight: "font-normal",
+            lineHeight: "leading-relaxed",
+            letterSpacing: "tracking-normal",
+        },
+        {
+            variant: "caption",
+            size: "text-sm",
+            weight: "font-medium",
+            lineHeight: "leading-none",
+            extraClasses: "text-dashboard-muted-foreground",
+        },
+        {
+            variant: "label",
+            size: "text-sm",
+            weight: "font-semibold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-wider",
+            extraClasses: "uppercase text-dashboard-muted-foreground",
+        },
+        {
+            variant: "metric",
+            size: "text-3xl",
+            weight: "font-bold",
+            lineHeight: "leading-none",
+            letterSpacing: "tracking-tight",
+        },
+        {
+            variant: "code",
+            size: "text-sm",
+            weight: "font-mono font-medium",
+            extraClasses:
+                "bg-dashboard-secondary/60 text-dashboard-foreground px-2 py-0.5 rounded border border-dashboard-border/60",
+        },
+        { variant: "sidebar", size: "text-[10.5px]", weight: "font-normal" },
+    ],
+};
+
+/**
+ * Compiled map for O(1) variant style resolution by scale
+ */
+export const VARIANT_STYLES_BY_SCALE: Record<
+    FontSizeScale,
+    Record<ThemedTextVariant, string>
+> = {
+    compact: Object.fromEntries(
+        VARIANTS_CONFIG_BY_SCALE.compact.map((item) => [
+            item.variant,
+            [
+                item.size,
+                item.weight,
+                item.lineHeight,
+                item.letterSpacing,
+                item.extraClasses,
+            ]
+                .filter(Boolean)
+                .join(" "),
+        ]),
+    ) as Record<ThemedTextVariant, string>,
+    normal: Object.fromEntries(
+        VARIANTS_CONFIG_BY_SCALE.normal.map((item) => [
+            item.variant,
+            [
+                item.size,
+                item.weight,
+                item.lineHeight,
+                item.letterSpacing,
+                item.extraClasses,
+            ]
+                .filter(Boolean)
+                .join(" "),
+        ]),
+    ) as Record<ThemedTextVariant, string>,
+    comfortable: Object.fromEntries(
+        VARIANTS_CONFIG_BY_SCALE.comfortable.map((item) => [
+            item.variant,
+            [
+                item.size,
+                item.weight,
+                item.lineHeight,
+                item.letterSpacing,
+                item.extraClasses,
+            ]
+                .filter(Boolean)
+                .join(" "),
+        ]),
+    ) as Record<ThemedTextVariant, string>,
+};
+
+/**
+ * Helper to resolve complete variant styling (size + weight + tracking) by active scale
+ */
+export const getVariantStyle = (
+    variant: ThemedTextVariant = "body",
+    scale: FontSizeScale = "normal",
+): string => {
+    const scaleStyles =
+        VARIANT_STYLES_BY_SCALE[scale] || VARIANT_STYLES_BY_SCALE.normal;
+    return scaleStyles[variant] || scaleStyles.body;
+};
+
+/**
+ * Variant Styles Map (Default normal fallback for backwards compatibility)
+ */
+export const VARIANT_STYLES_MAP: Record<ThemedTextVariant, string> =
+    VARIANT_STYLES_BY_SCALE.normal;
+
+/**
+ * Text Alignments Map
+ */
+export const TEXT_ALIGNMENTS_MAP: Record<ThemedTextAlign, string> = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+    justify: "text-justify",
+    start: "text-start",
+    end: "text-end",
+};
+
+/**
+ * Text Transforms Map
+ */
+export const TEXT_TRANSFORMS_MAP: Record<ThemedTextTransform, string> = {
+    none: "",
+    lowercase: "lowercase",
+    capitalize: "capitalize",
+    uppercase: "uppercase",
+};