/** * Design tokens — «Новая админка» * Подключить первым: * Тёмная тема: или */ /* ========== SPACING (сетка 4px) ========== */ :root { --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --container-max: 1280px; --container-padding: 24px; --container-padding-sm: 16px; } /* ========== TYPOGRAPHY ========== */ :root { --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace; --text-display: 2rem; /* 32px — H1 */ --text-h2: 1.5rem; /* 24px */ --text-h3: 1.25rem; /* 20px */ --text-body-l: 1.125rem; /* 18px */ --text-body-m: 1rem; /* 16px — default */ --text-body-s: 0.875rem; /* 14px */ --text-caption: 0.8125rem;/* 13px */ --text-label: 0.75rem; /* 12px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.4; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; } /* ========== RADIUS ========== */ :root { --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px; } /* ========== SHADOWS ========== */ :root { --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); } /* ========== LIGHT THEME — Colors ========== */ :root { /* Backgrounds */ --color-bg-base: #f5f5f7; --color-bg-surface: #ffffff; --color-bg-surface-raised: #ffffff; --color-bg-overlay: rgba(0, 0, 0, 0.4); /* Borders */ --color-border-default: #d4d4d8; --color-border-subtle: #e4e4e7; /* Text */ --color-text-primary: #18181b; --color-text-secondary: #52525b; --color-text-tertiary: #71717a; --color-text-inverse: #ffffff; --color-text-link: #2563eb; --color-text-link-hover: #1d4ed8; --color-text-error: #b91c1c; --color-text-success: #15803d; /* Icons */ --color-icon-default: #52525b; --color-icon-disabled: #a1a1aa; /* Accent (primary actions, links, active states) */ --color-accent-primary: #2563eb; --color-accent-primary-hover: #1d4ed8; --color-accent-primary-active: #1e40af; /* Semantic */ --color-semantic-success: #16a34a; --color-semantic-success-bg: #dcfce7; --color-semantic-warning: #ca8a04; --color-semantic-warning-bg: #fef9c3; --color-semantic-error: #dc2626; --color-semantic-error-bg: #fee2e2; --color-semantic-info: #0284c7; --color-semantic-info-bg: #e0f2fe; /* Interactive */ --color-focus-ring: #2563eb; --color-row-hover: rgba(0, 0, 0, 0.02); --color-row-selected: rgba(37, 99, 235, 0.06); /* Skeleton */ --color-skeleton: #e4e4e7; --color-skeleton-shine: rgba(255, 255, 255, 0.5); /* Component sizes (density) */ --input-height-sm: 36px; --input-height-md: 40px; --button-height-sm: 32px; --button-height-md: 40px; --button-height-lg: 48px; --table-row-height: 48px; --table-row-height-compact: 40px; } /* ========== DARK THEME ========== */ html.theme-dark, html[data-theme="dark"] { --color-bg-base: #18181b; --color-bg-surface: #27272a; --color-bg-surface-raised: #3f3f46; --color-bg-overlay: rgba(0, 0, 0, 0.6); --color-border-default: #3f3f46; --color-border-subtle: #27272a; --color-text-primary: #fafafa; --color-text-secondary: #a1a1aa; --color-text-tertiary: #71717a; --color-text-inverse: #18181b; --color-text-link: #60a5fa; --color-text-link-hover: #93c5fd; --color-text-error: #f87171; --color-text-success: #4ade80; --color-icon-default: #a1a1aa; --color-icon-disabled: #52525b; --color-accent-primary: #3b82f6; --color-accent-primary-hover: #60a5fa; --color-accent-primary-active: #93c5fd; --color-semantic-success: #22c55e; --color-semantic-success-bg: #14532d; --color-semantic-warning: #eab308; --color-semantic-warning-bg: #422006; --color-semantic-error: #ef4444; --color-semantic-error-bg: #450a0a; --color-semantic-info: #0ea5e9; --color-semantic-info-bg: #0c4a6e; --color-focus-ring: #60a5fa; --color-row-hover: rgba(255, 255, 255, 0.04); --color-row-selected: rgba(59, 130, 246, 0.12); --color-skeleton: #3f3f46; --color-skeleton-shine: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); } /* ========== UTILITY CLASSES (опционально) ========== */ /* Базовые применения токенов для быстрой верстки без своих классов */ .adm-container { max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } @media (max-width: 767px) { .adm-container { padding-left: var(--container-padding-sm); padding-right: var(--container-padding-sm); } } .adm-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-6); } .adm-focus-ring:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; } /* Типографика */ .adm-text-display { font-size: var(--text-display); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text-primary); } .adm-text-h2 { font-size: var(--text-h2); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text-primary); } .adm-text-h3 { font-size: var(--text-h3); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--color-text-primary); } .adm-text-body { font-size: var(--text-body-m); line-height: var(--leading-normal); color: var(--color-text-primary); } .adm-text-secondary { color: var(--color-text-secondary); } .adm-text-caption { font-size: var(--text-caption); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } .adm-text-label { font-size: var(--text-label); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }