@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
162 lines (161 loc) • 4.17 kB
TypeScript
/**
* Supported color schemes for theme selection
*/
export type ThemeScheme = 'system' | 'light' | 'dark';
/**
* Resolved scheme - always either 'light' or 'dark', never 'system'
* Used for actual rendering decisions where system preference has been resolved
*/
export type ResolvedThemeScheme = 'light' | 'dark';
export interface RuntimeThemeConfigFile {
meta: {
name?: string;
updatedAt?: string;
hash: string;
schemaVersion: string;
};
themes: string[];
defaultTheme?: string;
defaultScheme?: ThemeScheme;
excludeThemes?: string[];
}
/**
* Font face style options
*/
export type FontStyle = 'normal' | 'italic';
/**
* Asset (image) type for scheme-specific assets (logos, banners, illustrations)
* Maps light and dark variants for a single asset
* Supports partial assets (e.g., only light defined) with automatic fallback strategy
* @example { light: '/assets/logos/logo_light.svg', dark: '/assets/logos/logo_dark.svg' }
* @example { light: '/assets/logos/logo_light.svg' } - dark will fall back to light
*/
export interface ThemeAsset {
/**
* Asset URL for light theme variant
* @example "/assets/logos/logo_light.svg"
*/
light?: string;
/**
* Asset URL for dark theme variant
* @example "/assets/logos/logo_dark.svg"
*/
dark?: string;
}
/**
* Asset definition for a theme
* Contains a single asset with light/dark variants
*/
export interface AssetDefinition {
/**
* Unique asset name (dot-notation allowed)
* @example "logo" or "banners.hero"
*/
name: string;
light?: string;
dark?: string;
}
/**
* Asset definitions for a theme
*/
export type ThemeAssets = AssetDefinition[];
/**
* Font definition for runtime configuration
* Defines font family and font-face declarations
*/
export interface FontDefinition {
/**
* Font family name
* @example "Poppins"
*/
family: string;
/**
* Font faces (font-weight variants)
*/
faces: FontFaceDefinition[];
}
/**
* Individual font face declaration
*/
export interface FontFaceDefinition {
/**
* Font weight (400, 500, 600, 700, 800, 900)
*/
weight: number;
/**
* Font style (normal or italic)
*/
style: FontStyle;
/**
* URL to font file
* @example "./assets/fonts/Poppins-Regular.ttf"
*/
src: string;
}
/**
* Theme style definition for runtime configuration
* Defines all CSS custom properties for a specific theme variant
*/
export interface ThemeStyleDefinition {
/**
* Prefers dark mode for system scheme detection
* Derived in code: light = false, dark = true
*/
prefersDark?: boolean;
/**
* CSS custom properties (variables) grouped by category
*/
variables: ThemeVariablesByCategory;
}
/**
* Theme variables grouped by category
*/
export interface ThemeVariablesByCategory {
colors: Record<string, string>;
radius: Record<string, string>;
sizes: Record<string, string>;
effects: Record<string, string>;
others: Record<string, string>;
}
/**
* Theme variants container
* Maps 'light' and 'dark' variants for a single theme
*/
export interface ThemeVariants {
light: ThemeStyleDefinition;
dark: ThemeStyleDefinition;
}
/**
* Runtime theme configuration loaded from JSON file
* Allows dynamic theme management without recompiling the application
* Includes all CSS variables, fonts, and theme definitions
*/
export interface RuntimeThemeConfig {
meta: {
name: string;
updatedAt?: string;
hash: string;
schemaVersion: string;
};
fonts: FontDefinition[];
themes: ThemeVariants;
assets: ThemeAssets;
}
/**
* Internal theme state configuration
* Used internally by the service to track resolved configuration
*/
export interface ThemeStateConfig {
/**
* All available themes after applying inclusions/exclusions
*/
availableThemes: string[];
/**
* Currently selected default theme
*/
defaultTheme: string;
/**
* Currently selected default scheme
*/
defaultScheme: ThemeScheme;
}