diff --git a/app/src/ambience.css b/app/src/ambience.css index 3169bfa..e2dd3fe 100644 --- a/app/src/ambience.css +++ b/app/src/ambience.css @@ -25,6 +25,12 @@ body::before { 0%, 35% { background: var(--amber-dim); box-shadow: inset 2px 0 0 var(--amber); } 100% { background: transparent; box-shadow: none; } } +/* 表单输入/下拉文字统一用柔和的 --field-ink(DS 源已改,此处覆盖以在未重编 bundle 时即时生效;body 前缀提高优先级压过 bundle 运行时样式) */ +body .m-input, +body .m-select-trigger, +body .m-select-value, +body .m-select-opt { color: var(--field-ink); } + ::selection { background: var(--green-dim); color: #fff; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } diff --git a/design/_ds_bundle.js b/design/_ds_bundle.js index 24b4c36..e0b49bf 100644 --- a/design/_ds_bundle.js +++ b/design/_ds_bundle.js @@ -402,7 +402,7 @@ Object.assign(__ds_scope, { ComplexitySeg }); try { (() => { const css = ` .m-label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em} -.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)} +.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--field-ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)} .m-input:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)} .m-input::placeholder{color:var(--faint)} .m-req{color:var(--red)} @@ -454,14 +454,14 @@ Object.assign(__ds_scope, { ensureFieldCss, Input }); try { (() => { const css = ` .m-select{position:relative;display:inline-flex;flex-direction:column;min-width:120px} -.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%} +.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--field-ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%} .m-select-trigger:hover{border-color:var(--muted)} .m-select-trigger.open,.m-select-trigger:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)} .m-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-select-caret{flex:none;font-size:8px;color:var(--faint);transition:transform .12s} .m-select-trigger.open .m-select-caret{transform:rotate(180deg)} .m-select-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:80;display:grid;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-md,6px);padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.65);animation:maestro-rise .12s ease both;max-height:260px;overflow-y:auto} -.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--field-ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-select-opt:hover{background:var(--panel)} .m-select-opt.on{background:var(--panel-2);color:var(--green);font-weight:700} .m-select-mark{flex:none;width:8px;color:var(--green);font-size:10px} diff --git a/design/components/forms/Input.jsx b/design/components/forms/Input.jsx index b555a16..689b7a0 100644 --- a/design/components/forms/Input.jsx +++ b/design/components/forms/Input.jsx @@ -1,6 +1,6 @@ const css = ` .m-label{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.08em} -.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)} +.m-input{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--field-ink);border:1px solid var(--line);padding:7px 10px;outline:none;transition:border-color .12s;border-radius:var(--radius-sm,4px)} .m-input:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)} .m-input::placeholder{color:var(--faint)} .m-req{color:var(--red)} diff --git a/design/components/forms/Select.jsx b/design/components/forms/Select.jsx index d00c937..cc3b1a4 100644 --- a/design/components/forms/Select.jsx +++ b/design/components/forms/Select.jsx @@ -2,14 +2,14 @@ import { ensureFieldCss } from './Input.jsx'; const css = ` .m-select{position:relative;display:inline-flex;flex-direction:column;min-width:120px} -.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%} +.m-select-trigger{font-family:var(--mono);font-size:13px;background:var(--bg-deep);color:var(--field-ink);border:1px solid var(--line);border-radius:var(--radius-sm,4px);padding:7px 10px;cursor:pointer;outline:none;transition:border-color .12s;display:flex;align-items:center;gap:10px;text-align:left;width:100%} .m-select-trigger:hover{border-color:var(--muted)} .m-select-trigger.open,.m-select-trigger:focus{border-color:var(--green-dim);box-shadow:0 0 0 1px var(--green-dim)} .m-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-select-caret{flex:none;font-size:8px;color:var(--faint);transition:transform .12s} .m-select-trigger.open .m-select-caret{transform:rotate(180deg)} .m-select-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:80;display:grid;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--radius-md,6px);padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.65);animation:maestro-rise .12s ease both;max-height:260px;overflow-y:auto} -.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} +.m-select-opt{font-family:var(--mono);font-size:12.5px;text-align:left;background:transparent;color:var(--field-ink);border:none;border-radius:4px;padding:7px 10px 7px 8px;cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .m-select-opt:hover{background:var(--panel)} .m-select-opt.on{background:var(--panel-2);color:var(--green);font-weight:700} .m-select-mark{flex:none;width:8px;color:var(--green);font-size:10px} diff --git a/design/tokens/colors.css b/design/tokens/colors.css index df33292..e093b67 100644 --- a/design/tokens/colors.css +++ b/design/tokens/colors.css @@ -13,6 +13,7 @@ --ink: #d8e4d4; /* 正文 */ --muted: #76876f; /* 次要文字 / 标签 */ --faint: #4a5747; /* 弱化文字 / 占位 */ + --field-ink: #a7b3a1; /* 表单输入/下拉文字(比正文柔和,不刺眼)—— 输入文字单一真相源 */ /* ── 磷光信号色(每色配 -dim 暗位用作边框/底色) ── */ --green: #5fdd7d; /* 成功 / 可执行 / 品牌主色 */ @@ -62,6 +63,7 @@ --ink: #1d251b; --muted: #5c6b57; --faint: #92a08c; + --field-ink: #3c4838; /* 表单输入文字(light) */ --green: #1b8f46; --green-dim: #b5e2c3;