/* ============================================================ DUGA UI KIT · 1/3 · ТОКЕНЫ (обязательный файл) Подключается первым. Даёт палитру, темы, пружинные тайминги. Тема ставится атрибутом: или "light". Акцент меняется одной переменной --dm-coral. ============================================================ */ /* анимируемые кастом-свойства (Houdini @property) */ @property --dm-aurora { syntax:''; initial-value:0deg; inherits:true; } @property --dm-ring { syntax:''; initial-value:0deg; inherits:false; } :root{ /* --- фирменные цвета (oklch: светлота/насыщенность/тон) --- */ --dm-coral: oklch(72% 0.19 35); --dm-coral-hot: oklch(78% 0.21 40); --dm-ink: oklch(20% 0.02 60); /* текст на коралловом */ --dm-ok: oklch(70% 0.14 165); --dm-warn: oklch(78% 0.13 85); --dm-danger: oklch(62% 0.19 25); /* --- пружинные тайминги (spring-физика без JS) --- */ --dm-spring-pop: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001); --dm-spring-soft: linear(0, 0.037 4.6%, 0.257 14.4%, 0.833 31.7%, 0.994 43.4%, 1.036 53.5%, 1.01 70%, 1); --dm-r-m:18px; --dm-r-l:26px; --dm-font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --dm-font-display:'Unbounded',var(--dm-font); } html[data-theme=dark], [data-theme=dark]{ color-scheme:dark; --dm-bg: oklch(15% 0.012 60); --dm-canvas: oklch(18% 0.014 55); --dm-glass: oklch(22% 0.015 55 / .58); --dm-glass-hard: oklch(24% 0.016 55 / .86); --dm-line: oklch(90% 0.02 80 / .09); --dm-line2: oklch(90% 0.02 80 / .16); --dm-text: oklch(94% 0.015 85); --dm-dim: oklch(94% 0.015 85 / .6); --dm-dim2: oklch(94% 0.015 85 / .38); --dm-bubble-in: oklch(26% 0.014 55 / .9); --dm-shadow: 0 18px 50px oklch(0% 0 0 / .45); } html[data-theme=light], [data-theme=light]{ color-scheme:light; --dm-bg: oklch(96% 0.012 85); --dm-canvas: oklch(93% 0.014 85); --dm-glass: oklch(99% 0.005 85 / .6); --dm-glass-hard: oklch(99% 0.005 85 / .9); --dm-line: oklch(20% 0.02 60 / .1); --dm-line2: oklch(20% 0.02 60 / .18); --dm-text: oklch(23% 0.02 60); --dm-dim: oklch(23% 0.02 60 / .62); --dm-dim2: oklch(23% 0.02 60 / .4); --dm-bubble-in: oklch(100% 0 0 / .92); --dm-shadow: 0 18px 50px oklch(30% 0.03 60 / .14); } /* доступность: почти всё выключается для reduced-motion */ @media (prefers-reduced-motion: reduce){ .dm *,.dm *::before,.dm *::after, [class^="dm-"],[class^="dm-"]::before,[class^="dm-"]::after{ animation-duration:.001s!important;transition-duration:.001s!important} } /* ============================================================ МОСТ К НАШЕЙ ТЕМЕ (добавлено при переносе в боевой клиент). Кит задаёт свою палитру в oklch. Если оставить как есть, компоненты жили бы отдельной жизнью: пользователь меняет акцент и цвет текста в настройках — а кольца, островок и поповер остаются прежними. Поэтому переменные кита берут значения из наших. Фирменный вид при этом сохраняется: наши значения ИЗ ТОГО ЖЕ брендбука. ============================================================ */ :root, html[data-theme=dark], html[data-theme=light] { --dm-coral: var(--accent); --dm-coral-hot: var(--accent-hover); --dm-ink: var(--on-accent); --dm-bg: var(--bg); --dm-canvas: var(--bg-2); --dm-glass: var(--glass); --dm-glass-hard: var(--surface-solid); --dm-line: var(--border); --dm-line2: var(--border); --dm-text: var(--text); --dm-dim: var(--text-dim); --dm-dim2: var(--text-dim); --dm-bubble-in: var(--bubble-in); --dm-shadow: var(--shadow); --dm-font: inherit; /* шрифт приложения, а не свой */ --dm-font-display: inherit; }