@aiot-nexus/plugin-sdk 3.1.1 → 3.2.0

package/templates/sqlite/src/renderer/plugin.css

@@ -1,8 +1,29 @@
 :root {
+  --bg: var(--nexus-color-background, #eef1f4);
+  --panel: var(--nexus-color-surface, #ffffff);
+  --raise: var(--nexus-color-surface-raised, #f7f9fa);
+  --hover: var(--nexus-color-surface-hover, #eef3f6);
+  --inset: var(--nexus-color-surface-inset, #e4e9ed);
+  --line: var(--nexus-color-border, #d7dde3);
+  --line-strong: var(--nexus-color-border-strong, #c2cbd3);
+  --fg: var(--nexus-color-text, #212a32);
+  --fg-dim: var(--nexus-color-text-muted, #5a6772);
+  --fg-faint: var(--nexus-color-text-faint, #8b97a1);
+  --brand: var(--nexus-color-primary, #8fc31f);
+  --brand-text: var(--nexus-color-accent, #6f9a15);
+  --on-brand: var(--nexus-color-on-primary, #ffffff);
+  --primary-action: var(--nexus-color-primary, #8fc31f);
+  --on-primary: var(--nexus-color-on-primary, #ffffff);
+  --on-negative: var(--nexus-color-on-negative, #ffffff);
+  --focus-ring: var(--nexus-color-accent, #6f9a15);
+  --brand-soft: var(--nexus-color-primary-soft, rgba(143, 195, 31, 0.12));
+  --negative: var(--nexus-color-negative, #c2402f);
   color-scheme: light;
-  font-family: "Segoe UI", Arial, sans-serif;
-  background: #f3f5f7;
-  color: #20252b;
+  font-family: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
+    "Segoe UI", system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--fg);
+  font-size: 14px;
 }
 
 * {
@@ -19,7 +40,8 @@ body {
   height: 100vh;
   min-height: 100vh;
   overflow: hidden;
-  background: #f3f5f7;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 button,
@@ -46,9 +68,9 @@ textarea {
 .editor-panel,
 .data-panel {
   min-width: 0;
-  border: 1px solid #d4d9df;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: var(--panel);
 }
 
 .plugin-header {
@@ -86,18 +108,19 @@ p {
 }
 
 h1 {
-  font-size: 20px;
+  font-size: 18px;
+  font-weight: 600;
 }
 
 h2 {
-  font-size: 15px;
+  font-size: 14.5px;
 }
 
 .database-heading p {
   overflow: hidden;
   max-width: min(62vw, 760px);
   margin-top: 3px;
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -115,13 +138,15 @@ h2 {
 
 button {
   min-height: 32px;
-  border: 1px solid #1768a6;
-  border-radius: 6px;
+  border: 1px solid var(--brand);
+  border-radius: 7px;
   padding: 0 11px;
-  background: #1768a6;
-  color: #ffffff;
+  background: var(--brand);
+  color: var(--on-brand);
   font-weight: 600;
   cursor: pointer;
+  transition: filter 0.15s ease, background-color 0.15s ease,
+    border-color 0.15s ease, color 0.15s ease;
 }
 
 button:disabled,
@@ -133,14 +158,50 @@ textarea:disabled {
 }
 
 button.button-secondary {
-  border-color: #aeb7c2;
-  background: #ffffff;
-  color: #20252b;
+  border-color: var(--line-strong);
+  background: var(--panel);
+  color: var(--fg);
 }
 
 button.button-danger {
-  border-color: #b42318;
-  background: #b42318;
+  border-color: var(--negative);
+  background: var(--negative);
+  color: var(--on-negative);
+}
+
+button:not(:disabled):hover {
+  border-color: var(--primary-action);
+  background: var(--primary-action);
+  color: var(--on-primary);
+}
+
+button.button-secondary:not(:disabled):hover,
+button.record-action:not(:disabled):hover {
+  filter: none;
+  border-color: var(--brand);
+  background: var(--hover);
+  color: var(--fg);
+}
+
+button.button-danger:not(:disabled):hover {
+  border-color: var(--negative);
+  background: var(--negative);
+  color: var(--on-negative);
+  filter: brightness(1.06);
+}
+
+button:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+input:hover,
+select:hover,
+textarea:hover {
+  border-color: var(--brand);
 }
 
 .compact-button {
@@ -168,7 +229,7 @@ button.button-danger {
 #statusLog,
 .editor-panel .panel-heading p,
 .field-current {
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -184,11 +245,11 @@ select,
 textarea {
   width: 100%;
   min-width: 0;
-  border: 1px solid #aeb7c2;
-  border-radius: 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
   padding: 7px 9px;
-  background: #ffffff;
-  color: #20252b;
+  background: var(--panel);
+  color: var(--fg);
 }
 
 textarea {
@@ -236,7 +297,7 @@ textarea {
   gap: 6px 8px;
   align-items: end;
   min-width: 0;
-  border-top: 1px solid #e7eaee;
+  border-top: 1px solid var(--line);
   padding-top: 8px;
 }
 
@@ -255,11 +316,11 @@ textarea {
 }
 
 .column-badge {
-  border: 1px solid #ccd3da;
+  border: 1px solid var(--line);
   border-radius: 4px;
   padding: 1px 4px;
-  background: #f7f8fa;
-  color: #56616d;
+  background: var(--raise);
+  color: var(--fg-dim);
   font-size: 10px;
   font-weight: 600;
 }
@@ -282,7 +343,7 @@ textarea {
 
 .error {
   margin-top: 8px;
-  color: #b42318;
+  color: var(--negative);
   font-size: 12px;
 }
 
@@ -306,9 +367,9 @@ textarea {
 
 .empty-state {
   padding: 18px;
-  border: 1px dashed #aeb7c2;
-  border-radius: 6px;
-  color: #65717e;
+  border: 1px dashed var(--line-strong);
+  border-radius: 7px;
+  color: var(--fg-dim);
   text-align: center;
 }
 
@@ -318,8 +379,8 @@ textarea {
   min-height: 80px;
   max-width: 100%;
   overflow: auto;
-  border: 1px solid #d4d9df;
-  border-radius: 6px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
 }
 
 table {
@@ -331,7 +392,7 @@ table {
 th,
 td {
   max-width: 360px;
-  border-bottom: 1px solid #e7eaee;
+  border-bottom: 1px solid var(--line);
   padding: 7px 9px;
   text-align: left;
   vertical-align: top;
@@ -342,8 +403,8 @@ th {
   z-index: 1;
   top: 0;
   min-width: 120px;
-  background: #f7f8fa;
-  color: #56616d;
+  background: var(--raise);
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -365,7 +426,7 @@ td {
 .cell-null,
 .cell-blob,
 .cell-truncated {
-  color: #65717e;
+  color: var(--fg-dim);
   font-family: Consolas, monospace;
   font-size: 12px;
 }
@@ -379,7 +440,7 @@ td {
 td.row-actions-cell {
   position: sticky;
   right: 0;
-  background: #ffffff;
+  background: var(--panel);
 }
 
 .pager {
@@ -388,7 +449,7 @@ td.row-actions-cell {
   justify-content: flex-end;
   gap: 12px;
   padding-top: 9px;
-  color: #65717e;
+  color: var(--fg-dim);
   font-size: 12px;
 }
 
@@ -449,14 +510,31 @@ td.row-actions-cell {
 }
 
 :root[data-theme="dark"] {
+  --bg: var(--nexus-color-background, #101418);
+  --panel: var(--nexus-color-surface, #1b222a);
+  --raise: var(--nexus-color-surface-raised, #171c22);
+  --hover: var(--nexus-color-surface-hover, #222a34);
+  --inset: var(--nexus-color-surface-inset, #0c0f13);
+  --line: var(--nexus-color-border, #2a333e);
+  --line-strong: var(--nexus-color-border-strong, #38434f);
+  --fg: var(--nexus-color-text, #e2e8ee);
+  --fg-dim: var(--nexus-color-text-muted, #97a3af);
+  --fg-faint: var(--nexus-color-text-faint, #64707c);
+  --brand-text: var(--nexus-color-accent, #a5d43e);
+  --primary-action: var(--nexus-color-primary, #8fc31f);
+  --on-primary: var(--nexus-color-on-primary, #ffffff);
+  --on-negative: var(--nexus-color-on-negative, #101418);
+  --focus-ring: var(--nexus-color-accent, #a5d43e);
+  --brand-soft: var(--nexus-color-primary-soft, rgba(143, 195, 31, 0.14));
+  --negative: var(--nexus-color-negative, #e2604f);
   color-scheme: dark;
-  background: #16191d;
-  color: #edf0f2;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] body {
-  background: #16191d;
-  color: #edf0f2;
+  background: var(--bg);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] .plugin-header,
@@ -464,8 +542,8 @@ td.row-actions-cell {
 :root[data-theme="dark"] .editor-panel,
 :root[data-theme="dark"] .data-panel,
 :root[data-theme="dark"] td.row-actions-cell {
-  border-color: #454b52;
-  background: #24282d;
+  border-color: var(--line);
+  background: var(--panel);
 }
 
 :root[data-theme="dark"] .database-heading p,
@@ -479,36 +557,36 @@ td.row-actions-cell {
 :root[data-theme="dark"] .cell-null,
 :root[data-theme="dark"] .cell-blob,
 :root[data-theme="dark"] .cell-truncated {
-  color: #aeb7c2;
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] input,
 :root[data-theme="dark"] select,
 :root[data-theme="dark"] textarea,
 :root[data-theme="dark"] button.button-secondary {
-  border-color: #59616a;
-  background: #191c20;
-  color: #edf0f2;
+  border-color: var(--line-strong);
+  background: var(--inset);
+  color: var(--fg);
 }
 
 :root[data-theme="dark"] .column-badge {
-  border-color: #59616a;
-  background: #30353b;
-  color: #d2d8de;
+  border-color: var(--line-strong);
+  background: var(--raise);
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] .table-wrap,
 :root[data-theme="dark"] .empty-state,
 :root[data-theme="dark"] .editor-field {
-  border-color: #454b52;
+  border-color: var(--line);
 }
 
 :root[data-theme="dark"] th {
-  background: #2d3238;
-  color: #d2d8de;
+  background: var(--raise);
+  color: var(--fg-dim);
 }
 
 :root[data-theme="dark"] th,
 :root[data-theme="dark"] td {
-  border-bottom-color: #454b52;
+  border-bottom-color: var(--line);
 }