@stn-uiux/pub-ui 0.1.65 → 0.1.66

package/package.json

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

package/styles/components/stn-scroll.css

@@ -25,7 +25,8 @@
 /* Firefox 및 webkit-scrollbar 미지원 브라우저용 W3C 표준 Scrollbar 속성 */
 @supports not selector(::-webkit-scrollbar) {
   .stn-scroll,
-  .stn-dropdown > .select_option {
+  .stn-dropdown > .select_option,
+  .stn-side-nav__menu {
     scrollbar-width: thin;
     scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
   }
@@ -49,26 +50,30 @@
 
 /* Chrome, Edge, Safari 등 WebKit / Chromium 기반 브라우저 세부 픽셀 스크롤바 */
 .stn-scroll::-webkit-scrollbar,
-.stn-dropdown > .select_option::-webkit-scrollbar {
+.stn-dropdown > .select_option::-webkit-scrollbar,
+.stn-side-nav__menu::-webkit-scrollbar {
   width: var(--stn-scroll-width);
   height: var(--stn-scroll-width);
   background: var(--stn-scroll-track);
 }
 
 .stn-scroll::-webkit-scrollbar-track,
-.stn-dropdown > .select_option::-webkit-scrollbar-track {
+.stn-dropdown > .select_option::-webkit-scrollbar-track,
+.stn-side-nav__menu::-webkit-scrollbar-track {
   background: var(--stn-scroll-track);
   border-radius: 99px;
 }
 
 .stn-scroll::-webkit-scrollbar-thumb,
-.stn-dropdown > .select_option::-webkit-scrollbar-thumb {
+.stn-dropdown > .select_option::-webkit-scrollbar-thumb,
+.stn-side-nav__menu::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb);
   border-radius: var(--stn-scroll-radius);
 }
 
 .stn-scroll::-webkit-scrollbar-thumb:hover,
-.stn-dropdown > .select_option::-webkit-scrollbar-thumb:hover {
+.stn-dropdown > .select_option::-webkit-scrollbar-thumb:hover,
+.stn-side-nav__menu::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-hover);
 }
 
@@ -76,7 +81,9 @@
 .stn-scroll::-webkit-scrollbar-button,
 .stn-scroll::-webkit-scrollbar-button:single-button,
 .stn-dropdown > .select_option::-webkit-scrollbar-button,
-.stn-dropdown > .select_option::-webkit-scrollbar-button:single-button {
+.stn-dropdown > .select_option::-webkit-scrollbar-button:single-button,
+.stn-side-nav__menu::-webkit-scrollbar-button,
+.stn-side-nav__menu::-webkit-scrollbar-button:single-button {
   display: none !important;
   width: 0 !important;
   height: 0 !important;

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

@@ -196,34 +196,8 @@ box-sizing: border-box;
   padding: var(--stn-side-nav-menu-padding);
   overflow-y: auto;
   overflow-x: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar {
-  width: var(--stn-side-nav-scroll-width, 4px);
-  height: var(--stn-side-nav-scroll-width, 4px);
-  background: var(--stn-scroll-track, transparent);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-track {
-  background: var(--stn-scroll-track, transparent);
-  border-radius: var(--stn-radius-full);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-thumb {
-  background: var(--stn-scroll-thumb);
-  border-radius: var(--stn-side-nav-scroll-radius, 2px);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-thumb:hover {
-background: var(--stn-scroll-thumb-hover);
-}
-
-.stn-side-nav__menu::-webkit-scrollbar-button {
-display: none;
-  width: 0;
-  height: 0;
+  --stn-scroll-width: var(--stn-scroll-width-thin, 4px);
+  --stn-scroll-radius: var(--stn-scroll-radius-thin, 2px);
 }
 
 .stn-side-nav__group {

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

@@ -369,7 +369,7 @@
   --stn-badge-solid-warning: var(--stn-teal-400);
   --stn-badge-solid-neutral: var(--stn-gray-600);
   --stn-badge-solid-neutral-fg: var(--stn-gray-100);
-  --stn-scroll-thumb-hover: var(--stn-gray-200);
+  --stn-scroll-thumb-hover: var(--stn-gray-550);
   --stn-scroll-track: var(--stn-opacity-white-5);
   --stn-scroll-thumb-primary: var(--stn-primary);
   --stn-scroll-thumb-primary-hover: var(--stn-blue-300);
@@ -1184,7 +1184,7 @@
   --stn-status-switch-badge-color: var(--stn-gray-600);
   --stn-status-switch-thumb-bg: var(--stn-gray-400);
   --stn-status-switch-checked-border: var(--stn-blue-500);
-  --stn-status-switch-checked-bg: color-mix(in srgb, var(--stn-blue-500) 10%, var(--stn-static-white));
+  --stn-status-switch-checked-bg: var(--stn-static-white);
   --stn-status-switch-checked-color: var(--stn-blue-600);
   --stn-status-switch-checked-badge-bg: var(--stn-blue-500);
   --stn-status-switch-checked-badge-color: var(--stn-static-white);