@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.8 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1 -1
- package/dist/components/ui/accessibility-demo.esm.js +30 -24
- package/dist/components/ui/accessibility-demo.js +30 -24
- package/dist/components/ui/advanced-component-architecture-demo.esm.js +235 -179
- package/dist/components/ui/advanced-component-architecture-demo.js +235 -179
- package/dist/components/ui/advanced-transition-system-demo.esm.js +110 -64
- package/dist/components/ui/advanced-transition-system-demo.js +110 -64
- package/dist/components/ui/advanced-transition-system.esm.js +166 -122
- package/dist/components/ui/advanced-transition-system.js +166 -122
- package/dist/components/ui/animation/animated-container.esm.js +52 -29
- package/dist/components/ui/animation/animated-container.js +52 -29
- package/dist/components/ui/animation/staggered-container.esm.js +18 -9
- package/dist/components/ui/animation/staggered-container.js +18 -9
- package/dist/components/ui/animation-demo.esm.js +67 -35
- package/dist/components/ui/animation-demo.js +67 -35
- package/dist/components/ui/badge.esm.js +9 -6
- package/dist/components/ui/badge.js +9 -6
- package/dist/components/ui/battery-conscious-animation-demo.esm.js +122 -87
- package/dist/components/ui/battery-conscious-animation-demo.js +122 -87
- package/dist/components/ui/border-radius-shadow-demo.esm.js +23 -12
- package/dist/components/ui/border-radius-shadow-demo.js +23 -12
- package/dist/components/ui/button.esm.js +8 -2
- package/dist/components/ui/button.js +8 -2
- package/dist/components/ui/card.esm.js +33 -8
- package/dist/components/ui/card.js +33 -8
- package/dist/components/ui/checkbox.esm.js +3 -3
- package/dist/components/ui/checkbox.js +3 -3
- package/dist/components/ui/color-preview.esm.js +68 -45
- package/dist/components/ui/color-preview.js +68 -45
- package/dist/components/ui/data-display/chart.esm.js +112 -84
- package/dist/components/ui/data-display/chart.js +112 -84
- package/dist/components/ui/data-display/data-grid-simple.esm.js +1 -1
- package/dist/components/ui/data-display/data-grid-simple.js +1 -1
- package/dist/components/ui/data-display/data-grid.esm.js +80 -67
- package/dist/components/ui/data-display/data-grid.js +80 -67
- package/dist/components/ui/data-display/list.esm.js +53 -45
- package/dist/components/ui/data-display/list.js +53 -45
- package/dist/components/ui/data-display/table.esm.js +62 -54
- package/dist/components/ui/data-display/table.js +62 -54
- package/dist/components/ui/data-display/timeline.esm.js +39 -34
- package/dist/components/ui/data-display/timeline.js +39 -34
- package/dist/components/ui/data-display/tree.esm.js +116 -84
- package/dist/components/ui/data-display/tree.js +116 -84
- package/dist/components/ui/data-display/types.esm.js +389 -364
- package/dist/components/ui/data-display/types.js +389 -364
- package/dist/components/ui/enterprise-mobile-experience-demo.esm.js +120 -70
- package/dist/components/ui/enterprise-mobile-experience-demo.js +120 -70
- package/dist/components/ui/enterprise-mobile-experience.esm.js +124 -73
- package/dist/components/ui/enterprise-mobile-experience.js +124 -73
- package/dist/components/ui/feedback/alert.esm.js +22 -15
- package/dist/components/ui/feedback/alert.js +22 -15
- package/dist/components/ui/feedback/progress.esm.js +47 -24
- package/dist/components/ui/feedback/progress.js +47 -24
- package/dist/components/ui/feedback/skeleton.esm.js +39 -29
- package/dist/components/ui/feedback/skeleton.js +39 -29
- package/dist/components/ui/feedback/toast.esm.js +62 -38
- package/dist/components/ui/feedback/toast.js +62 -38
- package/dist/components/ui/feedback/types.esm.js +83 -83
- package/dist/components/ui/feedback/types.js +83 -83
- package/dist/components/ui/font-preview.esm.js +41 -39
- package/dist/components/ui/font-preview.js +41 -39
- package/dist/components/ui/form-demo.esm.js +150 -113
- package/dist/components/ui/form-demo.js +150 -113
- package/dist/components/ui/hardware-acceleration-demo.esm.js +137 -87
- package/dist/components/ui/hardware-acceleration-demo.js +137 -87
- package/dist/components/ui/input.esm.js +4 -1
- package/dist/components/ui/input.js +4 -1
- package/dist/components/ui/layout-demo.esm.js +81 -56
- package/dist/components/ui/layout-demo.js +81 -56
- package/dist/components/ui/layouts/adaptive-layout.esm.js +27 -8
- package/dist/components/ui/layouts/adaptive-layout.js +27 -8
- package/dist/components/ui/layouts/desktop-layout.esm.js +39 -19
- package/dist/components/ui/layouts/desktop-layout.js +39 -19
- package/dist/components/ui/layouts/mobile-layout.esm.js +19 -9
- package/dist/components/ui/layouts/mobile-layout.js +19 -9
- package/dist/components/ui/layouts/tablet-layout.esm.js +28 -14
- package/dist/components/ui/layouts/tablet-layout.js +28 -14
- package/dist/components/ui/mobile-form-validation.esm.js +120 -87
- package/dist/components/ui/mobile-form-validation.js +120 -87
- package/dist/components/ui/mobile-input-demo.esm.js +19 -13
- package/dist/components/ui/mobile-input-demo.js +19 -13
- package/dist/components/ui/mobile-input.esm.js +185 -120
- package/dist/components/ui/mobile-input.js +185 -120
- package/dist/components/ui/mobile-skeleton-loading-demo.esm.js +128 -111
- package/dist/components/ui/mobile-skeleton-loading-demo.js +128 -111
- package/dist/components/ui/navigation/breadcrumb.esm.js +17 -14
- package/dist/components/ui/navigation/breadcrumb.js +17 -14
- package/dist/components/ui/navigation/index.esm.js +23 -1
- package/dist/components/ui/navigation/index.js +23 -1
- package/dist/components/ui/navigation/menu.esm.js +49 -35
- package/dist/components/ui/navigation/menu.js +49 -35
- package/dist/components/ui/navigation/navigation-demo.esm.js +81 -74
- package/dist/components/ui/navigation/navigation-demo.js +81 -74
- package/dist/components/ui/navigation/pagination.esm.js +62 -50
- package/dist/components/ui/navigation/pagination.js +62 -50
- package/dist/components/ui/navigation/sidebar.esm.js +56 -42
- package/dist/components/ui/navigation/sidebar.js +56 -42
- package/dist/components/ui/navigation/stepper.esm.js +34 -23
- package/dist/components/ui/navigation/stepper.js +34 -23
- package/dist/components/ui/navigation/tabs.esm.js +32 -21
- package/dist/components/ui/navigation/tabs.js +32 -21
- package/dist/components/ui/navigation/types.esm.js +196 -195
- package/dist/components/ui/navigation/types.js +196 -195
- package/dist/components/ui/overlay/backdrop.esm.js +17 -16
- package/dist/components/ui/overlay/backdrop.js +17 -16
- package/dist/components/ui/overlay/focus-manager.esm.js +21 -19
- package/dist/components/ui/overlay/focus-manager.js +21 -19
- package/dist/components/ui/overlay/index.esm.js +22 -2
- package/dist/components/ui/overlay/index.js +22 -2
- package/dist/components/ui/overlay/modal.esm.js +38 -34
- package/dist/components/ui/overlay/modal.js +38 -34
- package/dist/components/ui/overlay/overlay-manager.esm.js +25 -20
- package/dist/components/ui/overlay/overlay-manager.js +25 -20
- package/dist/components/ui/overlay/popover.esm.js +74 -58
- package/dist/components/ui/overlay/popover.js +74 -58
- package/dist/components/ui/overlay/portal.esm.js +7 -7
- package/dist/components/ui/overlay/portal.js +7 -7
- package/dist/components/ui/overlay/tooltip.esm.js +54 -39
- package/dist/components/ui/overlay/tooltip.js +54 -39
- package/dist/components/ui/overlay/types.esm.js +132 -131
- package/dist/components/ui/overlay/types.js +132 -131
- package/dist/components/ui/performance-demo.esm.js +135 -88
- package/dist/components/ui/performance-demo.js +135 -88
- package/dist/components/ui/semantic-input-system-demo.esm.js +117 -80
- package/dist/components/ui/semantic-input-system-demo.js +117 -80
- package/dist/components/ui/theme-customizer.esm.js +84 -52
- package/dist/components/ui/theme-customizer.js +84 -52
- package/dist/components/ui/theme-preview.esm.js +95 -43
- package/dist/components/ui/theme-preview.js +95 -43
- package/dist/components/ui/theme-switcher.esm.js +70 -44
- package/dist/components/ui/theme-switcher.js +70 -44
- package/dist/components/ui/theme-toggle.esm.js +3 -3
- package/dist/components/ui/theme-toggle.js +3 -3
- package/dist/components/ui/token-demo.esm.js +33 -21
- package/dist/components/ui/token-demo.js +33 -21
- package/dist/components/ui/touch-demo.esm.js +102 -73
- package/dist/components/ui/touch-demo.js +102 -73
- package/dist/components/ui/touch-friendly-interface-demo.esm.js +102 -64
- package/dist/components/ui/touch-friendly-interface-demo.js +102 -64
- package/dist/components/ui/touch-friendly-interface.esm.js +85 -61
- package/dist/components/ui/touch-friendly-interface.js +85 -61
- package/dist/hooks/use-accessibility-support.esm.js +115 -85
- package/dist/hooks/use-accessibility-support.js +115 -85
- package/dist/hooks/use-adaptive-layout.esm.js +56 -33
- package/dist/hooks/use-adaptive-layout.js +56 -33
- package/dist/hooks/use-advanced-patterns.esm.js +57 -42
- package/dist/hooks/use-advanced-patterns.js +57 -42
- package/dist/hooks/use-advanced-transition-system.esm.js +112 -71
- package/dist/hooks/use-advanced-transition-system.js +112 -71
- package/dist/hooks/use-animation-profile.esm.js +63 -34
- package/dist/hooks/use-animation-profile.js +63 -34
- package/dist/hooks/use-battery-animations.esm.js +80 -55
- package/dist/hooks/use-battery-animations.js +80 -55
- package/dist/hooks/use-battery-conscious-loading.esm.js +166 -123
- package/dist/hooks/use-battery-conscious-loading.js +166 -123
- package/dist/hooks/use-battery-optimization.esm.js +78 -55
- package/dist/hooks/use-battery-optimization.js +78 -55
- package/dist/hooks/use-battery-status.esm.js +73 -51
- package/dist/hooks/use-battery-status.js +73 -51
- package/dist/hooks/use-component-performance.esm.js +62 -47
- package/dist/hooks/use-component-performance.js +62 -47
- package/dist/hooks/use-device-loading-states.esm.js +152 -109
- package/dist/hooks/use-device-loading-states.js +152 -109
- package/dist/hooks/use-device.esm.js +25 -14
- package/dist/hooks/use-device.js +25 -14
- package/dist/hooks/use-enterprise-mobile-experience.esm.js +137 -88
- package/dist/hooks/use-enterprise-mobile-experience.js +137 -88
- package/dist/hooks/use-form-feedback.esm.js +124 -81
- package/dist/hooks/use-form-feedback.js +124 -81
- package/dist/hooks/use-form-performance.esm.js +127 -92
- package/dist/hooks/use-form-performance.js +127 -92
- package/dist/hooks/use-frame-rate.esm.js +56 -37
- package/dist/hooks/use-frame-rate.js +56 -37
- package/dist/hooks/use-gestures.esm.js +96 -72
- package/dist/hooks/use-gestures.js +96 -72
- package/dist/hooks/use-hardware-acceleration.esm.js +65 -37
- package/dist/hooks/use-hardware-acceleration.js +65 -37
- package/dist/hooks/use-input-accessibility.esm.js +157 -119
- package/dist/hooks/use-input-accessibility.js +157 -119
- package/dist/hooks/use-input-performance.esm.js +139 -104
- package/dist/hooks/use-input-performance.js +139 -104
- package/dist/hooks/use-layout-performance.esm.js +50 -29
- package/dist/hooks/use-layout-performance.js +50 -29
- package/dist/hooks/use-loading-accessibility.esm.js +209 -169
- package/dist/hooks/use-loading-accessibility.js +209 -169
- package/dist/hooks/use-loading-performance.esm.js +117 -93
- package/dist/hooks/use-loading-performance.js +117 -93
- package/dist/hooks/use-memory-usage.esm.js +57 -38
- package/dist/hooks/use-memory-usage.js +57 -38
- package/dist/hooks/use-mobile-form-layout.esm.js +111 -74
- package/dist/hooks/use-mobile-form-layout.js +111 -74
- package/dist/hooks/use-mobile-form-validation.esm.js +211 -144
- package/dist/hooks/use-mobile-form-validation.js +211 -144
- package/dist/hooks/use-mobile-keyboard-optimization.esm.js +154 -113
- package/dist/hooks/use-mobile-keyboard-optimization.js +154 -113
- package/dist/hooks/use-mobile-layout.esm.js +73 -51
- package/dist/hooks/use-mobile-layout.js +73 -51
- package/dist/hooks/use-mobile-optimization.esm.js +72 -44
- package/dist/hooks/use-mobile-optimization.js +72 -44
- package/dist/hooks/use-mobile-skeleton.esm.js +97 -64
- package/dist/hooks/use-mobile-skeleton.js +97 -64
- package/dist/hooks/use-mobile-touch.esm.js +128 -93
- package/dist/hooks/use-mobile-touch.js +128 -93
- package/dist/hooks/use-performance-throttling.esm.js +72 -48
- package/dist/hooks/use-performance-throttling.js +72 -48
- package/dist/hooks/use-performance.esm.js +90 -52
- package/dist/hooks/use-performance.js +90 -52
- package/dist/hooks/use-reusable-architecture.esm.js +94 -65
- package/dist/hooks/use-reusable-architecture.js +94 -65
- package/dist/hooks/use-semantic-input-types.esm.js +166 -124
- package/dist/hooks/use-semantic-input-types.js +166 -124
- package/dist/hooks/use-semantic-input.esm.js +178 -126
- package/dist/hooks/use-semantic-input.js +178 -126
- package/dist/hooks/use-tablet-layout.esm.js +67 -38
- package/dist/hooks/use-tablet-layout.js +67 -38
- package/dist/hooks/use-touch-friendly-input.esm.js +193 -149
- package/dist/hooks/use-touch-friendly-input.js +193 -149
- package/dist/hooks/use-touch-friendly-interface.esm.js +99 -67
- package/dist/hooks/use-touch-friendly-interface.js +99 -67
- package/dist/hooks/use-touch-optimization.esm.js +99 -72
- package/dist/hooks/use-touch-optimization.js +99 -72
- package/dist/index.esm.js +289 -280
- package/dist/index.js +289 -280
- package/dist/lib/utils.esm.js +1 -1
- package/dist/lib/utils.js +1 -1
- package/dist/plugins/theme-css-generator.esm.js +104 -55
- package/dist/plugins/theme-css-generator.js +104 -55
- package/dist/provider.esm.js +4 -4
- package/dist/provider.js +4 -4
- package/dist/styles.css +1 -1
- package/dist/theme.esm.js +633 -468
- package/dist/theme.js +633 -468
- package/dist/themes/ThemeContext.esm.js +15 -15
- package/dist/themes/ThemeContext.js +15 -15
- package/dist/themes/ThemeProvider.esm.js +25 -22
- package/dist/themes/ThemeProvider.js +25 -22
- package/dist/themes/accessibility.esm.js +147 -108
- package/dist/themes/accessibility.js +147 -108
- package/dist/themes/aria-patterns.esm.js +198 -162
- package/dist/themes/aria-patterns.js +198 -162
- package/dist/themes/base-themes.esm.js +14 -11
- package/dist/themes/base-themes.js +14 -11
- package/dist/themes/colorManager.esm.js +101 -83
- package/dist/themes/colorManager.js +101 -83
- package/dist/themes/examples/dark-theme.esm.js +133 -103
- package/dist/themes/examples/dark-theme.js +133 -103
- package/dist/themes/examples/minimal-theme.esm.js +83 -61
- package/dist/themes/examples/minimal-theme.js +83 -61
- package/dist/themes/focus-management.esm.js +202 -143
- package/dist/themes/focus-management.js +202 -143
- package/dist/themes/fontLoader.esm.js +28 -19
- package/dist/themes/fontLoader.js +28 -19
- package/dist/themes/high-contrast.esm.js +152 -104
- package/dist/themes/high-contrast.js +152 -104
- package/dist/themes/inheritance.esm.js +35 -27
- package/dist/themes/inheritance.js +35 -27
- package/dist/themes/keyboard-navigation.esm.js +152 -123
- package/dist/themes/keyboard-navigation.js +152 -123
- package/dist/themes/motion-reduction.esm.js +193 -133
- package/dist/themes/motion-reduction.js +193 -133
- package/dist/themes/navigation.esm.js +146 -146
- package/dist/themes/navigation.js +146 -146
- package/dist/themes/screen-reader.esm.js +159 -94
- package/dist/themes/screen-reader.js +159 -94
- package/dist/themes/systemThemeDetector.esm.js +42 -34
- package/dist/themes/systemThemeDetector.js +42 -34
- package/dist/themes/themeCSSUpdater.esm.js +21 -9
- package/dist/themes/themeCSSUpdater.js +21 -9
- package/dist/themes/themePersistence.esm.js +68 -47
- package/dist/themes/themePersistence.js +68 -47
- package/dist/themes/themes/stan-design.esm.js +633 -468
- package/dist/themes/themes/stan-design.js +633 -468
- package/dist/themes/types.esm.js +301 -287
- package/dist/themes/types.js +301 -287
- package/dist/themes/useSystemTheme.esm.js +4 -4
- package/dist/themes/useSystemTheme.js +4 -4
- package/dist/themes/useTheme.esm.js +4 -4
- package/dist/themes/useTheme.js +4 -4
- package/dist/themes/validation.esm.js +128 -77
- package/dist/themes/validation.js +128 -77
- package/dist/tokens/index.esm.js +15 -4
- package/dist/tokens/index.js +15 -4
- package/dist/tokens/tokenExporter.esm.js +87 -61
- package/dist/tokens/tokenExporter.js +87 -61
- package/dist/tokens/tokenGenerator.esm.js +86 -77
- package/dist/tokens/tokenGenerator.js +86 -77
- package/dist/tokens/tokenManager.esm.js +64 -51
- package/dist/tokens/tokenManager.js +64 -51
- package/dist/tokens/tokenValidator.esm.js +193 -147
- package/dist/tokens/tokenValidator.js +193 -147
- package/dist/tokens/types.esm.js +49 -35
- package/dist/tokens/types.js +49 -35
- package/dist/utils/bundle-analyzer.esm.js +83 -65
- package/dist/utils/bundle-analyzer.js +83 -65
- package/dist/utils/bundle-splitting.esm.js +142 -117
- package/dist/utils/bundle-splitting.js +142 -117
- package/dist/utils/lazy-loading.esm.js +132 -106
- package/dist/utils/lazy-loading.js +132 -106
- package/dist/utils/performance-monitor.esm.js +170 -129
- package/dist/utils/performance-monitor.js +170 -129
- package/dist/utils/tree-shaking.esm.js +69 -61
- package/dist/utils/tree-shaking.js +69 -61
- package/package.json +1 -1
- package/src/index.ts +146 -146
|
@@ -6,12 +6,13 @@
|
|
|
6
6
|
import { FontThemeConfig, FontFiles } from './types';
|
|
7
7
|
|
|
8
8
|
export class FontLoader {
|
|
9
|
-
private loadedFonts= new Set();
|
|
9
|
+
private loadedFonts: Set<string> = new Set();
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Load fonts for a theme
|
|
13
13
|
*/
|
|
14
|
-
async loadThemeFonts(fonts)
|
|
14
|
+
async loadThemeFonts(fonts: FontThemeConfig): Promise<void> {
|
|
15
|
+
const fontPromises: Promise<void>[] = [];
|
|
15
16
|
|
|
16
17
|
// Load primary font
|
|
17
18
|
fontPromises.push(this.loadFont(fonts.primary));
|
|
@@ -32,7 +33,8 @@ export class FontLoader {
|
|
|
32
33
|
/**
|
|
33
34
|
* Load a single font family
|
|
34
35
|
*/
|
|
35
|
-
private async loadFont(fontConfig
|
|
36
|
+
private async loadFont(fontConfig: FontThemeConfig['primary']): Promise<void> {
|
|
37
|
+
const { family, weights, display = 'swap', source } = fontConfig;
|
|
36
38
|
|
|
37
39
|
// Skip if already loaded
|
|
38
40
|
if (this.loadedFonts.has(family)) {
|
|
@@ -61,7 +63,8 @@ export class FontLoader {
|
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
|
|
64
|
-
// Fallback
|
|
66
|
+
// Fallback: try Google Fonts if it's a known web font
|
|
67
|
+
if (this.isGoogleFont(family)) {
|
|
65
68
|
await this.loadGoogleFont(family, weights, display);
|
|
66
69
|
this.loadedFonts.add(family);
|
|
67
70
|
return;
|
|
@@ -69,14 +72,15 @@ export class FontLoader {
|
|
|
69
72
|
|
|
70
73
|
console.warn(`Font ${family} could not be loaded, falling back to system fonts`);
|
|
71
74
|
} catch (error) {
|
|
72
|
-
console.error(`Error loading font ${family}
|
|
75
|
+
console.error(`Error loading font ${family}:`, error);
|
|
73
76
|
}
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
/**
|
|
77
80
|
* Check if a font is available in the system
|
|
78
81
|
*/
|
|
79
|
-
private async isFontAvailable(fontFamily
|
|
82
|
+
private async isFontAvailable(fontFamily: string): Promise<boolean> {
|
|
83
|
+
if (typeof document === 'undefined') return false;
|
|
80
84
|
|
|
81
85
|
// Remove quotes and get the first font family
|
|
82
86
|
const cleanFamily = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
|
|
@@ -100,7 +104,8 @@ export class FontLoader {
|
|
|
100
104
|
/**
|
|
101
105
|
* Check if a font is a Google Font
|
|
102
106
|
*/
|
|
103
|
-
private isGoogleFont(fontFamily)
|
|
107
|
+
private isGoogleFont(fontFamily: string): boolean {
|
|
108
|
+
const googleFonts = [
|
|
104
109
|
'Poppins', 'Inter', 'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Source Sans Pro',
|
|
105
110
|
'Raleway', 'PT Sans', 'Ubuntu', 'Noto Sans', 'Oswald', 'Playfair Display'
|
|
106
111
|
];
|
|
@@ -112,16 +117,17 @@ export class FontLoader {
|
|
|
112
117
|
/**
|
|
113
118
|
* Load a Google Font
|
|
114
119
|
*/
|
|
115
|
-
private async loadGoogleFont(family, weights], display
|
|
120
|
+
private async loadGoogleFont(family: string, weights: number[], display: string): Promise<void> {
|
|
121
|
+
const cleanFamily = family.split(',')[0].replace(/['"]/g, '').trim();
|
|
116
122
|
const weightsParam = weights.join(',');
|
|
117
123
|
|
|
118
124
|
const link = document.createElement('link');
|
|
119
125
|
link.rel = 'stylesheet';
|
|
120
|
-
link.href = `https=${cleanFamily.replace(/\s+/g, '+')}}&display=${display}`;
|
|
126
|
+
link.href = `https://fonts.googleapis.com/css2?family=${cleanFamily.replace(/\s+/g, '+')}:wght@${weightsParam}&display=${display}`;
|
|
121
127
|
|
|
122
128
|
return new Promise((resolve, reject) => {
|
|
123
129
|
link.onload = () => resolve();
|
|
124
|
-
link.onerror = () => reject(new Error(`Failed to load Google Font}`));
|
|
130
|
+
link.onerror = () => reject(new Error(`Failed to load Google Font: ${family}`));
|
|
125
131
|
document.head.appendChild(link);
|
|
126
132
|
});
|
|
127
133
|
}
|
|
@@ -129,7 +135,8 @@ export class FontLoader {
|
|
|
129
135
|
/**
|
|
130
136
|
* Load custom font files using @font-face
|
|
131
137
|
*/
|
|
132
|
-
private async loadCustomFontFiles(family, files, weights], display)
|
|
138
|
+
private async loadCustomFontFiles(family: string, files: FontFiles, weights: number[], display: string): Promise<void> {
|
|
139
|
+
const promises: Promise<void>[] = [];
|
|
133
140
|
|
|
134
141
|
weights.forEach(weight => {
|
|
135
142
|
if (files.woff2) {
|
|
@@ -147,21 +154,22 @@ export class FontLoader {
|
|
|
147
154
|
/**
|
|
148
155
|
* Load a single font face using @font-face
|
|
149
156
|
*/
|
|
150
|
-
private async loadFontFace(family, weight, url, format, display
|
|
157
|
+
private async loadFontFace(family: string, weight: number, url: string, format: string, display: string): Promise<void> {
|
|
158
|
+
if (typeof document === 'undefined') return;
|
|
151
159
|
|
|
152
160
|
return new Promise((resolve, reject) => {
|
|
153
161
|
const style = document.createElement('style');
|
|
154
162
|
style.textContent = `
|
|
155
163
|
@font-face {
|
|
156
|
-
font-family}';
|
|
157
|
-
font-weight};
|
|
158
|
-
font-display};
|
|
159
|
-
src}') format('${format}');
|
|
164
|
+
font-family: '${family}';
|
|
165
|
+
font-weight: ${weight};
|
|
166
|
+
font-display: ${display};
|
|
167
|
+
src: url('${url}') format('${format}');
|
|
160
168
|
}
|
|
161
169
|
`;
|
|
162
170
|
|
|
163
171
|
style.onload = () => resolve();
|
|
164
|
-
style.onerror = () => reject(new Error(`Failed to load font} ${weight}`));
|
|
172
|
+
style.onerror = () => reject(new Error(`Failed to load font: ${family} ${weight}`));
|
|
165
173
|
|
|
166
174
|
document.head.appendChild(style);
|
|
167
175
|
|
|
@@ -175,13 +183,14 @@ export class FontLoader {
|
|
|
175
183
|
/**
|
|
176
184
|
* Clear loaded fonts
|
|
177
185
|
*/
|
|
178
|
-
clearLoadedFonts()
|
|
186
|
+
clearLoadedFonts(): void {
|
|
187
|
+
this.loadedFonts.clear();
|
|
179
188
|
}
|
|
180
189
|
|
|
181
190
|
/**
|
|
182
191
|
* Get list of loaded fonts
|
|
183
192
|
*/
|
|
184
|
-
getLoadedFonts()] {
|
|
193
|
+
getLoadedFonts(): string[] {
|
|
185
194
|
return Array.from(this.loadedFonts);
|
|
186
195
|
}
|
|
187
196
|
}
|
|
@@ -6,12 +6,13 @@
|
|
|
6
6
|
import { FontThemeConfig, FontFiles } from './types';
|
|
7
7
|
|
|
8
8
|
export class FontLoader {
|
|
9
|
-
private loadedFonts= new Set();
|
|
9
|
+
private loadedFonts: Set<string> = new Set();
|
|
10
10
|
|
|
11
11
|
/**
|
|
12
12
|
* Load fonts for a theme
|
|
13
13
|
*/
|
|
14
|
-
async loadThemeFonts(fonts)
|
|
14
|
+
async loadThemeFonts(fonts: FontThemeConfig): Promise<void> {
|
|
15
|
+
const fontPromises: Promise<void>[] = [];
|
|
15
16
|
|
|
16
17
|
// Load primary font
|
|
17
18
|
fontPromises.push(this.loadFont(fonts.primary));
|
|
@@ -32,7 +33,8 @@ export class FontLoader {
|
|
|
32
33
|
/**
|
|
33
34
|
* Load a single font family
|
|
34
35
|
*/
|
|
35
|
-
private async loadFont(fontConfig
|
|
36
|
+
private async loadFont(fontConfig: FontThemeConfig['primary']): Promise<void> {
|
|
37
|
+
const { family, weights, display = 'swap', source } = fontConfig;
|
|
36
38
|
|
|
37
39
|
// Skip if already loaded
|
|
38
40
|
if (this.loadedFonts.has(family)) {
|
|
@@ -61,7 +63,8 @@ export class FontLoader {
|
|
|
61
63
|
}
|
|
62
64
|
}
|
|
63
65
|
|
|
64
|
-
// Fallback
|
|
66
|
+
// Fallback: try Google Fonts if it's a known web font
|
|
67
|
+
if (this.isGoogleFont(family)) {
|
|
65
68
|
await this.loadGoogleFont(family, weights, display);
|
|
66
69
|
this.loadedFonts.add(family);
|
|
67
70
|
return;
|
|
@@ -69,14 +72,15 @@ export class FontLoader {
|
|
|
69
72
|
|
|
70
73
|
console.warn(`Font ${family} could not be loaded, falling back to system fonts`);
|
|
71
74
|
} catch (error) {
|
|
72
|
-
console.error(`Error loading font ${family}
|
|
75
|
+
console.error(`Error loading font ${family}:`, error);
|
|
73
76
|
}
|
|
74
77
|
}
|
|
75
78
|
|
|
76
79
|
/**
|
|
77
80
|
* Check if a font is available in the system
|
|
78
81
|
*/
|
|
79
|
-
private async isFontAvailable(fontFamily
|
|
82
|
+
private async isFontAvailable(fontFamily: string): Promise<boolean> {
|
|
83
|
+
if (typeof document === 'undefined') return false;
|
|
80
84
|
|
|
81
85
|
// Remove quotes and get the first font family
|
|
82
86
|
const cleanFamily = fontFamily.split(',')[0].replace(/['"]/g, '').trim();
|
|
@@ -100,7 +104,8 @@ export class FontLoader {
|
|
|
100
104
|
/**
|
|
101
105
|
* Check if a font is a Google Font
|
|
102
106
|
*/
|
|
103
|
-
private isGoogleFont(fontFamily)
|
|
107
|
+
private isGoogleFont(fontFamily: string): boolean {
|
|
108
|
+
const googleFonts = [
|
|
104
109
|
'Poppins', 'Inter', 'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Source Sans Pro',
|
|
105
110
|
'Raleway', 'PT Sans', 'Ubuntu', 'Noto Sans', 'Oswald', 'Playfair Display'
|
|
106
111
|
];
|
|
@@ -112,16 +117,17 @@ export class FontLoader {
|
|
|
112
117
|
/**
|
|
113
118
|
* Load a Google Font
|
|
114
119
|
*/
|
|
115
|
-
private async loadGoogleFont(family, weights], display
|
|
120
|
+
private async loadGoogleFont(family: string, weights: number[], display: string): Promise<void> {
|
|
121
|
+
const cleanFamily = family.split(',')[0].replace(/['"]/g, '').trim();
|
|
116
122
|
const weightsParam = weights.join(',');
|
|
117
123
|
|
|
118
124
|
const link = document.createElement('link');
|
|
119
125
|
link.rel = 'stylesheet';
|
|
120
|
-
link.href = `https=${cleanFamily.replace(/\s+/g, '+')}}&display=${display}`;
|
|
126
|
+
link.href = `https://fonts.googleapis.com/css2?family=${cleanFamily.replace(/\s+/g, '+')}:wght@${weightsParam}&display=${display}`;
|
|
121
127
|
|
|
122
128
|
return new Promise((resolve, reject) => {
|
|
123
129
|
link.onload = () => resolve();
|
|
124
|
-
link.onerror = () => reject(new Error(`Failed to load Google Font}`));
|
|
130
|
+
link.onerror = () => reject(new Error(`Failed to load Google Font: ${family}`));
|
|
125
131
|
document.head.appendChild(link);
|
|
126
132
|
});
|
|
127
133
|
}
|
|
@@ -129,7 +135,8 @@ export class FontLoader {
|
|
|
129
135
|
/**
|
|
130
136
|
* Load custom font files using @font-face
|
|
131
137
|
*/
|
|
132
|
-
private async loadCustomFontFiles(family, files, weights], display)
|
|
138
|
+
private async loadCustomFontFiles(family: string, files: FontFiles, weights: number[], display: string): Promise<void> {
|
|
139
|
+
const promises: Promise<void>[] = [];
|
|
133
140
|
|
|
134
141
|
weights.forEach(weight => {
|
|
135
142
|
if (files.woff2) {
|
|
@@ -147,21 +154,22 @@ export class FontLoader {
|
|
|
147
154
|
/**
|
|
148
155
|
* Load a single font face using @font-face
|
|
149
156
|
*/
|
|
150
|
-
private async loadFontFace(family, weight, url, format, display
|
|
157
|
+
private async loadFontFace(family: string, weight: number, url: string, format: string, display: string): Promise<void> {
|
|
158
|
+
if (typeof document === 'undefined') return;
|
|
151
159
|
|
|
152
160
|
return new Promise((resolve, reject) => {
|
|
153
161
|
const style = document.createElement('style');
|
|
154
162
|
style.textContent = `
|
|
155
163
|
@font-face {
|
|
156
|
-
font-family}';
|
|
157
|
-
font-weight};
|
|
158
|
-
font-display};
|
|
159
|
-
src}') format('${format}');
|
|
164
|
+
font-family: '${family}';
|
|
165
|
+
font-weight: ${weight};
|
|
166
|
+
font-display: ${display};
|
|
167
|
+
src: url('${url}') format('${format}');
|
|
160
168
|
}
|
|
161
169
|
`;
|
|
162
170
|
|
|
163
171
|
style.onload = () => resolve();
|
|
164
|
-
style.onerror = () => reject(new Error(`Failed to load font} ${weight}`));
|
|
172
|
+
style.onerror = () => reject(new Error(`Failed to load font: ${family} ${weight}`));
|
|
165
173
|
|
|
166
174
|
document.head.appendChild(style);
|
|
167
175
|
|
|
@@ -175,13 +183,14 @@ export class FontLoader {
|
|
|
175
183
|
/**
|
|
176
184
|
* Clear loaded fonts
|
|
177
185
|
*/
|
|
178
|
-
clearLoadedFonts()
|
|
186
|
+
clearLoadedFonts(): void {
|
|
187
|
+
this.loadedFonts.clear();
|
|
179
188
|
}
|
|
180
189
|
|
|
181
190
|
/**
|
|
182
191
|
* Get list of loaded fonts
|
|
183
192
|
*/
|
|
184
|
-
getLoadedFonts()] {
|
|
193
|
+
getLoadedFonts(): string[] {
|
|
185
194
|
return Array.from(this.loadedFonts);
|
|
186
195
|
}
|
|
187
196
|
}
|