116 lines
2.4 KiB
TypeScript
116 lines
2.4 KiB
TypeScript
/**
|
|
* Font Configuration
|
|
*
|
|
* Centralized configuration for supported fonts in the platform.
|
|
* Used in style settings dropdowns and CSS generation.
|
|
*/
|
|
|
|
export interface FontOption {
|
|
/** Unique key for the font option */
|
|
key: string;
|
|
/** Display label in dropdowns */
|
|
label: string;
|
|
/** CSS font-family value */
|
|
fontFamily: string;
|
|
/** Optional font-stretch value (for condensed variants) */
|
|
fontStretch?: string;
|
|
}
|
|
|
|
/**
|
|
* Supported fonts for UI elements
|
|
*/
|
|
export const FONT_OPTIONS: FontOption[] = [
|
|
{
|
|
key: 'maple-medium',
|
|
label: 'Maple Medium',
|
|
fontFamily: 'Maple',
|
|
},
|
|
{
|
|
key: 'instrument-sans',
|
|
label: 'Instrument Sans',
|
|
fontFamily: "'Instrument Sans Variable', sans-serif",
|
|
},
|
|
{
|
|
key: 'instrument-sans-condensed',
|
|
label: 'Instrument Sans Condensed',
|
|
fontFamily: "'Instrument Sans Variable', sans-serif",
|
|
fontStretch: '75%',
|
|
},
|
|
{
|
|
key: 'system-ui',
|
|
label: 'System UI',
|
|
fontFamily: 'system-ui, sans-serif',
|
|
},
|
|
{
|
|
key: 'arial',
|
|
label: 'Arial',
|
|
fontFamily: 'Arial, sans-serif',
|
|
},
|
|
{
|
|
key: 'helvetica',
|
|
label: 'Helvetica',
|
|
fontFamily: 'Helvetica, sans-serif',
|
|
},
|
|
{
|
|
key: 'georgia',
|
|
label: 'Georgia',
|
|
fontFamily: 'Georgia, serif',
|
|
},
|
|
{
|
|
key: 'times-new-roman',
|
|
label: 'Times New Roman',
|
|
fontFamily: "'Times New Roman', serif",
|
|
},
|
|
{
|
|
key: 'monospace',
|
|
label: 'Monospace',
|
|
fontFamily: 'monospace',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Get font option by key
|
|
*/
|
|
export function getFontByKey(key: string): FontOption | undefined {
|
|
return FONT_OPTIONS.find((f) => f.key === key);
|
|
}
|
|
|
|
/**
|
|
* Get font option by font-family and font-stretch values
|
|
*/
|
|
export function getFontByValues(
|
|
fontFamily: string,
|
|
fontStretch?: string,
|
|
): FontOption | undefined {
|
|
return FONT_OPTIONS.find(
|
|
(f) =>
|
|
f.fontFamily === fontFamily &&
|
|
(f.fontStretch || '') === (fontStretch || ''),
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Get the font key from stored fontFamily and fontStretch values
|
|
*/
|
|
export function getFontKeyFromValues(
|
|
fontFamily?: string,
|
|
fontStretch?: string,
|
|
): string {
|
|
if (!fontFamily) return '';
|
|
const font = getFontByValues(fontFamily, fontStretch);
|
|
return font?.key || '';
|
|
}
|
|
|
|
/**
|
|
* Get CSS style object for a font option
|
|
*/
|
|
export function getFontStyle(font: FontOption): React.CSSProperties {
|
|
const style: React.CSSProperties = {
|
|
fontFamily: font.fontFamily,
|
|
};
|
|
if (font.fontStretch) {
|
|
style.fontStretch = font.fontStretch;
|
|
}
|
|
return style;
|
|
}
|