@nobak/design-system 1.0.0

package/lib/styles/typography-advanced.js

@@ -0,0 +1,510 @@
+var _colors, _colors2;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Advanced Typography Patterns for Fintech Applications
+ * Extends the base typography system with advanced patterns and utilities
+ */
+
+import { globalTypography } from "./typography";
+import { space } from "./space";
+
+// Define a type for the theme to access colors safely
+
+// ====================
+// Type Definitions
+// ====================
+
+// Create a local BaseTypography object with proper typing
+var BaseTypography = {
+  // Basic text styles
+  displayLarge: {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[1200],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.tight,
+    letterSpacing: globalTypography.letterSpacing.tight
+  },
+  displayMedium: {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[1100],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.tight
+  },
+  displaySmall: {
+    fontFamily: globalTypography.fontFamily.sans,
+    fontSize: globalTypography.fontSize[900],
+    fontWeight: globalTypography.fontWeight.regular,
+    lineHeight: globalTypography.lineHeight.tight
+  }
+};
+
+// ====================
+// Type Definitions
+// ====================
+
+// ====================
+// Contextual Typography
+// ====================
+
+// ===========================
+// CONTEXTUAL TYPOGRAPHY TOKENS
+// Typography that adapts based on context and state
+// ===========================
+
+export var contextualTypography = {
+  // Typography that changes based on data state
+  dataState: {
+    // Loading state typography (subtle, muted)
+    loading: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      letterSpacing: globalTypography.letterSpacing.wide
+    }),
+    // Error state typography (attention-grabbing)
+    error: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.medium,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }),
+    // Success state typography (confident)
+    success: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.semibold,
+      letterSpacing: globalTypography.letterSpacing.normal
+    }),
+    // Empty state typography (encouraging)
+    empty: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[300],
+      lineHeight: globalTypography.lineHeight.relaxed
+    })
+  },
+  // Typography for different user experience levels
+  userLevel: {
+    // Beginner users - clearer, larger text
+    beginner: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[300],
+      lineHeight: globalTypography.lineHeight.relaxed
+    }),
+    // Expert users - more compact, information-dense
+    expert: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[200],
+      lineHeight: globalTypography.lineHeight.normal
+    }),
+    // Professional traders - ultra-dense, optimized for speed
+    trader: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[100],
+      lineHeight: globalTypography.lineHeight.tight
+    })
+  },
+  // Typography for different urgency levels
+  urgency: {
+    // Low urgency - relaxed, easy reading
+    low: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      lineHeight: globalTypography.lineHeight.relaxed
+    }),
+    // Medium urgency - standard attention
+    medium: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.medium
+    }),
+    // High urgency - demands attention
+    high: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.semibold,
+      letterSpacing: globalTypography.letterSpacing.wide,
+      textTransform: 'uppercase'
+    }),
+    // Critical urgency - maximum attention
+    critical: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.bold,
+      fontSize: globalTypography.fontSize[300],
+      letterSpacing: globalTypography.letterSpacing.wide * 1.5,
+      textTransform: 'uppercase'
+    })
+  }
+};
+
+// ===========================
+// PROGRESSIVE TYPOGRAPHY SCALES
+// Typography that scales based on importance or hierarchy
+// ===========================
+
+export var progressiveTypography = {
+  // Financial hierarchy - typography that emphasizes monetary importance
+  financialHierarchy: {
+    // Primary account balance
+    primary: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[1000],
+      fontWeight: globalTypography.fontWeight.bold
+    }),
+    // Secondary balances (savings, investments)
+    secondary: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[600]
+    }),
+    // Tertiary amounts (pending, fees)
+    tertiary: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[400]
+    }),
+    // Micro amounts (interest, cents)
+    micro: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[200]
+    })
+  },
+  // Risk hierarchy - typography that emphasizes risk levels
+  riskHierarchy: {
+    minimal: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.regular
+    }),
+    low: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.medium
+    }),
+    moderate: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.semibold,
+      letterSpacing: globalTypography.letterSpacing.wide
+    }),
+    high: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.bold,
+      fontSize: globalTypography.fontSize[300],
+      letterSpacing: globalTypography.letterSpacing.wide
+    }),
+    critical: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.extrabold,
+      fontSize: globalTypography.fontSize[400],
+      letterSpacing: globalTypography.letterSpacing.wide * 1.5,
+      // Wider spacing for critical items
+      textTransform: 'uppercase'
+    })
+  },
+  // Transaction hierarchy - typography for different transaction types
+  transactionHierarchy: {
+    // Major transactions (large transfers, investments)
+    major: _objectSpread(_objectSpread({}, BaseTypography.displayLarge), {}, {
+      fontWeight: globalTypography.fontWeight.bold
+    }),
+    // Standard transactions (regular payments)
+    standard: _objectSpread(_objectSpread({}, BaseTypography.displayMedium), {}, {
+      fontWeight: globalTypography.fontWeight.semibold
+    }),
+    // Minor transactions (fees, adjustments)
+    minor: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontWeight: globalTypography.fontWeight.medium
+    }),
+    // Micro transactions (rewards, interest)
+    micro: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.regular
+    })
+  }
+};
+
+// ===========================
+// SPECIALIZED TYPOGRAPHY UTILITIES
+// Advanced utilities for complex typography scenarios
+// ===========================
+
+// ===========================
+// TYPOGRAPHY UTILITIES
+// Advanced utilities for complex typography scenarios
+// ===========================
+
+export var advancedTypographyUtils = {
+  /**
+   * Apply contextual typography based on user level
+   */
+  applyUserLevelAdjustments: function applyUserLevelAdjustments(baseStyle, userLevel) {
+    var userLevelStyles = {
+      beginner: {
+        fontSizeMultiplier: 1.1,
+        lineHeightMultiplier: 1.2,
+        letterSpacingAdjustment: 0.01
+      },
+      intermediate: {
+        fontSizeMultiplier: 1.0,
+        lineHeightMultiplier: 1.1,
+        letterSpacingAdjustment: 0
+      },
+      expert: {
+        fontSizeMultiplier: 0.95,
+        lineHeightMultiplier: 1.0,
+        letterSpacingAdjustment: -0.005
+      },
+      trader: {
+        fontSizeMultiplier: 0.9,
+        lineHeightMultiplier: 0.9,
+        letterSpacingAdjustment: -0.01
+      }
+    };
+    var adjustments = userLevelStyles[userLevel];
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      fontSize: (baseStyle.fontSize || globalTypography.fontSize[200]) * adjustments.fontSizeMultiplier,
+      lineHeight: (baseStyle.lineHeight || globalTypography.lineHeight.normal) * adjustments.lineHeightMultiplier,
+      letterSpacing: (baseStyle.letterSpacing || 0) + adjustments.letterSpacingAdjustment
+    });
+  },
+  /**
+   * Get typography based on financial amount significance
+   */
+  getFinancialHierarchy: function getFinancialHierarchy(amount, userAccountBalance) {
+    var percentage = Math.abs(amount) / userAccountBalance;
+    if (percentage >= 0.5) {
+      return progressiveTypography.financialHierarchy.primary;
+    } else if (percentage >= 0.1) {
+      return progressiveTypography.financialHierarchy.secondary;
+    } else if (percentage >= 0.01) {
+      return progressiveTypography.financialHierarchy.tertiary;
+    }
+    return progressiveTypography.financialHierarchy.micro;
+  },
+  /**
+   * Get typography based on urgency level
+   */
+  getUrgencyTypography: function getUrgencyTypography(baseStyle, urgency) {
+    var urgencyAdjustments = contextualTypography.urgency[urgency];
+    return _objectSpread(_objectSpread(_objectSpread({}, baseStyle), urgencyAdjustments), {}, {
+      fontSize: baseStyle.fontSize,
+      fontFamily: baseStyle.fontFamily
+    });
+  },
+  /**
+   * Create animated typography that scales based on state
+   */
+  createAnimatedTextStyle: function createAnimatedTextStyle(baseStyle, animationState) {
+    var scaleMap = {
+      entering: 0.8,
+      active: 1.0,
+      exiting: 0.9
+    };
+    var opacityMap = {
+      entering: 0.6,
+      active: 1.0,
+      exiting: 0.8
+    };
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      transform: [{
+        scale: scaleMap[animationState]
+      }],
+      opacity: opacityMap[animationState]
+    });
+  },
+  /**
+   * Create typography with enhanced contrast for accessibility
+   */
+  createHighContrastStyle: function createHighContrastStyle(baseStyle, contrastLevel) {
+    var adjustments = {
+      standard: {
+        fontWeight: 0,
+        letterSpacing: 0
+      },
+      enhanced: {
+        fontWeight: 100,
+        letterSpacing: 0.01
+      },
+      maximum: {
+        fontWeight: 200,
+        letterSpacing: 0.02
+      }
+    };
+    var adjustment = adjustments[contrastLevel];
+    var baseWeight = typeof baseStyle.fontWeight === 'number' ? baseStyle.fontWeight : globalTypography.fontWeight.regular;
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      fontWeight: Math.min(baseWeight + adjustment.fontWeight, globalTypography.fontWeight.black),
+      letterSpacing: (baseStyle.letterSpacing || 0) + adjustment.letterSpacing
+    });
+  },
+  /**
+   * Create typography for dense data display
+   */
+  createDenseDataStyle: function createDenseDataStyle(baseStyle, density) {
+    var densityMap = {
+      comfortable: {
+        fontSize: 1.0,
+        lineHeight: 1.5,
+        letterSpacing: 0
+      },
+      compact: {
+        fontSize: 0.95,
+        lineHeight: 1.3,
+        letterSpacing: -0.005
+      },
+      dense: {
+        fontSize: 0.9,
+        lineHeight: 1.2,
+        letterSpacing: -0.01
+      }
+    };
+    var adjustments = densityMap[density];
+    return _objectSpread(_objectSpread({}, baseStyle), {}, {
+      fontSize: (baseStyle.fontSize || globalTypography.fontSize[200]) * adjustments.fontSize,
+      lineHeight: adjustments.lineHeight,
+      letterSpacing: (baseStyle.letterSpacing || 0) + adjustments.letterSpacing
+    });
+  }
+};
+
+// ===========================
+// TYPOGRAPHY PRESETS
+// Pre-configured typography combinations for specific use cases
+// ===========================
+
+export var typographyPresets = {
+  // Dashboard widget typography
+  dashboardWidget: {
+    title: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[400],
+      fontWeight: globalTypography.fontWeight.semibold
+    }),
+    value: _objectSpread(_objectSpread({}, BaseTypography.displayMedium), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[600]
+    }),
+    change: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200]
+    }),
+    subtitle: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      color: ((_colors = globalTypography.colors) === null || _colors === void 0 || (_colors = _colors.text) === null || _colors === void 0 ? void 0 : _colors.secondary) || '#64748b'
+    })
+  },
+  // Transaction list item typography
+  transactionListItem: {
+    description: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.medium
+    }),
+    amount: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[300],
+      fontWeight: globalTypography.fontWeight.semibold
+    }),
+    date: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      color: ((_colors2 = globalTypography.colors) === null || _colors2 === void 0 || (_colors2 = _colors2.text) === null || _colors2 === void 0 ? void 0 : _colors2.secondary) || '#64748b'
+    }),
+    status: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[75],
+      letterSpacing: globalTypography.letterSpacing.wide * 1.5,
+      textTransform: 'uppercase',
+      fontWeight: globalTypography.fontWeight.medium
+    })
+  },
+  // Account card typography
+  accountCard: {
+    accountName: _objectSpread(_objectSpread({}, BaseTypography.displayMedium), {}, {
+      fontSize: globalTypography.fontSize[300],
+      fontWeight: globalTypography.fontWeight.semibold
+    }),
+    accountNumber: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.mono,
+      fontSize: globalTypography.fontSize[100],
+      opacity: 0.8
+    }),
+    balance: _objectSpread(_objectSpread({}, BaseTypography.displayLarge), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[700],
+      fontWeight: globalTypography.fontWeight.bold
+    }),
+    balanceChange: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200]
+    })
+  },
+  // Market data typography
+  marketData: {
+    symbol: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[200],
+      fontWeight: globalTypography.fontWeight.bold
+    }),
+    price: _objectSpread(_objectSpread({}, BaseTypography.displayMedium), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[500],
+      fontWeight: globalTypography.fontWeight.semibold
+    }),
+    change: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[300]
+    }),
+    volume: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontFamily: globalTypography.fontFamily.tabular,
+      fontSize: globalTypography.fontSize[100],
+      opacity: 0.8
+    })
+  },
+  // Legal document typography
+  legalDocument: {
+    title: _objectSpread(_objectSpread({}, BaseTypography.displayLarge), {}, {
+      fontSize: globalTypography.fontSize[700],
+      lineHeight: globalTypography.lineHeight.tight,
+      fontWeight: globalTypography.fontWeight.bold,
+      marginBottom: space[400]
+    }),
+    section: _objectSpread(_objectSpread({}, BaseTypography.displayMedium), {}, {
+      fontSize: globalTypography.fontSize[400],
+      lineHeight: globalTypography.lineHeight.tight,
+      fontWeight: globalTypography.fontWeight.semibold,
+      marginTop: space[500],
+      marginBottom: space[300]
+    }),
+    body: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      lineHeight: globalTypography.lineHeight.relaxed,
+      marginBottom: space[300]
+    }),
+    disclaimer: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      lineHeight: globalTypography.lineHeight.normal,
+      fontStyle: 'italic',
+      opacity: 0.8
+    })
+  },
+  // Form typography
+  form: {
+    title: _objectSpread(_objectSpread({}, BaseTypography.displayLarge), {}, {
+      fontSize: globalTypography.fontSize[600],
+      fontWeight: globalTypography.fontWeight.bold,
+      marginBottom: 24 // Using a fixed value since space is not available
+    }),
+    fieldLabel: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.semibold,
+      marginBottom: 4,
+      display: 'block'
+    }),
+    fieldInput: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[200],
+      padding: 12,
+      borderWidth: 1,
+      borderRadius: 6,
+      borderColor: '#e2e8f0'
+    }),
+    helpText: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      lineHeight: globalTypography.lineHeight.normal,
+      color: '#64748b',
+      marginTop: 4
+    }),
+    errorMessage: _objectSpread(_objectSpread({}, BaseTypography.displaySmall), {}, {
+      fontSize: globalTypography.fontSize[100],
+      fontWeight: globalTypography.fontWeight.medium,
+      color: '#ef4444',
+      marginTop: 4
+    })
+  }
+};
+
+// ===========================
+// TYPE EXPORTS
+// ===========================
+
+// ===========================
+// MAIN EXPORT
+// ===========================
+
+var advancedTypography = {
+  contextual: contextualTypography,
+  progressive: progressiveTypography,
+  presets: typographyPresets,
+  utils: advancedTypographyUtils
+};
+export default advancedTypography;