{c.name}

{c.var}

{c.use}

{c.hex.toUpperCase()}

); } function ColorGroup({ title, note, colors }) { return (

{title} · {colors.length}

{note &&

{note}

}

{colors.map((c, i) => (

))}

); } export function DevColorsScreen({ nav, ctx }) { const p = ctx.palette; const groups = [ { title: 'Primary · динамически', note: 'Основная brand-гамма. Меняется при переключении палитры в Tweaks.', colors: [ { name: 'primary', var: '--c-primary', hex: p.primary, use: 'CTA, активные иконки, прогресс' }, { name: 'primary-darker', var: '--c-primary-darker', hex: p.darker, use: 'Активное состояние, таббар, hover' }, { name: 'primary-dark', var: '--c-primary-dark', hex: p.dark, use: 'Глубокие фоны: QR, градиент восстановления' }, { name: 'primary-50', var: '--c-primary-50', hex: p.p50, use: 'Очень лёгкие подложки, фон AI-чата' }, { name: 'primary-100', var: '--c-primary-100', hex: p.p100, use: 'Фоны иконок в плитках, чипы, hero статей' }, { name: 'primary-200', var: '--c-primary-200', hex: p.p200, use: 'Бордеры, hover-стейты, рамки карточек' }, { name: 'primary-300', var: '--c-primary-300', hex: p.p300, use: 'Промежуточный primary, декоративные бордеры' }, ], }, { title: 'Accent · динамически', colors: [ { name: 'accent', var: '--c-accent', hex: p.accent, use: 'Красная CTA на таймлайне, бейджи непрочитанных, булавка' }, { name: 'accent-dark', var: '--c-accent-dark', hex: p.accentDark, use: 'Hover accent-кнопок' }, { name: 'accent-50', var: '--c-accent-50', hex: p.accent50, use: 'Фон hero «Беременность», плашки danger' }, ], }, { title: 'Warm · динамически', colors: [ { name: 'warm-50', var: '--c-warm-50', hex: p.warm50, use: 'Плашки-предупреждения, subtle warm bg' }, { name: 'warm-100', var: '--c-warm-100', hex: p.warm100, use: 'hero статей «Дети», чип «К.м.н.», профиль' }, { name: 'warm-200', var: '--c-warm-200', hex: '#E8DCC5', use: 'Акценты beige, не меняется по палитре' }, { name: 'warm-text', var: '--c-warm-text', hex: '#7A6A2E', use: 'Текст внутри warm-чипов, не меняется' }, ], }, { title: 'Статус', colors: [ { name: 'success', var: '--c-success', hex: '#2E9B6B', use: 'Онлайн-индикаторы, success-иконки' }, { name: 'success-50', var: '--c-success-50', hex: p.success50, use: 'Фон «Готово» чипов, финал теста слуха · динамически' }, { name: 'warning', var: '--c-warning', hex: '#E8A13C', use: 'Иконки лекарств, «В работе» статус' }, { name: 'warning-50', var: '--c-warning-50', hex: '#FBEFD8', use: 'Фон уведомлений-напоминаний' }, { name: 'danger', var: '--c-danger', hex: '#D94141', use: 'Критические ошибки, аллергии (красные чипы)' }, ], }, { title: 'Текст', colors: [ { name: 'fg-1', var: '--c-fg-1', hex: '#17242E', use: 'Основной текст, заголовки' }, { name: 'fg-2', var: '--c-fg-2', hex: '#3E4C5D', use: 'Основной текст в body статей' }, { name: 'fg-3', var: '--c-fg-3', hex: '#6B7A89', use: 'Приглушённый текст, sub-заголовки, подписи' }, { name: 'fg-4', var: '--c-fg-4', hex: p.fg4, use: 'Плейсхолдеры, disabled, разделители · динамически' }, ], }, { title: 'Поверхности / бордеры', colors: [ { name: 'bg', var: '--c-bg', hex: '#F7F9FB', use: 'Фон приложения (внутри рамки)' }, { name: 'bg-card', var: '--c-bg-card', hex: '#FFFFFF', use: 'Фон карточек, модалок, инпутов' }, { name: 'border', var: '--c-border', hex: '#EAF0F3', use: 'Бордер карточек, инпутов, кнопок-ghost' }, { name: 'border-strong', var: '--c-border-strong', hex: '#D8E1E6', use: 'Усиленный бордер, disabled-точки плана' }, { name: 'divider', var: '--c-divider', hex: '#F0F4F6', use: 'Разделители строк внутри карточек' }, ], }, ]; return (

nav.pop()} /> {/* Header banner with current palette key colors */}

Ключевые цвета

{[p.primary, p.darker, p.dark, p.p100, p.warm100, p.accent, p.success50, p.p300].map((c, i) => (

))}

{groups.map(g => )}

Экран служебный. Переключите палитру в Tweaks — динамические значения (primary / accent / warm / success-50 / fg-4 / p300) пересчитываются автоматически.

); } // ───────────────────────────────────────────────────────────── // DEV · Usage examples // Real rendered components with labels pointing to CSS vars used. // ───────────────────────────────────────────────────────────── function ExampleBlock({ title, hint, children }) { return (

{title}

{children}

{hint &&

{hint}

}

); } function VarTag({ children }) { return ( {children} ); } function ExampleRow({ children, label }) { return (

{children}

{label}

); } export function DevExamplesScreen({ nav }) { return (

nav.pop()} />

{/* BUTTONS */} --c-primary фон · #fff текст}> --c-accent фон · для красной CTA}> --c-primary-100 фон · --c-primary-darker текст}>

#fff фон · --c-border рамка · --c-fg-2 текст

{/* CHIPS */} --c-primary-100 / --c-primary-darker}> Обычный --c-warm-100 / --c-warm-text}> К.м.н. --c-success-50 / --c-success}> Готово --c-accent-50 / --c-accent}> Пенициллин

+ добавить

--c-bg / --c-fg-3 / --c-border

{/* CARDS / SURFACES */} #fff фон · --sh-sm тень}>

Карточка по умолчанию

белый фон, лёгкая тень

gradient (--c-primary-100 → --c-warm-100)}>

Карточка профиля / статистики

solid --c-primary-darker · белый текст}>

CTA-карточка

hero записи на главной

{/* STATUS */} success — --c-success-50 фон}>

Успешно

warning — --c-warning-50 фон}>

Напоминание

Критично

danger — --c-accent-50 фон · --c-danger текст

{/* TYPOGRAPHY */} --c-fg-1 · основной заголовок}>

Заголовок экрана

--c-fg-2 · body-текст}>

Основной параграф, тело статей и объяснений в карточках.

--c-fg-3 · muted / подписи}>

Подпись, время, sub-текст

Плейсхолдер, disabled-состояние

--c-fg-4 · disabled, placeholder

{/* AVATARS & BADGES */} --c-primary-100 / --c-primary-darker — градиент}>

online · --c-success · белая рамка}>

2 AI

unread — --c-accent · AI-бейдж — --c-primary-100 / --c-primary-darker

{/* INPUT */} #fff фон · --c-border рамка · placeholder --c-fg-4}>

Найти врача...

segmented · #EEF2F5 фон · активный #fff / --c-primary-darker

{/* Shadow / radius quick reference */} --sh-sm · --r-lg = 16px}>

card (sh-sm)

--sh-md · --r-xl = 20px}>

modal (sh-md)

sheet (sh-lg)

--sh-lg · --r-2xl = 24px

); }