sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/lib/portal-container.d.ts

@@ -1,7 +1,14 @@
 export declare const PortalContainerProvider: import("react").Provider<HTMLElement | null>;
+export declare const InsideModalProvider: import("react").Provider<boolean>;
 /**
  * 현재 소속된 Portal 컨테이너를 반환한다.
  * Radix `*.Portal` 의 `container`, Ariakit 의 `portalElement` 에 그대로 넘기면 되며,
  * 컨테이너가 없을 때(모달 밖)는 `undefined` 를 반환해 각 라이브러리 기본값(body)을 쓴다.
  */
 export declare function usePortalContainer(): HTMLElement | undefined;
+/**
+ * 현재 floating 이 모달 내부 컨텍스트에서 렌더링되는지 반환한다.
+ * portal target ref 가 아직 준비되지 않은 첫 렌더에서도 true를 유지해
+ * 모달 내부 전용 우회 로직이 깜빡이지 않도록 한다.
+ */
+export declare function useInsideModal(): boolean;

package/dist/styles.css

@@ -21,23 +21,34 @@
     --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;
     --color-grey-55: #AAAAAA;
     --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;
@@ -45,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;
@@ -60,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);
@@ -280,6 +293,9 @@
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
+  .top-12 {
+    top: var(--spacing-12);
+  }
   .top-48 {
     top: var(--spacing-48);
   }
@@ -298,6 +314,9 @@
   .right-0 {
     right: 0;
   }
+  .right-12 {
+    right: var(--spacing-12);
+  }
   .right-\[10px\] {
     right: 10px;
   }
@@ -349,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;
@@ -394,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;
   }
@@ -475,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);
   }
@@ -514,6 +548,9 @@
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
   }
@@ -722,6 +759,9 @@
   .resize-y {
     resize: vertical;
   }
+  .\[scrollbar-width\:auto\] {
+    scrollbar-width: auto;
+  }
   .\[scrollbar-width\:none\] {
     scrollbar-width: none;
   }
@@ -773,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);
   }
@@ -899,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);
   }
@@ -982,6 +1035,9 @@
   .rounded-full {
     border-radius: var(--radius-full);
   }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
@@ -1087,6 +1143,9 @@
   .border-\[color\:var\(--cmp-checkbox-checked-bg-default\)\] {
     border-color: var(--cmp-checkbox-checked-bg-default);
   }
+  .border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
+    border-color: var(--cmp-checkbox-checked-border-inverse);
+  }
   .border-\[color\:var\(--cmp-checkbox-unchecked-border-default\)\] {
     border-color: var(--cmp-checkbox-unchecked-border-default);
   }
@@ -1117,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);
   }
@@ -1141,6 +1203,9 @@
   .bg-\[var\(--cmp-checkbox-checked-bg-default\)\] {
     background-color: var(--cmp-checkbox-checked-bg-default);
   }
+  .bg-\[var\(--cmp-checkbox-unchecked-bg-default\)\] {
+    background-color: var(--cmp-checkbox-unchecked-bg-default);
+  }
   .bg-\[var\(--cmp-datepicker-calendar-bg\)\] {
     background-color: var(--cmp-datepicker-calendar-bg);
   }
@@ -1156,6 +1221,9 @@
   .bg-\[var\(--cmp-listBox-bg\)\] {
     background-color: var(--cmp-listBox-bg);
   }
+  .bg-\[var\(--cmp-listItem-bg-hover\)\] {
+    background-color: var(--cmp-listItem-bg-hover);
+  }
   .bg-\[var\(--cmp-listItem-depth1-bg-default\)\] {
     background-color: var(--cmp-listItem-depth1-bg-default);
   }
@@ -1213,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);
   }
@@ -1231,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);
   }
@@ -1249,9 +1329,6 @@
   .p-\[12px\] {
     padding: 12px;
   }
-  .p-\[32px\] {
-    padding: 32px;
-  }
   .p-\[var\(--cmp-datepicker-calendar-paddingXY\)\] {
     padding: var(--cmp-datepicker-calendar-paddingXY);
   }
@@ -1264,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);
   }
@@ -1321,6 +1404,9 @@
   .px-\[var\(--cmp-table-keyValue-body-paddingX-default\)\] {
     padding-inline: var(--cmp-table-keyValue-body-paddingX-default);
   }
+  .px-\[var\(--cmp-table-keyValue-body-paddingX-wide\)\] {
+    padding-inline: var(--cmp-table-keyValue-body-paddingX-wide);
+  }
   .px-\[var\(--cmp-table-keyValue-search-paddingX\)\] {
     padding-inline: var(--cmp-table-keyValue-search-paddingX);
   }
@@ -1330,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);
   }
@@ -1411,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);
   }
@@ -1423,6 +1524,9 @@
   .text-16 {
     font-size: var(--text-16);
   }
+  .text-20 {
+    font-size: var(--text-20);
+  }
   .text-24 {
     font-size: var(--text-24);
   }
@@ -1432,9 +1536,6 @@
   .text-\[12px\] {
     font-size: 12px;
   }
-  .text-\[13px\] {
-    font-size: 13px;
-  }
   .text-\[14px\] {
     font-size: 14px;
   }
@@ -1480,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);
@@ -1552,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);
   }
@@ -1582,6 +1690,9 @@
   .text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
     color: var(--cmp-listItem-content-disabled);
   }
+  .text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+    color: var(--cmp-listItem-content-hover);
+  }
   .text-\[color\:var\(--cmp-listItem-content-selected\)\] {
     color: var(--cmp-listItem-content-selected);
   }
@@ -1624,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);
   }
@@ -1657,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;
   }
@@ -1666,6 +1783,9 @@
   .text-red-strong {
     color: var(--color-red-strong);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1823,16 +1943,6 @@
       }
     }
   }
-  .group-data-\[active-item\]\:border-\[color\:var\(--cmp-checkbox-checked-border-inverse\)\] {
-    &:is(:where(.group)[data-active-item] *) {
-      border-color: var(--cmp-checkbox-checked-border-inverse);
-    }
-  }
-  .group-data-\[active-item\]\:bg-transparent {
-    &:is(:where(.group)[data-active-item] *) {
-      background-color: transparent;
-    }
-  }
   .placeholder\:text-\(--cmp-chipInput-text-placeholder\) {
     &::placeholder {
       color: var(--cmp-chipInput-text-placeholder);
@@ -2066,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) {
@@ -2116,6 +2233,16 @@
       }
     }
   }
+  .focus\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
+    &:focus {
+      background-color: var(--cmp-listItem-bg-hover);
+    }
+  }
+  .focus\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
+    &:focus {
+      color: var(--cmp-listItem-content-hover);
+    }
+  }
   .focus-visible\:shadow-\[0_0_0_2px_var\(--btn-ring\)\] {
     &:focus-visible {
       --tw-shadow: 0 0 0 2px var(--tw-shadow-color, var(--btn-ring));
@@ -2139,26 +2266,11 @@
       cursor: not-allowed;
     }
   }
-  .aria-disabled\:cursor-not-allowed {
-    &[aria-disabled="true"] {
-      cursor: not-allowed;
-    }
-  }
-  .aria-disabled\:text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
-    &[aria-disabled="true"] {
+  .disabled\:text-\[color\:var\(--cmp-listItem-content-disabled\)\] {
+    &:disabled {
       color: var(--cmp-listItem-content-disabled);
     }
   }
-  .data-\[active-item\]\:bg-\[var\(--cmp-listItem-bg-hover\)\] {
-    &[data-active-item] {
-      background-color: var(--cmp-listItem-bg-hover);
-    }
-  }
-  .data-\[active-item\]\:text-\[color\:var\(--cmp-listItem-content-hover\)\] {
-    &[data-active-item] {
-      color: var(--cmp-listItem-content-hover);
-    }
-  }
   .data-\[disabled\]\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
@@ -2169,11 +2281,6 @@
       color: var(--cmp-button-text-disabled);
     }
   }
-  .data-\[enter\]\:animate-floating-in-bottom {
-    &[data-enter] {
-      animation: var(--animate-floating-in-bottom);
-    }
-  }
   .data-\[highlighted\]\:bg-\[var\(--sys-color-bg-accent\)\] {
     &[data-highlighted] {
       background-color: var(--sys-color-bg-accent);
@@ -2184,11 +2291,6 @@
       color: var(--sys-color-fg-inverse);
     }
   }
-  .data-\[leave\]\:animate-floating-out-bottom {
-    &[data-leave] {
-      animation: var(--animate-floating-out-bottom);
-    }
-  }
   .data-\[state\=checked\]\:translate-x-\[12px\] {
     &[data-state="checked"] {
       --tw-translate-x: 12px;
@@ -2332,6 +2434,36 @@
       display: none;
     }
   }
+  .\[\&\:\:-webkit-scrollbar\]\:w-\[8px\] {
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\]\:bg-\[var\(--color-grey-25\)\] {
+    &::-webkit-scrollbar {
+      background-color: var(--color-grey-25);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:rounded-\[4px\] {
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-\[var\(--color-grey-45\)\] {
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-grey-45);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar-track\]\:bg-\[var\(--color-grey-25\)\] {
+    &::-webkit-scrollbar-track {
+      background-color: var(--color-grey-25);
+    }
+  }
+  .\[\&\:\:-webkit-scrollbar\:horizontal\]\:h-\[8px\] {
+    &::-webkit-scrollbar:horizontal {
+      height: 8px;
+    }
+  }
 }
 :root {
   --sys-size-control-xs-height: 24px;
@@ -2427,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;
@@ -2852,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;
@@ -2866,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;
@@ -3124,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;
@@ -3146,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;
@@ -3156,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;
@@ -3184,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 {
@@ -3631,6 +3815,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -3793,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;