Implement comprehensive dark/light mode overhaul for admin panel
- Refactor color palette in `ui-design-spec.md` to utilize CSS variables exclusively, eliminating fixed hex values and Tailwind utility classes. - Complete dark mode implementation in `uiStore.ts`, ensuring proper theme application via `applyTheme()` and `applyBrand()`. - Create `admin-theme-dark-light-audit.md` to document the transition process, outlining issues with inline styles and fixed colors. - Introduce `theme-tokens.test.ts` to enforce rules against fixed hex colors and ensure compliance with the design system. - Update various components and styles to replace inline styles and fixed colors with CSS variables, ensuring consistent theming across light and dark modes. - Ensure all changes maintain visual integrity in both light and dark modes, with a focus on accessibility and contrast standards.
This commit is contained in:
hamed
@@ -6,85 +6,33 @@
|
||||
export interface TurnStatusConfig {
|
||||
label: string;
|
||||
bgColor: string;
|
||||
darkBgColor: string;
|
||||
borderColor: string;
|
||||
darkBorderColor: string;
|
||||
dotColor: string;
|
||||
textColor: string;
|
||||
darkTextColor: string;
|
||||
}
|
||||
|
||||
// وضعیتهای بکاند → رنگ طرح tauri.
|
||||
/** یک وضعیت = یک توکن؛ خود توکن با تم عوض میشود، پس جفت light/dark لازم نیست. */
|
||||
const of = (fg: string, bg: string): Omit<TurnStatusConfig, 'label'> => ({
|
||||
bgColor: `var(--${bg})`, borderColor: `var(--${fg})`,
|
||||
dotColor: `var(--${fg})`, textColor: `var(--${fg})`,
|
||||
});
|
||||
|
||||
// وضعیتهای بکاند → توکنهای تم (هیوی طرح tauri حفظ شده است).
|
||||
const STATUS: Record<string, TurnStatusConfig> = {
|
||||
// pending = «ثبت شده» (tauri: registered)
|
||||
pending: {
|
||||
label: 'ثبت شده',
|
||||
bgColor: '#E3F2FD', darkBgColor: 'rgba(85, 89, 206, 0.18)',
|
||||
borderColor: '#2196F3', darkBorderColor: 'rgba(199, 206, 244, 0.42)',
|
||||
dotColor: '#2196F3', textColor: '#2196F3', darkTextColor: '#C7CEF4',
|
||||
},
|
||||
// confirmed = «قطعی شده» (tauri: finalized)
|
||||
confirmed: {
|
||||
label: 'قطعی شده',
|
||||
bgColor: '#E0F2F1', darkBgColor: 'rgba(25, 191, 211, 0.14)',
|
||||
borderColor: '#009688', darkBorderColor: 'rgba(25, 191, 211, 0.44)',
|
||||
dotColor: '#009688', textColor: '#009688', darkTextColor: '#19BFD3',
|
||||
},
|
||||
// following_up = «در حال پیگیری» (tauri: in_progress)
|
||||
following_up: {
|
||||
label: 'در حال پیگیری',
|
||||
bgColor: '#FFF3E0', darkBgColor: 'rgba(241, 119, 50, 0.16)',
|
||||
borderColor: '#FF9800', darkBorderColor: 'rgba(241, 119, 50, 0.46)',
|
||||
dotColor: '#FF9800', textColor: '#d87f00', darkTextColor: '#F17732',
|
||||
},
|
||||
// salon = «سالن»
|
||||
salon: {
|
||||
label: 'سالن',
|
||||
bgColor: '#F3E5F5', darkBgColor: 'rgba(199, 206, 244, 0.16)',
|
||||
borderColor: '#9C27B0', darkBorderColor: 'rgba(199, 206, 244, 0.42)',
|
||||
dotColor: '#9C27B0', textColor: '#9C27B0', darkTextColor: '#C7CEF4',
|
||||
},
|
||||
// completed = «ویزیت شده» (tauri: success)
|
||||
completed: {
|
||||
label: 'ویزیت شده',
|
||||
bgColor: '#E8F5E9', darkBgColor: 'rgba(34, 197, 94, 0.14)',
|
||||
borderColor: '#4CAF50', darkBorderColor: 'rgba(34, 197, 94, 0.42)',
|
||||
dotColor: '#4CAF50', textColor: '#0d9f43', darkTextColor: '#4ADE80',
|
||||
},
|
||||
// cancel variants = «لغو شده» (tauri: failed)
|
||||
cancelled_by_doctor: {
|
||||
label: 'لغو شده',
|
||||
bgColor: '#fde7e9', darkBgColor: 'rgba(255, 84, 80, 0.16)',
|
||||
borderColor: '#ee5c6d', darkBorderColor: 'rgba(255, 84, 80, 0.44)',
|
||||
dotColor: '#ee5c6d', textColor: '#ee5c6d', darkTextColor: '#FF7A76',
|
||||
},
|
||||
cancelled_by_user: {
|
||||
label: 'لغو توسط بیمار',
|
||||
bgColor: '#fde7e9', darkBgColor: 'rgba(255, 84, 80, 0.16)',
|
||||
borderColor: '#ee5c6d', darkBorderColor: 'rgba(255, 84, 80, 0.44)',
|
||||
dotColor: '#ee5c6d', textColor: '#ee5c6d', darkTextColor: '#FF7A76',
|
||||
},
|
||||
// no_show / expired = خنثی (tauri: pending amber-ish → اینجا خاکستری)
|
||||
no_show: {
|
||||
label: 'غیبت',
|
||||
bgColor: '#f4f4f5', darkBgColor: 'rgba(160, 160, 160, 0.14)',
|
||||
borderColor: '#9E9E9E', darkBorderColor: 'rgba(160, 160, 160, 0.4)',
|
||||
dotColor: '#9E9E9E', textColor: '#757575', darkTextColor: '#A1A1A1',
|
||||
},
|
||||
expired: {
|
||||
label: 'منقضی',
|
||||
bgColor: '#f4f4f5', darkBgColor: 'rgba(160, 160, 160, 0.14)',
|
||||
borderColor: '#9E9E9E', darkBorderColor: 'rgba(160, 160, 160, 0.4)',
|
||||
dotColor: '#9E9E9E', textColor: '#757575', darkTextColor: '#A1A1A1',
|
||||
},
|
||||
pending: { label: 'ثبت شده', ...of('info', 'info-bg') },
|
||||
confirmed: { label: 'قطعی شده', ...of('primary', 'primary-soft') },
|
||||
following_up: { label: 'در حال پیگیری', ...of('accent', 'accent-bg') },
|
||||
salon: { label: 'سالن', ...of('violet', 'violet-bg') },
|
||||
completed: { label: 'ویزیت شده', ...of('success', 'success-bg') },
|
||||
cancelled_by_doctor: { label: 'لغو شده', ...of('danger', 'danger-bg') },
|
||||
cancelled_by_user: { label: 'لغو توسط بیمار', ...of('danger', 'danger-bg') },
|
||||
no_show: { label: 'غیبت', ...of('text-3', 'surface-2') },
|
||||
expired: { label: 'منقضی', ...of('text-3', 'surface-2') },
|
||||
};
|
||||
|
||||
// اسلات خالی (نوبت جدید) — tauri: empty.
|
||||
export const EMPTY_SLOT_CONFIG: TurnStatusConfig = {
|
||||
label: 'نوبت جدید',
|
||||
bgColor: '#E3F2FD', darkBgColor: 'rgba(85, 89, 206, 0.16)',
|
||||
borderColor: '#2196F3', darkBorderColor: 'rgba(199, 206, 244, 0.38)',
|
||||
dotColor: '#2196F3', textColor: '#5559ce', darkTextColor: '#C7CEF4',
|
||||
label: 'نوبت جدید', ...of('primary', 'primary-soft'),
|
||||
};
|
||||
|
||||
export function turnStatusConfig(status: string): TurnStatusConfig {
|
||||
|
||||
Reference in New Issue
Block a user