ttabs-svelte/dist/ttabs/types/theme-types.d.ts

A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode

import type { Component } from "svelte";
/**
 * All CSS variables available for theming
 */
export type TtabsCssVariables = {
    '--ttabs-panel-bg': string;
    '--ttabs-tab-bar-bg': string;
    '--ttabs-active-tab-bg': string;
    '--ttabs-active-tab-indicator': string;
    '--ttabs-grid-bg': string;
    '--ttabs-grid-border': string;
    '--ttabs-column-border': string;
    '--ttabs-tab-text-color': string;
    '--ttabs-tab-active-text-color': string;
    '--ttabs-content-bg': string;
    '--ttabs-content-border': string;
    '--ttabs-content-text-color': string;
    '--ttabs-content-padding': string;
    '--ttabs-tab-header-padding': string;
    '--ttabs-tab-header-border': string;
    '--ttabs-tab-header-font-size': string;
    '--ttabs-tab-bar-border': string;
    '--ttabs-tab-indicator-size': string;
    '--ttabs-tab-indicator-offset': string;
    '--ttabs-transition-duration': string;
    '--ttabs-transition-timing': string;
    '--ttabs-show-close-button': string;
    '--ttabs-close-button-color': string;
    '--ttabs-close-button-hover-color': string;
    '--ttabs-close-button-hover-bg': string;
    '--ttabs-tab-close-margin': string;
    '--ttabs-tab-close-size': string;
    '--ttabs-tab-close-border-radius': string;
    '--ttabs-error-bg': string;
    '--ttabs-error-color': string;
    '--ttabs-error-border': string;
    '--ttabs-error-padding': string;
    '--ttabs-error-border-radius': string;
    '--ttabs-empty-state-color': string;
    '--ttabs-resizer-hover-color': string;
    '--ttabs-drop-indicator-color': string;
    '--ttabs-drop-target-outline': string;
    '--ttabs-split-indicator-color': string;
    '--ttabs-row-resizer-size': string;
    '--ttabs-row-resizer-offset': string;
    '--ttabs-column-resizer-size': string;
    '--ttabs-column-resizer-offset': string;
    '--ttabs-drop-indicator-width': string;
    '--ttabs-drop-indicator-offset': string;
    '--ttabs-border-radius': string;
    '--ttabs-border-radius-sm': string;
};
/**
 * All element types that can have custom CSS classes
 */
export type TtabsElementType = 'root' | 'panel' | 'grid' | 'row' | 'column' | 'tab' | 'tab-bar' | 'tab-header' | 'tab-header-active' | 'tab-header-focused' | 'tab-title' | 'tab-close-button' | 'tab-content' | 'content' | 'content-container' | 'direct-content' | 'empty-state' | 'error' | 'row-resizer' | 'column-resizer';
/**
 * Theme configuration for ttabs
 */
export interface TtabsTheme {
    /**
     * Name of the theme
     */
    name: string;
    /**
     * Base theme to extend (optional)
     * If not provided, extends DEFAULT_THEME
     */
    extends?: TtabsTheme;
    /**
     * CSS variables for styling
     * These will be applied as inline styles to the root element
     */
    variables: Partial<TtabsCssVariables>;
    /**
     * Optional CSS class overrides for different elements
     * These will be applied to the respective elements alongside the default classes
     */
    classes?: Partial<Record<TtabsElementType, string>>;
    /**
     * Custom component overrides
     * These will be used in place of the default components
     */
    components?: {
        /**
         * Custom close button component for tabs
         * Will receive standard props: tabId, ttabs, onClose
         */
        closeButton?: Component;
    };
}
/**
 * Default theme with standard styling
 */
export declare const DEFAULT_THEME: TtabsTheme;
/**
 * Resolve a theme by merging it with its base theme
 */
export declare function resolveTheme(theme: TtabsTheme): TtabsTheme;