sellmate-design-system-react 9.0.0-beta.32 → 9.0.0-beta.34

package/dist/styles.css

@@ -117,10 +117,10 @@
     --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-25: #D8F2E2;
+    --color-green-45: #AEEAC7;
+    --color-green-55: #84DEA8;
+    --color-green-65: #4CC77D;
     --color-green-70: #12B553;
     --color-green-75: #00973C;
     --color-green-80: #007B31;
@@ -278,10 +278,10 @@
     --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-25: #D8F2E2;
+    --color-success-45: #AEEAC7;
+    --color-success-55: #84DEA8;
+    --color-success-65: #4CC77D;
     --color-success-70: #12B553;
     --color-success-75: #00973C;
     --color-success-80: #007B31;
@@ -354,6 +354,7 @@
     --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-2: 2px;
     --border-width-4: 4px;
     --border-width-6: 6px;
     --border-width-control-default: 1px;
@@ -361,6 +362,7 @@
     --border-width-navigation-default: 1px;
     --border-width-item-default: 1px;
     --opacity-005: 5%;
+    --opacity-008: 8%;
     --opacity-040: 40%;
     --opacity-060: 60%;
     --z-raised: 1;
@@ -585,6 +587,9 @@
   .inset-0 {
     inset: 0;
   }
+  .inset-\[1px\] {
+    inset: 1px;
+  }
   .inset-x-0 {
     inset-inline: 0;
   }
@@ -774,6 +779,15 @@
   .my-sd-8 {
     margin-block: var(--spacing-sd-8);
   }
+  .ms-\[6px\] {
+    margin-inline-start: 6px;
+  }
+  .me-\(--cmp-calendarBoard-eventButton-label-gap\) {
+    margin-inline-end: var(--cmp-calendarBoard-eventButton-label-gap);
+  }
+  .me-\[4px\] {
+    margin-inline-end: 4px;
+  }
   .-mt-8 {
     margin-top: calc(var(--spacing) * -8);
   }
@@ -903,6 +917,10 @@
   .table {
     display: table;
   }
+  .size-\(--cmp-calendarBoard-daySequence-size\) {
+    width: var(--cmp-calendarBoard-daySequence-size);
+    height: var(--cmp-calendarBoard-daySequence-size);
+  }
   .size-\(--cmp-tree-item-arrow-icon\) {
     width: var(--cmp-tree-item-arrow-icon);
     height: var(--cmp-tree-item-arrow-icon);
@@ -919,6 +937,9 @@
     width: 100%;
     height: 100%;
   }
+  .h-\(--cmp-calendarBoard-item-height\) {
+    height: var(--cmp-calendarBoard-item-height);
+  }
   .h-\(--cmp-gnb-top-height\) {
     height: var(--cmp-gnb-top-height);
   }
@@ -1036,6 +1057,9 @@
   .h-\[600px\] {
     height: 600px;
   }
+  .h-\[640px\] {
+    height: 640px;
+  }
   .h-\[var\(--cmp-checkbox-size\)\] {
     height: var(--cmp-checkbox-size);
   }
@@ -1114,6 +1138,9 @@
   .max-h-\[calc\(100dvh-48px\)\] {
     max-height: calc(100dvh - 48px);
   }
+  .min-h-\(--cmp-calendarBoard-dayCard-minHeight\) {
+    min-height: var(--cmp-calendarBoard-dayCard-minHeight);
+  }
   .min-h-\(--cmp-chipInput-md-minHeight\) {
     min-height: var(--cmp-chipInput-md-minHeight);
   }
@@ -1360,6 +1387,9 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .min-w-\(--cmp-calendarBoard-dayCard-minWidth\) {
+    min-width: var(--cmp-calendarBoard-dayCard-minWidth);
+  }
   .min-w-0 {
     min-width: 0;
   }
@@ -1372,6 +1402,9 @@
   .min-w-\[40px\] {
     min-width: 40px;
   }
+  .min-w-\[48px\] {
+    min-width: 48px;
+  }
   .min-w-\[72px\] {
     min-width: 72px;
   }
@@ -1558,6 +1591,9 @@
   .flex-row {
     flex-direction: row;
   }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1594,6 +1630,30 @@
   .\!gap-12 {
     gap: calc(var(--spacing) * 12) !important;
   }
+  .gap-\(--cmp-calendarBoard-dayCard-grid-gap\) {
+    gap: var(--cmp-calendarBoard-dayCard-grid-gap);
+  }
+  .gap-\(--cmp-calendarBoard-dayEvent-body-gap\) {
+    gap: var(--cmp-calendarBoard-dayEvent-body-gap);
+  }
+  .gap-\(--cmp-calendarBoard-dayEvent-header-gap\) {
+    gap: var(--cmp-calendarBoard-dayEvent-header-gap);
+  }
+  .gap-\(--cmp-calendarBoard-eventButton-inline-gap\) {
+    gap: var(--cmp-calendarBoard-eventButton-inline-gap);
+  }
+  .gap-\(--cmp-calendarBoard-eventButton-label-gap\) {
+    gap: var(--cmp-calendarBoard-eventButton-label-gap);
+  }
+  .gap-\(--cmp-calendarBoard-header-content-gap\) {
+    gap: var(--cmp-calendarBoard-header-content-gap);
+  }
+  .gap-\(--cmp-calendarBoard-header-gap\) {
+    gap: var(--cmp-calendarBoard-header-gap);
+  }
+  .gap-\(--cmp-calendarBoard-moreButton-gap\) {
+    gap: var(--cmp-calendarBoard-moreButton-gap);
+  }
   .gap-\(--cmp-chipInput-chip-gap\) {
     gap: var(--cmp-chipInput-chip-gap);
   }
@@ -1699,6 +1759,15 @@
   .gap-\[40px\] {
     gap: 40px;
   }
+  .gap-\[48px\] {
+    gap: 48px;
+  }
+  .gap-\[200px\] {
+    gap: 200px;
+  }
+  .gap-\[320px\] {
+    gap: 320px;
+  }
   .gap-\[var\(--\.\.\.\)\] {
     gap: var(--...);
   }
@@ -1834,6 +1903,9 @@
   .gap-\[var\(--토큰명\)\] {
     gap: var(--토큰명);
   }
+  .gap-px {
+    gap: 1px;
+  }
   .gap-sd-2 {
     gap: var(--spacing-sd-2);
   }
@@ -1919,6 +1991,18 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--cmp-calendarBoard-dayCard-focus-border-radius\) {
+    border-radius: var(--cmp-calendarBoard-dayCard-focus-border-radius);
+  }
+  .rounded-\(--cmp-calendarBoard-daySequence-radius\) {
+    border-radius: var(--cmp-calendarBoard-daySequence-radius);
+  }
+  .rounded-\(--cmp-calendarBoard-item-radius\) {
+    border-radius: var(--cmp-calendarBoard-item-radius);
+  }
+  .rounded-\(--cmp-calendarBoard-radius\) {
+    border-radius: var(--cmp-calendarBoard-radius);
+  }
   .rounded-\(--cmp-gnb-system-accountListBox-radius\) {
     border-radius: var(--cmp-gnb-system-accountListBox-radius);
   }
@@ -1937,6 +2021,9 @@
   .rounded-\(--cmp-radioCard-radius\) {
     border-radius: var(--cmp-radioCard-radius);
   }
+  .rounded-\(--radius-8\) {
+    border-radius: var(--radius-8);
+  }
   .rounded-8 {
     border-radius: var(--radius-8);
   }
@@ -2081,6 +2168,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-\(length\:--cmp-calendarBoard-dayCard-focus-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--cmp-calendarBoard-dayCard-focus-border-width);
+  }
   .border-\(length\:--cmp-radio-borderWidth\) {
     border-style: var(--tw-border-style);
     border-width: var(--cmp-radio-borderWidth);
@@ -2156,6 +2247,18 @@
   .\!border-border-accentLight {
     border-color: var(--color-border-accentLight) !important;
   }
+  .border-\(--cmp-calendarBoard-border\) {
+    border-color: var(--cmp-calendarBoard-border);
+  }
+  .border-\(--cmp-calendarBoard-dayCard-focus-border-color\) {
+    border-color: var(--cmp-calendarBoard-dayCard-focus-border-color);
+  }
+  .border-\(--cmp-calendarBoard-daySequence-border-selected\) {
+    border-color: var(--cmp-calendarBoard-daySequence-border-selected);
+  }
+  .border-\(--cmp-calendarBoard-grid-month-border\) {
+    border-color: var(--cmp-calendarBoard-grid-month-border);
+  }
   .border-\(--cmp-listDraggableItem-border-default\) {
     border-color: var(--cmp-listDraggableItem-border-default);
   }
@@ -2291,6 +2394,9 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
+  .border-grey-10 {
+    border-color: var(--color-grey-10);
+  }
   .border-grey-20 {
     border-color: var(--color-grey-20);
   }
@@ -2306,6 +2412,33 @@
   .bg-\(--alb-bg\) {
     background-color: var(--alb-bg);
   }
+  .bg-\(--cdc-bg\) {
+    background-color: var(--cdc-bg);
+  }
+  .bg-\(--ceb-bg\) {
+    background-color: var(--ceb-bg);
+  }
+  .bg-\(--cmp-calendarBoard-bg\) {
+    background-color: var(--cmp-calendarBoard-bg);
+  }
+  .bg-\(--cmp-calendarBoard-daySequence-bg-today\) {
+    background-color: var(--cmp-calendarBoard-daySequence-bg-today);
+  }
+  .bg-\(--cmp-calendarBoard-eventButton-hover-overlay-color\) {
+    background-color: var(--cmp-calendarBoard-eventButton-hover-overlay-color);
+  }
+  .bg-\(--cmp-calendarBoard-grid-bg\) {
+    background-color: var(--cmp-calendarBoard-grid-bg);
+  }
+  .bg-\(--cmp-calendarBoard-grid-month-border\) {
+    background-color: var(--cmp-calendarBoard-grid-month-border);
+  }
+  .bg-\(--cmp-calendarBoard-moreButton-bg\) {
+    background-color: var(--cmp-calendarBoard-moreButton-bg);
+  }
+  .bg-\(--cmp-calendarBoard-moreButton-hover-overlay-color\) {
+    background-color: var(--cmp-calendarBoard-moreButton-hover-overlay-color);
+  }
   .bg-\(--cmp-gnb-dark-bg\) {
     background-color: var(--cmp-gnb-dark-bg);
   }
@@ -2741,6 +2874,18 @@
   .p-sd-62 {
     padding: var(--spacing-sd-62);
   }
+  .px-\(--cmp-calendarBoard-dayCard-paddingX\) {
+    padding-inline: var(--cmp-calendarBoard-dayCard-paddingX);
+  }
+  .px-\(--cmp-calendarBoard-dayEvent-body-paddingX\) {
+    padding-inline: var(--cmp-calendarBoard-dayEvent-body-paddingX);
+  }
+  .px-\(--cmp-calendarBoard-dayEvent-header-paddingX\) {
+    padding-inline: var(--cmp-calendarBoard-dayEvent-header-paddingX);
+  }
+  .px-\(--cmp-calendarBoard-item-paddingX\) {
+    padding-inline: var(--cmp-calendarBoard-item-paddingX);
+  }
   .px-\(--cmp-chipInput-md-paddingX\) {
     padding-inline: var(--cmp-chipInput-md-paddingX);
   }
@@ -2876,6 +3021,9 @@
   .px-sd-16 {
     padding-inline: var(--spacing-sd-16);
   }
+  .py-\(--cmp-calendarBoard-dayEvent-header-paddingY\) {
+    padding-block: var(--cmp-calendarBoard-dayEvent-header-paddingY);
+  }
   .py-\(--cmp-chipInput-md-paddingY\) {
     padding-block: var(--cmp-chipInput-md-paddingY);
   }
@@ -2993,6 +3141,12 @@
   .py-sd-24 {
     padding-block: var(--spacing-sd-24);
   }
+  .pt-\(--cmp-calendarBoard-dayCard-header-paddingTop\) {
+    padding-top: var(--cmp-calendarBoard-dayCard-header-paddingTop);
+  }
+  .pt-\(--cmp-calendarBoard-grid-paddingTop\) {
+    padding-top: var(--cmp-calendarBoard-grid-paddingTop);
+  }
   .pt-\(--cmp-pageHeader-plain-paddingTop\) {
     padding-top: var(--cmp-pageHeader-plain-paddingTop);
   }
@@ -3026,6 +3180,18 @@
   .pr-\[var\(--cmp-overlay-header-paddingX\)\] {
     padding-right: var(--cmp-overlay-header-paddingX);
   }
+  .pb-\(--cmp-calendarBoard-dayCard-grid-paddingBottom\) {
+    padding-bottom: var(--cmp-calendarBoard-dayCard-grid-paddingBottom);
+  }
+  .pb-\(--cmp-calendarBoard-dayCard-header-paddingBottom\) {
+    padding-bottom: var(--cmp-calendarBoard-dayCard-header-paddingBottom);
+  }
+  .pb-\(--cmp-calendarBoard-dayEvent-body-paddingBottom\) {
+    padding-bottom: var(--cmp-calendarBoard-dayEvent-body-paddingBottom);
+  }
+  .pb-\(--cmp-calendarBoard-grid-gap\) {
+    padding-bottom: var(--cmp-calendarBoard-grid-gap);
+  }
   .pb-\(--cmp-pageHeader-plain-paddingBottom\) {
     padding-bottom: var(--cmp-pageHeader-plain-paddingBottom);
   }
@@ -3035,6 +3201,12 @@
   .pb-\[8px\] {
     padding-bottom: 8px;
   }
+  .pb-\[80px\] {
+    padding-bottom: 80px;
+  }
+  .pb-\[240px\] {
+    padding-bottom: 240px;
+  }
   .pb-\[var\(--cmp-chipFilter-listbox-list-paddingY\)\] {
     padding-bottom: var(--cmp-chipFilter-listbox-list-paddingY);
   }
@@ -3286,6 +3458,33 @@
   .whitespace-pre {
     white-space: pre;
   }
+  .text-\(--cmp-calendarBoard-daySequence-text-default\) {
+    color: var(--cmp-calendarBoard-daySequence-text-default);
+  }
+  .text-\(--cmp-calendarBoard-daySequence-text-otherMonth\) {
+    color: var(--cmp-calendarBoard-daySequence-text-otherMonth);
+  }
+  .text-\(--cmp-calendarBoard-daySequence-text-today\) {
+    color: var(--cmp-calendarBoard-daySequence-text-today);
+  }
+  .text-\(--cmp-calendarBoard-eventButton-text-color-default\) {
+    color: var(--cmp-calendarBoard-eventButton-text-color-default);
+  }
+  .text-\(--cmp-calendarBoard-eventButton-text-color-separator\) {
+    color: var(--cmp-calendarBoard-eventButton-text-color-separator);
+  }
+  .text-\(--cmp-calendarBoard-grid-weekRow-color\) {
+    color: var(--cmp-calendarBoard-grid-weekRow-color);
+  }
+  .text-\(--cmp-calendarBoard-header-content-color\) {
+    color: var(--cmp-calendarBoard-header-content-color);
+  }
+  .text-\(--cmp-calendarBoard-moreButton-count-color\) {
+    color: var(--cmp-calendarBoard-moreButton-count-color);
+  }
+  .text-\(--cmp-calendarBoard-moreButton-label-color\) {
+    color: var(--cmp-calendarBoard-moreButton-label-color);
+  }
   .text-\(--cmp-chip-content-focus\) {
     color: var(--cmp-chip-content-focus);
   }
@@ -3635,6 +3834,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\(--shadow-overlay\) {
+    --tw-shadow: var(--shadow-overlay);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[-5px_0_8px_0_rgba\(34\,34\,34\,0\.1\)\] {
     --tw-shadow: -5px 0 8px 0 var(--tw-shadow-color, rgba(34,34,34,0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3846,6 +4049,20 @@
       }
     }
   }
+  .group-hover\:opacity-\(--cmp-calendarBoard-eventButton-hover-overlay-opacity\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: var(--cmp-calendarBoard-eventButton-hover-overlay-opacity);
+      }
+    }
+  }
+  .group-hover\:opacity-\(--cmp-calendarBoard-moreButton-hover-overlay-opacity\) {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: var(--cmp-calendarBoard-moreButton-hover-overlay-opacity);
+      }
+    }
+  }
   .group-hover\/editor-tool\:opacity-5 {
     &:is(:where(.group\/editor-tool):hover *) {
       @media (hover: hover) {
@@ -5405,7 +5622,7 @@
   .\[\&\:\:-webkit-scrollbar-thumb\]\:border-2 {
     &::-webkit-scrollbar-thumb {
       border-style: var(--tw-border-style);
-      border-width: 2px;
+      border-width: var(--border-width-2);
     }
   }
   .\[\&\:\:-webkit-scrollbar-thumb\]\:border-solid {
@@ -6170,6 +6387,70 @@
   --cmp-timepicker-selector-range-heading-color: #555555;
   --cmp-timepicker-selector-range-heading-gap: 16px;
   --cmp-timepicker-selector-range-section-gap: 12px;
+  --cmp-calendarBoard-radius: 8px;
+  --cmp-calendarBoard-bg: #FFFFFF;
+  --cmp-calendarBoard-border: #E1E1E1;
+  --cmp-calendarBoard-header-content-color: #222222;
+  --cmp-calendarBoard-header-content-divider-height: 16px;
+  --cmp-calendarBoard-header-content-gap: 8px;
+  --cmp-calendarBoard-header-gap: 16px;
+  --cmp-calendarBoard-grid-bg: #F9F9F9;
+  --cmp-calendarBoard-grid-weekRow-color: #555555;
+  --cmp-calendarBoard-grid-gap: 8px;
+  --cmp-calendarBoard-grid-paddingTop: 6px;
+  --cmp-calendarBoard-grid-month-border: #E1E1E1;
+  --cmp-calendarBoard-daySequence-size: 24px;
+  --cmp-calendarBoard-daySequence-radius: 9999px;
+  --cmp-calendarBoard-daySequence-bg-today: #0075FF;
+  --cmp-calendarBoard-daySequence-border-selected: #0075FF;
+  --cmp-calendarBoard-daySequence-text-default: #222222;
+  --cmp-calendarBoard-daySequence-text-today: #FFFFFF;
+  --cmp-calendarBoard-daySequence-text-otherMonth: #AAAAAA;
+  --cmp-calendarBoard-dayCard-minWidth: 100px;
+  --cmp-calendarBoard-dayCard-minHeight: 100px;
+  --cmp-calendarBoard-dayCard-bg: #FFFFFF;
+  --cmp-calendarBoard-dayCard-paddingX: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingTop: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingBottom: 6px;
+  --cmp-calendarBoard-dayCard-grid-paddingBottom: 8px;
+  --cmp-calendarBoard-dayCard-grid-gap: 4px;
+  --cmp-calendarBoard-dayCard-focus-border-width: 2px;
+  --cmp-calendarBoard-dayCard-focus-border-color: #93C4FF;
+  --cmp-calendarBoard-dayCard-focus-border-radius: 2px;
+  --cmp-calendarBoard-item-height: 20px;
+  --cmp-calendarBoard-item-paddingX: 8px;
+  --cmp-calendarBoard-item-radius: 6px;
+  --cmp-calendarBoard-moreButton-gap: 4px;
+  --cmp-calendarBoard-moreButton-bg: #FFFFFF;
+  --cmp-calendarBoard-moreButton-count-color: #004290;
+  --cmp-calendarBoard-moreButton-label-color: #222222;
+  --cmp-calendarBoard-moreButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-moreButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-eventButton-inline-gap: 8px;
+  --cmp-calendarBoard-eventButton-label-gap: 4px;
+  --cmp-calendarBoard-eventButton-bg-default: #E6F1FF;
+  --cmp-calendarBoard-eventButton-bg-blue: #D9EAFF;
+  --cmp-calendarBoard-eventButton-bg-oceanBlue: #D9F2FD;
+  --cmp-calendarBoard-eventButton-bg-lightBlue: #EAF5FE;
+  --cmp-calendarBoard-eventButton-bg-green: #E8F9EF;
+  --cmp-calendarBoard-eventButton-bg-yellow: #FEF1C4;
+  --cmp-calendarBoard-eventButton-bg-orange: #FFEAD7;
+  --cmp-calendarBoard-eventButton-bg-red: #FCE6E6;
+  --cmp-calendarBoard-eventButton-bg-white: #FFFFFF;
+  --cmp-calendarBoard-eventButton-text-color-default: #222222;
+  --cmp-calendarBoard-eventButton-text-color-separator: #AAAAAA;
+  --cmp-calendarBoard-eventButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-eventButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-dayEvent-width: 280px;
+  --cmp-calendarBoard-dayEvent-minWidth: 280px;
+  --cmp-calendarBoard-dayEvent-minHeight: 200px;
+  --cmp-calendarBoard-dayEvent-maxHeight: 312px;
+  --cmp-calendarBoard-dayEvent-header-paddingX: 20px;
+  --cmp-calendarBoard-dayEvent-header-paddingY: 12px;
+  --cmp-calendarBoard-dayEvent-header-gap: 4px;
+  --cmp-calendarBoard-dayEvent-body-paddingX: 12px;
+  --cmp-calendarBoard-dayEvent-body-paddingBottom: 20px;
+  --cmp-calendarBoard-dayEvent-body-gap: 8px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;

package/dist/theme.css

@@ -77,10 +77,10 @@
   --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-25: #D8F2E2;
+  --color-green-45: #AEEAC7;
+  --color-green-55: #84DEA8;
+  --color-green-65: #4CC77D;
   --color-green-70: #12B553;
   --color-green-75: #00973C;
   --color-green-80: #007B31;
@@ -238,10 +238,10 @@
   --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-25: #D8F2E2;
+  --color-success-45: #AEEAC7;
+  --color-success-55: #84DEA8;
+  --color-success-65: #4CC77D;
   --color-success-70: #12B553;
   --color-success-75: #00973C;
   --color-success-80: #007B31;
@@ -319,6 +319,7 @@
   --font-weight-black: 900;
   --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-2: 2px;
   --border-width-4: 4px;
   --border-width-6: 6px;
   --border-width-control-default: 1px;
@@ -326,6 +327,7 @@
   --border-width-navigation-default: 1px;
   --border-width-item-default: 1px;
   --opacity-005: 5%;
+  --opacity-008: 8%;
   --opacity-040: 40%;
   --opacity-060: 60%;
   --z-raised: 1;
@@ -980,6 +982,70 @@
   --cmp-timepicker-selector-range-heading-color: #555555;
   --cmp-timepicker-selector-range-heading-gap: 16px;
   --cmp-timepicker-selector-range-section-gap: 12px;
+  --cmp-calendarBoard-radius: 8px;
+  --cmp-calendarBoard-bg: #FFFFFF;
+  --cmp-calendarBoard-border: #E1E1E1;
+  --cmp-calendarBoard-header-content-color: #222222;
+  --cmp-calendarBoard-header-content-divider-height: 16px;
+  --cmp-calendarBoard-header-content-gap: 8px;
+  --cmp-calendarBoard-header-gap: 16px;
+  --cmp-calendarBoard-grid-bg: #F9F9F9;
+  --cmp-calendarBoard-grid-weekRow-color: #555555;
+  --cmp-calendarBoard-grid-gap: 8px;
+  --cmp-calendarBoard-grid-paddingTop: 6px;
+  --cmp-calendarBoard-grid-month-border: #E1E1E1;
+  --cmp-calendarBoard-daySequence-size: 24px;
+  --cmp-calendarBoard-daySequence-radius: 9999px;
+  --cmp-calendarBoard-daySequence-bg-today: #0075FF;
+  --cmp-calendarBoard-daySequence-border-selected: #0075FF;
+  --cmp-calendarBoard-daySequence-text-default: #222222;
+  --cmp-calendarBoard-daySequence-text-today: #FFFFFF;
+  --cmp-calendarBoard-daySequence-text-otherMonth: #AAAAAA;
+  --cmp-calendarBoard-dayCard-minWidth: 100px;
+  --cmp-calendarBoard-dayCard-minHeight: 100px;
+  --cmp-calendarBoard-dayCard-bg: #FFFFFF;
+  --cmp-calendarBoard-dayCard-paddingX: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingTop: 8px;
+  --cmp-calendarBoard-dayCard-header-paddingBottom: 6px;
+  --cmp-calendarBoard-dayCard-grid-paddingBottom: 8px;
+  --cmp-calendarBoard-dayCard-grid-gap: 4px;
+  --cmp-calendarBoard-dayCard-focus-border-width: 2px;
+  --cmp-calendarBoard-dayCard-focus-border-color: #93C4FF;
+  --cmp-calendarBoard-dayCard-focus-border-radius: 2px;
+  --cmp-calendarBoard-item-height: 20px;
+  --cmp-calendarBoard-item-paddingX: 8px;
+  --cmp-calendarBoard-item-radius: 6px;
+  --cmp-calendarBoard-moreButton-gap: 4px;
+  --cmp-calendarBoard-moreButton-bg: #FFFFFF;
+  --cmp-calendarBoard-moreButton-count-color: #004290;
+  --cmp-calendarBoard-moreButton-label-color: #222222;
+  --cmp-calendarBoard-moreButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-moreButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-eventButton-inline-gap: 8px;
+  --cmp-calendarBoard-eventButton-label-gap: 4px;
+  --cmp-calendarBoard-eventButton-bg-default: #E6F1FF;
+  --cmp-calendarBoard-eventButton-bg-blue: #D9EAFF;
+  --cmp-calendarBoard-eventButton-bg-oceanBlue: #D9F2FD;
+  --cmp-calendarBoard-eventButton-bg-lightBlue: #EAF5FE;
+  --cmp-calendarBoard-eventButton-bg-green: #E8F9EF;
+  --cmp-calendarBoard-eventButton-bg-yellow: #FEF1C4;
+  --cmp-calendarBoard-eventButton-bg-orange: #FFEAD7;
+  --cmp-calendarBoard-eventButton-bg-red: #FCE6E6;
+  --cmp-calendarBoard-eventButton-bg-white: #FFFFFF;
+  --cmp-calendarBoard-eventButton-text-color-default: #222222;
+  --cmp-calendarBoard-eventButton-text-color-separator: #AAAAAA;
+  --cmp-calendarBoard-eventButton-hover-overlay-color: #555555;
+  --cmp-calendarBoard-eventButton-hover-overlay-opacity: 8%;
+  --cmp-calendarBoard-dayEvent-width: 280px;
+  --cmp-calendarBoard-dayEvent-minWidth: 280px;
+  --cmp-calendarBoard-dayEvent-minHeight: 200px;
+  --cmp-calendarBoard-dayEvent-maxHeight: 312px;
+  --cmp-calendarBoard-dayEvent-header-paddingX: 20px;
+  --cmp-calendarBoard-dayEvent-header-paddingY: 12px;
+  --cmp-calendarBoard-dayEvent-header-gap: 4px;
+  --cmp-calendarBoard-dayEvent-body-paddingX: 12px;
+  --cmp-calendarBoard-dayEvent-body-paddingBottom: 20px;
+  --cmp-calendarBoard-dayEvent-body-gap: 8px;
   --cmp-tag-xs-height: 20px;
   --cmp-tag-xs-paddingX: 8px;
   --cmp-tag-xs-gap: 4px;

package/package.json

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