337 lines
11 KiB
TypeScript
337 lines
11 KiB
TypeScript
import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
|
|
|
|
// ============================================
|
|
// Theme Token Type Definitions
|
|
// ============================================
|
|
|
|
export interface IThemeColors {
|
|
bgPrimary: string;
|
|
bgSecondary: string;
|
|
bgTertiary: string;
|
|
textPrimary: string;
|
|
textSecondary: string;
|
|
textMuted: string;
|
|
textWarm: string;
|
|
borderDefault: string;
|
|
borderSubtle: string;
|
|
borderStrong: string;
|
|
accentPrimary: string;
|
|
accentSuccess: string;
|
|
accentWarning: string;
|
|
accentError: string;
|
|
badgeDefaultBg: string;
|
|
badgeDefaultFg: string;
|
|
badgeSuccessBg: string;
|
|
badgeSuccessFg: string;
|
|
badgeWarningBg: string;
|
|
badgeWarningFg: string;
|
|
badgeErrorBg: string;
|
|
badgeErrorFg: string;
|
|
}
|
|
|
|
export interface IThemeSpacing {
|
|
xs: string;
|
|
sm: string;
|
|
md: string;
|
|
lg: string;
|
|
xl: string;
|
|
'2xl': string;
|
|
'3xl': string;
|
|
}
|
|
|
|
export interface IThemeRadius {
|
|
xs: string;
|
|
sm: string;
|
|
md: string;
|
|
lg: string;
|
|
xl: string;
|
|
full: string;
|
|
}
|
|
|
|
export interface IThemeShadows {
|
|
xs: string;
|
|
sm: string;
|
|
md: string;
|
|
lg: string;
|
|
}
|
|
|
|
export interface IThemeTransitions {
|
|
fast: string;
|
|
default: string;
|
|
slow: string;
|
|
slower: string;
|
|
}
|
|
|
|
export interface IThemeControlHeights {
|
|
sm: string;
|
|
md: string;
|
|
lg: string;
|
|
xl: string;
|
|
}
|
|
|
|
export interface ITheme {
|
|
colors: {
|
|
light: IThemeColors;
|
|
dark: IThemeColors;
|
|
};
|
|
spacing: IThemeSpacing;
|
|
radius: IThemeRadius;
|
|
shadows: IThemeShadows;
|
|
transitions: IThemeTransitions;
|
|
controlHeights: IThemeControlHeights;
|
|
}
|
|
|
|
// ============================================
|
|
// Default Theme Values (TypeScript Object)
|
|
// ============================================
|
|
|
|
export const themeDefaults: ITheme = {
|
|
colors: {
|
|
light: {
|
|
bgPrimary: 'hsl(0 0% 100%)', // #ffffff
|
|
bgSecondary: 'hsl(0 0% 98%)', // #fafafa
|
|
bgTertiary: 'hsl(0 0% 96%)', // #f5f5f5
|
|
textPrimary: 'hsl(0 0% 3.9%)', // #0a0a0a
|
|
textSecondary: 'hsl(0 0% 20%)', // #333333
|
|
textMuted: 'hsl(0 0% 45%)', // #737373
|
|
textWarm: '#78716c', // warm stone
|
|
borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
|
|
borderSubtle: 'hsl(0 0% 93%)', // #ededed
|
|
borderStrong: 'hsl(0 0% 80%)', // #cccccc
|
|
accentPrimary: '#3b82f6',
|
|
accentSuccess: '#22c55e',
|
|
accentWarning: '#f59e0b',
|
|
accentError: '#ef4444',
|
|
badgeDefaultBg: '#f4f4f5',
|
|
badgeDefaultFg: '#3f3f46',
|
|
badgeSuccessBg: '#dcfce7',
|
|
badgeSuccessFg: '#166534',
|
|
badgeWarningBg: '#fef3c7',
|
|
badgeWarningFg: '#92400e',
|
|
badgeErrorBg: '#fee2e2',
|
|
badgeErrorFg: '#991b1b',
|
|
},
|
|
dark: {
|
|
bgPrimary: 'hsl(0 0% 3.9%)', // #0a0a0a
|
|
bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
|
|
bgTertiary: 'hsl(0 0% 7%)', // #121212
|
|
textPrimary: 'hsl(0 0% 98%)', // #fafafa
|
|
textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
|
|
textMuted: 'hsl(0 0% 55%)', // #8c8c8c
|
|
textWarm: '#b5a99a', // warm stone
|
|
borderDefault: 'hsl(0 0% 14.9%)', // #262626
|
|
borderSubtle: 'hsl(0 0% 11%)', // #1c1c1c
|
|
borderStrong: 'hsl(0 0% 20%)', // #333333
|
|
accentPrimary: '#3b82f6',
|
|
accentSuccess: '#22c55e',
|
|
accentWarning: '#f59e0b',
|
|
accentError: '#ef4444',
|
|
badgeDefaultBg: '#27272a',
|
|
badgeDefaultFg: '#a1a1aa',
|
|
badgeSuccessBg: '#14532d',
|
|
badgeSuccessFg: '#4ade80',
|
|
badgeWarningBg: '#451a03',
|
|
badgeWarningFg: '#fbbf24',
|
|
badgeErrorBg: '#450a0a',
|
|
badgeErrorFg: '#f87171',
|
|
},
|
|
},
|
|
spacing: {
|
|
xs: '4px',
|
|
sm: '8px',
|
|
md: '12px',
|
|
lg: '16px',
|
|
xl: '24px',
|
|
'2xl': '32px',
|
|
'3xl': '48px',
|
|
},
|
|
radius: {
|
|
xs: '2px',
|
|
sm: '4px',
|
|
md: '6px',
|
|
lg: '8px',
|
|
xl: '12px',
|
|
full: '999px',
|
|
},
|
|
shadows: {
|
|
xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
|
sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
|
|
md: '0 2px 8px rgba(0, 0, 0, 0.15)',
|
|
lg: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
},
|
|
transitions: {
|
|
fast: '0.1s',
|
|
default: '0.15s',
|
|
slow: '0.2s',
|
|
slower: '0.3s',
|
|
},
|
|
controlHeights: {
|
|
sm: '32px',
|
|
md: '36px',
|
|
lg: '40px',
|
|
xl: '48px',
|
|
},
|
|
};
|
|
|
|
// Shorthand aliases for CSS template usage
|
|
const l = themeDefaults.colors.light;
|
|
const d = themeDefaults.colors.dark;
|
|
|
|
// ============================================
|
|
// CSS Block for Component Import
|
|
// ============================================
|
|
|
|
/**
|
|
* Default theme styles to be imported into every component's static styles array.
|
|
* Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights.
|
|
*
|
|
* Usage:
|
|
* ```typescript
|
|
* import { themeDefaultStyles } from '../00theme.js';
|
|
*
|
|
* @customElement('my-component')
|
|
* export class MyComponent extends DeesElement {
|
|
* public static styles = [
|
|
* themeDefaultStyles,
|
|
* cssManager.defaultStyles,
|
|
* css`...`
|
|
* ];
|
|
* }
|
|
* ```
|
|
*/
|
|
export const themeDefaultStyles: CSSResult = css`
|
|
:host {
|
|
/* ========================================
|
|
* Colors — Background (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
|
|
--dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
|
|
--dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
|
|
|
|
/* ========================================
|
|
* Colors — Text (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
|
|
--dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
|
|
--dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
|
|
|
|
/* ========================================
|
|
* Colors — Border (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
|
|
--dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
|
|
--dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
|
|
|
|
/* ========================================
|
|
* Colors — Warm Text (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
|
|
|
|
/* ========================================
|
|
* Colors — Accent (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
|
|
--dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
|
|
--dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
|
|
--dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
|
|
|
|
/* ========================================
|
|
* Colors — Badge (from themeDefaults)
|
|
* ======================================== */
|
|
--dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
|
|
--dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
|
|
--dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
|
|
--dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
|
|
--dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
|
|
--dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
|
|
--dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
|
|
--dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};
|
|
|
|
/* ========================================
|
|
* Colors — Interactive States
|
|
* ======================================== */
|
|
--dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
|
|
--dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
|
|
--dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
|
|
|
|
/* ========================================
|
|
* Colors — Focus Ring
|
|
* ======================================== */
|
|
--dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};
|
|
|
|
/* ========================================
|
|
* Colors — Tooltip (inverted contrast)
|
|
* ======================================== */
|
|
--dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
--dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
|
|
|
/* ========================================
|
|
* Colors — Link
|
|
* ======================================== */
|
|
--dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
--dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};
|
|
|
|
/* ========================================
|
|
* Colors — Code
|
|
* ======================================== */
|
|
--dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
|
|
--dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
|
|
|
/* ========================================
|
|
* Colors — Selection
|
|
* ======================================== */
|
|
--dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};
|
|
|
|
/* ========================================
|
|
* Colors — Scrollbar
|
|
* ======================================== */
|
|
--dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
|
|
--dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
|
|
|
|
/* ========================================
|
|
* Spacing Scale
|
|
* ======================================== */
|
|
--dees-spacing-xs: 4px;
|
|
--dees-spacing-sm: 8px;
|
|
--dees-spacing-md: 12px;
|
|
--dees-spacing-lg: 16px;
|
|
--dees-spacing-xl: 24px;
|
|
--dees-spacing-2xl: 32px;
|
|
--dees-spacing-3xl: 48px;
|
|
|
|
/* ========================================
|
|
* Border Radius Scale
|
|
* ======================================== */
|
|
--dees-radius-xs: 2px;
|
|
--dees-radius-sm: 4px;
|
|
--dees-radius-md: 6px;
|
|
--dees-radius-lg: 8px;
|
|
--dees-radius-xl: 12px;
|
|
--dees-radius-full: 999px;
|
|
|
|
/* ========================================
|
|
* Shadow Elevation Scale
|
|
* ======================================== */
|
|
--dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
--dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
--dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
|
/* ========================================
|
|
* Transition Duration Scale
|
|
* ======================================== */
|
|
--dees-transition-fast: 0.1s;
|
|
--dees-transition-default: 0.15s;
|
|
--dees-transition-slow: 0.2s;
|
|
--dees-transition-slower: 0.3s;
|
|
|
|
/* ========================================
|
|
* Control Height Scale
|
|
* ======================================== */
|
|
--dees-control-height-sm: 32px;
|
|
--dees-control-height-md: 36px;
|
|
--dees-control-height-lg: 40px;
|
|
--dees-control-height-xl: 48px;
|
|
}
|
|
`;
|