150 lines
3.9 KiB
TypeScript
150 lines
3.9 KiB
TypeScript
import { css } from '@design.estate/dees-element';
|
|
|
|
/**
|
|
* CSS custom properties (variables) for the design system
|
|
* Using --dees-* prefix for consistency with dees-catalog
|
|
*/
|
|
export const cssVariables = css`
|
|
:root {
|
|
/* Primary colors */
|
|
--dees-primary: #3b82f6;
|
|
--dees-primary-dark: #2563eb;
|
|
--dees-primary-foreground: #ffffff;
|
|
|
|
/* Secondary colors */
|
|
--dees-secondary: #f4f4f5;
|
|
--dees-secondary-foreground: #18181b;
|
|
--dees-secondary-dark: #e4e4e7;
|
|
|
|
/* Background */
|
|
--dees-background: #ffffff;
|
|
--dees-card: #ffffff;
|
|
--dees-surface: #f4f4f5;
|
|
|
|
/* Text */
|
|
--dees-foreground: #09090b;
|
|
--dees-muted-foreground: #71717a;
|
|
|
|
/* Borders */
|
|
--dees-border: #e4e4e7;
|
|
--dees-input: #e4e4e7;
|
|
--dees-ring: #3b82f6;
|
|
|
|
/* Semantic colors */
|
|
--dees-success: #22c55e;
|
|
--dees-warning: #f59e0b;
|
|
--dees-danger: #ef4444;
|
|
--dees-danger-dark: #dc2626;
|
|
--dees-destructive: #dc2626;
|
|
--dees-destructive-foreground: #ffffff;
|
|
|
|
/* Accent */
|
|
--dees-accent: #f4f4f5;
|
|
--dees-accent-foreground: #18181b;
|
|
|
|
/* Muted */
|
|
--dees-muted: #f4f4f5;
|
|
|
|
/* Border radius */
|
|
--dees-radius: 0.5rem;
|
|
--dees-radius-sm: 0.25rem;
|
|
--dees-radius-md: 0.375rem;
|
|
--dees-radius-lg: 0.75rem;
|
|
--dees-radius-xl: 1rem;
|
|
--dees-radius-full: 9999px;
|
|
|
|
/* Shadows */
|
|
--dees-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--dees-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--dees-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
|
/* Transitions */
|
|
--dees-transition-fast: 150ms ease;
|
|
--dees-transition-normal: 300ms ease;
|
|
--dees-transition-slow: 500ms ease;
|
|
--dees-spring: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--dees-ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
--dees-ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
|
|
/* Spacing */
|
|
--dees-space-xs: 0.25rem;
|
|
--dees-space-sm: 0.5rem;
|
|
--dees-space-md: 1rem;
|
|
--dees-space-lg: 1.5rem;
|
|
--dees-space-xl: 2rem;
|
|
|
|
/* Mobile-specific */
|
|
--dees-safe-area-inset-top: env(safe-area-inset-top, 0px);
|
|
--dees-safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
--dees-safe-area-inset-left: env(safe-area-inset-left, 0px);
|
|
--dees-safe-area-inset-right: env(safe-area-inset-right, 0px);
|
|
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
|
|
|
|
/* Page padding */
|
|
--dees-padding-page: 1rem;
|
|
|
|
/* Z-index scale */
|
|
--dees-z-base: 0;
|
|
--dees-z-dropdown: 100;
|
|
--dees-z-sticky: 200;
|
|
--dees-z-fixed: 300;
|
|
--dees-z-overlay: 400;
|
|
--dees-z-modal: 500;
|
|
--dees-z-popover: 600;
|
|
--dees-z-toast: 700;
|
|
--dees-z-tooltip: 800;
|
|
--dees-z-notification: 900;
|
|
--dees-z-max: 9999;
|
|
}
|
|
|
|
/* Dark theme */
|
|
:root[data-theme="dark"] {
|
|
/* Primary colors (same) */
|
|
--dees-primary: #3b82f6;
|
|
--dees-primary-dark: #2563eb;
|
|
--dees-primary-foreground: #ffffff;
|
|
|
|
/* Secondary colors */
|
|
--dees-secondary: #27272a;
|
|
--dees-secondary-foreground: #fafafa;
|
|
--dees-secondary-dark: #18181b;
|
|
|
|
/* Background */
|
|
--dees-background: #09090b;
|
|
--dees-card: #18181b;
|
|
--dees-surface: #27272a;
|
|
|
|
/* Text */
|
|
--dees-foreground: #fafafa;
|
|
--dees-muted-foreground: #a1a1aa;
|
|
|
|
/* Borders */
|
|
--dees-border: #27272a;
|
|
--dees-input: #27272a;
|
|
--dees-ring: #3b82f6;
|
|
|
|
/* Accent */
|
|
--dees-accent: #27272a;
|
|
--dees-accent-foreground: #fafafa;
|
|
|
|
/* Muted */
|
|
--dees-muted: #27272a;
|
|
}
|
|
`;
|
|
|
|
/**
|
|
* Inject CSS variables into the document
|
|
* Call this once at app initialization
|
|
*/
|
|
export function injectCssVariables(): void {
|
|
if (typeof document === 'undefined') return;
|
|
|
|
const styleId = 'dees-mobile-variables';
|
|
if (document.getElementById(styleId)) return;
|
|
|
|
const style = document.createElement('style');
|
|
style.id = styleId;
|
|
style.textContent = cssVariables.cssText;
|
|
document.head.appendChild(style);
|
|
}
|