dsh-openai-subscription 0.1.7 → 0.1.8

package/README.md

@@ -137,7 +137,7 @@ After installing dependencies, run `npm run check` (or `pnpm run check`) for typ
 
 ### Settings UI and navigation icons
 
-Buttons use theme-aware, high-contrast `1px` borders. The header and navigation reuse one local OpenAI SVG, with no additional runtime dependency or remote image requests; see [third-party notices](THIRD_PARTY_NOTICES.md).
+Every button, picker, and code field shares one control spec: a theme-aware `1px` border taken from the host's own control border step, a `12px` radius, and the host's type scale. Variants change color only, never size or shape. The header and navigation reuse one local OpenAI SVG, with no additional runtime dependency or remote image requests; see [third-party notices](THIRD_PARTY_NOTICES.md).
 
 The currently tested upstream DSH build does not expose custom settings navigation icons. Unextended hosts keep the default gear without affecting other plugin features. This project includes an **opt-in, build-guarded, reversible** local DSH extension; installing the plugin does not patch the host automatically. It preserves string labels and passes icons through `icon({ size, className })`, not DOM/CSS substitution. See [DSH settings icon extension](docs/DSH_SETTINGS_ICONS.md) for usage and upgrade caveats.
 

package/README.zh.md

@@ -137,7 +137,7 @@ dsh plugin --profile web remove dsh-openai-subscription
 
 ### 设置界面与导航图标
 
-按钮使用主题自适应的 `1px` 高对比度边框。顶部和导航复用本地 OpenAI SVG，无额外运行时依赖或远程图片请求；来源及许可证见 [第三方声明](THIRD_PARTY_NOTICES.md)。
+所有按钮、选择器与验证码输入框共用同一套控件规范：主题自适应的 `1px` 边框（取宿主自身的控件边框层级）、`12px` 圆角与宿主字号；变体只改变颜色，不改变尺寸或形状。顶部和导航复用本地 OpenAI SVG，无额外运行时依赖或远程图片请求；来源及许可证见 [第三方声明](THIRD_PARTY_NOTICES.md)。
 
 当前官方 DSH 设置导航尚未提供自定义图标接口，未扩展的宿主仍显示默认齿轮，插件其他功能不受影响。本项目提供**显式执行、限定构建版本、可还原**的本机 DSH 扩展，不在安装时自动修改宿主。它保留字符串标签，通过 `icon({ size, className })` 传递图标，不使用 DOM/CSS 替换技巧。用法和升级注意事项见 [DSH 图标接口扩展](docs/DSH_SETTINGS_ICONS.md)。
 

package/dist/client.js

@@ -305,9 +305,10 @@ window.__ModuleLoader__.load({
 .oasub-wrap {
   --oasub-section-inset: 20px;
   --oasub-card-border-width: 1px;
-  /* Control boundaries need more contrast than the host's decorative hairlines. */
-  --oasub-control-border: color-mix(in srgb, var(--dsw-alias-label-primary, #0f1115) 48%, transparent);
-  --oasub-control-border-hover: color-mix(in srgb, var(--dsw-alias-label-primary, #0f1115) 68%, transparent);
+  /* One control boundary for every button and picker: the host's own control
+     border step, so plugin controls carry the same weight as DSH's. */
+  --oasub-control-border: var(--dsw-alias-border-l3, rgba(15, 17, 21, .16));
+  --oasub-control-border-hover: var(--dsw-alias-border-l4, rgba(15, 17, 21, .2));
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -384,11 +385,11 @@ window.__ModuleLoader__.load({
 .oasub-picker { position: relative; min-width: 0; }
 .oasub-picker-trigger, .oasub-input-shell {
   width: 100%; min-height: 56px; padding: 10px 12px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(15, 17, 21, .2)); border-radius: 12px;
+  border: 1px solid var(--oasub-control-border); border-radius: 12px;
   color: var(--dsw-alias-label-primary, #0f1115); background: var(--dsw-alias-bg-layer-2, #f5f6f7);
 }
 .oasub-picker-trigger { appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: inherit; text-align: start; cursor: pointer; transition: border-color .16s, background .16s; }
-.oasub-picker-trigger:hover:not(:disabled), .oasub-picker-trigger[aria-expanded="true"] { border-color: var(--oasub-control-border); background: var(--dsw-alias-bg-layer-1, #fff); }
+.oasub-picker-trigger:hover:not(:disabled), .oasub-picker-trigger[aria-expanded="true"] { border-color: var(--oasub-control-border-hover); background: var(--dsw-alias-bg-layer-1, #fff); }
 .oasub-picker-trigger:focus-visible, .oasub-input-shell:focus-within, .oasub-management-toggle:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #4176e6); outline-offset: 3px; }
 .oasub-picker-trigger:disabled { opacity: .5; cursor: default; }
 .oasub-picker-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@@ -423,39 +424,46 @@ window.__ModuleLoader__.load({
 .oasub-manage-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 16px; border-top: 1px solid var(--dsw-alias-border-l2, rgba(15, 17, 21, .14)); }
 .oasub-manage-row .oasub-status-detail { font-size: 11px; line-height: 17px; }
 .oasub-manage-title { font-size: 13px; font-weight: 500; line-height: 20px; }
-.oasub-manage-row > .oasub-button { flex: 0 0 auto; min-height: 32px; padding: 5px 12px; border-color: var(--dsw-alias-border-l1, rgba(15, 17, 21, .2)); font-size: 12px; }
-.oasub-manage-row > .oasub-button.danger-quiet { color: var(--dsw-alias-state-error-primary, #b91c1c); border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary, #dc2626) 25%, transparent); }
-.oasub-manage-row > .oasub-button.danger-quiet:hover:not(:disabled) { background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #dc2626) 7%, transparent); border-color: var(--dsw-alias-state-error-primary, #dc2626); }
+/* Management rows reuse the one button spec; only the row layout differs. */
+.oasub-manage-row > .oasub-button { flex: none; }
 @container (max-width: 460px) {
   .oasub-context-grid { grid-template-columns: minmax(0, 1fr); }
   .oasub-manage-row { align-items: flex-start; flex-direction: column; gap: 10px; }
   .oasub-manage-row > .oasub-button { align-self: flex-start; }
 }
+/* One button spec for the whole panel: DSH's control radius, control border
+   step, and type scale. Variants change color only, never size or shape. */
 .oasub-button {
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   min-height: 36px;
-  padding: 7px 15px;
+  padding: 0 16px;
   border: 1px solid var(--oasub-control-border);
-  border-radius: 999px;
+  border-radius: 12px;
   color: var(--dsw-alias-label-primary, #0f1115);
   background: transparent;
   font: inherit;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
-  line-height: 20px;
+  line-height: 22px;
   cursor: pointer;
   text-decoration: none;
   text-align: center;
   transition: background .16s ease, border-color .16s ease, opacity .16s ease, transform .16s ease;
 }
-.oasub-button:not(.primary):not(.danger):hover:not(:disabled) { border-color: var(--oasub-control-border-hover); background: var(--dsw-alias-interactive-bg-hover, rgba(15, 17, 21, .06)); }
+.oasub-button:not(.primary):not(.danger):not(.danger-quiet):hover:not(:disabled) { border-color: var(--oasub-control-border-hover); background: var(--dsw-alias-interactive-bg-hover, rgba(15, 17, 21, .06)); }
 .oasub-button:active:not(:disabled) { transform: translateY(1px); }
 .oasub-button:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #4176e6); outline-offset: 2px; }
 .oasub-button:disabled { cursor: default; opacity: .45; }
-.oasub-button.primary { border-color: var(--dsw-alias-brand-primary, #4176e6); color: var(--dsw-alias-label-primary-inverted, #fff); background: var(--dsw-alias-brand-primary, #4176e6); }
-.oasub-button.primary:hover:not(:disabled) { filter: brightness(.96); }
-.oasub-button.danger { border-color: var(--dsw-alias-state-error-primary, #dc2626); color: var(--dsw-alias-label-primary-inverted, #fff); background: var(--dsw-alias-state-error-primary, #dc2626); }
+.oasub-button.primary { border-color: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary, #4176e6)); color: var(--dsw-alias-label-primary-foreground, #fff); background: var(--dsw-alias-button-primary-fill, var(--dsw-alias-brand-primary, #4176e6)); }
+.oasub-button.primary:hover:not(:disabled) { border-color: var(--dsw-alias-button-primary-hover, var(--dsw-alias-brand-primary, #4176e6)); background: var(--dsw-alias-button-primary-hover, var(--dsw-alias-brand-primary, #4176e6)); }
+.oasub-button.danger { border-color: var(--dsw-alias-state-error-primary, #dc2626); color: var(--dsw-alias-label-primary-foreground, #fff); background: var(--dsw-alias-state-error-primary, #dc2626); }
 .oasub-button.danger:hover:not(:disabled) { filter: brightness(.94); }
+.oasub-button.danger-quiet { color: var(--dsw-alias-state-error-primary, #b91c1c); border-color: color-mix(in srgb, var(--dsw-alias-state-error-primary, #dc2626) 25%, transparent); }
+.oasub-button.danger-quiet:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover-danger, color-mix(in srgb, var(--dsw-alias-state-error-primary, #dc2626) 7%, transparent)); border-color: var(--dsw-alias-state-error-primary, #dc2626); }
 .oasub-button.quiet { margin-left: auto; }
 .oasub-notice {
   display: flex;
@@ -478,10 +486,10 @@ window.__ModuleLoader__.load({
   align-self: flex-start;
   width: min(100%, 24ch);
   min-width: 0;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(15, 17, 21, .2));
+  border: 1px solid var(--oasub-control-border);
   margin: 0;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: 12px;
   color: var(--dsw-alias-label-primary, #0f1115);
   background: var(--dsw-alias-bg-layer-2, #f5f6f7);
   font-family: var(--ds-font-family-code, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
@@ -510,9 +518,10 @@ window.__ModuleLoader__.load({
   .oasub-picker-option[data-active="true"] { outline: 1px solid Highlight; outline-offset: -1px; }
   .oasub-picker-option[aria-disabled="true"], .oasub-picker-trigger:disabled { color: GrayText; opacity: 1; }
   .oasub-button { border-color: ButtonText; }
-  .oasub-button.primary, .oasub-button.danger { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
-  .oasub-button:not(.primary):not(.danger):hover:not(:disabled),
-  .oasub-button.primary:hover:not(:disabled), .oasub-button.danger:hover:not(:disabled) { border-color: Highlight; filter: none; }
+  .oasub-button.primary, .oasub-button.danger, .oasub-button.danger-quiet { border-color: ButtonText; color: ButtonText; background: ButtonFace; }
+  .oasub-button:not(.primary):not(.danger):not(.danger-quiet):hover:not(:disabled),
+  .oasub-button.primary:hover:not(:disabled), .oasub-button.danger:hover:not(:disabled),
+  .oasub-button.danger-quiet:hover:not(:disabled) { border-color: Highlight; filter: none; }
   .oasub-button:focus-visible { outline-color: Highlight; }
   .oasub-button:disabled { border-color: GrayText; color: GrayText; opacity: 1; }
 }
@@ -1341,7 +1350,9 @@ window.__ModuleLoader__.load({
                     : null, el('div', { className: 'oasub-actions' }, configured
                     ? el('button', {
                         type: 'button',
-                        className: 'oasub-button ' + (info.modelsSynced ? '' : 'primary'),
+                        // Exactly one primary action per card: a pending credential
+                        // repair outranks the model sync action.
+                        className: 'oasub-button' + (info.modelsSynced || info.credentialState !== 'valid' ? '' : ' primary'),
                         disabled: busy,
                         'aria-describedby': 'oasub-sync-help',
                         onClick: requestModelSync,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-openai-subscription",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "ChatGPT subscription sign-in for DeepSeek Harness via OpenAI device authorization.",
   "type": "module",
   "packageManager": "pnpm@10.6.3",