/* =========================================================================== * 设计令牌（Design Tokens）— Telegram Mini App 主题自适应 * --------------------------------------------------------------------------- * 唯一的颜色/间距/字号来源。其余样式表一律引用这里的 --kk-* 变量， * 禁止再出现散落的硬编码色值（旧 app.css 曾有 3641 行硬编码亮色）。 * * 主题来源优先级： * 1. Telegram 注入的 --tg-theme-*（用户在 Telegram 里换主题会实时变） * 2. 缺失时回退到本文件的默认值 * * 亮/暗切换由 theme.js 写 驱动； * 无 JS 时由文末的 prefers-color-scheme 兜底。 * 注意选择器用 :root（即 ）而非 body —— 防闪烁脚本在 中执行时 * document.body 尚不存在。 * =========================================================================== */ :root { /* 告诉浏览器按浅色渲染原生控件（复选框、单选、滚动条、日期选择器）。 * 不设的话，暗色主题下这些控件仍按浅色画，白底方块在深色界面上非常刺眼。 */ color-scheme: light; /* ---- 表面 ---------------------------------------------------------- */ /* 页面底色与卡片面，跟随 Telegram；分层用半透明叠加，任何底色上都成立 */ --kk-bg: var(--tg-theme-bg-color, #ffffff); --kk-surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff)); --kk-surface-2: var(--tg-theme-secondary-bg-color, #f2f3f5); --kk-surface-3: rgba(0, 0, 0, 0.05); --kk-overlay: rgba(0, 0, 0, 0.06); /* hover / pressed 叠加 */ /* 骨架屏用半透明而非实色：卡片底色有 surface 和 surface-2 两种， * 用实色会在其中一种上和背景融成一片，占位就白做了 */ --kk-skeleton: rgba(0, 0, 0, 0.07); --kk-skeleton-shine: rgba(0, 0, 0, 0.13); --kk-scrim: rgba(0, 0, 0, 0.45); /* 模态遮罩，40-60% 保证前景可读 */ /* ---- 文字 ---------------------------------------------------------- */ --kk-text: var(--tg-theme-text-color, #16181c); --kk-text-muted: #4e5965; --kk-text-subtle: #5f6b77; --kk-link: var(--tg-theme-link-color, #1a73c7); /* ---- 结构 ---------------------------------------------------------- */ --kk-border: rgba(0, 0, 0, 0.10); --kk-border-strong: rgba(0, 0, 0, 0.18); --kk-control-bg: rgba(255, 255, 255, 0.88); --kk-control-border: rgba(15, 23, 42, 0.14); --kk-control-hover: rgba(36, 129, 204, 0.07); --kk-control-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); --kk-picker-indicator-filter: none; /* ---- 交互主色 ------------------------------------------------------ */ /* 默认蓝色比旧 #2481cc 稍深，白色按钮文案达到 WCAG AA；Telegram * 注入主题时仍优先使用宿主提供的 button_color / button_text_color。 */ --kk-primary: var(--tg-theme-button-color, #2478be); --kk-on-primary: var(--tg-theme-button-text-color, #ffffff); --kk-on-danger: #ffffff; --kk-control-thumb: #ffffff; --kk-primary-soft: rgba(36, 129, 204, 0.12); /* @supports 下改为跟随主题 */ --kk-focus-ring: rgba(36, 129, 204, 0.45); --kk-button-shadow: 0 5px 14px rgba(36, 120, 190, 0.22); --kk-danger-shadow: 0 5px 14px rgba(207, 34, 46, 0.18); /* ---- 状态色 -------------------------------------------------------- * Telegram 只提供 destructive_text_color，其余状态色需自备。 * 取值来自 GitHub Primer（对比度经过验证）： * -fg 用于文字（≥4.5:1），裸色用于图标/边框，-bg 用于浅底块。 */ --kk-success: #1f883d; --kk-success-fg: #116329; --kk-success-bg: #dafbe1; --kk-danger: var(--tg-theme-destructive-text-color, #cf222e); --kk-danger-fg: #a40e26; --kk-danger-bg: #ffebe9; --kk-warning: #9a6700; --kk-warning-fg: #7d4e00; --kk-warning-bg: #fff8c5; --kk-info: #0969da; --kk-info-fg: #0550ae; --kk-info-bg: #ddf4ff; /* ---- 间距（4/8 栅格）----------------------------------------------- */ --kk-space-1: 4px; --kk-space-2: 8px; --kk-space-3: 12px; --kk-space-4: 16px; --kk-space-5: 20px; --kk-space-6: 24px; --kk-space-8: 32px; --kk-space-10: 40px; --kk-space-12: 48px; /* ---- 控件尺寸 ------------------------------------------------------ * 44px 是手机触控下限；普通输入框略高，窄屏再统一收紧到 48px。 */ --kk-touch-target: 44px; --kk-control-height: 52px; /* ---- 字号 ---------------------------------------------------------- * 表单控件必须 ≥16px，否则 iOS Safari 聚焦时会自动放大页面。 */ --kk-text-xs: 12px; --kk-text-sm: 14px; --kk-text-base: 16px; --kk-text-md: 17px; --kk-text-lg: 19px; --kk-text-xl: 23px; --kk-text-2xl: 29px; --kk-text-3xl: 36px; --kk-leading-tight: 1.25; --kk-leading-base: 1.5; /* ---- 圆角 ---------------------------------------------------------- */ --kk-radius-sm: 8px; --kk-radius-md: 12px; --kk-radius-lg: 18px; --kk-radius-xl: 24px; --kk-radius-full: 999px; /* ---- 阴影（暗色下几乎不可见，届时由 border 承担分层）--------------- */ --kk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07); --kk-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.10); --kk-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16); /* ---- 层级（沿用旧 app.css 的层级规划）------------------------------ */ --kk-z-base: 1; --kk-z-sticky: 1000; --kk-z-modal: 2000; --kk-z-toast: 3000; --kk-z-loader: 9000; /* ---- 动效 ---------------------------------------------------------- */ --kk-dur-fast: 120ms; --kk-dur-base: 200ms; --kk-dur-slow: 320ms; --kk-ease: cubic-bezier(0.4, 0, 0.2, 1); /* ---- 安全区（刘海 / 底部手势条）------------------------------------ */ --kk-safe-top: env(safe-area-inset-top, 0px); --kk-safe-bottom: env(safe-area-inset-bottom, 0px); --kk-safe-left: env(safe-area-inset-left, 0px); --kk-safe-right: env(safe-area-inset-right, 0px); /* 头部实测高度，由 app.js 的 ResizeObserver 写入。 * 导航要吸附在头部正下方，而头部高度会随安全区、群组切换器换行而变， * 写死数值必然在某些机型上留缝或重叠。 */ --kk-header-h: 56px; /* ---- 视口高度 ------------------------------------------------------ * Mini App 里 100vh 不等于可见高度（Telegram 头部会占位）。 * telegram.js 会用 tg.viewportHeight 覆盖这两个值。 */ --kk-vh: 100vh; --kk-vh-stable: 100vh; } /* =========================================================================== * 暗色主题 * 不是把亮色的灰度直接反过来用 —— 暗底上的次要文字需要单独提亮才够 3:1。 * =========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --kk-bg: var(--tg-theme-bg-color, #17212b); --kk-surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1d2733)); --kk-surface-2: var(--tg-theme-secondary-bg-color, #0e1621); --kk-surface-3: rgba(255, 255, 255, 0.06); --kk-overlay: rgba(255, 255, 255, 0.08); --kk-scrim: rgba(0, 0, 0, 0.6); --kk-skeleton: rgba(255, 255, 255, 0.08); --kk-skeleton-shine: rgba(255, 255, 255, 0.15); --kk-text: var(--tg-theme-text-color, #f0f3f6); --kk-text-muted: #b6c2cc; --kk-text-subtle: #a8b3bd; --kk-link: var(--tg-theme-link-color, #62bcf9); --kk-border: rgba(255, 255, 255, 0.13); --kk-border-strong: rgba(255, 255, 255, 0.24); --kk-control-bg: rgba(255, 255, 255, 0.075); --kk-control-border: rgba(255, 255, 255, 0.22); --kk-control-hover: rgba(51, 144, 236, 0.12); --kk-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); /* 日期/时间输入强制用可读的浅色原生面板，字段内的深色系统图标再反转。 */ --kk-picker-indicator-filter: invert(1) brightness(1.25); --kk-primary: var(--tg-theme-button-color, #3390ec); --kk-on-primary: var(--tg-theme-button-text-color, #101820); --kk-primary-soft: rgba(51, 144, 236, 0.18); --kk-focus-ring: rgba(88, 166, 255, 0.55); --kk-button-shadow: 0 5px 16px rgba(51, 144, 236, 0.25); --kk-danger-shadow: 0 5px 16px rgba(248, 81, 73, 0.20); --kk-success: #3fb950; --kk-success-fg: #56d364; --kk-success-bg: rgba(63, 185, 80, 0.15); --kk-danger: var(--tg-theme-destructive-text-color, #f85149); --kk-danger-fg: #ff7b72; --kk-danger-bg: rgba(248, 81, 73, 0.15); --kk-warning: #d29922; --kk-warning-fg: #e3b341; --kk-warning-bg: rgba(210, 153, 34, 0.15); --kk-info: #58a6ff; --kk-info-fg: #79c0ff; --kk-info-bg: rgba(88, 166, 255, 0.15); /* 暗色下阴影被背景吞掉，加深以保留层次 */ --kk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --kk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --kk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } /* --------------------------------------------------------------------------- * primary-soft 跟随主题 * 上面的静态回退在用户自定义 Telegram 主题时会与主色脱节；支持 color-mix * 的内核改为按当前 --kk-primary 实时调配。 * ------------------------------------------------------------------------- */ @supports (color: color-mix(in srgb, red 50%, transparent)) { :root { --kk-primary-soft: color-mix(in srgb, var(--kk-primary) 13%, transparent); --kk-focus-ring: color-mix(in srgb, var(--kk-primary) 45%, transparent); --kk-control-bg: color-mix(in srgb, var(--kk-surface) 94%, var(--kk-primary) 6%); --kk-control-hover: color-mix(in srgb, var(--kk-primary) 8%, transparent); --kk-button-shadow: 0 5px 14px color-mix(in srgb, var(--kk-primary) 22%, transparent); --kk-danger-shadow: 0 5px 14px color-mix(in srgb, var(--kk-danger) 18%, transparent); --kk-text-muted: color-mix(in srgb, var(--kk-text) 72%, var(--kk-bg)); --kk-text-subtle: color-mix(in srgb, var(--kk-text) 64%, var(--kk-bg)); } :root[data-theme="dark"] { --kk-primary-soft: color-mix(in srgb, var(--kk-primary) 20%, transparent); --kk-focus-ring: color-mix(in srgb, var(--kk-primary) 55%, transparent); --kk-control-bg: color-mix(in srgb, var(--kk-surface) 90%, var(--kk-primary) 10%); --kk-control-hover: color-mix(in srgb, var(--kk-primary) 14%, transparent); } } /* --------------------------------------------------------------------------- * 无 JS 兜底：theme.js 未执行（data-theme 未写入）时跟随系统偏好。 * :not([data-theme]) 保证 JS 一旦接管就不会与之打架。 * ------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --kk-bg: var(--tg-theme-bg-color, #17212b); --kk-surface: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1d2733)); --kk-surface-2: var(--tg-theme-secondary-bg-color, #0e1621); --kk-surface-3: rgba(255, 255, 255, 0.06); --kk-overlay: rgba(255, 255, 255, 0.08); --kk-scrim: rgba(0, 0, 0, 0.6); --kk-skeleton: rgba(255, 255, 255, 0.08); --kk-skeleton-shine: rgba(255, 255, 255, 0.15); --kk-text: var(--tg-theme-text-color, #f0f3f6); --kk-text-muted: #b6c2cc; --kk-text-subtle: #a8b3bd; --kk-link: var(--tg-theme-link-color, #62bcf9); --kk-border: rgba(255, 255, 255, 0.13); --kk-border-strong: rgba(255, 255, 255, 0.24); --kk-control-bg: rgba(255, 255, 255, 0.075); --kk-control-border: rgba(255, 255, 255, 0.22); --kk-control-hover: rgba(51, 144, 236, 0.12); --kk-control-shadow: 0 1px 2px rgba(0, 0, 0, 0.30); --kk-picker-indicator-filter: invert(1) brightness(1.25); --kk-primary: var(--tg-theme-button-color, #3390ec); --kk-on-primary: var(--tg-theme-button-text-color, #101820); --kk-primary-soft: rgba(51, 144, 236, 0.18); --kk-focus-ring: rgba(88, 166, 255, 0.55); --kk-button-shadow: 0 5px 16px rgba(51, 144, 236, 0.25); --kk-danger-shadow: 0 5px 16px rgba(248, 81, 73, 0.20); --kk-success: #3fb950; --kk-success-fg: #56d364; --kk-success-bg: rgba(63, 185, 80, 0.15); --kk-danger: var(--tg-theme-destructive-text-color, #f85149); --kk-danger-fg: #ff7b72; --kk-danger-bg: rgba(248, 81, 73, 0.15); --kk-warning: #d29922; --kk-warning-fg: #e3b341; --kk-warning-bg: rgba(210, 153, 34, 0.15); --kk-info: #58a6ff; --kk-info-fg: #79c0ff; --kk-info-bg: rgba(88, 166, 255, 0.15); --kk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --kk-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5); --kk-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); } } /* 手机上适度放大说明文字，同时把普通控件统一到 48px；避免一部分控件 * 显得笨重、另一部分又只有桌面级小字。 */ @media (max-width: 767px) { :root { --kk-text-xs: 13px; --kk-text-sm: 15px; --kk-control-height: 48px; } } /* --------------------------------------------------------------------------- * 降低动效偏好：把时长 token 归零，所有引用它的过渡/动画自动失效， * 无需在每个组件里重复写 @media 规则。 * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --kk-dur-fast: 0ms; --kk-dur-base: 0ms; --kk-dur-slow: 0ms; } }