HomeComponentsBlocksPresettingProvidersCommunityDevelopers
select

Katlux Presets Development

Theme architecture, design tokens, and CSS/SCSS styling presets for Katlux UI applications.

Design Token Architecture

Katlux presets define standard CSS custom properties used across all components:

  • Colors: Primary, secondary, surface, border, and status state colors (HSL/HEX tokens).
  • Typography: Font families, font sizes, line heights, and font weights.
  • Spacing & Layout: Padding, margin, gap utilities, and header/sidebar dimensions.
  • Radii & Shadows: Border radius variants (sm, md, lg, xl, full) and elevation shadow scales.

For full monorepo environment setup and local dev commands, visit the Katlux Showcase Development guide.

Package Directory Structure
TEXT
packages/katlux-preset-modern/
├── src/
│   ├── scss/
│   │   ├── _tokens.scss     # CSS Custom Property definitions
│   │   ├── _components.scss # Component style overrides
│   │   └── index.scss       # Main SCSS barrel
│   └── index.ts             # Preset module registration
├── dist/                    # Compiled CSS runtime output
├── package.json
└── tsconfig.json