sellmate-design-system-react 0.8.4 → 0.10.0

package/dist/styles.css

@@ -25,6 +25,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-normal: 400;
@@ -763,6 +765,9 @@
   .m-0 {
     margin: 0;
   }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
   .-mt-px {
     margin-top: -1px;
   }
@@ -799,6 +804,9 @@
   .mb-8 {
     margin-bottom: var(--spacing-8);
   }
+  .mb-\[24px\] {
+    margin-bottom: 24px;
+  }
   .-ml-px {
     margin-left: -1px;
   }
@@ -838,6 +846,12 @@
   .table {
     display: table;
   }
+  .h-8 {
+    height: var(--spacing-8);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
   .h-48 {
     height: var(--spacing-48);
   }
@@ -955,6 +969,12 @@
   .min-h-screen {
     min-height: 100vh;
   }
+  .w-8 {
+    width: var(--spacing-8);
+  }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
   .w-\[4px\] {
     width: 4px;
   }
@@ -1206,6 +1226,9 @@
   .gap-2 {
     gap: var(--spacing-2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: var(--spacing-4);
   }
@@ -1563,6 +1586,9 @@
   .border-\(--field-bc\) {
     border-color: var(--field-bc);
   }
+  .border-\[\#E1E1E1\] {
+    border-color: #E1E1E1;
+  }
   .border-\[color\:var\(--btn-border\)\] {
     border-color: var(--btn-border);
   }
@@ -1635,6 +1661,9 @@
   .bg-\(--cmp-listItem-bg-hover\) {
     background-color: var(--cmp-listItem-bg-hover);
   }
+  .bg-\[\#F2F2F2\] {
+    background-color: #F2F2F2;
+  }
   .bg-\[var\(--btn-bg\)\] {
     background-color: var(--btn-bg);
   }
@@ -1746,6 +1775,9 @@
   .bg-grey-05 {
     background-color: var(--color-grey-05);
   }
+  .bg-grey-10 {
+    background-color: var(--color-grey-10);
+  }
   .bg-grey-90 {
     background-color: var(--color-grey-90);
   }
@@ -1971,6 +2003,10 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -2010,6 +2046,9 @@
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -2148,6 +2187,12 @@
   .text-\[\#0A0A0A\] {
     color: #0A0A0A;
   }
+  .text-\[\#666\] {
+    color: #666;
+  }
+  .text-\[\#374151\] {
+    color: #374151;
+  }
   .text-\[color\:var\(--cmp-datepicker-calendar-day-default-text\)\] {
     color: var(--cmp-datepicker-calendar-day-default-text);
   }
@@ -2274,6 +2319,9 @@
   .text-grey-55 {
     color: var(--color-grey-55);
   }
+  .text-grey-65 {
+    color: var(--color-grey-65);
+  }
   .text-grey-80 {
     color: var(--color-grey-80);
   }
@@ -2695,6 +2743,13 @@
       }
     }
   }
+  .hover\:bg-grey-20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-grey-20);
+      }
+    }
+  }
   .hover\:\!text-\[color\:var\(--cmp-radioButton-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -3969,6 +4024,28 @@
   --cmp-gnb-rail-item-icon: 24px;
   --cmp-gnb-rail-item-width: 44px;
 }
+@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;
+    }
+  }
+}
 @layer components {
   .typo-control-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;

package/dist/theme.css

@@ -1303,6 +1303,34 @@
   --cmp-gnb-rail-item-width: 44px;
 }
 
+/* 전역 스크롤바 — 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;
+    }
+  }
+}
+
 /* 타이포그래피 프리셋 */
 @layer components {
   .typo-control-xs-default {

package/package.json

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