ttabs-svelte
Version:
A flexible layout management system with draggable, resizable tiles and tabs for Svelte applications. Like in VSCode
86 lines (85 loc) • 3.22 kB
JavaScript
/**
* Default theme with standard styling
*/
export const DEFAULT_THEME = {
name: 'default',
variables: {
// Base
'--ttabs-panel-bg': 'white',
'--ttabs-tab-bar-bg': '#f5f5f5',
'--ttabs-active-tab-bg': 'white',
'--ttabs-active-tab-indicator': '#4a6cf7',
'--ttabs-grid-bg': '#f0f0f0',
'--ttabs-grid-border': '1px solid #ddd',
'--ttabs-column-border': '1px solid #ddd',
// Error styling
'--ttabs-error-bg': '#fff5f5',
'--ttabs-error-color': 'tomato',
'--ttabs-error-border': '1px solid tomato',
'--ttabs-error-padding': '1rem',
'--ttabs-error-border-radius': '0',
// Empty state
'--ttabs-empty-state-color': '#666',
// Tab headers
'--ttabs-tab-header-padding': '0.5rem 1rem',
'--ttabs-tab-header-font-size': '0.9rem',
'--ttabs-tab-bar-border': '1px solid #ddd',
'--ttabs-tab-indicator-size': '3px',
'--ttabs-tab-indicator-offset': '0',
'--ttabs-transition-duration': '0.1s',
'--ttabs-transition-timing': 'ease',
// Text colors
'--ttabs-tab-text-color': '#555',
'--ttabs-tab-active-text-color': '#333',
// Content area
'--ttabs-content-bg': 'white',
'--ttabs-content-border': '1px solid #ddd',
'--ttabs-content-text-color': '#333',
'--ttabs-content-padding': '1rem',
// Utility elements
'--ttabs-resizer-hover-color': 'rgba(74, 108, 247, 0.3)',
'--ttabs-drop-indicator-color': '#4a6cf7',
'--ttabs-drop-target-outline': '2px dashed rgba(74, 108, 247, 0.5)',
'--ttabs-split-indicator-color': 'rgba(74, 108, 247, 0.1)',
'--ttabs-row-resizer-size': '6px',
'--ttabs-row-resizer-offset': '-3px',
'--ttabs-column-resizer-size': '6px',
'--ttabs-column-resizer-offset': '-3px',
'--ttabs-drop-indicator-width': '4px',
'--ttabs-drop-indicator-offset': '-2px',
// Border radius
'--ttabs-border-radius': '0',
'--ttabs-border-radius-sm': '0',
// Controls
'--ttabs-show-close-button': 'flex', // Show close buttons by default
'--ttabs-close-button-color': '#888',
'--ttabs-close-button-hover-color': '#666',
'--ttabs-close-button-hover-bg': 'rgba(0, 0, 0, 0.05)',
'--ttabs-tab-close-margin': '8px',
'--ttabs-tab-close-size': '16px',
'--ttabs-tab-close-border-radius': '0'
}
};
/**
* Resolve a theme by merging it with its base theme
*/
export function resolveTheme(theme) {
// Start with the base theme or DEFAULT_THEME
const baseTheme = theme.extends ? resolveTheme(theme.extends) : DEFAULT_THEME;
// Create a new theme object with merged properties
return {
name: theme.name,
variables: {
...baseTheme.variables,
...theme.variables
},
classes: theme.classes ? {
...baseTheme.classes,
...theme.classes
} : baseTheme.classes,
components: theme.components ? {
...(baseTheme.components || {}),
...theme.components
} : baseTheme.components
};
}