import { tokens } from './tokens.js';
import { ButtonVariant } from '../components/button.js';
import * as goober from 'goober';
export declare const css: typeof goober.css;
export declare function createStyles(): import('solid-js').Accessor<{
    logo: string;
    selectWrapper: string;
    selectContainer: string;
    selectLabel: string;
    selectDescription: string;
    select: string;
    inputWrapper: string;
    inputContainer: string;
    inputLabel: string;
    inputDescription: string;
    input: string;
    checkboxWrapper: string;
    checkboxContainer: string;
    checkboxLabelContainer: string;
    checkbox: string;
    checkboxLabel: string;
    checkboxDescription: string;
    button: {
        base: string;
        variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean): string;
    };
    tag: {
        dot: (color: keyof typeof tokens.colors) => string;
        base: string;
        label: string;
        count: string;
    };
    tree: {
        info: string;
        actionButton: string;
        expanderContainer: string;
        expander: string;
        expandedLine: (hasBorder: boolean) => string;
        collapsible: string;
        actions: string;
        valueCollapsed: string;
        valueFunction: string;
        valueString: string;
        valueNumber: string;
        valueBoolean: string;
        valueNull: string;
        valueKey: string;
        valueBraces: string;
        valueContainer: (isRoot: boolean) => string;
    };
    header: {
        row: string;
        logoAndToggleContainer: string;
        logo: string;
        tanstackLogo: string;
        flavorLogo: (flavorLight: string, flavorDark: string) => string;
    };
    section: {
        main: string;
        title: string;
        icon: string;
        description: string;
    };
    mainPanel: {
        panel: (withPadding: boolean) => string;
    };
}>;