62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { css } from '@design.estate/dees-element';
|
|
|
|
/**
|
|
* CSS custom properties (design tokens) for tsview components
|
|
* Add themeStyles to your component's static styles array to use these variables
|
|
*/
|
|
export const themeStyles = css`
|
|
:host {
|
|
/* Background colors */
|
|
--tsview-bg-primary: #1a1a1a;
|
|
--tsview-bg-secondary: #1e1e1e;
|
|
--tsview-bg-tertiary: #141414;
|
|
--tsview-bg-overlay: rgba(0, 0, 0, 0.2);
|
|
--tsview-bg-overlay-dark: rgba(0, 0, 0, 0.3);
|
|
--tsview-bg-dialog-overlay: rgba(0, 0, 0, 0.7);
|
|
|
|
/* Border colors */
|
|
--tsview-border-primary: #333;
|
|
--tsview-border-secondary: #444;
|
|
--tsview-border-tertiary: #2a2a3e;
|
|
|
|
/* Text colors */
|
|
--tsview-text-primary: #fff;
|
|
--tsview-text-secondary: #e0e0e0;
|
|
--tsview-text-tertiary: #ccc;
|
|
--tsview-text-muted: #888;
|
|
--tsview-text-dim: #666;
|
|
|
|
/* Interactive states */
|
|
--tsview-hover-bg: rgba(255, 255, 255, 0.05);
|
|
--tsview-hover-bg-strong: rgba(255, 255, 255, 0.1);
|
|
--tsview-selected-bg: rgba(255, 255, 255, 0.08);
|
|
--tsview-active-bg: rgba(255, 255, 255, 0.1);
|
|
|
|
/* Accent colors */
|
|
--tsview-accent-folder: #fbbf24;
|
|
|
|
/* Danger/destructive actions */
|
|
--tsview-danger: #ef4444;
|
|
--tsview-danger-text: #f87171;
|
|
--tsview-danger-bg: rgba(239, 68, 68, 0.2);
|
|
--tsview-danger-bg-hover: rgba(239, 68, 68, 0.3);
|
|
|
|
/* Success states */
|
|
--tsview-success: #22c55e;
|
|
--tsview-success-bg: rgba(34, 197, 94, 0.2);
|
|
|
|
/* Border radius */
|
|
--tsview-radius-sm: 4px;
|
|
--tsview-radius-md: 6px;
|
|
--tsview-radius-lg: 8px;
|
|
--tsview-radius-xl: 12px;
|
|
|
|
/* Spacing */
|
|
--tsview-spacing-xs: 4px;
|
|
--tsview-spacing-sm: 8px;
|
|
--tsview-spacing-md: 12px;
|
|
--tsview-spacing-lg: 16px;
|
|
--tsview-spacing-xl: 24px;
|
|
}
|
|
`;
|