metabuilder/qml/components/theming/StyleVariables.qml

pragma Singleton
import QtQuick

/**
 * StyleVariables.qml - CSS Custom Properties equivalent for QML
 * Mirrors React's _variables.scss with all design tokens
 */
QtObject {
    id: styleVariables

    // ============================================
    // Colors - Dark theme (default values)
    // These are base values; Theme.qml provides themed overrides
    // ============================================
    
    readonly property color colorPrimary: "#10a37f"
    readonly property color colorPrimaryDark: "#0d8a6a"
    readonly property color colorPrimaryLight: "#1abf94"
    readonly property color colorSecondary: "#8e8ea0"
    
    readonly property color colorBg: "#0d0d0d"
    readonly property color colorBgPaper: "#1a1a1a"
    readonly property color colorBgElevated: "#242424"
    readonly property color colorBgHover:
        Qt.rgba(255/255, 255/255, 255/255, 0.08)
    
    readonly property color colorText: "#ffffff"
    readonly property color colorTextSecondary: "#a0a0a0"
    readonly property color colorTextDisabled: "#666666"
    
    readonly property color colorBorder: "#333333"
    readonly property color colorDivider:
        Qt.rgba(255/255, 255/255, 255/255, 0.12)
    
    readonly property color colorSuccess: "#22c55e"
    readonly property color colorSuccessBg:
        Qt.rgba(34/255, 197/255, 94/255, 0.1)
    readonly property color colorWarning: "#f59e0b"
    readonly property color colorWarningBg:
        Qt.rgba(245/255, 158/255, 11/255, 0.1)
    readonly property color colorError: "#ef4444"
    readonly property color colorErrorBg:
        Qt.rgba(239/255, 68/255, 68/255, 0.1)
    readonly property color colorInfo: "#3b82f6"
    readonly property color colorInfoBg:
        Qt.rgba(59/255, 130/255, 246/255, 0.1)

    // ============================================
    // Spacing (matches SCSS --spacing-*)
    // ============================================
    
    readonly property int spacingXs: 4
    readonly property int spacingSm: 8
    readonly property int spacingMd: 16
    readonly property int spacingLg: 24
    readonly property int spacingXl: 32
    readonly property int spacingXxl: 48
    
    // Spacing function (like SCSS spacing function)
    function spacing(factor) {
        return spacingSm * factor
    }

    // ============================================
    // Border Radius (matches SCSS --radius-*)
    // ============================================
    
    readonly property int radiusSm: 4
    readonly property int radiusMd: 8
    readonly property int radiusLg: 12
    readonly property int radiusXl: 16
    readonly property int radiusFull: 9999

    // ============================================
    // Shadows (matches SCSS --shadow-*)
    // ============================================
    
    // Shadow values as objects for MultiEffect
    readonly property var shadowSm: ({
        blur: 0.1, offset: 2,
        color: "#4D000000"
    })
    readonly property var shadowMd: ({
        blur: 0.2, offset: 4,
        color: "#66000000"
    })
    readonly property var shadowLg: ({
        blur: 0.3, offset: 10,
        color: "#80000000"
    })
    readonly property var shadowXl: ({
        blur: 0.4, offset: 15,
        color: "#99000000"
    })

    // ============================================
    // Typography (matches SCSS --font-*)
    // ============================================
    
    readonly property string fontFamily:
        "Roboto, -apple-system, "
        + "BlinkMacSystemFont, "
        + "'Segoe UI', sans-serif"
    readonly property string fontMono:
        "Fira Code, Consolas, "
        + "Monaco, monospace"

    // Scaled for QML (not CSS rem)
    readonly property int fontSizeXs: 10
    readonly property int fontSizeSm: 12
    readonly property int fontSizeMd: 14
    readonly property int fontSizeLg: 16
    readonly property int fontSizeXl: 18
    readonly property int fontSize2xl: 22
    
    // Font weights
    readonly property int fontWeightLight: 300
    readonly property int fontWeightRegular: 400
    readonly property int fontWeightMedium: 500
    readonly property int fontWeightSemibold: 600
    readonly property int fontWeightBold: 700

    // ============================================
    // Transitions (matches SCSS --transition-*)
    // ============================================
    
    readonly property int transitionFast: 150
    readonly property int transitionNormal: 250
    readonly property int transitionSlow: 350

    // ============================================
    // Z-Index Layers (matches SCSS --z-*)
    // ============================================
    
    readonly property int zDropdown: 100
    readonly property int zModal: 200
    readonly property int zToast: 300
    readonly property int zTooltip: 400

    // ============================================
    // Breakpoints (for responsive layouts)
    // ============================================
    
    readonly property int breakpointSm: 600
    readonly property int breakpointMd: 900
    readonly property int breakpointLg: 1200
    readonly property int breakpointXl: 1536

    // ============================================
    // Component-specific tokens
    // ============================================
    
    // Button sizes
    readonly property var buttonSizes: ({
        sm: {
            height: 28,
            paddingH: spacingSm,
            fontSize: fontSizeXs
        },
        md: {
            height: 36,
            paddingH: spacingMd,
            fontSize: fontSizeSm
        },
        lg: {
            height: 44,
            paddingH: spacingLg,
            fontSize: fontSizeMd
        }
    })
    
    // Chip sizes
    readonly property var chipSizes: ({
        sm: {
            height: 24,
            paddingH: 10,
            fontSize: fontSizeXs
        },
        md: {
            height: 32,
            paddingH: 14,
            fontSize: fontSizeSm
        }
    })
    
    // Icon button sizes
    readonly property var iconButtonSizes: ({
        sm: { size: 28 },
        md: { size: 36 },
        lg: { size: 44 }
    })

    // ============================================
    // Helper Functions
    // ============================================
    
    // Get opacity for hover states based on mode
    function hoverOpacity(isDark) {
        return isDark ? 0.08 : 0.04
    }
    
    // Get opacity for active/pressed states
    function activeOpacity(isDark) {
        return isDark ? 0.12 : 0.08
    }
    
    // Create rgba color from hex and alpha
    function rgba(hexColor, alpha) {
        return Qt.rgba(
            parseInt(hexColor.substr(1, 2), 16) / 255,
            parseInt(hexColor.substr(3, 2), 16) / 255,
            parseInt(hexColor.substr(5, 2), 16) / 255,
            alpha
        )
    }
    
    // Lighten a color
    function lighten(color, factor) {
        return Qt.lighter(color, 1 + factor)
    }
    
    // Darken a color
    function darken(color, factor) {
        return Qt.darker(color, 1 + factor)
    }
}