style: refine process group tabs

src/components/process-ui/ProcessUi.css

@@ -36,27 +36,50 @@
   width: max-content;
   min-width: max-content;
   padding: 0;
-  gap: 8px;
+  gap: 10px;
 }
 .process-page__tabs .tabs__tab {
   flex: 0 0 auto;
 }
+.process-page__tabs .tabs__list-container,
+.process-page__tabs .tabs__list-container__scroller {
+  padding-bottom: 2px;
+  scroll-padding-left: 2px;
+}
 .process-group-tab {
-  width: 192px;
-  min-width: 192px;
-  min-height: 88px;
+  position: relative;
+  width: 180px;
+  min-width: 180px;
+  min-height: 74px;
   padding: 0;
   overflow: hidden;
   white-space: normal;
   text-align: start;
   border: 1px solid var(--separator);
-  border-radius: var(--radius);
+  border-radius: 10px;
   background: var(--surface);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03);
+  transition:
+    border-color 180ms ease,
+    background-color 180ms ease,
+    box-shadow 180ms ease;
 }
 .process-group-tab[aria-selected="true"],
 .process-group-tab[data-selected="true"] {
-  border-color: var(--accent);
-  background: var(--accent-soft);
+  border-color: color-mix(in oklab, var(--accent) 58%, var(--separator));
+  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+}
+.process-group-tab:hover:not([aria-selected="true"], [data-selected="true"]) {
+  border-color: color-mix(in oklab, var(--accent) 28%, var(--separator));
+  background: color-mix(in oklab, var(--accent) 3%, var(--surface));
+}
+.process-group-tab:active:not([aria-selected="true"], [data-selected="true"]) {
+  background: color-mix(in oklab, var(--accent) 5%, var(--surface));
+}
+.process-group-tab:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--accent) 72%, var(--separator));
+  outline-offset: 2px;
 }
 .process-group-tab__content {
   display: flex;
@@ -65,9 +88,9 @@
   align-items: flex-start;
   justify-content: space-between;
   width: 100%;
-  min-height: 86px;
-  padding: 12px 14px 10px;
-  gap: 8px;
+  min-height: 70px;
+  padding: 12px 14px;
+  gap: 10px;
 }
 .process-group-tab__title {
   display: block;
@@ -88,9 +111,14 @@
 }
 .process-group-tab__meta strong {
   color: var(--foreground);
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 600;
   line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.process-group-tab[aria-selected="true"] .process-group-tab__title,
+.process-group-tab[data-selected="true"] .process-group-tab__title {
+  color: color-mix(in oklab, var(--accent) 72%, var(--foreground));
 }
 .process-group-tab .tabs__indicator {
   height: 3px;
@@ -132,8 +160,9 @@
     width: 100%;
   }
   .process-group-tab {
-    width: 168px;
-    min-width: 168px;
+    width: 158px;
+    min-width: 158px;
+    min-height: 70px;
   }
   .process-editor {
     min-width: 620px;