sellmate-design-system-react 0.1.11 → 0.3.0

package/dist/theme.css

@@ -6,7 +6,10 @@
  * 소비 앱: (자체 @import "tailwindcss" 뒤에) @import "sellmate-design-system-react/theme.css";
  * ※ 이 파일은 tailwindcss 를 import 하지 않는다 — 소비자가 먼저 import 하는 것을 전제로 한다.
  */
-@theme {
+/* static: 유틸 클래스로 쓰이지 않아도 전 토큰을 :root 에 출력한다.
+   lib/color.ts 의 resolveColor 가 var(--color-*) 를 런타임에 조립하므로
+   Tailwind 스캐너가 사용을 감지할 수 없어, 기본 트리셰이킹 시 변수가 누락된다. */
+@theme static {
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-grey-10: #F6F6F6;
@@ -139,6 +142,7 @@
   --color-bg-success: #00973C;
   --color-bg-successLight: #12B553;
   --color-bg-neutralLight: #F6F6F6;
+  --color-bg-neutralBright: #F9F9F9;
   --color-bg-tableHeader: #F5FAFF;
   --color-fg-primary: #222222;
   --color-fg-secondary: #555555;
@@ -486,6 +490,7 @@
   --sys-color-bg-success: #00973C;
   --sys-color-bg-successLight: #12B553;
   --sys-color-bg-neutralLight: #F6F6F6;
+  --sys-color-bg-neutralBright: #F9F9F9;
   --sys-color-bg-tableHeader: #F5FAFF;
   --sys-color-fg-primary: #222222;
   --sys-color-fg-secondary: #555555;
@@ -913,6 +918,17 @@
   --cmp-datepicker-calendar-range-width: 20px;
   --cmp-datepicker-calendar-legend-gap: 4px;
   --cmp-datepicker-calendar-legend-group-gap: 12px;
+  --cmp-datepicker-calendar-time-bg-default: #F9F9F9;
+  --cmp-datepicker-calendar-time-bg-selected: #F5FAFF;
+  --cmp-datepicker-calendar-time-date-label: #222222;
+  --cmp-datepicker-calendar-time-date-unit: #888888;
+  --cmp-datepicker-calendar-time-date-gap: 6px;
+  --cmp-datepicker-calendar-time-radius: 8px;
+  --cmp-datepicker-calendar-time-paddingX: 16px;
+  --cmp-datepicker-calendar-time-paddingY: 12px;
+  --cmp-datepicker-calendar-time-gap: 12px;
+  --cmp-datepicker-calendar-time-section-gap: 12px;
+  --cmp-datepicker-calendar-time-unit-gap: 2px;
   --cmp-chip-height: 24px;
   --cmp-chip-paddingX: 8px;
   --cmp-chip-gap: 4px;
@@ -927,6 +943,39 @@
   --cmp-chip-content-disabled: #888888;
   --cmp-chip-border-focus: #E1E1E1;
   --cmp-chip-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;
+  --cmp-timepicker-icon-disabled: #BBBBBB;
+  --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;
+  --cmp-timepicker-selector-time-gap: 4px;
+  --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-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;
@@ -1185,21 +1234,15 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-bg: #001B39;
   --cmp-gnbBelt-top-height: 56px;
   --cmp-gnbBelt-top-paddingX: 12px;
   --cmp-gnbBelt-top-gap: 8px;
-  --cmp-gnbBelt-top-border: #004177;
   --cmp-gnbBelt-logo-height: 32px;
   --cmp-gnbBelt-body-paddingY: 12px;
   --cmp-gnbBelt-item-paddingY: 6px;
   --cmp-gnbBelt-item-paddingRight: 20px;
   --cmp-gnbBelt-item-gap: 12px;
   --cmp-gnbBelt-item-icon: 12px;
-  --cmp-gnbBelt-item-bg-default: #001B39;
-  --cmp-gnbBelt-item-bg-selected: #002B5E;
-  --cmp-gnbBelt-item-color-default: #FFFFFF;
-  --cmp-gnbBelt-item-color-active: #93C4FF;
   --cmp-gnbBelt-item-depth1-paddingLeft: 20px;
   --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
   --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
@@ -1207,8 +1250,6 @@
   --cmp-gnbBox-top-height: 56px;
   --cmp-gnbBox-paddingX: 16px;
   --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-bg: #FFFFFF;
-  --cmp-gnbBox-border: #E1E1E1;
   --cmp-gnbBox-button-gap: 8px;
   --cmp-gnbBox-logo-height: 32px;
   --cmp-gnbBox-menu-body-padding: 12px;
@@ -1217,11 +1258,6 @@
   --cmp-gnbBox-item-gap: 8px;
   --cmp-gnbBox-item-radius: 8px;
   --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-bg-default: #FFFFFF;
-  --cmp-gnbBox-item-bg-hover: #F6F6F6;
-  --cmp-gnbBox-item-bg-selected: #EFF6FF;
-  --cmp-gnbBox-item-color-default: #222222;
-  --cmp-gnbBox-item-color-selected: #0075FF;
   --cmp-gnbBox-item-depth1-paddingLeft: 12px;
   --cmp-gnbBox-item-depth1-icon: 20px;
   --cmp-gnbBox-item-depth2-paddingLeft: 24px;
@@ -1245,6 +1281,26 @@
   --cmp-stepper-sequence-text-default: #AAAAAA;
   --cmp-stepper-text-active: #0075FF;
   --cmp-stepper-text-default: #888888;
+  --cmp-light-bg: #FFFFFF;
+  --cmp-light-divider: #E1E1E1;
+  --cmp-light-item-bg-default: #FFFFFF;
+  --cmp-light-item-bg-hover: #F6F6F6;
+  --cmp-light-item-bg-selected: #EFF6FF;
+  --cmp-light-item-fg-default: #222222;
+  --cmp-light-item-fg-hover: #222222;
+  --cmp-light-item-fg-selected: #0075FF;
+  --cmp-light-item-chevron: #555555;
+  --cmp-light-top-icon: #888888;
+  --cmp-dark-bg: #001B39;
+  --cmp-dark-divider: #004177;
+  --cmp-dark-item-bg-default: #001B39;
+  --cmp-dark-item-bg-hover: #07284A;
+  --cmp-dark-item-bg-selected: #002B5E;
+  --cmp-dark-item-fg-default: #FFFFFF;
+  --cmp-dark-item-fg-hover: #FFFFFF;
+  --cmp-dark-item-fg-selected: #93C4FF;
+  --cmp-dark-item-chevron: #AAAAAA;
+  --cmp-dark-top-icon: #FFFFFF;
 }
 
 /* 타이포그래피 프리셋 */

package/package.json

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