sellmate-design-system-react 0.1.11 → 0.2.0

package/dist/styles.css

@@ -21,17 +21,26 @@
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
     --container-xs: 20rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
     --ease-in: cubic-bezier(0.4, 0, 1, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-grey-10: #F6F6F6;
+    --color-grey-20: #EEEEEE;
     --color-grey-25: #E5E5E5;
     --color-grey-30: #E1E1E1;
     --color-grey-45: #CCCCCC;
@@ -39,6 +48,7 @@
     --color-grey-65: #888888;
     --color-grey-70: #737373;
     --color-grey-80: #555555;
+    --color-grey-90: #333333;
     --color-grey-05: #F9F9F9;
     --color-red-75: #E30000;
     --color-border-accentLight: #93C4FF;
@@ -46,6 +56,7 @@
     --color-green-strong: #00973C;
     --color-blue-strong: #0075FF;
     --color-danger-75: #E30000;
+    --spacing-2: 2px;
     --spacing-4: 4px;
     --spacing-6: 6px;
     --spacing-8: 8px;
@@ -61,6 +72,7 @@
     --text-13: 13px;
     --text-14: 14px;
     --text-16: 16px;
+    --text-20: 20px;
     --text-24: 24px;
     --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;
     --shadow-spread-md: 0px 0px 24px 0px rgba(34,34,34,0.2);
@@ -281,6 +293,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-12 {
+    top: var(--spacing-12);
+  }
   .top-48 {
     top: var(--spacing-48);
   }
@@ -299,6 +314,9 @@
   .right-0 {
     right: 0;
   }
+  .right-12 {
+    right: var(--spacing-12);
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -350,11 +368,11 @@
   .z-\[5\] {
     z-index: 5;
   }
-  .z-\[200\] {
-    z-index: 200;
+  .z-\[30\] {
+    z-index: 30;
   }
-  .z-\[210\] {
-    z-index: 210;
+  .z-\[31\] {
+    z-index: 31;
   }
   .z-\[1000\] {
     z-index: 1000;
@@ -395,9 +413,18 @@
   .mt-\(--cmp-field-contents-gap\) {
     margin-top: var(--cmp-field-contents-gap);
   }
+  .mt-2 {
+    margin-top: var(--spacing-2);
+  }
+  .mt-8 {
+    margin-top: var(--spacing-8);
+  }
   .mt-12 {
     margin-top: var(--spacing-12);
   }
+  .mt-16 {
+    margin-top: var(--spacing-16);
+  }
   .mt-\[8px\] {
     margin-top: 8px;
   }
@@ -476,9 +503,15 @@
   .h-\[80px\] {
     height: 80px;
   }
+  .h-\[80vh\] {
+    height: 80vh;
+  }
   .h-\[364px\] {
     height: 364px;
   }
+  .h-\[600px\] {
+    height: 600px;
+  }
   .h-\[var\(--cmp-checkbox-size\)\] {
     height: var(--cmp-checkbox-size);
   }
@@ -515,6 +548,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
   }
@@ -777,6 +813,12 @@
   .gap-\(--cmp-field-addonLabel-gap\) {
     gap: var(--cmp-field-addonLabel-gap);
   }
+  .gap-2 {
+    gap: var(--spacing-2);
+  }
+  .gap-4 {
+    gap: var(--spacing-4);
+  }
   .gap-8 {
     gap: var(--spacing-8);
   }
@@ -903,6 +945,13 @@
   .gap-\[var\(--cmp-textinput-sm-gap\)\] {
     gap: var(--cmp-textinput-sm-gap);
   }
+  .space-y-8 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(var(--spacing-8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(var(--spacing-8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .gap-x-\[var\(--cmp-datepicker-calendar-legend-group-gap\)\] {
     column-gap: var(--cmp-datepicker-calendar-legend-group-gap);
   }
@@ -986,6 +1035,9 @@
   .rounded-full {
     border-radius: var(--radius-full);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -1124,6 +1176,9 @@
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
+  .border-grey-20 {
+    border-color: var(--color-grey-20);
+  }
   .border-grey-30 {
     border-color: var(--color-grey-30);
   }
@@ -1226,6 +1281,9 @@
   .bg-grey-05 {
     background-color: var(--color-grey-05);
   }
+  .bg-grey-90 {
+    background-color: var(--color-grey-90);
+  }
   .bg-red-50 {
     background-color: var(--color-red-50);
   }
@@ -1244,12 +1302,21 @@
   .p-0 {
     padding: 0;
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-8 {
+    padding: var(--spacing-8);
+  }
   .p-12 {
     padding: var(--spacing-12);
   }
   .p-20 {
     padding: var(--spacing-20);
   }
+  .p-24 {
+    padding: var(--spacing-24);
+  }
   .p-32 {
     padding: var(--spacing-32);
   }
@@ -1262,9 +1329,6 @@
   .p-\[12px\] {
     padding: 12px;
   }
-  .p-\[32px\] {
-    padding: 32px;
-  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
@@ -1277,6 +1341,12 @@
   .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);
+  }
   .px-8 {
     padding-inline: var(--spacing-8);
   }
@@ -1346,6 +1416,9 @@
   .py-\(--cmp-chipInput-sm-paddingY\) {
     padding-block: var(--cmp-chipInput-sm-paddingY);
   }
+  .py-1 {
+    padding-block: var(--spacing);
+  }
   .py-4 {
     padding-block: var(--spacing-4);
   }
@@ -1427,6 +1500,18 @@
   .align-middle {
     vertical-align: middle;
   }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .text-12 {
     font-size: var(--text-12);
   }
@@ -1439,6 +1524,9 @@
   .text-16 {
     font-size: var(--text-16);
   }
+  .text-20 {
+    font-size: var(--text-20);
+  }
   .text-24 {
     font-size: var(--text-24);
   }
@@ -1448,9 +1536,6 @@
   .text-\[12px\] {
     font-size: 12px;
   }
-  .text-\[13px\] {
-    font-size: 13px;
-  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1496,6 +1581,10 @@
     --tw-leading: 30px;
     line-height: 30px;
   }
+  .leading-\[normal\] {
+    --tw-leading: normal;
+    line-height: normal;
+  }
   .leading-\[var\(--cmp-datepicker-calendar-day-circle-size\)\] {
     --tw-leading: var(--cmp-datepicker-calendar-day-circle-size);
     line-height: var(--cmp-datepicker-calendar-day-circle-size);
@@ -1568,6 +1657,9 @@
   .text-\(--color-var\) {
     color: var(--color-var);
   }
+  .text-\(--sys-color-fg-warning\) {
+    color: var(--sys-color-fg-warning);
+  }
   .text-\(--sys-color-field-text-default\) {
     color: var(--sys-color-field-text-default);
   }
@@ -1643,9 +1735,6 @@
   .text-\[color\:var\(--color-grey-65\)\] {
     color: var(--color-grey-65);
   }
-  .text-\[color\:var\(--color-grey-70\)\] {
-    color: var(--color-grey-70);
-  }
   .text-\[color\:var\(--color-white\)\] {
     color: var(--color-white);
   }
@@ -1676,6 +1765,15 @@
   .text-green-strong {
     color: var(--color-green-strong);
   }
+  .text-grey-45 {
+    color: var(--color-grey-45);
+  }
+  .text-grey-55 {
+    color: var(--color-grey-55);
+  }
+  .text-grey-80 {
+    color: var(--color-grey-80);
+  }
   .text-inherit {
     color: inherit;
   }
@@ -1685,6 +1783,9 @@
   .text-red-strong {
     color: var(--color-red-strong);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -2075,6 +2176,13 @@
       }
     }
   }
+  .hover\:bg-grey-10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-grey-10);
+      }
+    }
+  }
   .hover\:\!text-\[color\:var\(--cmp-radioButton-content-hover\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2451,6 +2559,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;
@@ -2876,6 +2985,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;
@@ -2890,6 +3010,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;
@@ -3148,21 +3301,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;
@@ -3170,8 +3317,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;
@@ -3180,11 +3325,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;
@@ -3208,6 +3348,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;
 }
 @layer components {
   .typo-control-xs-default {
@@ -3655,6 +3815,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3817,6 +3982,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

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.11",
+  "version": "0.2.0",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [