@stn-uiux/pub-ui 0.1.81 → 0.1.84

package/styles/components/stn-widget.css

@@ -419,122 +419,6 @@
   border-color: var(--stn-widget-hover-border);
 }
 
-/* Status List Component */
-.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-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, 1px)) solid var(--stn-widget-footer-well-border);
-  transition: background-color 0.15s ease, border-color 0.15s ease;
-}
-
-.stn-widget.appearance-dashboard .stn-widget__status-item {
-  background: var(--stn-widget-on-dark-surface);
-  border-color: transparent;
-}
-
-.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-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-widget__status-label {
-  color: var(--stn-widget-on-dark-label);
-}
-
-.stn-widget__status-dot {
-  width: var(--stn-widget-dot-size, var(--stn-size-8, 8px));
-  height: var(--stn-widget-dot-size, var(--stn-size-8, 8px));
-  border-radius: var(--stn-radius-circle, 50%);
-  flex-shrink: 0;
-}
-
-.stn-widget__status-dot--critical { background: var(--stn-widget-dot-critical); }
-.stn-widget__status-dot--major { background: var(--stn-widget-dot-major); }
-.stn-widget__status-dot--minor { background: var(--stn-widget-dot-minor); }
-.stn-widget__status-dot--info { background: var(--stn-widget-dot-info); }
-.stn-widget__status-dot--normal { background: var(--stn-widget-dot-normal); }
-
-.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-widget__status-val {
-  color: var(--stn-static-white);
-}
-
-/* Stat Group & Card */
-.stn-widget__stat-group {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--stn-widget-stat-min-width, var(--stn-size-110, 110px)), 1fr));
-  gap: var(--stn-widget-stat-group-gap);
-  width: 100%;
-}
-
-.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, 1px)) 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-widget__stat-card {
-  background: var(--stn-widget-on-dark-surface);
-  border-color: var(--stn-widget-on-dark-stat-border);
-}
-
-.stn-widget__stat-card:hover {
-  transform: translateY(-2px);
-  border-color: var(--stn-widget-stat-hover-border);
-  background-color: color-mix(in srgb, var(--stn-primary) 8%, transparent);
-}
-
-.stn-widget__stat-label {
-  font-size: var(--stn-text-caption-medium-size);
-  color: var(--stn-text-secondary);
-}
-
-.stn-widget.appearance-dashboard .stn-widget__stat-label {
-  color: var(--stn-widget-on-dark-stat-label);
-}
-
-.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-widget__stat-count {
-  color: var(--stn-static-white);
-}
-
 /* Widget Appearance {solid|line|transparent|translucent|overlay}
    NOTE: Do NOT force padding: 0 here so density variations (default 12px / compact 8px) work properly */
 .stn-widget.solid,
@@ -702,3 +586,6 @@
   color: var(--stn-text-primary);
 }
 
+
+
+

package/styles/layouts/stn-container.css

@@ -9,6 +9,7 @@
   --stn-container-gutter-mobile: var(--stn-space-16, 16px);
   --stn-container-gutter-tablet: var(--stn-space-16, 16px);
   --stn-container-gutter-desktop: var(--stn-space-24, 24px);
+  --stn-container-gutter-none: var(--stn-space-0);
 }
 
 .stn-container {
@@ -41,6 +42,13 @@
   }
 }
 
+/* 컨테이너 자신의 좌우 패딩만 끈다.
+   !important를 쓰지 않아, .stn-layer-1__body > .stn-container 의 16px은 그대로 남는다. */
+.stn-container--disable-gutters {
+  padding-left: var(--stn-container-gutter-none);
+  padding-right: var(--stn-container-gutter-none);
+}
+
 /* Fluid max-width. width 100%라서 캡에 닿기 전까지 화면과 같이 늘어난다.
    xs는 breakpoint가 없어서 444px. sm–xl은 STN breakpoint 폭. */
 .stn-container--xs,

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

@@ -11,18 +11,7 @@
    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 */
+/* 1-1. Default Theme — Dark Mode (Base / Default) */
 :root,
 [data-mode='dark'],
 [data-theme='default'][data-mode='dark'] {
@@ -34,18 +23,30 @@
   --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-2. 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-4. Blue Theme — Dark Mode */
+/* 1-3. Blue Theme — Dark Mode (Base) */
+[data-theme='blue'],
 [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');
 }
 
+/* 1-4. 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');
+}
+
 
 /* ==========================================================================
    2. Base Layer 0 Shell

package/styles/patterns/stn-split-view.css

@@ -0,0 +1,130 @@
+@charset "utf-8";
+/**
+ * StnSplitView — Side + Stage layout shell (SSOT)
+ * Recipe: Card(padding=none) + Body flush + SplitView + FloatingToolbar on Stage
+ */
+
+.stn-split-view {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.stn-split-view--fill {
+  flex: 1 1 0%;
+  height: 100%;
+  align-self: stretch;
+}
+
+/* ── Side ─────────────────────────────────────────── */
+.stn-split-view__side {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 auto;
+  width: var(--stn-split-view-side-width, var(--stn-split-view-side-width-md));
+  min-width: 0;
+  min-height: 0;
+  border-right: var(--stn-size-1, 1px) solid var(--stn-card-border-color, var(--stn-border-subtle));
+  background: transparent;
+}
+
+.stn-split-view__side--sm {
+  --stn-split-view-side-width: var(--stn-split-view-side-width-sm);
+}
+
+.stn-split-view__side--md {
+  --stn-split-view-side-width: var(--stn-split-view-side-width-md);
+}
+
+.stn-split-view__side--lg {
+  --stn-split-view-side-width: var(--stn-split-view-side-width-lg);
+}
+
+.stn-split-view__side--end {
+  border-right: none;
+  border-left: var(--stn-size-1, 1px) solid var(--stn-card-border-color, var(--stn-border-subtle));
+  order: 1;
+}
+
+.stn-split-view__side-header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-8, 8px);
+  padding: var(--stn-space-12, 12px) var(--stn-space-16, 16px);
+  border-bottom: var(--stn-size-1, 1px) solid var(--stn-card-border-color, var(--stn-border-subtle));
+}
+
+.stn-split-view__side-body {
+  flex: 1 1 0%;
+  min-height: 0;
+  width: 100%;
+}
+
+.stn-split-view__side-body.stn-scroll {
+  padding: var(--stn-space-8, 8px) var(--stn-space-12, 12px);
+}
+
+/* ── Stage (floating toolbar / overlay positioning context) ── */
+.stn-split-view__stage {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Non-toolbar floating slots (legend, filters, callouts) */
+.stn-split-view__overlay {
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 10;
+  max-width: min(100%, var(--stn-split-view-overlay-max-width, var(--stn-size-320, 320px)));
+  pointer-events: auto;
+}
+
+.stn-split-view__overlay--top-left {
+  top: var(--stn-space-16, 16px);
+  left: var(--stn-space-16, 16px);
+}
+
+.stn-split-view__overlay--top-right {
+  top: var(--stn-space-16, 16px);
+  right: var(--stn-space-16, 16px);
+}
+
+.stn-split-view__overlay--bottom-left {
+  bottom: var(--stn-space-16, 16px);
+  left: var(--stn-space-16, 16px);
+}
+
+.stn-split-view__overlay--bottom-center {
+  bottom: var(--stn-space-16, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.stn-split-view__overlay--bottom-right {
+  bottom: var(--stn-space-16, 16px);
+  right: var(--stn-space-16, 16px);
+}
+
+.stn-split-view__overlay--center-left {
+  top: 50%;
+  left: var(--stn-space-16, 16px);
+  transform: translateY(-50%);
+}
+
+.stn-split-view__overlay--center-right {
+  top: 50%;
+  right: var(--stn-space-16, 16px);
+  transform: translateY(-50%);
+}

package/styles/patterns/stn-step-cards.css

@@ -0,0 +1,60 @@
+@charset "utf-8";
+/**
+ * STN Pattern — Step cards (.stn-step-cards)
+ * 노드만 있는 가로 스텝퍼 아래, 단계마다 결과 카드를 같은 칸에 맞춘다.
+ */
+
+.stn-step-cards {
+  --stn-step-cards-count: 1;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-16);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.stn-step-cards__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--stn-step-cards-count), minmax(0, 1fr));
+  align-items: stretch;
+}
+
+.stn-step-cards__cell {
+  min-width: 0;
+  display: flex;
+  padding-inline: var(--stn-space-8);
+}
+
+.stn-step-cards .stn-card.stn-step-cards__card {
+  gap: var(--stn-space-12);
+}
+
+.stn-step-cards .stn-card.stn-step-cards__card.is-current {
+  border-color: var(--stn-primary);
+}
+
+.stn-step-cards__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--stn-space-4);
+  min-width: 0;
+}
+
+.stn-step-cards__result {
+  display: flex;
+  align-items: baseline;
+  gap: var(--stn-space-6);
+}
+
+.stn-step-cards__action {
+  margin-top: auto;
+}
+
+.stn-step-cards .stn-step-cards__result-value.is-running {
+  color: var(--stn-primary);
+}
+
+.stn-step-cards .stn-step-cards__result-value.is-warning {
+  color: var(--stn-feedback-warning);
+}

package/styles/patterns/stn-tree.css

@@ -88,6 +88,15 @@
   flex-basis: var(--stn-tree-cell-size);
 }
 
+.stn-tree__cell--checkbox {
+  flex-basis: var(--stn-tree-cell-size);
+  cursor: default;
+}
+
+.stn-tree__cell--checkbox .stn-checkbox {
+  margin: 0;
+}
+
 .stn-tree__guide {
   display: block;
   width: var(--stn-tree-guide-size);

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;
+}