/* * Vendored from imles-web-ui-v2/design-system/tokens.css (copied 2026-08-12). * Do not edit — re-copy from the source to update. */ /* ============================================================ IMLES / 医合易生 design tokens Extracted 2026-08-02 from imles-web-ui-v2 (src/style.scss, src/lib/Form/assets/style/base.scss, layout + login views). Drop this file into any site and build on var(--imles-*). Dark mode: add class "dark" to . ============================================================ */ :root { /* ---- Brand core ---- */ --imles-primary: #26c1bd; --imles-primary-dark: #21a39f; --imles-primary-light-3: rgba(38, 193, 188, 0.6); --imles-primary-light-5: rgba(38, 193, 188, 0.26); --imles-primary-soft: rgba(38, 193, 189, 0.08); --imles-on-primary: #ffffff; /* large UI text only — see DESIGN.md §2.6 */ --imles-on-primary-safe: #0a2626; /* AA-safe ink on teal */ /* ---- Teal support (2026-08 normalization: legacy variants #00B6AF #00B4B3 #16A5B5 #03AEC2 #2BADBB #00C8C8 #14A5B5 #2CADBC #05BFD3 were removed from the app — --imles-primary is the only interactive teal; see DESIGN.md §2.1) ---- */ --imles-menu-hover-bg: #efffff; --imles-teal-hover: #0cbfd3; /* ---- Cool accent chips (analytics cards) ---- */ --imles-accent-cyan: #00b8d9; --imles-accent-indigo: #5263ff; /* ---- Logo palette (mark only — do not use as UI accent) ---- */ --imles-logo-green: #8dc63f; --imles-logo-navy: #1b3a6b; --mycoach-blue: #1b7fc4; /* ---- Ink / neutrals ---- */ --imles-text-primary: #303133; --imles-text-regular: #606266; --imles-text-secondary: #909399; --imles-text-placeholder: #c0c4cc; --imles-text-heading: rgba(0, 0, 0, 0.9); --imles-ink-alt: #212b36; /* card titles (Minimal-UI-style greys) */ --imles-ink-alt-muted: #637381; /* ---- Borders & fills ---- */ --imles-border: #dcdfe6; --imles-border-light: #e4e7ed; --imles-divider: #e1e1e1; --imles-sidebar-edge: #dbdbdb; --imles-border-ghost: rgba(145, 158, 171, 0.32); --imles-fill: #f5f7fa; --imles-bg-app: #f5f7f9; --imles-surface: #ffffff; /* ---- Semantic ---- */ --imles-success: #67c23a; --imles-warning: #e6a23c; --imles-warning-ink: #d46b08; --imles-danger: #f56c6c; --imles-danger-cta: #ff4663; --imles-info: #909399; --imles-link-blue: #409eff; /* ---- Premium gold (membership only) ---- */ --imles-gold-ink: #96590d; --imles-gradient-gold-deep: linear-gradient(128deg, #bb8c3d 0%, #85531d 100%); --imles-gradient-gold-card: linear-gradient(180deg, #ffeeb9 0%, #fce7b2 100%); --imles-gradient-gold-soft: linear-gradient(166deg, #f6e4cc 0%, #ead6ba 100%); /* ---- Marketing gradients ---- */ --imles-gradient-hero: linear-gradient(45deg, #008dde 14%, #00c9ac 100%); --imles-gradient-cta: linear-gradient(-77deg, #4b85d0 0%, #1cd2d8 70%); --imles-gradient-danger: linear-gradient(180deg, #fc7031 0%, #fe453e 100%); --imles-login-wash: rgba(211, 239, 242, 0.36); /* ---- Typography ---- */ --imles-font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "PingFang SC", "PingFang HK", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Roboto, sans-serif; --imles-font-family-editorial: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", sans-serif; --imles-font-family-friendly: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif; --imles-font-family-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, "Roboto Mono", "Courier New", monospace; --imles-text-xs: 12px; --imles-text-sm: 13px; --imles-text-base: 14px; --imles-text-md: 16px; --imles-text-lg: 18px; --imles-text-xl: 20px; --imles-text-2xl: 24px; --imles-text-hero: 60px; --imles-leading-body: 22px; --imles-leading-title: 28px; /* ---- Spacing (4px grid) ---- */ --imles-space-1: 4px; --imles-space-2: 8px; --imles-space-3: 12px; --imles-space-4: 16px; --imles-space-5: 20px; --imles-space-6: 24px; --imles-space-7: 28px; --imles-space-8: 32px; --imles-space-10: 40px; /* ---- Radius ---- */ --imles-radius-sm: 4px; --imles-radius-md: 6px; /* inputs, poppers */ --imles-radius-lg: 8px; /* standard card */ --imles-radius-xl: 10px; /* panels, icon buttons */ --imles-radius-2xl: 16px; /* marketing cards */ --imles-radius-pill: 999px; /* ---- Elevation ---- */ --imles-shadow-card: 0px 2px 10px 2px rgba(179, 179, 179, 0.08); --imles-shadow-popover: 0 2px 8px rgba(0, 0, 0, 0.1); --imles-shadow-marketing: 0px 5px 14px 0px rgba(4, 0, 0, 0.15); --imles-shadow-footer-bar: 0px -6px 32px 5px rgba(0, 0, 0, 0.04); --imles-shadow-cta-glow: 0px 8px 18px 0px rgba(50, 174, 212, 0.29); /* ---- Layout ---- */ --imles-sidebar-width: 240px; --imles-header-height: 48px; --imles-card-padding: 20px; --imles-page-gap: 20px; } /* ============================================================ Dark mode (BETA in product; scoped to html.dark) ============================================================ */ html.dark, :root[data-theme="dark"] { --imles-surface-0: #151515; --imles-surface-1: #1f1f1f; --imles-surface-2: #2a2a2a; --imles-surface-3: #343434; --imles-bg-app: var(--imles-surface-0); --imles-surface: var(--imles-surface-1); --imles-fill: var(--imles-surface-2); --imles-text-primary: #f5f5f5; --imles-text-regular: #e8e8e8; --imles-text-secondary: #bdbdbd; --imles-text-placeholder: #8d8d8d; --imles-text-heading: #f5f5f5; --imles-ink-alt: #f5f5f5; --imles-ink-alt-muted: #c8c8c8; --imles-border: #3a3a3a; --imles-border-light: #2c2c2c; --imles-divider: #3a3a3a; --imles-sidebar-edge: #3a3a3a; /* Accent brightens; text ON accent flips to near-black teal */ --imles-primary: #3dd8d1; --imles-primary-dark: #2fb3ac; --imles-primary-soft: rgba(61, 216, 209, 0.12); --imles-on-primary: #0a2626; --imles-on-primary-safe: #0a2626; --imles-menu-active: #3dd8d1; --imles-menu-hover-bg: rgba(61, 216, 209, 0.12); /* Softened semantics */ --imles-danger: #e88a8a; --imles-warning: #e8b666; --imles-success: #77d9a8; --imles-shadow-card: 0 2px 12px 0 rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ============================================================ Element Plus bridge — include on sites built with Element Plus ============================================================ */ :root { --el-color-primary: var(--imles-primary); --el-color-primary-dark-2: var(--imles-primary-dark); --el-color-primary-light-3: var(--imles-primary-light-3); --el-color-primary-light-5: var(--imles-primary-light-5); --el-font-family: var(--imles-font-family-base); }