sellmate-design-system-react 0.2.0 → 0.4.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;
@@ -337,7 +340,6 @@
   --spacing-field-md-height: 36px;
   --spacing-navigation-lg-height: 44px;
   --spacing-navigation-md-height: 36px;
-  --spacing-navigation-gnb-topbar-height: 56px;
   --spacing-table-height-xs: 32px;
   --spacing-table-height-sm: 36px;
   --spacing-table-height-md: 44px;
@@ -416,7 +418,6 @@
   --sys-size-field-md-height: 36px;
   --sys-size-navigation-lg-height: 44px;
   --sys-size-navigation-md-height: 36px;
-  --sys-size-navigation-gnb-topbar-height: 56px;
   --sys-size-table-height-xs: 32px;
   --sys-size-table-height-sm: 36px;
   --sys-size-table-height-md: 44px;
@@ -1209,6 +1210,25 @@
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
   --cmp-pagination-simple-gap: 8px;
+  --cmp-stepper-sm-sequence-size: 20px;
+  --cmp-stepper-dash-width: 20px;
+  --cmp-stepper-dash-color: #888888;
+  --cmp-stepper-lg-sequence-size: 24px;
+  --cmp-stepper-container-gap: 12px;
+  --cmp-stepper-item-gap: 8px;
+  --cmp-stepper-sequence-radius: 9999px;
+  --cmp-stepper-sequence-border-active: #93C4FF;
+  --cmp-stepper-sequence-border-default: #E1E1E1;
+  --cmp-stepper-sequence-border-completed: #CCCCCC;
+  --cmp-stepper-sequence-border-witdh: 1px;
+  --cmp-stepper-sequence-icon: 12px;
+  --cmp-stepper-sequence-bg-active: #D9EAFF;
+  --cmp-stepper-sequence-bg-default: #FFFFFF;
+  --cmp-stepper-sequence-bg-completed: #E1E1E1;
+  --cmp-stepper-sequence-text-active: #0075FF;
+  --cmp-stepper-sequence-text-default: #AAAAAA;
+  --cmp-stepper-text-active: #0075FF;
+  --cmp-stepper-text-default: #888888;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;
@@ -1231,73 +1251,56 @@
   --cmp-tab-sub-gap-vertical: 16px;
   --cmp-tab-sub-content-gap: 4px;
   --cmp-tab-sub-item-height: 20px;
-  --cmp-gnbBelt-top-height: 56px;
-  --cmp-gnbBelt-top-paddingX: 12px;
-  --cmp-gnbBelt-top-gap: 8px;
-  --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-depth1-paddingLeft: 20px;
-  --cmp-gnbBelt-item-depth2-paddingLeft: 32px;
-  --cmp-gnbBelt-item-depth3-paddingLeft: 44px;
-  --cmp-gnbBelt-fold-width: 48px;
-  --cmp-gnbBox-top-height: 56px;
-  --cmp-gnbBox-paddingX: 16px;
-  --cmp-gnbBox-gap: 16px;
-  --cmp-gnbBox-button-gap: 8px;
-  --cmp-gnbBox-logo-height: 32px;
-  --cmp-gnbBox-menu-body-padding: 12px;
-  --cmp-gnbBox-item-paddingY: 6px;
-  --cmp-gnbBox-item-paddingRight: 12px;
-  --cmp-gnbBox-item-gap: 8px;
-  --cmp-gnbBox-item-radius: 8px;
-  --cmp-gnbBox-item-arrow: 12px;
-  --cmp-gnbBox-item-depth1-paddingLeft: 12px;
-  --cmp-gnbBox-item-depth1-icon: 20px;
-  --cmp-gnbBox-item-depth2-paddingLeft: 24px;
-  --cmp-gnbBox-item-depth3-paddingLeft: 36px;
-  --cmp-stepper-sm-sequence-size: 20px;
-  --cmp-stepper-dash-width: 20px;
-  --cmp-stepper-dash-color: #888888;
-  --cmp-stepper-lg-sequence-size: 24px;
-  --cmp-stepper-container-gap: 12px;
-  --cmp-stepper-item-gap: 8px;
-  --cmp-stepper-sequence-radius: 9999px;
-  --cmp-stepper-sequence-border-active: #93C4FF;
-  --cmp-stepper-sequence-border-default: #E1E1E1;
-  --cmp-stepper-sequence-border-completed: #CCCCCC;
-  --cmp-stepper-sequence-border-witdh: 1px;
-  --cmp-stepper-sequence-icon: 12px;
-  --cmp-stepper-sequence-bg-active: #D9EAFF;
-  --cmp-stepper-sequence-bg-default: #FFFFFF;
-  --cmp-stepper-sequence-bg-completed: #E1E1E1;
-  --cmp-stepper-sequence-text-active: #0075FF;
-  --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;
+  --cmp-gnb-light-bg: #FFFFFF;
+  --cmp-gnb-light-divider: #E1E1E1;
+  --cmp-gnb-light-item-bg-default: #FFFFFF;
+  --cmp-gnb-light-item-bg-hover: #F6F6F6;
+  --cmp-gnb-light-item-bg-selected: #EFF6FF;
+  --cmp-gnb-light-item-fg-default: #222222;
+  --cmp-gnb-light-item-fg-hover: #222222;
+  --cmp-gnb-light-item-fg-selected: #0075FF;
+  --cmp-gnb-light-item-chevron: #555555;
+  --cmp-gnb-light-top-icon: #888888;
+  --cmp-gnb-light-rail-fg-default: #888888;
+  --cmp-gnb-dark-bg: #001B39;
+  --cmp-gnb-dark-divider: #004177;
+  --cmp-gnb-dark-item-bg-default: #001B39;
+  --cmp-gnb-dark-item-bg-hover: #07284A;
+  --cmp-gnb-dark-item-bg-selected: #002B5E;
+  --cmp-gnb-dark-item-fg-default: #FFFFFF;
+  --cmp-gnb-dark-item-fg-hover: #FFFFFF;
+  --cmp-gnb-dark-item-fg-selected: #93C4FF;
+  --cmp-gnb-dark-item-chevron: #AAAAAA;
+  --cmp-gnb-dark-top-icon: #FFFFFF;
+  --cmp-gnb-dark-rail-fg-default: #AAAAAA;
+  --cmp-gnb-top-height: 56px;
+  --cmp-gnb-top-paddingX: 16px;
+  --cmp-gnb-top-gap: 16px;
+  --cmp-gnb-logo-height: 32px;
+  --cmp-gnb-fold-width: 48px;
+  --cmp-gnb-body-padding: 12px;
+  --cmp-gnb-item-paddingY: 6px;
+  --cmp-gnb-item-chevron-size: 12px;
+  --cmp-gnb-box-item-paddingRight: 12px;
+  --cmp-gnb-box-item-gap: 8px;
+  --cmp-gnb-box-item-radius: 8px;
+  --cmp-gnb-box-item-depth1-paddingLeft: 12px;
+  --cmp-gnb-box-item-depth1-icon: 20px;
+  --cmp-gnb-box-item-depth2-paddingLeft: 24px;
+  --cmp-gnb-box-item-depth3-paddingLeft: 36px;
+  --cmp-gnb-belt-item-paddingRight: 20px;
+  --cmp-gnb-belt-item-gap: 8px;
+  --cmp-gnb-belt-item-depth1-paddingLeft: 20px;
+  --cmp-gnb-belt-item-depth1-icon: 16px;
+  --cmp-gnb-belt-item-depth2-paddingLeft: 32px;
+  --cmp-gnb-belt-item-depth3-paddingLeft: 44px;
+  --cmp-gnb-rail-width: 68px;
+  --cmp-gnb-rail-padding: 12px;
+  --cmp-gnb-rail-gap: 16px;
+  --cmp-gnb-rail-item-paddingTop: 4px;
+  --cmp-gnb-rail-item-paddingBottom: 2px;
+  --cmp-gnb-rail-item-radius: 8px;
+  --cmp-gnb-rail-item-icon: 24px;
 }
 
 /* 타이포그래피 프리셋 */
@@ -1487,6 +1490,18 @@
     font-weight: 700;
     line-height: 26px;
   }
+  .typo-navigation-xs-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: 11px;
+    font-weight: 500;
+    line-height: 18px;
+  }
+  .typo-navigation-xs-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: 11px;
+    font-weight: 700;
+    line-height: 18px;
+  }
   .typo-navigation-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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [
@@ -40,6 +40,9 @@
     "build:css": "cp ./src/styles/theme.css ./dist/theme.css && tailwindcss -i ./src/styles/entry.css -o ./dist/styles.css",
     "dev": "tsup --watch",
     "playground": "vite --config vite.playground.config.ts",
+    "playground:next:install": "npm --prefix playground-next install",
+    "playground:next": "npm run playground:next:install && npm run build && npm --prefix playground-next run dev",
+    "playground:next:build": "npm run playground:next:install && npm run build && npm --prefix playground-next run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:spec": "npm run build && node --test ./src/components/**/*.test.mjs",