Franken UI

The Context object is the final output of the Franken UI generation process. It contains all the CSS rules organized by their purpose. It consists of:

• theme: Contains :root and .dark CSS rule objects for global theme variables.
• base: A collection of base CSS rules.
• palettes: CSS rules associated with defined color palettes.
• components: A collection of Components, where each component contains its own CSSRuleObjects.

The Franken UI plugin allows you to extend its core functionality using the extensions option. This is useful for overriding themes, adding custom palettes, or modifying component styles during the plugin's execution lifecycle.

An extension is an array of tuples: [plugin, config]. The plugin must be a function with the signature (context: Context, config: any) => Context. The context object contains:

• theme: The base theme configuration.
• base: Base CSS rules.
• palettes: Generated color palettes.
• components: Component-specific CSS rules.

By returning a modified context, your extension can influence the final CSS generated by addBase and addComponents.

Franken UI is distributed as a Tailwind CSS plugin. You can initialize it in your tailwind.config.js file. The plugin accepts an optional options object which can include extensions to modify the internal context (theme, base, palettes, and components) before the CSS rules are generated.

To use the plugin, import it and add it to your plugins array. If you provide extensions, each extension is a function that receives the current Context and a configuration object, returning a modified Context.

The Options type defines the configuration available when initializing Franken UI. You can control CSS preflight, layer injection, and provide custom color palettes or extensions.

Key options:

• preflight: Boolean to enable/disable CSS reset/preflight.
• layer: Boolean to wrap styles in a CSS layer.
• layerExceptions: An array of strings representing CSS layers that should be excluded from the layer wrapping.
• customPalette: A Palette object used to override default theme colors.
• extensions: An array of Extensions to modify the generated Context.

The palettes function generates a CSSRuleObject containing color variables based on a provided configuration. You can use it to create a custom theme by passing a customPalette object within the options argument. This object will be merged with the default variables.

To use it, call palettes({ customPalette: { ... } }). The resulting object can then be applied to your CSS to define the color scheme for your application.

An Extension is a function that allows you to intercept and modify the generated Context. This is useful for adding custom components, modifying existing CSS rules, or injecting new theme variables.

An extension follows this signature: (context: Context, config: ExtensionConfig) => Context

To use extensions, pass them in the extensions field of the Options object as an array of tuples, where each tuple contains the extension function and its specific configuration object.

Extensions format: [Function, ExtensionConfig][]

The context.ts module exports several pre-configured objects that define the visual identity of Franken UI:

• theme: Contains the default :root and .dark CSS rules for the global theme.
• base: Contains base typography settings (like fontSize and lineHeight for the body) and global focus-visible styles.
• components: A Components object containing the CSS rule configurations for all supported UI components (e.g., accordion, button, card, modal, tab, etc.).

Franken UI provides several built-in color themes via CSS variables. Each theme includes both a light mode and a dark mode (prefixed with .dark.). Themes are applied by adding the corresponding class to a parent element (e.g., uk-theme-zinc).

Available themes:

• uk-theme-zinc
• uk-theme-slate
• uk-theme-stone
• uk-theme-gray
• uk-theme-neutral
• uk-theme-red
• uk-theme-rose
• uk-theme-orange
• uk-theme-green
• uk-theme-blue
• uk-theme-yellow
• uk-theme-violet
• uk-theme-amber
• uk-theme-purple
• uk-theme-teal

The following flags are available for the initialization command: