sellmate-design-system-react 0.9.0 → 0.11.0

package/dist/theme.css

@@ -133,6 +133,7 @@
   --color-bg-accent: #0075FF;
   --color-bg-accentLight: #2D8DFF;
   --color-bg-accentBright: #D9EAFF;
+  --color-bg-accentFaint: #EFF6FF;
   --color-bg-deep: #07284A;
   --color-bg-danger: #E30000;
   --color-bg-dangerLight: #FB4444;
@@ -479,6 +480,7 @@
   --sys-color-bg-accent: #0075FF;
   --sys-color-bg-accentLight: #2D8DFF;
   --sys-color-bg-accentBright: #D9EAFF;
+  --sys-color-bg-accentFaint: #EFF6FF;
   --sys-color-bg-deep: #07284A;
   --sys-color-bg-danger: #E30000;
   --sys-color-bg-dangerLight: #FB4444;
@@ -620,7 +622,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
-  --cmp-ghostButton-group-gap: 8px;
+  --cmp-ghostButton-group-gap: 4px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -941,10 +943,20 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-border-width: 1px;
+  --cmp-timepicker-sm-height: 28px;
+  --cmp-timepicker-sm-paddingX: 12px;
+  --cmp-timepicker-sm-gap: 8px;
+  --cmp-timepicker-sm-icon: 16px;
+  --cmp-timepicker-sm-radius: 4px;
+  --cmp-timepicker-md-height: 36px;
+  --cmp-timepicker-md-paddingX: 16px;
+  --cmp-timepicker-md-gap: 12px;
+  --cmp-timepicker-md-icon: 20px;
+  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-border-default: #AAAAAA;
   --cmp-timepicker-border-focus: #0075FF;
   --cmp-timepicker-border-disabled: #CCCCCC;
-  --cmp-timepicker-border-width: 1px;
   --cmp-timepicker-bg-default: #FFFFFF;
   --cmp-timepicker-bg-disabled: #E1E1E1;
   --cmp-timepicker-icon-default: #888888;
@@ -952,11 +964,6 @@
   --cmp-timepicker-text-default: #222222;
   --cmp-timepicker-text-disabled: #888888;
   --cmp-timepicker-selector-bg: #FFFFFF;
-  --cmp-timepicker-selector-range-heading-color: #555555;
-  --cmp-timepicker-selector-range-heading-gap: 16px;
-  --cmp-timepicker-selector-range-paddingXY: 24px;
-  --cmp-timepicker-selector-range-panelGap: 24px;
-  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-timepicker-selector-radius: 8px;
   --cmp-timepicker-selector-section-paddingX: 16px;
   --cmp-timepicker-selector-section-paddingY: 12px;
@@ -964,16 +971,11 @@
   --cmp-timepicker-selector-time-column-gap: 8px;
   --cmp-timepicker-selector-input-width: 40px;
   --cmp-timepicker-selector-colon-size: 16px;
-  --cmp-timepicker-sm-height: 28px;
-  --cmp-timepicker-sm-paddingX: 12px;
-  --cmp-timepicker-sm-gap: 8px;
-  --cmp-timepicker-sm-icon: 16px;
-  --cmp-timepicker-sm-radius: 4px;
-  --cmp-timepicker-md-height: 36px;
-  --cmp-timepicker-md-paddingX: 16px;
-  --cmp-timepicker-md-gap: 12px;
-  --cmp-timepicker-md-icon: 20px;
-  --cmp-timepicker-md-radius: 6px;
+  --cmp-timepicker-selector-range-paddingXY: 24px;
+  --cmp-timepicker-selector-range-panelGap: 24px;
+  --cmp-timepicker-selector-range-heading-color: #555555;
+  --cmp-timepicker-selector-range-heading-gap: 16px;
+  --cmp-timepicker-selector-range-section-gap: 12px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -1174,10 +1176,9 @@
   --cmp-table-header-resizingBar-color: #CCCCCC;
   --cmp-table-header-resizingBar-height: 16px;
   --cmp-table-body-default-height: 44px;
-  --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
-  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingY-default: 8px;
+  --cmp-table-body-paddingY-dense: 6px;
   --cmp-table-body-paddingX-default: 8px;
   --cmp-table-body-paddingX-wide: 16px;
   --cmp-table-border-color: #E1E1E1;
@@ -1301,6 +1302,47 @@
   --cmp-gnb-rail-item-radius: 8px;
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
+  --cmp-expansionItem-title-paddingX: 16px;
+  --cmp-expansionItem-title-paddingY-normal: 8px;
+  --cmp-expansionItem-title-paddingY-dense: 4px;
+  --cmp-expansionItem-title-gap: 12px;
+  --cmp-expansionItem-title-icon: 12px;
+  --cmp-expansionItem-title-border: #E1E1E1;
+  --cmp-expansionItem-title-bg-default: #FFFFFF;
+  --cmp-expansionItem-title-bg-hover: #F9F9F9;
+  --cmp-expansionItem-title-bg-expanded: #EFF6FF;
+  --cmp-expansionItem-title-text-default: #222222;
+  --cmp-expansionItem-title-text-expanded: #005CC9;
+  --cmp-expansionItem-body-bg: #FFFFFF;
+  --cmp-expansionItem-body-padding: 16px;
+}
+
+/* 전역 스크롤바 — overflow(auto/scroll)로 스크롤이 생기는 모든 요소에 SScrollArea 기본 스크롤바를 자동 적용.
+   lib/scrollbar.ts 의 SCROLLBAR_CLASS 와 단일 기준(트랙 12px / 썸 grey-45, 2px 인셋, radius full).
+   base 레이어에 둬야 컴포넌트가 붙이는 SCROLLBAR_* 유틸(background·bordered)이 utilities 레이어로 이 규칙을 덮는다.
+   Chrome 121+/WebKit 는 scrollbar-width·scrollbar-color 계산값이 auto 가 아니면 ::-webkit-scrollbar-* 를 통째로
+   무시하므로, 표준 속성은 webkit 유사요소가 없는 브라우저(Firefox)에서만 켠다. */
+@layer base {
+  *::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+    background: transparent;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--color-grey-45);
+    border: 2px solid transparent;
+    border-radius: 9999px;
+    background-clip: padding-box;
+  }
+  @supports not selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: var(--color-grey-45) transparent;
+    }
+  }
 }
 
 /* 타이포그래피 프리셋 */
@@ -1556,6 +1598,66 @@
     font-weight: 700;
     line-height: 20px;
   }
+  .typo-body-xs-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+  .typo-body-sm-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+  }
+  .typo-body-sm-medium {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 20px;
+  }
+  .typo-body-sm-bold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+  .typo-body-md-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .typo-body-md-medium {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+  }
+  .typo-body-md-bold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  .typo-body-lg-default {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 26px;
+  }
+  .typo-body-lg-medium {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 26px;
+  }
+  .typo-body-lg-bold {
+    font-family: Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 26px;
+  }
 }
 
 /* 컴포넌트 공용 애니메이션 (progress 등) */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [