@stn-uiux/pub-ui 0.1.81 → 0.1.82

package/styles/patterns/stn-widget-patterns.css

@@ -0,0 +1,294 @@
+@charset "utf-8";
+
+/**
+ * STN Design System — Widget Content Patterns
+ * Reusable data visualization and status blocks designed to live inside StnWidget (or any container):
+ *  1. Status Pattern: Status List & Status Item with Grade Dots (.stn-status-*)
+ *  2. Metric Pattern: Stat Group & Stat Card (.stn-stat-*)
+ *  3. Ranking Pattern: Grade Row List & Grade Row (.stn-grade-row*)
+ *
+ * 100% Unified Single Canonical Class Names.
+ */
+
+/* ==========================================================================
+   1. Status Pattern (Status List & Item)
+   Canonical BEM: .stn-status-item*
+   Legacy Aliases: .stn-widget__status-* (100% Backward Compatibility)
+   ========================================================================== */
+.stn-status-list,
+.stn-widget__status-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-widget-status-list-gap);
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.stn-status-item,
+.stn-widget__status-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--stn-widget-status-item-padding);
+  border-radius: var(--stn-widget-status-item-radius);
+  background: var(--stn-widget-footer-well-bg);
+  border: var(--stn-widget-border-width, var(--stn-size-1)) solid var(--stn-widget-footer-well-border);
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.stn-widget.appearance-dashboard .stn-status-item,
+.stn-widget.appearance-dashboard .stn-widget__status-item {
+  background: var(--stn-widget-on-dark-surface);
+  border-color: transparent;
+}
+
+.stn-status-item:hover,
+.stn-widget__status-item:hover {
+  background-color: color-mix(in srgb, var(--stn-primary) 6%, transparent);
+  border-color: color-mix(in srgb, var(--stn-primary) 20%, transparent);
+}
+
+.stn-status-item__label,
+.stn-status-label,
+.stn-widget__status-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-widget-status-label-gap);
+  font-size: var(--stn-text-body-small-size);
+  color: var(--stn-text-secondary);
+}
+
+.stn-widget.appearance-dashboard .stn-status-item__label,
+.stn-widget.appearance-dashboard .stn-status-label,
+.stn-widget.appearance-dashboard .stn-widget__status-label {
+  color: var(--stn-widget-on-dark-label);
+}
+
+.stn-status-item__dot,
+.stn-widget__status-dot {
+  width: var(--stn-widget-dot-size, var(--stn-size-8));
+  height: var(--stn-widget-dot-size, var(--stn-size-8));
+  border-radius: var(--stn-radius-circle, 50%);
+  flex-shrink: 0;
+}
+
+.stn-status-item__dot--critical,
+.stn-widget__status-dot--critical { background: var(--stn-widget-dot-critical); }
+.stn-status-item__dot--major,
+.stn-widget__status-dot--major { background: var(--stn-widget-dot-major); }
+.stn-status-item__dot--minor,
+.stn-widget__status-dot--minor { background: var(--stn-widget-dot-minor); }
+.stn-status-item__dot--info,
+.stn-widget__status-dot--info { background: var(--stn-widget-dot-info); }
+.stn-status-item__dot--normal,
+.stn-widget__status-dot--normal { background: var(--stn-widget-dot-normal); }
+
+.stn-status-item__val,
+.stn-status-val,
+.stn-widget__status-val {
+  font-size: var(--stn-text-label-medium-size);
+  font-weight: var(--stn-font-weight-bold, 700);
+  color: var(--stn-widget-status-value);
+}
+
+.stn-widget.appearance-dashboard .stn-status-item__val,
+.stn-widget.appearance-dashboard .stn-status-val,
+.stn-widget.appearance-dashboard .stn-widget__status-val {
+  color: var(--stn-static-white);
+}
+
+/* ==========================================================================
+   2. Metric Pattern (Stat Group & Stat Card)
+   Canonical BEM: .stn-stat-*
+   Legacy Aliases: .stn-widget__stat-* (100% Backward Compatibility)
+   ========================================================================== */
+.stn-stat-group,
+.stn-widget__stat-group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--stn-widget-stat-min-width, var(--stn-size-110)), 1fr));
+  gap: var(--stn-widget-stat-group-gap);
+  width: 100%;
+}
+
+.stn-stat-card,
+.stn-widget__stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-widget-stat-card-gap);
+  padding: var(--stn-widget-stat-card-padding);
+  border-radius: var(--stn-widget-stat-card-radius);
+  background: var(--stn-widget-footer-well-bg);
+  border: var(--stn-widget-border-width, var(--stn-size-1)) solid var(--stn-border-subtle);
+  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
+}
+
+.stn-widget.appearance-dashboard .stn-stat-card,
+.stn-widget.appearance-dashboard .stn-widget__stat-card {
+  background: var(--stn-widget-on-dark-surface);
+  border-color: var(--stn-widget-on-dark-stat-border);
+}
+
+.stn-stat-card:hover,
+.stn-widget__stat-card:hover {
+  transform: translateY(calc(-1 * var(--stn-size-2)));
+  border-color: var(--stn-widget-stat-hover-border);
+  background-color: color-mix(in srgb, var(--stn-primary) 8%, transparent);
+}
+
+.stn-stat-card__label,
+.stn-stat-label,
+.stn-widget__stat-label {
+  font-size: var(--stn-text-caption-medium-size);
+  color: var(--stn-text-secondary);
+}
+
+.stn-widget.appearance-dashboard .stn-stat-card__label,
+.stn-widget.appearance-dashboard .stn-stat-label,
+.stn-widget.appearance-dashboard .stn-widget__stat-label {
+  color: var(--stn-widget-on-dark-stat-label);
+}
+
+.stn-stat-card__count,
+.stn-stat-count,
+.stn-widget__stat-count {
+  font-size: var(--stn-text-title-large-size);
+  font-weight: var(--stn-font-weight-bold, 700);
+  color: var(--stn-widget-status-value);
+}
+
+.stn-widget.appearance-dashboard .stn-stat-card__count,
+.stn-widget.appearance-dashboard .stn-stat-count,
+.stn-widget.appearance-dashboard .stn-widget__stat-count {
+  color: var(--stn-static-white);
+}
+
+/* ==========================================================================
+   3. Ranking Pattern (Grade Row List & Grade Row — 장애 등급별 진행바 현황)
+   Canonical BEM: .stn-grade-row*
+   Legacy Aliases: .stn-widget__grade-row* (100% Backward Compatibility)
+   ========================================================================== */
+.stn-grade-row-list,
+.stn-widget__grade-row-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-widget-grade-row-list-gap);
+  width: 100%;
+}
+
+.stn-grade-row-list--grid,
+.stn-widget__grade-row-list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--stn-widget-grade-row-grid-item-min-width), 1fr));
+  gap: var(--stn-widget-grade-row-grid-gap-y) var(--stn-widget-grade-row-grid-gap-x);
+}
+
+.stn-grade-row,
+.stn-widget__grade-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--stn-widget-grade-row-gap);
+  width: 100%;
+  padding: var(--stn-widget-grade-row-padding-y) 0;
+}
+
+.stn-grade-row__left,
+.stn-widget__grade-row-left {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-widget-grade-row-gap);
+  flex: 1;
+  min-width: 0;
+}
+
+.stn-grade-row__label,
+.stn-widget__grade-row-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stn-widget-grade-row-label-gap);
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-13);
+  font-weight: var(--stn-font-weight-medium);
+  color: var(--stn-text-primary);
+  min-width: var(--stn-widget-grade-row-label-min-width);
+  flex-shrink: 0;
+}
+
+.stn-grade-row__icon,
+.stn-widget__grade-row-icon {
+  width: var(--stn-widget-grade-row-icon-size);
+  height: var(--stn-widget-grade-row-icon-size);
+  flex-shrink: 0;
+}
+
+.stn-grade-row__track,
+.stn-widget__grade-row-track {
+  flex: 1;
+  height: var(--stn-widget-grade-row-track-height);
+  background: var(--stn-widget-grade-row-track-bg);
+  border-radius: var(--stn-radius-2);
+  overflow: hidden;
+  min-width: var(--stn-widget-grade-row-track-min-width);
+}
+
+.stn-grade-row__fill,
+.stn-widget__grade-row-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--stn-radius-2);
+  transition: width 0.3s ease;
+}
+
+.stn-grade-row--critical .stn-grade-row__fill,
+.stn-widget__grade-row--critical .stn-widget__grade-row-fill {
+  background-color: var(--stn-grade-critical);
+}
+
+.stn-grade-row--major .stn-grade-row__fill,
+.stn-widget__grade-row--major .stn-widget__grade-row-fill {
+  background-color: var(--stn-grade-major);
+}
+
+.stn-grade-row--minor .stn-grade-row__fill,
+.stn-widget__grade-row--minor .stn-widget__grade-row-fill {
+  background-color: var(--stn-grade-minor);
+}
+
+.stn-grade-row--default .stn-grade-row__fill,
+.stn-grade-row--warning .stn-grade-row__fill,
+.stn-widget__grade-row--default .stn-widget__grade-row-fill,
+.stn-widget__grade-row--warning .stn-widget__grade-row-fill {
+  background-color: var(--stn-grade-warning);
+}
+
+.stn-grade-row__right,
+.stn-widget__grade-row-right {
+  display: flex;
+  align-items: center;
+  gap: var(--stn-widget-grade-row-right-gap);
+  flex-shrink: 0;
+}
+
+.stn-grade-row__value,
+.stn-widget__grade-row-value {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-13);
+  font-weight: var(--stn-font-weight-bold);
+  color: var(--stn-text-primary);
+  font-variant-numeric: tabular-nums;
+  min-width: var(--stn-widget-grade-row-val-min-width);
+  text-align: right;
+}
+
+.stn-grade-row__percent,
+.stn-widget__grade-row-percent {
+  font-family: var(--stn-font-body);
+  font-size: var(--stn-font-size-12);
+  font-weight: var(--stn-font-weight-regular);
+  color: var(--stn-text-secondary);
+  font-variant-numeric: tabular-nums;
+  min-width: var(--stn-widget-grade-row-pct-min-width);
+  text-align: right;
+}

package/styles/style-pub.css

@@ -71,6 +71,7 @@
 @import './components/stn-icon.css';
 @import './components/stn-card.css';
 @import './components/stn-topology.css';
+@import './components/stn-chart.css';
 @import './components/stn-status.css';
 @import './components/stn-tabs.css';
 @import './components/stn-divider.css';
@@ -83,3 +84,4 @@
 @import './patterns/stn-login-card.css';
 @import './patterns/stn-login-text-field.css';
 @import './patterns/stn-floating-toolbar.css';
+@import './patterns/stn-widget-patterns.css';

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

@@ -624,6 +624,76 @@
   --stn-status-flow-connector-opacity: 0.6;
   --stn-status-dot-bordered-border: var(--stn-border-strong);
   --stn-status-dot-bordered-bg: var(--stn-gray-800);
+  --stn-chart-grid-line: var(--stn-opacity-white-10);
+  --stn-chart-zero-line: var(--stn-opacity-white-20);
+  --stn-chart-axis-text: var(--stn-gray-400);
+  --stn-chart-bar-label: var(--stn-gray-300);
+  --stn-chart-highlight-bg: var(--stn-opacity-white-5);
+  --stn-chart-highlight-border: var(--stn-gray-500);
+  --stn-chart-legend-pill-bg: var(--stn-opacity-white-5);
+  --stn-chart-legend-pill-border: var(--stn-gray-750);
+  --stn-chart-legend-text: var(--stn-gray-150);
+  --stn-chart-color-1: var(--stn-blue-400);
+  --stn-chart-color-2: var(--stn-purple-300);
+  --stn-chart-color-3: var(--stn-green-300);
+  --stn-chart-color-4: var(--stn-cobalt-350);
+  --stn-chart-color-5: var(--stn-cyan-250);
+  --stn-chart-color-6: var(--stn-purple-150);
+  --stn-chart-color-7: var(--stn-green-150);
+  --stn-chart-color-8: var(--stn-cobalt-500);
+  --stn-chart-color-9: var(--stn-purple-450);
+  --stn-chart-color-10: var(--stn-blue-200);
+  --stn-chart-status-critical: var(--stn-grade-critical);
+  --stn-chart-status-major: var(--stn-grade-major);
+  --stn-chart-status-minor: var(--stn-grade-minor);
+  --stn-chart-status-warning: var(--stn-grade-warning);
+  --stn-chart-status-success: var(--stn-grade-normal);
+  --stn-chart-status-info: var(--stn-feedback-info);
+  --stn-chart-status-neutral: var(--stn-grade-neutral);
+  --stn-chart-critical: var(--stn-chart-status-critical);
+  --stn-chart-major: var(--stn-chart-status-major);
+  --stn-chart-minor: var(--stn-chart-status-minor);
+  --stn-chart-warning: var(--stn-chart-status-warning);
+  --stn-chart-success: var(--stn-chart-status-success);
+  --stn-chart-info: var(--stn-chart-status-info);
+  --stn-chart-neutral: var(--stn-chart-status-neutral);
+  --stn-chart-gauge-center-bg: var(--stn-gray-950);
+  --stn-chart-gauge-center-text: var(--stn-text-primary);
+  --stn-chart-gauge-track: var(--stn-opacity-white-5);
+  --stn-chart-tooltip-bg: var(--stn-gray-900);
+  --stn-chart-tooltip-border: var(--stn-gray-700);
+  --stn-chart-tooltip-header-color: var(--stn-gray-400);
+  --stn-chart-tooltip-divider: var(--stn-opacity-white-15);
+  --stn-chart-bar-1: var(--stn-chart-color-1);
+  --stn-chart-bar-2: var(--stn-chart-color-2);
+  --stn-chart-bar-3: var(--stn-chart-color-3);
+  --stn-chart-bar-4: var(--stn-chart-color-4);
+  --stn-chart-bar-5: var(--stn-chart-color-5);
+  --stn-chart-bar-6: var(--stn-chart-color-6);
+  --stn-chart-bar-primary: var(--stn-chart-color-1);
+  --stn-chart-bar-sub: var(--stn-chart-color-2);
+  --stn-chart-bar-sub2: var(--stn-chart-color-3);
+  --stn-chart-line-1: var(--stn-chart-color-1);
+  --stn-chart-line-2: var(--stn-chart-color-2);
+  --stn-chart-line-3: var(--stn-chart-color-3);
+  --stn-chart-line-4: var(--stn-chart-color-4);
+  --stn-chart-line-5: var(--stn-chart-color-5);
+  --stn-chart-line-6: var(--stn-chart-color-6);
+  --stn-chart-line-stroke: var(--stn-chart-color-1);
+  --stn-chart-line-area-from: var(--stn-chart-color-1);
+  --stn-chart-line-area-to: var(--stn-opacity-white-0);
+  --stn-chart-line-dot-bg: var(--stn-elevation-surface-0);
+  --stn-chart-gauge-seg-1: var(--stn-chart-color-1);
+  --stn-chart-gauge-seg-2: var(--stn-chart-color-2);
+  --stn-chart-gauge-seg-3: var(--stn-chart-color-3);
+  --stn-chart-gauge-seg-4: var(--stn-chart-color-4);
+  --stn-chart-gauge-seg-5: var(--stn-chart-color-5);
+  --stn-chart-gauge-seg-6: var(--stn-chart-color-6);
+  --stn-chart-gauge-seg-7: var(--stn-chart-color-7);
+  --stn-chart-gauge-seg-8: var(--stn-chart-color-8);
+  --stn-chart-gauge-seg-9: var(--stn-chart-color-9);
+  --stn-chart-gauge-seg-10: var(--stn-chart-color-10);
+  --stn-widget-grade-row-track-bg: var(--stn-gray-750);
 }
 
 [data-mode='light'] {
@@ -1245,6 +1315,76 @@
   --stn-status-flow-connector-opacity: 0.7;
   --stn-status-dot-bordered-border: var(--stn-border-subtle);
   --stn-status-dot-bordered-bg: var(--stn-elevation-surface-2);
+  --stn-chart-grid-line: var(--stn-opacity-black-10);
+  --stn-chart-zero-line: var(--stn-gray-200);
+  --stn-chart-axis-text: var(--stn-gray-500);
+  --stn-chart-bar-label: var(--stn-gray-650);
+  --stn-chart-highlight-bg: var(--stn-gray-50);
+  --stn-chart-highlight-border: var(--stn-gray-200);
+  --stn-chart-legend-pill-bg: var(--stn-gray-50);
+  --stn-chart-legend-pill-border: var(--stn-gray-100);
+  --stn-chart-legend-text: var(--stn-gray-650);
+  --stn-chart-color-1: var(--stn-blue-500);
+  --stn-chart-color-2: var(--stn-purple-500);
+  --stn-chart-color-3: var(--stn-green-500);
+  --stn-chart-color-4: var(--stn-cobalt-500);
+  --stn-chart-color-5: var(--stn-cyan-450);
+  --stn-chart-color-6: var(--stn-purple-350);
+  --stn-chart-color-7: var(--stn-green-350);
+  --stn-chart-color-8: var(--stn-cobalt-650);
+  --stn-chart-color-9: var(--stn-purple-650);
+  --stn-chart-color-10: var(--stn-blue-350);
+  --stn-chart-status-critical: var(--stn-grade-critical);
+  --stn-chart-status-major: var(--stn-grade-major);
+  --stn-chart-status-minor: var(--stn-grade-minor);
+  --stn-chart-status-warning: var(--stn-grade-warning);
+  --stn-chart-status-success: var(--stn-grade-normal);
+  --stn-chart-status-info: var(--stn-feedback-info);
+  --stn-chart-status-neutral: var(--stn-grade-neutral);
+  --stn-chart-critical: var(--stn-chart-status-critical);
+  --stn-chart-major: var(--stn-chart-status-major);
+  --stn-chart-minor: var(--stn-chart-status-minor);
+  --stn-chart-warning: var(--stn-chart-status-warning);
+  --stn-chart-success: var(--stn-chart-status-success);
+  --stn-chart-info: var(--stn-chart-status-info);
+  --stn-chart-neutral: var(--stn-chart-status-neutral);
+  --stn-chart-gauge-center-bg: var(--stn-static-white);
+  --stn-chart-gauge-center-text: var(--stn-text-primary);
+  --stn-chart-gauge-track: var(--stn-opacity-black-5);
+  --stn-chart-tooltip-bg: var(--stn-static-white);
+  --stn-chart-tooltip-border: var(--stn-gray-200);
+  --stn-chart-tooltip-header-color: var(--stn-gray-500);
+  --stn-chart-tooltip-divider: var(--stn-opacity-black-10);
+  --stn-chart-bar-1: var(--stn-chart-color-1);
+  --stn-chart-bar-2: var(--stn-chart-color-2);
+  --stn-chart-bar-3: var(--stn-chart-color-3);
+  --stn-chart-bar-4: var(--stn-chart-color-4);
+  --stn-chart-bar-5: var(--stn-chart-color-5);
+  --stn-chart-bar-6: var(--stn-chart-color-6);
+  --stn-chart-bar-primary: var(--stn-chart-color-1);
+  --stn-chart-bar-sub: var(--stn-chart-color-2);
+  --stn-chart-bar-sub2: var(--stn-chart-color-3);
+  --stn-chart-line-1: var(--stn-chart-color-1);
+  --stn-chart-line-2: var(--stn-chart-color-2);
+  --stn-chart-line-3: var(--stn-chart-color-3);
+  --stn-chart-line-4: var(--stn-chart-color-4);
+  --stn-chart-line-5: var(--stn-chart-color-5);
+  --stn-chart-line-6: var(--stn-chart-color-6);
+  --stn-chart-line-stroke: var(--stn-chart-color-1);
+  --stn-chart-line-area-from: var(--stn-chart-color-1);
+  --stn-chart-line-area-to: var(--stn-opacity-black-0);
+  --stn-chart-line-dot-bg: var(--stn-elevation-surface-0);
+  --stn-chart-gauge-seg-1: var(--stn-chart-color-1);
+  --stn-chart-gauge-seg-2: var(--stn-chart-color-2);
+  --stn-chart-gauge-seg-3: var(--stn-chart-color-3);
+  --stn-chart-gauge-seg-4: var(--stn-chart-color-4);
+  --stn-chart-gauge-seg-5: var(--stn-chart-color-5);
+  --stn-chart-gauge-seg-6: var(--stn-chart-color-6);
+  --stn-chart-gauge-seg-7: var(--stn-chart-color-7);
+  --stn-chart-gauge-seg-8: var(--stn-chart-color-8);
+  --stn-chart-gauge-seg-9: var(--stn-chart-color-9);
+  --stn-chart-gauge-seg-10: var(--stn-chart-color-10);
+  --stn-widget-grade-row-track-bg: var(--stn-gray-200);
 }
 
 [data-theme='blue'][data-mode='dark'] {

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

@@ -279,4 +279,51 @@
   --stn-topology-minimap-border-width: var(--stn-size-1);
   --stn-topology-minimap-width: var(--stn-size-140);
   --stn-topology-minimap-content-height: var(--stn-size-96);
+  --stn-chart-bar-width-sm: var(--stn-size-4);
+  --stn-chart-bar-width-md: var(--stn-size-6);
+  --stn-chart-bar-width-lg: var(--stn-size-10);
+  --stn-chart-combo-bar-width-sm: var(--stn-size-12);
+  --stn-chart-combo-bar-width-md: var(--stn-size-18);
+  --stn-chart-combo-bar-width-lg: var(--stn-size-26);
+  --stn-chart-gauge-stroke-sm: var(--stn-size-2);
+  --stn-chart-gauge-stroke-md: var(--stn-size-4);
+  --stn-chart-gauge-stroke-lg: var(--stn-size-8);
+  --stn-chart-line-stroke-sm: var(--stn-size-1);
+  --stn-chart-line-stroke-md: var(--stn-size-2);
+  --stn-chart-line-stroke-lg: var(--stn-size-4);
+  --stn-chart-body-min-height: var(--stn-size-160);
+  --stn-chart-line-body-min-height: var(--stn-size-120);
+  --stn-chart-axis-y-width: var(--stn-size-40);
+  --stn-chart-axis-y-offset: var(--stn-size-44);
+  --stn-chart-col-min-width: var(--stn-size-20);
+  --stn-chart-col-max-width: var(--stn-size-48);
+  --stn-chart-bar-min-width: var(--stn-size-2);
+  --stn-chart-row-label-width: var(--stn-size-72);
+  --stn-chart-row-min-height: var(--stn-size-20);
+  --stn-chart-row-min-height-compact: var(--stn-size-16);
+  --stn-chart-gauge-size-default: var(--stn-size-90);
+  --stn-chart-gauge-size-max: var(--stn-size-110);
+  --stn-chart-gauge-size-min: var(--stn-size-68);
+  --stn-chart-gauge-legend-max-width: var(--stn-size-280);
+  --stn-chart-gauge-legend-dot-size: var(--stn-size-6);
+  --stn-chart-line-axis-y-width: var(--stn-size-36);
+  --stn-chart-combo-axis-y-width: var(--stn-size-36);
+  --stn-chart-combo-grid-offset-x: var(--stn-size-40);
+  --stn-chart-combo-bar-min-width: var(--stn-size-6);
+  --stn-chart-legend-bar-width: var(--stn-size-20);
+  --stn-chart-legend-bar-height: var(--stn-size-8);
+  --stn-chart-legend-line-marker-width: var(--stn-size-16);
+  --stn-chart-legend-line-marker-height: var(--stn-size-2);
+  --stn-chart-legend-line-dot-size: var(--stn-size-6);
+  --stn-chart-tooltip-dot-size: var(--stn-size-6);
+  --stn-chart-tooltip-bar-width: var(--stn-size-8);
+  --stn-chart-tooltip-bar-height: var(--stn-size-8);
+  --stn-chart-border-width: var(--stn-size-1);
+  --stn-widget-grade-row-icon-size: var(--stn-size-18);
+  --stn-widget-grade-row-track-height: var(--stn-size-4);
+  --stn-widget-grade-row-track-min-width: var(--stn-size-60);
+  --stn-widget-grade-row-label-min-width: var(--stn-size-80);
+  --stn-widget-grade-row-val-min-width: var(--stn-size-28);
+  --stn-widget-grade-row-pct-min-width: var(--stn-size-42);
+  --stn-widget-grade-row-grid-item-min-width: var(--stn-size-200);
 }

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

@@ -297,4 +297,48 @@
   --stn-topology-minimap-padding-x: var(--stn-space-10);
   --stn-topology-minimap-btn-padding-x: var(--stn-space-4);
   --stn-topology-minimap-content-margin-top: var(--stn-space-4);
+  --stn-chart-grid-inset-top: var(--stn-space-10);
+  --stn-chart-grid-inset-bottom: var(--stn-space-44);
+  --stn-chart-grid-inset-bottom-horizontal: var(--stn-space-24);
+  --stn-chart-grid-inset-bottom-combo: var(--stn-space-24);
+  --stn-chart-grid-inset-bottom-compact: var(--stn-space-6);
+  --stn-chart-grid-row-gap: var(--stn-space-8);
+  --stn-chart-col-padding-x: var(--stn-space-2);
+  --stn-chart-col-bars-gap: var(--stn-space-2);
+  --stn-chart-label-offset-top: var(--stn-space-4);
+  --stn-chart-row-padding-y: var(--stn-space-2);
+  --stn-chart-row-padding-x: var(--stn-space-4);
+  --stn-chart-row-padding-compact-y: var(--stn-space-1);
+  --stn-chart-row-label-padding-right: var(--stn-space-8);
+  --stn-chart-row-track-gap: var(--stn-space-2);
+  --stn-chart-row-val-margin-left: var(--stn-space-8);
+  --stn-chart-legend-padding-x: var(--stn-space-12);
+  --stn-chart-legend-padding-y: var(--stn-space-8);
+  --stn-chart-legend-margin-top: var(--stn-space-8);
+  --stn-chart-legend-gap: var(--stn-space-16);
+  --stn-chart-legend-item-gap: var(--stn-space-6);
+  --stn-chart-gauge-legend-gap-x: var(--stn-space-12);
+  --stn-chart-gauge-legend-gap-y: var(--stn-space-6);
+  --stn-chart-gauge-legend-item-gap: var(--stn-space-4);
+  --stn-chart-gauge-legend-margin-top: var(--stn-space-8);
+  --stn-chart-line-axis-y-bottom: var(--stn-space-14);
+  --stn-chart-line-axis-x-padding-left: calc(var(--stn-size-36) + var(--stn-space-2));
+  --stn-chart-line-axis-x-padding-right: var(--stn-space-5);
+  --stn-chart-line-axis-x-margin-top: var(--stn-space-4);
+  --stn-chart-tooltip-padding-x: var(--stn-space-10);
+  --stn-chart-tooltip-padding-y: var(--stn-space-6);
+  --stn-chart-tooltip-gap: var(--stn-space-4);
+  --stn-chart-tooltip-offset-y: var(--stn-space-10);
+  --stn-chart-tooltip-row-gap: var(--stn-space-6);
+  --stn-chart-tooltip-group-gap: var(--stn-space-4);
+  --stn-chart-tooltip-val-margin-left: var(--stn-space-8);
+  --stn-chart-combo-axis-y-padding: var(--stn-space-6);
+  --stn-chart-combo-col-padding-x: var(--stn-space-4);
+  --stn-widget-grade-row-list-gap: var(--stn-space-12);
+  --stn-widget-grade-row-grid-gap-y: var(--stn-space-14);
+  --stn-widget-grade-row-grid-gap-x: var(--stn-space-24);
+  --stn-widget-grade-row-gap: var(--stn-space-12);
+  --stn-widget-grade-row-padding-y: var(--stn-space-4);
+  --stn-widget-grade-row-label-gap: var(--stn-space-6);
+  --stn-widget-grade-row-right-gap: var(--stn-space-8);
 }

package/dist/chunk-DGZVOSEM.js

@@ -1,7 +0,0 @@
-// src/data/stnChart.ts
-var STN_CHART_INTRO = "\uC704\uC82F \uC178(`StnWidget`) \uC548\uC5D0 \uB123\uB294 \uCC28\uD2B8\xB7\uB9C9\uB300\xB7\uD604\uD669 \uBCF8\uBB38\uC785\uB2C8\uB2E4. Patterns \u2192 Widget\uC740 \uC178 + Chart \uC870\uD569\uC73C\uB85C \uC2E4\uC81C \uB300\uC2DC\uBCF4\uB4DC \uC704\uC82F\uC744 \uBCF4\uC5EC \uC90D\uB2C8\uB2E4.";
-
-export {
-  STN_CHART_INTRO
-};
-//# sourceMappingURL=chunk-DGZVOSEM.js.map

package/dist/chunk-DGZVOSEM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnChart.ts"],"sourcesContent":["/** Components → Chart — 대시보드 본문 차트·현황 블록 */\nexport const STN_CHART_INTRO =\n  '위젯 셸(`StnWidget`) 안에 넣는 차트·막대·현황 본문입니다. Patterns → Widget은 셸 + Chart 조합으로 실제 대시보드 위젯을 보여 줍니다.'\n"],"mappings":";AACO,IAAM,kBACX;","names":[]}

package/dist/chunk-PSVPO4FH.js

@@ -1,9 +0,0 @@
-// src/data/stnPackageVersion.ts
-var STN_UI_VERSION = "0.1.80";
-var STN_UI_VERSION_LABEL = "v0.1.80";
-
-export {
-  STN_UI_VERSION,
-  STN_UI_VERSION_LABEL
-};
-//# sourceMappingURL=chunk-PSVPO4FH.js.map

package/dist/chunk-PSVPO4FH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/data/stnPackageVersion.ts"],"sourcesContent":["/** Package version constants */\nexport const STN_UI_VERSION = '0.1.80'\nexport const STN_UI_VERSION_LABEL = 'v0.1.80'\n"],"mappings":";AACO,IAAM,iBAAiB;AACvB,IAAM,uBAAuB;","names":[]}