/* ============================================================ MySkinly Design System v1 ============================================================ Дизайн-система: токены, компоненты, утилиты. Префикс .ds- чтобы не конфликтовать со старыми классами. После полной миграции старые .card / .btn-primary можно удалить. ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* ---------- Brand palette ---------- */ /* Mint — основной брендовый цвет (только мятный, без зелёного) */ --ds-mint: #69E094; --ds-mint-soft: #B8F0D0; --ds-mint-dark: #4FC077; /* Legacy alias — старый код с .ds-btn--cabbage / var(--ds-cabbage) не ломается, всё мапится на mint family */ --ds-cabbage: #4FC077; --ds-cabbage-dark: #4FC077; --ds-coral: #F47B6A; --ds-coral-soft: #FBC1B6; --ds-coral-dark: #D85F4D; --ds-purple: #B177ED; --ds-purple-soft: #DBC1F5; --ds-orange: #FF7B03; --ds-orange-soft: #FFD4A8; --ds-blue: #7DB8F2; --ds-blue-soft: #C5DDF7; --ds-yellow: #FFD945; --ds-yellow-soft: #FFE89A; /* ---------- Surfaces ---------- cream — фон экрана. surface — белые карточки на нём (контрастно, читаемо). cream-deep — рамки/диагонали. cream-soft оставлен как alias surface для legacy-кода. */ --ds-cream: #FAF5E8; --ds-surface: #FFFFFF; --ds-cream-soft: #FFFFFF; /* alias на surface */ --ds-cream-deep: #ECE3CB; /* ---------- Ink (dark text on cream) ---------- */ --ds-ink: #2A1F18; --ds-ink-soft: #6A5A4A; --ds-ink-faint: #A89A88; --ds-ink-version: #B8AB99; /* ---------- Spacing scale ---------- */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; /* ---------- Radius ---------- */ --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-2xl: 28px; --ds-r-full: 999px; /* ---------- Type scale ---------- */ --ds-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif; --ds-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; --ds-font-mono: "SF Mono", "Menlo", "Consolas", monospace; /* ---------- Shadows ---------- */ --ds-shadow-sm: 0 2px 4px rgba(42, 31, 24, 0.06); --ds-shadow-md: 0 4px 12px rgba(42, 31, 24, 0.08); --ds-shadow-lg: 0 8px 24px rgba(42, 31, 24, 0.12); --ds-shadow-xl: 0 16px 48px rgba(42, 31, 24, 0.16); } /* ============================================================ 1.5 DARK THEME OVERRIDES ============================================================ Активируется через class="ds-dark" на или . Brand-цвета (mint/coral/etc.) НЕ меняются — они работают и на светлом, и на тёмном. Меняются только surfaces (cream → warm-dark) и text (ink → light-cream). Soft-цвета бренда становятся ТЁМНЫМИ tinted-фонами для tinted-карточек. ============================================================ */ .ds-dark, html.ds-dark, body.ds-dark { /* Cream surfaces → warm dark */ --ds-cream: #1F1A14; /* main bg */ --ds-cream-soft: #28221C; /* cards */ --ds-cream-deep: #3A2F25; /* borders, app bg */ /* Ink text → warm light */ --ds-ink: #F0E8D8; /* primary text */ --ds-ink-soft: #B5A88E; /* secondary */ --ds-ink-faint: #6F6354; /* muted */ --ds-ink-version: #5A5044; /* Brand soft colors → насыщенные dark-tinted фоны. Не «грустно-тусклые», а с явным брендовым оттенком. */ --ds-mint-soft: #1F6C42; --ds-coral-soft: #8C3A2A; --ds-purple-soft: #5A3A82; --ds-orange-soft: #8C5018; --ds-blue-soft: #2D5A85; --ds-yellow-soft: #8C6A1A; /* Shadows на тёмном фоне почти не нужны — приглушаем */ --ds-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4); --ds-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); color-scheme: dark; } /* В dark mode tinted-карточки нужны со светлым текстом */ .ds-dark .ds-card--mint, .ds-dark .ds-card--coral, .ds-dark .ds-card--purple, .ds-dark .ds-card--blue, .ds-dark .ds-card--yellow { color: var(--ds-ink); } /* В dark mode soft-pills тоже со светлым текстом + усиленный border */ .ds-dark .ds-pill--soft-mint, .ds-dark .ds-pill--soft-coral, .ds-dark .ds-pill--soft-purple, .ds-dark .ds-pill--soft-orange, .ds-dark .ds-pill--soft-blue, .ds-dark .ds-pill--soft-yellow { color: var(--ds-ink); } /* Inputs в dark mode — тёмный фон, светлый текст */ .ds-dark .ds-input, .ds-dark .ds-textarea { background: var(--ds-cream-soft); border-color: var(--ds-cream-deep); color: var(--ds-ink); } .ds-dark .ds-input:focus, .ds-dark .ds-textarea:focus { border-color: var(--ds-mint); } /* btn-primary в dark mode инвертируется автоматически (background: var(--ds-ink) уже светлый) */ /* btn-secondary тоже автоматически */ /* ============================================================ 2. TYPOGRAPHY ============================================================ */ .ds-display { font-family: var(--ds-font-display); font-size: 80px; font-weight: 900; letter-spacing: -3px; line-height: 0.95; } .ds-display-lg { font-family: var(--ds-font-display); font-size: 56px; font-weight: 900; letter-spacing: -2px; line-height: 1; } .ds-display-md { font-family: var(--ds-font-display); font-size: 36px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; } .ds-h1 { font-family: var(--ds-font-display); font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; } .ds-h2 { font-family: var(--ds-font-display); font-size: 24px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; } .ds-h3 { font-family: var(--ds-font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.2px; line-height: 1.3; } .ds-body-lg { font-family: var(--ds-font-body); font-size: 17px; font-weight: 400; line-height: 1.5; } .ds-body { font-family: var(--ds-font-body); font-size: 15px; font-weight: 400; line-height: 1.5; } .ds-body-sm { font-family: var(--ds-font-body); font-size: 13px; font-weight: 500; line-height: 1.45; } .ds-caption { font-family: var(--ds-font-body); font-size: 11px; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 1px; } .ds-mono { font-family: var(--ds-font-mono); font-size: 13px; } /* ============================================================ 3. BUTTONS ============================================================ */ .ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); padding: 14px 20px; border-radius: var(--ds-r-lg); font-family: var(--ds-font-display); font-size: 16px; font-weight: 700; letter-spacing: -0.2px; border: none; cursor: pointer; transition: transform 0.1s ease, opacity 0.15s ease, box-shadow 0.15s ease; text-decoration: none; } /* Универсальный hover/active — не меняет цвет фона (это сломалось бы между темами), а добавляет тень + лёгкое затемнение */ .ds-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.18); opacity: 0.92; } .ds-btn:active { transform: scale(0.97); box-shadow: none; opacity: 1; } .ds-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; box-shadow: none; } /* Sizes */ .ds-btn--sm { padding: 10px 14px; font-size: 14px; border-radius: var(--ds-r-md); } .ds-btn--md { padding: 14px 20px; font-size: 16px; } .ds-btn--lg { padding: 18px 24px; font-size: 18px; border-radius: var(--ds-r-xl); } .ds-btn--block { width: 100%; } /* Variants — primary (контрастная: на light тёмная, на dark светлая) */ .ds-btn--primary { background: var(--ds-ink); color: var(--ds-cream); } /* Variants — mint (мягкое брендовое действие, всегда тёмный текст) */ .ds-btn--mint { background: var(--ds-mint); color: #2A1F18; /* hardcoded dark — mint яркий в обеих темах */ } /* Legacy alias — был cabbage, теперь mint family с тёмным текстом */ .ds-btn--cabbage { background: var(--ds-cabbage); color: var(--ds-ink); } /* Variants — coral (destructive / flare) */ .ds-btn--coral { background: var(--ds-coral); color: white; } /* Variants — secondary (outlined) */ .ds-btn--secondary { background: var(--ds-cream-soft); color: var(--ds-ink); border: 1px solid var(--ds-cream-deep); } /* Variants — ghost (text only) */ .ds-btn--ghost { background: transparent; color: var(--ds-ink); padding: 10px 12px; } .ds-btn--ghost:hover { background: rgba(125, 125, 125, 0.08); box-shadow: none; } /* Variants — danger */ .ds-btn--danger { background: var(--ds-coral); color: white; } /* ============================================================ 4. PILLS / TAGS ============================================================ */ .ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--ds-r-full); font-size: 13px; font-weight: 700; font-family: var(--ds-font-display); white-space: nowrap; } .ds-pill--sm { padding: 6px 10px; font-size: 11px; } .ds-pill--lg { padding: 10px 18px; font-size: 15px; } /* Pill variants — solid (bright bg → hardcoded dark text для читаемости в обеих темах) */ .ds-pill--mint { background: var(--ds-mint); color: #2A1F18; } .ds-pill--cabbage { background: var(--ds-cabbage); color: var(--ds-ink); } .ds-pill--coral { background: var(--ds-coral); color: white; } .ds-pill--purple { background: var(--ds-purple); color: white; } .ds-pill--orange { background: var(--ds-orange); color: white; } .ds-pill--blue { background: var(--ds-blue); color: #2A1F18; } .ds-pill--yellow { background: var(--ds-yellow); color: #2A1F18; } .ds-pill--ink { background: var(--ds-ink); color: var(--ds-cream); } /* Pill variants — soft (light background, dark text) */ .ds-pill--soft-mint { background: var(--ds-mint-soft); color: var(--ds-ink); } .ds-pill--soft-coral { background: var(--ds-coral-soft); color: var(--ds-ink); } .ds-pill--soft-purple { background: var(--ds-purple-soft); color: var(--ds-ink); } .ds-pill--soft-orange { background: var(--ds-orange-soft); color: var(--ds-ink); } .ds-pill--soft-blue { background: var(--ds-blue-soft); color: var(--ds-ink); } .ds-pill--soft-yellow { background: var(--ds-yellow-soft); color: var(--ds-ink); } /* Outlined pill */ .ds-pill--outlined { background: transparent; border: 1.5px solid var(--ds-cream-deep); color: var(--ds-ink); } /* Playful rotation utility */ .ds-pill[data-rot="-3"] { transform: rotate(-3deg); } .ds-pill[data-rot="-2"] { transform: rotate(-2deg); } .ds-pill[data-rot="-1"] { transform: rotate(-1deg); } .ds-pill[data-rot="1"] { transform: rotate(1deg); } .ds-pill[data-rot="2"] { transform: rotate(2deg); } .ds-pill[data-rot="3"] { transform: rotate(3deg); } /* ============================================================ 5. CARDS — белые на cream-фоне с мягкой тенью (без бежа на беже) ============================================================ */ .ds-card { background: var(--ds-surface); border-radius: var(--ds-r-xl); padding: var(--ds-space-5); border: none; box-shadow: var(--ds-shadow-sm); } .ds-card--elevated { box-shadow: var(--ds-shadow-md); } .ds-card--padded { padding: var(--ds-space-6); } /* Tinted cards (soft brand color background, без обводки — чище) */ .ds-card--mint { background: var(--ds-mint-soft); border: none; } .ds-card--coral { background: var(--ds-coral-soft); border: none; } .ds-card--purple { background: var(--ds-purple-soft); border: none; } .ds-card--blue { background: var(--ds-blue-soft); border: none; } .ds-card--yellow { background: var(--ds-yellow-soft); border: none; } /* Filled cards (solid brand color) — bright bg всегда с тёмным текстом */ .ds-card--filled-mint { background: var(--ds-mint); border: none; color: #2A1F18; } .ds-card--filled-cabbage { background: var(--ds-cabbage); border: none; color: var(--ds-ink); } .ds-card--filled-coral { background: var(--ds-coral); border: none; color: white; } .ds-card--filled-purple { background: var(--ds-purple); border: none; color: white; } .ds-card--filled-orange { background: var(--ds-orange); border: none; color: white; } .ds-card--filled-blue { background: var(--ds-blue); border: none; color: #2A1F18; } .ds-card--filled-yellow { background: var(--ds-yellow); border: none; color: #2A1F18; } /* ============================================================ 6. INPUTS ============================================================ */ .ds-input { width: 100%; padding: 14px 16px; border-radius: var(--ds-r-md); border: 1.5px solid var(--ds-cream-deep); background: white; color: var(--ds-ink); font-family: var(--ds-font-body); font-size: 16px; font-weight: 500; transition: border-color 0.15s ease; } .ds-input:focus { outline: none; border-color: var(--ds-mint); } .ds-input::placeholder { color: var(--ds-ink-faint); } .ds-textarea { width: 100%; min-height: 100px; padding: 14px 16px; border-radius: var(--ds-r-md); border: 1.5px solid var(--ds-cream-deep); background: white; color: var(--ds-ink); font-family: var(--ds-font-body); font-size: 16px; resize: vertical; } /* Label */ .ds-label { display: block; font-size: 12px; font-weight: 700; color: var(--ds-ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; } /* ============================================================ 7. BADGES (pro / new / beta) ============================================================ */ .ds-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--ds-r-sm); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .ds-badge--pro { background: var(--ds-orange); color: white; } .ds-badge--new { background: var(--ds-mint); color: #2A1F18; } .ds-badge--beta { background: var(--ds-purple); color: white; } .ds-badge--limit { background: var(--ds-coral); color: white; } /* Notification dot */ .ds-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-coral); display: inline-block; } /* ============================================================ 8. STACK / GRID ============================================================ */ .ds-stack { display: flex; flex-direction: column; } .ds-stack > * + * { margin-top: var(--ds-space-3); } .ds-stack--lg > * + * { margin-top: var(--ds-space-5); } .ds-stack--xl > * + * { margin-top: var(--ds-space-8); } .ds-row { display: flex; gap: var(--ds-space-3); align-items: center; } .ds-row--wrap { flex-wrap: wrap; } .ds-row--end { justify-content: flex-end; } .ds-row--between { justify-content: space-between; } .ds-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); } .ds-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ds-space-3); } /* ============================================================ 9. STACKED CARDS (bold playful pattern) ============================================================ */ .ds-stack-cards { position: relative; height: 200px; } .ds-stack-cards .ds-card { position: absolute; width: 200px; } .ds-stack-cards .ds-card:nth-child(1) { transform: rotate(-3deg); top: 0; left: 0; } .ds-stack-cards .ds-card:nth-child(2) { transform: rotate(2deg); top: 20px; left: 50px; } .ds-stack-cards .ds-card:nth-child(3) { transform: rotate(-2deg); top: 40px; left: 100px; } /* ============================================================ 10. UTILITIES ============================================================ */ .ds-text-mint { color: var(--ds-mint); } .ds-text-coral { color: var(--ds-coral); } .ds-text-purple { color: var(--ds-purple); } .ds-text-orange { color: var(--ds-orange); } .ds-text-blue { color: var(--ds-blue); } .ds-text-ink { color: var(--ds-ink); } .ds-text-soft { color: var(--ds-ink-soft); } .ds-text-faint { color: var(--ds-ink-faint); } .ds-text-center { text-align: center; } .ds-bg-cream { background: var(--ds-cream); } .ds-bg-cream-soft { background: var(--ds-cream-soft); } .ds-bg-cream-deep { background: var(--ds-cream-deep); } .ds-bg-ink { background: var(--ds-ink); color: var(--ds-cream); }