Fix/theme styling for components

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartComp.tsx

@@ -144,7 +144,8 @@ CandleStickChartTmpComp = withViewFn(CandleStickChartTmpComp, (comp) => {
   const option = useMemo(() => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
-      chartSize
+      chartSize,
+      theme?.theme?.components?.candleStickChart || {},
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts

@@ -12,6 +12,7 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
 import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
 import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
+import { useContext } from "react";
 
 export function transformData(
   originData: JSONObject[],
@@ -128,15 +129,19 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 }
 
 // https://echarts.apache.org/en/option.html
-export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
+export function getEchartsConfig(
+  props: EchartsConfigProps,
+  chartSize?: ChartSize,
+  theme?: any,
+): EChartsOptionWithMap {
   if (props.mode === "json") {
     let opt={
   "title": {
     "text": props.echartsTitle,
     'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
     "left":"center"
   },
-  "backgroundColor": props?.style?.background,
+  "backgroundColor": props?.style?.background || theme.background,
   "color": props.echartsOption.data?.map(data => data.color),
    "tooltip": props.tooltip&&{
     "trigger": "axis",

client/packages/lowcoder-design/src/components/colorSelect/index.tsx

@@ -29,7 +29,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
       dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
       changeColor && changeColor(toHex(rgbaColor));
     }, 200),
-    [dispatch]
+    [dispatch,changeColor]
   );
   return (
     <Popover

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -2,6 +2,7 @@ import Api from "./api";
 import { AxiosPromise } from "axios";
 import { ApiResponse, GenericApiResponse } from "./apiResponses";
 import { trans } from "i18n";
+import { JSONObject } from "@lowcoder-ee/util/jsonTypes";
 
 export type FetchCommonSettingPayload = {
   orgId: string;
@@ -43,58 +44,70 @@ export interface ThemeDetail {
   canvas: string; // app bg-color
   primarySurface: string; // comp bg-color
   borderRadius: string;
+  borderColor?: string;
+  borderWidth?: string;
+  borderStyle?: string;
   chart?: string;
   margin?: string;
   padding?: string;
   gridColumns?: string; //Added By Aqib Mirza
   textSize?: string;
+  fontFamily?: string;
   animation?: string;
   animationDelay?: string;
   animationDuration?: string;
   opacity?: string;
   boxShadow?: string;
   boxShadowColor?: string;
   animationIterationCount?: string;
+  background?:string;
+  border?:string;
+  accent?:string;
+  validate?:string;
+  components?: Record<string, JSONObject>;
 }
 
 export function getThemeDetailName(key: keyof ThemeDetail) {
   switch (key) {
-    case "primary":
-      return trans("themeDetail.primary");
-    case "textDark":
-      return trans("themeDetail.textDark");
-    case "textLight":
-      return trans("themeDetail.textLight");
-    case "canvas":
-      return trans("themeDetail.canvas");
-    case "primarySurface":
-      return trans("themeDetail.primarySurface");
-    case "borderRadius":
-      return trans("themeDetail.borderRadius");
-    case "margin":	
-      return trans("style.margin");	
-    case "padding":	
-      return trans("style.padding");
-    //Added By Aqib Mirza
-    case "gridColumns":
-      return trans("themeDetail.gridColumns");
-    case "textSize":
-      return trans("style.textSize");
+    case "primary": return trans("themeDetail.primary");
+    case "textDark": return trans("themeDetail.textDark");
+    case "textLight": return trans("themeDetail.textLight");
+    case "canvas": return trans("themeDetail.canvas");
+    case "primarySurface": return trans("themeDetail.primarySurface");
+    case "borderRadius": return trans("themeDetail.borderRadius");
+    case "borderColor": return trans("themeDetail.borderColor");
+    case "borderWidth": return trans("themeDetail.borderWidth");
+    case "borderStyle": return trans("themeDetail.borderStyle");
+    case "fontFamily": return trans("themeDetail.fontFamily");
+    case "margin": return trans("style.margin");	
+    case "padding":	return trans("style.padding");
+    case "gridColumns": return trans("themeDetail.gridColumns");
+    case "textSize": return trans("style.textSize");
   }
   return "";
 }
 
 export function isThemeColorKey(key: string) {
+  console.log("key", key)
   switch (key as keyof ThemeDetail) {
     case "primary":
     case "textDark":
     case "textLight":
     case "canvas":
     case "primarySurface":
-    case "margin":	
-    case "padding":
-    case "gridColumns": //Added By Aqib Mirza
-    case "textSize":
+    case "accent":
+    case "validate":
+    // case "borderRadius":
+    case "borderColor":
+    // case "borderWidth":
+    // case "borderStyle":
+    // case "fontFamily":
+    // case "margin":	
+    // case "padding":
+    // case "gridColumns":
+    // case "textSize":
+    case "background" :
+    case "border":
       return true;
   }
   return false;