export global Theme {
    in-out property <bool> is-dark: true;

    out property <length> width: 448px;

    out property <brush> surface-main: is-dark ? #0f172a : #ffffff;
    // out property <brush> surface-control: is-dark ? #1e293b4d : #ffffff;
    out property <brush> surface-item: is-dark ? #1e293b4d : #f8fafc;
    out property <brush> surface-elevated: is-dark ? #1e293b80 : #f8fafc;
    out property <brush> surface-hover: is-dark ? #1e293b : #ffffff;

    out property <brush> border-main: is-dark ? #334155 : #e2e8f0;

    out property <brush> gradient-main: @linear-gradient(135deg, rgb(59, 130, 246), rgb(6, 182, 212));

    out property <brush> text-main: is-dark ? #ffffff : #0f172a;
    out property <brush> text-muted: is-dark ? #94a3b8 : #64748b;

    out property <brush> text-control: is-dark ? #cbd5e1 : #475569;
    out property <brush> text-control-muted: is-dark ? #64748b : #94a3b8;

    out property <brush> text-hint: is-dark ? #475569 : #475569;

    out property <brush> shadow-color: is-dark ? #3b82f640 : #3b82f640;

    out property <length> shadow-primary-x: 0px;
    out property <length> shadow-primary-y: 10px;
    out property <length> shadow-primary-blur: 15px;

    out property <length> radius: 12px;
    out property <length> radius-lg: 16px;

    out property <length> spacing-xl: 20px;
    out property <length> spacing-lg: 16px;
    out property <length> spacing-md: 12px;
    out property <length> spacing-sm: 8px;
    out property <length> spacing-xs: 4px;

    callback toggle();
    toggle => {
        is-dark = !is-dark;
    }
}