@dbs-portal/core-theme

/** * Theme provider component * Manages theme state and provides theme context to the application */ import type React from 'react'; import { type ThemeConfig } from 'antd'; import { designTokens, type ThemeMode } from '../tokens'; import type { BaseComponentProps } from '@dbs-portal/core-shared'; interface ThemeContextValue { mode: ThemeMode; setMode: (mode: ThemeMode) => void; theme: ThemeConfig; tokens: typeof designTokens; isDark: boolean; isLight: boolean; toggleTheme: () => void; } interface ThemeProviderProps extends BaseComponentProps { defaultMode?: ThemeMode; storageKey?: string; } /** * Theme provider component */ export declare const ThemeProvider: React.FC<ThemeProviderProps>; /** * Hook to use theme context */ export declare const useTheme: () => ThemeContextValue; /** * Hook to get current theme mode */ export declare const useThemeMode: () => { mode: "light" | "dark" | "auto"; setMode: (mode: ThemeMode) => void; isDark: boolean; isLight: boolean; toggleTheme: () => void; }; /** * Hook to get design tokens */ export declare const useDesignTokens: () => { readonly colors: { readonly primary: { readonly 50: "#f0f9ff"; readonly 100: "#e0f2fe"; readonly 200: "#bae6fd"; readonly 300: "#7dd3fc"; readonly 400: "#38bdf8"; readonly 500: "#0ea5e9"; readonly 600: "#0284c7"; readonly 700: "#0369a1"; readonly 800: "#075985"; readonly 900: "#0c4a6e"; readonly 950: "#082f49"; }; readonly secondary: { readonly 50: "#f8fafc"; readonly 100: "#f1f5f9"; readonly 200: "#e2e8f0"; readonly 300: "#cbd5e1"; readonly 400: "#94a3b8"; readonly 500: "#64748b"; readonly 600: "#475569"; readonly 700: "#334155"; readonly 800: "#1e293b"; readonly 900: "#0f172a"; readonly 950: "#020617"; }; readonly success: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly warning: { readonly 50: "#fffbeb"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly error: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly info: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly neutral: { readonly 50: "#fafafa"; readonly 100: "#f5f5f5"; readonly 200: "#e5e5e5"; readonly 300: "#d4d4d4"; readonly 400: "#a3a3a3"; readonly 500: "#737373"; readonly 600: "#525252"; readonly 700: "#404040"; readonly 800: "#262626"; readonly 900: "#171717"; readonly 950: "#0a0a0a"; }; readonly white: "#ffffff"; readonly black: "#000000"; readonly transparent: "transparent"; readonly current: "currentColor"; }; readonly fontFamily: { readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "sans-serif"]; readonly serif: readonly ["Georgia", "Cambria", "Times New Roman", "Times", "serif"]; readonly mono: readonly ["JetBrains Mono", "Fira Code", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]; }; readonly fontSize: { readonly xs: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly sm: readonly ["0.875rem", { readonly lineHeight: "1.25rem"; }]; readonly base: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly lg: readonly ["1.125rem", { readonly lineHeight: "1.75rem"; }]; readonly xl: readonly ["1.25rem", { readonly lineHeight: "1.75rem"; }]; readonly xxl: readonly ["1.5rem", { readonly lineHeight: "2rem"; }]; readonly '3xl': readonly ["1.875rem", { readonly lineHeight: "2.25rem"; }]; readonly '4xl': readonly ["2.25rem", { readonly lineHeight: "2.5rem"; }]; readonly '5xl': readonly ["3rem", { readonly lineHeight: "1"; }]; readonly '6xl': readonly ["3.75rem", { readonly lineHeight: "1"; }]; readonly '7xl': readonly ["4.5rem", { readonly lineHeight: "1"; }]; readonly '8xl': readonly ["6rem", { readonly lineHeight: "1"; }]; readonly '9xl': readonly ["8rem", { readonly lineHeight: "1"; }]; }; readonly fontWeight: { readonly thin: "100"; readonly extralight: "200"; readonly light: "300"; readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; readonly extrabold: "800"; readonly black: "900"; }; readonly lineHeight: { readonly none: "1"; readonly tight: "1.25"; readonly snug: "1.375"; readonly normal: "1.5"; readonly relaxed: "1.625"; readonly loose: "2"; readonly 3: ".75rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 7: "1.75rem"; readonly 8: "2rem"; readonly 9: "2.25rem"; readonly 10: "2.5rem"; }; readonly letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; readonly typography: { readonly h1: { readonly fontSize: readonly ["2.25rem", { readonly lineHeight: "2.5rem"; }]; readonly fontWeight: "700"; readonly lineHeight: "1.25"; readonly letterSpacing: "-0.025em"; }; readonly h2: { readonly fontSize: readonly ["1.875rem", { readonly lineHeight: "2.25rem"; }]; readonly fontWeight: "700"; readonly lineHeight: "1.25"; readonly letterSpacing: "-0.025em"; }; readonly h3: { readonly fontSize: readonly ["1.5rem", { readonly lineHeight: "2rem"; }]; readonly fontWeight: "600"; readonly lineHeight: "1.375"; readonly letterSpacing: "0em"; }; readonly h4: { readonly fontSize: readonly ["1.25rem", { readonly lineHeight: "1.75rem"; }]; readonly fontWeight: "600"; readonly lineHeight: "1.375"; readonly letterSpacing: "0em"; }; readonly h5: { readonly fontSize: readonly ["1.125rem", { readonly lineHeight: "1.75rem"; }]; readonly fontWeight: "500"; readonly lineHeight: "1.5"; readonly letterSpacing: "0em"; }; readonly h6: { readonly fontSize: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly fontWeight: "500"; readonly lineHeight: "1.5"; readonly letterSpacing: "0em"; }; readonly body1: { readonly fontSize: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly fontWeight: "400"; readonly lineHeight: "1.625"; readonly letterSpacing: "0em"; }; readonly body2: { readonly fontSize: readonly ["0.875rem", { readonly lineHeight: "1.25rem"; }]; readonly fontWeight: "400"; readonly lineHeight: "1.5"; readonly letterSpacing: "0em"; }; readonly caption: { readonly fontSize: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly fontWeight: "400"; readonly lineHeight: "1.5"; readonly letterSpacing: "0.025em"; }; readonly overline: { readonly fontSize: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly fontWeight: "500"; readonly lineHeight: "1.5"; readonly letterSpacing: "0.1em"; readonly textTransform: "uppercase"; }; }; readonly spacing: { readonly 0: "0px"; readonly px: "1px"; readonly 0.5: "0.125rem"; readonly 1: "0.25rem"; readonly 1.5: "0.375rem"; readonly 2: "0.5rem"; readonly 2.5: "0.625rem"; readonly 3: "0.75rem"; readonly 3.5: "0.875rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 7: "1.75rem"; readonly 8: "2rem"; readonly 9: "2.25rem"; readonly 10: "2.5rem"; readonly 11: "2.75rem"; readonly 12: "3rem"; readonly 14: "3.5rem"; readonly 16: "4rem"; readonly 20: "5rem"; readonly 24: "6rem"; readonly 28: "7rem"; readonly 32: "8rem"; readonly 36: "9rem"; readonly 40: "10rem"; readonly 44: "11rem"; readonly 48: "12rem"; readonly 52: "13rem"; readonly 56: "14rem"; readonly 60: "15rem"; readonly 64: "16rem"; readonly 72: "18rem"; readonly 80: "20rem"; readonly 96: "24rem"; }; readonly componentSpacing: { readonly button: { readonly paddingX: { readonly xs: "0.5rem"; readonly sm: "0.75rem"; readonly md: "1rem"; readonly lg: "1.5rem"; readonly xl: "2rem"; }; readonly paddingY: { readonly xs: "0.25rem"; readonly sm: "0.375rem"; readonly md: "0.5rem"; readonly lg: "0.625rem"; readonly xl: "0.75rem"; }; readonly gap: "0.5rem"; }; readonly input: { readonly paddingX: { readonly sm: "0.625rem"; readonly md: "0.75rem"; readonly lg: "1rem"; }; readonly paddingY: { readonly sm: "0.375rem"; readonly md: "0.5rem"; readonly lg: "0.625rem"; }; }; readonly card: { readonly padding: { readonly sm: "1rem"; readonly md: "1.5rem"; readonly lg: "2rem"; }; readonly gap: "1rem"; }; readonly modal: { readonly padding: "1.5rem"; readonly gap: "1rem"; }; readonly layout: { readonly containerPadding: { readonly sm: "1rem"; readonly md: "1.5rem"; readonly lg: "2rem"; }; readonly sectionGap: { readonly sm: "2rem"; readonly md: "3rem"; readonly lg: "4rem"; }; readonly contentGap: { readonly sm: "1rem"; readonly md: "1.5rem"; readonly lg: "2rem"; }; }; }; readonly borderRadius: { readonly none: "0px"; readonly sm: "0.125rem"; readonly base: "0.25rem"; readonly md: "0.375rem"; readonly lg: "0.5rem"; readonly xl: "0.75rem"; readonly xxl: "1rem"; readonly '3xl': "1.5rem"; readonly full: "9999px"; }; readonly boxShadow: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly xxl: "0 25px 50px -12px rgb(0 0 0 / 0.25)"; readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"; }; readonly breakpoints: { readonly xs: "0px"; readonly sm: "576px"; readonly md: "768px"; readonly lg: "992px"; readonly xl: "1200px"; readonly xxl: "1400px"; }; readonly containerMaxWidth: { readonly xs: "100%"; readonly sm: "540px"; readonly md: "720px"; readonly lg: "960px"; readonly xl: "1140px"; readonly xxl: "1320px"; }; readonly grid: { readonly columns: 12; readonly gutter: { readonly xs: "16px"; readonly sm: "16px"; readonly md: "24px"; readonly lg: "24px"; readonly xl: "32px"; readonly xxl: "32px"; }; }; readonly mediaQueries: { readonly xs: "@media (min-width: 0px)"; readonly sm: "@media (min-width: 576px)"; readonly md: "@media (min-width: 768px)"; readonly lg: "@media (min-width: 992px)"; readonly xl: "@media (min-width: 1200px)"; readonly xxl: "@media (min-width: 1400px)"; readonly 'max-xs': `@media (max-width: ${number}px)`; readonly 'max-sm': `@media (max-width: ${number}px)`; readonly 'max-md': `@media (max-width: ${number}px)`; readonly 'max-lg': `@media (max-width: ${number}px)`; readonly 'max-xl': `@media (max-width: ${number}px)`; readonly 'sm-only': `@media (min-width: 576px) and (max-width: ${number}px)`; readonly 'md-only': `@media (min-width: 768px) and (max-width: ${number}px)`; readonly 'lg-only': `@media (min-width: 992px) and (max-width: ${number}px)`; readonly 'xl-only': `@media (min-width: 1200px) and (max-width: ${number}px)`; }; readonly responsiveConfig: { readonly navigation: { readonly mobileBreakpoint: "768px"; readonly collapsedWidth: "80px"; readonly expandedWidth: "256px"; }; readonly table: { readonly scrollBreakpoint: "768px"; readonly stackBreakpoint: "576px"; }; readonly form: { readonly stackBreakpoint: "576px"; readonly inlineBreakpoint: "768px"; }; readonly card: { readonly stackBreakpoint: "576px"; readonly gridBreakpoints: { readonly 1: "0px"; readonly 2: "576px"; readonly 3: "768px"; readonly 4: "992px"; }; }; }; }; export {}; //# sourceMappingURL=theme-provider.d.ts.map