@stn-uiux/pub-ui 0.1.76 → 0.1.78

package/styles/components/stn-popup.css

@@ -17,8 +17,8 @@
   box-sizing: border-box;
 }
 
-.stn-pop--open {
-  display: flex !important;
+.stn-pop.stn-pop--open {
+  display: flex;
   align-items: center;
   justify-content: center;
 }
@@ -41,8 +41,8 @@
   overflow: hidden;
   box-sizing: border-box;
   background-color: var(--stn-pop-surface);
-  border: 1px solid var(--stn-pop-border);
-  border-radius: var(--stn-radius-pop-wrap, var(--stn-radius-8));
+  border: var(--stn-pop-border-width) solid var(--stn-pop-border);
+  border-radius: var(--stn-radius-pop-wrap);
   box-shadow: var(--stn-pop-shadow);
 }
 
@@ -50,19 +50,28 @@
 .stn-pop__head {
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: var(--stn-pop-header-height, var(--stn-size-56));
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--stn-pop-head-gap);
+  min-height: var(--stn-pop-header-height);
   height: auto;
-  padding: 12px 48px 12px 20px;
+  padding: var(--stn-pop-head-padding-y) var(--stn-pop-head-padding-x);
   margin: 0;
-  border-bottom: 1px solid var(--stn-pop-divider);
+  border-bottom: var(--stn-pop-border-width) solid var(--stn-pop-divider);
+}
+
+.stn-pop__head-start {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  flex: 1 1 auto;
 }
 
 .stn-pop__head-row {
   display: flex;
   align-items: center;
-  gap: var(--stn-space-8, 8px);
+  gap: var(--stn-pop-head-row-gap);
   flex-wrap: wrap;
 }
 
@@ -71,24 +80,24 @@
   color: var(--stn-pop-title);
   font-family: var(--stn-font-body);
   font-size: var(--stn-text-title-medium-size);
-  line-height: var(--stn-line-height-tight, 1.25);
+  line-height: var(--stn-line-height-tight);
   font-weight: var(--stn-font-weight-semibold);
   letter-spacing: 0;
 }
 
 .stn-pop__subtitle {
-  margin: 4px 0 0 0;
+  margin: var(--stn-pop-subtitle-margin-top) 0 0 0;
   font-family: var(--stn-font-body);
   font-size: var(--stn-text-body-small-size);
   color: var(--stn-text-subtle);
-  line-height: var(--stn-line-height-normal, 1.5);
+  line-height: var(--stn-line-height-normal);
 }
 
 /* Body */
 .stn-pop__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: var(--stn-space-20, 20px);
+  padding: var(--stn-pop-body-padding);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
   background: transparent;
@@ -103,75 +112,8 @@
 /* 본문 레이아웃 — 배경은 .stn-pop__panel 만 (내부 투명) */
 .stn-pop__body .box_area,
 .stn-pop__body .box_area .box {
-  background: transparent !important;
-  background-color: transparent !important;
-  background-image: none !important;
-  box-shadow: none !important;
-}
-
-/* Close button — centered vertically in 56px header (top 14, right 16) */
-.stn-pop__close {
-  position: absolute;
-  top: 14px;
-  right: 16px;
-  box-sizing: border-box;
-  width: var(--stn-pop-close-size) !important;
-  height: var(--stn-pop-close-size) !important;
-  min-width: var(--stn-pop-close-size);
-  min-height: var(--stn-pop-close-size);
-  padding: 0;
-  border: none;
-  border-radius: var(--stn-radius-sm);
-  background-color: transparent;
-  background-image: none;
-  opacity: 1;
-  color: var(--stn-pop-title);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.stn-pop__close::before,
-.stn-pop__close::after {
-  content: none;
-  display: none;
-}
-
-/* Legacy HTML close (no React glyph) — Figma icon/line/x mask */
-.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph) {
-  background-color: transparent;
-  background-image: none;
-  -webkit-mask: none;
-  mask: none;
-  color: var(--stn-pop-title);
-}
-
-.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph)::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: var(--stn-pop-close-icon);
-  height: var(--stn-pop-close-icon);
-  margin: calc(var(--stn-pop-close-icon) / -2) 0 0 calc(var(--stn-pop-close-icon) / -2);
-  background-color: currentColor;
-  mask-image: url('../@assets/svg/system/line/x.svg');
-  mask-position: center;
-  mask-size: contain;
-  mask-repeat: no-repeat;
-  -webkit-mask-image: url('../@assets/svg/system/line/x.svg');
-  -webkit-mask-position: center;
-  -webkit-mask-size: contain;
-  -webkit-mask-repeat: no-repeat;
-}
-
-.stn-pop__close:not(.icon, .stn-btn--icon):not(.stn-icon-btn--with-glyph)::after {
-  content: none;
-  display: none;
-}
-
-.stn-pop__close:hover {
-  background-color: var(--stn-pop-close-hover-bg);
-  color: var(--stn-pop-close-hover-fg);
+  background: transparent;
+  box-shadow: none;
 }
 
 /* —— Size modifiers — active width on .stn-pop —— */
@@ -216,7 +158,7 @@
 
 /* 문서·패턴 프리뷰 — 인라인 시연 */
 .stn-pop-uc-inline.stn-pop {
-  display: flex !important;
+  display: flex;
   position: relative;
   top: auto;
   right: auto;
@@ -230,7 +172,7 @@
 .stn-pop-stack {
   position: fixed;
   inset: 0;
-  z-index: var(--stn-elevation-z-2, 200);
+  z-index: var(--stn-elevation-z-2);
   pointer-events: none;
 }
 
@@ -284,7 +226,7 @@
 .stn-pop-stack--inline {
   position: absolute;
   inset: 0;
-  z-index: var(--stn-elevation-z-2, 200);
+  z-index: var(--stn-elevation-z-2);
   min-height: 0;
   pointer-events: auto;
 }
@@ -292,24 +234,24 @@
 .stn-pop-stack--inline > .stn-layer-dim {
   position: absolute;
   inset: 0;
-  z-index: var(--stn-elevation-z-2, 200);
+  z-index: var(--stn-elevation-z-2);
   border-radius: inherit;
 }
 
 .stn-pop-stack--inline > .stn-layer-2 {
   position: absolute;
   inset: 0;
-  z-index: calc(var(--stn-elevation-z-2, 200) + 1);
+  z-index: calc(var(--stn-elevation-z-2) + 1);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--stn-pop-gutter, 16px);
+  padding: var(--stn-pop-gutter);
   box-sizing: border-box;
   pointer-events: none;
 }
 
 .stn-pop-stack--inline > .stn-layer-2 > .stn-pop {
-  display: flex !important;
+  display: flex;
   pointer-events: auto;
 }
 
@@ -319,12 +261,12 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-end;
-  gap: var(--stn-space-8, 8px);
+  gap: var(--stn-pop-actions-gap);
   box-sizing: border-box;
-  min-height: var(--stn-pop-footer-height, var(--stn-size-56));
+  min-height: var(--stn-pop-footer-height);
   margin-top: 0;
-  padding: 12px 20px;
-  border-top: 1px solid var(--stn-pop-divider);
+  padding: var(--stn-pop-actions-padding-y) var(--stn-pop-actions-padding-x);
+  border-top: var(--stn-pop-border-width) solid var(--stn-pop-divider);
   background-color: var(--stn-pop-surface);
 }
 
@@ -343,19 +285,19 @@
 /* —— Master-Detail Split Layout (.stn-pop-split) —— */
 .stn-pop-split {
   display: flex;
-  gap: var(--stn-space-20, 20px);
-  min-height: 400px;
+  gap: var(--stn-pop-split-gap);
+  min-height: var(--stn-pop-split-min-height);
   height: 100%;
   box-sizing: border-box;
 }
 
 .stn-pop-split__aside {
-  width: var(--stn-pop-split-aside-width, 280px);
-  min-width: var(--stn-pop-split-aside-width, 280px);
-  max-width: 320px;
+  width: var(--stn-pop-split-aside-width);
+  min-width: var(--stn-pop-split-aside-width);
+  max-width: var(--stn-pop-split-aside-max-width);
   flex-shrink: 0;
-  border-right: 1px solid var(--stn-pop-divider);
-  padding-right: var(--stn-space-16, 16px);
+  border-right: var(--stn-pop-border-width) solid var(--stn-pop-divider);
+  padding-right: var(--stn-pop-split-aside-padding-right);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
@@ -367,9 +309,7 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--stn-space-16, 16px);
+  gap: var(--stn-pop-split-main-gap);
   overflow-y: auto;
   box-sizing: border-box;
 }
-
-

package/styles/foundations/stn-typography.css

@@ -0,0 +1,166 @@
+@charset "utf-8";
+/**
+ * STN Design System — Typography Utilities (Type Scale)
+ * Foundation › Typography 문서의 Type Scale 이름을 그대로 클래스화합니다.
+ * 모든 값은 --stn-text-* / --stn-font-* 시맨틱 토큰만 사용합니다.
+ *
+ * 사용: <h1 class="stn-text-heading-1">페이지 제목</h1>
+ * 수정자: .stn-text-weight-*, .stn-text-color-*, .stn-text-truncate
+ */
+
+/* ── Display ───────────────────────────────────────────── */
+.stn-text-display-1 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-display-xlarge-size);
+  font-weight: var(--stn-text-display-xlarge-weight);
+  line-height: var(--stn-text-display-xlarge-line-height);
+}
+.stn-text-display-2 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-display-large-size);
+  font-weight: var(--stn-text-display-large-weight);
+  line-height: var(--stn-text-display-large-line-height);
+}
+.stn-text-display-3 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-display-medium-size);
+  font-weight: var(--stn-text-display-medium-weight);
+  line-height: var(--stn-text-display-medium-line-height);
+}
+
+/* ── Heading ───────────────────────────────────────────── */
+.stn-text-heading-1 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-heading-large-size);
+  font-weight: var(--stn-text-heading-large-weight);
+  line-height: var(--stn-text-heading-large-line-height);
+}
+.stn-text-heading-2 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-heading-medium-size);
+  font-weight: var(--stn-text-heading-medium-weight);
+  line-height: var(--stn-text-heading-medium-line-height);
+}
+.stn-text-heading-3 {
+  font-family: var(--stn-font-display);
+  font-size: var(--stn-text-heading-small-size);
+  font-weight: var(--stn-text-heading-small-weight);
+  line-height: var(--stn-text-heading-small-line-height);
+}
+
+/* ── Title ─────────────────────────────────────────────── */
+.stn-text-title-1 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-title-large-size);
+  font-weight: var(--stn-text-title-large-weight);
+  line-height: var(--stn-text-title-large-line-height);
+}
+.stn-text-title-2 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-title-medium-size);
+  font-weight: var(--stn-text-title-medium-weight);
+  line-height: var(--stn-text-title-medium-line-height);
+}
+.stn-text-title-3 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-title-small-size);
+  font-weight: var(--stn-text-title-small-weight);
+  line-height: var(--stn-text-title-small-line-height);
+}
+
+/* ── Body ──────────────────────────────────────────────── */
+.stn-text-body-1 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-large-size);
+  font-weight: var(--stn-text-body-large-weight);
+  line-height: var(--stn-text-body-large-line-height);
+}
+.stn-text-body-2 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-medium-large-size);
+  font-weight: var(--stn-text-body-medium-large-weight);
+  line-height: var(--stn-text-body-medium-large-line-height);
+}
+.stn-text-body-3 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-medium-size);
+  font-weight: var(--stn-text-body-medium-weight);
+  line-height: var(--stn-text-body-medium-line-height);
+}
+.stn-text-body-small {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-small-size);
+  font-weight: var(--stn-text-body-small-weight);
+  line-height: var(--stn-text-body-small-line-height);
+}
+
+/* ── Label ─────────────────────────────────────────────── */
+.stn-text-label-1 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-label-large-size);
+  font-weight: var(--stn-text-label-large-weight);
+  line-height: var(--stn-text-label-large-line-height);
+}
+.stn-text-label-2 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-label-medium-size);
+  font-weight: var(--stn-text-label-medium-weight);
+  line-height: var(--stn-text-label-medium-line-height);
+}
+.stn-text-label-3 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-label-small-size);
+  font-weight: var(--stn-text-label-small-weight);
+  line-height: var(--stn-text-label-small-line-height);
+}
+.stn-text-label-4 {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-label-xsmall-size);
+  font-weight: var(--stn-text-label-xsmall-weight);
+  line-height: var(--stn-text-label-xsmall-line-height);
+}
+
+/* ── Caption ───────────────────────────────────────────── */
+.stn-text-caption-large {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-caption-large-size);
+  font-weight: var(--stn-text-caption-large-weight);
+  line-height: var(--stn-text-caption-large-line-height);
+}
+.stn-text-caption {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-caption-medium-size);
+  font-weight: var(--stn-text-caption-medium-weight);
+  line-height: var(--stn-text-caption-medium-line-height);
+}
+
+/* ── Weight modifiers ──────────────────────────────────── */
+.stn-text-weight-regular { font-weight: var(--stn-font-weight-regular); }
+.stn-text-weight-medium { font-weight: var(--stn-font-weight-medium); }
+.stn-text-weight-semibold { font-weight: var(--stn-font-weight-semibold); }
+.stn-text-weight-bold { font-weight: var(--stn-font-weight-bold); }
+
+/* ── Color modifiers ───────────────────────────────────── */
+.stn-text-color-primary { color: var(--stn-text-primary); }
+.stn-text-color-secondary { color: var(--stn-text-secondary); }
+.stn-text-color-tertiary { color: var(--stn-text-tertiary); }
+.stn-text-color-muted { color: var(--stn-text-muted); }
+.stn-text-color-success { color: var(--stn-feedback-success); }
+.stn-text-color-error { color: var(--stn-feedback-error); }
+.stn-text-color-info { color: var(--stn-feedback-info); }
+.stn-text-color-critical { color: var(--stn-grade-critical); }
+.stn-text-color-major { color: var(--stn-grade-major); }
+.stn-text-color-minor { color: var(--stn-grade-minor); }
+.stn-text-color-warning { color: var(--stn-grade-warning); }
+
+/* ── Layout helpers ────────────────────────────────────── */
+.stn-text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.stn-text-reset-margin { margin: 0; }
+.stn-text-numeric {
+  font-family: var(--stn-font-number);
+  font-variant-numeric: tabular-nums;
+}

package/styles/layouts/stn-layer0-bg.css

@@ -1,10 +1,56 @@
 @charset "utf-8";
 /**
  * STN Layout — L0 Background Layer (z-index: 0)
- * HTML: `class="stn-layer0-bg color default"` · `class="stn-layer0-bg image"`
- * modifier는 `.stn-layer0-bg.color` / `.stn-layer0-bg.image`로만 매칭
+ *
+ * 순수 CSS 토큰(Token-driven) 아키텍처:
+ * 테마(Default/Blue) 및 모드(Light/Dark)에 따른 배경 이미지를 CSS 변수(--stn-l0-*-bg)로 선언하여,
+ * 컴포넌트는 단 한 줄의 background-image: var(...) 만으로 테마 전환을 자동 처리합니다.
  */
 
+/* ==========================================================================
+   1. L0 Background Image Tokens (CDN)
+   ========================================================================== */
+
+/* 1-1. Default Theme — Light Mode */
+[data-mode='light'],
+[data-theme='default'][data-mode='light'] {
+  --stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/dashboard-light.png');
+  --stn-l0-list-bg: var(--stn-gradient-l0-background);
+  --stn-l0-showroom-a-bg: url('https://stn-design.vercel.app/images/layer0/showroom-a-light.png');
+  --stn-l0-showroom-b-bg: url('https://stn-design.vercel.app/images/layer0/showroom-b-light.png');
+  --stn-l0-map-light-bg: url('https://stn-design.vercel.app/images/layer0/map-light.png');
+  --stn-l0-login-bg: url('https://stn-design.vercel.app/images/layer0/login-light.png');
+}
+
+/* 1-2. Default Theme — Dark Mode */
+:root,
+[data-mode='dark'],
+[data-theme='default'][data-mode='dark'] {
+  --stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/dashboard-dark.png');
+  --stn-l0-list-bg: var(--stn-gradient-l0-background);
+  --stn-l0-showroom-a-bg: url('https://stn-design.vercel.app/images/layer0/showroom-a-dark.png');
+  --stn-l0-showroom-b-bg: url('https://stn-design.vercel.app/images/layer0/showroom-b-dark.png');
+  --stn-l0-map-light-bg: url('https://stn-design.vercel.app/images/layer0/map-dark.png');
+  --stn-l0-login-bg: url('https://stn-design.vercel.app/images/layer0/login-dark.png');
+}
+
+/* 1-3. Blue Theme — Light Mode */
+[data-theme='blue'][data-mode='light'] {
+  --stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/infomap-light.png');
+  --stn-l0-list-bg: url('https://stn-design.vercel.app/images/layer0/infomap-light-none.png');
+}
+
+/* 1-4. Blue Theme — Dark Mode */
+[data-theme='blue'][data-mode='dark'] {
+  --stn-l0-dashboard-bg: url('https://stn-design.vercel.app/images/layer0/infomap-dark.png');
+  --stn-l0-list-bg: url('https://stn-design.vercel.app/images/layer0/infomap-dark-none.png');
+}
+
+
+/* ==========================================================================
+   2. Base Layer 0 Shell
+   ========================================================================== */
+
 .stn-layer0-bg {
   position: absolute;
   inset: 0;
@@ -13,30 +59,63 @@
   z-index: var(--stn-elevation-z-0, 0);
   overflow: hidden;
   pointer-events: none;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
-/* 1. Color preset — named look은 `.default` (다크/라이트 모두 순수 단색 바닥면) */
+/* Color preset */
 .stn-layer0-bg.color,
 .stn-layer0-bg.color.default {
   background-color: var(--stn-elevation-surface-0);
   background-image: none;
 }
 
-/* 2. Gradient preset — 공식 앰비언트 그라데이션 바닥면 (다크/라이트 자동 전환) */
+/* Gradient preset */
 .stn-layer0-bg.gradient {
   background-color: var(--stn-elevation-surface-0);
   background-image: var(--stn-gradient-l0-background);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
 }
 
-/* Image preset */
-.stn-layer0-bg.image {
+/* List preset — 테마 반응형 바닥면 (Default: 그라데이션, Blue: 3D infomap-none) */
+.stn-layer0-bg.list {
+  background-color: var(--stn-elevation-surface-0);
+  background-image: var(--stn-l0-list-bg);
+}
+
+/* Dashboard preset — 테마 반응형 바닥면 (Default: 웨이브, Blue: 3D infomap) */
+.stn-layer0-bg.dashboard {
   background-color: var(--stn-elevation-surface-0);
+  background-image: var(--stn-l0-dashboard-bg);
 }
 
+/* 기타 이미지 프리셋 */
+.stn-layer0-bg.showroom-a {
+  background-image: var(--stn-l0-showroom-a-bg);
+}
+
+.stn-layer0-bg.showroom-b {
+  background-image: var(--stn-l0-showroom-b-bg);
+}
+
+.stn-layer0-bg.map-light {
+  background-image: var(--stn-l0-map-light-bg);
+}
+
+.stn-layer0-bg.login {
+  background-image: var(--stn-l0-login-bg);
+}
+
+/* 레거시/호환용 프리셋 */
+.stn-layer0-bg.infomap {
+  background-image: var(--stn-l0-dashboard-bg);
+}
+
+.stn-layer0-bg.infomap-none {
+  background-image: var(--stn-l0-list-bg);
+}
 
+/* 커스텀 이미지 URL을 src로 직접 전달한 경우 호환용 미디어 영역 */
 .stn-layer0-bg__media {
   position: absolute;
   inset: 0;
@@ -51,15 +130,6 @@
   object-position: center;
 }
 
-/* Dark/Light image switching */
-.stn-layer0-bg__img.light {
-  display: none;
-}
-
-.stn-layer0-bg__img.dark {
-  display: block;
-}
-
 [data-mode='dark'] .stn-layer0-bg__img.light {
   display: none;
 }
@@ -92,15 +162,11 @@
   display: block;
 }
 
-.stn-layer0-bg__overlay.radial {
+[data-mode='dark'] .stn-layer0-bg__overlay.radial {
   display: block;
   background: radial-gradient(
-    50% 50% at 50% 50%,
-    color-mix(in srgb, var(--stn-layer0-radial) 100%, transparent) 26.442%,
-    color-mix(in srgb, var(--stn-layer0-radial) 30%, transparent) 100%
+    ellipse 70% 60% at 50% 45%,
+    transparent 0%,
+    color-mix(in srgb, var(--stn-static-black) 72%, transparent) 100%
   );
 }
-
-[data-mode='light'] .stn-layer0-bg__overlay.radial {
-  display: none;
-}

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

@@ -21,15 +21,7 @@
   overflow: hidden;
 }
 
-/* translucent variant — 반투명 블러 글래스모피즘 외형 (테두리 및 그림자 없음) */
-.stn-section-side.translucent,
-.stn-section-side--translucent {
-  background: var(--stn-section-side-bg-translucent);
-  backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
-  -webkit-backdrop-filter: blur(var(--stn-section-side-translucent-blur, 8px));
-  border-color: var(--stn-section-side-border-translucent);
-  box-shadow: none;
-}
+
 
 /* fullWidth prop 또는 부모 LNB 컨테이너 안에서 가로 100% 확장 지원 */
 .stn-section-side.is-full-width,

package/styles/style-pub.css

@@ -26,6 +26,7 @@
 
 /* --- 2. Utils & Reset --- */
 @import './utils/reset.css';
+@import './foundations/stn-typography.css';
 
 /* --- 3. Layouts (Pure Screen Skeletons) --- */
 @import './layouts/stn-layout.css';

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

@@ -51,7 +51,7 @@
   --stn-elevation-surface-1: var(--stn-opacity-black-0);
   --stn-elevation-surface-2: var(--stn-gray-800);
   --stn-elevation-surface-widget: var(--stn-gray-850);
-  --stn-drawer-bg: var(--stn-gray-750);
+  --stn-drawer-bg: var(--stn-gray-850);
   --stn-dim-bg: color-mix(in srgb, var(--stn-gray-950) 50%, transparent);
   --stn-dim-blur: 4px;
   --stn-input-bg: var(--stn-gray-900);
@@ -1229,8 +1229,15 @@
 
 [data-theme='blue'][data-mode='dark'] {
   --stn-table-th-bg: var(--stn-blue-750);
+  --stn-section-side-bg: var(--stn-opacity-black-25);
+  --stn-section-side-border: var(--stn-border-subtle);
+  --stn-input-border: var(--stn-gray-800);
+  --stn-input-bg: var(--stn-opacity-black-25);
+  --stn-search-requirement-bg: var(--stn-opacity-black-25);
 }
 
 [data-theme='blue'][data-mode='light'] {
   --stn-table-th-bg: var(--stn-blue-100);
+  --stn-section-side-bg: var(--stn-opacity-white-25);
+  --stn-section-side-border: var(--stn-border-subtle);
 }

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

@@ -62,6 +62,11 @@
   --stn-icon-box-size-xl: var(--stn-size-44);
   --stn-pop-header-height: var(--stn-size-56);
   --stn-pop-footer-height: var(--stn-size-56);
+  --stn-pop-border-width: var(--stn-size-1);
+  --stn-pop-split-min-height: var(--stn-size-400);
+  --stn-pop-split-aside-width: var(--stn-size-280);
+  --stn-pop-split-aside-max-width: var(--stn-size-320);
+  --stn-pop-max-height: calc(100vh - var(--stn-pop-gutter) * 2);
   --stn-segmented-item-height: var(--stn-size-32);
   --stn-segmented-item-height-sm: var(--stn-size-26);
   --stn-segmented-item-height-lg: var(--stn-size-40);

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

@@ -59,6 +59,18 @@
   --stn-chip-gap: var(--stn-space-4);
   --stn-chip-padding-y: var(--stn-space-0);
   --stn-pop-gutter: var(--stn-space-20);
+  --stn-pop-head-padding-y: var(--stn-space-12);
+  --stn-pop-head-padding-x: var(--stn-space-20);
+  --stn-pop-head-gap: var(--stn-space-12);
+  --stn-pop-head-row-gap: var(--stn-space-8);
+  --stn-pop-subtitle-margin-top: var(--stn-space-4);
+  --stn-pop-body-padding: var(--stn-space-20);
+  --stn-pop-actions-padding-y: var(--stn-space-12);
+  --stn-pop-actions-padding-x: var(--stn-space-20);
+  --stn-pop-actions-gap: var(--stn-space-8);
+  --stn-pop-split-gap: var(--stn-space-20);
+  --stn-pop-split-aside-padding-right: var(--stn-space-16);
+  --stn-pop-split-main-gap: var(--stn-space-16);
   --stn-text-field-padding-x-xl: var(--stn-space-16);
   --stn-text-field-padding-x-lg: var(--stn-space-12);
   --stn-text-field-padding-x-md: var(--stn-space-10);