统一交互组件 (#7)

Reviewed-on: #7

src/styles/components.css

@@ -117,8 +117,270 @@
   }
 
   .oc-map-button {
-    @apply flex h-10 w-10 items-center justify-center bg-white shadow-md transition-colors hover:bg-slate-50;
-    border-radius: 0.5rem !important;
+    @apply flex h-10 w-10 items-center justify-center border border-slate-200 bg-white text-slate-600;
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  /* Shared interactive contracts */
+  .oc-panel-button:not(.n-button),
+  .oc-header-button,
+  .oc-icon-button,
+  .oc-map-button,
+  .oc-choice-button,
+  .oc-text-button,
+  .oc-menu-item,
+  .oc-nav-link,
+  .oc-interactive-card {
+    transition:
+      background-color var(--oc-duration-fast) var(--oc-ease-standard),
+      color var(--oc-duration-fast) var(--oc-ease-standard),
+      border-color var(--oc-duration-fast) var(--oc-ease-standard),
+      box-shadow var(--oc-duration-fast) var(--oc-ease-standard),
+      transform var(--oc-duration-fast) var(--oc-ease-standard);
+  }
+
+  .oc-panel-button:not(.n-button) {
+    @apply inline-flex min-h-9 items-center justify-center border px-3 py-2 text-sm font-medium;
+  }
+
+  .oc-panel-button:not(.n-button):not(:disabled):hover,
+  .oc-header-button:not(:disabled):hover,
+  .oc-icon-button:not(:disabled):hover,
+  .oc-map-button:not(:disabled):hover,
+  .oc-choice-button:not(:disabled):hover {
+    transform: translate(-1px, -1px);
+  }
+
+  .oc-panel-button--neutral:not(.n-button) {
+    @apply border-slate-200 bg-white text-slate-600;
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  .oc-panel-button--neutral:not(.n-button):hover,
+  .oc-panel-button--neutral:not(.n-button):focus-visible {
+    @apply border-teal-200 bg-teal-50 text-teal-800;
+    box-shadow: var(--oc-shadow-primary);
+  }
+
+  .oc-panel-button--sky:not(.n-button) {
+    @apply border-sky-200 bg-sky-100 text-sky-800;
+    box-shadow: var(--oc-shadow-sky);
+  }
+
+  .oc-panel-button--sky:not(.n-button):hover,
+  .oc-panel-button--sky:not(.n-button):focus-visible {
+    @apply border-sky-300 bg-sky-50 text-sky-900;
+    box-shadow: 5px 5px 0 0 rgb(14 165 233 / 18%);
+  }
+
+  .oc-panel-button--teal:not(.n-button) {
+    @apply border-teal-200 bg-teal-50 text-teal-800;
+    box-shadow: var(--oc-shadow-teal);
+  }
+
+  .oc-panel-button--teal:not(.n-button):hover,
+  .oc-panel-button--teal:not(.n-button):focus-visible {
+    @apply border-teal-300 bg-teal-100 text-teal-900;
+    box-shadow: var(--oc-shadow-primary-hover);
+  }
+
+  .oc-panel-button--danger:not(.n-button) {
+    @apply border-rose-200 bg-rose-50 text-rose-700;
+    box-shadow: 4px 4px 0 0 rgb(244 63 94 / 10%);
+  }
+
+  .oc-panel-button--danger:not(.n-button):hover,
+  .oc-panel-button--danger:not(.n-button):focus-visible {
+    @apply border-rose-300 bg-rose-100 text-rose-800;
+    box-shadow: 5px 5px 0 0 rgb(244 63 94 / 14%);
+  }
+
+  .oc-panel-button--amber:not(.n-button) {
+    @apply border-amber-200 bg-amber-50 text-amber-800;
+    box-shadow: 4px 4px 0 0 rgb(245 158 11 / 10%);
+  }
+
+  .oc-panel-button--amber:not(.n-button):hover,
+  .oc-panel-button--amber:not(.n-button):focus-visible {
+    @apply border-amber-300 bg-amber-100 text-amber-900;
+    box-shadow: 5px 5px 0 0 rgb(245 158 11 / 14%);
+  }
+
+  .oc-icon-button {
+    @apply flex h-10 w-10 shrink-0 items-center justify-center border border-slate-200 bg-white text-slate-600;
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  .oc-icon-button:hover,
+  .oc-icon-button:focus-visible,
+  .oc-map-button:hover,
+  .oc-map-button:focus-visible {
+    @apply border-teal-200 bg-teal-50 text-teal-800;
+    box-shadow: var(--oc-shadow-primary);
+  }
+
+  .oc-icon-button--small {
+    @apply h-8 w-8;
+  }
+
+  .oc-icon-button--tiny {
+    @apply h-6 w-6 text-xs;
+    box-shadow: 2px 2px 0 0 rgb(15 23 42 / 8%);
+  }
+
+  .oc-icon-button--sky {
+    @apply border-sky-200 bg-sky-50 text-sky-700;
+    box-shadow: 3px 3px 0 0 rgb(14 165 233 / 12%);
+  }
+
+  .oc-icon-button--sky:hover,
+  .oc-icon-button--sky:focus-visible {
+    @apply border-sky-300 bg-sky-100 text-sky-900;
+    box-shadow: 4px 4px 0 0 rgb(14 165 233 / 16%);
+  }
+
+  .oc-icon-button--danger {
+    @apply border-rose-300 bg-rose-500 text-white;
+    box-shadow: 3px 3px 0 0 rgb(159 18 57 / 18%);
+  }
+
+  .oc-icon-button--danger:hover,
+  .oc-icon-button--danger:focus-visible {
+    @apply border-rose-400 bg-rose-600 text-white;
+    box-shadow: 4px 4px 0 0 rgb(159 18 57 / 22%);
+  }
+
+  .oc-overlay-button {
+    @apply flex shrink-0 items-center justify-center text-white/75 hover:bg-white/10 hover:text-white;
+    transition:
+      background-color var(--oc-duration-fast) var(--oc-ease-standard),
+      color var(--oc-duration-fast) var(--oc-ease-standard),
+      transform var(--oc-duration-fast) var(--oc-ease-standard);
+  }
+
+  .oc-text-button {
+    @apply inline-flex items-center font-medium text-sky-700 underline-offset-4 hover:text-sky-900 hover:underline;
+  }
+
+  .oc-text-button--muted {
+    @apply text-slate-500 hover:text-slate-800;
+  }
+
+  .oc-text-button--danger {
+    @apply text-rose-600 hover:text-rose-800;
+  }
+
+  .oc-choice-button {
+    @apply inline-flex min-h-9 items-center justify-center border px-3 py-2 text-sm font-medium;
+  }
+
+  .oc-choice-button--inactive {
+    @apply border-slate-200 bg-white text-slate-600 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  .oc-choice-button--active {
+    @apply border-teal-200 bg-teal-50 text-teal-800;
+    box-shadow: var(--oc-shadow-primary);
+  }
+
+  .oc-menu-item {
+    @apply flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-teal-50 hover:text-teal-800;
+  }
+
+  .oc-menu-item--danger {
+    @apply text-rose-600 hover:bg-rose-50 hover:text-rose-700;
+  }
+
+  .oc-menu-item--amber {
+    @apply hover:bg-amber-50 hover:text-amber-700;
+  }
+
+  .oc-nav-link {
+    @apply px-3 py-2 text-sm font-medium uppercase tracking-[0.12em];
+  }
+
+  .oc-header-button {
+    @apply inline-flex h-8 items-center justify-center border px-3 text-sm font-medium md:h-10 md:px-4;
+  }
+
+  .oc-header-button--neutral {
+    @apply border-slate-200 bg-white/80 text-slate-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  .oc-header-button--sky {
+    @apply border-sky-200 bg-sky-100 text-sky-800 hover:border-sky-300 hover:bg-sky-50 hover:text-sky-900;
+    box-shadow: var(--oc-shadow-sky);
+  }
+
+  .oc-header-button--teal {
+    @apply border-teal-100 bg-white/80 text-teal-700 hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800;
+    box-shadow: var(--oc-shadow-teal);
+  }
+
+  .oc-header-button:hover {
+    box-shadow: 5px 5px 0 0 rgb(15 23 42 / 8%);
+  }
+
+  .oc-interactive-card:focus-visible {
+    @apply outline-none ring-2 ring-sky-600 ring-offset-2;
+  }
+
+  .oc-interactive-row {
+    transition:
+      background-color var(--oc-duration-fast) var(--oc-ease-standard),
+      color var(--oc-duration-fast) var(--oc-ease-standard),
+      box-shadow var(--oc-duration-fast) var(--oc-ease-standard);
+  }
+
+  .oc-interactive-row:hover {
+    @apply bg-sky-50/60;
+  }
+
+  .oc-interactive-row:focus-visible,
+  .oc-heatmap-cell:focus-visible {
+    @apply outline-none ring-2 ring-sky-600 ring-offset-2;
+  }
+
+  .oc-heatmap-cell {
+    transition:
+      border-color var(--oc-duration-fast) var(--oc-ease-standard),
+      box-shadow var(--oc-duration-fast) var(--oc-ease-standard),
+      transform var(--oc-duration-fast) var(--oc-ease-standard);
+  }
+
+  :is(
+    .oc-primary-button,
+    .oc-panel-button,
+    .oc-header-button,
+    .oc-icon-button,
+    .oc-overlay-button,
+    .oc-map-button,
+    .oc-choice-button,
+    .oc-text-button,
+    .oc-menu-item,
+    .oc-nav-link
+  ):focus-visible {
+    outline: 2px solid rgb(2 132 199);
+    outline-offset: 2px;
+  }
+
+  .oc-overlay-button:focus-visible {
+    outline-color: rgb(125 211 252);
+  }
+
+  :is(.oc-panel-button, .oc-header-button, .oc-icon-button, .oc-map-button, .oc-choice-button):disabled {
+    @apply cursor-not-allowed border-slate-200 bg-slate-100 text-slate-400 shadow-none;
+    transform: none !important;
+  }
+
+  .oc-map-button:disabled {
+    box-shadow: var(--oc-shadow-xs);
+  }
+
+  :is(.oc-panel-button, .oc-primary-button, .oc-header-button, .oc-icon-button, .oc-map-button, .oc-choice-button):not(:disabled):active {
+    transform: translate(0, 0);
   }
 
   .oc-system-page {
@@ -141,6 +403,16 @@
       transform var(--oc-duration-fast) var(--oc-ease-standard);
   }
 
+  .oc-primary-button.n-button.n-button--disabled,
+  .oc-panel-button.n-button.n-button--disabled {
+    border-color: rgb(226 232 240) !important;
+    background: rgb(241 245 249) !important;
+    color: rgb(148 163 184) !important;
+    box-shadow: none !important;
+    opacity: 0.72;
+    transform: none !important;
+  }
+
   .oc-primary-button.n-button .n-button__content,
   .oc-panel-button.n-button .n-button__content {
     font-weight: 500;
@@ -157,21 +429,21 @@
   }
 
   .oc-primary-button--teal.n-button {
-    border-color: rgb(153 246 228) !important;
-    background: rgb(255 255 255) !important;
-    color: rgb(17 94 89) !important;
+    border-color: var(--color-teal-200) !important;
+    background: white !important;
+    color: var(--color-teal-700) !important;
     box-shadow: var(--oc-shadow-teal) !important;
   }
 
   .oc-primary-button--teal.n-button:hover,
   .oc-primary-button--teal.n-button:focus-visible {
-    border-color: rgb(94 234 212) !important;
-    background: rgb(234 250 245) !important;
-    color: rgb(19 78 74) !important;
+    border-color: var(--color-teal-300) !important;
+    background: var(--color-teal-50) !important;
+    color: var(--color-teal-800) !important;
   }
 
   .oc-primary-button--teal.n-button:not(.n-button--disabled):hover {
-    box-shadow: 5px 5px 0 0 rgb(20 184 166 / 14%) !important;
+    box-shadow: var(--oc-shadow-primary-hover) !important;
   }
 
   .oc-primary-button--sky.n-button {
@@ -193,27 +465,27 @@
   }
 
   .oc-panel-button.n-button {
-    --n-color: rgb(255 255 255) !important;
-    --n-color-hover: rgb(240 253 250) !important;
-    --n-color-pressed: rgb(236 253 245) !important;
+    --n-color: white !important;
+    --n-color-hover: var(--color-teal-50) !important;
+    --n-color-pressed: var(--color-teal-100) !important;
     --n-border: 1px solid rgb(226 232 240) !important;
-    --n-border-hover: 1px solid rgb(153 246 228) !important;
-    --n-border-pressed: 1px solid rgb(94 234 212) !important;
+    --n-border-hover: 1px solid var(--color-teal-200) !important;
+    --n-border-pressed: 1px solid var(--color-teal-300) !important;
     --n-text-color: rgb(71 85 105) !important;
-    --n-text-color-hover: rgb(19 78 74) !important;
-    --n-text-color-pressed: rgb(17 94 89) !important;
+    --n-text-color-hover: var(--color-teal-800) !important;
+    --n-text-color-pressed: var(--color-teal-700) !important;
     border-color: rgb(226 232 240) !important;
-    background: rgb(255 255 255) !important;
+    background: white !important;
     color: rgb(71 85 105) !important;
     box-shadow: var(--oc-shadow-xs) !important;
   }
 
   .oc-panel-button--neutral.n-button:hover,
   .oc-panel-button--neutral.n-button:focus-visible {
-    border-color: rgb(153 246 228) !important;
-    background: rgb(240 253 250) !important;
-    color: rgb(19 78 74) !important;
-    box-shadow: 4px 4px 0 0 rgb(20 184 166 / 10%) !important;
+    border-color: var(--color-teal-200) !important;
+    background: var(--color-teal-50) !important;
+    color: var(--color-teal-800) !important;
+    box-shadow: var(--oc-shadow-primary) !important;
   }
 
   .oc-panel-button--sky.n-button {
@@ -241,27 +513,27 @@
   }
 
   .oc-panel-button--teal.n-button {
-    --n-color: rgb(242 250 247) !important;
-    --n-color-hover: rgb(234 250 245) !important;
-    --n-color-pressed: rgb(220 252 231) !important;
-    --n-border: 1px solid rgb(153 246 228) !important;
-    --n-border-hover: 1px solid rgb(94 234 212) !important;
-    --n-border-pressed: 1px solid rgb(45 212 191) !important;
-    --n-text-color: rgb(17 94 89) !important;
-    --n-text-color-hover: rgb(19 78 74) !important;
-    --n-text-color-pressed: rgb(19 78 74) !important;
-    border-color: rgb(153 246 228) !important;
-    background: rgb(242 250 247) !important;
-    color: rgb(17 94 89) !important;
+    --n-color: var(--color-teal-50) !important;
+    --n-color-hover: var(--color-teal-100) !important;
+    --n-color-pressed: var(--color-teal-200) !important;
+    --n-border: 1px solid var(--color-teal-200) !important;
+    --n-border-hover: 1px solid var(--color-teal-300) !important;
+    --n-border-pressed: 1px solid var(--color-teal-400) !important;
+    --n-text-color: var(--color-teal-700) !important;
+    --n-text-color-hover: var(--color-teal-800) !important;
+    --n-text-color-pressed: var(--color-teal-800) !important;
+    border-color: var(--color-teal-200) !important;
+    background: var(--color-teal-50) !important;
+    color: var(--color-teal-700) !important;
     box-shadow: var(--oc-shadow-teal) !important;
   }
 
   .oc-panel-button--teal.n-button:hover,
   .oc-panel-button--teal.n-button:focus-visible {
-    border-color: rgb(94 234 212) !important;
-    background: rgb(234 250 245) !important;
-    color: rgb(19 78 74) !important;
-    box-shadow: 5px 5px 0 0 rgb(20 184 166 / 14%) !important;
+    border-color: var(--color-teal-300) !important;
+    background: var(--color-teal-100) !important;
+    color: var(--color-teal-800) !important;
+    box-shadow: var(--oc-shadow-primary-hover) !important;
   }
 
   .oc-panel-button--danger.n-button {