@stn-uiux/pub-ui 0.1.70 → 0.1.72

package/dist/{chunk-N4GLOJTF.js → chunk-J5UYMTVQ.js}

@@ -1,6 +1,6 @@
 import {
   systemIconSrc
-} from "./chunk-4QTBT6OB.js";
+} from "./chunk-AHS3E6AS.js";
 
 // src/data/stnSideNavItem.ts
 var STN_SIDE_NAV_ITEM_INTRO = '\uC0AC\uC774\uB4DC\uBC14 \uBA54\uB274 \uD589 \u2014 Figma `menu`(184:63009). `StnSideNavItem` + `.stn-side-nav-item`. \uD3BC\uCE68(Default) \xB7 \uC811\uD798(Collapsed) \xB7 2depth(`variant="sub"`).';
@@ -33,4 +33,4 @@ export {
   STN_SIDE_NAV_SUB_ICON,
   STN_SIDE_NAV_ITEM_STATES
 };
-//# sourceMappingURL=chunk-N4GLOJTF.js.map
+//# sourceMappingURL=chunk-J5UYMTVQ.js.map

package/dist/{chunk-BTVWG4GB.js → chunk-LEAQPPMM.js}

@@ -1,6 +1,6 @@
 import {
   systemIconSrc
-} from "./chunk-4QTBT6OB.js";
+} from "./chunk-AHS3E6AS.js";
 
 // src/data/stnBreadcrumb.ts
 var STN_BREADCRUMB_FIGMA = "40002093:31845";
@@ -57,4 +57,4 @@ export {
   STN_BREADCRUMB_DEMO_ITEMS,
   STN_BREADCRUMB_PARTS
 };
-//# sourceMappingURL=chunk-BTVWG4GB.js.map
+//# sourceMappingURL=chunk-LEAQPPMM.js.map

package/dist/chunk-OYP5UJ62.js

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

package/dist/chunk-OYP5UJ62.js.map

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

package/dist/{chunk-ESH5VDHX.js → chunk-YRZXP3U5.js}

@@ -1,6 +1,6 @@
 import {
   systemIconSrc
-} from "./chunk-4QTBT6OB.js";
+} from "./chunk-AHS3E6AS.js";
 
 // src/data/stnHeader.ts
 var STN_HEADER_INTRO = "\uD398\uC774\uC9C0 \uCD5C\uC0C1\uB2E8\uC5D0 \uBC30\uCE58\uB418\uC5B4 \uC2DC\uC2A4\uD15C \uC0C1\uD0DC, \uD0C0\uC774\uD2C0, \uC2E4\uC2DC\uAC04 \uC2DC\uACC4, \uD234\uBC14 \uC561\uC158, \uBE0C\uB808\uB4DC\uD06C\uB7FC\uC744 \uD45C\uCD9C\uD558\uB294 \uC0C1\uB2E8 \uD5E4\uB354 \uD328\uD134\uC785\uB2C8\uB2E4. \uC88C\uCE21(Left) \xB7 \uC911\uC559(Center) \xB7 \uC6B0\uCE21(Right) 3\uAC1C \uC2AC\uB86F\uC744 \uC720\uC5F0\uD558\uAC8C \uC870\uB9BD\uD558\uC5EC \uAD6C\uC131\uD560 \uC218 \uC788\uC73C\uBA70, Center \uC2AC\uB86F \uC720\uBB34\uC5D0 \uB530\uB77C \uBC18\uC751\uD615 \uADF8\uB9AC\uB4DC \uB808\uC774\uC544\uC6C3\uC774 \uC790\uB3D9\uC73C\uB85C \uCD5C\uC801\uD654\uB429\uB2C8\uB2E4. \uD3ED\uC774 \uC904\uBA74 Right\uB9CC \uBA3C\uC800 \uCD95\uC57D(\u22641280 \uD234\uBC14 \uC544\uC774\uCF58\uD654)\uB418\uACE0, Center StnHeaderTitle\uC740 md(32px)\uC5D0\uC11C sm(\u22641280), compact(\u2264720)\uC73C\uB85C \uC810\uC9C4 \uCD95\uC18C\uB429\uB2C8\uB2E4.";
@@ -102,4 +102,4 @@ export {
   STN_HEADER_PAGE_TITLE_DEMO,
   STN_HEADER_TOOLBAR_DEMO_ACTIONS
 };
-//# sourceMappingURL=chunk-ESH5VDHX.js.map
+//# sourceMappingURL=chunk-YRZXP3U5.js.map

package/dist/cli.js

@@ -45,7 +45,7 @@ import {
 } from "./chunk-IZRGNUH6.js";
 import {
   STN_HEADER_USAGE
-} from "./chunk-ESH5VDHX.js";
+} from "./chunk-YRZXP3U5.js";
 import "./chunk-BYGKJSDN.js";
 import {
   STN_DATE_PICKER_USAGE
@@ -54,8 +54,8 @@ import "./chunk-5F63CMM7.js";
 import {
   STN_ALERT_CENTER_USAGE
 } from "./chunk-2WKT7X65.js";
-import "./chunk-4QTBT6OB.js";
-import "./chunk-JHXSF7FS.js";
+import "./chunk-AHS3E6AS.js";
+import "./chunk-AR7NYVE5.js";
 
 // src/cli/index.ts
 import { createRequire } from "module";

package/dist/data/index.js

@@ -48,7 +48,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-N4GLOJTF.js";
+} from "../chunk-J5UYMTVQ.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -105,7 +105,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "../chunk-JHRYIWWJ.js";
+} from "../chunk-7YKAIENZ.js";
 import {
   STN_SEGMENTED_FIGMA,
   STN_SEGMENTED_HTML,
@@ -136,7 +136,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-QQYDH4WU.js";
+} from "../chunk-OYP5UJ62.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -484,7 +484,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "../chunk-ESH5VDHX.js";
+} from "../chunk-YRZXP3U5.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -534,17 +534,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "../chunk-BTVWG4GB.js";
+} from "../chunk-LEAQPPMM.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-4QTBT6OB.js";
+} from "../chunk-AHS3E6AS.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-JHXSF7FS.js";
+} from "../chunk-AR7NYVE5.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,

package/dist/data/stnBreadcrumb.js

@@ -5,9 +5,9 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "../chunk-BTVWG4GB.js";
-import "../chunk-4QTBT6OB.js";
-import "../chunk-JHXSF7FS.js";
+} from "../chunk-LEAQPPMM.js";
+import "../chunk-AHS3E6AS.js";
+import "../chunk-AR7NYVE5.js";
 export {
   STN_BREADCRUMB_DEMO_ITEMS,
   STN_BREADCRUMB_FIGMA,

package/dist/data/stnHeader.js

@@ -6,9 +6,9 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "../chunk-ESH5VDHX.js";
-import "../chunk-4QTBT6OB.js";
-import "../chunk-JHXSF7FS.js";
+} from "../chunk-YRZXP3U5.js";
+import "../chunk-AHS3E6AS.js";
+import "../chunk-AR7NYVE5.js";
 export {
   STN_HEADER_INTRO,
   STN_HEADER_PAGE_TITLE_DEMO,

package/dist/data/stnPackageVersion.d.ts

@@ -1,5 +1,5 @@
 /** Package version constants */
-declare const STN_UI_VERSION = "0.1.68";
-declare const STN_UI_VERSION_LABEL = "v0.1.68";
+declare const STN_UI_VERSION = "0.1.72";
+declare const STN_UI_VERSION_LABEL = "v0.1.72";
 
 export { STN_UI_VERSION, STN_UI_VERSION_LABEL };

package/dist/data/stnPackageVersion.js

@@ -1,7 +1,7 @@
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "../chunk-QQYDH4WU.js";
+} from "../chunk-OYP5UJ62.js";
 export {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL

package/dist/data/stnSectionSide.d.ts

@@ -24,6 +24,10 @@ declare const STN_SECTION_SIDE_SPEC: readonly [{
     readonly property: "Background";
     readonly value: "`--stn-section-side-bg`";
     readonly note: "light white · dark gray-900";
+}, {
+    readonly property: "Translucent Bg";
+    readonly value: "`--stn-section-side-bg-translucent`";
+    readonly note: "variant=\"translucent\" — light white-50 · dark black-50 (blur 8px)";
 }, {
     readonly property: "Border";
     readonly value: "`--stn-section-side-border`";
@@ -40,6 +44,10 @@ declare const STN_SECTION_SIDE_SPEC: readonly [{
     readonly property: "fill";
     readonly value: "`fill` prop → `.stn-section-side--fill`";
     readonly note: "list view — search+table 열 높이 · 하단 inset은 .stn-container padding-bottom";
+}, {
+    readonly property: "variant";
+    readonly value: "`variant=\"translucent\"`";
+    readonly note: "글래스모피즘 반투명 블러 패널 (.stn-section-side.translucent)";
 }];
 declare const STN_SECTION_SIDE_USAGE = "import {\n  StnSectionSide,\n  StnTree,\n} from '@stn-uiux/pub-ui-react'\nimport { STN_TREE_DEMO } from '@stn-uiux/pub-ui/data/stnTree'\n\n<StnSectionSide style={{ height: 360 }}>\n  <StnTree\n    heading=\"FOLDER STRUCTURE\"\n    nodes={STN_TREE_DEMO}\n    defaultExpandedIds={['root', 'group-a', 'equip', 'group-b']}\n  />\n</StnSectionSide>";
 

package/dist/data/stnSectionSide.js

@@ -3,7 +3,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "../chunk-JHRYIWWJ.js";
+} from "../chunk-7YKAIENZ.js";
 export {
   STN_SECTION_SIDE_FIGMA,
   STN_SECTION_SIDE_INTRO,

package/dist/data/stnSideNavItem.js

@@ -3,9 +3,9 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "../chunk-N4GLOJTF.js";
-import "../chunk-4QTBT6OB.js";
-import "../chunk-JHXSF7FS.js";
+} from "../chunk-J5UYMTVQ.js";
+import "../chunk-AHS3E6AS.js";
+import "../chunk-AR7NYVE5.js";
 export {
   STN_NAV_MENU_SUB_ICON,
   STN_SIDE_NAV_ITEM_INTRO,

package/dist/data/stnSystemIcons.js

@@ -4,10 +4,10 @@ import {
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "../chunk-4QTBT6OB.js";
+} from "../chunk-AHS3E6AS.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-JHXSF7FS.js";
+} from "../chunk-AR7NYVE5.js";
 export {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/dist/data/stnSystemIconsData.generated.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_ICON_DATA_URLS
-} from "../chunk-JHXSF7FS.js";
+} from "../chunk-AR7NYVE5.js";
 export {
   SYSTEM_ICON_DATA_URLS
 };

package/dist/index.js

@@ -53,7 +53,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-N4GLOJTF.js";
+} from "./chunk-J5UYMTVQ.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -110,7 +110,7 @@ import {
   STN_SECTION_SIDE_INTRO,
   STN_SECTION_SIDE_SPEC,
   STN_SECTION_SIDE_USAGE
-} from "./chunk-JHRYIWWJ.js";
+} from "./chunk-7YKAIENZ.js";
 import {
   STN_SEGMENTED_FIGMA,
   STN_SEGMENTED_HTML,
@@ -141,7 +141,7 @@ import {
 import {
   STN_UI_VERSION,
   STN_UI_VERSION_LABEL
-} from "./chunk-QQYDH4WU.js";
+} from "./chunk-OYP5UJ62.js";
 import {
   STN_PAGE_ENTER_MOTION_INTRO,
   STN_PAGE_ENTER_MOTION_ROWS,
@@ -489,7 +489,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-ESH5VDHX.js";
+} from "./chunk-YRZXP3U5.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -539,17 +539,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-BTVWG4GB.js";
+} from "./chunk-LEAQPPMM.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-4QTBT6OB.js";
+} from "./chunk-AHS3E6AS.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-JHXSF7FS.js";
+} from "./chunk-AR7NYVE5.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

package/styles/@assets/svg/system/line/dots-horizontal.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 12H12.01" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 12H6.01" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 12H18.01" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/styles/components/stn-card.css

@@ -5,33 +5,12 @@
  * 100% compliant with STN Semantic Token Standard (GEMINI.md).
  */
 
-:root {
-  --stn-card-bg-flat: var(--stn-gray-50);
-  --stn-card-bg-outlined: transparent;
-  --stn-card-bg-elevated: var(--stn-static-white);
-  --stn-card-border-color: var(--stn-border-subtle);
-  --stn-card-shadow: var(--stn-shadow-2, 0 4px 14px rgba(0, 0, 0, 0.07));
-  --stn-card-radius-sm: var(--stn-radius-8, 8px);
-  --stn-card-radius-md: var(--stn-radius-12, 12px);
-  --stn-card-radius-lg: var(--stn-radius-16, 16px);
-  --stn-card-pad-sm: var(--stn-space-8, 8px);
-  --stn-card-pad-md: var(--stn-space-16, 16px);
-  --stn-card-pad-lg: var(--stn-space-24, 24px);
-}
-
-[data-theme='dark'] {
-  --stn-card-bg-flat: var(--stn-gray-850);
-  --stn-card-bg-elevated: var(--stn-gray-800);
-  --stn-card-border-color: var(--stn-gray-700);
-  --stn-card-shadow: none;
-}
-
 .stn-card {
   box-sizing: border-box;
   position: relative;
   display: block;
   width: 100%;
-  border-radius: var(--stn-card-radius-md);
+  border-radius: var(--stn-radius-12, 12px);
   color: inherit;
   transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
 }
@@ -43,7 +22,7 @@
 }
 
 .stn-card.outlined {
-  background-color: var(--stn-card-bg-outlined);
+  background-color: transparent;
   border: 1px solid var(--stn-card-border-color);
 }
 
@@ -52,22 +31,17 @@
   box-shadow: var(--stn-card-shadow);
 }
 
-[data-theme='dark'] .stn-card.elevated {
-  background-color: var(--stn-gray-800);
-  box-shadow: none;
-}
-
 /* Radius */
-.stn-card.radius-sm { border-radius: var(--stn-card-radius-sm); }
-.stn-card.radius-md { border-radius: var(--stn-card-radius-md); }
-.stn-card.radius-lg { border-radius: var(--stn-card-radius-lg); }
+.stn-card.radius-sm { border-radius: var(--stn-radius-8, 8px); }
+.stn-card.radius-md { border-radius: var(--stn-radius-12, 12px); }
+.stn-card.radius-lg { border-radius: var(--stn-radius-16, 16px); }
 .stn-card.radius-none { border-radius: 0; }
 
 /* Padding */
 .stn-card.pad-none { padding: 0; }
-.stn-card.pad-sm { padding: var(--stn-card-pad-sm); }
-.stn-card.pad-md { padding: var(--stn-card-pad-md); }
-.stn-card.pad-lg { padding: var(--stn-card-pad-lg); }
+.stn-card.pad-sm { padding: var(--stn-space-8, 8px); }
+.stn-card.pad-md { padding: var(--stn-space-16, 16px); }
+.stn-card.pad-lg { padding: var(--stn-space-24, 24px); }
 
 /* Layout modifiers */
 .stn-card.is-full-width,

package/styles/components/stn-checkbox.css

@@ -68,6 +68,26 @@
   background-color: var(--stn-checkbox-bg, transparent);
 }
 
+/* Variant: Translucent (반투명 블러 배경) */
+.stn-checkbox.translucent input + label:before {
+  border-color: var(--stn-checkbox-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-checkbox-bg-translucent, var(--stn-opacity-black-60));
+  backdrop-filter: blur(var(--stn-checkbox-translucent-blur, 4px));
+  -webkit-backdrop-filter: blur(var(--stn-checkbox-translucent-blur, 4px));
+}
+
+.stn-checkbox.translucent input:checked + label:before,
+.stn-checkbox.translucent input:indeterminate + label:before,
+.stn-checkbox.translucent.indeterminate input + label:before {
+  border-color: var(--stn-checkbox-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-checkbox-bg-translucent, var(--stn-opacity-black-60));
+}
+
+.stn-checkbox.translucent input:disabled + label:before {
+  border-color: var(--stn-checkbox-disabled-border);
+  background-color: var(--stn-checkbox-disabled-bg);
+}
+
 .stn-checkbox input:checked + label:after {
   content: '';
   position: absolute;

package/styles/components/stn-chip.css

@@ -220,9 +220,6 @@
   --stn-chip-fg: var(--stn-chip-color);
 }
 
-[data-theme='dark'] .stn-chip.soft {
-  --stn-chip-bg: color-mix(in srgb, var(--stn-chip-color) 22%, transparent);
-}
 
 /* Outline (외곽선 테두리 단일 통일) */
 .stn-chip.outline {

package/styles/components/stn-header-title.css

@@ -91,11 +91,11 @@
   display: block;
 }
 
-[data-theme='light'] .stn-header-title__frame-img--dark {
+[data-mode='light'] .stn-header-title__frame-img--dark {
   display: none;
 }
 
-[data-theme='light'] .stn-header-title__frame-img--light {
+[data-mode='light'] .stn-header-title__frame-img--light {
   display: block;
 }
 

package/styles/components/stn-label-prefix.css

@@ -7,7 +7,7 @@
  *     └── .stn-label-prefix__control (children slot — StnDropdown·StnTextField·StnDateRangeField 등)
  *
  * Props:
- *   variant  : outline(기본) · filled · standard · transparent
+ *   variant  : outline(기본) · filled · standard · transparent · translucent
  *   size     : sm(24px) · md(32px, 기본) · lg(40px)
  *   radius   : none · sm · md · lg · xl (기본은 size에 따름)
  *   position : prefix(왼쪽, 기본) · suffix(오른쪽)
@@ -18,7 +18,7 @@
  * 3. Divider (.stn-label-prefix__divider)
  * 4. Control Slot (.stn-label-prefix__control)
  * 5. Size (sm · md · lg)
- * 6. Variant (outline · filled · standard · transparent)
+ * 6. Variant (outline · filled · standard · transparent · translucent)
  * 7. Focus-within State
  * 8. Suffix Position
  * 9. Radius Override
@@ -199,11 +199,24 @@
   background-color: transparent;
 }
 
+/* 6-5. Translucent (반투명 블러 배경) */
+.stn-label-prefix.translucent {
+  border: var(--stn-size-1, 1px) solid var(--stn-label-prefix-border-translucent, var(--stn-border-subtle));
+  background-color: var(--stn-label-prefix-bg-translucent, var(--stn-opacity-black-60));
+  backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
+  -webkit-backdrop-filter: blur(var(--stn-label-prefix-translucent-blur, 8px));
+}
+
+.stn-label-prefix.translucent > .stn-label-prefix__label {
+  background-color: transparent;
+}
+
 /* ==========================================================================
    7. Focus-within State
    ========================================================================== */
 .stn-label-prefix.outline:focus-within,
-.stn-label-prefix.filled:focus-within {
+.stn-label-prefix.filled:focus-within,
+.stn-label-prefix.translucent:focus-within {
   border-color: var(--stn-input-focus-fg, var(--stn-primary));
 }
 

package/styles/components/stn-logo.css

@@ -90,29 +90,29 @@
   height: var(--stn-logo-onlyimg-height-xl, var(--stn-size-64, 64px));
 }
 
-/* Default theme (dark) */
-.stn-logo:not([data-theme='light']) .stn-logo__img.dark {
+/* Default mode (dark) */
+.stn-logo:not([data-mode='light']) .stn-logo__img.dark {
   display: block;
 }
 
-[data-theme='light'] .stn-logo:not([data-theme='dark']) .stn-logo__img.dark {
+[data-mode='light'] .stn-logo:not([data-mode='dark']) .stn-logo__img.dark {
   display: none;
 }
 
-[data-theme='light'] .stn-logo:not([data-theme='dark']) .stn-logo__img.light {
+[data-mode='light'] .stn-logo:not([data-mode='dark']) .stn-logo__img.light {
   display: block;
 }
 
-.stn-logo[data-theme='dark'] .stn-logo__img.dark {
+.stn-logo[data-mode='dark'] .stn-logo__img.dark {
   display: block;
 }
-.stn-logo[data-theme='dark'] .stn-logo__img.light {
+.stn-logo[data-mode='dark'] .stn-logo__img.light {
   display: none;
 }
 
-.stn-logo[data-theme='light'] .stn-logo__img.light {
+.stn-logo[data-mode='light'] .stn-logo__img.light {
   display: block;
 }
-.stn-logo[data-theme='light'] .stn-logo__img.dark {
+.stn-logo[data-mode='light'] .stn-logo__img.dark {
   display: none;
 }

package/styles/components/stn-pagination.css

@@ -147,41 +147,31 @@
   background: transparent;
 }
 
-.stn-pagination--outlined .stn-pagination__page.is-active,
-.stn-pagination--outlined .stn-pagination__page[aria-current='page'] {
-  border: 1px solid var(--stn-pagination-active-bg, var(--stn-primary));
+.stn-pagination--outlined :is(.stn-pagination__page.is-active, .stn-pagination__page[aria-current='page']),
+.stn-pagination__page.is-active.outlined {
+  border: 1px solid var(--stn-pagination-outlined-active-border, var(--stn-pagination-outlined-border));
   background: transparent;
-  color: var(--stn-pagination-active-bg, var(--stn-primary));
+  color: var(--stn-pagination-outlined-active-color, var(--stn-pagination-active-color));
 }
 
-.stn-pagination--outlined .stn-pagination__page.is-active:hover,
-.stn-pagination--outlined .stn-pagination__page[aria-current='page']:hover {
-  background: color-mix(in srgb, var(--stn-pagination-active-bg, var(--stn-primary)) 10%, transparent);
-}
-
-/* outlined 기본(컬러 미지정) 활성 페이지 */
-.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
-.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page[aria-current='page'] {
-  border: 1px solid var(--stn-gray-400, #94a3b8);
-  background: transparent;
-  color: var(--stn-text-primary, #ffffff);
-}
-
-[data-theme='light'] .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
-.light .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active {
-  border-color: var(--stn-gray-500, #64748b);
-  color: var(--stn-gray-800, #1e293b);
+.stn-pagination--outlined :is(.stn-pagination__page.is-active:hover, .stn-pagination__page[aria-current='page']:hover),
+.stn-pagination__page.is-active.outlined:hover {
+  background: color-mix(in srgb, var(--stn-pagination-outlined-active-border, var(--stn-pagination-outlined-border)) 10%, transparent);
 }
 
 /* Color variations */
 .stn-pagination--primary {
-  --stn-pagination-active-bg: var(--stn-primary, var(--stn-blue-500));
-  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+  --stn-pagination-active-bg: var(--stn-primary);
+  --stn-pagination-active-color: var(--stn-static-white);
+  --stn-pagination-outlined-active-border: var(--stn-primary);
+  --stn-pagination-outlined-active-color: var(--stn-primary);
 }
 
 .stn-pagination--secondary {
-  --stn-pagination-active-bg: var(--stn-secondary, var(--stn-purple-500));
-  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+  --stn-pagination-active-bg: var(--stn-secondary);
+  --stn-pagination-active-color: var(--stn-static-white);
+  --stn-pagination-outlined-active-border: var(--stn-secondary);
+  --stn-pagination-outlined-active-color: var(--stn-secondary);
 }
 
 /* Disabled state */

package/styles/components/stn-side-nav.css

@@ -266,8 +266,8 @@ position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--stn-side-nav-dropdown-gap);
-  background: var(--stn-nav-menu-sub-bg, var(--stn-surface-overlay, #1b202c));
-  border: var(--stn-side-nav-border-width, 1px) solid var(--stn-border-color, rgba(255, 255, 255, 0.12));
+  background: var(--stn-nav-menu-sub-bg);
+  border: var(--stn-side-nav-border-width, 1px) solid var(--stn-border-color);
   border-radius: var(--stn-side-nav-dropdown-radius);
   box-shadow: var(--stn-side-nav-dropdown-shadow);
   z-index: 100;
@@ -275,11 +275,6 @@ position: relative;
   -webkit-backdrop-filter: blur(var(--stn-side-nav-dropdown-blur, 16px));
 }
 
-[data-theme='light'] .stn-side-nav__subnav.dropdown {
-  background: var(--stn-static-white, #ffffff);
-  border-color: var(--stn-border-subtle, rgba(0, 0, 0, 0.12));
-}
-
 /* 드롭다운 배경 없는 스타일 (transparent variant) */
 .stn-side-nav__subnav.dropdown.transparent {
   background: transparent;
@@ -494,12 +489,6 @@ border-radius: 0 var(--stn-side-nav-footer-curved-radius) 0 0;
   padding: var(--stn-side-nav-footer-curved-padding);
 }
 
-[data-theme='light'] .stn-side-nav__footer.curved {
-border: none;
-  border-top: var(--stn-side-nav-border-width, 1px) solid var(--stn-side-nav-divider);
-  background: var(--stn-side-nav-footer-curved-bg);
-  box-shadow: var(--stn-side-nav-footer-curved-shadow);
-}
 
 /* Collapsed footer adjustments */
 .stn-side-nav.collapsed .stn-side-nav__footer {

package/styles/components/stn-status.css

@@ -230,15 +230,6 @@
   100% { transform: scale(0.95); opacity: 0.8; }
 }
 
-/* Dot — 라이트 모드 보정 (토큰이 자동 전환되지 않는 box-shadow 강도 조정) */
-[data-theme='light'] .stn-status-dot.up .stn-status-dot__point {
-  background-color: var(--stn-primary);
-  box-shadow: 0 0 5px color-mix(in srgb, var(--stn-primary) 50%, transparent);
-}
-
-[data-theme='light'] .stn-status-dot.down .stn-status-dot__point {
-  background-color: var(--stn-gray-400);
-}
 
 /* ==========================================================================
    1-2. Status Dot Group (.stn-status-dot-group)
@@ -333,10 +324,6 @@
   --_thumb-shadow: var(--stn-status-switch-checked-thumb-shadow);
 }
 
-/* Switch — 라이트 모드 (토큰이 data-theme='light'에서 자동 전환됨) */
-[data-theme='light'] .stn-status-switch:hover {
-  filter: brightness(0.97);
-}
 
 .stn-status-switch__badge {
   display: inline-flex;