@bwg-ui/core 1.0.0 → 1.1.2

package/dist/styles/layout.css

@@ -2,6 +2,7 @@
 .main-layout {
   min-height: 100vh;
   overflow: hidden;
+  min-width: 1280px;
 }
 
 /* 헤더 스타일 */
@@ -39,6 +40,10 @@
 .header-user .ant-btn:hover {
   background: none;
 }
+.header-user .ant-btn-icon {
+  width: 100%;
+  height: 100%;
+}
 .header-user-info {
   font-size: 14px;
   color: #666;
@@ -52,6 +57,7 @@
 }
 
 
+
 /* 헤더 로고 영역 */
 .header-logo {
   display: flex;
@@ -163,7 +169,7 @@
   background-color: var(--sidebar-segmented-bg);
   border-radius: var(--border-radius-sm);
   font-size: 13px;
-  color: #777;
+  color: var(--sidebar-segmented-text);
   .ant-segmented-group {
     gap: 5px;
   }
@@ -173,10 +179,10 @@
   }
 }
 .sider-search-ipt {
-  background: #F8F8F8;
+  background: var(--sidebar-search-bg);
   border-radius: var(--border-radius-xl);
   border: 0;
-  color: #8B8B8B;
+  color: var(--sidebar-search-text);
   font-size: 13px;
   font-weight: var(--font-weight-medium);
     .anticon-search svg {
@@ -202,7 +208,7 @@
 
 /* 사이드바 테마 적용 */
 .ant-layout-sider {
-  background-color: var(--sidebar-bg) !important;
+  background-color: var(--sidebar-bg);
 }
 .ant-layout-sider-collapsed {
   flex: 0 0 50px !important;
@@ -213,12 +219,12 @@
 }
 
 .ant-menu-dark {
-  background-color: var(--sidebar-bg) !important;
+  background-color: var(--sidebar-bg);
 }
 
 /* 사이드바 메뉴 트리 전체 테마 적용 */
 .ant-layout-sider .ant-menu {
-  /* background-color: var(--sidebar-bg) !important; */
+  background-color: var(--sidebar-bg);
 }
 
 .ant-layout-sider .ant-menu-submenu {
@@ -259,9 +265,9 @@
   border-radius: 0;
 }
 .sider-menu .ant-menu-item-active.ant-menu-item-only-child {
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
   &:hover {
-    background-color: var(--sidebar-menu-active-bg) !important;
+    background-color: var(--sidebar-menu-selected-bg) !important;
   }
   &::before {
     content: '';
@@ -270,7 +276,7 @@
     left: 0;
     width: 3px;
     height: 100%;
-    background: #5954FC;
+    background: var(--sidebar-menu-selected-bar);
   }
   .ant-menu-title-content {
     font-weight: var(--font-weight-medium);
@@ -314,8 +320,8 @@
 /* 2레벨 ul 스타일 */
 .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub {
   background-color: var(--sidebar-open-menu-group-bg) !important;
-  border-top: 1px solid var(--border-color) !important;
-  border-bottom: 1px solid var(--border-color) !important;
+  border-top: 1px solid var(--sidebar-open-menu-group-border) !important;
+  border-bottom: 1px solid var(--sidebar-open-menu-group-border) !important;
   padding: 10px 0;
 }
 .ant-layout-sider .sider-menu > .ant-menu-submenu-open > .ant-menu-sub > .ant-menu-submenu-open > .ant-menu-submenu-title {
@@ -365,14 +371,16 @@
 /* 2레벨 메뉴*/
 .ant-layout-sider .ant-menu-sub .ant-menu-item,
 .ant-layout-sider .ant-menu-sub .ant-menu-submenu-title {
-  /* padding-left: 54px !important; */
+  padding-left: 20px !important;
+}
+.ant-layout-sider .ant-menu-sub .ant-menu-item.ant-menu-item-only-child {
+  padding-left: 30px !important;
 }
-
 /* 3레벨 메뉴*/
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item,
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title {
   font-size: 13px !important;
-  /* padding-left: 81px !important; */
+  padding-left: 30px !important;
 }
 
 /* 4레벨 메뉴*/
@@ -382,7 +390,8 @@
   .ant-menu-sub
   .ant-menu-sub
   .ant-menu-submenu-title {
-    font-size: 13px !important;
+    font-size: 12px !important;
+    padding-left: 30px !important;
 }
 
 /* 메뉴 아이콘 색상 */
@@ -416,6 +425,11 @@
   /* color: var(--sidebar-text) !important; */
   /* background-color: rgba(255, 255, 255, 0.1) !important; */
 }
+/* 호버 상태 - 서브메뉴 텍스트 강조 */
+.ant-layout-sider .ant-menu-submenu:hover > .ant-menu-submenu-title .ant-menu-title-content span,
+.ant-layout-sider .ant-menu-item:hover > .ant-menu-title-content span {
+  font-weight: var(--font-weight-bold);
+} 
 
 /* 서브메뉴 내부 호버 상태 */
 .ant-layout-sider .ant-menu-sub .ant-menu-item:hover,
@@ -428,7 +442,7 @@
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item:hover,
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-submenu-title:hover {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 4레벨 서브메뉴 내부 호버 상태 */
@@ -443,7 +457,7 @@
   .ant-menu-sub
   .ant-menu-submenu-title:hover {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 라이트 테마 호버 (어두운 색상) */
@@ -536,21 +550,21 @@
 .ant-layout-sider .ant-menu-item-selected,
 .ant-layout-sider .ant-menu-item-selected > a {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 서브메뉴 내부 선택된 아이템 */
 .ant-layout-sider .ant-menu-sub .ant-menu-item-selected,
 .ant-layout-sider .ant-menu-sub .ant-menu-item-selected > a {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 3레벨 서브메뉴 내부 선택된 아이템 */
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected,
 .ant-layout-sider .ant-menu-sub .ant-menu-sub .ant-menu-item-selected > a {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 4레벨 서브메뉴 내부 선택된 아이템 */
@@ -566,7 +580,7 @@
   .ant-menu-item-selected
   > a {
   color: var(--sidebar-primary-text);
-  background-color: var(--sidebar-menu-active-bg);
+  background-color: var(--sidebar-menu-selected-bg);
 }
 
 /* 메뉴 하위 레이아웃 변경 */
@@ -590,14 +604,14 @@
     content: '';
     position: absolute;
     top: 50%;
-    left: -19px;
-    width: 6px;
+    left: -10px;
+    width: 4px;
     height: 1px;
-    background-color: #B1AEC4;
+    background-color: var(--sidebar-menu-bullet);
   }
 }
 .sider-content .sider-menu .ant-menu-item-active.ant-menu-item-only-child .ant-menu-title-content > div::before {
-    background-color: var(--sidebar-primary-text);  
+    background-color: var(--sidebar-menu-bullet-active);  
 }
 
 /* 사이드바 축소 스타일 */
@@ -733,8 +747,7 @@
 /* 컨텐츠 스타일 */
 .main-content {
   flex: 1;
-  overflow: auto;
-  height: calc(100vh - 120px); /* 헤더(64px) + MenuTab(48px) + 마진 고려 */
+  height: calc(100vh - 45px);
 }
 
 .content-header {
@@ -767,10 +780,8 @@
 /* 반응형 디자인 */
 @media (max-width: 768px) {
   .main-sider {
-    position: fixed;
     height: 100vh;
     z-index: 1001;
-    left: -200px;
     transition: left 0.3s ease;
   }
 
@@ -778,9 +789,6 @@
     left: 0;
   }
 
-  .main-content {
-    margin: 16px 8px;
-  }
 
   .main-header {
     padding: 0 16px;
@@ -861,7 +869,7 @@
   }
 }
 
-.menu-nav-container .menu-tabs.ant-tabs .ant-tabs-tab:hover {
+.menu-nav-container .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
   background: #dbdeec;
   color: var(--text-secondary);
 }
@@ -1092,6 +1100,9 @@
 .quick-tab-drag-btn:hover {
   background: rgba(28, 24, 37, 0.2) url(./assets/images/contents/icon/ico-quick-tab-move.svg) no-repeat center;
 }
+.quick-tab-container .quick-tab {
+  background-color: var(--primary-color);
+}
 .quick-tab-item-inner {
   display: flex;
   flex-direction: column;
@@ -1104,7 +1115,7 @@
     align-items: center;
     justify-content: center;
   }
-  .quick-tab-items-icon .anticon {
+  .quick-tab-items-icon .anticon { 
     font-size: 28px;
   }
   .quick-tab-items:last-child {
@@ -1122,11 +1133,73 @@
   background: #FFF0F5;
 }
 
-
 .quick-tab-items-title {
   font-size: 13px;
   font-weight: var(--font-weight-semibold);
   line-height: 16px;
   word-break: keep-all;
   color: var(--text-primary);
+}
+
+/* 퀵메뉴 스크롤 스타일 */
+.quick-tab-items-wrap::-webkit-scrollbar {
+  width: 4px;
+}
+
+.quick-tab-items-wrap::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+}
+
+.quick-tab-items-wrap::-webkit-scrollbar-thumb {
+  background: #d9d9d9;
+  border-radius: 3px;
+  border: 1px solid #f0f0f0;
+}
+
+.quick-tab-items-wrap::-webkit-scrollbar-thumb:hover {
+  background: #bfbfbf;
+}
+
+/* 잠금화면 */
+.lockscreen-form {
+  text-align: center;
+}
+.lockscreen-form .lock-icon-wrap {
+  width: 100%;
+  height: 70px;
+  margin-bottom: 15px;
+}
+.lockscreen-form .lock-icon-box {
+  display: inline-block;
+  width: 70px;
+  height: 70px;
+  border-radius: 15px;
+  background: #fff url(./assets/images/contents/icon/ico-lockscreen.svg) no-repeat center;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+}
+.lockscreen-form h2 {
+  margin-bottom: 10px;
+  font-size: 30px;
+  color: #fff;
+}
+.lockscreen-form p {
+  margin-bottom: 40px;
+  font-size: 16px;
+  color: #E2E2E2; 
+}
+.lock-ipt-wrap .ant-otp {
+  column-gap: 20px
+}
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input {
+  width: 44px;
+  height: 44px;
+  border-radius: 50px;
+  opacity: .5;
+}
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:hover,
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus,
+.lock-ipt-wrap .ant-otp .ant-otp-mask-input:focus-within {
+  border-color: #6449fc;
+  box-shadow: 0 0 0 2px rgb(205 196 255 / 10%);
 }

package/dist/styles/login.css

@@ -4,7 +4,7 @@
   min-width: 1276px;
   height: 100vh;
   overflow: hidden;
-  background: url('./assets/images/backgrounds/login_bg_02.png') no-repeat
+  background: url('./assets/images/backgrounds/krx_login_bg.png') no-repeat
     center center fixed;
   background-size: cover;
 
@@ -13,36 +13,20 @@
     top: 50%;
     left: 192px;
     width: 400px;
-    height: 390px;
-    margin-top: -195px;
-
+    height: 440px;
+    margin-top: -220px;
+    background: var(--bg-primary);
+    padding: 60px 50px;
+    border: 1px solid #DEE1FF;
+    border-radius: 30px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
     .logo_box {
       width: 100%;
-      height: 28px;
-      background: url('./assets/images/logos/bwg-logo-blue.png') no-repeat
+      height: 38px;
+      background: url('./assets/images/logos/krx-logo-full.svg') no-repeat
         center;
-      background-size: 198px 28px;
-      margin-bottom: 15px;
-    }
-
-    .login_title {
-      margin-bottom: 50px;
-      display: -webkit-box;
-      display: -ms-flexbox;
-      display: flex;
-      -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-      justify-content: space-between;
-      -webkit-box-align: end;
-      -ms-flex-align: end;
-      align-items: flex-end;
-
-      .tit_h1 {
-        font-size: 30px;
-        color: #394751;
-        font-weight: 600;
-        margin: 0 auto;
-      }
+      background-size: 191px 38px;
+      margin-bottom: 60px;
     }
 
     .alert_wrap {
@@ -106,18 +90,18 @@
       border: none;
       color: #fff;
       text-decoration: none !important;
-      font-size: 16px !important;
+      font-size: var(--font-size-md);
       font-weight: 600;
-      font-family: NanumGothicBold, 나눔고딕Bold !important;
-      background-color: #2278e4 !important;
+      background-color: #6449fc;
       -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
       transition: all 0.3s ease;
-      border-radius: 0;
+      border-radius: 50px;
+      box-shadow: 0 0 5px rgba(97, 56, 218, 0.2);
       &:hover,
       &:focus {
-        background-color: #305fb5 !important;
+        background-color: #361bca;
       }
     }
   }
@@ -141,6 +125,28 @@
 .login-form-button {
   width: 100%;
 }
+.login-ipt-wrap .ant-form-item-control-input {
+  height: 35px;
+}
+.login-ipt-wrap .ant-input-outlined {
+  border-color: #E8E8E8;
+}
+.login-ipt-wrap input:-webkit-autofill,
+.login-ipt-wrap input:-webkit-autofill:hover,
+.login-ipt-wrap input:-webkit-autofill:focus,
+.login-ipt-wrap input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s;
+    -webkit-transition: background-color 9999s ease-out;
+    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
+}
+
+
+
+.login-btn-wrap {
+  margin-bottom: 0 !important;
+  margin-top: 30px;
+}
+
 
 /* 로그인 페이지 반응형 */
 @media (max-width: 480px) {

package/dist/styles/variables.css

@@ -22,18 +22,22 @@
   --text-primary: #333333;
   --text-secondary: #555555;
   --text-high:#1a1a1a;
-  --text-disabled: #bfbfbf;
+  --text-disabled: #999999;
+  --text-disabled-bg:#f1f1f1;
   --text-white:#ffffff;
 
   /* 테두리 색상 */
   --border-color: #dddddd;
   --border-light: #f0f0f0;
 
-  /* 그림자 - 수정하기 */
+  /* 그림자 */
   --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
   --shadow-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
   --shadow-heavy: 0 4px 12px rgba(0, 0, 0, 0.15);
 
+  /* 컴포넌트별 그림자 */
+  --button-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
+
   /* 간격 */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
@@ -69,14 +73,20 @@
   --transition-slow: 0.5s ease;
 
   /* 사이드바 */
-  --sidebar-width: 230px;
   --sidebar-bg: var(--bg-primary);
   --sidebar-text: #ffffff;
   --sidebar-primary-text:#261298;
   --sidebar-segmented-bg:#E6E7F5;
+  --sidebar-segmented-text:#777777;
   --sidebar-open-menu-group-bg:#F4F5FE;
-  --sidebar-menu-active-bg:#D9DEFF;
+  --sidebar-open-menu-group-border:#DDDDDD;
+  --sidebar-menu-selected-bg:#D9DEFF;
+  --sidebar-menu-selected-bar:#5954FC;
   --sidebar-active-icon-bg:#E6E9FF;
+  --sidebar-search-bg:#f8f8f8;
+  --sidebar-search-text:#8b8b8b;
+  --sidebar-menu-bullet:#B1AEC4;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
 
   /* 헤더 */
   --header-height: 50px;
@@ -100,7 +110,213 @@
   --button-permission-border:#bdb1ff;
   --button-light-border: #e9ecef;
   --button-solid: var(--primary-color);
-  --button-solid-hover: #361bca;
+  --button-solid-hover: #7163C3;
   --button-custom-height:35px;
 
+  /* 라디오,체크박스 */
+  --check-primary:#6377D1;
+  --check-primary-active:var(--primary-color);
+
+  /* 트리 */
+  --tree-selected-bg:#efebff;
+}
+
+
+/* 테마1 - Clear Violet */
+.theme-clear-violet {
+  /* 색상 팔레트 */
+  --primary-color: #6449fc;
+
+  /* 사이드바 */
+  --sidebar-bg: var(--bg-primary);
+  --sidebar-text: #ffffff;
+  --sidebar-primary-text:#261298;
+  --sidebar-segmented-bg:#E6E7F5;
+  --sidebar-segmented-text:#777777;
+  --sidebar-open-menu-group-bg:#F4F5FE;
+  --sidebar-open-menu-group-border:#DDDDDD;
+  --sidebar-menu-selected-bg:#D9DEFF;
+  --sidebar-menu-selected-bar:#5954FC;
+  --sidebar-active-icon-bg:#E6E9FF;
+  --sidebar-search-bg:#f8f8f8;
+  --sidebar-search-text:#8b8b8b;
+  --sidebar-menu-bullet:#B1AEC4;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
+
+  /* 헤더 */
+  --header-bg: #f3f4ff;
+
+  /* 드로어 */
+  --drawer-header-bg: #edefff;
+
+  /* 버튼 */
+  --button-primary: var(--primary-color);
+  --button-primary-hover: var(--primary-color);
+  --button-primary-active: var(--primary-color);
+  --button-default: #ffffff;
+  --button-default-hover: #f5f5f5;
+  --button-default-border: var(--border-color);
+  --button-permission-border:#bdb1ff;
+  --button-solid: var(--primary-color);
+  --button-solid-hover: #7163C3;
+}
+
+
+/* 테마2 - Clear Blue */
+.theme-clear-blue {
+  /* 색상 팔레트 */
+  --primary-color: #0091ac;
+
+  /* 사이드바 */
+  --sidebar-bg: var(--bg-primary);
+  --sidebar-text: #ffffff;
+  --sidebar-primary-text:#136170;
+  --sidebar-segmented-bg:#F0F2F3;
+  --sidebar-segmented-text:#777777;
+  --sidebar-open-menu-group-bg:#F3FDFF;
+  --sidebar-open-menu-group-border:#DDDDDD;
+  --sidebar-menu-selected-bg:#D8F6FB;
+  --sidebar-menu-selected-bar:#1AAFC9;
+  --sidebar-active-icon-bg:#CEF3FA;
+  --sidebar-search-bg:#f8f8f8;
+  --sidebar-search-text:#8b8b8b;
+  --sidebar-menu-bullet:#B0C2C5;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
+
+  /* 헤더 */
+  --header-bg: #f6fcfd;
+
+  /* 드로어 */
+  --drawer-header-bg: #DFF4F8;
+
+  /* 버튼 */
+  --button-primary: var(--primary-color);
+  --button-primary-hover: var(--primary-color);
+  --button-primary-active: var(--primary-color);
+  --button-default: #ffffff;
+  --button-default-hover: #f5f5f5;
+  --button-default-border: var(--border-color);
+  --button-permission-border:#69CCDE;
+  --button-solid: var(--primary-color);
+  --button-solid-hover: #588D99;
+}
+
+
+/* 테마3 - Violet Beam */
+.theme-violet-beam {
+  /* 색상 팔레트 */
+  --primary-color: #6449FC;
+
+  /* 사이드바 */
+  --sidebar-bg: #F4F6FF;
+  --sidebar-text: #ffffff;
+  --sidebar-primary-text:#6449FC;
+  --sidebar-segmented-bg:#C9D0EB;
+  --sidebar-segmented-text:#81869C;
+  --sidebar-open-menu-group-bg:#EDEEFF;
+  --sidebar-open-menu-group-border:#D7D3F0;
+  --sidebar-menu-selected-bg:#FFFFFF;
+  --sidebar-menu-selected-bar:#5954FC;
+  --sidebar-active-icon-bg:#DDDDFF;
+  --sidebar-search-bg:#E4E9FF;
+  --sidebar-search-text:#9194B3;
+  --sidebar-menu-bullet:#B1AEC4;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
+
+  /* 헤더 */
+  --header-bg: #f3f4ff;
+
+  /* 드로어 */
+  --drawer-header-bg: #edefff;
+ 
+  /* 버튼 */
+  --button-primary: var(--primary-color);
+  --button-primary-hover: var(--primary-color);
+  --button-primary-active: var(--primary-color);
+  --button-default: #ffffff;
+  --button-default-hover: #f5f5f5;
+  --button-default-border: var(--border-color);
+  --button-permission-border:#bdb1ff;
+  --button-solid: var(--primary-color);
+  --button-solid-hover: #7163C3;
+}
+
+
+/* 테마4 - Aqua Rise */
+.theme-aqua-rise {
+  /* 색상 팔레트 */
+  --primary-color: #0091ac;
+
+  /* 사이드바 */ 
+  --sidebar-bg: #F3FDFF;
+  --sidebar-text: #ffffff;
+  --sidebar-primary-text:var(--primary-color);
+  --sidebar-segmented-bg:#D1E3EC;
+  --sidebar-segmented-text:#6C7C84;
+  --sidebar-open-menu-group-bg:#DEF6FB;
+  --sidebar-open-menu-group-border:#D2EAF3;
+  --sidebar-menu-selected-bg:#FFFFFF;
+  --sidebar-menu-selected-bar:#1AAFC9;
+  --sidebar-active-icon-bg:#BEECF5;
+  --sidebar-search-bg:#E2F3F6;
+  --sidebar-search-text:#75878E;
+  --sidebar-menu-bullet:#B0C2C5;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
+
+  /* 헤더 */
+  --header-bg: #51BCD1;
+
+  /* 드로어 */
+  --drawer-header-bg: #DFF4F8;
+
+  /* 버튼 */
+  --button-primary: var(--primary-color);
+  --button-primary-hover: var(--primary-color);
+  --button-primary-active: var(--primary-color);
+  --button-default: #ffffff;
+  --button-default-hover: #f5f5f5;
+  --button-default-border: var(--border-color);
+  --button-permission-border:#69CCDE;
+  --button-solid: var(--primary-color);
+  --button-solid-hover: #588D99;
 }
+
+
+/* 테마5 - Royal Orange */
+.theme-royal-orange {
+  /* 색상 팔레트 */
+  --primary-color: #FD5C06;
+
+  /* 사이드바 */ 
+  --sidebar-bg: var(--bg-primary);
+  --sidebar-text: #ffffff;
+  --sidebar-primary-text:var(--primary-color);
+  --sidebar-segmented-bg:#E6E6E6;
+  --sidebar-segmented-text:#918073; 
+  --sidebar-open-menu-group-bg:#FFF2EA;
+  --sidebar-open-menu-group-border:#E3D7CE;
+  --sidebar-menu-selected-bg:#FFFFFF;
+  --sidebar-menu-selected-bar:#FD6B06;
+  --sidebar-active-icon-bg:#FFD4B4;
+  --sidebar-search-bg:#F5F3F2;
+  --sidebar-search-text:#938579;
+  --sidebar-menu-bullet:#B5A9A1;
+  --sidebar-menu-bullet-active:var(--sidebar-primary-text);
+
+  /* 헤더 */
+  --header-bg: #FF9452;
+
+  /* 드로어 */
+  --drawer-header-bg: #FFF5E5;
+
+  /* 버튼 */
+  --button-primary: #FF7615;
+  --button-primary-hover: #FF7615;
+  --button-primary-active: #FF7615;
+  --button-default: #ffffff;
+  --button-default-hover: #f5f5f5;
+  --button-default-border: var(--border-color);
+  --button-permission-border:#FFAE83;
+  --button-solid: #FF7615;
+  --button-solid-hover: #C8804E;
+}

package/dist/types/global.d.ts

@@ -0,0 +1,2 @@
+//시스템 코드 타입 선언
+declare const __SYS_CD__: string;