skin 및 레이아웃 작업

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

@@ -1,37 +1,47 @@
 @tailwind components;
 
 @layer components {
-  button[role="button"] {
+  button[data-slot="button"] {
     @apply text-[1.3rem] transition-opacity hover:opacity-90;
   }
-  button[role="button"].primary {
+  button[data-slot="button"].primary {
     @apply bg-primary;
   }
-  button[role="button"].green {
+  button[data-slot="button"].green {
     @apply bg-[#179d5b];
   }
-  button[role="button"].sky {
+  button[data-slot="button"].sky {
     @apply bg-[rgba(50,154,203,1)];
   }
-  button[role="button"].yellow {
+  button[data-slot="button"].yellow {
     @apply bg-[rgba(243,201,0,1)] text-[#1e1e1e];
   }
-  button[role="button"].orange {
+  button[data-slot="button"].orange {
     @apply bg-[#c97600];
   }
-  button[role="button"].emerald {
+  button[data-slot="button"].emerald {
     @apply bg-[#0691d1];
   }
-  button[role="button"].white {
+  button[data-slot="button"].white {
     @apply border border-border bg-[rgba(255,255,255,1)] text-[#666];
   }
-  button[role="button"].red {
+  button[data-slot="button"].red {
     @apply bg-destructive;
   }
-  button[role="button"].gray {
+  button[data-slot="button"].gray {
     @apply bg-[#8a8a8a];
   }
-  button[role="button"].lightGray {
+  button[data-slot="button"].lightGray {
     @apply bg-[rgba(235,235,235,1)] text-[#707070];
   }
+
+  /* 블랙 테마 버튼 글자색 (onasys 디자인 design/c: 기본 #fff, btn_white #666, btn_gray2 #9e9e9e) */
+  [data-theme="black"] {
+    button[data-slot="button"].yellow {
+      @apply text-[#ffffff];
+    }
+    button[data-slot="button"].lightGray {
+      @apply text-[#9e9e9e];
+    }
+  }
 }