Setup

API: Fx · Managers: FontManager, IconManager, ThemeManager

SalsaFX exposes a global Fx facade for app-wide setup. Call Fx.configure() once at startup (and again whenever you need to change settings).

---

Quick start

import { Fx, IconPacks, Fonts, DisplayFonts, Themes } from '@salsafx/ui';

Fx.configure({
    uiFont: Fonts.Manrope,
    displayFont: DisplayFonts.Segmented,
    iconPacks: [IconPacks.FontAwesome],
    theme: Themes.SilverBlue,
});

Fx.configure is chainable and merges with the current configuration.

---

Fx API

Member	Kind	Description
configure(settings?)	method	Merge settings and apply. Returns Fx.
apply()	method	Re-apply the current configuration. Returns Fx.
use(configurator)	method	Register an additional configurator. Returns Fx.
configuration	getter	Resolved configuration after the last configure/apply.
defaults	getter	Default configuration from registered managers.
Fonts	catalog	Built-in UI faces for uiFont.
DisplayFonts	catalog	Display style presets for displayFont.
Themes	catalog	Named look presets for theme.
IconPacks	catalog	Built-in icon pack URLs.

Tip

Managers ship pre-registered. You normally only call configure.

---

Fonts (FontManager)

Controls the global UI face and the display / value style.

Settings

Setting	Type	Default	Description
uiFont	Fonts.*, catalog key, or { family, href }	Fonts.Manrope	Face for general chrome.
displayFont	DisplayFonts.*, catalog key, { family, href }, or "uiFont"	DisplayFonts.Segmented	Face for digital / value typography. Use "uiFont" or DisplayFonts.Classic to mirror the UI face.

Catalog (Fonts)

Key	Source
Fonts.Manrope	Bundled with the package
Fonts.Inter	Bundled with the package
Fonts.NotoSans	Bundled with the package
Fonts.Oxanium	Bundled with the package
Fonts.ChakraPetch	Bundled with the package
Fonts.DsDigital	CDN (network required)

Catalog (DisplayFonts)

Key	Notes
DisplayFonts.Segmented	Classic 7-segment digital style (default). Uses Fonts.DsDigital (CDN).
DisplayFonts.Modern	Futuristic, high-tech geometric style (bundled).
DisplayFonts.Classic	Same face as the active UI setting.

Examples

Fx.configure({
    uiFont: Fonts.Manrope,
    displayFont: DisplayFonts.Segmented,
});

Fx.configure({
    uiFont: Fonts.Inter,
    displayFont: 'uiFont',
});

Fx.configure({
    uiFont: {
        family: 'MyUi',
        href: 'https://example.com/my-ui.css',
    },
});

CSS custom properties

Property	Description
--fx-font-family	UI font family.
--fx-display-font-family	Display font family.

---

Icon packs (IconManager)

Optional icon pack stylesheets. Nothing is loaded by default.

Settings

Setting	Type	Default	Description
iconPacks	string[]	[]	Catalog URLs (IconPacks.*) and/or custom stylesheet URLs.

Catalog

Key	Pack	Source
IconPacks.FontAwesome	Font Awesome	Bundled with the package
IconPacks.MaterialDesign	Material Design Icons	CDN
IconPacks.MaterialSymbols	Material Symbols Outlined	CDN
IconPacks.Lucide	Lucide	CDN
IconPacks.Phosphor	Phosphor (regular)	CDN
IconPacks.Tabler	Tabler Icons	CDN

Examples

Fx.configure({
    iconPacks: [IconPacks.FontAwesome, IconPacks.MaterialDesign],
});

Fx.configure({
    iconPacks: [
        IconPacks.Lucide,
        'https://cdn.example.com/icons/my-pack.css',
    ],
});

Re-configuring iconPacks replaces the active set.

---

Theme (ThemeManager)

Sets the default named look for component groups, plus the default fill gradient triad. An instance can still override with its own theme attribute when supported.

Settings

Setting	Type	Description
theme	preset key, Themes.*, or settings object	Named preset or partial settings. Omitted keys keep their current value.
theme.components	partial map	Per-group look.
theme.gradients	{ start, middle, end }	Default fill colors for gauges, bars, and potentiometer.

Default gradients

Stop	Default
start	#06b6d4
middle	#6366f1
end	#a855f7

Fx.configure({
    theme: {
        gradients: {
            start: '#22d3ee',
            middle: '#3b82f6',
            end: '#2563eb',
        },
    },
});

CSS custom properties

Property	Description
--fx-theme-gradient-start	Fill gradient start.
--fx-theme-gradient-middle	Fill gradient middle.
--fx-theme-gradient-end	Fill gradient end.

Presets (Themes)

Preset	Notes
Themes.Default	Library defaults.
Themes.SilverBlue	Lighter silver shells; default fill triad.
Themes.DarkGreen	Dark green panels; amber / orange fill.

Fx.configure({ theme: Themes.DarkGreen });
// or
Fx.configure({ theme: 'SilverBlue' });

Component groups and looks

Group	Looks	Default
FxDisplay	silver, darkblue	darkblue
FxSwitch	snow, silver	silver
FxLinearTrackElement	silver, dark	dark
FxRadialGauge	silver, dark	silver
FxPotentiometer	silver, dark	silver
FxCard	silver, darkgreen, iron, dark, darkblue, darkergreen, snow	iron
FxGroupBox	silver, darkgreen, iron, dark, darkblue, darkergreen, snow	iron
FxTabs	darkgreen, iron, darkergreen	darkergreen

FxLinearTrackElement covers linear shells (fader, linear bar, and related linear gauges).

Named looks

Look	Hex
silver	#1e293b
darkgreen	#131920
iron	#111827
dark	#080b10
darkblue	#0b111f
darkergreen	#0c0e12
snow	#ffffff

Custom / partial map

Fx.configure({
    theme: {
        components: {
            FxCard: 'darkgreen',
            FxGroupBox: 'darkgreen',
            FxTabs: 'darkergreen',
            FxRadialGauge: 'silver',
        },
    },
});

<fx-card theme="darkergreen" title="Alarms"></fx-card>
<fx-display theme="silver" label="Temp" value="42"></fx-display>

Partial theme.components and theme.gradients updates merge into the existing values.

---

Related

• Variants — shared semantic looks
• Architecture — component class hierarchy
• Installation — package setup
• Card · GroupBox · Tabs · Display