공통 테마 적용

packages/common/components/src/ui/dialog/index.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "dialog-content fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--dialog-border)] bg-[var(--dialog-bg)] p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
         className,
       )}
       {...props}

packages/common/components/src/ui/layout/common.css

@@ -37,13 +37,14 @@
   border-radius: 0.5rem;
   padding: 0.6rem;
   font-size: 1.3rem;
-  color: #666;
+  /* 카드 색상은 테마 변수(@common/assets/styles/base.css 의 --card-*)로만 지정 */
+  color: var(--card-text, #666);
 }
 
 .card-border {
-  box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.06);
-  border: 1px solid #dbe2e6;
-  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: var(--card-shadow, 0 0 10px -1px rgba(0, 0, 0, 0.06));
+  border: 1px solid var(--card-border-color, #dbe2e6);
+  background-color: var(--card-surface, rgba(255, 255, 255, 0.6));
 }
 
 .card-header {
@@ -52,7 +53,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid #e1e7eb;
+  border-bottom: 1px solid var(--card-divider, #e1e7eb);
   padding: 1rem;
 }
 
@@ -63,11 +64,111 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-top: 1px solid #e1e7eb;
+  border-top: 1px solid var(--card-divider, #e1e7eb);
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
+/*
+ * ── 카드 보조 클래스 (앱별 components.css 사본에서 통합) ──
+ * 색상은 테마 변수(@common/assets/styles/base.css)를 사용한다.
+ */
+.card_width10 {
+  width: calc(10% - 12px);
+}
+
+.card_width20 {
+  width: calc(20% - 12px);
+}
+
+.card_width25 {
+  width: calc(25% - 12px);
+}
+
+.card_width30 {
+  width: calc(30% - 12px);
+}
+
+.card_width33 {
+  width: calc(33.333% - 12px);
+}
+
+.card_width40 {
+  width: calc(40% - 12px);
+}
+
+.card_width45 {
+  width: calc(45% - 12px);
+}
+
+.card_width50 {
+  width: calc(50% - 12px);
+}
+
+.card_width60 {
+  width: calc(60% - 12px);
+}
+
+.card_width66 {
+  width: calc(66.666% - 12px);
+}
+
+.card_width70 {
+  width: calc(70% - 12px);
+}
+
+.card_width75 {
+  width: calc(75% - 12px);
+}
+
+.card_width80 {
+  width: calc(80% - 12px);
+}
+
+.card_width90 {
+  width: calc(90% - 12px);
+}
+
+.card_width100 {
+  width: calc(100% - 12px);
+}
+
+.card_nopadding,
+.card_paddingnone {
+  padding: 0 !important;
+}
+
+.card_nomargin {
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.card_title {
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.card_title .leftArea {
+  display: flex;
+  align-items: center;
+}
+
+.card_title h4 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.topline {
+  border-top: 1px solid var(--line-top, #ccc);
+}
+
+.bottomline {
+  border-bottom: 1px solid var(--line-bottom, #e6eef3);
+  background: var(--line-bottom-bg, #fff);
+}
+
 #lnb {
   position: relative;
   width: 100%;
@@ -112,10 +213,4 @@
   }
 }
 
-/* 블랙 테마 팝업 (onasys 디자인 .popup_content 기준) */
-[data-theme="black"] {
-  .dialog-content {
-    background: #404244;
-    border-color: #4e5154;
-  }
-}
+/* 팝업 색상은 테마 변수(--dialog-bg / --dialog-border)로 지정 (Dialog 컴포넌트에서 사용) */

packages/common/components/src/ui/table/table.css

@@ -14,8 +14,13 @@
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];
   }
 
+  /*
+   * 색상은 테마 변수(@common/assets/styles/base.css)만 사용한다.
+   * 테마별 색 변경은 base.css 의 [data-theme] 블록에서 --table-* 값만 바꾼다.
+   */
   .table-ui.default th {
-    @apply bg-[#5987bf] text-[#fff];
+    background-color: var(--table-th-bg);
+    color: var(--table-th-fg);
   }
   .table-ui th.data-table-group-header {
     background-image: linear-gradient(
@@ -30,57 +35,53 @@
     background-size: 100% 1px;
   }
   .table-ui.default td {
-    @apply border-b border-b-border text-label;
+    @apply border-b border-b-border;
+    background-color: var(--table-td-bg);
+    color: var(--table-td-fg);
   }
   .table-ui.secondary th {
-    @apply border border-border bg-[#eaf3fb] text-[#647784];
+    @apply border border-border;
+    background-color: var(--table-sub-th-bg);
+    color: var(--table-sub-th-fg);
   }
   .table-ui.secondary td {
     @apply border border-border;
+    background-color: var(--table-td-bg);
+    color: var(--table-sub-td-fg);
   }
   .table-ui.line tr {
-    @apply border-b border-t border-[#d4e0ea] bg-transparent;
+    @apply border-b border-t bg-transparent;
+    border-color: var(--table-line-border);
   }
   .table-ui.line th {
-    @apply border-b-2 border-[#d4e0ea] text-[#555];
+    @apply border-b-2;
+    border-color: var(--table-line-border);
+    background-color: var(--table-line-th-bg);
+    color: var(--table-line-th-fg);
+  }
+  .table-ui.line td {
+    background-color: var(--table-td-bg);
+    color: var(--table-sub-td-fg);
   }
 
   /*
-   * 블랙 테마 표: onasys 디자인 tableStyle_D 기준 (default·secondary·line 공통)
-   * - 열 제목(th scope=col): 배경 #565a5d / 글자 #fff / 테두리 #404244
-   * - 행 제목(th scope=row): 배경 #565a5d / 글자 #f7f7f7 / 테두리 #464b4e
-   * - 내용(td): 배경 #464849 / 글자 #dadada / 테두리 #595e61
+   * 블랙 테마 구조 규칙 (onasys 디자인 tableStyle_D): 모든 셀에 테두리 표시.
+   * 색상은 변수 사용 - 값은 base.css 의 [data-theme="black"] 에서 관리.
    */
   [data-theme="black"] {
     .table-ui tr {
       @apply bg-transparent;
     }
     .table-ui th {
-      @apply border border-[#404244] bg-[#565a5d] font-medium text-[#fff];
+      border: 1px solid var(--table-th-border);
     }
     .table-ui th[scope="row"] {
-      @apply border-[#464b4e] font-normal text-[#f7f7f7];
+      border-color: var(--table-row-th-border);
+      font-weight: 400;
+      color: var(--table-row-th-fg);
     }
     .table-ui td {
-      @apply border border-[#595e61] bg-[#464849] text-[#dadada];
-    }
-  }
-
-  [data-theme="red"] {
-    .table-ui.default th {
-      @apply bg-[#8d8d94];
-    }
-    .table-ui.secondary th {
-      @apply bg-[#f6f6f9] text-[#808080];
-    }
-  }
-
-  [data-theme="green"] {
-    .table-ui.default th {
-      @apply bg-[#6bafae];
-    }
-    .table-ui.secondary th {
-      @apply bg-[#ebf7f7] text-[#64908f];
+      border: 1px solid var(--table-cell-border);
     }
   }
 }