Logos Design System

A comprehensive QML design system for Logos applications, providing theming, colors, spacing, and typography.

Features

• 🎨 Dark Theme - Built-in dark theme with runtime extensibility
• 🎯 Design Tokens - Single source of truth for colors via ColorPalette
• 📐 Spacing System - Consistent spacing scale (4px to 40px)
• ✍️ Typography - Predefined text styles and font sizes
• 🔌 Extensible - Apps can add custom themes easily
• 💾 Persistent - Theme preference saved via Qt.labs.settings
• ⚡ Fast - Themes loaded at startup, instant switching

How to Build

Using Nix (Recommended)

Build the QML Module

# Build everything (default)
nix build

# Or explicitly
nix build '.#default'

The result will include:

• lib/Logos/DesignSystem/ (QML module with qmldir + QML files)

Development Shell

# Enter development shell with all dependencies
nix develop

Note: In zsh, you need to quote the target (e.g., '.#default') to prevent glob expansion.

If you don't have flakes enabled globally, add experimental flags:

nix build --extra-experimental-features 'nix-command flakes'

The compiled artifacts can be found at result/

Usage

1. Ensure QML Import Path

Make sure the module install path (e.g. result/lib) is on your QML import path:

engine.addImportPath("path/to/result/lib");

2. Import in QML

import QtQuick
import QtQuick.Controls
import Logos.DesignSystem 1.0

Rectangle {
    color: Theme.palette.background

    Text {
        text: "Hello World"
        color: Theme.palette.text
        font.pixelSize: Theme.typography.body.size
    }
}

Requirements

• Qt 6.x
• CMake 3.16+
• C++17 compiler

Contributing

Contributions welcome! Please ensure:

• New colors are added to ColorPalette first
• Both DarkTheme and LightTheme are updated
• Semantic naming is maintained
• Examples are provided for new features