@stn-uiux/pub-ui 0.1.82 → 0.1.85

package/styles/components/stn-empty-state.css

@@ -0,0 +1,238 @@
+@charset "utf-8";
+/**
+ * StnEmptyState
+ * 공통 빈·오류 상태 표면. 아이콘 · 제목 · 설명 · 액션.
+ * 색·타이포·버튼은 기존 Pub 토큰 / StnIcon · StnText · StnButton에 위임.
+ */
+
+:root {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-md);
+  --stn-empty-state-body-gap: var(--stn-empty-state-body-gap);
+  --stn-empty-state-actions-gap: var(--stn-empty-state-actions-gap);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-md);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-md);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-md);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-md);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-md);
+  --stn-empty-state-icon-color: var(--stn-text-tertiary);
+  --stn-empty-state-title-color: var(--stn-text-primary);
+  --stn-empty-state-description-color: var(--stn-text-secondary);
+  --stn-empty-state-code-color: var(--stn-text-tertiary);
+  --stn-empty-state-code-font-size: var(--stn-text-caption-size);
+  --stn-empty-state-code-font-weight: var(--stn-font-weight-semibold);
+  --stn-empty-state-page-padding-y: var(--stn-empty-state-page-padding-y);
+}
+
+.stn-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-empty-state-gap);
+  width: 100%;
+  max-width: var(--stn-empty-state-max-width);
+  margin-inline: auto;
+  padding: var(--stn-empty-state-padding);
+  text-align: center;
+  color: var(--stn-empty-state-title-color);
+}
+
+/* 전체 페이지 / 레이아웃 본문 중앙 */
+.stn-empty-state.page {
+  max-width: none;
+  min-height: min(100%, 60vh);
+  flex: 1 1 auto;
+  padding-block: var(--stn-empty-state-page-padding-y);
+}
+
+.stn-empty-state.page > .stn-empty-state__body,
+.stn-empty-state.page > .stn-empty-state__actions {
+  max-width: var(--stn-empty-state-max-width);
+}
+
+/* Size 규격 (xs · sm · md · lg · xl) */
+.stn-empty-state.sm {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-sm);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-sm);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-sm);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-sm);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-sm);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-sm);
+}
+
+.stn-empty-state.md {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-md);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-md);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-md);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-md);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-md);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-md);
+}
+
+.stn-empty-state.lg {
+  --stn-empty-state-gap: var(--stn-empty-state-gap-lg);
+  --stn-empty-state-icon-size: var(--stn-empty-state-icon-size-lg);
+  --stn-empty-state-padding: var(--stn-empty-state-padding-lg);
+  --stn-empty-state-max-width: var(--stn-empty-state-max-width-lg);
+  --stn-empty-state-graphic-width: var(--stn-empty-state-graphic-width-lg);
+  --stn-empty-state-graphic-height: var(--stn-empty-state-graphic-height-lg);
+}
+
+/* Tone → 아이콘 색 (feedback / text 시맨틱) */
+.stn-empty-state.tone-neutral {
+  --stn-empty-state-icon-color: var(--stn-text-tertiary);
+}
+
+.stn-empty-state.tone-info {
+  --stn-empty-state-icon-color: var(--stn-feedback-info);
+}
+
+.stn-empty-state.tone-warning {
+  --stn-empty-state-icon-color: var(--stn-feedback-warning);
+}
+
+.stn-empty-state.tone-error {
+  --stn-empty-state-icon-color: var(--stn-feedback-error);
+}
+
+.stn-empty-state.tone-success {
+  --stn-empty-state-icon-color: var(--stn-feedback-success);
+}
+
+/* 3D Graphic (Illustration) */
+.stn-empty-state__graphic {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+  max-width: 100%;
+}
+
+.stn-empty-state__img {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: var(--stn-empty-state-graphic-width);
+  max-height: var(--stn-empty-state-graphic-height);
+  object-fit: contain;
+  filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--stn-static-black) 16%, transparent));
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Graphic sizes (~75% compact scale: sm, md, lg) */
+.stn-empty-state.sm .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-sm);
+  max-height: var(--stn-empty-state-graphic-height-sm);
+}
+
+.stn-empty-state.md .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-md);
+  max-height: var(--stn-empty-state-graphic-height-md);
+}
+
+.stn-empty-state.lg .stn-empty-state__img {
+  max-width: var(--stn-empty-state-graphic-width-lg);
+  max-height: var(--stn-empty-state-graphic-height-lg);
+}
+
+.stn-empty-state__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--stn-empty-state-icon-size);
+  height: var(--stn-empty-state-icon-size);
+  color: var(--stn-empty-state-icon-color);
+}
+
+.stn-empty-state__icon > .stn-icon,
+.stn-empty-state__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* masked 아이콘이 currentColor를 쓰도록 */
+.stn-empty-state__icon > .stn-icon.stn-icon--masked {
+  background-color: var(--stn-empty-state-icon-color);
+}
+
+.stn-empty-state__code {
+  margin: 0;
+  color: var(--stn-empty-state-code-color);
+  font-size: var(--stn-empty-state-code-font-size);
+  font-weight: var(--stn-empty-state-code-font-weight);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.stn-empty-state__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--stn-empty-state-body-gap);
+  width: 100%;
+  min-width: 0;
+}
+
+.stn-empty-state__title {
+  margin: 0;
+  color: var(--stn-empty-state-title-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-title-medium-size);
+  font-weight: var(--stn-font-weight-semibold);
+  line-height: var(--stn-text-title-medium-line-height);
+  word-break: keep-all;
+}
+
+.stn-empty-state__description {
+  margin: 0;
+  color: var(--stn-empty-state-description-color);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-text-body-medium-size);
+  font-weight: var(--stn-font-weight-regular);
+  line-height: var(--stn-text-body-medium-line-height);
+  word-break: keep-all;
+}
+
+/* Typography scale per size */
+.stn-empty-state.sm .stn-empty-state__title {
+  font-size: var(--stn-text-title-small-size);
+  line-height: var(--stn-text-title-small-line-height);
+}
+
+.stn-empty-state.sm .stn-empty-state__description {
+  font-size: var(--stn-text-caption-size);
+  line-height: var(--stn-text-caption-line-height);
+}
+
+.stn-empty-state.md .stn-empty-state__title {
+  font-size: var(--stn-text-title-medium-size);
+  line-height: var(--stn-text-title-medium-line-height);
+}
+
+.stn-empty-state.md .stn-empty-state__description {
+  font-size: var(--stn-text-body-medium-size);
+  line-height: var(--stn-text-body-medium-line-height);
+}
+
+.stn-empty-state.lg .stn-empty-state__title {
+  font-size: var(--stn-text-title-large-size);
+  line-height: var(--stn-text-title-large-line-height);
+}
+
+.stn-empty-state.lg .stn-empty-state__description {
+  font-size: var(--stn-text-body-medium-large-size);
+  line-height: var(--stn-text-body-medium-large-line-height);
+}
+
+.stn-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-empty-state-actions-gap);
+  width: 100%;
+}

package/styles/components/stn-popover.css

@@ -0,0 +1,52 @@
+/**
+ * StnPopover — STN Design System Standard Floating Popover Overlay
+ *
+ * .stn-popover
+ *   .stn-popover__backdrop (클릭 아웃사이드 감지용 투명 백드롭)
+ *   .stn-popover__paper    (플로팅 카드 본체)
+ */
+
+.stn-popover {
+  position: fixed;
+  inset: 0;
+  z-index: var(--stn-elevation-z-popover, 250);
+  pointer-events: none;
+}
+
+.stn-popover.is-open {
+  pointer-events: auto;
+}
+
+/* 1. 투명 백드롭 — 배경을 가리지 않고 외부 클릭을 감지 */
+.stn-popover__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* 2. 플로팅 페이퍼 카드 */
+.stn-popover__paper {
+  position: fixed;
+  z-index: 1;
+  background-color: var(--stn-dropdown-menu-bg, var(--stn-pop-surface));
+  color: var(--stn-text-primary);
+  border: var(--stn-size-1, 1px) solid var(--stn-dropdown-menu-border, var(--stn-border-strong));
+  border-radius: var(--stn-radius-8);
+  box-shadow: var(--stn-dropdown-menu-shadow, var(--stn-shadow-modal));
+  outline: none;
+  box-sizing: border-box;
+  max-width: calc(100vw - var(--stn-popover-margin, var(--stn-space-16)) * 2);
+  max-height: calc(100vh - var(--stn-popover-margin, var(--stn-space-16)) * 2);
+  overflow-x: hidden;
+  overflow-y: auto;
+  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
+  will-change: top, left, transform;
+}
+
+.stn-popover__paper:focus-visible {
+  outline: var(--stn-focus-ring-width, 2px) solid var(--stn-focus-ring, var(--stn-primary));
+  outline-offset: calc(var(--stn-focus-ring-width, 2px) * -1);
+}

package/styles/components/stn-radio.css

@@ -104,7 +104,7 @@
 .stn-radio.lg {
   --stn-radio-size: var(--stn-radio-size-lg, 22px);
   --stn-radio-dot-size: var(--stn-radio-dot-size-lg, 8px);
-  font-size: var(--stn-text-body-size, 15px);
+  font-size: var(--stn-text-body-medium-large-size);
 }
 
 /* Colors / Semantic Tones (단일 클래스 - 점 및 활성 테두리 색상) */

package/styles/components/stn-slider.css

@@ -164,7 +164,7 @@
   --stn-slider-pad-x: var(--stn-slider-pad-x-lg, var(--stn-space-10, 10px));
 }
 .stn-slider.lg .stn-slider__label {
-  font-size: var(--stn-text-body-size, 15px);
+  font-size: var(--stn-text-body-medium-large-size);
 }
 .stn-slider.lg .stn-slider__value {
   min-width: var(--stn-size-32, 32px);