@stn-uiux/pub-ui 0.1.59 → 0.1.60

package/styles/layouts/stn-layer1-content.css

@@ -177,6 +177,8 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  padding: var(--stn-space-16);
+  overflow: hidden;
 }
 
 .stn-layer-1__body > .stn-container.is-scrollable {
@@ -194,6 +196,13 @@
   height: 100%;
 }
 
+/* 스크롤 가능한 컨테이너 내부의 Grid/Stack은 고정 100%에 갇히지 않고 내용물 전체를 감싸도록 확장 */
+.stn-layer-1__body .stn-container.is-scrollable > .stn-grid,
+.stn-layer-1__body .stn-container.is-scrollable > .stn-stack {
+  height: auto;
+  flex: 0 0 auto;
+}
+
 /* 스크롤+패딩 영역. `.stn-dashboard-scroll-wrap` 은 하위 호환 alias */
 .stn-scroll-region,
 .stn-dashboard-scroll-wrap {
@@ -202,7 +211,6 @@
   overflow-y: auto;
   overflow-x: hidden;
   box-sizing: border-box;
-  padding: var(--stn-spacing-stack-12, var(--stn-space-12, 12px));
 }
 
 .stn-scroll-region > .stn-grid,
@@ -316,106 +324,75 @@
 }
 
 /* ==========================================================================
-   6. List View Layout (StnContainer + StnStack)
+   6. List view — 모바일/태블릿 반응형 (스크롤 & LNB/테이블 높이)
    ========================================================================== */
-.stn-list-page-container,
-.stn-list-view-layout__body {
-  flex: 1 1 0%;
-  min-height: 0;
-  height: 100%;
-  padding: var(--stn-space-16);
-  box-sizing: border-box;
-  overflow: hidden;
-  container-type: inline-size;
-  container-name: stn-list-container;
-}
+@media (max-width: 1279px) {
+  /* 태블릿/모바일(column)에서는 본문 컨테이너가 스크롤되어 LNB -> 검색바 -> 테이블 순으로 전체 탐색 가능 */
+  .stn-layer-1__body > .stn-container {
+    overflow-y: auto !important;
+    overflow-x: hidden;
+  }
 
-.stn-list-page-main,
-.stn-list-view__main {
-  flex: 1 1 0%;
-  min-height: 0;
-  height: 100%;
-  width: 100%;
-}
+  .stn-layer-1__body .stn-container > .stn-stack {
+    height: auto !important;
+    min-height: 100%;
+  }
 
-.stn-list-page-main > .stn-page-scaffold__lnb,
-.stn-list-view__main > .stn-page-scaffold__lnb {
-  width: var(--stn-list-lnb-width);
-  flex-shrink: 0;
-  align-self: stretch;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-}
+  .stn-list-lnb {
+    width: 100% !important;
+    max-height: 40vh;
+    flex-shrink: 0;
+  }
 
-.stn-list-page-content-stack,
-.stn-list-view__content-stack {
-  flex: 1 1 0%;
-  min-width: 0;
-  min-height: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
+  /* 모바일 접힘 시 아코디언 헤더만 표시 */
+  .stn-list-lnb.is-collapsed {
+    max-height: none;
+    width: 100% !important;
+  }
 
-.stn-list-page-content-stack > .search_area,
-.stn-list-view__content-stack > .search_area {
-  flex-shrink: 0;
-  width: 100%;
-}
+  .stn-list-lnb.is-collapsed .stn-section-side.is-collapsed {
+    width: 100% !important;
+    min-width: 0 !important;
+    padding: var(--stn-space-8) var(--stn-space-12);
+  }
 
-.stn-list-page-content-stack > .content_box,
-.stn-list-view__content-stack > .content_box {
-  flex: 1 1 0%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
+  .stn-list-lnb.is-collapsed .stn-section-side.is-collapsed .stn-scroll {
+    display: none !important;
+  }
 
-/* ─────────────────────────────────────────────────────────────
- * 반응형: 사이드 네비 펼침/접힘 또는 뷰포트 축소로 너비 협소 시 (<= 1024px)
- * Tree(LNB Aside)를 좌측에서 상단(Top) 전체 너비로 전환
- * 부모 컨테이너 선택자로 상세도를 확보하여 !important 없이 깔끔하게 재정의
- * ───────────────────────────────────────────────────────────── */
-@container stn-list-container (max-width: 1024px) {
-  .stn-list-page-container .stn-list-page-main,
-  .stn-list-view-layout__body .stn-list-view__main {
-    flex-direction: column;
-    gap: var(--stn-spacing-list-lnb-gap, var(--stn-space-16));
-    overflow: hidden;
+  .stn-list-lnb.is-collapsed .stn-list-lnb__header-title {
+    display: flex !important;
   }
 
-  .stn-list-page-container .stn-list-page-main > .stn-page-scaffold__lnb,
-  .stn-list-view-layout__body .stn-list-view__main > .stn-page-scaffold__lnb {
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    max-height: var(--stn-layout-list-tree-top-max-height);
+  .stn-list-lnb.is-collapsed .stn-list-lnb__header-row {
+    justify-content: space-between !important;
+  }
+
+  /* 테이블 영역 모바일 최소 높이 보장 */
+  .stn-layer-1__body .stn-container > .stn-stack > .stn-stack {
+    height: auto !important;
+    min-height: var(--stn-layout-list-mobile-table-min-height);
+  }
+}
+
+/* 데스크톱(lg ≥ 1280px): 기본 264px 고정, 접힘 시 56px 레일 */
+@media (min-width: 1280px) {
+  .stn-list-lnb {
+    width: var(--stn-list-lnb-width);
+    height: 100%;
     flex-shrink: 0;
-    align-self: stretch;
-    overflow: hidden;
+    transition: width 0.2s ease;
   }
 
-  .stn-list-page-container .stn-page-scaffold__lnb .stn-section-side,
-  .stn-list-view-layout__body .stn-page-scaffold__lnb .stn-section-side {
-    height: auto;
-    max-height: var(--stn-layout-list-tree-top-max-height);
+  .stn-list-lnb.is-collapsed {
+    width: var(--stn-list-lnb-collapsed-width);
   }
 
-  .stn-list-page-container .stn-page-scaffold__lnb .stn-section-side__body,
-  .stn-list-view-layout__body .stn-page-scaffold__lnb .stn-section-side__body {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
+  .stn-list-lnb.is-collapsed .stn-list-lnb__header-title {
+    display: none !important;
   }
 
-  .stn-list-page-container .stn-list-page-content-stack,
-  .stn-list-view-layout__body .stn-list-view__content-stack {
-    flex: 1 1 0%;
-    min-height: 0;
-    width: 100%;
+  .stn-list-lnb.is-collapsed .stn-list-lnb__header-row {
+    justify-content: center !important;
   }
 }
-

package/styles/patterns/stn-section-side.css

@@ -53,36 +53,6 @@
   scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
 }
 
-.stn-section-side > .stn-section-side__body.stn-scroll::-webkit-scrollbar,
-.stn-section-side > .stn-scroll::-webkit-scrollbar {
-  width: var(--stn-scroll-width-thin, 4px);
-  height: var(--stn-scroll-width-thin, 4px);
-  background: var(--stn-scroll-track);
-}
-
-.stn-section-side > .stn-section-side__body.stn-scroll::-webkit-scrollbar-track,
-.stn-section-side > .stn-scroll::-webkit-scrollbar-track {
-  background: var(--stn-scroll-track);
-}
-
-.stn-section-side > .stn-section-side__body.stn-scroll::-webkit-scrollbar-thumb,
-.stn-section-side > .stn-scroll::-webkit-scrollbar-thumb {
-  background: var(--stn-scroll-thumb);
-  border-radius: var(--stn-scroll-radius-thin, 2px);
-}
-
-.stn-section-side > .stn-section-side__body.stn-scroll::-webkit-scrollbar-thumb:hover,
-.stn-section-side > .stn-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--stn-scroll-thumb-hover);
-}
-
-/* OS 기본 화살표 버튼(arrow) 완전 숨김 */
-.stn-section-side > .stn-section-side__body.stn-scroll::-webkit-scrollbar-button,
-.stn-section-side > .stn-scroll::-webkit-scrollbar-button {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-}
 
 
 /* 상단 고정 헤더 (제목, 탭, 검색바 등) */
@@ -104,3 +74,19 @@
   padding-top: var(--stn-space-8, 8px);
   border-top: 1px solid var(--stn-border-subtle, rgba(255, 255, 255, 0.08));
 }
+
+/* ─────────────────────────────────────────────────────────────
+ * 접힌 상태 (레일 모드 — 너비 56px)
+ * ───────────────────────────────────────────────────────────── */
+.stn-section-side.is-collapsed {
+  width: var(--stn-list-lnb-collapsed-width);
+  min-width: var(--stn-list-lnb-collapsed-width);
+  padding: var(--stn-space-8) var(--stn-space-4);
+  transition: width 0.2s ease;
+}
+
+.stn-section-side.is-collapsed .stn-section-side__header {
+  align-items: center;
+  margin-bottom: var(--stn-space-8);
+}
+

package/styles/patterns/stn-tree.css

@@ -13,13 +13,13 @@
 .stn-tree__heading {
   display: flex;
   align-items: center;
-  min-height: 24px;
+  min-height: var(--stn-tree-row-height);
   margin: 0;
   padding: 0 var(--stn-spacing-tree-label-pad-inline);
   color: var(--stn-tree-heading);
-  font-size: var(--stn-text-body-small-size);
-  font-weight: var(--stn-font-weight-bold, 700);
-  line-height: 1;
+  font-size: var(--stn-tree-heading-font-size);
+  font-weight: var(--stn-tree-heading-font-weight);
+  line-height: var(--stn-tree-heading-line-height);
 }
 
 .stn-tree__rows {
@@ -32,19 +32,21 @@
 .stn-tree__row {
   display: flex;
   align-items: center;
-  min-height: 24px;
+  min-height: var(--stn-tree-row-height);
   width: 100%;
-  border-radius: var(--stn-radius-4, 4px);
-  border: 1px solid transparent;
+  border-radius: var(--stn-radius-tree-row);
+  border: var(--stn-tree-border-width) solid transparent;
   box-sizing: border-box;
   cursor: pointer;
   user-select: none;
-  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: background-color var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out),
+              border-color var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out),
+              box-shadow var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__row:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
 }
 
 /* Interaction — selected 토큰 · hover/pressed는 selected의 약한/강한 면 */
@@ -70,11 +72,11 @@
 .stn-tree__cell {
   box-sizing: border-box;
   display: inline-flex;
-  flex: 0 0 24px;
+  flex: 0 0 var(--stn-tree-cell-size);
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-cell-size);
+  height: var(--stn-tree-cell-size);
 }
 
 .stn-tree__cell--blank {
@@ -83,19 +85,19 @@
 }
 
 .stn-tree__cell--icon {
-  flex-basis: 24px;
+  flex-basis: var(--stn-tree-cell-size);
 }
 
 .stn-tree__guide {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-guide-size);
+  height: var(--stn-tree-guide-size);
 }
 
 .stn-tree__guide-glyph {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: var(--stn-tree-guide-size);
+  height: var(--stn-tree-guide-size);
   background-color: var(--stn-tree-guide);
   mask-position: center;
   mask-size: contain;
@@ -107,8 +109,8 @@
 
 .stn-tree__chevron-glyph {
   display: block;
-  width: 12px;
-  height: 12px;
+  width: var(--stn-tree-chevron-size);
+  height: var(--stn-tree-chevron-size);
   background-color: var(--stn-tree-chevron);
   mask-position: center;
   mask-size: contain;
@@ -117,7 +119,7 @@
   -webkit-mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   transform: rotate(180deg);
-  transition: transform 0.15s ease;
+  transition: transform var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__chevron-glyph.is-expanded {
@@ -133,21 +135,21 @@
 }
 
 .stn-tree__toggle:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
-  border-radius: 2px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
+  border-radius: var(--stn-radius-tree-toggle-focus);
 }
 
 .stn-tree__chevron {
   display: block;
-  width: 12px;
-  height: 12px;
+  width: var(--stn-tree-chevron-size);
+  height: var(--stn-tree-chevron-size);
 }
 
 .stn-tree__icon-glyph {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: var(--stn-tree-icon-size);
+  height: var(--stn-tree-icon-size);
   mask-position: center;
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -174,8 +176,8 @@
 }
 
 .stn-tree__icon--server .stn-tree__icon-glyph {
-  width: 16px;
-  height: 16px;
+  width: var(--stn-tree-icon-size);
+  height: var(--stn-tree-icon-size);
 }
 
 /* fill/server_2 — 본색 SVG. 다크 invert 제외(stn-pub-icon--color) */
@@ -205,14 +207,14 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: var(--stn-text-body-medium-size);
-  font-weight: var(--stn-font-weight-regular);
-  line-height: 1;
+  font-size: var(--stn-tree-label-font-size);
+  font-weight: var(--stn-tree-label-font-weight);
+  line-height: var(--stn-tree-label-line-height);
 }
 
 .stn-tree__row.is-bold .stn-tree__label,
 .stn-tree__label.is-bold {
-  font-weight: var(--stn-font-weight-bold, 700);
+  font-weight: var(--stn-tree-label-font-weight-bold);
 }
 
 .stn-tree__row--root .stn-tree__label {
@@ -264,24 +266,24 @@
 /* ── 너비 규격 수식어 (Tree 권장 표준 규격: w80~w240, full) ──
  * STN 표준 규격: .w80, .w100, .w120, .w140, .w160, .w180, .w200, .w220, .w240, .full
  * ──────────────────────────────────────────────────────── */
-.stn-tree.w80 { width: var(--stn-size-80, 80px); }
-.stn-tree.w100 { width: var(--stn-size-100, 100px); }
-.stn-tree.w120 { width: var(--stn-size-120, 120px); }
-.stn-tree.w140 { width: var(--stn-size-140, 140px); }
-.stn-tree.w160 { width: var(--stn-size-160, 160px); }
-.stn-tree.w180 { width: var(--stn-size-180, 180px); }
-.stn-tree.w200 { width: var(--stn-size-200, 200px); }
-.stn-tree.w220 { width: var(--stn-size-220, 220px); }
-.stn-tree.w240 { width: var(--stn-size-240, 240px); }
+.stn-tree.w80 { width: var(--stn-size-80); }
+.stn-tree.w100 { width: var(--stn-size-100); }
+.stn-tree.w120 { width: var(--stn-size-120); }
+.stn-tree.w140 { width: var(--stn-size-140); }
+.stn-tree.w160 { width: var(--stn-size-160); }
+.stn-tree.w180 { width: var(--stn-size-180); }
+.stn-tree.w200 { width: var(--stn-size-200); }
+.stn-tree.w220 { width: var(--stn-size-220); }
+.stn-tree.w240 { width: var(--stn-size-240); }
 .stn-tree.full { width: 100%; }
 
 /* ── 선택/호버 테두리 곡률 수식어 (Border Radius) ────────────
  * radius prop → .radius-none, .radius-sm, .radius-md, .radius-full
  * ──────────────────────────────────────────────────────── */
-.stn-tree.radius-none .stn-tree__row { border-radius: var(--stn-radius-0, 0px); }
-.stn-tree.radius-sm .stn-tree__row { border-radius: var(--stn-radius-4, 4px); }
-.stn-tree.radius-md .stn-tree__row { border-radius: var(--stn-radius-8, 8px); }
-.stn-tree.radius-full .stn-tree__row { border-radius: var(--stn-radius-circle, 9999px); }
+.stn-tree.radius-none .stn-tree__row { border-radius: var(--stn-radius-tree-row-none); }
+.stn-tree.radius-sm .stn-tree__row { border-radius: var(--stn-radius-tree-row-sm); }
+.stn-tree.radius-md .stn-tree__row { border-radius: var(--stn-radius-tree-row-md); }
+.stn-tree.radius-full .stn-tree__row { border-radius: var(--stn-radius-tree-row-full); }
 
 /* ── 가시성(눈) 토글 버튼 및 숨김 상태 ──────────────────────
  * showVisibilityToggle={true} 일 때 행 우측 끝에 표시됩니다.
@@ -291,16 +293,16 @@
   align-items: center;
   justify-content: center;
   margin-left: auto;
-  margin-right: var(--stn-space-4, 4px);
+  margin-right: var(--stn-tree-visibility-btn-margin-inline-end);
   padding: 0;
-  width: 20px;
-  height: 20px;
+  width: var(--stn-tree-visibility-btn-size);
+  height: var(--stn-tree-visibility-btn-size);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--stn-radius-2, 2px);
+  border-radius: var(--stn-radius-tree-visibility-btn);
   opacity: 0.7;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--stn-motion-duration-fast) var(--stn-motion-ease-ease-out);
 }
 
 .stn-tree__visibility-btn:hover {
@@ -308,15 +310,15 @@
 }
 
 .stn-tree__visibility-btn:focus-visible {
-  outline: 2px solid var(--stn-tree-focus);
-  outline-offset: 1px;
+  outline: var(--stn-tree-focus-ring-width) solid var(--stn-tree-focus);
+  outline-offset: var(--stn-tree-focus-ring-offset);
 }
 
 .stn-tree__visibility-glyph {
   display: block;
-  width: 14px;
-  height: 14px;
-  background-color: var(--stn-text-tertiary, #8b93a1);
+  width: var(--stn-tree-visibility-icon-size);
+  height: var(--stn-tree-visibility-icon-size);
+  background-color: var(--stn-text-tertiary);
   mask-position: center;
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -326,7 +328,7 @@
 }
 
 .stn-tree__visibility-glyph.is-off {
-  background-color: var(--stn-text-disabled, #a0aec0);
+  background-color: var(--stn-text-disabled);
 }
 
 /* 숨김/미사용 처리된 노드 — 텍스트/아이콘 반투명(dimmed) */
@@ -343,12 +345,12 @@
   align-items: center;
   justify-content: center;
   font-family: var(--stn-font-number, var(--stn-font-body));
-  font-size: var(--stn-font-size-11, 11px);
-  font-weight: var(--stn-font-weight-medium, 500);
-  line-height: 1;
-  color: var(--stn-text-tertiary, var(--stn-gray-400));
+  font-size: var(--stn-tree-count-font-size);
+  font-weight: var(--stn-tree-count-font-weight);
+  line-height: var(--stn-tree-count-line-height);
+  color: var(--stn-text-tertiary);
   margin-left: auto;
-  margin-right: var(--stn-space-6, 6px);
+  margin-right: var(--stn-tree-count-margin-inline-end);
   flex-shrink: 0;
 }
 
@@ -371,16 +373,16 @@
  * ──────────────────────────────────────────────────────── */
 
 /* xs — 20px: 초밀집 사이드바 목록 */
-.stn-tree.xs .stn-tree__row { min-height: 20px; }
-.stn-tree.xs .stn-tree__cell { height: 20px; }
+.stn-tree.xs .stn-tree__row { min-height: var(--stn-tree-row-height-xs); }
+.stn-tree.xs .stn-tree__cell { height: var(--stn-tree-row-height-xs); }
 
 /* sm — 24px: 기본 콤팩트 */
-.stn-tree.sm .stn-tree__row { min-height: 24px; }
-.stn-tree.sm .stn-tree__cell { height: 24px; }
+.stn-tree.sm .stn-tree__row { min-height: var(--stn-tree-row-height-sm); }
+.stn-tree.sm .stn-tree__cell { height: var(--stn-tree-row-height-sm); }
 
 /* md — 32px: comfortable */
-.stn-tree.md .stn-tree__row { min-height: 32px; }
-.stn-tree.md .stn-tree__cell { height: 32px; }
+.stn-tree.md .stn-tree__row { min-height: var(--stn-tree-row-height-md); }
+.stn-tree.md .stn-tree__cell { height: var(--stn-tree-row-height-md); }
 .stn-tree.md .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
@@ -392,8 +394,8 @@
 }
 
 /* lg — 40px: spacious */
-.stn-tree.lg .stn-tree__row { min-height: 40px; }
-.stn-tree.lg .stn-tree__cell { height: 40px; }
+.stn-tree.lg .stn-tree__row { min-height: var(--stn-tree-row-height-lg); }
+.stn-tree.lg .stn-tree__cell { height: var(--stn-tree-row-height-lg); }
 .stn-tree.lg .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
@@ -405,8 +407,8 @@
 }
 
 /* xl — 48px: extra spacious */
-.stn-tree.xl .stn-tree__row { min-height: 48px; }
-.stn-tree.xl .stn-tree__cell { height: 48px; }
+.stn-tree.xl .stn-tree__row { min-height: var(--stn-tree-row-height-xl); }
+.stn-tree.xl .stn-tree__cell { height: var(--stn-tree-row-height-xl); }
 .stn-tree.xl .stn-tree__cell--guide {
   align-self: stretch;
   height: auto;
@@ -416,3 +418,24 @@
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 }
+
+/* ── 접힌 레일 모드 (.is-collapsed) ─────────────────────────
+ * collapsed prop → LNB 축소 레일 모드 시 아이콘만 세로 중앙 정렬
+ * ──────────────────────────────────────────────────────── */
+.stn-tree.is-collapsed .stn-tree__heading,
+.stn-tree.is-collapsed .stn-tree__cell:not(.stn-tree__cell--icon),
+.stn-tree.is-collapsed .stn-tree__label,
+.stn-tree.is-collapsed .stn-tree__count,
+.stn-tree.is-collapsed .stn-tree__visibility-btn {
+  display: none;
+}
+
+.stn-tree.is-collapsed .stn-tree__row {
+  justify-content: center;
+  padding: var(--stn-tree-collapsed-row-padding-block) 0;
+  min-height: var(--stn-tree-collapsed-row-height);
+}
+
+.stn-tree.is-collapsed .stn-tree__cell--icon {
+  margin: 0 auto;
+}

package/styles/tokens/stn-colors-semantic.css

@@ -135,7 +135,7 @@
   --stn-table-pill-shadow: 1px 1px 4px color-mix(in srgb, var(--stn-static-black) 10%, transparent);
   --stn-table-row-hover: var(--stn-gray-900);
   --stn-table-td-fg: var(--stn-gray-50);
-  --stn-table-th-bg: var(--stn-opacity-white-5);
+  --stn-table-th-bg: var(--stn-gray-800);
   --stn-table-th-fg: var(--stn-gray-350);
   --stn-table-th-radius: 8px;
   --stn-pagination-active-bg: var(--stn-opacity-white-10);
@@ -704,7 +704,7 @@
   --stn-table-pill-shadow: 1px 1px 2px color-mix(in srgb, var(--stn-static-black) 10%, transparent);
   --stn-table-row-hover: var(--stn-gray-25);
   --stn-table-td-fg: var(--stn-gray-750);
-  --stn-table-th-bg: var(--stn-opacity-black-5);
+  --stn-table-th-bg: var(--stn-gray-50);
   --stn-table-th-fg: var(--stn-gray-700);
   --stn-table-th-radius: 4px;
   --stn-pagination-active-bg: var(--stn-opacity-black-5);

package/styles/tokens/stn-radius-semantic.css

@@ -57,6 +57,10 @@
   --stn-side-nav-mobile-trigger-radius: var(--stn-radius-8);
   --stn-side-nav-drawer-close-radius: var(--stn-radius-6);
   --stn-side-nav-scroll-radius: var(--stn-radius-2);
+  --stn-scroll-radius: var(--stn-radius-4);
+  --stn-scroll-radius-thin: var(--stn-radius-2);
+  --stn-scroll-radius-default: var(--stn-radius-4);
+  --stn-scroll-radius-thick: var(--stn-radius-6);
   --stn-radius-badge: var(--stn-radius-8);
   --stn-skeleton-radius-sm: var(--stn-radius-4);
   --stn-skeleton-radius-md: var(--stn-radius-8);
@@ -68,4 +72,11 @@
   --stn-widget-appearance-radius: var(--stn-radius-8);
   --stn-widget-scrollbar-radius: var(--stn-radius-4);
   --stn-search-requirement-radius: var(--stn-radius-8);
+  --stn-radius-tree-row: var(--stn-radius-4);
+  --stn-radius-tree-row-none: var(--stn-radius-0);
+  --stn-radius-tree-row-sm: var(--stn-radius-4);
+  --stn-radius-tree-row-md: var(--stn-radius-8);
+  --stn-radius-tree-row-full: var(--stn-radius-circle);
+  --stn-radius-tree-toggle-focus: var(--stn-radius-2);
+  --stn-radius-tree-visibility-btn: var(--stn-radius-2);
 }