@charset "UTF-8"; /** * JTS UI Design Tokens（设计令牌） * * 统一的设计变量，业务插件禁止硬编码颜色/间距/字号 */ :root { /* === 品牌色 === */ --jts-color-primary: #1f6feb; --jts-color-primary-hover: #1a5fd0; --jts-color-primary-active: #1552b5; --jts-color-primary-soft: color-mix(in srgb, var(--jts-color-primary) 12%, transparent); --jts-color-primary-tint: color-mix(in srgb, var(--jts-color-primary) 8%, var(--jts-color-surface)); /* === 功能色 === */ --jts-color-success: #2da44e; --jts-color-success-hover: #248a3d; --jts-color-warning: #d29922; --jts-color-warning-hover: #b88419; --jts-color-danger: #cf222e; --jts-color-danger-hover: #b01e28; --jts-color-info: #0969da; --jts-color-success-soft: color-mix(in srgb, var(--jts-color-success) 12%, transparent); --jts-color-warning-soft: color-mix(in srgb, var(--jts-color-warning) 12%, transparent); --jts-color-danger-soft: color-mix(in srgb, var(--jts-color-danger) 12%, transparent); --jts-color-info-soft: color-mix(in srgb, var(--jts-color-info) 12%, transparent); /* === 中性色 === */ --jts-color-text: #1f2328; --jts-color-text-secondary: #656d76; --jts-color-text-muted: #8c959f; --jts-color-text-disabled: #afb8c1; --jts-color-bg: #f6f8fa; --jts-color-bg-secondary: #eaeef2; --jts-color-surface: #ffffff; --jts-color-surface-glass: color-mix(in srgb, var(--jts-color-surface) 72%, transparent); --jts-color-border: #d0d7de; --jts-color-border-muted: #eaeef2; --jts-color-inverse: #ffffff; --jts-color-overlay: #0f172a; --jts-focus-ring: 0 0 0 3px color-mix(in srgb, var(--jts-color-primary) 15%, transparent); /* === 间距（8pt 栅格）=== */ --jts-space-0: 0; --jts-space-1: 4px; --jts-space-2: 8px; --jts-space-3: 12px; --jts-space-4: 16px; --jts-space-5: 20px; --jts-space-6: 24px; --jts-space-8: 32px; --jts-space-10: 40px; --jts-space-12: 48px; --jts-space-13: 52px; /* === 圆角 === */ --jts-radius-sm: 4px; --jts-radius-md: 8px; --jts-radius-lg: 12px; --jts-radius-full: 9999px; /* === 字号 === */ --jts-font-size-xs: 12px; --jts-font-size-sm: 13px; --jts-font-size-md: 14px; --jts-font-size-lg: 16px; --jts-font-size-xl: 18px; --jts-font-size-2xl: 20px; /* === 行高 === */ --jts-line-height-tight: 1.25; --jts-line-height-base: 1.5; --jts-line-height-loose: 1.75; /* === 字体 === */ --jts-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; --jts-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; /* === 阴影 === */ --jts-shadow-sm: 0 1px 2px rgba(27, 31, 36, 0.08); --jts-shadow-md: 0 1px 3px rgba(27, 31, 36, 0.12), 0 1px 2px rgba(27, 31, 36, 0.08); --jts-shadow-lg: 0 4px 8px rgba(27, 31, 36, 0.12), 0 2px 4px rgba(27, 31, 36, 0.08); --jts-shadow-xl: 0 8px 16px rgba(27, 31, 36, 0.12), 0 4px 8px rgba(27, 31, 36, 0.08); /* === Z-index === */ --jts-z-dropdown: 1000; --jts-z-modal: 1050; --jts-z-popover: 1060; --jts-z-tooltip: 1070; /* === 过渡 === */ --jts-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --jts-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --jts-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1); } /* === 暗色模式（仅在用户显式开启时生效）=== * * 触发方式：在上添加 .jts-dark-mode 类 * 由 ThemeCustomizer 在 enable_dark_mode 为 true 时注入。 * * 注意：不要使用 @media (prefers-color-scheme: dark) 自动切换， * 因为 WordPress 后台主体未适配深色，会出现"黑卡白底"撕裂效果。 */ body.jts-dark-mode { --jts-color-text: #f0f6fc; --jts-color-text-secondary: #9198a1; --jts-color-text-muted: #6e7681; --jts-color-bg: #0d1117; --jts-color-bg-secondary: #161b22; --jts-color-surface: #161b22; --jts-color-border: #30363d; --jts-color-border-muted: #21262d; --jts-color-inverse: #ffffff; --jts-color-overlay: #000000; }