/** * Phoenix design tokens — цвета, типографика, отступы. * Тёмная тема: [data-phx-theme="dark"] на . */ :root { --phx-font-sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --phx-text-xs: 11px; --phx-text-sm: 13px; --phx-text-md: 14px; --phx-text-lg: 18px; --phx-text-xl: 20px; --phx-text-2xl: 24px; --phx-weight-normal: 400; --phx-weight-medium: 500; --phx-weight-bold: 700; --phx-space-1: 4px; --phx-space-2: 8px; --phx-space-3: 12px; --phx-space-4: 16px; --phx-space-5: 20px; --phx-space-6: 24px; --phx-radius-sm: 4px; --phx-radius-md: 8px; --phx-bg-body: #eef1f6; --phx-bg-page: #f4f6f9; --phx-bg-card: #ffffff; --phx-bg-card-head: #f8f9fb; --phx-bg-control: #ffffff; --phx-bg-control-hover: #f4f6f9; --phx-border: #e2e6ee; --phx-border-strong: #cfd5df; --phx-text-primary: #2c3044; --phx-text-secondary: #6b6f82; --phx-text-muted: #8b90a1; --phx-text-inverse: #ffffff; --phx-accent: #3d7ab8; --phx-accent-hover: #356da3; --phx-presence-none: #bdbdbd; --phx-presence-l1: #81c784; --phx-presence-l2: #43a047; --phx-presence-l3: #2e7d32; --phx-presence-l4: #1b5e20; --phx-proto-none: #bdbdbd; --phx-proto-draft: #ffb74d; --phx-proto-sent: #42a5f5; --phx-proto-approved: #66bb6a; --phx-online: #66bb6a; --phx-online-muted: #dcddde; --phx-shadow-card: 0 1px 3px rgba(15, 20, 25, 0.06); } [data-phx-theme="dark"] { --phx-bg-body: #0e1117; --phx-bg-page: #12151c; --phx-bg-card: #1c2130; --phx-bg-card-head: #232838; --phx-bg-control: #252b3a; --phx-bg-control-hover: #2e3548; --phx-border: #2e3548; --phx-border-strong: #3d465c; --phx-text-primary: #e8eaef; --phx-text-secondary: #a8afc0; --phx-text-muted: #7a8194; --phx-accent: #5b9bd4; --phx-accent-hover: #4a8ac4; --phx-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35); } /* Типографика */ .phx-text-xs { font-size: var(--phx-text-xs); } .phx-text-sm { font-size: var(--phx-text-sm); } .phx-text-md { font-size: var(--phx-text-md); } .phx-text-lg { font-size: var(--phx-text-lg); font-weight: var(--phx-weight-bold); } .phx-text-xl { font-size: var(--phx-text-xl); font-weight: var(--phx-weight-bold); } .phx-text-muted { color: var(--phx-text-muted); } .phx-text-secondary { color: var(--phx-text-secondary); } /* Статусы (легенды, бейджи) */ .phx-status { display: inline-flex; align-items: center; gap: 5px; } .phx-status__swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; background: var(--phx-status-color, #bdbdbd); flex-shrink: 0; } .phx-status__icon { font-size: 12px; color: var(--phx-status-color, var(--phx-text-secondary)); width: 14px; text-align: center; } .phx-status--presence-none { --phx-status-color: var(--phx-presence-none); } .phx-status--presence-l1 { --phx-status-color: var(--phx-presence-l1); } .phx-status--presence-l2 { --phx-status-color: var(--phx-presence-l2); } .phx-status--presence-l3 { --phx-status-color: var(--phx-presence-l3); } .phx-status--presence-l4 { --phx-status-color: var(--phx-presence-l4); } .phx-status--proto-none { --phx-status-color: var(--phx-proto-none); } .phx-status--proto-draft { --phx-status-color: var(--phx-proto-draft); } .phx-status--proto-sent { --phx-status-color: var(--phx-proto-sent); } .phx-status--proto-approved { --phx-status-color: var(--phx-proto-approved); } .phx-status--online { --phx-status-color: var(--phx-online); }