@import url("./sx-charts.css"); /* * Text Selection * * NextUI components behave like desktop controls by default: labels, button * text, menus, navigation, container bodies, and other chrome do not * participate in accidental page text selection. Auto mode re-enables * selection only for actual editable controls and explicitly document-like * surfaces such as typography, Markdown, and code blocks. */ :where([class^="sx-"], [class*=" sx-"]) { -webkit-user-select: none; user-select: none; } .sx-text-selection--auto { -webkit-user-select: none; user-select: none; } .sx-text-selection--auto :is(input, textarea, select, [contenteditable="true" i], [contenteditable="plaintext-only" i]), .sx-text-selection--auto:is(.sx-typography), .sx-text-selection--auto:is(.sx-typography) *, .sx-text-selection--auto:is(.sx-markdown-viewer), .sx-text-selection--auto:is(.sx-markdown-viewer) *, .sx-text-selection--auto .sx-code-pre, .sx-text-selection--auto .sx-code-pre *, .sx-code-pre.sx-text-selection--auto, .sx-code-pre.sx-text-selection--auto * { -webkit-user-select: text; user-select: text; } .sx-text-selection--selectable, .sx-text-selection--selectable * { -webkit-user-select: text !important; user-select: text !important; } .sx-text-selection--none, .sx-text-selection--none * { -webkit-user-select: none !important; user-select: none !important; } /* * NextUI Design Style Overrides * * Each style overrides CSS tokens via [data-sx-style="X"] on . * Combined with [data-theme="dark"] for dark-mode variants. * System style is resolved at runtime to Cupertino or Fluent. */ /* * Safe Surface * * A safe surface exposes a rectangular "content safe region" derived from the * rounded corners of the container. Components opt in once and then inherit the * global style factor automatically. */ :root { --sx-safe-surface-inset-factor: var(--sx-safe-surface-inset-factor-default); } [data-sx-style="cupertino"] { --sx-safe-surface-inset-factor: var(--sx-safe-surface-inset-factor-cupertino); } [data-sx-style="fluent"], [data-sx-style="classic"], [data-sx-style="futuristic"] { --sx-safe-surface-inset-factor: var(--sx-safe-surface-inset-factor-default); } .sx-safe-surface { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); --sx-safe-surface-rounded-radius: var(--sx-safe-surface-radius-none); --sx-safe-surface-inset-factor-effective: var(--sx-safe-surface-inset-factor); --sx-safe-surface-corner-inset-tl: calc(var(--sx-safe-surface-radius-tl) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-tr: calc(var(--sx-safe-surface-radius-tr) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-br: calc(var(--sx-safe-surface-radius-br) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-corner-inset-bl: calc(var(--sx-safe-surface-radius-bl) * var(--sx-safe-surface-inset-factor-effective)); --sx-safe-surface-edge-inset-top: max(var(--sx-safe-surface-corner-inset-tl), var(--sx-safe-surface-corner-inset-tr)); --sx-safe-surface-edge-inset-right: max(var(--sx-safe-surface-corner-inset-tr), var(--sx-safe-surface-corner-inset-br)); --sx-safe-surface-edge-inset-bottom: max(var(--sx-safe-surface-corner-inset-bl), var(--sx-safe-surface-corner-inset-br)); --sx-safe-surface-edge-inset-left: max(var(--sx-safe-surface-corner-inset-tl), var(--sx-safe-surface-corner-inset-bl)); } .sx-safe-surface--enabled { --sx-safe-surface-inset-factor-effective: var(--sx-safe-surface-inset-factor-enabled); } .sx-safe-surface--disabled { --sx-safe-surface-inset-factor-effective: var(--sx-safe-surface-inset-factor-disabled); } .sx-safe-surface--all-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--top-left-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); } .sx-safe-surface--top-right-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); } .sx-safe-surface--bottom-right-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); } .sx-safe-surface--bottom-left-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--left-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface--right-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); } .sx-safe-surface--top-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-tr: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-br: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-bl: var(--sx-safe-surface-radius-none); } .sx-safe-surface--bottom-rounded { --sx-safe-surface-radius-tl: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-tr: var(--sx-safe-surface-radius-none); --sx-safe-surface-radius-br: var(--sx-safe-surface-rounded-radius); --sx-safe-surface-radius-bl: var(--sx-safe-surface-rounded-radius); } .sx-safe-surface__content { --sx-safe-surface-content-pad-top: var(--sx-safe-surface-content-pad-none); --sx-safe-surface-content-pad-right: var(--sx-safe-surface-content-pad-none); --sx-safe-surface-content-pad-bottom: var(--sx-safe-surface-content-pad-none); --sx-safe-surface-content-pad-left: var(--sx-safe-surface-content-pad-none); padding-top: max(var(--sx-safe-surface-content-pad-top), var(--sx-safe-surface-edge-inset-top, var(--sx-safe-surface-content-pad-none))); padding-right: max(var(--sx-safe-surface-content-pad-right), var(--sx-safe-surface-edge-inset-right, var(--sx-safe-surface-content-pad-none))); padding-bottom: max(var(--sx-safe-surface-content-pad-bottom), var(--sx-safe-surface-edge-inset-bottom, var(--sx-safe-surface-content-pad-none))); padding-left: max(var(--sx-safe-surface-content-pad-left), var(--sx-safe-surface-edge-inset-left, var(--sx-safe-surface-content-pad-none))); } .sx-safe-surface__content--omit-top { padding-top: var(--sx-safe-surface-content-pad-top); } .sx-safe-surface__content--omit-right { padding-right: var(--sx-safe-surface-content-pad-right); } .sx-safe-surface__content--omit-bottom { padding-bottom: var(--sx-safe-surface-content-pad-bottom); } .sx-safe-surface__content--omit-left { padding-left: var(--sx-safe-surface-content-pad-left); } /* ============================================================ Cupertino — macOS Sequoia Large radii, layered shadows, SF Pro font ============================================================ */ [data-sx-style="cupertino"] { --sx-radius-sm: 0.375rem; --sx-radius-md: 0.625rem; --sx-radius-lg: 0.875rem; --sx-radius-xl: 1.25rem; --sx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --sx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04); --sx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05); --sx-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --sx-shadow-overlay: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); --sx-border-width-thin: 0.5px; --sx-font-weight-semibold: 500; --sx-font-weight-bold: 600; --sx-font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif; /* Opaque tint instead of a 84%-transparent neutral: over a white page the old value landed near #f7f7f7 and the secondary button dissolved into the sheet behind it. No border by design — an unbordered secondary is Apple's language, not a gap. */ --sx-button-secondary-background: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 8%, var(--sx-color-neutral-background-1)); --sx-button-secondary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 7%, var(--sx-color-neutral-background-3)); /* The stroke is already only --sx-border-width-thin (0.5px here); discounting it to 72% on top of that left the tertiary outline barely visible. */ --sx-button-tertiary-border-color: var(--sx-color-neutral-stroke-1); --sx-button-tertiary-border-color-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 24%, var(--sx-color-neutral-stroke-1)); --sx-button-quaternary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 5%, transparent); /* Cupertino defines a layered elevation scale; this is where buttons finally use it. */ --sx-button-primary-shadow: var(--sx-shadow-sm); font-family: var(--sx-font-family-base); } [data-sx-style="cupertino"][data-theme="dark"] { --sx-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12); --sx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15); --sx-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.18); --sx-shadow-xl: 0 16px 52px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.2); --sx-shadow-overlay: 0 12px 44px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.22); } /* ============================================================ Fluent — Windows 11 Small radii, minimal shadows, Segoe UI font ============================================================ */ [data-sx-style="fluent"] { --sx-radius-sm: 0.125rem; --sx-radius-md: 0.25rem; --sx-radius-lg: 0.5rem; --sx-radius-xl: 0.75rem; --sx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --sx-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08); --sx-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1); --sx-shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12); --sx-shadow-overlay: 0 8px 16px rgba(0, 0, 0, 0.14); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 600; --sx-font-weight-bold: 700; --sx-font-family-base: "Segoe UI Variable Text", "Segoe UI", -apple-system, sans-serif; --sx-button-secondary-border-color: var(--sx-color-neutral-stroke-1); --sx-button-secondary-border-color-hover: var(--sx-color-neutral-stroke-1-hover); --sx-button-secondary-border-color-pressed: var(--sx-color-neutral-foreground-3); --sx-button-tertiary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent); --sx-button-tertiary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 8%, transparent); font-family: var(--sx-font-family-base); } [data-sx-style="fluent"][data-theme="dark"] { --sx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2); --sx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.24); --sx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.28); --sx-shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.32); --sx-shadow-overlay: 0 8px 20px rgba(0, 0, 0, 0.36); } /* ============================================================ Classic — Traditional No radii, hard borders, system font ============================================================ */ [data-sx-style="classic"] { /* 这个风格的标题一直写着 Win9x，但实际渲染只是「圆角小一点的扁平按钮」，和 Fluent 几乎分不开。方角是它的第一特征：0.125rem 的圆角在 1x 屏上就是一个被磨掉的像素， 既不圆也不方。 */ /* 0rem 而不是 0：这些值会流进 calc(radius * inset-factor)，再进 safe-surface 的 max(content-pad, edge-inset)。CSS 的 max() 不允许长度与无单位数字混用，一旦其中一项 是无单位的 0，整条 padding 声明作废回落到 0 —— 表现是「卡片内容全贴边」，而且只在 圆角为零的风格里出现，极难往圆角上想。 */ --sx-radius-sm: 0rem; --sx-radius-md: 0rem; --sx-radius-lg: 0rem; --sx-radius-xl: 0rem; /* 立体斜角是四色，不是两色。Win9x 的凸起边由内外两层构成： 外层 左上 = light 右下 = dark-shadow（最暗） 内层 左上 = highlight（最亮） 右下 = shadow（中灰） 只用两色画出来的是「一条亮边一条暗边」，看着像描边；四色才有厚度， 因为眼睛读到的是「一个有坡度的斜面」而不是「两条线」。 四个角色都从中性色算出：亮色下按钮面是 background-3，最亮的是 background-1、 最暗的是 foreground-1；暗色下抬升方向相反，见 [data-theme="dark"] 块。 */ --sx-classic-bevel-highlight: var(--sx-color-neutral-background-1); --sx-classic-bevel-light: var(--sx-color-neutral-background-2); --sx-classic-bevel-shadow: var(--sx-color-neutral-foreground-3); --sx-classic-bevel-dark: var(--sx-color-neutral-foreground-1); --sx-classic-bevel-width: 0.0625rem; --sx-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.05); --sx-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.1); --sx-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.12); --sx-shadow-xl: 0 4px 8px rgba(0, 0, 0, 0.14); --sx-shadow-overlay: 0 4px 12px rgba(0, 0, 0, 0.15); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 600; --sx-font-weight-bold: 700; --sx-font-family-base: Tahoma, Verdana, "Segoe UI", sans-serif; --sx-button-primary-border-color: var(--sx-color-brand-stroke-1); --sx-button-primary-border-color-hover: var(--sx-color-brand-stroke-1); --sx-button-primary-border-color-pressed: var(--sx-color-brand-stroke-1); --sx-button-secondary-border-color: var(--sx-color-neutral-stroke-1); --sx-button-secondary-border-color-hover: var(--sx-color-neutral-stroke-1-hover); --sx-button-tertiary-border-color: var(--sx-color-neutral-foreground-3); --sx-button-quaternary-border-color-hover: var(--sx-color-neutral-stroke-1); font-family: var(--sx-font-family-base); } [data-sx-style="classic"][data-theme="dark"] { /* 抬升方向在暗色是反的：background-1 是最暗的一层，不能再当亮边。四个角色整体上移。 */ --sx-classic-bevel-highlight: var(--sx-color-neutral-foreground-3); --sx-classic-bevel-light: var(--sx-color-neutral-stroke-1); --sx-classic-bevel-shadow: var(--sx-color-neutral-background-2); --sx-classic-bevel-dark: var(--sx-color-neutral-background-1); --sx-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.15); --sx-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.25); --sx-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3); --sx-shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.35); --sx-shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.4); } /* ============================================================ Futuristic — Sci-fi / Neon Sharp corners, glow shadows, monospace font, neon borders ============================================================ */ [data-sx-style="futuristic"] { /* 灯丝色：霓虹管点亮的那条内边。它必须永远是「亮的一极」——亮色主题里最亮的是 background-1，暗色主题里 background-1 反而最暗，最亮的是 foreground-1，所以这个 角色在两个主题里落在不同的 token 上，见下面的 [data-theme="dark"] 块。 */ --sx-futuristic-filament: var(--sx-color-neutral-background-1); /* 光在里面，不在外面。 上一版把辉光做成向外扩散的大光晕（0 0 10px 一圈），远看是「一团发光的方块」—— 科幻片里的界面不是这样：《黑客帝国》《西部世界》那类画面里，亮的是**线本身**， 线的旁边有一点点溢出的光，整体是冷的、克制的，没有一处在向外泛光。 所以这一版把光全部收进边界内侧： seam —— 边线本身的亮度（那条「点亮的缝」） spill —— 从边线往内渗的那点光，半径很小，只够让边缘看起来有厚度 halo —— 向外的那一点点，仅保留一个极小值让元素不至于「贴」在背景上； 它是收尾，不是主角。 */ --sx-futuristic-seam: 80%; --sx-futuristic-seam-accent: 96%; /* 内渗的半径与收缩量是这套风格成不成立的关键。上一版给了 0.375rem 半径外加 -45% 收缩， 算下来有效范围只剩两三个像素 —— 结果是「线被染了色」而不是「线在发光」，整页看着 就是暗色主题加蓝边。实测：半径要到 0.75rem 以上、收缩要归零，光才透得出来。 亮底吃光少（白底上大半径会糊成一片蓝雾），暗底吃得住，所以两个主题不同值。 */ /* 内渗只留一点点。之前放到 0.75rem 以上确实「有光」了，但在亮底上是一层脏兮兮的蓝雾， 而且它抢了金属线的戏 —— 质感应该在线上，不在光斑上。 */ --sx-futuristic-spill: 0.25rem; --sx-futuristic-spill-accent: 0.3125rem; /* 外晕保持为零。实测零外晕时内光已经足以让线读作「在发光」， 加了反而变成向外泛的光晕 —— 那正是要避免的。 */ --sx-futuristic-halo: 0rem; /* 金属线。这套风格的重点不在光晕，在**线本身有质感**：一条均匀的色线只是被染了色， 金属线上有暗段、有窄而亮的高光带，四条边受光还不一样。 整块料只有三个端点 —— 暗部 / 本色 / 高光 —— 四种用法（常态·主按钮·三级·hover） 只是在同一组端点上换停靠点和角度，所以它们读起来是同一种金属，而不是四种材料。 两个端点都**不许顶到黑或白**，这是浅色主题下唯一致命的地方： 暗部混到纯黑，白底上那条边就成了一道黑框（不是金属，是描边）； 高光混到纯白，白底上那一段边直接消失，边框看起来是断的。 所以暗部只压到品牌色的深色档，高光只提到「淡到还能看见」为止。 */ --sx-futuristic-metal-shade: color-mix(in srgb, var(--sx-color-brand-background-1) 55%, black); --sx-futuristic-metal-base: var(--sx-color-brand-background-1); --sx-futuristic-metal-lit: color-mix(in srgb, white 10%, var(--sx-color-brand-background-1)); /* 半档，用来把三级压平、把主按钮托起来，避免它们各自另起一套配方。 */ --sx-futuristic-metal-halflit: color-mix(in srgb, var(--sx-futuristic-metal-lit) 55%, var(--sx-futuristic-metal-base)); /* halfshade 供三级按钮那张收窄的渐变用，两个主题夹的方向**相反**： 浅色下 3:1 的风险只在亮的一侧（往白里走会淡进页面），暗部再深也只是更清楚， 所以浅色让它放开去暗；暗色反过来 —— 深下去才会沉进背景，必须往本色收。 （夹错方向的后果是浅色下整圈线平成一条纯色边，一点光泽都没有。） */ --sx-futuristic-metal-halfshade: color-mix(in srgb, var(--sx-futuristic-metal-shade) 70%, var(--sx-futuristic-metal-base)); /* 135deg 不是随便挑的：环上每一点取到的渐变位置正比于 (x+y)。对一个宽 ~190、高 ~52 的 按钮，这个角度让上边扫过渐变的 0→78%、下边扫过 22→100% —— 上下两条边因此拿到 **不同**的高光位置（这就是「四条边受光不同」），而每条边自己又还留着足够长的一段 可以走完一轮明暗。角度再平（112deg）上下就几乎重合，再陡横向拉丝就被压没了。 左右两条竖边取的是渐变首尾， 两端一律收在**本色**：border-image 的左右两条竖边取的正是渐变的首尾， 首尾若落在暗部，浅色页面上就是两根突兀的深色竖条 —— 暗部和高光要全部落在 上下两条边上，那里它们读作受光，不是读作描边。 两道高光比一道更像金属：一道容易读成渐变，两道才读成反光。 */ --sx-futuristic-metal: linear-gradient(135deg, var(--sx-futuristic-metal-base) 0%, var(--sx-futuristic-metal-lit) 12%, var(--sx-futuristic-metal-base) 24%, var(--sx-futuristic-metal-shade) 38%, var(--sx-futuristic-metal-base) 52%, var(--sx-futuristic-metal-lit) 64%, var(--sx-futuristic-metal-base) 76%, var(--sx-futuristic-metal-shade) 88%, var(--sx-futuristic-metal-base) 100%); /* 主按钮的底本身就是品牌色，本色段会直接和底融掉，所以中间档整体抬到半高光， 只留两端的暗部当作压边。 */ --sx-futuristic-metal-accent: linear-gradient(135deg, var(--sx-futuristic-metal-halflit) 0%, var(--sx-futuristic-metal-lit) 12%, var(--sx-futuristic-metal-halflit) 24%, var(--sx-futuristic-metal-shade) 38%, var(--sx-futuristic-metal-halflit) 52%, var(--sx-futuristic-metal-lit) 64%, var(--sx-futuristic-metal-halflit) 76%, var(--sx-futuristic-metal-shade) 88%, var(--sx-futuristic-metal-halflit) 100%); /* 三级按钮没有底色，这条边**就是**它的全部边界，所以两头都收窄： 不许亮到看不见、也不许暗到抢戏，全程贴着本色浮动。 */ --sx-futuristic-metal-quiet: linear-gradient(135deg, var(--sx-futuristic-metal-base) 0%, var(--sx-futuristic-metal-halflit) 13%, var(--sx-futuristic-metal-base) 26%, var(--sx-futuristic-metal-halfshade) 40%, var(--sx-futuristic-metal-base) 54%, var(--sx-futuristic-metal-halflit) 66%, var(--sx-futuristic-metal-base) 78%, var(--sx-futuristic-metal-halfshade) 89%, var(--sx-futuristic-metal-base) 100%); /* 第二根光轴：横向那张渐变只管「拉丝」，上下两条边落在它上面的取值几乎一样， 所以单靠它做不出「上受光、下背光」—— 而正是这一轴让人读出边有厚度。 叠一层竖向光照解决：顶边提亮、底边压暗，中段透明不干扰拉丝。 */ --sx-futuristic-edge-lighting: linear-gradient(to bottom, transparent 0%, transparent 48%, color-mix(in srgb, black 22%, transparent) 100%); /* 三级按钮没有底色，这圈线就是它的**全部**边界，所以它不能跟着别的档一起沉下去： 暗段压到 3:1 以下时那一段边界等于不存在（实测暗色主题下会掉到 1.5:1）。 它单独用一层更轻的光照，配合下面收窄的 halfshade，全程守住 3:1。 */ --sx-futuristic-edge-lighting-quiet: linear-gradient(to bottom, transparent 0%, transparent 50%, color-mix(in srgb, black 10%, transparent) 100%); /* 按下：亮色主题里「按下去」是变暗，不是变亮 —— 原先两个主题共用 brightness(1.3)， 白底上按下反而更淡，连字的对比度都掉了（看起来像禁用而不是按下）。 */ --sx-futuristic-press-filter: brightness(0.93); /* hover 只换角度：光源移了个位置，高光带扫到别处去，不是把光调大。 */ --sx-futuristic-metal-hover: linear-gradient(38deg, var(--sx-futuristic-metal-base) 0%, var(--sx-futuristic-metal-lit) 10%, var(--sx-futuristic-metal-base) 22%, var(--sx-futuristic-metal-shade) 34%, var(--sx-futuristic-metal-base) 48%, var(--sx-futuristic-metal-lit) 62%, var(--sx-futuristic-metal-base) 74%, var(--sx-futuristic-metal-shade) 86%, var(--sx-futuristic-metal-base) 100%); --sx-radius-sm: 0rem; /* 0rem，理由同 classic */ --sx-radius-md: 0.125rem; --sx-radius-lg: 0.25rem; --sx-radius-xl: 0.25rem; /* 面的阴影阶同样反过来：inset 渗光为主，外缘只留一线。层级差别体现在渗光半径， 不体现在外扩范围 —— 外扩一大，整页就又变成「一团一团在发光」。 */ --sx-shadow-sm: inset 0 0 0.375rem -0.125rem color-mix(in srgb, var(--sx-primary-500) 18%, transparent), 0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-primary-500) 14%, transparent); --sx-shadow-md: inset 0 0 0.625rem -0.125rem color-mix(in srgb, var(--sx-primary-500) 22%, transparent), 0 0 var(--sx-futuristic-halo) color-mix(in srgb, var(--sx-primary-500) 16%, transparent); --sx-shadow-lg: inset 0 0 1rem -0.1875rem color-mix(in srgb, var(--sx-primary-500) 26%, transparent), 0 0 0.1875rem color-mix(in srgb, var(--sx-primary-500) 18%, transparent); --sx-shadow-xl: inset 0 0 1.5rem -0.25rem color-mix(in srgb, var(--sx-primary-500) 30%, transparent), 0 0 0.25rem color-mix(in srgb, var(--sx-primary-500) 20%, transparent); --sx-shadow-overlay: inset 0 0 2rem -0.25rem color-mix(in srgb, var(--sx-primary-500) 32%, transparent), 0 0 0.3125rem color-mix(in srgb, var(--sx-primary-500) 22%, transparent); --sx-border-width-thin: 1px; --sx-font-weight-semibold: 500; --sx-font-weight-bold: 600; --sx-font-family-base: "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", monospace; --sx-font-family-monospace: var(--sx-font-family-base); --sx-font-family-mono: var(--sx-font-family-monospace); --sx-button-secondary-background: color-mix(in srgb, var(--sx-color-brand-background-1) 10%, var(--sx-color-neutral-background-2)); --sx-button-secondary-background-hover: color-mix(in srgb, var(--sx-color-brand-background-1) 16%, var(--sx-color-neutral-background-2)); --sx-button-secondary-border-color: color-mix(in srgb, var(--sx-color-brand-stroke-1) 42%, var(--sx-color-neutral-stroke-1)); --sx-button-tertiary-border-color: color-mix(in srgb, var(--sx-color-brand-stroke-1) 58%, var(--sx-color-neutral-stroke-1)); --sx-button-tertiary-color: var(--sx-color-brand-foreground-1); --sx-button-quaternary-color: var(--sx-color-brand-foreground-1); --sx-button-quaternary-background-pressed: color-mix(in srgb, var(--sx-color-brand-background-1) 18%, transparent); font-family: var(--sx-font-family-base); } [data-sx-style="futuristic"][data-theme="dark"] { --sx-futuristic-filament: var(--sx-color-neutral-foreground-1); /* 暗底更吃得住光：缝更亮、往内渗得更远。外缘仍然只留一线，不随之放大 —— 科幻片的夜景里，亮的永远是线，不是线周围的空气。 */ --sx-futuristic-seam: 96%; --sx-futuristic-seam-accent: 100%; --sx-futuristic-spill: 0.375rem; --sx-futuristic-spill-accent: 0.5rem; /* 暗底上暗部可以压得更狠 —— 它落在深色页面上是「退回背景」，不是「一道黑框」； 高光则可以接近纯白，夜里的反光本来就刺眼。浅色下这两条都不成立，见上面的注释。 */ --sx-futuristic-metal-shade: color-mix(in srgb, var(--sx-color-brand-background-1) 30%, black); --sx-futuristic-metal-lit: color-mix(in srgb, white 80%, var(--sx-color-brand-background-1)); --sx-futuristic-metal-halfshade: color-mix(in srgb, var(--sx-futuristic-metal-shade) 15%, var(--sx-futuristic-metal-base)); /* 夜里的反差更大：顶边更亮，底边几乎沉进背景。 */ --sx-futuristic-edge-lighting: linear-gradient(to bottom, color-mix(in srgb, white 28%, transparent) 0%, transparent 40%, transparent 56%, color-mix(in srgb, black 30%, transparent) 100%); --sx-futuristic-edge-lighting-quiet: linear-gradient(to bottom, color-mix(in srgb, white 20%, transparent) 0%, transparent 44%, transparent 58%, color-mix(in srgb, black 10%, transparent) 100%); /* 暗底上按下 = 更亮，这是夜间界面的通行读法。 */ --sx-futuristic-press-filter: brightness(1.3); --sx-shadow-sm: 0 0 6px color-mix(in srgb, var(--sx-primary-500) 25%, transparent); --sx-shadow-md: 0 0 12px color-mix(in srgb, var(--sx-primary-500) 30%, transparent); --sx-shadow-lg: 0 0 20px color-mix(in srgb, var(--sx-primary-500) 35%, transparent), 0 0 6px color-mix(in srgb, var(--sx-primary-500) 18%, transparent); --sx-shadow-xl: 0 0 32px color-mix(in srgb, var(--sx-primary-500) 40%, transparent), 0 0 12px color-mix(in srgb, var(--sx-primary-500) 20%, transparent); --sx-shadow-overlay: 0 0 40px color-mix(in srgb, var(--sx-primary-500) 40%, transparent), 0 0 16px color-mix(in srgb, var(--sx-primary-500) 25%, transparent); } /* ============================================================ Efficient — 效率型 / 有轨 给「一天要盯八小时」的界面用：列表、表单、密集表格。它的所有取舍都指向一件事 —— 在同样高度里多放一行，同时不让人更累。 两条与其它四套都不同的原则： ① 不做层。没有任何阴影，全部元素在同一平面上；深度会在密集界面里制造噪声， 而且每一层都要占出边距来「浮起来」。分隔靠发丝线，不靠投影。 ② 状态走「轨」而不是走「块」。选中 / 激活由一条 2px 的重点色轨道表示，贴在元素的 前缘。一列轨道可以竖着扫下来；一片色块只能一个个看。 ============================================================ */ [data-sx-style="efficient"] { /* 圆角够小到不占视觉重量，又不至于像 Classic 那样硬。 */ --sx-radius-sm: 0.125rem; --sx-radius-md: 0.1875rem; --sx-radius-lg: 0.25rem; --sx-radius-xl: 0.25rem; /* 全部为无。这是这套风格的第一条原则，不是省略。 */ --sx-shadow-sm: none; --sx-shadow-md: none; --sx-shadow-lg: none; --sx-shadow-xl: none; /* 浮层例外：对话框和菜单必须能与背后的页面分开，否则不是密度问题而是可用性问题。 但用的是发丝描边而不是投影 —— 见组件层。 */ --sx-shadow-overlay: none; --sx-border-width-thin: 1px; --sx-font-weight-semibold: 600; --sx-font-weight-bold: 700; /* 系统 UI 字体在小字号下的可读性最好，而这套风格就是要长期看小字。 */ --sx-font-family-base: -apple-system, "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, sans-serif; /* 轨道：状态的唯一载体。 */ --sx-efficient-rail-width: 0.125rem; --sx-efficient-rail-color: var(--sx-color-brand-background-1); /* 按钮：次级及以下一律不填色，只留发丝线或纯文字，让主操作在一屏里一眼可见。 */ --sx-button-secondary-background: transparent; --sx-button-secondary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 6%, transparent); --sx-button-secondary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 10%, transparent); --sx-button-secondary-border-color: var(--sx-color-neutral-stroke-1); --sx-button-secondary-border-color-hover: var(--sx-color-neutral-foreground-3); --sx-button-tertiary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 5%, transparent); --sx-button-tertiary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 9%, transparent); --sx-button-tertiary-border-color: transparent; --sx-button-quaternary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 5%, transparent); font-family: var(--sx-font-family-base); } [data-sx-style="efficient"][data-theme="dark"] { /* 暗色下中性前景是白的，同样的百分比混出来会比亮色重一档，各降两个点。 */ --sx-button-secondary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent); --sx-button-secondary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 8%, transparent); --sx-button-tertiary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent); --sx-button-tertiary-background-pressed: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 7%, transparent); --sx-button-quaternary-background-hover: color-mix(in srgb, var(--sx-color-neutral-foreground-1) 4%, transparent); } /* ============================================================ Pixel — 像素 一条规则贯穿全部取舍：画面上不允许出现任何模糊的东西。 投影不带模糊半径、圆角为零、描边 2px、拉丁走点阵字体，没有渐变也没有半透明叠加。 它不是「复古皮肤」，是用点阵屏的约束重新解一遍这套组件 —— 下面每条都能反推回那个约束。 ============================================================ */ [data-sx-style="pixel"] { /* 步长只有一个值：位移量、硬影偏移、描边厚度全部用它。「按下去」这件事要在几何上 说得通，位移和投影就必须是同一个数。 */ --sx-pixel-step: 2px; --sx-pixel-ink: var(--sx-color-neutral-foreground-1); /* 点阵屏画不出圆角。写 0rem 不是 0 —— 无单位的 0 进了 calc()/max() 会让整条声明作废 （经典型踩过这个坑，见 LengthTokens_NeverDeclareAUnitlessZero）。 */ --sx-radius-sm: 0rem; --sx-radius-md: 0rem; --sx-radius-lg: 0rem; --sx-radius-xl: 0rem; /* 胶囊也要归零。这条漏了的话 Circular 形状、纯图标按钮、头像、徽章全是 999px 的药丸， 在一套「点阵屏画不出圆角」的风格里格外扎眼 —— 实测就是这么露馅的。 点阵里的圆是用方块砌出来的阶梯，CSS 的 border-radius 做不到，所以诚实的答案是没有圆角。 */ --sx-radius-pill: 0rem; /* 1px 在高分屏上是半个逻辑点，会被抗锯齿糊掉；2px 才画得实。 */ --sx-border-width-thin: var(--sx-pixel-step); /* 所有面共用同一个硬影，不分层级 —— 分层级就要有模糊或多档偏移，两者都破坏总规则。 */ --sx-shadow-sm: var(--sx-pixel-step) var(--sx-pixel-step) 0 var(--sx-pixel-ink); --sx-shadow-md: var(--sx-shadow-sm); --sx-shadow-lg: var(--sx-shadow-sm); --sx-shadow-xl: var(--sx-shadow-sm); --sx-shadow-overlay: var(--sx-shadow-sm); /* 点阵字没有真字重，合成加粗只会让点糊在一起。层级靠尺寸与颜色，不靠字重。 */ --sx-font-weight-semibold: 400; --sx-font-weight-bold: 400; /* 拉丁走点阵、中文走无衬线：浏览器按字符逐个回退，字体栈本身就是分工机制。 */ --sx-font-family-base: "Handjet", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; /* ELSH=100 把 Handjet 的「元素」从圆点调成方块 —— 不设这条它是 LED 点阵屏的样子， 设了才是像素方块。wght 500 比 400 更实一点，不至于在小字号下发飘。 */ --sx-pixel-variation: "ELSH" 100, "wght" 500; /* 次级及以下不填色，只留 2px 墨边；主按钮是全页唯一的填色块。 */ --sx-button-secondary-background: var(--sx-color-neutral-background-1); --sx-button-secondary-border-color: var(--sx-pixel-ink); --sx-button-secondary-background-hover: var(--sx-color-neutral-background-3); --sx-button-tertiary-border-color: var(--sx-pixel-ink); --sx-button-tertiary-background-hover: var(--sx-color-neutral-background-3); --sx-button-quaternary-background-hover: var(--sx-color-neutral-background-3); font-family: var(--sx-font-family-base); font-variation-settings: var(--sx-pixel-variation); }