feat: update color handling for dark mode compatibility
- Updated various components to utilize `getAdaptiveLabelColor` for dynamic label color adjustments based on the current theme. - Enhanced dark mode styles in `globals.css` for better visual consistency across components. Made-with: Cursor
This commit is contained in:
parent
fa6f76bff1
commit
58e958829c
|
|
@ -584,23 +584,24 @@ select {
|
|||
.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
|
||||
.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
|
||||
.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
|
||||
.dark .text-orange-600 { color: hsl(25 90% 55%) !important; }
|
||||
.dark .text-orange-700 { color: hsl(25 90% 50%) !important; }
|
||||
.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
|
||||
.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
|
||||
.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
|
||||
.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
|
||||
|
||||
/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
|
||||
.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
|
||||
.dark .bg-violet-100 { background-color: hsl(263 40% 15%) !important; }
|
||||
.dark .bg-violet-200 { background-color: hsl(263 40% 20%) !important; }
|
||||
.dark .text-violet-500 { color: hsl(263 70% 60%) !important; }
|
||||
.dark .text-violet-600 { color: hsl(263 70% 55%) !important; }
|
||||
.dark .text-violet-700 { color: hsl(263 70% 50%) !important; }
|
||||
.dark .border-violet-200 { border-color: hsl(263 40% 25%) !important; }
|
||||
.dark .border-violet-300 { border-color: hsl(263 40% 30%) !important; }
|
||||
.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
|
||||
.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
|
||||
.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
|
||||
.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
|
||||
.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
|
||||
.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
|
||||
.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
|
||||
|
||||
/* --- 19. bg/text/border - amber (조인/경고) --- */
|
||||
.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
|
||||
.dark .text-amber-500 { color: hsl(38 90% 55%) !important; }
|
||||
.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
|
||||
|
||||
/* ===== End Dark Mode Compatibility Layer ===== */
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ import {
|
|||
subscribeDom as canvasSplitSubscribeDom,
|
||||
} from "@/lib/registry/components/v2-split-line/canvasSplitStore";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
// 컴포넌트 렌더러들을 강제로 로드하여 레지스트리에 등록
|
||||
import "@/lib/registry/components/ButtonRenderer";
|
||||
import "@/lib/registry/components/CardRenderer";
|
||||
|
|
@ -1288,7 +1290,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
className="text-sm font-medium leading-none"
|
||||
style={{
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "hsl(var(--foreground))",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
...(isHorizLabel ? { whiteSpace: "nowrap" as const, display: "flex", alignItems: "center" } : {}),
|
||||
...(labelPos === "bottom" ? { marginTop: style?.labelMarginBottom || "4px" } : {}),
|
||||
|
|
@ -1344,7 +1346,7 @@ export const InteractiveScreenViewerDynamic: React.FC<InteractiveScreenViewerPro
|
|||
? { right: "100%", marginRight: labelGapValue }
|
||||
: { left: "100%", marginLeft: labelGapValue }),
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "hsl(var(--foreground))",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Biz
|
||||
*
|
||||
|
|
@ -335,7 +337,7 @@ export const V2Biz = forwardRef<HTMLDivElement, V2BizProps>(
|
|||
top: `-${estimatedLabelHeight}px`,
|
||||
left: 0,
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Date
|
||||
*
|
||||
|
|
@ -719,7 +721,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
|
|||
...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
@ -754,7 +756,7 @@ export const V2Date = forwardRef<HTMLDivElement, V2DateProps>((props, ref) => {
|
|||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Hierarchy
|
||||
*
|
||||
|
|
@ -486,7 +488,7 @@ export const V2Hierarchy = forwardRef<HTMLDivElement, V2HierarchyProps>(
|
|||
top: `-${estimatedLabelHeight}px`,
|
||||
left: 0,
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Input
|
||||
*
|
||||
|
|
@ -994,7 +996,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
|
|||
...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
@ -1037,7 +1039,7 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
|
|||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Media
|
||||
*
|
||||
|
|
@ -834,7 +836,7 @@ export const V2Media = forwardRef<HTMLDivElement, V2MediaProps>((props, ref) =>
|
|||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize,
|
||||
color: style?.labelColor,
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight,
|
||||
marginBottom: style?.labelMarginBottom,
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
"use client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
/**
|
||||
* V2Select
|
||||
*
|
||||
|
|
@ -1176,7 +1178,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
|
|||
...(labelPos === "top" ? { position: "absolute" as const, top: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
...(labelPos === "bottom" ? { position: "absolute" as const, bottom: `-${estimatedLabelHeight}px`, left: 0 } : {}),
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
@ -1220,7 +1222,7 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
|
|||
htmlFor={id}
|
||||
style={{
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="w-full text-sm font-medium whitespace-nowrap sm:w-[120px] sm:shrink-0"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@ import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|||
import { useV2FormOptional } from "@/components/v2/V2FormContext";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
// 컬럼 메타데이터 캐시 (테이블명 → 컬럼 설정 맵)
|
||||
const columnMetaCache: Record<string, Record<string, any>> = {};
|
||||
const columnMetaLoading: Record<string, Promise<void>> = {};
|
||||
|
|
@ -433,7 +435,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
if (catNeedsExternalHorizLabel) {
|
||||
const labelGap = component.style?.labelGap || "8px";
|
||||
const labelFontSize = component.style?.labelFontSize || "14px";
|
||||
const labelColor = component.style?.labelColor || "#64748b";
|
||||
const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
|
||||
const labelFontWeight = component.style?.labelFontWeight || "500";
|
||||
const isRequired = component.required || (component as any).required;
|
||||
const isLeft = catLabelPosition === "left";
|
||||
|
|
@ -850,7 +852,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
if (needsExternalHorizLabel) {
|
||||
const labelGap = component.style?.labelGap || "8px";
|
||||
const labelFontSize = component.style?.labelFontSize || "14px";
|
||||
const labelColor = component.style?.labelColor || "#64748b";
|
||||
const labelColor = getAdaptiveLabelColor(component.style?.labelColor);
|
||||
const labelFontWeight = component.style?.labelFontWeight || "500";
|
||||
const isRequired = component.required || (component as any).required;
|
||||
const isLeft = labelPosition === "left";
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect } from "react";
|
|||
import { ComponentRendererProps } from "../../types";
|
||||
import { AccordionBasicConfig, AccordionItem, DataSourceConfig, ContentFieldConfig } from "./types";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
// 커스텀 아코디언 컴포넌트
|
||||
interface CustomAccordionProps {
|
||||
|
|
@ -692,7 +693,7 @@ export const AccordionBasicComponent: React.FC<AccordionBasicComponentProps> = (
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { Label } from "@/components/ui/label";
|
|||
import { getCategoryValues } from "@/lib/api/tableCategoryValue";
|
||||
import { TableCategoryValue } from "@/types/tableCategoryValue";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
interface CategorySelectComponentProps {
|
||||
component?: any;
|
||||
|
|
@ -137,7 +138,7 @@ export const CategorySelectComponent: React.FC<
|
|||
top: `-${estimatedLabelHeight}px`,
|
||||
left: 0,
|
||||
fontSize: style?.labelFontSize || "14px",
|
||||
color: style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(style?.labelColor),
|
||||
fontWeight: style?.labelFontWeight || "500",
|
||||
}}
|
||||
className="text-sm font-medium whitespace-nowrap"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { DividerLineConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface DividerLineComponentProps extends ComponentRendererProps {
|
||||
config?: DividerLineConfig;
|
||||
|
|
@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { ImageDisplayConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface ImageDisplayComponentProps extends ComponentRendererProps {
|
||||
config?: ImageDisplayConfig;
|
||||
|
|
@ -87,7 +88,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { SliderBasicConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface SliderBasicComponentProps extends ComponentRendererProps {
|
||||
config?: SliderBasicConfig;
|
||||
|
|
@ -86,7 +87,7 @@ export const SliderBasicComponent: React.FC<SliderBasicComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
||||
...(isInteractive && component.style ? component.style : {}),
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { codeCache } from "@/lib/caching/codeCache";
|
|||
import { useEntityJoinOptimization } from "@/lib/hooks/useEntityJoinOptimization";
|
||||
import { getFullImageUrl } from "@/lib/api/client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
// 🆕 RelatedDataButtons 전역 레지스트리 타입 선언
|
||||
declare global {
|
||||
|
|
@ -268,7 +269,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
|
||||
// 디버그 로그 제거 (성능 최적화)
|
||||
|
||||
const buttonColor = component.style?.labelColor || "#212121";
|
||||
const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
|
||||
const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
|
||||
|
||||
const gridColumns = component.gridColumns || 1;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { TestInputConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface TestInputComponentProps extends ComponentRendererProps {
|
||||
config?: TestInputConfig;
|
||||
|
|
@ -81,7 +82,7 @@ export const TestInputComponent: React.FC<TestInputComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "../../types";
|
||||
import { TextDisplayConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||||
|
||||
export interface TextDisplayComponentProps extends ComponentRendererProps {
|
||||
|
|
@ -60,7 +61,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
|
|||
const textStyle: React.CSSProperties = {
|
||||
fontSize: componentConfig.fontSize || "14px",
|
||||
fontWeight: componentConfig.fontWeight || "normal",
|
||||
color: componentConfig.color || "hsl(var(--foreground))",
|
||||
color: getAdaptiveLabelColor(componentConfig.color),
|
||||
textAlign: componentConfig.textAlign || "left",
|
||||
backgroundColor: componentConfig.backgroundColor || "transparent",
|
||||
padding: componentConfig.padding || "0",
|
||||
|
|
@ -92,7 +93,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { TextareaBasicConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface TextareaBasicComponentProps extends ComponentRendererProps {
|
||||
config?: TextareaBasicConfig;
|
||||
|
|
@ -68,7 +69,7 @@ export const TextareaBasicComponent: React.FC<TextareaBasicComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
||||
...(isInteractive && component.style ? component.style : {}),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { ToggleSwitchConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface ToggleSwitchComponentProps extends ComponentRendererProps {
|
||||
config?: ToggleSwitchConfig;
|
||||
|
|
@ -86,7 +87,7 @@ export const ToggleSwitchComponent: React.FC<ToggleSwitchComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
||||
...(isInteractive && component.style ? component.style : {}),
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import React from "react";
|
||||
import { ComponentRendererProps } from "@/types/component";
|
||||
import { DividerLineConfig } from "./types";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface DividerLineComponentProps extends ComponentRendererProps {
|
||||
config?: DividerLineConfig;
|
||||
|
|
@ -119,7 +120,7 @@ export const DividerLineComponent: React.FC<DividerLineComponentProps> = ({
|
|||
top: "-25px",
|
||||
left: "0px",
|
||||
fontSize: component.style?.labelFontSize || "14px",
|
||||
color: component.style?.labelColor || "#64748b",
|
||||
color: getAdaptiveLabelColor(component.style?.labelColor),
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { getFullImageUrl } from "@/lib/api/client";
|
|||
import { getFilePreviewUrl } from "@/lib/api/file";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { v2EventBus, V2_EVENTS, V2ErrorBoundary } from "@/lib/v2-core";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
// 🖼️ 테이블 셀 이미지 썸네일 컴포넌트
|
||||
// objid인 경우 인증된 API로 blob URL 생성, 경로인 경우 직접 URL 사용
|
||||
|
|
@ -404,7 +405,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
|
|||
|
||||
// 디버그 로그 제거 (성능 최적화)
|
||||
|
||||
const buttonColor = component.style?.labelColor || "#212121";
|
||||
const buttonColor = getAdaptiveLabelColor(component.style?.labelColor);
|
||||
const buttonTextColor = component.config?.buttonTextColor || "#ffffff";
|
||||
|
||||
const gridColumns = component.gridColumns || 1;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import React from "react";
|
|||
import { ComponentRendererProps } from "../../types";
|
||||
import { TextDisplayConfig } from "./types";
|
||||
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
||||
import { getAdaptiveLabelColor } from "@/lib/utils/darkModeColor";
|
||||
|
||||
export interface TextDisplayComponentProps extends ComponentRendererProps {
|
||||
// 추가 props가 필요한 경우 여기에 정의
|
||||
|
|
@ -63,7 +64,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
|
|||
const textStyle: React.CSSProperties = {
|
||||
fontSize: customStyle.fontSize || componentConfig.fontSize || "14px",
|
||||
fontWeight: customStyle.fontWeight || componentConfig.fontWeight || "normal",
|
||||
color: customStyle.color || componentConfig.color || "hsl(var(--foreground))",
|
||||
color: getAdaptiveLabelColor(customStyle.color || componentConfig.color),
|
||||
textAlign: (customStyle.textAlign || componentConfig.textAlign || "left") as React.CSSProperties["textAlign"],
|
||||
backgroundColor: customStyle.backgroundColor || componentConfig.backgroundColor || "transparent",
|
||||
padding: componentConfig.padding || "0",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
/**
|
||||
* 다크모드 대응 색상 유틸리티
|
||||
* 화면 디자이너에서 기본값으로 저장된 어두운 색상을 감지하여
|
||||
* 다크모드에서 자동으로 CSS 변수(foreground)로 대체
|
||||
*/
|
||||
|
||||
const DEFAULT_DARK_COLORS = new Set([
|
||||
"#212121", "#000000", "#333333", "#333", "#000",
|
||||
"black", "#111111", "#1a1a1a", "#64748b",
|
||||
]);
|
||||
|
||||
export const isDefaultDarkLabelColor = (color?: string): boolean => {
|
||||
if (!color) return true;
|
||||
return DEFAULT_DARK_COLORS.has(color.toLowerCase().trim());
|
||||
};
|
||||
|
||||
export const getAdaptiveLabelColor = (labelColor?: string): string =>
|
||||
isDefaultDarkLabelColor(labelColor) ? "hsl(var(--foreground))" : labelColor!;
|
||||
Loading…
Reference in New Issue