@stn-uiux/pub-ui 0.1.81 → 0.1.84

package/styles/components/stn-line-chart.css

@@ -0,0 +1,125 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Line & Area Chart Component (.stn-chart-line)
+ * Pure CSS & SVG line/area charts with dots and axis toggles.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+.stn-chart-line {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.stn-chart-line__body {
+  width: 100%;
+  flex: 1 1 0%;
+  min-height: var(--stn-chart-line-body-min-height);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.stn-chart-line__axis-y {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: var(--stn-chart-line-axis-y-bottom);
+  width: var(--stn-chart-line-axis-y-width);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none;
+  text-align: right;
+  z-index: 2;
+  font-size: var(--stn-font-size-9);
+  color: var(--stn-chart-axis-text);
+  font-family: var(--stn-font-body);
+  line-height: var(--stn-line-height-tight);
+}
+
+.stn-chart-line__svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  display: block;
+}
+
+.stn-chart-line__path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  transition: stroke 0.2s ease;
+}
+
+/* Base Line Path */
+.stn-chart-line .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-md);
+}
+
+/* Line Sizes: sm / md / lg */
+.stn-chart-line--sm .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-sm);
+}
+
+.stn-chart-line--md .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-md);
+}
+
+.stn-chart-line--lg .stn-chart-line__path {
+  stroke-width: var(--stn-chart-line-stroke-lg);
+}
+
+.stn-chart-line__axis-x {
+  display: flex;
+  justify-content: space-between;
+  padding-left: var(--stn-chart-line-axis-x-padding-left);
+  padding-right: var(--stn-chart-line-axis-x-padding-right);
+  margin-top: var(--stn-chart-line-axis-x-margin-top);
+  position: relative;
+  z-index: 2;
+  line-height: var(--stn-line-height-tight);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-axis-text);
+  font-family: var(--stn-font-body);
+}
+
+/* Axis Show/Hide Modifiers (Class Based) */
+.stn-chart-line--no-x-axis .stn-chart-line__axis-x,
+.hide-x-axis .stn-chart-line__axis-x {
+  display: none;
+}
+
+.stn-chart-line--no-y-axis .stn-chart-line__axis-y,
+.hide-y-axis .stn-chart-line__axis-y {
+  display: none;
+}
+
+.stn-chart-line--no-y-axis .stn-chart-line__axis-x,
+.hide-y-axis .stn-chart-line__axis-x {
+  padding-left: var(--stn-chart-grid-row-gap);
+}
+
+/* Line Chart Points / Dots (.stn-chart-line__dots) */
+.stn-chart-line__dots {
+  pointer-events: none;
+}
+
+.stn-chart-line__dot {
+  transition: r 0.15s ease, stroke-width 0.15s ease;
+}
+
+/* Dots Show/Hide Modifiers (Class Based) */
+.stn-chart-line--no-dots .stn-chart-line__dots,
+.hide-dots .stn-chart-line__dots {
+  display: none;
+}
+
+.stn-chart-line.show-dots .stn-chart-line__dots,
+.stn-chart-line.stn-chart-line--dots .stn-chart-line__dots {
+  display: block;
+}

package/styles/components/stn-pie-chart.css

@@ -0,0 +1,112 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Pie & Gauge Chart Component (.stn-chart-gauge)
+ * Pure CSS & SVG donut, gauge, and pie charts with legend.
+ * 100% strictly tokenized via STN semantic design tokens (--stn-chart-*).
+ */
+
+.stn-chart-gauge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.stn-chart-gauge__svg {
+  display: block;
+  overflow: visible;
+  max-width: var(--stn-chart-gauge-size-max);
+  max-height: var(--stn-chart-gauge-size-max);
+  min-width: var(--stn-chart-gauge-size-min);
+  min-height: var(--stn-chart-gauge-size-min);
+}
+
+.stn-chart-gauge__track {
+  fill: none;
+  stroke: var(--stn-chart-gauge-track);
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+
+.stn-chart-gauge__seg {
+  fill: none;
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+  stroke-linecap: butt;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.3s ease, stroke-width 0.15s ease;
+}
+
+/* Base Track & Segment (md) */
+.stn-chart-gauge .stn-chart-gauge__track,
+.stn-chart-gauge--md .stn-chart-gauge__track {
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+.stn-chart-gauge .stn-chart-gauge__seg,
+.stn-chart-gauge--md .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-md);
+}
+
+/* Gauge Stroke Sizes: sm / lg */
+.stn-chart-gauge--sm .stn-chart-gauge__track,
+.stn-chart-gauge--sm .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-sm);
+}
+
+.stn-chart-gauge--lg .stn-chart-gauge__track,
+.stn-chart-gauge--lg .stn-chart-gauge__seg {
+  stroke-width: var(--stn-chart-gauge-stroke-lg);
+}
+
+.stn-chart-gauge__center-outer {
+  fill: var(--stn-chart-gauge-center-bg);
+}
+
+.stn-chart-gauge__center-inner {
+  fill: var(--stn-chart-gauge-center-bg);
+  stroke: var(--stn-chart-zero-line);
+  stroke-width: var(--stn-chart-border-width);
+}
+
+.stn-chart-gauge__center-text {
+  text-anchor: middle;
+  fill: var(--stn-chart-gauge-center-text);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-11);
+  font-weight: var(--stn-font-weight-bold);
+}
+
+/* Gauge Legend */
+.stn-chart-gauge-legend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--stn-chart-gauge-legend-gap-y) var(--stn-chart-gauge-legend-gap-x);
+  flex-wrap: wrap;
+  max-width: var(--stn-chart-gauge-legend-max-width);
+  margin-top: var(--stn-chart-gauge-legend-margin-top);
+}
+
+.stn-chart-gauge-legend__item {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-chart-gauge-legend-item-gap);
+  flex-shrink: 0;
+}
+
+.stn-chart-gauge-legend__dot {
+  width: var(--stn-chart-gauge-legend-dot-size);
+  height: var(--stn-chart-gauge-legend-dot-size);
+  border-radius: var(--stn-radius-circle);
+}
+
+.stn-chart-gauge-legend__label {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-10);
+  color: var(--stn-chart-legend-text);
+  font-weight: var(--stn-font-weight-regular);
+  white-space: nowrap;
+}

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-dropdown, 150);
+  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);