sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/theme.css

@@ -139,6 +139,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 +487,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 +915,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 +940,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 +1231,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 +1247,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 +1255,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 +1278,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.10",
+  "version": "0.2.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [