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" readonly property int fontSizeXs: 10 // 0.75rem = 12px, scaled to 10 for QML readonly property int fontSizeSm: 12 // 0.875rem = 14px, scaled readonly property int fontSizeMd: 14 // 1rem = 16px, scaled readonly property int fontSizeLg: 16 // 1.125rem = 18px, scaled readonly property int fontSizeXl: 18 // 1.25rem = 20px, scaled readonly property int fontSize2xl: 22 // 1.5rem = 24px, scaled // 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) } }