sellmate-design-system-react 0.2.0 → 0.3.0

package/dist/styles.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-red-50: oklch(97.1% 0.013 17.38);
     --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-yellow-50: #EBB110;
     --color-green-50: oklch(98.2% 0.018 155.826);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-gray-100: oklch(96.7% 0.003 264.542);
@@ -31,6 +32,8 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-weight-black: 900;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
@@ -43,39 +46,377 @@
     --color-grey-20: #EEEEEE;
     --color-grey-25: #E5E5E5;
     --color-grey-30: #E1E1E1;
+    --color-grey-35: #D8D8D8;
     --color-grey-45: #CCCCCC;
+    --color-grey-50: #BBBBBB;
     --color-grey-55: #AAAAAA;
+    --color-grey-60: #999999;
     --color-grey-65: #888888;
     --color-grey-70: #737373;
     --color-grey-80: #555555;
+    --color-grey-85: #444444;
     --color-grey-90: #333333;
+    --color-grey-95: #222222;
     --color-grey-05: #F9F9F9;
+    --color-red-15: #FCEFEF;
+    --color-red-20: #FCE6E6;
+    --color-red-30: #FFD3D3;
+    --color-red-45: #FFB5B5;
+    --color-red-60: #FF7C7C;
+    --color-red-70: #FB4444;
     --color-red-75: #E30000;
+    --color-red-80: #AD0000;
+    --color-red-85: #820000;
+    --color-red-90: #5E0000;
+    --color-red-95: #440000;
+    --color-red-99: #220000;
+    --color-orange-10: #FEF1EA;
+    --color-orange-20: #FFEAD7;
+    --color-orange-35: #FFD5AF;
+    --color-orange-45: #FFBC81;
+    --color-orange-55: #FFA452;
+    --color-orange-60: #FF7F22;
+    --color-orange-65: #FF6B00;
+    --color-orange-75: #CE4900;
+    --color-orange-85: #9B3700;
+    --color-orange-90: #752A00;
+    --color-orange-95: #4D1B00;
+    --color-orange-99: #2F1100;
+    --color-yellow-10: #FFF7DD;
+    --color-yellow-20: #FEF1C4;
+    --color-yellow-25: #FFE99E;
+    --color-yellow-30: #FEE17C;
+    --color-yellow-40: #FFD643;
+    --color-yellow-45: #FFC700;
+    --color-yellow-60: #CA9612;
+    --color-yellow-70: #916C0D;
+    --color-yellow-80: #6C5002;
+    --color-yellow-90: #453602;
+    --color-yellow-95: #322700;
+    --color-olive-10: #FBFBBF;
+    --color-olive-15: #FAFAA1;
+    --color-olive-20: #F6F65F;
+    --color-olive-30: #EEEE37;
+    --color-olive-45: #DDDD12;
+    --color-olive-55: #C7C700;
+    --color-olive-65: #A5A500;
+    --color-olive-70: #838300;
+    --color-olive-80: #636300;
+    --color-olive-90: #454500;
+    --color-olive-95: #2C2C00;
+    --color-olive-05: #FEFED9;
+    --color-green-15: #E8F9EF;
+    --color-green-25: #D4FAE3;
+    --color-green-45: #ACF4C9;
+    --color-green-55: #6DE39C;
+    --color-green-65: #2BCE6C;
+    --color-green-70: #12B553;
+    --color-green-75: #00973C;
+    --color-green-80: #007B31;
+    --color-green-85: #006629;
+    --color-green-90: #00461C;
+    --color-green-95: #003013;
+    --color-green-99: #001D0B;
+    --color-steelblue-10: #ECF8FD;
+    --color-steelblue-25: #D9F2FD;
+    --color-steelblue-45: #A4E2FD;
+    --color-steelblue-60: #50BFF0;
+    --color-steelblue-65: #229FD7;
+    --color-steelblue-70: #128FC7;
+    --color-steelblue-75: #066D9B;
+    --color-steelblue-80: #06587D;
+    --color-steelblue-85: #033F59;
+    --color-steelblue-90: #032D40;
+    --color-steelblue-95: #02212F;
+    --color-steelblue-99: #021A25;
+    --color-oceanblue-15: #EAF5FE;
+    --color-oceanblue-25: #D5EBFE;
+    --color-oceanblue-50: #9CD1FC;
+    --color-oceanblue-60: #5CB0F3;
+    --color-oceanblue-65: #1F8AE1;
+    --color-oceanblue-70: #006AC1;
+    --color-oceanblue-75: #025497;
+    --color-oceanblue-80: #004177;
+    --color-oceanblue-85: #07284A;
+    --color-oceanblue-90: #051D36;
+    --color-oceanblue-95: #03172D;
+    --color-oceanblue-99: #011428;
+    --color-brilliantblue-10: #EFF6FF;
+    --color-brilliantblue-20: #E6F1FF;
+    --color-brilliantblue-25: #D9EAFF;
+    --color-brilliantblue-40: #BBDAFF;
+    --color-brilliantblue-50: #93C4FF;
+    --color-brilliantblue-60: #64ABFF;
+    --color-brilliantblue-70: #2D8DFF;
+    --color-brilliantblue-75: #0075FF;
+    --color-brilliantblue-80: #005CC9;
+    --color-brilliantblue-85: #004290;
+    --color-brilliantblue-90: #002B5E;
+    --color-brilliantblue-95: #001B39;
+    --color-brilliantblue-99: #001226;
+    --color-brilliantblue-05: #F5FAFF;
+    --color-bg-screen: #EEEEEE;
+    --color-bg-frame: #FFFFFF;
+    --color-bg-brand: #025497;
+    --color-bg-subtle: #1F8AE1;
+    --color-bg-accent: #0075FF;
+    --color-bg-accentLight: #2D8DFF;
+    --color-bg-accentBright: #D9EAFF;
+    --color-bg-deep: #07284A;
+    --color-bg-danger: #E30000;
+    --color-bg-dangerLight: #FB4444;
+    --color-bg-warning: #FF6B00;
+    --color-bg-caution: #FFC700;
+    --color-bg-progress: #0075FF;
+    --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;
+    --color-fg-tertiary: #888888;
+    --color-fg-quaternary: #AAAAAA;
+    --color-fg-brand: #005CC9;
+    --color-fg-subtleWarm: #066D9B;
+    --color-fg-subtleCool: #025497;
+    --color-fg-deep: #004290;
+    --color-fg-success: #00973C;
+    --color-fg-dangerLight: #FB4444;
+    --color-fg-accent: #0075FF;
+    --color-fg-danger: #E30000;
+    --color-fg-warning: #FF6B00;
+    --color-fg-inverse: #FFFFFF;
+    --color-disabled-bg: #E1E1E1;
+    --color-disabled-text: #888888;
+    --color-disabled-icon: #BBBBBB;
+    --color-disabled-border: #CCCCCC;
+    --color-link-accent: #006AC1;
+    --color-divider-default: #E1E1E1;
+    --color-border-default: #E1E1E1;
+    --color-border-accent: #0075FF;
     --color-border-accentLight: #93C4FF;
+    --color-border-danger: #FB4444;
+    --color-border-success: #12B553;
     --color-red-strong: #FB4444;
+    --color-red-subtle: #FCEFEF;
+    --color-orange-strong: #FF6B00;
+    --color-orange-subtle: #FEF1EA;
+    --color-yellow-strong: #916C0D;
+    --color-yellow-moderate: #FFC700;
+    --color-yellow-subtle: #FFF7DD;
     --color-green-strong: #00973C;
+    --color-green-subtle: #E8F9EF;
     --color-blue-strong: #0075FF;
+    --color-blue-subtle: #E6F1FF;
+    --color-darkblue-strong: #006AC1;
+    --color-darkblue-subtle: #EAF5FE;
+    --color-indigo-strong: #004290;
+    --color-indigo-subtle: #EFF6FF;
+    --color-grey-strong: #737373;
+    --color-grey-subtle: #EEEEEE;
+    --color-field-bg-default: #FFFFFF;
+    --color-field-bg-hover: #0075FF;
+    --color-field-bg-readOnly: #EEEEEE;
+    --color-field-border-default: #AAAAAA;
+    --color-field-border-focus: #0075FF;
+    --color-field-border-hover: #0075FF;
+    --color-field-border-danger: #FB4444;
+    --color-field-border-success: #12B553;
+    --color-field-text-default: #222222;
+    --color-field-text-placeholder: #AAAAAA;
+    --color-field-text-readOnly: #555555;
+    --color-field-icon-default: #888888;
+    --color-control-bg-inverseHover: #0075FF;
+    --color-navigation-gnb-bg-dark: #001B39;
+    --color-primary-10: #EFF6FF;
+    --color-primary-20: #E6F1FF;
+    --color-primary-25: #D9EAFF;
+    --color-primary-40: #BBDAFF;
+    --color-primary-50: #93C4FF;
+    --color-primary-60: #64ABFF;
+    --color-primary-70: #2D8DFF;
+    --color-primary-75: #0075FF;
+    --color-primary-80: #005CC9;
+    --color-primary-85: #004290;
+    --color-primary-90: #002B5E;
+    --color-primary-95: #001B39;
+    --color-primary-99: #001226;
+    --color-primary-05: #F5FAFF;
+    --color-danger-15: #FCEFEF;
+    --color-danger-20: #FCE6E6;
+    --color-danger-30: #FFD3D3;
+    --color-danger-45: #FFB5B5;
+    --color-danger-60: #FF7C7C;
+    --color-danger-70: #FB4444;
     --color-danger-75: #E30000;
+    --color-danger-80: #AD0000;
+    --color-danger-85: #820000;
+    --color-danger-90: #5E0000;
+    --color-danger-95: #440000;
+    --color-danger-99: #220000;
+    --color-danger-strong: #FB4444;
+    --color-danger-subtle: #FCEFEF;
+    --color-success-15: #E8F9EF;
+    --color-success-25: #D4FAE3;
+    --color-success-45: #ACF4C9;
+    --color-success-55: #6DE39C;
+    --color-success-65: #2BCE6C;
+    --color-success-70: #12B553;
+    --color-success-75: #00973C;
+    --color-success-80: #007B31;
+    --color-success-85: #006629;
+    --color-success-90: #00461C;
+    --color-success-95: #003013;
+    --color-success-99: #001D0B;
+    --color-success-strong: #00973C;
+    --color-success-subtle: #E8F9EF;
+    --color-warning-10: #FEF1EA;
+    --color-warning-20: #FFEAD7;
+    --color-warning-35: #FFD5AF;
+    --color-warning-45: #FFBC81;
+    --color-warning-55: #FFA452;
+    --color-warning-60: #FF7F22;
+    --color-warning-65: #FF6B00;
+    --color-warning-75: #CE4900;
+    --color-warning-85: #9B3700;
+    --color-warning-90: #752A00;
+    --color-warning-95: #4D1B00;
+    --color-warning-99: #2F1100;
+    --color-warning-strong: #FF6B00;
+    --color-warning-subtle: #FEF1EA;
     --spacing-2: 2px;
     --spacing-4: 4px;
     --spacing-6: 6px;
     --spacing-8: 8px;
+    --spacing-10: 10px;
     --spacing-12: 12px;
     --spacing-16: 16px;
+    --spacing-19: 19px;
     --spacing-20: 20px;
+    --spacing-22: 22px;
     --spacing-24: 24px;
+    --spacing-28: 28px;
     --spacing-32: 32px;
+    --spacing-36: 36px;
+    --spacing-40: 40px;
     --spacing-48: 48px;
+    --spacing-60: 60px;
+    --spacing-control-xs-paddingX: 8px;
+    --spacing-control-xs-gap: 4px;
+    --spacing-control-sm-paddingX: 12px;
+    --spacing-control-sm-gap: 6px;
+    --spacing-control-md-paddingX: 20px;
+    --spacing-control-md-gap: 8px;
+    --spacing-control-lg-paddingX: 28px;
+    --spacing-control-lg-gap: 12px;
+    --spacing-feedback-xs-paddingX: 6px;
+    --spacing-feedback-xs-gap: 4px;
+    --spacing-feedback-sm-paddingX: 8px;
+    --spacing-feedback-sm-gap: 6px;
+    --spacing-feedback-md-paddingX: 12px;
+    --spacing-feedback-md-gap: 8px;
+    --spacing-feedback-lg-paddingX: 16px;
+    --spacing-feedback-lg-gap: 12px;
+    --spacing-stack-gap-text-tight: 2px;
+    --spacing-stack-gap-text-normal: 4px;
+    --spacing-stack-gap-text-relaxed: 8px;
+    --spacing-stack-gap-element-tight: 4px;
+    --spacing-stack-gap-element-normal: 8px;
+    --spacing-stack-gap-element-relaxed: 12px;
+    --spacing-stack-gap-element-wide: 16px;
+    --spacing-stack-gap-element-spacious: 24px;
+    --spacing-field-sm-paddingX: 12px;
+    --spacing-field-sm-paddingY: 4px;
+    --spacing-field-sm-container-gap: 8px;
+    --spacing-field-sm-gap: 12px;
+    --spacing-field-md-paddingX: 16px;
+    --spacing-field-md-paddingY: 8px;
+    --spacing-field-md-container-gap: 12px;
+    --spacing-field-md-gap: 16px;
+    --spacing-navigation-lg-paddingX: 32px;
+    --spacing-navigation-md-paddingX: 24px;
+    --spacing-table-padding-sm: 8px;
+    --spacing-table-padding-md: 16px;
+    --spacing-action-gap: 16px;
+    --spacing-overlay-paddingX-sm: 20px;
+    --spacing-overlay-paddingX-md: 24px;
+    --spacing-overlay-paddingY-sm: 8px;
+    --spacing-panel-gap: 12px;
+    --spacing-44: 44px;
+    --spacing-56: 56px;
+    --spacing-62: 62px;
     --spacing-80: 80px;
+    --spacing-control-xs-height: 24px;
+    --spacing-control-sm-height: 28px;
+    --spacing-control-md-height: 36px;
+    --spacing-control-lg-height: 62px;
+    --spacing-icon-xxxs: 8px;
+    --spacing-icon-xxs: 10px;
+    --spacing-icon-xs: 12px;
+    --spacing-icon-sm: 16px;
+    --spacing-icon-md: 20px;
+    --spacing-icon-lg: 24px;
+    --spacing-icon-xl: 32px;
+    --spacing-feedback-arrow-width: 16px;
+    --spacing-feedback-arrow-height: 12px;
+    --spacing-feedback-xs-height: 20px;
+    --spacing-feedback-sm-height: 24px;
+    --spacing-feedback-md-height: 28px;
+    --spacing-field-control: 16px;
+    --spacing-field-icon: 12px;
+    --spacing-field-sm-height: 28px;
+    --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;
+    --radius-2: 2px;
+    --radius-4: 4px;
+    --radius-6: 6px;
+    --radius-8: 8px;
     --radius-full: 9999px;
+    --radius-control-sm: 4px;
+    --radius-control-md: 6px;
+    --radius-feedback-xs-square: 6px;
+    --radius-feedback-sm-square: 8px;
+    --radius-feedback-pill: 9999px;
+    --radius-field-sm: 4px;
+    --radius-field-md: 6px;
+    --radius-navigation: 6px;
+    --text-10: 10px;
+    --text-11: 11px;
     --text-12: 12px;
     --text-13: 13px;
     --text-14: 14px;
     --text-16: 16px;
+    --text-18: 18px;
     --text-20: 20px;
     --text-24: 24px;
+    --text-28: 28px;
+    --text-32: 32px;
+    --font-weight-regular: 400;
     --font-base: 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;
+    --border-width-1: 1px;
+    --border-width-4: 4px;
+    --border-width-6: 6px;
+    --border-width-control-default: 1px;
+    --border-width-field-default: 1px;
+    --border-width-navigation-default: 1px;
+    --opacity-005: 5%;
+    --opacity-040: 40%;
+    --z-raised: 1;
+    --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
+    --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
+    --shadow-normal-md: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
+    --shadow-spread-sm: 0px 0px 8px 0px rgba(34,34,34,0.1);
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
+    --shadow-focus: 0px 0px 8px 0px rgba(0,117,255,0.25);
+    --shadow-overlay: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
+    --shadow-floating: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
+    --shadow-dialog: 0px 8px 36px -6px rgba(34,34,34,0.16), 4px 12px 16px -4px rgba(34,34,34,0.12);
     --animate-linear-indeterminate: linear-indeterminate 1.2s linear infinite;
     --animate-circle-spin: circle-spin 2s linear infinite;
     --animate-circle-arc: circle-arc 1.5s ease-in-out infinite;
@@ -275,6 +616,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .sticky {
     position: sticky;
   }
@@ -1302,9 +1646,6 @@
   .p-0 {
     padding: 0;
   }
-  .p-1\.5 {
-    padding: calc(var(--spacing) * 1.5);
-  }
   .p-8 {
     padding: var(--spacing-8);
   }
@@ -1341,9 +1682,6 @@
   .px-\(--cmp-field-addonLabel-paddingX\) {
     padding-inline: var(--cmp-field-addonLabel-paddingX);
   }
-  .px-2 {
-    padding-inline: var(--spacing-2);
-  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }

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;

package/package.json

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