Complete library submodule standardization and consumer integration
🎯 Major Achievements: - Standardized 193+ SCSS imports across all libraries - Created 12 independent Git repositories with clean submodule structure - Eliminated relative path dependencies for true library portability - Added comprehensive consumer integration documentation 📦 Libraries Successfully Published: • ui-design-system (foundation) • ui-essentials (components) • shared-utils (utilities) • auth-client (authentication) • ui-landing-pages (marketing components) • ui-code-display (syntax highlighting) • ui-accessibility (WCAG compliance) • hcl-studio (color management) • ui-animations (CSS animations) • ui-backgrounds (background effects) • ui-font-manager (typography) • ui-data-utils (data manipulation) 🔧 Technical Improvements: - All SCSS imports now use standardized 'ui-design-system/' paths - Libraries work independently as Git submodules - Consumer projects can selectively include only needed libraries - Professional Git history with initial commits for each library - Updated integration guides with step-by-step workflows 📋 Documentation Added: - CONSUMER_INTEGRATION_GUIDE.md - Complete setup instructions - Updated SUBMODULE_INTEGRATION_GUIDE.md - Enhanced with dependency info - Library-specific README files for all repositories 🚀 Ready for Production: - All libraries pushed to https://git.sky-ai.com/jules/* - Clean separation of concerns across library boundaries - Independent versioning and release cycles possible - Optimal structure for LLM analysis and maintenance This completes the monorepo-to-submodule transformation, making the SSuite library ecosystem ready for professional distribution and consumption. 🤖 Generated with Claude Code (https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jules
@@ -1,224 +1 @@
|
||||
# UI Font Manager
|
||||
|
||||
A comprehensive Angular library for dynamic font management with runtime theme switching, Google Fonts integration, and extensible custom font support.
|
||||
|
||||
## Features
|
||||
|
||||
- **🎨 Runtime Font Themes**: Switch font themes dynamically without rebuilds
|
||||
- **📦 Google Fonts Presets**: 75+ popular Google Fonts with URLs ready to use
|
||||
- **🔧 Custom Font Support**: Add Typekit, self-hosted, or any external fonts
|
||||
- **⚡ Performance Optimized**: Lazy loading, preloading, and caching strategies
|
||||
- **🎯 Theme Management**: Create, save, and apply font theme combinations
|
||||
- **📱 CSS Variables Integration**: Seamless integration with your design system
|
||||
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
npm install ui-font-manager
|
||||
```
|
||||
|
||||
## Quick Start
|
||||
|
||||
### 1. Basic Usage
|
||||
|
||||
```typescript
|
||||
import { UiFontManagerService, FontThemeService } from 'ui-font-manager';
|
||||
|
||||
@Component({...})
|
||||
export class MyComponent {
|
||||
constructor(
|
||||
private fontManager: UiFontManagerService,
|
||||
private themeService: FontThemeService
|
||||
) {}
|
||||
|
||||
// Load a Google Font
|
||||
loadFont() {
|
||||
this.fontManager.loadFont('Inter').subscribe(success => {
|
||||
console.log('Font loaded:', success);
|
||||
});
|
||||
}
|
||||
|
||||
// Apply a predefined theme
|
||||
applyTheme() {
|
||||
this.themeService.applyTheme('Modern Clean').subscribe();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. CSS Variables Integration
|
||||
|
||||
Your CSS automatically uses the new fonts:
|
||||
|
||||
```scss
|
||||
.my-component {
|
||||
font-family: var(--font-family-sans); // Updates dynamically
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: var(--font-family-display);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
```
|
||||
|
||||
## Google Fonts Presets
|
||||
|
||||
Access 75+ popular Google Fonts instantly:
|
||||
|
||||
```typescript
|
||||
// Get all available Google Fonts
|
||||
const fonts = this.fontManager.getGoogleFontsPresets();
|
||||
|
||||
// Load specific fonts
|
||||
this.fontManager.loadFonts(['Inter', 'Playfair Display', 'JetBrains Mono']);
|
||||
|
||||
// Use predefined combinations
|
||||
const combinations = this.fontManager.getFontCombinations();
|
||||
// 'Modern Clean', 'Classic Editorial', 'Friendly Modern', 'Professional'
|
||||
```
|
||||
|
||||
### Available Google Fonts by Category
|
||||
|
||||
**Sans-serif (35 fonts)**: Inter, Roboto, Open Sans, Poppins, Lato, Montserrat, Nunito, Source Sans Pro, Raleway, Ubuntu, Work Sans, Rubik, Kanit, DM Sans, Mulish, Hind, Quicksand, Karla, Manrope, Comfortaa, Outfit, Lexend, Plus Jakarta Sans, Space Grotesk, Figtree, Barlow, Epilogue, Sora, Red Hat Display, Satoshi, Heebo, Exo 2, Commissioner, Archivo, Public Sans
|
||||
|
||||
**Serif (20 fonts)**: Playfair Display, Merriweather, Lora, EB Garamond, Crimson Text, Source Serif Pro, Noto Serif, Vollkorn, Libre Baskerville, Arvo, Zilla Slab, Cormorant Garamond, PT Serif, Alegreya, Spectral, Old Standard TT, Cardo, Gentium Plus, Neuton, Bitter
|
||||
|
||||
**Monospace (10 fonts)**: JetBrains Mono, Fira Code, Source Code Pro, Roboto Mono, IBM Plex Mono, Space Mono, Inconsolata, PT Mono, Fira Mono, Ubuntu Mono
|
||||
|
||||
**Display (10 fonts)**: Oswald, Bebas Neue, Anton, Righteous, Fredoka One, Archivo Black, Cabin, Prompt, Fjalla One, Patua One
|
||||
|
||||
**Handwriting (10 fonts)**: Dancing Script, Great Vibes, Pacifico, Kaushan Script, Satisfy, Caveat, Amatic SC, Indie Flower, Shadows Into Light, Permanent Marker
|
||||
|
||||
## Custom Font Support
|
||||
|
||||
### Add External Fonts
|
||||
|
||||
```typescript
|
||||
import { fontPresetManager } from 'ui-font-manager';
|
||||
|
||||
// Add Typekit fonts
|
||||
fontPresetManager.addTypekitFont('abc123', [
|
||||
{ name: 'My Custom Font', family: 'MyFont', weights: [400, 700] }
|
||||
]);
|
||||
|
||||
// Add custom CDN fonts
|
||||
fontPresetManager.addExternalFont('Custom Sans', {
|
||||
family: 'CustomSans',
|
||||
url: 'https://mycdn.com/fonts/custom.css',
|
||||
weights: [300, 400, 600],
|
||||
category: 'sans-serif'
|
||||
});
|
||||
|
||||
// Add self-hosted fonts
|
||||
fontPresetManager.addSelfHostedFont('My Font', {
|
||||
family: 'MyFont',
|
||||
basePath: '/assets/fonts/myfont',
|
||||
formats: ['woff2', 'woff'],
|
||||
weights: [400, 700],
|
||||
category: 'serif'
|
||||
});
|
||||
```
|
||||
|
||||
## Theme Management
|
||||
|
||||
### Create Custom Themes
|
||||
|
||||
```typescript
|
||||
// Create theme from font combination
|
||||
const theme = this.themeService.createThemeFromCombination(
|
||||
'My Theme',
|
||||
'Modern Clean',
|
||||
'Clean and modern design'
|
||||
);
|
||||
|
||||
// Create fully custom theme
|
||||
const customTheme = this.themeService.createCustomTheme('Custom Theme', {
|
||||
sans: 'Inter',
|
||||
serif: 'Playfair Display',
|
||||
mono: 'JetBrains Mono',
|
||||
display: 'Oswald'
|
||||
});
|
||||
|
||||
// Apply the theme
|
||||
this.themeService.applyTheme('My Theme').subscribe();
|
||||
```
|
||||
|
||||
### Export/Import Themes
|
||||
|
||||
```typescript
|
||||
// Export theme configuration
|
||||
const config = this.themeService.exportTheme('My Theme');
|
||||
|
||||
// Import theme from JSON
|
||||
const theme = this.themeService.importTheme(jsonString);
|
||||
```
|
||||
|
||||
## Performance Features
|
||||
|
||||
### Font Loading Strategies
|
||||
|
||||
```typescript
|
||||
// Configure font manager
|
||||
this.fontManager.configure({
|
||||
preloadFonts: true,
|
||||
fallbackTimeout: 3000,
|
||||
cacheEnabled: true
|
||||
});
|
||||
|
||||
// Preload fonts for performance
|
||||
this.fontManager.preloadFonts(['Inter', 'Roboto']);
|
||||
|
||||
// Load with specific options
|
||||
this.fontManager.loadFont('Inter', {
|
||||
display: 'swap',
|
||||
weights: [400, 600],
|
||||
subsets: ['latin']
|
||||
});
|
||||
```
|
||||
|
||||
## Integration with Design Systems
|
||||
|
||||
Works seamlessly with existing CSS custom properties:
|
||||
|
||||
```scss
|
||||
// In your existing design system
|
||||
:root {
|
||||
--font-family-sans: 'Inter', system-ui, sans-serif;
|
||||
--font-family-serif: 'Playfair Display', Georgia, serif;
|
||||
--font-family-mono: 'JetBrains Mono', Consolas, monospace;
|
||||
--font-family-display: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
// Font manager updates these variables at runtime
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### UiFontManagerService
|
||||
|
||||
- `loadFont(name, options?)`: Load single font
|
||||
- `loadFonts(names, options?)`: Load multiple fonts
|
||||
- `applyTheme(theme)`: Apply font theme
|
||||
- `getGoogleFontsPresets()`: Get Google Fonts collection
|
||||
- `getFontCombinations()`: Get predefined combinations
|
||||
- `addCustomFont(name, definition)`: Add custom font
|
||||
|
||||
### FontThemeService
|
||||
|
||||
- `applyTheme(name)`: Apply theme by name
|
||||
- `getThemes()`: Get all themes
|
||||
- `createCustomTheme()`: Create custom theme
|
||||
- `exportTheme()` / `importTheme()`: Export/import themes
|
||||
|
||||
### FontPresetManager
|
||||
|
||||
- `addCustomFont()`: Add single custom font
|
||||
- `addTypekitFont()`: Add Adobe Typekit fonts
|
||||
- `addSelfHostedFont()`: Add self-hosted fonts
|
||||
- `getFontsByCategory()`: Filter fonts by category
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
Repository: ui-font-manager
|
||||
|
||||
Reference in New Issue
Block a user